From 14739fb9e1d06897e5805d1f5c3c5a5194be80c3 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date: Thu, 23 Sep 2021 13:42:25 +0200
Subject: [PATCH] feat(deltagare): Moved around content between tabs inside
 deltagare-card. (TV-638)

Squashed commit of the following:

commit 8466394d617fa573663f3d199414354394d22b31
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 22 11:42:32 2021 +0200

    Moved around content for deltagare-card
---
 .../deltagare-card.component.html             | 467 +++++++++---------
 .../deltagare-card.component.scss             |   7 +-
 .../src/styles/variables/_z-index.scss        |   1 +
 3 files changed, 244 insertions(+), 231 deletions(-)

diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html
index 4732acc..a78f01b 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html
@@ -1,128 +1,159 @@
 <msfa-layout>
-  <section class="deltagare-card">
-    <div *ngIf="deltagare$ | async as deltagare; else loadingRef">
-      <digi-typography>
-        <header class="deltagare-card__header">
-          <msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
-          <h1>Deltagarinformation</h1>
-        </header>
-        <digi-navigation-tabs af-aria-label="Deltagarinformation">
-          <digi-navigation-tab af-aria-label="Om deltagaren" af-id="deltagare-card-personuppgifter">
-            <div class="deltagare-card__tab-contents">
-              <div class="deltagare-card__tab-column">
-                <h2>Personuppgifter</h2>
-                <dl>
-                  <dt>Namn:</dt>
-                  <dd *ngIf="deltagare.fullName; else emptyDD">{{ deltagare.fullName }}</dd>
-                  <dt>Personnummer:</dt>
-                  <dd *ngIf="deltagare.ssn; else emptyDD">
-                    <msfa-hide-text
-                      symbols="********-****"
-                      [changingText]="deltagare.ssn"
-                      ariaLabelType="personnummer"
-                    ></msfa-hide-text>
-                  </dd>
-                  <ng-container *ngFor="let address of deltagare.addresses">
-                    <dt>{{address.type}}:</dt>
-                    <dd>
-                      <address>
-                        {{ address.street }}<br />
-                        {{ address.postalCode }} {{ address.city }}
-                      </address>
-                    </dd>
-                  </ng-container>
-                  <dt>Telefon:</dt>
-                  <ng-container *ngIf="deltagare.phoneNumbers?.length; else emptyDD">
-                    <ng-container *ngFor="let phoneNumber of deltagare.phoneNumbers">
-                      <dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd>
-                    </ng-container>
-                  </ng-container>
-                  <dt>E-postadress:</dt>
-                  <dd *ngIf="deltagare.email; else emptyDD">
-                    <a href="mailto:{{deltagare.email}}">{{ deltagare.email }}</a>
-                  </dd>
-                </dl>
-              </div>
-              <div class="deltagare-card__tab-column">
-                <h2>Behov och språk</h2>
-                <dl>
-                  <dt>Funktionsnedsättningar:</dt>
-                  <ng-container *ngIf="deltagare.disabilities.length; else emptyDD">
-                    <dd *ngFor="let disability of deltagare.disabilities">
-                      <span>{{ disability.title }}</span>
-                      <digi-ng-popover
-                        *ngIf="disability.description"
-                        class="deltagare-card__popover"
-                        [afRelativeIconSize]="true"
-                        >{{ disability.description }}</digi-ng-popover
-                      >
-                    </dd>
-                  </ng-container>
-                </dl>
-                <dl>
-                  <dt>Tolkbehov:</dt>
+  <digi-typography>
+    <section *ngIf="deltagare$ | async as deltagare; else loadingRef" class="deltagare-card">
+      <header class="deltagare-card__header">
+        <msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
+        <h1>Deltagarinformation</h1>
+      </header>
+      <digi-navigation-tabs af-aria-label="Deltagarinformation">
+        <digi-navigation-tab af-aria-label="Deltagare & tjänst" af-id="deltagare-card-personuppgifter">
+          <div class="deltagare-card__tab-contents">
+            <div class="deltagare-card__tab-column">
+              <h2>Personuppgifter</h2>
+              <dl>
+                <dt>Namn:</dt>
+                <dd *ngIf="deltagare.fullName; else emptyDD">{{ deltagare.fullName }}</dd>
+                <dt>Personnummer:</dt>
+                <dd *ngIf="deltagare.ssn; else emptyDD">
+                  <msfa-hide-text
+                    symbols="********-****"
+                    [changingText]="deltagare.ssn"
+                    ariaLabelType="personnummer"
+                  ></msfa-hide-text>
+                </dd>
+                <ng-container *ngFor="let address of deltagare.addresses">
+                  <dt>{{address.type}}:</dt>
                   <dd>
