@gravionlabs/helix-core 22.1.1 → 22.1.3

package/fesm2022/gravionlabs-helix-core-stepper.mjs

@@ -1,154 +1,144 @@
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, contentChildren, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, model, computed, contentChild, effect, input, signal, NgModule } from '@angular/core';
-import { find, findIndexInList, uuid } from '@gravionlabs/helix-core/uix/utils';
-import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
-import * as i3 from '@gravionlabs/helix-core/motion';
-import { MotionModule } from '@gravionlabs/helix-core/motion';
-import { transformToBoolean } from '@gravionlabs/helix-core/utils';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const classes$5 = {
-    root: ({ instance }) => [
-        'h-stepitem',
-        {
-            'h-stepitem-active': instance.isActive()
-        }
-    ]
+import * as i2 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, computed, contentChild, contentChildren, effect, forwardRef, inject, input, model, signal } from "@angular/core";
+import { find, findIndexInList, uuid } from "@gravionlabs/helix-core/uix/utils";
+import { HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import * as i3 from "@gravionlabs/helix-core/motion";
+import { MotionModule } from "@gravionlabs/helix-core/motion";
+import { transformToBoolean } from "@gravionlabs/helix-core/utils";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+const classes$5 = { root: ({ instance }) => ["h-stepitem", { "h-stepitem-active": instance.isActive() }] };
+var StepItemStyle = class StepItemStyle extends BaseStyle {
+	name = "stepitem";
+	classes = classes$5;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepItemStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepItemStyle
+	});
 };
-class StepItemStyle extends BaseStyle {
-    name = 'stepitem';
-    classes = classes$5;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepItemStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepItemStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepItemStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
- *
- * [Live Demo](https://www.primeng.org/stepper/)
- *
- * @module stepitemstyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepItemStyle,
+	decorators: [{ type: Injectable }]
+});
 var StepItemClasses;
