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

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

@@ -1,13 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, signal, ChangeDetectionStrategy, Component, viewChild, computed, ContentChildren, NgModule } from '@angular/core';
+import { input, booleanAttribute, output, signal, ChangeDetectionStrategy, Component, viewChild, contentChildren, linkedSignal, computed, untracked, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { WebComponentContentChildren } from '@siemens/element-ng/common';
 import { addIcons, elementWarningFilled, elementRadioChecked, elementRight4, elementNotChecked, elementLeft4, elementCheckedFilled, elementChecked, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
 import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -30,41 +28,34 @@ class SiWizardStepComponent {
      * @defaultValue false
      */
     isActive = signal(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiWizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiWizardStepComponent, isStandalone: true, selector: "si-wizard-step", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isNextNavigable: { classPropertyName: "isNextNavigable", publicName: "isNextNavigable", isSignal: true, isRequired: false, transformFunction: null }, failed: { classPropertyName: "failed", publicName: "failed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { next: "next", back: "back", save: "save" }, ngImport: i0, template: "@if (isActive()) {\n  <div class=\"h-100\">\n    <ng-content />\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiWizardStepComponent, isStandalone: true, selector: "si-wizard-step", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isNextNavigable: { classPropertyName: "isNextNavigable", publicName: "isNextNavigable", isSignal: true, isRequired: false, transformFunction: null }, failed: { classPropertyName: "failed", publicName: "failed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { next: "next", back: "back", save: "save" }, ngImport: i0, template: "@if (isActive()) {\n  <div class=\"h-100\">\n    <ng-content />\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiWizardStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWizardStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-wizard-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isActive()) {\n  <div class=\"h-100\">\n    <ng-content />\n  </div>\n}\n" }]
         }] });
 
 class SiWizardComponent {
-    wizardSteps;
     containerSteps = viewChild('containerSteps');
     /**
      * Description of back button.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_WIZARD.BACK:Back`
+     * t(() => $localize`:@@SI_WIZARD.BACK:Back`)
      * ```
      */
-    backText = input($localize `:@@SI_WIZARD.BACK:Back`);
+    backText = input(t(() => $localize `:@@SI_WIZARD.BACK:Back`));
     /**
      * Description of next button.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_WIZARD.NEXT:Next`
+     * t(() => $localize`:@@SI_WIZARD.NEXT:Next`)
      * ```
      */
-    nextText = input($localize `:@@SI_WIZARD.NEXT:Next`);
-    /**
-     * @deprecated Use {@link hideNavigation} instead.
-     *
-     * @defaultValue true
-     */
-    hasNavigation = input(true, { transform: booleanAttribute });
+    nextText = input(t(() => $localize `:@@SI_WIZARD.NEXT:Next`));
     /**
      * Hide the navigation buttons previous/next.
      *
@@ -76,10 +67,10 @@ class SiWizardComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_WIZARD.SAVE:Save`
+     * t(() => $localize`:@@SI_WIZARD.SAVE:Save`)
      * ```
      */
-    saveText = input($localize `:@@SI_WIZARD.SAVE:Save`);
+    saveText = input(t(() => $localize `:@@SI_WIZARD.SAVE:Save`));
     /**
      * Hide the save button.
      *
@@ -91,19 +82,19 @@ class SiWizardComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_WIZARD.COMPLETED:Wizard completed!`
+     * t(() => $localize`:@@SI_WIZARD.COMPLETED:Wizard completed!`)
      * ```
      */
-    completionText = input($localize `:@@SI_WIZARD.COMPLETED:Wizard completed!`);
+    completionText = input(t(() => $localize `:@@SI_WIZARD.COMPLETED:Wizard completed!`));
     /**
      * Description of cancel button.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_WIZARD.CANCEL:Cancel`
+     * t(() => $localize`:@@SI_WIZARD.CANCEL:Cancel`)
      * ```
      */
-    cancelText = input($localize `:@@SI_WIZARD.CANCEL:Cancel`);
+    cancelText = input(t(() => $localize `:@@SI_WIZARD.CANCEL:Cancel`));
     /**
      * Show the cancel button
      *
@@ -155,9 +146,9 @@ class SiWizardComponent {
     /**
      * Set false to show navigation buttons in footer instead of inline.
      *
-     * @defaultValue true
+     * @defaultValue false
      */
-    inlineNavigation = input(true, { transform: booleanAttribute });
+    inlineNavigation = input(false, { transform: booleanAttribute });
     /**
      * Use number representation for steps.
      *
@@ -178,33 +169,42 @@ class SiWizardComponent {
     completionAction = output();
     /** Callback function triggered if the wizard has been canceled. */
     wizardCancel = output();
-    /**
-     * Callback function triggered if the wizard has been canceled.
-     * @deprecated use {@link wizardCancel} instead
-     */
-    cancel = this.wizardCancel;
     /** Get the current step wizard step index. */
     get index() {
         return this._index();
     }
     /** Get number of wizard steps. */
     get stepCount() {
-        return this.steps.length;
+        return this.steps().length;
     }
     /** Get current visible wizard step. */
     get currentStep() {
         return this._currentStep();
     }
-    steps = [];
-    visibleSteps = 0;
+    steps = contentChildren(SiWizardStepComponent);
+    visibleSteps = linkedSignal(() => this.calculateVisibleStepCount());
     showCompletionPage = signal(false);
     /** The list of visible steps. */
-    activeSteps = signal([]);
-    shouldHideNavigation = computed(() => {
-        return this.hideNavigation() || !this.hasNavigation();
+    activeSteps = computed(() => this.computeVisibleSteps());
+    _index = linkedSignal(() => {
+        const currentStep = this._currentStep();
+        const currentStepIndex = currentStep ? this.steps().indexOf(currentStep) : 0;
+        return currentStepIndex < 0 ? 0 : currentStepIndex;
+    });
+    _currentStep = linkedSignal(() => {
+        const steps = this.steps();
+        const currentActive = steps.find(step => step.isActive());
+        if (currentActive) {
+            return currentActive;
+        }
+        else if (steps.length) {
+            untracked(() => steps[0].isActive.set(true));
+            return steps[0];
+        }
+        else {
+            return undefined;
+        }
     });
-    _index = signal(0);
-    _currentStep = signal(undefined);
     icons = addIcons({
         elementCancel,
         elementChecked,
@@ -215,37 +215,6 @@ class SiWizardComponent {
         elementRadioChecked,
         elementWarningFilled
     });
-    destroyer = new Subject();
-    ngAfterContentInit() {
-        this.updateSteps();
-        this._currentStep.set(this.steps[0]);
-        queueMicrotask(() => {
-            if (this.steps.length > 0) {
-                this.steps[0].isActive.set(true);
-            }
-        });
-        this.wizardSteps.changes.pipe(takeUntil(this.destroyer)).subscribe(() => {
-            this.updateSteps();
-            if (!this.wizardSteps.some(step => step === this.currentStep)) {
-                this._currentStep.set(this.wizardSteps.first);
-                this._index.set(0);
-            }
-            else {
-                const updatedIndex = this.currentStep ? this.steps.indexOf(this.currentStep) : 0;
-                this._index.set(updatedIndex);
-            }
-            queueMicrotask(() => {
-                if (this.currentStep) {
-                    this.activate(this.currentStep);
-                }
-                this.calculateNumberOfVisibleSteps();
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.destroyer.next();
-        this.destroyer.complete();
-    }
     canActivate(stepIndex) {
         if (stepIndex < 0) {
             return false;
@@ -260,7 +229,7 @@ class SiWizardComponent {
         }
         // Fast-forward: check all steps if they are valid
         for (let i = this.index; i < stepIndex; i++) {
-            const theStep = this.steps[i];
+            const theStep = this.steps()[i];
             if (!theStep.isValid()) {
                 return false;
             }
@@ -307,11 +276,12 @@ class SiWizardComponent {
      * @param delta - optional number of steps to move forward.
      */
     next(delta = 1) {
-        if (this.index === this.steps.length) {
+        const steps = this.steps();
+        if (this.index === steps.length - 1) {
             return;
         }
         const stepIndex = this.index + delta;
-        const nextStep = this.steps[stepIndex];
+        const nextStep = steps[stepIndex];
         if (this.canActivate(stepIndex)) {
             this.currentStep?.next.emit();
             if (this.currentStep?.isNextNavigable()) {
@@ -328,7 +298,7 @@ class SiWizardComponent {
             return;
         }
         this.currentStep?.back.emit();
-        this.activate(this.steps[this.index - delta]);
+        this.activate(this.steps()[this.index - delta]);
     }
     /** Triggers the save action to complete the wizard. */
     save() {
@@ -357,65 +327,65 @@ class SiWizardComponent {
         }
         step.isActive.set(true);
         this._currentStep.set(step);
-        this._index.set(this.steps.indexOf(step));
-        this.updateVisibleSteps();
+        this._index.set(this.steps().indexOf(step));
     }
-    calculateNumberOfVisibleSteps() {
+    updateVisibleSteps() {
+        const newVisibleSteps = this.calculateVisibleStepCount();
+        if (newVisibleSteps !== this.visibleSteps()) {
+            this.visibleSteps.set(newVisibleSteps);
+        }
+    }
+    calculateVisibleStepCount() {
         const containerSteps = this.containerSteps();
         if (!containerSteps) {
-            return;
+            return 0;
         }
         if (this.verticalLayout()) {
             const computedStyle = getComputedStyle(containerSteps.nativeElement);
             const clientHeight = containerSteps.nativeElement.clientHeight -
                 parseInt(computedStyle.paddingBlockStart) -
                 parseInt(computedStyle.paddingBlockEnd);
-            this.visibleSteps = Math.max(Math.floor(clientHeight / 48), 1);
+            return Math.max(Math.floor(clientHeight / 48), 1);
         }
         else {
             const clientWidth = containerSteps.nativeElement.clientWidth;
-            this.visibleSteps = Math.max(Math.floor(clientWidth / 150), 1);
+            return Math.max(Math.floor(clientWidth / 150), 1);
         }
-        this.updateVisibleSteps();
     }
-    updateSteps() {
-        this.steps = this.wizardSteps.toArray();
-        this.updateVisibleSteps();
-    }
-    updateVisibleSteps() {
-        const create = (index) => ({ index, step: this.steps[index] });
-        if (this.steps.length === 0) {
-            this.activeSteps.set([]);
+    computeVisibleSteps() {
+        const create = (index) => ({ index, step: this.steps()[index] });
+        if (this.steps().length === 0) {
+            return [];
         }
-        else if (this.visibleSteps <= 1) {
-            this.activeSteps.set([create(this.index)]);
+        else if (this.visibleSteps() <= 1) {
+            return [create(this.index)];
         }
-        else if (this.stepCount <= this.visibleSteps) {
-            this.activeSteps.set(this.steps.map((_, i) => create(i)));
+        else if (this.stepCount <= this.visibleSteps()) {
+            return this.steps().map((_, i) => create(i));
         }
         else {
             const steps = [this.index];
-            for (let i = 1, left = this.index - 1, right = this.index + 1; i < this.visibleSteps; right++, left--) {
+            for (let i = 1, left = this.index - 1, right = this.index + 1; i < this.visibleSteps(); right++, left--) {
                 // Iterate in both directions to check current step is in visible range.
                 if (right < this.stepCount) {
                     steps.push(right);
                     i++;
                 }
-                if (left >= 0 && i < this.visibleSteps) {
+                if (left >= 0 && i < this.visibleSteps()) {
                     steps.push(left);
                     i++;
                 }
             }
-            this.activeSteps.set(steps.sort((l, r) => l - r).map(i => create(i)));
+            return steps.sort((l, r) => l - r).map(i => create(i));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiWizardComponent, isStandalone: true, selector: "si-wizard", inputs: { backText: { classPropertyName: "backText", publicName: "backText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, hasNavigation: { classPropertyName: "hasNavigation", publicName: "hasNavigation", isSignal: true, isRequired: false, transformFunction: null }, hideNavigation: { classPropertyName: "hideNavigation", publicName: "hideNavigation", isSignal: true, isRequired: false, transformFunction: null }, saveText: { classPropertyName: "saveText", publicName: "saveText", isSignal: true, isRequired: false, transformFunction: null }, hideSave: { classPropertyName: "hideSave", publicName: "hideSave", isSignal: true, isRequired: false, transformFunction: null }, completionText: { classPropertyName: "completionText", publicName: "completionText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, hasCancel: { classPropertyName: "hasCancel", publicName: "hasCancel", isSignal: true, isRequired: false, transformFunction: null }, enableCompletionPage: { classPropertyName: "enableCompletionPage", publicName: "enableCompletionPage", isSignal: true, isRequired: false, transformFunction: null }, completionPageVisibleTime: { classPropertyName: "completionPageVisibleTime", publicName: "completionPageVisibleTime", isSignal: true, isRequired: false, transformFunction: null }, stepIcon: { classPropertyName: "stepIcon", publicName: "stepIcon", isSignal: true, isRequired: false, transformFunction: null }, stepActiveIcon: { classPropertyName: "stepActiveIcon", publicName: "stepActiveIcon", isSignal: true, isRequired: false, transformFunction: null }, stepCompletedIcon: { classPropertyName: "stepCompletedIcon", publicName: "stepCompletedIcon", isSignal: true, isRequired: false, transformFunction: null }, stepFailedIcon: { classPropertyName: "stepFailedIcon", publicName: "stepFailedIcon", isSignal: true, isRequired: false, transformFunction: null }, verticalLayout: { classPropertyName: "verticalLayout", publicName: "verticalLayout", isSignal: true, isRequired: false, transformFunction: null }, inlineNavigation: { classPropertyName: "inlineNavigation", publicName: "inlineNavigation", isSignal: true, isRequired: false, transformFunction: null }, showStepNumbers: { classPropertyName: "showStepNumbers", publicName: "showStepNumbers", isSignal: true, isRequired: false, transformFunction: null }, showVerticalDivider: { classPropertyName: "showVerticalDivider", publicName: "showVerticalDivider", isSignal: true, isRequired: false, transformFunction: null }, verticalMinSize: { classPropertyName: "verticalMinSize", publicName: "verticalMinSize", isSignal: true, isRequired: false, transformFunction: null }, verticalMaxSize: { classPropertyName: "verticalMaxSize", publicName: "verticalMaxSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completionAction: "completionAction", wizardCancel: "wizardCancel" }, host: { properties: { "class.vertical": "verticalLayout()", "style.--wizard-vertical-min-size": "verticalMinSize()", "style.--wizard-vertical-max-size": "verticalMaxSize()" }, classAttribute: "py-6 px-8 d-flex flex-column" }, queries: [{ propertyName: "wizardSteps", predicate: SiWizardStepComponent }], viewQueries: [{ propertyName: "containerSteps", first: true, predicate: ["containerSteps"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!showCompletionPage()) {\n  @if (!verticalLayout()) {\n    <div class=\"container-wizard\" [class.justify-content-center]=\"!inlineNavigation()\">\n      @if (inlineNavigation()) {\n        <ng-container *ngTemplateOutlet=\"cancelBtnHorizontal\" />\n        <ng-container *ngTemplateOutlet=\"backBtnHorizontal\" />\n      }\n      <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n      @if (inlineNavigation()) {\n        <ng-container *ngTemplateOutlet=\"nextBtnHorizontal\" />\n      }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"stepContent\" />\n    @if (inlineNavigation()) {\n      <ng-container *ngTemplateOutlet=\"saveBtn\" />\n    } @else {\n      <ng-container *ngTemplateOutlet=\"footer\" />\n    }\n  } @else {\n    @if (showVerticalDivider()) {\n      <div class=\"container-wizard vertical\">\n        <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n        <div class=\"vertical-divider\"></div>\n        <div class=\"d-flex flex-column w-100\">\n          <div class=\"steps-content\">\n            <ng-container *ngTemplateOutlet=\"stepContent\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"footer\" />\n        </div>\n      </div>\n    } @else {\n      <div class=\"container-wizard vertical\">\n        <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n        <div class=\"steps-content\">\n          <ng-container *ngTemplateOutlet=\"stepContent\" />\n        </div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"footer\" />\n    }\n  }\n} @else {\n  <div class=\"text-center\">\n    <si-icon-next class=\"completion-icon-size text-success\" [icon]=\"icons.elementChecked\" />\n    <p class=\"si-title-1\"> {{ completionText() | translate }}</p>\n  </div>\n}\n\n<ng-template #stepsTemplate>\n  <div\n    #containerSteps\n    class=\"container-steps\"\n    [class.vertical]=\"verticalLayout()\"\n    [class.mx-4]=\"inlineNavigation()\"\n    [class.mt-4]=\"!verticalLayout() && inlineNavigation()\"\n    (siResizeObserver)=\"calculateNumberOfVisibleSteps()\"\n  >\n    @for (item of activeSteps(); track item.index) {\n      <div class=\"step\">\n        <div\n          class=\"line previous\"\n          [class.dashed]=\"$first && item.index > 0\"\n          [class.vertical]=\"verticalLayout()\"\n          [class.spacer]=\"$first && item.index === 0\"\n          [ngClass]=\"getStateClass(item.index)\"\n        ></div>\n        <a\n          class=\"focus-none\"\n          [ngClass]=\"getStateClass(item.index)\"\n          [attr.aria-current]=\"getAriaCurrent(item.index)\"\n          [attr.href]=\"!canActivate(item.index) || !currentStep?.isNextNavigable() ? null : '#'\"\n          (click)=\"activateStep($event, item.index)\"\n        >\n          @if (showStepNumbers() && !item.step.failed()) {\n            <div\n              class=\"step-icon number-step d-flex justify-content-center align-items-center px-1\"\n            >\n              <div class=\"circle\" [class.status-warning]=\"item.step.failed()\">\n                <span class=\"si-title-2 px-2\" [class.completed-color]=\"item.index < index\">\n                  {{ item.index + 1 }}\n                </span>\n              </div>\n            </div>\n          } @else {\n            <si-icon-next\n              class=\"icon step-icon\"\n              [class.status-warning]=\"item.step.failed()\"\n              [icon]=\"getState(item.step!, item.index)\"\n            />\n          }\n          <div\n            class=\"title si-title-2\"\n            [class.text-center]=\"!verticalLayout()\"\n            [class.px-6]=\"!verticalLayout()\"\n            [attr.aria-disabled]=\"getAriaDisabled(item.index)\"\n            >{{ item.step.heading() | translate }}</div\n          >\n        </a>\n        @if (item.index + 1 < stepCount) {\n          <div\n            class=\"line\"\n            [class.vertical]=\"verticalLayout()\"\n            [ngClass]=\"getStateClass(item.index + 1)\"\n            [class.dashed]=\"$last\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #stepContent>\n  <div [class.flex-grow-1]=\"!verticalLayout()\" [class.h-100]=\"verticalLayout()\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-template #cancelBtnHorizontal>\n  @if (hasCancel()) {\n    <div class=\"me-7\">\n      <div class=\"wizard-btn-container\" (click)=\"wizardCancel.emit()\">\n        <button\n          type=\"button\"\n          class=\"btn btn-sm btn-circle btn-secondary mt-2 mb-4\"\n          [attr.aria-label]=\"cancelText() | translate\"\n        >\n          <si-icon-next [icon]=\"icons.elementCancel\" />\n        </button>\n        <div class=\"si-title-2 text-primary\">{{ cancelText() | translate }}</div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #footer>\n  <div class=\"wizard-footer pt-6\">\n    <div class=\"wizard-footer-inner\" [class.ms-6]=\"showVerticalDivider()\">\n      @if (hasCancel()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          [attr.aria-label]=\"cancelText() | translate\"\n          (click)=\"wizardCancel.emit()\"\n        >\n          {{ cancelText() | translate }}\n        </button>\n      }\n      @if (!shouldHideNavigation()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [class.d-none]=\"index === 0\"\n          [class.end]=\"index !== 0\"\n          [attr.aria-label]=\"backText() | translate\"\n          (click)=\"back(1)\"\n        >\n          {{ backText() | translate }}\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          [attr.aria-label]=\"nextText() | translate\"\n          [disabled]=\"!currentStep?.isValid()\"\n          [class.d-none]=\"index === steps.length - 1\"\n          [class.end]=\"index === 0\"\n          (click)=\"next(1)\"\n        >\n          {{ nextText() | translate }}\n        </button>\n      }\n\n      @if (!hideSave()) {\n        @if (index === steps.length - 1) {\n          <button\n            type=\"button\"\n            class=\"btn btn-primary save\"\n            [disabled]=\"!currentStep?.isValid() || !currentStep?.isNextNavigable()\"\n            (click)=\"save()\"\n            >{{ saveText() | translate }}</button\n          >\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #backBtnHorizontal>\n  <div class=\"wizard-btn-container\">\n    @if (!shouldHideNavigation()) {\n      <div class=\"back\" [class.invisible]=\"index === 0\" (click)=\"back(1)\">\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary btn-circle mb-2\"\n          [attr.aria-label]=\"backText() | translate\"\n        >\n          <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n        </button>\n        <div class=\"si-title-2 text-primary\">{{ backText() | translate }}</div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #nextBtnHorizontal>\n  <div class=\"wizard-btn-container\" [class.wizard-text-deactivate]=\"!currentStep?.isValid()\">\n    @if (!shouldHideNavigation()) {\n      <div class=\"next\" [class.invisible]=\"index === steps.length - 1\" (click)=\"next(1)\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary btn-circle mb-2\"\n          [disabled]=\"!currentStep?.isValid()\"\n          [attr.aria-label]=\"nextText() | translate\"\n        >\n          <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n        </button>\n        <div\n          class=\"si-title-2 text-primary\"\n          [class.text-muted]=\"!currentStep?.isValid()\"\n          [attr.aria-disabled]=\"!currentStep?.isValid()\"\n          >{{ nextText() | translate }}</div\n        >\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #saveBtn>\n  @if (!hideSave()) {\n    <div [class.center-save]=\"!verticalLayout() && inlineNavigation()\">\n      @if (index === steps.length - 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-primary save\"\n          [disabled]=\"!currentStep?.isValid() || !currentStep?.isNextNavigable()\"\n          (click)=\"save()\"\n          >{{ saveText() | translate }}</button\n        >\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host.vertical{display:flex;flex-direction:column;block-size:100%}.container-steps{display:flex}.container-steps .step{display:grid}.container-steps:not(.vertical){inline-size:100%;justify-content:center;align-items:flex-start;padding-block:0}.container-steps:not(.vertical) .step{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto}.container-steps:not(.vertical) .step .step-icon{grid-row:1/2;grid-column:2/3;justify-self:center}.container-steps:not(.vertical) .step .title{margin-block-start:12px}.container-steps.vertical{flex-direction:column;block-size:100%;padding-block-start:32px;min-inline-size:var(--wizard-vertical-min-size, 180px);max-inline-size:var(--wizard-vertical-max-size, initial)}.container-steps.vertical .step{grid-template-columns:24px 1fr;grid-template-rows:auto auto auto;align-items:center;flex:0 1 auto}.container-steps.vertical .step .step-icon{grid-row:2/3;grid-column:1/2;justify-self:center}.container-steps.vertical .step .title{grid-row:2/3;grid-column:2/3;padding-inline-start:8px}.container-steps .completed-color{color:var(--element-text-inverse)}.line{grid-row:1;justify-self:stretch}.line.vertical{grid-column:1/2;align-self:stretch;justify-self:center;border-inline-start-color:var(--element-ui-2);border-inline-start-width:2px;border-inline-start-style:solid;min-block-size:12px}.line.vertical.dashed{border-inline-start-style:dashed}.line.vertical.spacer{block-size:12px;border:0}.line.vertical:not(.previous){grid-row:3}.line:not(.vertical){grid-column:3/4;border-block-start-width:2px;border-block-start-style:solid;border-block-start-color:var(--element-ui-2);align-self:center}.line:not(.vertical).previous{grid-column:1/2}.line:not(.vertical).dashed{inline-size:32px;border-block-start-style:dashed}.line:not(.vertical).spacer{display:none}.line:not(.vertical).dashed.previous{justify-self:end}.line.active,.line.completed{border-color:var(--element-ui-0)}.line.dashed.vertical{min-block-size:12px;inline-size:auto}.step{inline-size:100%;flex-shrink:1}.step a{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-row:1/-1;grid-column:1/-1;align-items:center;justify-self:center;color:var(--element-ui-2)}.step a:hover{text-decoration:none}.step a:focus-visible .step-icon{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:calc(-1 * var(--element-button-focus-width));border-radius:12px}.step a:focus-visible .step-icon.number-step{outline:none}.step a:focus-visible .step-icon.number-step .circle{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.step .title{grid-row:2/3;grid-column:1/-1;color:var(--element-text-secondary);display:-webkit-box;overflow:hidden;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical}.step .active,.step .active .title{color:var(--element-ui-0);cursor:default}.step .disabled,.step .disabled:hover,.step a.disabled>*{cursor:default}.step .disabled .title,.step .disabled:hover .title,.step a.disabled>* .title{color:var(--element-text-disabled)}.step .disabled .step-icon,.step .disabled:hover .step-icon,.step a.disabled>* .step-icon{color:var(--element-ui-3)}.step a:not(.disabled):hover,.step a:not(.disabled):hover .step-icon,.step a:not(.disabled):hover .title{color:var(--element-ui-0-hover)!important}.step .completed .title{color:var(--element-text-primary)}.step .completed .step-icon{color:var(--element-ui-0)}.step .completed .circle{background-color:currentColor}.container-wizard{inline-size:100%;display:flex;flex-wrap:nowrap}.container-wizard:not(.vertical){justify-content:center;padding-block-end:16px}.container-wizard.vertical{justify-content:start;block-size:100%}.container-wizard.vertical .steps-content{flex:100%;padding-inline-start:16px}.container-wizard .vertical-divider{border-inline-end:1px solid var(--element-ui-4);margin-block:-16px}.center-save{display:flex;justify-content:center;padding-block-start:16px}.wizard-btn-container{max-inline-size:50px;min-inline-size:40px;text-align:center;cursor:pointer}.wizard-btn-container.wizard-text-deactivate:hover{cursor:default}.wizard-btn-container:not(.wizard-text-deactivate):hover .text-primary{color:var(--element-ui-0-hover)!important}.completion-icon-size{font-size:96px}.circle{min-inline-size:18px;min-block-size:18px;border-radius:9px;border-width:1px;border-style:solid;border-color:currentColor;color:currentColor}.number-step{min-inline-size:24px;min-block-size:24px}.wizard-footer{container-type:inline-size}.wizard-footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:start;gap:16px}.wizard-footer-inner>.end{margin-inline-start:auto}@container (max-width: 400px){.wizard-footer-inner{flex-direction:column;align-items:stretch}.wizard-footer-inner>.end{margin-inline-start:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiWizardComponent, isStandalone: true, selector: "si-wizard", inputs: { backText: { classPropertyName: "backText", publicName: "backText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, hideNavigation: { classPropertyName: "hideNavigation", publicName: "hideNavigation", isSignal: true, isRequired: false, transformFunction: null }, saveText: { classPropertyName: "saveText", publicName: "saveText", isSignal: true, isRequired: false, transformFunction: null }, hideSave: { classPropertyName: "hideSave", publicName: "hideSave", isSignal: true, isRequired: false, transformFunction: null }, completionText: { classPropertyName: "completionText", publicName: "completionText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, hasCancel: { classPropertyName: "hasCancel", publicName: "hasCancel", isSignal: true, isRequired: false, transformFunction: null }, enableCompletionPage: { classPropertyName: "enableCompletionPage", publicName: "enableCompletionPage", isSignal: true, isRequired: false, transformFunction: null }, completionPageVisibleTime: { classPropertyName: "completionPageVisibleTime", publicName: "completionPageVisibleTime", isSignal: true, isRequired: false, transformFunction: null }, stepIcon: { classPropertyName: "stepIcon", publicName: "stepIcon", isSignal: true, isRequired: false, transformFunction: null }, stepActiveIcon: { classPropertyName: "stepActiveIcon", publicName: "stepActiveIcon", isSignal: true, isRequired: false, transformFunction: null }, stepCompletedIcon: { classPropertyName: "stepCompletedIcon", publicName: "stepCompletedIcon", isSignal: true, isRequired: false, transformFunction: null }, stepFailedIcon: { classPropertyName: "stepFailedIcon", publicName: "stepFailedIcon", isSignal: true, isRequired: false, transformFunction: null }, verticalLayout: { classPropertyName: "verticalLayout", publicName: "verticalLayout", isSignal: true, isRequired: false, transformFunction: null }, inlineNavigation: { classPropertyName: "inlineNavigation", publicName: "inlineNavigation", isSignal: true, isRequired: false, transformFunction: null }, showStepNumbers: { classPropertyName: "showStepNumbers", publicName: "showStepNumbers", isSignal: true, isRequired: false, transformFunction: null }, showVerticalDivider: { classPropertyName: "showVerticalDivider", publicName: "showVerticalDivider", isSignal: true, isRequired: false, transformFunction: null }, verticalMinSize: { classPropertyName: "verticalMinSize", publicName: "verticalMinSize", isSignal: true, isRequired: false, transformFunction: null }, verticalMaxSize: { classPropertyName: "verticalMaxSize", publicName: "verticalMaxSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completionAction: "completionAction", wizardCancel: "wizardCancel" }, host: { properties: { "class.vertical": "verticalLayout()", "style.--wizard-vertical-min-size": "verticalMinSize()", "style.--wizard-vertical-max-size": "verticalMaxSize()" }, classAttribute: "py-6 px-8 d-flex flex-column" }, queries: [{ propertyName: "steps", predicate: SiWizardStepComponent, isSignal: true }], viewQueries: [{ propertyName: "containerSteps", first: true, predicate: ["containerSteps"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!showCompletionPage()) {\n  @if (!verticalLayout()) {\n    <div class=\"container-wizard\" [class.justify-content-center]=\"!inlineNavigation()\">\n      @if (inlineNavigation()) {\n        <ng-container *ngTemplateOutlet=\"cancelBtnHorizontal\" />\n        <ng-container *ngTemplateOutlet=\"backBtnHorizontal\" />\n      }\n      <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n      @if (inlineNavigation()) {\n        <ng-container *ngTemplateOutlet=\"nextBtnHorizontal\" />\n      }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"stepContent\" />\n    @if (inlineNavigation()) {\n      <ng-container *ngTemplateOutlet=\"saveBtn\" />\n    } @else {\n      <ng-container *ngTemplateOutlet=\"footer\" />\n    }\n  } @else {\n    @if (showVerticalDivider()) {\n      <div class=\"container-wizard vertical\">\n        <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n        <div class=\"vertical-divider\"></div>\n        <div class=\"d-flex flex-column w-100\">\n          <div class=\"steps-content\">\n            <ng-container *ngTemplateOutlet=\"stepContent\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"footer\" />\n        </div>\n      </div>\n    } @else {\n      <div class=\"container-wizard vertical\">\n        <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n        <div class=\"steps-content\">\n          <ng-container *ngTemplateOutlet=\"stepContent\" />\n        </div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"footer\" />\n    }\n  }\n} @else {\n  <div class=\"text-center\">\n    <si-icon-next class=\"completion-icon-size text-success\" [icon]=\"icons.elementChecked\" />\n    <p class=\"si-title-1\"> {{ completionText() | translate }}</p>\n  </div>\n}\n\n<ng-template #stepsTemplate>\n  <div\n    #containerSteps\n    class=\"container-steps\"\n    [class.vertical]=\"verticalLayout()\"\n    [class.mx-4]=\"inlineNavigation()\"\n    [class.mt-4]=\"!verticalLayout() && inlineNavigation()\"\n    (siResizeObserver)=\"updateVisibleSteps()\"\n  >\n    @for (item of activeSteps(); track item.index) {\n      <div class=\"step\">\n        <div\n          class=\"line previous\"\n          [class.dashed]=\"$first && item.index > 0\"\n          [class.vertical]=\"verticalLayout()\"\n          [class.spacer]=\"$first && item.index === 0\"\n          [ngClass]=\"getStateClass(item.index)\"\n        ></div>\n        <a\n          class=\"focus-none\"\n          [ngClass]=\"getStateClass(item.index)\"\n          [attr.aria-current]=\"getAriaCurrent(item.index)\"\n          [attr.href]=\"!canActivate(item.index) || !currentStep?.isNextNavigable() ? null : '#'\"\n          (click)=\"activateStep($event, item.index)\"\n        >\n          @if (showStepNumbers() && !item.step.failed()) {\n            <div\n              class=\"step-icon number-step d-flex justify-content-center align-items-center px-1\"\n            >\n              <div class=\"circle\" [class.status-warning]=\"item.step.failed()\">\n                <span class=\"si-title-2 px-2\" [class.completed-color]=\"item.index < index\">\n                  {{ item.index + 1 }}\n                </span>\n              </div>\n            </div>\n          } @else {\n            <si-icon-next\n              class=\"icon step-icon\"\n              [class.status-warning]=\"item.step.failed()\"\n              [icon]=\"getState(item.step!, item.index)\"\n            />\n          }\n          <div\n            class=\"title si-title-2\"\n            [class.text-center]=\"!verticalLayout()\"\n            [class.px-6]=\"!verticalLayout()\"\n            [attr.aria-disabled]=\"getAriaDisabled(item.index)\"\n            >{{ item.step.heading() | translate }}</div\n          >\n        </a>\n        @if (item.index + 1 < stepCount) {\n          <div\n            class=\"line\"\n            [class.vertical]=\"verticalLayout()\"\n            [ngClass]=\"getStateClass(item.index + 1)\"\n            [class.dashed]=\"$last\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #stepContent>\n  <div [class.flex-grow-1]=\"!verticalLayout()\" [class.h-100]=\"verticalLayout()\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-template #cancelBtnHorizontal>\n  @if (hasCancel()) {\n    <div class=\"me-7\">\n      <div class=\"wizard-btn-container\" (click)=\"wizardCancel.emit()\">\n        <button\n          type=\"button\"\n          class=\"btn btn-sm btn-circle btn-secondary mt-2 mb-4\"\n          [attr.aria-label]=\"cancelText() | translate\"\n        >\n          <si-icon-next [icon]=\"icons.elementCancel\" />\n        </button>\n        <div class=\"si-title-2 text-primary\">{{ cancelText() | translate }}</div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #footer>\n  <div class=\"wizard-footer pt-6\">\n    <div class=\"wizard-footer-inner\" [class.ms-6]=\"showVerticalDivider()\">\n      @if (hasCancel()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          [attr.aria-label]=\"cancelText() | translate\"\n          (click)=\"wizardCancel.emit()\"\n        >\n          {{ cancelText() | translate }}\n        </button>\n      }\n      @if (!hideNavigation()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [class.d-none]=\"index === 0\"\n          [class.end]=\"index !== 0\"\n          [attr.aria-label]=\"backText() | translate\"\n          (click)=\"back(1)\"\n        >\n          {{ backText() | translate }}\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          [attr.aria-label]=\"nextText() | translate\"\n          [disabled]=\"!currentStep?.isValid()\"\n          [class.d-none]=\"index === steps().length - 1\"\n          [class.end]=\"index === 0\"\n          (click)=\"next(1)\"\n        >\n          {{ nextText() | translate }}\n        </button>\n      }\n\n      @if (!hideSave()) {\n        @if (index === steps().length - 1) {\n          <button\n            type=\"button\"\n            class=\"btn btn-primary save\"\n            [disabled]=\"!currentStep?.isValid() || !currentStep?.isNextNavigable()\"\n            (click)=\"save()\"\n            >{{ saveText() | translate }}</button\n          >\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #backBtnHorizontal>\n  <div class=\"wizard-btn-container\">\n    @if (!hideNavigation()) {\n      <div class=\"back\" [class.invisible]=\"index === 0\" (click)=\"back(1)\">\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary btn-circle mb-2\"\n          [attr.aria-label]=\"backText() | translate\"\n        >\n          <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n        </button>\n        <div class=\"si-title-2 text-primary\">{{ backText() | translate }}</div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #nextBtnHorizontal>\n  <div class=\"wizard-btn-container\" [class.wizard-text-deactivate]=\"!currentStep?.isValid()\">\n    @if (!hideNavigation()) {\n      <div class=\"next\" [class.invisible]=\"index === steps().length - 1\" (click)=\"next(1)\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary btn-circle mb-2\"\n          [disabled]=\"!currentStep?.isValid()\"\n          [attr.aria-label]=\"nextText() | translate\"\n        >\n          <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n        </button>\n        <div\n          class=\"si-title-2 text-primary\"\n          [class.text-muted]=\"!currentStep?.isValid()\"\n          [attr.aria-disabled]=\"!currentStep?.isValid()\"\n          >{{ nextText() | translate }}</div\n        >\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #saveBtn>\n  @if (!hideSave()) {\n    <div [class.center-save]=\"!verticalLayout() && inlineNavigation()\">\n      @if (index === steps().length - 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-primary save\"\n          [disabled]=\"!currentStep?.isValid() || !currentStep?.isNextNavigable()\"\n          (click)=\"save()\"\n          >{{ saveText() | translate }}</button\n        >\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host.vertical{display:flex;flex-direction:column;block-size:100%}.container-steps{display:flex}.container-steps .step{display:grid}.container-steps:not(.vertical){inline-size:100%;justify-content:center;align-items:flex-start;padding-block:0}.container-steps:not(.vertical) .step{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto}.container-steps:not(.vertical) .step .step-icon{grid-row:1/2;grid-column:2/3;justify-self:center}.container-steps:not(.vertical) .step .title{margin-block-start:12px}.container-steps.vertical{flex-direction:column;block-size:100%;padding-block-start:32px;min-inline-size:var(--wizard-vertical-min-size, 180px);max-inline-size:var(--wizard-vertical-max-size, initial)}.container-steps.vertical .step{grid-template-columns:24px 1fr;grid-template-rows:auto auto auto;align-items:center;flex:0 1 auto}.container-steps.vertical .step .step-icon{grid-row:2/3;grid-column:1/2;justify-self:center}.container-steps.vertical .step .title{grid-row:2/3;grid-column:2/3;padding-inline-start:8px}.container-steps .completed-color{color:var(--element-text-inverse)}.line{grid-row:1;justify-self:stretch}.line.vertical{grid-column:1/2;align-self:stretch;justify-self:center;border-inline-start-color:var(--element-ui-2);border-inline-start-width:2px;border-inline-start-style:solid;min-block-size:12px}.line.vertical.dashed{border-inline-start-style:dashed}.line.vertical.spacer{block-size:12px;border:0}.line.vertical:not(.previous){grid-row:3}.line:not(.vertical){grid-column:3/4;border-block-start-width:2px;border-block-start-style:solid;border-block-start-color:var(--element-ui-2);align-self:center}.line:not(.vertical).previous{grid-column:1/2}.line:not(.vertical).dashed{inline-size:32px;border-block-start-style:dashed}.line:not(.vertical).spacer{display:none}.line:not(.vertical).dashed.previous{justify-self:end}.line.active,.line.completed{border-color:var(--element-ui-0)}.line.dashed.vertical{min-block-size:12px;inline-size:auto}.step{inline-size:100%;flex-shrink:1}.step a{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-row:1/-1;grid-column:1/-1;align-items:center;justify-self:center;color:var(--element-ui-2)}.step a:hover{text-decoration:none}.step a:focus-visible .step-icon{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:calc(-1 * var(--element-button-focus-width));border-radius:12px}.step a:focus-visible .step-icon.number-step{outline:none}.step a:focus-visible .step-icon.number-step .circle{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.step .title{grid-row:2/3;grid-column:1/-1;color:var(--element-text-secondary);display:-webkit-box;overflow:hidden;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical}.step .active,.step .active .title{color:var(--element-ui-0);cursor:default}.step .disabled,.step .disabled:hover,.step a.disabled>*{cursor:default}.step .disabled .title,.step .disabled:hover .title,.step a.disabled>* .title{color:var(--element-text-disabled)}.step .disabled .step-icon,.step .disabled:hover .step-icon,.step a.disabled>* .step-icon{color:var(--element-ui-3)}.step a:not(.disabled):hover,.step a:not(.disabled):hover .step-icon,.step a:not(.disabled):hover .title{color:var(--element-ui-0-hover)!important}.step .completed .title{color:var(--element-text-primary)}.step .completed .step-icon{color:var(--element-ui-0)}.step .completed .circle{background-color:currentColor}.container-wizard{inline-size:100%;display:flex;flex-wrap:nowrap}.container-wizard:not(.vertical){justify-content:center;padding-block-end:16px}.container-wizard.vertical{justify-content:start;block-size:100%}.container-wizard.vertical .steps-content{flex:100%;padding-inline-start:16px}.container-wizard .vertical-divider{border-inline-end:1px solid var(--element-ui-4);margin-block:-16px}.center-save{display:flex;justify-content:center;padding-block-start:16px}.wizard-btn-container{max-inline-size:50px;min-inline-size:40px;text-align:center;cursor:pointer}.wizard-btn-container.wizard-text-deactivate:hover{cursor:default}.wizard-btn-container:not(.wizard-text-deactivate):hover .text-primary{color:var(--element-ui-0-hover)!important}.completion-icon-size{font-size:96px}.circle{min-inline-size:18px;min-block-size:18px;border-radius:9px;border-width:1px;border-style:solid;border-color:currentColor;color:currentColor}.number-step{min-inline-size:24px;min-block-size:24px}.wizard-footer{container-type:inline-size}.wizard-footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:start;gap:16px}.wizard-footer-inner>.end{margin-inline-start:auto}@container (max-width: 400px){.wizard-footer-inner{flex-direction:column;align-items:stretch}.wizard-footer-inner>.end{margin-inline-start:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     WebComponentContentChildren(SiWizardStepComponent)
-], SiWizardComponent.prototype, "wizardSteps", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiWizardComponent, decorators: [{
+], SiWizardComponent.prototype, "steps", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-wizard', imports: [
                         NgClass,
@@ -428,22 +398,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         '[class.vertical]': 'verticalLayout()',
                         '[style.--wizard-vertical-min-size]': 'verticalMinSize()',
                         '[style.--wizard-vertical-max-size]': 'verticalMaxSize()'
-                    }, template: "@if (!showCompletionPage()) {\n  @if (!verticalLayout()) {\n    <div class=\"container-wizard\" [class.justify-content-center]=\"!inlineNavigation()\">\n      @if (inlineNavigation()) {\n        <ng-container *ngTemplateOutlet=\"cancelBtnHorizontal\" />\n        <ng-container *ngTemplateOutlet=\"backBtnHorizontal\" />\n      }\n      <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n      @if (inlineNavigation()) {\n        <ng-container *ngTemplateOutlet=\"nextBtnHorizontal\" />\n      }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"stepContent\" />\n    @if (inlineNavigation()) {\n      <ng-container *ngTemplateOutlet=\"saveBtn\" />\n    } @else {\n      <ng-container *ngTemplateOutlet=\"footer\" />\n    }\n  } @else {\n    @if (showVerticalDivider()) {\n      <div class=\"container-wizard vertical\">\n        <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n        <div class=\"vertical-divider\"></div>\n        <div class=\"d-flex flex-column w-100\">\n          <div class=\"steps-content\">\n            <ng-container *ngTemplateOutlet=\"stepContent\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"footer\" />\n        </div>\n      </div>\n    } @else {\n      <div class=\"container-wizard vertical\">\n        <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n        <div class=\"steps-content\">\n          <ng-container *ngTemplateOutlet=\"stepContent\" />\n        </div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"footer\" />\n    }\n  }\n} @else {\n  <div class=\"text-center\">\n    <si-icon-next class=\"completion-icon-size text-success\" [icon]=\"icons.elementChecked\" />\n    <p class=\"si-title-1\"> {{ completionText() | translate }}</p>\n  </div>\n}\n\n<ng-template #stepsTemplate>\n  <div\n    #containerSteps\n    class=\"container-steps\"\n    [class.vertical]=\"verticalLayout()\"\n    [class.mx-4]=\"inlineNavigation()\"\n    [class.mt-4]=\"!verticalLayout() && inlineNavigation()\"\n    (siResizeObserver)=\"calculateNumberOfVisibleSteps()\"\n  >\n    @for (item of activeSteps(); track item.index) {\n      <div class=\"step\">\n        <div\n          class=\"line previous\"\n          [class.dashed]=\"$first && item.index > 0\"\n          [class.vertical]=\"verticalLayout()\"\n          [class.spacer]=\"$first && item.index === 0\"\n          [ngClass]=\"getStateClass(item.index)\"\n        ></div>\n        <a\n          class=\"focus-none\"\n          [ngClass]=\"getStateClass(item.index)\"\n          [attr.aria-current]=\"getAriaCurrent(item.index)\"\n          [attr.href]=\"!canActivate(item.index) || !currentStep?.isNextNavigable() ? null : '#'\"\n          (click)=\"activateStep($event, item.index)\"\n        >\n          @if (showStepNumbers() && !item.step.failed()) {\n            <div\n              class=\"step-icon number-step d-flex justify-content-center align-items-center px-1\"\n            >\n              <div class=\"circle\" [class.status-warning]=\"item.step.failed()\">\n                <span class=\"si-title-2 px-2\" [class.completed-color]=\"item.index < index\">\n                  {{ item.index + 1 }}\n                </span>\n              </div>\n            </div>\n          } @else {\n            <si-icon-next\n              class=\"icon step-icon\"\n              [class.status-warning]=\"item.step.failed()\"\n              [icon]=\"getState(item.step!, item.index)\"\n            />\n          }\n          <div\n            class=\"title si-title-2\"\n            [class.text-center]=\"!verticalLayout()\"\n            [class.px-6]=\"!verticalLayout()\"\n            [attr.aria-disabled]=\"getAriaDisabled(item.index)\"\n            >{{ item.step.heading() | translate }}</div\n          >\n        </a>\n        @if (item.index + 1 < stepCount) {\n          <div\n            class=\"line\"\n            [class.vertical]=\"verticalLayout()\"\n            [ngClass]=\"getStateClass(item.index + 1)\"\n            [class.dashed]=\"$last\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #stepContent>\n  <div [class.flex-grow-1]=\"!verticalLayout()\" [class.h-100]=\"verticalLayout()\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-template #cancelBtnHorizontal>\n  @if (hasCancel()) {\n    <div class=\"me-7\">\n      <div class=\"wizard-btn-container\" (click)=\"wizardCancel.emit()\">\n        <button\n          type=\"button\"\n          class=\"btn btn-sm btn-circle btn-secondary mt-2 mb-4\"\n          [attr.aria-label]=\"cancelText() | translate\"\n        >\n          <si-icon-next [icon]=\"icons.elementCancel\" />\n        </button>\n        <div class=\"si-title-2 text-primary\">{{ cancelText() | translate }}</div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #footer>\n  <div class=\"wizard-footer pt-6\">\n    <div class=\"wizard-footer-inner\" [class.ms-6]=\"showVerticalDivider()\">\n      @if (hasCancel()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          [attr.aria-label]=\"cancelText() | translate\"\n          (click)=\"wizardCancel.emit()\"\n        >\n          {{ cancelText() | translate }}\n        </button>\n      }\n      @if (!shouldHideNavigation()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [class.d-none]=\"index === 0\"\n          [class.end]=\"index !== 0\"\n          [attr.aria-label]=\"backText() | translate\"\n          (click)=\"back(1)\"\n        >\n          {{ backText() | translate }}\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          [attr.aria-label]=\"nextText() | translate\"\n          [disabled]=\"!currentStep?.isValid()\"\n          [class.d-none]=\"index === steps.length - 1\"\n          [class.end]=\"index === 0\"\n          (click)=\"next(1)\"\n        >\n          {{ nextText() | translate }}\n        </button>\n      }\n\n      @if (!hideSave()) {\n        @if (index === steps.length - 1) {\n          <button\n            type=\"button\"\n            class=\"btn btn-primary save\"\n            [disabled]=\"!currentStep?.isValid() || !currentStep?.isNextNavigable()\"\n            (click)=\"save()\"\n            >{{ saveText() | translate }}</button\n          >\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #backBtnHorizontal>\n  <div class=\"wizard-btn-container\">\n    @if (!shouldHideNavigation()) {\n      <div class=\"back\" [class.invisible]=\"index === 0\" (click)=\"back(1)\">\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary btn-circle mb-2\"\n          [attr.aria-label]=\"backText() | translate\"\n        >\n          <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n        </button>\n        <div class=\"si-title-2 text-primary\">{{ backText() | translate }}</div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #nextBtnHorizontal>\n  <div class=\"wizard-btn-container\" [class.wizard-text-deactivate]=\"!currentStep?.isValid()\">\n    @if (!shouldHideNavigation()) {\n      <div class=\"next\" [class.invisible]=\"index === steps.length - 1\" (click)=\"next(1)\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary btn-circle mb-2\"\n          [disabled]=\"!currentStep?.isValid()\"\n          [attr.aria-label]=\"nextText() | translate\"\n        >\n          <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n        </button>\n        <div\n          class=\"si-title-2 text-primary\"\n          [class.text-muted]=\"!currentStep?.isValid()\"\n          [attr.aria-disabled]=\"!currentStep?.isValid()\"\n          >{{ nextText() | translate }}</div\n        >\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #saveBtn>\n  @if (!hideSave()) {\n    <div [class.center-save]=\"!verticalLayout() && inlineNavigation()\">\n      @if (index === steps.length - 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-primary save\"\n          [disabled]=\"!currentStep?.isValid() || !currentStep?.isNextNavigable()\"\n          (click)=\"save()\"\n          >{{ saveText() | translate }}</button\n        >\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host.vertical{display:flex;flex-direction:column;block-size:100%}.container-steps{display:flex}.container-steps .step{display:grid}.container-steps:not(.vertical){inline-size:100%;justify-content:center;align-items:flex-start;padding-block:0}.container-steps:not(.vertical) .step{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto}.container-steps:not(.vertical) .step .step-icon{grid-row:1/2;grid-column:2/3;justify-self:center}.container-steps:not(.vertical) .step .title{margin-block-start:12px}.container-steps.vertical{flex-direction:column;block-size:100%;padding-block-start:32px;min-inline-size:var(--wizard-vertical-min-size, 180px);max-inline-size:var(--wizard-vertical-max-size, initial)}.container-steps.vertical .step{grid-template-columns:24px 1fr;grid-template-rows:auto auto auto;align-items:center;flex:0 1 auto}.container-steps.vertical .step .step-icon{grid-row:2/3;grid-column:1/2;justify-self:center}.container-steps.vertical .step .title{grid-row:2/3;grid-column:2/3;padding-inline-start:8px}.container-steps .completed-color{color:var(--element-text-inverse)}.line{grid-row:1;justify-self:stretch}.line.vertical{grid-column:1/2;align-self:stretch;justify-self:center;border-inline-start-color:var(--element-ui-2);border-inline-start-width:2px;border-inline-start-style:solid;min-block-size:12px}.line.vertical.dashed{border-inline-start-style:dashed}.line.vertical.spacer{block-size:12px;border:0}.line.vertical:not(.previous){grid-row:3}.line:not(.vertical){grid-column:3/4;border-block-start-width:2px;border-block-start-style:solid;border-block-start-color:var(--element-ui-2);align-self:center}.line:not(.vertical).previous{grid-column:1/2}.line:not(.vertical).dashed{inline-size:32px;border-block-start-style:dashed}.line:not(.vertical).spacer{display:none}.line:not(.vertical).dashed.previous{justify-self:end}.line.active,.line.completed{border-color:var(--element-ui-0)}.line.dashed.vertical{min-block-size:12px;inline-size:auto}.step{inline-size:100%;flex-shrink:1}.step a{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-row:1/-1;grid-column:1/-1;align-items:center;justify-self:center;color:var(--element-ui-2)}.step a:hover{text-decoration:none}.step a:focus-visible .step-icon{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:calc(-1 * var(--element-button-focus-width));border-radius:12px}.step a:focus-visible .step-icon.number-step{outline:none}.step a:focus-visible .step-icon.number-step .circle{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.step .title{grid-row:2/3;grid-column:1/-1;color:var(--element-text-secondary);display:-webkit-box;overflow:hidden;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical}.step .active,.step .active .title{color:var(--element-ui-0);cursor:default}.step .disabled,.step .disabled:hover,.step a.disabled>*{cursor:default}.step .disabled .title,.step .disabled:hover .title,.step a.disabled>* .title{color:var(--element-text-disabled)}.step .disabled .step-icon,.step .disabled:hover .step-icon,.step a.disabled>* .step-icon{color:var(--element-ui-3)}.step a:not(.disabled):hover,.step a:not(.disabled):hover .step-icon,.step a:not(.disabled):hover .title{color:var(--element-ui-0-hover)!important}.step .completed .title{color:var(--element-text-primary)}.step .completed .step-icon{color:var(--element-ui-0)}.step .completed .circle{background-color:currentColor}.container-wizard{inline-size:100%;display:flex;flex-wrap:nowrap}.container-wizard:not(.vertical){justify-content:center;padding-block-end:16px}.container-wizard.vertical{justify-content:start;block-size:100%}.container-wizard.vertical .steps-content{flex:100%;padding-inline-start:16px}.container-wizard .vertical-divider{border-inline-end:1px solid var(--element-ui-4);margin-block:-16px}.center-save{display:flex;justify-content:center;padding-block-start:16px}.wizard-btn-container{max-inline-size:50px;min-inline-size:40px;text-align:center;cursor:pointer}.wizard-btn-container.wizard-text-deactivate:hover{cursor:default}.wizard-btn-container:not(.wizard-text-deactivate):hover .text-primary{color:var(--element-ui-0-hover)!important}.completion-icon-size{font-size:96px}.circle{min-inline-size:18px;min-block-size:18px;border-radius:9px;border-width:1px;border-style:solid;border-color:currentColor;color:currentColor}.number-step{min-inline-size:24px;min-block-size:24px}.wizard-footer{container-type:inline-size}.wizard-footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:start;gap:16px}.wizard-footer-inner>.end{margin-inline-start:auto}@container (max-width: 400px){.wizard-footer-inner{flex-direction:column;align-items:stretch}.wizard-footer-inner>.end{margin-inline-start:unset}}\n"] }]
-        }], propDecorators: { wizardSteps: [{
-                type: ContentChildren,
-                args: [SiWizardStepComponent]
-            }] } });
+                    }, template: "@if (!showCompletionPage()) {\n  @if (!verticalLayout()) {\n    <div class=\"container-wizard\" [class.justify-content-center]=\"!inlineNavigation()\">\n      @if (inlineNavigation()) {\n        <ng-container *ngTemplateOutlet=\"cancelBtnHorizontal\" />\n        <ng-container *ngTemplateOutlet=\"backBtnHorizontal\" />\n      }\n      <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n      @if (inlineNavigation()) {\n        <ng-container *ngTemplateOutlet=\"nextBtnHorizontal\" />\n      }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"stepContent\" />\n    @if (inlineNavigation()) {\n      <ng-container *ngTemplateOutlet=\"saveBtn\" />\n    } @else {\n      <ng-container *ngTemplateOutlet=\"footer\" />\n    }\n  } @else {\n    @if (showVerticalDivider()) {\n      <div class=\"container-wizard vertical\">\n        <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n        <div class=\"vertical-divider\"></div>\n        <div class=\"d-flex flex-column w-100\">\n          <div class=\"steps-content\">\n            <ng-container *ngTemplateOutlet=\"stepContent\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"footer\" />\n        </div>\n      </div>\n    } @else {\n      <div class=\"container-wizard vertical\">\n        <ng-container *ngTemplateOutlet=\"stepsTemplate\" />\n        <div class=\"steps-content\">\n          <ng-container *ngTemplateOutlet=\"stepContent\" />\n        </div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"footer\" />\n    }\n  }\n} @else {\n  <div class=\"text-center\">\n    <si-icon-next class=\"completion-icon-size text-success\" [icon]=\"icons.elementChecked\" />\n    <p class=\"si-title-1\"> {{ completionText() | translate }}</p>\n  </div>\n}\n\n<ng-template #stepsTemplate>\n  <div\n    #containerSteps\n    class=\"container-steps\"\n    [class.vertical]=\"verticalLayout()\"\n    [class.mx-4]=\"inlineNavigation()\"\n    [class.mt-4]=\"!verticalLayout() && inlineNavigation()\"\n    (siResizeObserver)=\"updateVisibleSteps()\"\n  >\n    @for (item of activeSteps(); track item.index) {\n      <div class=\"step\">\n        <div\n          class=\"line previous\"\n          [class.dashed]=\"$first && item.index > 0\"\n          [class.vertical]=\"verticalLayout()\"\n          [class.spacer]=\"$first && item.index === 0\"\n          [ngClass]=\"getStateClass(item.index)\"\n        ></div>\n        <a\n          class=\"focus-none\"\n          [ngClass]=\"getStateClass(item.index)\"\n          [attr.aria-current]=\"getAriaCurrent(item.index)\"\n          [attr.href]=\"!canActivate(item.index) || !currentStep?.isNextNavigable() ? null : '#'\"\n          (click)=\"activateStep($event, item.index)\"\n        >\n          @if (showStepNumbers() && !item.step.failed()) {\n            <div\n              class=\"step-icon number-step d-flex justify-content-center align-items-center px-1\"\n            >\n              <div class=\"circle\" [class.status-warning]=\"item.step.failed()\">\n                <span class=\"si-title-2 px-2\" [class.completed-color]=\"item.index < index\">\n                  {{ item.index + 1 }}\n                </span>\n              </div>\n            </div>\n          } @else {\n            <si-icon-next\n              class=\"icon step-icon\"\n              [class.status-warning]=\"item.step.failed()\"\n              [icon]=\"getState(item.step!, item.index)\"\n            />\n          }\n          <div\n            class=\"title si-title-2\"\n            [class.text-center]=\"!verticalLayout()\"\n            [class.px-6]=\"!verticalLayout()\"\n            [attr.aria-disabled]=\"getAriaDisabled(item.index)\"\n            >{{ item.step.heading() | translate }}</div\n          >\n        </a>\n        @if (item.index + 1 < stepCount) {\n          <div\n            class=\"line\"\n            [class.vertical]=\"verticalLayout()\"\n            [ngClass]=\"getStateClass(item.index + 1)\"\n            [class.dashed]=\"$last\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #stepContent>\n  <div [class.flex-grow-1]=\"!verticalLayout()\" [class.h-100]=\"verticalLayout()\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-template #cancelBtnHorizontal>\n  @if (hasCancel()) {\n    <div class=\"me-7\">\n      <div class=\"wizard-btn-container\" (click)=\"wizardCancel.emit()\">\n        <button\n          type=\"button\"\n          class=\"btn btn-sm btn-circle btn-secondary mt-2 mb-4\"\n          [attr.aria-label]=\"cancelText() | translate\"\n        >\n          <si-icon-next [icon]=\"icons.elementCancel\" />\n        </button>\n        <div class=\"si-title-2 text-primary\">{{ cancelText() | translate }}</div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #footer>\n  <div class=\"wizard-footer pt-6\">\n    <div class=\"wizard-footer-inner\" [class.ms-6]=\"showVerticalDivider()\">\n      @if (hasCancel()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          [attr.aria-label]=\"cancelText() | translate\"\n          (click)=\"wizardCancel.emit()\"\n        >\n          {{ cancelText() | translate }}\n        </button>\n      }\n      @if (!hideNavigation()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [class.d-none]=\"index === 0\"\n          [class.end]=\"index !== 0\"\n          [attr.aria-label]=\"backText() | translate\"\n          (click)=\"back(1)\"\n        >\n          {{ backText() | translate }}\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          [attr.aria-label]=\"nextText() | translate\"\n          [disabled]=\"!currentStep?.isValid()\"\n          [class.d-none]=\"index === steps().length - 1\"\n          [class.end]=\"index === 0\"\n          (click)=\"next(1)\"\n        >\n          {{ nextText() | translate }}\n        </button>\n      }\n\n      @if (!hideSave()) {\n        @if (index === steps().length - 1) {\n          <button\n            type=\"button\"\n            class=\"btn btn-primary save\"\n            [disabled]=\"!currentStep?.isValid() || !currentStep?.isNextNavigable()\"\n            (click)=\"save()\"\n            >{{ saveText() | translate }}</button\n          >\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #backBtnHorizontal>\n  <div class=\"wizard-btn-container\">\n    @if (!hideNavigation()) {\n      <div class=\"back\" [class.invisible]=\"index === 0\" (click)=\"back(1)\">\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary btn-circle mb-2\"\n          [attr.aria-label]=\"backText() | translate\"\n        >\n          <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n        </button>\n        <div class=\"si-title-2 text-primary\">{{ backText() | translate }}</div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #nextBtnHorizontal>\n  <div class=\"wizard-btn-container\" [class.wizard-text-deactivate]=\"!currentStep?.isValid()\">\n    @if (!hideNavigation()) {\n      <div class=\"next\" [class.invisible]=\"index === steps().length - 1\" (click)=\"next(1)\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary btn-circle mb-2\"\n          [disabled]=\"!currentStep?.isValid()\"\n          [attr.aria-label]=\"nextText() | translate\"\n        >\n          <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n        </button>\n        <div\n          class=\"si-title-2 text-primary\"\n          [class.text-muted]=\"!currentStep?.isValid()\"\n          [attr.aria-disabled]=\"!currentStep?.isValid()\"\n          >{{ nextText() | translate }}</div\n        >\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #saveBtn>\n  @if (!hideSave()) {\n    <div [class.center-save]=\"!verticalLayout() && inlineNavigation()\">\n      @if (index === steps().length - 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-primary save\"\n          [disabled]=\"!currentStep?.isValid() || !currentStep?.isNextNavigable()\"\n          (click)=\"save()\"\n          >{{ saveText() | translate }}</button\n        >\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host.vertical{display:flex;flex-direction:column;block-size:100%}.container-steps{display:flex}.container-steps .step{display:grid}.container-steps:not(.vertical){inline-size:100%;justify-content:center;align-items:flex-start;padding-block:0}.container-steps:not(.vertical) .step{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto}.container-steps:not(.vertical) .step .step-icon{grid-row:1/2;grid-column:2/3;justify-self:center}.container-steps:not(.vertical) .step .title{margin-block-start:12px}.container-steps.vertical{flex-direction:column;block-size:100%;padding-block-start:32px;min-inline-size:var(--wizard-vertical-min-size, 180px);max-inline-size:var(--wizard-vertical-max-size, initial)}.container-steps.vertical .step{grid-template-columns:24px 1fr;grid-template-rows:auto auto auto;align-items:center;flex:0 1 auto}.container-steps.vertical .step .step-icon{grid-row:2/3;grid-column:1/2;justify-self:center}.container-steps.vertical .step .title{grid-row:2/3;grid-column:2/3;padding-inline-start:8px}.container-steps .completed-color{color:var(--element-text-inverse)}.line{grid-row:1;justify-self:stretch}.line.vertical{grid-column:1/2;align-self:stretch;justify-self:center;border-inline-start-color:var(--element-ui-2);border-inline-start-width:2px;border-inline-start-style:solid;min-block-size:12px}.line.vertical.dashed{border-inline-start-style:dashed}.line.vertical.spacer{block-size:12px;border:0}.line.vertical:not(.previous){grid-row:3}.line:not(.vertical){grid-column:3/4;border-block-start-width:2px;border-block-start-style:solid;border-block-start-color:var(--element-ui-2);align-self:center}.line:not(.vertical).previous{grid-column:1/2}.line:not(.vertical).dashed{inline-size:32px;border-block-start-style:dashed}.line:not(.vertical).spacer{display:none}.line:not(.vertical).dashed.previous{justify-self:end}.line.active,.line.completed{border-color:var(--element-ui-0)}.line.dashed.vertical{min-block-size:12px;inline-size:auto}.step{inline-size:100%;flex-shrink:1}.step a{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-row:1/-1;grid-column:1/-1;align-items:center;justify-self:center;color:var(--element-ui-2)}.step a:hover{text-decoration:none}.step a:focus-visible .step-icon{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:calc(-1 * var(--element-button-focus-width));border-radius:12px}.step a:focus-visible .step-icon.number-step{outline:none}.step a:focus-visible .step-icon.number-step .circle{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.step .title{grid-row:2/3;grid-column:1/-1;color:var(--element-text-secondary);display:-webkit-box;overflow:hidden;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical}.step .active,.step .active .title{color:var(--element-ui-0);cursor:default}.step .disabled,.step .disabled:hover,.step a.disabled>*{cursor:default}.step .disabled .title,.step .disabled:hover .title,.step a.disabled>* .title{color:var(--element-text-disabled)}.step .disabled .step-icon,.step .disabled:hover .step-icon,.step a.disabled>* .step-icon{color:var(--element-ui-3)}.step a:not(.disabled):hover,.step a:not(.disabled):hover .step-icon,.step a:not(.disabled):hover .title{color:var(--element-ui-0-hover)!important}.step .completed .title{color:var(--element-text-primary)}.step .completed .step-icon{color:var(--element-ui-0)}.step .completed .circle{background-color:currentColor}.container-wizard{inline-size:100%;display:flex;flex-wrap:nowrap}.container-wizard:not(.vertical){justify-content:center;padding-block-end:16px}.container-wizard.vertical{justify-content:start;block-size:100%}.container-wizard.vertical .steps-content{flex:100%;padding-inline-start:16px}.container-wizard .vertical-divider{border-inline-end:1px solid var(--element-ui-4);margin-block:-16px}.center-save{display:flex;justify-content:center;padding-block-start:16px}.wizard-btn-container{max-inline-size:50px;min-inline-size:40px;text-align:center;cursor:pointer}.wizard-btn-container.wizard-text-deactivate:hover{cursor:default}.wizard-btn-container:not(.wizard-text-deactivate):hover .text-primary{color:var(--element-ui-0-hover)!important}.completion-icon-size{font-size:96px}.circle{min-inline-size:18px;min-block-size:18px;border-radius:9px;border-width:1px;border-style:solid;border-color:currentColor;color:currentColor}.number-step{min-inline-size:24px;min-block-size:24px}.wizard-footer{container-type:inline-size}.wizard-footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:start;gap:16px}.wizard-footer-inner>.end{margin-inline-start:auto}@container (max-width: 400px){.wizard-footer-inner{flex-direction:column;align-items:stretch}.wizard-footer-inner>.end{margin-inline-start:unset}}\n"] }]
+        }], propDecorators: { steps: [] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiWizardModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiWizardModule, imports: [SiWizardComponent, SiWizardStepComponent], exports: [SiWizardComponent, SiWizardStepComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiWizardModule, imports: [SiWizardComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiWizardModule, imports: [SiWizardComponent, SiWizardStepComponent], exports: [SiWizardComponent, SiWizardStepComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWizardModule, imports: [SiWizardComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiWizardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWizardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiWizardComponent, SiWizardStepComponent],