@watermarkinsights/ripple 5.6.0 → 5.7.0-1

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

@@ -0,0 +1,235 @@
+import { h, Host } from "@stencil/core";
+import { handleDisabledAttribute, toBool } from "../../../global/functions";
+export class Optgroup {
+    constructor() {
+        this.label = undefined;
+        this.isExpanded = false;
+        this.multiple = false;
+        this.disabled = false;
+    }
+    get parentNestedSelect() {
+        return this.el.parentElement;
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    isExpandedChanged() {
+        if (this.isExpanded) {
+            this.el.classList.add("visible");
+            this.optgroupExpanded.emit();
+            window.setTimeout(() => {
+                // wait for slide in animation to complete before assigning focus
+                this.optionListEl.handleInitialFocus();
+            }, 250);
+        }
+        else {
+            this.optgroupHidden.emit(this.label);
+            this.optionListEl.clearSearch();
+            window.setTimeout(() => {
+                // wait for slide out animation to complete before hiding
+                this.el.classList.remove("visible");
+            }, 250);
+        }
+    }
+    async emitDeselection() {
+        this.wmOptgroupAllDeselected.emit();
+    }
+    handleOptionKeyLeft() {
+        this.isExpanded = false;
+    }
+    componentWillLoad() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    render() {
+        return (h(Host, null, h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
+    }
+    static get is() { return "wm-optgroup"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-optgroup.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-optgroup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-expanded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmOptgroupAllSelected",
+                "name": "wmOptgroupAllSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmOptgroupAllDeselected",
+                "name": "wmOptgroupAllDeselected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "optgroupExpanded",
+                "name": "optgroupExpanded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "optgroupHidden",
+                "name": "optgroupHidden",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "emitDeselection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isExpanded",
+                "methodName": "isExpandedChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmKeyLeftPressed",
+                "method": "handleOptionKeyLeft",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/{wm-option → selects/wm-option}/wm-option.css

@@ -153,7 +153,7 @@
 
 :host(:focus) {
   outline: none;
-  background: var(--wmcolor-select-option-background-hover);
+  background: var(--wmcolor-select-option-background-focus);
 }
 
 :host(:hover) {

package/dist/collection/components/{wm-option → selects/wm-option}/wm-option.js

@@ -13,7 +13,7 @@ export class Option {
         if (this.subinfo) {
             classes.push("hassubinfo");
         }
-        if (this.parentSelectEl.multiple) {
+        if (this.parentOptionList.multiple) {
             classes.push("multi-option");
         }
         if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
@@ -21,11 +21,13 @@ export class Option {
         }
         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;
+    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) {
@@ -57,6 +59,10 @@ export class Option {
                 ev.preventDefault();
                 this.wmEndKeyPressed.emit();
                 break;
+            case "ArrowLeft":
+                ev.preventDefault();
+                this.wmKeyLeftPressed.emit();
+                break;
             default:
                 if (ev.key.length === 1) {
                     ev.preventDefault();
@@ -72,7 +78,7 @@ export class Option {
                 this.intCloneClicked.emit(this.el); // used to then emit wmOptionSelected from the "real" wm-option
             }
             else {
-                if (this.parentSelectEl.multiple) {
+                if (this.parentOptionList.multiple) {
                     this.selected
                         ? this.wmOptionDeselected.emit(this.el)
                         : this.wmOptionSelected.emit(this.el);
@@ -134,10 +140,10 @@ export class Option {
         this.syncAriaSelected();
         this.syncAriaDisabled();
         this.updateDisabledOnClick();
-        this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
+        this.parentOptionList.addEventListener("optionListSearchChanged", (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" : ""}` }, h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
+        return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }
@@ -350,6 +356,21 @@ export class Option {
                         }
                     }
                 }
+            }, {
+                "method": "wmKeyLeftPressed",
+                "name": "wmKeyLeftPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }, {
                 "method": "wmEscKeyPressed",
                 "name": "wmEscKeyPressed",

package/dist/collection/components/{wm-select → selects/wm-select}/wm-select.css

@@ -302,78 +302,11 @@
   overflow: auto;
 }
 
-.select-all {
-  width: 100%;
-  cursor: pointer;
-  padding: 1.25rem;
-  border: none;
-  margin: 0;
-  border-bottom: 2px solid;
-  border-color: var(--wmcolor-select-selectall-border);
-  background: var(--wmcolor-select-selectall-background);
-  font-family: inherit;
-  font-size: inherit;
-  text-align: left;
-  text-align: start;
-  font-weight: 500;
-  color: var(--wmcolor-select-selectall-text);
-  user-select: none;
-}
-.select-all:hover, .select-all:focus {
-  outline: none;
-  background: #f4f4f4;
-}
-
-.search {
-  box-sizing: border-box;
-  border-bottom: 2px solid;
-  border-color: var(--wmcolor-select-option-border);
-  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;
-  border-color: var(--wmcolor-select-search-border);
-}
-.search .searchfield-wrapper:focus, .search .searchfield-wrapper.focus {
-  outline: 2px solid var(--wmcolor-input-border-focus);
-  border-color: var(--wmcolor-input-border-focus);
-}
-.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: var(--wmcolor-select-search-icon);
-  font-size: 1.12rem;
-}
-
-.search-results-message {
-  padding: 1.25rem;
-  color: var(--wmcolor-select-searchresults-text);
-  font-size: 0.875rem;
-  font-style: italic;
+.measurement-area {
+  position: absolute;
+  visibility: hidden;
+  height: 0px;
+  pointer-events: none;
 }
 
 .rtl > .dropdown {