@siemens/element-ng 49.12.0 → 49.14.0

package/fesm2022/siemens-element-ng-tooltip.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, inject, ElementRef, computed, TemplateRef, ChangeDetectionStrategy, Component, Injector, Injectable, input, booleanAttribute, PLATFORM_ID, Directive, NgModule } from '@angular/core';
-import { NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
-import { Overlay } from '@angular/cdk/overlay';
+import { InjectionToken, signal, inject, ElementRef, afterRenderEffect, computed, TemplateRef, ChangeDetectionStrategy, Component, Injector, PLATFORM_ID, Injectable, input, booleanAttribute, effect, Directive, NgModule } from '@angular/core';
+import { OverlayRef, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { calculateOverlayArrowPosition, getPositionStrategy, getOverlay } from '@siemens/element-ng/common';
+import { NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
+import { calculateOverlayArrowPosition, getOverlay, getPositionStrategy } from '@siemens/element-ng/common';
+import { Subject, fromEvent, timer } from 'rxjs';
+import { filter, takeUntil, delayWhen } from 'rxjs/operators';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
 /**
@@ -12,14 +14,45 @@ import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
  */
 const SI_TOOLTIP_CONFIG = new InjectionToken('SiTooltipConfig');
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
 class TooltipComponent {
     tooltipPositionClass = signal('', ...(ngDevMode ? [{ debugName: "tooltipPositionClass" }] : []));
     arrowPos = signal(undefined, ...(ngDevMode ? [{ debugName: "arrowPos" }] : []));
     config = inject(SI_TOOLTIP_CONFIG);
     elementRef = inject(ElementRef);
+    overlayRef = inject(OverlayRef);
+    lastPositionChange;
+    lastAnchor;
+    constructor() {
+        let isFirstRun = true;
+        afterRenderEffect(() => {
+            this.config.tooltip();
+            this.config.tooltipContext();
+            if (isFirstRun) {
+                isFirstRun = false;
+                return;
+            }
+            this.overlayRef.updatePosition();
+            if (this.lastPositionChange) {
+                this.updateTooltipPosition(this.lastPositionChange, this.lastAnchor);
+            }
+        });
+    }
     tooltipText = computed(() => {
         const tooltip = this.config.tooltip();
-        return typeof tooltip === 'string' ? tooltip : null;
+        if (typeof tooltip === 'string') {
+            return tooltip;
+        }
+        // When an ElementRef is provided, read its current text content whenever the
+        // tooltip is shown, so dynamic content is always reflected.
+        // The tooltip content is not updated while being displayed.
+        if (tooltip instanceof ElementRef) {
+            return tooltip.nativeElement.textContent.trim();
+        }
+        return null;
     }, ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
     tooltipTemplate = computed(() => {
         const tooltip = this.config.tooltip();
@@ -27,10 +60,16 @@ class TooltipComponent {
     }, ...(ngDevMode ? [{ debugName: "tooltipTemplate" }] : []));
     tooltipComponent = computed(() => {
         const tooltip = this.config.tooltip();
-        return !(tooltip instanceof TemplateRef) && typeof tooltip !== 'string' ? tooltip : null;
+        return !(tooltip instanceof TemplateRef) &&
+            !(tooltip instanceof ElementRef) &&
+            typeof tooltip !== 'string'
+            ? tooltip
+            : null;
     }, ...(ngDevMode ? [{ debugName: "tooltipComponent" }] : []));
     /** @internal */
     updateTooltipPosition(change, anchor) {
+        this.lastPositionChange = change;
+        this.lastAnchor = anchor;
         const arrowClassTooltip = `tooltip-${change.connectionPair.overlayX}-${change.connectionPair.overlayY}`;
         // need two updates as class changes affect the position
         if (arrowClassTooltip !== this.tooltipPositionClass()) {
@@ -47,45 +86,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             args: [{ selector: 'si-tooltip', imports: [NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.Default, host: {
                         'animate.leave': 'tooltip-leave'
                     }, template: "<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"config.id\"\n  [class]=\"tooltipPositionClass()\"\n>\n  <div\n    class=\"tooltip-arrow\"\n    [style.left.px]=\"arrowPos()?.left\"\n    [style.right.px]=\"arrowPos()?.right\"\n  ></div>\n  <div class=\"tooltip-inner\">\n    @if (tooltipText()) {\n      <div class=\"si-body\">{{ tooltipText() | translate }}</div>\n    } @else if (tooltipTemplate()) {\n      <ng-template\n        [ngTemplateOutlet]=\"tooltipTemplate()\"\n        [ngTemplateOutletContext]=\"config.tooltipContext()\"\n      />\n    } @else if (tooltipComponent()) {\n      <ng-container [ngComponentOutlet]=\"tooltipComponent()!\" />\n    }\n  </div>\n</div>\n", styles: [":host .tooltip,:host{transition:opacity calc(.15s * var(--element-animations-enabled, 1)) ease-out,transform calc(.15s * var(--element-animations-enabled, 1)) ease-out}:host{opacity:1;transform:scale(1)}:host.tooltip-leave{opacity:0;transform:scale(.8)}@starting-style{:host .tooltip{opacity:0;transform:scale(.8)}}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 /**
- * TooltipRef is attached to a specific element.
+ * A no-op TooltipRef used on platform server where DOM APIs are unavailable.
+ *
+ * @internal
+ */
+class NoopTooltipRef {
+    destroy() { }
+}
+/**
+ * BrowserTooltipRef is attached to a specific element.
  * Use it to show or hide a tooltip for that element.
  *
  * @internal
  */
-class TooltipRef {
+class BrowserTooltipRef {
+    config;
+    destroy$ = new Subject();
+    isFocused = false;
+    isHovered = false;
     overlayRef;
-    element;
-    injector;
-    constructor(overlayRef, element, injector) {
-        this.overlayRef = overlayRef;
-        this.element = element;
-        this.injector = injector;
+    positionSubscription;
+    constructor(config) {
+        this.config = config;
+        const nativeElement = this.config.element.nativeElement;
+        fromEvent(nativeElement, 'focus')
+            .pipe(filter(event => event instanceof FocusEvent), takeUntil(this.destroy$))
+            .subscribe(event => this.onFocus(event));
+        fromEvent(nativeElement, 'mouseenter')
+            .pipe(delayWhen(() => 
+        // UX Guideline: tooltips on hover should be delayed by 500ms
+        timer(500).pipe(takeUntil(fromEvent(nativeElement, 'mouseleave')), takeUntil(fromEvent(nativeElement, 'focusout')) // user started using keyboard
+        )), takeUntil(this.destroy$))
+            .subscribe(() => this.onMouseEnter());
+        fromEvent(nativeElement, 'focusout')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.onFocusOut());
+        fromEvent(nativeElement, 'mouseleave')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.onMouseLeave());
+        fromEvent(nativeElement, 'touchstart')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.onTouchStart());
+        // The tooltip may be created lazily, after the element is already focused or
+        // hovered (e.g. when validation errors appear on blur while the pointer still
+        // hovers the element). In that case the initial `focus`/`mouseenter` was
+        // missed, so show the tooltip immediately based on the live `:focus-visible`
+        // and `:hover` state.
+        if (nativeElement === document.activeElement && nativeElement.matches(':focus-visible')) {
+            this.isFocused = true;
+            this.show();
+        }
+        else if (nativeElement.matches(':hover')) {
+            this.onMouseEnter();
+        }
+    }
+    onFocus(event) {
+        if (event.target instanceof Element) {
+            if (event.target.matches(':focus-visible')) {
+                this.isFocused = true;
+                this.show();
+            }
+        }
+    }
+    onFocusOut() {
+        this.isFocused = false;
+        this.isHovered = false;
+        this.hide();
+    }
+    onMouseEnter() {
+        this.isHovered = true;
+        this.show();
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+        this.hide();
+    }
+    onTouchStart() {
+        // On touch devices a tooltip is not useful and would obscure the content the
+        // user just tapped. Reset the hover/focus state so it is hidden immediately.
+        this.isFocused = false;
+        this.isHovered = false;
+        this.hide();
+    }
+    getOrCreateOverlay() {
+        this.overlayRef ??= getOverlay(this.config.element, this.config.overlay, false, this.config.placement, false, true, this.config.scrollStrategy?.());
+        return this.overlayRef;
     }
-    subscription;
     show() {
-        if (this.overlayRef.hasAttached()) {
+        const overlayRef = this.getOrCreateOverlay();
+        if (overlayRef.hasAttached()) {
             return;
         }
-        const toolTipPortal = new ComponentPortal(TooltipComponent, undefined, this.injector);
-        const tooltipRef = this.overlayRef.attach(toolTipPortal);
-        const positionStrategy = getPositionStrategy(this.overlayRef);
-        this.subscription?.unsubscribe();
-        this.subscription = positionStrategy?.positionChanges.subscribe(change => tooltipRef.instance.updateTooltipPosition(change, this.element));
+        const injector = Injector.create({
+            parent: this.config.injector,
+            providers: [{ provide: OverlayRef, useValue: overlayRef }]
+        });
+        const toolTipPortal = new ComponentPortal(TooltipComponent, undefined, injector);
+        const tooltipRef = overlayRef.attach(toolTipPortal);
+        const positionStrategy = getPositionStrategy(overlayRef);
+        this.positionSubscription?.unsubscribe();
+        this.positionSubscription = positionStrategy?.positionChanges.subscribe(change => tooltipRef.instance.updateTooltipPosition(change, this.config.element));
     }
     hide() {
-        this.overlayRef.detach();
-        this.subscription?.unsubscribe();
+        if (this.isFocused || this.isHovered) {
+            return;
+        }
+        this.overlayRef?.detach();
+        this.positionSubscription?.unsubscribe();
     }
     destroy() {
-        this.overlayRef.dispose();
-        this.subscription?.unsubscribe();
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.overlayRef?.dispose();
+        this.positionSubscription?.unsubscribe();
     }
 }
 /**
@@ -98,7 +218,11 @@ class TooltipRef {
 // We cannot provide this in root, as people may override the cdk overlay creation.
 class SiTooltipService {
     overlay = inject(Overlay);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     createTooltip(config) {
+        if (!this.isBrowser) {
+            return new NoopTooltipRef();
+        }
         const injector = Injector.create({
             parent: config.injector,
             providers: [
@@ -112,7 +236,11 @@ class SiTooltipService {
                 }
             ]
         });
-        return new TooltipRef(getOverlay(config.element, this.overlay, false, config.placement, false, true, config.scrollStrategy), config.element, injector);
+        return new BrowserTooltipRef({
+            ...config,
+            injector,
+            overlay: this.overlay
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipService });
@@ -152,53 +280,33 @@ class SiTooltipDirective {
     tooltipContext = input(...(ngDevMode ? [undefined, { debugName: "tooltipContext" }] : []));
     describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;
     tooltipRef;
-    showTimeout;
     tooltipService = inject(SiTooltipService);
     elementRef = inject(ElementRef);
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    constructor() {
+        effect(() => {
+            const tooltip = this.siTooltip();
+            const disabled = this.isDisabled();
+            if (tooltip && !disabled) {
+                this.tooltipRef ??= this.tooltipService.createTooltip({
+                    describedBy: this.describedBy,
+                    element: this.elementRef,
+                    placement: this.placement(),
+                    tooltip: this.siTooltip,
+                    tooltipContext: this.tooltipContext,
+                    scrollStrategy: this.tooltipScrollStrategy
+                });
+            }
+            else if (this.tooltipRef) {
+                this.tooltipRef.destroy();
+                this.tooltipRef = undefined;
+            }
+        });
+    }
     ngOnDestroy() {
-        this.clearShowTimeout();
         this.tooltipRef?.destroy();
     }
-    clearShowTimeout() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = undefined;
-        }
-    }
-    showTooltip(immediate = false) {
-        const siTooltip = this.siTooltip();
-        if (this.isDisabled() || !siTooltip) {
-            return;
-        }
-        this.clearShowTimeout();
-        const delay = immediate ? 0 : 500;
-        this.showTimeout = setTimeout(() => {
-            this.tooltipRef ??= this.tooltipService.createTooltip({
-                describedBy: this.describedBy,
-                element: this.elementRef,
-                placement: this.placement(),
-                tooltip: this.siTooltip,
-                tooltipContext: this.tooltipContext,
-                scrollStrategy: this.tooltipScrollStrategy()
-            });
-            this.tooltipRef.show();
-        }, delay);
-    }
-    focusIn(event) {
-        if (this.isBrowser && event.target.matches(':focus-visible')) {
-            this.showTooltip(true);
-        }
-    }
-    show() {
-        this.showTooltip(false);
-    }
-    hide() {
-        this.clearShowTimeout();
-        this.tooltipRef?.hide();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiTooltipDirective, isStandalone: true, selector: "[siTooltip]", inputs: { siTooltip: { classPropertyName: "siTooltip", publicName: "siTooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipScrollStrategy: { classPropertyName: "tooltipScrollStrategy", publicName: "tooltipScrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, tooltipContext: { classPropertyName: "tooltipContext", publicName: "tooltipContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focusIn($event)", "mouseenter": "show()", "touchstart": "hide()", "focusout": "hide()", "mouseleave": "hide()" }, properties: { "attr.aria-describedby": "isDisabled() ? null : describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiTooltipDirective, isStandalone: true, selector: "[siTooltip]", inputs: { siTooltip: { classPropertyName: "siTooltip", publicName: "siTooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipScrollStrategy: { classPropertyName: "tooltipScrollStrategy", publicName: "tooltipScrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, tooltipContext: { classPropertyName: "tooltipContext", publicName: "tooltipContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-describedby": "isDisabled() ? null : describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipDirective, decorators: [{
             type: Directive,
@@ -206,15 +314,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     selector: '[siTooltip]',
                     providers: [SiTooltipService],
                     host: {
-                        '[attr.aria-describedby]': 'isDisabled() ? null : describedBy',
-                        '(focus)': 'focusIn($event)',
-                        '(mouseenter)': 'show()',
-                        '(touchstart)': 'hide()',
-                        '(focusout)': 'hide()',
-                        '(mouseleave)': 'hide()'
+                        '[attr.aria-describedby]': 'isDisabled() ? null : describedBy'
                     }
                 }]
-        }], propDecorators: { siTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "siTooltip", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], tooltipScrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipScrollStrategy", required: false }] }], tooltipContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContext", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { siTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "siTooltip", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], tooltipScrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipScrollStrategy", required: false }] }], tooltipContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContext", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026

package/fesm2022/siemens-element-ng-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-tooltip.mjs","sources":["../../../../projects/element-ng/tooltip/si-tooltip.model.ts","../../../../projects/element-ng/tooltip/si-tooltip.component.ts","../../../../projects/element-ng/tooltip/si-tooltip.component.html","../../../../projects/element-ng/tooltip/si-tooltip.service.ts","../../../../projects/element-ng/tooltip/si-tooltip.directive.ts","../../../../projects/element-ng/tooltip/si-tooltip.module.ts","../../../../projects/element-ng/tooltip/index.ts","../../../../projects/element-ng/tooltip/siemens-element-ng-tooltip.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken, TemplateRef, Type } from '@angular/core';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nexport type SiTooltipContent = TranslatableString | TemplateRef<any> | Type<any> | null | undefined;\n\nexport interface SiTooltipConfig {\n  id: string;\n  tooltip: () => SiTooltipContent;\n  tooltipContext: () => unknown;\n}\n\nexport const SI_TOOLTIP_CONFIG = new InjectionToken<SiTooltipConfig>('SiTooltipConfig');\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  signal,\n  TemplateRef\n} from '@angular/core';\nimport { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TOOLTIP_CONFIG } from './si-tooltip.model';\n\n@Component({\n  selector: 'si-tooltip',\n  imports: [NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet],\n  templateUrl: './si-tooltip.component.html',\n  styleUrl: './si-tooltip.component.scss',\n  changeDetection: ChangeDetectionStrategy.Default,\n  host: {\n    'animate.leave': 'tooltip-leave'\n  }\n})\nexport class TooltipComponent {\n  protected readonly tooltipPositionClass = signal('');\n  protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n\n  protected readonly config = inject(SI_TOOLTIP_CONFIG);\n  private readonly elementRef = inject(ElementRef);\n\n  protected readonly tooltipText = computed<string | null>(() => {\n    const tooltip = this.config.tooltip();\n    return typeof tooltip === 'string' ? tooltip : null;\n  });\n\n  protected readonly tooltipTemplate = computed<TemplateRef<any> | null>(() => {\n    const tooltip = this.config.tooltip();\n    return tooltip instanceof TemplateRef ? tooltip : null;\n  });\n\n  protected readonly tooltipComponent = computed(() => {\n    const tooltip = this.config.tooltip();\n    return !(tooltip instanceof TemplateRef) && typeof tooltip !== 'string' ? tooltip : null;\n  });\n\n  /** @internal */\n  updateTooltipPosition(change: ConnectedOverlayPositionChange, anchor?: ElementRef): void {\n    const arrowClassTooltip = `tooltip-${change.connectionPair.overlayX}-${change.connectionPair.overlayY}`;\n    // need two updates as class changes affect the position\n    if (arrowClassTooltip !== this.tooltipPositionClass()) {\n      this.tooltipPositionClass.set(arrowClassTooltip);\n    }\n    const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);\n    this.arrowPos.set(arrowPos);\n  }\n}\n","<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"config.id\"\n  [class]=\"tooltipPositionClass()\"\n>\n  <div\n    class=\"tooltip-arrow\"\n    [style.left.px]=\"arrowPos()?.left\"\n    [style.right.px]=\"arrowPos()?.right\"\n  ></div>\n  <div class=\"tooltip-inner\">\n    @if (tooltipText()) {\n      <div class=\"si-body\">{{ tooltipText() | translate }}</div>\n    } @else if (tooltipTemplate()) {\n      <ng-template\n        [ngTemplateOutlet]=\"tooltipTemplate()\"\n        [ngTemplateOutletContext]=\"config.tooltipContext()\"\n      />\n    } @else if (tooltipComponent()) {\n      <ng-container [ngComponentOutlet]=\"tooltipComponent()!\" />\n    }\n  </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef, ScrollStrategy } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ComponentRef, ElementRef, inject, Injectable, Injector } from '@angular/core';\nimport { getOverlay, getPositionStrategy, positions } from '@siemens/element-ng/common';\nimport { Subscription } from 'rxjs';\n\nimport { TooltipComponent } from './si-tooltip.component';\nimport { SI_TOOLTIP_CONFIG, SiTooltipContent } from './si-tooltip.model';\n\n/**\n * TooltipRef is attached to a specific element.\n * Use it to show or hide a tooltip for that element.\n *\n * @internal\n */\nclass TooltipRef {\n  constructor(\n    private overlayRef: OverlayRef,\n    private element: ElementRef,\n    private injector?: Injector\n  ) {}\n\n  private subscription?: Subscription;\n\n  show(): void {\n    if (this.overlayRef.hasAttached()) {\n      return;\n    }\n\n    const toolTipPortal = new ComponentPortal(TooltipComponent, undefined, this.injector);\n    const tooltipRef: ComponentRef<TooltipComponent> = this.overlayRef.attach(toolTipPortal);\n\n    const positionStrategy = getPositionStrategy(this.overlayRef);\n    this.subscription?.unsubscribe();\n    this.subscription = positionStrategy?.positionChanges.subscribe(change =>\n      tooltipRef.instance.updateTooltipPosition(change, this.element)\n    );\n  }\n\n  hide(): void {\n    this.overlayRef.detach();\n    this.subscription?.unsubscribe();\n  }\n\n  destroy(): void {\n    this.overlayRef.dispose();\n    this.subscription?.unsubscribe();\n  }\n}\n\n/**\n * A service to create tooltips for specific elements.\n * Use this if the tooltip directive is not suitable.\n * Must not be used outside element-ng.\n *\n * @internal\n */\n// We cannot provide this in root, as people may override the cdk overlay creation.\n@Injectable()\nexport class SiTooltipService {\n  private overlay = inject(Overlay);\n\n  createTooltip(config: {\n    describedBy: string;\n    element: ElementRef;\n    placement: keyof typeof positions;\n    injector?: Injector;\n    tooltip: () => SiTooltipContent;\n    tooltipContext: () => unknown;\n    scrollStrategy?: ScrollStrategy;\n  }): TooltipRef {\n    const injector = Injector.create({\n      parent: config.injector,\n      providers: [\n        {\n          provide: SI_TOOLTIP_CONFIG,\n          useValue: {\n            id: config.describedBy,\n            tooltip: config.tooltip,\n            tooltipContext: config.tooltipContext\n          }\n        }\n      ]\n    });\n\n    return new TooltipRef(\n      getOverlay(\n        config.element,\n        this.overlay,\n        false,\n        config.placement,\n        false,\n        true,\n        config.scrollStrategy\n      ),\n      config.element,\n      injector\n    );\n  }\n}\n\nexport type { TooltipRef };\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ScrollStrategy } from '@angular/cdk/overlay';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  booleanAttribute,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  PLATFORM_ID,\n  TemplateRef\n} from '@angular/core';\nimport { positions } from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiTooltipService, TooltipRef } from './si-tooltip.service';\n\n@Directive({\n  selector: '[siTooltip]',\n  providers: [SiTooltipService],\n  host: {\n    '[attr.aria-describedby]': 'isDisabled() ? null : describedBy',\n    '(focus)': 'focusIn($event)',\n    '(mouseenter)': 'show()',\n    '(touchstart)': 'hide()',\n    '(focusout)': 'hide()',\n    '(mouseleave)': 'hide()'\n  }\n})\nexport class SiTooltipDirective implements OnDestroy {\n  private static idCounter = 0;\n\n  /**\n   * The tooltip text to be displayed\n   *\n   * @defaultValue ''\n   */\n  readonly siTooltip = input<TranslatableString | TemplateRef<any>>('');\n\n  /**\n   * The placement of the tooltip. One of 'top', 'start', end', 'bottom'\n   *\n   * @defaultValue 'auto'\n   */\n  readonly placement = input<keyof typeof positions>('auto');\n\n  /**\n   * Allows the tooltip to be disabled\n   *\n   * @defaultValue false\n   */\n  readonly isDisabled = input(false, { transform: booleanAttribute });\n\n  /**\n   * Optional CDK scroll strategy used for the tooltip overlay.\n   * If not provided, the default reposition strategy is used.\n   */\n  readonly tooltipScrollStrategy = input<ScrollStrategy>();\n\n  /**\n   * The context for the attached template\n   */\n  readonly tooltipContext = input();\n\n  protected describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;\n\n  private tooltipRef?: TooltipRef;\n  private showTimeout?: ReturnType<typeof setTimeout>;\n  private tooltipService = inject(SiTooltipService);\n  private elementRef = inject(ElementRef);\n  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  ngOnDestroy(): void {\n    this.clearShowTimeout();\n    this.tooltipRef?.destroy();\n  }\n\n  private clearShowTimeout(): void {\n    if (this.showTimeout) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = undefined;\n    }\n  }\n\n  private showTooltip(immediate = false): void {\n    const siTooltip = this.siTooltip();\n    if (this.isDisabled() || !siTooltip) {\n      return;\n    }\n\n    this.clearShowTimeout();\n\n    const delay = immediate ? 0 : 500;\n\n    this.showTimeout = setTimeout(() => {\n      this.tooltipRef ??= this.tooltipService.createTooltip({\n        describedBy: this.describedBy,\n        element: this.elementRef,\n        placement: this.placement(),\n        tooltip: this.siTooltip,\n        tooltipContext: this.tooltipContext,\n        scrollStrategy: this.tooltipScrollStrategy()\n      });\n      this.tooltipRef.show();\n    }, delay);\n  }\n\n  protected focusIn(event: FocusEvent): void {\n    if (this.isBrowser && (event.target as Element).matches(':focus-visible')) {\n      this.showTooltip(true);\n    }\n  }\n\n  protected show(): void {\n    this.showTooltip(false);\n  }\n\n  protected hide(): void {\n    this.clearShowTimeout();\n    this.tooltipRef?.hide();\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiTooltipDirective } from './si-tooltip.directive';\n\n@NgModule({\n  imports: [SiTooltipDirective],\n  exports: [SiTooltipDirective]\n})\nexport class SiTooltipModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tooltip.module';\nexport * from './si-tooltip.directive';\nexport * from './si-tooltip.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-tooltip.mjs","sources":["../../../../projects/element-ng/tooltip/si-tooltip.model.ts","../../../../projects/element-ng/tooltip/si-tooltip.component.ts","../../../../projects/element-ng/tooltip/si-tooltip.component.html","../../../../projects/element-ng/tooltip/si-tooltip.service.ts","../../../../projects/element-ng/tooltip/si-tooltip.directive.ts","../../../../projects/element-ng/tooltip/si-tooltip.module.ts","../../../../projects/element-ng/tooltip/index.ts","../../../../projects/element-ng/tooltip/siemens-element-ng-tooltip.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ElementRef, InjectionToken, TemplateRef, Type } from '@angular/core';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nexport type SiTooltipContent =\n  | TranslatableString\n  | TemplateRef<any>\n  | Type<any>\n  | ElementRef<Element>\n  | null\n  | undefined;\n\nexport interface SiTooltipConfig {\n  id?: string;\n  tooltip: () => SiTooltipContent;\n  tooltipContext: () => unknown;\n}\n\nexport const SI_TOOLTIP_CONFIG = new InjectionToken<SiTooltipConfig>('SiTooltipConfig');\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ConnectedOverlayPositionChange, OverlayRef } from '@angular/cdk/overlay';\nimport { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  signal,\n  TemplateRef\n} from '@angular/core';\nimport { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TOOLTIP_CONFIG } from './si-tooltip.model';\n\n@Component({\n  selector: 'si-tooltip',\n  imports: [NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet],\n  templateUrl: './si-tooltip.component.html',\n  styleUrl: './si-tooltip.component.scss',\n  changeDetection: ChangeDetectionStrategy.Default,\n  host: {\n    'animate.leave': 'tooltip-leave'\n  }\n})\nexport class TooltipComponent {\n  protected readonly tooltipPositionClass = signal('');\n  protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n\n  protected readonly config = inject(SI_TOOLTIP_CONFIG);\n  private readonly elementRef = inject(ElementRef);\n  private readonly overlayRef = inject(OverlayRef);\n\n  private lastPositionChange?: ConnectedOverlayPositionChange;\n  private lastAnchor?: ElementRef;\n\n  constructor() {\n    let isFirstRun = true;\n    afterRenderEffect(() => {\n      this.config.tooltip();\n      this.config.tooltipContext();\n      if (isFirstRun) {\n        isFirstRun = false;\n        return;\n      }\n      this.overlayRef.updatePosition();\n      if (this.lastPositionChange) {\n        this.updateTooltipPosition(this.lastPositionChange, this.lastAnchor);\n      }\n    });\n  }\n\n  protected readonly tooltipText = computed<string | null>(() => {\n    const tooltip = this.config.tooltip();\n    if (typeof tooltip === 'string') {\n      return tooltip;\n    }\n    // When an ElementRef is provided, read its current text content whenever the\n    // tooltip is shown, so dynamic content is always reflected.\n    // The tooltip content is not updated while being displayed.\n    if (tooltip instanceof ElementRef) {\n      return tooltip.nativeElement.textContent.trim();\n    }\n    return null;\n  });\n\n  protected readonly tooltipTemplate = computed<TemplateRef<any> | null>(() => {\n    const tooltip = this.config.tooltip();\n    return tooltip instanceof TemplateRef ? tooltip : null;\n  });\n\n  protected readonly tooltipComponent = computed(() => {\n    const tooltip = this.config.tooltip();\n    return !(tooltip instanceof TemplateRef) &&\n      !(tooltip instanceof ElementRef) &&\n      typeof tooltip !== 'string'\n      ? tooltip\n      : null;\n  });\n\n  /** @internal */\n  updateTooltipPosition(change: ConnectedOverlayPositionChange, anchor?: ElementRef): void {\n    this.lastPositionChange = change;\n    this.lastAnchor = anchor;\n    const arrowClassTooltip = `tooltip-${change.connectionPair.overlayX}-${change.connectionPair.overlayY}`;\n    // need two updates as class changes affect the position\n    if (arrowClassTooltip !== this.tooltipPositionClass()) {\n      this.tooltipPositionClass.set(arrowClassTooltip);\n    }\n    const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);\n    this.arrowPos.set(arrowPos);\n  }\n}\n","<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"config.id\"\n  [class]=\"tooltipPositionClass()\"\n>\n  <div\n    class=\"tooltip-arrow\"\n    [style.left.px]=\"arrowPos()?.left\"\n    [style.right.px]=\"arrowPos()?.right\"\n  ></div>\n  <div class=\"tooltip-inner\">\n    @if (tooltipText()) {\n      <div class=\"si-body\">{{ tooltipText() | translate }}</div>\n    } @else if (tooltipTemplate()) {\n      <ng-template\n        [ngTemplateOutlet]=\"tooltipTemplate()\"\n        [ngTemplateOutletContext]=\"config.tooltipContext()\"\n      />\n    } @else if (tooltipComponent()) {\n      <ng-container [ngComponentOutlet]=\"tooltipComponent()!\" />\n    }\n  </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef, ScrollStrategy } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ComponentRef, ElementRef, inject, Injectable, Injector, PLATFORM_ID } from '@angular/core';\nimport { getOverlay, getPositionStrategy, positions } from '@siemens/element-ng/common';\nimport { fromEvent, Subject, Subscription, timer } from 'rxjs';\nimport { delayWhen, filter, takeUntil } from 'rxjs/operators';\n\nimport { TooltipComponent } from './si-tooltip.component';\nimport { SI_TOOLTIP_CONFIG, SiTooltipContent } from './si-tooltip.model';\n\n/** @internal */\ninterface TooltipRef {\n  destroy(): void;\n}\n\n/**\n * A no-op TooltipRef used on platform server where DOM APIs are unavailable.\n *\n * @internal\n */\nclass NoopTooltipRef {\n  destroy(): void {}\n}\n\n/**\n * BrowserTooltipRef is attached to a specific element.\n * Use it to show or hide a tooltip for that element.\n *\n * @internal\n */\nclass BrowserTooltipRef {\n  private readonly destroy$ = new Subject<void>();\n  private isFocused = false;\n  private isHovered = false;\n  private overlayRef?: OverlayRef;\n  private positionSubscription?: Subscription;\n\n  constructor(\n    private config: {\n      describedBy?: string;\n      element: ElementRef;\n      injector?: Injector;\n      overlay: Overlay;\n      placement: keyof typeof positions;\n      scrollStrategy?: () => ScrollStrategy | undefined;\n      tooltip: () => SiTooltipContent;\n      tooltipContext: () => unknown;\n    }\n  ) {\n    const nativeElement = this.config.element.nativeElement;\n\n    fromEvent(nativeElement, 'focus')\n      .pipe(\n        filter(event => event instanceof FocusEvent),\n        takeUntil(this.destroy$)\n      )\n      .subscribe(event => this.onFocus(event));\n\n    fromEvent(nativeElement, 'mouseenter')\n      .pipe(\n        delayWhen(() =>\n          // UX Guideline: tooltips on hover should be delayed by 500ms\n          timer(500).pipe(\n            takeUntil(fromEvent(nativeElement, 'mouseleave')),\n            takeUntil(fromEvent(nativeElement, 'focusout')) // user started using keyboard\n          )\n        ),\n        takeUntil(this.destroy$)\n      )\n      .subscribe(() => this.onMouseEnter());\n\n    fromEvent(nativeElement, 'focusout')\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(() => this.onFocusOut());\n\n    fromEvent(nativeElement, 'mouseleave')\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(() => this.onMouseLeave());\n\n    fromEvent(nativeElement, 'touchstart')\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(() => this.onTouchStart());\n\n    // The tooltip may be created lazily, after the element is already focused or\n    // hovered (e.g. when validation errors appear on blur while the pointer still\n    // hovers the element). In that case the initial `focus`/`mouseenter` was\n    // missed, so show the tooltip immediately based on the live `:focus-visible`\n    // and `:hover` state.\n    if (nativeElement === document.activeElement && nativeElement.matches(':focus-visible')) {\n      this.isFocused = true;\n      this.show();\n    } else if (nativeElement.matches(':hover')) {\n      this.onMouseEnter();\n    }\n  }\n\n  private onFocus(event: FocusEvent): void {\n    if (event.target instanceof Element) {\n      if (event.target.matches(':focus-visible')) {\n        this.isFocused = true;\n        this.show();\n      }\n    }\n  }\n\n  private onFocusOut(): void {\n    this.isFocused = false;\n    this.isHovered = false;\n    this.hide();\n  }\n\n  private onMouseEnter(): void {\n    this.isHovered = true;\n    this.show();\n  }\n\n  private onMouseLeave(): void {\n    this.isHovered = false;\n    this.hide();\n  }\n\n  private onTouchStart(): void {\n    // On touch devices a tooltip is not useful and would obscure the content the\n    // user just tapped. Reset the hover/focus state so it is hidden immediately.\n    this.isFocused = false;\n    this.isHovered = false;\n    this.hide();\n  }\n\n  private getOrCreateOverlay(): OverlayRef {\n    this.overlayRef ??= getOverlay(\n      this.config.element,\n      this.config.overlay,\n      false,\n      this.config.placement,\n      false,\n      true,\n      this.config.scrollStrategy?.()\n    );\n    return this.overlayRef;\n  }\n\n  private show(): void {\n    const overlayRef = this.getOrCreateOverlay();\n    if (overlayRef.hasAttached()) {\n      return;\n    }\n\n    const injector = Injector.create({\n      parent: this.config.injector,\n      providers: [{ provide: OverlayRef, useValue: overlayRef }]\n    });\n\n    const toolTipPortal = new ComponentPortal(TooltipComponent, undefined, injector);\n    const tooltipRef: ComponentRef<TooltipComponent> = overlayRef.attach(toolTipPortal);\n\n    const positionStrategy = getPositionStrategy(overlayRef);\n    this.positionSubscription?.unsubscribe();\n    this.positionSubscription = positionStrategy?.positionChanges.subscribe(change =>\n      tooltipRef.instance.updateTooltipPosition(change, this.config.element)\n    );\n  }\n\n  private hide(): void {\n    if (this.isFocused || this.isHovered) {\n      return;\n    }\n    this.overlayRef?.detach();\n    this.positionSubscription?.unsubscribe();\n  }\n\n  destroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n    this.overlayRef?.dispose();\n    this.positionSubscription?.unsubscribe();\n  }\n}\n\n/**\n * A service to create tooltips for specific elements.\n * Use this if the tooltip directive is not suitable.\n * Must not be used outside element-ng.\n *\n * @internal\n */\n// We cannot provide this in root, as people may override the cdk overlay creation.\n@Injectable()\nexport class SiTooltipService {\n  private overlay = inject(Overlay);\n  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  createTooltip(config: {\n    describedBy?: string;\n    element: ElementRef;\n    placement: keyof typeof positions;\n    injector?: Injector;\n    tooltip: () => SiTooltipContent;\n    tooltipContext: () => unknown;\n    scrollStrategy?: () => ScrollStrategy | undefined;\n  }): TooltipRef {\n    if (!this.isBrowser) {\n      return new NoopTooltipRef();\n    }\n\n    const injector = Injector.create({\n      parent: config.injector,\n      providers: [\n        {\n          provide: SI_TOOLTIP_CONFIG,\n          useValue: {\n            id: config.describedBy,\n            tooltip: config.tooltip,\n            tooltipContext: config.tooltipContext\n          }\n        }\n      ]\n    });\n\n    return new BrowserTooltipRef({\n      ...config,\n      injector,\n      overlay: this.overlay\n    });\n  }\n}\n\nexport type { TooltipRef };\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ScrollStrategy } from '@angular/cdk/overlay';\nimport {\n  booleanAttribute,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  TemplateRef\n} from '@angular/core';\nimport { positions } from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiTooltipService, TooltipRef } from './si-tooltip.service';\n\n@Directive({\n  selector: '[siTooltip]',\n  providers: [SiTooltipService],\n  host: {\n    '[attr.aria-describedby]': 'isDisabled() ? null : describedBy'\n  }\n})\nexport class SiTooltipDirective implements OnDestroy {\n  private static idCounter = 0;\n\n  /**\n   * The tooltip text to be displayed\n   *\n   * @defaultValue ''\n   */\n  readonly siTooltip = input<TranslatableString | TemplateRef<any>>('');\n\n  /**\n   * The placement of the tooltip. One of 'top', 'start', end', 'bottom'\n   *\n   * @defaultValue 'auto'\n   */\n  readonly placement = input<keyof typeof positions>('auto');\n\n  /**\n   * Allows the tooltip to be disabled\n   *\n   * @defaultValue false\n   */\n  readonly isDisabled = input(false, { transform: booleanAttribute });\n\n  /**\n   * Optional CDK scroll strategy used for the tooltip overlay.\n   * If not provided, the default reposition strategy is used.\n   */\n  readonly tooltipScrollStrategy = input<ScrollStrategy>();\n\n  /**\n   * The context for the attached template\n   */\n  readonly tooltipContext = input();\n\n  protected describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;\n\n  private tooltipRef?: TooltipRef;\n  private tooltipService = inject(SiTooltipService);\n  private elementRef = inject(ElementRef);\n\n  constructor() {\n    effect(() => {\n      const tooltip = this.siTooltip();\n      const disabled = this.isDisabled();\n\n      if (tooltip && !disabled) {\n        this.tooltipRef ??= this.tooltipService.createTooltip({\n          describedBy: this.describedBy,\n          element: this.elementRef,\n          placement: this.placement(),\n          tooltip: this.siTooltip,\n          tooltipContext: this.tooltipContext,\n          scrollStrategy: this.tooltipScrollStrategy\n        });\n      } else if (this.tooltipRef) {\n        this.tooltipRef.destroy();\n        this.tooltipRef = undefined;\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.tooltipRef?.destroy();\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiTooltipDirective } from './si-tooltip.directive';\n\n@NgModule({\n  imports: [SiTooltipDirective],\n  exports: [SiTooltipDirective]\n})\nexport class SiTooltipModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tooltip.module';\nexport * from './si-tooltip.directive';\nexport * from './si-tooltip.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAAA;;;AAGG;AAkBI,MAAM,iBAAiB,GAAG,IAAI,cAAc,CAAkB,iBAAiB,CAAC;;ACrBvF;;;AAGG;MA4BU,gBAAgB,CAAA;AACR,IAAA,oBAAoB,GAAG,MAAM,CAAC,EAAE,gEAAC;AACjC,IAAA,QAAQ,GAAG,MAAM,CAAmC,SAAS,oDAAC;AAE9D,IAAA,MAAM,GAAG,MAAM,CAAC,iBAAiB,CAAC;AACpC,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAExC,IAAA,kBAAkB;AAClB,IAAA,UAAU;AAElB,IAAA,WAAA,GAAA;QACE,IAAI,UAAU,GAAG,IAAI;QACrB,iBAAiB,CAAC,MAAK;AACrB,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACrB,YAAA,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE;YAC5B,IAAI,UAAU,EAAE;gBACd,UAAU,GAAG,KAAK;gBAClB;YACF;AACA,YAAA,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE;AAChC,YAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;gBAC3B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC;YACtE;AACF,QAAA,CAAC,CAAC;IACJ;AAEmB,IAAA,WAAW,GAAG,QAAQ,CAAgB,MAAK;QAC5D,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACrC,QAAA,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;AAC/B,YAAA,OAAO,OAAO;QAChB;;;;AAIA,QAAA,IAAI,OAAO,YAAY,UAAU,EAAE;YACjC,OAAO,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,EAAE;QACjD;AACA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC,uDAAC;AAEiB,IAAA,eAAe,GAAG,QAAQ,CAA0B,MAAK;QAC1E,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;QACrC,OAAO,OAAO,YAAY,WAAW,GAAG,OAAO,GAAG,IAAI;AACxD,IAAA,CAAC,2DAAC;AAEiB,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;QAClD,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACrC,QAAA,OAAO,EAAE,OAAO,YAAY,WAAW,CAAC;AACtC,YAAA,EAAE,OAAO,YAAY,UAAU,CAAC;YAChC,OAAO,OAAO,KAAK;AACnB,cAAE;cACA,IAAI;AACV,IAAA,CAAC,4DAAC;;IAGF,qBAAqB,CAAC,MAAsC,EAAE,MAAmB,EAAA;AAC/E,QAAA,IAAI,CAAC,kBAAkB,GAAG,MAAM;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM;AACxB,QAAA,MAAM,iBAAiB,GAAG,CAAA,QAAA,EAAW,MAAM,CAAC,cAAc,CAAC,QAAQ,CAAA,CAAA,EAAI,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE;;AAEvG,QAAA,IAAI,iBAAiB,KAAK,IAAI,CAAC,oBAAoB,EAAE,EAAE;AACrD,YAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,iBAAiB,CAAC;QAClD;AACA,QAAA,MAAM,QAAQ,GAAG,6BAA6B,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;AAC/E,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;IAC7B;uGAlEW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,kIC/B7B,ssBAwBA,EAAA,MAAA,EAAA,CAAA,+TAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDDY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAmB,iBAAiB,oRAAlC,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,OAAA,EAAA,CAAA;;2FAQhC,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAV5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,OAAA,EACb,CAAC,gBAAgB,EAAE,eAAe,EAAE,iBAAiB,CAAC,EAAA,eAAA,EAG9C,uBAAuB,CAAC,OAAO,EAAA,IAAA,EAC1C;AACJ,wBAAA,eAAe,EAAE;AAClB,qBAAA,EAAA,QAAA,EAAA,ssBAAA,EAAA,MAAA,EAAA,CAAA,+TAAA,CAAA,EAAA;;;AE7BH;;;AAGG;AAiBH;;;;AAIG;AACH,MAAM,cAAc,CAAA;AAClB,IAAA,OAAO,KAAU;AAClB;AAED;;;;;AAKG;AACH,MAAM,iBAAiB,CAAA;AAQX,IAAA,MAAA;AAPO,IAAA,QAAQ,GAAG,IAAI,OAAO,EAAQ;IACvC,SAAS,GAAG,KAAK;IACjB,SAAS,GAAG,KAAK;AACjB,IAAA,UAAU;AACV,IAAA,oBAAoB;AAE5B,IAAA,WAAA,CACU,MASP,EAAA;QATO,IAAA,CAAA,MAAM,GAAN,MAAM;QAWd,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa;AAEvD,QAAA,SAAS,CAAC,aAAa,EAAE,OAAO;AAC7B,aAAA,IAAI,CACH,MAAM,CAAC,KAAK,IAAI,KAAK,YAAY,UAAU,CAAC,EAC5C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;AAEzB,aAAA,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,SAAS,CAAC,aAAa,EAAE,YAAY;AAClC,aAAA,IAAI,CACH,SAAS,CAAC;;QAER,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CACb,SAAS,CAAC,SAAS,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC,EACjD,SAAS,CAAC,SAAS,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AAChD,SAAA,CACF,EACD,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;aAEzB,SAAS,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;AAEvC,QAAA,SAAS,CAAC,aAAa,EAAE,UAAU;AAChC,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC7B,SAAS,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;AAErC,QAAA,SAAS,CAAC,aAAa,EAAE,YAAY;AAClC,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC7B,SAAS,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;AAEvC,QAAA,SAAS,CAAC,aAAa,EAAE,YAAY;AAClC,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC7B,SAAS,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;;;;;;AAOvC,QAAA,IAAI,aAAa,KAAK,QAAQ,CAAC,aAAa,IAAI,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE;AACvF,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,IAAI,CAAC,IAAI,EAAE;QACb;AAAO,aAAA,IAAI,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC1C,IAAI,CAAC,YAAY,EAAE;QACrB;IACF;AAEQ,IAAA,OAAO,CAAC,KAAiB,EAAA;AAC/B,QAAA,IAAI,KAAK,CAAC,MAAM,YAAY,OAAO,EAAE;YACnC,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE;AAC1C,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI;gBACrB,IAAI,CAAC,IAAI,EAAE;YACb;QACF;IACF;IAEQ,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,IAAI,EAAE;IACb;IAEQ,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACrB,IAAI,CAAC,IAAI,EAAE;IACb;IAEQ,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,IAAI,EAAE;IACb;IAEQ,YAAY,GAAA;;;AAGlB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,IAAI,EAAE;IACb;IAEQ,kBAAkB,GAAA;AACxB,QAAA,IAAI,CAAC,UAAU,KAAK,UAAU,CAC5B,IAAI,CAAC,MAAM,CAAC,OAAO,EACnB,IAAI,CAAC,MAAM,CAAC,OAAO,EACnB,KAAK,EACL,IAAI,CAAC,MAAM,CAAC,SAAS,EACrB,KAAK,EACL,IAAI,EACJ,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,CAC/B;QACD,OAAO,IAAI,CAAC,UAAU;IACxB;IAEQ,IAAI,GAAA;AACV,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC5C,QAAA,IAAI,UAAU,CAAC,WAAW,EAAE,EAAE;YAC5B;QACF;AAEA,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC;AAC/B,YAAA,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;YAC5B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE;AAC1D,SAAA,CAAC;QAEF,MAAM,aAAa,GAAG,IAAI,eAAe,CAAC,gBAAgB,EAAE,SAAS,EAAE,QAAQ,CAAC;QAChF,MAAM,UAAU,GAAmC,UAAU,CAAC,MAAM,CAAC,aAAa,CAAC;AAEnF,QAAA,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,UAAU,CAAC;AACxD,QAAA,IAAI,CAAC,oBAAoB,EAAE,WAAW,EAAE;AACxC,QAAA,IAAI,CAAC,oBAAoB,GAAG,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,MAAM,IAC5E,UAAU,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CACvE;IACH;IAEQ,IAAI,GAAA;QACV,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE;YACpC;QACF;AACA,QAAA,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE;AACzB,QAAA,IAAI,CAAC,oBAAoB,EAAE,WAAW,EAAE;IAC1C;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;AACxB,QAAA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE;AAC1B,QAAA,IAAI,CAAC,oBAAoB,EAAE,WAAW,EAAE;IAC1C;AACD;AAED;;;;;;AAMG;AACH;MAEa,gBAAgB,CAAA;AACnB,IAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;IACzB,SAAS,GAAG,iBAAiB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;AAE1D,IAAA,aAAa,CAAC,MAQb,EAAA;AACC,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,IAAI,cAAc,EAAE;QAC7B;AAEA,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC;YAC/B,MAAM,EAAE,MAAM,CAAC,QAAQ;AACvB,YAAA,SAAS,EAAE;AACT,gBAAA;AACE,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,QAAQ,EAAE;wBACR,EAAE,EAAE,MAAM,CAAC,WAAW;wBACtB,OAAO,EAAE,MAAM,CAAC,OAAO;wBACvB,cAAc,EAAE,MAAM,CAAC;AACxB;AACF;AACF;AACF,SAAA,CAAC;QAEF,OAAO,IAAI,iBAAiB,CAAC;AAC3B,YAAA,GAAG,MAAM;YACT,QAAQ;YACR,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;IACJ;uGApCW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAAhB,gBAAgB,EAAA,CAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAD5B;;;MCrKY,kBAAkB,CAAA;AACrB,IAAA,OAAO,SAAS,GAAG,CAAC;AAE5B;;;;AAIG;AACM,IAAA,SAAS,GAAG,KAAK,CAAwC,EAAE,qDAAC;AAErE;;;;AAIG;AACM,IAAA,SAAS,GAAG,KAAK,CAAyB,MAAM,qDAAC;AAE1D;;;;AAIG;IACM,UAAU,GAAG,KAAK,CAAC,KAAK,uDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEnE;;;AAGG;IACM,qBAAqB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAkB;AAExD;;AAEG;IACM,cAAc,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAE;AAEvB,IAAA,WAAW,GAAG,CAAA,UAAA,EAAa,kBAAkB,CAAC,SAAS,EAAE,EAAE;AAE7D,IAAA,UAAU;AACV,IAAA,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAEvC,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE;AAChC,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE;AAElC,YAAA,IAAI,OAAO,IAAI,CAAC,QAAQ,EAAE;gBACxB,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC;oBACpD,WAAW,EAAE,IAAI,CAAC,WAAW;oBAC7B,OAAO,EAAE,IAAI,CAAC,UAAU;AACxB,oBAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;oBAC3B,OAAO,EAAE,IAAI,CAAC,SAAS;oBACvB,cAAc,EAAE,IAAI,CAAC,cAAc;oBACnC,cAAc,EAAE,IAAI,CAAC;AACtB,iBAAA,CAAC;YACJ;AAAO,iBAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AAC1B,gBAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AACzB,gBAAA,IAAI,CAAC,UAAU,GAAG,SAAS;YAC7B;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE;IAC5B;uGAhEW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,qBAAA,EAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,mCAAA,EAAA,EAAA,EAAA,SAAA,EALlB,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAKlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;oBACvB,SAAS,EAAE,CAAC,gBAAgB,CAAC;AAC7B,oBAAA,IAAI,EAAE;AACJ,wBAAA,yBAAyB,EAAE;AAC5B;AACF,iBAAA;;;AC1BD;;;AAGG;MASU,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAf,eAAe,EAAA,OAAA,EAAA,CAHhB,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAClB,kBAAkB,CAAA,EAAA,CAAA;wGAEjB,eAAe,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,OAAO,EAAE,CAAC,kBAAkB;AAC7B,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}

package/fesm2022/siemens-element-ng-tour.mjs

@@ -65,6 +65,7 @@ class SiTourComponent {
     elementRef = inject(ElementRef);
     subscription;
     prevFocus = null;
+    lastPositionChange;
     focusTrap = viewChild('focusTrap', ...(ngDevMode ? [{ debugName: "focusTrap" }] : []));
     document = inject(DOCUMENT);
     constructor() {
@@ -78,6 +79,7 @@ class SiTourComponent {
             }, 50);
         });
         this.subscription.add(this.tourToken.positionChange.subscribe(update => this.updatePosition(update)));
+        this.subscription.add(this.tourToken.sizeChange.subscribe(() => this.updatePosition(this.lastPositionChange)));
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -112,6 +114,7 @@ class SiTourComponent {
         }
     }
     updatePosition(update) {
+        this.lastPositionChange = update;
         if (!update) {
             this.positionClass.set('');
             this.arrowPos.set(undefined);
@@ -316,11 +319,11 @@ class SiTourService {
             { originX: 'start', overlayX: 'end', originY: 'center', overlayY: 'center' },
             { originX: 'end', overlayX: 'start', originY: 'center', overlayY: 'center' }
         ]);
-        this.overlayRef.updatePositionStrategy(positionStrategy);
         this.positionChangeSub = positionStrategy.positionChanges
             .pipe(map(change => ({ change, anchor })))
             // We only want to forward the next channel, as the positionChanges completes when setting a new origin.
             .subscribe(value => this.tourToken.positionChange.next(value));
+        this.overlayRef.updatePositionStrategy(positionStrategy);
     }
     createOrUpdateOverlays() {
         if (this.overlayRef) {