OZG-725 Add forwarding item component

Sub-Task: OZG-7895

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

@@ -41,6 +41,7 @@ export * from './lib/form/file-upload-button/file-upload-button.component';
 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/forwarding-item/forwarding-item.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';

alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.spec.ts

+/*
+ * Copyright (C) 2025 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 { ForwardingItemComponent } from './forwarding-item.component';
+
+describe('ForwardingItemComponent', () => {
+  let component: ForwardingItemComponent;
+  let fixture: ComponentFixture<ForwardingItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ForwardingItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ForwardingItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+/*
+ * Copyright (C) 2025 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 { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { ForwardVorgangIconComponent } from '../icons/forward-vorgang-icon/forward-vorgang-icon.component';
+
+export enum ForwardingDirection {
+  FROM = 'Weitergeleitet von',
+  TO = 'An',
+}
+
+@Component({
+  selector: 'ods-forwarding-item',
+  standalone: true,
+  imports: [CommonModule, ForwardVorgangIconComponent],
+  template: `<div
+    class="flex flex-col items-start justify-between gap-2 rounded-lg border border-grayborder p-3 md:flex-row md:items-center md:gap-0"
+  >
+    <div class="flex gap-3">
+      <ods-forward-vorgang-icon class="fill-text" />
+      <p class="text-gray-500">{{ direction }}:</p>
+      <div>
+        <p class="font-medium">{{ label }}</p>
+        <p>{{ address }}</p>
+      </div>
+    </div>
+    <div class="self-end text-end empty:hidden">
+      <ng-content />
+    </div>
+  </div>`,
+})
+export class ForwardingItemComponent {
+  @Input({ required: true }) label!: string;
+  @Input({ required: true }) address!: string;
+  @Input() direction: ForwardingDirection = ForwardingDirection.TO;
+}

alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.stories.ts

+/*
+ * Copyright (C) 2025 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 { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { ButtonComponent } from '../button/button.component';
+import { ForwardingDirection, ForwardingItemComponent } from './forwarding-item.component';
+
+const label: string = 'Bund für Umwelt und Naturschutz Kreisgruppe Kiel';
+const address: string = 'Kaiserstraße 25, 12443 Kiel';
+
+const meta: Meta<ForwardingItemComponent> = {
+  title: 'Forwarding item',
+  component: ForwardingItemComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Information of forwarded item',
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [ForwardingItemComponent, ButtonComponent],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ForwardingItemComponent>;
+
+export const Default: Story = {
+  args: {
+    label: label,
+    address: address,
+    direction: ForwardingDirection.TO,
+  },
+  argTypes: {
+    direction: { control: 'select', options: [ForwardingDirection.TO, ForwardingDirection.FROM] },
+  },
+};
+
+export const WithButton: Story = {
+  args: {
+    label: label,
+    address: address,
+  },
+
+  render: (args: ForwardingItemComponent) => ({
+    props: args,
+    template: `<ods-forwarding-item ${argsToTemplate(args)}>
+        <ods-button variant="outline" text="Stelle ändern" />
+      </ods-forwarding-item>`,
+  }),
+};
+
+export const WithCreationInfo: Story = {
+  args: {
+    label: label,
+    address: address,
+    direction: ForwardingDirection.FROM,
+  },
+  render: (args: ForwardingItemComponent) => ({
+    props: args,
+    template: `<ods-forwarding-item ${argsToTemplate(args)}>
+        <p>20. Dez. 09:35</p>
+        <p class="text-sm">Karin Wanowski-Müller</p>
+      </ods-forwarding-item>`,
+  }),
+};