Add file upload field to design-ui project

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

 <label
-  for="upload-file"
+  [for]="id"
   class="inline-flex items-center justify-start gap-4 whitespace-nowrap rounded-md bg-background-50 py-2 pl-6 pr-6 text-text hover:bg-background-100 focus:outline-none focus:ring-2 focus:ring-primary"
   role="button"
 >
@@ -7,4 +7,4 @@
   <ods-spinner *ngIf="isLoading" size="30" stroke="#2871C5" />
   <p class="text-center">{{ text }}</p>
 </label>
-<input type="file" id="upload-file" name="upload-file" class="hidden" />
+<input type="file" [id]="id" class="hidden" [accept]="accept" (change)="onFileChange($event)" />

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

@@ -9,6 +9,11 @@ import { SpinnerComponent } from '../../spinner/spinner.component';
   templateUrl: './file-upload-button.component.html',
 })
 export class FileUploadButtonComponent {
+  @Input() id!: string ;
   @Input() text: string = '';
   @Input() isLoading: boolean = false;
+  @Input() accept: string = '*/*';
+  @Input() onFileChange: (e: Event) => void = () => {
+    //noop
+  };
 }

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

+<ods-file-upload-button
+  *ngIf="uploadInProgress$ | async as uploadInProgress"
+  [id]="myId"
+  [onFileChange]="onFileChanged"
+>
+  <ods-icon name="attachment" *ngIf="!uploadInProgress.loading" size="32" fillColor="#2871C5" />
+  <odsui-spinner class="h-8 w-8" [stateResource]="uploadInProgress" stroke="#2871C5" />
+</ods-file-upload-button>

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FileUploadFieldComponent } from './file-upload-field.component';
+
+describe('FileUploadFieldComponent', () => {
+  let component: FileUploadFieldComponent;
+  let fixture: ComponentFixture<FileUploadFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FileUploadFieldComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FileUploadFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StateResource } from '@alfa-client/tech-shared';
+import { uniqueId } from 'lodash-es';
+import { Observable } from 'rxjs';
+import { Resource } from '@ngxp/rest';
+
+import { FileUploadButtonComponent, IconComponent } from 'design-system';
+import { SpinnerComponent } from 'design-ui';
+
+@Component({
+  selector: 'odsui-file-upload-field',
+  standalone: true,
+  imports: [CommonModule, FileUploadButtonComponent, IconComponent, SpinnerComponent],
+  templateUrl: './file-upload-field.component.html',
+})
+export class FileUploadFieldComponent {
+  @Input() accept: string = '*/*';
+  @Input() uploadInProgress$!: Observable<StateResource<Resource>>;
+
+  @Output() fileChanged: EventEmitter<File> = new EventEmitter();
+
+  readonly myId: string = uniqueId();
+
+  onFileChanged($event: Event): void {
+    const files: FileList | null = (<HTMLInputElement>$event.target).files;
+    if (files) this.fileChanged.emit(files[0]);
+  }
+}

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

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

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

@@ -13,6 +13,7 @@ import { SpinnerComponent as DesignSpinner } from 'design-system';
 export class SpinnerComponent {
   @Input() stateResource: StateResource<Resource> = createEmptyStateResource<Resource>();
   @Input() show: boolean = false;
+  @Input() stroke: string = 'white';
 
   get showSpinner(): boolean {
     if (this.show) return this.show;