-(function (StepItemClasses) {
-    /**
-     * Class name of the root element
-     */
-    StepItemClasses["root"] = "h-stepitem";
+(function(StepItemClasses) {
+	StepItemClasses["root"] = "h-stepitem";
 })(StepItemClasses || (StepItemClasses = {}));
-
-const classes$4 = {
-    root: 'h-steplist'
+const classes$4 = { root: "h-steplist" };
+var StepListStyle = class StepListStyle extends BaseStyle {
+	name = "steplist";
+	classes = classes$4;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepListStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepListStyle
+	});
 };
-class StepListStyle extends BaseStyle {
-    name = 'steplist';
-    classes = classes$4;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepListStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepListStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
- *
- * [Live Demo](https://www.primeng.org/stepper/)
- *
- * @module stepliststyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepListStyle,
+	decorators: [{ type: Injectable }]
+});
 var StepListClasses;
-(function (StepListClasses) {
-    /**
-     * Class name of the root element
-     */
-    StepListClasses["root"] = "h-stepitem";
+(function(StepListClasses) {
+	StepListClasses["root"] = "h-stepitem";
 })(StepListClasses || (StepListClasses = {}));
-
-const classes$3 = {
-    root: 'h-steppanels'
+const classes$3 = { root: "h-steppanels" };
+var StepPanelsStyle = class StepPanelsStyle extends BaseStyle {
+	name = "steppanel";
+	classes = classes$3;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepPanelsStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepPanelsStyle
+	});
 };
-class StepPanelsStyle extends BaseStyle {
-    name = 'steppanel';
-    classes = classes$3;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanelsStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanelsStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * StepPanel is a helper component for Stepper component.
- *
- * [Live Demo](https://www.primeng.org/stepper/)
- *
- * @module steppanelsstyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepPanelsStyle,
+	decorators: [{ type: Injectable }]
+});
 var StepPanelsClasses;
-(function (StepPanelsClasses) {
-    /**
-     * Class name of the root element
-     */
-    StepPanelsClasses["root"] = "h-steppanels";
+(function(StepPanelsClasses) {
+	StepPanelsClasses["root"] = "h-steppanels";
 })(StepPanelsClasses || (StepPanelsClasses = {}));
-
 const classes$2 = {
-    root: ({ instance }) => [
-        'h-steppanel',
-        {
-            'h-steppanel-active': instance.isVertical() && instance.active()
-        }
-    ],
-    contentWrapper: 'h-steppanel-content-wrapper',
-    content: 'h-steppanel-content'
+	root: ({ instance }) => ["h-steppanel", { "h-steppanel-active": instance.isVertical() && instance.active() }],
+	contentWrapper: "h-steppanel-content-wrapper",
+	content: "h-steppanel-content"
 };
-class StepPanelStyle extends BaseStyle {
-    name = 'steppanel';
-    classes = classes$2;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanelStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanelStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * StepPanel is a helper component for Stepper component.
- *
- * [Live Demo](https://www.primeng.org/stepper/)
- *
- * @module steppanelstyle
- *
- */
+var StepPanelStyle = class StepPanelStyle extends BaseStyle {
+	name = "steppanel";
+	classes = classes$2;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepPanelStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepPanelStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepPanelStyle,
+	decorators: [{ type: Injectable }]
+});
 var StepPanelClasses;
-(function (StepPanelClasses) {
-    /**
-     * Class name of the root element
-     */
-    StepPanelClasses["root"] = "h-steppanel";
-    /**
-     * Class name of the content wrapper element
-     */
-    StepPanelClasses["contentWrapper"] = "h-steppanel-content-wrapper";
-    /**
-     * Class name of the content element
-     */
-    StepPanelClasses["content"] = "h-steppanel-content";
+(function(StepPanelClasses) {
+	StepPanelClasses["root"] = "h-steppanel";
+	StepPanelClasses["contentWrapper"] = "h-steppanel-content-wrapper";
+	StepPanelClasses["content"] = "h-steppanel-content";
 })(StepPanelClasses || (StepPanelClasses = {}));
+const style = `
 
-const style$1 = /*css*/ `
     .h-steplist {
         position: relative;
         display: flex;
@@ -344,10 +334,7 @@ const style$1 = /*css*/ `
     .h-stepitem:last-of-type .h-steppanel {
         padding-inline-start: dt('stepper.step.number.size');
     }
-`;
 
-const style = /*css*/ `
-${style$1}
 
 .h-steppanel .h-motion {
     display: grid;
@@ -355,499 +342,1281 @@ ${style$1}
 }
 `;
 const classes$1 = {
-    root: ({ instance }) => [
-        'h-stepper h-component',
-        {
-            'h-readonly': instance.linear()
-        }
-    ],
-    separator: 'h-stepper-separator'
+	root: ({ instance }) => ["h-stepper h-component", { "h-readonly": instance.linear() }],
+	separator: "h-stepper-separator"
 };
-class StepperStyle extends BaseStyle {
-    name = 'stepper';
-    style = style;
-    classes = classes$1;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepperStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepperStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepperStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
- *
- * [Live Demo](https://www.primeng.org/stepper/)
- *
- * @module stepperstyle
- *
- */
+var StepperStyle = class StepperStyle extends BaseStyle {
+	name = "stepper";
+	style = style;
+	classes = classes$1;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepperStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepperStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepperStyle,
+	decorators: [{ type: Injectable }]
+});
 var StepperClasses;
-(function (StepperClasses) {
-    /**
-     * Class name of the root element
-     */
-    StepperClasses["root"] = "h-stepper";
-    /**
-     * Class name of the separator element
-     */
-    StepperClasses["separator"] = "h-stepper-separator";
+(function(StepperClasses) {
+	StepperClasses["root"] = "h-stepper";
+	StepperClasses["separator"] = "h-stepper-separator";
 })(StepperClasses || (StepperClasses = {}));
-
 const classes = {
-    root: ({ instance }) => [
-        'h-step',
-        {
-            'h-step-active': instance.active(),
-            'h-disabled': instance.isStepDisabled()
-        }
-    ],
-    header: 'h-step-header',
-    number: 'h-step-number',
-    title: 'h-step-title'
+	root: ({ instance }) => ["h-step", {
+		"h-step-active": instance.active(),
+		"h-disabled": instance.isStepDisabled()
+	}],
+	header: "h-step-header",
+	number: "h-step-number",
+	title: "h-step-title"
 };
-class StepStyle extends BaseStyle {
-    name = 'step';
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
- *
- * [Live Demo](https://www.primeng.org/stepper/)
- *
- * @module stepstyle
- *
- */
+var StepStyle = class StepStyle extends BaseStyle {
+	name = "step";
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepStyle,
+	decorators: [{ type: Injectable }]
+});
 var StepClasses;
-(function (StepClasses) {
-    /**
-     * Class name of the root element
-     */
-    StepClasses["root"] = "h-step";
-    /**
-     * Class name of the header element
-     */
-    StepClasses["header"] = "h-step-header";
-    /**
-     * Class name of the number element
-     */
-    StepClasses["number"] = "h-step-number";
-    /**
-     * Class name of the title element
-     */
-    StepClasses["title"] = "h-step-title";
+(function(StepClasses) {
+	StepClasses["root"] = "h-step";
+	StepClasses["header"] = "h-step-header";
+	StepClasses["number"] = "h-step-number";
+	StepClasses["title"] = "h-step-title";
 })(StepClasses || (StepClasses = {}));
-
-const STEPPER_INSTANCE = new InjectionToken('STEPPER_INSTANCE');
-const STEPLIST_INSTANCE = new InjectionToken('STEPLIST_INSTANCE');
-const STEPITEM_INSTANCE = new InjectionToken('STEPITEM_INSTANCE');
-const STEP_INSTANCE = new InjectionToken('STEP_INSTANCE');
-const STEPPANEL_INSTANCE = new InjectionToken('STEPPANEL_INSTANCE');
-const STEPPANELS_INSTANCE = new InjectionToken('STEPPANELS_INSTANCE');
-const STEPPERSEPARATOR_INSTANCE = new InjectionToken('STEPPERSEPARATOR_INSTANCE');
-class StepList extends BaseComponent {
-    $pcStepList = inject(STEPLIST_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    componentName = 'StepList';
-    steps = contentChildren(forwardRef(() => Step), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
-    _componentStyle = inject(StepListStyle);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: StepList, isStandalone: true, selector: "h-step-list", host: { properties: { "class": "cx(\"root\")" } }, providers: [StepListStyle, { provide: STEPLIST_INSTANCE, useExisting: StepList }, { provide: PARENT_INSTANCE, useExisting: StepList }], queries: [{ propertyName: "steps", predicate: i0.forwardRef(() => Step), isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepList, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'h-step-list',
-                    standalone: true,
-                    imports: [CommonModule, BindModule],
-                    template: ` <ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': 'cx("root")'
-                    },
-                    providers: [StepListStyle, { provide: STEPLIST_INSTANCE, useExisting: StepList }, { provide: PARENT_INSTANCE, useExisting: StepList }],
-                    hostDirectives: [Bind]
-                }]
-        }], propDecorators: { steps: [{ type: i0.ContentChildren, args: [forwardRef(() => Step), { isSignal: true }] }] } });
-/**
- * StepperSeparator is a helper component for Stepper component used in vertical orientation.
- * @group Components
- */
-class StepperSeparator extends BaseComponent {
-    $pcStepperSeparator = inject(STEPPERSEPARATOR_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    componentName = 'StepperSeparator';
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    _componentStyle = inject(StepperStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepperSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StepperSeparator, isStandalone: true, selector: "h-stepper-separator", host: { properties: { "class": "cx(\"separator\")" } }, providers: [StepperStyle, { provide: STEPPERSEPARATOR_INSTANCE, useExisting: StepperSeparator }, { provide: PARENT_INSTANCE, useExisting: StepperSeparator }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepperSeparator, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'h-stepper-separator',
-                    standalone: true,
-                    imports: [CommonModule, BindModule],
-                    template: ` <ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': 'cx("separator")'
-                    },
-                    providers: [StepperStyle, { provide: STEPPERSEPARATOR_INSTANCE, useExisting: StepperSeparator }, { provide: PARENT_INSTANCE, useExisting: StepperSeparator }],
-                    hostDirectives: [Bind]
-                }]
-        }] });
-/**
- * StepItem is a helper component for Stepper component used in vertical orientation.
- * @group Components
- */
-class StepItem extends BaseComponent {
-    $pcStepItem = inject(STEPITEM_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    componentName = 'StepItem';
-    _componentStyle = inject(StepItemStyle);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    pcStepper = inject(forwardRef(() => Stepper));
-    /**
-     * Value of step.
-     * @type {<number | undefined>}
-     * @defaultValue undefined
-     * @group Props
-     */
-    value = model(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    isActive = computed(() => this.pcStepper.value() === this.value(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-    step = contentChild(forwardRef(() => Step), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    stepPanel = contentChild(forwardRef(() => StepPanel), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stepPanel" }] : /* istanbul ignore next */ []));
-    constructor() {
-        super();
-        effect(() => {
-            this.step().value.set(this.value());
-        });
-        effect(() => {
-            this.stepPanel().value.set(this.value());
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: StepItem, isStandalone: true, selector: "h-step-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.data-h-active": "isActive()" } }, providers: [StepItemStyle, { provide: STEPITEM_INSTANCE, useExisting: StepItem }, { provide: PARENT_INSTANCE, useExisting: StepItem }], queries: [{ propertyName: "step", first: true, predicate: i0.forwardRef(() => Step), descendants: true, isSignal: true }, { propertyName: "stepPanel", first: true, predicate: i0.forwardRef(() => StepPanel), descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepItem, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'h-step-item',
-                    standalone: true,
-                    imports: [CommonModule, BindModule],
-                    template: ` <ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': 'cx("root")',
-                        '[attr.data-h-active]': 'isActive()'
-                    },
-                    providers: [StepItemStyle, { provide: STEPITEM_INSTANCE, useExisting: StepItem }, { provide: PARENT_INSTANCE, useExisting: StepItem }],
-                    hostDirectives: [Bind]
-                }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], step: [{ type: i0.ContentChild, args: [forwardRef(() => Step), { isSignal: true }] }], stepPanel: [{ type: i0.ContentChild, args: [forwardRef(() => StepPanel), { isSignal: true }] }] } });
-/**
- * Step is a helper component for Stepper component.
- * @group Components
- */
-class Step extends BaseComponent {
-    $pcStep = inject(STEP_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    componentName = 'Step';
-    pcStepper = inject(forwardRef(() => Stepper));
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * Active value of stepper.
-     * @type {number}
-     * @defaultValue undefined
-     * @group Props
-     */
-    value = model(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the step is disabled.
-     * @type {boolean}
-     * @defaultValue false
-     * @group Props
-     */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
-    active = computed(() => this.pcStepper.isStepActive(this.value()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    isStepDisabled = computed(() => !this.active() && (this.pcStepper.linear() || this.disabled()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isStepDisabled" }] : /* istanbul ignore next */ []));
-    id = computed(() => `${this.pcStepper.id()}_step_${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    ariaControls = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
-    isSeparatorVisible = computed(() => {
-        if (this.pcStepper.stepList()) {
-            const steps = this.pcStepper.stepList().steps();
-            const index = steps.indexOf(this);
-            const stepLen = steps.length;
-            return index !== stepLen - 1;
-        }
-        else {
-            return false;
-        }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSeparatorVisible" }] : /* istanbul ignore next */ []));
-    /**
-     * Content template.
-     * @type {TemplateRef<StepContentTemplateContext>}
-     * @group Templates
-     */
-    content = contentChild.required('content', { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), descendants: false });
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    _contentTemplate;
-    _componentStyle = inject(StepStyle);
-    onAfterContentInit() {
-        this.templates()?.forEach((item) => {
-            switch (item.getType()) {
-                case 'content':
-                    this._contentTemplate = item.template;
-                    break;
-            }
-        });
-    }
-    onStepClick() {
-        this.pcStepper.updateValue(this.value());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Step, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Step, isStandalone: true, selector: "h-step", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.aria-current": "active() ? \"step\" : undefined", "attr.role": "\"presentation\"", "attr.data-h-active": "active()", "attr.data-h-disabled": "isStepDisabled()" } }, providers: [StepStyle, { provide: STEP_INSTANCE, useExisting: Step }, { provide: PARENT_INSTANCE, useExisting: Step }], queries: [{ propertyName: "content", first: true, predicate: ["content"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@if (!content() && !_contentTemplate) {\n    <button\n        [attr.id]=\"id()\"\n        [class]=\"cx('header')\"\n        [hBind]=\"ptm('header')\"\n        [attr.role]=\"'tab'\"\n        [tabindex]=\"isStepDisabled() ? -1 : undefined\"\n        [attr.aria-controls]=\"ariaControls()\"\n        [disabled]=\"isStepDisabled()\"\n        (click)=\"onStepClick()\"\n        type=\"button\"\n    >\n        <span [class]=\"cx('number')\" [hBind]=\"ptm('number')\">{{ value() }}</span>\n        <span [class]=\"cx('title')\" [hBind]=\"ptm('title')\">\n            <ng-content></ng-content>\n        </span>\n    </button>\n    @if (isSeparatorVisible()) {\n        <h-stepper-separator />\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"content() || _contentTemplate; context: { activateCallback: onStepClick.bind(this), value: value(), active: active() }\"></ng-container>\n    @if (isSeparatorVisible()) {\n        <h-stepper-separator />\n    }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperSeparator, selector: "h-stepper-separator" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Step, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-step', standalone: true, imports: [CommonModule, StepperSeparator, SharedModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        '[class]': 'cx("root")',
-                        '[attr.aria-current]': 'active() ? "step" : undefined',
-                        '[attr.role]': '"presentation"',
-                        '[attr.data-h-active]': 'active()',
-                        '[attr.data-h-disabled]': 'isStepDisabled()'
-                    }, providers: [StepStyle, { provide: STEP_INSTANCE, useExisting: Step }, { provide: PARENT_INSTANCE, useExisting: Step }], hostDirectives: [Bind], template: "@if (!content() && !_contentTemplate) {\n    <button\n        [attr.id]=\"id()\"\n        [class]=\"cx('header')\"\n        [hBind]=\"ptm('header')\"\n        [attr.role]=\"'tab'\"\n        [tabindex]=\"isStepDisabled() ? -1 : undefined\"\n        [attr.aria-controls]=\"ariaControls()\"\n        [disabled]=\"isStepDisabled()\"\n        (click)=\"onStepClick()\"\n        type=\"button\"\n    >\n        <span [class]=\"cx('number')\" [hBind]=\"ptm('number')\">{{ value() }}</span>\n        <span [class]=\"cx('title')\" [hBind]=\"ptm('title')\">\n            <ng-content></ng-content>\n        </span>\n    </button>\n    @if (isSeparatorVisible()) {\n        <h-stepper-separator />\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"content() || _contentTemplate; context: { activateCallback: onStepClick.bind(this), value: value(), active: active() }\"></ng-container>\n    @if (isSeparatorVisible()) {\n        <h-stepper-separator />\n    }\n}\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
-/**
- * StepPanel is a helper component for Stepper component.
- * @group Components
- */
-class StepPanel extends BaseComponent {
-    $pcStepPanel = inject(STEPPANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    componentName = 'StepPanel';
-    pcStepper = inject(forwardRef(() => Stepper));
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * Active value of stepper.
-     * @type {number}
-     * @defaultValue undefined
-     * @group Props
-     */
-    value = model(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    active = computed(() => this.pcStepper.value() === this.value(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    ariaControls = computed(() => `${this.pcStepper.id()}_step_${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
-    id = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    isVertical = computed(() => this.pcStepper.stepItems().length > 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
-    isSeparatorVisible = computed(() => {
-        if (this.pcStepper.stepItems()) {
-            const stepLen = this.pcStepper.stepItems().length;
-            const stepPanelElements = find(this.pcStepper.el.nativeElement, '[data-pc-name="steppanel"]');
-            const index = findIndexInList(this.el.nativeElement, stepPanelElements);
-            return index !== stepLen - 1;
-        }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSeparatorVisible" }] : /* istanbul ignore next */ []));
-    computedMotionOptions = computed(() => {
-        return {
-            ...this.ptm('motion'),
-            ...this.pcStepper.computedMotionOptions()
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Content template.
-     * @param {StepPanelContentTemplateContext} context - Context of the template
-     * @see {@link StepPanelContentTemplateContext}
-     * @group Templates
-     */
-    contentTemplate = contentChild.required('content', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    _contentTemplate;
-    _componentStyle = inject(StepPanelStyle);
-    onAfterContentInit() {
-        this.templates()?.forEach((item) => {
-            switch (item.getType()) {
-                case 'content':
-                    this._contentTemplate = item.template;
-                    break;
-            }
-        });
-    }
-    updateValue(value) {
-        this.pcStepper.updateValue(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StepPanel, isStandalone: true, selector: "h-step-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.role": "\"tabpanel\"", "attr.aria-controls": "ariaControls()", "attr.id": "id()", "attr.data-h-active": "active()", "attr.data-pc-name": "\"steppanel\"" } }, providers: [StepPanelStyle, { provide: STEPPANEL_INSTANCE, useExisting: StepPanel }, { provide: PARENT_INSTANCE, useExisting: StepPanel }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<h-motion [visible]=\"active()\" name=\"h-collapsible\" [disabled]=\"!isVertical()\" [options]=\"computedMotionOptions()\">\n    <div [class]=\"cx('contentWrapper')\" [hBind]=\"ptm('contentWrapper')\">\n        @if (isSeparatorVisible()) {\n            <h-stepper-separator />\n        }\n        <div [class]=\"cx('content')\" [hBind]=\"ptm('content')\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }\"></ng-container>\n        </div>\n    </div>\n</h-motion>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperSeparator, selector: "h-stepper-separator" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i3.Motion, selector: "h-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanel, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-step-panel', standalone: true, imports: [CommonModule, StepperSeparator, SharedModule, BindModule, MotionModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        '[class]': 'cx("root")',
-                        '[attr.role]': '"tabpanel"',
-                        '[attr.aria-controls]': 'ariaControls()',
-                        '[attr.id]': 'id()',
-                        '[attr.data-h-active]': 'active()',
-                        '[attr.data-pc-name]': '"steppanel"'
-                    }, providers: [StepPanelStyle, { provide: STEPPANEL_INSTANCE, useExisting: StepPanel }, { provide: PARENT_INSTANCE, useExisting: StepPanel }], hostDirectives: [Bind], template: "<h-motion [visible]=\"active()\" name=\"h-collapsible\" [disabled]=\"!isVertical()\" [options]=\"computedMotionOptions()\">\n    <div [class]=\"cx('contentWrapper')\" [hBind]=\"ptm('contentWrapper')\">\n        @if (isSeparatorVisible()) {\n            <h-stepper-separator />\n        }\n        <div [class]=\"cx('content')\" [hBind]=\"ptm('content')\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }\"></ng-container>\n        </div>\n    </div>\n</h-motion>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
-class StepPanels extends BaseComponent {
-    $pcStepPanels = inject(STEPPANELS_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    componentName = 'StepPanels';
-    _componentStyle = inject(StepPanelsStyle);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StepPanels, isStandalone: true, selector: "h-step-panels", host: { properties: { "class": "cx(\"root\")" } }, providers: [StepPanelsStyle, { provide: STEPPANELS_INSTANCE, useExisting: StepPanels }, { provide: PARENT_INSTANCE, useExisting: StepPanels }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepPanels, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'h-step-panels',
-                    standalone: true,
-                    imports: [CommonModule, SharedModule, BindModule],
-                    template: ` <ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': 'cx("root")'
-                    },
-                    providers: [StepPanelsStyle, { provide: STEPPANELS_INSTANCE, useExisting: StepPanels }, { provide: PARENT_INSTANCE, useExisting: StepPanels }],
-                    hostDirectives: [Bind]
-                }]
-        }] });
-/**
- * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multistep process.
- * @group Components
- */
-class Stepper extends BaseComponent {
-    componentName = 'Stepper';
-    $pcStepper = inject(STEPPER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(StepperStyle);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * A model that can hold a numeric value or be undefined.
-     * @defaultValue undefined
-     * @type {ModelSignal<number | undefined>}
-     * @group Props
-     */
-    value = model(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * A boolean variable that captures user input.
-     * @defaultValue false
-     * @type {InputSignalWithTransform<any, boolean >}
-     * @group Props
-     */
-    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
-    /**
-     * Transition options of the animation.
-     * @defaultValue 400ms cubic-bezier(0.86, 0, 0.07, 1)
-     * @type {InputSignal<string >}
-     * @group Props
-     * @deprecated since v21.0.0, use `motionOptions` instead.
-     */
-    transitionOptions = input('400ms cubic-bezier(0.86, 0, 0.07, 1)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "transitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options.
-     * @group Props
-     */
-    motionOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
-    computedMotionOptions = computed(() => {
-        return {
-            ...this.ptm('motion'),
-            ...this.motionOptions()
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    id = signal(uuid('pn_id_'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    stepItems = contentChildren(StepItem, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stepItems" }] : /* istanbul ignore next */ []));
-    steps = contentChildren(Step, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
-    stepList = contentChild(StepList, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stepList" }] : /* istanbul ignore next */ []));
-    updateValue(value) {
-        this.value.set(value);
-    }
-    isStepActive(value) {
-        return this.value() === value;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: Stepper, isStandalone: true, selector: "h-stepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.role": "\"tablist\"", "attr.id": "id()" } }, providers: [StepperStyle, { provide: STEPPER_INSTANCE, useExisting: Stepper }, { provide: PARENT_INSTANCE, useExisting: Stepper }], queries: [{ propertyName: "stepItems", predicate: StepItem, isSignal: true }, { propertyName: "steps", predicate: Step, isSignal: true }, { propertyName: "stepList", first: true, predicate: StepList, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Stepper, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-stepper', standalone: true, imports: [CommonModule, SharedModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [StepperStyle, { provide: STEPPER_INSTANCE, useExisting: Stepper }, { provide: PARENT_INSTANCE, useExisting: Stepper }], host: {
-                        '[class]': 'cx("root")',
-                        '[attr.role]': '"tablist"',
-                        '[attr.id]': 'id()'
-                    }, hostDirectives: [Bind], template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], transitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], stepItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StepItem), { isSignal: true }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Step), { isSignal: true }] }], stepList: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepList), { isSignal: true }] }] } });
-class StepperModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule], exports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule, SharedModule, BindModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepperModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule],
-                    exports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const STEPPER_INSTANCE = new InjectionToken("STEPPER_INSTANCE");
+const STEPLIST_INSTANCE = new InjectionToken("STEPLIST_INSTANCE");
+const STEPITEM_INSTANCE = new InjectionToken("STEPITEM_INSTANCE");
+const STEP_INSTANCE = new InjectionToken("STEP_INSTANCE");
+const STEPPANEL_INSTANCE = new InjectionToken("STEPPANEL_INSTANCE");
+const STEPPANELS_INSTANCE = new InjectionToken("STEPPANELS_INSTANCE");
+const STEPPERSEPARATOR_INSTANCE = new InjectionToken("STEPPERSEPARATOR_INSTANCE");
+var StepList = class StepList extends BaseComponent {
+	$pcStepList = inject(STEPLIST_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	componentName = "StepList";
+	steps = contentChildren(forwardRef(() => Step), ...ngDevMode ? [{ debugName: "steps" }] : 	/* istanbul ignore next */ []);
+	_componentStyle = inject(StepListStyle);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepList,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: StepList,
+		isStandalone: true,
+		selector: "h-step-list",
+		host: { properties: { "class": "cx(\"root\")" } },
+		providers: [
+			StepListStyle,
+			{
+				provide: STEPLIST_INSTANCE,
+				useExisting: StepList
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: StepList
+			}
+		],
+		queries: [{
+			propertyName: "steps",
+			predicate: i0.forwardRef(() => Step),
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: ` <ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: CommonModule
+		}, {
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-step-list",
+			standalone: true,
+			imports: [CommonModule, BindModule],
+			template: ` <ng-content></ng-content>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: { "[class]": "cx(\"root\")" },
+			providers: [
+				StepListStyle,
+				{
+					provide: STEPLIST_INSTANCE,
+					useExisting: StepList
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: StepList
+				}
+			],
+			hostDirectives: [Bind]
+		}]
+	}],
+	propDecorators: { steps: [{
+		type: i0.ContentChildren,
+		args: [forwardRef(() => Step), { isSignal: true }]
+	}] }
+});
+var StepperSeparator = class StepperSeparator extends BaseComponent {
+	$pcStepperSeparator = inject(STEPPERSEPARATOR_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	componentName = "StepperSeparator";
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	_componentStyle = inject(StepperStyle);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepperSeparator,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: StepperSeparator,
+		isStandalone: true,
+		selector: "h-stepper-separator",
+		host: { properties: { "class": "cx(\"separator\")" } },
+		providers: [
+			StepperStyle,
+			{
+				provide: STEPPERSEPARATOR_INSTANCE,
+				useExisting: StepperSeparator
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: StepperSeparator
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: ` <ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: CommonModule
+		}, {
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepperSeparator,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-stepper-separator",
+			standalone: true,
+			imports: [CommonModule, BindModule],
+			template: ` <ng-content></ng-content>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: { "[class]": "cx(\"separator\")" },
+			providers: [
+				StepperStyle,
+				{
+					provide: STEPPERSEPARATOR_INSTANCE,
+					useExisting: StepperSeparator
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: StepperSeparator
+				}
+			],
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var StepItem = class StepItem extends BaseComponent {
+	$pcStepItem = inject(STEPITEM_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	componentName = "StepItem";
+	_componentStyle = inject(StepItemStyle);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	pcStepper = inject(forwardRef(() => Stepper));
+	value = model(...ngDevMode ? [void 0, { debugName: "value" }] : 	/* istanbul ignore next */ []);
+	isActive = computed(() => this.pcStepper.value() === this.value(), ...ngDevMode ? [{ debugName: "isActive" }] : 	/* istanbul ignore next */ []);
+	step = contentChild(forwardRef(() => Step), ...ngDevMode ? [{ debugName: "step" }] : 	/* istanbul ignore next */ []);
+	stepPanel = contentChild(forwardRef(() => StepPanel), ...ngDevMode ? [{ debugName: "stepPanel" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		super();
+		effect(() => {
+			this.step().value.set(this.value());
+		});
+		effect(() => {
+			this.stepPanel().value.set(this.value());
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: StepItem,
+		isStandalone: true,
+		selector: "h-step-item",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { value: "valueChange" },
+		host: { properties: {
+			"class": "cx(\"root\")",
+			"attr.data-h-active": "isActive()"
+		} },
+		providers: [
+			StepItemStyle,
+			{
+				provide: STEPITEM_INSTANCE,
+				useExisting: StepItem
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: StepItem
+			}
+		],
+		queries: [{
+			propertyName: "step",
+			first: true,
+			predicate: i0.forwardRef(() => Step),
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "stepPanel",
+			first: true,
+			predicate: i0.forwardRef(() => StepPanel),
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: ` <ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: CommonModule
+		}, {
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-step-item",
+			standalone: true,
+			imports: [CommonModule, BindModule],
+			template: ` <ng-content></ng-content>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "cx(\"root\")",
+				"[attr.data-h-active]": "isActive()"
+			},
+			providers: [
+				StepItemStyle,
+				{
+					provide: STEPITEM_INSTANCE,
+					useExisting: StepItem
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: StepItem
+				}
+			],
+			hostDirectives: [Bind]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		step: [{
+			type: i0.ContentChild,
+			args: [forwardRef(() => Step), { isSignal: true }]
+		}],
+		stepPanel: [{
+			type: i0.ContentChild,
+			args: [forwardRef(() => StepPanel), { isSignal: true }]
+		}]
+	}
+});
+var Step = class Step extends BaseComponent {
+	$pcStep = inject(STEP_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	componentName = "Step";
+	pcStepper = inject(forwardRef(() => Stepper));
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	value = model(...ngDevMode ? [void 0, { debugName: "value" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: (v) => transformToBoolean(v)
+	});
+	active = computed(() => this.pcStepper.isStepActive(this.value()), ...ngDevMode ? [{ debugName: "active" }] : 	/* istanbul ignore next */ []);
+	isStepDisabled = computed(() => !this.active() && (this.pcStepper.linear() || this.disabled()), ...ngDevMode ? [{ debugName: "isStepDisabled" }] : 	/* istanbul ignore next */ []);
+	id = computed(() => `${this.pcStepper.id()}_step_${this.value()}`, ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
+	ariaControls = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`, ...ngDevMode ? [{ debugName: "ariaControls" }] : 	/* istanbul ignore next */ []);
+	isSeparatorVisible = computed(() => {
+		if (this.pcStepper.stepList()) {
+			const steps = this.pcStepper.stepList().steps();
+			return steps.indexOf(this) !== steps.length - 1;
+		} else return false;
+	}, ...ngDevMode ? [{ debugName: "isSeparatorVisible" }] : 	/* istanbul ignore next */ []);
+	content = contentChild.required("content", {
+		...ngDevMode ? { debugName: "content" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	_contentTemplate;
+	_componentStyle = inject(StepStyle);
+	onAfterContentInit() {
+		this.templates()?.forEach((item) => {
+			switch (item.getType()) {
+				case "content":
+					this._contentTemplate = item.template;
+					break;
+			}
+		});
+	}
+	onStepClick() {
+		this.pcStepper.updateValue(this.value());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: Step,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: Step,
+		isStandalone: true,
+		selector: "h-step",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { properties: {
+			"class": "cx(\"root\")",
+			"attr.aria-current": "active() ? \"step\" : undefined",
+			"attr.role": "\"presentation\"",
+			"attr.data-h-active": "active()",
+			"attr.data-h-disabled": "isStepDisabled()"
+		} },
+		providers: [
+			StepStyle,
+			{
+				provide: STEP_INSTANCE,
+				useExisting: Step
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Step
+			}
+		],
+		queries: [{
+			propertyName: "content",
+			first: true,
+			predicate: ["content"],
+			isSignal: true
+		}, {
+			propertyName: "templates",
+			predicate: HelixTemplate,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "@if (!content() && !_contentTemplate) {\n    <button\n        [attr.id]=\"id()\"\n        [class]=\"cx('header')\"\n        [hBind]=\"ptm('header')\"\n        [attr.role]=\"'tab'\"\n        [tabindex]=\"isStepDisabled() ? -1 : undefined\"\n        [attr.aria-controls]=\"ariaControls()\"\n        [disabled]=\"isStepDisabled()\"\n        (click)=\"onStepClick()\"\n        type=\"button\"\n    >\n        <span [class]=\"cx('number')\" [hBind]=\"ptm('number')\">{{ value() }}</span>\n        <span [class]=\"cx('title')\" [hBind]=\"ptm('title')\">\n            <ng-content></ng-content>\n        </span>\n    </button>\n    @if (isSeparatorVisible()) {\n        <h-stepper-separator />\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"content() || _contentTemplate; context: { activateCallback: onStepClick.bind(this), value: value(), active: active() }\"></ng-container>\n    @if (isSeparatorVisible()) {\n        <h-stepper-separator />\n    }\n}\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: StepperSeparator,
+				selector: "h-stepper-separator"
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Step,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-step",
+			standalone: true,
+			imports: [
+				CommonModule,
+				StepperSeparator,
+				SharedModule,
+				BindModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "cx(\"root\")",
+				"[attr.aria-current]": "active() ? \"step\" : undefined",
+				"[attr.role]": "\"presentation\"",
+				"[attr.data-h-active]": "active()",
+				"[attr.data-h-disabled]": "isStepDisabled()"
+			},
+			providers: [
+				StepStyle,
+				{
+					provide: STEP_INSTANCE,
+					useExisting: Step
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Step
+				}
+			],
+			hostDirectives: [Bind],
+			template: "@if (!content() && !_contentTemplate) {\n    <button\n        [attr.id]=\"id()\"\n        [class]=\"cx('header')\"\n        [hBind]=\"ptm('header')\"\n        [attr.role]=\"'tab'\"\n        [tabindex]=\"isStepDisabled() ? -1 : undefined\"\n        [attr.aria-controls]=\"ariaControls()\"\n        [disabled]=\"isStepDisabled()\"\n        (click)=\"onStepClick()\"\n        type=\"button\"\n    >\n        <span [class]=\"cx('number')\" [hBind]=\"ptm('number')\">{{ value() }}</span>\n        <span [class]=\"cx('title')\" [hBind]=\"ptm('title')\">\n            <ng-content></ng-content>\n        </span>\n    </button>\n    @if (isSeparatorVisible()) {\n        <h-stepper-separator />\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"content() || _contentTemplate; context: { activateCallback: onStepClick.bind(this), value: value(), active: active() }\"></ng-container>\n    @if (isSeparatorVisible()) {\n        <h-stepper-separator />\n    }\n}\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		content: [{
+			type: i0.ContentChild,
+			args: ["content", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}]
+	}
+});
+var StepPanel = class StepPanel extends BaseComponent {
+	$pcStepPanel = inject(STEPPANEL_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	componentName = "StepPanel";
+	pcStepper = inject(forwardRef(() => Stepper));
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	active = computed(() => this.pcStepper.value() === this.value(), ...ngDevMode ? [{ debugName: "active" }] : 	/* istanbul ignore next */ []);
+	ariaControls = computed(() => `${this.pcStepper.id()}_step_${this.value()}`, ...ngDevMode ? [{ debugName: "ariaControls" }] : 	/* istanbul ignore next */ []);
+	id = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`, ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
+	isVertical = computed(() => this.pcStepper.stepItems().length > 0, ...ngDevMode ? [{ debugName: "isVertical" }] : 	/* istanbul ignore next */ []);
+	isSeparatorVisible = computed(() => {
+		if (this.pcStepper.stepItems()) {
+			const stepLen = this.pcStepper.stepItems().length;
+			const stepPanelElements = find(this.pcStepper.el.nativeElement, "[data-pc-name=\"steppanel\"]");
+			return findIndexInList(this.el.nativeElement, stepPanelElements) !== stepLen - 1;
+		}
+	}, ...ngDevMode ? [{ debugName: "isSeparatorVisible" }] : 	/* istanbul ignore next */ []);
+	computedMotionOptions = computed(() => {
+		return {
+			...this.ptm("motion"),
+			...this.pcStepper.computedMotionOptions()
+		};
+	}, ...ngDevMode ? [{ debugName: "computedMotionOptions" }] : 	/* istanbul ignore next */ []);
+	contentTemplate = contentChild.required("content", ...ngDevMode ? [{ debugName: "contentTemplate" }] : 	/* istanbul ignore next */ []);
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	_contentTemplate;
+	_componentStyle = inject(StepPanelStyle);
+	onAfterContentInit() {
+		this.templates()?.forEach((item) => {
+			switch (item.getType()) {
+				case "content":
+					this._contentTemplate = item.template;
+					break;
+			}
+		});
+	}
+	updateValue(value) {
+		this.pcStepper.updateValue(value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepPanel,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: StepPanel,
+		isStandalone: true,
+		selector: "h-step-panel",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { value: "valueChange" },
+		host: { properties: {
+			"class": "cx(\"root\")",
+			"attr.role": "\"tabpanel\"",
+			"attr.aria-controls": "ariaControls()",
+			"attr.id": "id()",
+			"attr.data-h-active": "active()",
+			"attr.data-pc-name": "\"steppanel\""
+		} },
+		providers: [
+			StepPanelStyle,
+			{
+				provide: STEPPANEL_INSTANCE,
+				useExisting: StepPanel
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: StepPanel
+			}
+		],
+		queries: [{
+			propertyName: "contentTemplate",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "templates",
+			predicate: HelixTemplate,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "<h-motion [visible]=\"active()\" name=\"h-collapsible\" [disabled]=\"!isVertical()\" [options]=\"computedMotionOptions()\">\n    <div [class]=\"cx('contentWrapper')\" [hBind]=\"ptm('contentWrapper')\">\n        @if (isSeparatorVisible()) {\n            <h-stepper-separator />\n        }\n        <div [class]=\"cx('content')\" [hBind]=\"ptm('content')\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }\"></ng-container>\n        </div>\n    </div>\n</h-motion>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: StepperSeparator,
+				selector: "h-stepper-separator"
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "ngmodule",
+				type: MotionModule
+			},
+			{
+				kind: "component",
+				type: i3.Motion,
+				selector: "h-motion",
+				inputs: [
+					"visible",
+					"mountOnEnter",
+					"unmountOnLeave",
+					"name",
+					"type",
+					"safe",
+					"disabled",
+					"appear",
+					"enter",
+					"leave",
+					"duration",
+					"hideStrategy",
+					"enterFromClass",
+					"enterToClass",
+					"enterActiveClass",
+					"leaveFromClass",
+					"leaveToClass",
+					"leaveActiveClass",
+					"options"
+				],
+				outputs: [
+					"onBeforeEnter",
+					"onEnter",
+					"onAfterEnter",
+					"onEnterCancelled",
+					"onBeforeLeave",
+					"onLeave",
+					"onAfterLeave",
+					"onLeaveCancelled"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepPanel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-step-panel",
+			standalone: true,
+			imports: [
+				CommonModule,
+				StepperSeparator,
+				SharedModule,
+				BindModule,
+				MotionModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "cx(\"root\")",
+				"[attr.role]": "\"tabpanel\"",
+				"[attr.aria-controls]": "ariaControls()",
+				"[attr.id]": "id()",
+				"[attr.data-h-active]": "active()",
+				"[attr.data-pc-name]": "\"steppanel\""
+			},
+			providers: [
+				StepPanelStyle,
+				{
+					provide: STEPPANEL_INSTANCE,
+					useExisting: StepPanel
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: StepPanel
+				}
+			],
+			hostDirectives: [Bind],
+			template: "<h-motion [visible]=\"active()\" name=\"h-collapsible\" [disabled]=\"!isVertical()\" [options]=\"computedMotionOptions()\">\n    <div [class]=\"cx('contentWrapper')\" [hBind]=\"ptm('contentWrapper')\">\n        @if (isSeparatorVisible()) {\n            <h-stepper-separator />\n        }\n        <div [class]=\"cx('content')\" [hBind]=\"ptm('content')\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }\"></ng-container>\n        </div>\n    </div>\n</h-motion>\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		contentTemplate: [{
+			type: i0.ContentChild,
+			args: ["content", { isSignal: true }]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}]
+	}
+});
+var StepPanels = class StepPanels extends BaseComponent {
+	$pcStepPanels = inject(STEPPANELS_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	componentName = "StepPanels";
+	_componentStyle = inject(StepPanelsStyle);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepPanels,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: StepPanels,
+		isStandalone: true,
+		selector: "h-step-panels",
+		host: { properties: { "class": "cx(\"root\")" } },
+		providers: [
+			StepPanelsStyle,
+			{
+				provide: STEPPANELS_INSTANCE,
+				useExisting: StepPanels
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: StepPanels
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: ` <ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepPanels,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-step-panels",
+			standalone: true,
+			imports: [
+				CommonModule,
+				SharedModule,
+				BindModule
+			],
+			template: ` <ng-content></ng-content>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: { "[class]": "cx(\"root\")" },
+			providers: [
+				StepPanelsStyle,
+				{
+					provide: STEPPANELS_INSTANCE,
+					useExisting: StepPanels
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: StepPanels
+				}
+			],
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var Stepper = class Stepper extends BaseComponent {
+	componentName = "Stepper";
+	$pcStepper = inject(STEPPER_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(StepperStyle);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	linear = input(false, {
+		...ngDevMode ? { debugName: "linear" } : 		/* istanbul ignore next */ {},
+		transform: (v) => transformToBoolean(v)
+	});
+	transitionOptions = input("400ms cubic-bezier(0.86, 0, 0.07, 1)", ...ngDevMode ? [{ debugName: "transitionOptions" }] : 	/* istanbul ignore next */ []);
+	motionOptions = input(void 0, ...ngDevMode ? [{ debugName: "motionOptions" }] : 	/* istanbul ignore next */ []);
+	computedMotionOptions = computed(() => {
+		return {
+			...this.ptm("motion"),
+			...this.motionOptions()
+		};
+	}, ...ngDevMode ? [{ debugName: "computedMotionOptions" }] : 	/* istanbul ignore next */ []);
+	id = signal(uuid("pn_id_"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
+	stepItems = contentChildren(StepItem, ...ngDevMode ? [{ debugName: "stepItems" }] : 	/* istanbul ignore next */ []);
+	steps = contentChildren(Step, ...ngDevMode ? [{ debugName: "steps" }] : 	/* istanbul ignore next */ []);
+	stepList = contentChild(StepList, ...ngDevMode ? [{ debugName: "stepList" }] : 	/* istanbul ignore next */ []);
+	updateValue(value) {
+		this.value.set(value);
+	}
+	isStepActive(value) {
+		return this.value() === value;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: Stepper,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: Stepper,
+		isStandalone: true,
+		selector: "h-stepper",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			linear: {
+				classPropertyName: "linear",
+				publicName: "linear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			transitionOptions: {
+				classPropertyName: "transitionOptions",
+				publicName: "transitionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			motionOptions: {
+				classPropertyName: "motionOptions",
+				publicName: "motionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { properties: {
+			"class": "cx(\"root\")",
+			"attr.role": "\"tablist\"",
+			"attr.id": "id()"
+		} },
+		providers: [
+			StepperStyle,
+			{
+				provide: STEPPER_INSTANCE,
+				useExisting: Stepper
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Stepper
+			}
+		],
+		queries: [
+			{
+				propertyName: "stepItems",
+				predicate: StepItem,
+				isSignal: true
+			},
+			{
+				propertyName: "steps",
+				predicate: Step,
+				isSignal: true
+			},
+			{
+				propertyName: "stepList",
+				first: true,
+				predicate: StepList,
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "<ng-content></ng-content>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Stepper,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-stepper",
+			standalone: true,
+			imports: [
+				CommonModule,
+				SharedModule,
+				BindModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				StepperStyle,
+				{
+					provide: STEPPER_INSTANCE,
+					useExisting: Stepper
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Stepper
+				}
+			],
+			host: {
+				"[class]": "cx(\"root\")",
+				"[attr.role]": "\"tablist\"",
+				"[attr.id]": "id()"
+			},
+			hostDirectives: [Bind],
+			template: "<ng-content></ng-content>\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		linear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linear",
+				required: false
+			}]
+		}],
+		transitionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "transitionOptions",
+				required: false
+			}]
+		}],
+		motionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motionOptions",
+				required: false
+			}]
+		}],
+		stepItems: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => StepItem), { isSignal: true }]
+		}],
+		steps: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => Step), { isSignal: true }]
+		}],
+		stepList: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StepList), { isSignal: true }]
+		}]
+	}
+});
+var StepperModule = class StepperModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepperModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepperModule,
+		imports: [
+			Stepper,
+			StepList,
+			StepPanels,
+			StepPanel,
+			StepItem,
+			Step,
+			StepperSeparator,
+			SharedModule,
+			BindModule
+		],
+		exports: [
+			Stepper,
+			StepList,
+			StepPanels,
+			StepPanel,
+			StepItem,
+			Step,
+			StepperSeparator,
+			SharedModule,
+			BindModule
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepperModule,
+		imports: [
+			Stepper,
+			StepList,
+			StepPanels,
+			StepPanel,
+			StepItem,
+			Step,
+			StepperSeparator,
+			SharedModule,
+			BindModule,
+			SharedModule,
+			BindModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepperModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				Stepper,
+				StepList,
+				StepPanels,
+				StepPanel,
+				StepItem,
+				Step,
+				StepperSeparator,
+				SharedModule,
+				BindModule
+			],
+			exports: [
+				Stepper,
+				StepList,
+				StepPanels,
+				StepPanel,
+				StepItem,
+				Step,
+				StepperSeparator,
+				SharedModule,
+				BindModule
+			]
+		}]
+	}]
+});
 export { Step, StepItem, StepList, StepPanel, StepPanels, Stepper, StepperClasses, StepperModule, StepperSeparator, StepperStyle };
-//# sourceMappingURL=gravionlabs-helix-core-stepper.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-stepper.mjs.map