@truenas/ui-components 0.1.33 → 0.1.35

package/fesm2022/truenas-ui-components.mjs

@@ -3242,6 +3242,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" [for]=\"id\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [checked]=\"checked\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.data-testid]=\"testId()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\">{{ label() }}</span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      aria-live=\"polite\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-red, #dc3545)}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"] }]
         }], propDecorators: { radioEl: [{ type: i0.ViewChild, args: ['radioEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
+/**
+ * Harness for interacting with `tn-slide-toggle` in tests.
+ *
+ * @example
+ * ```typescript
+ * const toggle = await loader.getHarness(
+ *   TnSlideToggleHarness.with({ label: 'Enable notifications' })
+ * );
+ * await toggle.toggle();
+ * expect(await toggle.isChecked()).toBe(true);
+ * ```
+ */
+class TnSlideToggleHarness extends ComponentHarness {
+    static hostSelector = 'tn-slide-toggle';
+    _input = this.locatorFor('.tn-slide-toggle__input');
+    _label = this.locatorForOptional('.tn-slide-toggle__label-text');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a slide toggle
+     * with specific attributes.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnSlideToggleHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))
+            .addOption('testId', options.testId, async (harness, testId) => {
+            return (await harness.getTestId()) === testId;
+        });
+    }
+    /**
+     * Gets the label text of the slide toggle.
+     *
+     * @example
+     * ```typescript
+     * expect(await toggle.getLabelText()).toBe('Enable notifications');
+     * ```
+     */
+    async getLabelText() {
+        const label = await this._label();
+        return label ? (await label.text()).trim() : '';
+    }
+    /**
+     * Checks whether the slide toggle is currently checked.
+     *
+     * @example
+     * ```typescript
+     * expect(await toggle.isChecked()).toBe(false);
+     * ```
+     */
+    async isChecked() {
+        const input = await this._input();
+        return (await input.getProperty('checked')) ?? false;
+    }
+    /**
+     * Checks whether the slide toggle is disabled.
+     */
+    async isDisabled() {
+        const input = await this._input();
+        return (await input.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Checks whether the slide toggle is required.
+     */
+    async isRequired() {
+        const input = await this._input();
+        return (await input.getProperty('required')) ?? false;
+    }
+    /**
+     * Gets the test ID attribute value.
+     */
+    async getTestId() {
+        const root = await this.locatorFor('.tn-slide-toggle')();
+        return root.getAttribute('data-testid');
+    }
+    /**
+     * Toggles the slide toggle by clicking the input element.
+     *
+     * @example
+     * ```typescript
+     * await toggle.toggle();
+     * ```
+     */
+    async toggle() {
+        const input = await this._input();
+        await input.click();
+    }
+    /**
+     * Checks the slide toggle. No-op if already checked.
+     */
+    async check() {
+        if (!(await this.isChecked())) {
+            await this.toggle();
+        }
+    }
+    /**
+     * Unchecks the slide toggle. No-op if already unchecked.
+     */
+    async uncheck() {
+        if (await this.isChecked()) {
+            await this.toggle();
+        }
+    }
+}
+
 class TnTabComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -10715,7 +10817,7 @@ class TnToastComponent {
     message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : []));
     action = signal(null, ...(ngDevMode ? [{ debugName: "action" }] : []));
     type = signal(TnToastType.Info, ...(ngDevMode ? [{ debugName: "type" }] : []));
-    position = signal(TnToastPosition.Bottom, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    position = signal(TnToastPosition.Top, ...(ngDevMode ? [{ debugName: "position" }] : []));
     visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     icon = computed(() => TOAST_ICONS[this.type()], ...(ngDevMode ? [{ debugName: "icon" }] : []));
     onAction = () => { };
@@ -10806,7 +10908,7 @@ class TnToastService {
         }
         const duration = resolvedConfig.duration ?? 4000;
         const type = resolvedConfig.type ?? TnToastType.Info;
-        const position = resolvedConfig.position ?? TnToastPosition.Bottom;
+        const position = resolvedConfig.position ?? TnToastPosition.Top;
         // Create ref
         const ref = new TnToastRef();
         this.activeRef = ref;
@@ -11545,5 +11647,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, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, 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, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, 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, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map