@truenas/ui-components 0.4.2 → 0.4.3

package/fesm2022/truenas-ui-components.mjs

@@ -6108,6 +6108,12 @@ class TnSlideToggleComponent {
         this.formDisabled.set(isDisabled);
     }
     onToggleChange(event) {
+        // The bubbling native change would reach ancestor (change) bindings in
+        // addition to the component's `change` output — Ivy invokes the binding for
+        // both, firing every listener twice per toggle. The output is the single
+        // public event, so the native event stops here. (This component always
+        // stopped it — unlike checkbox/radio it was never affected — the comment
+        // and the regression spec keep it that way.)
         event.stopPropagation();
         const target = event.target;
         const checked = target.checked;
@@ -6559,6 +6565,11 @@ class TnCheckboxComponent {
         this.formDisabled.set(isDisabled);
     }
     onCheckboxChange(event) {
+        // The bubbling native change would reach ancestor (change) bindings in
+        // addition to the component's `change` output — Ivy invokes the binding for
+        // both, firing every listener twice per toggle. The output is the single
+        // public event, so the native event stops here.
+        event.stopPropagation();
         const target = event.target;
         const checked = target.checked;
         this.internalChecked.set(checked);
@@ -6852,6 +6863,11 @@ class TnRadioComponent {
         this.formDisabled.set(isDisabled);
     }
     onRadioChange(event) {
+        // The bubbling native change would reach ancestor (change) bindings in
+        // addition to the component's `change` output — Ivy invokes the binding for
+        // both, firing every listener twice per toggle. The output is the single
+        // public event, so the native event stops here.
+        event.stopPropagation();
         const target = event.target;
         this.checked = target.checked;
         if (target.checked) {
@@ -17981,6 +17997,16 @@ class TnFilePickerComponent {
     startPath = input('/mnt', ...(ngDevMode ? [{ debugName: "startPath" }] : []));
     /** Restricts navigation — users cannot navigate above this path. */
     rootPath = input(undefined, ...(ngDevMode ? [{ debugName: "rootPath" }] : []));
+    /**
+     * Root against which the picker's VALUE is expressed — the form value,
+     * `selectionChange` payloads, and the text shown in the input. Browsing
+     * (`rootPath`, `startPath`, `callbacks`, `selectPath`) keeps absolute paths;
+     * the mapping applies only at the value boundary. E.g. with
+     * `valueRoot="/mnt"`, selecting `/mnt/tank/child` shows and emits the
+     * dataset name `tank/child` instead of the mountpoint path. Typed input is
+     * interpreted in the same value space (absolute paths still pass through).
+     */
+    valueRoot = input(undefined, ...(ngDevMode ? [{ debugName: "valueRoot" }] : []));
     fileExtensions = input(undefined, ...(ngDevMode ? [{ debugName: "fileExtensions" }] : []));
     callbacks = input(undefined, ...(ngDevMode ? [{ debugName: "callbacks" }] : []));
     selectionChange = output();
@@ -18038,15 +18064,26 @@ class TnFilePickerComponent {
     }
     // ControlValueAccessor implementation
     writeValue(value) {
+        // The display is canonicalized into value space by round-tripping through
+        // the mapping: a consumer may write an absolute path while valueRoot is
+        // set (e.g. /mnt/tank with valueRoot="/mnt"), and echoing it verbatim
+        // would make the field silently flip to the canonical form (tank) on the
+        // next submit. Selection state keeps internal absolute paths either way;
+        // paths outside the value root round-trip unchanged.
         if (this.multiSelect()) {
-            this.selectedItems.set(Array.isArray(value) ? value : value ? [value] : []);
-            // For multi-select, show full paths separated by commas
-            this.selectedPath.set(this.selectedItems().join(', '));
+            const values = Array.isArray(value) ? value : value ? [value] : [];
+            const items = values.map(entry => this.fromValueSpace(entry));
+            this.selectedItems.set(items);
+            // An entry equal to the value root maps to '' and leaves a stray comma
+            // in the join — accepted, per the documented "the value root is not a
+            // selectable value" caveat in toValueSpace.
+            this.selectedPath.set(items.map(item => this.toValueSpace(item)).join(', '));
         }
         else {
-            // Store the full path internally
-            this.selectedPath.set(typeof value === 'string' ? value : '');
-            this.selectedItems.set(value ? [typeof value === 'string' ? value : value[0]] : []);
+            const single = typeof value === 'string' ? value : value ? value[0] : '';
+            const item = single ? this.fromValueSpace(single) : '';
+            this.selectedItems.set(item ? [item] : []);
+            this.selectedPath.set(item ? this.toValueSpace(item) : '');
         }
     }
     registerOnChange(fn) {
@@ -18067,7 +18104,8 @@ class TnFilePickerComponent {
      */
     onPathCommit(event) {
         const target = event.target;
-        const path = target.value;
+        // Typed text is expressed in value space, like the text the input displays
+        const path = this.fromValueSpace(target.value);
         if (this.allowManualInput()) {
             // Clearing the input clears the selection
             if (!path) {
@@ -18167,15 +18205,16 @@ class TnFilePickerComponent {
         // Clear any existing error state
         this.hasError.set(false);
         if (this.multiSelect()) {
-            this.selectedPath.set(selected.join(', '));
-            this.onChange(selected);
-            this.selectionChange.emit(selected);
+            const values = selected.map(path => this.toValueSpace(path));
+            this.selectedPath.set(values.join(', '));
+            this.onChange(values);
+            this.selectionChange.emit(values);
         }
         else {
-            const path = selected[0];
-            this.selectedPath.set(path);
-            this.onChange(path);
-            this.selectionChange.emit(path);
+            const value = this.toValueSpace(selected[0]);
+            this.selectedPath.set(value);
+            this.onChange(value);
+            this.selectionChange.emit(value);
         }
         this.close();
     }
@@ -18310,18 +18349,51 @@ class TnFilePickerComponent {
     updateSelection(path) {
         // Clear any existing error state since popup selections are valid
         this.hasError.set(false);
+        const value = this.toValueSpace(path);
         if (this.multiSelect()) {
-            const selected = [path];
-            this.selectedItems.set(selected);
-            this.selectedPath.set(selected.join(', '));
-            this.onChange(selected);
+            this.selectedItems.set([path]);
+            this.selectedPath.set(value);
+            this.onChange([value]);
         }
         else {
-            this.selectedPath.set(path);
+            this.selectedPath.set(value);
             this.selectedItems.set([path]);
-            this.onChange(path);
+            this.onChange(value);
+        }
+        this.selectionChange.emit(this.multiSelect() ? [value] : value);
+    }
+    // Mirrors effectiveRootPath so both roots normalize trailing slashes once
+    normalizedValueRoot = computed(() => {
+        const valueRoot = this.valueRoot();
+        return valueRoot ? normalizeRootPath(valueRoot) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "normalizedValueRoot" }] : []));
+    /** Maps an internal absolute path into the `valueRoot`-relative value space. */
+    toValueSpace(path) {
+        const root = this.normalizedValueRoot();
+        if (!root) {
+            return path;
+        }
+        // The value root itself maps to '' — the same payload as a cleared
+        // selection, and writeValue('') cannot restore it. Deliberate: a value
+        // root is the container the values are named against (e.g. /mnt for
+        // dataset names), not a selectable value itself. Revisit this mapping
+        // before pairing valueRoot with a selectable root directory.
+        if (path === root) {
+            return '';
+        }
+        if (root === '/') {
+            return path.startsWith('/') ? path.slice(1) : path;
+        }
+        // Paths outside the value root (e.g. typed absolute paths) pass through
+        return path.startsWith(`${root}/`) ? path.slice(root.length + 1) : path;
+    }
+    /** Maps a `valueRoot`-relative value back into an internal absolute path. */
+    fromValueSpace(value) {
+        const root = this.normalizedValueRoot();
+        if (!root || !value || value.startsWith('/')) {
+            return value;
         }
-        this.selectionChange.emit(this.multiSelect() ? this.selectedItems() : path);
+        return root === '/' ? `/${value}` : `${root}/${value}`;
     }
     emitError(type, message, path) {
         this.hasError.set(true);
@@ -18382,7 +18454,7 @@ class TnFilePickerComponent {
         this.overlayRef.attach(this.portal);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: TnFilePickerComponent, isStandalone: true, selector: "tn-file-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, createActions: { classPropertyName: "createActions", publicName: "createActions", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, openOnClick: { classPropertyName: "openOnClick", publicName: "openOnClick", 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 }, startPath: { classPropertyName: "startPath", publicName: "startPath", isSignal: true, isRequired: false, transformFunction: null }, rootPath: { classPropertyName: "rootPath", publicName: "rootPath", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null }, callbacks: { classPropertyName: "callbacks", publicName: "callbacks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", pathChange: "pathChange", createAction: "createAction", error: "error" }, host: { properties: { "class.error": "hasError()" }, classAttribute: "tn-file-picker" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: TnFilePickerComponent, isStandalone: true, selector: "tn-file-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, createActions: { classPropertyName: "createActions", publicName: "createActions", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, openOnClick: { classPropertyName: "openOnClick", publicName: "openOnClick", 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 }, startPath: { classPropertyName: "startPath", publicName: "startPath", isSignal: true, isRequired: false, transformFunction: null }, rootPath: { classPropertyName: "rootPath", publicName: "rootPath", isSignal: true, isRequired: false, transformFunction: null }, valueRoot: { classPropertyName: "valueRoot", publicName: "valueRoot", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null }, callbacks: { classPropertyName: "callbacks", publicName: "callbacks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", pathChange: "pathChange", createAction: "createAction", error: "error" }, host: { properties: { "class.error": "hasError()" }, classAttribute: "tn-file-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnFilePickerComponent),
@@ -18410,7 +18482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         'class': 'tn-file-picker',
                         '[class.error]': 'hasError()'
                     }, 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>", 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, #dc3545)}.tn-file-picker-input.error:focus{border-color:var(--tn-error, #dc3545);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, #dc3545)}:host.error .tn-file-picker-input:focus{border-color:var(--tn-error, #dc3545);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"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], createActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "createActions", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], openOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnClick", 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 }] }], startPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPath", required: false }] }], rootPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootPath", required: false }] }], fileExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileExtensions", required: false }] }], callbacks: [{ type: i0.Input, args: [{ isSignal: true, alias: "callbacks", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pathChange: [{ type: i0.Output, args: ["pathChange"] }], createAction: [{ type: i0.Output, args: ["createAction"] }], error: [{ type: i0.Output, args: ["error"] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], filePickerTemplate: [{ type: i0.ViewChild, args: ['filePickerTemplate', { isSignal: true }] }] } });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], createActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "createActions", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], openOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnClick", 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 }] }], startPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPath", required: false }] }], rootPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootPath", required: false }] }], valueRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueRoot", required: false }] }], fileExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileExtensions", required: false }] }], callbacks: [{ type: i0.Input, args: [{ isSignal: true, alias: "callbacks", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pathChange: [{ type: i0.Output, args: ["pathChange"] }], createAction: [{ type: i0.Output, args: ["createAction"] }], error: [{ type: i0.Output, args: ["error"] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], filePickerTemplate: [{ type: i0.ViewChild, args: ['filePickerTemplate', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with tn-file-picker in tests.