@duetds/components 6.2.3 → 6.2.5

package/lib/collection/components/duet-combobox/duet-combobox.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch, } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { Build, h, Host, } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
@@ -10,10 +10,6 @@ import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetComboBoxSelect } from "./duet-combobox-select";
 export class DuetCombobox {
   constructor() {
-    // Safari doesnt properly support aria-activedecendatn, the code associated with this bool is a workaround for that,
-    // this should be removed when Safari fixes the issue
-    // see: https://a11ysupport.io/tests/apg__aria-1-2-combobox-with-list-autocomplete-example#assertion-aria-aria-activedescendant_attribute-convey_value-aria-combobox_role-vo_macos-safari
-    this.isSafari = false;
     this.resizeObserver = new ResizeObserver(debounce(entries => {
       var _a, _b;
       // otherwise, something is wrong, expecting 1 element only
@@ -28,14 +24,8 @@ export class DuetCombobox {
     this.inputValue = "";
     this.selectionMsg = "";
     this.listOpen = false;
-    // the selected item is based upon the DuetComboboxItem.id value
     this.selectedItems = new Set();
-    // the activeItem number is based upon the array.index of the array stored in processedItems
     this.activeItem = undefined;
-    /**
-     * Placeholder defaults
-     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
-     */
     this.accessibleLabelDefaults = {
       en: {
         heading: "Select:",
@@ -53,29 +43,12 @@ export class DuetCombobox {
         itemFiltered: "{name}, ({current} av {total}, {hiddenItems} filtrerade)",
       },
     };
-    /**
-     * Hint text to display before the user types into the date picker input.
-     * @default   {
-     * heading: "Valitse:",
-     * item: "{0}, ({1}/{2})",
-     * itemFiltered: "{0}, ({1}/{2} - {3} suodatettu"
-     * }
-     */
     this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), getLanguage());
-    /**
-     * Theme of the combobox.
-     */
     this.theme = "";
-    /**
-     * Force the user to make a selection (typing things in the input field will only be used for list search)
-     */
     this.force = false;
-    /**
-     * A hook to overwrite how the values are displayed in the input field after a User select an item
-     * @example (item) => `${item.name} (${item.value})`
-     * @default undefined
-     */
+    this.items = undefined;
     this.formatter = (item) => item && item.name ? item.name : "";
+    this.value = undefined;
   }
   activeItemHandler(state) {
     this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
@@ -106,9 +79,6 @@ export class DuetCombobox {
     if (Build.isServer) {
       return;
     }
-    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
-      this.isSafari = true;
-    }
     this.items = this.processedItems = parsePossibleJSON(this.items);
     this.input = this.element.querySelector("duet-input");
     this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
@@ -208,7 +178,7 @@ export class DuetCombobox {
         component: "duet-combobox",
       });
     }
-    else if (isBlurred && this.selectedItems.size === 0) {
+    if (isBlurred && this.selectedItems.size === 0) {
       //if nothing is selected and a user clicks outside, we want the input field to clearly illustrate that nothing was selected
       if (this.force) {
         this.inputValue = "";
@@ -231,6 +201,7 @@ export class DuetCombobox {
     if (isEnterKey(e)) {
       e.preventDefault();
       this.selectActiveItem();
+      this.updateInputText(false);
       this.listOpen = false;
       return;
     }
@@ -284,7 +255,7 @@ export class DuetCombobox {
       return;
     }
     const item = items[this.activeItem];
-    this.selectionMsg = this.formatLabel(item, items.length, this.items.length);
+    this.selectionMsg = structuredClone(this.formatLabel(item, items.length, this.items.length));
   }
   //function that scrolls to the li element with the class "active"
   scrollToActive() {
@@ -312,14 +283,17 @@ export class DuetCombobox {
    */
   getFilteredItems() {
     // filter items based on user inputs
-    const filteredItems = this.processedItems.filter(item => 
-    // filter by name and value
-    // if value contains inputvalue
-    String(item.value).toLowerCase().includes(this.inputValue.toLowerCase()) ||
-      // if name contains input value
-      String(item.name).toLowerCase().includes(this.inputValue.toLowerCase()) ||
-      // if the item is selected
-      this.selectedItems.has(item.id));
+    const filteredItems = this.processedItems.filter(item => {
+      var _a, _b, _c, _d;
+      // filter by name and value
+      // if value contains inputvalue
+      return ((_a = String(item.value)) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith((_b = this.inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase())) ||
+        (
+        // if name contains input value
+        (_c = String(item.name)) === null || _c === void 0 ? void 0 : _c.toLowerCase().startsWith((_d = this.inputValue) === null || _d === void 0 ? void 0 : _d.toLowerCase())) ||
+        // if the item is selected
+        this.selectedItems.has(item.id);
+    });
     return this.sortFilteredItems(filteredItems);
   }
   /**
@@ -343,250 +317,264 @@ export class DuetCombobox {
    */
   render() {
     const selectElements = this.returnFilteredOrNonFiltered();
-    return (h(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": this.listOpen ? "duet-combobox-list-element" : undefined, "aria-haspopup": "listbox", class: {
+    return (h(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": "duet-combobox-list-element", "aria-haspopup": "listbox", class: {
         "duet-combobox": true,
         [`duet-theme-${this.theme}`]: true,
-      } },
-      h("slot", null),
-      this.isSafari && (h("duet-visually-hidden", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, this.selectionMsg)),
-      h("div", { role: "list", class: {
-          "duet-combobox-list": true,
-          open: this.listOpen,
-        }, ref: el => (this.listContainer = el) },
-        h("ul", { role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element", class: "listbox" }, this.processedItems &&
-          selectElements.map((item, index) => {
-            return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, this.returnFilteredOrNonFiltered().length, this.items.length) }));
-          })))));
+      } }, h("slot", null), h("div", { role: "list", class: {
+        "duet-combobox-list": true,
+        open: this.listOpen,
+      }, ref: el => (this.listContainer = el) }, h("ul", { class: {
+        "duet-combobox-listbox-open": this.listOpen,
+        "duet-combobox-listbox": true,
+      }, role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element" }, selectElements.map((item, index) => {
+      return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, this.returnFilteredOrNonFiltered().length, this.items.length) }));
+    })))));
   }
   static get is() { return "duet-combobox"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-combobox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-combobox.css"]
-  }; }
-  static get properties() { return {
-    "accessibleLabelDefaults": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLangObject | string",
-        "resolved": "DuetLangObject | string",
-        "references": {
-          "DuetLangObject": {
-            "location": "import",
-            "path": "../../utils/language-utils"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-combobox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-combobox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accessibleLabelDefaults": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject | string",
+          "resolved": "DuetLangObject | string",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
-          }],
-        "text": "Placeholder defaults"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
+            }],
+          "text": "Placeholder defaults"
+        },
+        "attribute": "accessible-label-defaults",
+        "reflect": false,
+        "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}, ({current} of {total})\",\n      itemFiltered: \"{name}, ({current} of {total}, {hiddenItems} filtered)\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}, ({current}/{total})\",\n      itemFiltered: \"{name}, ({current}/{total}, {hiddenItems} suodatettu)\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}, ({current} av {total})\",\n      itemFiltered: \"{name}, ({current} av {total}, {hiddenItems} filtrerade)\",\n    },\n  }"
       },
