Merge branch 'OZG-7474-WeiterleitenButton' into 'main'

Ozg 7474 weiterleiten button

See merge request !49

alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.ts

@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-annehmen-button',
   templateUrl: './annehmen-button.component.html',
-  styleUrls: ['./annehmen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class AnnehmenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 

alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.html

@@ -23,24 +23,28 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.BEARBEITEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="bearbeiten-button"
-    text="Bearbeiten"
-    icon="edit_icon"
+
+@if (vorgang | hasLink: linkRel.BEARBEITEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
+      data-test-id="bearbeiten-icon-button"
+      tooltip="Vorgang bearbeiten"
+      variant="ghost"
+      size="fit"
       (clickEmitter)="bearbeiten()"
     >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="bearbeiten-icon-button"
-    svgIcon="edit"
-    toolTip="Vorgang bearbeiten"
+      <ods-edit-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
+      data-test-id="bearbeiten-button"
+      text="Bearbeiten"
+      variant="outline"
       (clickEmitter)="bearbeiten()"
     >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+      <ods-edit-icon icon />
+    </ods-button-with-spinner>
+  }
+}

alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.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.
- */

alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.spec.ts

@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { EditIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
@@ -51,8 +49,8 @@ describe('BearbeitenButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
         BearbeitenButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(EditIconComponent),
         HasLinkPipe,
       ],
       providers: [

alfa-client/libs/vorgang-detail/src/lib/buttons/bearbeiten-button/bearbeiten-button.component.ts

@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-bearbeiten-button',
   templateUrl: './bearbeiten-button.component.html',
-  styleUrls: ['./bearbeiten-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class BearbeitenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 

alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.html

@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.BESCHEIDEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="bescheiden-button"
-    [text]="buttonText"
-    svgIcon="stamp"
+@if (vorgang | hasLink: linkRel.BESCHEIDEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
       (clickEmitter)="bescheiden()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
+      [tooltip]="toolTipText"
+      variant="ghost"
+      size="fit"
       data-test-id="bescheiden-icon-button"
-    svgIcon="stamp"
-    [toolTip]="toolTipText"
+    >
+      <ods-stamp-icon icon class="fill-text" size="medium" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
       (clickEmitter)="bescheiden()"
+      [text]="buttonText"
+      variant="outline"
+      data-test-id="bescheiden-button"
     >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+      <ods-stamp-icon icon size="medium" class="fill-primary" />
+    </ods-button-with-spinner>
+  }
+}

alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.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.
- */

alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.spec.ts

@@ -24,12 +24,16 @@
 import { BescheidResource, BescheidService, BescheidWizardDialogResult } from '@alfa-client/bescheid-shared';
 import { CommandResource } from '@alfa-client/command-shared';
 import { createEmptyStateResource, createStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
-import { Mock, mock } from '@alfa-client/test-utils';
 import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudDialogService,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
+  getElementComponentFromFixtureByCss,
+  getMockComponent,
+  Mock,
+  mock,
+  notExistsAsHtmlElement,
+  tooltipExistsWithText,
+  triggerEvent,
+} from '@alfa-client/test-utils';
+import { OzgcloudDialogService } from '@alfa-client/ui';
 import { BescheidenDialogData } from '@alfa-client/vorgang-detail';
 import {
   VorgangCommandService,
@@ -39,6 +43,8 @@ import {
 } from '@alfa-client/vorgang-shared';
 import { DialogRef } from '@angular/cdk/dialog';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { StampIconComponent, TooltipDirective } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -74,8 +80,9 @@ describe('BescheidenButtonComponent', () => {
       declarations: [
         BescheidenButtonComponent,
         HasLinkPipe,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        TooltipDirective,
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(StampIconComponent),
       ],
       providers: [
         {
@@ -107,6 +114,7 @@ describe('BescheidenButtonComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  describe('component', () => {
     describe('ngOnInit', () => {
       it('should call service', () => {
         component.ngOnInit();
@@ -115,71 +123,6 @@ describe('BescheidenButtonComponent', () => {
       });
     });
 
-  describe('bescheiden button', () => {
-    beforeEach(() => {
-      component.showAsIconButton = false;
-      fixture.detectChanges();
-    });
-
-    it('should be hidden', () => {
-      component.vorgang = createVorgangWithEingangResource();
-
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(bescheidenButton);
-
-      expect(buttonElement).not.toBeInstanceOf(HTMLElement);
-    });
-
-    it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
-
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(bescheidenButton);
-
-      expect(buttonElement).toBeInstanceOf(HTMLElement);
-    });
-
-    it('should get "Bescheid" text', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
-
-      const buttonText: string = component.buttonText;
-
-      expect(buttonText).toBe('Bescheiden');
-    });
-
-    it('should get "Bescheiden fortsetzen" text', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.BESCHEIDEN,
-        VorgangWithEingangLinkRel.BESCHEID_DRAFT,
-      ]);
-
-      const buttonText: string = component.buttonText;
-
-      expect(buttonText).toBe('Bescheiden fortsetzen');
-    });
-  });
-
-  describe('tool tip', () => {
-    it('should get "Vorgang bescheiden" text', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
-
-      const toolTipText: string = component.toolTipText;
-
-      expect(toolTipText).toBe('Vorgang bescheiden');
-    });
-
-    it('should get "Vorgang bescheiden fortsetzen" text', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.BESCHEIDEN,
-        VorgangWithEingangLinkRel.BESCHEID_DRAFT,
-      ]);
-
-      const toolTipText: string = component.toolTipText;
-
-      expect(toolTipText).toBe('Vorgang bescheiden fortsetzen');
-    });
-  });
-
     describe('bescheiden', () => {
       describe('should open bescheid wizard', () => {
         beforeEach(() => {
@@ -224,31 +167,6 @@ describe('BescheidenButtonComponent', () => {
       });
     });
 
-  describe('bescheiden icon button', () => {
-    beforeEach(() => {
-      component.showAsIconButton = true;
-      fixture.detectChanges();
-    });
-
-    it('should be hidden', () => {
-      component.vorgang = createVorgangWithEingangResource();
-
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(bescheidenIconButton);
-
-      expect(buttonElement).not.toBeInstanceOf(HTMLElement);
-    });
-
-    it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
-
-      fixture.detectChanges();
-      const buttonElement = fixture.nativeElement.querySelector(bescheidenIconButton);
-
-      expect(buttonElement).toBeInstanceOf(HTMLElement);
-    });
-  });
-
     // TODO: Use this version after completed Bescheid refactoring and delete the other version below.
     // describe('openBescheidenWizard', () => {
     //   let dialogRefMock: DialogRefMock<BescheidWizardDialogResult>;
@@ -397,10 +315,115 @@ describe('BescheidenButtonComponent', () => {
         expect(vorgangService.reloadCurrentVorgang).not.toHaveBeenCalled();
       });
 
-    it.each([null, undefined])('should not reload current vorgang if result nil', (dialogResult: BescheidWizardDialogResult) => {
+      it.each([null, undefined])(
+        'should not reload current vorgang if result nil',
+        (dialogResult: BescheidWizardDialogResult) => {
           component.handleBescheidWizardClosed(dialogResult);
 
           expect(vorgangService.reloadCurrentVorgang).not.toHaveBeenCalled();
+        },
+      );
+    });
+  });
+
+  describe('template', () => {
+    const state: StateResource<CommandResource> = createStateResource(createCommandResource());
+
+    beforeEach(() => {
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
+      component.commandStateResource$ = of(state);
+
+      fixture.detectChanges();
+    });
+
+    describe('bescheiden button', () => {
+      beforeEach(() => {
+        component.showAsIconButton = false;
+        fixture.detectChanges();
+      });
+
+      it('should not exits', () => {
+        component.vorgang = createVorgangWithEingangResource();
+
+        fixture.detectChanges();
+
+        notExistsAsHtmlElement(fixture, bescheidenButton);
+      });
+
+      it('should exist with input', () => {
+        const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, bescheidenButton);
+
+        expect(button.stateResource).toBe(state);
+      });
+
+      it('should get "Bescheid" text', () => {
+        const button: ButtonWithSpinnerComponent = getMockComponent(fixture, ButtonWithSpinnerComponent);
+        expect(button.text).toBe('Bescheiden');
+      });
+
+      it('should get "Bescheiden fortsetzen" text', () => {
+        component.vorgang = createVorgangWithEingangResource([
+          VorgangWithEingangLinkRel.BESCHEIDEN,
+          VorgangWithEingangLinkRel.BESCHEID_DRAFT,
+        ]);
+
+        fixture.detectChanges();
+
+        const button: ButtonWithSpinnerComponent = getMockComponent(fixture, ButtonWithSpinnerComponent);
+        expect(button.text).toBe('Bescheiden fortsetzen');
+      });
+
+      it('should call bescheiden on click', () => {
+        component.bescheiden = jest.fn();
+
+        triggerEvent({ fixture, name: 'clickEmitter', elementSelector: bescheidenButton });
+
+        expect(component.bescheiden).toHaveBeenCalled();
+      });
+    });
+
+    describe('bescheiden icon button', () => {
+      beforeEach(() => {
+        component.showAsIconButton = true;
+        fixture.detectChanges();
+      });
+
+      it('should not exist', () => {
+        component.vorgang = createVorgangWithEingangResource();
+
+        fixture.detectChanges();
+
+        notExistsAsHtmlElement(fixture, bescheidenIconButton);
+      });
+
+      it('should exist with input', () => {
+        const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, bescheidenIconButton);
+
+        expect(button.stateResource).toBe(state);
+      });
+
+      it('should have "Vorgang bescheiden" tooltip', () => {
+        tooltipExistsWithText(fixture, bescheidenIconButton, 'Vorgang bescheiden');
+      });
+
+      it('should have "Vorgang bescheiden fortsetzen" tooltip', () => {
+        component.vorgang = createVorgangWithEingangResource([
+          VorgangWithEingangLinkRel.BESCHEIDEN,
+          VorgangWithEingangLinkRel.BESCHEID_DRAFT,
+        ]);
+
+        fixture.detectChanges();
+
+        tooltipExistsWithText(fixture, bescheidenIconButton, 'Vorgang bescheiden fortsetzen');
+      });
+
+      it('should call bescheiden on click', () => {
+        component.bescheiden = jest.fn();
+
+        triggerEvent({ fixture, name: 'clickEmitter', elementSelector: bescheidenIconButton });
+
+        expect(component.bescheiden).toHaveBeenCalled();
+      });
     });
   });
 });

alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.ts

@@ -40,7 +40,7 @@ import { VorgangDetailBescheidenComponent } from '../../vorgang-detail-page/vorg
 @Component({
   selector: 'alfa-bescheiden-button',
   templateUrl: './bescheiden-button.component.html',
-  styleUrls: ['./bescheiden-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class BescheidenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;

alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.html

@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.VERWERFEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="verwerfen-button"
-    text="Verwerfen"
-    svgIcon="discard_document"
+@if (vorgang | hasLink: linkRel.VERWERFEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
+      data-test-id="verwerfen-icon-button"
+      tooltip="Vorgang verwerfen"
+      variant="ghost"
+      size="fit"
       (clickEmitter)="verwerfen()"
     >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="verwerfen-icon-button"
-    svgIcon="discard_document"
-    toolTip="Vorgang verwerfen"
+      <ods-discard-vorgang-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
+      data-test-id="verwerfen-button"
+      text="Verwerfen"
+      variant="outline"
       (clickEmitter)="verwerfen()"
     >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+      <ods-discard-vorgang-icon icon />
+    </ods-button-with-spinner>
+  }
+}

alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.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.
- */

alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.spec.ts

@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { DiscardVorgangIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -52,8 +50,8 @@ describe('VerwerfenButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
         VerwerfenButtonComponent,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(DiscardVorgangIconComponent),
         HasLinkPipe,
       ],
       providers: [

alfa-client/libs/vorgang-detail/src/lib/buttons/verwerfen-button/verwerfen-button.component.ts

@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-verwerfen-button',
   templateUrl: './verwerfen-button.component.html',
-  styleUrls: ['./verwerfen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class VerwerfenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 

alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.html

@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.WIEDEREROEFFNEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="wiedereroeffnen-button"
-    text="Wiedereröffnen"
-    icon="undo"
+@if (vorgang | hasLink: linkRel.WIEDEREROEFFNEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
+      data-test-id="wiedereroeffnen-icon-button"
+      tooltip="Vorgang wiedereröffnen"
+      variant="ghost"
+      size="fit"
       (clickEmitter)="wiedereroeffnen()"
     >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
-    data-test-id="wiedereroeffnen-icon-button"
-    icon="undo"
-    toolTip="Vorgang wiedereröffnen"
+      <ods-undo-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
+      data-test-id="wiedereroeffnen-button"
+      text="Wiedereröffnen"
+      variant="outline"
       (clickEmitter)="wiedereroeffnen()"
     >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+      <ods-undo-icon icon />
+    </ods-button-with-spinner>
+  }
+}

alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.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.
- */

alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.spec.ts

@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { UndoIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -52,8 +50,8 @@ describe('WiedereroeffnenButtonComponent', () => {
       declarations: [
         WiedereroeffnenButtonComponent,
         HasLinkPipe,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(UndoIconComponent),
       ],
       providers: [
         {
@@ -106,9 +104,7 @@ describe('WiedereroeffnenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.WIEDEREROEFFNEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.WIEDEREROEFFNEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(wiedereroeffnenButton);
@@ -133,9 +129,7 @@ describe('WiedereroeffnenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.WIEDEREROEFFNEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.WIEDEREROEFFNEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(wiedereroeffnenIconButton);

alfa-client/libs/vorgang-detail/src/lib/buttons/wiedereroeffnen-button/wiedereroeffnen-button.component.ts

@@ -21,28 +21,22 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input, OnInit } from '@angular/core';
 import { CommandResource } from '@alfa-client/command-shared';
 import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangCommandService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'alfa-wiedereroeffnen-button',
   templateUrl: './wiedereroeffnen-button.component.html',
-  styleUrls: ['./wiedereroeffnen-button.component.scss'],
+  styles: [':host {@apply empty:hidden}'],
 })
 export class WiedereroeffnenButtonComponent implements OnInit {
   @Input() vorgang: VorgangWithEingangResource;
   @Input() showAsIconButton: boolean = false;
 
-  commandStateResource$: Observable<StateResource<CommandResource>> = of(
-    createEmptyStateResource<CommandResource>(),
-  );
+  commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>());
 
   readonly linkRel = VorgangWithEingangLinkRel;
 

alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.html

@@ -23,24 +23,27 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ng-container *ngIf="vorgang | hasLink: linkRel.ZURUECKHOLEN">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="!showAsIconButton"
-    data-test-id="zurueckholen-button"
-    text="Zurückholen"
-    icon="undo"
+@if (vorgang | hasLink: linkRel.ZURUECKHOLEN) {
+  @if (showAsIconButton) {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
-    (click)="zurueckholen()"
-  >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-icon-button-with-spinner
-    *ngIf="showAsIconButton"
       data-test-id="zurueckholen-icon-button"
-    icon="undo"
-    toolTip="Vorgang zurückholen"
+      variant="ghost"
+      size="fit"
+      tooltip="Vorgang zurückholen"
+      (clickEmitter)="zurueckholen()"
+    >
+      <ods-undo-icon icon class="fill-text" />
+    </ods-button-with-spinner>
+  } @else {
+    <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
+      data-test-id="zurueckholen-button"
+      text="Vorgang zurückholen"
+      variant="outline"
       (clickEmitter)="zurueckholen()"
     >
-  </ozgcloud-icon-button-with-spinner>
-</ng-container>
+      <ods-undo-icon icon />
+    </ods-button-with-spinner>
+  }
+}

alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.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.
- */

alfa-client/libs/vorgang-detail/src/lib/buttons/zurueckholen-button/zurueckholen-button.component.spec.ts

@@ -21,14 +21,12 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import {
-  IconButtonWithSpinnerComponent,
-  OzgcloudStrokedButtonWithSpinnerComponent,
-} from '@alfa-client/ui';
 import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { UndoIconComponent } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
@@ -53,8 +51,8 @@ describe('ZurueckholenButtonComponent', () => {
       declarations: [
         ZurueckholenButtonComponent,
         HasLinkPipe,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
-        MockComponent(IconButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(UndoIconComponent),
       ],
       providers: [
         {
@@ -107,9 +105,7 @@ describe('ZurueckholenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.ZURUECKHOLEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ZURUECKHOLEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(zurueckholenButton);
@@ -134,9 +130,7 @@ describe('ZurueckholenButtonComponent', () => {
     });
 
     it('should be visible', () => {
-      component.vorgang = createVorgangWithEingangResource([
-        VorgangWithEingangLinkRel.ZURUECKHOLEN,
-      ]);
+      component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ZURUECKHOLEN]);
 
       fixture.detectChanges();
       const buttonElement = fixture.nativeElement.querySelector(zurueckholenIconButton);