OZG-5169 update ui components

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

@@ -48,14 +48,14 @@
         <div class="mt-4">
           <ods-button class="w-72" [isLoading]="false">
             <ods-icon icon name="file-generate" class="size-10 fill-primary" />
-            <ods-spinner spinner class="size-10" />
+            <ods-spinner-icon spinner class="size-10" />
             <p text class="text-center">Bescheid-Dokument<br />automatisch erstellen</p></ods-button
           >
         </div>
         <div class="mt-4">
           <ods-button class="w-72" [isLoading]="true">
             <ods-icon icon name="file-generate" class="size-10 fill-primary" />
-            <ods-spinner spinner class="size-10" />
+            <ods-spinner-icon spinner class="size-10" />
             <p text class="text-center">Bescheid-Dokument<br />automatisch erstellen</p></ods-button
           >
         </div>
@@ -63,14 +63,14 @@
         <div class="mt-4">
           <ods-file-upload-button class="w-72" [isLoading]="false" id="upload117">
             <ods-icon icon name="file-upload" class="size-10 fill-primary" />
-            <ods-spinner spinner class="size-10" />
+            <ods-spinner-icon spinner class="size-10" />
             <p text class="text-center">Bescheid-Dokument<br />hochladen</p></ods-file-upload-button
           >
         </div>
         <div class="mt-4">
           <ods-file-upload-button class="w-72" [isLoading]="true" id="upload117">
             <ods-icon icon name="file-upload" class="size-10 fill-primary" />
-            <ods-spinner spinner class="size-10" />
+            <ods-spinner-icon spinner class="size-10" />
             <p text class="text-center">Bescheid-Dokument<br />hochladen</p></ods-file-upload-button
           >
         </div>
@@ -78,14 +78,14 @@
         <div class="mt-4">
           <ods-file-upload-button class="w-72" [isLoading]="false" id="upload129">
             <ods-icon icon name="attachment" class="h-6 w-10 fill-primary" />
-            <ods-spinner spinner class="h-6 w-10" />
+            <ods-spinner-icon spinner class="h-6 w-10" />
             <div text class="text-center">Anhang hochladen</div></ods-file-upload-button
           >
         </div>
         <div class="mt-4">
           <ods-file-upload-button class="w-72" [isLoading]="true" id="upload130">
             <ods-icon icon name="attachment" class="h-6 w-10 fill-primary" />
-            <ods-spinner spinner class="h-6 w-10" />
+            <ods-spinner-icon spinner class="h-6 w-10" />
             <div text class="text-center">Anhang hochladen</div></ods-file-upload-button
           >
         </div>

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

@@ -9,7 +9,7 @@ import {
   FileUploadButtonComponent,
   IconComponent,
   RadioButtonCardComponent,
-  SpinnerComponent,
+  SpinnerIconComponent,
   TestbtnComponent,
 } from 'design-system';
 
@@ -35,7 +35,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
     RadioButtonCardComponent,
     ReactiveFormsModule,
     IconComponent,
-    SpinnerComponent,
+    SpinnerIconComponent,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',

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

@@ -3,5 +3,5 @@ export * from './lib/button/button.component';
 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/icon/icon.component';
