@coreui/angular-pro 5.5.0 → 5.5.1

package/fesm2022/coreui-angular-pro.mjs

@@ -413,7 +413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                 }]
         }] });
 
-let nextId$2 = 0;
+let nextId$3 = 0;
 class AccordionItemComponent {
     #accordionService = inject(AccordionService);
     /**
@@ -433,7 +433,7 @@ class AccordionItemComponent {
     get visible() {
         return this.itemVisible();
     }
-    contentId = `accordion-item-${nextId$2++}`;
+    contentId = `accordion-item-${nextId$3++}`;
     get itemContext() {
         return { $implicit: this.itemVisible() };
     }
@@ -11647,7 +11647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                 }]
         }] });
 
-let nextId$1 = 0;
+let nextId$2 = 0;
 class OffcanvasComponent {
     #document = inject(DOCUMENT);
     #platformId = inject(PLATFORM_ID);
@@ -11682,7 +11682,7 @@ class OffcanvasComponent {
      * @since 4.3.10
      */
     responsive = input(true);
-    id = input(`offcanvas-${this.placement()}-${nextId$1++}`);
+    id = input(`offcanvas-${this.placement()}-${nextId$2++}`);
     /**
      * Default role for offcanvas. [docs]
      * @return string
@@ -12649,7 +12649,7 @@ class ProgressComponent {
     }
     stacked = this.#progressService.stacked;
     percent = this.#progressService.percent;
-    value = this.#progressService.value;
+    barValue = this.#progressService.value;
     contentProgressBars = contentChildren(ProgressBarComponent);
     /**
      * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
@@ -12678,7 +12678,7 @@ class ProgressComponent {
         return !!height ? `${height}px` : (this.#hostElement?.nativeElement?.style?.height ?? undefined);
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thin: { classPropertyName: "thin", publicName: "thin", isSignal: true, isRequired: false, transformFunction: null }, white: { classPropertyName: "white", publicName: "white", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.height": "hostStyle()" }, classAttribute: "progress" }, providers: [ProgressService], queries: [{ propertyName: "contentProgressBars", predicate: ProgressBarComponent, isSignal: true }], exportAs: ["cProgress"], hostDirectives: [{ directive: ProgressBarDirective, inputs: ["animated", "animated", "color", "color", "max", "max", "role", "role", "value", "value", "variant", "variant"] }], ngImport: i0, template: "@if (contentProgressBars()?.length) {\n  <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else {\n  @let pbd = progressBarDirective;\n  <c-progress-bar [animated]=\"pbd?.animated()\" [variant]=\"pbd?.variant()\" [color]=\"pbd?.color()\" [value]=\"value()\">\n    <ng-container *ngTemplateOutlet=\"defaultContent\" />\n  </c-progress-bar>\n}\n\n<ng-template #defaultContent>\n  <ng-content />\n</ng-template>\n\n", styles: [":host-context(.progress-stacked).progress{transition:var(--cui-progress-bar-transition)}\n"], dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "c-progress-bar" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thin: { classPropertyName: "thin", publicName: "thin", isSignal: true, isRequired: false, transformFunction: null }, white: { classPropertyName: "white", publicName: "white", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.height": "hostStyle()" }, classAttribute: "progress" }, providers: [ProgressService], queries: [{ propertyName: "contentProgressBars", predicate: ProgressBarComponent, isSignal: true }], exportAs: ["cProgress"], hostDirectives: [{ directive: ProgressBarDirective, inputs: ["animated", "animated", "color", "color", "max", "max", "role", "role", "value", "value", "variant", "variant"] }], ngImport: i0, template: "@if (contentProgressBars()?.length) {\n  <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else {\n  @let pbd = progressBarDirective;\n  <c-progress-bar [animated]=\"pbd?.animated()\" [variant]=\"pbd?.variant()\" [color]=\"pbd?.color()\" [value]=\"barValue()\">\n    <ng-container *ngTemplateOutlet=\"defaultContent\" />\n  </c-progress-bar>\n}\n\n<ng-template #defaultContent>\n  <ng-content />\n</ng-template>\n\n", styles: [":host-context(.progress-stacked).progress{transition:var(--cui-progress-bar-transition)}\n"], dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "c-progress-bar" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
@@ -12691,7 +12691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         class: 'progress',
                         '[class]': 'hostClasses()',
                         '[style.height]': 'hostStyle()'
-                    }, providers: [ProgressService], template: "@if (contentProgressBars()?.length) {\n  <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else {\n  @let pbd = progressBarDirective;\n  <c-progress-bar [animated]=\"pbd?.animated()\" [variant]=\"pbd?.variant()\" [color]=\"pbd?.color()\" [value]=\"value()\">\n    <ng-container *ngTemplateOutlet=\"defaultContent\" />\n  </c-progress-bar>\n}\n\n<ng-template #defaultContent>\n  <ng-content />\n</ng-template>\n\n", styles: [":host-context(.progress-stacked).progress{transition:var(--cui-progress-bar-transition)}\n"] }]
+                    }, providers: [ProgressService], template: "@if (contentProgressBars()?.length) {\n  <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else {\n  @let pbd = progressBarDirective;\n  <c-progress-bar [animated]=\"pbd?.animated()\" [variant]=\"pbd?.variant()\" [color]=\"pbd?.color()\" [value]=\"barValue()\">\n    <ng-container *ngTemplateOutlet=\"defaultContent\" />\n  </c-progress-bar>\n}\n\n<ng-template #defaultContent>\n  <ng-content />\n</ng-template>\n\n", styles: [":host-context(.progress-stacked).progress{transition:var(--cui-progress-bar-transition)}\n"] }]
         }], ctorParameters: () => [] });
 
 class ProgressModule {
@@ -16421,6 +16421,479 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                 }]
         }] });
 
+class StepperStepComponent {
+    static ngAcceptInputType_disabled;
+    static ngAcceptInputType_optional;
+    static ngAcceptInputType_editable;
+    /**
+     * ViewContainerRef to render the step content.
+     * This allows dynamic rendering of templates within the step.
+     */
+    viewContainerRef = inject(ViewContainerRef);
+    /**
+     * Whether the step is disabled.
+     * @return boolean
+     * @default false
+     */
+    disabled = input(false, { transform: booleanAttribute });
+    /**
+     * Unique identifier for the step.
+     * @return string
+     * @default undefined
+     */
+    id = input();
+    /**
+     * Optional indicator to display in the step.
+     * Can be a string or a TemplateRef for custom icons.
+     * @return string | TemplateRef<any>
+     * @default (step index will be used if not provided)
+     */
+    indicator = input();
+    /**
+     * Context for the indicator template.
+     * If `indicator` is a TemplateRef, this context will be passed to it.
+     * @return unknown
+     * @default undefined
+     */
+    indicatorCtx = input();
+    /**
+     * Label for the step, which is required.
+     * Can be a string or a TemplateRef for custom labels.
+     * @return string | TemplateRef<any>
+     */
+    label = input.required();
+    /**
+     * Context for the label template.
+     * If `label` is a TemplateRef, this context will be passed to it.
+     * @return unknown
+     * @default undefined
+     */
+    labelCtx = input();
+    /**
+     * Whether the step is valid.
+     * This can be used to indicate if the step has been completed successfully.
+     * @return boolean | undefined | null
+     * @default undefined
+     */
+    valid = input();
+    /**
+     * Whether the step is editable.
+     * If true, the step can be modified by the user.
+     * @return boolean
+     * @default true
+     * todo - implement editable functionality
+     */
+    editable = input(true, { transform: booleanAttribute });
+    /**
+     * Whether the step is optional.
+     * If true, the step does not need to be completed for the overall process to succeed.
+     * @return boolean
+     * @default false
+     * todo - implement optional functionality
+     */
+    optional = input(false, { transform: booleanAttribute });
+    /**
+     * Template reference for the content of the step.
+     * This is where the main content of the step will be rendered.
+     */
+    templateRef = viewChild.required('contentTpl', { read: TemplateRef });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: StepperStepComponent, isStandalone: true, selector: "c-stepper-step", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, indicatorCtx: { classPropertyName: "indicatorCtx", publicName: "indicatorCtx", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelCtx: { classPropertyName: "labelCtx", publicName: "labelCtx", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "{ display: \"none\" }" } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["cStepperStep"], ngImport: i0, template: `
+    <ng-template #contentTpl>
+      <ng-content />
+    </ng-template>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperStepComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c-stepper-step',
+                    exportAs: 'cStepperStep',
+                    template: `
+    <ng-template #contentTpl>
+      <ng-content />
+    </ng-template>
+  `,
+                    host: {
+                        '[style]': '{ display: "none" }'
+                    }
+                }]
+        }] });
+
+class StepButtonDirective {
+    hostElement = inject(ElementRef);
+    focus(origin) {
+        this.hostElement.nativeElement.focus();
+    }
+    get disabled() {
+        return this.hostElement.nativeElement.disabled;
+    }
+    getLabel() {
+        return this.hostElement.nativeElement.innerText;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: StepButtonDirective, isStandalone: true, selector: "button[cStepButton]", exportAs: ["cStepButton"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[cStepButton]',
+                    exportAs: 'cStepButton'
+                }]
+        }] });
+
+let nextId$1 = 0;
+class StepperComponent {
+    static ngAcceptInputType_defaultActiveStepIndex;
+    static ngAcceptInputType_linear;
+    static ngAcceptInputType_validation;
+    #destroyRef = inject(DestroyRef);
+    /**
+     * Currently active step index
+     * @returns number
+     * @default 0
+     */
+    activeStepIndexInput = input(undefined, { alias: 'activeStepIndex' });
+    /**
+     * Linked signal for the active step index.
+     * This signal updates based on the input value and emits changes.
+     */
+    activeStepIndex = linkedSignal({
+        source: this.activeStepIndexInput,
+        computation: (newIndex, previous) => {
+            if (previous === undefined && newIndex === undefined) {
+                return this.defaultActiveStepIndex();
+            }
+            const prevValue = previous?.value ?? newIndex ?? this.defaultActiveStepIndex();
+            if (previous?.source === undefined) {
+                this.activeStepIndexChange.emit(prevValue);
+                return prevValue;
+            }
+            if (this.isStepOutOfScope(newIndex ?? -1)) {
+                this.activeStepIndexChange.emit(prevValue);
+                return prevValue;
+            }
+            if (!this.isStepValid(prevValue)) {
+                this.activeStepIndexChange.emit(prevValue);
+                return prevValue;
+            }
+            return newIndex ?? this.defaultActiveStepIndex();
+        }
+    });
+    #activeStepIdxEffect = effect(() => {
+        const activeStepIndex = this.activeStepIndex() ?? untracked(this.defaultActiveStepIndex);
+        if (this.#focusKeyManagerInit()) {
+            const focusManager = this.#focusKeyManager;
+            if (this.linear() && activeStepIndex > (focusManager?.activeItemIndex ?? -1)) {
+                focusManager?.setNextItemActive();
+            }
+            else if (focusManager?.activeItemIndex !== activeStepIndex) {
+                focusManager?.setActiveItem(activeStepIndex);
+            }
+            else {
+                focusManager?.updateActiveItem(activeStepIndex);
+            }
+        }
+    });
+    /**
+     * Initial active step index
+     * @return number
+     * @default 0
+     */
+    defaultActiveStepIndex = input(0, { transform: numberAttribute });
+    /**
+     * Unique identifier for the Stepper component.
+     * If not provided, a default ID will be generated.
+     * @return string
+     * @default 'stepper-<nextId>'
+     */
+    idInput = input(undefined, { alias: 'id' });
+    /**
+     * Unique identifier for the Stepper component.
+     * If `idInput` is not provided, a default ID will be generated.
+     * @return string
+     */
+    id = computed(() => this.idInput() ?? `stepper-${nextId$1++}`);
+    /**
+     * Layout orientation
+     * - `'horizontal'`: Step indicators and content are placed horizontally (default).
+     * - `'vertical'`: Step indicators and content are stacked vertically.
+     *
+     * Choose `'vertical'` layout for mobile or narrow designs.
+     * @return 'horizontal' | 'vertical'
+     * @default 'horizontal'
+     */
+    layout = input('horizontal');
+    /**
+     * Enforces linear progression (cannot skip steps).
+     * - `true`: Users must complete steps sequentially.
+     * - `false`: Users can jump freely between steps.
+     * @return boolean
+     * @default true
+     */
+    linear = input(true, { transform: booleanAttribute });
+    /**
+     * Layout of the step indicator (icon and label)
+     * - `'vertical'` – Places the label below the indicator icon.
+     * - `'horizontal'` – Places the label beside the indicator icon (default).
+     * This prop has no effect when `layout="vertical"` is used.
+     * @return 'vertical' | 'horizontal'
+     * @default 'horizontal'
+     */
+    stepButtonLayout = input('horizontal');
+    /**
+     * Enforces validation of steps.
+     * Each step must be valid before advancing to the next.
+     * @return boolean
+     * @default false
+     */
+    validation = input(false, { transform: booleanAttribute });
+    /**
+     * Event fired when the user completes the last step of the Form Wizard.
+     * Use this to trigger a submit action or redirect after the final step.
+     * @return boolean
+     */
+    finished = output();
+    /**
+     * Event fired when the user triggers the reset() action.
+     * Use this to reset or clear related form data.
+     * @return void
+     */
+    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+    onReset = output();
+    /**
+     * Indicates if the Stepper is currently resetting.
+     * This is set to `true` when the reset() method is called.
+     * @return boolean
+     */
+    resetting = signal(false);
+    /**
+     * Event fired when the active step changes in the Angular Stepper component.
+     * @return number
+     */
+    activeStepIndexChange = output();
+    /**
+     * Event fired after a validation check completes for a specific step in the Form Wizard.
+     * Receives an object with the step index and the validation result (`true` or `false`).
+     * Useful for custom validation handling across multistep forms.
+     * todo - implement validation logic
+     */
+    // readonly stepValidationComplete = output<StepperStepValidationResult>();
+    stepsContent = contentChildren(StepperStepComponent, { descendants: true });
+    steps = computed(() => {
+        const stepsContent = this.stepsContent();
+        return stepsContent.map((step, index) => {
+            const { disabled, editable, id, indicator, indicatorCtx, label, labelCtx, optional, templateRef, valid } = {
+                ...step
+            };
+            return {
+                templateRef: templateRef(),
+                disabled: disabled(),
+                editable: editable(),
+                id: `${id() ?? this.id()}-step-${index}`,
+                indicator: indicator() ?? index + 1,
+                indicatorRef: indicator() instanceof TemplateRef ? indicator() : undefined,
+                indicatorCtx: indicatorCtx() ?? {},
+                label: label(),
+                labelRef: label() instanceof TemplateRef ? label() : undefined,
+                labelCtx: labelCtx() ?? {},
+                optional: optional(),
+                valid: valid()
+            };
+        });
+    });
+    /**
+     * Returns the number of steps in the Stepper.
+     * This is useful for determining how many steps are available.
+     * @return number
+     */
+    stepsCount = computed(() => {
+        return this.steps().length;
+    });
+    /**
+     * Indicates if the Stepper is currently finishing.
+     * This is set to `true` when the finish() method is called and all steps are valid.
+     * @return boolean
+     */
+    finishing = signal(false);
+    #isFinishedEffect = effect(() => {
+        this.finished.emit(this.finishing());
+    });
+    #focusKeyManager;
+    #focusKeyChange$;
+    #focusKeyManagerInit = signal(false);
+    stepButtons = viewChildren(StepButtonDirective);
+    #stepButtonEffect = effect(() => {
+        if (untracked(this.#focusKeyManagerInit)) {
+            return;
+        }
+        const layout = this.layout();
+        const stepButtons = this.stepButtons();
+        if (stepButtons.length === 0) {
+            return;
+        }
+        const isVertical = layout === 'vertical';
+        this.#focusKeyManager = new FocusKeyManager(stepButtons)
+            .skipPredicate((item) => item.disabled)
+            .withHomeAndEnd(!this.linear())
+            .withHorizontalOrientation(isVertical ? null : 'ltr')
+            .withVerticalOrientation(isVertical);
+        untracked(() => {
+            this.#focusKeyChange$ = this.#focusKeyManager.change.pipe(distinctUntilChanged((previous, current) => {
+                if (this.resetting()) {
+                    this.resetting.set(false);
+                    this.onReset.emit();
+                    return false; // Resetting should always trigger a change
+                }
+                if (this.isStepOutOfScope(current)) {
+                    return true;
+                }
+                if (this.isStepDisabled(current)) {
+                    return true;
+                }
+                if (current > previous && this.linear() && !this.validation()) {
+                    const nextIndex = this.findNextStepIndex(previous);
+                    if (current !== nextIndex) {
+                        this.#focusKeyManager.setActiveItem(previous);
+                        return true;
+                    }
+                }
+                if (current > previous && this.linear() && !this.previousStepsValid(current) && this.validation()) {
+                    this.#focusKeyManager.setActiveItem(previous);
+                    return true;
+                }
+                if (current > previous && !this.isStepValid(previous)) {
+                    this.activeStepIndex.set(previous);
+                    this.#focusKeyManager.setActiveItem(previous);
+                    return true;
+                }
+                return false;
+            }), tap((value) => {
+                this.activeStepIndex.set(value);
+                this.activeStepIndexChange.emit(value);
+            }), takeUntilDestroyed(this.#destroyRef));
+            this.#focusKeyChange$.subscribe();
+            this.#focusKeyManagerInit.set(!!this.#focusKeyManager);
+            this.activeStepIndex.update((prevIdx) => {
+                return prevIdx ?? this.defaultActiveStepIndex();
+            });
+            // this.#focusKeyManager?.setFirstItemActive();
+        });
+    });
+    hostClasses = computed(() => {
+        return {
+            stepper: true,
+            'stepper-vertical': this.layout() === 'vertical'
+        };
+    });
+    /**
+     * Finish action. Attempts to finish the Stepper.
+     */
+    finish() {
+        if (this.allStepsValid()) {
+            this.finishing.set(true);
+        }
+    }
+    /**
+     * Next action. Moves to the next step in the Stepper.
+     * If already on the last step, it will attempt to finish().
+     */
+    next() {
+        const activeStepIndex = this.activeStepIndex();
+        const stepsCount = this.stepsCount();
+        if (activeStepIndex < stepsCount - 1) {
+            this.#focusKeyManager?.setNextItemActive();
+        }
+        else {
+            this.finish(); // Attempt finish if already on last step
+        }
+    }
+    /**
+     * Previous action. Moves to the previous step in the Stepper.
+     * If already on the first step, it will do nothing.
+     */
+    prev() {
+        if (this.activeStepIndex() > 0) {
+            this.#focusKeyManager?.setPreviousItemActive();
+        }
+    }
+    /**
+     * Reset action. Resets the Stepper to its initial state.
+     * This will reset the active step index and emit the onReset event.
+     */
+    reset() {
+        this.finishing.set(false);
+        this.resetting.set(true);
+        setTimeout(() => {
+            this.#focusKeyManager.setFirstItemActive();
+        });
+    }
+    handleStepClick($event, idx) {
+        this.#focusKeyManager?.setActiveItem(idx);
+    }
+    handleKeyDown($event) {
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes($event.key)) {
+            this.#focusKeyManager?.onKeydown($event);
+            return;
+        }
+        if (['Tab'].includes($event.key)) {
+            this.#focusKeyManager?.tabOut.next();
+        }
+        return;
+    }
+    isStepDisabled(index) {
+        return this.stepsContent()[index]?.disabled() ?? false;
+    }
+    isStepOutOfScope(index) {
+        return index < 0 || index > this.stepsCount() - 1;
+    }
+    isStepValid(index) {
+        if (!this.validation()) {
+            return true;
+        }
+        return this.stepsContent()[index]?.valid() ?? true;
+    }
+    findNextStepIndex(startIndex) {
+        const nextStepIndex = this.stepsContent().findIndex((step, index) => index > startIndex && !step.disabled() //&& step.valid() !== false
+        );
+        return nextStepIndex > startIndex ? nextStepIndex : startIndex;
+    }
+    previousStepsValid(index) {
+        return !this.stepsContent()
+            .slice(0, index)
+            .find((step) => step.valid() === false && !step.disabled());
+    }
+    allStepsValid = computed(() => {
+        if (!this.validation()) {
+            return true;
+        }
+        return !this.stepsContent().find((step) => step.valid() === false && !step.disabled());
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: StepperComponent, isStandalone: true, selector: "c-stepper", inputs: { activeStepIndexInput: { classPropertyName: "activeStepIndexInput", publicName: "activeStepIndex", isSignal: true, isRequired: false, transformFunction: null }, defaultActiveStepIndex: { classPropertyName: "defaultActiveStepIndex", publicName: "defaultActiveStepIndex", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, stepButtonLayout: { classPropertyName: "stepButtonLayout", publicName: "stepButtonLayout", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finished: "finished", onReset: "onReset", activeStepIndexChange: "activeStepIndexChange" }, host: { properties: { "class": "hostClasses()", "id": "id()" }, classAttribute: "stepper" }, queries: [{ propertyName: "stepsContent", predicate: StepperStepComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "stepButtons", predicate: StepButtonDirective, descendants: true, isSignal: true }], exportAs: ["cStepper"], ngImport: i0, template: "@let isVertical = layout() === 'vertical';\n@let activeIdx = activeStepIndex();\n@let finished = finishing();\n<ol [attr.aria-orientation]=\"layout()\" class=\"stepper-steps\" role=\"tablist\">\n  @for (step of steps(); track step.id; let idx = $index, last = $last) {\n    @let isActive = !finished && activeIdx === idx;\n    @let isComplete = finished || idx < activeIdx;\n    @let isDisabled = step.disabled || finished || (linear() && idx > activeIdx + 1 && step.disabled);\n    @let stepId = step.id;\n    @let panelId = `${step.id}-panel`;\n    <li [class]=\"['stepper-step', stepButtonLayout()]\" role=\"presentation\">\n      <button\n        #stepButton\n        cStepButton\n        [attr.inert]=\"step.disabled || null\"\n        [attr.aria-selected]=\"isActive || null\"\n        [attr.aria-controls]=\"panelId\"\n        [tabindex]=\"isActive ? 0 : -1\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"{ 'stepper-step-button': true, active: isActive, complete: isComplete }\"\n        id=\"{{ stepId }}\"\n        type=\"button\"\n        role=\"tab\"\n        (click)=\"step.disabled || handleStepClick($event, idx)\"\n        (keydown)=\"handleKeyDown($event)\"\n      >\n        <span class=\"stepper-step-indicator\">\n          @if (isComplete) {\n            <span class=\"stepper-step-indicator-icon\"></span>\n          } @else {\n            <span class=\"stepper-step-indicator-text\">\n              <ng-container\n                [ngTemplateOutlet]=\"step.indicatorRef || indicatorTpl\"\n                [ngTemplateOutletContext]=\"step.indicatorCtx\"\n              />\n              <ng-template #indicatorTpl>{{ step.indicator }}</ng-template>\n            </span>\n          }\n        </span>\n        <span class=\"stepper-step-label\">\n          <ng-container [ngTemplateOutlet]=\"step.labelRef || labelTpl\" [ngTemplateOutletContext]=\"step.labelCtx\" />\n          <ng-template #labelTpl>{{ step.label }}</ng-template>\n        </span>\n      </button>\n      @if (!last) {\n        <div class=\"stepper-step-connector\"></div>\n      }\n      @if (isVertical) {\n        <div\n          class=\"stepper-step-content\"\n          cCollapse\n          [visible]=\"!resetting() && isActive\"\n          [attr.inert]=\"isActive ? null : true\"\n          id=\"{{ panelId }}\"\n          role=\"tabpanel\"\n          [attr.aria-hidden]=\"!isActive || null\"\n          [attr.aria-labelledby]=\"stepId\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n        </div>\n      }\n    </li>\n  }\n</ol>\n@if (!isVertical) {\n  <div class=\"stepper-content\">\n    @for (step of steps(); track step.id; let idx = $index) {\n      @let isActive = !finished && activeIdx === idx;\n      @let stepId = step.id;\n      @let panelId = `${step.id}-panel`;\n      <div\n        [attr.inert]=\"isActive ? null : true\"\n        [ngClass]=\"{ 'stepper-pane': true, show: isActive, active: isActive }\"\n        id=\"{{ panelId }}\"\n        role=\"tabpanel\"\n        [attr.aria-hidden]=\"!isActive || null\"\n        [attr.aria-labelledby]=\"stepId\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n      </div>\n    }\n  </div>\n}\n\n<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n<ng-template #emptyTpl />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: StepButtonDirective, selector: "button[cStepButton]", exportAs: ["cStepButton"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-stepper', exportAs: 'cStepper', imports: [NgTemplateOutlet, NgClass, StepButtonDirective, CollapseDirective], host: {
+                        class: 'stepper',
+                        '[class]': 'hostClasses()',
+                        '[id]': 'id()'
+                    }, template: "@let isVertical = layout() === 'vertical';\n@let activeIdx = activeStepIndex();\n@let finished = finishing();\n<ol [attr.aria-orientation]=\"layout()\" class=\"stepper-steps\" role=\"tablist\">\n  @for (step of steps(); track step.id; let idx = $index, last = $last) {\n    @let isActive = !finished && activeIdx === idx;\n    @let isComplete = finished || idx < activeIdx;\n    @let isDisabled = step.disabled || finished || (linear() && idx > activeIdx + 1 && step.disabled);\n    @let stepId = step.id;\n    @let panelId = `${step.id}-panel`;\n    <li [class]=\"['stepper-step', stepButtonLayout()]\" role=\"presentation\">\n      <button\n        #stepButton\n        cStepButton\n        [attr.inert]=\"step.disabled || null\"\n        [attr.aria-selected]=\"isActive || null\"\n        [attr.aria-controls]=\"panelId\"\n        [tabindex]=\"isActive ? 0 : -1\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"{ 'stepper-step-button': true, active: isActive, complete: isComplete }\"\n        id=\"{{ stepId }}\"\n        type=\"button\"\n        role=\"tab\"\n        (click)=\"step.disabled || handleStepClick($event, idx)\"\n        (keydown)=\"handleKeyDown($event)\"\n      >\n        <span class=\"stepper-step-indicator\">\n          @if (isComplete) {\n            <span class=\"stepper-step-indicator-icon\"></span>\n          } @else {\n            <span class=\"stepper-step-indicator-text\">\n              <ng-container\n                [ngTemplateOutlet]=\"step.indicatorRef || indicatorTpl\"\n                [ngTemplateOutletContext]=\"step.indicatorCtx\"\n              />\n              <ng-template #indicatorTpl>{{ step.indicator }}</ng-template>\n            </span>\n          }\n        </span>\n        <span class=\"stepper-step-label\">\n          <ng-container [ngTemplateOutlet]=\"step.labelRef || labelTpl\" [ngTemplateOutletContext]=\"step.labelCtx\" />\n          <ng-template #labelTpl>{{ step.label }}</ng-template>\n        </span>\n      </button>\n      @if (!last) {\n        <div class=\"stepper-step-connector\"></div>\n      }\n      @if (isVertical) {\n        <div\n          class=\"stepper-step-content\"\n          cCollapse\n          [visible]=\"!resetting() && isActive\"\n          [attr.inert]=\"isActive ? null : true\"\n          id=\"{{ panelId }}\"\n          role=\"tabpanel\"\n          [attr.aria-hidden]=\"!isActive || null\"\n          [attr.aria-labelledby]=\"stepId\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n        </div>\n      }\n    </li>\n  }\n</ol>\n@if (!isVertical) {\n  <div class=\"stepper-content\">\n    @for (step of steps(); track step.id; let idx = $index) {\n      @let isActive = !finished && activeIdx === idx;\n      @let stepId = step.id;\n      @let panelId = `${step.id}-panel`;\n      <div\n        [attr.inert]=\"isActive ? null : true\"\n        [ngClass]=\"{ 'stepper-pane': true, show: isActive, active: isActive }\"\n        id=\"{{ panelId }}\"\n        role=\"tabpanel\"\n        [attr.aria-hidden]=\"!isActive || null\"\n        [attr.aria-labelledby]=\"stepId\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n      </div>\n    }\n  </div>\n}\n\n<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n<ng-template #emptyTpl />\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class StepperModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: StepperModule, imports: [StepperComponent, StepperStepComponent, StepButtonDirective], exports: [StepperComponent, StepperStepComponent, StepButtonDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [StepperComponent, StepperStepComponent, StepButtonDirective],
+                    exports: [StepperComponent, StepperStepComponent, StepButtonDirective]
+                }]
+        }] });
+
 class TabService {
     activeTabPaneIdx = new Subject();
     activeTabPaneIdx$ = this.activeTabPaneIdx.asObservable();
@@ -17879,5 +18352,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ColorModeService, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, ElementRefDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormPasswordDirective, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InMemoryStorageService, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LoadingButtonComponent, LoadingButtonModule, LocalStorageService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressBarDirective, ProgressComponent, ProgressModule, ProgressStackedComponent, RangeSliderComponent, RangeSliderModule, RatingComponent, RatingModule, RoundedDirective, RowComponent, RowDirective, RtlService, ShadowOnScrollDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerDirective, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabDirective, TabPaneComponent, TabPanelComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, Tabs2Module, TabsComponent, TabsContentComponent, TabsListComponent, TabsModule, TabsService, TemplateIdDirective, TextBgColorDirective, TextColorDirective, ThemeDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UIDService, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
+export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ColorModeService, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, ElementRefDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormPasswordDirective, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InMemoryStorageService, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LoadingButtonComponent, LoadingButtonModule, LocalStorageService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressBarDirective, ProgressComponent, ProgressModule, ProgressStackedComponent, RangeSliderComponent, RangeSliderModule, RatingComponent, RatingModule, RoundedDirective, RowComponent, RowDirective, RtlService, ShadowOnScrollDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerDirective, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, StepButtonDirective, StepperComponent, StepperModule, StepperStepComponent, TabContentComponent, TabContentRefDirective, TabDirective, TabPaneComponent, TabPanelComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, Tabs2Module, TabsComponent, TabsContentComponent, TabsListComponent, TabsModule, TabsService, TemplateIdDirective, TextBgColorDirective, TextColorDirective, ThemeDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UIDService, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular-pro.mjs.map