OZG-6989 7375 icons vereinheitlichen

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

@@ -36,11 +36,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   standalone: true,
   imports: [CommonModule, ButtonComponent, ErrorMessageComponent],
   styles: [':host {@apply flex flex-col w-fit}'],
-  template: ` <ods-error-message
-      *ngIf="isError"
-      text="Ein Fehler ist aufgetreten."
-      subText="Versuchen Sie es noch einmal."
-    >
+  template: ` <ods-error-message *ngIf="isError" text="Ein Fehler ist aufgetreten." subText="Versuchen Sie es noch einmal.">
     </ods-error-message>
     <ods-button
       [text]="text"
@@ -50,6 +46,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
       [isLoading]="isLoading"
       (click)="clickEmitter.emit()"
     >
+      <ng-content icon select="[icon]" />
     </ods-button>`,
 })
 export class ButtonWithSpinnerComponent implements OnInit {
@@ -74,8 +71,6 @@ export class ButtonWithSpinnerComponent implements OnInit {
   }
 
   get isError(): boolean {
-    return (
-      isLoaded(this.stateResource) && hasCommandError(<CommandResource>this.stateResource.resource)
-    );
+    return isLoaded(this.stateResource) && hasCommandError(<CommandResource>this.stateResource.resource);
   }
 }

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

@@ -32,7 +32,7 @@ import { iconVariants, IconVariants } from '../iconVariants';
   imports: [CommonModule],
   template: `<svg
     viewBox="0 0 24 24"
-    [ngClass]="[twMerge(iconVariants({ size }), 'fill-text', class)]"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
     aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
   >

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

@@ -32,14 +32,13 @@ import { IconVariants, iconVariants } from '../iconVariants';
   standalone: true,
   imports: [NgClass],
   template: ` <svg
-    xmlns="http://www.w3.org/2000/svg"
     [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
     aria-hidden="true"
-    viewBox="0 0 24 24"
-    fill="none"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M21.3333 12V21.3333H2.66667V12H0V21.3333C0 22.8 1.2 24 2.66667 24H21.3333C22.8 24 24 22.8 24 21.3333V12H21.3333ZM13.3333 12.8933L16.7867 9.45333L18.6667 11.3333L12 18L5.33333 11.3333L7.21333 9.45333L10.6667 12.8933V0H13.3333V12.8933Z"
+      d="M25.3333 16V25.3333H6.66667V16H4V25.3333C4 26.8 5.2 28 6.66667 28H25.3333C26.8 28 28 26.8 28 25.3333V16H25.3333ZM17.3333 16.8933L20.7867 13.4533L22.6667 15.3333L16 22L9.33333 15.3333L11.2133 13.4533L14.6667 16.8933V4H17.3333V16.8933Z"
     />
   </svg>`,
 })

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

@@ -32,21 +32,19 @@ import { IconVariants, iconVariants } from '../iconVariants';
   standalone: true,
   imports: [NgClass],
   template: `<svg
-    xmlns="http://www.w3.org/2000/svg"
     [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
     aria-hidden="true"
-    viewBox="0 0 24 24"
-    fill="none"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M0 21.6693V0.335938L25.3333 11.0026L0 21.6693ZM2.66667 17.6693L18.4667 11.0026L2.66667 4.33594V9.0026L10.6667 11.0026L2.66667 13.0026V17.6693Z"
+      d="M4 26.6688V5.33545L29.3333 16.0021L4 26.6688ZM6.66667 22.6688L22.4667 16.0021L6.66667 9.33545V14.0021L14.6667 16.0021L6.66667 18.0021V22.6688Z"
     />
   </svg>`,
 })
 export class SendIconComponent {
   @Input() size: IconVariants['size'] = 'medium';
   @Input() class: string = undefined;
-
   iconVariants = iconVariants;
   twMerge = twMerge;
 }

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-bescheid-versenden/vorgang-detail-bescheiden-bescheid-versenden.component.html

@@ -37,7 +37,7 @@
       variant="bescheid_save"
       [fullWidthText]="true"
       data-test-id="send-to-antragsteller-button"
-      ><ods-send-icon></ods-send-icon
+      ><ods-send-icon size="large"></ods-send-icon
     ></ods-radio-button-card>
     <ods-radio-button-card
       *ngIf="bescheidResource$ | async | hasLink: bescheidLinkRel.BESCHEIDEN"
@@ -47,7 +47,7 @@
       variant="bescheid_save"
       [fullWidthText]="true"
       data-test-id="save-button"
-      ><ods-save-icon></ods-save-icon
+      ><ods-save-icon size="large"></ods-save-icon
     ></ods-radio-button-card>
   </ng-container>
 </div>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-more-menu/vorgang-archive-container/vorgang-archive-container.component.html

-<ozgcloud-button-with-spinner
+<ods-button
   dataTestId="archive-vorgang"
   (click)="openArchiveConfirmationDialog()"
