@truenas/ui-components 0.1.38 → 0.1.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7478,10 +7478,13 @@ class TnMonthViewComponent {
|
|
|
7478
7478
|
return label;
|
|
7479
7479
|
}
|
|
7480
7480
|
trackByDate(index, cell) {
|
|
7481
|
-
|
|
7481
|
+
if (cell.value === 0) {
|
|
7482
|
+
return `empty-${index}`;
|
|
7483
|
+
}
|
|
7484
|
+
return `${cell.date.getFullYear()}-${cell.date.getMonth()}-${cell.date.getDate()}`;
|
|
7482
7485
|
}
|
|
7483
|
-
trackByRow(index
|
|
7484
|
-
return
|
|
7486
|
+
trackByRow(index) {
|
|
7487
|
+
return index;
|
|
7485
7488
|
}
|
|
7486
7489
|
onCellClicked(cell) {
|
|
7487
7490
|
if (cell.enabled && cell.value > 0) {
|
|
@@ -7489,11 +7492,11 @@ class TnMonthViewComponent {
|
|
|
7489
7492
|
}
|
|
7490
7493
|
}
|
|
7491
7494
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMonthViewComponent, isStandalone: true, selector: "tn-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, ngImport: i0, template: "<table role=\"grid\" class=\"tn-calendar-table\">\n <!-- Table header with day names -->\n <thead class=\"tn-calendar-table-header\">\n <tr>\n @for (day of weekdays; track day) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n <span aria-hidden=\"true\">{{ day.short }}</span>\n </th>\n }\n </tr>\n </thead>\n\n <!-- Table body with calendar cells -->\n <tbody class=\"tn-calendar-body\">\n <!-- Calendar rows -->\n @for (row of calendarRows(); track trackByRow($index
|
|
7495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMonthViewComponent, isStandalone: true, selector: "tn-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, ngImport: i0, template: "<table role=\"grid\" class=\"tn-calendar-table\">\n <!-- Table header with day names -->\n <thead class=\"tn-calendar-table-header\">\n <tr>\n @for (day of weekdays; track day) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n <span aria-hidden=\"true\">{{ day.short }}</span>\n </th>\n }\n </tr>\n </thead>\n\n <!-- Table body with calendar cells -->\n <tbody class=\"tn-calendar-body\">\n <!-- Calendar rows -->\n @for (row of calendarRows(); track trackByRow($index); let rowIndex = $index) {\n <tr role=\"row\">\n @for (cell of row; track trackByDate($index, cell); let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"tn-calendar-body-cell-container\"\n [attr.data-tn-row]=\"rowIndex\"\n [attr.data-tn-col]=\"colIndex\">\n @if (cell.value > 0) {\n <button\n type=\"button\"\n class=\"tn-calendar-body-cell\"\n [class.tn-calendar-body-selected]=\"cell.selected\"\n [class.tn-calendar-body-today]=\"cell.today\"\n [class.tn-calendar-body-active]=\"cell.selected\"\n [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n [class.tn-calendar-body-in-range]=\"cell.inRange\"\n [disabled]=\"!cell.enabled\"\n [attr.tabindex]=\"cell.selected ? 0 : -1\"\n [attr.aria-label]=\"cell.ariaLabel\"\n [attr.aria-pressed]=\"cell.selected\"\n [attr.aria-current]=\"cell.today ? 'date' : null\"\n (click)=\"onCellClicked(cell)\">\n <span class=\"tn-calendar-body-cell-content tn-focus-indicator\"\n [class.tn-calendar-body-selected]=\"cell.selected\"\n [class.tn-calendar-body-today]=\"cell.today\"\n [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n [class.tn-calendar-body-in-range]=\"cell.inRange\">\n {{ cell.value }}\n </span>\n <span aria-hidden=\"true\" class=\"tn-calendar-body-cell-preview\"></span>\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [":host{--calendar-cell-size: 48px;--calendar-header-height: 40px;--calendar-cell-font-size: 16px;--calendar-header-font-size: 14px}.tn-calendar-table{width:calc(7 * var(--calendar-cell-size));border-spacing:0;border-collapse:separate}.tn-calendar-table-header th{text-align:center;height:var(--calendar-header-height);padding:8px 0;font-size:var(--calendar-header-font-size);font-weight:500;color:var(--tn-fg2, #666)}.tn-calendar-table-header-divider{height:1px;border:0}.tn-calendar-body tr{border:0}.tn-calendar-body-cell-container{position:relative;border:0;outline:0;height:var(--calendar-cell-size);width:14.2857142857%}.tn-calendar-body-cell{position:absolute;inset:0;margin:auto;background:transparent;border:0;outline:0;cursor:pointer;color:var(--tn-fg1, #333);width:var(--calendar-cell-size);height:var(--calendar-cell-size)}.tn-calendar-body-cell:not(:disabled):hover:not(.tn-calendar-body-selected):not(.tn-calendar-body-range-start):not(.tn-calendar-body-range-end):not(.tn-calendar-body-in-range){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-calendar-body-cell:focus .tn-calendar-body-cell-content.tn-focus-indicator{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell.tn-calendar-body-today:not(.tn-calendar-body-selected){border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.tn-calendar-body-cell.tn-calendar-body-selected,.tn-calendar-body-cell.tn-calendar-body-range-start,.tn-calendar-body-cell.tn-calendar-body-range-end,.tn-calendar-body-cell.tn-calendar-body-in-range{background:var(--tn-primary, #007bff);color:#fff}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;font-size:var(--calendar-cell-font-size);font-weight:400;transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell-preview{position:absolute;inset:0;background:transparent}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tn-focus-indicator{position:relative}.tn-focus-indicator:before{content:\"\";position:absolute;inset:0;opacity:0;background:currentColor;transition:opacity .2s cubic-bezier(.25,.8,.25,1)}\n"] });
|
|
7493
7496
|
}
|
|
7494
7497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMonthViewComponent, decorators: [{
|
|
7495
7498
|
type: Component,
|
|
7496
|
-
args: [{ selector: 'tn-month-view', standalone: true, imports: [], template: "<table role=\"grid\" class=\"tn-calendar-table\">\n <!-- Table header with day names -->\n <thead class=\"tn-calendar-table-header\">\n <tr>\n @for (day of weekdays; track day) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n <span aria-hidden=\"true\">{{ day.short }}</span>\n </th>\n }\n </tr>\n </thead>\n\n <!-- Table body with calendar cells -->\n <tbody class=\"tn-calendar-body\">\n <!-- Calendar rows -->\n @for (row of calendarRows(); track trackByRow($index
|
|
7499
|
+
args: [{ selector: 'tn-month-view', standalone: true, imports: [], template: "<table role=\"grid\" class=\"tn-calendar-table\">\n <!-- Table header with day names -->\n <thead class=\"tn-calendar-table-header\">\n <tr>\n @for (day of weekdays; track day) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n <span aria-hidden=\"true\">{{ day.short }}</span>\n </th>\n }\n </tr>\n </thead>\n\n <!-- Table body with calendar cells -->\n <tbody class=\"tn-calendar-body\">\n <!-- Calendar rows -->\n @for (row of calendarRows(); track trackByRow($index); let rowIndex = $index) {\n <tr role=\"row\">\n @for (cell of row; track trackByDate($index, cell); let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"tn-calendar-body-cell-container\"\n [attr.data-tn-row]=\"rowIndex\"\n [attr.data-tn-col]=\"colIndex\">\n @if (cell.value > 0) {\n <button\n type=\"button\"\n class=\"tn-calendar-body-cell\"\n [class.tn-calendar-body-selected]=\"cell.selected\"\n [class.tn-calendar-body-today]=\"cell.today\"\n [class.tn-calendar-body-active]=\"cell.selected\"\n [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n [class.tn-calendar-body-in-range]=\"cell.inRange\"\n [disabled]=\"!cell.enabled\"\n [attr.tabindex]=\"cell.selected ? 0 : -1\"\n [attr.aria-label]=\"cell.ariaLabel\"\n [attr.aria-pressed]=\"cell.selected\"\n [attr.aria-current]=\"cell.today ? 'date' : null\"\n (click)=\"onCellClicked(cell)\">\n <span class=\"tn-calendar-body-cell-content tn-focus-indicator\"\n [class.tn-calendar-body-selected]=\"cell.selected\"\n [class.tn-calendar-body-today]=\"cell.today\"\n [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n [class.tn-calendar-body-in-range]=\"cell.inRange\">\n {{ cell.value }}\n </span>\n <span aria-hidden=\"true\" class=\"tn-calendar-body-cell-preview\"></span>\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [":host{--calendar-cell-size: 48px;--calendar-header-height: 40px;--calendar-cell-font-size: 16px;--calendar-header-font-size: 14px}.tn-calendar-table{width:calc(7 * var(--calendar-cell-size));border-spacing:0;border-collapse:separate}.tn-calendar-table-header th{text-align:center;height:var(--calendar-header-height);padding:8px 0;font-size:var(--calendar-header-font-size);font-weight:500;color:var(--tn-fg2, #666)}.tn-calendar-table-header-divider{height:1px;border:0}.tn-calendar-body tr{border:0}.tn-calendar-body-cell-container{position:relative;border:0;outline:0;height:var(--calendar-cell-size);width:14.2857142857%}.tn-calendar-body-cell{position:absolute;inset:0;margin:auto;background:transparent;border:0;outline:0;cursor:pointer;color:var(--tn-fg1, #333);width:var(--calendar-cell-size);height:var(--calendar-cell-size)}.tn-calendar-body-cell:not(:disabled):hover:not(.tn-calendar-body-selected):not(.tn-calendar-body-range-start):not(.tn-calendar-body-range-end):not(.tn-calendar-body-in-range){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-calendar-body-cell:focus .tn-calendar-body-cell-content.tn-focus-indicator{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell.tn-calendar-body-today:not(.tn-calendar-body-selected){border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.tn-calendar-body-cell.tn-calendar-body-selected,.tn-calendar-body-cell.tn-calendar-body-range-start,.tn-calendar-body-cell.tn-calendar-body-range-end,.tn-calendar-body-cell.tn-calendar-body-in-range{background:var(--tn-primary, #007bff);color:#fff}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;font-size:var(--calendar-cell-font-size);font-weight:400;transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell-preview{position:absolute;inset:0;background:transparent}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tn-focus-indicator{position:relative}.tn-focus-indicator:before{content:\"\";position:absolute;inset:0;opacity:0;background:currentColor;transition:opacity .2s cubic-bezier(.25,.8,.25,1)}\n"] }]
|
|
7497
7500
|
}], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], selectedRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRange", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }] } });
|
|
7498
7501
|
|
|
7499
7502
|
class TnMultiYearViewComponent {
|
|
@@ -8068,6 +8071,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
8068
8071
|
}, 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"] }]
|
|
8069
8072
|
}], 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 }] }] } });
|
|
8070
8073
|
|
|
8074
|
+
/**
|
|
8075
|
+
* Formats a Date into zero-padded month, day, and year strings.
|
|
8076
|
+
*
|
|
8077
|
+
* @param date The date to format.
|
|
8078
|
+
* @returns An object with `month` (MM), `day` (DD), and `year` (YYYY) strings.
|
|
8079
|
+
*/
|
|
8080
|
+
function formatDateParts(date) {
|
|
8081
|
+
return {
|
|
8082
|
+
month: (date.getMonth() + 1).toString().padStart(2, '0'),
|
|
8083
|
+
day: date.getDate().toString().padStart(2, '0'),
|
|
8084
|
+
year: date.getFullYear().toString(),
|
|
8085
|
+
};
|
|
8086
|
+
}
|
|
8087
|
+
/**
|
|
8088
|
+
* Reads the current value from an input element.
|
|
8089
|
+
*
|
|
8090
|
+
* @param el The test element to read from.
|
|
8091
|
+
* @returns The input's value, or an empty string if unset.
|
|
8092
|
+
*/
|
|
8093
|
+
async function getInputValue(el) {
|
|
8094
|
+
return (await el.getProperty('value')) || '';
|
|
8095
|
+
}
|
|
8096
|
+
/**
|
|
8097
|
+
* Clears an input element and types a new value, then blurs to trigger validation.
|
|
8098
|
+
*
|
|
8099
|
+
* @param el The test element to write to.
|
|
8100
|
+
* @param value The value to type. Pass empty string to clear only.
|
|
8101
|
+
*/
|
|
8102
|
+
async function setInputValue(el, value) {
|
|
8103
|
+
await el.clear();
|
|
8104
|
+
if (value) {
|
|
8105
|
+
await el.sendKeys(value);
|
|
8106
|
+
}
|
|
8107
|
+
await el.blur();
|
|
8108
|
+
}
|
|
8109
|
+
|
|
8110
|
+
/**
|
|
8111
|
+
* Harness for interacting with `tn-date-input` in tests.
|
|
8112
|
+
* Provides methods for getting/setting the date value, opening the calendar,
|
|
8113
|
+
* and querying disabled state.
|
|
8114
|
+
*
|
|
8115
|
+
* The calendar popup is portaled to the CDK overlay, so use
|
|
8116
|
+
* `TestbedHarnessEnvironment.documentRootLoader(fixture)` if you need to
|
|
8117
|
+
* interact with the calendar cells directly.
|
|
8118
|
+
*
|
|
8119
|
+
* @example
|
|
8120
|
+
* ```typescript
|
|
8121
|
+
* const dateInput = await loader.getHarness(TnDateInputHarness);
|
|
8122
|
+
* await dateInput.setValue(new Date(2026, 3, 15));
|
|
8123
|
+
* expect(await dateInput.getDisplayText()).toBe('04/15/2026');
|
|
8124
|
+
*
|
|
8125
|
+
* await dateInput.openCalendar();
|
|
8126
|
+
* expect(await dateInput.isCalendarOpen()).toBe(true);
|
|
8127
|
+
* ```
|
|
8128
|
+
*/
|
|
8129
|
+
class TnDateInputHarness extends ComponentHarness {
|
|
8130
|
+
static hostSelector = 'tn-date-input';
|
|
8131
|
+
_monthInput = this.locatorFor('.tn-date-segment-month');
|
|
8132
|
+
_dayInput = this.locatorFor('.tn-date-segment-day');
|
|
8133
|
+
_yearInput = this.locatorFor('.tn-date-segment-year');
|
|
8134
|
+
_toggle = this.locatorFor('.tn-date-input-toggle');
|
|
8135
|
+
/**
|
|
8136
|
+
* Gets a `HarnessPredicate` that can be used to search for a date input
|
|
8137
|
+
* with specific attributes.
|
|
8138
|
+
*
|
|
8139
|
+
* @param options Options for filtering which instances are considered a match.
|
|
8140
|
+
* @returns A `HarnessPredicate` configured with the given options.
|
|
8141
|
+
*/
|
|
8142
|
+
static with(options = {}) {
|
|
8143
|
+
return new HarnessPredicate(TnDateInputHarness, options);
|
|
8144
|
+
}
|
|
8145
|
+
/**
|
|
8146
|
+
* Gets the displayed date text as "MM/DD/YYYY".
|
|
8147
|
+
* Returns placeholder segments if no date is set.
|
|
8148
|
+
*
|
|
8149
|
+
* @returns Promise resolving to the formatted display string.
|
|
8150
|
+
*/
|
|
8151
|
+
async getDisplayText() {
|
|
8152
|
+
const month = await getInputValue(await this._monthInput());
|
|
8153
|
+
const day = await getInputValue(await this._dayInput());
|
|
8154
|
+
const year = await getInputValue(await this._yearInput());
|
|
8155
|
+
return `${month || 'MM'}/${day || 'DD'}/${year || 'YYYY'}`;
|
|
8156
|
+
}
|
|
8157
|
+
/**
|
|
8158
|
+
* Sets the date by typing into the segment inputs.
|
|
8159
|
+
*
|
|
8160
|
+
* @param date The date to set.
|
|
8161
|
+
*/
|
|
8162
|
+
async setValue(date) {
|
|
8163
|
+
const { month, day, year } = formatDateParts(date);
|
|
8164
|
+
await setInputValue(await this._monthInput(), month);
|
|
8165
|
+
await setInputValue(await this._dayInput(), day);
|
|
8166
|
+
await setInputValue(await this._yearInput(), year);
|
|
8167
|
+
}
|
|
8168
|
+
/**
|
|
8169
|
+
* Clears all date segments.
|
|
8170
|
+
*/
|
|
8171
|
+
async clear() {
|
|
8172
|
+
await setInputValue(await this._monthInput(), '');
|
|
8173
|
+
await setInputValue(await this._dayInput(), '');
|
|
8174
|
+
await setInputValue(await this._yearInput(), '');
|
|
8175
|
+
}
|
|
8176
|
+
/**
|
|
8177
|
+
* Checks whether the input is disabled.
|
|
8178
|
+
*
|
|
8179
|
+
* @returns Promise resolving to true if the input is disabled.
|
|
8180
|
+
*/
|
|
8181
|
+
async isDisabled() {
|
|
8182
|
+
const month = await this._monthInput();
|
|
8183
|
+
return (await month.getProperty('disabled')) ?? false;
|
|
8184
|
+
}
|
|
8185
|
+
/**
|
|
8186
|
+
* Opens the calendar popup by clicking the toggle button.
|
|
8187
|
+
*/
|
|
8188
|
+
async openCalendar() {
|
|
8189
|
+
const toggle = await this._toggle();
|
|
8190
|
+
await toggle.click();
|
|
8191
|
+
}
|
|
8192
|
+
/**
|
|
8193
|
+
* Whether the calendar popup is currently open.
|
|
8194
|
+
*
|
|
8195
|
+
* @returns Promise resolving to true if the calendar overlay is visible.
|
|
8196
|
+
*/
|
|
8197
|
+
async isCalendarOpen() {
|
|
8198
|
+
const overlay = await this.documentRootLocatorFactory().locatorForOptional('.tn-datepicker-overlay')();
|
|
8199
|
+
return overlay !== null;
|
|
8200
|
+
}
|
|
8201
|
+
}
|
|
8202
|
+
|
|
8071
8203
|
class TnDateRangeInputComponent {
|
|
8072
8204
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
8073
8205
|
placeholder = input('Select date range', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
@@ -8427,6 +8559,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
8427
8559
|
}, 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"] }]
|
|
8428
8560
|
}], 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 }] }] } });
|
|
8429
8561
|
|
|
8562
|
+
/**
|
|
8563
|
+
* Harness for interacting with `tn-date-range-input` in tests.
|
|
8564
|
+
* Provides methods for getting/setting the date range, opening the calendar,
|
|
8565
|
+
* and querying disabled state.
|
|
8566
|
+
*
|
|
8567
|
+
* The calendar popup is portaled to the CDK overlay, so use
|
|
8568
|
+
* `TestbedHarnessEnvironment.documentRootLoader(fixture)` if you need to
|
|
8569
|
+
* interact with the calendar cells directly.
|
|
8570
|
+
*
|
|
8571
|
+
* @example
|
|
8572
|
+
* ```typescript
|
|
8573
|
+
* const rangeInput = await loader.getHarness(TnDateRangeInputHarness);
|
|
8574
|
+
* await rangeInput.setStartDate(new Date(2026, 0, 1));
|
|
8575
|
+
* await rangeInput.setEndDate(new Date(2026, 0, 31));
|
|
8576
|
+
* expect(await rangeInput.getStartText()).toBe('01/01/2026');
|
|
8577
|
+
* expect(await rangeInput.getEndText()).toBe('01/31/2026');
|
|
8578
|
+
* ```
|
|
8579
|
+
*/
|
|
8580
|
+
class TnDateRangeInputHarness extends ComponentHarness {
|
|
8581
|
+
static hostSelector = 'tn-date-range-input';
|
|
8582
|
+
_startMonth = this.locatorFor('.tn-date-segment-group:first-of-type .tn-date-segment-month');
|
|
8583
|
+
_startDay = this.locatorFor('.tn-date-segment-group:first-of-type .tn-date-segment-day');
|
|
8584
|
+
_startYear = this.locatorFor('.tn-date-segment-group:first-of-type .tn-date-segment-year');
|
|
8585
|
+
_endMonth = this.locatorFor('.tn-date-segment-group:last-of-type .tn-date-segment-month');
|
|
8586
|
+
_endDay = this.locatorFor('.tn-date-segment-group:last-of-type .tn-date-segment-day');
|
|
8587
|
+
_endYear = this.locatorFor('.tn-date-segment-group:last-of-type .tn-date-segment-year');
|
|
8588
|
+
_toggle = this.locatorFor('.tn-date-range-toggle');
|
|
8589
|
+
/**
|
|
8590
|
+
* Gets a `HarnessPredicate` that can be used to search for a date range input
|
|
8591
|
+
* with specific attributes.
|
|
8592
|
+
*
|
|
8593
|
+
* @param options Options for filtering which instances are considered a match.
|
|
8594
|
+
* @returns A `HarnessPredicate` configured with the given options.
|
|
8595
|
+
*/
|
|
8596
|
+
static with(options = {}) {
|
|
8597
|
+
return new HarnessPredicate(TnDateRangeInputHarness, options);
|
|
8598
|
+
}
|
|
8599
|
+
/**
|
|
8600
|
+
* Gets the start date display text as "MM/DD/YYYY".
|
|
8601
|
+
*
|
|
8602
|
+
* @returns Promise resolving to the formatted start date string.
|
|
8603
|
+
*/
|
|
8604
|
+
async getStartText() {
|
|
8605
|
+
const month = await getInputValue(await this._startMonth());
|
|
8606
|
+
const day = await getInputValue(await this._startDay());
|
|
8607
|
+
const year = await getInputValue(await this._startYear());
|
|
8608
|
+
return `${month || 'MM'}/${day || 'DD'}/${year || 'YYYY'}`;
|
|
8609
|
+
}
|
|
8610
|
+
/**
|
|
8611
|
+
* Gets the end date display text as "MM/DD/YYYY".
|
|
8612
|
+
*
|
|
8613
|
+
* @returns Promise resolving to the formatted end date string.
|
|
8614
|
+
*/
|
|
8615
|
+
async getEndText() {
|
|
8616
|
+
const month = await getInputValue(await this._endMonth());
|
|
8617
|
+
const day = await getInputValue(await this._endDay());
|
|
8618
|
+
const year = await getInputValue(await this._endYear());
|
|
8619
|
+
return `${month || 'MM'}/${day || 'DD'}/${year || 'YYYY'}`;
|
|
8620
|
+
}
|
|
8621
|
+
/**
|
|
8622
|
+
* Sets the start date by typing into the segment inputs.
|
|
8623
|
+
*
|
|
8624
|
+
* @param date The start date to set.
|
|
8625
|
+
*/
|
|
8626
|
+
async setStartDate(date) {
|
|
8627
|
+
const { month, day, year } = formatDateParts(date);
|
|
8628
|
+
await setInputValue(await this._startMonth(), month);
|
|
8629
|
+
await setInputValue(await this._startDay(), day);
|
|
8630
|
+
await setInputValue(await this._startYear(), year);
|
|
8631
|
+
}
|
|
8632
|
+
/**
|
|
8633
|
+
* Sets the end date by typing into the segment inputs.
|
|
8634
|
+
*
|
|
8635
|
+
* @param date The end date to set.
|
|
8636
|
+
*/
|
|
8637
|
+
async setEndDate(date) {
|
|
8638
|
+
const { month, day, year } = formatDateParts(date);
|
|
8639
|
+
await setInputValue(await this._endMonth(), month);
|
|
8640
|
+
await setInputValue(await this._endDay(), day);
|
|
8641
|
+
await setInputValue(await this._endYear(), year);
|
|
8642
|
+
}
|
|
8643
|
+
/**
|
|
8644
|
+
* Clears both start and end date segments.
|
|
8645
|
+
*/
|
|
8646
|
+
async clear() {
|
|
8647
|
+
await setInputValue(await this._startMonth(), '');
|
|
8648
|
+
await setInputValue(await this._startDay(), '');
|
|
8649
|
+
await setInputValue(await this._startYear(), '');
|
|
8650
|
+
await setInputValue(await this._endMonth(), '');
|
|
8651
|
+
await setInputValue(await this._endDay(), '');
|
|
8652
|
+
await setInputValue(await this._endYear(), '');
|
|
8653
|
+
}
|
|
8654
|
+
/**
|
|
8655
|
+
* Checks whether the input is disabled.
|
|
8656
|
+
*
|
|
8657
|
+
* @returns Promise resolving to true if the input is disabled.
|
|
8658
|
+
*/
|
|
8659
|
+
async isDisabled() {
|
|
8660
|
+
const month = await this._startMonth();
|
|
8661
|
+
return (await month.getProperty('disabled')) ?? false;
|
|
8662
|
+
}
|
|
8663
|
+
/**
|
|
8664
|
+
* Opens the calendar popup by clicking the toggle button.
|
|
8665
|
+
*/
|
|
8666
|
+
async openCalendar() {
|
|
8667
|
+
const toggle = await this._toggle();
|
|
8668
|
+
await toggle.click();
|
|
8669
|
+
}
|
|
8670
|
+
/**
|
|
8671
|
+
* Whether the calendar popup is currently open.
|
|
8672
|
+
*
|
|
8673
|
+
* @returns Promise resolving to true if the calendar overlay is visible.
|
|
8674
|
+
*/
|
|
8675
|
+
async isCalendarOpen() {
|
|
8676
|
+
const overlay = await this.documentRootLocatorFactory().locatorForOptional('.tn-datepicker-overlay')();
|
|
8677
|
+
return overlay !== null;
|
|
8678
|
+
}
|
|
8679
|
+
}
|
|
8680
|
+
|
|
8430
8681
|
class TnTimeInputComponent {
|
|
8431
8682
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
8432
8683
|
format = input('12h', ...(ngDevMode ? [{ debugName: "format" }] : []));
|
|
@@ -12096,5 +12347,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
12096
12347
|
* Generated bundle index. Do not edit.
|
|
12097
12348
|
*/
|
|
12098
12349
|
|
|
12099
|
-
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 };
|
|
12350
|
+
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 };
|
|
12100
12351
|
//# sourceMappingURL=truenas-ui-components.mjs.map
|