Visibility widget (#1948)

* 8597-prod-cern-has-reported-experiencing-an-error-with-their-inspire-integration-which-seems-related-to-the-recent-google-tag-manager

* Enable new visibility widget

.gitignore

@@ -3,7 +3,6 @@
 # war file builds
 target/**
 temp/**
-src/**
 
 # compiled output
 /dist

src/app/app.module.ts

@@ -9,7 +9,7 @@ import { AppComponent } from './app.component'
 import { CoreModule } from './core/core.module'
 import { LayoutModule } from './layout/layout.module'
 import { BidiModule } from '@angular/cdk/bidi'
-import { PseudoModule } from 'src/locale/i18n.pseudo.component'
+import { PseudoModule } from 'src/locale/i18n.pseudo.component';
 
 @NgModule({
   declarations: [AppComponent],

src/app/cdk/panel/panel-privacy/panel-privacy.component.html

@@ -1,14 +1,17 @@
 <div class="container">
   <div
     class="dot everyone"
+    *ngIf="visibility === 'PUBLIC'"
     [ngClass]="{ active: visibility === 'PUBLIC' }"
   ></div>
   <div
     class="dot trusted"
+    *ngIf="visibility === 'LIMITED'"
     [ngClass]="{ active: visibility === 'LIMITED' }"
   ></div>
   <div
     class="dot private"
+    *ngIf="visibility === 'PRIVATE'"
     [ngClass]="{ active: visibility === 'PRIVATE' }"
   ></div>
 </div>

src/app/cdk/panel/panel-privacy/panel-privacy.component.scss

@@ -1,5 +1,4 @@
 .container {
-  width: 40px;
   height: 8px;
   border-radius: 8px;
   display: flex;

src/app/cdk/panel/panel-privacy/panel-privacy.component.scss-theme.scss

@@ -8,8 +8,6 @@
   $background: map-get($theme, background);
 
   .container {
-    border-color: map-get($background, 'ui-background-lightest');
-    background-color: map-get($background, 'ui-background-lightest');
 
     .dot {
       background-color: map-get($background, 'ui-background');

src/app/cdk/panel/panel.module.ts

@@ -19,11 +19,11 @@ import { PanelExpandButtonsComponent } from './panel-expand-buttons/panel-expand
 import { MatMenuModule } from '@angular/material/menu'
 import { SortLabelPipe } from './sort-label.pipe'
 import { MatCheckboxModule } from '@angular/material/checkbox'
-import { PrivacySelectorModule } from '../privacy-selector/privacy-selector.module'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatProgressBarModule } from '@angular/material/progress-bar'
 import { SharedModule } from '../../shared/shared.module'
 import { AppPanelActivityActionAriaLabelPipe } from '../../shared/pipes/app-panel-activity-action-aria-label/app-panel-activity-action-aria-label.pipe'
+import { VisibilitySelectorModule } from '../visibility-selector/visibility-selector.module'
 
 @NgModule({
   declarations: [
@@ -47,7 +47,7 @@ import { AppPanelActivityActionAriaLabelPipe } from '../../shared/pipes/app-pane
     MatDividerModule,
     MatMenuModule,
     MatCheckboxModule,
-    PrivacySelectorModule,
+    VisibilitySelectorModule,
     ReactiveFormsModule,
     FormsModule,
     MatProgressBarModule,

src/app/cdk/panel/panel/panel.component.html

@@ -56,16 +56,17 @@
     >
       <ng-container *ngIf="visibilityError">
         <mat-icon
-          class="large-material-icon error cy-inconsistency-issue"
+          class="large-material-icon error cy-inconsistency-issue material-icons-outlined"
           [matTooltip]="tooltipLabelVisibilityError"
           >info</mat-icon
         >
       </ng-container>
-      <app-privacy-selector
-        [whiteBackground]="true"
+      <app-visibility-selector
         (ngModelChange)="updateVisibility($event)"
         [ngModel]="visibility"
-      ></app-privacy-selector>
+        [multiEdit]="stackSiblings.length > 1 ? 'multi' : 'single'"
+        [visibilityError]="visibilityError"
+      ></app-visibility-selector>
     </ng-container>
 
     <!-- [CUSTOM CONTROLS] FOR `PEER REVIEWS` AND `RESEARCH RESOURCES` -->

src/app/cdk/panel/panel/panel.component.scss-theme.scss

@@ -34,7 +34,7 @@
   }
 
   .error {
-    color: map-get($foreground, 'state-notice-dark');
+    color: map-get($foreground, 'state-warning-dark')
   }
 }
 @include panel-theme($orcid-app-theme);

src/app/cdk/panel/panel/panel.component.spec.ts

@@ -24,6 +24,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
 import { MatDialogHarness } from '@angular/material/dialog/testing'
 import { NoopAnimationsModule } from '@angular/platform-browser/animations'
 import { ModalBiographyComponent } from '../../../record/components/top-bar/modals/modal-biography/modal-biography.component'
+import { MatMenuModule } from '@angular/material/menu'
 
 describe('PanelComponent', () => {
   let component: PanelComponent
@@ -39,6 +40,8 @@ describe('PanelComponent', () => {
         NoopAnimationsModule,
         RouterTestingModule,
         SharedModule,
+        MatMenuModule
+
       ],
       declarations: [PanelComponent],
       providers: [

src/app/cdk/panel/panel/panel.component.ts

@@ -314,5 +314,6 @@ export class PanelComponent implements OnInit {
           .subscribe()
         break
     }
+    this.visibilityError = false
   }
 }

src/app/cdk/platform-info/browserlist.regexp.ts

@@ -1,3 +1,2 @@
 // tslint:disable-next-line: max-line-length
-export const BROWSERLIST_REGEXP =
-  /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
+export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/