@limetech/lime-elements 39.25.0 → 39.27.0

package/dist/collection/components/picker/picker.js

@@ -1,3 +1,4 @@
+import translate from "../../global/translations";
 import { h, } from "@stencil/core";
 import { isDescendant } from "../../util/dom";
 import { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, TAB } from "../../util/keycodes";
@@ -10,11 +11,13 @@ const DEFAULT_SEARCHER_MAX_RESULTS = 20;
 /**
  * @exampleComponent limel-example-picker-basic
  * @exampleComponent limel-example-picker-multiple
+ * @exampleComponent limel-example-picker-non-removable
  * @exampleComponent limel-example-picker-icons
  * @exampleComponent limel-example-picker-pictures
  * @exampleComponent limel-example-picker-value-as-object
  * @exampleComponent limel-example-picker-value-as-object-with-actions
  * @exampleComponent limel-example-picker-empty-suggestions
+ * @exampleComponent limel-example-picker-empty-result-message
  * @exampleComponent limel-example-picker-leading-icon
  * @exampleComponent limel-example-picker-static-actions
  * @exampleComponent limel-example-picker-sections
@@ -31,6 +34,12 @@ export class Picker {
          * but allow interaction with existing items.
          */
         this.readonly = false;
+        /**
+         * Defines the language for translations. Affects the labels
+         * rendered by the picker itself, such as the "Results matching"
+         * header shown above the suggestion list while the user is typing.
+         */
+        this.language = 'en';
         /**
          * True if the control requires a value
          */
@@ -111,7 +120,7 @@ export class Picker {
             return {
                 id: `${valueId}`,
                 text: listItem.text,
-                removable: true,
+                removable: listItem.removable !== false,
                 icon: name ? { name: name, color: color } : undefined,
                 image: listItem.image,
                 value: listItem,
@@ -123,7 +132,7 @@ export class Picker {
                 this.loading = true;
             });
             const searcher = this.searcher || this.defaultSearcher;
-            const result = (await searcher(this.textValue));
+            const result = await searcher(this.textValue);
             // If the search function resolves immediately,
             // the loading spinner will not be shown.
             clearTimeout(timeoutId);
@@ -145,7 +154,6 @@ export class Picker {
         };
         this.handleTextInput = this.handleTextInput.bind(this);
         this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
-        this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);
         this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.handleInteract = this.handleInteract.bind(this);
@@ -189,7 +197,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '92d3884770f8e3ce3c747044ab9e6061bc595b1a', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: '8aaf0ce641e0c93e4f6b8066a9575de17432f973', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }
@@ -258,7 +266,14 @@ export class Picker {
             return this.renderSpinner();
         }
         if (!((_a = this.items) === null || _a === void 0 ? void 0 : _a.length)) {
-            return this.renderEmptyMessage();
+            // Only show "no matching results" when the user actually has
+            // a query in flight. Without this guard, the message would
+            // also render right after Esc clears the input, leaving the
+            // dropdown stuck in an "empty result" state.
+            if (this.textValue !== '') {
+                return this.renderEmptyMessage();
+            }
+            return;
         }
         return this.renderListResult();
     }