-      "attribute": "accessible-label-defaults",
-      "reflect": false,
-      "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}, ({current} of {total})\",\n      itemFiltered: \"{name}, ({current} of {total}, {hiddenItems} filtered)\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}, ({current}/{total})\",\n      itemFiltered: \"{name}, ({current}/{total}, {hiddenItems} suodatettu)\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}, ({current} av {total})\",\n      itemFiltered: \"{name}, ({current} av {total}, {hiddenItems} filtrerade)\",\n    },\n  }"
-    },
-    "accessibleLabels": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Record<string, string>",
-        "resolved": "{ [x: string]: string; }",
-        "references": {
-          "Record": {
-            "location": "global"
+      "accessibleLabels": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Record<string, string>",
+          "resolved": "{ [x: string]: string; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "{\nheading: \"Valitse:\",\nitem: \"{0}, ({1}/{2})\",\nitemFiltered: \"{0}, ({1}/{2} - {3} suodatettu\"\n}"
-          }],
-        "text": "Hint text to display before the user types into the date picker input."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{\nheading: \"Valitse:\",\nitem: \"{0}, ({1}/{2})\",\nitemFiltered: \"{0}, ({1}/{2} - {3} suodatettu\"\n}"
+            }],
+          "text": "Hint text to display before the user types into the date picker input."
+        },
+        "defaultValue": "getLocaleString(\n    parsePossibleJSON(this.accessibleLabelDefaults),\n    getLanguage()\n  )"
       },
