@truenas/ui-components 0.3.5 → 0.3.6

package/fesm2022/truenas-ui-components.mjs

@@ -4409,6 +4409,16 @@ class TnChipInputComponent {
     separatorKeys = input(['Enter', ','], ...(ngDevMode ? [{ debugName: "separatorKeys" }] : []));
     /** Commit a pending (non-empty) text value as a chip when the field loses focus. */
     addOnBlur = input(false, ...(ngDevMode ? [{ debugName: "addOnBlur" }] : []));
+    /**
+     * Whether free text not present in `suggestions` may be committed. Defaults to
+     * `true` — any typed value becomes a chip. Set `false` to restrict the field
+     * to its suggestion list (a "pick from the list" control): a commit only
+     * succeeds when the text matches a suggestion (case-insensitively, committing
+     * the suggestion's canonical casing); unmatched text is discarded. Mirrors
+     * `tn-autocomplete`'s `allowCustomValue`. With no `suggestions`, nothing can be
+     * added.
+     */
+    allowCustomValue = input(true, ...(ngDevMode ? [{ debugName: "allowCustomValue" }] : []));
     /**
      * Allow the same value to be added more than once. Off by default.
      * Duplicate detection is exact-match (case-sensitive), so with this off
@@ -4637,10 +4647,20 @@ class TnChipInputComponent {
         return event.key === 'Enter' || this.separatorKeys().includes(event.key);
     }
     addChip(raw) {
-        const value = (raw ?? '').trim();
+        let value = (raw ?? '').trim();
         if (!value || this.isDisabled() || !this.canAddMore()) {
             return;
         }
+        if (!this.allowCustomValue()) {
+            // Restricted to the suggestion list: commit the canonical suggestion when
+            // the text matches one (case-insensitively), otherwise discard it.
+            const match = this.suggestions().find((suggestion) => suggestion.toLowerCase() === value.toLowerCase());
+            if (!match) {
+                this.clearInput();
+                return;
+            }
+            value = match;
+        }
         if (!this.allowDuplicates() && this.values().includes(value)) {
             this.clearInput();
             return;
@@ -4719,7 +4739,7 @@ class TnChipInputComponent {
         this.overlayRef = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnChipInputComponent, isStandalone: true, selector: "tn-chip-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, maxChips: { classPropertyName: "maxChips", publicName: "maxChips", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipAdded: "chipAdded", chipRemoved: "chipRemoved", searchChange: "searchChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnChipInputComponent, isStandalone: true, selector: "tn-chip-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, maxChips: { classPropertyName: "maxChips", publicName: "maxChips", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipAdded: "chipAdded", chipRemoved: "chipRemoved", searchChange: "searchChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnChipInputComponent),
@@ -4736,7 +4756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             multi: true,
                         },
                     ], template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"value\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track suggestion) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separatorKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKeys", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], chipAdded: [{ type: i0.Output, args: ["chipAdded"] }], chipRemoved: [{ type: i0.Output, args: ["chipRemoved"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separatorKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKeys", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], chipAdded: [{ type: i0.Output, args: ["chipAdded"] }], chipRemoved: [{ type: i0.Output, args: ["chipRemoved"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with `tn-chip-input` in tests. Reads the committed