-                    {{deltagare.avropInformation.tolkbehov ? 'Ja (' + deltagare.avropInformation.tolkbehov + ')' :
-                    'Nej'}}
+                    <address>
+                      {{ address.street }}<br />
+                      {{ address.postalCode }} {{ address.city }}
+                    </address>
                   </dd>
-                  <dt>Språkstöd:</dt>
-                  <dd>
-                    {{deltagare.avropInformation.sprakstod ? 'Ja (' + deltagare.avropInformation.sprakstod + ')' :
-                    'Nej'}}
-                  </dd>
-                  <dt>Språk jag kan använda på jobbet:</dt>
-                  <dd *ngIf="deltagare.workLanguages.length else emptyDD">{{ deltagare.workLanguages.join(', ')}}</dd>
-                </dl>
-              </div>
-              <div class="deltagare-card__tab-column">
-                <h2>Om tjänsten</h2>
-                <dl>
-                  <dt>Tillhörande tjänst:</dt>
-                  <dd *ngIf="deltagare.avropInformation.tjanst; else emptyDD">
-                    {{ deltagare.avropInformation.tjanst }}
-                  </dd>
-                  <dt>Datum för tjänstens början:</dt>
-                  <dd *ngIf="deltagare.avropInformation.startDate; else emptyDD">
-                    <digi-typography-time [afDateTime]="deltagare.avropInformation.startDate"></digi-typography-time>
-                  </dd>
-                  <dt>Datum för tjänstens slut:</dt>
-                  <dd *ngIf="deltagare.avropInformation.endDate; else emptyDD">
-                    <digi-typography-time [afDateTime]="deltagare.avropInformation.endDate"></digi-typography-time>
-                  </dd>
-                  <dt>Deltagandefrekvens:</dt>
-                  <dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
-                    {{ deltagare.avropInformation.participationFrequency }}
-                  </dd>
-                  <dt>Nivå:</dt>
-                  <dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
-                    {{ deltagare.avropInformation.trackName }}
-                  </dd>
-                  <dt>Utförande verksamhet:</dt>
-                  <dd *ngIf="deltagare.avropInformation.utforandeVerksamhet; else emptyDD">
-                    {{ deltagare.avropInformation.utforandeVerksamhet }}
-                  </dd>
-                  <dt>Utförande adress:</dt>
-                  <dd *ngIf="deltagare.avropInformation.utforandeAdress; else emptyDD">
-                    {{ deltagare.avropInformation.utforandeAdress }}
-                  </dd>
-                  <dt>Genomförandereferens:</dt>
-                  <dd *ngIf="deltagare.avropInformation.genomforandeReferens; else emptyDD">
-                    {{ deltagare.avropInformation.genomforandeReferens }}
-                  </dd>
-                </dl>
-              </div>
+                </ng-container>
+                <dt>Telefon:</dt>
+                <ng-container *ngIf="deltagare.phoneNumbers?.length; else emptyDD">
+                  <ng-container *ngFor="let phoneNumber of deltagare.phoneNumbers">
+                    <dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd>
+                  </ng-container>
+                </ng-container>
+                <dt>E-postadress:</dt>
+                <dd *ngIf="deltagare.email; else emptyDD">
+                  <a href="mailto:{{deltagare.email}}">{{ deltagare.email }}</a>
+                </dd>
+              </dl>
             </div>
