primeng 20.0.0-rc.2 → 20.0.0

package/fesm2022/primeng-stepper.mjs

@@ -21,10 +21,10 @@ const classes$5 = {
 class StepItemStyle extends BaseStyle {
     name = 'stepitem';
     classes = classes$5;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItemStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItemStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepItemStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepItemStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItemStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepItemStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -50,10 +50,10 @@ const classes$4 = {
 class StepListStyle extends BaseStyle {
     name = 'steplist';
     classes = classes$4;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepListStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepListStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepListStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepListStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -79,10 +79,10 @@ const classes$3 = {
 class StepPanelsStyle extends BaseStyle {
     name = 'steppanel';
     classes = classes$3;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelsStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanelsStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelsStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanelsStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -114,10 +114,10 @@ const classes$2 = {
 class StepPanelStyle extends BaseStyle {
     name = 'steppanel';
     classes = classes$2;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanelStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanelStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -159,10 +159,10 @@ class StepperStyle extends BaseStyle {
     name = 'stepper';
     theme = theme;
     classes = classes$1;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepperStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepperStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepperStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -201,10 +201,10 @@ const classes = {
 class StepStyle extends BaseStyle {
     name = 'step';
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -237,12 +237,12 @@ var StepClasses;
 })(StepClasses || (StepClasses = {}));
 
 class StepList extends BaseComponent {
-    steps = contentChildren(forwardRef(() => Step));
+    steps = contentChildren(forwardRef(() => Step), ...(ngDevMode ? [{ debugName: "steps" }] : []));
     _componentStyle = inject(StepListStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: StepList, isStandalone: true, selector: "p-step-list", host: { properties: { "class": "cx(\"root\")" } }, providers: [StepListStyle], queries: [{ propertyName: "steps", predicate: i0.forwardRef(() => Step), 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.0", type: StepList, isStandalone: true, selector: "p-step-list", host: { properties: { "class": "cx(\"root\")" } }, providers: [StepListStyle], queries: [{ propertyName: "steps", predicate: i0.forwardRef(() => Step), 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: "20.0.6", ngImport: i0, type: StepList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step-list',
@@ -259,10 +259,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         }] });
 class StepperSeparator extends BaseComponent {
     _componentStyle = inject(StepperStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: StepperSeparator, isStandalone: true, selector: "p-stepper-separator", host: { properties: { "class": "cx(\"separator\")" } }, providers: [StepperStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepperSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: StepperSeparator, isStandalone: true, selector: "p-stepper-separator", host: { properties: { "class": "cx(\"separator\")" } }, providers: [StepperStyle], 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: "20.0.6", ngImport: i0, type: StepperSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepperSeparator, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-stepper-separator',
@@ -289,10 +289,10 @@ class StepItem extends BaseComponent {
      * @defaultValue undefined
      * @group Props
      */
-    value = model();
-    isActive = computed(() => this.pcStepper.value() === this.value());
-    step = contentChild(forwardRef(() => Step));
-    stepPanel = contentChild(forwardRef(() => StepPanel));
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    isActive = computed(() => this.pcStepper.value() === this.value(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    step = contentChild(forwardRef(() => Step), ...(ngDevMode ? [{ debugName: "step" }] : []));
+    stepPanel = contentChild(forwardRef(() => StepPanel), ...(ngDevMode ? [{ debugName: "stepPanel" }] : []));
     constructor() {
         super();
         effect(() => {
@@ -303,10 +303,10 @@ class StepItem extends BaseComponent {
         });
     }
     _componentStyle = inject(StepItemStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", 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": "cx(\"root\")", "attr.data-p-active": "isActive()" } }, providers: [StepItemStyle], 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, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.0", 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": "cx(\"root\")", "attr.data-p-active": "isActive()" } }, providers: [StepItemStyle], 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, 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: "20.0.6", ngImport: i0, type: StepItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step-item',
@@ -334,20 +334,20 @@ class Step extends BaseComponent {
      * @defaultValue undefined
      * @group Props
      */
-    value = model();
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     /**
      * 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()}`);
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: (v) => transformToBoolean(v) }] : [{
+            transform: (v) => transformToBoolean(v)
+        }]));
+    active = computed(() => this.pcStepper.isStepActive(this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    isStepDisabled = computed(() => !this.active() && (this.pcStepper.linear() || this.disabled()), ...(ngDevMode ? [{ debugName: "isStepDisabled" }] : []));
+    id = computed(() => `${this.pcStepper.id()}_step_${this.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    ariaControls = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
     isSeparatorVisible = computed(() => {
         if (this.pcStepper.stepList()) {
             const steps = this.pcStepper.stepList().steps();
@@ -358,7 +358,7 @@ class Step extends BaseComponent {
         else {
             return false;
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "isSeparatorVisible" }] : []));
     /**
      * Content template.
      * @type {TemplateRef<StepContentTemplateContext>}
@@ -380,8 +380,8 @@ class Step extends BaseComponent {
     onStepClick() {
         this.pcStepper.updateValue(this.value());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Step, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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": "cx(\"root\")", "attr.aria-current": "active() ? \"step\" : undefined", "attr.role": "\"presentation\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "isStepDisabled()", "attr.data-pc-name": "\"step\"" } }, providers: [StepStyle], queries: [{ propertyName: "content", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: Step, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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": "cx(\"root\")", "attr.aria-current": "active() ? \"step\" : undefined", "attr.role": "\"presentation\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "isStepDisabled()", "attr.data-pc-name": "\"step\"" } }, providers: [StepStyle], queries: [{ propertyName: "content", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
         @if (!content && !_contentTemplate) {
             <button [attr.id]="id()" [class]="cx('header')" [attr.role]="'tab'" [tabindex]="isStepDisabled() ? -1 : undefined" [attr.aria-controls]="ariaControls()" [disabled]="isStepDisabled()" (click)="onStepClick()" type="button">
                 <span [class]="cx('number')">{{ value() }}</span>
@@ -400,7 +400,7 @@ class Step extends BaseComponent {
         }
     `, 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" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Step, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: Step, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step',
@@ -449,18 +449,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  */
 class StepPanel extends BaseComponent {
     pcStepper = inject(forwardRef(() => Stepper));
-    transitionOptions = computed(() => this.pcStepper.transitionOptions());
+    transitionOptions = computed(() => this.pcStepper.transitionOptions(), ...(ngDevMode ? [{ debugName: "transitionOptions" }] : []));
     /**
      * Active value of stepper.
      * @type {number}
      * @defaultValue undefined
      * @group Props
      */
-    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);
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    active = computed(() => this.pcStepper.value() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    visible = signal(this.active(), ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    isVisible = computed(() => this.active() || (this.isVertical() && this.visible()), ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    ariaControls = computed(() => `${this.pcStepper.id()}_step_${this.value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
+    id = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    isVertical = computed(() => this.pcStepper.stepItems().length > 0, ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
     isSeparatorVisible = computed(() => {
         if (this.pcStepper.stepItems()) {
             const stepLen = this.pcStepper.stepItems().length;
@@ -468,7 +470,7 @@ class StepPanel extends BaseComponent {
             const index = findIndexInList(this.el.nativeElement, stepPanelElements);
             return index !== stepLen - 1;
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "isSeparatorVisible" }] : []));
     /**
      * Content template.
      * @param {StepPanelContentTemplateContext} context - Context of the template
@@ -488,16 +490,33 @@ class StepPanel extends BaseComponent {
             }
         });
     }
+    onAnimationStart(event) {
+        if (event.toState === 'visible') {
+            this.visible.set(true);
+        }
+    }
+    onAnimationEnd(event) {
+        if (event.toState === 'hidden') {
+            this.visible.set(false);
+        }
+    }
     updateValue(value) {
         this.pcStepper.updateValue(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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": "cx(\"root\")", "attr.role": "\"tabpanel\"", "attr.aria-controls": "ariaControls()", "attr.id": "id()", "attr.data-p-active": "active()", "attr.data-pc-name": "\"steppanel\"", "style.display": "!isVertical() && !active() ? \"none\" : \"\"" } }, providers: [StepPanelStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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": "cx(\"root\")", "attr.role": "\"tabpanel\"", "attr.aria-controls": "ariaControls()", "attr.id": "id()", "attr.data-p-active": "active()", "attr.data-pc-name": "\"steppanel\"" } }, providers: [StepPanelStyle], 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]="cx('content')" [@content]="isVertical() ? (active() ? { value: 'visible', params: { transitionParams: transitionOptions() } } : { value: 'hidden', params: { transitionParams: transitionOptions() } }) : undefined">
-            <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }"></ng-container>
+        <div
+            [class]="cx('content')"
+            [@content]="isVertical() ? (active() ? { value: 'visible', params: { transitionParams: transitionOptions() } } : { value: 'hidden', params: { transitionParams: transitionOptions() } }) : undefined"
+            (@content.start)="onAnimationStart($event)"
+            (@content.done)="onAnimationEnd($event)"
+        >
+            @if (isVisible()) {
+                <ng-container *ngTemplateOutlet="contentTemplate || _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" }, { kind: "ngmodule", type: SharedModule }], animations: [
             trigger('content', [
@@ -512,7 +531,7 @@ class StepPanel extends BaseComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step-panel',
@@ -522,8 +541,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         @if (isSeparatorVisible()) {
             <p-stepper-separator />
         }
-        <div [class]="cx('content')" [@content]="isVertical() ? (active() ? { value: 'visible', params: { transitionParams: transitionOptions() } } : { value: 'hidden', params: { transitionParams: transitionOptions() } }) : undefined">
-            <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }"></ng-container>
+        <div
+            [class]="cx('content')"
+            [@content]="isVertical() ? (active() ? { value: 'visible', params: { transitionParams: transitionOptions() } } : { value: 'hidden', params: { transitionParams: transitionOptions() } }) : undefined"
+            (@content.start)="onAnimationStart($event)"
+            (@content.done)="onAnimationEnd($event)"
+        >
+            @if (isVisible()) {
+                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }"></ng-container>
+            }
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -534,8 +560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[attr.aria-controls]': 'ariaControls()',
                         '[attr.id]': 'id()',
                         '[attr.data-p-active]': 'active()',
-                        '[attr.data-pc-name]': '"steppanel"',
-                        '[style.display]': '!isVertical() && !active() ? "none" : ""'
+                        '[attr.data-pc-name]': '"steppanel"'
                     },
                     animations: [
                         trigger('content', [
@@ -560,10 +585,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             }] } });
 class StepPanels extends BaseComponent {
     _componentStyle = inject(StepPanelsStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: StepPanels, isStandalone: true, selector: "p-step-panels", host: { properties: { "class": "cx(\"root\")" } }, providers: [StepPanelsStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: StepPanels, isStandalone: true, selector: "p-step-panels", host: { properties: { "class": "cx(\"root\")" } }, providers: [StepPanelsStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanels, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepPanels, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step-panels',
@@ -589,38 +614,38 @@ class Stepper extends BaseComponent {
      * @type {ModelSignal<number | undefined>}
      * @group Props
      */
-    value = model(undefined);
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
      * A boolean variable that captures user input.
      * @defaultValue false
      * @type {InputSignalWithTransform<any, boolean >}
      * @group Props
      */
-    linear = input(false, {
-        transform: (v) => transformToBoolean(v)
-    });
+    linear = input(false, ...(ngDevMode ? [{ debugName: "linear", transform: (v) => transformToBoolean(v) }] : [{
+            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)');
+    transitionOptions = input('400ms cubic-bezier(0.86, 0, 0.07, 1)', ...(ngDevMode ? [{ debugName: "transitionOptions" }] : []));
     _componentStyle = inject(StepperStyle);
-    id = signal(uuid('pn_id_'));
-    stepItems = contentChildren(StepItem);
-    steps = contentChildren(Step);
-    stepList = contentChild(StepList);
+    id = signal(uuid('pn_id_'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    stepItems = contentChildren(StepItem, ...(ngDevMode ? [{ debugName: "stepItems" }] : []));
+    steps = contentChildren(Step, ...(ngDevMode ? [{ debugName: "steps" }] : []));
+    stepList = contentChild(StepList, ...(ngDevMode ? [{ debugName: "stepList" }] : []));
     updateValue(value) {
         this.value.set(value);
     }
     isStepActive(value) {
         return this.value() === value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", 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": "cx(\"root\")", "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 }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.0", 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": "cx(\"root\")", "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 }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: Stepper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-stepper',
@@ -638,11 +663,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }] });
 class StepperModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", 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: "20.0.6", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.0", 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: "20.1.0", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: StepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule],