@watermarkinsights/ripple 5.6.0-1 → 5.6.0-2

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

@@ -0,0 +1,581 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+import { getTextDir, intl, isElOrChild, toBool } from "../../../global/functions";
+import { globalMessages } from "../../../global/intl";
+export class NestedSelect {
+    constructor() {
+        this.overflowCount = 0;
+        this.displayedOptions = [];
+        this.clearSelectionMessage = this.multiple
+            ? intl.formatMessage({
+                id: "select.multiClearSelection",
+                defaultMessage: "Clear all Selections",
+                description: "Button text to clear selection. Use imperative",
+            })
+            : intl.formatMessage({
+                id: "select.singleClearSelection",
+                defaultMessage: "Clear Selection",
+                description: "Button text to clear selection. Use imperative",
+            });
+        this.disabled = false;
+        this.maxHeight = undefined;
+        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
+            ? intl.formatMessage({
+                id: "select.multiPlaceholder",
+                defaultMessage: "Make a selection",
+                description: "Placeholder text for multiple select. Use imperative",
+            })
+            : intl.formatMessage({
+                id: "select.singlePlaceholder",
+                defaultMessage: "Select an Option",
+                description: "Placeholder text for single select. 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.optgroupExpanded = false;
+    }
+    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(mutationRecord)));
+        mutationObserver.observe(this.el, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+            attributeFilter: ["selected"],
+        });
+    }
+    componentDidLoad() {
+        if (this.maxHeight) {
+            // this.listboxEl.style.maxHeight = this.maxHeight;
+            this.dropdownEl.style.maxHeight = this.maxHeight;
+        }
+    }
+    handleChildChange(_) {
+        // on update of children or children selected state, reset button text and rerender
+        this.setButtonText();
+        forceUpdate(this.el);
+        // this.optionListEl.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;
+            let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-text").clientWidth);
+            let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
+            this.overflowCount = 0;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
+                optionsWidths.pop();
+                this.displayedOptions.pop();
+            }
+        }
+    }
+    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();
+    }
+    handleOptionKeyLeft(ev) {
+        const parentOptgroup = ev.detail.parentElement;
+        parentOptgroup.isExpanded = false;
+        this.focusFirstMenuitem();
+    }
+    close(returnFocus = true) {
+        if (this.isExpanded) {
+            this.isExpanded = false;
+            this.optgroupEls.forEach((optgroupEl) => (optgroupEl.isExpanded = false));
+            window.setTimeout(() => {
+                this.dropdownEl.classList.remove("open");
+                if (returnFocus) {
+                    this.buttonEl.focus();
+                }
+            }, 150);
+        }
+    }
+    open() {
+        // TODO implement opening upwards if not enough space below
+        this.isExpanded = true;
+        this.dropdownEl.classList.add("open");
+        window.requestAnimationFrame(() => {
+            this.focusFirstMenuitem();
+        });
+    }
+    focusFirstMenuitem() {
+        if (this.menuitemEls.length > 0) {
+            this.menuitemEls[0].focus();
+        }
+    }
+    moveDown(menuitemEl) {
+        const currentIndex = this.menuitemEls.indexOf(menuitemEl);
+        if (currentIndex == this.menuitemEls.length - 1) {
+            this.menuitemEls[0].focus();
+        }
+        else {
+            this.menuitemEls[currentIndex + 1].focus();
+        }
+    }
+    moveUp(menuitemEl) {
+        const currentIndex = this.menuitemEls.indexOf(menuitemEl);
+        if (currentIndex == 0) {
+            this.menuitemEls[this.menuitemEls.length - 1].focus();
+        }
+        else {
+            this.menuitemEls[currentIndex - 1].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.optgroupExpanded = true;
+    }
+    handleOptgroupHidden() {
+        this.optgroupExpanded = false;
+    }
+    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() {
+        // TODO overflow count not appearing due to refactor, in both regular select and nested select
+        if (this.overflowCount > 0) {
+            return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
+        }
+    }
+    handleClearSelection() {
+        this.optgroupEls.forEach((optgroupEl) => optgroupEl.emitDeselection());
+    }
+    renderClearSelectionButton() {
+        let selectedCount = this.childOptions.some((o) => o.selected);
+        if (selectedCount) {
+            return (h("button", { class: "menuitem", onClick: () => this.handleClearSelection(), tabindex: -1, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, this.clearSelectionMessage));
+        }
+    }
+    renderSelectionCount(optgroupEl) {
+        const selectionCount = this.countOptgroupSelected(optgroupEl);
+        if (selectionCount) {
+            const selectionCountMessage = intl.formatMessage({
+                id: "select.optgroupSelectionCount",
+                defaultMessage: "{numSelected, plural, one {Item} other {#}} Selected",
+                description: "Text indicating number of selected in a group.",
+            }, { numSelected: selectionCount });
+            return (h("div", { class: "selection-count" }, h("span", null, selectionCountMessage)));
+        }
+    }
+    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, { key: '8771f6abb8cc9ed2657d0f6ec31b837352cdb4d0', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'fb64f235e8ce911df58f04a426cf4149c9ea818e', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '86a40eefed2fe8b0113d2887dcca0453ac6a984a', class: "label-wrapper" }, h("label", { key: '296a84604f95f4446d06f1618879786a89e98902', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '212227342d050b279d589ea2c3dde05019ab166f', class: "button-wrapper" }, h("button", Object.assign({ key: 'f239aa90bdd30c10cdfdc8a355899b02c8c4ea94' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: 'f73375b774c2d940cf5afae37225ffaf4255486e', class: "overflowcontrol" }, h("span", { key: 'a9ae2f27508a9c69feeeea0345f825394c06c918', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount()), h("div", { key: '714a38674ca3011e57e25ade678f7d7b4203f5f2', class: "dropdown", ref: (el) => (this.dropdownEl = el) }, h("div", { key: '532dd17d04d7fbee57b53ed3f911e785321f6edf', class: `menu ${this.optgroupExpanded ? "hidden" : ""}` }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+            return (h("button", { class: "menuitem group-btn", role: "menuitem", tabindex: -1, onClick: () => {
+                    optgroupEl.isExpanded = !optgroupEl.isExpanded;
+                    forceUpdate(this.el);
+                }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl)));
+        })), h("div", { key: '9f65293fb3514808a7afc99f9ccf7be3c76854fb', class: `option-list-wrapper ${this.optgroupExpanded ? "visible" : ""}` }, h("slot", { key: 'ff01236e84136b637fe4dc6bbf4075ff655f661d' }))), h("div", { key: '49a965130ab5e5ebadc94b0661dbb97000f3621d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
+    }
+    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 | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-height",
+                "reflect": false
+            },
+            "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\n    ? intl.formatMessage({\n        id: \"select.multiPlaceholder\",\n        defaultMessage: \"Make a selection\",\n        description: \"Placeholder text for multiple select. Use imperative\",\n      })\n    : intl.formatMessage({\n        id: \"select.singlePlaceholder\",\n        defaultMessage: \"Select an Option\",\n        description: \"Placeholder text for single select. 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": {},
+            "optgroupExpanded": {}
+        };
+    }
+    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": "wmKeyLeftPressed",
+                "method": "handleOptionKeyLeft",
+                "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
+            }];
+    }
+}

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.css

@@ -0,0 +1,77 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+:host {
+  width: 100%;
+  display: none;
+}
+:host .sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+}
+
+:host(.visible) {
+  display: unset;
+}
+
+.return-btn {
+  cursor: pointer;
+  padding: 1.25rem;
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+  border-bottom: 1px solid #4a4a4a;
+}
+.return-btn:before {
+  display: inline-block;
+  font: normal normal normal 24px/1 "Material Design Icons";
+  font-size: inherit;
+  text-rendering: auto;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\f141";
+  pointer-events: none;
+  font-size: 1.12rem;
+}
+.return-btn:hover {
+  background: var(--wmcolor-select-option-background-hover);
+  outline: none;
+}