@watermarkinsights/ripple 3.12.0 → 3.13.0-9

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

@@ -1,20 +1,36 @@
-import { h, Component, Element, Event, Host, Listen, Prop, Watch } from "@stencil/core";
+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 isMultiChild() {
+  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.multiple;
+    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.wmKeyUpPressed.emit(this.el);
         break;
       case "ArrowDown":
         ev.preventDefault();
@@ -44,16 +60,13 @@ export class Option {
         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();
+      this.wmOptionSelected.emit(this.el);
       // the parent wm-select is in charge of the actual selection
     }
   }
@@ -81,14 +94,22 @@ export class Option {
       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.subinfo ? "hassubinfo" : ""} ${this.isMultiChild ? "multi-option" : ""}` },
-      h("div", { class: `option-wrapper ${this.isMultiChild ? "checkbox" : ""}` },
+    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)));
   }
@@ -191,6 +212,9 @@ export class Option {
       "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "searchTerm": {}
+  }; }
   static get events() { return [{
       "method": "wmOptionSelected",
       "name": "wmOptionSelected",
@@ -305,25 +329,6 @@ export class Option {
           }
         }
       }
-    }, {
-      "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",

package/dist/collection/components/wm-select/wm-select.css

@@ -124,14 +124,14 @@
   margin-left: 0.75rem;
 }
 
-.wrapper .dropdown {
+.wrapper .button-wrapper {
   position: relative;
   flex: 1;
   font-size: 1.125rem;
   color: #575195;
   min-width: 8.75rem;
 }
-.wrapper .dropdown .displayedoption {
+.wrapper .button-wrapper .displayedoption {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -157,11 +157,11 @@
   text-align: left;
 }
 @media only screen and (max-width: 768px) {
-  .wrapper .dropdown .displayedoption {
+  .wrapper .button-wrapper .displayedoption {
     height: 2.75rem;
   }
 }
-.wrapper .dropdown .displayedoption:before {
+.wrapper .button-wrapper .displayedoption:before {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
@@ -174,59 +174,59 @@
   right: 0.5625rem;
   pointer-events: none;
 }
-.wrapper .dropdown .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
+.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
   background: transparent;
   text-decoration: none;
 }
-.wrapper .dropdown .displayedoption:active {
+.wrapper .button-wrapper .displayedoption:active {
   -ms-transform: scale(1, 1) !important;
   transform: scale(1, 1) !important;
 }
-.wrapper .dropdown .displayedoption:focus {
+.wrapper .button-wrapper .displayedoption:focus {
   outline: none;
 }
-.wrapper .dropdown .displayedoption::-moz-focus-inner {
+.wrapper .button-wrapper .displayedoption::-moz-focus-inner {
   border: 0;
 }
-.wrapper .dropdown .displayedoption.user-is-tabbing:focus {
+.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus {
   -webkit-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
   -moz-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
   box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
 }
-.wrapper .dropdown .displayedoption.user-is-tabbing:focus::-moz-focus-inner {
+.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus::-moz-focus-inner {
   border: 0;
 }
-.wrapper .dropdown .displayedoption .overflowcontrol {
+.wrapper .button-wrapper .displayedoption .overflowcontrol {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   flex: 1;
 }
-.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo {
   display: flex;
 }
-.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo .button-text {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text {
   flex: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   min-width: 0;
 }
-.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo .subinfo {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo {
   flex: none;
   font-style: italic;
 }
-.wrapper .dropdown .displayedoption .overflow-counter {
+.wrapper .button-wrapper .displayedoption .overflow-counter {
   font-weight: bold;
   margin-left: 0.5rem;
 }
-.wrapper .dropdown > .displayedoption[disabled] {
+.wrapper .button-wrapper > .displayedoption[disabled] {
   color: #6b6b6b;
   border-color: #8a8a8a;
   background: #f0f0f0;
   cursor: default;
 }
-.wrapper .dropdown > .options {
+.wrapper .button-wrapper > .dropdown {
   -webkit-overflow-scrolling: touch;
   overflow: auto;
   max-height: 12.5rem;
@@ -257,7 +257,7 @@
   width: 100%;
   font-size: 0.875rem;
 }
-.wrapper .dropdown > .options.upwards {
+.wrapper .button-wrapper > .dropdown.upwards {
   top: unset;
   bottom: calc(100% - 2.5rem);
   -ms-transform-origin: center bottom;
@@ -265,16 +265,16 @@
   -moz-transform-origin: center bottom;
   transform-origin: center bottom;
 }
-.wrapper .dropdown > .options.hidden {
+.wrapper .button-wrapper > .dropdown.hidden {
   visibility: hidden;
 }
-.wrapper .dropdown > .options.open {
+.wrapper .button-wrapper > .dropdown.open {
   -ms-transform: scale(1, 1);
   -webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
   transform: scale(1, 1);
 }
-.wrapper.invalid .dropdown .displayedoption {
+.wrapper.invalid .button-wrapper .displayedoption {
   -webkit-box-shadow: 0 0 0 1px #c0392b;
   -moz-box-shadow: 0 0 0 1px #c0392b;
   box-shadow: 0 0 0 1px #c0392b;
@@ -291,7 +291,60 @@
   font-style: italic;
 }
 
-.rtl > .options {
+.search {
+  box-sizing: border-box;
+  border-bottom: 2px solid rgba(46, 27, 70, 0.05);
+  padding: 1.25rem;
+}
+.search .searchfield-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: 2.75rem;
+  width: 100%;
+  padding: 0 0.75rem;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid #4a4a4a;
+}
+.search .searchfield-wrapper:focus, .search .searchfield-wrapper.focus {
+  -webkit-box-shadow: 0 0 0 1px #20cbd4;
+  -moz-box-shadow: 0 0 0 1px #20cbd4;
+  box-shadow: 0 0 0 1px #20cbd4;
+  outline: none;
+  border-color: #20cbd4;
+}
+.search .searchfield {
+  width: 100%;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  margin-left: 0.25rem;
+}
+.search .icon: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: "\f349";
+  color: #6b6b6b;
+  font-size: 0.875rem;
+}
+
+.search-results-message {
+  padding: 1.25rem;
+  color: #4a4a4a;
+  font-size: 0.875rem;
+  font-style: italic;
+}
+
+.rtl > .dropdown {
   -ms-transform-origin: left top;
   -webkit-transform-origin: left top;
   -moz-transform-origin: left top;
@@ -299,7 +352,7 @@
   left: 0;
   right: auto;
 }
-.rtl > .options .option {
+.rtl > .dropdown .option {
   padding-left: 3rem;
   padding-right: 1.25rem;
 }