Merge branch 'OZG-6564-new-edit-button' into 'main'

OZG-6564 new edit button

See merge request !48

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

@@ -32,9 +32,9 @@ import { iconVariants, IconVariants } from '../iconVariants';
   imports: [CommonModule],
   template: `<svg
     viewBox="0 0 24 24"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
     [ngClass]="twMerge(iconVariants({ size }), 'fill-primary', class)"
+    aria-hidden="true"
   >
     <path
       d="M5 19H6.425L16.2 9.225L14.775 7.8L5 17.575V19ZM3 21V16.75L16.2 3.575C16.4 3.39167 16.6208 3.25 16.8625 3.15C17.1042 3.05 17.3583 3 17.625 3C17.8917 3 18.15 3.05 18.4 3.15C18.65 3.25 18.8667 3.4 19.05 3.6L20.425 5C20.625 5.18333 20.7708 5.4 20.8625 5.65C20.9542 5.9 21 6.15 21 6.4C21 6.66667 20.9542 6.92083 20.8625 7.1625C20.7708 7.40417 20.625 7.625 20.425 7.825L7.25 21H3ZM15.475 8.525L14.775 7.8L16.2 9.225L15.475 8.525Z"

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html

@@ -24,13 +24,17 @@
 
 -->
 <div class="flex flex-shrink" alfa-aktenzeichen [vorgang]="vorgang"></div>
-<ng-container *ngIf="vorgang | hasLink: linkRel.SET_AKTENZEICHEN">
-  <div class="relative w-12">
-    <ozgcloud-icon-button-primary
-      svgIcon="edit"
+@if (vorgang | hasLink: linkRel.SET_AKTENZEICHEN) {
+  <div class="relative">
+    <ods-button
+      class="absolute -top-2"
+      variant="ghost"
+      size="fit"
       tooltip="Aktenzeichen bearbeiten"
       data-test-id="aktenzeichen-editieren"
       (clickEmitter)="onEdit()"
-    ></ozgcloud-icon-button-primary>
+    >
+      <ods-edit-icon icon />
+    </ods-button>
   </div>
-</ng-container>
+}

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.scss

-/**
- * Copyright (C) 2024 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.
- */
-
-// Workaround Material's fixed 48px height
-:host ::ng-deep ozgcloud-icon-button-primary button {
-  position: absolute;
-  top: -14px;
-}

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts

@@ -22,11 +22,13 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { HasLinkPipe } from '@alfa-client/tech-shared';
-import { mock } from '@alfa-client/test-utils';
-import { DialogService, OzgcloudIconButtonPrimaryComponent } from '@alfa-client/ui';
+import { existsAsHtmlElement, mock, notExistsAsHtmlElement } from '@alfa-client/test-utils';
+import { DialogService } from '@alfa-client/ui';
 import { VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
 import { AktenzeichenComponent } from '@alfa-client/vorgang-shared-ui';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonComponent, EditIconComponent } 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';
 import { AktenzeichenEditDialogComponent } from '../aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
@@ -36,6 +38,8 @@ describe('AktenzeichenComponent', () => {
   let component: AktenzeichenEditableComponent;
   let fixture: ComponentFixture<AktenzeichenEditableComponent>;
 
+  const editButton: string = getDataTestIdOf('aktenzeichen-editieren');
+
   const dialogService = mock(DialogService);
 
   beforeEach(async () => {
@@ -43,7 +47,8 @@ describe('AktenzeichenComponent', () => {
       declarations: [
         HasLinkPipe,
         AktenzeichenEditableComponent,
-        MockComponent(OzgcloudIconButtonPrimaryComponent),
+        MockComponent(ButtonComponent),
+        MockComponent(EditIconComponent),
         MockComponent(AktenzeichenComponent),
       ],
       providers: [
@@ -79,12 +84,8 @@ describe('AktenzeichenComponent', () => {
   });
 
   describe('after render', () => {
-    it('should render edit button', () => {
-      const editIcon = fixture.nativeElement.querySelector('ozgcloud-icon-button-primary');
-
-      fixture.detectChanges();
-
-      expect(editIcon).not.toBeInstanceOf(HTMLElement);
+    it('should NOT render edit button', () => {
+      notExistsAsHtmlElement(fixture, editButton);
     });
 
     it('should render edit button', () => {
@@ -94,8 +95,7 @@ describe('AktenzeichenComponent', () => {
 
       fixture.detectChanges();
 
-      const editIcon = fixture.nativeElement.querySelector('ozgcloud-icon-button-primary');
-      expect(editIcon).toBeInstanceOf(HTMLElement);
+      existsAsHtmlElement(fixture, editButton);
     });
   });
 });

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.ts

@@ -21,15 +21,14 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
-import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { DialogService } from '@alfa-client/ui';
+import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
 import { AktenzeichenEditDialogComponent } from '../aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
 
 @Component({
   selector: 'alfa-aktenzeichen-editable',
   templateUrl: './aktenzeichen-editable.component.html',
-  styleUrls: ['./aktenzeichen-editable.component.scss'],
 })
 export class AktenzeichenEditableComponent {
   @Input() vorgang: VorgangWithEingangResource;

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html

@@ -48,7 +48,7 @@
       {{ vorgang.name }}
     </h2>
     <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
-    <div class="flex flex-1 flex-row gap-1">
+    <div class="flex flex-1 flex-row items-center gap-1">
       <div class="flex flex-shrink-0" [class.text-gray-400]="!hasAktenzeichen">
         <mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon>
       </div>

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

@@ -61,6 +61,7 @@ import {
   CloseIconComponent,
   DropdownMenuComponent,
   DropdownMenuTextItemComponent,
+  EditIconComponent,
   ErrorMessageComponent,
   ExclamationIconComponent,
   FileIconComponent,
@@ -70,6 +71,7 @@ import {
   SendIconComponent,
   SpinnerIconComponent,
   StampIconComponent,
+  TooltipDirective,
 } from '@ods/system';
 import { AktenzeichenEditDialogComponent } from './aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
 import { AktenzeichenEditableComponent } from './aktenzeichen-editable/aktenzeichen-editable.component';
@@ -155,6 +157,7 @@ const routes: Routes = [
     ButtonComponent,
     ButtonCardComponent,
     CloseIconComponent,
+    EditIconComponent,
     ExclamationIconComponent,
     SaveIconComponent,
     SendIconComponent,
@@ -178,6 +181,7 @@ const routes: Routes = [
     DropdownMenuTextItemComponent,
     MoreIconComponent,
     FileIconComponent,
+    TooltipDirective,
   ],
   declarations: [
     VorgangDetailPageComponent,