@truenas/ui-components 0.3.0 → 0.3.2

package/fesm2022/truenas-ui-components.mjs

@@ -4207,6 +4207,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             args: [{ selector: 'tn-chip', standalone: true, imports: [CommonModule, A11yModule, TnIconComponent, TnTestIdDirective, LabelMarkupPipe, LabelTextPipe], template: "<div\n  #chipEl\n  role=\"button\"\n  tnTestIdType=\"chip\"\n  [ngClass]=\"classes()\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-label]=\"label() | tnLabelText\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  @if (icon()) {\n    <tn-icon class=\"tn-chip__icon\" size=\"sm\" [name]=\"icon()!\" />\n  }\n  <span class=\"tn-chip__label\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  @if (closable()) {\n    <button\n      type=\"button\"\n      class=\"tn-chip__close\"\n      [attr.aria-label]=\"'Remove ' + (label() | tnLabelText)\"\n      [disabled]=\"disabled()\"\n      (click)=\"handleClose($event)\"\n    >\n      <span class=\"tn-chip__close-icon\">\u00D7</span>\n    </button>\n  }\n</div>", styles: [".tn-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:16px;font-family:var(--tn-font-family-body);font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;transition:all .2s ease-in-out;border:1px solid transparent;outline:none;-webkit-user-select:none;user-select:none}.tn-chip:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-chip:hover:not(.tn-chip--disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.tn-chip--primary{background-color:var(--tn-primary);color:var(--tn-primary-txt);border-color:var(--tn-primary)}.tn-chip--primary:hover:not(.tn-chip--disabled){background-color:var(--tn-blue);border-color:var(--tn-blue)}.tn-chip--secondary{background-color:var(--tn-alt-bg1);color:var(--tn-alt-fg2);border-color:var(--tn-alt-bg2)}.tn-chip--secondary:hover:not(.tn-chip--disabled){background-color:var(--tn-alt-bg2);border-color:var(--tn-accent)}.tn-chip--accent{background-color:var(--tn-accent);color:var(--tn-fg1);border-color:var(--tn-accent)}.tn-chip--accent:hover:not(.tn-chip--disabled){background-color:var(--tn-alt-bg2);border-color:var(--tn-alt-bg2)}.tn-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tn-chip--closable{padding-right:8px}.tn-chip__icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:12px}.tn-chip__label ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-chip__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.tn-chip__close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin:0;border:none;border-radius:50%;background-color:#fff3;color:inherit;cursor:pointer;transition:background-color .2s ease-in-out;outline:none}.tn-chip__close:hover:not(:disabled){background-color:#ffffff4d}.tn-chip__close:focus-visible{outline:1px solid currentColor;outline-offset:1px}.tn-chip__close:disabled{cursor:not-allowed;opacity:.5}.tn-chip__close-icon{font-size:14px;font-weight:700;line-height:1}.tn-dark .tn-chip--secondary .tn-chip__close{background-color:#0003}.tn-dark .tn-chip--secondary .tn-chip__close:hover:not(:disabled){background-color:#0000004d}.high-contrast .tn-chip{border-width:2px}.high-contrast .tn-chip:focus-visible{outline-width:3px}\n"] }]
         }], propDecorators: { chipEl: [{ type: i0.ViewChild, args: ['chipEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
+/**
+ * Harness for interacting with tn-chip in tests.
+ * Provides methods for reading chip state and simulating user interactions
+ * (selecting the chip and dismissing a closable chip).
+ *
+ * @example
+ * ```typescript
+ * // Find a chip by label and click it
+ * const chip = await loader.getHarness(TnChipHarness.with({ label: 'Active' }));
+ * await chip.click();
+ *
+ * // Dismiss a closable chip
+ * const filter = await loader.getHarness(TnChipHarness.with({ label: 'Has SSH Access' }));
+ * if (await filter.isClosable()) {
+ *   await filter.close();
+ * }
+ * ```
+ */
+class TnChipHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnChipComponent` instance.
+     */
+    static hostSelector = 'tn-chip';
+    _chip = this.locatorFor('.tn-chip');
+    _label = this.locatorFor('.tn-chip__label');
+    _icon = this.locatorForOptional('.tn-chip__icon');
+    _closeButton = this.locatorForOptional('.tn-chip__close');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a chip
+     * with specific attributes.
+     *
+     * @param options Options for filtering which chip instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find chip by exact label
+     * const chip = await loader.getHarness(TnChipHarness.with({ label: 'Production' }));
+     *
+     * // Find chip with regex pattern
+     * const chip = await loader.getHarness(TnChipHarness.with({ label: /access/i }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnChipHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+    }
+    /**
+     * Gets the chip's label text.
+     *
+     * @returns Promise resolving to the chip's text content.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.getLabel()).toBe('Active');
+     * ```
+     */
+    async getLabel() {
+        const label = await this._label();
+        return (await label.text()).trim();
+    }
+    /**
+     * Gets the chip's color variant (`primary`, `secondary`, or `accent`).
+     *
+     * @returns Promise resolving to the chip's color.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.getColor()).toBe('primary');
+     * ```
+     */
+    async getColor() {
+        const chip = await this._chip();
+        const classAttr = (await chip.getAttribute('class')) ?? '';
+        const match = classAttr.match(/tn-chip--(primary|secondary|accent)/);
+        return match?.[1] ?? 'primary';
+    }
+    /**
+     * Checks whether the chip is disabled.
+     *
+     * @returns Promise resolving to true if the chip is disabled.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.isDisabled()).toBe(false);
+     * ```
+     */
+    async isDisabled() {
+        const chip = await this._chip();
+        return (await chip.getAttribute('aria-disabled')) === 'true';
+    }
+    /**
+     * Checks whether the chip renders a close (dismiss) button.
+     *
+     * @returns Promise resolving to true if the chip is closable.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.isClosable()).toBe(true);
+     * ```
+     */
+    async isClosable() {
+        return (await this._closeButton()) !== null;
+    }
+    /**
+     * Checks whether the chip renders a leading icon.
+     *
+     * @returns Promise resolving to true if the chip has an icon.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.hasIcon()).toBe(true);
+     * ```
+     */
+    async hasIcon() {
+        return (await this._icon()) !== null;
+    }
+    /**
+     * Clicks the chip body, triggering its `onClick` output.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness.with({ label: 'Active' }));
+     * await chip.click();
+     * ```
+     */
+    async click() {
+        const chip = await this._chip();
+        return chip.click();
+    }
+    /**
+     * Clicks the chip's close button, triggering its `onClose` output.
+     * Throws if the chip is not closable.
+     *
+     * @returns Promise that resolves when the close action is complete.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness.with({ label: 'Has SSH Access' }));
+     * await chip.close();
+     * ```
+     */
+    async close() {
+        const closeButton = await this._closeButton();
+        if (!closeButton) {
+            throw new Error('Cannot close a chip that is not closable (no close button rendered).');
+        }
+        return closeButton.click();
+    }
+}
+
 class TnCardHeaderDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnCardHeaderDirective, isStandalone: true, selector: "[tnCardHeader]", ngImport: i0 });
@@ -7407,6 +7565,90 @@ class TnFormFieldHarness extends ComponentHarness {
     }
 }
 
