@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

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

@@ -0,0 +1,665 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Individual selectable item used inside wm-select, wm-nested-select (via wm-optgroup), and
+ * wm-optgroup. Renders as a listbox option with optional secondary text.
+ *
+ * @usageNotes
+ * - Text content is supplied as the element's text node (slot content). Do not nest other
+ *   elements inside wm-option.
+ * - Set the `selected` attribute/prop to pre-select an option on load.
+ * - In single-select mode, exactly one wm-option should be pre-selected (typically a
+ *   placeholder). In multi-select mode, zero or more options may be pre-selected.
+ * - The `value` prop is a pass-through convenience for application code to attach an
+ *   identifier; the component itself never reads or mutates it.
+ *
+ * @example {html} Basic option usage
+ * <wm-select label="Status">
+ *   <wm-option selected>Select a status</wm-option>
+ *   <wm-option value="active">Active</wm-option>
+ *   <wm-option value="inactive">Inactive</wm-option>
+ * </wm-select>
+ *
+ * @example {react} Basic option usage
+ * <WmSelect label="Status">
+ *   <WmOption selected={true}>Select a status</WmOption>
+ *   <WmOption value="active">Active</WmOption>
+ *   <WmOption value="inactive">Inactive</WmOption>
+ * </WmSelect>
+ *
+ * @example {html} Option with subinfo
+ * <wm-select label="User" multiple>
+ *   <wm-option subinfo="Biology dept">Alice</wm-option>
+ *   <wm-option subinfo="Chemistry dept">Bob</wm-option>
+ * </wm-select>
+ *
+ * @example {react} Option with subinfo
+ * <WmSelect label="User" multiple={true}>
+ *   <WmOption subinfo="Biology dept">Alice</WmOption>
+ *   <WmOption subinfo="Chemistry dept">Bob</WmOption>
+ * </WmSelect>
+ */
+export class Option {
+    constructor() {
+        this.value = undefined;
+        this.subinfo = undefined;
+        this.disabled = false;
+        this.selected = false;
+        this.focused = false;
+        this.searchTerm = "";
+    }
+    get hostClasses() {
+        let classes = [];
+        if (this.subinfo) {
+            classes.push("hassubinfo");
+        }
+        if (this.parentOptionList.multiple) {
+            classes.push("multi-option");
+        }
+        if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
+            classes.push("filtered-out");
+        }
+        return classes.join(" ");
+    }
+    get parentOptionList() {
+        if (this.el.classList.contains("clone")) {
+            return this.el.closest("priv-option-list");
+        }
+        else {
+            return this.el.assignedSlot.closest("priv-option-list");
+        }
+    }
+    handleKeydown(ev) {
+        switch (ev.key) {
+            case "ArrowUp":
+                ev.preventDefault();
+                this.wmKeyUpPressed.emit(this.el);
+                break;
+            case "ArrowDown":
+                ev.preventDefault();
+                this.wmKeyDownPressed.emit(this.el);
+                break;
+            case "Enter":
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.el.click();
+                    this.wmEnterKeyPressed.emit(this.el);
+                }
+                break;
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
+                this.wmEscKeyPressed.emit();
+                break;
+            case "Home":
+                ev.preventDefault();
+                this.wmHomeKeyPressed.emit();
+                break;
+            case "End":
+                ev.preventDefault();
+                this.wmEndKeyPressed.emit();
+                break;
+            case "ArrowLeft":
+                ev.preventDefault();
+                this.wmKeyLeftPressed.emit();
+                break;
+            default:
+                if (ev.key.length === 1) {
+                    ev.preventDefault();
+                    // emit for single characters ("a","l","5", etc), avoid others ("shift", "control", etc)
+                    this.wmLetterPressed.emit({ letter: ev.key, optionEl: this.el });
+                }
+        }
+    }
+    handleSelection() {
+        // using ev.detail because ev.target returns the wm-select for clone options
+        if (!this.disabled) {
+            if (this.el.classList.contains("clone")) {
+                this.intCloneClicked.emit(this.el); // used to then emit wmOptionSelected from the "real" wm-option
+            }
+            else {
+                if (this.parentOptionList.multiple) {
+                    this.selected
+                        ? this.wmOptionDeselected.emit(this.el)
+                        : this.wmOptionSelected.emit(this.el);
+                }
+                else {
+                    this.wmOptionSelected.emit(this.el);
+                }
+            }
+        }
+    }
+    handleBlur(ev) {
+        this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });
+    }
+    syncAriaSelected() {
+        // this function only keeps the aria-selected attr in sync with the selected prop
+        // all the logic for selecting / deselecting happens in the parent wm-select
+        this.selected ? this.el.setAttribute("aria-selected", "true") : this.el.setAttribute("aria-selected", "false");
+    }
+    syncAriaDisabled() {
+        this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
+    }
+    updateDisabledOnClick() {
+        if (this.disabled && this.el.onclick) {
+            this.onClickFunc = this.el.onclick;
+            this.el.onclick = null;
+        }
+        else if (!this.disabled && this.onClickFunc) {
+            this.el.onclick = this.onClickFunc;
+        }
+    }
+    handleSearch(ev) {
+        // filter is case-insensitive, so
+        this.searchTerm = ev.detail.searchTerm.toLowerCase();
+        if (this.searchTerm && this.el.textContent.toLowerCase().includes(this.searchTerm)) {
+            // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as "hel lo"
+            // aria-hidden and sr-only is used to circumvent this
+            // Because setting innerHTML unescapes < > and treats them as html tags,
+            // the option text must be seperated into normal, bold, normal sections then set via textContent
+            const matchIndex = this.el.textContent.toLowerCase().indexOf(this.searchTerm);
+            const beforeMatch = this.el.textContent.slice(0, matchIndex);
+            const duringMatch = this.el.textContent.slice(matchIndex, matchIndex + this.searchTerm.length);
+            const afterMatch = this.el.textContent.slice(matchIndex + this.searchTerm.length);
+            const bgSpan = document.createElement("span");
+            bgSpan.textContent = beforeMatch;
+            const midSpan = document.createElement("strong");
+            midSpan.textContent = duringMatch;
+            const endSpan = document.createElement("span");
+            endSpan.textContent = afterMatch;
+            this.textEl.innerHTML = ``;
+            this.textEl.appendChild(bgSpan);
+            this.textEl.appendChild(midSpan);
+            this.textEl.appendChild(endSpan);
+        }
+        else {
+            this.textEl.textContent = this.el.textContent;
+        }
+    }
+    componentWillLoad() {
+        this.syncAriaSelected();
+        this.syncAriaDisabled();
+        this.updateDisabledOnClick();
+        this.parentOptionList.addEventListener("optionListSearchChanged", (ev) => this.handleSearch(ev));
+    }
+    render() {
+        return (h(Host, { key: '08285bfaa2f143ace4c28ecc28fe5944319e9533', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '086530bad8bcaba8b2b5faa8fee6fec7b0220811', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '31e85c3cea385b1ec97785875217579d0e8e61f8', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '3885c40ee38981748e6c323315b80d74aded594c', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: 'e8709a371e680e106c635100c61022a7a3facae1', class: "sr-only" }, this.el.textContent)), h("div", { key: '61e04cad06700df6672a93a6fccc06eabcb4bbec', class: "subinfo" }, this.subinfo)));
+    }
+    static get is() { return "wm-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Application-defined identifier for this option. The component never reads\nor modifies this value \u2014 it is purely a pass-through for application code to attach an ID\nor key."
+                        }],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "subinfo": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Secondary text displayed beneath the option label."
+                        }],
+                    "text": ""
+                },
+                "attribute": "subinfo",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Prevents the option from being selected."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Marks this option as currently selected."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Programmatically focuses this option element when set to true. Managed by\nthe parent priv-option-list \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "attribute": "focused",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchTerm": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmOptionSelected",
+                "name": "wmOptionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when this option is selected by the user."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "`HTMLWmOptionElement` \u2014 the option element that was selected."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmOptionDeselected",
+                "name": "wmOptionDeselected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when this option is deselected by the user (multiselect mode only)."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "`HTMLWmOptionElement` \u2014 the option element that was deselected."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "intCloneClicked",
+                "name": "intCloneClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Fires when a clone option is clicked so the parent can relay the selection\nto the original wm-option \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmKeyUpPressed",
+                "name": "wmKeyUpPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals Arrow Up keydown to the parent option list for focus management \u2014\nnot for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmKeyDownPressed",
+                "name": "wmKeyDownPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals Arrow Down keydown to the parent option list for focus management \u2014\nnot for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmKeyLeftPressed",
+                "name": "wmKeyLeftPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals Arrow Left keydown to the parent wm-nested-select to navigate back\nto the group list \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmEscKeyPressed",
+                "name": "wmEscKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals Escape keydown to close the parent dropdown \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmHomeKeyPressed",
+                "name": "wmHomeKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals Home keydown to the parent option list to jump to the first option \u2014\nnot for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmEndKeyPressed",
+                "name": "wmEndKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals End keydown to the parent option list to jump to the last option \u2014\nnot for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmEnterKeyPressed",
+                "name": "wmEnterKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals Enter keydown for single-select close-on-confirm \u2014 not for\napplication use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmOptionElement",
+                    "resolved": "HTMLWmOptionElement",
+                    "references": {
+                        "HTMLWmOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmOptionElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmLetterPressed",
+                "name": "wmLetterPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals a printable-character keydown to the parent option list for\njump-to-match navigation \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ optionEl: HTMLElement; letter: string }",
+                    "resolved": "{ optionEl: HTMLElement; letter: string; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmOptionBlurred",
+                "name": "wmOptionBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Fires on blur so the parent can determine whether focus left the dropdown\nentirely \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ relatedTarget: EventTarget | null }",
+                    "resolved": "{ relatedTarget: EventTarget | null; }",
+                    "references": {
+                        "EventTarget": {
+                            "location": "global",
+                            "id": "global::EventTarget"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "syncAriaSelected"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncAriaDisabled"
+            }, {
+                "propName": "disabled",
+                "methodName": "updateDisabledOnClick"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "blur",
+                "method": "handleBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}