OZG-8129 replace button in paste text button

alfa-client/libs/design-system/src/assets/paste-from-clipboard.svg

+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="m5.63158 23 1.62105-1.5675L5.42895 19.7H12v-2.2H5.42895l1.82368-1.76-1.62105-1.54L1 18.6 5.63158 23ZM2.15789 12H4.3V5.4h2.2v3.3h12.1V5.4h2.2v15.4h-5.9053V23h5.7895c.6369 0 1.182-.2154 1.6355-.6462.4535-.4309.6803-.9488.6803-1.5538V5.4c0-.605-.2268-1.12292-.6803-1.55375-.4535-.43083-.9986-.64625-1.6355-.64625H15.85c-.2123-.64167-.6272-1.16875-1.2447-1.58125C13.9877 1.20625 13.3123 1 12.5789 1c-.7719 0-1.4618.20625-2.0697.61875-.60788.4125-1.01797.93958-1.23025 1.58125H4.47368c-.63684 0-1.18201.21542-1.63552.64625-.45351.43083-.68027.94875-.68027 1.55375V12ZM12.5789 5.4c-.328 0-.603-.10542-.825-.31625-.2219-.21083-.3328-.47208-.3328-.78375 0-.31167.1109-.57292.3328-.78375.222-.21083.497-.31625.825-.31625.3281 0 .6031.10542.825.31625.222.21083.3329.47208.3329.78375 0 .31167-.1109.57292-.3329.78375-.2219.21083-.4969.31625-.825.31625Z" />
+  <path d="M7 11h11v1H7v-1ZM10 14h8v1h-8v-1ZM15 17h3v1h-3v-1Z" />
+</svg>
\ No newline at end of file

alfa-client/libs/ui/src/lib/assets/paste_from_clipboard.svg

-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="m5.63158 23 1.62105-1.5675L5.42895 19.7H12v-2.2H5.42895l1.82368-1.76-1.62105-1.54L1 18.6 5.63158 23ZM2.15789 12H4.3V5.4h2.2v3.3h12.1V5.4h2.2v15.4h-5.9053V23h5.7895c.6369 0 1.182-.2154 1.6355-.6462.4535-.4309.6803-.9488.6803-1.5538V5.4c0-.605-.2268-1.12292-.6803-1.55375-.4535-.43083-.9986-.64625-1.6355-.64625H15.85c-.2123-.64167-.6272-1.16875-1.2447-1.58125C13.9877 1.20625 13.3123 1 12.5789 1c-.7719 0-1.4618.20625-2.0697.61875-.60788.4125-1.01797.93958-1.23025 1.58125H4.47368c-.63684 0-1.18201.21542-1.63552.64625-.45351.43083-.68027.94875-.68027 1.55375V12ZM12.5789 5.4c-.328 0-.603-.10542-.825-.31625-.2219-.21083-.3328-.47208-.3328-.78375 0-.31167.1109-.57292.3328-.78375.222-.21083.497-.31625.825-.31625.3281 0 .6031.10542.825.31625.222.21083.3329.47208.3329.78375 0 .31167-.1109.57292-.3329.78375-.2219.21083-.4969.31625-.825.31625Z"/>
-  <path d="M7 11h11v1H7v-1ZM10 14h8v1h-8v-1ZM15 17h3v1h-3v-1Z"/>
-</svg>
\ No newline at end of file

alfa-client/libs/ui/src/lib/icon/icon.model.ts

@@ -26,5 +26,4 @@ export enum Icons {
   LOGO = 'logo',
   MAIL = 'mail',
   PDF_EXPORT = 'pdf_export',
-  PASTE_FROM_CLIPBOARD = 'paste_from_clipboard',
 }

alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.html

