@watermarkinsights/ripple 5.6.0-0 → 5.6.0-2

package/dist/collection/components/{wm-select → selects/wm-select}/wm-select.js

@@ -1,45 +1,14 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, intl, debounce, toBool, handleDisabledAttribute } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
+import { getTextDir, shouldOpenUp, intl, isElOrChild, toBool, handleDisabledAttribute, } from "../../../global/functions";
+import { globalMessages } from "../../../global/intl";
 export class Select {
     constructor() {
-        this.selectAllMessage = intl.formatMessage({
-            id: "select.selectAll",
-            defaultMessage: "Select All",
-        });
-        this.deselectAllMessage = intl.formatMessage({
-            id: "select.deselectAll",
-            defaultMessage: "Deselect All",
-        });
-        this.allOptionsSelectedMessage = intl.formatMessage({
-            id: "select.allOptionsSelected",
-            defaultMessage: "All options selected",
-        });
-        this.allOptionsDeselectedMessage = intl.formatMessage({
-            id: "select.allOptionsDeselected",
-            defaultMessage: "All options deselected",
-        });
-        this.keysSoFar = "";
-        this.searchIndex = 0;
         this.openUp = false;
         //////////////////////////////////////
-        //////////////////////////////////////
         // for multiselect button text
         this.overflowCount = 0;
         this.displayedOptions = [];
-        this.debouncedClearKeysSoFar = debounce(() => {
-            this.keysSoFar = "";
-        }, 500);
-        this.debouncedSearch = debounce(() => {
-            this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
-            if (this.filteredOptions.length) {
-                this.announce(this.resultsFoundMessage);
-            }
-            else {
-                this.announce(this.noResultsFoundMessage);
-            }
-        }, 150);
         this.disabled = false;
         this.maxHeight = undefined;
         this.label = undefined;
@@ -70,85 +39,33 @@ export class Select {
     get childOptions() {
         return Array.from(this.el.querySelectorAll("wm-option"));
     }
-    get cloneOptions() {
-        return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"));
-    }
-    get allOptionEls() {
-        // this includes both slotted wm-options and internally created wm-options
-        return this.cloneOptions.concat(this.childOptions);
-    }
-    get visibleOptionEls() {
-        return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
-    }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return toBool(this.disabled);
     }
-    //////////////////////////////////////
-    // for search variants
-    get searchTerm() {
-        return this.searchFieldEl ? this.searchFieldEl.value : "";
-    }
-    get filteredOptions() {
-        return this.childOptions.filter((option) => { var _a; return (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.searchTerm.toLowerCase()); });
-    }
     get selectedOptions() {
         return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
     }
     get allSelected() {
         return this.childOptions.every((option) => option.selected);
     }
-    get visibleSelectAllButton() {
-        return this.selectAll && this.multiple && this.searchTerm === "";
-    }
     //////////////////////////////////////
-    get resultsFoundMessage() {
-        return intl.formatMessage({
-            id: "select.searchResultsFound",
-            defaultMessage: "{numResults, plural, one {1 option found} other {# options found}}",
-            description: "The message read by the screen reader, indicating how many results a search returned",
-        }, { numResults: this.filteredOptions.length });
-    }
-    get noResultsFoundMessage() {
-        return intl.formatMessage({
-            id: "select.noSearchResults",
-            defaultMessage: "No results found. Please try your search again.",
-            description: "The message displayed when no options pass the search filter",
-        });
-    }
-    handleOptionSelection(ev) {
-        this.focusOption(ev.detail);
+    handleOptionSelection() {
         if (!this.multiple) {
             this.close();
         }
     }
-    handleOptionCloneSelection(ev) {
-        const correspondingOption = this.findCorrespondingOption(ev.detail);
-        correspondingOption.click();
-    }
     handleChildEnter() {
         // only occurs for multiselects. handle the click, then close
         this.close();
     }
-    handleChildUp(ev) {
-        this.moveUp(ev.detail);
-    }
-    handleChildDown(ev) {
-        this.moveDown(ev.detail);
-    }
-    moveToFirstOption() {
-        this.focusOption(this.visibleOptionEls[0]);
-    }
-    moveToLastOption() {
-        this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
-    }
     closePopupOnEscape() {
         this.close();
     }
     handleOptionBlur(ev) {
         // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
         // keeps our component's blur events accurate, and closes when focusing browser address bar
-        if (!this.isElOrChild(ev.detail.relatedTarget)) {
+        if (!isElOrChild(this.el, ev.detail.relatedTarget)) {
             const event = new CustomEvent("blur");
             // @ts-ignore
             event.relatedTarget = ev.detail.relatedTarget;
@@ -156,34 +73,16 @@ export class Select {
         }
     }
     handleClick(ev) {
-        if (!this.isElOrChild(ev.target)) {
+        if (!isElOrChild(this.el, ev.target)) {
             this.close();
         }
     }
-    handleSelectAllClick() {
-        this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();
-    }
-    selectAllOptions() {
-        this.announce(this.allOptionsSelectedMessage);
-        this.wmSelectAllSelected.emit();
-    }
-    deselectAllOptions() {
-        this.announce(this.allOptionsDeselectedMessage);
-        this.wmSelectAllDeselected.emit();
-    }
     handleButtonBlur(ev) {
-        if (this.isElOrChild(ev.relatedTarget)) {
+        if (isElOrChild(this.el, ev.relatedTarget)) {
             // do not emit a blur event when opening the dropdown and focusing the Options
             ev.stopPropagation();
         }
     }
-    handleSearchFieldBlur(ev) {
-        this.searchFieldWrapperEl.classList.remove("focus");
-        if (this.isElOrChild(ev.relatedTarget)) {
-            // do not emit a blur event when moving from searchfield to options
-            ev.stopPropagation();
-        }
-    }
     handleKey(ev) {
         switch (ev.key) {
             case "ArrowDown":
@@ -220,6 +119,7 @@ export class Select {
         // on update of children or children selected state, reset button text and rerender
         this.setButtonText();
         forceUpdate(this.el);
+        this.optionListEl.handleChildChange(_);
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
@@ -227,55 +127,11 @@ export class Select {
         forceUpdate(this.el);
         // Dev can overwrite the max-height rule set in the Sass file
         if (this.maxHeight) {
-            this.listboxEl.style.maxHeight = this.maxHeight;
-        }
-        if (this.multiple) {
-            this.updateOptionVisibility();
+            // this.listboxEl.style.maxHeight = this.maxHeight;
+            this.dropdownEl.style.maxHeight = this.maxHeight;
         }
         this.setButtonText();
     }
-    componentWillUpdate() {
-        if (this.multiple) {
-            // find last visible clone option and apply .last class
-            const visibleCloneOptions = this.visibleOptionEls.filter((option) => option.classList.contains("clone"));
-            // if all options are clones, nothing to separate from
-            const allClones = visibleCloneOptions.length === this.visibleOptionEls.length;
-            visibleCloneOptions.forEach((option, idx) => {
-                if (!allClones && idx === visibleCloneOptions.length - 1) {
-                    option.classList.add("last");
-                }
-                else {
-                    option.classList.remove("last");
-                }
-            });
-        }
-    }
-    moveUp(el) {
-        const focusableEls = this.visibleOptionEls;
-        if (this.selectAllEl) {
-            focusableEls.unshift(this.selectAllEl);
-        }
-        if (this.searchFieldEl) {
-            focusableEls.unshift(this.searchFieldEl);
-        }
-        const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];
-        if (prevEl) {
-            this.focusOption(prevEl);
-        }
-    }
-    moveDown(el) {
-        const focusableEls = this.visibleOptionEls;
-        if (this.selectAllEl) {
-            focusableEls.unshift(this.selectAllEl);
-        }
-        if (this.searchFieldEl) {
-            focusableEls.unshift(this.searchFieldEl);
-        }
-        const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];
-        if (nextEl) {
-            this.focusOption(nextEl);
-        }
-    }
     open(optionToSelect) {
         if (!this.isDisabled) {
             const elHeight = this.el.clientHeight;
@@ -288,60 +144,22 @@ export class Select {
             this.isExpanded = true;
             this.dropdownEl.classList.remove("hidden");
             window.requestAnimationFrame(() => {
-                switch (optionToSelect) {
-                    case "next":
-                        // search variant focuses search field
-                        // all others focus option "after" last selected option  (this can be the first option)
-                        if (this.search) {
-                            this.searchFieldEl.focus();
-                            this.listboxEl.scrollTop = 0;
-                        }
-                        else {
-                            this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
-                        }
-                        break;
-                    case "previous":
-                        // search variant focuses last option
-                        // all others focus option "above" first selected option (this can be the last option)
-                        if (this.search) {
-                            this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
-                        }
-                        else {
-                            this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);
-                        }
-                        break;
-                    default:
-                        // search variant focuses search field
-                        // all others focus the selected option
-                        // if no option is selected (empty multiselect), focuses first option
-                        if (this.search) {
-                            this.searchFieldEl.focus();
-                            this.listboxEl.scrollTop = 0;
-                        }
-                        else if (this.selectedOptions.length > 0) {
-                            this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
-                        }
-                        else {
-                            this.focusOption(this.visibleOptionEls[0]);
-                        }
-                        break;
-                }
+                this.optionListEl.handleInitialFocus(optionToSelect);
             });
         }
     }
     close(returnFocus = true) {
         if (this.isExpanded) {
             this.isExpanded = false;
-            this.allOptionEls.map((i) => (i.focused = false));
+            this.optionListEl.unfocusAll();
             window.setTimeout(() => {
                 this.dropdownEl.classList.add("hidden");
-                if (this.multiple) {
-                    this.updateOptionVisibility();
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
                 }
                 // clear search field, reset filtered / bolded state of wm-options
                 if (this.search) {
-                    this.searchFieldEl.value = "";
-                    this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
+                    this.optionListEl.clearSearch();
                 }
                 // Returns focus to button after popup closes (no need if user is tabbing)
                 // Delay is necessary for screenreader to get new expanded state before focus
@@ -353,87 +171,6 @@ export class Select {
             }, 150);
         }
     }
-    updateOptionVisibility() {
-        // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
-        // slotted wm-options are hidden if selected, and clone wm-options are made visible if selected
-        this.childOptions.forEach((option, idx) => {
-            const cloneOption = this.cloneOptions[idx];
-            if (option.selected) {
-                option.classList.add("hidden");
-                cloneOption.classList.remove("hidden");
-            }
-            else {
-                option.classList.remove("hidden");
-                cloneOption.classList.add("hidden");
-            }
-        });
-    }
-    focusOption(option) {
-        this.allOptionEls.forEach((i) => (i.focused = i === option));
-        // option must be scrolledIntoView before focused
-        // if focus is called first the option might be positioned incorrectly (in the center of the dropdown) and scrollIntoView will do nothing as the option will already be in view
-        option.scrollIntoView({ block: "nearest" });
-        // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
-        // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
-        // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
-        window.setTimeout(() => option.scrollIntoView({ block: "nearest" }), 60);
-        option.focus();
-    }
-    findAndFocusOption(ev) {
-        const letterPressed = ev.detail.letter.toLowerCase();
-        const optionPressed = ev.detail.optionEl;
-        if (!this.keysSoFar && letterPressed == " ") {
-            // if the first key entered is space, treat as a click. Otherwise include in
-            optionPressed.click();
-        }
-        else {
-            if (!this.keysSoFar) {
-                // if first character entered, set currently focused option as the starting index for the search
-                this.visibleOptionEls.forEach((option, idx) => {
-                    if (option.focused) {
-                        this.searchIndex = idx;
-                    }
-                });
-            }
-            this.keysSoFar += letterPressed;
-            let nextMatch = this.findMatchInRange(this.visibleOptionEls, this.searchIndex + 1, this.visibleOptionEls.length);
-            if (!nextMatch) {
-                // if match can't be found from starting option downwards, search from top
-                nextMatch = this.findMatchInRange(this.visibleOptionEls, 0, this.searchIndex);
-            }
-            if (nextMatch) {
-                // findMatchInRange still might have returned null, only focus if match found
-                this.focusOption(nextMatch);
-            }
-            this.debouncedClearKeysSoFar();
-        }
-    }
-    findMatchInRange(list, startIndex, endIndex) {
-        let match = null;
-        let optionsInRange = list.slice(startIndex, endIndex);
-        // Find the first option starting with the keysSoFar substring, searching in
-        // the specified range of options
-        optionsInRange.forEach((option) => {
-            const label = option.textContent;
-            if (!match && label && label.toLowerCase().startsWith(this.keysSoFar)) {
-                match = option;
-            }
-        });
-        return match;
-    }
-    findCorrespondingOption(el) {
-        // if clone, returns the child wm-option
-        // if child wm-option, returns clone
-        const isClone = el.classList.contains("clone");
-        return isClone
-            ? this.childOptions[this.cloneOptions.indexOf(el)]
-            : this.cloneOptions[this.childOptions.indexOf(el)];
-    }
-    isElOrChild(el) {
-        var _a;
-        // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot
-        return el === this.el || this.el.contains(el) || ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(el));
-    }
     announceError() {
         if (this.errorMessage) {
             setTimeout(() => this.announce(this.errorMessage), 100);
@@ -449,41 +186,8 @@ export class Select {
             this.wmSelectBlurred.emit();
         }
     }
-    // on search field or select all. keydown on options is handled via events.
-    handleKeyDown(ev) {
-        const el = ev.target;
-        switch (ev.key) {
-            case "ArrowDown":
-                ev.preventDefault();
-                this.moveDown(ev.target);
-                break;
-            case "ArrowUp":
-                ev.preventDefault();
-                this.moveUp(ev.target);
-                break;
-            case "Escape":
-                ev.preventDefault();
-                this.close();
-                break;
-            case "Enter":
-                if (el === this.selectAllEl) {
-                    ev.preventDefault();
-                    this.handleSelectAllClick();
-                    this.close();
-                }
-                break;
-            case " ":
-                if (el === this.selectAllEl) {
-                    ev.preventDefault();
-                    this.handleSelectAllClick();
-                }
-                break;
-        }
-    }
     setButtonText() {
-        this.displayedOptions = this.childOptions
-            .filter((x) => x.selected)
-            .map((y) => (!y.classList.contains("hidden") ? y : this.findCorrespondingOption(y)));
+        this.displayedOptions = this.childOptions.filter((x) => x.selected);
         // handle overflow + counter for multiselect
         if (this.multiple) {
             // this is a fixed measurement accounting for the max width of a 3 character overflow counter
@@ -527,21 +231,6 @@ export class Select {
             return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
         }
     }
-    renderSearchField() {
-        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
-    }
-    renderSearchFailedMessage() {
-        return h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
-    }
-    renderSelectAllButton() {
-        return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
-    }
-    renderCloneOptions() {
-        return Array.from(this.el.children).map((o) => {
-            const option = o;
-            return (h("wm-option", { class: "clone", subinfo: option.subinfo, selected: option.selected }, option.textContent));
-        });
-    }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
         const buttonProps = {
@@ -553,9 +242,9 @@ export class Select {
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
             onClick: () => (this.isExpanded ? this.close() : this.open()),
         };
-        return (h(Host, { key: 'f099ef79e70921c17419b2ce8a4e917a0579e44f', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'e95c845dd404f5518b69145543113e69a40084a6', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '65dfe5aaaa9239efb0553ba1d323f1c5dc93b9fb', class: "label-wrapper" }, h("label", { key: 'ff406b387e0cd09e46e239f1c80477fe2ee80f24', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '6727670440a80bf148be78994a4267330cf31041', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '89e88dc3eebb8bb4f05e7c97f4af145ea3b54833', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '4787f0142908caca775c018f77ad46bdd6a67f3f', class: "label-wrapper" }, h("label", { key: 'cd87e40ecf3ea2b5f992e58fedd355ffdc9f874e', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '5537fb10791108ac2bda53d3456ec048bb4cc5c4', class: "button-wrapper" }, h("button", Object.assign({ key: '7d54c69839a302ead990f41e961cce05be49f83d' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: 'dcb786709b87be95c28bfcd37cc8459607939f2f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'b04bbeab1666ebd4538c859356f1a3a33658c1c5', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c5e9911d91f34c9b7c5becaa9e1127e658fd4607', class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { key: '24c47d439f6b131880a8bffe94c40539fc13d78f', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { key: 'acf189fee5add7d0c6150b44ffd9c0c26e05ade7', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: 'ff17ced6e94d7b893c407ea00ab7243176973eb5' }))), h("div", { key: 'a09f44fdf4a100f8eab7b5094fced276023812aa', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '9e55b5fdc2324b77d0a8bcf17650d937760dd941', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: 'df831930e77365c19757b84c0763a25cba2f84de', class: "button-wrapper" }, h("button", Object.assign({ key: 'aa97c1799c33eddc280daa3ca15cb081e50fa6fb' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: 'd65f25aa5c016de5274f97dd74e21de8a2fd186e', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '357bbce813cc3fb53e7aadfd77e74876702bca79', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '56c9af814adffc763ae57d9372df278ec3b39514', class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { key: '74851e76320c572355e331322ee7b6e0a597168e', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '1a8867c17c997f93c392b2e434062c5e26e1e36a', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '7b7ff193b01aac95bf3d2a8412633bf8331a398d' }))), h("div", { key: 'f7bb2724484488a25c3ca85a6634f1ea4ec00ba9', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '6170e8ac8a2c63e842cc35057b2da31ec6206f4e', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }
@@ -824,26 +513,6 @@ export class Select {
                     "resolved": "void",
                     "references": {}
                 }
-            }, {
-                "method": "wmSelectSearchChanged",
-                "name": "wmSelectSearchChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "Object",
-                    "resolved": "Object",
-                    "references": {
-                        "Object": {
-                            "location": "global",
-                            "id": "global::Object"
-                        }
-                    }
-                }
             }, {
                 "method": "wmSelectAllSelected",
                 "name": "wmSelectAllSelected",
@@ -893,42 +562,12 @@ export class Select {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "intCloneClicked",
-                "method": "handleOptionCloneSelection",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }, {
                 "name": "wmEnterKeyPressed",
                 "method": "handleChildEnter",
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmKeyUpPressed",
-                "method": "handleChildUp",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmKeyDownPressed",
-                "method": "handleChildDown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmHomeKeyPressed",
-                "method": "moveToFirstOption",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmEndKeyPressed",
-                "method": "moveToLastOption",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }, {
                 "name": "wmEscKeyPressed",
                 "method": "closePopupOnEscape",
@@ -953,12 +592,6 @@ export class Select {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmLetterPressed",
-                "method": "findAndFocusOption",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -190,7 +190,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { key: 'e6d63a25a3589c42657c7cf0825f9973861e92ae', onBlur: () => this.close(false) }, h("div", { key: '5744b207e0ebec31cb7a70b8c616700b9436d58b', class: getTextDir() }, h("wm-button", { key: '9509bafa8ac5acbb76aafc464d36e4b97b0a8d07', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "f1d9" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: 'e7846dd17a5b343b506a8c60176bba8ef8e8c2e0', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: 'e227cd3ea8e2093e64c4b8c335ee098768139fd3' })))));
+        return (h(Host, { key: '2a385225e22e0264086f5a5d21b0e5818436b063', onBlur: () => this.close(false) }, h("div", { key: '7ea8e1806988bde77bd5ec763a3552f9fc27493c', class: getTextDir() }, h("wm-button", { key: 'dec5640df072b28e740143f593f6af663e895fbd', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "f1d9" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: 'de123bc59d9a520f5836d92da233ac768fba3e57', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: '808b67c91d86c9e85b3cd46e9bd314e1fc5e9002' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-button/wm-button.js

@@ -166,7 +166,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'c0a05cbcd26354a8ec8ce24fc560ec676dc3eedc', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'f3808a14ca42ea578fe257e7818c2b5be798b61e', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && (h("span", { key: '7c247a1febac517d8521a451692536f612657de9', class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { key: 'f4410ed7907af38ab29eb69c90e2bbb3b2e51cb8', class: "button-text" }, h("slot", { key: '2b72eba1f3b0db9ec8a73e37044a3f371264de77' })))));
+        return (h(Host, { key: '0060f71ac2e6f369310b3c05657e4c1d671794eb', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '8a2a4a5dc1e6e26c28e96ffb5b84d6a252ba9d9f', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && (h("span", { key: '67fc3c5500d8fc4d544bbfbb52e9c8f1c9eacc24', class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { key: '09041f26964d8a4d83134eb2d8f6dba0b944bbbe', class: "button-text" }, h("slot", { key: 'e066946aac4ebd98224f04b27ef498f9b35571b9' })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file/wm-file.js

@@ -168,7 +168,7 @@ export class File {
         return (h("div", { class: `file-wrapper ${this.progress === 100 ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: '0943b20ae9ce90cb1687ff3c092622d2169f9c47', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '5ad8e488eb44edfd26404408e27b8adc6d01e124', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file-list/wm-file-list.js

@@ -4,7 +4,7 @@ export class FileList {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { key: '7517d9199e320a918e7b87501e2a6841d17e70f5', role: "list", class: "list-wrapper" }, h("slot", { key: 'c90eaf77aa45b5b146ad71cfa3891cbc0a26ab9a' })));
+        return (h("div", { key: '398a8905ff498ed10cb7057d3c686f26d8f2a36f', role: "list", class: "list-wrapper" }, h("slot", { key: 'c66ff037e9ee2ced8b3ffef541164fe20ae3e125' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-input/wm-input.js

@@ -101,7 +101,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { key: '6bff33a353bd632527d8ebd95031db8c8138ae87', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'c04c1edf83bb49604e4ca504abc51e6647d5487c', class: "label-wrapper" }, h("label", { key: '35d3cf8433a915d548717e7eac14308b1d7a7490', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'a4d9d478d893bde516031f2b0e7097fb17755b28', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '7fa0965a9c325e24aac64c522ef354d9bcf841bd', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '4df1efa5078a5d5a6edfd6538923545d3945a34c', class: "inner-wrapper" }, h("div", { key: '0c879dc570054b620eb424e0d660c930e2e580bb', class: "text-after-wrapper" }, h("div", { key: '76886618707f4ca0d5e3ef46ccc7a3561569cb8b', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: 'fe346fecf4fa7f0f030354de9d37ac03af8df5d4', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: 'd3ac5033a0aa7e49c2af2a786a3e09d46bec0e51', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '948bcf0ca5186a924b7b7e0099fb072ef78658e4', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '59ab9c5a6530828b9fbf021de2baa98e0306555b', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '981aed3eb22a54accce593c1791f496b4641bc1f', id: "info", class: "info" }, this.info)), h("div", { key: 'cb8fb8d79193f4505204d4bc1bdc62a52675387f', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'a319ec8aa8f23c7a51af1de3a65e3778b7cadb67', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '7db24a360d7f3378e69aa3c8fb659aa91b8b913f', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '746b377195a7e93d1ec73f8de6122756d813992d', class: "label-wrapper" }, h("label", { key: '96ca5bc471e4f23aa6138dc377a38e5797b293e6', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'e51d0b811eb04dc446d4140a4adf36a4e85423da', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '244fcf468648e136e5c4a528c070488dccaa7c94', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '40d75843b86aa0012a5bb7d277c6d17cd9164ff5', class: "inner-wrapper" }, h("div", { key: '1caa12e9919c11f22071aae6916bbc32d37bebc2', class: "text-after-wrapper" }, h("div", { key: '1e07eb06f59c4c343eb6fd6188440b51046d359c', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '84db811d1334653344e90eecbc687bd23d9ae032', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '844dca05f01dde484479577e83176aff952727ab', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '6e01dbb081603f9c27e39cb8dd33b144657d9654', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: 'cde565ddedd1355ea1129cf38c3de4335da38631', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'a8d3c096987bd40efa9c5f7416df7cb50c9cc1ff', id: "info", class: "info" }, this.info)), h("div", { key: '48200834cdd3e3f633256afc75b4daacbf4fa0a8', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '8db2be5cc97bbad09213e40464010285857638f5', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-menuitem/wm-menuitem.js

@@ -88,7 +88,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '1b81b125825133d025c2f138c2e9d89306bd0b93', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'e820464ef57df83441622726b55098c3abdeb6e3', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { key: 'd903355e81bdc504a04cb9489ecd455d6d41a1e1', ref: (el) => (this.iconEl = el) }), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '209d7a0e22f05dc500f71a8f8b29e51e4f5da1c2', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '3b5a9b5d9571ab224b6cde8a5a01548eb045b159', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { key: 'de7447ebec7218723fec7390b77179bc68ae7823', ref: (el) => (this.iconEl = el) }), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }