@truenas/ui-components 0.3.8 → 0.3.10

package/package.json

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

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

@@ -1054,6 +1054,17 @@ declare class TnButtonComponent implements AfterViewInit {
     variant: _angular_core.InputSignal<"filled" | "outline">;
     backgroundColor: _angular_core.InputSignal<string | undefined>;
     label: _angular_core.InputSignal<string>;
+    /**
+     * Optional icon rendered alongside the label. Accepts any name resolvable by
+     * `tn-icon` (sprite/registry/library). Use `iconPosition` to place it before
+     * or after the label.
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Side of the label the `icon` sits on. `left` (default) renders the icon
+     * before the label; `right` renders it after. No effect when `icon` is unset.
+     */
+    iconPosition: _angular_core.InputSignal<"left" | "right">;
     disabled: _angular_core.InputSignal<boolean>;
     /**
      * Native `type` of the rendered `<button>`. Defaults to `button` so stray
@@ -1099,7 +1110,7 @@ declare class TnButtonComponent implements AfterViewInit {
     private innerRef;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }
 
 /**
@@ -1126,6 +1137,8 @@ declare class TnButtonHarness extends ComponentHarness {
      */
     static hostSelector: string;
     private _button;
+    private _label;
+    private _icon;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a button
      * with specific attributes.
@@ -1156,6 +1169,27 @@ declare class TnButtonHarness extends ComponentHarness {
      * ```
      */
     getLabel(): Promise<string>;
+    /**
+     * Gets the `name` of the icon rendered inside the button, or `null` when the
+     * button has no icon.
+     *
+     * @example
+     * ```typescript
+     * const saveBtn = await loader.getHarness(TnButtonHarness.with({ label: 'Save' }));
+     * expect(await saveBtn.getIconName()).toBe('check');
+     * ```
+     */
+    getIconName(): Promise<string | null>;
+    /**
+     * Reports whether the button renders an icon.
+     *
+     * @example
+     * ```typescript
+     * const saveBtn = await loader.getHarness(TnButtonHarness.with({ label: 'Save' }));
+     * expect(await saveBtn.hasIcon()).toBe(true);
+     * ```
+     */
+    hasIcon(): Promise<boolean>;
     /**
      * Checks whether the button is disabled.
      *
@@ -6823,21 +6857,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 +6906,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 +6947,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 +6968,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 {