@truenas/ui-components 0.3.12 → 0.3.13

package/fesm2022/truenas-ui-components.mjs

@@ -4199,6 +4199,262 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * A minimal file-selection form control. Renders a styled "Choose File" button
+ * that opens the native file dialog and exposes the picked `File`(s) both as a
+ * `(change)` output and as the value of an Angular form control.
+ *
+ * The selected file name(s) are shown next to the button (toggle with
+ * `showFileName`). Use inside a `<tn-form-field>` to get a label, required
+ * asterisk and help tooltip.
+ *
+ * Like every native file input, the browser forbids programmatically setting
+ * the chosen files for security reasons. Writing a non-empty value via a form
+ * control therefore only updates the displayed name; writing `null` (or an empty
+ * array) clears the control. User selection is the only way to populate real
+ * `File` objects.
+ *
+ * @example
+ * ```html
+ * <tn-form-field label="Update File" [required]="true" tooltip="Upload a .tar file">
+ *   <tn-file-input accept=".tar" formControlName="update" (change)="onFile($event)" />
+ * </tn-form-field>
+ * ```
+ */
+class TnFileInputComponent {
+    fileInputEl = viewChild.required('fileInput');
+    /** Label rendered inside the trigger button. */
+    buttonLabel = input('Choose File', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
+    /**
+     * Native `accept` attribute forwarded to the file input — a comma-separated
+     * list of extensions and/or MIME types (e.g. `".tar,.txt"`, `"image/*"`).
+     */
+    accept = input(undefined, ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    /** Allow selecting more than one file. The value becomes a `File[]`. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Whether to render the selected file name(s) beside the button. */
+    showFileName = input(true, ...(ngDevMode ? [{ debugName: "showFileName" }] : []));
+    /** Text shown beside the button when no file is selected. */
+    noFileText = input('No file chosen', ...(ngDevMode ? [{ debugName: "noFileText" }] : []));
+    /**
+     * Accessible label for the trigger button, forwarded to `tn-button`. Set this
+     * when the visible "Choose File" text alone doesn't convey what is being
+     * uploaded — e.g. pass the field label so a screen reader announces
+     * "Update File" rather than just "Choose File". (`tn-form-field`'s `<label>`
+     * is not programmatically associated with the projected control.)
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Semantic test-id base. Rendered under whichever attribute name is configured
+     * via `TN_TEST_ATTR` (default `data-testid`).
+     */
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /**
+     * Emitted whenever the selection changes. `null` when the input is cleared.
+     * Named `selectionChange` (not `change`) to avoid colliding with the native
+     * `change` event bubbling from the inner file input.
+     */
+    selectionChange = output();
+    // Selected files, kept for display and for the form value.
+    selectedFiles = signal([], ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    fileNames = computed(() => this.selectedFiles().map(file => file.name).join(', '), ...(ngDevMode ? [{ debugName: "fileNames" }] : []));
+    hasFiles = computed(() => this.selectedFiles().length > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : []));
+    onChange = (_value) => { };
+    onTouched = () => { };
+    // ControlValueAccessor
+    writeValue(value) {
+        // Native file inputs cannot be populated programmatically; we only mirror
+        // the value for display and treat null/empty as a clear of the control.
+        if (value == null || (Array.isArray(value) && value.length === 0)) {
+            this.selectedFiles.set([]);
+            this.fileInputEl().nativeElement.value = '';
+        }
+        else {
+            this.selectedFiles.set(Array.isArray(value) ? value : [value]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    openFileDialog() {
+        if (this.isDisabled()) {
+            return;
+        }
+        // Clear the native value first so re-picking the same file still fires
+        // `change` (browsers suppress it when the selection is identical).
+        this.fileInputEl().nativeElement.value = '';
+        this.fileInputEl().nativeElement.click();
+    }
+    /** Marks the control as touched when focus leaves it (e.g. for validation). */
+    onBlur() {
+        this.onTouched();
+    }
+    onFilesSelected(event) {
+        const target = event.target;
+        const files = target.files ? Array.from(target.files) : [];
+        this.selectedFiles.set(files);
+        const value = this.toValue(files);
+        this.onChange(value);
+        this.onTouched();
+        this.selectionChange.emit(value);
+    }
+    toValue(files) {
+        if (files.length === 0) {
+            return null;
+        }
+        return this.multiple() ? files : files[0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFileInputComponent, isStandalone: true, selector: "tn-file-input", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showFileName: { classPropertyName: "showFileName", publicName: "showFileName", isSignal: true, isRequired: false, transformFunction: null }, noFileText: { classPropertyName: "noFileText", publicName: "noFileText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "tn-file-input" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TnFileInputComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-file-input__container\" tnTestIdType=\"file-input\" [tnTestId]=\"testId()\" (focusout)=\"onBlur()\">\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"tn-file-input__native\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFilesSelected($event)\">\n\n  <tn-button\n    class=\"tn-file-input__button\"\n    color=\"default\"\n    [label]=\"buttonLabel()\"\n    [disabled]=\"isDisabled()\"\n    [ariaLabel]=\"ariaLabel()\"\n    (onClick)=\"openFileDialog()\" />\n\n  @if (showFileName()) {\n    <span class=\"tn-file-input__filename\" [class.tn-file-input__filename--empty]=\"!hasFiles()\">\n      {{ hasFiles() ? fileNames() : noFileText() }}\n    </span>\n  }\n\n  <!--\n    Always-present live region so screen readers are told what was picked even\n    when the visible file name is suppressed (showFileName=false).\n  -->\n  <span class=\"tn-file-input__announcer\" aria-live=\"polite\">\n    {{ hasFiles() ? fileNames() : '' }}\n  </span>\n</div>\n", styles: [":host{display:inline-block}.tn-file-input__container{display:inline-flex;align-items:center;gap:12px}.tn-file-input__native,.tn-file-input__announcer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tn-file-input__button{flex-shrink:0}.tn-file-input__filename{font-size:14px;color:var(--tn-fg1);max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-file-input__filename--empty{color:var(--tn-fg2)}\n"], dependencies: [{ kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-file-input', standalone: true, imports: [TnButtonComponent, TnTestIdDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TnFileInputComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'tn-file-input'
+                    }, template: "<div class=\"tn-file-input__container\" tnTestIdType=\"file-input\" [tnTestId]=\"testId()\" (focusout)=\"onBlur()\">\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"tn-file-input__native\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFilesSelected($event)\">\n\n  <tn-button\n    class=\"tn-file-input__button\"\n    color=\"default\"\n    [label]=\"buttonLabel()\"\n    [disabled]=\"isDisabled()\"\n    [ariaLabel]=\"ariaLabel()\"\n    (onClick)=\"openFileDialog()\" />\n\n  @if (showFileName()) {\n    <span class=\"tn-file-input__filename\" [class.tn-file-input__filename--empty]=\"!hasFiles()\">\n      {{ hasFiles() ? fileNames() : noFileText() }}\n    </span>\n  }\n\n  <!--\n    Always-present live region so screen readers are told what was picked even\n    when the visible file name is suppressed (showFileName=false).\n  -->\n  <span class=\"tn-file-input__announcer\" aria-live=\"polite\">\n    {{ hasFiles() ? fileNames() : '' }}\n  </span>\n</div>\n", styles: [":host{display:inline-block}.tn-file-input__container{display:inline-flex;align-items:center;gap:12px}.tn-file-input__native,.tn-file-input__announcer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tn-file-input__button{flex-shrink:0}.tn-file-input__filename{font-size:14px;color:var(--tn-fg1);max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-file-input__filename--empty{color:var(--tn-fg2)}\n"] }]
+        }], propDecorators: { fileInputEl: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileName", required: false }] }], noFileText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noFileText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+/**
+ * Harness for interacting with `tn-file-input` in tests.
+ *
+ * @example
+ * ```typescript
+ * const fileInput = await loader.getHarness(TnFileInputHarness.with({ testId: 'update' }));
+ * expect(await fileInput.getButtonText()).toBe('Choose File');
+ * expect(await fileInput.hasFile()).toBe(false);
+ * expect(await fileInput.getFileName()).toBe('No file chosen');
+ * ```
+ */
+class TnFileInputHarness extends ComponentHarness {
+    /** The selector for the host element of a `TnFileInputComponent` instance. */
+    static hostSelector = 'tn-file-input';
+    // The trigger is a `tn-button`; target its rendered `<button>` element.
+    _button = this.locatorFor('.tn-file-input__button .storybook-button');
+    _native = this.locatorFor('input[type="file"]');
+    _filename = this.locatorForOptional('.tn-file-input__filename');
+    /**
+     * Gets a `HarnessPredicate` to search for a file input with specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * const fileInput = await loader.getHarness(TnFileInputHarness.with({ testId: 'update' }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnFileInputHarness, options)
+            .addOption('buttonText', options.buttonText, (harness, text) => HarnessPredicate.stringMatches(harness.getButtonText(), text))
+            .addOption('testId', options.testId, async (harness, testId) => (await harness.getTestId()) === testId);
+    }
+    /**
+     * Gets the trigger button's text.
+     *
+     * @returns Promise resolving to the button label.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.getButtonText()).toBe('Choose File');
+     * ```
+     */
+    async getButtonText() {
+        return (await (await this._button()).text()).trim();
+    }
+    /**
+     * Gets the displayed file-name text (or the empty-state text).
+     *
+     * @returns Promise resolving to the text, or null when the name is hidden.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.getFileName()).toBe('No file chosen');
+     * ```
+     */
+    async getFileName() {
+        const filename = await this._filename();
+        return filename ? (await filename.text()).trim() : null;
+    }
+    /**
+     * Whether a file is currently selected. A native file input reports an empty
+     * `value` until the user picks a file, so this reflects real user selection.
+     *
+     * @returns Promise resolving to true when a file has been chosen.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.hasFile()).toBe(false);
+     * ```
+     */
+    async hasFile() {
+        const native = await this._native();
+        const value = (await native.getProperty('value')) ?? '';
+        return value !== '';
+    }
+    /**
+     * Whether the control is disabled.
+     *
+     * @returns Promise resolving to true if the button is disabled.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.isDisabled()).toBe(true);
+     * ```
+     */
+    async isDisabled() {
+        const button = await this._button();
+        return (await button.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Opens the native file dialog by clicking the trigger button. The browser
+     * does not let tests pick a real file, so this is mainly useful for asserting
+     * click handling and focus behaviour.
+     *
+     * @example
+     * ```typescript
+     * await fileInput.open();
+     * ```
+     */
+    async open() {
+        await (await this._button()).click();
+    }
+    /**
+     * Gets the test-id attribute value from the container.
+     *
+     * @returns Promise resolving to the test-id, or null when unset.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.getTestId()).toBe('file-input-update');
+     * ```
+     */
+    async getTestId() {
+        const container = await this.locatorFor('.tn-file-input__container')();
+        return (await container.getAttribute('data-testid')) ?? (await container.getAttribute('data-test'));
+    }
+}
+
 /**
  * Strips lightweight label markup (**bold**, *italic*, `code`), returning
  * plain text for attribute contexts such as aria-label and title.
@@ -17345,5 +17601,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map