@truenas/ui-components 0.1.31 → 0.1.33
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.
|
@@ -17,13 +17,13 @@ import { TemplatePortal, PortalModule, ComponentPortal } from '@angular/cdk/port
|
|
|
17
17
|
import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
|
|
18
18
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
19
19
|
import { SPACE, ENTER, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
|
|
20
|
+
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
|
|
20
21
|
import { DataSource } from '@angular/cdk/collections';
|
|
21
22
|
import * as i1$3 from '@angular/cdk/tree';
|
|
22
23
|
import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode } from '@angular/cdk/tree';
|
|
23
24
|
export { FlatTreeControl } from '@angular/cdk/tree';
|
|
24
25
|
import { map } from 'rxjs/operators';
|
|
25
26
|
import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
|
|
26
|
-
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
|
|
27
27
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
28
28
|
|
|
29
29
|
let nextId = 0;
|
|
@@ -4010,6 +4010,190 @@ class TnTabsHarness extends ComponentHarness {
|
|
|
4010
4010
|
}
|
|
4011
4011
|
}
|
|
4012
4012
|
|
|
4013
|
+
/**
|
|
4014
|
+
* Harness for a single menu item (`button.tn-menu-item`).
|
|
4015
|
+
* @internal Used by TnMenuHarness to interact with individual items.
|
|
4016
|
+
*/
|
|
4017
|
+
class TnMenuItemHarness extends ComponentHarness {
|
|
4018
|
+
static hostSelector = '.tn-menu-item';
|
|
4019
|
+
_label = this.locatorFor('.tn-menu-item-label');
|
|
4020
|
+
/** Gets the label text of this menu item. */
|
|
4021
|
+
async getLabel() {
|
|
4022
|
+
const label = await this._label();
|
|
4023
|
+
return (await label.text()).trim();
|
|
4024
|
+
}
|
|
4025
|
+
/** Checks whether this menu item is disabled via the native `disabled` attribute. */
|
|
4026
|
+
async isDisabled() {
|
|
4027
|
+
const host = await this.host();
|
|
4028
|
+
const disabled = await host.getProperty('disabled');
|
|
4029
|
+
return !!disabled;
|
|
4030
|
+
}
|
|
4031
|
+
/** Clicks this menu item. */
|
|
4032
|
+
async click() {
|
|
4033
|
+
const host = await this.host();
|
|
4034
|
+
await host.click();
|
|
4035
|
+
}
|
|
4036
|
+
}
|
|
4037
|
+
/**
|
|
4038
|
+
* Harness for interacting with `tn-menu` in tests.
|
|
4039
|
+
*
|
|
4040
|
+
* Menus render in a CDK overlay **outside** the component tree, so a regular
|
|
4041
|
+
* `TestbedHarnessEnvironment.loader(fixture)` won't find them. Use
|
|
4042
|
+
* `TnMenuTesting.rootLoader(fixture)` instead — it searches the entire document.
|
|
4043
|
+
*
|
|
4044
|
+
* ## Test Setup
|
|
4045
|
+
*
|
|
4046
|
+
* ```typescript
|
|
4047
|
+
* import {
|
|
4048
|
+
* TnMenuHarness,
|
|
4049
|
+
* TnMenuTesting,
|
|
4050
|
+
* TnIconButtonHarness,
|
|
4051
|
+
* } from '@truenas/ui-components';
|
|
4052
|
+
*
|
|
4053
|
+
* let loader: HarnessLoader; // for components
|
|
4054
|
+
* let rootLoader: HarnessLoader; // for overlays (menus, dialogs)
|
|
4055
|
+
*
|
|
4056
|
+
* beforeEach(() => {
|
|
4057
|
+
* spectator = createComponent();
|
|
4058
|
+
* loader = TestbedHarnessEnvironment.loader(spectator.fixture);
|
|
4059
|
+
* rootLoader = TnMenuTesting.rootLoader(spectator.fixture);
|
|
4060
|
+
* });
|
|
4061
|
+
* ```
|
|
4062
|
+
*
|
|
4063
|
+
* ## Opening a Menu
|
|
4064
|
+
*
|
|
4065
|
+
* Click the trigger element to open the menu before querying it:
|
|
4066
|
+
*
|
|
4067
|
+
* ```typescript
|
|
4068
|
+
* // Via harness (if trigger is a tn-icon-button)
|
|
4069
|
+
* const trigger = await loader.getHarness(
|
|
4070
|
+
* TnIconButtonHarness.with({ name: 'more_vert' })
|
|
4071
|
+
* );
|
|
4072
|
+
* await trigger.click();
|
|
4073
|
+
*
|
|
4074
|
+
* // Or via DOM
|
|
4075
|
+
* spectator.click('[tnMenuTriggerFor]');
|
|
4076
|
+
* ```
|
|
4077
|
+
*
|
|
4078
|
+
* ## Querying and Clicking Items
|
|
4079
|
+
*
|
|
4080
|
+
* ```typescript
|
|
4081
|
+
* const menu = await rootLoader.getHarness(TnMenuHarness);
|
|
4082
|
+
* expect(await menu.getItemLabels()).toEqual(['Edit', 'Delete']);
|
|
4083
|
+
* await menu.clickItem({ label: 'Edit' });
|
|
4084
|
+
* await menu.clickItem({ label: /del/i }); // regex match
|
|
4085
|
+
* expect(await menu.isItemDisabled({ label: 'Delete' })).toBe(false);
|
|
4086
|
+
* ```
|
|
4087
|
+
*/
|
|
4088
|
+
class TnMenuHarness extends ComponentHarness {
|
|
4089
|
+
static hostSelector = '.tn-menu';
|
|
4090
|
+
_items = this.locatorForAll(TnMenuItemHarness);
|
|
4091
|
+
/**
|
|
4092
|
+
* Gets a `HarnessPredicate` that can be used to search for a menu.
|
|
4093
|
+
*/
|
|
4094
|
+
static with(options = {}) {
|
|
4095
|
+
return new HarnessPredicate(TnMenuHarness, options);
|
|
4096
|
+
}
|
|
4097
|
+
/**
|
|
4098
|
+
* Gets the labels of all menu items.
|
|
4099
|
+
*
|
|
4100
|
+
* @example
|
|
4101
|
+
* ```typescript
|
|
4102
|
+
* const menu = await rootLoader.getHarness(TnMenuHarness);
|
|
4103
|
+
* expect(await menu.getItemLabels()).toEqual(['Edit', 'Delete']);
|
|
4104
|
+
* ```
|
|
4105
|
+
*/
|
|
4106
|
+
async getItemLabels() {
|
|
4107
|
+
const items = await this._items();
|
|
4108
|
+
return Promise.all(items.map(item => item.getLabel()));
|
|
4109
|
+
}
|
|
4110
|
+
/**
|
|
4111
|
+
* Clicks a menu item by its label text.
|
|
4112
|
+
*
|
|
4113
|
+
* @param filter Object with `label` to match (string or RegExp).
|
|
4114
|
+
*
|
|
4115
|
+
* @example
|
|
4116
|
+
* ```typescript
|
|
4117
|
+
* const menu = await rootLoader.getHarness(TnMenuHarness);
|
|
4118
|
+
* await menu.clickItem({ label: 'Delete' });
|
|
4119
|
+
* ```
|
|
4120
|
+
*/
|
|
4121
|
+
async clickItem(filter) {
|
|
4122
|
+
const items = await this._items();
|
|
4123
|
+
for (const item of items) {
|
|
4124
|
+
const text = await item.getLabel();
|
|
4125
|
+
const matches = filter.label instanceof RegExp
|
|
4126
|
+
? filter.label.test(text)
|
|
4127
|
+
: text === filter.label;
|
|
4128
|
+
if (matches) {
|
|
4129
|
+
await item.click();
|
|
4130
|
+
return;
|
|
4131
|
+
}
|
|
4132
|
+
}
|
|
4133
|
+
throw new Error(`Could not find menu item matching label "${String(filter.label)}"`);
|
|
4134
|
+
}
|
|
4135
|
+
/**
|
|
4136
|
+
* Checks if a menu item is disabled.
|
|
4137
|
+
*
|
|
4138
|
+
* @param filter Object with `label` to match (string or RegExp).
|
|
4139
|
+
* @returns Promise resolving to true if the item is disabled.
|
|
4140
|
+
*
|
|
4141
|
+
* @example
|
|
4142
|
+
* ```typescript
|
|
4143
|
+
* const menu = await rootLoader.getHarness(TnMenuHarness);
|
|
4144
|
+
* expect(await menu.isItemDisabled({ label: 'Delete' })).toBe(true);
|
|
4145
|
+
* ```
|
|
4146
|
+
*/
|
|
4147
|
+
async isItemDisabled(filter) {
|
|
4148
|
+
const items = await this._items();
|
|
4149
|
+
for (const item of items) {
|
|
4150
|
+
const text = await item.getLabel();
|
|
4151
|
+
const matches = filter.label instanceof RegExp
|
|
4152
|
+
? filter.label.test(text)
|
|
4153
|
+
: text === filter.label;
|
|
4154
|
+
if (matches) {
|
|
4155
|
+
return item.isDisabled();
|
|
4156
|
+
}
|
|
4157
|
+
}
|
|
4158
|
+
throw new Error(`Could not find menu item with label "${String(filter.label)}"`);
|
|
4159
|
+
}
|
|
4160
|
+
/**
|
|
4161
|
+
* Gets the number of menu items (excluding separators).
|
|
4162
|
+
*/
|
|
4163
|
+
async getItemCount() {
|
|
4164
|
+
return (await this._items()).length;
|
|
4165
|
+
}
|
|
4166
|
+
}
|
|
4167
|
+
|
|
4168
|
+
/**
|
|
4169
|
+
* Test utilities for TnMenu.
|
|
4170
|
+
*
|
|
4171
|
+
* Provides a document-root `HarnessLoader` that can find menus rendered
|
|
4172
|
+
* in CDK overlays. Use this alongside `TnDialogTesting.rootLoader()` if
|
|
4173
|
+
* your tests also open dialogs.
|
|
4174
|
+
*
|
|
4175
|
+
* @example
|
|
4176
|
+
* ```typescript
|
|
4177
|
+
* import { TnMenuTesting, TnMenuHarness } from '@truenas/ui-components';
|
|
4178
|
+
*
|
|
4179
|
+
* const rootLoader = TnMenuTesting.rootLoader(spectator.fixture);
|
|
4180
|
+
*
|
|
4181
|
+
* // Open the menu trigger, then query the overlay
|
|
4182
|
+
* spectator.click('[tnMenuTriggerFor]');
|
|
4183
|
+
* const menu = await rootLoader.getHarness(TnMenuHarness);
|
|
4184
|
+
* await menu.clickItem({ label: 'Edit' });
|
|
4185
|
+
* ```
|
|
4186
|
+
*/
|
|
4187
|
+
class TnMenuTesting {
|
|
4188
|
+
/**
|
|
4189
|
+
* Creates a `HarnessLoader` that searches the entire document,
|
|
4190
|
+
* including CDK overlays where menus are rendered.
|
|
4191
|
+
*/
|
|
4192
|
+
static rootLoader(fixture) {
|
|
4193
|
+
return TestbedHarnessEnvironment.documentRootLoader(fixture);
|
|
4194
|
+
}
|
|
4195
|
+
}
|
|
4196
|
+
|
|
4013
4197
|
class TnKeyboardShortcutComponent {
|
|
4014
4198
|
shortcut = input('', ...(ngDevMode ? [{ debugName: "shortcut" }] : []));
|
|
4015
4199
|
platform = input('auto', ...(ngDevMode ? [{ debugName: "platform" }] : []));
|
|
@@ -4333,10 +4517,15 @@ class TnSelectComponent {
|
|
|
4333
4517
|
placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
4334
4518
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
4335
4519
|
testId = input('', ...(ngDevMode ? [{ debugName: "testId" }] : []));
|
|
4520
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
4521
|
+
compareWith = input(...(ngDevMode ? [undefined, { debugName: "compareWith" }] : []));
|
|
4336
4522
|
selectionChange = output();
|
|
4523
|
+
/** Emits the full array of selected values after each toggle in multiple mode. */
|
|
4524
|
+
multiSelectionChange = output();
|
|
4337
4525
|
// Internal state signals
|
|
4338
4526
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
4339
4527
|
selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
|
|
4528
|
+
selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
|
|
4340
4529
|
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
4341
4530
|
// Computed disabled state (combines input and form state)
|
|
4342
4531
|
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
@@ -4367,7 +4556,17 @@ class TnSelectComponent {
|
|
|
4367
4556
|
}
|
|
4368
4557
|
// ControlValueAccessor implementation
|
|
4369
4558
|
writeValue(value) {
|
|
4370
|
-
this.
|
|
4559
|
+
if (this.multiple()) {
|
|
4560
|
+
if (Array.isArray(value)) {
|
|
4561
|
+
this.selectedValues.set(value);
|
|
4562
|
+
}
|
|
4563
|
+
else {
|
|
4564
|
+
this.selectedValues.set(value != null ? [value] : []);
|
|
4565
|
+
}
|
|
4566
|
+
}
|
|
4567
|
+
else {
|
|
4568
|
+
this.selectedValue.set(Array.isArray(value) ? value[0] ?? null : value);
|
|
4569
|
+
}
|
|
4371
4570
|
}
|
|
4372
4571
|
registerOnChange(fn) {
|
|
4373
4572
|
this.onChange = fn;
|
|
@@ -4392,8 +4591,16 @@ class TnSelectComponent {
|
|
|
4392
4591
|
this.isOpen.set(false);
|
|
4393
4592
|
this.onTouched();
|
|
4394
4593
|
}
|
|
4395
|
-
onOptionClick(option) {
|
|
4396
|
-
|
|
4594
|
+
onOptionClick(option, groupDisabled = false) {
|
|
4595
|
+
if (option.disabled || groupDisabled) {
|
|
4596
|
+
return;
|
|
4597
|
+
}
|
|
4598
|
+
if (this.multiple()) {
|
|
4599
|
+
this.toggleOption(option);
|
|
4600
|
+
}
|
|
4601
|
+
else {
|
|
4602
|
+
this.selectOption(option);
|
|
4603
|
+
}
|
|
4397
4604
|
}
|
|
4398
4605
|
selectOption(option) {
|
|
4399
4606
|
if (option.disabled) {
|
|
@@ -4403,19 +4610,46 @@ class TnSelectComponent {
|
|
|
4403
4610
|
this.onChange(option.value);
|
|
4404
4611
|
this.selectionChange.emit(option.value);
|
|
4405
4612
|
this.closeDropdown();
|
|
4406
|
-
this.cdr.markForCheck();
|
|
4613
|
+
this.cdr.markForCheck();
|
|
4614
|
+
}
|
|
4615
|
+
toggleOption(option) {
|
|
4616
|
+
const current = this.selectedValues();
|
|
4617
|
+
const index = current.findIndex(v => this.compareValues(v, option.value));
|
|
4618
|
+
let updated;
|
|
4619
|
+
if (index >= 0) {
|
|
4620
|
+
updated = current.filter((_, i) => i !== index);
|
|
4621
|
+
}
|
|
4622
|
+
else {
|
|
4623
|
+
updated = [...current, option.value];
|
|
4624
|
+
}
|
|
4625
|
+
this.selectedValues.set(updated);
|
|
4626
|
+
this.onChange(updated);
|
|
4627
|
+
this.multiSelectionChange.emit(updated);
|
|
4628
|
+
this.cdr.markForCheck();
|
|
4407
4629
|
}
|
|
4408
|
-
|
|
4409
|
-
|
|
4630
|
+
isOptionSelected(option) {
|
|
4631
|
+
if (this.multiple()) {
|
|
4632
|
+
return this.selectedValues().some(v => this.compareValues(v, option.value));
|
|
4633
|
+
}
|
|
4410
4634
|
return this.compareValues(this.selectedValue(), option.value);
|
|
4411
|
-
}
|
|
4635
|
+
}
|
|
4412
4636
|
getDisplayText = computed(() => {
|
|
4637
|
+
if (this.multiple()) {
|
|
4638
|
+
const values = this.selectedValues();
|
|
4639
|
+
if (values.length === 0) {
|
|
4640
|
+
return this.placeholder();
|
|
4641
|
+
}
|
|
4642
|
+
const labels = values
|
|
4643
|
+
.map(v => this.findOptionByValue(v)?.label ?? String(v))
|
|
4644
|
+
.filter(Boolean);
|
|
4645
|
+
return labels.join(', ');
|
|
4646
|
+
}
|
|
4413
4647
|
const value = this.selectedValue();
|
|
4414
4648
|
if (value === null || value === undefined) {
|
|
4415
4649
|
return this.placeholder();
|
|
4416
4650
|
}
|
|
4417
4651
|
const option = this.findOptionByValue(value);
|
|
4418
|
-
return option ? option.label : value;
|
|
4652
|
+
return option ? option.label : String(value);
|
|
4419
4653
|
}, ...(ngDevMode ? [{ debugName: "getDisplayText" }] : []));
|
|
4420
4654
|
findOptionByValue(value) {
|
|
4421
4655
|
// Search in regular options first
|
|
@@ -4436,6 +4670,10 @@ class TnSelectComponent {
|
|
|
4436
4670
|
return this.options().length > 0 || this.optionGroups().length > 0;
|
|
4437
4671
|
}, ...(ngDevMode ? [{ debugName: "hasAnyOptions" }] : []));
|
|
4438
4672
|
compareValues(a, b) {
|
|
4673
|
+
const customCompare = this.compareWith();
|
|
4674
|
+
if (customCompare) {
|
|
4675
|
+
return customCompare(a, b);
|
|
4676
|
+
}
|
|
4439
4677
|
if (a === b) {
|
|
4440
4678
|
return true;
|
|
4441
4679
|
}
|
|
@@ -4445,6 +4683,8 @@ class TnSelectComponent {
|
|
|
4445
4683
|
return false;
|
|
4446
4684
|
}
|
|
4447
4685
|
// Keyboard navigation
|
|
4686
|
+
// TODO: Add ArrowUp/ArrowDown option navigation, Enter/Space toggle,
|
|
4687
|
+
// and aria-activedescendant tracking for full keyboard accessibility.
|
|
4448
4688
|
onKeydown(event) {
|
|
4449
4689
|
switch (event.key) {
|
|
4450
4690
|
case 'Enter':
|
|
@@ -4469,24 +4709,24 @@ class TnSelectComponent {
|
|
|
4469
4709
|
}
|
|
4470
4710
|
}
|
|
4471
4711
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSelectComponent, isStandalone: true, selector: "tn-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
|
|
4712
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSelectComponent, isStandalone: true, selector: "tn-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", multiSelectionChange: "multiSelectionChange" }, providers: [
|
|
4473
4713
|
{
|
|
4474
4714
|
provide: NG_VALUE_ACCESSOR,
|
|
4475
4715
|
useExisting: forwardRef(() => TnSelectComponent),
|
|
4476
4716
|
multi: true
|
|
4477
4717
|
}
|
|
4478
|
-
], ngImport: i0, template: "<div class=\"tn-select-container\" [attr.data-testid]=\"testId()\">\n <!-- Select Trigger -->\n <div\n class=\"tn-select-trigger\"\n role=\"combobox\"\n tabindex=\"0\"\n [class.disabled]=\"isDisabled()\"\n [class.open]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + testId() : null\"\n [attr.aria-label]=\"placeholder()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n\n <!-- Display Text -->\n <span\n class=\"tn-select-text\"\n [class.placeholder]=\"selectedValue() === null || selectedValue() === undefined\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Dropdown Arrow -->\n <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6,9 12,15 18,9\" />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Menu -->\n @if (isOpen()) {\n <div\n class=\"tn-select-dropdown\"\n role=\"listbox\"\n [attr.id]=\"'tn-select-dropdown-' + testId()\">\n\n <!-- Options List -->\n <div class=\"tn-select-options\">\n <!-- Regular Options -->\n @for (option of options(); track $index) {\n <div\n class=\"tn-select-option\"\n role=\"option\"\n [attr.tabindex]=\"option.disabled ? null : 0\"\n [class.selected]=\"
|
|
4718
|
+
], ngImport: i0, template: "<div class=\"tn-select-container\" [attr.data-testid]=\"testId()\">\n <!-- Select Trigger -->\n <div\n class=\"tn-select-trigger\"\n role=\"combobox\"\n tabindex=\"0\"\n [class.disabled]=\"isDisabled()\"\n [class.open]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + testId() : null\"\n [attr.aria-label]=\"placeholder()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n\n <!-- Display Text -->\n <span\n class=\"tn-select-text\"\n [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Dropdown Arrow -->\n <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6,9 12,15 18,9\" />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Menu -->\n @if (isOpen()) {\n <div\n class=\"tn-select-dropdown\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple()\"\n [attr.id]=\"'tn-select-dropdown-' + testId()\">\n\n <!-- Options List -->\n <div class=\"tn-select-options\">\n <!-- Regular Options -->\n @for (option of options(); track $index) {\n <div\n class=\"tn-select-option\"\n role=\"option\"\n [attr.tabindex]=\"option.disabled ? null : 0\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.disabled]=\"option.disabled\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onOptionClick(option)\"\n (keydown.enter)=\"onOptionClick(option)\"\n (keydown.space)=\"onOptionClick(option)\">\n @if (multiple()) {\n <tn-checkbox\n class=\"tn-select-check\"\n label=\"\"\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"true\"\n [hideLabel]=\"true\" />\n }\n {{ option.label }}\n </div>\n }\n\n <!-- Option Groups -->\n @for (group of optionGroups(); track $index; let isFirst = $first) {\n <!-- Group Separator (not shown before first group if we have regular options) -->\n @if (!isFirst || options().length > 0) {\n <div\n class=\"tn-select-separator\"\n role=\"separator\">\n </div>\n }\n\n <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + testId() + '-' + $index\">\n <!-- Group Label -->\n <div\n class=\"tn-select-group-label\"\n [attr.id]=\"'tn-select-group-' + testId() + '-' + $index\"\n [class.disabled]=\"group.disabled\">\n {{ group.label }}\n </div>\n\n <!-- Group Options -->\n @for (option of group.options; track $index) {\n <div\n class=\"tn-select-option\"\n role=\"option\"\n [attr.tabindex]=\"option.disabled || group.disabled ? null : 0\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.disabled]=\"option.disabled || group.disabled\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled || group.disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onOptionClick(option, !!group.disabled)\"\n (keydown.enter)=\"onOptionClick(option, !!group.disabled)\"\n (keydown.space)=\"onOptionClick(option, !!group.disabled)\">\n @if (multiple()) {\n <tn-checkbox\n class=\"tn-select-check\"\n label=\"\"\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"true\"\n [hideLabel]=\"true\" />\n }\n {{ option.label }}\n </div>\n }\n </div>\n }\n\n <!-- No Options Message -->\n @if (!hasAnyOptions()) {\n <div class=\"tn-select-no-options\">\n No options available\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:200px;overflow:hidden}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:200px}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa)!important;color:var(--tn-fg1, #212529)}.tn-select-option.selected:hover{background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"], dependencies: [{ kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }] });
|
|
4479
4719
|
}
|
|
4480
4720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSelectComponent, decorators: [{
|
|
4481
4721
|
type: Component,
|
|
4482
|
-
args: [{ selector: 'tn-select', standalone: true, imports: [], providers: [
|
|
4722
|
+
args: [{ selector: 'tn-select', standalone: true, imports: [TnCheckboxComponent], providers: [
|
|
4483
4723
|
{
|
|
4484
4724
|
provide: NG_VALUE_ACCESSOR,
|
|
4485
4725
|
useExisting: forwardRef(() => TnSelectComponent),
|
|
4486
4726
|
multi: true
|
|
4487
4727
|
}
|
|
4488
|
-
], template: "<div class=\"tn-select-container\" [attr.data-testid]=\"testId()\">\n <!-- Select Trigger -->\n <div\n class=\"tn-select-trigger\"\n role=\"combobox\"\n tabindex=\"0\"\n [class.disabled]=\"isDisabled()\"\n [class.open]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + testId() : null\"\n [attr.aria-label]=\"placeholder()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n\n <!-- Display Text -->\n <span\n class=\"tn-select-text\"\n [class.placeholder]=\"selectedValue() === null || selectedValue() === undefined\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Dropdown Arrow -->\n <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6,9 12,15 18,9\" />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Menu -->\n @if (isOpen()) {\n <div\n class=\"tn-select-dropdown\"\n role=\"listbox\"\n [attr.id]=\"'tn-select-dropdown-' + testId()\">\n\n <!-- Options List -->\n <div class=\"tn-select-options\">\n <!-- Regular Options -->\n @for (option of options(); track $index) {\n <div\n class=\"tn-select-option\"\n role=\"option\"\n [attr.tabindex]=\"option.disabled ? null : 0\"\n [class.selected]=\"
|
|
4489
|
-
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
4728
|
+
], template: "<div class=\"tn-select-container\" [attr.data-testid]=\"testId()\">\n <!-- Select Trigger -->\n <div\n class=\"tn-select-trigger\"\n role=\"combobox\"\n tabindex=\"0\"\n [class.disabled]=\"isDisabled()\"\n [class.open]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + testId() : null\"\n [attr.aria-label]=\"placeholder()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeydown($event)\">\n\n <!-- Display Text -->\n <span\n class=\"tn-select-text\"\n [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Dropdown Arrow -->\n <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6,9 12,15 18,9\" />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Menu -->\n @if (isOpen()) {\n <div\n class=\"tn-select-dropdown\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple()\"\n [attr.id]=\"'tn-select-dropdown-' + testId()\">\n\n <!-- Options List -->\n <div class=\"tn-select-options\">\n <!-- Regular Options -->\n @for (option of options(); track $index) {\n <div\n class=\"tn-select-option\"\n role=\"option\"\n [attr.tabindex]=\"option.disabled ? null : 0\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.disabled]=\"option.disabled\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onOptionClick(option)\"\n (keydown.enter)=\"onOptionClick(option)\"\n (keydown.space)=\"onOptionClick(option)\">\n @if (multiple()) {\n <tn-checkbox\n class=\"tn-select-check\"\n label=\"\"\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"true\"\n [hideLabel]=\"true\" />\n }\n {{ option.label }}\n </div>\n }\n\n <!-- Option Groups -->\n @for (group of optionGroups(); track $index; let isFirst = $first) {\n <!-- Group Separator (not shown before first group if we have regular options) -->\n @if (!isFirst || options().length > 0) {\n <div\n class=\"tn-select-separator\"\n role=\"separator\">\n </div>\n }\n\n <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + testId() + '-' + $index\">\n <!-- Group Label -->\n <div\n class=\"tn-select-group-label\"\n [attr.id]=\"'tn-select-group-' + testId() + '-' + $index\"\n [class.disabled]=\"group.disabled\">\n {{ group.label }}\n </div>\n\n <!-- Group Options -->\n @for (option of group.options; track $index) {\n <div\n class=\"tn-select-option\"\n role=\"option\"\n [attr.tabindex]=\"option.disabled || group.disabled ? null : 0\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.disabled]=\"option.disabled || group.disabled\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled || group.disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onOptionClick(option, !!group.disabled)\"\n (keydown.enter)=\"onOptionClick(option, !!group.disabled)\"\n (keydown.space)=\"onOptionClick(option, !!group.disabled)\">\n @if (multiple()) {\n <tn-checkbox\n class=\"tn-select-check\"\n label=\"\"\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"true\"\n [hideLabel]=\"true\" />\n }\n {{ option.label }}\n </div>\n }\n </div>\n }\n\n <!-- No Options Message -->\n @if (!hasAnyOptions()) {\n <div class=\"tn-select-no-options\">\n No options available\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:200px;overflow:hidden}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:200px}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa)!important;color:var(--tn-fg1, #212529)}.tn-select-option.selected:hover{background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"] }]
|
|
4729
|
+
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], multiSelectionChange: [{ type: i0.Output, args: ["multiSelectionChange"] }] } });
|
|
4490
4730
|
|
|
4491
4731
|
/**
|
|
4492
4732
|
* Harness for interacting with tn-select in tests.
|
|
@@ -7890,7 +8130,7 @@ class TnTimeInputComponent {
|
|
|
7890
8130
|
useExisting: forwardRef(() => TnTimeInputComponent),
|
|
7891
8131
|
multi: true
|
|
7892
8132
|
}
|
|
7893
|
-
], ngImport: i0, template: "<tn-select\n [options]=\"timeSelectOptions()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [testId]=\"testId()\"\n [ngModel]=\"_value\"\n (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "disabled", "testId"], outputs: ["selectionChange"] }] });
|
|
8133
|
+
], ngImport: i0, template: "<tn-select\n [options]=\"timeSelectOptions()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [testId]=\"testId()\"\n [ngModel]=\"_value\"\n (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "disabled", "testId", "multiple", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
|
|
7894
8134
|
}
|
|
7895
8135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTimeInputComponent, decorators: [{
|
|
7896
8136
|
type: Component,
|
|
@@ -11305,5 +11545,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
11305
11545
|
* Generated bundle index. Do not edit.
|
|
11306
11546
|
*/
|
|
11307
11547
|
|
|
11308
|
-
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, 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 };
|
|
11548
|
+
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 };
|
|
11309
11549
|
//# sourceMappingURL=truenas-ui-components.mjs.map
|