@cute-widgets/base 20.0.4 → 21.0.0

package/fesm2022/cute-widgets-base-stepper.mjs

@@ -23,10 +23,10 @@ import { _animationsDisabled } from '@cute-widgets/base/core';
  * code licensed under MIT-style License (https://angular.dev/license).
  */
 class CuteStepLabel extends CdkStepLabel {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteStepLabel, isStandalone: true, selector: "[cuteStepLabel], [cute-step-label]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteStepLabel, isStandalone: true, selector: "[cuteStepLabel], [cute-step-label]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cuteStepLabel], [cute-step-label]',
@@ -34,10 +34,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 class CuteStepLabelTitle {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepLabelTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteStepLabelTitle, isStandalone: true, selector: "[cuteStepLabelTitle], [cute-step-label-title]", host: { properties: { "class.fw-bold": "true" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepLabelTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteStepLabelTitle, isStandalone: true, selector: "[cuteStepLabelTitle], [cute-step-label-title]", host: { properties: { "class.fw-bold": "true" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepLabelTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepLabelTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cuteStepLabelTitle], [cute-step-label-title]',
@@ -54,10 +54,10 @@ class CuteStepLabelDescription {
     isErrorState() {
         return this._elementRef.nativeElement.closest(".cute-step-label-error") != null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepLabelDescription, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteStepLabelDescription, isStandalone: true, selector: "[cuteStepLabelDescription], [cuteStepLabelDesc], [cute-step-label-desc]", host: { properties: { "class.opacity-75": "true", "style.font-size": "\"smaller\"", "style.margin-bottom.px": "0" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepLabelDescription, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteStepLabelDescription, isStandalone: true, selector: "[cuteStepLabelDescription], [cuteStepLabelDesc], [cute-step-label-desc]", host: { properties: { "class.opacity-75": "true", "style.font-size": "\"smaller\"", "style.margin-bottom.px": "0" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepLabelDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepLabelDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cuteStepLabelDescription], [cuteStepLabelDesc], [cute-step-label-desc]',
@@ -89,10 +89,10 @@ class CuteStepContent {
     constructor() {
         this._template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteStepContent, isStandalone: true, selector: "ng-template[cuteStepContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteStepContent, isStandalone: true, selector: "ng-template[cuteStepContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cuteStepContent]',
@@ -144,13 +144,13 @@ class CuteStep extends CdkStep {
         const customErrorState = !!(control && control.invalid && this.interacted);
         return originalErrorState || customErrorState;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStep, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteStep, isStandalone: true, selector: "cute-step", inputs: { color: "color", description: "description" }, host: { attributes: { "hidden": "" }, classAttribute: "cute-step" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStep, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CuteStep, isStandalone: true, selector: "cute-step", inputs: { color: "color", description: "description" }, host: { attributes: { "hidden": "" }, classAttribute: "cute-step" }, providers: [
             { provide: ErrorStateMatcher, useExisting: CuteStep },
             { provide: CdkStep, useExisting: CuteStep },
         ], queries: [{ propertyName: "stepLabel", first: true, predicate: CuteStepLabel, descendants: true }, { propertyName: "_lazyContent", first: true, predicate: CuteStepContent, descendants: true }], exportAs: ["cuteStep"], usesInheritance: true, ngImport: i0, template: "<ng-template>\r\n  <ng-content></ng-content>\r\n  <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStep, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStep, decorators: [{
             type: Component,
             args: [{ selector: 'cute-step', providers: [
                         { provide: ErrorStateMatcher, useExisting: CuteStep },
@@ -197,10 +197,10 @@ class CuteStepperIntl {
         /** Label that is used to indicate a step as editable to screen readers. */
         this.editableLabel = 'Editable';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -299,17 +299,17 @@ class CuteStepHeader extends CdkStepHeader {
     _hasErrorLabel() {
         return this.state === 'error';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteStepHeader, isStandalone: true, selector: "cute-step-header", inputs: { state: "state", label: "label", errorMessage: "errorMessage", iconOverrides: "iconOverrides", index: "index", selected: ["selected", "selected", booleanAttribute], active: ["active", "active", booleanAttribute], optional: ["optional", "optional", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], color: "color" }, host: { attributes: { "role": "tab" }, properties: { "class.cute-step-header-empty-label": "_hasEmptyLabel()", "class": "\"cute-\" + (color || \"primary\")" }, classAttribute: "cute-step-header" }, usesInheritance: true, ngImport: i0, template: "<div class=\"cute-step-icon-state-{{state}} cute-step-icon\" [class.cute-step-icon-selected]=\"selected\">\r\n  <div class=\"cute-step-icon-content\">\r\n    @if (iconOverrides && iconOverrides[state]) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"iconOverrides[state]\"\r\n        [ngTemplateOutletContext]=\"_getIconContext()\">\r\n      </ng-container>\r\n    } @else {\r\n      @switch (state) {\r\n        @case ('number') {\r\n          <span aria-hidden=\"true\">{{_getDefaultTextForState(state)}}</span>\r\n        }\r\n        @default {\r\n          @if (state === 'done') {\r\n            <span class=\"cdk-visually-hidden\">{{_intl.completedLabel}}</span>\r\n          } @else if (state === 'edit') {\r\n            <span class=\"cdk-visually-hidden\">{{_intl.editableLabel}}</span>\r\n          }\r\n\r\n          <cute-icon aria-hidden=\"true\" fontIcon=\"{{_getDefaultTextForState(state)}}\"></cute-icon>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n<div class=\"cute-step-label\"\r\n     [class.cute-step-label-active]=\"active\"\r\n     [class.cute-step-label-selected]=\"selected\"\r\n     [class.cute-step-label-error]=\"state == 'error'\">\r\n  @if (_templateLabel(); as templateLabel) {\r\n    <!-- If there is a label template, use it. -->\r\n    <div class=\"cute-step-text-label\">\r\n        <ng-container [ngTemplateOutlet]=\"templateLabel.template\"></ng-container>\r\n    </div>\r\n  } @else if (_stringLabel()) {\r\n    <!-- If there is no label template, fall back to the text label. -->\r\n    <div class=\"cute-step-text-label\">\r\n        <span>{{label}}</span>\r\n    </div>\r\n  }\r\n\r\n  @if (optional && state != 'error') {\r\n    <div class=\"cute-step-optional\">{{_intl.optionalLabel}}</div>\r\n  }\r\n\r\n  @if (state === 'error') {\r\n    <div class=\"cute-step-sub-label-error\">{{errorMessage}}</div>\r\n  }\r\n</div>\r\n", styles: [".cute-step-header{--cute-stepper-theme-foreground-color: var(--bs-btn-color, white);--cute-stepper-theme-background-color: var(--bs-btn-bg, rgb(0,0,200));--cute-header-icon-foreground-color: var(--bs-body-bg, white);--cute-header-icon-background-color: var(--bs-body-color, rgba(var(--bs-body-color-rgb), .54));--cute-header-icon-selected-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-icon-selected-background-color: var(--cute-stepper-theme-background-color);--cute-header-done-state-icon-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-done-state-icon-background-color: var(--cute-stepper-theme-background-color);--cute-header-edit-state-icon-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-edit-state-icon-background-color: var(--cute-stepper-theme-background-color);--cute-header-error-state-icon-foreground-color: var(--bs-form-invalid-color);--cute-header-error-state-icon-background-color: transparent;--cute-header-hover-state-layer-color: rgba(var(--bs-body-color-rgb), .04);--cute-header-hover-state-layer-shape: var(--bs-border-radius);--cute-header-focus-state-layer-color: rgba(var(--bs-body-color-rgb), .04);--cute-header-focus-state-layer-shape: var(--bs-border-radius);--cute-header-label-text-color: rgba(var(--bs-body-color-rgb), .54);--cute-header-label-text-weight: inherit;--cute-header-optional-label-text-color: rgba(var(--bs-body-color-rgb), .54);--cute-header-selected-state-label-text-color: rgba(var(--bs-body-color-rgb), .87);--cute-header-selected-state-label-text-weight: 500;--cute-header-error-state-label-text-color: var(--bs-form-invalid-color);--cute-header-error-state-label-text-size: var(--bs-body-font-size);overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:transparent}.cute-step-header:focus .cute-focus-indicator:before{content:\"\"}.cute-step-header:hover[aria-disabled=true]{cursor:default}.cute-step-header:hover:not([aria-disabled=true]),.cute-step-header:hover[aria-disabled=false]{background-color:var(--cute-header-hover-state-layer-color);border-radius:var(--cute-header-hover-state-layer-shape)}.cute-step-header.cdk-keyboard-focused,.cute-step-header.cdk-program-focused{background-color:var(--cute-header-focus-state-layer-color);border-radius:var(--cute-header-focus-state-layer-shape)}@media (hover: none){.cute-step-header:hover{background:none}}@media (forced-colors: active){.cute-step-header{outline:solid 1px}.cute-step-header[aria-selected=true] .cute-step-label{text-decoration:underline}.cute-step-header[aria-disabled=true]{outline-color:GrayText}.cute-step-header[aria-disabled=true] .cute-step-label,.cute-step-header[aria-disabled=true] .cute-step-icon,.cute-step-header[aria-disabled=true] .cute-step-optional{color:GrayText}}.cute-step-optional{font-size:12px;color:var(--cute-header-optional-label-text-color)}.cute-step-sub-label-error{font-size:12px;font-weight:400}.cute-step-icon{border-radius:50%;height:32px;width:32px;flex-shrink:0;position:relative;color:var(--cute-header-icon-foreground-color);background-color:var(--cute-header-icon-background-color)}.cute-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex}.cute-step-icon .cute-icon{font-size:16px;height:16px;width:16px}.cute-step-icon-state-error{background-color:var(--cute-header-error-state-icon-background-color);color:var(--cute-header-error-state-icon-foreground-color)}.cute-step-icon-state-error .cute-icon{font-size:24px;height:24px;width:24px}.cute-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--cute-header-label-text-font);font-size:var(--cute-header-label-text-size);font-weight:var(--cute-header-label-text-weight);color:var(--cute-header-label-text-color)}.cute-step-label.cute-step-label-active{color:var(--cute-header-selected-state-label-text-color)}.cute-step-label.cute-step-label-error{color:var(--cute-header-error-state-label-text-color);font-size:var(--cute-header-error-state-label-text-size)}.cute-step-label.cute-step-label-selected{font-size:var(--cute-header-selected-state-label-text-size);font-weight:var(--cute-header-selected-state-label-text-weight)}.cute-step-text-label{text-overflow:ellipsis;overflow:hidden}.cute-step-text-label:has(>:nth-child(2)){display:flex;flex-direction:column}.cute-step-text-label:has(>:nth-child(2))>*{text-overflow:ellipsis;overflow:hidden}.cute-step-header .cute-step-header-ripple{inset:0;position:absolute;pointer-events:none}.cute-step-icon-selected{background-color:var(--cute-header-icon-selected-background-color);color:var(--cute-header-icon-selected-foreground-color)}.cute-step-icon-state-done{background-color:var(--cute-header-done-state-icon-background-color);color:var(--cute-header-done-state-icon-foreground-color)}.cute-step-icon-state-edit{background-color:var(--cute-header-edit-state-icon-background-color);color:var(--cute-header-edit-state-icon-foreground-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuteIcon, selector: "cute-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon", "autoPrefix", "rotation", "featureIcon"], exportAs: ["cuteIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CuteStepHeader, isStandalone: true, selector: "cute-step-header", inputs: { state: "state", label: "label", errorMessage: "errorMessage", iconOverrides: "iconOverrides", index: "index", selected: ["selected", "selected", booleanAttribute], active: ["active", "active", booleanAttribute], optional: ["optional", "optional", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], color: "color" }, host: { attributes: { "role": "tab" }, properties: { "class.cute-step-header-empty-label": "_hasEmptyLabel()", "class": "\"cute-\" + (color || \"primary\")" }, classAttribute: "cute-step-header" }, usesInheritance: true, ngImport: i0, template: "<div class=\"cute-step-icon-state-{{state}} cute-step-icon\" [class.cute-step-icon-selected]=\"selected\">\r\n  <div class=\"cute-step-icon-content\">\r\n    @if (iconOverrides && iconOverrides[state]) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"iconOverrides[state]\"\r\n        [ngTemplateOutletContext]=\"_getIconContext()\">\r\n      </ng-container>\r\n    } @else {\r\n      @switch (state) {\r\n        @case ('number') {\r\n          <span aria-hidden=\"true\">{{_getDefaultTextForState(state)}}</span>\r\n        }\r\n        @default {\r\n          @if (state === 'done') {\r\n            <span class=\"cdk-visually-hidden\">{{_intl.completedLabel}}</span>\r\n          } @else if (state === 'edit') {\r\n            <span class=\"cdk-visually-hidden\">{{_intl.editableLabel}}</span>\r\n          }\r\n\r\n          <cute-icon aria-hidden=\"true\" fontIcon=\"{{_getDefaultTextForState(state)}}\"></cute-icon>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n<div class=\"cute-step-label\"\r\n     [class.cute-step-label-active]=\"active\"\r\n     [class.cute-step-label-selected]=\"selected\"\r\n     [class.cute-step-label-error]=\"state == 'error'\">\r\n  @if (_templateLabel(); as templateLabel) {\r\n    <!-- If there is a label template, use it. -->\r\n    <div class=\"cute-step-text-label\">\r\n        <ng-container [ngTemplateOutlet]=\"templateLabel.template\"></ng-container>\r\n    </div>\r\n  } @else if (_stringLabel()) {\r\n    <!-- If there is no label template, fall back to the text label. -->\r\n    <div class=\"cute-step-text-label\">\r\n        <span>{{label}}</span>\r\n    </div>\r\n  }\r\n\r\n  @if (optional && state != 'error') {\r\n    <div class=\"cute-step-optional\">{{_intl.optionalLabel}}</div>\r\n  }\r\n\r\n  @if (state === 'error') {\r\n    <div class=\"cute-step-sub-label-error\">{{errorMessage}}</div>\r\n  }\r\n</div>\r\n", styles: [".cute-step-header{--cute-stepper-theme-foreground-color: var(--bs-btn-color, white);--cute-stepper-theme-background-color: var(--bs-btn-bg, rgb(0,0,200));--cute-header-icon-foreground-color: var(--bs-body-bg, white);--cute-header-icon-background-color: var(--bs-body-color, rgba(var(--bs-body-color-rgb), .54));--cute-header-icon-selected-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-icon-selected-background-color: var(--cute-stepper-theme-background-color);--cute-header-done-state-icon-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-done-state-icon-background-color: var(--cute-stepper-theme-background-color);--cute-header-edit-state-icon-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-edit-state-icon-background-color: var(--cute-stepper-theme-background-color);--cute-header-error-state-icon-foreground-color: var(--bs-form-invalid-color);--cute-header-error-state-icon-background-color: transparent;--cute-header-hover-state-layer-color: rgba(var(--bs-body-color-rgb), .04);--cute-header-hover-state-layer-shape: var(--bs-border-radius);--cute-header-focus-state-layer-color: rgba(var(--bs-body-color-rgb), .04);--cute-header-focus-state-layer-shape: var(--bs-border-radius);--cute-header-label-text-color: rgba(var(--bs-body-color-rgb), .54);--cute-header-label-text-weight: inherit;--cute-header-optional-label-text-color: rgba(var(--bs-body-color-rgb), .54);--cute-header-selected-state-label-text-color: rgba(var(--bs-body-color-rgb), .87);--cute-header-selected-state-label-text-weight: 500;--cute-header-error-state-label-text-color: var(--bs-form-invalid-color);--cute-header-error-state-label-text-size: var(--bs-body-font-size);overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:transparent}.cute-step-header:focus .cute-focus-indicator:before{content:\"\"}.cute-step-header:hover[aria-disabled=true]{cursor:default}.cute-step-header:hover:not([aria-disabled=true]),.cute-step-header:hover[aria-disabled=false]{background-color:var(--cute-header-hover-state-layer-color);border-radius:var(--cute-header-hover-state-layer-shape)}.cute-step-header.cdk-keyboard-focused,.cute-step-header.cdk-program-focused{background-color:var(--cute-header-focus-state-layer-color);border-radius:var(--cute-header-focus-state-layer-shape)}@media(hover:none){.cute-step-header:hover{background:none}}@media(forced-colors:active){.cute-step-header{outline:solid 1px}.cute-step-header[aria-selected=true] .cute-step-label{text-decoration:underline}.cute-step-header[aria-disabled=true]{outline-color:GrayText}.cute-step-header[aria-disabled=true] .cute-step-label,.cute-step-header[aria-disabled=true] .cute-step-icon,.cute-step-header[aria-disabled=true] .cute-step-optional{color:GrayText}}.cute-step-optional{font-size:12px;color:var(--cute-header-optional-label-text-color)}.cute-step-sub-label-error{font-size:12px;font-weight:400}.cute-step-icon{border-radius:50%;height:32px;width:32px;flex-shrink:0;position:relative;color:var(--cute-header-icon-foreground-color);background-color:var(--cute-header-icon-background-color)}.cute-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex}.cute-step-icon .cute-icon{font-size:16px;height:16px;width:16px}.cute-step-icon-state-error{background-color:var(--cute-header-error-state-icon-background-color);color:var(--cute-header-error-state-icon-foreground-color)}.cute-step-icon-state-error .cute-icon{font-size:24px;height:24px;width:24px}.cute-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--cute-header-label-text-font);font-size:var(--cute-header-label-text-size);font-weight:var(--cute-header-label-text-weight);color:var(--cute-header-label-text-color)}.cute-step-label.cute-step-label-active{color:var(--cute-header-selected-state-label-text-color)}.cute-step-label.cute-step-label-error{color:var(--cute-header-error-state-label-text-color);font-size:var(--cute-header-error-state-label-text-size)}.cute-step-label.cute-step-label-selected{font-size:var(--cute-header-selected-state-label-text-size);font-weight:var(--cute-header-selected-state-label-text-weight)}.cute-step-text-label{text-overflow:ellipsis;overflow:hidden}.cute-step-text-label:has(>:nth-child(2)){display:flex;flex-direction:column}.cute-step-text-label:has(>:nth-child(2))>*{text-overflow:ellipsis;overflow:hidden}.cute-step-header .cute-step-header-ripple{inset:0;position:absolute;pointer-events:none}.cute-step-icon-selected{background-color:var(--cute-header-icon-selected-background-color);color:var(--cute-header-icon-selected-foreground-color)}.cute-step-icon-state-done{background-color:var(--cute-header-done-state-icon-background-color);color:var(--cute-header-done-state-icon-foreground-color)}.cute-step-icon-state-edit{background-color:var(--cute-header-edit-state-icon-background-color);color:var(--cute-header-edit-state-icon-foreground-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuteIcon, selector: "cute-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon", "autoPrefix", "rotation", "featureIcon"], exportAs: ["cuteIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepHeader, decorators: [{
             type: Component,
             args: [{ selector: 'cute-step-header', host: {
                         'class': 'cute-step-header',
                         '[class.cute-step-header-empty-label]': '_hasEmptyLabel()',
                         '[class]': '"cute-" + (color || "primary")',
                         'role': 'tab', // ignore cdk role in favor of setting appropriately in html
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, CuteIcon], template: "<div class=\"cute-step-icon-state-{{state}} cute-step-icon\" [class.cute-step-icon-selected]=\"selected\">\r\n  <div class=\"cute-step-icon-content\">\r\n    @if (iconOverrides && iconOverrides[state]) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"iconOverrides[state]\"\r\n        [ngTemplateOutletContext]=\"_getIconContext()\">\r\n      </ng-container>\r\n    } @else {\r\n      @switch (state) {\r\n        @case ('number') {\r\n          <span aria-hidden=\"true\">{{_getDefaultTextForState(state)}}</span>\r\n        }\r\n        @default {\r\n          @if (state === 'done') {\r\n            <span class=\"cdk-visually-hidden\">{{_intl.completedLabel}}</span>\r\n          } @else if (state === 'edit') {\r\n            <span class=\"cdk-visually-hidden\">{{_intl.editableLabel}}</span>\r\n          }\r\n\r\n          <cute-icon aria-hidden=\"true\" fontIcon=\"{{_getDefaultTextForState(state)}}\"></cute-icon>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n<div class=\"cute-step-label\"\r\n     [class.cute-step-label-active]=\"active\"\r\n     [class.cute-step-label-selected]=\"selected\"\r\n     [class.cute-step-label-error]=\"state == 'error'\">\r\n  @if (_templateLabel(); as templateLabel) {\r\n    <!-- If there is a label template, use it. -->\r\n    <div class=\"cute-step-text-label\">\r\n        <ng-container [ngTemplateOutlet]=\"templateLabel.template\"></ng-container>\r\n    </div>\r\n  } @else if (_stringLabel()) {\r\n    <!-- If there is no label template, fall back to the text label. -->\r\n    <div class=\"cute-step-text-label\">\r\n        <span>{{label}}</span>\r\n    </div>\r\n  }\r\n\r\n  @if (optional && state != 'error') {\r\n    <div class=\"cute-step-optional\">{{_intl.optionalLabel}}</div>\r\n  }\r\n\r\n  @if (state === 'error') {\r\n    <div class=\"cute-step-sub-label-error\">{{errorMessage}}</div>\r\n  }\r\n</div>\r\n", styles: [".cute-step-header{--cute-stepper-theme-foreground-color: var(--bs-btn-color, white);--cute-stepper-theme-background-color: var(--bs-btn-bg, rgb(0,0,200));--cute-header-icon-foreground-color: var(--bs-body-bg, white);--cute-header-icon-background-color: var(--bs-body-color, rgba(var(--bs-body-color-rgb), .54));--cute-header-icon-selected-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-icon-selected-background-color: var(--cute-stepper-theme-background-color);--cute-header-done-state-icon-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-done-state-icon-background-color: var(--cute-stepper-theme-background-color);--cute-header-edit-state-icon-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-edit-state-icon-background-color: var(--cute-stepper-theme-background-color);--cute-header-error-state-icon-foreground-color: var(--bs-form-invalid-color);--cute-header-error-state-icon-background-color: transparent;--cute-header-hover-state-layer-color: rgba(var(--bs-body-color-rgb), .04);--cute-header-hover-state-layer-shape: var(--bs-border-radius);--cute-header-focus-state-layer-color: rgba(var(--bs-body-color-rgb), .04);--cute-header-focus-state-layer-shape: var(--bs-border-radius);--cute-header-label-text-color: rgba(var(--bs-body-color-rgb), .54);--cute-header-label-text-weight: inherit;--cute-header-optional-label-text-color: rgba(var(--bs-body-color-rgb), .54);--cute-header-selected-state-label-text-color: rgba(var(--bs-body-color-rgb), .87);--cute-header-selected-state-label-text-weight: 500;--cute-header-error-state-label-text-color: var(--bs-form-invalid-color);--cute-header-error-state-label-text-size: var(--bs-body-font-size);overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:transparent}.cute-step-header:focus .cute-focus-indicator:before{content:\"\"}.cute-step-header:hover[aria-disabled=true]{cursor:default}.cute-step-header:hover:not([aria-disabled=true]),.cute-step-header:hover[aria-disabled=false]{background-color:var(--cute-header-hover-state-layer-color);border-radius:var(--cute-header-hover-state-layer-shape)}.cute-step-header.cdk-keyboard-focused,.cute-step-header.cdk-program-focused{background-color:var(--cute-header-focus-state-layer-color);border-radius:var(--cute-header-focus-state-layer-shape)}@media (hover: none){.cute-step-header:hover{background:none}}@media (forced-colors: active){.cute-step-header{outline:solid 1px}.cute-step-header[aria-selected=true] .cute-step-label{text-decoration:underline}.cute-step-header[aria-disabled=true]{outline-color:GrayText}.cute-step-header[aria-disabled=true] .cute-step-label,.cute-step-header[aria-disabled=true] .cute-step-icon,.cute-step-header[aria-disabled=true] .cute-step-optional{color:GrayText}}.cute-step-optional{font-size:12px;color:var(--cute-header-optional-label-text-color)}.cute-step-sub-label-error{font-size:12px;font-weight:400}.cute-step-icon{border-radius:50%;height:32px;width:32px;flex-shrink:0;position:relative;color:var(--cute-header-icon-foreground-color);background-color:var(--cute-header-icon-background-color)}.cute-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex}.cute-step-icon .cute-icon{font-size:16px;height:16px;width:16px}.cute-step-icon-state-error{background-color:var(--cute-header-error-state-icon-background-color);color:var(--cute-header-error-state-icon-foreground-color)}.cute-step-icon-state-error .cute-icon{font-size:24px;height:24px;width:24px}.cute-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--cute-header-label-text-font);font-size:var(--cute-header-label-text-size);font-weight:var(--cute-header-label-text-weight);color:var(--cute-header-label-text-color)}.cute-step-label.cute-step-label-active{color:var(--cute-header-selected-state-label-text-color)}.cute-step-label.cute-step-label-error{color:var(--cute-header-error-state-label-text-color);font-size:var(--cute-header-error-state-label-text-size)}.cute-step-label.cute-step-label-selected{font-size:var(--cute-header-selected-state-label-text-size);font-weight:var(--cute-header-selected-state-label-text-weight)}.cute-step-text-label{text-overflow:ellipsis;overflow:hidden}.cute-step-text-label:has(>:nth-child(2)){display:flex;flex-direction:column}.cute-step-text-label:has(>:nth-child(2))>*{text-overflow:ellipsis;overflow:hidden}.cute-step-header .cute-step-header-ripple{inset:0;position:absolute;pointer-events:none}.cute-step-icon-selected{background-color:var(--cute-header-icon-selected-background-color);color:var(--cute-header-icon-selected-foreground-color)}.cute-step-icon-state-done{background-color:var(--cute-header-done-state-icon-background-color);color:var(--cute-header-done-state-icon-foreground-color)}.cute-step-icon-state-edit{background-color:var(--cute-header-edit-state-icon-background-color);color:var(--cute-header-edit-state-icon-foreground-color)}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, CuteIcon], template: "<div class=\"cute-step-icon-state-{{state}} cute-step-icon\" [class.cute-step-icon-selected]=\"selected\">\r\n  <div class=\"cute-step-icon-content\">\r\n    @if (iconOverrides && iconOverrides[state]) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"iconOverrides[state]\"\r\n        [ngTemplateOutletContext]=\"_getIconContext()\">\r\n      </ng-container>\r\n    } @else {\r\n      @switch (state) {\r\n        @case ('number') {\r\n          <span aria-hidden=\"true\">{{_getDefaultTextForState(state)}}</span>\r\n        }\r\n        @default {\r\n          @if (state === 'done') {\r\n            <span class=\"cdk-visually-hidden\">{{_intl.completedLabel}}</span>\r\n          } @else if (state === 'edit') {\r\n            <span class=\"cdk-visually-hidden\">{{_intl.editableLabel}}</span>\r\n          }\r\n\r\n          <cute-icon aria-hidden=\"true\" fontIcon=\"{{_getDefaultTextForState(state)}}\"></cute-icon>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n<div class=\"cute-step-label\"\r\n     [class.cute-step-label-active]=\"active\"\r\n     [class.cute-step-label-selected]=\"selected\"\r\n     [class.cute-step-label-error]=\"state == 'error'\">\r\n  @if (_templateLabel(); as templateLabel) {\r\n    <!-- If there is a label template, use it. -->\r\n    <div class=\"cute-step-text-label\">\r\n        <ng-container [ngTemplateOutlet]=\"templateLabel.template\"></ng-container>\r\n    </div>\r\n  } @else if (_stringLabel()) {\r\n    <!-- If there is no label template, fall back to the text label. -->\r\n    <div class=\"cute-step-text-label\">\r\n        <span>{{label}}</span>\r\n    </div>\r\n  }\r\n\r\n  @if (optional && state != 'error') {\r\n    <div class=\"cute-step-optional\">{{_intl.optionalLabel}}</div>\r\n  }\r\n\r\n  @if (state === 'error') {\r\n    <div class=\"cute-step-sub-label-error\">{{errorMessage}}</div>\r\n  }\r\n</div>\r\n", styles: [".cute-step-header{--cute-stepper-theme-foreground-color: var(--bs-btn-color, white);--cute-stepper-theme-background-color: var(--bs-btn-bg, rgb(0,0,200));--cute-header-icon-foreground-color: var(--bs-body-bg, white);--cute-header-icon-background-color: var(--bs-body-color, rgba(var(--bs-body-color-rgb), .54));--cute-header-icon-selected-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-icon-selected-background-color: var(--cute-stepper-theme-background-color);--cute-header-done-state-icon-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-done-state-icon-background-color: var(--cute-stepper-theme-background-color);--cute-header-edit-state-icon-foreground-color: var(--cute-stepper-theme-foreground-color);--cute-header-edit-state-icon-background-color: var(--cute-stepper-theme-background-color);--cute-header-error-state-icon-foreground-color: var(--bs-form-invalid-color);--cute-header-error-state-icon-background-color: transparent;--cute-header-hover-state-layer-color: rgba(var(--bs-body-color-rgb), .04);--cute-header-hover-state-layer-shape: var(--bs-border-radius);--cute-header-focus-state-layer-color: rgba(var(--bs-body-color-rgb), .04);--cute-header-focus-state-layer-shape: var(--bs-border-radius);--cute-header-label-text-color: rgba(var(--bs-body-color-rgb), .54);--cute-header-label-text-weight: inherit;--cute-header-optional-label-text-color: rgba(var(--bs-body-color-rgb), .54);--cute-header-selected-state-label-text-color: rgba(var(--bs-body-color-rgb), .87);--cute-header-selected-state-label-text-weight: 500;--cute-header-error-state-label-text-color: var(--bs-form-invalid-color);--cute-header-error-state-label-text-size: var(--bs-body-font-size);overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:transparent}.cute-step-header:focus .cute-focus-indicator:before{content:\"\"}.cute-step-header:hover[aria-disabled=true]{cursor:default}.cute-step-header:hover:not([aria-disabled=true]),.cute-step-header:hover[aria-disabled=false]{background-color:var(--cute-header-hover-state-layer-color);border-radius:var(--cute-header-hover-state-layer-shape)}.cute-step-header.cdk-keyboard-focused,.cute-step-header.cdk-program-focused{background-color:var(--cute-header-focus-state-layer-color);border-radius:var(--cute-header-focus-state-layer-shape)}@media(hover:none){.cute-step-header:hover{background:none}}@media(forced-colors:active){.cute-step-header{outline:solid 1px}.cute-step-header[aria-selected=true] .cute-step-label{text-decoration:underline}.cute-step-header[aria-disabled=true]{outline-color:GrayText}.cute-step-header[aria-disabled=true] .cute-step-label,.cute-step-header[aria-disabled=true] .cute-step-icon,.cute-step-header[aria-disabled=true] .cute-step-optional{color:GrayText}}.cute-step-optional{font-size:12px;color:var(--cute-header-optional-label-text-color)}.cute-step-sub-label-error{font-size:12px;font-weight:400}.cute-step-icon{border-radius:50%;height:32px;width:32px;flex-shrink:0;position:relative;color:var(--cute-header-icon-foreground-color);background-color:var(--cute-header-icon-background-color)}.cute-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex}.cute-step-icon .cute-icon{font-size:16px;height:16px;width:16px}.cute-step-icon-state-error{background-color:var(--cute-header-error-state-icon-background-color);color:var(--cute-header-error-state-icon-foreground-color)}.cute-step-icon-state-error .cute-icon{font-size:24px;height:24px;width:24px}.cute-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--cute-header-label-text-font);font-size:var(--cute-header-label-text-size);font-weight:var(--cute-header-label-text-weight);color:var(--cute-header-label-text-color)}.cute-step-label.cute-step-label-active{color:var(--cute-header-selected-state-label-text-color)}.cute-step-label.cute-step-label-error{color:var(--cute-header-error-state-label-text-color);font-size:var(--cute-header-error-state-label-text-size)}.cute-step-label.cute-step-label-selected{font-size:var(--cute-header-selected-state-label-text-size);font-weight:var(--cute-header-selected-state-label-text-weight)}.cute-step-text-label{text-overflow:ellipsis;overflow:hidden}.cute-step-text-label:has(>:nth-child(2)){display:flex;flex-direction:column}.cute-step-text-label:has(>:nth-child(2))>*{text-overflow:ellipsis;overflow:hidden}.cute-step-header .cute-step-header-ripple{inset:0;position:absolute;pointer-events:none}.cute-step-icon-selected{background-color:var(--cute-header-icon-selected-background-color);color:var(--cute-header-icon-selected-foreground-color)}.cute-step-icon-state-done{background-color:var(--cute-header-done-state-icon-background-color);color:var(--cute-header-done-state-icon-foreground-color)}.cute-step-icon-state-edit{background-color:var(--cute-header-edit-state-icon-background-color);color:var(--cute-header-edit-state-icon-foreground-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { state: [{
                 type: Input
             }], label: [{
@@ -354,10 +354,10 @@ class CuteStepperIcon {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteStepperIcon, isStandalone: true, selector: "ng-template[cuteStepperIcon]", inputs: { name: ["cuteStepperIcon", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteStepperIcon, isStandalone: true, selector: "ng-template[cuteStepperIcon]", inputs: { name: ["cuteStepperIcon", "name"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cuteStepperIcon]',
@@ -516,12 +516,12 @@ class CuteStepper extends CdkStepper {
         this._isAnimating.set(false);
         this.animationDone.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteStepper, isStandalone: true, selector: "cute-stepper, cute-vertical-stepper, cute-horizontal-stepper, [cuteStepper]", inputs: { disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: false, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: false, isRequired: false, transformFunction: null }, headerPrefix: { classPropertyName: "headerPrefix", publicName: "headerPrefix", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.cute-stepper-horizontal": "orientation === \"horizontal\"", "class.cute-stepper-vertical": "orientation === \"vertical\"", "class.cute-stepper-label-position-end": "orientation === \"horizontal\" && labelPosition == \"end\"", "class.cute-stepper-label-position-bottom": "orientation === \"horizontal\" && labelPosition == \"bottom\"", "class.cute-stepper-header-position-bottom": "headerPosition === \"bottom\"", "class.cute-stepper-animating": "_isAnimating()", "style.--cute-stepper-animation-duration": "_getAnimationDuration()", "attr.aria-orientation": "orientation" }, classAttribute: "cute-stepper container" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CuteStepper, isStandalone: true, selector: "cute-stepper, cute-vertical-stepper, cute-horizontal-stepper, [cuteStepper]", inputs: { disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: false, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: false, isRequired: false, transformFunction: null }, headerPrefix: { classPropertyName: "headerPrefix", publicName: "headerPrefix", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.cute-stepper-horizontal": "orientation === \"horizontal\"", "class.cute-stepper-vertical": "orientation === \"vertical\"", "class.cute-stepper-label-position-end": "orientation === \"horizontal\" && labelPosition == \"end\"", "class.cute-stepper-label-position-bottom": "orientation === \"horizontal\" && labelPosition == \"bottom\"", "class.cute-stepper-header-position-bottom": "headerPosition === \"bottom\"", "class.cute-stepper-animating": "_isAnimating()", "style.--cute-stepper-animation-duration": "_getAnimationDuration()", "attr.aria-orientation": "orientation" }, classAttribute: "cute-stepper container" }, providers: [
             { provide: CdkStepper, useExisting: CuteStepper },
-        ], queries: [{ propertyName: "_steps", predicate: CuteStep, descendants: true }, { propertyName: "_icons", predicate: CuteStepperIcon, descendants: true }], viewQueries: [{ propertyName: "_stepHeader", predicate: CuteStepHeader, descendants: true }, { propertyName: "_animatedContainers", predicate: ["animatedContainer"], descendants: true }], exportAs: ["cuteStepper", "cuteVerticalStepper", "cuteHorizontalStepper"], usesInheritance: true, ngImport: i0, template: "<!--\r\n  We need to project the content somewhere to avoid hydration errors. Some observations:\r\n  1. This is only necessary on the server.\r\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\r\n  3. We get a hydration error if `ng-content` is wrapped in another element.\r\n-->\r\n@if (_isServer) {\r\n  <ng-content/>\r\n}\r\n\r\n@switch (orientation) {\r\n  @case ('horizontal') {\r\n    <div class=\"cute-horizontal-stepper-wrapper\">\r\n      <div class=\"cute-horizontal-stepper-header-container\">\r\n        @for (step of steps; track step) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"stepTemplate\"\r\n            [ngTemplateOutletContext]=\"{step: step}\">\r\n          </ng-container>\r\n          @if (!$last) {\r\n            <div class=\"cute-stepper-horizontal-line\"></div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <div class=\"cute-horizontal-content-container\">\r\n        @for (step of steps; track step) {\r\n          <div\r\n            #animatedContainer\r\n            class=\"cute-horizontal-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\r\n            [class]=\"'cute-horizontal-stepper-content-' + _getAnimationDirection($index)\"\r\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  @case ('vertical') {\r\n    @for (step of steps; track step) {\r\n      <div class=\"cute-step\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"stepTemplate\"\r\n          [ngTemplateOutletContext]=\"{step}\"/>\r\n        <div\r\n          #animatedContainer\r\n          class=\"cute-vertical-content-container\"\r\n          [class.cute-stepper-vertical-line]=\"!$last\"\r\n          [class.cute-vertical-content-container-active]=\"selectedIndex === $index\"\r\n          [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n          <div class=\"cute-vertical-stepper-content\"\r\n               role=\"tabpanel\"\r\n               [id]=\"_getStepContentId($index)\"\r\n               [attr.aria-labelledby]=\"_getStepLabelId($index)\">\r\n            <div class=\"cute-vertical-content\">\r\n              <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- Common step templating -->\r\n<!--\r\n  We use Bootstrap's 'btn-{color}' CSS class for the specified theme color.\r\n  See: [class]=\"color ? 'btn-'+color : ''\"\r\n-->\r\n<ng-template let-step=\"step\" #stepTemplate>\r\n  @let i = step.index();\r\n  @let isNavigable = step.isNavigable();\r\n  <cute-step-header\r\n    [class.cute-horizontal-stepper-header]=\"orientation === 'horizontal'\"\r\n    [class.cute-vertical-stepper-header]=\"orientation === 'vertical'\"\r\n    [class]=\"color ? 'btn-'+color : ''\"\r\n    (click)=\"step.select()\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\r\n    [id]=\"_getStepLabelId(i)\"\r\n    [attr.aria-posinset]=\"i + 1\"\r\n    [attr.aria-setsize]=\"steps.length\"\r\n    [attr.aria-controls]=\"_getStepContentId(i)\"\r\n    [attr.aria-selected]=\"step.isSelected()\"\r\n    [attr.aria-label]=\"step.ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\r\n    [attr.aria-disabled]=\"isNavigable ? null : 'true'\"\r\n    [index]=\"i\"\r\n    [state]=\"step.indicatorType()\"\r\n    [label]=\"step.stepLabel || step.label\"\r\n    [selected]=\"step.isSelected()\"\r\n    [active]=\"isNavigable\"\r\n    [optional]=\"step.optional\"\r\n    [errorMessage]=\"step.errorMessage\"\r\n    [iconOverrides]=\"_iconOverrides\"\r\n    [disableRipple]=\"disableRipple || !isNavigable\"\r\n    [color]=\"step.color || color\">\r\n  </cute-step-header>\r\n</ng-template>\r\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cute-stepper{--cute-stepper-container-color: var(--bs-body-bg);--cute-stepper-line-color: var(--bs-border-color-translucent);display:block}.cute-stepper-vertical,.cute-stepper-horizontal{display:block;font-family:var(--bs-body-font-family);background:var(--bs-body-bg)}.cute-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header-container{align-items:flex-start}.cute-stepper-header-position-bottom .cute-horizontal-stepper-header-container{order:1}.cute-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--cute-stepper-line-color)}.cute-stepper-label-position-bottom .cute-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):before,.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):after,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.cute-horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 24px;height:72px}.cute-horizontal-stepper-header .cute-step-icon{margin-right:8px;flex:none}[dir=rtl] .cute-horizontal-stepper-header .cute-step-icon{margin-right:0;margin-left:8px}.cute-horizontal-stepper-header:before,.cute-horizontal-stepper-header:after{border-top-color:var(--cute-stepper-line-color)}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header{padding:20px 24px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:before,.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:after{top:36px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):after,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):after{right:0}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):before{left:0}[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:last-child:before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:first-child:after{display:none}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header .cute-step-icon{margin-right:0;margin-left:0}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header .cute-step-label{padding:16px 0 0;text-align:center;width:100%}.cute-vertical-stepper-header{display:flex;align-items:center;height:32px;padding:20px 24px}.cute-vertical-stepper-header .cute-step-icon{margin-right:16px}[dir=rtl] .cute-vertical-stepper-header .cute-step-icon{margin-right:0;margin-left:16px}.cute-horizontal-stepper-wrapper{display:flex;flex-direction:column}.cute-horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.cute-stepper-animations-enabled .cute-horizontal-stepper-content{transition:transform var(--cute-stepper-animation-duration, 0) cubic-bezier(.35,0,.25,1)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-previous{transform:translate3d(-100%,0,0)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-next{transform:translate3d(100%,0,0)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.cute-stepper-horizontal:not(.cute-stepper-animating) .cute-horizontal-stepper-content.cute-horizontal-stepper-content-current{overflow:visible}.cute-horizontal-content-container{overflow:hidden;padding:0 24px 24px}@media (forced-colors: active){.cute-horizontal-content-container{outline:solid 1px}}.cute-stepper-header-position-bottom .cute-horizontal-content-container{padding:24px 24px 0}.cute-vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:40px;border:0;position:relative}.cute-stepper-animations-enabled .cute-vertical-content-container{transition:grid-template-rows var(--cute-stepper-animation-duration, 0) cubic-bezier(.4,0,.2,1)}.cute-vertical-content-container.cute-vertical-content-container-active{grid-template-rows:1fr}@media (forced-colors: active){.cute-vertical-content-container{outline:solid 1px}}[dir=rtl] .cute-vertical-content-container{margin-left:0;margin-right:40px}.cute-stepper-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--cute-stepper-line-color);top:-12px;bottom:-12px}[dir=rtl] .cute-stepper-vertical-line:before{left:auto;right:0}.cute-vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.cute-stepper-animations-enabled .cute-vertical-stepper-content{transition:visibility var(--cute-stepper-animation-duration, 0) linear}.cute-vertical-content-container-active>.cute-vertical-stepper-content{visibility:visible}.cute-vertical-content{padding:0 24px 24px}.cute-step:last-child .cute-vertical-content-container{border:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuteStepHeader, selector: "cute-step-header", inputs: ["state", "label", "errorMessage", "iconOverrides", "index", "selected", "active", "optional", "disableRipple", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_steps", predicate: CuteStep, descendants: true }, { propertyName: "_icons", predicate: CuteStepperIcon, descendants: true }], viewQueries: [{ propertyName: "_stepHeader", predicate: CuteStepHeader, descendants: true }, { propertyName: "_animatedContainers", predicate: ["animatedContainer"], descendants: true }], exportAs: ["cuteStepper", "cuteVerticalStepper", "cuteHorizontalStepper"], usesInheritance: true, ngImport: i0, template: "<!--\r\n  We need to project the content somewhere to avoid hydration errors. Some observations:\r\n  1. This is only necessary on the server.\r\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\r\n  3. We get a hydration error if `ng-content` is wrapped in another element.\r\n-->\r\n@if (_isServer) {\r\n  <ng-content/>\r\n}\r\n\r\n@switch (orientation) {\r\n  @case ('horizontal') {\r\n    <div class=\"cute-horizontal-stepper-wrapper\">\r\n      <div class=\"cute-horizontal-stepper-header-container\">\r\n        @for (step of steps; track step) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"stepTemplate\"\r\n            [ngTemplateOutletContext]=\"{step: step}\">\r\n          </ng-container>\r\n          @if (!$last) {\r\n            <div class=\"cute-stepper-horizontal-line\"></div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <div class=\"cute-horizontal-content-container\">\r\n        @for (step of steps; track step) {\r\n          <div\r\n            #animatedContainer\r\n            class=\"cute-horizontal-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\r\n            [class]=\"'cute-horizontal-stepper-content-' + _getAnimationDirection($index)\"\r\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  @case ('vertical') {\r\n    @for (step of steps; track step) {\r\n      <div class=\"cute-step\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"stepTemplate\"\r\n          [ngTemplateOutletContext]=\"{step}\"/>\r\n        <div\r\n          #animatedContainer\r\n          class=\"cute-vertical-content-container\"\r\n          [class.cute-stepper-vertical-line]=\"!$last\"\r\n          [class.cute-vertical-content-container-active]=\"selectedIndex === $index\"\r\n          [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n          <div class=\"cute-vertical-stepper-content\"\r\n               role=\"tabpanel\"\r\n               [id]=\"_getStepContentId($index)\"\r\n               [attr.aria-labelledby]=\"_getStepLabelId($index)\">\r\n            <div class=\"cute-vertical-content\">\r\n              <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- Common step templating -->\r\n<!--\r\n  We use Bootstrap's 'btn-{color}' CSS class for the specified theme color.\r\n  See: [class]=\"color ? 'btn-'+color : ''\"\r\n-->\r\n<ng-template let-step=\"step\" #stepTemplate>\r\n  @let i = step.index();\r\n  @let isNavigable = step.isNavigable();\r\n  <cute-step-header\r\n    [class.cute-horizontal-stepper-header]=\"orientation === 'horizontal'\"\r\n    [class.cute-vertical-stepper-header]=\"orientation === 'vertical'\"\r\n    [class]=\"color ? 'btn-'+color : ''\"\r\n    (click)=\"step.select()\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\r\n    [id]=\"_getStepLabelId(i)\"\r\n    [attr.aria-posinset]=\"i + 1\"\r\n    [attr.aria-setsize]=\"steps.length\"\r\n    [attr.aria-controls]=\"_getStepContentId(i)\"\r\n    [attr.aria-selected]=\"step.isSelected()\"\r\n    [attr.aria-label]=\"step.ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\r\n    [attr.aria-disabled]=\"isNavigable ? null : 'true'\"\r\n    [index]=\"i\"\r\n    [state]=\"step.indicatorType()\"\r\n    [label]=\"step.stepLabel || step.label\"\r\n    [selected]=\"step.isSelected()\"\r\n    [active]=\"isNavigable\"\r\n    [optional]=\"step.optional\"\r\n    [errorMessage]=\"step.errorMessage\"\r\n    [iconOverrides]=\"_iconOverrides\"\r\n    [disableRipple]=\"disableRipple || !isNavigable\"\r\n    [color]=\"step.color || color\">\r\n  </cute-step-header>\r\n</ng-template>\r\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cute-stepper{--cute-stepper-container-color: var(--bs-body-bg);--cute-stepper-line-color: var(--bs-border-color-translucent);display:block}.cute-stepper-vertical,.cute-stepper-horizontal{display:block;font-family:var(--bs-body-font-family);background:var(--bs-body-bg)}.cute-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header-container{align-items:flex-start}.cute-stepper-header-position-bottom .cute-horizontal-stepper-header-container{order:1}.cute-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--cute-stepper-line-color)}.cute-stepper-label-position-bottom .cute-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):before,.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):after,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.cute-horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 24px;height:72px}.cute-horizontal-stepper-header .cute-step-icon{margin-right:8px;flex:none}[dir=rtl] .cute-horizontal-stepper-header .cute-step-icon{margin-right:0;margin-left:8px}.cute-horizontal-stepper-header:before,.cute-horizontal-stepper-header:after{border-top-color:var(--cute-stepper-line-color)}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header{padding:20px 24px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:before,.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:after{top:36px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):after,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):after{right:0}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):before{left:0}[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:last-child:before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:first-child:after{display:none}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header .cute-step-icon{margin-right:0;margin-left:0}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header .cute-step-label{padding:16px 0 0;text-align:center;width:100%}.cute-vertical-stepper-header{display:flex;align-items:center;height:32px;padding:20px 24px}.cute-vertical-stepper-header .cute-step-icon{margin-right:16px}[dir=rtl] .cute-vertical-stepper-header .cute-step-icon{margin-right:0;margin-left:16px}.cute-horizontal-stepper-wrapper{display:flex;flex-direction:column}.cute-horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.cute-stepper-animations-enabled .cute-horizontal-stepper-content{transition:transform var(--cute-stepper-animation-duration, 0) cubic-bezier(.35,0,.25,1)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-previous{transform:translate3d(-100%,0,0)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-next{transform:translate3d(100%,0,0)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.cute-stepper-horizontal:not(.cute-stepper-animating) .cute-horizontal-stepper-content.cute-horizontal-stepper-content-current{overflow:visible}.cute-horizontal-content-container{overflow:hidden;padding:0 24px 24px}@media(forced-colors:active){.cute-horizontal-content-container{outline:solid 1px}}.cute-stepper-header-position-bottom .cute-horizontal-content-container{padding:24px 24px 0}.cute-vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:40px;border:0;position:relative}.cute-stepper-animations-enabled .cute-vertical-content-container{transition:grid-template-rows var(--cute-stepper-animation-duration, 0) cubic-bezier(.4,0,.2,1)}.cute-vertical-content-container.cute-vertical-content-container-active{grid-template-rows:1fr}@media(forced-colors:active){.cute-vertical-content-container{outline:solid 1px}}[dir=rtl] .cute-vertical-content-container{margin-left:0;margin-right:40px}.cute-stepper-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--cute-stepper-line-color);top:-12px;bottom:-12px}[dir=rtl] .cute-stepper-vertical-line:before{left:auto;right:0}.cute-vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.cute-stepper-animations-enabled .cute-vertical-stepper-content{transition:visibility var(--cute-stepper-animation-duration, 0) linear}.cute-vertical-content-container-active>.cute-vertical-stepper-content{visibility:visible}.cute-vertical-content{padding:0 24px 24px}.cute-step:last-child .cute-vertical-content-container{border:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuteStepHeader, selector: "cute-step-header", inputs: ["state", "label", "errorMessage", "iconOverrides", "index", "selected", "active", "optional", "disableRipple", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepper, decorators: [{
             type: Component,
             args: [{ selector: 'cute-stepper, cute-vertical-stepper, cute-horizontal-stepper, [cuteStepper]', exportAs: 'cuteStepper, cuteVerticalStepper, cuteHorizontalStepper', host: {
                         'class': 'cute-stepper container',
@@ -536,7 +536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         'role': 'tablist',
                     }, providers: [
                         { provide: CdkStepper, useExisting: CuteStepper },
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, CuteStepHeader], template: "<!--\r\n  We need to project the content somewhere to avoid hydration errors. Some observations:\r\n  1. This is only necessary on the server.\r\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\r\n  3. We get a hydration error if `ng-content` is wrapped in another element.\r\n-->\r\n@if (_isServer) {\r\n  <ng-content/>\r\n}\r\n\r\n@switch (orientation) {\r\n  @case ('horizontal') {\r\n    <div class=\"cute-horizontal-stepper-wrapper\">\r\n      <div class=\"cute-horizontal-stepper-header-container\">\r\n        @for (step of steps; track step) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"stepTemplate\"\r\n            [ngTemplateOutletContext]=\"{step: step}\">\r\n          </ng-container>\r\n          @if (!$last) {\r\n            <div class=\"cute-stepper-horizontal-line\"></div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <div class=\"cute-horizontal-content-container\">\r\n        @for (step of steps; track step) {\r\n          <div\r\n            #animatedContainer\r\n            class=\"cute-horizontal-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\r\n            [class]=\"'cute-horizontal-stepper-content-' + _getAnimationDirection($index)\"\r\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  @case ('vertical') {\r\n    @for (step of steps; track step) {\r\n      <div class=\"cute-step\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"stepTemplate\"\r\n          [ngTemplateOutletContext]=\"{step}\"/>\r\n        <div\r\n          #animatedContainer\r\n          class=\"cute-vertical-content-container\"\r\n          [class.cute-stepper-vertical-line]=\"!$last\"\r\n          [class.cute-vertical-content-container-active]=\"selectedIndex === $index\"\r\n          [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n          <div class=\"cute-vertical-stepper-content\"\r\n               role=\"tabpanel\"\r\n               [id]=\"_getStepContentId($index)\"\r\n               [attr.aria-labelledby]=\"_getStepLabelId($index)\">\r\n            <div class=\"cute-vertical-content\">\r\n              <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- Common step templating -->\r\n<!--\r\n  We use Bootstrap's 'btn-{color}' CSS class for the specified theme color.\r\n  See: [class]=\"color ? 'btn-'+color : ''\"\r\n-->\r\n<ng-template let-step=\"step\" #stepTemplate>\r\n  @let i = step.index();\r\n  @let isNavigable = step.isNavigable();\r\n  <cute-step-header\r\n    [class.cute-horizontal-stepper-header]=\"orientation === 'horizontal'\"\r\n    [class.cute-vertical-stepper-header]=\"orientation === 'vertical'\"\r\n    [class]=\"color ? 'btn-'+color : ''\"\r\n    (click)=\"step.select()\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\r\n    [id]=\"_getStepLabelId(i)\"\r\n    [attr.aria-posinset]=\"i + 1\"\r\n    [attr.aria-setsize]=\"steps.length\"\r\n    [attr.aria-controls]=\"_getStepContentId(i)\"\r\n    [attr.aria-selected]=\"step.isSelected()\"\r\n    [attr.aria-label]=\"step.ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\r\n    [attr.aria-disabled]=\"isNavigable ? null : 'true'\"\r\n    [index]=\"i\"\r\n    [state]=\"step.indicatorType()\"\r\n    [label]=\"step.stepLabel || step.label\"\r\n    [selected]=\"step.isSelected()\"\r\n    [active]=\"isNavigable\"\r\n    [optional]=\"step.optional\"\r\n    [errorMessage]=\"step.errorMessage\"\r\n    [iconOverrides]=\"_iconOverrides\"\r\n    [disableRipple]=\"disableRipple || !isNavigable\"\r\n    [color]=\"step.color || color\">\r\n  </cute-step-header>\r\n</ng-template>\r\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cute-stepper{--cute-stepper-container-color: var(--bs-body-bg);--cute-stepper-line-color: var(--bs-border-color-translucent);display:block}.cute-stepper-vertical,.cute-stepper-horizontal{display:block;font-family:var(--bs-body-font-family);background:var(--bs-body-bg)}.cute-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header-container{align-items:flex-start}.cute-stepper-header-position-bottom .cute-horizontal-stepper-header-container{order:1}.cute-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--cute-stepper-line-color)}.cute-stepper-label-position-bottom .cute-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):before,.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):after,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.cute-horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 24px;height:72px}.cute-horizontal-stepper-header .cute-step-icon{margin-right:8px;flex:none}[dir=rtl] .cute-horizontal-stepper-header .cute-step-icon{margin-right:0;margin-left:8px}.cute-horizontal-stepper-header:before,.cute-horizontal-stepper-header:after{border-top-color:var(--cute-stepper-line-color)}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header{padding:20px 24px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:before,.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:after{top:36px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):after,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):after{right:0}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):before{left:0}[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:last-child:before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:first-child:after{display:none}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header .cute-step-icon{margin-right:0;margin-left:0}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header .cute-step-label{padding:16px 0 0;text-align:center;width:100%}.cute-vertical-stepper-header{display:flex;align-items:center;height:32px;padding:20px 24px}.cute-vertical-stepper-header .cute-step-icon{margin-right:16px}[dir=rtl] .cute-vertical-stepper-header .cute-step-icon{margin-right:0;margin-left:16px}.cute-horizontal-stepper-wrapper{display:flex;flex-direction:column}.cute-horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.cute-stepper-animations-enabled .cute-horizontal-stepper-content{transition:transform var(--cute-stepper-animation-duration, 0) cubic-bezier(.35,0,.25,1)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-previous{transform:translate3d(-100%,0,0)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-next{transform:translate3d(100%,0,0)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.cute-stepper-horizontal:not(.cute-stepper-animating) .cute-horizontal-stepper-content.cute-horizontal-stepper-content-current{overflow:visible}.cute-horizontal-content-container{overflow:hidden;padding:0 24px 24px}@media (forced-colors: active){.cute-horizontal-content-container{outline:solid 1px}}.cute-stepper-header-position-bottom .cute-horizontal-content-container{padding:24px 24px 0}.cute-vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:40px;border:0;position:relative}.cute-stepper-animations-enabled .cute-vertical-content-container{transition:grid-template-rows var(--cute-stepper-animation-duration, 0) cubic-bezier(.4,0,.2,1)}.cute-vertical-content-container.cute-vertical-content-container-active{grid-template-rows:1fr}@media (forced-colors: active){.cute-vertical-content-container{outline:solid 1px}}[dir=rtl] .cute-vertical-content-container{margin-left:0;margin-right:40px}.cute-stepper-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--cute-stepper-line-color);top:-12px;bottom:-12px}[dir=rtl] .cute-stepper-vertical-line:before{left:auto;right:0}.cute-vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.cute-stepper-animations-enabled .cute-vertical-stepper-content{transition:visibility var(--cute-stepper-animation-duration, 0) linear}.cute-vertical-content-container-active>.cute-vertical-stepper-content{visibility:visible}.cute-vertical-content{padding:0 24px 24px}.cute-step:last-child .cute-vertical-content-container{border:none}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, CuteStepHeader], template: "<!--\r\n  We need to project the content somewhere to avoid hydration errors. Some observations:\r\n  1. This is only necessary on the server.\r\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\r\n  3. We get a hydration error if `ng-content` is wrapped in another element.\r\n-->\r\n@if (_isServer) {\r\n  <ng-content/>\r\n}\r\n\r\n@switch (orientation) {\r\n  @case ('horizontal') {\r\n    <div class=\"cute-horizontal-stepper-wrapper\">\r\n      <div class=\"cute-horizontal-stepper-header-container\">\r\n        @for (step of steps; track step) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"stepTemplate\"\r\n            [ngTemplateOutletContext]=\"{step: step}\">\r\n          </ng-container>\r\n          @if (!$last) {\r\n            <div class=\"cute-stepper-horizontal-line\"></div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <div class=\"cute-horizontal-content-container\">\r\n        @for (step of steps; track step) {\r\n          <div\r\n            #animatedContainer\r\n            class=\"cute-horizontal-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\r\n            [class]=\"'cute-horizontal-stepper-content-' + _getAnimationDirection($index)\"\r\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  @case ('vertical') {\r\n    @for (step of steps; track step) {\r\n      <div class=\"cute-step\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"stepTemplate\"\r\n          [ngTemplateOutletContext]=\"{step}\"/>\r\n        <div\r\n          #animatedContainer\r\n          class=\"cute-vertical-content-container\"\r\n          [class.cute-stepper-vertical-line]=\"!$last\"\r\n          [class.cute-vertical-content-container-active]=\"selectedIndex === $index\"\r\n          [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n          <div class=\"cute-vertical-stepper-content\"\r\n               role=\"tabpanel\"\r\n               [id]=\"_getStepContentId($index)\"\r\n               [attr.aria-labelledby]=\"_getStepLabelId($index)\">\r\n            <div class=\"cute-vertical-content\">\r\n              <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- Common step templating -->\r\n<!--\r\n  We use Bootstrap's 'btn-{color}' CSS class for the specified theme color.\r\n  See: [class]=\"color ? 'btn-'+color : ''\"\r\n-->\r\n<ng-template let-step=\"step\" #stepTemplate>\r\n  @let i = step.index();\r\n  @let isNavigable = step.isNavigable();\r\n  <cute-step-header\r\n    [class.cute-horizontal-stepper-header]=\"orientation === 'horizontal'\"\r\n    [class.cute-vertical-stepper-header]=\"orientation === 'vertical'\"\r\n    [class]=\"color ? 'btn-'+color : ''\"\r\n    (click)=\"step.select()\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\r\n    [id]=\"_getStepLabelId(i)\"\r\n    [attr.aria-posinset]=\"i + 1\"\r\n    [attr.aria-setsize]=\"steps.length\"\r\n    [attr.aria-controls]=\"_getStepContentId(i)\"\r\n    [attr.aria-selected]=\"step.isSelected()\"\r\n    [attr.aria-label]=\"step.ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\r\n    [attr.aria-disabled]=\"isNavigable ? null : 'true'\"\r\n    [index]=\"i\"\r\n    [state]=\"step.indicatorType()\"\r\n    [label]=\"step.stepLabel || step.label\"\r\n    [selected]=\"step.isSelected()\"\r\n    [active]=\"isNavigable\"\r\n    [optional]=\"step.optional\"\r\n    [errorMessage]=\"step.errorMessage\"\r\n    [iconOverrides]=\"_iconOverrides\"\r\n    [disableRipple]=\"disableRipple || !isNavigable\"\r\n    [color]=\"step.color || color\">\r\n  </cute-step-header>\r\n</ng-template>\r\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cute-stepper{--cute-stepper-container-color: var(--bs-body-bg);--cute-stepper-line-color: var(--bs-border-color-translucent);display:block}.cute-stepper-vertical,.cute-stepper-horizontal{display:block;font-family:var(--bs-body-font-family);background:var(--bs-body-bg)}.cute-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header-container{align-items:flex-start}.cute-stepper-header-position-bottom .cute-horizontal-stepper-header-container{order:1}.cute-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--cute-stepper-line-color)}.cute-stepper-label-position-bottom .cute-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):before,.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):after,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.cute-horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 24px;height:72px}.cute-horizontal-stepper-header .cute-step-icon{margin-right:8px;flex:none}[dir=rtl] .cute-horizontal-stepper-header .cute-step-icon{margin-right:0;margin-left:8px}.cute-horizontal-stepper-header:before,.cute-horizontal-stepper-header:after{border-top-color:var(--cute-stepper-line-color)}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header{padding:20px 24px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:before,.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:after{top:36px}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):after,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):after{right:0}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:first-child):before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:not(:last-child):before{left:0}[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:last-child:before,[dir=rtl] .cute-stepper-label-position-bottom .cute-horizontal-stepper-header:first-child:after{display:none}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header .cute-step-icon{margin-right:0;margin-left:0}.cute-stepper-label-position-bottom .cute-horizontal-stepper-header .cute-step-label{padding:16px 0 0;text-align:center;width:100%}.cute-vertical-stepper-header{display:flex;align-items:center;height:32px;padding:20px 24px}.cute-vertical-stepper-header .cute-step-icon{margin-right:16px}[dir=rtl] .cute-vertical-stepper-header .cute-step-icon{margin-right:0;margin-left:16px}.cute-horizontal-stepper-wrapper{display:flex;flex-direction:column}.cute-horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.cute-stepper-animations-enabled .cute-horizontal-stepper-content{transition:transform var(--cute-stepper-animation-duration, 0) cubic-bezier(.35,0,.25,1)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-previous{transform:translate3d(-100%,0,0)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-next{transform:translate3d(100%,0,0)}.cute-horizontal-stepper-content.cute-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.cute-stepper-horizontal:not(.cute-stepper-animating) .cute-horizontal-stepper-content.cute-horizontal-stepper-content-current{overflow:visible}.cute-horizontal-content-container{overflow:hidden;padding:0 24px 24px}@media(forced-colors:active){.cute-horizontal-content-container{outline:solid 1px}}.cute-stepper-header-position-bottom .cute-horizontal-content-container{padding:24px 24px 0}.cute-vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:40px;border:0;position:relative}.cute-stepper-animations-enabled .cute-vertical-content-container{transition:grid-template-rows var(--cute-stepper-animation-duration, 0) cubic-bezier(.4,0,.2,1)}.cute-vertical-content-container.cute-vertical-content-container-active{grid-template-rows:1fr}@media(forced-colors:active){.cute-vertical-content-container{outline:solid 1px}}[dir=rtl] .cute-vertical-content-container{margin-left:0;margin-right:40px}.cute-stepper-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--cute-stepper-line-color);top:-12px;bottom:-12px}[dir=rtl] .cute-stepper-vertical-line:before{left:auto;right:0}.cute-vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.cute-stepper-animations-enabled .cute-vertical-stepper-content{transition:visibility var(--cute-stepper-animation-duration, 0) linear}.cute-vertical-content-container-active>.cute-vertical-stepper-content{visibility:visible}.cute-vertical-content{padding:0 24px 24px}.cute-step:last-child .cute-vertical-content-container{border:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _stepHeader: [{
                 type: ViewChildren,
                 args: [CuteStepHeader]
@@ -577,10 +577,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 /** Button that moves to the next step in a stepper workflow. */
 class CuteStepperNext extends CdkStepperNext {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperNext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteStepperNext, isStandalone: true, selector: "button[cuteStepperNext]", host: { properties: { "type": "type" }, classAttribute: "cute-stepper-next" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperNext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteStepperNext, isStandalone: true, selector: "button[cuteStepperNext]", host: { properties: { "type": "type" }, classAttribute: "cute-stepper-next" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperNext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperNext, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[cuteStepperNext]',
@@ -593,10 +593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }] });
 /** Button that moves to the previous step in a stepper workflow. */
 class CuteStepperPrevious extends CdkStepperPrevious {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperPrevious, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteStepperPrevious, isStandalone: true, selector: "button[cuteStepperPrevious]", host: { properties: { "type": "type" }, classAttribute: "cute-stepper-previous" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperPrevious, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteStepperPrevious, isStandalone: true, selector: "button[cuteStepperPrevious]", host: { properties: { "type": "type" }, classAttribute: "cute-stepper-previous" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperPrevious, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperPrevious, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[cuteStepperPrevious]',
@@ -632,8 +632,8 @@ const TYPES = [
     CuteStepperPrevious
 ];
 class CuteStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperModule, imports: [CommonModule, CdkStepperModule, CuteStepper,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperModule, imports: [CommonModule, CdkStepperModule, CuteStepper,
             CuteStep,
             CuteStepLabel,
             CuteStepLabelTitle,
@@ -652,10 +652,10 @@ class CuteStepperModule {
             CuteStepperIcon,
             CuteStepperNext,
             CuteStepperPrevious] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperModule, providers: [ErrorStateMatcher], imports: [CommonModule, CdkStepperModule, CuteStepper,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperModule, providers: [ErrorStateMatcher], imports: [CommonModule, CdkStepperModule, CuteStepper,
             CuteStepHeader] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, CdkStepperModule, ...TYPES],