@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js

@@ -0,0 +1,626 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool, showTooltip, hideTooltip, } from "../../../global/functions";
+import { globalMessages, selectMessages } from "../../../global/intl";
+export class NestedSelect {
+    constructor() {
+        this.openUp = false;
+        this.overflowCount = 0;
+        this.displayedOptions = [];
+        this.clearSelectionMessage = this.multiple
+            ? selectMessages.multiClearSelection
+            : selectMessages.singleClearSelection;
+        this.disabled = false;
+        this.maxHeight = "200px";
+        this.label = undefined;
+        this.labelPosition = "top";
+        this.requiredField = false;
+        this.errorMessage = undefined;
+        this.multiple = false;
+        this.search = false;
+        this.selectAll = false;
+        this.placeholder = this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder;
+        this.searchPlaceholder = selectMessages.searchPlaceholder;
+        this.allSelectedMessage = selectMessages.allSelected;
+        this.isExpanded = false;
+        this.isGroupExpanded = false;
+        this.showClearSelectionButton = false;
+        this.announcement = "";
+        this.constrainedMaxHeight = this.maxHeight;
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get childOptions() {
+        return Array.from(this.el.querySelectorAll("wm-option"));
+    }
+    get optgroupEls() {
+        return Array.from(this.el.querySelectorAll("wm-optgroup"));
+    }
+    get menuitemEls() {
+        return Array.from(this.el.shadowRoot.querySelectorAll(".menuitem"));
+    }
+    get allSelected() {
+        return this.childOptions.every((option) => option.selected);
+    }
+    componentWillLoad() {
+        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((_mutationRecord) => this.handleChildChange()));
+        mutationObserver.observe(this.el, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+            attributeFilter: ["selected"],
+        });
+    }
+    handleChildChange() {
+        // on update of children or children selected state, reset button text and rerender
+        this.setButtonText();
+        forceUpdate(this.el);
+        if (this.multiple) {
+            // update state of clone options
+            this.optgroupEls.forEach((optgroupEl) => optgroupEl.handleChildChange());
+        }
+    }
+    setButtonText() {
+        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
+            const overflowCounterWidth = 38;
+            const computedStyle = window.getComputedStyle(this.buttonEl);
+            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+            const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+            const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+            const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+            this.overflowCount = 0;
+            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
+        }
+    }
+    countOptgroupSelected(optgroupEl) {
+        let selectedOptions = Array.from(optgroupEl.querySelectorAll("wm-option")).filter((option) => option.selected);
+        return selectedOptions.length;
+    }
+    handleOptionSelection() {
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    handleChildEnter() {
+        // only occurs for multiselects. handle the click, then close
+        this.close();
+    }
+    closePopupOnEscape() {
+        this.close();
+    }
+    handleKeyDown(ev) {
+        switch (ev.key) {
+            case "Tab":
+                // if tabbing backwards, close and return focus to button. Otherwise, close but do not redirect focus.
+                this.close(ev.shiftKey ? true : false);
+                break;
+            case "ArrowDown":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open();
+                }
+                break;
+            case "ArrowUp":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open(true);
+                }
+                break;
+        }
+    }
+    close(returnFocus = true) {
+        if (this.isExpanded) {
+            this.isExpanded = false;
+            this.dropdownEl.classList.remove("open");
+            window.setTimeout(() => {
+                this.optgroupEls.forEach((optgroupEl) => (optgroupEl.isExpanded = false));
+                if (returnFocus) {
+                    this.buttonEl.focus();
+                }
+            }, 150);
+        }
+    }
+    open(focusLast = false) {
+        if (!this.isDisabled) {
+            this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
+            this.dropdownEl.scrollTop = 0;
+            this.isExpanded = true;
+            this.dropdownEl.classList.add("open");
+            const elHeight = this.el.clientHeight;
+            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, elHeight, 0);
+            this.constrainedMaxHeight = this.maxHeight;
+            const spaceAbove = getContextMeasurements(this.el).spaceAbove;
+            if (this.openUp) {
+                if (parseInt(getComputedStyle(this.menuEl).getPropertyValue("--max-height").replace("px", "")) > spaceAbove) {
+                    this.constrainedMaxHeight = spaceAbove.toString() + "px";
+                }
+            }
+            // if opening upwards, set an upwards height limit for the optgroup level
+            this.optgroupEls.forEach((o) => {
+                o.shadowRoot.querySelector("priv-option-list").upwardsHeightLimit = this.openUp
+                    ? spaceAbove
+                    : null;
+            });
+            // 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(() => {
+                if (this.menuitemEls.length > 0) {
+                    const menuitemToFocus = this.menuitemEls[focusLast ? this.menuitemEls.length - 1 : 0];
+                    menuitemToFocus.scrollIntoView({ block: "nearest" });
+                    menuitemToFocus.focus();
+                }
+            }, 60);
+        }
+    }
+    moveDown(menuitemEl) {
+        const currentIndex = this.menuitemEls.indexOf(menuitemEl);
+        const menuitemToFocus = this.menuitemEls[currentIndex == this.menuitemEls.length - 1 ? 0 : currentIndex + 1];
+        menuitemToFocus.scrollIntoView({ block: "nearest" });
+        menuitemToFocus.focus();
+    }
+    moveUp(menuitemEl) {
+        const currentIndex = this.menuitemEls.indexOf(menuitemEl);
+        const menuitemToFocus = this.menuitemEls[currentIndex == 0 ? this.menuitemEls.length - 1 : currentIndex - 1];
+        menuitemToFocus.scrollIntoView({ block: "nearest" });
+        menuitemToFocus.focus();
+    }
+    handleButtonBlur(ev) {
+        if (isElOrChild(this.el, ev.relatedTarget)) {
+            // do not emit a blur event when opening the dropdown and focusing the Options
+            ev.stopPropagation();
+        }
+    }
+    handleClick(ev) {
+        if (!isElOrChild(this.el, ev.target)) {
+            this.close();
+        }
+    }
+    handleMenuitemKeydown(ev) {
+        switch (ev.key) {
+            case "ArrowDown":
+                ev.preventDefault();
+                // focus next
+                this.moveDown(ev.target);
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                this.moveUp(ev.target);
+                // focus previous
+                break;
+            case "ArrowRight":
+                if (ev.target.classList.contains("group-btn")) {
+                    ev.preventDefault();
+                    ev.target.click();
+                }
+                break;
+            case "Escape":
+                ev.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    handleComponentBlur(ev) {
+        // Do not close or emit custom blur event when blurring to an element inside (wm-option)
+        if (!this.el.contains(ev.relatedTarget)) {
+            this.close(false);
+            this.wmNestedSelectBlurred.emit();
+        }
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
+    handleOptgroupExpanded() {
+        this.isGroupExpanded = true;
+    }
+    handleOptgroupHidden(ev) {
+        this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
+        this.isGroupExpanded = false;
+        // focus back to nested select's optgroup menuitem
+        if (this.isExpanded) {
+            const elToFocus = this.el.shadowRoot.querySelector(`button[data-label=${ev.detail}]`);
+            elToFocus.focus();
+        }
+    }
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
+    renderButtonText() {
+        if (this.displayedOptions.length < 1) {
+            return h("span", null, this.placeholder);
+        }
+        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
+            return this.allSelectedMessage;
+        }
+        else {
+            return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
+        }
+    }
+    renderOverflowCount() {
+        if (this.overflowCount > 0 && !this.allSelected) {
+            return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
+        }
+    }
+    handleClearSelection() {
+        this.optgroupEls.forEach((optgroupEl) => optgroupEl.emitDeselection());
+        this.announce(selectMessages.selectionCleared);
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    renderClearSelectionButton() {
+        if (this.showClearSelectionButton && !this.isGroupExpanded) {
+            return (h("button", { class: "menuitem clear-selection", onClick: () => this.handleClearSelection(), tabindex: -1, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "svg-icon svg-close" }), this.clearSelectionMessage));
+        }
+    }
+    renderSelectionCount(optgroupEl) {
+        const selectionCount = this.countOptgroupSelected(optgroupEl);
+        if (selectionCount) {
+            return (h("div", { class: "selection-count" }, h("span", null, this.multiple
+                ? selectMessages.getOptgroupMultipleSelectionCount(selectionCount)
+                : selectMessages.optgroupSingleSelectionCount())));
+        }
+    }
+    render() {
+        const buttonProps = {
+            id: "selectbtn",
+            ["disabled"]: this.isDisabled,
+            ["aria-controls"]: "menu",
+            ["aria-labelledby"]: "label selectbtn",
+            ["aria-describedby"]: "error",
+            ["aria-expanded"]: this.isExpanded ? "true" : "false",
+            onClick: () => {
+                this.isExpanded ? this.close() : this.open();
+            },
+        };
+        return (h(Host, { key: 'f4ac99af822bcd4f917bc96daac6fbb61e34f80e', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '74d71c731f63152c402100fbfd97a54828360613', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'dbc5fc7283a3a32e059ba333116b1d882f321cd2', class: "label-wrapper" }, h("label", { key: 'cdd87e55969aaa094d1a3ddeb1385bf0bb3100de', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        // we can't use aria-required because the listbox is in a sub-component and it is not announced
+        this.labelPosition !== "none" && this.requiredField && (h("span", { key: '32b6eb9751a9e31228a2cf0d5a4d05448b095a8c', class: "required" }, h("span", { key: '5c5b0f47c47ed2cb90199e4cffdb4da91d7d45e3', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '7d04b03628b48903447c5b5289646b93b6cb619e', "aria-hidden": "true" }, "*")))), h("div", { key: 'e64f0cd85f5cf893b2466891df11ecc99b3cacf5', class: "button-wrapper" }, h("button", Object.assign({ key: '0b848795e3b8452474a19b0faec455aec49a4d1f' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '12f2c4f128bd3b8f993179408821521afbc879ed', class: "overflowcontrol" }, h("span", { key: '82f3176f5daafd346b011b0c2509c43b28e179a8', class: "button-text" }, this.renderButtonText())), h("div", { key: '3dd0a416c62f42d63ff216094e3977a1b905d07b', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'b0510d9af441f11bdd91a008029c5c3884d6d3ce', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '88e174bb89a1a5439750bcd7a67f1982e72a08e1', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: 'f020d5cc419669458b37c90e3626166ebe64cd46', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
+            return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
+                    if (!optgroupEl.disabled) {
+                        optgroupEl.isExpanded = !optgroupEl.isExpanded;
+                        forceUpdate(this.el);
+                    }
+                }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "option-text" }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")), h("div", { class: "svg-icon svg-next" })));
+        })), h("div", { key: '10a832d2f59a1d4b12add69575decdc50e468cbb', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: 'd9a4e3f2fd69b9a8ff5da0718bad9f5fa5d0627d' }))), h("div", { key: 'beb4561d510171994dbc1b470f09a00c441c53dc', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '559f0ea2ccbd83f99bb52cabcfc643286346d6c4', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+    }
+    static get is() { return "wm-nested-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-nested-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-nested-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-height",
+                "reflect": false,
+                "defaultValue": "\"200px\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"left\" | \"none\"",
+                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-position",
+                "reflect": false,
+                "defaultValue": "\"top\""
+            },
+            "requiredField": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required-field",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "search": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "select-all",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-placeholder",
+                "reflect": false,
+                "defaultValue": "selectMessages.searchPlaceholder"
+            },
+            "allSelectedMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "all-selected-message",
+                "reflect": false,
+                "defaultValue": "selectMessages.allSelected"
+            },
+            "constrainedMaxHeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "constrained-max-height",
+                "reflect": false,
+                "defaultValue": "this.maxHeight"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "isGroupExpanded": {},
+            "showClearSelectionButton": {},
+            "announcement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmNestedSelectBlurred",
+                "name": "wmNestedSelectBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "wmOptionSelected",
+                "method": "handleOptionSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmEnterKeyPressed",
+                "method": "handleChildEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmEscKeyPressed",
+                "method": "closePopupOnEscape",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "optgroupExpanded",
+                "method": "handleOptgroupExpanded",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "optgroupHidden",
+                "method": "handleOptgroupHidden",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}