-      "defaultValue": "getLocaleString(\n    parsePossibleJSON(this.accessibleLabelDefaults),\n    getLanguage()\n  )"
-    },
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the combobox."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "force": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Force the user to make a selection (typing things in the input field will only be used for list search)"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the combobox."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "force",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "items": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "force": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Force the user to make a selection (typing things in the input field will only be used for list search)"
+        },
+        "attribute": "force",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Array of item objects."
+      "items": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array of item objects."
+        },
+        "attribute": "items",
+        "reflect": false
       },
-      "attribute": "items",
-      "reflect": false
-    },
-    "formatter": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(item: DuetComboboxItem) => string",
-        "resolved": "(item: DuetComboboxItem) => string",
-        "references": {
-          "DuetComboboxItem": {
-            "location": "local"
+      "formatter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: DuetComboboxItem) => string",
+          "resolved": "(item: DuetComboboxItem) => string",
+          "references": {
+            "DuetComboboxItem": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "example",
-            "text": "(item) => `${item.name} (${item.value})`"
-          }, {
-            "name": "default",
-            "text": "undefined"
-          }],
-        "text": "A hook to overwrite how the values are displayed in the input field after a User select an item"
-      },
-      "defaultValue": "(item: DuetComboboxItem) =>\n    item && item.name ? item.name : \"\""
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Object containing selected item/s"
-      },
-      "attribute": "value",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "processedItems": {},
-    "inputWidth": {},
-    "inputValue": {},
-    "selectionMsg": {},
-    "listOpen": {},
-    "selectedItems": {},
-    "activeItem": {}
-  }; }
-  static get events() { return [{
-      "method": "duetChange",
-      "name": "duetChange",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a keyboard input occurred."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": "(item) => `${item.name} (${item.value})`"
+            }, {
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "A hook to overwrite how the values are displayed in the input field after a User select an item"
+        },
+        "defaultValue": "(item: DuetComboboxItem) =>\n    item && item.name ? item.name : \"\""
       },
-      "complexType": {
-        "original": "DuetComboboxEvent",
-        "resolved": "{ originalEvent?: Event; component: \"duet-combobox\"; value: any; item: DuetComboboxItem; }",
-        "references": {
-          "DuetComboboxEvent": {
-            "location": "local"
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Object containing selected item/s"
+        },
+        "attribute": "value",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "processedItems": {},
+      "inputWidth": {},
+      "inputValue": {},
+      "selectionMsg": {},
+      "listOpen": {},
+      "selectedItems": {},
+      "activeItem": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetChange",
+        "name": "duetChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a keyboard input occurred."
+        },
+        "complexType": {
+          "original": "DuetComboboxEvent",
+          "resolved": "{ originalEvent?: Event; component: \"duet-combobox\"; value: any; item: DuetComboboxItem; }",
+          "references": {
+            "DuetComboboxEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "formatItem": {
-      "complexType": {
-        "signature": "(item: DuetComboboxItem) => Promise<string>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "item : DuetComboboxItem"
-              }],
-            "text": ": DuetComboboxItem"
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "formatItem": {
+        "complexType": {
+          "signature": "(item: DuetComboboxItem) => Promise<string>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "item : DuetComboboxItem"
+                }],
+              "text": ": DuetComboboxItem"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "DuetComboboxItem": {
+              "location": "local"
+            }
           },
-          "DuetComboboxItem": {
-            "location": "local"
-          }
+          "return": "Promise<string>"
         },
-        "return": "Promise<string>"
-      },
-      "docs": {
-        "text": "Exposes a formatter function to format the item value displayed after a user selects an item",
-        "tags": [{
-            "name": "param",
-            "text": "item : DuetComboboxItem"
-          }]
+        "docs": {
+          "text": "Exposes a formatter function to format the item value displayed after a user selects an item",
+          "tags": [{
+              "name": "param",
+              "text": "item : DuetComboboxItem"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "activeItem",
-      "methodName": "activeItemHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleDocumentClick",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "activeItem",
+        "methodName": "activeItemHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }