@siemens/element-ng 49.14.0 → 51.0.0-rc.5

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

@@ -1,27 +1,28 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, inject, ElementRef, afterRenderEffect, computed, TemplateRef, ChangeDetectionStrategy, Component, Injector, PLATFORM_ID, Injectable, input, booleanAttribute, effect, Directive, NgModule } from '@angular/core';
+import { input, signal, inject, ElementRef, afterRenderEffect, computed, TemplateRef, ChangeDetectionStrategy, Component, DestroyRef, effect, Injector, inputBinding, PLATFORM_ID, Injectable, booleanAttribute, Directive, NgModule } from '@angular/core';
 import { OverlayRef, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
-import { calculateOverlayArrowPosition, getOverlay, getPositionStrategy } from '@siemens/element-ng/common';
+import { calculateOverlayArrowPosition, getOverlay, getPositionStrategy, getOverlayPositions } 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';
 
-/**
- * Copyright (c) Siemens 2016 - 2026
- * SPDX-License-Identifier: MIT
- */
-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);
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    tooltip = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    tooltipContext = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipContext" }] : /* istanbul ignore next */ []));
+    tooltipPositionClass = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPositionClass" }] : /* istanbul ignore next */ []));
+    arrowPos = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrowPos" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
     overlayRef = inject(OverlayRef);
     lastPositionChange;
