@watermarkinsights/ripple 5.13.0-alpha.1 → 5.13.0-alpha.3

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

@@ -0,0 +1,606 @@
+import { h, Host } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute } from "../../../global/functions";
+import { globalMessages, selectMessages } from "../../../global/intl";
+export class Select {
+    constructor() {
+        this.disabled = false;
+        this.maxHeight = "200px";
+        this.labelPosition = "top";
+        this.requiredField = false;
+        this.multiple = false;
+        this.search = false;
+        this.selectAll = false;
+        this.placeholder = selectMessages.multiPlaceholder;
+        this.searchPlaceholder = selectMessages.searchPlaceholder;
+        this.allSelectedMessage = selectMessages.allSelected;
+        this.isExpanded = false;
+        this.announcement = "";
+        this.openUp = false;
+        //////////////////////////////////////
+        // for multiselect button text
+        this.overflowCount = 0;
+        this.displayedOptions = [];
+    }
+    get childOptions() {
+        return Array.from(this.el.querySelectorAll("wm-option"));
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get selectedOptions() {
+        return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
+    }
+    get allSelected() {
+        return this.childOptions.every((option) => option.selected);
+    }
+    //////////////////////////////////////
+    handleOptionSelection() {
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    handleChildEnter() {
+        // only occurs for multiselects. handle the click, then close
+        this.close();
+    }
+    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)) {
+            const event = new CustomEvent("blur");
+            // @ts-ignore
+            event.relatedTarget = ev.detail.relatedTarget;
+            this.el.dispatchEvent(event);
+        }
+    }
+    handleClick(ev) {
+        if (!isElOrChild(this.el, ev.target)) {
+            this.close();
+        }
+    }
+    handleButtonBlur(ev) {
+        if (isElOrChild(this.el, ev.relatedTarget)) {
+            // do not emit a blur event when opening the dropdown and focusing the Options
+            ev.stopPropagation();
+        }
+    }
+    handleKey(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("next");
+                }
+                break;
+            case "ArrowUp":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open("previous");
+                }
+                break;
+        }
+    }
+    componentWillLoad() {
+        if (!this.label) {
+            console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
+        }
+        if (!this.multiple && this.selectedOptions.length === 0) {
+            console.error("wm-select should have one initial option selected");
+        }
+        handleDisabledAttribute(this.el, this.isDisabled);
+        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.optionListEl.handleChildChange();
+        }
+    }
+    componentDidLoad() {
+        this.wmSelectDidLoad.emit();
+        this.dropdownEl.classList.add("hidden");
+        forceUpdate(this.el);
+        this.setButtonText();
+    }
+    open(optionToSelect) {
+        if (!this.isDisabled) {
+            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.labelEl.clientHeight);
+            this.isExpanded = true;
+            this.dropdownEl.classList.add("open");
+            this.dropdownEl.classList.remove("hidden");
+            window.requestAnimationFrame(() => {
+                this.optionListEl.handleInitialFocus(optionToSelect);
+            });
+        }
+    }
+    close(returnFocus = true) {
+        if (this.isExpanded) {
+            this.isExpanded = false;
+            this.optionListEl.unfocusAll();
+            this.dropdownEl.classList.remove("open");
+            window.setTimeout(() => {
+                this.dropdownEl.classList.add("hidden");
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
+                }
+                // clear search field, reset filtered / bolded state of wm-options
+                if (this.search) {
+                    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
+                // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
+                // also UX wise, it makes sense for the button to only be focused after the animation is complete
+                if (returnFocus) {
+                    this.buttonEl.focus();
+                }
+            }, 150);
+        }
+    }
+    announceError() {
+        if (this.errorMessage) {
+            setTimeout(() => this.announce(this.errorMessage), 100);
+        }
+    }
+    handleDisabledChange() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    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.wmSelectBlurred.emit();
+        }
+    }
+    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;
+            }
+        }
+    }
+    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.multiple && 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)));
+        }
+    }
+    render() {
+        const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
+        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, { key: 'e37a1ce52a903991570fbf06cad2b17ccae703de', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '973d0197afb6fef37768c0ea86002b9be4a4e50e', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '7632bd4f20bc49fbfc3b4e7a9c8ed63d7a7a6f44', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '20caf14eab2111ba2b8f86519e2ba99be2eee496', 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", { key: 'a527d782f81eeeb771164cc0b7449b696f34196d', class: "button-wrapper" }, h("button", Object.assign({ key: '39ed454cbff5e73d98d36eefd6fb79320f0dc517' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '658551325b10ae492b13018e57a7871497972f8f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '425e8afaf12ee7921219e5b2076156459570fc72', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c6bfe3c261ece6a4dfd6489fae77dd91b7730629', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'f9d3c5405c82d7724b074a197ca9c6f17acc1042', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '8452deceae0ecbcbf96a64c2d406aea66023b6ef', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e5beb9e541348fe6127a058e60c4a292cbabb264', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '2ff10a32e89a597176a96ac852dd6e1fe118fc74', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '947c0114cae3a41d14f5d0ecfaf72a6e4c61f411' }))), h("div", { key: '50b156927292a726eac80a6035db6185483cdf35', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'de0b2e27d65056a691182397405c6eec7cb38fcf', 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"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maxHeight": {
+                "type": "string",
+                "attribute": "max-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"200px\""
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "labelPosition": {
+                "type": "string",
+                "attribute": "label-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"left\" | \"none\"",
+                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"top\""
+            },
+            "requiredField": {
+                "type": "boolean",
+                "attribute": "required-field",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "attribute": "error-message",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "search": {
+                "type": "boolean",
+                "attribute": "search",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectAll": {
+                "type": "boolean",
+                "attribute": "select-all",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "selectMessages.multiPlaceholder"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "attribute": "search-placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "selectMessages.searchPlaceholder"
+            },
+            "allSelectedMessage": {
+                "type": "string",
+                "attribute": "all-selected-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "selectMessages.allSelected"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "announcement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmSelectDidLoad",
+                "name": "wmSelectDidLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmSelectBlurred",
+                "name": "wmSelectBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmSelectAllSelected",
+                "name": "wmSelectAllSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmSelectAllDeselected",
+                "name": "wmSelectAllDeselected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "errorMessage",
+                "methodName": "announceError"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    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": "wmOptionBlurred",
+                "method": "handleOptionBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}