@siemens/element-ng 47.8.0 → 48.0.0-next.1

package/fesm2022/siemens-element-ng-toast-notification.mjs

@@ -3,7 +3,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { NgClass, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, input, computed, viewChild, Component, ChangeDetectionStrategy, Injector, PLATFORM_ID, Injectable } from '@angular/core';
-import { SiTranslatePipe, SiTranslateService, SiNoTranslateService } from '@siemens/element-translate-ng/translate';
+import { t, SiTranslatePipe, SiTranslateService, SiNoTranslateService } from '@siemens/element-translate-ng/translate';
 import { ReplaySubject, Subject } from 'rxjs';
 import { AnimationBuilder, style, animate, trigger, transition } from '@angular/animations';
 import { areAnimationsDisabled } from '@siemens/element-ng/common';
@@ -20,7 +20,7 @@ const SI_TOAST_AUTO_HIDE_DELAY = 6000;
 class SiToastNotificationComponent {
     statusIcons = inject(STATUS_ICON_CONFIG);
     toast = input.required();
-    closeAriaLabel = $localize `:@@SI_TOAST.CLOSE:Close`;
+    closeAriaLabel = t(() => $localize `:@@SI_TOAST.CLOSE:Close`);
     icons = addIcons({ elementCancel });
     status = computed(() => {
         const toast = this.toast();
@@ -50,10 +50,10 @@ class SiToastNotificationComponent {
     close() {
         this.toast().close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiToastNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiToastNotificationComponent, isStandalone: true, selector: "si-toast-notification", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "autoCloseBar", first: true, predicate: ["autoCloseBar"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"!toast().disableAutoClose\">\n  <div #autoCloseBar class=\"si-toast-timer-bar\"></div>\n  <div class=\"bar\" [ngClass]=\"statusColor()\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toast().title | translate: toast().translationParams }}</b></p\n    >\n    @if (toast().message) {\n      <p class=\"mt-4\">{{ toast().message | translate: toast().translationParams }}</p>\n    }\n    @if (toast().action) {\n      <p [class.mt-3]=\"toast().message\" [class.mt-4]=\"!toast().message\">\n        <a [siLink]=\"toast().action\">{{\n          toast().action!.title | translate: toast().translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (!toast().disableManualClose) {\n    <button\n      type=\"button\"\n      tabindex=\"0\"\n      class=\"btn btn-circle btn-sm btn-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel | translate\"\n      (keydown.enter)=\"close()\"\n      (click)=\"close()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [".si-toast-timer-bar,.si-toast.si-toast-auto-close:before{position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px}:host{display:block}.si-toast{block-size:auto;position:relative;display:flex;align-items:flex-start;color:var(--element-text-primary);background:var(--element-base-3);border-radius:var(--element-radius-2);padding-inline:12px 8px;padding-block:8px;margin-block-end:20px;font-size:1rem;pointer-events:all;overflow:hidden;min-inline-size:250px;max-inline-size:calc(100vw - 40px)}@media (min-width: 768px){.si-toast{max-inline-size:400px}}.si-toast.si-toast-auto-close{padding-block-end:10px}.si-toast.si-toast-auto-close:before{content:\"\";background:var(--element-ui-4);inset-inline-end:0}.bar{inset-block-start:0;inset-inline-start:0;position:absolute;inline-size:4px;block-size:100%;background:currentColor}.si-toast-timer-bar{background-color:var(--element-ui-0)}.toast-content{flex:1;overflow:hidden;white-space:nowrap}.toast-content p{margin-block:0;line-height:1.125rem;white-space:pre-line;overflow-wrap:break-word;word-wrap:break-word}.toast-content .toast-title{line-height:1.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i1.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiToastNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiToastNotificationComponent, isStandalone: true, selector: "si-toast-notification", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "autoCloseBar", first: true, predicate: ["autoCloseBar"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"!toast().disableAutoClose\">\n  <div #autoCloseBar class=\"si-toast-timer-bar\"></div>\n  <div class=\"bar\" [ngClass]=\"statusColor()\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toast().title | translate: toast().translationParams }}</b></p\n    >\n    @if (toast().message) {\n      <p class=\"mt-4\">{{ toast().message | translate: toast().translationParams }}</p>\n    }\n    @if (toast().action) {\n      <p [class.mt-3]=\"toast().message\" [class.mt-4]=\"!toast().message\">\n        <a [siLink]=\"toast().action\">{{\n          toast().action!.title | translate: toast().translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (!toast().disableManualClose) {\n    <button\n      type=\"button\"\n      tabindex=\"0\"\n      class=\"btn btn-circle btn-sm btn-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel | translate\"\n      (keydown.enter)=\"close()\"\n      (click)=\"close()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [".si-toast-timer-bar,.si-toast.si-toast-auto-close:before{position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px}:host{display:block}.si-toast{block-size:auto;position:relative;display:flex;align-items:flex-start;color:var(--element-text-primary);background:var(--element-base-3);border-radius:var(--element-radius-2);padding-inline:12px 8px;padding-block:8px;margin-block-end:20px;font-size:1rem;pointer-events:all;overflow:hidden;min-inline-size:250px;max-inline-size:calc(100vw - 40px)}@media (min-width: 768px){.si-toast{max-inline-size:400px}}.si-toast.si-toast-auto-close{padding-block-end:10px}.si-toast.si-toast-auto-close:before{content:\"\";background:var(--element-ui-4);inset-inline-end:0}.bar{inset-block-start:0;inset-inline-start:0;position:absolute;inline-size:4px;block-size:100%;background:currentColor}.si-toast-timer-bar{background-color:var(--element-ui-0)}.toast-content{flex:1;overflow:hidden;white-space:nowrap}.toast-content p{margin-block:0;line-height:1.125rem;white-space:pre-line;overflow-wrap:break-word;word-wrap:break-word}.toast-content .toast-title{line-height:1.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i1.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiToastNotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiToastNotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-toast-notification', imports: [NgClass, SiLinkModule, SiIconNextComponent, SiStatusIconComponent, SiTranslatePipe], template: "<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"!toast().disableAutoClose\">\n  <div #autoCloseBar class=\"si-toast-timer-bar\"></div>\n  <div class=\"bar\" [ngClass]=\"statusColor()\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toast().title | translate: toast().translationParams }}</b></p\n    >\n    @if (toast().message) {\n      <p class=\"mt-4\">{{ toast().message | translate: toast().translationParams }}</p>\n    }\n    @if (toast().action) {\n      <p [class.mt-3]=\"toast().message\" [class.mt-4]=\"!toast().message\">\n        <a [siLink]=\"toast().action\">{{\n          toast().action!.title | translate: toast().translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (!toast().disableManualClose) {\n    <button\n      type=\"button\"\n      tabindex=\"0\"\n      class=\"btn btn-circle btn-sm btn-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel | translate\"\n      (keydown.enter)=\"close()\"\n      (click)=\"close()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [".si-toast-timer-bar,.si-toast.si-toast-auto-close:before{position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px}:host{display:block}.si-toast{block-size:auto;position:relative;display:flex;align-items:flex-start;color:var(--element-text-primary);background:var(--element-base-3);border-radius:var(--element-radius-2);padding-inline:12px 8px;padding-block:8px;margin-block-end:20px;font-size:1rem;pointer-events:all;overflow:hidden;min-inline-size:250px;max-inline-size:calc(100vw - 40px)}@media (min-width: 768px){.si-toast{max-inline-size:400px}}.si-toast.si-toast-auto-close{padding-block-end:10px}.si-toast.si-toast-auto-close:before{content:\"\";background:var(--element-ui-4);inset-inline-end:0}.bar{inset-block-start:0;inset-inline-start:0;position:absolute;inline-size:4px;block-size:100%;background:currentColor}.si-toast-timer-bar{background-color:var(--element-ui-0)}.toast-content{flex:1;overflow:hidden;white-space:nowrap}.toast-content p{margin-block:0;line-height:1.125rem;white-space:pre-line;overflow-wrap:break-word;word-wrap:break-word}.toast-content .toast-title{line-height:1.5rem}\n"] }]
         }] });
@@ -65,8 +65,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 class SiToastNotificationDrawerComponent {
     toasts = input();
     animationsDisabled = areAnimationsDisabled();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiToastNotificationDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiToastNotificationDrawerComponent, isStandalone: true, selector: "si-toast-notification-drawer", inputs: { toasts: { classPropertyName: "toasts", publicName: "toasts", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "polite" } }, ngImport: i0, template: "@for (toast of toasts() | async; track toast) {\n  <si-toast-notification\n    @toastTrigger\n    class=\"position-relative\"\n    [toast]=\"toast\"\n    [@.disabled]=\"animationsDisabled\"\n  />\n}\n", styles: ["::ng-deep .cdk-global-overlay-wrapper:has(si-toast-notification-drawer){z-index:2000}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SiToastNotificationComponent, selector: "si-toast-notification", inputs: ["toast"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiToastNotificationDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiToastNotificationDrawerComponent, isStandalone: true, selector: "si-toast-notification-drawer", inputs: { toasts: { classPropertyName: "toasts", publicName: "toasts", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "polite" } }, ngImport: i0, template: "@for (toast of toasts() | async; track toast) {\n  <si-toast-notification\n    @toastTrigger\n    class=\"position-relative\"\n    [toast]=\"toast\"\n    [@.disabled]=\"animationsDisabled\"\n  />\n}\n", styles: ["::ng-deep .cdk-global-overlay-wrapper:has(si-toast-notification-drawer){z-index:2000}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SiToastNotificationComponent, selector: "si-toast-notification", inputs: ["toast"] }], animations: [
             trigger('toastTrigger', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'translateY(100%)' }),
@@ -79,7 +79,7 @@ class SiToastNotificationDrawerComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiToastNotificationDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiToastNotificationDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-toast-notification-drawer', imports: [AsyncPipe, SiToastNotificationComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'aria-live': 'polite'
@@ -205,10 +205,10 @@ class SiToastNotificationService {
         }
         return injector;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiToastNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiToastNotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiToastNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiToastNotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiToastNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiToastNotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });

package/fesm2022/siemens-element-ng-toast-notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-toast-notification.mjs","sources":["../../../../projects/element-ng/toast-notification/si-toast.model.ts","../../../../projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.ts","../../../../projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html","../../../../projects/element-ng/toast-notification/si-toast-notification-drawer/si-toast-notification-drawer.component.ts","../../../../projects/element-ng/toast-notification/si-toast-notification-drawer/si-toast-notification-drawer.component.html","../../../../projects/element-ng/toast-notification/si-toast-notification.service.ts","../../../../projects/element-ng/toast-notification/index.ts","../../../../projects/element-ng/toast-notification/siemens-element-ng-toast-notification.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { StatusType } from '@siemens/element-ng/common';\nimport { Link } from '@siemens/element-ng/link';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Subject } from 'rxjs';\n\nexport interface SiToast {\n  state: ToastStateName;\n  title: TranslatableString;\n  message: TranslatableString;\n  disableManualClose?: boolean;\n  disableAutoClose?: boolean;\n  timeout?: number;\n  action?: Link;\n  close?: () => void;\n  translationParams?: { [key: string]: any };\n  hidden?: Subject<void>;\n  closeAriaLabel?: TranslatableString;\n}\n\nexport type ToastStateName = StatusType | 'connection';\n\nexport const SI_TOAST_AUTO_HIDE_DELAY = 6000;\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { animate, AnimationBuilder, style } from '@angular/animations';\nimport { NgClass } from '@angular/common';\nimport {\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport {\n  addIcons,\n  elementCancel,\n  SiIconNextComponent,\n  SiStatusIconComponent,\n  STATUS_ICON_CONFIG\n} from '@siemens/element-ng/icon';\nimport { SiLinkModule } from '@siemens/element-ng/link';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SiToast } from '../si-toast.model';\n\n@Component({\n  selector: 'si-toast-notification',\n  imports: [NgClass, SiLinkModule, SiIconNextComponent, SiStatusIconComponent, SiTranslatePipe],\n  templateUrl: './si-toast-notification.component.html',\n  styleUrl: './si-toast-notification.component.scss'\n})\nexport class SiToastNotificationComponent implements OnChanges {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  readonly toast = input.required<SiToast>();\n\n  protected closeAriaLabel = $localize`:@@SI_TOAST.CLOSE:Close`;\n  protected readonly icons = addIcons({ elementCancel });\n  protected readonly status = computed(() => {\n    const toast = this.toast();\n    if (toast.state === 'connection') {\n      return 'danger';\n    } else {\n      return Object.keys(this.statusIcons).includes(toast.state) ? toast.state : 'info';\n    }\n  });\n  protected readonly statusColor = computed(() => this.statusIcons[this.status()].color);\n\n  private readonly autoCloseBar = viewChild.required<ElementRef<HTMLDivElement>>('autoCloseBar');\n\n  private animationBuilder = inject(AnimationBuilder);\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes?.toast.currentValue) {\n      const toast = this.toast();\n\n      if (!toast.disableAutoClose && toast.timeout) {\n        const animation = this.animationBuilder.build([\n          style({ width: '100%' }),\n          animate(toast.timeout, style({ width: '0%' }))\n        ]);\n        animation.create(this.autoCloseBar().nativeElement).play();\n      }\n\n      this.closeAriaLabel = this.toast().closeAriaLabel ?? this.closeAriaLabel;\n    }\n  }\n\n  protected close(): void {\n    this.toast().close!();\n  }\n}\n","<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"!toast().disableAutoClose\">\n  <div #autoCloseBar class=\"si-toast-timer-bar\"></div>\n  <div class=\"bar\" [ngClass]=\"statusColor()\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toast().title | translate: toast().translationParams }}</b></p\n    >\n    @if (toast().message) {\n      <p class=\"mt-4\">{{ toast().message | translate: toast().translationParams }}</p>\n    }\n    @if (toast().action) {\n      <p [class.mt-3]=\"toast().message\" [class.mt-4]=\"!toast().message\">\n        <a [siLink]=\"toast().action\">{{\n          toast().action!.title | translate: toast().translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (!toast().disableManualClose) {\n    <button\n      type=\"button\"\n      tabindex=\"0\"\n      class=\"btn btn-circle btn-sm btn-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel | translate\"\n      (keydown.enter)=\"close()\"\n      (click)=\"close()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { animate, style, transition, trigger } from '@angular/animations';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { areAnimationsDisabled } from '@siemens/element-ng/common';\nimport { Observable } from 'rxjs';\n\nimport { SiToastNotificationComponent } from '../si-toast-notification/si-toast-notification.component';\nimport { SiToast } from '../si-toast.model';\n\n@Component({\n  selector: 'si-toast-notification-drawer',\n  imports: [AsyncPipe, SiToastNotificationComponent],\n  templateUrl: './si-toast-notification-drawer.component.html',\n  // workaround for cdk-overlay not supporting the order of overlays\n  styles: `\n    ::ng-deep .cdk-global-overlay-wrapper:has(si-toast-notification-drawer) {\n      z-index: 2000;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'aria-live': 'polite'\n  },\n  animations: [\n    trigger('toastTrigger', [\n      transition(':enter', [\n        style({ opacity: 0, transform: 'translateY(100%)' }),\n        animate(\n          '500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          style({ opacity: 1, transform: 'translateY(0%)' })\n        )\n      ]),\n      transition(':leave', [\n        style({ 'opacity': 1, 'inset-inline-end': '0%' }),\n        animate('300ms', style({ 'opacity': 0, 'inset-inline-end': '-100%' }))\n      ])\n    ])\n  ]\n})\nexport class SiToastNotificationDrawerComponent {\n  readonly toasts = input<Observable<SiToast[]>>();\n\n  protected animationsDisabled = areAnimationsDisabled();\n}\n","@for (toast of toasts() | async; track toast) {\n  <si-toast-notification\n    @toastTrigger\n    class=\"position-relative\"\n    [toast]=\"toast\"\n    [@.disabled]=\"animationsDisabled\"\n  />\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ComponentRef, inject, Injectable, Injector, OnDestroy, PLATFORM_ID } from '@angular/core';\nimport { Link } from '@siemens/element-ng/link';\nimport { SiNoTranslateService, SiTranslateService } from '@siemens/element-translate-ng/translate';\nimport { ReplaySubject, Subject } from 'rxjs';\n\nimport { SiToastNotificationDrawerComponent } from './si-toast-notification-drawer/si-toast-notification-drawer.component';\nimport { SI_TOAST_AUTO_HIDE_DELAY, SiToast, ToastStateName } from './si-toast.model';\n\n@Injectable({ providedIn: 'root' })\nexport class SiToastNotificationService implements OnDestroy {\n  /**\n   * List of currently active toasts to see details or close them.\n   *\n   * @defaultValue []\n   */\n  activeToasts: SiToast[] = [];\n\n  private activeToastsSubject = new ReplaySubject<SiToast[]>(1);\n  private queuedToastSubject = new Subject<SiToast>();\n  private readonly maxToasts = 3;\n\n  private componentRef?: ComponentRef<SiToastNotificationDrawerComponent>;\n  private overlayRef?: OverlayRef;\n\n  private injector = inject(Injector);\n  private overlay = inject(Overlay);\n\n  constructor() {\n    const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n    this.queuedToastSubject.subscribe((toast: SiToast) => {\n      this.activeToasts.push(toast);\n      if (this.activeToasts.length > this.maxToasts) {\n        this.hideToastNotification(this.activeToasts[0]);\n      }\n      this.activeToastsSubject.next(this.activeToasts);\n      if (!toast.disableAutoClose && toast.timeout) {\n        setTimeout(() => this.hideToastNotification(toast), toast.timeout);\n      }\n    });\n\n    if (isBrowser) {\n      this.addToastDrawer();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.overlayRef?.dispose();\n    this.componentRef?.destroy();\n  }\n\n  /**\n   * Queue a new toast to be shown.\n   * @param action - Passing a Link object will optionally add a clickable link to the toast which can contain an action.\n   * @returns the toast object\n   */\n  queueToastNotification(\n    state: ToastStateName,\n    title: string,\n    message: string,\n    disableAutoClose?: boolean,\n    disableManualClose?: boolean,\n    action?: Link\n  ): SiToast {\n    const toast: SiToast = {\n      state,\n      title,\n      message,\n      disableAutoClose,\n      disableManualClose,\n      action,\n      hidden: new Subject()\n    };\n    return this.showToastNotification(toast);\n  }\n\n  /**\n   * Show a toast notification\n   * @param toast - The toast object of the toast to be shown, can also be constructed while calling this.\n   */\n  showToastNotification(toast: SiToast): SiToast {\n    toast.timeout ??= SI_TOAST_AUTO_HIDE_DELAY;\n    toast.hidden ??= new Subject();\n    toast.close = () => this.hideToastNotification(toast);\n    this.queuedToastSubject.next(toast);\n    return toast;\n  }\n\n  /**\n   * Hide a toast notification\n   * @param toast - The toast object of the toast to be hidden, can be retrieved from {@link activeToasts} and is returned by {@link queueToastNotification}.\n   */\n  hideToastNotification(toast?: SiToast): void {\n    const hiddenToasts: SiToast[] = [];\n    const activeToasts: SiToast[] = [];\n    this.activeToasts.forEach(item => {\n      if (!toast || item === toast) {\n        hiddenToasts.push(item);\n      } else {\n        activeToasts.push(item);\n      }\n    });\n\n    this.activeToasts = activeToasts;\n    this.activeToastsSubject.next(this.activeToasts);\n\n    hiddenToasts.forEach(item => {\n      item.hidden?.next();\n      item.hidden?.complete();\n    });\n  }\n\n  private addToastDrawer(): void {\n    this.overlayRef = this.overlay.create({\n      positionStrategy: this.overlay.position().global().end('20px').bottom()\n    });\n    const portal = new ComponentPortal(\n      SiToastNotificationDrawerComponent,\n      null,\n      this.buildInjector()\n    );\n    this.componentRef = this.overlayRef.attach(portal);\n    this.componentRef.setInput('toasts', this.activeToastsSubject);\n  }\n\n  // TODO remove once translation must be defined at application start\n  // Notification service is provided in 'root'. If no translation is defined, SiNoTranslateService is not provided\n  private buildInjector(): Injector {\n    let injector = this.injector;\n    if (!injector.get(SiTranslateService, null)) {\n      injector = Injector.create({\n        providers: [{ provide: SiTranslateService, useClass: SiNoTranslateService, deps: [] }],\n        parent: this.injector\n      });\n    }\n    return injector;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-toast.model';\nexport * from './si-toast-notification.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-toast-notification.mjs","sources":["../../../../projects/element-ng/toast-notification/si-toast.model.ts","../../../../projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.ts","../../../../projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html","../../../../projects/element-ng/toast-notification/si-toast-notification-drawer/si-toast-notification-drawer.component.ts","../../../../projects/element-ng/toast-notification/si-toast-notification-drawer/si-toast-notification-drawer.component.html","../../../../projects/element-ng/toast-notification/si-toast-notification.service.ts","../../../../projects/element-ng/toast-notification/index.ts","../../../../projects/element-ng/toast-notification/siemens-element-ng-toast-notification.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { StatusType } from '@siemens/element-ng/common';\nimport { Link } from '@siemens/element-ng/link';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Subject } from 'rxjs';\n\nexport interface SiToast {\n  state: ToastStateName;\n  title: TranslatableString;\n  message: TranslatableString;\n  disableManualClose?: boolean;\n  disableAutoClose?: boolean;\n  timeout?: number;\n  action?: Link;\n  close?: () => void;\n  translationParams?: { [key: string]: any };\n  hidden?: Subject<void>;\n  closeAriaLabel?: TranslatableString;\n}\n\nexport type ToastStateName = StatusType | 'connection';\n\nexport const SI_TOAST_AUTO_HIDE_DELAY = 6000;\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { animate, AnimationBuilder, style } from '@angular/animations';\nimport { NgClass } from '@angular/common';\nimport {\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport {\n  addIcons,\n  elementCancel,\n  SiIconNextComponent,\n  SiStatusIconComponent,\n  STATUS_ICON_CONFIG\n} from '@siemens/element-ng/icon';\nimport { SiLinkModule } from '@siemens/element-ng/link';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\nimport { SiToast } from '../si-toast.model';\n\n@Component({\n  selector: 'si-toast-notification',\n  imports: [NgClass, SiLinkModule, SiIconNextComponent, SiStatusIconComponent, SiTranslatePipe],\n  templateUrl: './si-toast-notification.component.html',\n  styleUrl: './si-toast-notification.component.scss'\n})\nexport class SiToastNotificationComponent implements OnChanges {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  readonly toast = input.required<SiToast>();\n\n  protected closeAriaLabel = t(() => $localize`:@@SI_TOAST.CLOSE:Close`);\n  protected readonly icons = addIcons({ elementCancel });\n  protected readonly status = computed(() => {\n    const toast = this.toast();\n    if (toast.state === 'connection') {\n      return 'danger';\n    } else {\n      return Object.keys(this.statusIcons).includes(toast.state) ? toast.state : 'info';\n    }\n  });\n  protected readonly statusColor = computed(() => this.statusIcons[this.status()].color);\n\n  private readonly autoCloseBar = viewChild.required<ElementRef<HTMLDivElement>>('autoCloseBar');\n\n  private animationBuilder = inject(AnimationBuilder);\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes?.toast.currentValue) {\n      const toast = this.toast();\n\n      if (!toast.disableAutoClose && toast.timeout) {\n        const animation = this.animationBuilder.build([\n          style({ width: '100%' }),\n          animate(toast.timeout, style({ width: '0%' }))\n        ]);\n        animation.create(this.autoCloseBar().nativeElement).play();\n      }\n\n      this.closeAriaLabel = this.toast().closeAriaLabel ?? this.closeAriaLabel;\n    }\n  }\n\n  protected close(): void {\n    this.toast().close!();\n  }\n}\n","<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"!toast().disableAutoClose\">\n  <div #autoCloseBar class=\"si-toast-timer-bar\"></div>\n  <div class=\"bar\" [ngClass]=\"statusColor()\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toast().title | translate: toast().translationParams }}</b></p\n    >\n    @if (toast().message) {\n      <p class=\"mt-4\">{{ toast().message | translate: toast().translationParams }}</p>\n    }\n    @if (toast().action) {\n      <p [class.mt-3]=\"toast().message\" [class.mt-4]=\"!toast().message\">\n        <a [siLink]=\"toast().action\">{{\n          toast().action!.title | translate: toast().translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (!toast().disableManualClose) {\n    <button\n      type=\"button\"\n      tabindex=\"0\"\n      class=\"btn btn-circle btn-sm btn-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel | translate\"\n      (keydown.enter)=\"close()\"\n      (click)=\"close()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { animate, style, transition, trigger } from '@angular/animations';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { areAnimationsDisabled } from '@siemens/element-ng/common';\nimport { Observable } from 'rxjs';\n\nimport { SiToastNotificationComponent } from '../si-toast-notification/si-toast-notification.component';\nimport { SiToast } from '../si-toast.model';\n\n@Component({\n  selector: 'si-toast-notification-drawer',\n  imports: [AsyncPipe, SiToastNotificationComponent],\n  templateUrl: './si-toast-notification-drawer.component.html',\n  // workaround for cdk-overlay not supporting the order of overlays\n  styles: `\n    ::ng-deep .cdk-global-overlay-wrapper:has(si-toast-notification-drawer) {\n      z-index: 2000;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'aria-live': 'polite'\n  },\n  animations: [\n    trigger('toastTrigger', [\n      transition(':enter', [\n        style({ opacity: 0, transform: 'translateY(100%)' }),\n        animate(\n          '500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          style({ opacity: 1, transform: 'translateY(0%)' })\n        )\n      ]),\n      transition(':leave', [\n        style({ 'opacity': 1, 'inset-inline-end': '0%' }),\n        animate('300ms', style({ 'opacity': 0, 'inset-inline-end': '-100%' }))\n      ])\n    ])\n  ]\n})\nexport class SiToastNotificationDrawerComponent {\n  readonly toasts = input<Observable<SiToast[]>>();\n\n  protected animationsDisabled = areAnimationsDisabled();\n}\n","@for (toast of toasts() | async; track toast) {\n  <si-toast-notification\n    @toastTrigger\n    class=\"position-relative\"\n    [toast]=\"toast\"\n    [@.disabled]=\"animationsDisabled\"\n  />\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ComponentRef, inject, Injectable, Injector, OnDestroy, PLATFORM_ID } from '@angular/core';\nimport { Link } from '@siemens/element-ng/link';\nimport { SiNoTranslateService, SiTranslateService } from '@siemens/element-translate-ng/translate';\nimport { ReplaySubject, Subject } from 'rxjs';\n\nimport { SiToastNotificationDrawerComponent } from './si-toast-notification-drawer/si-toast-notification-drawer.component';\nimport { SI_TOAST_AUTO_HIDE_DELAY, SiToast, ToastStateName } from './si-toast.model';\n\n@Injectable({ providedIn: 'root' })\nexport class SiToastNotificationService implements OnDestroy {\n  /**\n   * List of currently active toasts to see details or close them.\n   *\n   * @defaultValue []\n   */\n  activeToasts: SiToast[] = [];\n\n  private activeToastsSubject = new ReplaySubject<SiToast[]>(1);\n  private queuedToastSubject = new Subject<SiToast>();\n  private readonly maxToasts = 3;\n\n  private componentRef?: ComponentRef<SiToastNotificationDrawerComponent>;\n  private overlayRef?: OverlayRef;\n\n  private injector = inject(Injector);\n  private overlay = inject(Overlay);\n\n  constructor() {\n    const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n    this.queuedToastSubject.subscribe((toast: SiToast) => {\n      this.activeToasts.push(toast);\n      if (this.activeToasts.length > this.maxToasts) {\n        this.hideToastNotification(this.activeToasts[0]);\n      }\n      this.activeToastsSubject.next(this.activeToasts);\n      if (!toast.disableAutoClose && toast.timeout) {\n        setTimeout(() => this.hideToastNotification(toast), toast.timeout);\n      }\n    });\n\n    if (isBrowser) {\n      this.addToastDrawer();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.overlayRef?.dispose();\n    this.componentRef?.destroy();\n  }\n\n  /**\n   * Queue a new toast to be shown.\n   * @param action - Passing a Link object will optionally add a clickable link to the toast which can contain an action.\n   * @returns the toast object\n   */\n  queueToastNotification(\n    state: ToastStateName,\n    title: string,\n    message: string,\n    disableAutoClose?: boolean,\n    disableManualClose?: boolean,\n    action?: Link\n  ): SiToast {\n    const toast: SiToast = {\n      state,\n      title,\n      message,\n      disableAutoClose,\n      disableManualClose,\n      action,\n      hidden: new Subject()\n    };\n    return this.showToastNotification(toast);\n  }\n\n  /**\n   * Show a toast notification\n   * @param toast - The toast object of the toast to be shown, can also be constructed while calling this.\n   */\n  showToastNotification(toast: SiToast): SiToast {\n    toast.timeout ??= SI_TOAST_AUTO_HIDE_DELAY;\n    toast.hidden ??= new Subject();\n    toast.close = () => this.hideToastNotification(toast);\n    this.queuedToastSubject.next(toast);\n    return toast;\n  }\n\n  /**\n   * Hide a toast notification\n   * @param toast - The toast object of the toast to be hidden, can be retrieved from {@link activeToasts} and is returned by {@link queueToastNotification}.\n   */\n  hideToastNotification(toast?: SiToast): void {\n    const hiddenToasts: SiToast[] = [];\n    const activeToasts: SiToast[] = [];\n    this.activeToasts.forEach(item => {\n      if (!toast || item === toast) {\n        hiddenToasts.push(item);\n      } else {\n        activeToasts.push(item);\n      }\n    });\n\n    this.activeToasts = activeToasts;\n    this.activeToastsSubject.next(this.activeToasts);\n\n    hiddenToasts.forEach(item => {\n      item.hidden?.next();\n      item.hidden?.complete();\n    });\n  }\n\n  private addToastDrawer(): void {\n    this.overlayRef = this.overlay.create({\n      positionStrategy: this.overlay.position().global().end('20px').bottom()\n    });\n    const portal = new ComponentPortal(\n      SiToastNotificationDrawerComponent,\n      null,\n      this.buildInjector()\n    );\n    this.componentRef = this.overlayRef.attach(portal);\n    this.componentRef.setInput('toasts', this.activeToastsSubject);\n  }\n\n  // TODO remove once translation must be defined at application start\n  // Notification service is provided in 'root'. If no translation is defined, SiNoTranslateService is not provided\n  private buildInjector(): Injector {\n    let injector = this.injector;\n    if (!injector.get(SiTranslateService, null)) {\n      injector = Injector.create({\n        providers: [{ provide: SiTranslateService, useClass: SiNoTranslateService, deps: [] }],\n        parent: this.injector\n      });\n    }\n    return injector;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-toast.model';\nexport * from './si-toast-notification.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-tooltip.mjs

@@ -14,6 +14,7 @@ class TooltipComponent {
     arrowPos = signal(undefined);
     /** @internal */
     id = input('');
+    tooltipContext = input();
     elementRef = inject(ElementRef);
     tooltipText = computed(() => {
         const tooltip = this.tooltip();
@@ -37,12 +38,12 @@ class TooltipComponent {
         const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);
         this.arrowPos.set(arrowPos);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TooltipComponent, isStandalone: true, selector: "si-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"id()\"\n  [ngClass]=\"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-2\">{{ tooltipText() | translate }}</div>\n    } @else if (tooltipTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"tooltipTemplate()\" />\n    } @else if (tooltipComponent()) {\n      <ng-container [ngComponentOutlet]=\"tooltipComponent()\" />\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TooltipComponent, isStandalone: true, selector: "si-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tooltipContext: { classPropertyName: "tooltipContext", publicName: "tooltipContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"id()\"\n  [ngClass]=\"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-2\">{{ 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tooltip', imports: [NgClass, NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet], template: "<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"id()\"\n  [ngClass]=\"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-2\">{{ tooltipText() | translate }}</div>\n    } @else if (tooltipTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"tooltipTemplate()\" />\n    } @else if (tooltipComponent()) {\n      <ng-container [ngComponentOutlet]=\"tooltipComponent()\" />\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'si-tooltip', imports: [NgClass, NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet], template: "<div\n  class=\"tooltip show position-relative\"\n  role=\"tooltip\"\n  [id]=\"id()\"\n  [ngClass]=\"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-2\">{{ 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" }]
         }] });
 
 /**
@@ -66,7 +67,7 @@ class TooltipRef {
         this.describedBy = describedBy;
         this.injector = injector;
     }
-    show(content) {
+    show(content, tooltipContext) {
         if (this.overlayRef.hasAttached()) {
             return;
         }
@@ -74,6 +75,7 @@ class TooltipRef {
         const tooltipRef = this.overlayRef.attach(toolTipPortal);
         tooltipRef.setInput('tooltip', content);
         tooltipRef.setInput('id', this.describedBy);
+        tooltipRef.setInput('tooltipContext', tooltipContext);
         const positionStrategy = getPositionStrategy(this.overlayRef);
         positionStrategy?.positionChanges.subscribe(change => tooltipRef.instance.updateTooltipPosition(change, this.element));
     }
@@ -97,10 +99,10 @@ class SiTooltipService {
     createTooltip(config) {
         return new TooltipRef(getOverlay(config.element, this.overlay, false, config.placement), config.element, config.describedBy, config.injector);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTooltipService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTooltipService, decorators: [{
             type: Injectable
         }] });
 
@@ -132,6 +134,10 @@ class SiTooltipDirective {
      * @defaultValue false
      */
     isDisabled = input(false, { transform: booleanAttribute });
+    /**
+     * The context for the attached template
+     */
+    tooltipContext = input();
     describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;
     tooltipRef;
     tooltipService = inject(SiTooltipService);
@@ -152,7 +158,7 @@ class SiTooltipDirective {
             element: this.elementRef,
             placement: this.placement()
         });
-        this.tooltipRef.show(this.siTooltip());
+        this.tooltipRef.show(this.siTooltip(), this.tooltipContext());
     }
     focusIn() {
         this.showTooltip();
@@ -173,10 +179,10 @@ class SiTooltipDirective {
         }
         this.hide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", 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 }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focusIn()", "mouseenter": "show()", "touchstart": "hide()", "focusout": "hide()", "mouseleave": "mouseOut()" }, properties: { "attr.aria-describedby": "describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", 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 }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipContext: { classPropertyName: "tooltipContext", publicName: "tooltipContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focusIn()", "mouseenter": "show()", "touchstart": "hide()", "focusout": "hide()", "mouseleave": "mouseOut()" }, properties: { "attr.aria-describedby": "describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siTooltip]',
@@ -207,11 +213,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiTooltipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipModule, imports: [SiTooltipDirective], exports: [SiTooltipDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiTooltipModule, imports: [SiTooltipDirective], exports: [SiTooltipDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTooltipModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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.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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport { NgClass, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  TemplateRef,\n  Type\n} from '@angular/core';\nimport { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-tooltip',\n  imports: [NgClass, NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet],\n  templateUrl: './si-tooltip.component.html'\n})\nexport class TooltipComponent {\n  /** @defaultValue '' */\n  readonly tooltip = input<TranslatableString | TemplateRef<any> | Type<any>>('');\n\n  protected readonly tooltipPositionClass = signal('');\n  protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n  /** @internal */\n  readonly id = input('');\n\n  private elementRef = inject(ElementRef);\n\n  protected readonly tooltipText = computed<string | null>(() => {\n    const tooltip = this.tooltip();\n    return typeof tooltip === 'string' ? tooltip : 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) && 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]=\"id()\"\n  [ngClass]=\"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-2\">{{ tooltipText() | translate }}</div>\n    } @else if (tooltipTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"tooltipTemplate()\" />\n    } @else if (tooltipComponent()) {\n      <ng-container [ngComponentOutlet]=\"tooltipComponent()\" />\n    }\n  </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {\n  ComponentRef,\n  ElementRef,\n  inject,\n  Injectable,\n  Injector,\n  TemplateRef,\n  Type\n} from '@angular/core';\nimport { getOverlay, getPositionStrategy, positions } from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { TooltipComponent } from './si-tooltip.component';\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 describedBy: string,\n    private injector?: Injector\n  ) {}\n\n  show(content: TranslatableString | TemplateRef<any> | Type<any>): 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    tooltipRef.setInput('tooltip', content);\n    tooltipRef.setInput('id', this.describedBy);\n\n    const positionStrategy = getPositionStrategy(this.overlayRef);\n    positionStrategy?.positionChanges.subscribe(change =>\n      tooltipRef.instance.updateTooltipPosition(change, this.element)\n    );\n  }\n\n  hide(): void {\n    this.overlayRef.detach();\n  }\n\n  destroy(): void {\n    this.overlayRef.dispose();\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  }): TooltipRef {\n    return new TooltipRef(\n      getOverlay(config.element, this.overlay, false, config.placement),\n      config.element,\n      config.describedBy,\n      config.injector\n    );\n  }\n}\n\nexport type { TooltipRef };\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  Directive,\n  ElementRef,\n  HostListener,\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';\nimport { Subject } from 'rxjs';\n\nimport { SiTooltipService, TooltipRef } from './si-tooltip.service';\n\n@Directive({\n  selector: '[siTooltip]',\n  providers: [SiTooltipService],\n  host: {\n    '[attr.aria-describedby]': '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   * The trigger event on which the tooltip shall be displayed\n   */\n  readonly triggers = input<'' | 'focus'>();\n\n  /**\n   * Allows the tooltip to be disabled\n   *\n   * @defaultValue false\n   */\n  readonly isDisabled = input(false, { transform: booleanAttribute });\n\n  protected describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;\n\n  private tooltipRef?: TooltipRef;\n  private tooltipService = inject(SiTooltipService);\n  private elementRef = inject(ElementRef);\n  private destroyer = new Subject<void>();\n\n  ngOnDestroy(): void {\n    this.tooltipRef?.destroy();\n    this.destroyer.next();\n    this.destroyer.complete();\n  }\n\n  private showTooltip(): void {\n    const siTooltip = this.siTooltip();\n    if (this.isDisabled() || !siTooltip) {\n      return;\n    }\n    this.tooltipRef ??= this.tooltipService.createTooltip({\n      describedBy: this.describedBy,\n      element: this.elementRef,\n      placement: this.placement()\n    });\n    this.tooltipRef.show(this.siTooltip());\n  }\n\n  @HostListener('focus')\n  protected focusIn(): void {\n    this.showTooltip();\n  }\n\n  @HostListener('mouseenter')\n  protected show(): void {\n    if (this.triggers() === 'focus') {\n      return;\n    }\n    this.showTooltip();\n  }\n\n  @HostListener('touchstart')\n  @HostListener('focusout')\n  protected hide(): void {\n    this.tooltipRef?.hide();\n    this.destroyer.next();\n  }\n\n  @HostListener('mouseleave')\n  protected mouseOut(): void {\n    if (this.triggers() === 'focus') {\n      return;\n    }\n    this.hide();\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\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 - 2025\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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport { NgClass, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  TemplateRef,\n  Type\n} from '@angular/core';\nimport { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-tooltip',\n  imports: [NgClass, NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet],\n  templateUrl: './si-tooltip.component.html'\n})\nexport class TooltipComponent {\n  /** @defaultValue '' */\n  readonly tooltip = input<TranslatableString | TemplateRef<any> | Type<any>>('');\n\n  protected readonly tooltipPositionClass = signal('');\n  protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n  /** @internal */\n  readonly id = input('');\n  readonly tooltipContext = input();\n\n  private elementRef = inject(ElementRef);\n\n  protected readonly tooltipText = computed<string | null>(() => {\n    const tooltip = this.tooltip();\n    return typeof tooltip === 'string' ? tooltip : 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) && 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]=\"id()\"\n  [ngClass]=\"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-2\">{{ 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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {\n  ComponentRef,\n  ElementRef,\n  inject,\n  Injectable,\n  Injector,\n  TemplateRef,\n  Type\n} from '@angular/core';\nimport { getOverlay, getPositionStrategy, positions } from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { TooltipComponent } from './si-tooltip.component';\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 describedBy: string,\n    private injector?: Injector\n  ) {}\n\n  show(content: TranslatableString | TemplateRef<any> | Type<any>, tooltipContext?: unknown): 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    tooltipRef.setInput('tooltip', content);\n    tooltipRef.setInput('id', this.describedBy);\n    tooltipRef.setInput('tooltipContext', tooltipContext);\n\n    const positionStrategy = getPositionStrategy(this.overlayRef);\n    positionStrategy?.positionChanges.subscribe(change =>\n      tooltipRef.instance.updateTooltipPosition(change, this.element)\n    );\n  }\n\n  hide(): void {\n    this.overlayRef.detach();\n  }\n\n  destroy(): void {\n    this.overlayRef.dispose();\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  }): TooltipRef {\n    return new TooltipRef(\n      getOverlay(config.element, this.overlay, false, config.placement),\n      config.element,\n      config.describedBy,\n      config.injector\n    );\n  }\n}\n\nexport type { TooltipRef };\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  Directive,\n  ElementRef,\n  HostListener,\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';\nimport { Subject } from 'rxjs';\n\nimport { SiTooltipService, TooltipRef } from './si-tooltip.service';\n\n@Directive({\n  selector: '[siTooltip]',\n  providers: [SiTooltipService],\n  host: {\n    '[attr.aria-describedby]': '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   * The trigger event on which the tooltip shall be displayed\n   */\n  readonly triggers = input<'' | 'focus'>();\n\n  /**\n   * Allows the tooltip to be disabled\n   *\n   * @defaultValue false\n   */\n  readonly isDisabled = input(false, { transform: booleanAttribute });\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  private destroyer = new Subject<void>();\n\n  ngOnDestroy(): void {\n    this.tooltipRef?.destroy();\n    this.destroyer.next();\n    this.destroyer.complete();\n  }\n\n  private showTooltip(): void {\n    const siTooltip = this.siTooltip();\n    if (this.isDisabled() || !siTooltip) {\n      return;\n    }\n    this.tooltipRef ??= this.tooltipService.createTooltip({\n      describedBy: this.describedBy,\n      element: this.elementRef,\n      placement: this.placement()\n    });\n    this.tooltipRef.show(this.siTooltip(), this.tooltipContext());\n  }\n\n  @HostListener('focus')\n  protected focusIn(): void {\n    this.showTooltip();\n  }\n\n  @HostListener('mouseenter')\n  protected show(): void {\n    if (this.triggers() === 'focus') {\n      return;\n    }\n    this.showTooltip();\n  }\n\n  @HostListener('touchstart')\n  @HostListener('focusout')\n  protected hide(): void {\n    this.tooltipRef?.hide();\n    this.destroyer.next();\n  }\n\n  @HostListener('mouseleave')\n  protected mouseOut(): void {\n    if (this.triggers() === 'focus') {\n      return;\n    }\n    this.hide();\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\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 - 2025\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,16 +1,16 @@
 import { Overlay, OverlayOutsideClickDispatcher, FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { DOCUMENT, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, ChangeDetectionStrategy, Component, ElementRef, viewChild, HostListener, Injector, Injectable } from '@angular/core';
+import { InjectionToken, inject, signal, ChangeDetectionStrategy, Component, ElementRef, viewChild, DOCUMENT, HostListener, Injector, Injectable } from '@angular/core';
 import { isRTL, calculateOverlayArrowPosition, makePositionStrategy, makeOverlay } from '@siemens/element-ng/common';
 import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
 import { Subject, merge, throttleTime, map, tap } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import { NgClass } from '@angular/common';
 import { addIcons, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
 const SI_TOUR_TOKEN = new InjectionToken('SI_TOUR_TOKEN');
 
@@ -37,10 +37,10 @@ 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: "19.0.6", ngImport: i0, type: SiTourHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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: "20.0.6", ngImport: i0, type: SiTourHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTourHighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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"] }]
         }], ctorParameters: () => [] });
@@ -56,12 +56,12 @@ class SiTourComponent {
     show = signal(false);
     icons = addIcons({ elementCancel });
     tourToken = inject(SI_TOUR_TOKEN);
-    backText = $localize `:@@SI_TOUR.BACK:Back`;
-    nextText = $localize `:@@SI_TOUR.NEXT:Next`;
-    skipText = $localize `:@@SI_TOUR.SKIP:Skip tour`;
-    doneText = $localize `:@@SI_TOUR.DONE:Done`;
-    ariaLabelClose = $localize `:@@SI_TOUR.CLOSE:Close`;
-    progressText = $localize `:@@SI_TOUR.PROGRESS: {{step}} of {{total}}`;
+    backText = t(() => $localize `:@@SI_TOUR.BACK:Back`);
+    nextText = t(() => $localize `:@@SI_TOUR.NEXT:Next`);
+    skipText = t(() => $localize `:@@SI_TOUR.SKIP:Skip tour`);
+    doneText = t(() => $localize `:@@SI_TOUR.DONE:Done`);
+    ariaLabelClose = t(() => $localize `:@@SI_TOUR.CLOSE:Close`);
+    progressText = t(() => $localize `:@@SI_TOUR.PROGRESS: {{step}} of {{total}}`);
     elementRef = inject(ElementRef);
     subscription;
     prevFocus = null;
@@ -121,13 +121,13 @@ 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: "19.0.6", ngImport: i0, type: SiTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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  class=\"tour-content popover position-relative\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class.show]=\"show()\"\n  [ngClass]=\"positionClass()\"\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-2 text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-title-1 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-sm btn-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon-next [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body-2 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:100vw;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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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  class=\"tour-content popover position-relative\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class.show]=\"show()\"\n  [ngClass]=\"positionClass()\"\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-2 text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-title-1 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-sm btn-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon-next [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body-2 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:100vw;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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTourComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTourComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-tour', imports: [A11yModule, NgClass, SiIconNextComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.data-step-id]': 'step()?.step.id'
+                        '[attr.data-step-id]': 'step()?.step?.id'
                     }, template: "<div class=\"backdrop\"></div>\n<div\n  #focusTrap=\"cdkTrapFocus\"\n  class=\"tour-content popover position-relative\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class.show]=\"show()\"\n  [ngClass]=\"positionClass()\"\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-2 text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-title-1 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-sm btn-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon-next [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body-2 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:100vw;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: { keyListener: [{
                 type: HostListener,
@@ -362,10 +362,10 @@ class SiTourService {
         this.overlayRefHighlight?.dispose();
         this.overlayRefHighlight = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTourService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTourService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTourService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTourService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTourService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTourService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });