@indice/ng-components 0.2.154 → 0.2.157

package/fesm2020/indice-ng-components.mjs

@@ -1485,11 +1485,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Output
             }] } });
 
+const APP_LANGUAGES = new InjectionToken('APP_LANGUAGES');
 const APP_LINKS = new InjectionToken('APP_LINKS');
 const APP_NOTIFICATIONS = new InjectionToken('APP_NOTIFICATIONS');
-const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
-const APP_LANGUAGES = new InjectionToken('APP_LANGUAGES');
-const LIBTABGROUP_ACCESSOR = new InjectionToken('LibTabGroupAccessor');
+const LIBSTEPPER_ACCESSOR = new InjectionToken('LibStepperAccessor');
+const LIBTABGROUP_ACCESSOR = new InjectionToken('LibTabGroupAccessor');
+const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
 
 class LibTabComponent {
     constructor(_tabGroup) {
@@ -1598,6 +1599,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Output
             }] } });
 
+class LibStepInfoDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+LibStepInfoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepInfoDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LibStepInfoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: LibStepInfoDirective, selector: "[libStepInfo]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepInfoDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libStepInfo]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class LibStepLabelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+LibStepLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LibStepLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: LibStepLabelDirective, selector: "[libStepLabel]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libStepLabel]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+var StepState;
+(function (StepState) {
+    StepState["Active"] = "Active";
+    StepState["Completed"] = "Completed";
+    StepState["Upcoming"] = "Upcoming";
+})(StepState || (StepState = {}));
+;
+class LibStepComponent {
+    constructor(_stepper) {
+        this._stepper = _stepper;
+    }
+    /** Indicates the index of the step. */
+    get index() {
+        return this._stepper?.steps.toArray().indexOf(this);
+    }
+    /** Indicates whether this step is the last step. */
+    get isLast() {
+        return this._stepper?.steps.length - 1 === this.index;
+    }
+    /** Indicates whether you can navigate to the step or not. */
+    get isValid() {
+        if (!this.stepControl) {
+            return true;
+        }
+        return this.stepControl.valid;
+    }
+    /** Shows the current state of the step. */
+    get state() {
+        const currentIndex = this._stepper?.currentStepIndex;
+        if (currentIndex === this.index) {
+            return StepState.Active;
+        }
+        if (currentIndex > this.index) {
+            return StepState.Completed;
+        }
+        return StepState.Upcoming;
+    }
+}
+LibStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepComponent, deps: [{ token: LIBSTEPPER_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LibStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepComponent, selector: "lib-step", inputs: { class: "class", stepControl: "stepControl" }, queries: [{ propertyName: "stepLabel", first: true, predicate: LibStepLabelDirective, descendants: true }, { propertyName: "stepInfo", first: true, predicate: LibStepInfoDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-step',
+                    template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [LIBSTEPPER_ACCESSOR]
+                }] }]; }, propDecorators: { content: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }], stepLabel: [{
+                type: ContentChild,
+                args: [LibStepLabelDirective]
+            }], stepInfo: [{
+                type: ContentChild,
+                args: [LibStepInfoDirective]
+            }], class: [{
+                type: Input
+            }], stepControl: [{
+                type: Input
+            }] } });
+
+var StepperType;
+(function (StepperType) {
+    StepperType["Bullets"] = "Bullets";
+    StepperType["BulletsAndText"] = "BulletsAndText";
+    StepperType["Circles"] = "Circles";
+    StepperType["CirclesWithText"] = "CirclesWithText";
+    StepperType["Panels"] = "Panels";
+    StepperType["PanelsWithBorder"] = "PanelsWithBorder";
+    StepperType["Progress"] = "Progress";
+    StepperType["Simple"] = "Simple";
+})(StepperType || (StepperType = {}));
+
+class LibStepperComponent {
+    constructor() {
+        // Private properties.
+        this._currentStepIndex = 0;
+        /** Emmited when a step change occurs. */
+        this.stepChanged = new EventEmitter();
+        /** Indicates whether each step has to be validated before proceeding to the next. */
+        this.linear = false;
+        /** The type of the stepper. */
+        this.type = StepperType.Panels;
+        this.StepState = StepState;
+        this.StepperType = StepperType;
+    }
+    /** The current wizard step. */
+    get currentStep() {
+        return this.steps?.get(this._currentStepIndex);
+    }
+    /** The index (starting from zero) of the current wizard step. */
+    get currentStepIndex() {
+        return this._currentStepIndex;
+    }
+    ngOnInit() { }
+    /** Proceeds to the next step, if any. */
+    goToNextStep() {
+        // Cannot go forward.
+        if (this._currentStepIndex === this.steps.length - 1) {
+            return;
+        }
+        this.updateCurrentStepIndex(this._currentStepIndex + 1);
+    }
+    /** Proceeds to the previous step, if any. */
+    goToPreviousStep() {
+        // Cannot go back.
+        if (this._currentStepIndex === 0) {
+            return;
+        }
+        this.updateCurrentStepIndex(this._currentStepIndex - 1);
+    }
+    onSelectStep(selectedStep) {
+        this.updateCurrentStepIndex(selectedStep.index);
+    }
+    updateCurrentStepIndex(newIndex) {
+        const stepsArray = this.steps.toArray();
+        const currentStep = stepsArray[this.currentStepIndex];
+        const shouldStop = this.linear && ((!currentStep.isValid && newIndex >= this.currentStepIndex) || // If current step is invalid and want to go forward, then stop.
+            (currentStep.isValid && newIndex > this.currentStepIndex + 1 && stepsArray.slice(this.currentStepIndex + 1, newIndex).some(x => !x.isValid)) // If going forward (more than 1 steps), check if there are any invalid steps in between.
+        );
+        if (shouldStop) {
+            return;
+        }
+        this.stepChanged.emit({
+            selectedIndex: newIndex,
+            previouslySelectedIndex: this.currentStepIndex,
+            selectedStep: stepsArray[newIndex],
+            previouslySelectedStep: currentStep
+        });
+        this._currentStepIndex = newIndex;
+    }
+}
+LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged" }, providers: [
+        { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
+    ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\n                    </span>\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"space-y-6\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"flex items-start\">\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\n                        </span>\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"flex items-start\">\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\n                            </div>\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"lg:border-t lg:border-b lg:border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"rounded-md overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 lg:rounded-none\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\n                    <!-- Completed Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <!-- <h4 class=\"sr-only\">Status</h4>\n        <p class=\"text-sm font-medium text-gray-900\">Migrating MySQL database...</p> -->\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-stepper', providers: [
+                        { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
+                    ], template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\n                    </span>\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"space-y-6\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"flex items-start\">\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\n                        </span>\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"flex items-start\">\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\n                            </div>\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"lg:border-t lg:border-b lg:border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"rounded-md overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 lg:rounded-none\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\n                    <!-- Completed Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <!-- <h4 class=\"sr-only\">Status</h4>\n        <p class=\"text-sm font-medium text-gray-900\">Migrating MySQL database...</p> -->\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { steps: [{
+                type: ContentChildren,
+                args: [LibStepComponent, { descendants: true }]
+            }], stepChanged: [{
+                type: Output
+            }], linear: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
 class DynamicComponentHostDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -2142,10 +2338,10 @@ class ShellSidebarComponent {
     }
 }
 ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\n  </div>\n  <div class=\"pt-4 px-2 sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link'\"\n      [link-active-class]=\"'sidebar nav-link-active'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
+ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\n  </div>\n  <div class=\"pt-4 px-2 sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link group'\"\n      [link-active-class]=\"'sidebar nav-link-active group'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\n  </div>\n  <div class=\"pt-4 px-2 sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link'\"\n      [link-active-class]=\"'sidebar nav-link-active'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\n  </div>\n  <div class=\"pt-4 px-2 sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link group'\"\n      [link-active-class]=\"'sidebar nav-link-active group'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.Router, decorators: [{
                     type: Inject,
                     args: [Router]
@@ -3423,7 +3619,12 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ShellSidebarComponent,
         // Tab Group Component
         LibTabComponent,
-        LibTabGroupComponent], imports: [CommonModule,
+        LibTabGroupComponent,
+        // Stepper Component
+        LibStepperComponent,
+        LibStepComponent,
+        LibStepLabelDirective,
+        LibStepInfoDirective], imports: [CommonModule,
         RouterModule,
         IndiceAuthModule], exports: [AddressPipe,
         AuthCallbackComponent,
@@ -3438,6 +3639,10 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ErrorComponent,
         FormLayoutComponent,
         KpiTileComponent,
+        LibStepComponent,
+        LibStepInfoDirective,
+        LibStepLabelDirective,
+        LibStepperComponent,
         LibTabComponent,
         LibTabGroupComponent,
         ListColumnComponent,
@@ -3515,7 +3720,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         ShellSidebarComponent,
                         // Tab Group Component
                         LibTabComponent,
-                        LibTabGroupComponent
+                        LibTabGroupComponent,
+                        // Stepper Component
+                        LibStepperComponent,
+                        LibStepComponent,
+                        LibStepLabelDirective,
+                        LibStepInfoDirective
                     ],
                     imports: [
                         CommonModule,
@@ -3536,6 +3746,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         ErrorComponent,
                         FormLayoutComponent,
                         KpiTileComponent,
+                        LibStepComponent,
+                        LibStepInfoDirective,
+                        LibStepLabelDirective,
+                        LibStepperComponent,
                         LibTabComponent,
                         LibTabGroupComponent,
                         ListColumnComponent,
@@ -3568,5 +3782,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBTABGROUP_ACCESSOR, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.mjs.map