@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

package/fesm2022/radix-ng-primitives-stepper.mjs

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, input, numberAttribute, booleanAttribute, computed, forwardRef, model, output, signal, effect, ElementRef, NgModule } from '@angular/core';
+import { InjectionToken, inject, Directive, input, numberAttribute, booleanAttribute, computed, forwardRef, model, output, signal, effect, ElementRef, DestroyRef, NgModule } from '@angular/core';
 import * as kbd from '@radix-ng/primitives/core';
-import { _IdGenerator, useArrowNavigation, getActiveElement } from '@radix-ng/primitives/core';
-import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { injectId, RdxLiveAnnouncer, useArrowNavigation, getActiveElement } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/separator';
 import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
 
@@ -15,10 +14,10 @@ class RdxStepperDescriptionDirective {
     constructor() {
         this.itemContext = injectStepperItemContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxStepperDescriptionDirective, isStandalone: true, selector: "[rdxStepperDescription]", host: { properties: { "attr.id": "itemContext.descriptionId" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxStepperDescriptionDirective, isStandalone: true, selector: "[rdxStepperDescription]", host: { properties: { "attr.id": "itemContext.descriptionId" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxStepperDescription]',
@@ -32,10 +31,10 @@ class RdxStepperIndicatorDirective {
     constructor() {
         this.itemContext = injectStepperItemContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxStepperIndicatorDirective, isStandalone: true, selector: "[rdxStepperIndicator]", exportAs: ["rdxStepperIndicator"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxStepperIndicatorDirective, isStandalone: true, selector: "[rdxStepperIndicator]", exportAs: ["rdxStepperIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxStepperIndicator]',
@@ -52,13 +51,13 @@ class RdxStepperItemDirective {
     constructor() {
         this.rootContext = injectStepperRootContext();
         /** @ignore */
-        this.titleId = inject(_IdGenerator).getId('rdx-stepper-item-title');
+        this.titleId = injectId('rdx-stepper-item-title');
         /** @ignore */
-        this.descriptionId = inject(_IdGenerator).getId('rdx-stepper-item-description');
-        this.step = input(NaN, ...(ngDevMode ? [{ debugName: "step", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.descriptionId = injectId('rdx-stepper-item-description');
+        this.step = input(NaN, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** @ignore */
-        this.completed = input(false, ...(ngDevMode ? [{ debugName: "completed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.completed = input(false, { ...(ngDevMode ? { debugName: "completed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** @ignore */
         this.itemState = computed(() => {
             if (this.completed())
@@ -70,7 +69,7 @@ class RdxStepperItemDirective {
                 return 'completed';
             }
             return 'inactive';
-        }, ...(ngDevMode ? [{ debugName: "itemState" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "itemState" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this.isFocusable = computed(() => {
             if (this.disabled())
@@ -80,17 +79,17 @@ class RdxStepperItemDirective {
                 return step <= this.rootContext.value() || step === this.rootContext.value() + 1;
             }
             return true;
-        }, ...(ngDevMode ? [{ debugName: "isFocusable" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isFocusable" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxStepperItemDirective, isStandalone: true, selector: "[rdxStepperItem]", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-current": "itemState() === \"active\" ? true : undefined", "attr.data-state": "itemState()", "attr.disabled": "disabled() || !isFocusable() ? \"\" : undefined", "attr.data-disabled": "disabled() || !isFocusable() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxStepperItemDirective, isStandalone: true, selector: "[rdxStepperItem]", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-current": "itemState() === \"active\" ? true : undefined", "attr.data-state": "itemState()", "attr.disabled": "disabled() || !isFocusable() ? \"\" : undefined", "attr.data-disabled": "disabled() || !isFocusable() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()" } }, providers: [
             {
                 provide: STEPPER_ITEM_CONTEXT,
                 useExisting: forwardRef(() => RdxStepperItemDirective)
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxStepperItem]',
@@ -108,39 +107,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '[attr.data-orientation]': 'rootContext.orientation()'
                     }
                 }]
-        }] });
+        }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }] } });
 
 class RdxStepperRootDirective {
     constructor() {
-        this.liveAnnouncer = inject(LiveAnnouncer);
-        this.defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        this.value = model(this.defaultValue(), ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.linear = input(true, ...(ngDevMode ? [{ debugName: "linear", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.liveAnnouncer = inject(RdxLiveAnnouncer);
+        this.defaultValue = input(undefined, { ...(ngDevMode ? { debugName: "defaultValue" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.value = model(this.defaultValue(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.linear = input(true, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.totalStepperItemsArray = computed(() => Array.from(this.totalStepperItems()), ...(ngDevMode ? [{ debugName: "totalStepperItemsArray" }] : []));
+        this.totalStepperItemsArray = computed(() => Array.from(this.totalStepperItems()), ...(ngDevMode ? [{ debugName: "totalStepperItemsArray" }] : /* istanbul ignore next */ []));
         this.onValueChange = output();
         /** @ignore */
-        this.isFirstStep = computed(() => this.value() === 1, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : []));
+        this.isFirstStep = computed(() => this.value() === 1, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.isLastStep = computed(() => this.value() === this.totalStepperItemsArray().length, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
+        this.isLastStep = computed(() => this.value() === this.totalStepperItemsArray().length, ...(ngDevMode ? [{ debugName: "isLastStep" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.totalSteps = computed(() => this.totalStepperItems().length, ...(ngDevMode ? [{ debugName: "totalSteps" }] : []));
+        this.totalSteps = computed(() => this.totalStepperItems().length, ...(ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this.isNextDisabled = computed(() => {
             const item = this.nextStepperItem();
             return item ? item.hasAttribute('disabled') : true;
-        }, ...(ngDevMode ? [{ debugName: "isNextDisabled" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isNextDisabled" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this.isPrevDisabled = computed(() => {
             const item = this.prevStepperItem();
             return item ? item.hasAttribute('disabled') : true;
-        }, ...(ngDevMode ? [{ debugName: "isPrevDisabled" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isPrevDisabled" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.totalStepperItems = signal([], ...(ngDevMode ? [{ debugName: "totalStepperItems" }] : []));
-        this.nextStepperItem = signal(null, ...(ngDevMode ? [{ debugName: "nextStepperItem" }] : []));
-        this.prevStepperItem = signal(null, ...(ngDevMode ? [{ debugName: "prevStepperItem" }] : []));
+        this.totalStepperItems = signal([], ...(ngDevMode ? [{ debugName: "totalStepperItems" }] : /* istanbul ignore next */ []));
+        this.nextStepperItem = signal(null, ...(ngDevMode ? [{ debugName: "nextStepperItem" }] : /* istanbul ignore next */ []));
+        this.prevStepperItem = signal(null, ...(ngDevMode ? [{ debugName: "prevStepperItem" }] : /* istanbul ignore next */ []));
         effect(() => {
             const items = this.totalStepperItemsArray();
             const currentValue = this.value();
@@ -183,15 +182,15 @@ class RdxStepperRootDirective {
         this.value.set(step);
         this.onValueChange.emit(step);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxStepperRootDirective, isStandalone: true, selector: "[rdxStepperRoot]", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "\"progress\"", "attr.data-linear": "linear() ? \"\" : undefined", "attr.data-orientation": "orientation()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxStepperRootDirective, isStandalone: true, selector: "[rdxStepperRoot]", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "\"progress\"", "attr.data-linear": "linear() ? \"\" : undefined", "attr.data-orientation": "orientation()" } }, providers: [
             {
                 provide: STEPPER_ROOT_CONTEXT,
                 useExisting: forwardRef(() => RdxStepperRootDirective)
             }
         ], exportAs: ["rdxStepperRoot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxStepperRoot]',
@@ -209,7 +208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '[attr.data-orientation]': 'orientation()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 class RdxStepperSeparatorDirective {
     constructor() {
@@ -217,18 +216,17 @@ class RdxStepperSeparatorDirective {
         this.itemContext = injectStepperItemContext();
         this.rdxSeparator = inject(RdxSeparatorRootDirective, { host: true });
         effect(() => {
-            this.rdxSeparator.updateDecorative(true);
             this.rdxSeparator.updateOrientation(this.rootContext.orientation());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxStepperSeparatorDirective, isStandalone: true, selector: "[rdxStepperSeparator]", host: { properties: { "attr.data-state": "itemContext.itemState()" } }, hostDirectives: [{ directive: i1.RdxSeparatorRootDirective, inputs: ["orientation", "orientation", "decorative", "decorative"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxStepperSeparatorDirective, isStandalone: true, selector: "[rdxStepperSeparator]", host: { properties: { "attr.data-state": "itemContext.itemState()" } }, hostDirectives: [{ directive: i1.RdxSeparatorRootDirective, inputs: ["orientation", "orientation"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperSeparatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperSeparatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxStepperSeparator]',
-                    hostDirectives: [{ directive: RdxSeparatorRootDirective, inputs: ['orientation', 'decorative'] }],
+                    hostDirectives: [{ directive: RdxSeparatorRootDirective, inputs: ['orientation'] }],
                     host: {
                         '[attr.data-state]': 'itemContext.itemState()'
                     }
@@ -239,10 +237,10 @@ class RdxStepperTitleDirective {
     constructor() {
         this.itemContext = injectStepperItemContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxStepperTitleDirective, isStandalone: true, selector: "[rdxStepperTitle]", host: { properties: { "attr.id": "itemContext.titleId" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxStepperTitleDirective, isStandalone: true, selector: "[rdxStepperTitle]", host: { properties: { "attr.id": "itemContext.titleId" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxStepperTitle]',
@@ -258,36 +256,35 @@ class RdxStepperTriggerDirective {
         this.rootContext = injectStepperRootContext();
         this.itemContext = injectStepperItemContext();
         this.elementRef = inject(ElementRef);
-        this.stepperItems = computed(() => Array.from(this.rootContext.totalStepperItems()), ...(ngDevMode ? [{ debugName: "stepperItems" }] : []));
-    }
-    ngOnInit() {
-        const current = this.rootContext.totalStepperItems();
-        this.rootContext.totalStepperItems.set([...current, this.elementRef.nativeElement]);
-    }
-    ngOnDestroy() {
-        const current = this.rootContext.totalStepperItems();
-        const updated = current.filter((el) => el !== this.elementRef.nativeElement);
-        this.rootContext.totalStepperItems.set(updated);
+        this.stepperItems = computed(() => Array.from(this.rootContext.totalStepperItems()), ...(ngDevMode ? [{ debugName: "stepperItems" }] : /* istanbul ignore next */ []));
+        // Register/deregister this trigger's host element with the root, in DOM order.
+        const element = this.elementRef.nativeElement;
+        this.rootContext.totalStepperItems.set([...this.rootContext.totalStepperItems(), element]);
+        inject(DestroyRef).onDestroy(() => {
+            const updated = this.rootContext.totalStepperItems().filter((el) => el !== element);
+            this.rootContext.totalStepperItems.set(updated);
+        });
     }
     handleMouseDown(event) {
+        const mouseEvent = event;
         if (this.itemContext.disabled()) {
             return;
         }
         // handler only left mouse click
-        if (event.button !== 0) {
+        if (mouseEvent.button !== 0) {
             return;
         }
         if (this.rootContext.linear()) {
             if (this.itemContext.step() <= this.rootContext.value() ||
                 this.itemContext.step() === this.rootContext.value() + 1) {
-                if (!event.ctrlKey) {
+                if (!mouseEvent.ctrlKey) {
                     this.rootContext.value.set(this.itemContext.step());
                     return;
                 }
             }
         }
         else {
-            if (!event.ctrlKey) {
+            if (!mouseEvent.ctrlKey) {
                 this.rootContext.value.set(this.itemContext.step());
                 return;
             }
@@ -296,14 +293,15 @@ class RdxStepperTriggerDirective {
         event.preventDefault();
     }
     handleKeyDown(event) {
+        const keyEvent = event;
         event.preventDefault();
         if (this.itemContext.disabled()) {
             return;
         }
-        if ((event.key === kbd.ENTER || event.key === kbd.SPACE) && !event.ctrlKey && !event.shiftKey)
+        if ((keyEvent.key === kbd.ENTER || keyEvent.key === kbd.SPACE) && !keyEvent.ctrlKey && !keyEvent.shiftKey)
             this.rootContext.value.set(this.itemContext.step());
-        if ([kbd.ARROW_LEFT, kbd.ARROW_RIGHT, kbd.ARROW_UP, kbd.ARROW_DOWN].includes(event.key)) {
-            useArrowNavigation(event, getActiveElement(), undefined, {
+        if ([kbd.ARROW_LEFT, kbd.ARROW_RIGHT, kbd.ARROW_UP, kbd.ARROW_DOWN].includes(keyEvent.key)) {
+            useArrowNavigation(keyEvent, getActiveElement(), undefined, {
                 itemsArray: this.stepperItems(),
                 focus: true,
                 loop: false,
@@ -312,10 +310,10 @@ class RdxStepperTriggerDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxStepperTriggerDirective, isStandalone: true, selector: "button[rdxStepperTrigger]", host: { listeners: { "mousedown": "handleMouseDown($event)", "keydown.Enter": "handleKeyDown($event)", "keydown.Space": "handleKeyDown($event)", "keydown.ArrowLeft": "handleKeyDown($event)", "keydown.ArrowRight": "handleKeyDown($event)", "keydown.ArrowUp": "handleKeyDown($event)", "keydown.ArrowDown": "handleKeyDown($event)" }, properties: { "attr.tabindex": "itemContext.isFocusable() ? 0 : -1", "attr.aria-describedby": "itemContext.descriptionId", "attr.aria-labelledby": "itemContext.titleId", "attr.data-state": "itemContext.itemState()", "attr.data-orientation": "rootContext.orientation()", "attr.disabled": "itemContext.disabled() || !itemContext.isFocusable() ? \"\" : undefined", "attr.data-disabled": "itemContext.disabled() || !itemContext.isFocusable() ? \"\" : undefined" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxStepperTriggerDirective, isStandalone: true, selector: "button[rdxStepperTrigger]", host: { listeners: { "mousedown": "handleMouseDown($event)", "keydown.Enter": "handleKeyDown($event)", "keydown.Space": "handleKeyDown($event)", "keydown.ArrowLeft": "handleKeyDown($event)", "keydown.ArrowRight": "handleKeyDown($event)", "keydown.ArrowUp": "handleKeyDown($event)", "keydown.ArrowDown": "handleKeyDown($event)" }, properties: { "attr.tabindex": "itemContext.isFocusable() ? 0 : -1", "attr.aria-describedby": "itemContext.descriptionId", "attr.aria-labelledby": "itemContext.titleId", "attr.data-state": "itemContext.itemState()", "attr.data-orientation": "rootContext.orientation()", "attr.disabled": "itemContext.disabled() || !itemContext.isFocusable() ? \"\" : undefined", "attr.data-disabled": "itemContext.disabled() || !itemContext.isFocusable() ? \"\" : undefined" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxStepperTrigger]',
@@ -336,7 +334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '(keydown.ArrowDown)': 'handleKeyDown($event)'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const _imports = [
     RdxStepperDescriptionDirective,
@@ -348,8 +346,8 @@ const _imports = [
     RdxStepperTriggerDirective
 ];
 class RdxStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperModule, imports: [RdxStepperDescriptionDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperModule, imports: [RdxStepperDescriptionDirective,
             RdxStepperTitleDirective,
             RdxStepperSeparatorDirective,
             RdxStepperItemDirective,
@@ -362,9 +360,9 @@ class RdxStepperModule {
             RdxStepperIndicatorDirective,
             RdxStepperRootDirective,
             RdxStepperTriggerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],