@watermarkinsights/ripple 3.13.0-8 → 3.13.0-9

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

@@ -1,414 +1,419 @@
-import { h, Component, Element, Event, Host, Listen, Prop, Watch } from "@stencil/core";
-export class Option {
-  constructor() {
-    this.subinfo = undefined;
-    this.disabled = false;
-    this.selected = false;
-    this.focused = false;
-  }
-  get isMultiChild() {
-    var _a;
-    return (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.multiple;
-  }
-  handleKeydown(ev) {
-    switch (ev.key) {
-      case "ArrowUp":
-        ev.preventDefault();
-        this.wmKeyUpPressed.emit();
-        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 " ":
-        ev.preventDefault();
-        this.el.click();
-        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 "Tab":
-        this.wmTabKeyPressed.emit();
-        break;
-      default:
-        this.wmLetterPressed.emit(ev.key);
-    }
-  }
-  handleSelection() {
-    if (!this.disabled) {
-      this.wmOptionSelected.emit();
-      // the parent wm-select is in charge of the actual selection
-    }
-  }
-  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.removeAttribute("aria-selected");
-  }
-  syncAriaDisabled() {
-    this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
-  }
-  focusHandler(newValue) {
-    if (newValue)
-      this.el.focus();
-  }
-  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;
-    }
-  }
-  componentWillLoad() {
-    this.syncAriaSelected();
-    this.syncAriaDisabled();
-    this.updateDisabledOnClick();
-  }
-  render() {
-    return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: `${this.subinfo ? "hassubinfo" : ""} ${this.isMultiChild ? "multi-option" : ""}` },
-      h("div", { class: `option-wrapper ${this.isMultiChild ? "checkbox" : ""}` },
-        h("slot", null)),
-      h("div", { 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": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "subinfo": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "subinfo",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "selected": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "focused": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "focused",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "wmOptionSelected",
-      "name": "wmOptionSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmKeyUpPressed",
-      "name": "wmKeyUpPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmKeyDownPressed",
-      "name": "wmKeyDownPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmEscKeyPressed",
-      "name": "wmEscKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmHomeKeyPressed",
-      "name": "wmHomeKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmEndKeyPressed",
-      "name": "wmEndKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmTabKeyPressed",
-      "name": "wmTabKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmEnterKeyPressed",
-      "name": "wmEnterKeyPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLWmOptionElement",
-        "resolved": "HTMLWmOptionElement",
-        "references": {
-          "HTMLWmOptionElement": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "wmLetterPressed",
-      "name": "wmLetterPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "wmOptionBlurred",
-      "name": "wmOptionBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ relatedTarget: EventTarget | null }",
-        "resolved": "{ relatedTarget: EventTarget | null; }",
-        "references": {
-          "EventTarget": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "selected",
-      "methodName": "syncAriaSelected"
-    }, {
-      "propName": "disabled",
-      "methodName": "syncAriaDisabled"
-    }, {
-      "propName": "focused",
-      "methodName": "focusHandler"
-    }, {
-      "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
-    }]; }
-}
+import { h, Component, Element, Event, Host, Listen, Prop, State, Watch } from "@stencil/core";
+export class Option {
+  constructor() {
+    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.parentSelectEl.multiple) {
+      classes.push("multi-option");
+    }
+    if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
+      classes.push("filtered-out");
+    }
+    return classes.join(" ");
+  }
+  get parentSelectEl() {
+    var _a;
+    return ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== "WM-SELECT"
+      ? this.el.getRootNode().host
+      : this.el.parentElement;
+  }
+  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 " ":
+        ev.preventDefault();
+        this.el.click();
+        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;
+      default:
+        this.wmLetterPressed.emit(ev.key);
+    }
+  }
+  handleSelection() {
+    if (!this.disabled) {
+      this.wmOptionSelected.emit(this.el);
+      // the parent wm-select is in charge of the actual selection
+    }
+  }
+  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.removeAttribute("aria-selected");
+  }
+  syncAriaDisabled() {
+    this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
+  }
+  focusHandler(newValue) {
+    if (newValue)
+      this.el.focus();
+  }
+  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();
+    const regexp = new RegExp(`${this.searchTerm}`, "gi");
+    const boldedText = this.el.textContent.replace(regexp, (match) => `<b>${match}</b>`);
+    this.textEl.innerHTML = `<span>${boldedText}</span>`;
+  }
+  componentWillLoad() {
+    this.syncAriaSelected();
+    this.syncAriaDisabled();
+    this.updateDisabledOnClick();
+    this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
+  }
+  render() {
+    return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses },
+      h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}`, ref: (el) => (this.textEl = el) },
+        h("slot", null)),
+      h("div", { 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": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "subinfo": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "subinfo",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "focused": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLWmOptionElement",
+        "resolved": "HTMLWmOptionElement",
+        "references": {
+          "HTMLWmOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "wmKeyUpPressed",
+      "name": "wmKeyUpPressed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLWmOptionElement",
+        "resolved": "HTMLWmOptionElement",
+        "references": {
+          "HTMLWmOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "wmKeyDownPressed",
+      "name": "wmKeyDownPressed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLWmOptionElement",
+        "resolved": "HTMLWmOptionElement",
+        "references": {
+          "HTMLWmOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "wmEscKeyPressed",
+      "name": "wmEscKeyPressed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLWmOptionElement",
+        "resolved": "HTMLWmOptionElement",
+        "references": {
+          "HTMLWmOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "wmHomeKeyPressed",
+      "name": "wmHomeKeyPressed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLWmOptionElement",
+        "resolved": "HTMLWmOptionElement",
+        "references": {
+          "HTMLWmOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "wmEndKeyPressed",
+      "name": "wmEndKeyPressed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLWmOptionElement",
+        "resolved": "HTMLWmOptionElement",
+        "references": {
+          "HTMLWmOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "wmEnterKeyPressed",
+      "name": "wmEnterKeyPressed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLWmOptionElement",
+        "resolved": "HTMLWmOptionElement",
+        "references": {
+          "HTMLWmOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "wmLetterPressed",
+      "name": "wmLetterPressed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "wmOptionBlurred",
+      "name": "wmOptionBlurred",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ relatedTarget: EventTarget | null }",
+        "resolved": "{ relatedTarget: EventTarget | null; }",
+        "references": {
+          "EventTarget": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "selected",
+      "methodName": "syncAriaSelected"
+    }, {
+      "propName": "disabled",
+      "methodName": "syncAriaDisabled"
+    }, {
+      "propName": "focused",
+      "methodName": "focusHandler"
+    }, {
+      "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
+    }]; }
+}