@wlcm/angular 19.2.5 → 22.0.1

package/stepper/fesm2022/wlcm-angular-stepper.mjs

@@ -1,13 +1,78 @@
-import { __decorate, __metadata } from 'tslib';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, contentChildren, effect, ChangeDetectorRef, Directive, input, ElementRef, Component, Inject, HostBinding, Input, forwardRef, NgZone, TemplateRef, ViewContainerRef, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, filter, skip, takeUntil, combineLatest, distinctUntilChanged, map, switchMap, of } from 'rxjs';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import { InjectionToken, input, inject, computed, ChangeDetectionStrategy, Component, model, Directive, forwardRef, contentChildren, signal, effect, TemplateRef, ViewContainerRef, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 const WLCM_STEPS_NAVIGATOR = new InjectionToken('WLCM_STEPS_NAVIGATOR');
 
+class WlcmStepHeaderComponent {
+    constructor() {
+        this.step = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.navigator = inject(WLCM_STEPS_NAVIGATOR);
+        this.isPassed = computed(() => {
+            const key = this.step().key();
+            return !!key && this.navigator.isCurrentOrPrevious(key);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPassed" }] : /* istanbul ignore next */ []));
+        this.isCompleted = computed(() => this.step().completed(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCompleted" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => {
+            const disabled = this.step().disabled();
+            if (disabled !== 'on_any_previous_incomplete')
+                return disabled;
+            const minIndex = this.navigator.minIncompleteStepIndex$();
+            if (minIndex < 0)
+                return false;
+            return minIndex < this.navigator.getStepIndex(this.step().key());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    }
+    activate() {
+        if (this.navigator.active?.key() === this.step().key())
+            return;
+        this.navigator.activate(this.step().key());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: WlcmStepHeaderComponent, isStandalone: true, selector: "wlcm-step-header", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.wlcm-step-header-passed": "isPassed()", "class.wlcm-step-header-completed": "isCompleted()", "class.wlcm-step-header-disabled": "isDisabled()" }, classAttribute: "wlcm-step-header" }, ngImport: i0, template: "<button class=\"wlcm-step-header-button\" (click)=\"activate()\">\n  <span class=\"wlcm-step-header-label\">{{ step().label() }}</span>\n\n  <div class=\"wlcm-step-header-progress-bar\">\n    <div class=\"wlcm-step-header-complete-indicator\"></div>\n\n    <div class=\"wlcm-step-header-pass-indicator\"></div>\n  </div>\n</button>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-step-header', host: {
+                        class: 'wlcm-step-header',
+                        '[class.wlcm-step-header-passed]': 'isPassed()',
+                        '[class.wlcm-step-header-completed]': 'isCompleted()',
+                        '[class.wlcm-step-header-disabled]': 'isDisabled()',
+                    }, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"wlcm-step-header-button\" (click)=\"activate()\">\n  <span class=\"wlcm-step-header-label\">{{ step().label() }}</span>\n\n  <div class=\"wlcm-step-header-progress-bar\">\n    <div class=\"wlcm-step-header-complete-indicator\"></div>\n\n    <div class=\"wlcm-step-header-pass-indicator\"></div>\n  </div>\n</button>\n" }]
+        }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: true }] }] } });
+
+class WlcmStep {
+}
+class WlcmStepBase extends WlcmStep {
+    constructor(options) {
+        super();
+        this.options = options;
+        this.key = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.completed = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
+        this.disabled = model('on_any_previous_incomplete', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        if (Object.prototype.hasOwnProperty.call(this.options, 'completed')) {
+            this.completed.set(this.options.completed);
+        }
+        if (Object.prototype.hasOwnProperty.call(this.options, 'disabled')) {
+            this.disabled.set(this.options.disabled);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: WlcmStepBase, isStandalone: true, inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { key: "keyChange", completed: "completedChange", disabled: "disabledChange" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }, { type: i0.Output, args: ["keyChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }, { type: i0.Output, args: ["completedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
+
 const WLCM_STEP = new InjectionToken('WLCM_STEP');
 const WLCM_STEP_OPTIONS = new InjectionToken('WLCM_STEP_OPTIONS', {
     factory: () => ({
@@ -16,342 +81,154 @@ const WLCM_STEP_OPTIONS = new InjectionToken('WLCM_STEP_OPTIONS', {
     }),
 });
 
+class WlcmStepComponent extends WlcmStepBase {
+    constructor() {
+        super(inject(WLCM_STEP_OPTIONS));
+        this.stepsNavigator = inject(WLCM_STEPS_NAVIGATOR);
+        this.isActive = computed(() => this.stepsNavigator.active$()?.key() === this.key(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmStepComponent, isStandalone: true, selector: "wlcm-step", host: { properties: { "class.wlcm-step-active": "isActive()" }, classAttribute: "wlcm-step" }, providers: [{ provide: WLCM_STEP, useExisting: forwardRef(() => WlcmStepComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-step', host: {
+                        class: 'wlcm-step',
+                        '[class.wlcm-step-active]': 'isActive()',
+                    }, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: WLCM_STEP, useExisting: forwardRef(() => WlcmStepComponent) }], template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class WlcmStepperHeaderComponent {
+    constructor() {
+        this.steps = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmStepperHeaderComponent, isStandalone: true, selector: "wlcm-stepper-header", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wlcm-stepper-header" }, ngImport: i0, template: "@for (step of steps(); track step) {\n<wlcm-step-header [step]=\"step\"></wlcm-step-header>\n}\n", styles: [""], dependencies: [{ kind: "component", type: WlcmStepHeaderComponent, selector: "wlcm-step-header", inputs: ["step"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-stepper-header', host: { class: 'wlcm-stepper-header' }, imports: [WlcmStepHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (step of steps(); track step) {\n<wlcm-step-header [step]=\"step\"></wlcm-step-header>\n}\n" }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }] } });
+
 class WlcmStepsNavigator {
 }
-let WlcmStepperBase = class WlcmStepperBase extends WlcmStepsNavigator {
-    constructor(changeDetector) {
+class WlcmStepperBase extends WlcmStepsNavigator {
+    constructor() {
         super();
-        this.changeDetector = changeDetector;
-        this._listUpdated$ = new Subject();
-        this._keyToIndexMap = new Map();
-        this._steps = contentChildren(WLCM_STEP, { descendants: true });
-        this._active$ = new BehaviorSubject(null);
-        this.active$ = this._active$.asObservable();
-        this._minIncompleteStepIndex$ = new BehaviorSubject(0);
-        this.minIncompleteStepIndex$ = this._minIncompleteStepIndex$
-            .asObservable()
-            .pipe(filter((index) => index !== Infinity));
-        effect(() => this._handleUpdatedList(this._steps()));
+        this._steps = contentChildren(WLCM_STEP, { ...(ngDevMode ? { debugName: "_steps" } : /* istanbul ignore next */ {}), descendants: true });
+        this._active = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+        this.active$ = this._active.asReadonly();
+        this._keyToIndexMap = computed(() => {
+            const map = new Map();
+            this._steps().forEach((step, index) => map.set(step.key(), index));
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_keyToIndexMap" }] : /* istanbul ignore next */ []));
+        this.minIncompleteStepIndex$ = computed(() => {
+            const steps = this._steps();
+            const minIndex = Math.min(...steps.map((step, index) => (step.completed() ? Infinity : index)));
+            return minIndex !== Infinity ? minIndex : -1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minIncompleteStepIndex$" }] : /* istanbul ignore next */ []));
+        // Auto-assign a positional key to any step that was declared without one.
+        effect(() => {
+            this._steps().forEach((step, index) => {
+                if (!step.key())
+                    step.key.set(`${index}`);
+            });
+        });
+        // Activate the first step once the list is populated and nothing is active yet.
+        effect(() => {
+            const steps = this._steps();
+            if (!this._active() && steps.length)
+                this.activate(steps[0].key());
+        });
     }
     get active() {
-        return this._active$.value;
+        return this._active();
     }
     get isActiveCompleted() {
-        return this.active.completed;
+        return this.active.completed();
     }
     get minIncompleteStepIndex() {
-        return this._minIncompleteStepIndex$.value;
+        return this.minIncompleteStepIndex$();
     }
     next() {
         if (!this.canActivateNext())
             return;
         const index = this._activeIndex + 1;
         if (index < this._steps().length)
-            this.activate(this._steps()[index].key);
+            this.activate(this._steps()[index].key());
     }
     previous() {
         const index = this._activeIndex - 1;
         if (index >= 0)
-            this.activate(this._steps()[index].key);
+            this.activate(this._steps()[index].key());
     }
     activate(key) {
-        if (!this._keyToIndexMap.has(key))
+        if (!this._keyToIndexMap().has(key))
             return;
-        const step = this._getStep(key);
-        this._active$.next(step);
-        this.changeDetector.markForCheck();
+        this._active.set(this._getStep(key));
     }
     canActivateNext() {
         return this.isActiveCompleted;
     }
     isCurrentOrPrevious(key) {
-        const index = this._keyToIndexMap.get(key);
+        const index = this._keyToIndexMap().get(key);
         const activeIndex = this._activeIndex;
         return index === activeIndex || activeIndex > index;
     }
     getStepIndex(key) {
-        return this._keyToIndexMap.get(key);
+        return this._keyToIndexMap().get(key);
     }
     get _activeIndex() {
-        return this._keyToIndexMap.get(this.active.key);
+        return this._keyToIndexMap().get(this.active.key());
     }
     _getStep(key) {
-        return this._steps()[this._keyToIndexMap.get(key)];
-    }
-    _handleUpdatedList(list) {
-        this._listUpdated$.next();
-        this._keyToIndexMap.clear();
-        list.forEach((step, index) => {
-            if (!step.key)
-                step.key = `${index}`;
-            this._keyToIndexMap.set(step.key, index);
-            this._handleKeyChanges(step, index);
-        });
-        this._handleCompleteChanges(list);
-        if (!this._active$.value)
-            this.activate(list[0].key);
-    }
-    _handleKeyChanges(step, index) {
-        let previousKey = step.key;
-        step.key$
-            .pipe(skip(1))
-            .pipe(untilDestroyed(this), takeUntil(this._listUpdated$))
-            .subscribe((newKey) => {
-            this._keyToIndexMap.delete(previousKey);
-            this._keyToIndexMap.set(newKey, index);
-            previousKey = newKey;
-        });
+        return this._steps()[this._keyToIndexMap().get(key)];
     }
-    _handleCompleteChanges(list) {
-        combineLatest(list.map((step, index) => step.completed$
-            .pipe(distinctUntilChanged())
-            .pipe(map((isCompleted) => (isCompleted ? Infinity : index)))))
-            .pipe(untilDestroyed(this), takeUntil(this._listUpdated$))
-            .subscribe((indexes) => {
-            const minIndex = Math.min(...indexes);
-            this._minIncompleteStepIndex$.next(minIndex !== Infinity ? minIndex : -1);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.1.4", type: WlcmStepperBase, isStandalone: true, queries: [{ propertyName: "_steps", predicate: WLCM_STEP, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
-};
-WlcmStepperBase = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], WlcmStepperBase);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperBase, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
-
-let WlcmStepHeaderComponent = class WlcmStepHeaderComponent {
-    get isPassed() {
-        return this._key && this.navigator.isCurrentOrPrevious(this._key);
-    }
-    get isCompleted() {
-        return this._step.completed;
-    }
-    constructor(elementRef, navigator) {
-        this.elementRef = elementRef;
-        this.navigator = navigator;
-        this.step = input.required();
-        this._stepUpdated$ = new Subject();
-        effect(() => this._handleDisableStatusChanges());
-    }
-    activate() {
-        if (this.navigator.active?.key === this.step().key)
-            return;
-        this.navigator.activate(this.step().key);
-    }
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    get _key() {
-        return this.step().key;
-    }
-    get _step() {
-        return this.step();
-    }
-    _handleDisableStatusChanges() {
-        this._stepUpdated$.next();
-        this.step()
-            .disabled$.pipe(switchMap((value) => {
-            if (value === 'on_any_previous_incomplete') {
-                return this.navigator.minIncompleteStepIndex$.pipe(map((minIndex) => {
-                    if (minIndex < 0)
-                        return false;
-                    return minIndex < this.navigator.getStepIndex(this.step().key);
-                }));
-            }
-            return of(value);
-        }))
-            .pipe(untilDestroyed(this), takeUntil(this._stepUpdated$))
-            .subscribe((isDisabled) => {
-            if (isDisabled) {
-                return this.element.classList.add('wlcm-step-header-disabled');
-            }
-            this.element.classList.remove('wlcm-step-header-disabled');
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepHeaderComponent, deps: [{ token: i0.ElementRef }, { token: WLCM_STEPS_NAVIGATOR }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: WlcmStepHeaderComponent, isStandalone: true, selector: "wlcm-step-header", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.wlcm-step-header-passed": "this.isPassed", "class.wlcm-step-header-completed": "this.isCompleted" }, classAttribute: "wlcm-step-header" }, ngImport: i0, template: "<button class=\"wlcm-step-header-button\" (click)=\"activate()\">\n  <span class=\"wlcm-step-header-label\">{{ step().label$ | async }}</span>\n\n  <div class=\"wlcm-step-header-progress-bar\">\n    <div class=\"wlcm-step-header-complete-indicator\"></div>\n\n    <div class=\"wlcm-step-header-pass-indicator\"></div>\n  </div>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
-};
-WlcmStepHeaderComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef, WlcmStepsNavigator])
-], WlcmStepHeaderComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-step-header', host: { class: 'wlcm-step-header' }, standalone: true, imports: [CommonModule], template: "<button class=\"wlcm-step-header-button\" (click)=\"activate()\">\n  <span class=\"wlcm-step-header-label\">{{ step().label$ | async }}</span>\n\n  <div class=\"wlcm-step-header-progress-bar\">\n    <div class=\"wlcm-step-header-complete-indicator\"></div>\n\n    <div class=\"wlcm-step-header-pass-indicator\"></div>\n  </div>\n</button>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: WlcmStepsNavigator, decorators: [{
-                    type: Inject,
-                    args: [WLCM_STEPS_NAVIGATOR]
-                }] }], propDecorators: { isPassed: [{
-                type: HostBinding,
-                args: ['class.wlcm-step-header-passed']
-            }], isCompleted: [{
-                type: HostBinding,
-                args: ['class.wlcm-step-header-completed']
-            }] } });
-
-class WlcmStep {
-}
-class WlcmStepBase extends WlcmStep {
-    set key(value) {
-        this._key$.next(value);
-    }
-    get key() {
-        return this._key$.value;
-    }
-    set label(value) {
-        this._label$.next(value);
-    }
-    get label() {
-        return this._label$.value;
-    }
-    set completed(value) {
-        this._completed$.next(value);
-    }
-    get completed() {
-        return this._completed$.value;
-    }
-    set disabled(value) {
-        this._disabled$.next(value);
-    }
-    get disabled() {
-        return this._disabled$.value;
-    }
-    constructor(options) {
-        super();
-        this.options = options;
-        this._key$ = new BehaviorSubject(null);
-        this.key$ = this._key$.asObservable();
-        this._label$ = new BehaviorSubject('');
-        this.label$ = this._label$.asObservable();
-        this._completed$ = new BehaviorSubject(false);
-        this.completed$ = this._completed$.asObservable();
-        this._disabled$ = new BehaviorSubject(false);
-        this.disabled$ = this._disabled$.asObservable();
-        this.disabled = this.options.hasOwnProperty('completed') ? this.options.completed : false;
-        this.disabled = this.options.hasOwnProperty('disabled') ? this.options.disabled : 'on_any_previous_incomplete';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: WlcmStepBase, isStandalone: true, inputs: { key: "key", label: "label", completed: "completed", disabled: "disabled" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: WlcmStepperBase, isStandalone: true, queries: [{ propertyName: "_steps", predicate: WLCM_STEP, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: undefined }], propDecorators: { key: [{
-                type: Input
-            }], label: [{
-                type: Input,
-                args: [{ required: true }]
-            }], completed: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-
-let WlcmStepComponent = class WlcmStepComponent extends WlcmStepBase {
-    constructor(zone, elementRef, changeDetectorRef, options, stepsNavigator) {
-        super(options);
-        this.zone = zone;
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.options = options;
-        this.stepsNavigator = stepsNavigator;
-        this.zone.runOutsideAngular(() => this._handleActiveChanges());
-    }
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    _handleActiveChanges() {
-        this.stepsNavigator.active$.pipe(untilDestroyed(this)).subscribe((active) => {
-            if (active?.key === this.key) {
-                this.element.classList.add('wlcm-step-active');
-                return this.changeDetectorRef.markForCheck();
-            }
-            this.element.classList.remove('wlcm-step-active');
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: WLCM_STEP_OPTIONS }, { token: WLCM_STEPS_NAVIGATOR }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmStepComponent, isStandalone: true, selector: "wlcm-step", host: { classAttribute: "wlcm-step" }, providers: [{ provide: WLCM_STEP, useExisting: forwardRef(() => WlcmStepComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-};
-WlcmStepComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [NgZone,
-        ElementRef,
-        ChangeDetectorRef, Object, WlcmStepsNavigator])
-], WlcmStepComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-step', host: { class: 'wlcm-step' }, standalone: true, imports: [CommonModule], providers: [{ provide: WLCM_STEP, useExisting: forwardRef(() => WlcmStepComponent) }], template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_STEP_OPTIONS]
-                }] }, { type: WlcmStepsNavigator, decorators: [{
-                    type: Inject,
-                    args: [WLCM_STEPS_NAVIGATOR]
-                }] }] });
-
-class WlcmStepperHeaderComponent {
-    constructor() {
-        this.steps = input.required();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: WlcmStepperHeaderComponent, isStandalone: true, selector: "wlcm-stepper-header", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wlcm-stepper-header" }, ngImport: i0, template: "@for (step of steps(); track step) {\n<wlcm-step-header [step]=\"step\"></wlcm-step-header>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmStepHeaderComponent, selector: "wlcm-step-header", inputs: ["step"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-stepper-header', host: { class: 'wlcm-stepper-header' }, standalone: true, imports: [CommonModule, WlcmStepHeaderComponent], template: "@for (step of steps(); track step) {\n<wlcm-step-header [step]=\"step\"></wlcm-step-header>\n}\n" }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { _steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WLCM_STEP), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class WlcmStepperComponent extends WlcmStepperBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmStepperComponent, isStandalone: true, selector: "wlcm-stepper", host: { classAttribute: "wlcm-stepper" }, providers: [{ provide: WLCM_STEPS_NAVIGATOR, useExisting: forwardRef(() => WlcmStepperComponent) }], usesInheritance: true, ngImport: i0, template: "<wlcm-stepper-header [steps]=\"_steps()\"></wlcm-stepper-header>\n\n<ng-content select=\"wlcm-step\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmStepperHeaderComponent, selector: "wlcm-stepper-header", inputs: ["steps"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmStepperComponent, isStandalone: true, selector: "wlcm-stepper", host: { classAttribute: "wlcm-stepper" }, providers: [{ provide: WLCM_STEPS_NAVIGATOR, useExisting: forwardRef(() => WlcmStepperComponent) }], usesInheritance: true, ngImport: i0, template: "<wlcm-stepper-header [steps]=\"_steps()\"></wlcm-stepper-header>\n\n<ng-content select=\"wlcm-step\"></ng-content>\n", styles: [""], dependencies: [{ kind: "component", type: WlcmStepperHeaderComponent, selector: "wlcm-stepper-header", inputs: ["steps"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-stepper', host: { class: 'wlcm-stepper' }, standalone: true, imports: [CommonModule, WlcmStepperHeaderComponent], providers: [{ provide: WLCM_STEPS_NAVIGATOR, useExisting: forwardRef(() => WlcmStepperComponent) }], template: "<wlcm-stepper-header [steps]=\"_steps()\"></wlcm-stepper-header>\n\n<ng-content select=\"wlcm-step\"></ng-content>\n" }]
+            args: [{ selector: 'wlcm-stepper', host: { class: 'wlcm-stepper' }, imports: [WlcmStepperHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: WLCM_STEPS_NAVIGATOR, useExisting: forwardRef(() => WlcmStepperComponent) }], template: "<wlcm-stepper-header [steps]=\"_steps()\"></wlcm-stepper-header>\n\n<ng-content select=\"wlcm-step\"></ng-content>\n" }]
         }] });
 
-let WlcmLoadOnActiveStepDirective = class WlcmLoadOnActiveStepDirective {
-    constructor(step, navigator, templateRef, viewContainer) {
-        this.step = step;
-        this.navigator = navigator;
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.navigator.active$.pipe(untilDestroyed(this)).subscribe((active) => {
-            if (active?.key === step.key) {
-                this.viewContainer.clear();
+class WlcmLoadOnActiveStepDirective {
+    constructor() {
+        this.step = inject(WLCM_STEP);
+        this.navigator = inject(WLCM_STEPS_NAVIGATOR);
+        this.templateRef = inject(TemplateRef);
+        this.viewContainer = inject(ViewContainerRef);
+        effect(() => {
+            const active = this.navigator.active$();
+            this.viewContainer.clear();
+            if (active?.key() === this.step.key()) {
                 this.viewContainer.createEmbeddedView(this.templateRef);
             }
-            else {
-                this.viewContainer.clear();
-            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmLoadOnActiveStepDirective, deps: [{ token: WLCM_STEP }, { token: WLCM_STEPS_NAVIGATOR }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: WlcmLoadOnActiveStepDirective, isStandalone: true, selector: "[wlcmLoadOnActiveStep]", ngImport: i0 }); }
-};
-WlcmLoadOnActiveStepDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [WlcmStep,
-        WlcmStepsNavigator,
-        TemplateRef,
-        ViewContainerRef])
-], WlcmLoadOnActiveStepDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmLoadOnActiveStepDirective, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmLoadOnActiveStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmLoadOnActiveStepDirective, isStandalone: true, selector: "[wlcmLoadOnActiveStep]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmLoadOnActiveStepDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmLoadOnActiveStep]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: WlcmStep, decorators: [{
-                    type: Inject,
-                    args: [WLCM_STEP]
-                }] }, { type: WlcmStepsNavigator, decorators: [{
-                    type: Inject,
-                    args: [WLCM_STEPS_NAVIGATOR]
-                }] }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
+        }], ctorParameters: () => [] });
 
 const publicComponents = [
     WlcmStepComponent,
@@ -361,17 +238,17 @@ const publicComponents = [
 ];
 const publicDirectives = [WlcmLoadOnActiveStepDirective];
 class WlcmStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperModule, imports: [CommonModule, WlcmStepComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperModule, imports: [CommonModule, WlcmStepComponent,
             WlcmStepperComponent,
             WlcmStepHeaderComponent,
             WlcmStepperHeaderComponent, WlcmLoadOnActiveStepDirective], exports: [WlcmStepComponent,
             WlcmStepperComponent,
             WlcmStepHeaderComponent,
             WlcmStepperHeaderComponent, WlcmLoadOnActiveStepDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperModule, imports: [CommonModule, publicComponents] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...publicComponents, ...publicDirectives],