@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

package/dist/collection/components/wm-search/wm-search.js

@@ -0,0 +1,429 @@
+import { h, Host } from "@stencil/core";
+import { intl, handleDisabledAttribute, toBool } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
+export class Search {
+    constructor() {
+        this.linkEl = null;
+        this.searchType = "basic";
+        this.disabled = false;
+        this.placeholder = "";
+        this.label = "";
+        this.numResults = 0;
+        this.value = "";
+        this.isTabbing = false;
+        this.highlightedId = "";
+        this.highlightedName = null;
+        this.highlightedNum = 0;
+        this.previousBlurredValue = "";
+        this.parentModal = undefined;
+        this.announcement = "";
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get resultCount() {
+        let message = "";
+        const basicMessage = intl.formatMessage({
+            id: "search.resultsFound",
+            defaultMessage: "{numResults, plural, =0 {No results} one {1 result} other {# results}} found",
+        }, { numResults: this.numResults });
+        const findMessage = intl.formatMessage({
+            id: "search.xOfYResults",
+            defaultMessage: "{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}",
+        }, { numResults: this.numResults, current: this.highlightedNum });
+        if (this.searchType === "basic") {
+            message = basicMessage;
+        }
+        else if (this.searchType === "find") {
+            message = findMessage;
+        }
+        return message;
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+        this.linkEl && this.linkEl.classList.remove("sr-only");
+        this.linkEl && this.linkEl.classList.add("user-is-tabbing");
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+        this.linkEl && this.linkEl.classList.add("sr-only");
+        this.linkEl && this.linkEl.classList.remove("user-is-tabbing");
+    }
+    componentWillLoad() {
+        if (this.placeholder === "") {
+            console.error("You must set the placeholder property for the wm-search component.");
+        }
+        if (this.label === "") {
+            console.error("You must set the label property for the wm-search component.");
+        }
+        this.hookToModal();
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    hookToModal() {
+        // if the search is in a modal we want to clear the input when the modal closes
+        let el = this.el;
+        while (!!el) {
+            if (el.tagName === "WM-MODAL") {
+                this.parentModal = el;
+            }
+            el = el.parentElement;
+        }
+        if (this.parentModal) {
+            const events = ["wmModalCloseTriggered", "wmModalPrimaryTriggered", "wmModalSecondaryTriggered"];
+            events.map((event) => {
+                this.parentModal.addEventListener(event, () => {
+                    this.updateValue("");
+                });
+            });
+        }
+    }
+    // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)
+    async updateValue(value) {
+        this.value = value;
+        //For search-and-find, the results should always restart at "[1 or 0] of ..." after any new input.
+        //Reset the highlight count here just in case the new value doesn't end up changing the number of results.
+        this.resetHighlightCountToStart();
+        // Results should be announced at every input, even if no change in results occurred
+        this.announceResults();
+    }
+    handleNumResultsUpdate() {
+        this.resetHighlightCountToStart();
+        if (this.value) {
+            this.announceResults();
+        }
+    }
+    handleDisabledChange() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    resetHighlightCountToStart() {
+        if (this.searchType === "find") {
+            this.highlightedNum = this.numResults ? 1 : 0;
+        }
+    }
+    announce(message) {
+        if (this.resultsLiveRegion.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
+    announceResults() {
+        window.requestAnimationFrame(() => {
+            // requestAnimationFrame to allow all changes to occur before announcing results
+            let messageToAnnounce = this.resultCount;
+            // if a result is found, also include it after the liveregion message
+            if (this.searchType === "find" && this.highlightedName) {
+                messageToAnnounce += `, ${this.highlightedName}`;
+            }
+            this.announce(messageToAnnounce);
+        });
+    }
+    changeHighlightedNum(newNum) {
+        if (this.numResults) {
+            if (newNum < 1) {
+                // we were on the first item, going down: go to last item
+                this.highlightedNum = this.numResults;
+            }
+            else if (newNum > this.numResults) {
+                // we were on the last item, going up: go to first item
+                this.highlightedNum = 1;
+            }
+            else {
+                this.highlightedNum = newNum;
+            }
+            this.wmSearchBrowseResults.emit({ position: this.highlightedNum });
+            this.announceResults();
+        }
+    }
+    handleBlur() {
+        if (this.previousBlurredValue !== this.value) {
+            this.wmSearchValueChanged.emit({ value: this.value });
+        }
+        this.previousBlurredValue = this.value;
+    }
+    /**
+     * Functions that return elements specifically for search-and-find.
+     */
+    renderResultsAndBrowseButtons() {
+        return (h("div", { class: "wm-find-elements" }, h("div", { id: "results-display", class: "results" }, !!this.value && this.resultCount), h("div", { class: "wm-button-collection" }, h("wm-button", { "button-type": "icononly", icon: "#move-up", tooltip: globalMessages.previous, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum - 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
+                id: "search.previousResult",
+                defaultMessage: "Press to hear previous matching result",
+            }) }), h("wm-button", { "button-type": "icononly", icon: "#move-down", tooltip: globalMessages.next, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum + 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
+                id: "search.nextResult",
+                defaultMessage: "Press to hear next matching result",
+            }) }))));
+    }
+    renderJumpToLink() {
+        if (this.numResults && this.highlightedId) {
+            return (h("a", { ref: (el) => (this.linkEl = el), href: `#${this.highlightedId}`, class: "jump-results sr-only" }, intl.formatMessage({
+                id: "search.jumpToResult",
+                defaultMessage: "Jump to search result in list",
+            })));
+        }
+        else {
+            return null;
+        }
+    }
+    /**
+     * End search and find render helpers
+     */
+    render() {
+        return (h(Host, { key: 'ea897892c22169b3e0eca35877a71ca023f1d57d' }, h("div", { key: '82799fcd9270bd67d973d32fe19613109e4f6908', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '5d866059fd56e0b1799be743de518a15cfc1499b', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+                id: "search.typeToFilterResults",
+                defaultMessage: "Type to filter the results",
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '704d8e504047774ea57e43659b33b72de46027d2', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: 'f7ae1d60780b07483266ac1acd612f4e0f5780e1', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+    }
+    static get is() { return "wm-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-search.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "searchType": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"basic\" | \"find\"",
+                    "resolved": "\"basic\" | \"find\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-type",
+                "reflect": false,
+                "defaultValue": "\"basic\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Props required for both variants."
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "numResults": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "num-results",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This exposes the input's value on the host component so that the app can access it."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "\"\""
+            },
+            "highlightedId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\nso that tabbing and screen reader users can jump to this option rather than tab through the list to find it."
+                },
+                "attribute": "highlighted-id",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "highlightedName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "highlighted-name",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {},
+            "highlightedNum": {},
+            "previousBlurredValue": {},
+            "parentModal": {},
+            "announcement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmSearchBrowseResults",
+                "name": "wmSearchBrowseResults",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the buttons in the search-and-find variant are pressed."
+                },
+                "complexType": {
+                    "original": "{ position: number }",
+                    "resolved": "{ position: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "wmSearchValueChanged",
+                "name": "wmSearchValueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "updateValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "numResults",
+                "methodName": "handleNumResultsUpdate"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}