OZG-7971 replace icon button with spinner

alfa-client/libs/binary-file/src/lib/binary-file-container/binary-file/binary-file.component.html

@@ -44,19 +44,13 @@
       <span class="name">{{ file.name }}</span>
       <span class="size" [innerHTML]="file.size | fileSize"></span>
 
-      <ozgcloud-spinner
-        [diameter]="22"
-        padding="0"
-        [stateResource]="getStateResource()"
-        class="spinner"
-      ></ozgcloud-spinner>
+      <ozgcloud-spinner [diameter]="22" padding="0" [stateResource]="getStateResource()" class="spinner"></ozgcloud-spinner>
     </button>
   </div>
 
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="deletable"
-    icon="close"
-    (clickEmitter)="deleteFile()"
-    data-test-class="delete-file-button"
-  ></ozgcloud-icon-button-with-spinner>
+  @if (deletable) {
+    <ods-button variant="ghost" size="fit" (clickEmitter)="deleteFile()" dataTestClass="delete-file-button">
+      <ods-icon icon name="close" />
+    </ods-button>
+  }
 </div>

alfa-client/libs/binary-file/src/lib/binary-file-container/binary-file/binary-file.component.spec.ts

@@ -25,11 +25,11 @@ import { ApiDownloadToken } from '@alfa-client/api-root-shared';
 import { BinaryFileLinkRel, BinaryFileResource } from '@alfa-client/binary-file-shared';
 import { FileSizePipe, HasLinkPipe, createEmptyStateResource } from '@alfa-client/tech-shared';
 import { getElementFromFixture } from '@alfa-client/test-utils';
-import { IconButtonWithSpinnerComponent, SpinnerComponent } from '@alfa-client/ui';
+import { SpinnerComponent } from '@alfa-client/ui';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
 import { faker } from '@faker-js/faker';
-import { TooltipDirective } from '@ods/system';
+import { ButtonComponent, IconComponent, TooltipDirective } from '@ods/system';
 import { createBinaryFileResource } from 'libs/binary-file-shared/test/binary-file';
 import { getDataTestClassOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent, MockDirective } from 'ng-mocks';
@@ -50,7 +50,8 @@ describe('BinaryFileComponent', () => {
         FileSizePipe,
         HasLinkPipe,
         MockComponent(SpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonComponent),
+        MockComponent(IconComponent),
         MockDirective(TooltipDirective),
       ],
     });

alfa-client/libs/binary-file/src/lib/binary-file.module.ts

