primeng 18.0.0-beta.2 → 18.0.0-beta.3

package/fesm2022/primeng-stepper.mjs

@@ -1,12 +1,13 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ContentChildren, inject, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
-import { PrimeTemplate, SharedModule } from 'primeng/api';
-import { UniqueComponentId } from 'primeng/utils';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, inject, forwardRef, model, computed, contentChild, effect, input, ContentChild, ContentChildren, signal, contentChildren, NgModule } from '@angular/core';
 import { BaseComponent } from 'primeng/basecomponent';
+import { transformToBoolean, ObjectUtils, UniqueComponentId } from 'primeng/utils';
 import { BaseStyle } from 'primeng/base';
+import { DomHandler } from 'primeng/dom';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
 
 const theme = ({ dt }) => `
 .p-steplist {
@@ -179,7 +180,6 @@ const theme = ({ dt }) => `
 .p-stepitem:last-of-type .p-steppanel {
     padding-inline-start: ${dt('stepper.step.number.size')};
 }
-
 /* For PrimeNG */
 .p-steppanel {
     overflow: hidden;
@@ -229,548 +229,296 @@ var StepperClasses;
     StepperClasses["separator"] = "p-stepper-separator";
 })(StepperClasses || (StepperClasses = {}));
 
-class StepperHeader {
-    id;
-    template;
-    stepperPanel;
-    index;
-    disabled;
-    active;
-    highlighted;
-    getStepProp;
-    ariaControls;
-    onClick = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: StepperHeader, selector: "p-stepperHeader, p-stepper-header", inputs: { id: "id", template: "template", stepperPanel: "stepperPanel", index: "index", disabled: "disabled", active: "active", highlighted: "highlighted", getStepProp: "getStepProp", ariaControls: "ariaControls" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-        <ng-container *ngIf="template; else buttonRef">
-            <ng-container
-                *ngTemplateOutlet="
-                    template;
-                    context: {
-                        index: index,
-                        active: active,
-                        highlighted: highlighted,
-                        class: 'p-stepper-action',
-                        headerClass: 'p-stepper-action',
-                        numberClass: 'p-stepper-number',
-                        titleClass: 'p-stepper-title',
-                        onClick: onClick,
-                    }
-                "
-            ></ng-container>
-        </ng-container>
-        <ng-template #buttonRef>
-            <p-button
-                [id]="id"
-                class="p-step-header"
-                role="tab"
-                [tabindex]="disabled ? -1 : undefined"
-                [aria-controls]="ariaControls"
-                (click)="onClick.emit($event, index)"
-            >
-                <span class="p-step-number">{{ index + 1 }}</span>
-                <span class="p-step-title">{{ getStepProp }}</span>
-            </p-button>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+class StepList extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: StepList, isStandalone: true, selector: "p-step-list", host: { properties: { "class.p-steplist": "true", "class.p-component": "true" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepList, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-stepperHeader, p-stepper-header',
-                    template: `
-        <ng-container *ngIf="template; else buttonRef">
-            <ng-container
-                *ngTemplateOutlet="
-                    template;
-                    context: {
-                        index: index,
-                        active: active,
-                        highlighted: highlighted,
-                        class: 'p-stepper-action',
-                        headerClass: 'p-stepper-action',
-                        numberClass: 'p-stepper-number',
-                        titleClass: 'p-stepper-title',
-                        onClick: onClick,
-                    }
-                "
-            ></ng-container>
-        </ng-container>
-        <ng-template #buttonRef>
-            <p-button
-                [id]="id"
-                class="p-step-header"
-                role="tab"
-                [tabindex]="disabled ? -1 : undefined"
-                [aria-controls]="ariaControls"
-                (click)="onClick.emit($event, index)"
-            >
-                <span class="p-step-number">{{ index + 1 }}</span>
-                <span class="p-step-title">{{ getStepProp }}</span>
-            </p-button>
-        </ng-template>
-    `,
+                    selector: 'p-step-list',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-steplist]': 'true',
+                        '[class.p-component]': 'true',
+                    },
                 }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], stepperPanel: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], highlighted: [{
-                type: Input
-            }], getStepProp: [{
-                type: Input
-            }], ariaControls: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-class StepperSeparator {
-    template;
-    separatorClass;
-    stepperPanel;
-    index;
-    active;
-    highlighted;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: StepperSeparator, selector: "p-stepperSeparator, p-stepper-separator", inputs: { template: "template", separatorClass: "separatorClass", stepperPanel: "stepperPanel", index: "index", active: "active", highlighted: "highlighted" }, host: { classAttribute: "p-stepper-separator" }, ngImport: i0, template: `
-        <ng-container *ngIf="template; else span">
-            <ng-container
-                *ngTemplateOutlet="template; context: { index: index, active: active, highlighted: highlighted, class: separatorClass }"
-            ></ng-container>
-        </ng-container>
-        <ng-template #span>
-            <span [class]="separatorClass" aria-hidden="true"></span>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        }] });
+class StepperSeparator extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: StepperSeparator, isStandalone: true, selector: "p-stepper-separator", host: { properties: { "class.p-stepper-separator": "true", "class.p-component": "true" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperSeparator, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-stepperSeparator, p-stepper-separator',
-                    template: `
-        <ng-container *ngIf="template; else span">
-            <ng-container
-                *ngTemplateOutlet="template; context: { index: index, active: active, highlighted: highlighted, class: separatorClass }"
-            ></ng-container>
-        </ng-container>
-        <ng-template #span>
-            <span [class]="separatorClass" aria-hidden="true"></span>
-        </ng-template>
-    `,
+                    selector: 'p-stepper-separator',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
                     host: {
-                        class: 'p-stepper-separator',
+                        '[class.p-stepper-separator]': 'true',
+                        '[class.p-component]': 'true',
                     },
                 }]
-        }], propDecorators: { template: [{
-                type: Input
-            }], separatorClass: [{
-                type: Input
-            }], stepperPanel: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], highlighted: [{
-                type: Input
-            }] } });
-class StepperContent {
-    id;
-    orientation;
-    template;
-    ariaLabelledby;
-    stepperPanel;
-    index;
-    active;
-    highlighted;
-    onClick = new EventEmitter();
-    prevCallback = new EventEmitter();
-    nextCallback = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: StepperContent, selector: "p-stepperContent, p-stepper-content", inputs: { id: "id", orientation: "orientation", template: "template", ariaLabelledby: "ariaLabelledby", stepperPanel: "stepperPanel", index: "index", active: "active", highlighted: "highlighted" }, outputs: { onClick: "onClick", prevCallback: "prevCallback", nextCallback: "nextCallback" }, host: { properties: { "class.p-steppanel-content": "true", "class.p-element": "true", "class.p-toggleable-content": "orientation === 'vertical'" } }, ngImport: i0, template: ` <div
-        [id]="id"
-        role="tabpanel"
-        data-pc-name="stepperpanel"
-        [attr.data-pc-index]="index"
-        [attr.data-p-active]="active"
-        [attr.aria-labelledby]="ariaLabelledby"
-    >
-        <ng-container *ngIf="template">
-            <ng-container
-                *ngTemplateOutlet="
-                    template;
-                    context: {
-                        index: index,
-                        active: active,
-                        highlighted: highlighted,
-                        onClick: onClick,
-                        prevCallback: prevCallback,
-                        nextCallback: nextCallback,
-                    }
-                "
-            ></ng-container>
-        </ng-container>
-        <ng-template *ngIf="!template">
-            <ng-container *ngIf="stepperPanel">
-                <ng-container *ngTemplateOutlet="stepperPanel"></ng-container>
-            </ng-container>
-        </ng-template>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperContent, decorators: [{
+        }] });
+/**
+ * StepItem is a helper component for Stepper component used in vertical orientation.
+ * @group Components
+ */
+class StepItem extends BaseComponent {
+    pcStepper = inject(forwardRef(() => Stepper));
+    /**
+     * Value of step.
+     * @type {<number | undefined>}
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model();
+    isActive = computed(() => this.pcStepper.value() === this.value());
+    step = contentChild(Step);
+    stepPanel = contentChild(StepPanel);
+    constructor() {
+        super();
+        effect(() => {
+            this.step().value.set(this.value());
+        }, { allowSignalWrites: true });
+        effect(() => {
+            this.stepPanel().value.set(this.value());
+        }, { allowSignalWrites: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: StepItem, isStandalone: true, selector: "p-step-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-stepitem": "true", "class.p-component": "true", "attr.data-p-active": "isActive()" } }, queries: [{ propertyName: "step", first: true, predicate: Step, descendants: true, isSignal: true }, { propertyName: "stepPanel", first: true, predicate: StepPanel, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepItem, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-stepperContent, p-stepper-content',
-                    template: ` <div
-        [id]="id"
-        role="tabpanel"
-        data-pc-name="stepperpanel"
-        [attr.data-pc-index]="index"
-        [attr.data-p-active]="active"
-        [attr.aria-labelledby]="ariaLabelledby"
-    >
-        <ng-container *ngIf="template">
-            <ng-container
-                *ngTemplateOutlet="
-                    template;
-                    context: {
-                        index: index,
-                        active: active,
-                        highlighted: highlighted,
-                        onClick: onClick,
-                        prevCallback: prevCallback,
-                        nextCallback: nextCallback,
-                    }
-                "
-            ></ng-container>
-        </ng-container>
-        <ng-template *ngIf="!template">
-            <ng-container *ngIf="stepperPanel">
-                <ng-container *ngTemplateOutlet="stepperPanel"></ng-container>
-            </ng-container>
-        </ng-template>
-    </div>`,
+                    selector: 'p-step-item',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-steppanel-content]': 'true',
-                        '[class.p-element]': 'true',
-                        '[class.p-toggleable-content]': "orientation === 'vertical'",
+                        '[class.p-stepitem]': 'true',
+                        '[class.p-component]': 'true',
+                        '[attr.data-p-active]': 'isActive()',
                     },
                 }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], ariaLabelledby: [{
-                type: Input
-            }], stepperPanel: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], highlighted: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }], prevCallback: [{
-                type: Output
-            }], nextCallback: [{
-                type: Output
-            }] } });
-class StepperPanel extends BaseComponent {
-    header;
-    templates;
-    headerTemplate;
-    startTemplate;
+        }], ctorParameters: () => [] });
+/**
+ * Step is a helper component for Stepper component.
+ * @group Components
+ */
+class Step extends BaseComponent {
+    pcStepper = inject(forwardRef(() => Stepper));
+    /**
+     * Active value of stepper.
+     * @type {number}
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model();
+    /**
+     * Whether the step is disabled.
+     * @type {boolean}
+     * @defaultValue false
+     * @group Props
+     */
+    disabled = input(false, {
+        transform: (v) => transformToBoolean(v),
+    });
+    active = computed(() => this.pcStepper.isStepActive(this.value()));
+    isStepDisabled = computed(() => !this.active() && (this.pcStepper.linear() || this.disabled()));
+    id = computed(() => `${this.pcStepper.id()}_step_${this.value()}`);
+    ariaControls = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`);
+    isSeparatorVisible = computed(() => {
+        if (this.pcStepper.stepList()) {
+            const index = ObjectUtils.findIndexInList(this.el.nativeElement, this.pcStepper.stepList().el.nativeElement.children);
+            const stepLen = DomHandler.find(this.pcStepper.stepList().el.nativeElement, '[data-pc-name="step"]').length;
+            return index !== stepLen - 1;
+        }
+    });
+    /**
+     * Content template.
+     * @type {TemplateRef<StepContentTemplateContext>}
+     * @group Templates
+     */
     contentTemplate;
-    separatorTemplate;
-    endTemplate;
+    templates;
     ngAfterContentInit() {
-        this.templates.forEach((item) => {
+        this.templates?.forEach((item) => {
             switch (item.getType()) {
-                case 'header':
-                    this.headerTemplate = item.template;
-                    break;
                 case 'content':
                     this.contentTemplate = item.template;
                     break;
-                case 'separator':
-                    this.separatorTemplate = item.template;
-                    break;
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: StepperPanel, selector: "p-stepperPanel, p-stepper-panel", inputs: { header: "header" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+    onStepClick() {
+        this.pcStepper.updateValue(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Step, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: Step, isStandalone: true, selector: "p-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.p-step": "true", "class.p-step-active": "active()", "class.p-disabled": "isStepDisabled()", "class.p-component": "true", "attr.aria-current": "active() ? \"step\" : undefined", "attr.role": "\"presentation\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "isStepDisabled()", "attr.data-pc-name": "\"step\"" } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+        @if (!contentTemplate) {
+            <button
+                [attr.id]="id()"
+                class="p-step-header"
+                [attr.role]="'tab'"
+                [tabindex]="isStepDisabled() ? -1 : undefined"
+                [attr.aria-controls]="ariaControls()"
+                [disabled]="isStepDisabled()"
+                (click)="onStepClick()"
+            >
+                <span class="p-step-number">{{ value() }}</span>
+                <span class="p-step-title">
+                    <ng-content></ng-content>
+                </span>
+            </button>
+            @if (isSeparatorVisible()) {
+                <p-stepper-separator />
+            }
+        } @else {
+            <ng-container
+                *ngTemplateOutlet="contentTemplate; context: { activateCallback: onStepClick.bind(this), value: value(), active: active() }"
+            ></ng-container>
+            @if (isSeparatorVisible()) {
+                <p-stepper-separator />
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperSeparator, selector: "p-stepper-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Step, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-stepperPanel, p-stepper-panel',
-                    template: ` <ng-content></ng-content> `,
+                    selector: 'p-step',
+                    standalone: true,
+                    imports: [CommonModule, StepperSeparator],
+                    template: `
+        @if (!contentTemplate) {
+            <button
+                [attr.id]="id()"
+                class="p-step-header"
+                [attr.role]="'tab'"
+                [tabindex]="isStepDisabled() ? -1 : undefined"
+                [attr.aria-controls]="ariaControls()"
+                [disabled]="isStepDisabled()"
+                (click)="onStepClick()"
+            >
+                <span class="p-step-number">{{ value() }}</span>
+                <span class="p-step-title">
+                    <ng-content></ng-content>
+                </span>
+            </button>
+            @if (isSeparatorVisible()) {
+                <p-stepper-separator />
+            }
+        } @else {
+            <ng-container
+                *ngTemplateOutlet="contentTemplate; context: { activateCallback: onStepClick.bind(this), value: value(), active: active() }"
+            ></ng-container>
+            @if (isSeparatorVisible()) {
+                <p-stepper-separator />
+            }
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-step]': 'true',
+                        '[class.p-step-active]': 'active()',
+                        '[class.p-disabled]': 'isStepDisabled()',
+                        '[class.p-component]': 'true',
+                        '[attr.aria-current]': 'active() ? "step" : undefined',
+                        '[attr.role]': '"presentation"',
+                        '[attr.data-p-active]': 'active()',
+                        '[attr.data-p-disabled]': 'isStepDisabled()',
+                        '[attr.data-pc-name]': '"step"',
+                    },
                 }]
