@truenas/ui-components 0.1.39 → 0.1.41

package/fesm2022/truenas-ui-components.mjs

@@ -8071,6 +8071,207 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<div class=\"tn-date-input-container\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:16px}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 16px;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], monthRef: [{ type: i0.ViewChild, args: ['monthInput', { isSignal: true }] }], dayRef: [{ type: i0.ViewChild, args: ['dayInput', { isSignal: true }] }], yearRef: [{ type: i0.ViewChild, args: ['yearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TnCalendarComponent), { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
 
+/**
+ * Formats a Date into zero-padded month, day, and year strings.
+ *
+ * @param date The date to format.
+ * @returns An object with `month` (MM), `day` (DD), and `year` (YYYY) strings.
+ */
+function formatDateParts(date) {
+    return {
+        month: (date.getMonth() + 1).toString().padStart(2, '0'),
+        day: date.getDate().toString().padStart(2, '0'),
+        year: date.getFullYear().toString(),
+    };
+}
+/**
+ * Reads the current value from an input element.
+ *
+ * @param el The test element to read from.
+ * @returns The input's value, or an empty string if unset.
+ */
+async function getInputValue(el) {
+    return (await el.getProperty('value')) || '';
+}
+/**
+ * Clears an input element and types a new value, then blurs to trigger validation.
+ *
+ * @param el The test element to write to.
+ * @param value The value to type. Pass empty string to clear only.
+ */
+async function setInputValue(el, value) {
+    await el.clear();
+    if (value) {
+        await el.sendKeys(value);
+    }
+    await el.blur();
+}
+const MONTHS = [
+    'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN',
+    'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC',
+];
+/**
+ * Navigates the calendar overlay to the target month/year, then clicks the day cell.
+ * Assumes the calendar popup is already open.
+ *
+ * @param rootLocator The document root locator factory (for finding overlay elements).
+ * @param date The target date to select.
+ */
+async function selectCalendarDate(rootLocator, date) {
+    await navigateCalendarTo(rootLocator, date);
+    const dayStr = date.getDate().toString();
+    const cells = await rootLocator.locatorForAll('.tn-calendar-body-cell:not([disabled])')();
+    for (const cell of cells) {
+        if ((await cell.text()).trim() === dayStr) {
+            await cell.click();
+            return;
+        }
+    }
+    throw new Error(`Could not find enabled calendar cell for day ${dayStr}`);
+}
+/**
+ * Navigates the calendar to show the month/year of the target date by
+ * clicking previous/next buttons as needed.
+ */
+async function navigateCalendarTo(rootLocator, date) {
+    const targetLabel = `${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
+    // Safety limit to prevent infinite loops
+    for (let i = 0; i < 120; i++) {
+        const periodButton = await rootLocator.locatorFor('.tn-calendar-period-button')();
+        const currentLabel = (await periodButton.text()).trim();
+        if (currentLabel === targetLabel) {
+            return;
+        }
+        const currentDate = parseCalendarLabel(currentLabel);
+        const targetTime = date.getFullYear() * 12 + date.getMonth();
+        const currentTime = currentDate.year * 12 + currentDate.month;
+        const navSelector = targetTime > currentTime
+            ? '.tn-calendar-next-button'
+            : '.tn-calendar-previous-button';
+        const navButton = await rootLocator.locatorFor(navSelector)();
+        await navButton.click();
+    }
+    throw new Error(`Could not navigate calendar to ${targetLabel}`);
+}
+function parseCalendarLabel(label) {
+    const parts = label.split(' ');
+    const monthIndex = MONTHS.indexOf(parts[0]);
+    const year = parseInt(parts[1], 10);
+    return { year, month: monthIndex >= 0 ? monthIndex : 0 };
+}
+
+/**
+ * Harness for interacting with `tn-date-input` in tests.
+ * Provides methods for getting/setting the date value, opening the calendar,
+ * and querying disabled state.
+ *
+ * The calendar popup is portaled to the CDK overlay, so use
+ * `TestbedHarnessEnvironment.documentRootLoader(fixture)` if you need to
+ * interact with the calendar cells directly.
+ *
+ * @example
+ * ```typescript
+ * const dateInput = await loader.getHarness(TnDateInputHarness);
+ * await dateInput.setValue(new Date(2026, 3, 15));
+ * expect(await dateInput.getDisplayText()).toBe('04/15/2026');
+ *
+ * await dateInput.openCalendar();
+ * expect(await dateInput.isCalendarOpen()).toBe(true);
+ * ```
+ */
+class TnDateInputHarness extends ComponentHarness {
+    static hostSelector = 'tn-date-input';
+    _monthInput = this.locatorFor('.tn-date-segment-month');
+    _dayInput = this.locatorFor('.tn-date-segment-day');
+    _yearInput = this.locatorFor('.tn-date-segment-year');
+    _toggle = this.locatorFor('.tn-date-input-toggle');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a date input
+     * with specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnDateInputHarness, options);
+    }
+    /**
+     * Gets the displayed date text as "MM/DD/YYYY".
+     * Returns placeholder segments if no date is set.
+     *
+     * @returns Promise resolving to the formatted display string.
+     */
+    async getDisplayText() {
+        const month = await getInputValue(await this._monthInput());
+        const day = await getInputValue(await this._dayInput());
+        const year = await getInputValue(await this._yearInput());
+        return `${month || 'MM'}/${day || 'DD'}/${year || 'YYYY'}`;
+    }
+    /**
+     * Sets the date by typing into the segment inputs.
+     *
+     * @param date The date to set.
+     */
+    async setValue(date) {
+        const { month, day, year } = formatDateParts(date);
+        await setInputValue(await this._monthInput(), month);
+        await setInputValue(await this._dayInput(), day);
+        await setInputValue(await this._yearInput(), year);
+    }
+    /**
+     * Clears all date segments.
+     */
+    async clear() {
+        await setInputValue(await this._monthInput(), '');
+        await setInputValue(await this._dayInput(), '');
+        await setInputValue(await this._yearInput(), '');
+    }
+    /**
+     * Checks whether the input is disabled.
+     *
+     * @returns Promise resolving to true if the input is disabled.
+     */
+    async isDisabled() {
+        const month = await this._monthInput();
+        return (await month.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Opens the calendar popup by clicking the toggle button.
+     */
+    async openCalendar() {
+        const toggle = await this._toggle();
+        await toggle.click();
+    }
+    /**
+     * Whether the calendar popup is currently open.
+     *
+     * @returns Promise resolving to true if the calendar overlay is visible.
+     */
+    async isCalendarOpen() {
+        const overlay = await this.documentRootLocatorFactory().locatorForOptional('.tn-datepicker-overlay')();
+        return overlay !== null;
+    }
+    /**
+     * Selects a date via the calendar popup. Opens the calendar if not already
+     * open, navigates to the target month, and clicks the day cell.
+     *
+     * @param date The date to select.
+     *
+     * @example
+     * ```typescript
+     * const dateInput = await loader.getHarness(TnDateInputHarness);
+     * await dateInput.selectDate(new Date(2026, 3, 15));
+     * expect(await dateInput.getDisplayText()).toBe('04/15/2026');
+     * ```
+     */
+    async selectDate(date) {
+        if (!(await this.isCalendarOpen())) {
+            await this.openCalendar();
+        }
+        await selectCalendarDate(this.documentRootLocatorFactory(), date);
+    }
+}
+
 class TnDateRangeInputComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     placeholder = input('Select date range', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -8430,6 +8631,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<div class=\"tn-date-range-container\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"initialRange()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:16px}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 16px;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], startMonthRef: [{ type: i0.ViewChild, args: ['startMonthInput', { isSignal: true }] }], startDayRef: [{ type: i0.ViewChild, args: ['startDayInput', { isSignal: true }] }], startYearRef: [{ type: i0.ViewChild, args: ['startYearInput', { isSignal: true }] }], endMonthRef: [{ type: i0.ViewChild, args: ['endMonthInput', { isSignal: true }] }], endDayRef: [{ type: i0.ViewChild, args: ['endDayInput', { isSignal: true }] }], endYearRef: [{ type: i0.ViewChild, args: ['endYearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TnCalendarComponent), { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
 
+/**
+ * Harness for interacting with `tn-date-range-input` in tests.
+ * Provides methods for getting/setting the date range, opening the calendar,
+ * and querying disabled state.
+ *
+ * The calendar popup is portaled to the CDK overlay, so use
+ * `TestbedHarnessEnvironment.documentRootLoader(fixture)` if you need to
+ * interact with the calendar cells directly.
+ *
+ * @example
+ * ```typescript
+ * const rangeInput = await loader.getHarness(TnDateRangeInputHarness);
+ * await rangeInput.setStartDate(new Date(2026, 0, 1));
+ * await rangeInput.setEndDate(new Date(2026, 0, 31));
+ * expect(await rangeInput.getStartText()).toBe('01/01/2026');
+ * expect(await rangeInput.getEndText()).toBe('01/31/2026');
+ * ```
+ */
+class TnDateRangeInputHarness extends ComponentHarness {
+    static hostSelector = 'tn-date-range-input';
+    _startMonth = this.locatorFor('.tn-date-segment-group:first-of-type .tn-date-segment-month');
+    _startDay = this.locatorFor('.tn-date-segment-group:first-of-type .tn-date-segment-day');
+    _startYear = this.locatorFor('.tn-date-segment-group:first-of-type .tn-date-segment-year');
+    _endMonth = this.locatorFor('.tn-date-segment-group:last-of-type .tn-date-segment-month');
+    _endDay = this.locatorFor('.tn-date-segment-group:last-of-type .tn-date-segment-day');
+    _endYear = this.locatorFor('.tn-date-segment-group:last-of-type .tn-date-segment-year');
+    _toggle = this.locatorFor('.tn-date-range-toggle');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a date range input
+     * with specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnDateRangeInputHarness, options);
+    }
+    /**
+     * Gets the start date display text as "MM/DD/YYYY".
+     *
+     * @returns Promise resolving to the formatted start date string.
+     */
+    async getStartText() {
+        const month = await getInputValue(await this._startMonth());
+        const day = await getInputValue(await this._startDay());
+        const year = await getInputValue(await this._startYear());
+        return `${month || 'MM'}/${day || 'DD'}/${year || 'YYYY'}`;
+    }
+    /**
+     * Gets the end date display text as "MM/DD/YYYY".
+     *
+     * @returns Promise resolving to the formatted end date string.
+     */
+    async getEndText() {
+        const month = await getInputValue(await this._endMonth());
+        const day = await getInputValue(await this._endDay());
+        const year = await getInputValue(await this._endYear());
+        return `${month || 'MM'}/${day || 'DD'}/${year || 'YYYY'}`;
+    }
+    /**
+     * Sets the start date by typing into the segment inputs.
+     *
+     * @param date The start date to set.
+     */
+    async setStartDate(date) {
+        const { month, day, year } = formatDateParts(date);
+        await setInputValue(await this._startMonth(), month);
+        await setInputValue(await this._startDay(), day);
+        await setInputValue(await this._startYear(), year);
+    }
+    /**
+     * Sets the end date by typing into the segment inputs.
+     *
+     * @param date The end date to set.
+     */
+    async setEndDate(date) {
+        const { month, day, year } = formatDateParts(date);
+        await setInputValue(await this._endMonth(), month);
+        await setInputValue(await this._endDay(), day);
+        await setInputValue(await this._endYear(), year);
+    }
+    /**
+     * Clears both start and end date segments.
+     */
+    async clear() {
+        await setInputValue(await this._startMonth(), '');
+        await setInputValue(await this._startDay(), '');
+        await setInputValue(await this._startYear(), '');
+        await setInputValue(await this._endMonth(), '');
+        await setInputValue(await this._endDay(), '');
+        await setInputValue(await this._endYear(), '');
+    }
+    /**
+     * Checks whether the input is disabled.
+     *
+     * @returns Promise resolving to true if the input is disabled.
+     */
+    async isDisabled() {
+        const month = await this._startMonth();
+        return (await month.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Opens the calendar popup by clicking the toggle button.
+     */
+    async openCalendar() {
+        const toggle = await this._toggle();
+        await toggle.click();
+    }
+    /**
+     * Whether the calendar popup is currently open.
+     *
+     * @returns Promise resolving to true if the calendar overlay is visible.
+     */
+    async isCalendarOpen() {
+        const overlay = await this.documentRootLocatorFactory().locatorForOptional('.tn-datepicker-overlay')();
+        return overlay !== null;
+    }
+    /**
+     * Selects a date range via the calendar popup. Opens the calendar if not
+     * already open, navigates to each target month, and clicks the day cells.
+     *
+     * @param range An object with `start` and `end` dates.
+     *
+     * @example
+     * ```typescript
+     * const rangeInput = await loader.getHarness(TnDateRangeInputHarness);
+     * await rangeInput.selectRange({
+     *   start: new Date(2026, 0, 1),
+     *   end: new Date(2026, 0, 31),
+     * });
+     * expect(await rangeInput.getStartText()).toBe('01/01/2026');
+     * expect(await rangeInput.getEndText()).toBe('01/31/2026');
+     * ```
+     */
+    async selectRange(range) {
+        if (!(await this.isCalendarOpen())) {
+            await this.openCalendar();
+        }
+        const rootLocator = this.documentRootLocatorFactory();
+        await selectCalendarDate(rootLocator, range.start);
+        await selectCalendarDate(rootLocator, range.end);
+    }
+}
+
 class TnTimeInputComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     format = input('12h', ...(ngDevMode ? [{ debugName: "format" }] : []));
@@ -12099,5 +12444,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, TnButtonToggleGroupHarness, TnButtonToggleHarness, 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, 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, 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, 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, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, 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, 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, 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