@@ -281,22 +296,32 @@ export class Picker {
             } }, h("limel-spinner", { limeBranded: false })));
     }
     renderEmptyMessage() {
-        if (!this.emptyResultMessage) {
-            return;
-        }
+        const text = this.emptyResultMessage ||
+            translate.get('picker.no-matching-results', this.language, {
+                query: this.textValue,
+            });
         const style = {
             color: 'rgb(var(--contrast-1100))',
-            'text-align': 'center',
+            textAlign: 'center',
+            fontSize: 'var(--limel-theme-default-font-size)',
             margin: '0.5rem 1rem',
         };
-        return h("p", { style: style }, this.emptyResultMessage);
+        return h("p", { style: style }, text);
     }
     renderListResult() {
         return (h("limel-list", { badgeIcons: this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
     }
     onListKeyDown(event) {
-        const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
-        if (keyFound) {
+        if (event.key === ESCAPE) {
+            // Stop bubble; otherwise menu-surface also emits `dismiss`
+            // and triggers a duplicate clear via handleCloseMenu.
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleEscape();
+            this.chipSet.setFocus();
+            return;
+        }
+        if ([TAB, ENTER].includes(event.key)) {
             this.chipSet.setFocus();
         }
     }
@@ -343,22 +368,30 @@ export class Picker {
      * @param event - event
      */
     handleListChange(event) {
-        var _a;
+        var _a, _b, _c;
         event.stopPropagation();
         if (!this.value || this.value !== event.detail) {
             let newValue = event.detail;
             if (this.multiple) {
-                newValue = [
-                    ...this.value,
-                    event.detail,
-                ];
+                const currentValue = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+                newValue = [...currentValue, event.detail];
             }
             this.change.emit(newValue);
-            this.items = [];
+            if (this.multiple) {
+                const remaining = this.items.filter((item) => item !== event.detail);
+                this.items = this.hasPickableItems(remaining) ? remaining : [];
+            }
+            else {
+                // Single-pick: the search session ends with the pick, so
+                // wipe the input. (In multi-pick we deliberately keep the
+                // typed query so the user can keep adding matches.)
+                this.items = [];
+                this.textValue = '';
+                (_b = this.chipSet) === null || _b === void 0 ? void 0 : _b.emptyInput();
+            }
         }
         if (this.multiple) {
-            this.textValue = '';
-            (_a = this.chipSet) === null || _a === void 0 ? void 0 : _a.setFocus(true);
+            (_c = this.chipSet) === null || _c === void 0 ? void 0 : _c.setFocus();
         }
     }
     /**
@@ -414,6 +447,13 @@ export class Picker {
             !event.shiftKey;
         const isUp = event.key === ARROW_UP;
         const isDown = event.key === ARROW_DOWN;
+        const isEscape = event.key === ESCAPE;
+        if (isEscape) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleEscape();
+            return;
+        }
         if (!isForwardTab && !isUp && !isDown) {
             return;
         }
@@ -442,43 +482,76 @@ export class Picker {
             listElement.focus();
         }
     }
-    /**
-     * Key handler for the dropdown
-     *
-     * @param event - event
-     */
-    handleDropdownKeyDown(event) {
-        const isEscape = event.key === ESCAPE;
-        if (isEscape) {
-            event.preventDefault();
-            this.textValue = '';
-            this.chipSet.setFocus(true);
-        }
-    }
     handleSearchResult(query, result) {
+        var _a;
         if (query === this.textValue) {
-            this.items = result;
+            let nextItems = result;
             if (this.multiple) {
-                const values = this.value;
-                this.items = result.filter((item) => {
+                const values = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+                nextItems = result.filter((item) => {
+                    if ('separator' in item) {
+                        return true;
+                    }
                     return !values.includes(item);
                 });
             }
+            this.items = this.prependSearchHeader(query, nextItems);
             this.loading = false;
         }
     }
-    handleCloseMenu() {
-        if (this.items.length > 0) {
-            return;
+    hasPickableItems(items) {
+        return items.some((item) => !('separator' in item));
+    }
+    prependSearchHeader(query, items) {
+        if (query === '') {
+            return items;
+        }
+        if (!this.hasPickableItems(items)) {
+            return items;
         }
+        const text = translate.get('picker.results-matching', this.language, {
+            query: query,
+        });
+        return [{ separator: true, text: text }, ...items];
+    }
+    handleCloseMenu() {
         this.clearInputField();
     }
-    clearInputField() {
+    /**
+     * Shared prelude for any flow that ends the current search session:
+     * wipe the chip-set's visible text, reset the picker's `textValue`,
+     * and cancel any in-flight debounced search.
+     *
+     * Used by `clearInputField` (which then drops the dropdown
+     * entirely) and `resetSearchToDefault` (which re-runs the searcher
+     * with an empty query to repopulate the dropdown with defaults).
+     */
+    clearTextValue() {
         this.chipSet.emptyInput();
         this.textValue = '';
-        this.handleSearchResult('', []);
         this.debouncedSearch.cancel();
     }
+    clearInputField() {
+        this.clearTextValue();
+        this.handleSearchResult('', []);
+    }
+    resetSearchToDefault() {
+        this.clearTextValue();
+        this.search('');
+    }
+    /**
+     * Two-stage Esc: first press clears the typed query but keeps the
+     * dropdown open showing the default suggestions; a second press
+     * (with the query already empty) closes the dropdown.
+     */
+    handleEscape() {
+        if (this.textValue === '') {
+            this.clearInputField();
+        }
+        else {
+            this.resetSearchToDefault();
+        }
+    }
     static get is() { return "limel-picker"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
@@ -629,13 +702,40 @@ export class Picker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A message to display when the search returned an empty result"
+                    "text": "A message to display when the search returned an empty result.\n\nIf unset (or set to an empty string), the picker shows a\ndefault translated message (`No results matching \"X\"` in\nEnglish, where `X` is the current query) chosen by the\n`language` prop. Set this to override the default with custom\ntext \u2014 for example, when the picker's domain calls for more\nspecific wording like \"No matching participants found\"."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "empty-result-message"
             },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Languages",
+                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+                    "references": {
+                        "Languages": {
+                            "location": "import",
+                            "path": "../date-picker/date.types",
+                            "id": "src/components/date-picker/date.types.ts::Languages",
+                            "referenceLocation": "Languages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the language for translations. Affects the labels\nrendered by the picker itself, such as the \"Results matching\"\nheader shown above the suggestion list while the user is typing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -680,24 +780,14 @@ export class Picker {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ListItem<PickerValue> | Array<ListItem<PickerValue>>",
-                    "resolved": "ListItem<PickerValue> | ListItem<PickerValue>[]",
+                    "original": "PickerItem | PickerItem[]",
+                    "resolved": "PickerItem<PickerValue> | PickerItem<PickerValue>[]",
                     "references": {
-                        "ListItem": {
+                        "PickerItem": {
                             "location": "import",
-                            "path": "../list-item/list-item.types",
-                            "id": "src/components/list-item/list-item.types.ts::ListItem",
-                            "referenceLocation": "ListItem"
-                        },
-                        "PickerValue": {
-                            "location": "import",
-                            "path": "./value.types",
-                            "id": "src/components/picker/value.types.ts::PickerValue",
-                            "referenceLocation": "PickerValue"
-                        },
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
+                            "path": "../picker/picker-item.types",
+                            "id": "src/components/picker/picker-item.types.ts::PickerItem",
+                            "referenceLocation": "PickerItem"
                         }
                     }
                 },
@@ -715,7 +805,7 @@ export class Picker {
                 "mutable": false,
                 "complexType": {
                     "original": "Searcher",
-                    "resolved": "(query: string) => Promise<(ListSeparator | ListItem<any>)[]>",
+                    "resolved": "(query: string) => Promise<(ListSeparator | PickerItem<PickerValue>)[]>",
                     "references": {
                         "Searcher": {
                             "location": "import",
@@ -738,24 +828,14 @@ export class Picker {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Array<ListItem<PickerValue>>",
-                    "resolved": "ListItem<PickerValue>[]",
+                    "original": "PickerItem[]",
+                    "resolved": "PickerItem<PickerValue>[]",
                     "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
-                        },
-                        "ListItem": {
+                        "PickerItem": {
                             "location": "import",
-                            "path": "../list-item/list-item.types",
-                            "id": "src/components/list-item/list-item.types.ts::ListItem",
-                            "referenceLocation": "ListItem"
-                        },
-                        "PickerValue": {
-                            "location": "import",
-                            "path": "./value.types",
-                            "id": "src/components/picker/value.types.ts::PickerValue",
-                            "referenceLocation": "PickerValue"
+                            "path": "../picker/picker-item.types",
+                            "id": "src/components/picker/picker-item.types.ts::PickerItem",
+                            "referenceLocation": "PickerItem"
                         }
                     }
                 },
@@ -940,24 +1020,14 @@ export class Picker {
                     "text": "Fired when a new value has been selected from the picker"
                 },
                 "complexType": {
-                    "original": "ListItem<PickerValue> | Array<ListItem<PickerValue>>",
-                    "resolved": "ListItem<PickerValue> | ListItem<PickerValue>[]",
+                    "original": "PickerItem | PickerItem[]",
+                    "resolved": "PickerItem<PickerValue> | PickerItem<PickerValue>[]",
                     "references": {
-                        "ListItem": {
-                            "location": "import",
-                            "path": "../list-item/list-item.types",
-                            "id": "src/components/list-item/list-item.types.ts::ListItem",
-                            "referenceLocation": "ListItem"
-                        },
-                        "PickerValue": {
+                        "PickerItem": {
                             "location": "import",
-                            "path": "./value.types",
-                            "id": "src/components/picker/value.types.ts::PickerValue",
-                            "referenceLocation": "PickerValue"
-                        },
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
+                            "path": "../picker/picker-item.types",
+                            "id": "src/components/picker/picker-item.types.ts::PickerItem",
+                            "referenceLocation": "PickerItem"
                         }
                     }
                 }
@@ -972,20 +1042,14 @@ export class Picker {
                     "text": "Fired when clicking on a selected value"
                 },
                 "complexType": {
-                    "original": "ListItem<PickerValue>",
-                    "resolved": "ListItem<PickerValue>",
+                    "original": "PickerItem",
+                    "resolved": "PickerItem<PickerValue>",
                     "references": {
-                        "ListItem": {
-                            "location": "import",
-                            "path": "../list-item/list-item.types",
-                            "id": "src/components/list-item/list-item.types.ts::ListItem",
-                            "referenceLocation": "ListItem"
-                        },
-                        "PickerValue": {
+                        "PickerItem": {
                             "location": "import",
-                            "path": "./value.types",
-                            "id": "src/components/picker/value.types.ts::PickerValue",
-                            "referenceLocation": "PickerValue"
+                            "path": "../picker/picker-item.types",
+                            "id": "src/components/picker/picker-item.types.ts::PickerItem",
+                            "referenceLocation": "PickerItem"
                         }
                     }
                 }

package/dist/collection/interface.js

@@ -27,6 +27,7 @@ export * from './components/dynamic-label/label.types';
 export * from './components/list/list.types';
 export * from './components/menu/menu.types';
 export * from './components/picker/actions.types';
+export * from './components/picker/picker-item.types';
 export * from './components/picker/searcher.types';
 export * from './components/picker/value.types';
 export * from './components/progress-flow/progress-flow.types';

package/dist/collection/translations/da.js

@@ -106,4 +106,6 @@ Du kan fortsætte med at blokere billeder (e-mailen kan se ufuldstændig ud) ell
     'profile-picture.remove': 'Fjern valgt billede',
     'profile-picture.unsupported-preview.title': 'Ikke-understøttet billedformat',
     'profile-picture.unsupported-preview.description': 'Vi kan ikke vise det valgte billede i denne browser. Vælg venligst en anden billedfil.',
+    'picker.results-matching': 'Resultater der matcher "{ query }"',
+    'picker.no-matching-results': 'Ingen resultater der matcher "{ query }"',
 };

package/dist/collection/translations/de.js

@@ -106,4 +106,6 @@ Sie können Bilder weiterhin blockieren (die E-Mail kann unvollständig aussehen
     'profile-picture.remove': 'Ausgewähltes Bild entfernen',
     'profile-picture.unsupported-preview.title': 'Nicht unterstütztes Bildformat',
     'profile-picture.unsupported-preview.description': 'Wir können das ausgewählte Bild in diesem Browser nicht anzeigen. Bitte wählen Sie eine andere Bilddatei.',
+    'picker.results-matching': 'Ergebnisse passend zu "{ query }"',
+    'picker.no-matching-results': 'Keine Ergebnisse passend zu "{ query }"',
 };

package/dist/collection/translations/en.js

@@ -106,4 +106,6 @@ You can keep images blocked (the email may look incomplete), or load them if you
     'profile-picture.remove': 'Remove selected picture',
     'profile-picture.unsupported-preview.title': 'Unsupported image format',
     'profile-picture.unsupported-preview.description': 'We cannot display the selected image in this browser. Please select a different image file.',
+    'picker.results-matching': 'Results matching "{ query }"',
+    'picker.no-matching-results': 'No results matching "{ query }"',
 };

package/dist/collection/translations/fi.js

@@ -106,4 +106,6 @@ Voit pitää kuvat estettyinä (sähköposti voi näyttää puutteelliselta) tai
     'profile-picture.remove': 'Poista valittu kuva',
     'profile-picture.unsupported-preview.title': 'Tiedostomuoto ei ole tuettu',
     'profile-picture.unsupported-preview.description': 'Emme voi näyttää valittua kuvaa tässä selaimessa. Valitse jokin toinen kuvatiedosto.',
+    'picker.results-matching': 'Hakua "{ query }" vastaavat tulokset',
+    'picker.no-matching-results': 'Ei hakua "{ query }" vastaavia tuloksia',
 };

package/dist/collection/translations/fr.js

@@ -106,4 +106,6 @@ Vous pouvez laisser les images bloquées (l'e-mail peut sembler incomplet) ou le
     'profile-picture.remove': 'Supprimer l\u2019image sélectionnée',
     'profile-picture.unsupported-preview.title': "Format d'image non pris en charge",
     'profile-picture.unsupported-preview.description': "Nous ne pouvons pas afficher l'image sélectionnée dans ce navigateur. Veuillez sélectionner un autre fichier image.",
+    'picker.results-matching': 'Résultats correspondant à « { query } »',
+    'picker.no-matching-results': 'Aucun résultat correspondant à « { query } »',
 };

package/dist/collection/translations/nl.js

@@ -106,4 +106,6 @@ Je kunt afbeeldingen geblokkeerd houden (de e-mail kan er onvolledig uitzien) of
     'profile-picture.remove': 'Geselecteerde afbeelding verwijderen',
     'profile-picture.unsupported-preview.title': 'Niet-ondersteund afbeeldingsformaat',
     'profile-picture.unsupported-preview.description': 'We kunnen de geselecteerde afbeelding niet weergeven in deze browser. Selecteer een ander afbeeldingsbestand.',
+    'picker.results-matching': 'Resultaten die overeenkomen met "{ query }"',
+    'picker.no-matching-results': 'Geen resultaten die overeenkomen met "{ query }"',
 };

package/dist/collection/translations/no.js

@@ -106,4 +106,6 @@ Du kan fortsette å blokkere bilder (e-posten kan se ufullstendig ut), eller las
     'profile-picture.remove': 'Fjern valgt bilde',
     'profile-picture.unsupported-preview.title': 'Ustøttet bildeformat',
     'profile-picture.unsupported-preview.description': 'Vi kan ikke vise det valgte bildet i denne nettleseren. Vennligst velg en annen bildefil.',
+    'picker.results-matching': 'Resultater som matcher "{ query }"',
+    'picker.no-matching-results': 'Ingen resultater som matcher "{ query }"',
 };

package/dist/collection/translations/sv.js

@@ -106,4 +106,6 @@ Du kan fortsätta blockera bilder (e-posten kan se ofullständig ut) eller ladda
     'profile-picture.remove': 'Ta bort vald bild',
     'profile-picture.unsupported-preview.title': 'Formatet stöds inte',
     'profile-picture.unsupported-preview.description': 'Vi kan inte visa den valda bilden i den här webbläsaren. Välj en annan bildfil.',
+    'picker.results-matching': 'Resultat som matchar "{ query }"',
+    'picker.no-matching-results': 'Inga resultat som matchar "{ query }"',
 };