OZG-5842 OZG-5851 Add error message to Button with Spinner

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

-import {
-  StateResource,
-  createEmptyStateResource,
-  createErrorStateResource,
-} from '@alfa-client/tech-shared';
+import { StateResource, createEmptyStateResource } 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,
-  ErrorMessageComponent,
-  ExclamateIconComponent,
-  buttonVariants,
-} from '@ods/system';
+import { ButtonComponent, ErrorMessageComponent, 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>;
@@ -21,11 +11,11 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 @Component({
   selector: 'ods-button-with-spinner',
   standalone: true,
-  imports: [CommonModule, ButtonComponent, ErrorMessageComponent, ExclamateIconComponent],
+  imports: [CommonModule, ButtonComponent, ErrorMessageComponent],
   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>
+      Ein Fehler ist aufgetreten. <br />
+      Versuchen Sie es nocheinmal.
     </ods-error-message>
     <ods-button
       [text]="text"
@@ -51,7 +41,6 @@ export class ButtonWithSpinnerComponent implements OnInit {
   }
 
   getStateResource(): StateResource<Resource> {
-    return createErrorStateResource<Resource>(createApiError());
     return isNil(this.stateResource) ? createEmptyStateResource<Resource>() : this.stateResource;
   }
 

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

 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-icon.component';
 import { ErrorMessageComponent } from './error-message.component';
 
 describe('ErrorMessageComponent', () => {
@@ -7,7 +8,7 @@ describe('ErrorMessageComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ErrorMessageComponent],
+      imports: [ErrorMessageComponent, ExclamateIconComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ErrorMessageComponent);

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 { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-icon.component';
 
 @Component({
   selector: 'ods-error-message',
   standalone: true,
-  imports: [CommonModule],
-  styles: [':host {@apply text-error mt-2 text-sm}'], // TODO: Greift nicht
-  template: `<ng-content></ng-content>`,
+  imports: [CommonModule, ExclamateIconComponent],
+  styles: [':host {@apply flex text-error mt-2 mb-2 text-sm items-center}'],
+  template: `<ods-exclamate-icon class="mr-1"></ods-exclamate-icon><ng-content></ng-content>`,
 })
 export class ErrorMessageComponent {}