@watermarkinsights/ripple 5.12.0-9 → 5.14.0-alpha.0

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

@@ -1,596 +0,0 @@
-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";
-export class Select {
-    constructor() {
-        this.openUp = false;
-        //////////////////////////////////////
-        // for multiselect button text
-        this.overflowCount = 0;
-        this.displayedOptions = [];
-        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 = intl.formatMessage({
-            id: "select.multiPlaceholder",
-            defaultMessage: "Make a selection",
-            description: "Placeholder text. Use imperative",
-        });
-        this.searchPlaceholder = intl.formatMessage({
-            id: "select.searchPlaceholder",
-            defaultMessage: "Search",
-            description: "Placeholder text. Use imperative",
-        });
-        this.allSelectedMessage = intl.formatMessage({
-            id: "select.allSelected",
-            defaultMessage: "All selected",
-            description: "Text displayed when all options are selected",
-        });
-        this.isExpanded = false;
-        this.announcement = "";
-    }
-    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: 'e3fcf83e06764c3eea899653ec5c6d86b33e512b', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'd579e6b54136c752da4443cb02f80054ba2260a0', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2318b1176e9851d0ed00038789b32f6ccebf2429', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '57b0bae0589eae306d3147ef8d94dc62482dac46', 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: '38b934c9786af128b08753a91a7e6563414612ba', class: "button-wrapper" }, h("button", Object.assign({ key: '02b535f97ba5292a80f81caba43844debfd75f49' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'cfa62114c5c2613ff509f6c38c31211bdb4749ab', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '40cc50c1b5ffc248ec4234a657e1a6de141d1164', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '36a1b5c0200419956fa03ce4d486b3573589e782', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '1fbb90628253b2464601480ade55d32e05e33859', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'e66f2a0f3001b8cc53542fd635cfaa6df1dd3825', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '19a5f0d454d47395ccb1163c8a5bbb205240b4bb', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: 'ee9d3cf19e7dc9cec99d9e7e64bdd42dd3228316', 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: '346fdd25fc798cdaf95b79dc7f9d38df947ec6ef' }))), h("div", { key: '22ffe762889ddae3ddc6ab73c971415cfb4c1a0f', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '8a43d2cbbe1f5352b604715cbb89cfb7701c5fcf', 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",
-                "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": "intl.formatMessage({\n    id: \"select.multiPlaceholder\",\n    defaultMessage: \"Make a selection\",\n    description: \"Placeholder text. Use imperative\",\n  })"
-            },
-            "searchPlaceholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "search-placeholder",
-                "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.searchPlaceholder\",\n    defaultMessage: \"Search\",\n    description: \"Placeholder text. Use imperative\",\n  })"
-            },
-            "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": "intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  })"
-            }
-        };
-    }
-    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
-            }];
-    }
-}