+  variant="outline"
+  size="medium"
   text="Archivierung starten"
-  icon="archive"
-/>
+>
+  <ods-archive-icon icon />
\ No newline at end of file
+</ods-button>
\ No newline at end of file

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-more-menu/vorgang-archive-container/vorgang-archive-container.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { mock } from '@alfa-client/test-utils';
-import { OzgcloudButtonWithSpinnerComponent, OzgcloudDialogService } from '@alfa-client/ui';
+import { OzgcloudDialogService } from '@alfa-client/ui';
+import { ArchiveIconComponent, ButtonComponent } from '@ods/system';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
-import { describe } from 'node:test';
 import { VorgangArchiveConfirmationDialogContainerComponent } from './vorgang-archive-confirmation-dialog-container/vorgang-archive-confirmation-dialog-container.component';
 import { VorgangArchiveContainerComponent } from './vorgang-archive-container.component';
 
@@ -20,8 +20,9 @@ describe('VorgangArchiveContainerComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         VorgangArchiveContainerComponent,
-        MockComponent(OzgcloudButtonWithSpinnerComponent),
+        MockComponent(ButtonComponent),
         MockComponent(VorgangArchiveConfirmationDialogContainerComponent),
+        MockComponent(ArchiveIconComponent),
       ],
       providers: [
         {

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-more-menu/vorgang-export-container/vorgang-export-container.component.html

@@ -23,14 +23,17 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-button-with-spinner
+
+<ods-button-with-spinner
   *ngIf="vorgangWithEingang | hasLink: vorgangWithEingangLinkRel.EXPORT; else exportNotPossible"
   dataTestId="export-vorgang"
-  [showSpinner]="(exportStateResource$ | async)?.loading"
   (clickEmitter)="export()"
+  [stateResource]="exportStateResource$ | async"
+  variant="outline"
   text="Herunterladen"
-  icon="save_alt"
-/>
+>
+  <ods-save-icon icon />
+</ods-button-with-spinner>
 <ng-template #exportNotPossible>
   <div class="flex items-start gap-2" data-test-id="cannot-export-vorgang">
     <ods-exclamation-icon />

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-more-menu/vorgang-export-container/vorgang-export-container.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/vorgang-detail-page/vorgang-detail-more-menu/vorgang-export-container/vorgang-export-container.component.spec.ts

@@ -23,10 +23,10 @@
  */
 import { HasLinkPipe, StateResource, createStateResource } from '@alfa-client/tech-shared';
 import { getElementFromFixture, mock } from '@alfa-client/test-utils';
-import { OzgcloudButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { VorgangService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ExclamationIconComponent } from '@ods/system';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { ExclamationIconComponent, SaveIconComponent } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
@@ -48,8 +48,9 @@ describe('VorgangExportContainerComponent', () => {
       declarations: [
         HasLinkPipe,
         VorgangExportContainerComponent,
-        MockComponent(OzgcloudButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
         MockComponent(ExclamationIconComponent),
+        MockComponent(SaveIconComponent),
       ],
       providers: [
         {

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-more-menu/vorgang-export-container/vorgang-export-container.component.ts

@@ -22,18 +22,13 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { StateResource } from '@alfa-client/tech-shared';
-import {
-  VorgangService,
-  VorgangWithEingangLinkRel,
-  VorgangWithEingangResource,
-} from '@alfa-client/vorgang-shared';
+import { VorgangService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Observable, tap } from 'rxjs';
 
 @Component({
   selector: 'alfa-vorgang-export-container',
   templateUrl: './vorgang-export-container.component.html',
-  styleUrls: ['./vorgang-export-container.component.scss'],
 })
 export class VorgangExportContainerComponent implements OnInit {
   @Input() vorgangWithEingang: VorgangWithEingangResource;

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-more-menu/vorgang-process-vorgang-container/vorgang-process-vorgang-container.component.html

@@ -23,11 +23,12 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-button-with-spinner
+<ods-button-with-spinner
   dataTestId="process-vorgang"
-  [stateResource]="commandStateResource$ | async"
   (clickEmitter)="processVorgang()"
+  [stateResource]="commandStateResource$ | async"
+  variant="outline"
   text="Vorgang vorprüfen"
-  svgIcon="done"
 >
-</ozgcloud-button-with-spinner>
+  <ods-check-icon icon />
+</ods-button-with-spinner>
\ No newline at end of file

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

@@ -57,6 +57,7 @@ import {
   BescheidUploadIconComponent,
   ButtonCardComponent,
   ButtonComponent,
+  CheckIconComponent,
   CloseIconComponent,
   ErrorMessageComponent,
   ExclamationIconComponent,
@@ -168,6 +169,7 @@ const routes: Routes = [
     ErrorMessageComponent,
     CollaborationModule,
     ArchiveIconComponent,
+    CheckIconComponent,
   ],
   declarations: [
     VorgangDetailPageComponent,