+/** Per-instance counter for generating unique heading ids. */
+let nextUniqueId$1 = 0;
+/**
+ * Semantic grouping for a related set of form fields. Renders a native
+ * `<fieldset>` with an optional `<legend>` heading and help tooltip, and
+ * projects its content unchanged — it adds structure and a11y semantics, not
+ * layout for the fields themselves (compose `tn-form-field` inside it for that).
+ */
+class TnFormSectionComponent {
+    /**
+     * Heading rendered in the `<legend>`. Supports lightweight label markup
+     * (**bold**, *italic*, `code`); leave empty to omit the legend entirely.
+     */
+    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    /** Optional help tooltip shown via an icon next to the heading. */
+    tooltip = input('', ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+    /** Placement of the tooltip relative to its help icon. */
+    tooltipPosition = input('above', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
+    /** Test id applied to the host for harness/e2e selection. */
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /**
+     * Stable id linking the fieldset to its heading via `aria-labelledby`. This
+     * names the group from the heading text alone — without it the legend's
+     * accessible name would also absorb the tooltip button's `aria-label`,
+     * announcing the whole tooltip sentence on every control in the group.
+     */
+    headingId = `tn-form-section-${nextUniqueId$1++}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFormSectionComponent, isStandalone: true, selector: "tn-form-section", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<fieldset\n  class=\"tn-form-section\"\n  tnTestIdType=\"form-section\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-labelledby]=\"heading() ? headingId : null\">\n  @if (heading()) {\n    <!--\n      The <legend> must be a *direct* child of the <fieldset> to act as the\n      group's caption, so the heading text and tooltip live inside it (laid out\n      as a flex row) rather than in a wrapper div. The fieldset's accessible\n      name is pinned to the heading span via aria-labelledby so the tooltip\n      button's aria-label does not leak into the group name.\n    -->\n    <legend class=\"tn-form-section__header\">\n      <span\n        class=\"tn-form-section__legend\"\n        [id]=\"headingId\"\n        [innerHTML]=\"heading() | tnLabelMarkup\"\n      ></span>\n\n      @if (tooltip()) {\n        <button\n          type=\"button\"\n          class=\"tn-form-section__tooltip\"\n          [attr.aria-label]=\"tooltip()\"\n          [tnTooltip]=\"tooltip()\"\n          [tnTooltipPosition]=\"tooltipPosition()\">\n          <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n        </button>\n      }\n    </legend>\n  }\n\n  <div class=\"tn-form-section__body\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [".tn-form-section{border:none;margin:0;padding:0;min-width:0}.tn-form-section__header{display:flex;align-items:center;gap:.5rem;width:100%;padding:0;margin:0 0 1.25rem}.tn-form-section__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tn-form-section__legend{color:var(--tn-fg1, #333);font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:.9375rem;font-weight:600;line-height:1.4}.tn-form-section__legend ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-form-section__tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-section__tooltip:hover,.tn-form-section__tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-section__tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTooltipDirective, selector: "[tnTooltip]", inputs: ["tnTooltip", "tnTooltipPosition", "tnTooltipDisabled", "tnTooltipShowDelay", "tnTooltipHideDelay", "tnTooltipClass"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: LabelMarkupPipe, name: "tnLabelMarkup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-form-section', standalone: true, imports: [TnIconComponent, TnTooltipDirective, TnTestIdDirective, LabelMarkupPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset\n  class=\"tn-form-section\"\n  tnTestIdType=\"form-section\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-labelledby]=\"heading() ? headingId : null\">\n  @if (heading()) {\n    <!--\n      The <legend> must be a *direct* child of the <fieldset> to act as the\n      group's caption, so the heading text and tooltip live inside it (laid out\n      as a flex row) rather than in a wrapper div. The fieldset's accessible\n      name is pinned to the heading span via aria-labelledby so the tooltip\n      button's aria-label does not leak into the group name.\n    -->\n    <legend class=\"tn-form-section__header\">\n      <span\n        class=\"tn-form-section__legend\"\n        [id]=\"headingId\"\n        [innerHTML]=\"heading() | tnLabelMarkup\"\n      ></span>\n\n      @if (tooltip()) {\n        <button\n          type=\"button\"\n          class=\"tn-form-section__tooltip\"\n          [attr.aria-label]=\"tooltip()\"\n          [tnTooltip]=\"tooltip()\"\n          [tnTooltipPosition]=\"tooltipPosition()\">\n          <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n        </button>\n      }\n    </legend>\n  }\n\n  <div class=\"tn-form-section__body\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [".tn-form-section{border:none;margin:0;padding:0;min-width:0}.tn-form-section__header{display:flex;align-items:center;gap:.5rem;width:100%;padding:0;margin:0 0 1.25rem}.tn-form-section__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tn-form-section__legend{color:var(--tn-fg1, #333);font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:.9375rem;font-weight:600;line-height:1.4}.tn-form-section__legend ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-form-section__tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-section__tooltip:hover,.tn-form-section__tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-section__tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
+
+/**
+ * Harness for interacting with `tn-form-section` in tests.
+ *
+ * Scope note: this covers the section's own surface (heading text, tooltip
+ * presence, projected text) only. Filling and reading the projected form
+ * controls is the consuming app's concern — drive those through their own
+ * control harnesses rather than this one.
+ *
+ * @example
+ * ```typescript
+ * const section = await loader.getHarness(
+ *   TnFormSectionHarness.with({ heading: 'Network Settings' })
+ * );
+ * expect(await section.hasTooltip()).toBe(true);
+ * ```
+ */
+class TnFormSectionHarness extends ComponentHarness {
+    /** The selector for the host element of a `TnFormSectionComponent` instance. */
+    static hostSelector = 'tn-form-section';
+    /**
+     * Gets a `HarnessPredicate` to search for a form section by heading text.
+     *
+     * @param options Criteria for filtering which section instances match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnFormSectionHarness, options)
+            .addOption('heading', options.heading, (harness, heading) => HarnessPredicate.stringMatches(harness.getHeadingText(), heading));
+    }
+    legend = this.locatorForOptional('.tn-form-section__legend');
+    tooltipButton = this.locatorForOptional('.tn-form-section__tooltip');
+    /**
+     * Heading text rendered in the legend (label markup rendered to plain text),
+     * or '' when no heading is set.
+     */
+    async getHeadingText() {
+        const legend = await this.legend();
+        return legend ? (await legend.text()).trim() : '';
+    }
+    /** Whether the help tooltip icon is rendered. */
+    async hasTooltip() {
+        return (await this.tooltipButton()) !== null;
+    }
+    /** Full text content of the section (heading + projected content), trimmed. */
+    async getText() {
+        return (await (await this.host()).text()).trim();
+    }
+}
+
 class TnSelectComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionGroups = input([], ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
@@ -16197,5 +16439,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, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, 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, 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, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, 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 };
 //# sourceMappingURL=truenas-ui-components.mjs.map