Merge branch 'OZG-7474-WeiterleitenButton' into 'main'

Ozg 7474 weiterleiten button

See merge request !49

alfa-client/apps/admin-e2e/src/e2e/main-tests/navigation/safira.cy.ts

@@ -34,7 +34,7 @@ describe('Navigation', () => {
 
       describe('on selection', () => {
         before(() => {
-          mainPage.openStatistik();
+          mainPage.clickStatistikNavigationItem();
         });
 
         it('should show page on selection', () => {

alfa-client/apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components.ts

@@ -25,10 +25,10 @@ export class VorgangFormularButtonsE2EComponent {
   private readonly abschliessenButton: string = 'abschliessen-button';
   private readonly annehmenButton: string = 'annehmen-button';
   private readonly bearbeitenButton: string = 'bearbeiten-button';
+  private readonly forwardButton: string = 'forward-by-ozgcloud-button';
   private readonly bescheidenButton: string = 'bescheiden-button';
   private readonly endgueltigLoeschenButton: string = 'endgueltig-loeschen-button';
-  private readonly loeschAnforderungZuruecknehmenButton: string =
-    'loesch-anforderung-zuruecknehmen-button';
+  private readonly loeschAnforderungZuruecknehmenButton: string = 'loesch-anforderung-zuruecknehmen-button';
   private readonly loeschenAnfordernButton: string = 'loeschen-anfordern-button';
   private readonly verwerfenButton: string = 'verwerfen-button';
   private readonly wiedereroeffnenButton: string = 'wiedereroeffnen-button';
@@ -47,6 +47,10 @@ export class VorgangFormularButtonsE2EComponent {
     return cy.getTestElement(this.bearbeitenButton);
   }
 
+  public getForwardButton() {
+    return cy.getTestElement(this.forwardButton);
+  }
+
   public getBescheidenButton() {
     return cy.getTestElement(this.bescheidenButton);
   }

alfa-client/apps/alfa-e2e/src/e2e/einheitlicher-ansprechpartner/vorgang-detail/vorgang-forward-by-ozgcloud.cy.ts

+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+import { VorgangFormularButtonsE2EComponent } from 'apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components';
+import { VorgangListE2EComponent } from '../../../components/vorgang/vorgang-list.e2e.component';
+import { VorgangE2E } from '../../../model/vorgang';
+import { MainPage, waitForSpinnerToDisappear } from '../../../page-objects/main.po';
+import { VorgangPage } from '../../../page-objects/vorgang.po';
+import { dropCollections } from '../../../support/cypress-helper';
+import { exist, notExist } from '../../../support/cypress.util';
+import { loginAsEmil } from '../../../support/user-util';
+import { createVorgang, initVorgaenge } from '../../../support/vorgang-util';
+
+registerLocaleData(localeDe, 'de', localeDeExtra);
+
+describe('Vorgang weiterleiten innerhalb der OzgCloud', () => {
+  const mainPage: MainPage = new MainPage();
+  const vorgangList: VorgangListE2EComponent = mainPage.getVorgangList();
+
+  const vorgangPage: VorgangPage = new VorgangPage();
+  const vorgangFormularButtons: VorgangFormularButtonsE2EComponent = vorgangPage.getFormularButtons();
+
+  const vorgangWeiterleiten: VorgangE2E = { ...createVorgang(), name: 'Weiterleitung' };
+
+  before(() => {
+    initVorgaenge([vorgangWeiterleiten]);
+
+    loginAsEmil();
+
+    waitForSpinnerToDisappear();
+    exist(vorgangList.getRoot());
+  });
+
+  after(() => {
+    dropCollections();
+  });
+
+  describe('Weiterleiten', () => {
+    it('should display Weiterleiten button in Status Neu', () => {
+      vorgangList.getListItem(vorgangWeiterleiten.name).getRoot().click();
+      waitForSpinnerToDisappear();
+
+      notExist(vorgangFormularButtons.getForwardButton());
+    });
+  });
+});

alfa-client/apps/alfa-e2e/src/e2e/main-tests/vorgang-detailansicht/vorgang-forward-by-ozgcloud.cy.ts

+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+import { VorgangFormularButtonsE2EComponent } from 'apps/alfa-e2e/src/components/vorgang/vorgang-formular-buttons.e2e.components';
+import { VorgangListE2EComponent } from '../../../components/vorgang/vorgang-list.e2e.component';
+import { VorgangE2E } from '../../../model/vorgang';
+import { MainPage, waitForSpinnerToDisappear } from '../../../page-objects/main.po';
+import { VorgangPage } from '../../../page-objects/vorgang.po';
+import { dropCollections } from '../../../support/cypress-helper';
+import { exist, notExist } from '../../../support/cypress.util';
+import { loginAsPeter, loginAsSabine } from '../../../support/user-util';
+import { createVorgang, initVorgaenge } from '../../../support/vorgang-util';
+
+registerLocaleData(localeDe, 'de', localeDeExtra);
+
+describe('Vorgang weiterleiten innerhalb der OzgCloud', () => {
+  const mainPage: MainPage = new MainPage();
+  const vorgangList: VorgangListE2EComponent = mainPage.getVorgangList();
+
+  const vorgangPage: VorgangPage = new VorgangPage();
+  const vorgangFormularButtons: VorgangFormularButtonsE2EComponent = vorgangPage.getFormularButtons();
+
+  const vorgangWeiterleiten: VorgangE2E = { ...createVorgang(), name: 'Weiterleitung' };
+
+  after(() => {
+    dropCollections();
+  });
+
+  describe('For Sabine', () => {
+    before(() => {
+      initVorgaenge([vorgangWeiterleiten]);
+
+      loginAsSabine();
+
+      waitForSpinnerToDisappear();
+      exist(vorgangList.getRoot());
+    });
+
+    it('should display Weiterleiten button in Status Neu', () => {
+      vorgangList.getListItem(vorgangWeiterleiten.name).getRoot().click();
+      waitForSpinnerToDisappear();
+
+      exist(vorgangFormularButtons.getForwardButton());
+    });
+
+    it('should not display Weiterleiten button in Status Angenommen', () => {
+      vorgangFormularButtons.getAnnehmenButton().click();
+      waitForSpinnerToDisappear();
+
+      notExist(vorgangFormularButtons.getForwardButton());
+    });
+
+    it('should not display Weiterleiten button in Status In Bearbeitung', () => {
+      vorgangFormularButtons.getBearbeitenButton().click();
+      waitForSpinnerToDisappear();
+
+      notExist(vorgangFormularButtons.getForwardButton());
+    });
+  });
+
+  describe('For Peter', () => {
+    before(() => {
+      initVorgaenge([vorgangWeiterleiten]);
+
+      loginAsPeter();
+
+      waitForSpinnerToDisappear();
+      exist(vorgangList.getRoot());
+    });
+
+    it('should not display Weiterleiten button in Status In Neu', () => {
+      vorgangList.getListItem(vorgangWeiterleiten.name).getRoot().click();
+      waitForSpinnerToDisappear();
+
+      notExist(vorgangFormularButtons.getForwardButton());
+    });
+  });
+});

alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.spec.ts

-import { Mock, mock } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { RoutingButtonComponent } from './routing-button.component';
 
 describe('RoutingButtonComponent', () => {
   let component: RoutingButtonComponent;
   let fixture: ComponentFixture<RoutingButtonComponent>;
 
-  let activatedRoute: Mock<ActivatedRoute>;
-
   beforeEach(async () => {
-    activatedRoute = mock(ActivatedRoute);
-
     await TestBed.configureTestingModule({
-      imports: [RoutingButtonComponent, RouterLink],
-      providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: activatedRoute,
-        },
-      ],
+      imports: [RoutingButtonComponent, RouterModule.forRoot([])],
     }).compileComponents();
 
     fixture = TestBed.createComponent(RoutingButtonComponent);

alfa-client/libs/design-system/src/index.ts

@@ -30,6 +30,7 @@ export * from './lib/button-card/button-card.component';
 export * from './lib/button/button.component';
 export * from './lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component';
 export * from './lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component';
+export * from './lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component';
 export * from './lib/dropdown-menu/dropdown-menu-text-item/dropdown-menu-text-item.component';
 export * from './lib/dropdown-menu/dropdown-menu/dropdown-menu.component';
 export * from './lib/form/button-toggle/button-toggle.component';
@@ -41,18 +42,24 @@ export * from './lib/form/radio-button-card/radio-button-card.component';
 export * from './lib/form/text-input/text-input.component';
 export * from './lib/form/textarea/textarea.component';
 export * from './lib/icons/accessibility-icon/accessibility-icon.component';
+export * from './lib/icons/account-circle-icon/account-circle-icon.component';
 export * from './lib/icons/admin-logo-icon/admin-logo-icon.component';
 export * from './lib/icons/archive-icon/archive-icon.component';
+export * from './lib/icons/arrow-back-icon/arrow-back-icon.component';
 export * from './lib/icons/attachment-icon/attachment-icon.component';
 export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
 export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
+export * from './lib/icons/check-circle-icon/check-circle-icon.component';
 export * from './lib/icons/check-icon/check-icon.component';
 export * from './lib/icons/close-icon/close-icon.component';
+export * from './lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component';
+export * from './lib/icons/discard-vorgang-icon/discard-vorgang-icon.component';
 export * from './lib/icons/edit-icon/edit-icon.component';
 export * from './lib/icons/error-icon/error-icon.component';
 export * from './lib/icons/exclamation-icon/exclamation-icon.component';
 export * from './lib/icons/external-unit-icon/external-unit-icon.component';
 export * from './lib/icons/file-icon/file-icon.component';
+export * from './lib/icons/forward-vorgang-icon/forward-vorgang-icon.component';
 export * from './lib/icons/help-icon/help-icon.component';
 export * from './lib/icons/iconVariants';
 export * from './lib/icons/logout-icon/logout-icon.component';
@@ -64,12 +71,17 @@ export * from './lib/icons/ozg-logo-icon/ozg-logo-icon.component';
 export * from './lib/icons/person-icon/person-icon.component';
 export * from './lib/icons/plus-icon/plus-icon.component';
 export * from './lib/icons/public-administration-icon/public-administration-icon.component';
+export * from './lib/icons/request-vorgang-deletion-icon/request-vorgang-deletion-icon.component';
 export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/search-icon/search-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';
+export * from './lib/icons/settings-icon/settings-icon.component';
 export * from './lib/icons/spinner-icon/spinner-icon.component';
 export * from './lib/icons/stamp-icon/stamp-icon.component';
 export * from './lib/icons/statistic-icon/statistic-icon.component';
+export * from './lib/icons/undo-icon/undo-icon.component';
+export * from './lib/icons/undo-request-vorgang-deletion-icon/undo-request-vorgang-deletion-icon.component';
+export * from './lib/icons/update-icon/update-icon.component';
 export * from './lib/icons/user-icon/user-icon.component';
 export * from './lib/icons/users-icon/users-icon.component';
 export * from './lib/instant-search/instant-search/instant-search.component';

alfa-client/libs/design-system/src/lib/button/button.component.ts

@@ -36,11 +36,11 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary: 'bg-primary text-white shadow-md hover:enabled:bg-primary-hover',
+        primary: 'bg-primary text-whitetext shadow-md hover:enabled:bg-primary-hover focus-visible:bg-primary-hover',
         outline:
-          'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:border-background-200',
+          'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:bg-ghost-hover focus-visible:border-background-200',
         ghost:
-          'border-2 border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200 font-semibold',
+          'border border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200 focus-visible:bg-ghost-hover font-semibold [&]:focus-visible:outline-offset-1',
       },
       size: {
         medium: 'h-9 py-2 px-4 min-w-32',

alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts

 import { Component, Input } from '@angular/core';
-import { LinkComponent } from '@ods/system';
 import { OpenLinkIconComponent } from '../../icons/open-link-icon/open-link-icon.component';
+import { LinkComponent } from '../../link/link.component';
 
 @Component({
   selector: 'ods-dropdown-menu-link-item',

alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccountCircleIconComponent } from './account-circle-icon.component';
+
+describe('AccountCircleIconComponent', () => {
+  let component: AccountCircleIconComponent;
+  let fixture: ComponentFixture<AccountCircleIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountCircleIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AccountCircleIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-account-circle-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      d="M12.75 2C7.23 2 2.75 6.48 2.75 12C2.75 17.52 7.23 22 12.75 22C18.27 22 22.75 17.52 22.75 12C22.75 6.48 18.27 2 12.75 2ZM7.82 18.28C8.25 17.38 10.87 16.5 12.75 16.5C14.63 16.5 17.26 17.38 17.68 18.28C16.32 19.36 14.61 20 12.75 20C10.89 20 9.18 19.36 7.82 18.28ZM19.11 16.83C17.68 15.09 14.21 14.5 12.75 14.5C11.29 14.5 7.82 15.09 6.39 16.83C5.37 15.49 4.75 13.82 4.75 12C4.75 7.59 8.34 4 12.75 4C17.16 4 20.75 7.59 20.75 12C20.75 13.82 20.13 15.49 19.11 16.83ZM12.75 6C10.81 6 9.25 7.56 9.25 9.5C9.25 11.44 10.81 13 12.75 13C14.69 13 16.25 11.44 16.25 9.5C16.25 7.56 14.69 6 12.75 6ZM12.75 11C11.92 11 11.25 10.33 11.25 9.5C11.25 8.67 11.92 8 12.75 8C13.58 8 14.25 8.67 14.25 9.5C14.25 10.33 13.58 11 12.75 11Z"
+    />
+  </svg>`,
+})
+export class AccountCircleIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}

alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.stories.ts

+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { AccountCircleIconComponent } from './account-circle-icon.component';
+
+const meta: Meta<AccountCircleIconComponent> = {
+  title: 'Icons/Account circle icon',
+  component: AccountCircleIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<AccountCircleIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};

alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ArrowBackIconComponent } from './arrow-back-icon.component';
+
+describe('ArrowBackIconComponent', () => {
+  let component: ArrowBackIconComponent;
+  let fixture: ComponentFixture<ArrowBackIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ArrowBackIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ArrowBackIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-arrow-back-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path d="M20.75 11H8.58L14.17 5.41L12.75 4L4.75 12L12.75 20L14.16 18.59L8.58 13H20.75V11Z" />
+  </svg>`,
+})
+export class ArrowBackIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}

alfa-client/libs/design-system/src/lib/icons/arrow-back-icon/arrow-back-icon.stories.ts

+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { ArrowBackIconComponent } from './arrow-back-icon.component';
+
+const meta: Meta<ArrowBackIconComponent> = {
+  title: 'Icons/Arrow back icon',
+  component: ArrowBackIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ArrowBackIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};

alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CheckCircleIconComponent } from './check-circle-icon.component';
+
+describe('CheckCircleIconComponent', () => {
+  let component: CheckCircleIconComponent;
+  let fixture: ComponentFixture<CheckCircleIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CheckCircleIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CheckCircleIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.component.ts

+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-check-circle-icon',
+  standalone: true,
+  imports: [NgClass],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      d="M22 5.18L10.59 16.6L6.35 12.36L7.76 10.95L10.59 13.78L20.59 3.78L22 5.18ZM19.79 10.22C19.92 10.79 20 11.39 20 12C20 16.42 16.42 20 12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C13.58 4 15.04 4.46 16.28 5.25L17.72 3.81C16.1 2.67 14.13 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 10.81 21.78 9.67 21.4 8.61L19.79 10.22Z"
+    />
+  </svg>`,
+})
+export class CheckCircleIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = undefined;
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-buttons/vorgang-detail-formular-buttons.component.scss → alfa-client/libs/design-system/src/lib/icons/check-circle-icon/check-circle-icon.stories.ts

-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
+/*
+ * Copyright (C) 2024 Das Land Schleswig-Holstein vertreten durch den
  * Ministerpräsidenten des Landes Schleswig-Holstein
  * Staatskanzlei
  * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
@@ -21,12 +21,30 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-:host {
-  margin-left: 48px;
+import type { Meta, StoryObj } from '@storybook/angular';
 
-  ::ng-deep {
-    ozgcloud-stroked-button-with-spinner {
-      margin: 0 8px;
-    }
-  }
-}
+import { CheckCircleIconComponent } from './check-circle-icon.component';
+
+const meta: Meta<CheckCircleIconComponent> = {
+  title: 'Icons/Check circle icon',
+  component: CheckCircleIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<CheckCircleIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'medium' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};

alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DeleteVorgangFinallyIconComponent } from './delete-vorgang-finally-icon.component';
+
+describe('DeleteVorgangFinallyIconComponent', () => {
+  let component: DeleteVorgangFinallyIconComponent;
+  let fixture: ComponentFixture<DeleteVorgangFinallyIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeleteVorgangFinallyIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeleteVorgangFinallyIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-delete-vorgang-finally-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.7366 13V3.11101H12.4405L7.74777 8.05811L7.74777 13H5.75V8.05811C5.75 7.49738 5.96112 6.95968 6.3368 6.56365L11.0296 1.61654C11.4041 1.22173 11.9115 1 12.4405 1H17.7366C18.8399 1 19.7344 1.94513 19.7344 3.11101V13H17.7366Z"
+    />
+    <path
+      d="M7.75 20C7.75 19.4477 8.19772 19 8.75 19C9.30228 19 9.75 19.4477 9.75 20C9.75 20.5523 9.30228 21 8.75 21C8.19772 21 7.75 20.5523 7.75 20Z"
+    />
+    <path
+      d="M7.75 20C7.75 19.4477 8.19772 19 8.75 19C9.30228 19 9.75 19.4477 9.75 20C9.75 20.5523 9.30228 21 8.75 21C8.19772 21 7.75 20.5523 7.75 20Z"
+    />
+    <path
+      d="M11.75 21C11.75 20.4477 12.1977 20 12.75 20C13.3023 20 13.75 20.4477 13.75 21V22C13.75 22.5523 13.3023 23 12.75 23C12.1977 23 11.75 22.5523 11.75 22V21Z"
+    />
+    <path
+      d="M11.75 21C11.75 20.4477 12.1977 20 12.75 20C13.3023 20 13.75 20.4477 13.75 21V22C13.75 22.5523 13.3023 23 12.75 23C12.1977 23 11.75 22.5523 11.75 22V21Z"
+    />
+    <path
+      d="M11.75 13C11.75 12.4477 12.1977 12 12.75 12C13.3023 12 13.75 12.4477 13.75 13V17C13.75 17.5523 13.3023 18 12.75 18C12.1977 18 11.75 17.5523 11.75 17V13Z"
+    />
+    <path
+      d="M11.75 13C11.75 12.4477 12.1977 12 12.75 12C13.3023 12 13.75 12.4477 13.75 13V17C13.75 17.5523 13.3023 18 12.75 18C12.1977 18 11.75 17.5523 11.75 17V13Z"
+    />
+    <path
+      d="M7.75 15C7.75 14.4477 8.19772 14 8.75 14C9.30228 14 9.75 14.4477 9.75 15V16C9.75 16.5523 9.30228 17 8.75 17C8.19772 17 7.75 16.5523 7.75 16V15Z"
+    />
+    <path
+      d="M7.75 15C7.75 14.4477 8.19772 14 8.75 14C9.30228 14 9.75 14.4477 9.75 15V16C9.75 16.5523 9.30228 17 8.75 17C8.19772 17 7.75 16.5523 7.75 16V15Z"
+    />
+    <path
+      d="M15.75 20C15.75 19.4477 16.1977 19 16.75 19C17.3023 19 17.75 19.4477 17.75 20V21C17.75 21.5523 17.3023 22 16.75 22C16.1977 22 15.75 21.5523 15.75 21V20Z"
+    />
+    <path
+      d="M15.75 20C15.75 19.4477 16.1977 19 16.75 19C17.3023 19 17.75 19.4477 17.75 20V21C17.75 21.5523 17.3023 22 16.75 22C16.1977 22 15.75 21.5523 15.75 21V20Z"
+    />
+    <path
+      d="M15.75 15C15.75 14.4477 16.1977 14 16.75 14C17.3023 14 17.75 14.4477 17.75 15V16C17.75 16.5523 17.3023 17 16.75 17C16.1977 17 15.75 16.5523 15.75 16V15Z"
+    />
+    <path
+      d="M15.75 15C15.75 14.4477 16.1977 14 16.75 14C17.3023 14 17.75 14.4477 17.75 15V16C17.75 16.5523 17.3023 17 16.75 17C16.1977 17 15.75 16.5523 15.75 16V15Z"
+    />
+  </svg> `,
+})
+export class DeleteVorgangFinallyIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = '';
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}

alfa-client/libs/design-system/src/lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.stories.ts

+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { DeleteVorgangFinallyIconComponent } from './delete-vorgang-finally-icon.component';
+
+const meta: Meta<DeleteVorgangFinallyIconComponent> = {
+  title: 'Icons/Delete Vorgang finally icon',
+  component: DeleteVorgangFinallyIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<DeleteVorgangFinallyIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};