Merged PR 1855: 5000 Retoure // Info -Tooltip zur Suchseite hinzufügen

Related work items: #5000

libs/icons/src/lib/icons.ts

@@ -178,7 +178,7 @@ export const isaOtherGift =
   '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 6V22M12 6H8.46429C7.94332 6 7.4437 5.78929 7.07533 5.41421C6.70695 5.03914 6.5 4.53043 6.5 4C6.5 3.46957 6.70695 2.96086 7.07533 2.58579C7.4437 2.21071 7.94332 2 8.46429 2C11.2143 2 12 6 12 6ZM12 6H15.5357C16.0567 6 16.5563 5.78929 16.9247 5.41421C17.293 5.03914 17.5 4.53043 17.5 4C17.5 3.46957 17.293 2.96086 16.9247 2.58579C16.5563 2.21071 16.0567 2 15.5357 2C12.7857 2 12 6 12 6ZM20 11V18.8C20 19.9201 20 20.4802 19.782 20.908C19.5903 21.2843 19.2843 21.5903 18.908 21.782C18.4802 22 17.9201 22 16.8 22L7.2 22C6.07989 22 5.51984 22 5.09202 21.782C4.71569 21.5903 4.40973 21.2843 4.21799 20.908C4 20.4802 4 19.9201 4 18.8V11M2 7.6L2 9.4C2 9.96005 2 10.2401 2.10899 10.454C2.20487 10.6422 2.35785 10.7951 2.54601 10.891C2.75992 11 3.03995 11 3.6 11L20.4 11C20.9601 11 21.2401 11 21.454 10.891C21.6422 10.7951 21.7951 10.6422 21.891 10.454C22 10.2401 22 9.96005 22 9.4V7.6C22 7.03995 22 6.75992 21.891 6.54601C21.7951 6.35785 21.6422 6.20487 21.454 6.10899C21.2401 6 20.9601 6 20.4 6L3.6 6C3.03995 6 2.75992 6 2.54601 6.10899C2.35785 6.20487 2.20487 6.35785 2.10899 6.54601C2 6.75992 2 7.03995 2 7.6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 
 export const isaOtherInfo =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>';
 
 export const isaSortByUpMedium =
   '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path d="M10 16V4M10 4L7 7M10 4L13 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';

libs/oms/feature/return-search/src/lib/return-search-main/return-search-main.component.html

@@ -5,6 +5,10 @@
       Scannen Sie den QR-Code auf der Rechnung oder suchen Sie den Beleg
       <br />
       via Rechnungsnummer, E-Mail-Adresse oder Kundennamen
+      <ui-tooltip-icon
+        title="Wo finde ich den QR Code?"
+        content="In den Rechnungsmails con hugendubel.de ist die Rechnungsnummer als QR-Code integriert. Diesen können Sie sich auf einem Smartphone vorzeigen lassen und scannen."
+      ></ui-tooltip-icon>
     </p>
   </div>
 

libs/oms/feature/return-search/src/lib/return-search-main/return-search-main.component.ts

@@ -19,6 +19,7 @@ import {
   FilterInputMenuButtonComponent,
 } from '@isa/shared/filter';
 import { IconButtonComponent } from '@isa/ui/buttons';
+import { TooltipIconComponent } from '@isa/ui/tooltip';
 
 @Component({
   selector: 'oms-feature-return-search-main',
@@ -30,6 +31,7 @@ import { IconButtonComponent } from '@isa/ui/buttons';
     IconButtonComponent,
     FilterInputMenuButtonComponent,
     ReturnTaskListComponent,
+    TooltipIconComponent,
   ],
 })
 export class ReturnSearchMainComponent {

libs/ui/tooltip/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/tooltip.directive';
+export * from './lib/tooltip-icon.component';

libs/ui/tooltip/src/lib/tooltip-icon.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { isaOtherInfo } from '@isa/icons';
+import { TooltipDirective } from './tooltip.directive';
+
+@Component({
+  selector: 'ui-tooltip-icon',
+  template: `<ng-icon name="isaOtherInfo" size="1.5rem"></ng-icon>`,
+  imports: [NgIcon],
+  providers: [provideIcons({ isaOtherInfo })],
+  host: {
+    '[class]': '["ui-tooltip-icon"]',
+  },
+  hostDirectives: [
+    {
+      directive: TooltipDirective,
+      inputs: ['title', 'content', 'triggerOn'],
+    },
+  ],
+})
+export class TooltipIconComponent {}

libs/ui/tooltip/src/lib/tooltip.directive.ts

@@ -63,7 +63,7 @@ export type TooltipTrigger =
     '(mouseleave)': 'onMouseLeave()',
     '(focus)': 'onFocusEvent()',
     '(blur)': 'onBlurEvent()',
-    tabindex: '0',
+    'tabindex': '0',
   },
   standalone: true,
 })