-export * from './lib/spinner/spinner.component';
+export * from './lib/icons/spinner-icon/spinner-icon.component';
 export * from './lib/testbtn/testbtn.component';

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

 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { IconComponent, SpinnerComponent } from 'design-system';
 
 @Component({
   selector: 'ods-button',
   standalone: true,
-  imports: [CommonModule, SpinnerComponent, IconComponent],
+  imports: [CommonModule],
   styles: [':host {@apply inline-flex}'],
   templateUrl: './button.component.html',
 })

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

 import { CommonModule } from '@angular/common';
 import { Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { IconComponent, SpinnerComponent } from 'design-system';
 
 @Component({
   selector: 'ods-file-upload-button',
   standalone: true,
-  imports: [CommonModule, SpinnerComponent, IconComponent],
+  imports: [CommonModule],
   styles: [':host {@apply inline-flex}'],
   templateUrl: './file-upload-button.component.html',
 })

alfa-client/libs/design-system/src/lib/icon/icon.component.html

@@ -149,7 +149,6 @@
           stroke-linecap="round"
         />
       </g>
-      <g *ngSwitchCase="'spinner'" ods-spinner></g>
       <path
         *ngSwitchCase="'upload'"
         d="M15 24V15.85L12.4 18.45L11 17L16 12L21 17L19.6 18.45L17 15.85V24H15ZM10 28C9.45 28 8.97917 27.8042 8.5875 27.4125C8.19583 27.0208 8 26.55 8 26V23H10V26H22V23H24V26C24 26.55 23.8042 27.0208 23.4125 27.4125C23.0208 27.8042 22.55 28 22 28H10Z"

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

 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { SpinnerComponent } from '../spinner/spinner.component';
 
 @Component({
   selector: 'ods-icon',
   standalone: true,
-  imports: [CommonModule, SpinnerComponent],
+  imports: [CommonModule],
   templateUrl: './icon.component.html',
 })
 export class IconComponent {

alfa-client/libs/design-system/src/lib/spinner/spinner.component.spec.ts → alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SpinnerComponent } from './spinner.component';
+import { SpinnerIconComponent } from './spinner-icon.component';
 
-describe('SpinnerComponent', () => {
-  let component: SpinnerComponent;
-  let fixture: ComponentFixture<SpinnerComponent>;
+describe('SpinnerIconComponent', () => {
+  let component: SpinnerIconComponent;
+  let fixture: ComponentFixture<SpinnerIconComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SpinnerComponent],
+      imports: [SpinnerIconComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(SpinnerComponent);
+    fixture = TestBed.createComponent(SpinnerIconComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

alfa-client/libs/design-system/src/lib/spinner/spinner.component.ts → alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.component.ts

-import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
 
 @Component({
-  selector: '[ods-spinner], ods-spinner',
+  selector: 'ods-spinner-icon',
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './spinner.component.html',
+  templateUrl: './spinner-icon.component.html',
 })
-export class SpinnerComponent {
-  @Input() size: string = '100%';
-}
+export class SpinnerIconComponent {}

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

-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { SpinnerComponent } from './spinner.component';
-
-const meta: Meta<SpinnerComponent> = {
-  title: 'Spinner',
-  component: SpinnerComponent,
-  excludeStories: /.*Data$/,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<SpinnerComponent>;
-
-export const Default: Story = {
-  args: { size: '30', stroke: 'black' },
-};

alfa-client/libs/design-ui/src/lib/file-upload-field/file-upload-field.component.html

@@ -9,8 +9,9 @@
   [accept]="accept"
   [dataTestId]="(label | convertForDataTest) + '-file-upload-input'"
   [isLoading]="uploadInProgress.loading"
+  class="w-72"
 >
-  <odsui-spinner spinner class="h-6 w-10" stroke="black" />
+  <ods-spinner-icon spinner class="h-6 w-10" />
   <ods-icon icon name="attachment" class="h-6 w-10 fill-primary" />
   <p text class="text-center">{{ label }}</p>
 </ods-file-upload-button>

alfa-client/libs/design-ui/src/lib/file-upload-field/file-upload-field.component.ts

-import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
-import { ControlContainer, FormGroupDirective, ReactiveFormsModule, UntypedFormArray, UntypedFormControl } from '@angular/forms';
-import { CommonModule } from '@angular/common';
 import { StateResource, TechSharedModule } from '@alfa-client/tech-shared';
-import { uniqueId } from 'lodash-es';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import {
+  ControlContainer,
+  FormGroupDirective,
+  ReactiveFormsModule,
+  UntypedFormArray,
+  UntypedFormControl,
+} from '@angular/forms';
 import { Resource } from '@ngxp/rest';
+import { uniqueId } from 'lodash-es';
 
-import { FileUploadButtonComponent, IconComponent } from 'design-system';
-import { SpinnerComponent } from 'design-ui';
-
+import { FileUploadButtonComponent, IconComponent, SpinnerIconComponent } from 'design-system';
 
 import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component';
 
@@ -16,12 +20,16 @@ import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstra
   standalone: true,
   templateUrl: './file-upload-field.component.html',
   viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
-  imports: [CommonModule, FileUploadButtonComponent, ReactiveFormsModule, IconComponent, SpinnerComponent, TechSharedModule]
+  imports: [
+    CommonModule,
+    FileUploadButtonComponent,
+    ReactiveFormsModule,
+    IconComponent,
+    TechSharedModule,
+    SpinnerIconComponent,
+  ],
 })
-export class FileUploadFieldComponent
-extends FormControlEditorAbstractComponent
-implements OnInit
-{
+export class FileUploadFieldComponent extends FormControlEditorAbstractComponent implements OnInit {
   @Input() parentFormArrayName!: string;
   @Input() uploadInProgress!: StateResource<Resource>;
   @Input() label: string = '';

alfa-client/libs/design-ui/src/lib/spinner/spinner.component.html

-<ods-spinner *ngIf="showSpinner" />
\ No newline at end of file
+<ods-spinner-icon *ngIf="showSpinner" />

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

-import { Component, Input } from '@angular/core';
+import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
 import { CommonModule } from '@angular/common';
-import { createEmptyStateResource, StateResource } from '@alfa-client/tech-shared';
+import { Component, Input } from '@angular/core';
 import { Resource } from '@ngxp/rest';
-import { SpinnerComponent as DesignSpinner } from 'design-system';
+import { SpinnerIconComponent } from 'design-system';
 
 @Component({
   selector: 'odsui-spinner',
   standalone: true,
-  imports: [CommonModule, DesignSpinner],
+  imports: [CommonModule, SpinnerIconComponent],
   templateUrl: './spinner.component.html',
 })
 export class SpinnerComponent {

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-dokumente-hinzufuegen/vorgang-detail-bescheiden-attachment-hochladen/vorgang-detail-bescheiden-attachment-hochladen.component.html

-<div [formGroup]="formService.form">
+<div [formGroup]="formService.form" class="mt-4">
   <odsui-file-upload-field
     [attr.data-test-id]="'vorgang-bescheiden-upload-editor' + formServiceClass.FIELD_ATTACHMENTS"
     [parentFormArrayName]="formServiceClass.FIELD_ATTACHMENTS"

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-dokumente-hinzufuegen/vorgang-detail-bescheiden-bescheid-automatisch-erstellen/vorgang-detail-bescheiden-bescheid-automatisch-erstellen.component.html

@@ -14,6 +14,13 @@
       data-test-id="create-bescheid-document"
     >
     </ozgcloud-button-with-spinner>
+    <div class="mt-4">
+      <ods-button class="w-72" [isLoading]="false">
+        <ods-icon icon name="file-generate" class="size-10 fill-primary" />
+        <ods-spinner-icon spinner class="size-10" />
+        <p text class="text-center">Bescheid-Dokument<br />automatisch erstellen</p></ods-button
+      >
+    </div>
     <!-- -->
   </ng-container>
   <ng-container *ngIf="existsBescheidDocument$ | async">

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-dokumente-hinzufuegen/vorgang-detail-bescheiden-dokumente-hinzufuegen.component.html

-<div>
+<div class="flex flex-col gap-4">
   <alfa-vorgang-detail-bescheiden-bescheid-automatisch-erstellen></alfa-vorgang-detail-bescheiden-bescheid-automatisch-erstellen>
   <alfa-vorgang-detail-bescheiden-dokument-hochladen
     [bescheidDraftStateResource]="bescheidDraftStateResource$ | async"

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

@@ -40,7 +40,8 @@ import { WiedervorlageModule } from '@alfa-client/wiedervorlage';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { RadioButtonCardComponent } from 'design-system';
+import { ButtonComponent, RadioButtonCardComponent } from 'design-system';
+import { FileUploadFieldComponent } from 'design-ui';
 import { AktenzeichenEditDialogComponent } from './aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
 import { AktenzeichenEditableComponent } from './aktenzeichen-editable/aktenzeichen-editable.component';
 import { AbschliessenButtonComponent } from './buttons/abschliessen-button/abschliessen-button.component';
@@ -89,7 +90,6 @@ import { VorgangDetailMoreMenuComponent } from './vorgang-detail-page/vorgang-de
 import { VorgangExportContainerComponent } from './vorgang-detail-page/vorgang-detail-more-menu/vorgang-export-container/vorgang-export-container.component';
 import { ProcessVorgangContainerComponent } from './vorgang-detail-page/vorgang-detail-more-menu/vorgang-process-vorgang-container/vorgang-process-vorgang-container.component';
 import { VorgangDetailPageComponent } from './vorgang-detail-page/vorgang-detail-page.component';
-import { FileUploadFieldComponent } from 'design-ui';
 
 const routes: Routes = [
   {
@@ -119,7 +119,8 @@ const routes: Routes = [
     LoeschAnforderungSharedModule,
     BescheidModule,
     RadioButtonCardComponent,
-    FileUploadFieldComponent
+    FileUploadFieldComponent,
+    ButtonComponent,
   ],
   declarations: [
     VorgangDetailPageComponent,