@truenas/ui-components 0.4.5 → 0.4.7

package/package.json

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

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

@@ -1254,6 +1254,11 @@ declare class TnButtonComponent implements AfterViewInit {
      */
     iconPosition: _angular_core.InputSignal<"left" | "right">;
     disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Stretches the button to the full width of its container instead of
+     * shrink-wrapping the label. Use for buttons that head or foot a form column.
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
     /**
      * Native `type` of the rendered `<button>`. Defaults to `button` so stray
      * clicks never submit an enclosing form. Set to `submit` for a form's save
@@ -1298,7 +1303,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; }; "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>;
+    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; }; "fullWidth": { "alias": "fullWidth"; "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>;
 }
 
 /**
@@ -3791,6 +3796,12 @@ declare class TnSlideToggleComponent implements AfterViewInit, OnDestroy, Contro
     toggleEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     labelPosition: _angular_core.InputSignal<"before" | "after">;
     label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Stretches the toggle to the full width of its container and pushes the label
+     * and the track to opposite ends of the row, instead of shrink-wrapping them
+     * side by side. Use for settings rows and option lists.
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
     color: _angular_core.InputSignal<SlideToggleColor>;
@@ -3821,7 +3832,7 @@ declare class TnSlideToggleComponent implements AfterViewInit, OnDestroy, Contro
     classes: _angular_core.Signal<string[]>;
     effectiveAriaLabel: _angular_core.Signal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSlideToggleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSlideToggleComponent, "tn-slide-toggle", never, { "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSlideToggleComponent, "tn-slide-toggle", never, { "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, true, never>;
 }
 
 /**
@@ -5728,22 +5739,56 @@ declare class TnListComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListComponent, "tn-list", never, { "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class TnListItemComponent implements AfterContentInit {
+/**
+ * A single row of a `tn-list`.
+ *
+ * **The content directives must be imported by the component that declares the
+ * row.** Every slot but the primary text is rendered only when a matching
+ * directive *instance* is found, and directives apply only in the template that
+ * declares them — importing `TnListItemComponent` alone does not bring them
+ * into scope. Write `<span tnListIcon>` without `TnListIconDirective` in that
+ * component's `imports` and the attribute is inert: no instance, so the leading
+ * slot never renders and the icon silently disappears. The same holds for
+ * `[tnListAvatar]`, `[tnListItemLine]`, `[tnListItemSecondary]` and
+ * `[tnListItemTrailing]`. Import them alongside the component:
+ *
+ * ```ts
+ * import {
+ *   TnListItemComponent,
+ *   TnListIconDirective,
+ *   TnListItemLineDirective,
+ *   TnListItemTrailingDirective,
+ * } from '@truenas/ui-components';
+ * ```
+ *
+ * The primary-text slot is the deliberate exception — it has no gate, so
+ * `[tnListItemTitle]` and `[tnListItemPrimary]` render either way. See the
+ * comment in `list-item.component.html` for why the asymmetry is there.
+ */
+declare class TnListItemComponent {
     disabled: _angular_core.InputSignal<boolean>;
     clickable: _angular_core.InputSignal<boolean>;
+    /** Compact row: smaller minimum height and tighter vertical padding. */
+    dense: _angular_core.InputSignal<boolean>;
+    /**
+     * Lets the primary and secondary text wrap onto multiple lines instead of
+     * being truncated with an ellipsis. Use for rows whose content is a path, a
+     * sentence, or anything else that should stay fully readable.
+     */
+    wrap: _angular_core.InputSignal<boolean>;
     itemClick: _angular_core.OutputEmitterRef<Event>;
-    protected hasLeadingContent: _angular_core.WritableSignal<boolean>;
-    protected hasSecondaryTextContent: _angular_core.WritableSignal<boolean>;
-    protected hasTrailingContent: _angular_core.WritableSignal<boolean>;
-    protected hasPrimaryTextDirective: _angular_core.WritableSignal<boolean>;
-    private elementRef;
-    ngAfterContentInit(): void;
-    private checkContentProjection;
+    private leadingIcons;
+    private leadingAvatars;
+    private secondaryLines;
+    private secondaryTexts;
+    private trailing;
+    protected hasLeadingContent: _angular_core.Signal<boolean>;
+    protected hasTrailingContent: _angular_core.Signal<boolean>;
     hasSecondaryText: _angular_core.Signal<boolean>;
     hasThirdText: _angular_core.Signal<boolean>;
     onClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListItemComponent, "tn-list-item", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["[tnListIcon], [tnListAvatar]", "[tnListItemTitle], [tnListItemPrimary]", "*", "[tnListItemLine], [tnListItemSecondary]", "[tnListItemTrailing]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListItemComponent, "tn-list-item", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, ["leadingIcons", "leadingAvatars", "secondaryLines", "secondaryTexts", "trailing"], ["[tnListIcon], [tnListAvatar]", "[tnListItemTitle], [tnListItemPrimary]", "*", "[tnListItemLine], [tnListItemSecondary]", "[tnListItemTrailing]"], true, never>;
 }
 
 declare class TnListSubheaderComponent {
@@ -5752,30 +5797,66 @@ declare class TnListSubheaderComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListSubheaderComponent, "tn-list-subheader", never, { "inset": { "alias": "inset"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Leading icon of a list row.
+ *
+ * Requires importing `TnListIconDirective`, or the leading slot never renders.
+ */
 declare class TnListIconDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListIconDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListIconDirective, "[tnListIcon]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Leading avatar of a list row.
+ *
+ * Requires importing `TnListAvatarDirective`, or the leading slot never renders.
+ */
 declare class TnListAvatarDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListAvatarDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListAvatarDirective, "[tnListAvatar]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Primary text of a list row. Projects whether or not this directive is
+ * imported — the primary slot is ungated — but import it for the styling.
+ */
 declare class TnListItemTitleDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemTitleDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemTitleDirective, "[tnListItemTitle]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Secondary line of a list row. Two or more make the row three-line.
+ *
+ * Requires importing `TnListItemLineDirective`, or the secondary slot never
+ * renders and the row is not marked as multi-line.
+ */
 declare class TnListItemLineDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemLineDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemLineDirective, "[tnListItemLine]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Primary text of a list row. Projects whether or not this directive is
+ * imported — the primary slot is ungated — but import it for the styling.
+ */
 declare class TnListItemPrimaryDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemPrimaryDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemPrimaryDirective, "[tnListItemPrimary]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Secondary text of a list row.
+ *
+ * Requires importing `TnListItemSecondaryDirective`, or the secondary slot
+ * never renders and the row is not marked as multi-line.
+ */
 declare class TnListItemSecondaryDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemSecondaryDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemSecondaryDirective, "[tnListItemSecondary]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Trailing content of a list row — a control, a badge, a chevron.
+ *
+ * Requires importing `TnListItemTrailingDirective`, or the trailing slot never
+ * renders.
+ */
 declare class TnListItemTrailingDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemTrailingDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemTrailingDirective, "[tnListItemTrailing]", never, {}, {}, never, never, true, never>;