@watermarkinsights/ripple 5.6.0-7 → 5.6.0

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

@@ -1,14 +1,45 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, intl, isElOrChild, toBool, handleDisabledAttribute, } from "../../../global/functions";
-import { globalMessages } from "../../../global/intl";
+import { getTextDir, shouldOpenUp, intl, debounce, 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;
@@ -39,33 +70,85 @@ 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 === "";
+    }
     //////////////////////////////////////
-    handleOptionSelection() {
+    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);
         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 (!isElOrChild(this.el, ev.detail.relatedTarget)) {
+        if (!this.isElOrChild(ev.detail.relatedTarget)) {
             const event = new CustomEvent("blur");
             // @ts-ignore
             event.relatedTarget = ev.detail.relatedTarget;
@@ -73,16 +156,34 @@ export class Select {
         }
     }
     handleClick(ev) {
-        if (!isElOrChild(this.el, ev.target)) {
+        if (!this.isElOrChild(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 (isElOrChild(this.el, ev.relatedTarget)) {
+        if (this.isElOrChild(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":
@@ -119,7 +220,6 @@ 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();
@@ -127,11 +227,55 @@ 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;
-            this.dropdownEl.style.maxHeight = this.maxHeight;
+            this.listboxEl.style.maxHeight = this.maxHeight;
+        }
+        if (this.multiple) {
+            this.updateOptionVisibility();
         }
         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;
@@ -144,22 +288,60 @@ export class Select {
             this.isExpanded = true;
             this.dropdownEl.classList.remove("hidden");
             window.requestAnimationFrame(() => {
-                this.optionListEl.handleInitialFocus(optionToSelect);
+                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;
+                }
             });
         }
     }
     close(returnFocus = true) {
         if (this.isExpanded) {
             this.isExpanded = false;
-            this.optionListEl.unfocusAll();
+            this.allOptionEls.map((i) => (i.focused = false));
             window.setTimeout(() => {
                 this.dropdownEl.classList.add("hidden");
-                if (this.optionListEl.multiple) {
-                    this.optionListEl.updateOptionVisibility();
+                if (this.multiple) {
+                    this.updateOptionVisibility();
                 }
                 // clear search field, reset filtered / bolded state of wm-options
                 if (this.search) {
-                    this.optionListEl.clearSearch();
+                    this.searchFieldEl.value = "";
+                    this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
                 }
                 // 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
@@ -171,6 +353,87 @@ 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);
@@ -186,8 +449,41 @@ 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);
+        this.displayedOptions = this.childOptions
+            .filter((x) => x.selected)
+            .map((y) => (!y.classList.contains("hidden") ? y : this.findCorrespondingOption(y)));
         // handle overflow + counter for multiselect
         if (this.multiple) {
             // this is a fixed measurement accounting for the max width of a 3 character overflow counter
@@ -231,6 +527,21 @@ 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 = {
@@ -244,7 +555,7 @@ export class Select {
         };
         return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { 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", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { 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", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { 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", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { 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", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { 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"; }
@@ -513,6 +824,26 @@ 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",
@@ -562,12 +893,42 @@ 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",
@@ -592,6 +953,12 @@ export class Select {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "wmLetterPressed",
+                "method": "findAndFocusOption",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }