@watermarkinsights/ripple 3.27.0 → 3.27.1

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -1,108 +1,108 @@
-import { Host, h } from "@stencil/core";
-import { generateId } from "../../../global/functions";
-export class TabPanel {
-  constructor() {
-    this.active = false;
-    this.tabId = "";
-  }
-  componentWillLoad() {
-    !this.el.id && this.el.setAttribute("id", generateId());
-  }
-  componentDidLoad() {
-    this.tabPanelLoaded.emit({ tabId: this.tabId });
-  }
-  toggleTabbingOn() {
-    this.el.classList.add("user-is-tabbing");
-  }
-  toggleTabbingOff() {
-    this.el.classList.remove("user-is-tabbing");
-  }
-  render() {
-    return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
-  }
-  static get is() { return "wm-tab-panel"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-tab-panel.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-tab-panel.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether the panel should be displayed or not."
-        },
-        "attribute": "active",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "tabId": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The id of the panel, linked to a tabItem in the tablist."
-        },
-        "attribute": "tab-id",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabPanelLoaded",
-        "name": "tabPanelLoaded",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ tabId: string }",
-          "resolved": "{ tabId: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "toggleTabbingOn",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "toggleTabbingOff",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { Host, h } from "@stencil/core";
+import { generateId } from "../../../global/functions";
+export class TabPanel {
+  constructor() {
+    this.active = false;
+    this.tabId = "";
+  }
+  componentWillLoad() {
+    !this.el.id && this.el.setAttribute("id", generateId());
+  }
+  componentDidLoad() {
+    this.tabPanelLoaded.emit({ tabId: this.tabId });
+  }
+  toggleTabbingOn() {
+    this.el.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.el.classList.remove("user-is-tabbing");
+  }
+  render() {
+    return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
+  }
+  static get is() { return "wm-tab-panel"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-tab-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-tab-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the panel should be displayed or not."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "tabId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The id of the panel, linked to a tabItem in the tablist."
+        },
+        "attribute": "tab-id",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabPanelLoaded",
+        "name": "tabPanelLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ tabId: string }",
+          "resolved": "{ tabId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "toggleTabbingOn",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "toggleTabbingOff",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.js

@@ -1,122 +1,122 @@
-export class TagInputRow {
-  constructor() {
-    this.col1 = undefined;
-    this.col2 = undefined;
-    this.col3 = undefined;
-    this.col4 = undefined;
-    this.locked = false;
-  }
-  componentDidUpdate() {
-    this.wmTagInputRowUpdated.emit();
-  }
-  static get is() { return "wm-tag-input-row"; }
-  static get properties() {
-    return {
-      "col1": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col1",
-        "reflect": false
-      },
-      "col2": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col2",
-        "reflect": false
-      },
-      "col3": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col3",
-        "reflect": false
-      },
-      "col4": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col4",
-        "reflect": false
-      },
-      "locked": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "locked",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmTagInputRowUpdated",
-        "name": "wmTagInputRowUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
+export class TagInputRow {
+  constructor() {
+    this.col1 = undefined;
+    this.col2 = undefined;
+    this.col3 = undefined;
+    this.col4 = undefined;
+    this.locked = false;
+  }
+  componentDidUpdate() {
+    this.wmTagInputRowUpdated.emit();
+  }
+  static get is() { return "wm-tag-input-row"; }
+  static get properties() {
+    return {
+      "col1": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col1",
+        "reflect": false
+      },
+      "col2": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col2",
+        "reflect": false
+      },
+      "col3": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col3",
+        "reflect": false
+      },
+      "col4": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col4",
+        "reflect": false
+      },
+      "locked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "locked",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmTagInputRowUpdated",
+        "name": "wmTagInputRowUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -161,6 +161,10 @@ wm-tag-input .field-wrapper.invalid {
   box-shadow: 0 0 0 1px #c0392b;
   border-color: #c0392b;
 }
+:host .wrapper:not(.label-left) .field-wrapper,
+wm-tag-input .wrapper:not(.label-left) .field-wrapper {
+  flex-shrink: 0;
+}
 :host .character-count,
 wm-tag-input .character-count {
   display: flex;
@@ -176,9 +180,9 @@ wm-tag-input .character-count {
 wm-tag-input .tags-and-input-wrapper {
   position: relative;
   width: 100%;
-  padding: 0.5rem 0.25rem 0.5rem 0;
-  margin-bottom: -0.5rem;
-  overflow: hidden;
+  padding: 8px 8px 8px 0;
+  overflow: auto;
+  max-height: 200px;
 }
 :host .upper-row,
 wm-tag-input .upper-row {
@@ -224,8 +228,9 @@ wm-tag-input #max-tags {
 wm-tag-input .tag-area {
   display: flex;
   flex-wrap: wrap;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  gap: 8px;
 }
 :host .tag-area:focus,
 wm-tag-input .tag-area:focus {
@@ -240,9 +245,6 @@ wm-tag-input .tag-area [role=option] {
   color: #4a4a4a;
   background-color: rgba(3, 0, 0, 0.1);
   padding: 0.5rem 0.625rem;
-  margin-bottom: 0.5rem;
-  margin-right: 0.25rem;
-  margin-left: 0.25rem;
   transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: pre;
 }
@@ -319,25 +321,27 @@ wm-tag-input .tag-area [role=option] .icon.lock:before {
   -moz-osx-font-smoothing: grayscale;
   content: "\f341";
 }
-:host input,
-wm-tag-input input {
+:host .input,
+wm-tag-input .input {
   font-family: inherit;
   border: none;
   height: 1.75rem;
   padding: 0;
-  margin-bottom: 0.5rem;
-  margin-right: 0.25rem;
-  padding-left: 0.5rem;
-  right: 0px;
+  margin: 0;
+  right: 8px;
 }
-:host input.hidden,
-wm-tag-input input.hidden {
+:host .input.hidden,
+wm-tag-input .input.hidden {
   display: none;
 }
-:host input:focus,
-wm-tag-input input:focus {
+:host .input:focus,
+wm-tag-input .input:focus {
   outline: none;
 }
+:host .tag-area + .input.extended,
+wm-tag-input .tag-area + .input.extended {
+  margin-block-start: 8px;
+}
 :host .dropdown-wrapper,
 wm-tag-input .dropdown-wrapper {
   margin: 0;