@@ -87,7 +87,7 @@ export class TooltipDirective implements OnDestroy {
 
   /**
    * Array of triggers that will cause the tooltip to show.
-   * Defaults to `['click', 'hover', 'focus']`.
+   * Defaults to `['click', 'focus']`.
    */
   triggerOn = input<TooltipTrigger[]>([
     TooltipTrigger.Click,
@@ -117,7 +117,7 @@ export class TooltipDirective implements OnDestroy {
    * @param trigger The trigger event to check.
    * @returns True if the tooltip should show for the trigger, false otherwise.
    */
-  #shouldShowForTrigger(trigger: TooltipTrigger): boolean {
+  #shouldForTrigger(trigger: TooltipTrigger): boolean {
     return this.triggerOn().includes(trigger);
   }
 
@@ -134,24 +134,24 @@ export class TooltipDirective implements OnDestroy {
         originX: 'end',
         originY: 'top',
         overlayX: 'start',
-        overlayY: 'center',
+        overlayY: 'top',
         offsetX: this.#offset,
-        offsetY: this.#offset,
+        offsetY: -this.#offset,
       },
       {
         // Left position
         originX: 'start',
         originY: 'top',
         overlayX: 'end',
-        overlayY: 'center',
+        overlayY: 'top',
         offsetX: -this.#offset,
-        offsetY: this.#offset,
+        offsetY: -this.#offset,
       },
       {
         // Bottom position
         originX: 'start',
         originY: 'bottom',
-        overlayX: 'center',
+        overlayX: 'start',
         overlayY: 'top',
         offsetX: -this.#offset,
         offsetY: this.#offset,
@@ -160,7 +160,7 @@ export class TooltipDirective implements OnDestroy {
         // Top position
         originX: 'start',
         originY: 'top',
-        overlayX: 'center',
+        overlayX: 'start',
         overlayY: 'bottom',
         offsetX: -this.#offset,
         offsetY: -this.#offset,
@@ -219,30 +219,27 @@ export class TooltipDirective implements OnDestroy {
 
   /**
    * Hides the tooltip only if the trigger matches the open trigger.
-   * If force is true, always hides and resets the open trigger.
    */
-  hide(trigger?: TooltipTrigger, force = false) {
+  hide(trigger?: TooltipTrigger) {
     if (!this.#overlayRef) {
       return;
     }
-    // Exception: If opened by hover, and a click occurs, switch to click
+
     if (
-      !force &&
-      this.#openTrigger &&
-      trigger &&
-      this.#openTrigger !== trigger
+      trigger === TooltipTrigger.Click &&
+      this.#openTrigger !== TooltipTrigger.Click
     ) {
-      // Special case: If open by hover, and click occurs, switch to click
-      if (
-        this.#openTrigger === TooltipTrigger.Hover &&
-        trigger === TooltipTrigger.Click
-      ) {
-        this.#openTrigger = TooltipTrigger.Click;
-        return; // Do not close, now only click can close
-      }
-      // Otherwise, ignore close attempt from a different trigger
-      return;
+      this.#openTrigger = TooltipTrigger.Click;
+      return; // Do not close if the click trigger is not the one that opened it
     }
+
+    if (trigger !== TooltipTrigger.Click) {
+      if (this.#openTrigger !== trigger) {
+        // If the tooltip is not opened by the same trigger, do not close
+        return;
+      }
+    }
+
     this.#overlayRef.detach();
     this.#overlayRef.dispose();
     this.#overlayRef = null;
@@ -270,7 +267,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onClickEvent(event: MouseEvent) {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Click)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Click)) {
       event.preventDefault();
       event.stopPropagation();
       this.toggle(TooltipTrigger.Click);
@@ -283,7 +280,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onMouseEnter() {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Hover)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Hover)) {
       if (!this.#overlayRef) {
         this.show(TooltipTrigger.Hover);
       }
@@ -296,7 +293,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onMouseLeave() {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Hover)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Hover)) {
       this.hide(TooltipTrigger.Hover);
     }
   }
@@ -307,7 +304,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onFocusEvent() {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Focus)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Focus)) {
       if (!this.#overlayRef) {
         this.show(TooltipTrigger.Focus);
       }
@@ -320,7 +317,7 @@ export class TooltipDirective implements OnDestroy {
    * @internal
    */
   onBlurEvent() {
-    if (this.#shouldShowForTrigger(TooltipTrigger.Focus)) {
+    if (this.#shouldForTrigger(TooltipTrigger.Focus)) {
       this.hide(TooltipTrigger.Focus);
     }
   }

libs/ui/tooltip/src/tooltip.scss

@@ -17,7 +17,7 @@
 }
 
 .ui-tooltip-content {
-  @apply isa-text-body-2-bold text-isa-neutral-600;
+  @apply isa-text-body-2-regular text-isa-neutral-600;
 }
 
 /*
@@ -34,3 +34,7 @@
   opacity: 1;
   transition: opacity 150ms ease-in-out;
 }
+
+.ui-tooltip-icon {
+  @apply inline-flex content-center text-isa-accent-blue translate-y-1;
+}