Merge pull request 'OZG-5833-Barrierefreiheit-Layoutanpassungen' (#709) from...

Merge pull request 'OZG-5833-Barrierefreiheit-Layoutanpassungen' (#709) from OZG-5833-Barrierefreiheit-Layoutanpassungen into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/709


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html

@@ -23,14 +23,14 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<div class="horizontal">
-  <div alfa-aktenzeichen class="ellipsis" [vorgang]="vorgang"></div>
+<div class="flex flex-shrink" alfa-aktenzeichen [vorgang]="vorgang"></div>
 <ng-container *ngIf="vorgang | hasLink: linkRel.SET_AKTENZEICHEN">
+  <div class="relative w-12">
     <ozgcloud-icon-button-primary
       svgIcon="edit"
       tooltip="Aktenzeichen bearbeiten"
       data-test-id="aktenzeichen-editieren"
       (clickEmitter)="onEdit()"
     ></ozgcloud-icon-button-primary>
-  </ng-container>
   </div>
+</ng-container>

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.scss

@@ -22,21 +22,8 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 
-.horizontal {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 300;
-}
-
-.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 // Workaround Material's fixed 48px height
 :host ::ng-deep ozgcloud-icon-button-primary button {
   position: absolute;
-  top: -24px;
+  top: -14px;
 }

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-antragsteller/vorgang-detail-antragsteller.component.html

@@ -23,13 +23,13 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<h3 class="font-medium leading-6 mb-2">Antragsteller</h3>
+<h3 class="mb-2 font-medium leading-6">Antragsteller</h3>
 <ul
   *ngIf="antragstellerExists; else noAntragsteller"
   data-test-id="antragsteller-list"
-  class="text-sm leading-6 my-1"
+  class="my-1 text-sm leading-6"
 >
-  <div class="font-medium mb-2">
+  <div class="mb-2 font-medium">
     <h4 *ngIf="!isFirma && name" data-test-id="antragsteller-name" class="my-1">
       {{ name }}
     </h4>
@@ -40,12 +40,9 @@
   <li
     *ngIf="antragstellerStrasseHausnummer || antragstellerPlzOrt"
     data-test-id="antragsteller-adresse"
-    class="flex gap-2 my-2"
+    class="my-2 flex gap-2"
   >
-    <mat-icon
-      class="material-icons-outlined"
-      aria-label="Adresse"
-      aria-hidden="false"
+    <mat-icon class="material-icons-outlined" aria-label="Adresse" aria-hidden="false"
       >location_on</mat-icon
     >
     <div class="flex flex-col">
@@ -58,34 +55,26 @@
     </div>
   </li>
   <div *ngIf="isFirma && name" class="mb-1">
-    <h4 class="my-1 font-medium">
-      Ansprechpartner
-    </h4>
+    <h4 class="my-1 font-medium">Ansprechpartner</h4>
     <p class="my-1" data-test-id="antragsteller-ansprechpartner-name">{{ name }}</p>
   </div>
-  <li *ngIf="antragstellerData.email" [title]="email" class="flex gap-2 my-2">
-    <mat-icon
-      class="material-icons-outlined"
-      aria-label="E-Mail-Adresse"
-      aria-hidden="false"
+  <li *ngIf="antragstellerData.email" [title]="antragstellerData.email" class="my-2 flex gap-2">
+    <mat-icon class="material-icons-outlined" aria-label="E-Mail-Adresse" aria-hidden="false"
       >email</mat-icon
     >
     <p data-test-id="antragsteller-email">
       {{ antragstellerData.email }}
     </p>
   </li>
-  <li *ngIf="antragstellerData.telefon" class="flex gap-2 my-2">
-    <mat-icon
-      class="material-icons-outlined"
-      aria-label="Telefonnummer"
-      aria-hidden="false"
+  <li *ngIf="antragstellerData.telefon" class="my-2 flex gap-2">
+    <mat-icon class="material-icons-outlined" aria-label="Telefonnummer" aria-hidden="false"
       >call_black</mat-icon
     >
     <p data-test-id="antragsteller-telefon">
       {{ antragstellerData.telefon }}
     </p>
   </li>
-  <li *ngIf="geburt" class="flex gap-2 my-2">
+  <li *ngIf="geburt" class="my-2 flex gap-2">
     <mat-icon
       class="material-icons-outlined"
       aria-label="Geburtsdatum und Geburtsort"

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html

@@ -26,10 +26,12 @@
 <ozgcloud-spinner [stateResource]="vorgangStateResource" class="header-spinner"></ozgcloud-spinner>
 
 <ng-container *ngIf="vorgangStateResource.resource as vorgangResource">
-  <div class="container">
+  <div
+    class="flex min-h-full grow flex-col divide-y divide-gray-200 border-l border-r border-gray-200 dark:divide-background-100 dark:border-transparent lg:flex-row lg:divide-x lg:divide-y-0"
+  >
+    <div class="grow">
       <alfa-vorgang-detail-header
         [vorgangWithEingang]="vorgangResource"
-      class="mat-typography"
         data-test-id="vorgang-detail-header"
       ></alfa-vorgang-detail-header>
 
@@ -51,7 +53,10 @@
       </div>
 
       <div class="two-column">
-      <div class="section" *ngIf="vorgangResource | hasLink: vorgangWithEingangLinkRel.FORWARDING">
+        <div
+          class="section"
+          *ngIf="vorgangResource | hasLink: vorgangWithEingangLinkRel.FORWARDING"
+        >
           <alfa-vorgang-forwarding-container
             [vorgang]="vorgangResource"
             data-test-id="forwarding-container-in-vorgang"
@@ -73,7 +78,7 @@
         </div>
       </div>
     </div>
-  <div class="right">
+    <div class="flex h-full min-w-80 flex-1 flex-col px-4 py-3">
       <alfa-vorgang-detail-antragsteller
         [antragsteller]="vorgangResource.eingang.antragsteller"
         data-test-id="vorgang-detail-antragsteller"
@@ -84,4 +89,5 @@
         data-test-id="postfach-nachrichten-container-in-vorgang"
       ></alfa-postfach-mail-list-container>
     </div>
+  </div>
 </ng-container>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss

@@ -25,27 +25,6 @@
 @import 'include-media/dist/include-media';
 @import 'variables';
 
-:host {
-  position: relative;
-  display: flex;
-  background-color: inherit;
-  width: 100%;
-}
-
-.container {
-  width: calc(100% - 300px);
-  border-left: 1px solid rgba(0, 0, 0, 0.08);
-  border-right: 1px solid rgba(0, 0, 0, 0.08);
-  min-height: calc(100vh - $header-height - $navigation-height);
-}
-
-.right {
-  right: 21px;
-  width: 300px;
-  padding: 12px 16px;
-  display: flex;
-  flex-direction: column;
-}
 
 .header-spinner {
   position: absolute;

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.ts

@@ -33,6 +33,7 @@ import { Component, Input } from '@angular/core';
   selector: 'alfa-vorgang-detail-area',
   templateUrl: './vorgang-detail-area.component.html',
   styleUrls: ['./vorgang-detail-area.component.scss'],
+  styles: [':host {@apply relative flex flex-row grow}'],
 })
 export class VorgangDetailAreaComponent {
   @Input() vorgangStateResource: StateResource<VorgangWithEingangResource>;

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-daten/vorgang-detail-antrag-data/vorgang-detail-eingang-header/vorgang-detail-eingang-header.component.html

@@ -23,7 +23,7 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<table aria-label="Eingangsdaten">
+<table aria-label="Eingangsdaten" class="text-sm">
   <tr>
     <th scope="col">Formularfeld</th>
     <th scope="col">Formulareingabe</th>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-daten/vorgang-detail-form-data-table/vorgang-detail-form-data-table.component.html

@@ -23,7 +23,7 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<table aria-label="Formulardaten" *ngIf="isObject(formData) && !isArray(formData)">
+<table class="text-sm" aria-label="Formulardaten" *ngIf="isObject(formData) && !isArray(formData)">
   <tr>
     <th scope="col">Formularfeld</th>
     <th scope="col">Formulareingabe</th>
@@ -43,7 +43,7 @@
   </tr>
 </table>
 
-<table aria-label="Formulardaten" *ngIf="isArray(formData)">
+<table class="text-sm" aria-label="Formulardaten" *ngIf="isArray(formData)">
   <tr>
     <th scope="col">Formulareingabe</th>
   </tr>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-daten/vorgang-detail-formular-daten.component.scss

@@ -24,3 +24,7 @@
 mat-tab-group {
   padding-right: 1rem;
 }
+
+::ng-deep .mat-tab-header {
+  overflow-x: scroll !important;
+}

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html

@@ -23,9 +23,13 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<alfa-vorgang-status-dot [status]="vorgang.status" class="status-dot"></alfa-vorgang-status-dot>
 
-<div class="flex flex-row items-center gap-7">
+<div class="flex flex-row">
+  <div class="flex w-12 flex-shrink-0 flex-grow-0 items-center">
+    <alfa-vorgang-status-dot [status]="vorgang.status" class="status-dot"></alfa-vorgang-status-dot>
+  </div>
+  <div class="flex flex-shrink flex-grow flex-wrap gap-x-3 gap-y-1">
+    <div class="flex flex-grow gap-7">
       <alfa-vorgang-status-text
         [status]="vorgang.status"
         data-test-id="status-text"
@@ -33,29 +37,36 @@
       ></alfa-vorgang-status-text>
       <alfa-beschieden-date-in-vorgang-container></alfa-beschieden-date-in-vorgang-container>
     </div>
-
-<div class="initial-date" data-test-id="created-at">
+    <div class="initial-date text-sm" data-test-id="created-at">
       {{ vorgang.createdAt | date: 'EEEE, d. LLLL y, H:mm' }}
     </div>
+  </div>
+</div>
 
-<alfa-vorgang-nummer class="vorgang-nummer big" [vorgang]="vorgang"></alfa-vorgang-nummer>
-
-<div class="aktenzeichen" [class.aktenzeichen--active]="hasAktenzeichen">
-  <mat-icon svgIcon="az"></mat-icon>
+<div class="ml-12 flex flex-row gap-6">
+  <div class="flex flex-grow flex-col gap-x-3 gap-y-1">
+    <h2 data-test-id="name" class="mb-1.5 mt-4 break-all text-base font-medium">
+      {{ vorgang.name }}
+    </h2>
+    <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
+    <div class="flex flex-1 flex-row gap-1">
+      <div class="flex flex-shrink-0" [class.text-gray-400]="!hasAktenzeichen">
+        <mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon>
+      </div>
       <alfa-aktenzeichen-editable
-    class="aktenzeichen-editable"
+        data-test-id="alfa-aktenzeichen-editable-button"
+        class="flex flex-grow"
+        [class.text-gray-400]="!hasAktenzeichen"
         [vorgang]="vorgang"
       ></alfa-aktenzeichen-editable>
     </div>
-
-<div data-test-id="name" class="name">
-  {{ vorgang.name }}
   </div>
-
+  <div class="mt-4 w-10 flex-shrink-0 flex-grow-0">
     <alfa-user-profile-in-vorgang-container
       *ngIf="vorgang | hasLink: linkRel.ASSIGN"
       data-test-id="vorgang-header-user-icon"
       [vorgang]="vorgang"
       class="user"
->
-</alfa-user-profile-in-vorgang-container>
+    ></alfa-user-profile-in-vorgang-container>
+  </div>
+</div>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.scss

@@ -21,92 +21,6 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-@import 'breakpoints';
-@import 'include-media/dist/include-media';
-@import 'variables';
-
 :host {
-  display: grid;
-  row-gap: 10px;
-  align-items: center;
-  grid-template-columns: 48px 1fr 8%;
-  grid-template-areas:
-    'status-dot status-text initial-date'
-    '. name user'
-    '. vorgang-nummer user'
-    '. aktenzeichen aktenzeichen';
-
-  padding: 1rem 1.5rem;
-}
-
-.name {
-  line-height: 1.4;
-  margin: 8px 0 4px 0;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-mat-icon {
-  margin: 0 0.5rem 0 -0rem;
-  height: 1.875rem;
-  min-height: 1.875rem;
-  width: 1.875rem;
-  min-width: 1.875rem;
-}
-
-.status-dot {
-  grid-area: status-dot;
-}
-
-.status-text {
-  grid-area: status-text;
-}
-
-.initial-date {
-  grid-area: initial-date;
-  justify-self: end;
-  white-space: nowrap;
-}
-
-.aktenzeichen {
-  grid-area: aktenzeichen;
-  margin-left: -2px;
-  display: flex;
-  align-items: center;
-  color: #c2c2c2;
-
-  &--active {
-    color: unset;
-  }
-
-  .aktenzeichen-editable {
-    width: calc(100% - 82px);
-  }
-}
-
-.vorgang-nummer {
-  grid-area: vorgang-nummer;
-  margin-left: -2px;
-}
-
-.name {
-  grid-area: name;
-  align-self: start;
-}
-
-.user {
-  grid-area: user;
-  align-self: start;
-  justify-self: end;
-}
-
-.status {
-  display: flex;
-  flex-direction: column;
+  @apply flex flex-col px-6 py-4;
 }
\ No newline at end of file

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.spec.ts

@@ -23,13 +23,9 @@
  */
 import { BeschiedenDateInVorgangContainerComponent } from '@alfa-client/bescheid';
 import { EMPTY_STRING, EnumToLabelPipe, HasLinkPipe } from '@alfa-client/tech-shared';
-import { getDebugElementFromFixtureByCss } from '@alfa-client/test-utils';
+import { getDebugElementFromFixtureByCss, getElementFromFixture } from '@alfa-client/test-utils';
 import { VorgangHeaderLinkRel } from '@alfa-client/vorgang-shared';
-import {
-  VorgangNummerComponent,
-  VorgangStatusDotComponent,
-  VorgangStatusTextComponent,
-} from '@alfa-client/vorgang-shared-ui';
+import { VorgangNummerComponent, VorgangStatusDotComponent, VorgangStatusTextComponent } from '@alfa-client/vorgang-shared-ui';
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
@@ -46,6 +42,9 @@ describe('VorgangDetailHeaderComponent', () => {
   let fixture: ComponentFixture<VorgangDetailHeaderComponent>;
 
   const user: string = getDataTestIdOf('vorgang-header-user-icon');
+  const aktenzeichenEditableComponentDataTestId: string = getDataTestIdOf(
+    'alfa-aktenzeichen-editable-button',
+  );
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -111,16 +110,16 @@ describe('VorgangDetailHeaderComponent', () => {
       expect(component.hasAktenzeichen).toBeFalsy();
     });
 
-    it('should set class aktenzeichen--active for aktenzeichen', () => {
+    it('should NOT set class text-gray-400 for aktenzeichen', () => {
       fixture.detectChanges();
 
-      const element = getDebugElementFromFixtureByCss(fixture, 'div.aktenzeichen--active');
+      const element = getDebugElementFromFixtureByCss(fixture, 'div.text-gray-400');
 
-      expect(element).toBeInstanceOf(DebugElement);
+      expect(element).not.toBeInstanceOf(DebugElement);
     });
 
     it.each([null, EMPTY_STRING])(
-      'should NOT set class aktenzeichen--active for aktenzeichen %s',
+      'should set class text-gray-400 for aktenzeichen %s',
       (aktenzeichen: string) => {
         const vorgangWithEingang = createVorgangWithEingangResource();
         vorgangWithEingang.aktenzeichen = aktenzeichen;
@@ -128,10 +127,33 @@ describe('VorgangDetailHeaderComponent', () => {
 
         fixture.detectChanges();
 
-        const element = getDebugElementFromFixtureByCss(fixture, 'div.aktenzeichen--active');
+        const element = getDebugElementFromFixtureByCss(fixture, 'div.text-gray-400');
 
-        expect(element).not.toBeInstanceOf(DebugElement);
+        expect(element).toBeInstanceOf(DebugElement);
+      },
+    );
+
+    it.each([null, EMPTY_STRING])(
+      'should set class text-gray-400 for alfa-aktenzeichen-editable %s',
+      (aktenzeichen: string) => {
+        const vorgangWithEingang = createVorgangWithEingangResource();
+        vorgangWithEingang.aktenzeichen = aktenzeichen;
+        component.vorgangWithEingang = vorgangWithEingang;
+
+        fixture.detectChanges();
+
+        const element = getElementFromFixture(fixture, aktenzeichenEditableComponentDataTestId);
+
+        expect(element).toHaveClass('text-gray-400');
       },
     );
+
+    it('should NOT set class text-gray-400 for alfa-aktenzeichen-editable', () => {
+      fixture.detectChanges();
+
+      const element = getElementFromFixture(fixture, aktenzeichenEditableComponentDataTestId);
+
+      expect(element).not.toHaveClass('text-gray-400');
+    });
   });
 });

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.ts

@@ -21,15 +21,15 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
-import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { isNotEmpty } from '@alfa-client/tech-shared';
+import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
 import { createVorgangWithEingangResource } from '../../../../../../vorgang-shared/test/vorgang';
 
 @Component({
   selector: 'alfa-vorgang-detail-header',
   templateUrl: './vorgang-detail-header.component.html',
-  styleUrls: ['./vorgang-detail-header.component.scss'],
+  styles: [':host {@apply flex flex-col px-6 py-4}'],
 })
 export class VorgangDetailHeaderComponent {
   readonly linkRel = VorgangWithEingangLinkRel;

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html

@@ -23,7 +23,8 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgangStateResource$ | async as vorgangStateResource">
+<main *ngIf="vorgangStateResource$ | async as vorgangStateResource">
+  <h1 class="sr-only">Details zum Vorgang</h1>
   <ozgcloud-subnavigation class="mat-typography mat-app-background" data-test-id="subnavigation">
     <alfa-vorgang-detail-back-button-container></alfa-vorgang-detail-back-button-container>
     <ng-container *ngIf="vorgangStateResource.resource">
@@ -38,14 +39,16 @@
     </ng-container>
   </ozgcloud-subnavigation>
 
-  <div class="l-scroll-area--full">
+  <div
+    class="l-scroll-area--full flex border-l border-r border-grayborder/30 dark:border-transparent"
+  >
     <alfa-vorgang-detail-area
       *ngIf="vorgangStateResource"
       [vorgangStateResource]="vorgangStateResource"
       data-test-id="detail-area"
     ></alfa-vorgang-detail-area>
   </div>
-</ng-container>
+</main>
 
 <ozgcloud-progress-bar
   [stateResource]="revokeCommandStateResource$ | async"

alfa-client/libs/vorgang-shared-ui/src/index.ts

@@ -22,7 +22,6 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 export * from './lib/aktenzeichen/aktenzeichen.component';
-export * from './lib/vorgang-in-postfach-breadcrumb-container/vorgang-in-postfach-breadcrumb-container.component';
 export * from './lib/vorgang-nummer/vorgang-nummer.component';
 export * from './lib/vorgang-search-container/vorgang-search-container.component';
 export * from './lib/vorgang-shared-ui.module';

alfa-client/libs/vorgang-shared-ui/src/lib/aktenzeichen/aktenzeichen.component.html

@@ -23,6 +23,10 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<span [matTooltip]="aktenzeichen" data-test-id="aktenzeichen" class="truncate">{{
-  aktenzeichen
-}}</span>
+<div
+  class="line-clamp-1 flex-shrink overflow-hidden break-all text-base font-normal lg:line-clamp-none lg:flex"
+  data-test-id="aktenzeichen"
+  [matTooltip]="aktenzeichen"
+>
+  {{ aktenzeichen }}
+</div>

alfa-client/libs/vorgang-shared-ui/src/lib/aktenzeichen/aktenzeichen.component.spec.ts

@@ -61,7 +61,7 @@ describe('AktenzeichenComponent', () => {
       fixture.detectChanges();
       const aktenzeichenMessage: HTMLElement = fixture.nativeElement.querySelector(aktenzeichen);
 
-      expect(aktenzeichenMessage.innerHTML).toBe(VORGANG_KEIN_AKTENZEICHEN_ZUGEWIESEN);
+      expect(aktenzeichenMessage.innerHTML.trim()).toBe(VORGANG_KEIN_AKTENZEICHEN_ZUGEWIESEN);
     });
 
     it('should show aktenzeichen', () => {
@@ -70,7 +70,7 @@ describe('AktenzeichenComponent', () => {
       fixture.detectChanges();
       const aktenzeichenMessage: HTMLElement = fixture.nativeElement.querySelector(aktenzeichen);
 
-      expect(aktenzeichenMessage.textContent).toBe(vorgang.aktenzeichen);
+      expect(aktenzeichenMessage.textContent.trim()).toBe(vorgang.aktenzeichen);
     });
   });
 });

alfa-client/libs/vorgang-shared-ui/src/lib/vorgang-in-postfach-breadcrumb-container/vorgang-in-postfach-breadcrumb-container.component.html

-<!--
-
-    Copyright (C) 2022 Das Land Schleswig-Holstein vertreten durch den
-    Ministerpräsidenten des Landes Schleswig-Holstein
-    Staatskanzlei
-    Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
-
-    Lizenziert unter der EUPL, Version 1.2 oder - sobald
-    diese von der Europäischen Kommission genehmigt wurden -
-    Folgeversionen der EUPL ("Lizenz");
-    Sie dürfen dieses Werk ausschließlich gemäß
-    dieser Lizenz nutzen.
-    Eine Kopie der Lizenz finden Sie hier:
-
-    https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-
-    Sofern nicht durch anwendbare Rechtsvorschriften
-    gefordert oder in schriftlicher Form vereinbart, wird
-    die unter der Lizenz verbreitete Software "so wie sie
-    ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
-    ausdrücklich oder stillschweigend - verbreitet.
-    Die sprachspezifischen Genehmigungen und Beschränkungen
-    unter der Lizenz sind dem Lizenztext zu entnehmen.
-
--->
-<alfa-vorgang-in-postfach-breadcrumb
-  [vorgangStateResource]="vorgangStateResource$ | async"
-  data-test-id="postfach-breadcrump"
-></alfa-vorgang-in-postfach-breadcrumb>

alfa-client/libs/vorgang-shared-ui/src/lib/vorgang-in-postfach-breadcrumb-container/vorgang-in-postfach-breadcrumb-container.component.scss

-/**
- * Copyright (C) 2022 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */

alfa-client/libs/vorgang-shared-ui/src/lib/vorgang-in-postfach-breadcrumb-container/vorgang-in-postfach-breadcrumb-container.component.spec.ts

-/*
- * Copyright (C) 2022 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Mock, mock } from '@alfa-client/test-utils';
-import { VorgangService } from '@alfa-client/vorgang-shared';
-import { MockComponent } from 'ng-mocks';
-import { VorgangInPostfachBreadcrumbContainerComponent } from './vorgang-in-postfach-breadcrumb-container.component';
-import { VorgangInPostfachBreadcrumbComponent } from './vorgang-in-postfach-breadcrumb/vorgang-in-postfach-breadcrumb.component';
-
-describe('VorgangInPostfachBreadcrumbContainerComponent', () => {
-  let component: VorgangInPostfachBreadcrumbContainerComponent;
-  let fixture: ComponentFixture<VorgangInPostfachBreadcrumbContainerComponent>;
-
-  const vorgangService: Mock<VorgangService> = mock(VorgangService);
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        VorgangInPostfachBreadcrumbContainerComponent,
-        MockComponent(VorgangInPostfachBreadcrumbComponent),
-      ],
-      providers: [
-        {
-          provide: VorgangService,
-          useValue: vorgangService,
-        },
-      ],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(VorgangInPostfachBreadcrumbContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('ngOnInit', () => {
-    it('should call vorgang service', () => {
-      component.ngOnInit();
-
-      expect(vorgangService.getVorgangWithEingang).toHaveBeenCalled();
-    });
-  });
-});