@@ -29,8 +30,8 @@ class TooltipComponent {
     constructor() {
         let isFirstRun = true;
         afterRenderEffect(() => {
-            this.config.tooltip();
-            this.config.tooltipContext();
+            this.tooltip();
+            this.tooltipContext();
             if (isFirstRun) {
                 isFirstRun = false;
                 return;
@@ -42,7 +43,7 @@ class TooltipComponent {
         });
     }
     tooltipText = computed(() => {
-        const tooltip = this.config.tooltip();
+        const tooltip = this.tooltip();
         if (typeof tooltip === 'string') {
             return tooltip;
         }
@@ -53,19 +54,22 @@ class TooltipComponent {
             return tooltip.nativeElement.textContent.trim();
         }
         return null;
-    }, ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
     tooltipTemplate = computed(() => {
-        const tooltip = this.config.tooltip();
+        const tooltip = this.tooltip();
         return tooltip instanceof TemplateRef ? tooltip : null;
-    }, ...(ngDevMode ? [{ debugName: "tooltipTemplate" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
     tooltipComponent = computed(() => {
-        const tooltip = this.config.tooltip();
+        const tooltip = this.tooltip();
         return !(tooltip instanceof TemplateRef) &&
             !(tooltip instanceof ElementRef) &&
             typeof tooltip !== 'string'
             ? tooltip
             : null;
-    }, ...(ngDevMode ? [{ debugName: "tooltipComponent" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipComponent" }] : /* istanbul ignore next */ []));
     /** @internal */
     updateTooltipPosition(change, anchor) {
         this.lastPositionChange = change;
@@ -78,15 +82,15 @@ class TooltipComponent {
         const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);
         this.arrowPos.set(arrowPos);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TooltipComponent, isStandalone: true, selector: "si-tooltip", host: { attributes: { "animate.leave": "tooltip-leave" } }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TooltipComponent, isStandalone: true, selector: "si-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipContext: { classPropertyName: "tooltipContext", publicName: "tooltipContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.leave": "tooltip-leave" } }, ngImport: i0, template: "<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"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]=\"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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tooltip', imports: [NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.Default, host: {
+            args: [{ selector: 'si-tooltip', imports: [NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.Eager, 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: () => [] });
+                    }, template: "<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"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]=\"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: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContext", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -108,14 +112,24 @@ class NoopTooltipRef {
  */
 class BrowserTooltipRef {
     config;
+    destroyRef = inject(DestroyRef);
     destroy$ = new Subject();
     isFocused = false;
     isHovered = false;
     overlayRef;
     positionSubscription;
+    canShowEffect;
+    placementEffect;
     constructor(config) {
         this.config = config;
         const nativeElement = this.config.element.nativeElement;
+        this.destroyRef.onDestroy(() => this.destroy());
+        if (this.config.canShow) {
+            this.canShowEffect = effect(() => this.updateCanShow(), /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "canShowEffect" }] : /* istanbul ignore next */ []));
+        }
+        this.placementEffect = effect(() => this.updatePlacement(this.config.placement()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placementEffect" }] : /* istanbul ignore next */ []));
         fromEvent(nativeElement, 'focus')
             .pipe(filter(event => event instanceof FocusEvent), takeUntil(this.destroy$))
             .subscribe(event => this.onFocus(event));
@@ -134,11 +148,22 @@ class BrowserTooltipRef {
         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.
+        this.showForCurrentInteraction();
+    }
+    updateCanShow() {
+        if (!this.config.canShow()) {
+            this.isFocused = false;
+            this.isHovered = false;
+            this.hide();
+            return;
+        }
+        this.showForCurrentInteraction();
+    }
+    showForCurrentInteraction() {
+        const nativeElement = this.config.element.nativeElement;
+        // The tooltip may become eligible after the element is already focused or
+        // hovered (e.g. validation errors appear on blur while the pointer still
+        // hovers the element). In that case show it based on the live interaction state.
         if (nativeElement === document.activeElement && nativeElement.matches(':focus-visible')) {
             this.isFocused = true;
             this.show();
@@ -176,10 +201,13 @@ class BrowserTooltipRef {
         this.hide();
     }
     getOrCreateOverlay() {
-        this.overlayRef ??= getOverlay(this.config.element, this.config.overlay, false, this.config.placement, false, true, this.config.scrollStrategy?.());
+        this.overlayRef ??= getOverlay(this.config.element, this.config.overlay, false, this.getPlacement(), false, true, this.config.scrollStrategy?.());
         return this.overlayRef;
     }
     show() {
+        if (this.config.canShow && !this.config.canShow()) {
+            return;
+        }
         const overlayRef = this.getOrCreateOverlay();
         if (overlayRef.hasAttached()) {
             return;
@@ -188,12 +216,26 @@ class BrowserTooltipRef {
             parent: this.config.injector,
             providers: [{ provide: OverlayRef, useValue: overlayRef }]
         });
-        const toolTipPortal = new ComponentPortal(TooltipComponent, undefined, injector);
+        const toolTipPortal = new ComponentPortal(TooltipComponent, undefined, injector, undefined, [
+            inputBinding('id', () => this.config.describedBy),
+            inputBinding('tooltip', this.config.tooltip),
+            inputBinding('tooltipContext', this.config.tooltipContext)
+        ]);
         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));
     }
+    getPlacement() {
+        return this.config.placement();
+    }
+    updatePlacement(placement) {
+        const positionStrategy = this.overlayRef && getPositionStrategy(this.overlayRef);
+        if (positionStrategy) {
+            positionStrategy.withPositions(getOverlayPositions(this.config.element, placement));
+            this.overlayRef?.updatePosition();
+        }
+    }
     hide() {
         if (this.isFocused || this.isHovered) {
             return;
@@ -204,6 +246,8 @@ class BrowserTooltipRef {
     destroy() {
         this.destroy$.next();
         this.destroy$.complete();
+        this.canShowEffect?.destroy();
+        this.placementEffect?.destroy();
         this.overlayRef?.dispose();
         this.positionSubscription?.unsubscribe();
     }
@@ -223,29 +267,15 @@ class SiTooltipService {
         if (!this.isBrowser) {
             return new NoopTooltipRef();
         }
-        const injector = Injector.create({
-            parent: config.injector,
-            providers: [
-                {
-                    provide: SI_TOOLTIP_CONFIG,
-                    useValue: {
-                        id: config.describedBy,
-                        tooltip: config.tooltip,
-                        tooltipContext: config.tooltipContext
-                    }
-                }
-            ]
-        });
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipService, decorators: [{
             type: Injectable
         }] });
 
@@ -256,59 +286,52 @@ class SiTooltipDirective {
      *
      * @defaultValue ''
      */
-    siTooltip = input('', ...(ngDevMode ? [{ debugName: "siTooltip" }] : []));
+    siTooltip = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siTooltip" }] : /* istanbul ignore next */ []));
     /**
      * The placement of the tooltip. One of 'top', 'start', end', 'bottom'
      *
      * @defaultValue 'auto'
      */
-    placement = input('auto', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    placement = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
     /**
      * Allows the tooltip to be disabled
      *
      * @defaultValue false
      */
-    isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}), transform: booleanAttribute });
+    isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Optional CDK scroll strategy used for the tooltip overlay.
      * If not provided, the default reposition strategy is used.
      */
-    tooltipScrollStrategy = input(...(ngDevMode ? [undefined, { debugName: "tooltipScrollStrategy" }] : []));
+    tooltipScrollStrategy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipScrollStrategy" }] : /* istanbul ignore next */ []));
     /**
      * The context for the attached template
      */
-    tooltipContext = input(...(ngDevMode ? [undefined, { debugName: "tooltipContext" }] : []));
+    tooltipContext = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipContext" }] : /* istanbul ignore next */ []));
     describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;
-    tooltipRef;
+    canShow = computed(() => !!this.siTooltip() && !this.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canShow" }] : /* istanbul ignore next */ []));
     tooltipService = inject(SiTooltipService);
     elementRef = inject(ElementRef);
     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;
-            }
+        this.tooltipService.createTooltip({
+            describedBy: this.describedBy,
+            element: this.elementRef,
+            placement: this.placement,
+            canShow: this.canShow,
+            tooltip: this.siTooltip,
+            tooltipContext: this.tooltipContext,
+            scrollStrategy: this.tooltipScrollStrategy
         });
     }
-    ngOnDestroy() {
-        this.tooltipRef?.destroy();
-    }
-    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: { properties: { "attr.aria-describedby": "isDisabled() ? null : describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siTooltip]',
@@ -324,11 +347,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiTooltipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipModule, imports: [SiTooltipDirective], exports: [SiTooltipDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipModule, imports: [SiTooltipDirective], exports: [SiTooltipDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiTooltipDirective],

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 { 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":"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"}
+{"version":3,"file":"siemens-element-ng-tooltip.mjs","sources":["../../../../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 { 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  input,\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 { SiTooltipContent } 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.Eager,\n  host: {\n    'animate.leave': 'tooltip-leave'\n  }\n})\nexport class TooltipComponent {\n  readonly id = input<string>();\n\n  readonly tooltip = input<SiTooltipContent>();\n\n  readonly tooltipContext = input<unknown>();\n\n  protected readonly tooltipPositionClass = signal('');\n  protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n\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.tooltip();\n      this.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.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.tooltip();\n    return tooltip instanceof TemplateRef ? tooltip : null;\n  });\n\n  protected readonly tooltipComponent = computed(() => {\n    const tooltip = this.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]=\"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]=\"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 {\n  ComponentRef,\n  DestroyRef,\n  effect,\n  ElementRef,\n  EffectRef,\n  inject,\n  Injectable,\n  Injector,\n  inputBinding,\n  PLATFORM_ID\n} from '@angular/core';\nimport {\n  getOverlay,\n  getOverlayPositions,\n  getPositionStrategy,\n  positions\n} 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 { 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 destroyRef = inject(DestroyRef);\n  private readonly destroy$ = new Subject<void>();\n  private isFocused = false;\n  private isHovered = false;\n  private overlayRef?: OverlayRef;\n  private positionSubscription?: Subscription;\n  private canShowEffect?: EffectRef;\n  private placementEffect?: EffectRef;\n\n  constructor(\n    private config: {\n      describedBy?: string;\n      element: ElementRef;\n      injector?: Injector;\n      overlay: Overlay;\n      placement: () => keyof typeof positions;\n      canShow?: () => boolean;\n      scrollStrategy?: () => ScrollStrategy | undefined;\n      tooltip: () => SiTooltipContent;\n      tooltipContext: () => unknown;\n    }\n  ) {\n    const nativeElement = this.config.element.nativeElement;\n    this.destroyRef.onDestroy(() => this.destroy());\n\n    if (this.config.canShow) {\n      this.canShowEffect = effect(() => this.updateCanShow());\n    }\n\n    this.placementEffect = effect(() => this.updatePlacement(this.config.placement()));\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    this.showForCurrentInteraction();\n  }\n\n  private updateCanShow(): void {\n    if (!this.config.canShow!()) {\n      this.isFocused = false;\n      this.isHovered = false;\n      this.hide();\n      return;\n    }\n\n    this.showForCurrentInteraction();\n  }\n\n  private showForCurrentInteraction(): void {\n    const nativeElement = this.config.element.nativeElement;\n    // The tooltip may become eligible after the element is already focused or\n    // hovered (e.g. validation errors appear on blur while the pointer still\n    // hovers the element). In that case show it based on the live interaction 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.getPlacement(),\n      false,\n      true,\n      this.config.scrollStrategy?.()\n    );\n    return this.overlayRef;\n  }\n\n  private show(): void {\n    if (this.config.canShow && !this.config.canShow()) {\n      return;\n    }\n\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, undefined, [\n      inputBinding('id', () => this.config.describedBy),\n      inputBinding('tooltip', this.config.tooltip),\n      inputBinding('tooltipContext', this.config.tooltipContext)\n    ]);\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 getPlacement(): keyof typeof positions {\n    return this.config.placement();\n  }\n\n  private updatePlacement(placement: keyof typeof positions): void {\n    const positionStrategy = this.overlayRef && getPositionStrategy(this.overlayRef);\n    if (positionStrategy) {\n      positionStrategy.withPositions(getOverlayPositions(this.config.element, placement));\n      this.overlayRef?.updatePosition();\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.canShowEffect?.destroy();\n    this.placementEffect?.destroy();\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    canShow?: () => boolean;\n    tooltip: () => SiTooltipContent;\n    tooltipContext: () => unknown;\n    scrollStrategy?: () => ScrollStrategy | undefined;\n  }): TooltipRef {\n    if (!this.isBrowser) {\n      return new NoopTooltipRef();\n    }\n\n    return new BrowserTooltipRef({\n      ...config,\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  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  TemplateRef\n} from '@angular/core';\nimport { positions } from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiTooltipService } 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 {\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 readonly canShow = computed(() => !!this.siTooltip() && !this.isDisabled());\n  private readonly tooltipService = inject(SiTooltipService);\n  private readonly elementRef = inject(ElementRef);\n\n  constructor() {\n    this.tooltipService.createTooltip({\n      describedBy: this.describedBy,\n      element: this.elementRef,\n      placement: this.placement,\n      canShow: this.canShow,\n      tooltip: this.siTooltip,\n      tooltipContext: this.tooltipContext,\n      scrollStrategy: this.tooltipScrollStrategy\n    });\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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"}

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

@@ -1,7 +1,7 @@
 import { Overlay, OverlayOutsideClickDispatcher, FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, ChangeDetectionStrategy, Component, ElementRef, viewChild, DOCUMENT, HostListener, Injector, Injectable } from '@angular/core';
+import { InjectionToken, inject, signal, Component, ElementRef, viewChild, DOCUMENT, HostListener, Injector, Injectable } from '@angular/core';
 import { isRTL, calculateOverlayArrowPosition } from '@siemens/element-ng/common';
 import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
 import { Subject, map, merge, throttleTime, tap } from 'rxjs';
@@ -21,7 +21,8 @@ const SI_TOUR_TOKEN = new InjectionToken('SI_TOUR_TOKEN');
 class SiTourHighlightComponent {
     tourToken = inject(SI_TOUR_TOKEN);
     anchor;
-    dim = signal({ top: 0, left: 0, width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "dim" }] : []));
+    dim = signal({ top: 0, left: 0, width: 0, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dim" }] : /* istanbul ignore next */ []));
     constructor() {
         this.tourToken.currentStep.pipe(takeUntilDestroyed()).subscribe(step => {
             this.anchor = step.anchor;
@@ -37,12 +38,12 @@ class SiTourHighlightComponent {
         const rect = this.anchor.nativeElement.getBoundingClientRect();
         this.dim.set({ top: rect.top, left: rect.left, width: rect.width, height: rect.height });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiTourHighlightComponent, isStandalone: true, selector: "si-tour-highlight", ngImport: i0, template: "@let rect = dim();\n<div\n  class=\"highlighter\"\n  [style.top.px]=\"rect.top\"\n  [style.left.px]=\"rect.left\"\n  [style.inline-size.px]=\"rect.width\"\n  [style.block-size.px]=\"rect.height\"\n></div>\n", styles: [".highlighter{position:fixed;box-shadow:var(--element-base-translucent-1) 0 0 0 1000vmax;pointer-events:none}::ng-deep .cdk-global-overlay-wrapper:has(si-tour-highlight){z-index:2000}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTourHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SiTourHighlightComponent, isStandalone: true, selector: "si-tour-highlight", ngImport: i0, template: "@let rect = dim();\n<div\n  class=\"highlighter\"\n  [style.top.px]=\"rect.top\"\n  [style.left.px]=\"rect.left\"\n  [style.inline-size.px]=\"rect.width\"\n  [style.block-size.px]=\"rect.height\"\n></div>\n", styles: [".highlighter{position:fixed;box-shadow:var(--element-base-translucent-1) 0 0 0 1000vmax;pointer-events:none}::ng-deep .cdk-global-overlay-wrapper:has(si-tour-highlight){z-index:2000}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourHighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTourHighlightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tour-highlight', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let rect = dim();\n<div\n  class=\"highlighter\"\n  [style.top.px]=\"rect.top\"\n  [style.left.px]=\"rect.left\"\n  [style.inline-size.px]=\"rect.width\"\n  [style.block-size.px]=\"rect.height\"\n></div>\n", styles: [".highlighter{position:fixed;box-shadow:var(--element-base-translucent-1) 0 0 0 1000vmax;pointer-events:none}::ng-deep .cdk-global-overlay-wrapper:has(si-tour-highlight){z-index:2000}\n"] }]
+            args: [{ selector: 'si-tour-highlight', template: "@let rect = dim();\n<div\n  class=\"highlighter\"\n  [style.top.px]=\"rect.top\"\n  [style.left.px]=\"rect.left\"\n  [style.inline-size.px]=\"rect.width\"\n  [style.block-size.px]=\"rect.height\"\n></div>\n", styles: [".highlighter{position:fixed;box-shadow:var(--element-base-translucent-1) 0 0 0 1000vmax;pointer-events:none}::ng-deep .cdk-global-overlay-wrapper:has(si-tour-highlight){z-index:2000}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -50,10 +51,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiTourComponent {
-    positionClass = signal('', ...(ngDevMode ? [{ debugName: "positionClass" }] : []));
-    arrowPos = signal(undefined, ...(ngDevMode ? [{ debugName: "arrowPos" }] : []));
-    step = signal(undefined, ...(ngDevMode ? [{ debugName: "step" }] : []));
-    show = signal(false, ...(ngDevMode ? [{ debugName: "show" }] : []));
+    positionClass = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionClass" }] : /* istanbul ignore next */ []));
+    arrowPos = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrowPos" }] : /* istanbul ignore next */ []));
+    step = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    show = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementCancel });
     tourToken = inject(SI_TOUR_TOKEN);
     backText = t(() => $localize `:@@SI_TOUR.BACK:Back`);
@@ -66,7 +71,8 @@ class SiTourComponent {
     subscription;
     prevFocus = null;
     lastPositionChange;
-    focusTrap = viewChild('focusTrap', ...(ngDevMode ? [{ debugName: "focusTrap" }] : []));
+    focusTrap = viewChild('focusTrap', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusTrap" }] : /* istanbul ignore next */ []));
     document = inject(DOCUMENT);
     constructor() {
         this.subscription = this.tourToken.currentStep.subscribe(step => {
@@ -124,12 +130,12 @@ class SiTourComponent {
         this.positionClass.set(`popover-${connPair.overlayX}-${connPair.overlayY}`);
         setTimeout(() => this.arrowPos.set(calculateOverlayArrowPosition(update.change, this.elementRef, update.anchor)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTourComponent, isStandalone: true, selector: "si-tour", host: { listeners: { "window:keydown": "keyListener($event)" }, properties: { "attr.data-step-id": "step()?.step?.id" } }, viewQueries: [{ propertyName: "focusTrap", first: true, predicate: ["focusTrap"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n<div\n  #focusTrap=\"cdkTrapFocus\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class]=\"['tour-content', 'popover', 'position-relative', positionClass()]\"\n  [class.show]=\"show()\"\n>\n  @if (arrowPos()) {\n    <div\n      class=\"popover-arrow\"\n      [style.left.px]=\"arrowPos()?.left\"\n      [style.right.px]=\"arrowPos()?.right\"\n    ></div>\n  }\n  @if (step()) {\n    @let tourStep = step()!;\n    <div class=\"d-flex\">\n      <div class=\"p-6 flex-fill\">\n        <div class=\"pb-2 si-body text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-h4 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body px-6 pb-8\">\n      {{ tourStep.step.text | translate }}\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center p-6 gap-6\">\n      @if (tourStep.stepNumber !== 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [disabled]=\"tourToken.blocked()\"\n          (click)=\"action('back')\"\n        >\n          {{ backText | translate }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"btn btn-tertiary\" (click)=\"action('cancel')\">\n          {{ skipText | translate }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        cdkFocusInitial\n        [disabled]=\"tourToken.blocked()\"\n        (click)=\"action(tourStep.stepNumber !== tourStep.totalSteps ? 'next' : 'complete')\"\n      >\n        @if (tourStep.stepNumber !== tourStep.totalSteps) {\n          {{ nextText | translate }}\n        } @else {\n          {{ doneText | translate }}\n        }\n      </button>\n    </div>\n  }\n</div>\n", styles: [".tour-content{--popover-arrow-width: 24px;--popover-arrow-height: 12px;--popover-bg-color: var(--element-base-1);max-inline-size:400px;inline-size:100vi;opacity:0}.tour-content.show{opacity:1}.backdrop{position:fixed;inset:-200vmax}::ng-deep .cdk-overlay-connected-position-bounding-box:has(si-tour),::ng-deep .cdk-global-overlay-wrapper:has(si-tour){z-index:2000}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiTourComponent, isStandalone: true, selector: "si-tour", host: { listeners: { "window:keydown": "keyListener($event)" }, properties: { "attr.data-step-id": "step()?.step?.id" } }, viewQueries: [{ propertyName: "focusTrap", first: true, predicate: ["focusTrap"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n<div\n  #focusTrap=\"cdkTrapFocus\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class]=\"['tour-content', 'popover', 'position-relative', positionClass()]\"\n  [class.show]=\"show()\"\n>\n  @if (arrowPos()) {\n    <div\n      class=\"popover-arrow\"\n      [style.left.px]=\"arrowPos()?.left\"\n      [style.right.px]=\"arrowPos()?.right\"\n    ></div>\n  }\n  @if (step()) {\n    @let tourStep = step()!;\n    <div class=\"d-flex\">\n      <div class=\"p-6 flex-fill\">\n        <div class=\"pb-2 si-body text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-h4 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body px-6 pb-8\">\n      {{ tourStep.step.text | translate }}\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center p-6 gap-6\">\n      @if (tourStep.stepNumber !== 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [disabled]=\"tourToken.blocked()\"\n          (click)=\"action('back')\"\n        >\n          {{ backText | translate }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"btn btn-tertiary\" (click)=\"action('cancel')\">\n          {{ skipText | translate }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        cdkFocusInitial\n        [disabled]=\"tourToken.blocked()\"\n        (click)=\"action(tourStep.stepNumber !== tourStep.totalSteps ? 'next' : 'complete')\"\n      >\n        @if (tourStep.stepNumber !== tourStep.totalSteps) {\n          {{ nextText | translate }}\n        } @else {\n          {{ doneText | translate }}\n        }\n      </button>\n    </div>\n  }\n</div>\n", styles: [".tour-content{--popover-arrow-width: 24px;--popover-arrow-height: 12px;--popover-bg-color: var(--element-base-1);max-inline-size:400px;inline-size:100vi;opacity:0}.tour-content.show{opacity:1}.backdrop{position:fixed;inset:-200vmax}::ng-deep .cdk-overlay-connected-position-bounding-box:has(si-tour),::ng-deep .cdk-global-overlay-wrapper:has(si-tour){z-index:2000}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTourComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tour', imports: [A11yModule, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-tour', imports: [A11yModule, SiIconComponent, SiTranslatePipe], host: {
                         '[attr.data-step-id]': 'step()?.step?.id'
                     }, template: "<div class=\"backdrop\"></div>\n<div\n  #focusTrap=\"cdkTrapFocus\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class]=\"['tour-content', 'popover', 'position-relative', positionClass()]\"\n  [class.show]=\"show()\"\n>\n  @if (arrowPos()) {\n    <div\n      class=\"popover-arrow\"\n      [style.left.px]=\"arrowPos()?.left\"\n      [style.right.px]=\"arrowPos()?.right\"\n    ></div>\n  }\n  @if (step()) {\n    @let tourStep = step()!;\n    <div class=\"d-flex\">\n      <div class=\"p-6 flex-fill\">\n        <div class=\"pb-2 si-body text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-h4 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body px-6 pb-8\">\n      {{ tourStep.step.text | translate }}\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center p-6 gap-6\">\n      @if (tourStep.stepNumber !== 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [disabled]=\"tourToken.blocked()\"\n          (click)=\"action('back')\"\n        >\n          {{ backText | translate }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"btn btn-tertiary\" (click)=\"action('cancel')\">\n          {{ skipText | translate }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        cdkFocusInitial\n        [disabled]=\"tourToken.blocked()\"\n        (click)=\"action(tourStep.stepNumber !== tourStep.totalSteps ? 'next' : 'complete')\"\n      >\n        @if (tourStep.stepNumber !== tourStep.totalSteps) {\n          {{ nextText | translate }}\n        } @else {\n          {{ doneText | translate }}\n        }\n      </button>\n    </div>\n  }\n</div>\n", styles: [".tour-content{--popover-arrow-width: 24px;--popover-arrow-height: 12px;--popover-bg-color: var(--element-base-1);max-inline-size:400px;inline-size:100vi;opacity:0}.tour-content.show{opacity:1}.backdrop{position:fixed;inset:-200vmax}::ng-deep .cdk-overlay-connected-position-bounding-box:has(si-tour),::ng-deep .cdk-global-overlay-wrapper:has(si-tour){z-index:2000}\n"] }]
         }], ctorParameters: () => [], propDecorators: { focusTrap: [{ type: i0.ViewChild, args: ['focusTrap', { isSignal: true }] }], keyListener: [{
@@ -402,10 +408,10 @@ class SiTourService {
         this.overlayRefHighlight?.dispose();
         this.overlayRefHighlight = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTourService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTourService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiTourService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });