primeng/fesm2022/primeng-stepper.mjs

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, ViewEncapsulation, ChangeDetectionStrategy, Component, model, input, computed, contentChild, effect, contentChildren, signal, NgModule } from '@angular/core';
import { find, findIndexInList, uuid } from '@primeuix/utils';
import { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { transformToBoolean } from 'primeng/utils';
import { NgTemplateOutlet } from '@angular/common';
import { style as style$1 } from '@primeuix/styles/stepper';
import { BaseStyle } from 'primeng/base';
import * as i2 from 'primeng/motion';
import { MotionModule } from 'primeng/motion';

const style = /*css*/ `
${style$1}

.p-steppanel .p-motion {
    display: grid;
    grid-template-rows: 1fr;
}
`;
const classes$5 = {
    root: ({ instance }) => [
        'p-stepper p-component',
        {
            'p-readonly': instance.linear()
        }
    ],
    separator: 'p-stepper-separator'
};
class StepperStyle extends BaseStyle {
    name = 'stepper';
    style = style;
    classes = classes$5;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
 *
 * [Live Demo](https://www.primeng.org/stepper/)
 *
 * @module stepperstyle
 *
 */
var StepperClasses;
(function (StepperClasses) {
    /**
     * Class name of the root element
     */
    StepperClasses["root"] = "p-stepper";
    /**
     * Class name of the separator element
     */
    StepperClasses["separator"] = "p-stepper-separator";
})(StepperClasses || (StepperClasses = {}));

const STEPPER_INSTANCE = new InjectionToken('STEPPER_INSTANCE');
const STEPLIST_INSTANCE = new InjectionToken('STEPLIST_INSTANCE');
const STEPITEM_INSTANCE = new InjectionToken('STEPITEM_INSTANCE');
const STEP_INSTANCE = new InjectionToken('STEP_INSTANCE');
const STEPPANEL_INSTANCE = new InjectionToken('STEPPANEL_INSTANCE');
const STEPPANELS_INSTANCE = new InjectionToken('STEPPANELS_INSTANCE');
const STEPPERSEPARATOR_INSTANCE = new InjectionToken('STEPPERSEPARATOR_INSTANCE');

/**
 * StepperSeparator is a helper component for Stepper component used in vertical orientation.
 * @group Components
 */
class StepperSeparator extends BaseComponent {
    $pcStepperSeparator = inject(STEPPERSEPARATOR_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    componentName = 'StepperSeparator';
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    _componentStyle = inject(StepperStyle);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: StepperSeparator, isStandalone: true, selector: "p-stepper-separator", host: { properties: { "class": "cx(\"separator\")" } }, providers: [StepperStyle, { provide: STEPPERSEPARATOR_INSTANCE, useExisting: StepperSeparator }, { provide: PARENT_INSTANCE, useExisting: StepperSeparator }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperSeparator, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-stepper-separator',
                    standalone: true,
                    imports: [BindModule],
                    template: `<ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[class]': 'cx("separator")'
                    },
                    providers: [StepperStyle, { provide: STEPPERSEPARATOR_INSTANCE, useExisting: StepperSeparator }, { provide: PARENT_INSTANCE, useExisting: StepperSeparator }],
                    hostDirectives: [Bind]
                }]
        }] });

const classes$4 = {
    root: ({ instance }) => [
        'p-step',
        {
            'p-step-active': instance.active(),
            'p-disabled': instance.isStepDisabled()
        }
    ],
    header: 'p-step-header',
    number: 'p-step-number',
    title: 'p-step-title'
};
class StepStyle extends BaseStyle {
    name = 'step';
    classes = classes$4;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
 *
 * [Live Demo](https://www.primeng.org/stepper/)
 *
 * @module stepstyle
 *
 */
var StepClasses;
(function (StepClasses) {
    /**
     * Class name of the root element
     */
    StepClasses["root"] = "p-step";
    /**
     * Class name of the header element
     */
    StepClasses["header"] = "p-step-header";
    /**
     * Class name of the number element
     */
    StepClasses["number"] = "p-step-number";
    /**
     * Class name of the title element
     */
    StepClasses["title"] = "p-step-title";
})(StepClasses || (StepClasses = {}));

/**
 * Step is a helper component for Stepper component.
 * @group Components
 */
class Step extends BaseComponent {
    $pcStep = inject(STEP_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    componentName = 'Step';
    pcStepper = inject(STEPPER_INSTANCE);
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    /**
     * Active value of stepper.
     * @defaultValue undefined
     * @group Props
     */
    value = model(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
    /**
     * Whether the step is disabled.
     * @defaultValue false
     * @group Props
     */
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
    active = computed(() => this.pcStepper.isStepActive(this.value()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
    isStepDisabled = computed(() => !this.active() && (this.pcStepper.linear() || this.disabled()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isStepDisabled" }] : /* istanbul ignore next */ []));
    stepTabindex = computed(() => (this.isStepDisabled() ? -1 : undefined), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "stepTabindex" }] : /* istanbul ignore next */ []));
    ariaCurrent = computed(() => (this.active() ? 'step' : undefined), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "ariaCurrent" }] : /* istanbul ignore next */ []));
    id = computed(() => `${this.pcStepper.id()}_step_${this.value()}`, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    ariaControls = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
    isSeparatorVisible = computed(() => {
        const stepList = this.pcStepper.stepList();
        if (stepList) {
            const steps = stepList.steps();
            const index = steps.indexOf(this);
            const stepLen = steps.length;
            return index !== stepLen - 1;
        }
        else {
            return false;
        }
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isSeparatorVisible" }] : /* istanbul ignore next */ []));
    /**
     * Content template.
     * @type {TemplateRef<StepContentTemplateContext>}
     * @group Templates
     */
    content = contentChild('content', { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), descendants: false });
    _componentStyle = inject(StepStyle);
    onStepClickCallback = this.onStepClick.bind(this);
    contentContext = computed(() => ({
        activateCallback: this.onStepClickCallback,
        value: this.value(),
        active: this.active()
    }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentContext" }] : /* istanbul ignore next */ []));
    onStepClick() {
        this.pcStepper.updateValue(this.value());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Step, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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": "ariaCurrent()", "attr.role": "\"presentation\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "isStepDisabled()" } }, providers: [StepStyle, { provide: STEP_INSTANCE, useExisting: Step }, { provide: PARENT_INSTANCE, useExisting: Step }], queries: [{ propertyName: "content", first: true, predicate: ["content"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        @if (!content()) {
            <button [attr.id]="id()" [class]="cx('header')" [pBind]="ptm('header')" [attr.role]="'tab'" [tabindex]="stepTabindex()" [attr.aria-controls]="ariaControls()" [disabled]="isStepDisabled()" (click)="onStepClick()" type="button">
                <span [class]="cx('number')" [pBind]="ptm('number')">{{ value() }}</span>
                <span [class]="cx('title')" [pBind]="ptm('title')">
                    <ng-content></ng-content>
                </span>
            </button>
            @if (isSeparatorVisible()) {
                <p-stepper-separator />
            }
        } @else {
            <ng-container *ngTemplateOutlet="content(); context: contentContext()"></ng-container>
            @if (isSeparatorVisible()) {
                <p-stepper-separator />
            }
        }
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperSeparator, selector: "p-stepper-separator" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Step, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-step',
                    standalone: true,
                    imports: [NgTemplateOutlet, StepperSeparator, SharedModule, BindModule],
                    template: `
        @if (!content()) {
            <button [attr.id]="id()" [class]="cx('header')" [pBind]="ptm('header')" [attr.role]="'tab'" [tabindex]="stepTabindex()" [attr.aria-controls]="ariaControls()" [disabled]="isStepDisabled()" (click)="onStepClick()" type="button">
                <span [class]="cx('number')" [pBind]="ptm('number')">{{ value() }}</span>
                <span [class]="cx('title')" [pBind]="ptm('title')">
                    <ng-content></ng-content>
                </span>
            </button>
            @if (isSeparatorVisible()) {
                <p-stepper-separator />
            }
        } @else {
            <ng-container *ngTemplateOutlet="content(); context: contentContext()"></ng-container>
            @if (isSeparatorVisible()) {
                <p-stepper-separator />
            }
        }
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[class]': 'cx("root")',
                        '[attr.aria-current]': 'ariaCurrent()',
                        '[attr.role]': '"presentation"',
                        '[attr.data-p-active]': 'active()',
                        '[attr.data-p-disabled]': 'isStepDisabled()'
                    },
                    providers: [StepStyle, { provide: STEP_INSTANCE, useExisting: Step }, { provide: PARENT_INSTANCE, useExisting: Step }],
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }] } });

const classes$3 = {
    root: ({ instance }) => [
        'p-steppanel',
        {
            'p-steppanel-active': instance.isVertical() && instance.active()
        }
    ],
    contentWrapper: 'p-steppanel-content-wrapper',
    content: 'p-steppanel-content'
};
class StepPanelStyle extends BaseStyle {
    name = 'steppanel';
    classes = classes$3;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanelStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanelStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * StepPanel is a helper component for Stepper component.
 *
 * [Live Demo](https://www.primeng.org/stepper/)
 *
 * @module steppanelstyle
 *
 */
var StepPanelClasses;
(function (StepPanelClasses) {
    /**
     * Class name of the root element
     */
    StepPanelClasses["root"] = "p-steppanel";
    /**
     * Class name of the content wrapper element
     */
    StepPanelClasses["contentWrapper"] = "p-steppanel-content-wrapper";
    /**
     * Class name of the content element
     */
    StepPanelClasses["content"] = "p-steppanel-content";
})(StepPanelClasses || (StepPanelClasses = {}));

/**
 * StepPanel is a helper component for Stepper component.
 * @group Components
 */
class StepPanel extends BaseComponent {
    $pcStepPanel = inject(STEPPANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    componentName = 'StepPanel';
    pcStepper = inject(STEPPER_INSTANCE);
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    /**
     * Active value of stepper.
     * @defaultValue undefined
     * @group Props
     */
    value = model(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
    active = computed(() => this.pcStepper.value() === this.value(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
    ariaControls = computed(() => `${this.pcStepper.id()}_step_${this.value()}`, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
    id = computed(() => `${this.pcStepper.id()}_steppanel_${this.value()}`, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    isVertical = computed(() => this.pcStepper.stepItems().length > 0, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
    isSeparatorVisible = computed(() => {
        if (this.pcStepper.stepItems()) {
            const stepLen = this.pcStepper.stepItems().length;
            const stepPanelElements = find(this.pcStepper.el.nativeElement, '[data-pc-name="steppanel"]');
            const index = findIndexInList(this.el.nativeElement, stepPanelElements);
            return index !== stepLen - 1;
        }
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isSeparatorVisible" }] : /* istanbul ignore next */ []));
    computedMotionOptions = computed(() => {
        return {
            ...this.ptm('motion'),
            ...this.pcStepper.computedMotionOptions()
        };
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
    /**
     * Content template.
     * @param {StepPanelContentTemplateContext} context - Context of the template
     * @see {@link StepPanelContentTemplateContext}
     * @group Templates
     */
    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    _componentStyle = inject(StepPanelStyle);
    updateValueCallback = this.updateValue.bind(this);
    contentContext = computed(() => ({
        activateCallback: this.updateValueCallback,
        value: this.value(),
        active: this.active()
    }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentContext" }] : /* istanbul ignore next */ []));
    updateValue(value) {
        this.pcStepper.updateValue(value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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\"" } }, providers: [StepPanelStyle, { provide: STEPPANEL_INSTANCE, useExisting: StepPanel }, { provide: PARENT_INSTANCE, useExisting: StepPanel }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        <p-motion [visible]="active()" name="p-collapsible" [disabled]="!isVertical()" [options]="computedMotionOptions()">
            <div [class]="cx('contentWrapper')" [pBind]="ptm('contentWrapper')">
                @if (isSeparatorVisible()) {
                    <p-stepper-separator />
                }
                <div [class]="cx('content')" [pBind]="ptm('content')">
                    <ng-container *ngTemplateOutlet="contentTemplate(); context: contentContext()"></ng-container>
                </div>
            </div>
        </p-motion>
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperSeparator, selector: "p-stepper-separator" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i2.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanel, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-step-panel',
                    standalone: true,
                    imports: [NgTemplateOutlet, StepperSeparator, SharedModule, BindModule, MotionModule],
                    template: `
        <p-motion [visible]="active()" name="p-collapsible" [disabled]="!isVertical()" [options]="computedMotionOptions()">
            <div [class]="cx('contentWrapper')" [pBind]="ptm('contentWrapper')">
                @if (isSeparatorVisible()) {
                    <p-stepper-separator />
                }
                <div [class]="cx('content')" [pBind]="ptm('content')">
                    <ng-container *ngTemplateOutlet="contentTemplate(); context: contentContext()"></ng-container>
                </div>
            </div>
        </p-motion>
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[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, { provide: STEPPANEL_INSTANCE, useExisting: StepPanel }, { provide: PARENT_INSTANCE, useExisting: StepPanel }],
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }] } });

const classes$2 = {
    root: ({ instance }) => [
        'p-stepitem',
        {
            'p-stepitem-active': instance.isActive()
        }
    ]
};
class StepItemStyle extends BaseStyle {
    name = 'stepitem';
    classes = classes$2;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepItemStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepItemStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepItemStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
 *
 * [Live Demo](https://www.primeng.org/stepper/)
 *
 * @module stepitemstyle
 *
 */
var StepItemClasses;
(function (StepItemClasses) {
    /**
     * Class name of the root element
     */
    StepItemClasses["root"] = "p-stepitem";
})(StepItemClasses || (StepItemClasses = {}));

/**
 * StepItem is a helper component for Stepper component used in vertical orientation.
 * @group Components
 */
class StepItem extends BaseComponent {
    $pcStepItem = inject(STEPITEM_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    componentName = 'StepItem';
    _componentStyle = inject(StepItemStyle);
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    pcStepper = inject(STEPPER_INSTANCE);
    /**
     * Value of step.
     * @defaultValue undefined
     * @group Props
     */
    value = model(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
    isActive = computed(() => this.pcStepper.value() === this.value(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
    step = contentChild(Step, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), descendants: false });
    stepPanel = contentChild(StepPanel, { ...(ngDevMode ? { debugName: "stepPanel" } : /* istanbul ignore next */ {}), descendants: false });
    constructor() {
        super();
        effect(() => {
            this.step()?.value.set(this.value());
        });
        effect(() => {
            this.stepPanel()?.value.set(this.value());
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.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.role": "\"presentation\"", "attr.data-p-active": "isActive()" } }, providers: [StepItemStyle, { provide: STEPITEM_INSTANCE, useExisting: StepItem }, { provide: PARENT_INSTANCE, useExisting: StepItem }], queries: [{ propertyName: "step", first: true, predicate: Step, isSignal: true }, { propertyName: "stepPanel", first: true, predicate: StepPanel, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepItem, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-step-item',
                    standalone: true,
                    imports: [BindModule],
                    template: `<ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[class]': 'cx("root")',
                        '[attr.role]': '"presentation"',
                        '[attr.data-p-active]': 'isActive()'
                    },
                    providers: [StepItemStyle, { provide: STEPITEM_INSTANCE, useExisting: StepItem }, { provide: PARENT_INSTANCE, useExisting: StepItem }],
                    hostDirectives: [Bind]
                }]
        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], step: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Step), { ...{ descendants: false }, isSignal: true }] }], stepPanel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepPanel), { ...{ descendants: false }, isSignal: true }] }] } });

const classes$1 = {
    root: 'p-steplist'
};
class StepListStyle extends BaseStyle {
    name = 'steplist';
    classes = classes$1;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepListStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepListStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
 *
 * [Live Demo](https://www.primeng.org/stepper/)
 *
 * @module stepliststyle
 *
 */
var StepListClasses;
(function (StepListClasses) {
    /**
     * Class name of the root element
     */
    StepListClasses["root"] = "p-stepitem";
})(StepListClasses || (StepListClasses = {}));

class StepList extends BaseComponent {
    $pcStepList = inject(STEPLIST_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    componentName = 'StepList';
    steps = contentChildren(Step, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
    _componentStyle = inject(StepListStyle);
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepList, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: StepList, isStandalone: true, selector: "p-step-list", host: { properties: { "class": "cx(\"root\")", "attr.role": "\"presentation\"" } }, providers: [StepListStyle, { provide: STEPLIST_INSTANCE, useExisting: StepList }, { provide: PARENT_INSTANCE, useExisting: StepList }], queries: [{ propertyName: "steps", predicate: Step, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepList, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-step-list',
                    standalone: true,
                    imports: [BindModule],
                    template: `<ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[class]': 'cx("root")',
                        '[attr.role]': '"presentation"'
                    },
                    providers: [StepListStyle, { provide: STEPLIST_INSTANCE, useExisting: StepList }, { provide: PARENT_INSTANCE, useExisting: StepList }],
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Step), { isSignal: true }] }] } });

const classes = {
    root: 'p-steppanels'
};
class StepPanelsStyle extends BaseStyle {
    name = 'steppanel';
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanelsStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanelsStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * StepPanel is a helper component for Stepper component.
 *
 * [Live Demo](https://www.primeng.org/stepper/)
 *
 * @module steppanelsstyle
 *
 */
var StepPanelsClasses;
(function (StepPanelsClasses) {
    /**
     * Class name of the root element
     */
    StepPanelsClasses["root"] = "p-steppanels";
})(StepPanelsClasses || (StepPanelsClasses = {}));

class StepPanels extends BaseComponent {
    $pcStepPanels = inject(STEPPANELS_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    componentName = 'StepPanels';
    _componentStyle = inject(StepPanelsStyle);
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: StepPanels, isStandalone: true, selector: "p-step-panels", host: { properties: { "class": "cx(\"root\")", "attr.role": "\"presentation\"" } }, providers: [StepPanelsStyle, { provide: STEPPANELS_INSTANCE, useExisting: StepPanels }, { provide: PARENT_INSTANCE, useExisting: StepPanels }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepPanels, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-step-panels',
                    standalone: true,
                    imports: [SharedModule, BindModule],
                    template: ` <ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[class]': 'cx("root")',
                        '[attr.role]': '"presentation"'
                    },
                    providers: [StepPanelsStyle, { provide: STEPPANELS_INSTANCE, useExisting: StepPanels }, { provide: PARENT_INSTANCE, useExisting: StepPanels }],
                    hostDirectives: [Bind]
                }]
        }] });

/**
 * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multistep process.
 * @group Components
 */
class Stepper extends BaseComponent {
    componentName = 'Stepper';
    $pcStepper = inject(STEPPER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    _componentStyle = inject(StepperStyle);
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    /**
     * A model that can hold a numeric value or be undefined.
     * @defaultValue undefined
     * @group Props
     */
    value = model(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
    /**
     * A boolean variable that captures user input.
     * @defaultValue false
     * @group Props
     */
    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
    /**
     * The motion options.
     * @group Props
     */
    motionOptions = input(undefined, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
    computedMotionOptions = computed(() => {
        return {
            ...this.ptm('motion'),
            ...this.motionOptions()
        };
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
    id = signal(uuid('pn_id_'), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    stepItems = contentChildren(StepItem, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "stepItems" }] : /* istanbul ignore next */ []));
    steps = contentChildren(Step, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
    stepList = contentChild(StepList, { ...(ngDevMode ? { debugName: "stepList" } : /* istanbul ignore next */ {}), descendants: false });
    updateValue(value) {
        this.value.set(value);
    }
    isStepActive(value) {
        return this.value() === value;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.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 }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.role": "\"tablist\"", "attr.id": "id()" } }, providers: [StepperStyle, { provide: STEPPER_INSTANCE, useExisting: Stepper }, { provide: PARENT_INSTANCE, useExisting: Stepper }], queries: [{ propertyName: "stepItems", predicate: StepItem, isSignal: true }, { propertyName: "steps", predicate: Step, isSignal: true }, { propertyName: "stepList", first: true, predicate: StepList, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Stepper, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-stepper',
                    standalone: true,
                    imports: [SharedModule, BindModule],
                    template: ` <ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [StepperStyle, { provide: STEPPER_INSTANCE, useExisting: Stepper }, { provide: PARENT_INSTANCE, useExisting: Stepper }],
                    host: {
                        '[class]': 'cx("root")',
                        '[attr.role]': '"tablist"',
                        '[attr.id]': 'id()'
                    },
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], stepItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StepItem), { isSignal: true }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Step), { isSignal: true }] }], stepList: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepList), { ...{ descendants: false }, isSignal: true }] }] } });
class StepperModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule], exports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule, SharedModule, BindModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule],
                    exports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, BindModule]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { STEPITEM_INSTANCE, STEPLIST_INSTANCE, STEPPANELS_INSTANCE, STEPPANEL_INSTANCE, STEPPERSEPARATOR_INSTANCE, STEPPER_INSTANCE, STEP_INSTANCE, Step, StepItem, StepList, StepPanel, StepPanels, Stepper, StepperClasses, StepperModule, StepperSeparator, StepperStyle };
//# sourceMappingURL=primeng-stepper.mjs.map