@radix-ng/primitives 1.0.0-beta.5 → 1.0.2

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

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, DestroyRef, Directive, computed, input, numberAttribute, booleanAttribute, model, output, signal, afterNextRender, afterRenderEffect, untracked, NgModule } from '@angular/core';
+import { inject, ElementRef, DestroyRef, Directive, computed, input, numberAttribute, booleanAttribute, model, output, signal, effect, afterNextRender, afterRenderEffect, untracked, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import * as i1 from '@radix-ng/primitives/core';
+import * as i2 from '@radix-ng/primitives/core';
 import { createContext, clamp, injectControlValueAccessor, injectDocument, injectId, createCancelableChangeEventDetails, RdxControlValueAccessor } from '@radix-ng/primitives/core';
 export { clamp } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/composite';
+import { RdxCompositeList, RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 
 /**
@@ -720,6 +722,7 @@ class RdxSliderRoot {
         /** @ignore */
         this.cva = injectControlValueAccessor();
         this.document = injectDocument();
+        this.compositeList = inject(RdxCompositeList, { self: true });
         this.id = input(injectId('rdx-slider-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * The minimum value of the slider.
@@ -832,6 +835,10 @@ class RdxSliderRoot {
         this.thumbs = signal([], ...(ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []));
         /** Registered thumbs in DOM order. */
         this.thumbList = this.thumbs.asReadonly();
+        /** Input ids registered by thumbs, in DOM order. */
+        this.thumbInputIds = computed(() => Array.from(this.compositeList.itemMap().values())
+            .map((metadata) => metadata['inputId'])
+            .filter((inputId) => typeof inputId === 'string' && inputId.length > 0), ...(ngDevMode ? [{ debugName: "thumbInputIds" }] : /* istanbul ignore next */ []));
     }
     /** @ignore */
     registerThumb(thumb) {
@@ -954,7 +961,7 @@ class RdxSliderRoot {
         return this.document.defaultView ?? undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, thumbAlignment: { classPropertyName: "thumbAlignment", publicName: "thumbAlignment", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [provideSliderRootContext(() => inject(RdxSliderRoot))], exportAs: ["rdxSliderRoot"], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, thumbAlignment: { classPropertyName: "thumbAlignment", publicName: "thumbAlignment", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [provideSliderRootContext(() => inject(RdxSliderRoot))], exportAs: ["rdxSliderRoot"], hostDirectives: [{ directive: i1.RdxCompositeList }, { directive: i2.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRoot, decorators: [{
             type: Directive,
@@ -963,6 +970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     exportAs: 'rdxSliderRoot',
                     providers: [provideSliderRootContext(() => inject(RdxSliderRoot))],
                     hostDirectives: [
+                        RdxCompositeList,
                         {
                             directive: RdxControlValueAccessor,
                             inputs: ['value: value', 'disabled']
@@ -989,16 +997,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxSliderThumb {
     constructor() {
         this.root = injectSliderRootContext();
+        this.listItem = inject(RdxCompositeListItem, { self: true });
         this.element = inject(ElementRef).nativeElement;
         /** The nested range input, set by `[rdxSliderThumbInput]`. */
         this.inputElement = null;
+        this.inputId = signal(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         /** Explicit index for this thumb (required for SSR range sliders). */
         this.indexInput = input(undefined, { ...(ngDevMode ? { debugName: "indexInput" } : /* istanbul ignore next */ {}), alias: 'index',
             transform: (v) => (v == null ? undefined : numberAttribute(v)) });
         /** Disables this individual thumb. */
         this.thumbDisabled = input(false, { ...(ngDevMode ? { debugName: "thumbDisabled" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
         /** The position of this thumb among its siblings. */
-        this.index = computed(() => this.indexInput() ?? this.root.thumbIndexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.index = computed(() => {
+            if (!this.root.range()) {
+                return 0;
+            }
+            const explicitIndex = this.indexInput();
+            if (explicitIndex !== undefined) {
+                return explicitIndex;
+            }
+            const compositeIndex = this.listItem.index();
+            return compositeIndex === -1 ? this.root.thumbIndexOf(this) : compositeIndex;
+        }, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
         /** Whether this thumb is disabled (own state OR root disabled). */
         this.disabled = computed(() => this.thumbDisabled() || this.root.isDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /** The value represented by this thumb. */
@@ -1046,6 +1066,11 @@ class RdxSliderThumb {
             }
             return style;
         }, ...(ngDevMode ? [{ debugName: "thumbStyle" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.listItem.setMetadata({
+                inputId: this.inputId()
+            });
+        });
         // Registration is DOM-order sorted on the root and reads no inputs, so the constructor
         // (where the host element already exists) is the right place; cleanup goes via DestroyRef.
         this.root.registerThumb(this);
@@ -1103,14 +1128,28 @@ class RdxSliderThumb {
             this.root.pressedInput = this.inputElement;
         }
     }
+    /** @ignore */
+    setInputElement(input, id) {
+        this.inputElement = input;
+        this.inputId.set(id);
+    }
+    /** @ignore */
+    clearInputElement(input) {
+        if (this.inputElement !== input) {
+            return;
+        }
+        this.inputElement = null;
+        this.inputId.set(undefined);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderThumb, isStandalone: true, selector: "div[rdxSliderThumb]", inputs: { indexInput: { classPropertyName: "indexInput", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, thumbDisabled: { classPropertyName: "thumbDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "style": "thumbStyle()", "attr.data-index": "index()", "attr.data-orientation": "root.orientation()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-dragging": "root.dragging() ? \"\" : undefined" } }, exportAs: ["rdxSliderThumb"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderThumb, isStandalone: true, selector: "div[rdxSliderThumb]", inputs: { indexInput: { classPropertyName: "indexInput", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, thumbDisabled: { classPropertyName: "thumbDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "style": "thumbStyle()", "attr.data-index": "index()", "attr.data-orientation": "root.orientation()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-dragging": "root.dragging() ? \"\" : undefined" } }, exportAs: ["rdxSliderThumb"], hostDirectives: [{ directive: i1.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumb, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[rdxSliderThumb]',
                     exportAs: 'rdxSliderThumb',
+                    hostDirectives: [RdxCompositeListItem],
                     host: {
                         '[style]': 'thumbStyle()',
                         '[attr.data-index]': 'index()',
@@ -1134,18 +1173,17 @@ class RdxSliderThumbInput {
         this.root = injectSliderRootContext();
         this.thumb = inject(RdxSliderThumb);
         this.element = inject(ElementRef).nativeElement;
+        this.id = input(injectId('rdx-slider-thumb-input-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
         this.ariaValueTextInput = input(undefined, { ...(ngDevMode ? { debugName: "ariaValueTextInput" } : /* istanbul ignore next */ {}), alias: 'aria-valuetext' });
         this.writingMode = computed(() => this.root.orientation() === 'vertical' ? (this.root.dir() === 'rtl' ? 'vertical-rl' : 'vertical-lr') : undefined, ...(ngDevMode ? [{ debugName: "writingMode" }] : /* istanbul ignore next */ []));
         this.ariaLabelledBy = computed(() => this.ariaLabel() == null ? this.root.ariaLabelledBy() : undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
         this.valueText = computed(() => this.ariaValueTextInput() ??
             getDefaultAriaValueText(this.root.values(), this.thumb.index(), this.root.format(), this.root.locale()), ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
-        // Host element exists in the constructor and the registration has no input dependency.
-        this.thumb.inputElement = this.element;
+        // Host element exists in the constructor; the id may be user-provided and can update.
+        effect(() => this.thumb.setInputElement(this.element, this.id()));
         inject(DestroyRef).onDestroy(() => {
-            if (this.thumb.inputElement === this.element) {
-                this.thumb.inputElement = null;
-            }
+            this.thumb.clearInputElement(this.element);
         });
     }
     onChange(event) {
@@ -1219,7 +1257,7 @@ class RdxSliderThumbInput {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumbInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderThumbInput, isStandalone: true, selector: "input[rdxSliderThumbInput]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueTextInput: { classPropertyName: "ariaValueTextInput", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "range" }, listeners: { "keydown": "onKeyDown($event)", "change": "onChange($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "style.writing-mode": "writingMode()", "attr.min": "root.min()", "attr.max": "root.max()", "attr.step": "root.step()", "value": "thumb.value() ?? \"\"", "disabled": "thumb.disabled()", "attr.name": "root.name()", "attr.form": "root.form()", "attr.aria-orientation": "root.orientation()", "attr.aria-valuenow": "thumb.value()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-index": "thumb.index()" }, styleAttribute: "position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit;" }, exportAs: ["rdxSliderThumbInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderThumbInput, isStandalone: true, selector: "input[rdxSliderThumbInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueTextInput: { classPropertyName: "ariaValueTextInput", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "range" }, listeners: { "keydown": "onKeyDown($event)", "change": "onChange($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "id": "id()", "style.writing-mode": "writingMode()", "attr.min": "root.min()", "attr.max": "root.max()", "attr.step": "root.step()", "value": "thumb.value() ?? \"\"", "disabled": "thumb.disabled()", "attr.name": "root.name()", "attr.form": "root.form()", "attr.aria-orientation": "root.orientation()", "attr.aria-valuenow": "thumb.value()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-index": "thumb.index()" }, styleAttribute: "position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit;" }, exportAs: ["rdxSliderThumbInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumbInput, decorators: [{
             type: Directive,
@@ -1229,6 +1267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         type: 'range',
                         style: 'position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit;',
+                        '[id]': 'id()',
                         '[style.writing-mode]': 'writingMode()',
                         '[attr.min]': 'root.min()',
                         '[attr.max]': 'root.max()',
@@ -1249,7 +1288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(blur)': 'onBlur()'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaValueTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaValueTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }] } });
 
 /**
  * The track of the slider — the positioning context for the indicator and thumbs.
@@ -1288,13 +1327,17 @@ class RdxSliderValue {
         this.root = injectSliderRootContext();
         /** The separator placed between values of a range slider. */
         this.separator = input(' – ', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+        this.forAttr = computed(() => {
+            const inputIds = this.root.thumbInputIds();
+            return inputIds.length > 0 ? inputIds.join(' ') : undefined;
+        }, ...(ngDevMode ? [{ debugName: "forAttr" }] : /* istanbul ignore next */ []));
         this.display = computed(() => this.root
             .values()
             .map((value) => this.root.formatValue(value) || `${value}`)
             .join(this.separator()), ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderValue, isStandalone: true, selector: "output[rdxSliderValue]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "off" }, properties: { "textContent": "display()" } }, exportAs: ["rdxSliderValue"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderValue, isStandalone: true, selector: "output[rdxSliderValue]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "off" }, properties: { "attr.for": "forAttr()", "textContent": "display()" } }, exportAs: ["rdxSliderValue"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderValue, decorators: [{
             type: Directive,
@@ -1303,6 +1346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     exportAs: 'rdxSliderValue',
                     host: {
                         'aria-live': 'off',
+                        '[attr.for]': 'forAttr()',
                         '[textContent]': 'display()'
                     }
                 }]