always display verified email domain section in my-orcid (#2333)

Co-authored-by: Angel Montenegro <[email protected]>

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

@@ -1,5 +1,7 @@
 <div [ngClass]="{ 'row-with-privacy': hideVisibility }">
-  <div class="line" [ngClass]="{ bold: bold }"><ng-content></ng-content></div>
+  <div class="line" [ngClass]="{ bold: bold, italic: italic }">
+    <ng-content></ng-content>
+  </div>
   <app-panel-privacy
     *ngIf="visibility && hideVisibility"
     [visibility]="visibility"

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

@@ -25,6 +25,10 @@ app-panel-privacy {
   font-weight: bold;
 }
 
+.italic {
+  font-style: italic;
+}
+
 hr {
   margin: 8px 0 8px 0;
   height: 1px;

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

@@ -12,6 +12,7 @@ import { VisibilityStrings } from 'src/app/types/common.endpoint'
 export class PanelElementComponent implements OnInit {
   @Input() visibility: VisibilityStrings | ''
   @Input() bold: Boolean
+  @Input() italic: Boolean
   @Input() hideVisibility: Boolean = true
   @Input() isPublicRecord: string
   @Input() separator: Boolean = false

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

@@ -136,6 +136,7 @@
         Emails & domains
       </h3>
       <app-panel-data
+        class="email-section"
         *ngIf="
           userRecord?.emails?.emails?.length > 0 &&
           !isPublicRecord &&
@@ -152,12 +153,7 @@ <h4 header i18n="@@side-bar.emailAddresses">Email addresses</h4>
         </app-panel-element>
       </app-panel-data>
       <app-panel-data
-        *ngIf="
-          userRecord?.emails?.emailDomains?.length > 0 &&
-          !isPublicRecord &&
-          emailDomainsTogglz &&
-          !loadingTogglz
-        "
+        *ngIf="!isPublicRecord && emailDomainsTogglz && !loadingTogglz"
       >
         <h4 header i18n="@@side-bar.verifiedEmailDomains">
           Verified email domains
@@ -171,6 +167,12 @@ <h4 header i18n="@@side-bar.verifiedEmailDomains">
           [separator]="!last"
           >{{ emailDomain.value }}
         </app-panel-element>
+        <app-panel-element
+          [italic]="true"
+          *ngIf="!userRecord?.emails?.emailDomains?.length"
+          i18n="@@side-bar.noVerifiedEmailDomains"
+          >No verified email domains</app-panel-element
+        >
       </app-panel-data>
     </app-panel>
 

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

@@ -55,3 +55,7 @@ hr {
     margin: 16px 0 16px 0;
   }
 }
+
+.email-section {
+  padding-bottom: 0;
+}