@truenas/ui-components 0.3.1 → 0.3.2

package/fesm2022/truenas-ui-components.mjs

@@ -7565,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" }] : []));
@@ -16355,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, 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, 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