@watermarkinsights/ripple 5.12.0 → 5.14.0-alpha.0

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

@@ -1,620 +0,0 @@
-import { h, Host, forceUpdate } from "@stencil/core";
-import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool } 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.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();
-        }
-    }
-    handleOptgroupExpanded() {
-        this.menuEl.classList.add("hidden");
-        this.optListWrapperEl.classList.remove("hidden");
-    }
-    handleOptgroupHidden(ev) {
-        this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
-        this.menuEl.classList.remove("hidden");
-        this.optListWrapperEl.classList.add("hidden");
-        // 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) {
-            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"]: "list",
-            ["aria-labelledby"]: "label selectbtn",
-            ["aria-describedby"]: "error",
-            ["aria-expanded"]: this.isExpanded ? "true" : "false",
-            onClick: () => {
-                this.isExpanded ? this.close() : this.open();
-            },
-        };
-        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 because the listbox is in a sub-component and it is not announced
-        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) }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), h("div", { class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), 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("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled"), h("div", { class: "svg-icon svg-next" })));
-        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { 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": {},
-            "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
-            }];
-    }
-}