-        }], propDecorators: { header: [{
-                type: Input
+        }], propDecorators: { contentTemplate: [{
+                type: ContentChild,
+                args: ['content']
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
             }] } });
 /**
- * The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.
+ * StepPanel is a helper component for Stepper component.
  * @group Components
  */
-class Stepper extends BaseComponent {
+class StepPanel extends BaseComponent {
+    pcStepper = inject(forwardRef(() => Stepper));
+    transitionOptions = computed(() => this.pcStepper.transitionOptions());
     /**
-     * Active step index of stepper.
+     * Active value of stepper.
+     * @type {number}
+     * @defaultValue undefined
      * @group Props
      */
-    activeStep = 0;
-    /**
-     * Orientation of the stepper.
-     * @group Props
-     */
-    orientation = 'horizontal';
-    /**
-     * Whether the steps are clickable or not.
-     * @group Props
-     */
-    linear = false;
+    value = model(undefined);
+    active = computed(() => this.pcStepper.value() === this.value());
+    ariaControls = computed(() => `${this.pcStepper.id()}_step_${this.value()}`);
+    id = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`);
+    isVertical = computed(() => this.pcStepper.stepItems().length > 0);
+    isSeparatorVisible = computed(() => {
+        if (this.pcStepper.stepItems()) {
+            const stepLen = this.pcStepper.stepItems().length;
+            const stepPanelElements = DomHandler.find(this.pcStepper.el.nativeElement, '[data-pc-name="steppanel"]');
+            const index = ObjectUtils.findIndexInList(this.el.nativeElement, stepPanelElements);
+            return index !== stepLen - 1;
+        }
+    });
     /**
-     * Transition options of the animation.
-     * @group Props
+     * Content template.
+     * @type {TemplateRef<StepPanelContentTemplateContext>}
+     * @group Templates
      */
-    transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
-    stepperPanels;
+    contentTemplate;
     templates;
-    onClick = new EventEmitter();
-    /**
-     * Emitted when the value changes.
-     * @param {ActiveStepChangeEvent} event - custom change event.
-     * @group Emits
-     */
-    activeStepChange = new EventEmitter();
-    _componentStyle = inject(StepperStyle);
-    headerTemplate;
-    startTemplate;
-    separatorTemplate;
-    endTemplate;
-    id = UniqueComponentId();
-    panels;
-    isStepActive(index) {
-        return this.activeStep === index;
-    }
-    getStepProp(step) {
-        if (step?.header) {
-            return step.header;
-        }
-        if (step?.content) {
-            return step.content;
-        }
-        return undefined;
-    }
-    getStepKey(step, index) {
-        return this.getStepProp(step) || index;
-    }
-    getStepHeaderActionId(index) {
-        return `${this.id}_${index}_header_action`;
-    }
-    getStepContentId(index) {
-        return `${this.id}_${index}_content`;
-    }
-    updateActiveStep(event, index) {
-        this.activeStep = index;
-        this.activeStepChange.emit(this.activeStep);
-    }
-    onItemClick(event, index) {
-        if (this.linear) {
-            event.preventDefault();
-            return;
-        }
-        if (index !== this.activeStep) {
-            this.updateActiveStep(event, index);
-        }
-    }
-    isItemDisabled(index) {
-        return this.linear && !this.isStepActive(index);
-    }
-    prevCallback(event, index) {
-        if (index !== 0) {
-            this.updateActiveStep(event, index - 1);
-        }
-    }
-    nextCallback(event, index) {
-        if (index !== this.stepperPanels.length - 1) {
-            this.updateActiveStep(event, index + 1);
-        }
-    }
-    trackByFn(index) {
-        return index;
-    }
     ngAfterContentInit() {
-        this.panels = this.stepperPanels.toArray();
-        this.templates.forEach((item) => {
+        this.templates?.forEach((item) => {
             switch (item.getType()) {
-                case 'start':
-                    this.startTemplate = item.template;
-                    break;
-                case 'end':
-                    this.endTemplate = item.template;
-                    break;
-                default:
+                case 'content':
+                    this.contentTemplate = item.template;
                     break;
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: Stepper, selector: "p-stepper", inputs: { activeStep: "activeStep", orientation: "orientation", linear: "linear", transitionOptions: "transitionOptions" }, outputs: { onClick: "onClick", activeStepChange: "activeStepChange" }, host: { properties: { "class.p-stepper": "true", "class.p-component": "true", "class.p-stepper-vertical": "orientation === 'vertical'" } }, providers: [StepperStyle], queries: [{ propertyName: "stepperPanels", predicate: StepperPanel }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="startTemplate">
-            <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="orientation === 'horizontal'; else vertical">
-            <ul class="p-steplist">
-                <ng-template ngFor let-step [ngForOf]="panels" let-index="index" [ngForTrackBy]="trackByFn">
-                    <li
-                        [key]="getStepKey(step, index)"
-                        class="p-step"
-                        [ngClass]="{
-                            'p-step-active': isStepActive(index),
-                            'p-disabled': isItemDisabled(index),
-                        }"
-                        [attr.aria-current]="isStepActive(index) ? 'step' : undefined"
-                        role="presentation"
-                        [data-pc-name]="stepperPanel"
-                        [data-p-highlight]="isStepActive(index)"
-                        [data-p-disabled]="isItemDisabled(index)"
-                        [data-pc-index]="index"
-                        [data-p-active]="isStepActive(index)"
-                    >
-                        <p-stepper-header
-                            [id]="getStepHeaderActionId(index)"
-                            [template]="step.headerTemplate"
-                            [stepperPanel]="step"
-                            [getStepProp]="getStepProp(step, 'header')"
-                            [index]="index"
-                            [disabled]="isItemDisabled(index)"
-                            [active]="isStepActive(index)"
-                            [highlighted]="index < activeStep"
-                            [aria-controls]="getStepContentId(index)"
-                            (onClick)="onItemClick($event, index)"
-                        ></p-stepper-header>
-
-                        <ng-container *ngIf="index !== stepperPanels.length - 1">
-                            <p-stepper-separator
-                                [template]="step.separatorTemplate"
-                                [separatorClass]="'p-stepper-separator'"
-                                [stepperPanel]="step"
-                                [index]="index"
-                                [active]="isStepActive(index)"
-                                [highlighted]="index < activeStep"
-                            />
-                        </ng-container>
-                    </li>
-                </ng-template>
-            </ul>
-            <div class="p-stepper-panels">
-                <ng-template ngFor let-step [ngForOf]="panels" let-index="index" [ngForTrackBy]="trackByFn">
-                    <ng-container *ngIf="isStepActive(index)">
-                        <p-stepper-content
-                            [id]="getStepContentId(index)"
-                            [template]="step.contentTemplate"
-                            [orientation]="orientation"
-                            [stepperPanel]="step"
-                            [index]="index"
-                            [active]="isStepActive(index)"
-                            [highlighted]="index < activeStep"
-                            [ariaLabelledby]="getStepHeaderActionId(index)"
-                            (onClick)="onItemClick($event, index)"
-                            (nextCallback)="nextCallback($event, index)"
-                            (prevCallback)="prevCallback($event, index)"
-                        />
-                    </ng-container>
-                </ng-template>
-            </div>
-        </ng-container>
-        <ng-template #vertical>
-            <ng-template ngFor let-step [ngForOf]="panels" let-index="index" [ngForTrackBy]="trackByFn">
-                <div
-                    [key]="getStepKey(step, index)"
-                    class="p-stepitem"
-                    [ngClass]="{
-                        'p-stepitem-active': orientation === 'vertical' && isStepActive(index),
-                    }"
-                    [attr.aria-current]="isStepActive(index) ? 'step' : undefined"
-                    [data-pc-name]="'stepperpanel'"
-                    [data-p-highlight]="isStepActive(index)"
-                    [data-p-disabled]="isItemDisabled(index)"
-                    [data-pc-index]="index"
-                    [data-p-active]="isStepActive(index)"
-                >
-                    <p-stepper-header
-                        [id]="getStepHeaderActionId(index)"
-                        [template]="step.headerTemplate"
-                        [stepperPanel]="step"
-                        [getStepProp]="getStepProp(step, 'header')"
-                        [index]="index"
-                        [disabled]="isItemDisabled(index)"
-                        [active]="isStepActive(index)"
-                        [highlighted]="index < activeStep"
-                        [aria-controls]="getStepContentId(index)"
-                        class="p-step"
-                        [ngClass]="{ 'p-step-active': isStepActive(index) }"
-                        (onClick)="onItemClick($event, index)"
-                    ></p-stepper-header>
-
-                    <div
-                        class="p-steppanel"
-                        [ngClass]="{ 'p-steppanel-active': isStepActive(index) }"
-                        [@tabContent]="
-                            isStepActive(index)
-                                ? { value: 'visible', params: { transitionParams: transitionOptions } }
-                                : { value: 'hidden', params: { transitionParams: transitionOptions } }
-                        "
-                    >
-                        <ng-container *ngIf="index !== stepperPanels.length - 1">
-                            <p-stepper-separator
-                                [template]="step.separatorTemplate"
-                                [separatorClass]="'p-stepper-separator'"
-                                [stepperPanel]="step"
-                                [index]="index"
-                                [active]="isStepActive(index)"
-                                [highlighted]="index < activeStep"
-                            />
-                        </ng-container>
-                        <p-stepper-content
-                            [id]="getStepContentId(index)"
-                            [template]="step.contentTemplate"
-                            [orientation]="orientation"
-                            [stepperPanel]="step"
-                            [index]="index"
-                            [active]="isStepActive(index)"
-                            [highlighted]="index < activeStep"
-                            [ariaLabelledby]="getStepHeaderActionId(index)"
-                            (onClick)="onItemClick($event, index)"
-                            (nextCallback)="nextCallback($event, index)"
-                            (prevCallback)="prevCallback($event, index)"
-                        />
-                    </div>
-                </div>
-            </ng-template>
-        </ng-template>
-        <ng-container *ngIf="endTemplate">
-            <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperContent, selector: "p-stepperContent, p-stepper-content", inputs: ["id", "orientation", "template", "ariaLabelledby", "stepperPanel", "index", "active", "highlighted"], outputs: ["onClick", "prevCallback", "nextCallback"] }, { kind: "component", type: StepperHeader, selector: "p-stepperHeader, p-stepper-header", inputs: ["id", "template", "stepperPanel", "index", "disabled", "active", "highlighted", "getStepProp", "ariaControls"], outputs: ["onClick"] }, { kind: "component", type: StepperSeparator, selector: "p-stepperSeparator, p-stepper-separator", inputs: ["template", "separatorClass", "stepperPanel", "index", "active", "highlighted"] }], animations: [
-            trigger('tabContent', [
+    updateValue(value) {
+        this.pcStepper.updateValue(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: StepPanel, isStandalone: true, selector: "p-step-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-steppanel": "true", "class.p-component": "true", "class.p-steppanel-active": "active()", "attr.role": "\"tabpanel\"", "attr.aria-controls": "ariaControls()", "attr.id": "id()", "attr.data-p-active": "active()", "attr.data-pc-name": "\"steppanel\"" } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+        @if (isSeparatorVisible()) {
+            <p-stepper-separator />
+        }
+        <div
+            class="p-steppanel-content"
+            [@content]="
+                isVertical()
+                    ? active()
+                        ? { value: 'visible', params: { transitionParams: transitionOptions() } }
+                        : { value: 'hidden', params: { transitionParams: transitionOptions() } }
+                    : undefined
+            "
+        >
+            @if (active()) {
+                <ng-container
+                    *ngTemplateOutlet="
+                        contentTemplate;
+                        context: { activateCallback: updateValue.bind(this), value: value(), active: active() }
+                    "
+                ></ng-container>
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperSeparator, selector: "p-stepper-separator" }], animations: [
+            trigger('content', [
                 state('hidden', style({
                     height: '0',
                     visibility: 'hidden',
@@ -784,158 +532,50 @@ class Stepper extends BaseComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Stepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepPanel, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-stepper',
+                    selector: 'p-step-panel',
+                    standalone: true,
+                    imports: [CommonModule, StepperSeparator],
                     template: `
-        <ng-container *ngIf="startTemplate">
-            <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="orientation === 'horizontal'; else vertical">
-            <ul class="p-steplist">
-                <ng-template ngFor let-step [ngForOf]="panels" let-index="index" [ngForTrackBy]="trackByFn">
-                    <li
-                        [key]="getStepKey(step, index)"
-                        class="p-step"
-                        [ngClass]="{
-                            'p-step-active': isStepActive(index),
-                            'p-disabled': isItemDisabled(index),
-                        }"
-                        [attr.aria-current]="isStepActive(index) ? 'step' : undefined"
-                        role="presentation"
-                        [data-pc-name]="stepperPanel"
-                        [data-p-highlight]="isStepActive(index)"
-                        [data-p-disabled]="isItemDisabled(index)"
-                        [data-pc-index]="index"
-                        [data-p-active]="isStepActive(index)"
-                    >
-                        <p-stepper-header
-                            [id]="getStepHeaderActionId(index)"
-                            [template]="step.headerTemplate"
-                            [stepperPanel]="step"
-                            [getStepProp]="getStepProp(step, 'header')"
-                            [index]="index"
-                            [disabled]="isItemDisabled(index)"
-                            [active]="isStepActive(index)"
-                            [highlighted]="index < activeStep"
-                            [aria-controls]="getStepContentId(index)"
-                            (onClick)="onItemClick($event, index)"
-                        ></p-stepper-header>
-
-                        <ng-container *ngIf="index !== stepperPanels.length - 1">
-                            <p-stepper-separator
-                                [template]="step.separatorTemplate"
-                                [separatorClass]="'p-stepper-separator'"
-                                [stepperPanel]="step"
-                                [index]="index"
-                                [active]="isStepActive(index)"
-                                [highlighted]="index < activeStep"
-                            />
-                        </ng-container>
-                    </li>
-                </ng-template>
-            </ul>
-            <div class="p-stepper-panels">
-                <ng-template ngFor let-step [ngForOf]="panels" let-index="index" [ngForTrackBy]="trackByFn">
-                    <ng-container *ngIf="isStepActive(index)">
-                        <p-stepper-content
-                            [id]="getStepContentId(index)"
-                            [template]="step.contentTemplate"
-                            [orientation]="orientation"
-                            [stepperPanel]="step"
-                            [index]="index"
-                            [active]="isStepActive(index)"
-                            [highlighted]="index < activeStep"
-                            [ariaLabelledby]="getStepHeaderActionId(index)"
-                            (onClick)="onItemClick($event, index)"
-                            (nextCallback)="nextCallback($event, index)"
-                            (prevCallback)="prevCallback($event, index)"
-                        />
-                    </ng-container>
-                </ng-template>
-            </div>
-        </ng-container>
-        <ng-template #vertical>
-            <ng-template ngFor let-step [ngForOf]="panels" let-index="index" [ngForTrackBy]="trackByFn">
-                <div
-                    [key]="getStepKey(step, index)"
-                    class="p-stepitem"
-                    [ngClass]="{
-                        'p-stepitem-active': orientation === 'vertical' && isStepActive(index),
-                    }"
-                    [attr.aria-current]="isStepActive(index) ? 'step' : undefined"
-                    [data-pc-name]="'stepperpanel'"
-                    [data-p-highlight]="isStepActive(index)"
-                    [data-p-disabled]="isItemDisabled(index)"
-                    [data-pc-index]="index"
-                    [data-p-active]="isStepActive(index)"
-                >
-                    <p-stepper-header
-                        [id]="getStepHeaderActionId(index)"
-                        [template]="step.headerTemplate"
-                        [stepperPanel]="step"
-                        [getStepProp]="getStepProp(step, 'header')"
-                        [index]="index"
-                        [disabled]="isItemDisabled(index)"
-                        [active]="isStepActive(index)"
-                        [highlighted]="index < activeStep"
-                        [aria-controls]="getStepContentId(index)"
-                        class="p-step"
-                        [ngClass]="{ 'p-step-active': isStepActive(index) }"
-                        (onClick)="onItemClick($event, index)"
-                    ></p-stepper-header>
-
-                    <div
-                        class="p-steppanel"
-                        [ngClass]="{ 'p-steppanel-active': isStepActive(index) }"
-                        [@tabContent]="
-                            isStepActive(index)
-                                ? { value: 'visible', params: { transitionParams: transitionOptions } }
-                                : { value: 'hidden', params: { transitionParams: transitionOptions } }
-                        "
-                    >
-                        <ng-container *ngIf="index !== stepperPanels.length - 1">
-                            <p-stepper-separator
-                                [template]="step.separatorTemplate"
-                                [separatorClass]="'p-stepper-separator'"
-                                [stepperPanel]="step"
-                                [index]="index"
-                                [active]="isStepActive(index)"
-                                [highlighted]="index < activeStep"
-                            />
-                        </ng-container>
-                        <p-stepper-content
-                            [id]="getStepContentId(index)"
-                            [template]="step.contentTemplate"
-                            [orientation]="orientation"
-                            [stepperPanel]="step"
-                            [index]="index"
-                            [active]="isStepActive(index)"
-                            [highlighted]="index < activeStep"
-                            [ariaLabelledby]="getStepHeaderActionId(index)"
-                            (onClick)="onItemClick($event, index)"
-                            (nextCallback)="nextCallback($event, index)"
-                            (prevCallback)="prevCallback($event, index)"
-                        />
-                    </div>
-                </div>
-            </ng-template>
-        </ng-template>
-        <ng-container *ngIf="endTemplate">
-            <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
-        </ng-container>
+        @if (isSeparatorVisible()) {
+            <p-stepper-separator />
+        }
+        <div
+            class="p-steppanel-content"
+            [@content]="
+                isVertical()
+                    ? active()
+                        ? { value: 'visible', params: { transitionParams: transitionOptions() } }
+                        : { value: 'hidden', params: { transitionParams: transitionOptions() } }
+                    : undefined
+            "
+        >
+            @if (active()) {
+                <ng-container
+                    *ngTemplateOutlet="
+                        contentTemplate;
+                        context: { activateCallback: updateValue.bind(this), value: value(), active: active() }
+                    "
+                ></ng-container>
+            }
+        </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [StepperStyle],
                     host: {
-                        '[class.p-stepper]': 'true',
+                        '[class.p-steppanel]': 'true',
                         '[class.p-component]': 'true',
-                        '[class.p-stepper-vertical]': "orientation === 'vertical'",
+                        '[class.p-steppanel-active]': 'active()',
+                        '[attr.role]': '"tabpanel"',
+                        '[attr.aria-controls]': 'ariaControls()',
+                        '[attr.id]': 'id()',
+                        '[attr.data-p-active]': 'active()',
+                        '[attr.data-pc-name]': '"steppanel"',
                     },
                     animations: [
-                        trigger('tabContent', [
+                        trigger('content', [
                             state('hidden', style({
                                 height: '0',
                                 visibility: 'hidden',
@@ -949,36 +589,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         ]),
                     ],
                 }]
-        }], propDecorators: { activeStep: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], linear: [{
-                type: Input
-            }], transitionOptions: [{
-                type: Input
-            }], stepperPanels: [{
-                type: ContentChildren,
-                args: [StepperPanel]
+        }], propDecorators: { contentTemplate: [{
+                type: ContentChild,
+                args: ['content']
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
-            }], onClick: [{
-                type: Output
-            }], activeStepChange: [{
-                type: Output
             }] } });
