OZG-7619 Set tooltip width

alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts

@@ -29,12 +29,15 @@ import { TooltipPosition } from './tooltip.directive';
   selector: 'ods-tooltip',
   imports: [NgClass],
   template: `<span
-    class="tooltip fixed z-[100] max-w-md animate-fadeIn cursor-default break-words rounded bg-ozggray-900 px-3 py-2 text-sm text-whitetext before:absolute before:border-l-[0.5rem] before:border-r-[0.5rem] before:border-l-transparent before:border-r-transparent dark:bg-white md:max-w-[calc(90vw)]"
+    class="tooltip fixed z-[100] animate-fadeIn cursor-default break-words rounded bg-ozggray-900 px-3 py-2 text-sm text-whitetext before:absolute before:border-l-[0.5rem] before:border-r-[0.5rem] before:border-l-transparent before:border-r-transparent dark:bg-white"
     [ngClass]="class"
     [class.visible]="show"
     [class.invisible]="!show"
+    [class.text-wrap]="width"
+    [class.text-nowrap]="!width"
     [style.left.px]="left"
     [style.top.px]="top"
+    [style.width.px]="width"
     [style.--before-left.px]="leftOffset"
     [attr.id]="id"
     role="tooltip"
@@ -49,6 +52,7 @@ export class TooltipComponent {
   text: string = '';
   left: number = 0;
   top: number = 0;
+  width: number = null;
   show: boolean = false;
   id: string;
   class: string;

alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts

@@ -23,7 +23,7 @@
  */
 import { InteractivityChecker } from '@angular/cdk/a11y';
 import { ComponentRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { faker } from '@faker-js/faker/.';
 import { TooltipComponent } from './tooltip.component';
 import { TooltipDirective, TooltipPosition } from './tooltip.directive';
@@ -46,7 +46,17 @@ describe('TooltipDirective', () => {
     location: null,
     hostView: null,
     injector: null,
-    instance: { id: '', left: 0, top: 0, text: '', show: false, position: TooltipPosition.BELOW, class: '', leftOffset: 0 },
+    instance: {
+      id: '',
+      left: 0,
+      top: 0,
+      text: '',
+      show: false,
+      position: TooltipPosition.BELOW,
+      class: '',
+      leftOffset: 0,
+      width: null,
+    },
   };
   const parentRect: DOMRect = { bottom: 0, top: 0, height: 0, left: 0, right: 0, toJSON: jest.fn(), width: 0, x: 0, y: 0 };
 
@@ -152,6 +162,7 @@ describe('TooltipDirective', () => {
     beforeEach(() => {
       directive.componentRef = mockComponentRef;
       directive.setTooltipProperties = jest.fn();
+      directive.setWidth = jest.fn();
       directive.elementRef.nativeElement.contains = jest.fn().mockReturnValue(true);
     });
 
@@ -175,11 +186,13 @@ describe('TooltipDirective', () => {
       expect(directive.attachedToFocused).toBeTruthy();
     });
 
-    it('should set tooltip properties', () => {
+    it('should set tooltip properties after tick', fakeAsync(() => {
       directive.showTooltip();
 
+      tick();
+
       expect(directive.setTooltipProperties).toHaveBeenCalled();
-    });
+    }));
   });
 
   describe('hideTooltip', () => {

alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts

@@ -23,7 +23,17 @@
  */
 import { isEscapeKey, isNotNull } from '@alfa-client/tech-shared';
 import { InteractivityChecker } from '@angular/cdk/a11y';
-import { ComponentRef, Directive, ElementRef, HostListener, inject, Input, OnDestroy, Renderer2, ViewContainerRef, } from '@angular/core';
+import {
+  ComponentRef,
+  Directive,
+  ElementRef,
+  HostListener,
+  inject,
+  Input,
+  OnDestroy,
+  Renderer2,
+  ViewContainerRef,
+} from '@angular/core';
 import { isEmpty, isNull, uniqueId } from 'lodash-es';
 import { TooltipComponent } from './tooltip.component';
 
@@ -80,7 +90,10 @@ export class TooltipDirective implements OnDestroy {
 
     const nativeElement: HTMLElement = this.elementRef.nativeElement;
     this.attachedToFocused = nativeElement.contains(document.activeElement);
+    this.setWidth();
+    setTimeout(() => {
       this.setTooltipProperties();
+    });
   }
 
   @HostListener('mouseleave')
@@ -197,6 +210,15 @@ export class TooltipDirective implements OnDestroy {
     return parentBottom + (attachedToFocused ? OUTLINE_INDENT : 0);
   }
 
+  setWidth(): void {
+    const currentWidth: number = this.componentRef.location.nativeElement.children[0].getBoundingClientRect().width;
+    if (currentWidth >= 360) {
+      this.componentRef.instance.width = 360;
+    } else {
+      this.componentRef.instance.width = null;
+    }
+  }
+
   hide(): void {
     if (isNull(this.componentRef)) {
       return;