leo/batch-of-changes

src/app/cdk/panel/panel-element-source/panel-element-source.component.html

@@ -1,5 +1,5 @@
 <strong i18n="@@shared.sourceColon">Source: </strong>
-<p>
+<p class="overflow-wrap">
   <ng-container *ngIf="assertion">
     {{ assertion }}
     <i i18n="@@shared.onBehalfOf">via</i>

src/app/cdk/panel/panel-element-source/panel-element-source.component.scss

@@ -11,3 +11,7 @@ mat-divider {
   margin-top: 8px;
   margin-bottom: 8px;
 }
+
+.overflow-wrap {
+  overflow-wrap: break-word;
+}

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

@@ -8,13 +8,15 @@
     >visibility</mat-icon
   >
   <mat-icon
+    aria-hidden="false"
     class="trusted"
     *ngIf="visibility === 'LIMITED'"
     [attr.aria-label]="label"
     [ngClass]="{ active: visibility === 'LIMITED' }"
     >visibility</mat-icon
   >
   <mat-icon
+    aria-hidden="false"
     class="private"
     [attr.aria-label]="label"
     *ngIf="visibility === 'PRIVATE'"

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

@@ -4,3 +4,7 @@
   top: -4px;
   margin-top: -6px;
 }
+
+mat-icon {
+  padding-inline-start: 16px;
+}

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

@@ -32,6 +32,7 @@ import { UserService } from 'src/app/core'
 import { WINDOW } from 'src/app/cdk/window'
 import { TogglzService } from '../../../core/togglz/togglz.service'
 import { getAriaLabel } from '../../../constants'
+import { RecordBiographyService } from 'src/app/core/record-biography/record-biography.service'
 
 @Component({
   selector: 'app-panel',
@@ -136,7 +137,8 @@ export class PanelComponent implements OnInit {
     private _peerReviewService: RecordPeerReviewService,
     private _researchResourcesService: RecordResearchResourceService,
     private _worksService: RecordWorksService,
-    private _verificationEmailModalService: VerificationEmailModalService
+    private _verificationEmailModalService: VerificationEmailModalService,
+    private _recordBiographyService: RecordBiographyService
   ) {}
 
   ngOnInit(): void {
@@ -299,6 +301,15 @@ export class PanelComponent implements OnInit {
           )
           .subscribe()
         break
+      case 'top-bar':
+        this._recordBiographyService.postBiography({
+          visibility: {
+            visibility: visibility,
+          },
+          biography: {
+            value: this.userRecord.biography.biography.value,
+          }
+        }).subscribe()
     }
     this.visibilityError = false
   }

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

@@ -110,7 +110,7 @@ <h3 class="activity-header orc-font-body-large">
         </mat-icon>
         <ng-container *ngIf="!isMobile" i18n="@@shared.add"> Add </ng-container>
       </button>
-      <mat-menu #menuAdd="matMenu">
+      <mat-menu #menuAdd="matMenu" xPosition="before">
         <ng-container *ngIf="type === 'education' || type === 'qualification'">
           <button mat-menu-item (click)="add('education')">
             <ng-container i18n="@@shared.addEducation"
@@ -227,7 +227,7 @@ <h3 class="activity-header orc-font-body-large">
           Sort
         </ng-container>
       </button>
-      <mat-menu #menu="matMenu">
+      <mat-menu #menu="matMenu" xPosition="before">
         <button
           mat-menu-item
           (click)="sortChange(option)"

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]*)?)/

src/app/cdk/side-bar/side-bar/side-bar.component.html

@@ -228,7 +228,9 @@ <h3 header class="orc-font-body" i18n="@@record.keywords">Keywords</h3>
             </app-panel-element>
           </ng-container>
           <ng-container *ngIf="!keywordOpenState">
-            {{ getKeywords(userRecord.keyword.keywords).join(', ') }}
+            <div class="overflow-wrap">
+              {{ getKeywords(userRecord.keyword.keywords).join(', ') }}
+            </div>
           </ng-container>
         </ng-container>
       </app-panel-data>

src/app/cdk/side-bar/side-bar/side-bar.component.scss

@@ -26,3 +26,8 @@ app-panel:first-of-type {
 .mobile {
   height: 187px;
 }
+
+.overflow-wrap {
+  overflow-wrap: break-word;
+
+}

src/app/record/components/affiliation-stack/affiliation-stack.component.scss

@@ -24,6 +24,7 @@
 
   h4 {
     margin: 0;
+    padding-inline-end: 16px;
   }
 
   h4.mobile {
@@ -32,6 +33,7 @@
 
   mat-icon {
     margin-inline-end: 4px;
+    flex-shrink: 0;
   }
 
   .vl {

src/app/record/components/top-bar/top-bar.component.html

@@ -114,6 +114,8 @@ <h1 class="name" *ngIf="creditName">
       [userRecord]="userRecord"
       [type]="'top-bar'"
       id="biography-panel"
+      [visibility]="userRecord.biography.visibility.visibility"
+      [editableVisibilityControl]="true"
     >
       <h2
         header
@@ -123,9 +125,7 @@ <h1 class="name" *ngIf="creditName">
         Biography
       </h2>
       <app-panel-data *ngIf="!!userRecord.biography.biography">
-        <app-panel-element
-          [visibility]="userRecord.biography.visibility.visibility"
-        >
+        <app-panel-element>
           <span
             id="biography-value"
             class="mat-body-1"

src/app/types/record-biography.endpoint.ts

@@ -6,15 +6,15 @@ import {
 } from './common.endpoint'
 
 export interface Biography {
-  lastModifiedDate: LastModifiedDate
-  createdDate: CreatedDate
-  content: string
+  lastModifiedDate?: LastModifiedDate
+  createdDate?: CreatedDate
+  content?: string
   visibility: string
   path?: any
 }
 
 export interface BiographyEndPoint {
   visibility: Visibility
-  biography: Value
-  errors: string[]
+  biography?: Value
+  errors?: string[]
 }