@truenas/ui-components 0.3.8 → 0.3.9

package/fesm2022/truenas-ui-components.mjs

@@ -13563,11 +13563,33 @@ class TnSliderThumbDirective {
     slider; // Will be set by parent slider component
     onTouched = () => { };
     onChangeCallback = (_value) => { };
+    // Pointer is held down on the thumb (set on mousedown/touchstart). Drives the
+    // global move/up listeners.
+    isPointerDown = false;
+    // The pointer has actually moved since going down — i.e. a genuine drag. Only
+    // set once movement occurs (onGlobalMouseMove/onGlobalTouchMove), never on the
+    // initial press, so a plain click still commits through onInput. See onInput.
     isDragging = false;
+    // Last value written by the form. Retained so the parent slider can pick it up
+    // once it links the thumb (ngAfterContentInit) — writeValue can run before the
+    // slider sets `this.slider`.
+    currentValue = 0;
+    // Whether the form has actually written a value to this thumb. Lets the parent
+    // slider distinguish "form wrote 0" from "thumb never bound" so it doesn't
+    // clobber its own form value with this default. See getValue()/hasFormValue().
+    hasWrittenValue = false;
     elementRef = inject((ElementRef));
+    // An accessible name set directly on the <input tnSliderThumb> (e.g.
+    // aria-label="Volume"). Captured up front so the host's [attr.aria-label]
+    // binding can fall back to it instead of clobbering it when the parent slider
+    // doesn't supply one. See ariaLabel()/ariaLabelledby().
+    fallbackAriaLabel = null;
+    fallbackAriaLabelledby = null;
     ngOnInit() {
         // Make the native input visually hidden but still accessible
         const input = this.elementRef.nativeElement;
+        this.fallbackAriaLabel = input.getAttribute('aria-label');
+        this.fallbackAriaLabelledby = input.getAttribute('aria-labelledby');
         input.style.opacity = '0';
         input.style.position = 'absolute';
         input.style.width = '100%';
@@ -13580,10 +13602,46 @@ class TnSliderThumbDirective {
     ngOnDestroy() {
         this.cleanup();
     }
+    /** Value last written by the form, for the slider to read once linked. */
+    getValue() {
+        return this.currentValue;
+    }
+    /**
+     * Whether the form has written a value to this thumb. The slider checks this
+     * before adopting getValue() so an unbound thumb's default 0 never overwrites
+     * a value bound directly on the slider.
+     */
+    hasFormValue() {
+        return this.hasWrittenValue;
+    }
     // ControlValueAccessor implementation
     writeValue(value) {
-        if (this.elementRef.nativeElement) {
-            this.elementRef.nativeElement.value = value?.toString() || '0';
+        const nextValue = value ?? 0;
+        this.hasWrittenValue = true;
+        // Propagate to the parent slider so its value signal (and thus the thumb
+        // position / track fill) reflects the form value, not just the native input.
+        // When linked, mirror the slider's clamped/stepped result so currentValue and
+        // the native input agree with it; otherwise retain the raw value for the
+        // slider to adopt (and clamp) once it links the thumb in ngAfterContentInit.
+        if (this.slider) {
+            this.slider.updateValue(nextValue);
+            // Note: we don't emit the clamped result back to the form control, so an
+            // out-of-range write (e.g. setValue(143) on a 0–100 slider) leaves the model
+            // holding 143 while the slider renders 100. This mirrors native
+            // <input type="range">, which also doesn't reconcile the bound value.
+            this.currentValue = this.slider.value();
+            // When linked, the host `[value]="slider?.value()"` binding writes the
+            // native input on the next change-detection pass, so a manual write here
+            // would only be re-overwritten — leave it to the binding to keep one source
+            // of truth.
+        }
+        else {
+            this.currentValue = nextValue;
+            // Unlinked: no host binding value yet (slider?.value() is undefined), so set
+            // the native input directly until the slider links and takes over.
+            if (this.elementRef.nativeElement) {
+                this.elementRef.nativeElement.value = this.currentValue.toString();
+            }
         }
     }
     registerOnChange(fn) {
@@ -13599,21 +13657,45 @@ class TnSliderThumbDirective {
         }
     }
     onInput(event) {
+        // Once a drag is underway, the global pointer handlers
+        // (updateValueFromPosition) own value commits; the native range also fires
+        // input here, so skip it to avoid a redundant double emit. A plain click sets
+        // isPointerDown but not isDragging (no movement), so its native input commits
+        // here; keyboard changes set neither and also flow through.
+        if (this.isDragging) {
+            return;
+        }
         const input = event.target;
         const value = parseFloat(input.value);
+        // An empty/garbage value parses to NaN, which clampValue can't sanitize
+        // (Math.max/min with NaN stay NaN). Native range inputs shouldn't produce
+        // this, but guard so a NaN never reaches the form or slider value.
+        if (!Number.isFinite(value)) {
+            return;
+        }
         if (this.slider) {
             this.slider.updateValue(value);
         }
         this.onChangeCallback(value);
     }
     onChange(_event) {
+        this.notifyTouched();
+    }
+    /**
+     * Marks the bound control touched. Calls the thumb's own `onTouched` (for a
+     * thumb-bound control) and forwards to the linked slider (for a
+     * slider-host-bound control) — the thumb is the only interactive element, so
+     * the slider relies on it to ever become touched.
+     */
+    notifyTouched() {
         this.onTouched();
+        this.slider?.markTouched();
     }
     onMouseDown(event) {
         if (this.disabled()) {
             return;
         }
-        this.isDragging = true;
+        this.isPointerDown = true;
         this.addGlobalListeners();
         event.stopPropagation(); // Prevent track click
     }
@@ -13621,7 +13703,7 @@ class TnSliderThumbDirective {
         if (this.disabled()) {
             return;
         }
-        this.isDragging = true;
+        this.isPointerDown = true;
         this.addGlobalListeners();
         event.stopPropagation(); // Prevent track click
     }
@@ -13638,31 +13720,35 @@ class TnSliderThumbDirective {
         document.removeEventListener('touchend', this.onGlobalTouchEnd);
     }
     onGlobalMouseMove = (event) => {
-        if (!this.isDragging || this.disabled()) {
+        if (!this.isPointerDown || this.disabled()) {
             return;
         }
+        this.isDragging = true;
         event.preventDefault();
         this.updateValueFromPosition(event.clientX);
     };
     onGlobalMouseUp = () => {
-        if (this.isDragging) {
+        if (this.isPointerDown) {
+            this.isPointerDown = false;
             this.isDragging = false;
-            this.onTouched();
+            this.notifyTouched();
             this.removeGlobalListeners();
         }
     };
     onGlobalTouchMove = (event) => {
-        if (!this.isDragging || this.disabled()) {
+        if (!this.isPointerDown || this.disabled()) {
             return;
         }
+        this.isDragging = true;
         event.preventDefault();
         const touch = event.touches[0];
         this.updateValueFromPosition(touch.clientX);
     };
     onGlobalTouchEnd = () => {
-        if (this.isDragging) {
+        if (this.isPointerDown) {
+            this.isPointerDown = false;
             this.isDragging = false;
-            this.onTouched();
+            this.notifyTouched();
             this.removeGlobalListeners();
         }
     };
@@ -13676,12 +13762,58 @@ class TnSliderThumbDirective {
         const maxVal = this.slider.max();
         const newValue = minVal + (percentage * (maxVal - minVal));
         this.slider.updateValue(newValue);
+        // updateValue only moves the visual thumb; commit the (clamped/stepped) value
+        // to the form and native input so dragging actually emits changes — otherwise
+        // only click (native input event) updates the model.
+        this.commit(this.slider.value());
+    }
+    /**
+     * Resolve the accessible name for the range input: the parent slider's
+     * `aria-label`/`aria-labelledby` input when set, otherwise a value placed
+     * directly on the `<input tnSliderThumb>`. Returning the fallback keeps the
+     * host binding from wiping a directly-set label. Null removes the attribute.
+     */
+    ariaLabel() {
+        return this.slider?.ariaLabel() ?? this.fallbackAriaLabel;
+    }
+    ariaLabelledby() {
+        return this.slider?.ariaLabelledby() ?? this.fallbackAriaLabelledby;
+    }
+    /**
+     * Commit a value that originated outside the native input (a thumb drag).
+     * Syncs `currentValue`, the native input, and emits to the form. The slider's
+     * own `onChange` only reaches a slider-bound control, so a thumb-bound control
+     * relies on this to stay in sync. Expects an already clamped/stepped value
+     * (slider.value()).
+     */
+    commit(value) {
+        this.currentValue = value;
+        if (this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.value = value.toString();
+        }
+        this.onChangeCallback(value);
+    }
+    /**
+     * Builds an aria-valuetext when the slider has a label prefix/suffix so screen
+     * readers announce "50 km/h" rather than the bare number. Returns null when
+     * neither is set, letting the native range's valuenow announcement stand.
+     */
+    ariaValueText() {
+        if (!this.slider) {
+            return null;
+        }
+        const prefix = this.slider.labelPrefix();
+        const suffix = this.slider.labelSuffix();
+        if (!prefix && !suffix) {
+            return null;
+        }
+        return `${prefix}${this.slider.value()}${suffix}`;
     }
     cleanup() {
         this.removeGlobalListeners();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSliderThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnSliderThumbDirective, isStandalone: true, selector: "input[tnSliderThumb]", host: { attributes: { "type": "range" }, listeners: { "input": "onInput($event)", "change": "onChange($event)", "blur": "onTouched()", "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)" }, properties: { "disabled": "slider?.isDisabled()", "attr.min": "slider?.min()", "attr.max": "slider?.max()", "attr.step": "slider?.step()", "value": "slider?.value()" }, classAttribute: "tn-slider-thumb" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnSliderThumbDirective, isStandalone: true, selector: "input[tnSliderThumb]", host: { attributes: { "type": "range" }, listeners: { "input": "onInput($event)", "change": "onChange($event)", "blur": "notifyTouched()", "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)" }, properties: { "disabled": "slider?.isDisabled()", "attr.min": "slider?.min()", "attr.max": "slider?.max()", "attr.step": "slider?.step()", "value": "slider?.value()", "attr.aria-valuetext": "ariaValueText()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()" }, classAttribute: "tn-slider-thumb" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnSliderThumbDirective),
@@ -13709,15 +13841,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[attr.max]': 'slider?.max()',
                         '[attr.step]': 'slider?.step()',
                         '[value]': 'slider?.value()',
+                        '[attr.aria-valuetext]': 'ariaValueText()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
                         '(input)': 'onInput($event)',
                         '(change)': 'onChange($event)',
-                        '(blur)': 'onTouched()',
+                        '(blur)': 'notifyTouched()',
                         '(mousedown)': 'onMouseDown($event)',
                         '(touchstart)': 'onTouchStart($event)'
                     }
                 }]
         }] });
 
+/**
+ * Range slider with an optional value label.
+ *
+ * Form binding: both this component and the inner `input[tnSliderThumb]`
+ * directive are `NG_VALUE_ACCESSOR` providers, so a `formControl`/`ngModel` can
+ * be attached to either element. Bind to the `tn-slider` host for the simplest
+ * usage; binding to the inner thumb input also works and the slider adopts that
+ * value on init (see {@link ngAfterContentInit}). Avoid binding to both at once —
+ * pick one element per control to keep a single source of truth.
+ */
 class TnSliderComponent {
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
@@ -13731,9 +13876,18 @@ class TnSliderComponent {
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /**
+     * Accessible name forwarded to the inner range input — the focusable element
+     * screen readers actually announce. Set this (or `aria-labelledby`) when the
+     * slider isn't already labelled by a `tn-form-field`/`<label>`, otherwise a
+     * standalone `<tn-slider><input tnSliderThumb></tn-slider>` announces only
+     * "slider". A label set directly on the `input[tnSliderThumb]` is used as a
+     * fallback when neither is provided here.
+     */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), alias: 'aria-labelledby' });
     thumbDirective = contentChild.required(TnSliderThumbDirective);
     sliderContainer = viewChild.required('sliderContainer');
-    thumbVisual = viewChild.required('thumbVisual');
     onChange = (_value) => { };
     onTouched = () => { };
     value = signal(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -13754,13 +13908,6 @@ class TnSliderComponent {
     fillScale = computed(() => {
         return this.fillPercentage() / 100;
     }, ...(ngDevMode ? [{ debugName: "fillScale" }] : []));
-    // Computed position for thumb (in pixels from left)
-    thumbPosition = computed(() => {
-        const containerWidth = this.sliderContainer()?.nativeElement?.offsetWidth || 0;
-        const percentage = this.fillPercentage();
-        // Center the thumb (20px width, so -10px offset)
-        return (containerWidth * percentage / 100) - 10;
-    }, ...(ngDevMode ? [{ debugName: "thumbPosition" }] : []));
     // Public signals for label management
     showLabel = this._showLabel.asReadonly();
     labelVisible = this._labelVisible.asReadonly();
@@ -13782,13 +13929,24 @@ class TnSliderComponent {
             }
         });
     }
-    ngAfterViewInit() {
-        // Initialize thumb directive if present
+    ngAfterContentInit() {
+        // Link the projected thumb directive. Done in AfterContentInit (not
+        // AfterViewInit) so the link exists before the thumb's host bindings settle,
+        // avoiding a null→value flip on its [disabled]/[min]/[value] bindings.
         const thumbDirective = this.thumbDirective();
         if (thumbDirective) {
             thumbDirective.slider = this;
+            // When the form is bound to the inner thumb input, its initial writeValue()
+            // may run before this link exists, so adopt the value the thumb received —
+            // otherwise the slider keeps its default 0 and the thumb/fill render at the
+            // wrong position. Only adopt when the thumb was actually written to, so a
+            // value bound directly on the slider isn't clobbered by the thumb's default.
+            if (thumbDirective.hasFormValue()) {
+                this.value.set(this.clampValue(thumbDirective.getValue()));
+            }
         }
-        this.updateThumbPosition();
+    }
+    ngAfterViewInit() {
         // Set up handle interaction listeners if labelType is handle or both
         const currentLabelType = this.labelType();
         if ((currentLabelType === 'handle' || currentLabelType === 'both') && this._showLabel()) {
@@ -13810,6 +13968,15 @@ class TnSliderComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Marks a slider-host-bound control as touched. The inner thumb is the only
+     * interactive element, so it forwards its touch events here (on blur / pointer
+     * release) — otherwise a control bound to the `tn-slider` host would never
+     * transition to touched and touched-gated validation would never show.
+     */
+    markTouched() {
+        this.onTouched();
+    }
     setDisabledState(isDisabled) {
         this.formDisabled.set(isDisabled);
     }
@@ -13818,7 +13985,6 @@ class TnSliderComponent {
         const clampedValue = this.clampValue(newValue);
         this.value.set(clampedValue);
         this.onChange(clampedValue);
-        this.updateThumbPosition();
     }
     enableLabel() {
         this._showLabel.set(true);
@@ -13832,24 +13998,6 @@ class TnSliderComponent {
     getSliderRect() {
         return this.sliderContainer().nativeElement.getBoundingClientRect();
     }
-    onTrackClick(event) {
-        if (this.isDisabled()) {
-            return;
-        }
-        event.preventDefault();
-        const rect = this.getSliderRect();
-        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-        const percentage = (clientX - rect.left) / rect.width;
-        const minVal = this.min();
-        const maxVal = this.max();
-        const newValue = minVal + (percentage * (maxVal - minVal));
-        this.updateValue(newValue);
-        this.onTouched();
-    }
-    updateThumbPosition() {
-        // Thumb position is now handled by computed signal and template binding
-        // No manual DOM manipulation needed
-    }
     clampValue(value) {
         const minVal = this.min();
         const maxVal = this.max();
@@ -13907,13 +14055,13 @@ class TnSliderComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSliderComponent, isStandalone: true, selector: "tn-slider", inputs: { 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelSuffix: { classPropertyName: "labelSuffix", publicName: "labelSuffix", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "isDisabled()" }, classAttribute: "tn-slider" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSliderComponent, isStandalone: true, selector: "tn-slider", inputs: { 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelSuffix: { classPropertyName: "labelSuffix", publicName: "labelSuffix", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "isDisabled()" }, classAttribute: "tn-slider" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnSliderComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "thumbDirective", first: true, predicate: TnSliderThumbDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sliderContainer", first: true, predicate: ["sliderContainer"], descendants: true, isSignal: true }, { propertyName: "thumbVisual", first: true, predicate: ["thumbVisual"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #sliderContainer\n  class=\"tn-slider-container\"\n  tnTestIdType=\"slider\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-disabled]=\"isDisabled()\"\n  [attr.data-disabled]=\"isDisabled()\"\n  (mousedown)=\"onTrackClick($event)\"\n  (touchstart)=\"onTrackClick($event)\">\n\n  <div class=\"tn-slider-track\">\n    <div class=\"tn-slider-track-inactive\"></div>\n    <div class=\"tn-slider-track-active\">\n      <div\n        class=\"tn-slider-track-active-fill\"\n        [style.transform]=\"'scaleX(' + fillScale() + ')'\">\n      </div>\n    </div>\n    @if ((labelType() === 'track' || labelType() === 'both') && showLabel()) {\n      <div class=\"tn-slider-track-label\">\n        {{ labelPrefix() }}{{ value() }}{{ labelSuffix() }}\n      </div>\n    }\n  </div>\n\n  <div\n    #thumbVisual\n    class=\"tn-slider-thumb-visual\"\n    [style.transform]=\"'translateX(' + thumbPosition() + 'px)'\">\n    <div class=\"tn-slider-thumb-knob\"></div>\n    @if ((labelType() === 'handle' || labelType() === 'both') && showLabel()) {\n      <div\n        class=\"tn-slider-thumb-label\"\n        [class.visible]=\"labelVisible()\">\n        {{ labelPrefix() }}{{ value() }}{{ labelSuffix() }}\n      </div>\n    }\n  </div>\n\n  <ng-content />\n</div>\n", styles: [":host{display:block;width:100%;height:48px;position:relative;touch-action:pan-x}.tn-slider-container{position:relative;width:100%;height:100%;display:flex;align-items:center;cursor:pointer}.tn-slider-container[data-disabled=true]{cursor:not-allowed;opacity:.6}.tn-slider-track{position:relative;width:100%;height:4px}.tn-slider-track-inactive{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--tn-lines, #e0e0e0);border-radius:2px}.tn-slider-track-active{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:2px}.tn-slider-track-active-fill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--tn-primary, #007bff);border-radius:2px;transform-origin:left center;transition:transform .1s ease-out}:host ::ng-deep .tn-slider-thumb{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:pointer;z-index:2;-webkit-appearance:none;appearance:none;background:none;border:none;outline:none}:host ::ng-deep .tn-slider-thumb:disabled{cursor:not-allowed}:host ::ng-deep .tn-slider-thumb:focus{outline:none}:host ::ng-deep .tn-slider-thumb:focus-visible{outline:none}:host ::ng-deep .tn-slider-thumb:focus-visible+.tn-slider-visual-thumb{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-slider-thumb-visual{position:absolute;top:50%;left:0;pointer-events:none;z-index:3;transition:transform .1s ease-out}.tn-slider-thumb-knob{width:20px;height:24px;background:var(--tn-primary, #007bff);border:2px solid var(--tn-bg1, white);border-radius:4px;box-shadow:0 2px 4px #0003;transition:box-shadow .15s ease;transform:translateY(-50%)}.tn-slider-container:hover .tn-slider-thumb-knob{box-shadow:0 4px 8px #0000004d}.tn-slider-container[data-disabled=true] .tn-slider-thumb-knob{background:var(--tn-fg2, #999);box-shadow:0 1px 2px #0000001a}.tn-slider-thumb-label{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(-50%) translateY(-50%);padding:8px 12px;background:var(--tn-primary, #007bff);color:var(--tn-primary-txt, white);border-radius:6px;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .15s ease;z-index:4;box-shadow:0 2px 8px #00000026}.tn-slider-thumb-label:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--tn-primary, #007bff)}.tn-slider-thumb-label.visible{opacity:1}.tn-slider-track-label{position:absolute;top:-28px;right:0;padding:4px 0;background:transparent;color:var(--tn-fg1, #000);font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none;z-index:2}@media(prefers-reduced-motion:reduce){.tn-slider-track-active-fill,.tn-slider-thumb-visual,.tn-slider-thumb-knob,.tn-slider-thumb-label{transition:none}}@media(prefers-contrast:high){.tn-slider-track-inactive{border:1px solid var(--tn-fg1, #000)}.tn-slider-thumb-knob{border-width:3px;border-color:var(--tn-fg1, #000)}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], queries: [{ propertyName: "thumbDirective", first: true, predicate: TnSliderThumbDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sliderContainer", first: true, predicate: ["sliderContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Pointer interaction (click-to-position and press-drag, anywhere on the track)\n  is handled by the projected native range input, which overlays the whole\n  container (see TnSliderThumbDirective): a click jumps the thumb and fires\n  `input` \u2192 onInput; a press-and-move runs the directive's global drag handlers.\n  No container-level click handler is needed \u2014 and one wouldn't fire anyway, as\n  the overlay calls stopPropagation() on its own pointer events.\n-->\n<div\n  #sliderContainer\n  class=\"tn-slider-container\"\n  tnTestIdType=\"slider\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-disabled]=\"isDisabled()\"\n  [attr.data-disabled]=\"isDisabled()\">\n\n  <div class=\"tn-slider-track\">\n    <div class=\"tn-slider-track-inactive\"></div>\n    <div class=\"tn-slider-track-active\">\n      <div\n        class=\"tn-slider-track-active-fill\"\n        [style.transform]=\"'scaleX(' + fillScale() + ')'\">\n      </div>\n    </div>\n    @if ((labelType() === 'track' || labelType() === 'both') && showLabel()) {\n      <div class=\"tn-slider-track-label\">\n        {{ labelPrefix() }}{{ value() }}{{ labelSuffix() }}\n      </div>\n    }\n  </div>\n\n  <div\n    class=\"tn-slider-thumb-visual\"\n    [style.left.%]=\"fillPercentage()\">\n    <div class=\"tn-slider-thumb-knob\"></div>\n    @if ((labelType() === 'handle' || labelType() === 'both') && showLabel()) {\n      <div\n        class=\"tn-slider-thumb-label\"\n        [class.visible]=\"labelVisible()\">\n        {{ labelPrefix() }}{{ value() }}{{ labelSuffix() }}\n      </div>\n    }\n  </div>\n\n  <ng-content />\n</div>\n", styles: [":host{display:block;width:100%;height:48px;position:relative;touch-action:pan-x}.tn-slider-container{position:relative;width:100%;height:100%;display:flex;align-items:center;cursor:pointer}.tn-slider-container[data-disabled=true]{cursor:not-allowed;opacity:.6}.tn-slider-track{position:relative;width:100%;height:4px}.tn-slider-track-inactive{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--tn-lines, #e0e0e0);border-radius:2px}.tn-slider-track-active{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:2px}.tn-slider-track-active-fill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--tn-primary, #007bff);border-radius:2px;transform-origin:left center;transition:transform .1s ease-out}:host ::ng-deep .tn-slider-thumb{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:pointer;z-index:2;-webkit-appearance:none;appearance:none;background:none;border:none;outline:none}:host ::ng-deep .tn-slider-thumb:disabled{cursor:not-allowed}:host ::ng-deep .tn-slider-thumb:focus{outline:none}:host ::ng-deep .tn-slider-thumb:focus-visible{outline:none}:host ::ng-deep .tn-slider-container:has(.tn-slider-thumb:focus-visible) .tn-slider-thumb-knob{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-slider-thumb-visual{position:absolute;top:50%;left:0;margin-left:-10px;pointer-events:none;z-index:3;transition:left .1s ease-out}.tn-slider-thumb-knob{width:20px;height:24px;background:var(--tn-primary, #007bff);border:2px solid var(--tn-bg1, white);border-radius:4px;box-shadow:0 2px 4px #0003;transition:box-shadow .15s ease;transform:translateY(-50%)}.tn-slider-container:hover .tn-slider-thumb-knob{box-shadow:0 4px 8px #0000004d}.tn-slider-container[data-disabled=true] .tn-slider-thumb-knob{background:var(--tn-fg2, #999);box-shadow:0 1px 2px #0000001a}.tn-slider-thumb-label{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(-50%) translateY(-50%);padding:8px 12px;background:var(--tn-primary, #007bff);color:var(--tn-primary-txt, white);border-radius:6px;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .15s ease;z-index:4;box-shadow:0 2px 8px #00000026}.tn-slider-thumb-label:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--tn-primary, #007bff)}.tn-slider-thumb-label.visible{opacity:1}.tn-slider-track-label{position:absolute;top:-28px;right:0;padding:4px 0;background:transparent;color:var(--tn-fg1, #000);font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none;z-index:2}@media(prefers-reduced-motion:reduce){.tn-slider-track-active-fill,.tn-slider-thumb-visual,.tn-slider-thumb-knob,.tn-slider-thumb-label{transition:none}}@media(prefers-contrast:high){.tn-slider-track-inactive{border:1px solid var(--tn-fg1, #000)}.tn-slider-thumb-knob{border-width:3px;border-color:var(--tn-fg1, #000)}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSliderComponent, decorators: [{
             type: Component,
@@ -13926,8 +14074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], host: {
                         'class': 'tn-slider',
                         '[attr.aria-disabled]': 'isDisabled()'
-                    }, template: "<div\n  #sliderContainer\n  class=\"tn-slider-container\"\n  tnTestIdType=\"slider\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-disabled]=\"isDisabled()\"\n  [attr.data-disabled]=\"isDisabled()\"\n  (mousedown)=\"onTrackClick($event)\"\n  (touchstart)=\"onTrackClick($event)\">\n\n  <div class=\"tn-slider-track\">\n    <div class=\"tn-slider-track-inactive\"></div>\n    <div class=\"tn-slider-track-active\">\n      <div\n        class=\"tn-slider-track-active-fill\"\n        [style.transform]=\"'scaleX(' + fillScale() + ')'\">\n      </div>\n    </div>\n    @if ((labelType() === 'track' || labelType() === 'both') && showLabel()) {\n      <div class=\"tn-slider-track-label\">\n        {{ labelPrefix() }}{{ value() }}{{ labelSuffix() }}\n      </div>\n    }\n  </div>\n\n  <div\n    #thumbVisual\n    class=\"tn-slider-thumb-visual\"\n    [style.transform]=\"'translateX(' + thumbPosition() + 'px)'\">\n    <div class=\"tn-slider-thumb-knob\"></div>\n    @if ((labelType() === 'handle' || labelType() === 'both') && showLabel()) {\n      <div\n        class=\"tn-slider-thumb-label\"\n        [class.visible]=\"labelVisible()\">\n        {{ labelPrefix() }}{{ value() }}{{ labelSuffix() }}\n      </div>\n    }\n  </div>\n\n  <ng-content />\n</div>\n", styles: [":host{display:block;width:100%;height:48px;position:relative;touch-action:pan-x}.tn-slider-container{position:relative;width:100%;height:100%;display:flex;align-items:center;cursor:pointer}.tn-slider-container[data-disabled=true]{cursor:not-allowed;opacity:.6}.tn-slider-track{position:relative;width:100%;height:4px}.tn-slider-track-inactive{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--tn-lines, #e0e0e0);border-radius:2px}.tn-slider-track-active{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:2px}.tn-slider-track-active-fill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--tn-primary, #007bff);border-radius:2px;transform-origin:left center;transition:transform .1s ease-out}:host ::ng-deep .tn-slider-thumb{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:pointer;z-index:2;-webkit-appearance:none;appearance:none;background:none;border:none;outline:none}:host ::ng-deep .tn-slider-thumb:disabled{cursor:not-allowed}:host ::ng-deep .tn-slider-thumb:focus{outline:none}:host ::ng-deep .tn-slider-thumb:focus-visible{outline:none}:host ::ng-deep .tn-slider-thumb:focus-visible+.tn-slider-visual-thumb{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-slider-thumb-visual{position:absolute;top:50%;left:0;pointer-events:none;z-index:3;transition:transform .1s ease-out}.tn-slider-thumb-knob{width:20px;height:24px;background:var(--tn-primary, #007bff);border:2px solid var(--tn-bg1, white);border-radius:4px;box-shadow:0 2px 4px #0003;transition:box-shadow .15s ease;transform:translateY(-50%)}.tn-slider-container:hover .tn-slider-thumb-knob{box-shadow:0 4px 8px #0000004d}.tn-slider-container[data-disabled=true] .tn-slider-thumb-knob{background:var(--tn-fg2, #999);box-shadow:0 1px 2px #0000001a}.tn-slider-thumb-label{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(-50%) translateY(-50%);padding:8px 12px;background:var(--tn-primary, #007bff);color:var(--tn-primary-txt, white);border-radius:6px;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .15s ease;z-index:4;box-shadow:0 2px 8px #00000026}.tn-slider-thumb-label:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--tn-primary, #007bff)}.tn-slider-thumb-label.visible{opacity:1}.tn-slider-track-label{position:absolute;top:-28px;right:0;padding:4px 0;background:transparent;color:var(--tn-fg1, #000);font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none;z-index:2}@media(prefers-reduced-motion:reduce){.tn-slider-track-active-fill,.tn-slider-thumb-visual,.tn-slider-thumb-knob,.tn-slider-thumb-label{transition:none}}@media(prefers-contrast:high){.tn-slider-track-inactive{border:1px solid var(--tn-fg1, #000)}.tn-slider-thumb-knob{border-width:3px;border-color:var(--tn-fg1, #000)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPrefix", required: false }] }], labelSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSuffix", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], thumbDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnSliderThumbDirective), { isSignal: true }] }], sliderContainer: [{ type: i0.ViewChild, args: ['sliderContainer', { isSignal: true }] }], thumbVisual: [{ type: i0.ViewChild, args: ['thumbVisual', { isSignal: true }] }] } });
+                    }, template: "<!--\n  Pointer interaction (click-to-position and press-drag, anywhere on the track)\n  is handled by the projected native range input, which overlays the whole\n  container (see TnSliderThumbDirective): a click jumps the thumb and fires\n  `input` \u2192 onInput; a press-and-move runs the directive's global drag handlers.\n  No container-level click handler is needed \u2014 and one wouldn't fire anyway, as\n  the overlay calls stopPropagation() on its own pointer events.\n-->\n<div\n  #sliderContainer\n  class=\"tn-slider-container\"\n  tnTestIdType=\"slider\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-disabled]=\"isDisabled()\"\n  [attr.data-disabled]=\"isDisabled()\">\n\n  <div class=\"tn-slider-track\">\n    <div class=\"tn-slider-track-inactive\"></div>\n    <div class=\"tn-slider-track-active\">\n      <div\n        class=\"tn-slider-track-active-fill\"\n        [style.transform]=\"'scaleX(' + fillScale() + ')'\">\n      </div>\n    </div>\n    @if ((labelType() === 'track' || labelType() === 'both') && showLabel()) {\n      <div class=\"tn-slider-track-label\">\n        {{ labelPrefix() }}{{ value() }}{{ labelSuffix() }}\n      </div>\n    }\n  </div>\n\n  <div\n    class=\"tn-slider-thumb-visual\"\n    [style.left.%]=\"fillPercentage()\">\n    <div class=\"tn-slider-thumb-knob\"></div>\n    @if ((labelType() === 'handle' || labelType() === 'both') && showLabel()) {\n      <div\n        class=\"tn-slider-thumb-label\"\n        [class.visible]=\"labelVisible()\">\n        {{ labelPrefix() }}{{ value() }}{{ labelSuffix() }}\n      </div>\n    }\n  </div>\n\n  <ng-content />\n</div>\n", styles: [":host{display:block;width:100%;height:48px;position:relative;touch-action:pan-x}.tn-slider-container{position:relative;width:100%;height:100%;display:flex;align-items:center;cursor:pointer}.tn-slider-container[data-disabled=true]{cursor:not-allowed;opacity:.6}.tn-slider-track{position:relative;width:100%;height:4px}.tn-slider-track-inactive{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--tn-lines, #e0e0e0);border-radius:2px}.tn-slider-track-active{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:2px}.tn-slider-track-active-fill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--tn-primary, #007bff);border-radius:2px;transform-origin:left center;transition:transform .1s ease-out}:host ::ng-deep .tn-slider-thumb{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:pointer;z-index:2;-webkit-appearance:none;appearance:none;background:none;border:none;outline:none}:host ::ng-deep .tn-slider-thumb:disabled{cursor:not-allowed}:host ::ng-deep .tn-slider-thumb:focus{outline:none}:host ::ng-deep .tn-slider-thumb:focus-visible{outline:none}:host ::ng-deep .tn-slider-container:has(.tn-slider-thumb:focus-visible) .tn-slider-thumb-knob{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-slider-thumb-visual{position:absolute;top:50%;left:0;margin-left:-10px;pointer-events:none;z-index:3;transition:left .1s ease-out}.tn-slider-thumb-knob{width:20px;height:24px;background:var(--tn-primary, #007bff);border:2px solid var(--tn-bg1, white);border-radius:4px;box-shadow:0 2px 4px #0003;transition:box-shadow .15s ease;transform:translateY(-50%)}.tn-slider-container:hover .tn-slider-thumb-knob{box-shadow:0 4px 8px #0000004d}.tn-slider-container[data-disabled=true] .tn-slider-thumb-knob{background:var(--tn-fg2, #999);box-shadow:0 1px 2px #0000001a}.tn-slider-thumb-label{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(-50%) translateY(-50%);padding:8px 12px;background:var(--tn-primary, #007bff);color:var(--tn-primary-txt, white);border-radius:6px;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .15s ease;z-index:4;box-shadow:0 2px 8px #00000026}.tn-slider-thumb-label:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--tn-primary, #007bff)}.tn-slider-thumb-label.visible{opacity:1}.tn-slider-track-label{position:absolute;top:-28px;right:0;padding:4px 0;background:transparent;color:var(--tn-fg1, #000);font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none;z-index:2}@media(prefers-reduced-motion:reduce){.tn-slider-track-active-fill,.tn-slider-thumb-visual,.tn-slider-thumb-knob,.tn-slider-thumb-label{transition:none}}@media(prefers-contrast:high){.tn-slider-track-inactive{border:1px solid var(--tn-fg1, #000)}.tn-slider-thumb-knob{border-width:3px;border-color:var(--tn-fg1, #000)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPrefix", required: false }] }], labelSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSuffix", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], thumbDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnSliderThumbDirective), { isSignal: true }] }], sliderContainer: [{ type: i0.ViewChild, args: ['sliderContainer', { isSignal: true }] }] } });
 
 class TnSliderWithLabelDirective {
     enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : {}), alias: 'tnSliderWithLabel' });