+class StepPanels extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: StepPanels, isStandalone: true, selector: "p-step-panels", host: { properties: { "class.p-steppanels": "true", "class.p-component": "true" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepPanels, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-step-panels',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-steppanels]': 'true',
+                        '[class.p-component]': 'true',
+                    },
+                }]
+        }] });
+/**
+ * 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 {
+    /**
+     * A model that can hold a numeric value or be undefined.
+     * @defaultValue undefined
+     * @type {ModelSignal<number | undefined>}
+     * @group Props
+     */
+    value = model(undefined);
+    /**
+     * A boolean variable that captures user input.
+     * @defaultValue false
+     * @type {InputSignalWithTransform<any, boolean >}
+     * @group Props
+     */
+    linear = input(false, {
+        transform: (v) => transformToBoolean(v),
+    });
+    /**
+     * Transition options of the animation.
+     * @defaultValue 400ms cubic-bezier(0.86, 0, 0.07, 1)
+     * @type {InputSignal<string >}
+     * @group Props
+     */
+    transitionOptions = input('400ms cubic-bezier(0.86, 0, 0.07, 1)');
+    _componentStyle = inject(StepperStyle);
+    id = signal(UniqueComponentId());
+    stepItems = contentChildren(StepItem);
+    steps = contentChildren(Step);
+    stepList = contentChild(StepList);
+    updateValue(value) {
+        this.value.set(value);
+    }
+    isStepActive(value) {
+        return this.value() === value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: Stepper, isStandalone: true, selector: "p-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 } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-stepper": "true", "class.p-component": "true", "attr.role": "\"tablist\"", "attr.id": "id()" } }, providers: [StepperStyle], 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, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Stepper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-stepper',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: ` <ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [StepperStyle],
+                    host: {
+                        '[class.p-stepper]': 'true',
+                        '[class.p-component]': 'true',
+                        '[attr.role]': '"tablist"',
+                        '[attr.id]': 'id()',
+                    },
+                }]
+        }] });
 class StepperModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: StepperModule, declarations: [Stepper, StepperPanel, StepperPanel, StepperContent, StepperHeader, StepperSeparator], imports: [CommonModule, SharedModule], exports: [Stepper, StepperPanel, StepperContent, StepperHeader, StepperSeparator, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperModule, imports: [CommonModule, SharedModule, SharedModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule], exports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, SharedModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: StepperModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule],
-                    exports: [Stepper, StepperPanel, StepperContent, StepperHeader, StepperSeparator, SharedModule],
-                    declarations: [Stepper, StepperPanel, StepperPanel, StepperContent, StepperHeader, StepperSeparator],
+                    imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule],
+                    exports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule],
                 }]
         }] });
 
@@ -986,5 +692,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Stepper, StepperContent, StepperHeader, StepperModule, StepperPanel, StepperSeparator };
+export { Step, StepItem, StepList, StepPanel, StepPanels, Stepper, StepperClasses, StepperModule, StepperSeparator, StepperStyle };
 //# sourceMappingURL=primeng-stepper.mjs.map