-          </digi-navigation-tab>
-          <digi-navigation-tab af-aria-label="Erfarenheter" af-id="deltagare-card-matchningsuppgifter">
-            <div class="deltagare-card__tab-contents">
-              <div class="deltagare-card__tab-column">
-                <h2>Arbetslivserfarenhet</h2>
-                <ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;">
-                  <ul
-                    class="deltagare-card__experience-list"
-                    *ngIf="firstVisibleWorkExperiences.length; else emptyText;"
+            <div class="deltagare-card__tab-column">
+              <h2>Om tjänsten</h2>
+              <dl>
+                <dt>Tillhörande tjänst:</dt>
+                <dd *ngIf="deltagare.avropInformation.tjanst; else emptyDD">{{ deltagare.avropInformation.tjanst }}</dd>
+                <dt>Datum för tjänstens början:</dt>
+                <dd *ngIf="deltagare.avropInformation.startDate; else emptyDD">
+                  <digi-typography-time [afDateTime]="deltagare.avropInformation.startDate"></digi-typography-time>
+                </dd>
+                <dt>Datum för tjänstens slut:</dt>
+                <dd *ngIf="deltagare.avropInformation.endDate; else emptyDD">
+                  <digi-typography-time [afDateTime]="deltagare.avropInformation.endDate"></digi-typography-time>
+                </dd>
+                <dt>Deltagandefrekvens:</dt>
+                <dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
+                  {{ deltagare.avropInformation.participationFrequency }}
+                </dd>
+                <dt>Nivå:</dt>
+                <dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
+                  {{ deltagare.avropInformation.trackName }}
+                </dd>
+                <dt>Utförande verksamhet:</dt>
+                <dd *ngIf="deltagare.avropInformation.utforandeVerksamhet; else emptyDD">
+                  {{ deltagare.avropInformation.utforandeVerksamhet }}
+                </dd>
+                <dt>Utförande adress:</dt>
+                <dd *ngIf="deltagare.avropInformation.utforandeAdress; else emptyDD">
+                  {{ deltagare.avropInformation.utforandeAdress }}
+                </dd>
+                <dt>Genomförandereferens:</dt>
+                <dd *ngIf="deltagare.avropInformation.genomforandeReferens; else emptyDD">
+                  {{ deltagare.avropInformation.genomforandeReferens }}
+                </dd>
+              </dl>
+            </div>
+            <div class="deltagare-card__tab-column">
+              <h2>Handledare</h2>
+              <dl>
+                <dt>Tilldelad handledare:</dt>
+                <dd *ngIf="deltagare.avropInformation.handledare; else emptyDD">
+                  {{ deltagare.avropInformation.handledare }}
+                </dd>
+              </dl>
+            </div>
+          </div>
+        </digi-navigation-tab>
+        <digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
+          <div class="deltagare-card__select-report">
+            <h3>Skapa ny rapport</h3>
+            <p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
+            <form [formGroup]="reportPickerFormGroup">
+              <digi-ng-form-select
+                [formControlName]="reportsFormControlName"
+                afLabel="Välj rapporttyp"
+                afPlaceholder="Välj rapporttyp"
+                [afSelectItems]="selectableReportTypes"
+                [afDisableValidStyle]="true"
+                [afRequired]="true"
+                [afInvalid]="reportsFormControl.invalid && reportsFormControl.touched"
+              >
+              </digi-ng-form-select>
+              <digi-form-validation-message
+                af-variation="error"
+                *ngIf="reportsFormControl.invalid && reportsFormControl.touched"
+              >
+                Du måste välja en rapporttyp
+              </digi-form-validation-message>
+            </form>
+          </div>
+          <div class="deltagare-card__cta-wrapper">
+            <digi-ng-link-button
+              afText="Skapa ny rapport"
+              (click)="onFormSubmitted($event, reportsFormControl.value, deltagare.id)"
+            ></digi-ng-link-button>
+          </div>
+          <div>
+            <h3>Inskickade rapporter</h3>
+            <msfa-reports
+              *ngIf="reportsData$ | async as reportsData, else loadingRef"
+              [reports]="reportsData.data"
+              [paginationMeta]="reportsData?.meta"
+              (paginated)="setNewPage($event)"
+            ></msfa-reports>
+          </div>
+        </digi-navigation-tab>
+        <digi-navigation-tab af-aria-label="Erfarenheter" af-id="deltagare-card-matchningsuppgifter">
+          <div class="deltagare-card__tab-contents">
+            <div class="deltagare-card__tab-column">
+              <h2>Arbetslivserfarenhet</h2>
+              <ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;">
+                <ul class="deltagare-card__experience-list" *ngIf="firstVisibleWorkExperiences.length; else emptyText;">
+                  <li *ngFor="let workExperience of firstVisibleWorkExperiences">
+                    <h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
+                    <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
+                    <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
+                    {{ workExperience.profession }}
+                    <p>{{ workExperience.description }}</p>
+                  </li>
+                </ul>
+              </ng-container>
+              <ng-container *ngIf="hiddenWorkExperiences$ | async as hiddenWorkExperiences">
+                <digi-ng-layout-expansion-panel
+                  class="deltagare-card__accordion"
+                  [afExpanded]="accordionExpanded"
+                  (click)="toggleAccordionExpanded()"
+                  *ngIf="hiddenWorkExperiences.length"
+                >
+                  <span class="deltagare-card__accordion-trigger" data-slot-trigger
+                    >{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
                   >
-                    <li *ngFor="let workExperience of firstVisibleWorkExperiences">
+                  <ul class="deltagare-card__experience-list">
+                    <li *ngFor="let workExperience of hiddenWorkExperiences">
                       <h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
                       <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
                       <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
@@ -130,120 +161,96 @@
                       <p>{{ workExperience.description }}</p>
                     </li>
                   </ul>
+                </digi-ng-layout-expansion-panel>
+              </ng-container>
+            </div>
+            <div class="deltagare-card__tab-column">
+              <h2>Utbildning</h2>
+              <dl>
+                <dt>Högsta utbildningsnivå:</dt>
+                <dd *ngIf="deltagare.highestEducation.level; else emptyDD">
+                  {{ deltagare.highestEducation.level.description }}: {{ deltagare.highestEducation.sunKod.description
+                  }}
+                </dd>
+                <h3 class="deltagare-card__subheading deltagare-card__subheading--with-margin">Utbildningar:</h3>
+                <ul class="deltagare-card__experience-list" *ngIf="deltagare.educations.length; else emptyText">
+                  <li *ngFor="let education of deltagare.educations">
+                    <h4 class="deltagare-card__subheading">{{ education.organizer }}</h4>
+                    <digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time> -
+                    <digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time><br />
+                    {{ education.education}}
+                    <p>{{ education.description }}</p>
+                  </li>
+                </ul>
+              </dl>
+            </div>
+            <div class="deltagare-card__tab-column">
+              <h2>Körkort</h2>
+              <dl>
+                <dt>Har körkort</dt>
+                <dd>{{deltagare.driversLicense.licenses.length ? 'Ja' : 'Nej'}}</dd>
+                <ng-container *ngIf="deltagare.driversLicense.licenses.length">
+                  <dt>Körkortsklasser</dt>
+                  <dd>{{deltagare.driversLicense.licenses.join(', ')}}</dd>
+                  <dt>Tillgång till bil</dt>
+                  <dd>{{deltagare.driversLicense.accessToCar ? 'Ja' : 'Nej'}}</dd>
                 </ng-container>
-                <ng-container *ngIf="hiddenWorkExperiences$ | async as hiddenWorkExperiences">
-                  <digi-ng-layout-expansion-panel
-                    class="deltagare-card__accordion"
-                    [afExpanded]="accordionExpanded"
-                    (click)="toggleAccordionExpanded()"
-                    *ngIf="hiddenWorkExperiences.length"
-                  >
-                    <span class="deltagare-card__accordion-trigger" data-slot-trigger
-                      >{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
+              </dl>
+            </div>
+          </div>
+        </digi-navigation-tab>
+        <digi-navigation-tab af-aria-label="Känsliga uppgifter">
+          <div class="deltagare-card__tab-contents">
+            <div class="deltagare-card__tab-column">
+              <h2>Funktionsnedsättningar</h2>
+
+              <dl *ngIf="deltagare.disabilities.length; else emptyText">
+                <ng-container *ngFor="let disability of deltagare.disabilities; let index = index">
+                  <dt>Funktionsnedsättning {{index + 1}}</dt>
+                  <dd>
+                    <span>{{ disability.title }}</span>
+                    <digi-ng-popover
+                      *ngIf="disability.description"
+                      class="deltagare-card__popover"
+                      [afRelativeIconSize]="true"
+                      >{{ disability.description }}</digi-ng-popover
                     >
-                    <ul class="deltagare-card__experience-list">
-                      <li *ngFor="let workExperience of hiddenWorkExperiences">
-                        <h3 class="deltagare-card__subheading">{{ workExperience.employer }}</h3>
-                        <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
-                        <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
-                        {{ workExperience.profession }}
-                        <p>{{ workExperience.description }}</p>
-                      </li>
-                    </ul>
-                  </digi-ng-layout-expansion-panel>
-                </ng-container>
-              </div>
-              <div class="deltagare-card__tab-column">
-                <h2>Utbildning</h2>
-                <dl>
-                  <dt>Högsta utbildningsnivå:</dt>
-                  <dd *ngIf="deltagare.highestEducation.level; else emptyDD">
-                    {{ deltagare.highestEducation.level.description }}: {{ deltagare.highestEducation.sunKod.description
-                    }}
                   </dd>
-                  <h3 class="deltagare-card__subheading deltagare-card__subheading--with-margin">Utbildningar:</h3>
-                  <ul class="deltagare-card__experience-list" *ngIf="deltagare.educations.length; else emptyText">
-                    <li *ngFor="let education of deltagare.educations">
-                      <h4 class="deltagare-card__subheading">{{ education.organizer }}</h4>
-                      <digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time> -
-                      <digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time><br />
-                      {{ education.education}}
-                      <p>{{ education.description }}</p>
-                    </li>
-                  </ul>
-                </dl>
-              </div>
-              <div class="deltagare-card__tab-column">
-                <h2>Körkortsinformation</h2>
-                <dl>
-                  <dt>Har körkort</dt>
-                  <dd>{{deltagare.driversLicense.licenses.length ? 'Ja' : 'Nej'}}</dd>
-                  <ng-container *ngIf="deltagare.driversLicense.licenses.length">
-                    <dt>Körkortsklasser</dt>
-                    <dd>{{deltagare.driversLicense.licenses.join(', ')}}</dd>
-                    <dt>Tillgång till bil</dt>
-                    <dd>{{deltagare.driversLicense.accessToCar ? 'Ja' : 'Nej'}}</dd>
-                  </ng-container>
-                </dl>
-              </div>
+                </ng-container>
+              </dl>
             </div>
-          </digi-navigation-tab>
+            <div class="deltagare-card__tab-column">
+              <h2>Språk</h2>
+              <dl>
+                <dt>Behov av tolk:</dt>
+                <dd>
+                  {{deltagare.avropInformation.tolkbehov ? 'Ja (' + deltagare.avropInformation.tolkbehov + ')' : 'Nej'}}
+                </dd>
+                <dt>Behov av språkstöd:</dt>
+                <dd>
+                  {{deltagare.avropInformation.sprakstod ? 'Ja (' + deltagare.avropInformation.sprakstod + ')' : 'Nej'}}
+                </dd>
+                <dt>Språk som kan användas på jobbet:</dt>
+                <dd *ngIf="deltagare.workLanguages.length else emptyDD">{{ deltagare.workLanguages.join(', ')}}</dd>
+              </dl>
+            </div>
+          </div>
+        </digi-navigation-tab>
+      </digi-navigation-tabs>
+    </section>
+  </digi-typography>
+</msfa-layout>
 
-          <digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
-            <div class="deltagare-card__select-report">
-              <h3>Skapa ny rapport</h3>
-              <p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
-              <form [formGroup]="reportPickerFormGroup">
-                <digi-ng-form-select
-                  [formControlName]="reportsFormControlName"
-                  afLabel="Välj rapporttyp"
-                  afPlaceholder="Välj rapporttyp"
-                  [afSelectItems]="selectableReportTypes"
-                  [afDisableValidStyle]="true"
-                  [afRequired]="true"
-                  [afInvalid]="reportsFormControl.invalid && reportsFormControl.touched"
-                >
-                </digi-ng-form-select>
-                <digi-form-validation-message
-                  af-variation="error"
-                  *ngIf="reportsFormControl.invalid && reportsFormControl.touched"
-                >
-                  Du måste välja en rapporttyp
-                </digi-form-validation-message>
-              </form>
-            </div>
-            <div class="deltagare-card__cta-wrapper">
-              <digi-ng-link-button
-                afText="Skapa ny rapport"
-                (click)="onFormSubmitted($event, reportsFormControl.value, deltagare.id)"
-              ></digi-ng-link-button>
-            </div>
-            <div>
-              <h3>Inskickade rapporter</h3>
-              <msfa-reports
-                *ngIf="reportsData$ | async as reportsData, else loadingRef"
-                [reports]="reportsData.data"
-                [paginationMeta]="reportsData?.meta"
-                (paginated)="setNewPage($event)"
-              ></msfa-reports>
-            </div>
-          </digi-navigation-tab>
-        </digi-navigation-tabs>
-      </digi-typography>
-    </div>
-  </section>
-
-  <ng-template #loadingRef>
-    <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
-  </ng-template>
-  <ng-template #emptyDD>
-    <dd>
-      <span aria-hidden="true">-</span>
-      <span class="msfa__a11y-sr-only">Info saknas</span>
-    </dd>
-  </ng-template>
-  <ng-template #emptyText>
+<ng-template #loadingRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
+</ng-template>
+<ng-template #emptyDD>
+  <dd>
     <span aria-hidden="true">-</span>
     <span class="msfa__a11y-sr-only">Info saknas</span>
-  </ng-template>
-</msfa-layout>
+  </dd>
+</ng-template>
+<ng-template #emptyText>
+  <span aria-hidden="true">-</span>
+  <span class="msfa__a11y-sr-only">Info saknas</span>
+</ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss
index b619f1e..dddea31 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss
@@ -1,5 +1,6 @@
-@import 'variables/gutters';
 @import 'mixins/list';
+@import 'variables/gutters';
+@import 'variables/z-index';
 
 .deltagare-card {
   &__tab-contents {
@@ -55,6 +56,10 @@
   &__popover {
     display: inline-block;
     margin-left: var(--digi--layout--gutter--s);
+
+    ::ng-deep .digi-ng-popover__container {
+      z-index: $msfa__z-index-popover;
+    }
   }
 
   &__header,
diff --git a/apps/mina-sidor-fa/src/styles/variables/_z-index.scss b/apps/mina-sidor-fa/src/styles/variables/_z-index.scss
index a159692..70ff7de 100644
--- a/apps/mina-sidor-fa/src/styles/variables/_z-index.scss
+++ b/apps/mina-sidor-fa/src/styles/variables/_z-index.scss
@@ -6,3 +6,4 @@ $msfa__z-index-selector-panel: 1;
 $msfa__z-index-backdrop: 1000;
 $msfa__z-index-skip-to-content: 2;
 $msfa__z-index-toast: 9999;
+$msfa__z-index-popover: 1;