@truenas/ui-components 0.3.8 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"

package/types/truenas-ui-components.d.ts

@@ -6823,21 +6823,46 @@ declare class TnSliderThumbDirective implements ControlValueAccessor, OnInit, On
         max: () => number;
         step: () => number;
         value: () => number;
+        labelPrefix: () => string;
+        labelSuffix: () => string;
+        ariaLabel: () => string | undefined;
+        ariaLabelledby: () => string | undefined;
         updateValue: (value: number) => void;
+        markTouched: () => void;
         getSliderRect: () => DOMRect;
     };
     onTouched: () => void;
     private onChangeCallback;
+    private isPointerDown;
     private isDragging;
+    private currentValue;
+    private hasWrittenValue;
     private elementRef;
+    private fallbackAriaLabel;
+    private fallbackAriaLabelledby;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /** Value last written by the form, for the slider to read once linked. */
+    getValue(): number;
+    /**
+     * 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(): boolean;
     writeValue(value: number): void;
     registerOnChange(fn: (value: number) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     onInput(event: Event): void;
     onChange(_event: Event): void;
+    /**
+     * 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(): void;
     onMouseDown(event: MouseEvent): void;
     onTouchStart(event: TouchEvent): void;
     private addGlobalListeners;
@@ -6847,13 +6872,35 @@ declare class TnSliderThumbDirective implements ControlValueAccessor, OnInit, On
     private onGlobalTouchMove;
     private onGlobalTouchEnd;
     private updateValueFromPosition;
+    /**
+     * 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(): string | null;
+    ariaLabelledby(): string | null;
+    /**
+     * 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: number): void;
+    /**
+     * 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(): string | null;
     private cleanup;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSliderThumbDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnSliderThumbDirective, "input[tnSliderThumb]", never, {}, {}, never, never, true, never>;
 }
 
 type LabelType = 'none' | 'handle' | 'track' | 'both';
-declare class TnSliderComponent implements ControlValueAccessor, OnDestroy, AfterViewInit {
+declare class TnSliderComponent implements ControlValueAccessor, OnDestroy, AfterContentInit, AfterViewInit {
     min: _angular_core.InputSignal<number>;
     max: _angular_core.InputSignal<number>;
     step: _angular_core.InputSignal<number>;
@@ -6866,9 +6913,18 @@ declare class TnSliderComponent implements ControlValueAccessor, OnDestroy, Afte
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
     testId: _angular_core.InputSignal<TnTestIdValue>;
+    /**
+     * 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: _angular_core.InputSignal<string | undefined>;
+    ariaLabelledby: _angular_core.InputSignal<string | undefined>;
     thumbDirective: _angular_core.Signal<TnSliderThumbDirective>;
     sliderContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>;
-    thumbVisual: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     private onChange;
     private onTouched;
     value: _angular_core.WritableSignal<number>;
@@ -6878,30 +6934,35 @@ declare class TnSliderComponent implements ControlValueAccessor, OnDestroy, Afte
     isDisabled: _angular_core.Signal<boolean>;
     fillPercentage: _angular_core.Signal<number>;
     fillScale: _angular_core.Signal<number>;
-    thumbPosition: _angular_core.Signal<number>;
     showLabel: _angular_core.Signal<boolean>;
     labelVisible: _angular_core.Signal<boolean>;
     constructor();
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     writeValue(value: number): void;
     registerOnChange(fn: (value: number) => void): void;
     registerOnTouched(fn: () => void): void;
+    /**
+     * 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(): void;
     setDisabledState(isDisabled: boolean): void;
     updateValue(newValue: number): void;
     enableLabel(): void;
     showThumbLabel(): void;
     hideThumbLabel(): void;
     getSliderRect(): DOMRect;
-    onTrackClick(event: MouseEvent | TouchEvent): void;
-    private updateThumbPosition;
     private clampValue;
     private setupHandleInteractionListeners;
     private cleanupHandleInteractionListeners;
     private onInteractionStart;
     private onInteractionEnd;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSliderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSliderComponent, "tn-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "labelPrefix": { "alias": "labelPrefix"; "required": false; "isSignal": true; }; "labelSuffix": { "alias": "labelSuffix"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, {}, ["thumbDirective"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSliderComponent, "tn-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "labelPrefix": { "alias": "labelPrefix"; "required": false; "isSignal": true; }; "labelSuffix": { "alias": "labelSuffix"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, {}, ["thumbDirective"], ["*"], true, never>;
 }
 
 declare class TnSliderWithLabelDirective implements OnInit, OnDestroy {