OZG-5842 OZG-5851 Use dedicated input properties for first and second text line

alfa-client/apps/demo/src/app/app.component.html

@@ -63,7 +63,7 @@
             placeholder="Betreff hier eingeben"
             variant="error"
           >
-            <ods-error-message>Betreff fehlt</ods-error-message
+            <ods-error-message text="Betreff fehlt"></ods-error-message
           ></ods-text-input>
         </div>
         <div class="my-4">
@@ -75,7 +75,7 @@
             placeholder="Nachrichtentext hier eingeben"
             variant="error"
           >
-            <ods-error-message>Nachrichtentext fehlt</ods-error-message>
+            <ods-error-message text="Nachrichtentext fehlt"></ods-error-message>
           </ods-textarea>
         </div>
 

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

@@ -13,9 +13,11 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   standalone: true,
   imports: [CommonModule, ButtonComponent, ErrorMessageComponent],
   styles: [':host {@apply flex flex-col}'],
-  template: `<ods-error-message *ngIf="stateResource.error">
-      Ein Fehler ist aufgetreten. <br />
-      Versuchen Sie es nocheinmal.
+  template: `<ods-error-message
+      *ngIf="stateResource.error"
+      text="Ein Fehler ist aufgetreten."
+      subText="Versuchen Sie es nocheinmal."
+    >
     </ods-error-message>
     <ods-button
       [text]="text"

alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html

 <ng-container *ngFor="let issue of issues"
-  ><ods-error-message>{{ message(issue) }}</ods-error-message
+  ><ods-error-message [text]="message(issue)"></ods-error-message
 ></ng-container>

alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts

 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-icon.component';
 
 @Component({
@@ -7,6 +7,14 @@ import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-ico
   standalone: true,
   imports: [CommonModule, ExclamateIconComponent],
   styles: [':host {@apply flex text-error my-2 text-sm items-center font-medium}'],
-  template: `<ods-exclamate-icon class="mr-1"></ods-exclamate-icon><ng-content></ng-content>`,
+  template: `<ods-exclamate-icon class="mr-1"></ods-exclamate-icon>
+    <div class="flex-grow break-all">
+      {{ text }}
+      <br *ngIf="subText" aria-hidden="true" />
+      {{ subText }}
+    </div> `,
 })
-export class ErrorMessageComponent {}
+export class ErrorMessageComponent {
+  @Input({ required: true }) text!: string;
+  @Input() subText: string = '';
+}

alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts

-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 import { ErrorMessageComponent } from './error-message.component';
 
 const meta: Meta<ErrorMessageComponent> = {
@@ -17,4 +16,18 @@ const meta: Meta<ErrorMessageComponent> = {
 export default meta;
 type Story = StoryObj<ErrorMessageComponent>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    text: 'Ein Fehler ist aufgetreten.',
+    subText: 'Versuchen Sie es nocheinmal.',
+  },
+  argTypes: {
+    text: { description: 'First line of text' },
+    subText: { description: 'Second line of text' },
+  },
+  render: (args: ErrorMessageComponent) => ({
+    props: args,
+    template: `<ods-error-message ${argsToTemplate(args)} class="w-72">
+      </ods-error-message>`,
+  }),
+};