@truenas/ui-components 0.8.13 → 0.8.14
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.
|
@@ -27491,6 +27491,8 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27491
27491
|
multiSelect = input(false, ...ngDevMode ? [{ debugName: "multiSelect" }] : /* istanbul ignore next */ []);
|
|
27492
27492
|
createActions = input([], ...ngDevMode ? [{ debugName: "createActions" }] : /* istanbul ignore next */ []);
|
|
27493
27493
|
allowManualInput = input(true, ...ngDevMode ? [{ debugName: "allowManualInput" }] : /* istanbul ignore next */ []);
|
|
27494
|
+
allowFreeText = input(false, ...ngDevMode ? [{ debugName: "allowFreeText" }] : /* istanbul ignore next */ []);
|
|
27495
|
+
ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
27494
27496
|
openOnClick = input(false, ...ngDevMode ? [{ debugName: "openOnClick" }] : /* istanbul ignore next */ []);
|
|
27495
27497
|
placeholder = input("Select file or folder", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
27496
27498
|
disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
|
|
@@ -27501,6 +27503,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27501
27503
|
fileExtensions = input(void 0, ...ngDevMode ? [{ debugName: "fileExtensions" }] : /* istanbul ignore next */ []);
|
|
27502
27504
|
callbacks = input(void 0, ...ngDevMode ? [{ debugName: "callbacks" }] : /* istanbul ignore next */ []);
|
|
27503
27505
|
selectionChange = output();
|
|
27506
|
+
itemSelectionChange = output();
|
|
27504
27507
|
pathChange = output();
|
|
27505
27508
|
createAction = output();
|
|
27506
27509
|
error = output();
|
|
@@ -27517,6 +27520,8 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27517
27520
|
loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
|
|
27518
27521
|
hasError = signal(false, ...ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []);
|
|
27519
27522
|
formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
|
|
27523
|
+
fieldAria = injectTnFormFieldAria(this.ariaLabel);
|
|
27524
|
+
listedItems = /* @__PURE__ */ new Map();
|
|
27520
27525
|
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
|
|
27521
27526
|
resolvedTestId = controlTestId(this.testId);
|
|
27522
27527
|
toggleTestId = computed(() => {
|
|
@@ -27561,6 +27566,11 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27561
27566
|
}
|
|
27562
27567
|
onPathCommit(event) {
|
|
27563
27568
|
const target = event.target;
|
|
27569
|
+
if (this.allowManualInput() && this.allowFreeText()) {
|
|
27570
|
+
this.commitFreeText(target.value);
|
|
27571
|
+
this.onTouched();
|
|
27572
|
+
return;
|
|
27573
|
+
}
|
|
27564
27574
|
const path = this.fromValueSpace(target.value);
|
|
27565
27575
|
if (this.allowManualInput()) {
|
|
27566
27576
|
if (!path) {
|
|
@@ -27584,6 +27594,18 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27584
27594
|
}
|
|
27585
27595
|
this.onTouched();
|
|
27586
27596
|
}
|
|
27597
|
+
commitFreeText(text) {
|
|
27598
|
+
let value;
|
|
27599
|
+
if (this.multiSelect()) value = text.split(",").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
|
|
27600
|
+
else value = text.trim() ? text : "";
|
|
27601
|
+
const entries = Array.isArray(value) ? value : value ? [value] : [];
|
|
27602
|
+
this.hasError.set(false);
|
|
27603
|
+
this.selectedItems.set(entries.map((entry) => this.fromValueSpace(entry.trim())));
|
|
27604
|
+
this.selectedPath.set(entries.join(", "));
|
|
27605
|
+
this.onChange(value);
|
|
27606
|
+
this.emitSelection(value);
|
|
27607
|
+
this.close();
|
|
27608
|
+
}
|
|
27587
27609
|
onInputClick() {
|
|
27588
27610
|
if (this.openOnClick() && !this.selectedPath()) this.openFilePicker();
|
|
27589
27611
|
}
|
|
@@ -27636,12 +27658,12 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27636
27658
|
const values = selected.map((path) => this.toValueSpace(path));
|
|
27637
27659
|
this.selectedPath.set(values.join(", "));
|
|
27638
27660
|
this.onChange(values);
|
|
27639
|
-
this.
|
|
27661
|
+
this.emitSelection(values);
|
|
27640
27662
|
} else {
|
|
27641
27663
|
const value = this.toValueSpace(selected[0]);
|
|
27642
27664
|
this.selectedPath.set(value);
|
|
27643
27665
|
this.onChange(value);
|
|
27644
|
-
this.
|
|
27666
|
+
this.emitSelection(value);
|
|
27645
27667
|
}
|
|
27646
27668
|
this.close();
|
|
27647
27669
|
}
|
|
@@ -27677,13 +27699,15 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27677
27699
|
this.selectedItems.set([]);
|
|
27678
27700
|
this.selectedPath.set("");
|
|
27679
27701
|
this.onChange(this.multiSelect() ? [] : "");
|
|
27680
|
-
this.
|
|
27702
|
+
this.emitSelection(this.multiSelect() ? [] : "");
|
|
27681
27703
|
}
|
|
27682
27704
|
async loadDirectory(path) {
|
|
27683
27705
|
const directoryChanged = path !== this.currentPath();
|
|
27684
27706
|
const cb = this.callbacks();
|
|
27685
27707
|
if (!cb?.getChildren) {
|
|
27686
|
-
this.
|
|
27708
|
+
const mockItems = this.getMockFileItems(path);
|
|
27709
|
+
this.indexListedItems(mockItems);
|
|
27710
|
+
this.fileItems.set(mockItems);
|
|
27687
27711
|
this.currentPath.set(path);
|
|
27688
27712
|
this.clearStalePendingSelection(directoryChanged);
|
|
27689
27713
|
this.pathChange.emit(path);
|
|
@@ -27691,8 +27715,9 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27691
27715
|
}
|
|
27692
27716
|
this.loading.set(true);
|
|
27693
27717
|
try {
|
|
27694
|
-
const items = await cb.getChildren(path);
|
|
27695
|
-
this.
|
|
27718
|
+
const items = await cb.getChildren(path) || [];
|
|
27719
|
+
this.indexListedItems(items);
|
|
27720
|
+
this.fileItems.set(items);
|
|
27696
27721
|
this.currentPath.set(path);
|
|
27697
27722
|
this.clearStalePendingSelection(directoryChanged);
|
|
27698
27723
|
this.pathChange.emit(path);
|
|
@@ -27743,7 +27768,18 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27743
27768
|
this.selectedItems.set([path]);
|
|
27744
27769
|
this.onChange(value);
|
|
27745
27770
|
}
|
|
27746
|
-
this.
|
|
27771
|
+
this.emitSelection(this.multiSelect() ? [value] : value);
|
|
27772
|
+
}
|
|
27773
|
+
emitSelection(value) {
|
|
27774
|
+
this.selectionChange.emit(value);
|
|
27775
|
+
const entries = Array.isArray(value) ? value : value ? [value] : [];
|
|
27776
|
+
this.itemSelectionChange.emit({
|
|
27777
|
+
value,
|
|
27778
|
+
items: entries.map((entry) => this.listedItems.get(this.fromValueSpace(entry.trim())) ?? null)
|
|
27779
|
+
});
|
|
27780
|
+
}
|
|
27781
|
+
indexListedItems(items) {
|
|
27782
|
+
for (const item of items) this.listedItems.set(item.path, item);
|
|
27747
27783
|
}
|
|
27748
27784
|
normalizedValueRoot = computed(() => {
|
|
27749
27785
|
const valueRoot = this.valueRoot();
|
|
@@ -27863,6 +27899,20 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27863
27899
|
isRequired: false,
|
|
27864
27900
|
transformFunction: null
|
|
27865
27901
|
},
|
|
27902
|
+
allowFreeText: {
|
|
27903
|
+
classPropertyName: "allowFreeText",
|
|
27904
|
+
publicName: "allowFreeText",
|
|
27905
|
+
isSignal: true,
|
|
27906
|
+
isRequired: false,
|
|
27907
|
+
transformFunction: null
|
|
27908
|
+
},
|
|
27909
|
+
ariaLabel: {
|
|
27910
|
+
classPropertyName: "ariaLabel",
|
|
27911
|
+
publicName: "ariaLabel",
|
|
27912
|
+
isSignal: true,
|
|
27913
|
+
isRequired: false,
|
|
27914
|
+
transformFunction: null
|
|
27915
|
+
},
|
|
27866
27916
|
openOnClick: {
|
|
27867
27917
|
classPropertyName: "openOnClick",
|
|
27868
27918
|
publicName: "openOnClick",
|
|
@@ -27929,6 +27979,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27929
27979
|
},
|
|
27930
27980
|
outputs: {
|
|
27931
27981
|
selectionChange: "selectionChange",
|
|
27982
|
+
itemSelectionChange: "itemSelectionChange",
|
|
27932
27983
|
pathChange: "pathChange",
|
|
27933
27984
|
createAction: "createAction",
|
|
27934
27985
|
error: "error"
|
|
@@ -27957,7 +28008,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
|
|
|
27957
28008
|
isSignal: true
|
|
27958
28009
|
}],
|
|
27959
28010
|
ngImport: i0,
|
|
27960
|
-
template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n <input\n type=\"text\"\n class=\"tn-file-picker-input\"\n tnTestIdType=\"input\"\n [tnTestId]=\"resolvedTestId()\"\n [class.error]=\"hasError()\"\n [value]=\"selectedPath()\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"!allowManualInput()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onInputClick()\"\n (change)=\"onPathCommit($event)\">\n\n <button\n type=\"button\"\n class=\"tn-file-picker-toggle\"\n aria-label=\"Open file picker\"\n tnTestIdType=\"button\"\n [tnTestId]=\"toggleTestId()\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\">\n <tn-icon name=\"folder\" library=\"mdi\" />\n </button>\n </div>\n \n <ng-template #filePickerTemplate>\n <tn-file-picker-popup\n class=\"tn-file-picker-popup\"\n tnTestIdType=\"file-picker-popup\"\n [tnTestId]=\"resolvedTestId()\"\n [testIdBase]=\"resolvedTestId()\"\n [mode]=\"mode()\"\n [multiSelect]=\"multiSelect()\"\n [createActions]=\"createActions()\"\n [currentPath]=\"currentPath()\"\n [rootPath]=\"effectiveRootPath()\"\n [fileItems]=\"fileItems()\"\n [selectedItems]=\"selectedItems()\"\n [loading]=\"loading()\"\n [fileExtensions]=\"fileExtensions()\"\n (itemClick)=\"onItemClick($event)\"\n (itemDoubleClick)=\"onItemDoubleClick($event)\"\n (pathNavigate)=\"navigateToPath($event)\"\n (createAction)=\"createAction.emit($event)\"\n (created)=\"onCreated($event)\"\n (clearSelection)=\"onClearSelection()\"\n (submit)=\"onSubmit()\"\n (cancel)=\"onCancel()\"\n (close)=\"close()\" />\n </ng-template>\n</div>",
|
|
28011
|
+
template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n <input\n type=\"text\"\n class=\"tn-file-picker-input\"\n tnTestIdType=\"input\"\n [tnTestId]=\"resolvedTestId()\"\n [class.error]=\"hasError()\"\n [value]=\"selectedPath()\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"!allowManualInput()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n [attr.aria-describedby]=\"fieldAria.describedby()\"\n [attr.aria-invalid]=\"fieldAria.invalid()\"\n [attr.aria-required]=\"fieldAria.required()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onInputClick()\"\n (change)=\"onPathCommit($event)\">\n\n <button\n type=\"button\"\n class=\"tn-file-picker-toggle\"\n aria-label=\"Open file picker\"\n tnTestIdType=\"button\"\n [tnTestId]=\"toggleTestId()\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\">\n <tn-icon name=\"folder\" library=\"mdi\" />\n </button>\n </div>\n \n <ng-template #filePickerTemplate>\n <tn-file-picker-popup\n class=\"tn-file-picker-popup\"\n tnTestIdType=\"file-picker-popup\"\n [tnTestId]=\"resolvedTestId()\"\n [testIdBase]=\"resolvedTestId()\"\n [mode]=\"mode()\"\n [multiSelect]=\"multiSelect()\"\n [createActions]=\"createActions()\"\n [currentPath]=\"currentPath()\"\n [rootPath]=\"effectiveRootPath()\"\n [fileItems]=\"fileItems()\"\n [selectedItems]=\"selectedItems()\"\n [loading]=\"loading()\"\n [fileExtensions]=\"fileExtensions()\"\n (itemClick)=\"onItemClick($event)\"\n (itemDoubleClick)=\"onItemDoubleClick($event)\"\n (pathNavigate)=\"navigateToPath($event)\"\n (createAction)=\"createAction.emit($event)\"\n (created)=\"onCreated($event)\"\n (clearSelection)=\"onClearSelection()\"\n (submit)=\"onSubmit()\"\n (cancel)=\"onCancel()\"\n (close)=\"close()\" />\n </ng-template>\n</div>",
|
|
27961
28012
|
styles: [":host{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-file-picker-container{position:relative;display:flex;align-items:center;width:100%}.tn-file-picker-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-file-picker-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;outline:none;box-sizing:border-box;font-family:inherit}.tn-file-picker-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-file-picker-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-file-picker-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-file-picker-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.tn-file-picker-input.error:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}.tn-file-picker-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;color:var(--tn-fg1);border-radius:4px}.tn-file-picker-toggle:hover{background:var(--tn-bg2, #f0f0f0)}.tn-file-picker-toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-file-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-file-picker-toggle tn-icon{font-size:var(--tn-icon-md, 20px)}:host:focus-within .tn-file-picker-input{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}:host.error .tn-file-picker-input{border-color:var(--tn-error, var(--tn-red, #bd2626))}:host.error .tn-file-picker-input:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}@media(prefers-reduced-motion:reduce){.tn-file-picker-input,.tn-file-picker-toggle,.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){.tn-file-picker-input{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host ::ng-deep .tn-file-picker-overlay .tn-file-picker-dialog{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"],
|
|
27962
28013
|
dependencies: [
|
|
27963
28014
|
{
|
|
@@ -28056,7 +28107,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28056
28107
|
"[class.error]": "hasError()",
|
|
28057
28108
|
"(keydown)": "onHostKeydown($event)"
|
|
28058
28109
|
},
|
|
28059
|
-
template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n <input\n type=\"text\"\n class=\"tn-file-picker-input\"\n tnTestIdType=\"input\"\n [tnTestId]=\"resolvedTestId()\"\n [class.error]=\"hasError()\"\n [value]=\"selectedPath()\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"!allowManualInput()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onInputClick()\"\n (change)=\"onPathCommit($event)\">\n\n <button\n type=\"button\"\n class=\"tn-file-picker-toggle\"\n aria-label=\"Open file picker\"\n tnTestIdType=\"button\"\n [tnTestId]=\"toggleTestId()\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\">\n <tn-icon name=\"folder\" library=\"mdi\" />\n </button>\n </div>\n \n <ng-template #filePickerTemplate>\n <tn-file-picker-popup\n class=\"tn-file-picker-popup\"\n tnTestIdType=\"file-picker-popup\"\n [tnTestId]=\"resolvedTestId()\"\n [testIdBase]=\"resolvedTestId()\"\n [mode]=\"mode()\"\n [multiSelect]=\"multiSelect()\"\n [createActions]=\"createActions()\"\n [currentPath]=\"currentPath()\"\n [rootPath]=\"effectiveRootPath()\"\n [fileItems]=\"fileItems()\"\n [selectedItems]=\"selectedItems()\"\n [loading]=\"loading()\"\n [fileExtensions]=\"fileExtensions()\"\n (itemClick)=\"onItemClick($event)\"\n (itemDoubleClick)=\"onItemDoubleClick($event)\"\n (pathNavigate)=\"navigateToPath($event)\"\n (createAction)=\"createAction.emit($event)\"\n (created)=\"onCreated($event)\"\n (clearSelection)=\"onClearSelection()\"\n (submit)=\"onSubmit()\"\n (cancel)=\"onCancel()\"\n (close)=\"close()\" />\n </ng-template>\n</div>",
|
|
28110
|
+
template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n <input\n type=\"text\"\n class=\"tn-file-picker-input\"\n tnTestIdType=\"input\"\n [tnTestId]=\"resolvedTestId()\"\n [class.error]=\"hasError()\"\n [value]=\"selectedPath()\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"!allowManualInput()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n [attr.aria-describedby]=\"fieldAria.describedby()\"\n [attr.aria-invalid]=\"fieldAria.invalid()\"\n [attr.aria-required]=\"fieldAria.required()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onInputClick()\"\n (change)=\"onPathCommit($event)\">\n\n <button\n type=\"button\"\n class=\"tn-file-picker-toggle\"\n aria-label=\"Open file picker\"\n tnTestIdType=\"button\"\n [tnTestId]=\"toggleTestId()\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\">\n <tn-icon name=\"folder\" library=\"mdi\" />\n </button>\n </div>\n \n <ng-template #filePickerTemplate>\n <tn-file-picker-popup\n class=\"tn-file-picker-popup\"\n tnTestIdType=\"file-picker-popup\"\n [tnTestId]=\"resolvedTestId()\"\n [testIdBase]=\"resolvedTestId()\"\n [mode]=\"mode()\"\n [multiSelect]=\"multiSelect()\"\n [createActions]=\"createActions()\"\n [currentPath]=\"currentPath()\"\n [rootPath]=\"effectiveRootPath()\"\n [fileItems]=\"fileItems()\"\n [selectedItems]=\"selectedItems()\"\n [loading]=\"loading()\"\n [fileExtensions]=\"fileExtensions()\"\n (itemClick)=\"onItemClick($event)\"\n (itemDoubleClick)=\"onItemDoubleClick($event)\"\n (pathNavigate)=\"navigateToPath($event)\"\n (createAction)=\"createAction.emit($event)\"\n (created)=\"onCreated($event)\"\n (clearSelection)=\"onClearSelection()\"\n (submit)=\"onSubmit()\"\n (cancel)=\"onCancel()\"\n (close)=\"close()\" />\n </ng-template>\n</div>",
|
|
28060
28111
|
styles: [":host{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-file-picker-container{position:relative;display:flex;align-items:center;width:100%}.tn-file-picker-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-file-picker-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;outline:none;box-sizing:border-box;font-family:inherit}.tn-file-picker-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-file-picker-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-file-picker-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-file-picker-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.tn-file-picker-input.error:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}.tn-file-picker-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;color:var(--tn-fg1);border-radius:4px}.tn-file-picker-toggle:hover{background:var(--tn-bg2, #f0f0f0)}.tn-file-picker-toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-file-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-file-picker-toggle tn-icon{font-size:var(--tn-icon-md, 20px)}:host:focus-within .tn-file-picker-input{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}:host.error .tn-file-picker-input{border-color:var(--tn-error, var(--tn-red, #bd2626))}:host.error .tn-file-picker-input:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}@media(prefers-reduced-motion:reduce){.tn-file-picker-input,.tn-file-picker-toggle,.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){.tn-file-picker-input{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host ::ng-deep .tn-file-picker-overlay .tn-file-picker-dialog{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"]
|
|
28061
28112
|
}]
|
|
28062
28113
|
}],
|
|
@@ -28093,6 +28144,22 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28093
28144
|
required: false
|
|
28094
28145
|
}]
|
|
28095
28146
|
}],
|
|
28147
|
+
allowFreeText: [{
|
|
28148
|
+
type: i0.Input,
|
|
28149
|
+
args: [{
|
|
28150
|
+
isSignal: true,
|
|
28151
|
+
alias: "allowFreeText",
|
|
28152
|
+
required: false
|
|
28153
|
+
}]
|
|
28154
|
+
}],
|
|
28155
|
+
ariaLabel: [{
|
|
28156
|
+
type: i0.Input,
|
|
28157
|
+
args: [{
|
|
28158
|
+
isSignal: true,
|
|
28159
|
+
alias: "ariaLabel",
|
|
28160
|
+
required: false
|
|
28161
|
+
}]
|
|
28162
|
+
}],
|
|
28096
28163
|
openOnClick: [{
|
|
28097
28164
|
type: i0.Input,
|
|
28098
28165
|
args: [{
|
|
@@ -28169,6 +28236,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28169
28236
|
type: i0.Output,
|
|
28170
28237
|
args: ["selectionChange"]
|
|
28171
28238
|
}],
|
|
28239
|
+
itemSelectionChange: [{
|
|
28240
|
+
type: i0.Output,
|
|
28241
|
+
args: ["itemSelectionChange"]
|
|
28242
|
+
}],
|
|
28172
28243
|
pathChange: [{
|
|
28173
28244
|
type: i0.Output,
|
|
28174
28245
|
args: ["pathChange"]
|
|
@@ -28204,9 +28275,10 @@ var TnFilePickerHarness = class TnFilePickerHarness extends ComponentHarness {
|
|
|
28204
28275
|
return await (await this._input()).getProperty("value") ?? "";
|
|
28205
28276
|
}
|
|
28206
28277
|
async setValue(value) {
|
|
28278
|
+
const text = Array.isArray(value) ? value.join(", ") : value;
|
|
28207
28279
|
const input = await this._input();
|
|
28208
28280
|
await input.clear();
|
|
28209
|
-
if (
|
|
28281
|
+
if (text) await input.sendKeys(text);
|
|
28210
28282
|
return input.dispatchEvent("change");
|
|
28211
28283
|
}
|
|
28212
28284
|
async getPlaceholder() {
|