OZG-5842 OZG-5851 Add error message to Button with Spinner (WIP)

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

@@ -63,7 +63,7 @@
             placeholder="Betreff hier eingeben"
             variant="error"
           >
-            <ods-error-message error="Betreff fehlt"></ods-error-message
+            <ods-error-message>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 error="Nachrichtentext fehlt"></ods-error-message>
+            <ods-error-message>Nachrichtentext fehlt</ods-error-message>
           </ods-textarea>
         </div>
 

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

-import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
+import {
+  StateResource,
+  createEmptyStateResource,
+  createErrorStateResource,
+} from '@alfa-client/tech-shared';
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Resource } from '@ngxp/rest';
-import { ButtonComponent, buttonVariants } from '@ods/system';
+import {
+  ButtonComponent,
+  ErrorMessageComponent,
+  ExclamateIconComponent,
+  buttonVariants,
+} from '@ods/system';
 import { VariantProps } from 'class-variance-authority';
+import { createApiError } from 'libs/tech-shared/test/error';
 import { isNil } from 'lodash-es';
 
 type ButtonVariants = VariantProps<typeof buttonVariants>;
@@ -11,8 +21,13 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 @Component({
   selector: 'ods-button-with-spinner',
   standalone: true,
-  imports: [CommonModule, ButtonComponent],
-  template: `<ods-button
+  imports: [CommonModule, ButtonComponent, ErrorMessageComponent, ExclamateIconComponent],
+  styles: [':host {@apply flex flex-col}'],
+  template: `<ods-error-message *ngIf="stateResource.error">
+    <ods-exclamate-icon class="mr-1"></ods-exclamate-icon>
+    <span>Ein Fehler ist aufgetreten. <br/> Versuchen Sie es nocheinmal.</span>
+  </ods-error-message>
+  <ods-button
     [text]="text"
     [variant]="variant"
     [size]="size"
@@ -36,6 +51,7 @@ export class ButtonWithSpinnerComponent implements OnInit {
   }
 
   getStateResource(): StateResource<Resource> {
+    return createErrorStateResource<Resource>(createApiError());
     return isNil(this.stateResource) ? createEmptyStateResource<Resource>() : this.stateResource;
   }
 

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

 <ng-container *ngFor="let issue of issues"
-  ><ods-error-message [error]="message(issue)"></ods-error-message
+  ><ods-error-message>{{ 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, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'ods-error-message',
   standalone: true,
   imports: [CommonModule],
-  template: `<p *ngIf="error" error class="text-error mt-2 text-sm">{{ error }}</p>`,
+  styles: [':host {@apply text-error mt-2 text-sm}'], // TODO: Greift nicht
+  template: `<ng-content></ng-content>`,
 })
-export class ErrorMessageComponent {
-  @Input() error: string;
-}
+export class ErrorMessageComponent {}

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts

@@ -56,6 +56,7 @@ import {
   ButtonCardComponent,
   ButtonComponent,
   CloseIconComponent,
+  ErrorMessageComponent,
   RadioButtonCardComponent,
   SaveIconComponent,
   SendIconComponent,
@@ -159,6 +160,7 @@ const routes: Routes = [
     TextEditorComponent,
     TextareaEditorComponent,
     BescheidStatusTextComponent,
+    ErrorMessageComponent,
   ],
   declarations: [
     VorgangDetailPageComponent,