@@ -22,7 +22,7 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { ConvertForDataTestPipe, FileSizePipe, HasLinkPipe, ToEmbeddedResourcesPipe } from '@alfa-client/tech-shared';
-import { IconButtonWithSpinnerComponent, SpinnerComponent } from '@alfa-client/ui';
+import { SpinnerComponent } from '@alfa-client/ui';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
@@ -32,6 +32,7 @@ import {
   AttachmentComponent,
   AttachmentHeaderComponent,
   AttachmentWrapperComponent,
+  ButtonComponent,
   IconComponent,
   SpinnerIconComponent,
   TooltipDirective,
@@ -59,13 +60,13 @@ import { VerticalBinaryFileListComponent } from './vertical-binary-file-list/ver
     AttachmentWrapperComponent,
     SpinnerIconComponent,
     IconComponent,
+    ButtonComponent,
     DownloadButtonComponent,
     FileUploadEditorComponent,
     HasLinkPipe,
     MatTooltip,
     MatIcon,
     SpinnerComponent,
-    IconButtonWithSpinnerComponent,
     FileSizePipe,
     ConvertForDataTestPipe,
     ToEmbeddedResourcesPipe,

alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung.module.ts

@@ -23,7 +23,6 @@
  */
 import { LoeschAnforderungSharedModule } from '@alfa-client/loesch-anforderung-shared';
 import { HasLinkPipe } from '@alfa-client/tech-shared';
-import { IconButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { VorgangSharedModule } from '@alfa-client/vorgang-shared';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -41,7 +40,6 @@ import { LoeschenAnfordernButtonComponent } from './loeschen-anfordern-button-co
     CommonModule,
     LoeschAnforderungSharedModule,
     VorgangSharedModule,
-    IconButtonWithSpinnerComponent,
     HasLinkPipe,
     ButtonWithSpinnerComponent,
     IconComponent,

alfa-client/libs/postfach/src/lib/postfach.module.ts

@@ -27,7 +27,6 @@ import { ConvertForDataTestPipe, FormatDateWithTimePipe, HasLinkPipe, ToEmbedded
 import {
   BackButtonComponent,
   CheckboxEnumEditorComponent,
-  IconButtonWithSpinnerComponent,
   OzgcloudIconComponent,
   OzgcloudTextEditorComponent,
   SpinnerComponent,
@@ -93,7 +92,6 @@ const routes: Routes = [
     ConvertForDataTestPipe,
     SubnavigationComponent,
     BackButtonComponent,
-    IconButtonWithSpinnerComponent,
     ButtonComponent,
     IconComponent,
     TooltipDirective,

alfa-client/libs/ui/src/index.ts

@@ -41,7 +41,6 @@ export * from './lib/ui/expansion-panel/expansion-panel.component';
 export * from './lib/ui/file-upload/file-upload.component';
 export * from './lib/ui/fixed-dialog/fixed-dialog-data.model';
 export * from './lib/ui/fixed-dialog/fixed-dialog.component';
-export * from './lib/ui/icon-button-with-spinner/icon-button-with-spinner.component';
 export * from './lib/ui/messages';
 export * from './lib/ui/open-url-button/open-url-button.component';
 export * from './lib/ui/ozgcloud-icon/ozgcloud-icon.component';

alfa-client/libs/ui/src/lib/ui/editor/checkbox-enum-editor/checkbox-enum-editor.component.spec.ts

@@ -21,14 +21,11 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MockComponent } from 'ng-mocks';
-import { IconButtonWithSpinnerComponent } from '../../icon-button-with-spinner/icon-button-with-spinner.component';
 import { CheckboxEnumEditorComponent } from './checkbox-enum-editor.component';
 
 describe('CheckboxEnumEditorComponent', () => {
@@ -37,15 +34,7 @@ describe('CheckboxEnumEditorComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ConvertForDataTestPipe],
-      imports: [
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        BrowserAnimationsModule,
-        CheckboxEnumEditorComponent,
-        MatIcon,
-        MockComponent(IconButtonWithSpinnerComponent),
-      ],
+      imports: [MatFormFieldModule, ReactiveFormsModule, BrowserAnimationsModule, CheckboxEnumEditorComponent, MatIcon],
     }).compileComponents();
   });
 

alfa-client/libs/ui/src/lib/ui/icon-button-with-spinner/icon-button-with-spinner.component.html

-<!--
-
-    Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
-    Ministerpräsidenten des Landes Schleswig-Holstein
-    Staatskanzlei
-    Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
-
-    Lizenziert unter der EUPL, Version 1.2 oder - sobald
-    diese von der Europäischen Kommission genehmigt wurden -
-    Folgeversionen der EUPL ("Lizenz");
-    Sie dürfen dieses Werk ausschließlich gemäß
-    dieser Lizenz nutzen.
-    Eine Kopie der Lizenz finden Sie hier:
-
-    https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-
-    Sofern nicht durch anwendbare Rechtsvorschriften
-    gefordert oder in schriftlicher Form vereinbart, wird
-    die unter der Lizenz verbreitete Software "so wie sie
-    ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
-    ausdrücklich oder stillschweigend - verbreitet.
-    Die sprachspezifischen Genehmigungen und Beschränkungen
-    unter der Lizenz sind dem Lizenztext zu entnehmen.
-
--->
-<button
-  mat-icon-button
-  data-test-class="icon-button"
-  [disabled]="isDisabled"
-  [tooltip]="toolTip"
-  tooltipAriaType="aria-labelledby"
-  [matMenuTriggerFor]="matMenuTriggerFor"
-  (click)="clickEmitter.emit($event)"
-  type="button"
->
-  @if (icon) {
-    <mat-icon data-test-class="icon" [style.visibility]="isDisabled ? 'hidden' : 'visible'">
-      {{ icon }}
-    </mat-icon>
-  }
-
-  @if (svgIcon) {
-    <mat-icon data-test-class="icon" [svgIcon]="svgIcon" [style.visibility]="isDisabled ? 'hidden' : 'visible'" />
-  }
-
-  <ozgcloud-spinner [stateResource]="getStateResource()" [diameter]="22" [show]="showSpinner" padding="0" />
-</button>

alfa-client/libs/ui/src/lib/ui/icon-button-with-spinner/icon-button-with-spinner.component.scss

-/**
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
-:host {
-  position: relative;
-}
-
-[disabled] {
-  background-color: rgba(#000, 0.08);
-}
-
-ozgcloud-spinner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-}

alfa-client/libs/ui/src/lib/ui/icon-button-with-spinner/icon-button-with-spinner.component.spec.ts

-/*
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
-import { createEmptyStateResource } from '@alfa-client/tech-shared';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIcon } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { TooltipDirective } from '@ods/system';
-import { MockComponent, MockDirective } from 'ng-mocks';
-import { SpinnerComponent } from '../spinner/spinner.component';
-import { IconButtonWithSpinnerComponent } from './icon-button-with-spinner.component';
-
-describe('IconButtonWithSpinnerComponent', () => {
-  let component: IconButtonWithSpinnerComponent;
-  let fixture: ComponentFixture<IconButtonWithSpinnerComponent>;
-
-  const buttonSelector = '[data-test-class="icon-button"]';
-  const iconSelector = '[data-test-class="icon"]';
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [IconButtonWithSpinnerComponent, MatIcon, MatMenuModule],
-      declarations: [MockComponent(SpinnerComponent), MockDirective(TooltipDirective)],
-    });
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(IconButtonWithSpinnerComponent);
-    component = fixture.componentInstance;
-    component.icon = 'edit';
-
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('Button', () => {
-    it('should NOT disabled initial', () => {
-      const button = fixture.nativeElement.querySelector(buttonSelector);
-      component.stateResource = createEmptyStateResource();
-      fixture.detectChanges();
-
-      expect(button).not.toBeDisabled();
-    });
-
-    it('should disabled if loading', () => {
-      const button = fixture.nativeElement.querySelector(buttonSelector);
-      component.stateResource = createEmptyStateResource(true);
-      fixture.detectChanges();
-
-      expect(button).toBeDisabled();
-    });
-  });
-
-  describe('Icon', () => {
-    it('should visible initial', () => {
-      const icon = fixture.nativeElement.querySelector(iconSelector);
-      component.stateResource = createEmptyStateResource();
-      fixture.detectChanges();
-
-      expect(icon).toBeVisible();
-    });
-
-    it('should not visible if loading', () => {
-      const icon = fixture.nativeElement.querySelector(iconSelector);
-      component.stateResource = createEmptyStateResource(true);
-      fixture.detectChanges();
-
-      expect(icon).not.toBeVisible();
-    });
-  });
-});

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

-/*
- * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
-import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { MatMenuTrigger } from '@angular/material/menu';
-import { MatTooltip } from '@angular/material/tooltip';
-import { Resource } from '@ngxp/rest';
-import { TooltipDirective } from '@ods/system';
-import { isNil } from 'lodash-es';
-import { SpinnerComponent } from '../spinner/spinner.component';
-
-@Component({
-  selector: 'ozgcloud-icon-button-with-spinner',
-  templateUrl: './icon-button-with-spinner.component.html',
-  styleUrls: ['./icon-button-with-spinner.component.scss'],
-  standalone: true,
-  imports: [MatIconButton, MatTooltip, MatMenuTrigger, MatIcon, SpinnerComponent, TooltipDirective],
-})
-export class IconButtonWithSpinnerComponent {
-  @Input() icon: string;
-  @Input() svgIcon: string;
-  @Input() matMenuTriggerFor: string;
-  @Input() stateResource: StateResource<Resource>;
-  @Input() toolTip: string = '';
-  @Input() showSpinner: boolean = false;
-
-  @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  get isDisabled(): boolean {
-    return this.showSpinner || this.getStateResource().loading;
-  }
-
-  getStateResource(): StateResource<Resource> {
-    return isNil(this.stateResource) ? createEmptyStateResource<Resource>() : this.stateResource;
-  }
-}

alfa-client/libs/user-profile/src/lib/user-profile.module.ts

@@ -22,12 +22,7 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { HasLinkPipe } from '@alfa-client/tech-shared';
-import {
-  AutocompleteEditorComponent,
-  IconButtonWithSpinnerComponent,
-  OzgcloudMenuComponent,
-  SpinnerComponent,
-} from '@alfa-client/ui';
+import { AutocompleteEditorComponent, OzgcloudMenuComponent, SpinnerComponent } from '@alfa-client/ui';
 import { UserProfileSharedModule } from '@alfa-client/user-profile-shared';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -69,7 +64,6 @@ import { UserProfileComponent } from './user-profile/user-profile.component';
     CommonModule,
     UserProfileSharedModule,
     RouterModule,
-    IconButtonWithSpinnerComponent,
     HasLinkPipe,
     MatTooltip,
     SpinnerComponent,

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-action-buttons/vorgang-detail-action-buttons.component.spec.ts

@@ -22,11 +22,14 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { ForwardingButtonContainerComponent } from '@alfa-client/forwarding';
-import { EndgueltigLoeschenButtonContainerComponent, LoeschAnforderungZuruecknehmenButtonContainerComponent, LoeschenAnfordernButtonContainerComponent, } from '@alfa-client/loesch-anforderung';
+import {
+  EndgueltigLoeschenButtonContainerComponent,
+  LoeschAnforderungZuruecknehmenButtonContainerComponent,
+  LoeschenAnfordernButtonContainerComponent,
+} from '@alfa-client/loesch-anforderung';
 import { PostfachMailButtonContainerComponent } from '@alfa-client/postfach';
 import { HasLinkPipe } from '@alfa-client/tech-shared';
 import { existsAsHtmlElement, getMockComponent, notExistsAsHtmlElement } from '@alfa-client/test-utils';
-import { IconButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { AssignUserProfileButtonContainerComponent } from '@alfa-client/user-profile';
 import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { CreateWiedervorlageButtonContainerComponent } from '@alfa-client/wiedervorlage';
@@ -58,7 +61,6 @@ describe('VorgangDetailActionButtonsComponent', () => {
       declarations: [
         VorgangDetailActionButtonsComponent,
         HasLinkPipe,
-        MockComponent(IconButtonWithSpinnerComponent),
         MockComponent(AnnehmenButtonComponent),
         MockComponent(BearbeitenButtonComponent),
         MockComponent(VerwerfenButtonComponent),

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

@@ -36,7 +36,6 @@ import {
   BackButtonComponent,
   DateEditorComponent,
   ExpansionPanelComponent,
-  IconButtonWithSpinnerComponent,
   OzgcloudIconComponent,
   OzgcloudMenuComponent,
   OzgcloudPasteTextButtonComponent,
@@ -157,7 +156,6 @@ const routes: Routes = [
     OzgcloudPasteTextButtonComponent,
     MatDialogActions,
     HasLinkPipe,
-    IconButtonWithSpinnerComponent,
     ExpansionPanelComponent,
     MatTabGroup,
     MatTab,

alfa-client/libs/wiedervorlage/src/lib/wiedervorlage.module.ts

@@ -35,7 +35,6 @@ import {
   BackButtonComponent,
   DateEditorComponent,
   ExpansionPanelComponent,
-  IconButtonWithSpinnerComponent,
   OzgcloudTextEditorComponent,
   SpinnerComponent,
   SubnavigationComponent,
@@ -90,7 +89,6 @@ const routes: Routes = [
     BinaryFileModule,
     UserProfileModule,
     HasLinkPipe,
-    IconButtonWithSpinnerComponent,
     MatIcon,
     MatTooltip,
     ToTrafficLightTooltipPipe,