@@ -24,12 +24,7 @@ unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
 @if (isPasteSupported) {
-  <ozgcloud-icon-button-primary
-    [tooltip]="tooltip"
-    svgIcon="paste_from_clipboard"
-    class="paste_icon"
-    (clickEmitter)="onPaste()"
-    data-test-id="paste_from_clipboard"
-  >
-  </ozgcloud-icon-button-primary>
+  <ods-button variant="ghost" size="fit" (clickEmitter)="onPaste()" data-test-id="paste-button" [tooltip]="tooltip">
+    <ods-icon icon name="paste-from-clipboard" />
+  </ods-button>
 }

alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.spec.ts

@@ -22,13 +22,10 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { isClipboardReadSupported } from '@alfa-client/tech-shared';
-import { getElementFromFixture, mock } from '@alfa-client/test-utils';
-import { OzgcloudIconButtonPrimaryComponent } from '@alfa-client/ui';
+import { existsAsHtmlElement, mock, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { EventEmitter } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIcon } from '@angular/material/icon';
-import { MatIconTestingModule } from '@angular/material/icon/testing';
-import { TooltipDirective } from '@ods/system';
+import { ButtonComponent, IconComponent, TooltipDirective } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent, MockDirective } from 'ng-mocks';
 import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button.component';
@@ -39,23 +36,19 @@ const isClipboardReadSupportedMock = isClipboardReadSupported as jest.Mock;
 const clipboardContent = '1234';
 const readTextMock = jest.fn().mockResolvedValue(clipboardContent);
 Object.assign(navigator, { clipboard: { readText: readTextMock } });
+const pasteButtonLocator: string = getDataTestIdOf('paste-button');
 
 describe('OzgcloudPasteTextButtonComponent', () => {
   let component: OzgcloudPasteTextButtonComponent;
   let fixture: ComponentFixture<OzgcloudPasteTextButtonComponent>;
 
-  function getMatIconElement(): HTMLElement {
-    return getElementFromFixture(fixture, getDataTestIdOf('paste_from_clipboard'));
-  }
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        MatIconTestingModule,
         OzgcloudPasteTextButtonComponent,
-        MockComponent(MatIcon),
-        MockComponent(OzgcloudIconButtonPrimaryComponent),
         MockDirective(TooltipDirective),
+        MockComponent(ButtonComponent),
+        MockComponent(IconComponent),
       ],
     }).compileComponents();
 
@@ -74,9 +67,7 @@ describe('OzgcloudPasteTextButtonComponent', () => {
   });
 
   it('should not render if paste not supported', () => {
-    const matIcon = getMatIconElement();
-
-    expect(matIcon).not.toBeInstanceOf(HTMLElement);
+    notExistsAsHtmlElement(fixture, pasteButtonLocator);
   });
 
   describe('ngOnInit', () => {
@@ -97,11 +88,10 @@ describe('OzgcloudPasteTextButtonComponent', () => {
     it('should render if paste supported', () => {
       isClipboardReadSupportedMock.mockReturnValue(true);
       fixture.detectChanges();
-      const matIcon = getMatIconElement();
 
       component.ngOnInit();
 
-      expect(matIcon).toBeInstanceOf(HTMLElement);
+      existsAsHtmlElement(fixture, pasteButtonLocator);
     });
   });
 

alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.ts

@@ -23,14 +23,14 @@
  */
 import { isClipboardReadSupported } from '@alfa-client/tech-shared';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { OzgcloudIconButtonPrimaryComponent } from '../ozgcloud-button/ozgcloud-icon-button-primary/ozgcloud-icon-button-primary.component';
+import { ButtonComponent, IconComponent, TooltipDirective } from '@ods/system';
 
 @Component({
   selector: 'ozgcloud-paste-text-button',
   templateUrl: './ozgcloud-paste-text-button.component.html',
   styleUrls: ['./ozgcloud-paste-text-button.component.scss'],
   standalone: true,
-  imports: [OzgcloudIconButtonPrimaryComponent],
+  imports: [ButtonComponent, IconComponent, TooltipDirective],
 })
 export class OzgcloudPasteTextButtonComponent implements OnInit {
   @Input() tooltip: string;