@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.10

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

@@ -1,6 +1,15 @@
 import { h, Host } from "@stencil/core";
 export class TabItem {
     constructor() {
+        /**
+         * Indicates whether the tab is currently active
+         */
+        this.selected = false;
+        this.show = true;
+        /**
+         * The id of the tab, linked to a tab panel.
+         */
+        this.tabId = "";
         this.tabClicked = (ev) => {
             ev.preventDefault();
             this.wmTabSelected.emit({ tabId: this.tabId });
@@ -16,9 +25,6 @@ export class TabItem {
                 this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
             }
         };
-        this.selected = false;
-        this.show = true;
-        this.tabId = "";
     }
     get parentTabList() {
         return this.el.parentElement;
@@ -40,7 +46,7 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { key: '1711c11246e52e27e71f30e566ab41683ee23cd4', role: "presentation" }, h("li", { key: 'f57bc99f98ff481689a68889e81c5925aa68892c', class: "tab-item", role: "presentation" }, h("a", { key: '76e051b18c17ea8367f74cc9a2b7b2b84d2ef990', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: 'e834ebba3c6c512ef7b1093d3c1ea298745fbf85' })))));
+        return (h(Host, { key: 'bcfcc1fcb3cd91456ea38458f7eb26200f27dabb', role: "presentation" }, h("li", { key: '9ece015d01a832e52af9b520695cc303a674a22e', class: "tab-item", role: "presentation" }, h("a", { key: '8b43cebd1ff8a19aa81b23db7ce0265525f79a8a', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: 'b04fa980a8eaffd3ffb64258941e943e14343cfc' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -59,6 +65,7 @@ export class TabItem {
         return {
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -71,12 +78,14 @@ export class TabItem {
                     "tags": [],
                     "text": "Indicates whether the tab is currently active"
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "show": {
                 "type": "boolean",
+                "attribute": "show",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -89,12 +98,14 @@ export class TabItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "tabId": {
                 "type": "string",
+                "attribute": "tab-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -107,7 +118,8 @@ export class TabItem {
                     "tags": [],
                     "text": "The id of the tab, linked to a tab panel."
                 },
-                "attribute": "tab-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

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

@@ -13,9 +13,6 @@ export class TabList {
             }
             forceUpdate(this.el);
         }, 10);
-        this.customBackground = undefined;
-        this.customPadding = undefined;
-        this.selectedTab = undefined;
     }
     /**
      * Set to true when the tab list exceeds the parent width. Component will render the menu layout.
@@ -160,7 +157,7 @@ export class TabList {
             } }, t.textContent)));
     }
     render() {
-        return h(Host, { key: '457d95719d7ab99677336d44c5bff02f5780a6af', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return h(Host, { key: 'd4a1e7380e109d5707d2215418d980a9fe319f40', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +176,7 @@ export class TabList {
         return {
             "customBackground": {
                 "type": "string",
+                "attribute": "custom-background",
                 "mutable": false,
                 "complexType": {
                     "original": "\"dark\" | \"\"",
@@ -191,11 +189,13 @@ export class TabList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "custom-background",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "customPadding": {
                 "type": "string",
+                "attribute": "custom-padding",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -208,11 +208,13 @@ export class TabList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "custom-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "selectedTab": {
                 "type": "string",
+                "attribute": "selected-tab",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -225,7 +227,8 @@ export class TabList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "selected-tab",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -2,7 +2,13 @@ import { Host, h } from "@stencil/core";
 import { generateId } from "../../../global/functions";
 export class TabPanel {
     constructor() {
+        /**
+         * Indicates whether the panel should be displayed or not.
+         */
         this.active = false;
+        /**
+         * The id of the panel, linked to a tabItem in the tablist.
+         */
         this.tabId = "";
     }
     componentWillLoad() {
@@ -12,7 +18,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: '0b7f81b627ce53b1ce496c4babd16bf74c57275c', role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: '760cc80a7e445fa0edae74157392fb49afb10fb0', role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {
@@ -29,6 +35,7 @@ export class TabPanel {
         return {
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -41,12 +48,14 @@ export class TabPanel {
                     "tags": [],
                     "text": "Indicates whether the panel should be displayed or not."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "tabId": {
                 "type": "string",
+                "attribute": "tab-id",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -59,7 +68,8 @@ export class TabPanel {
                     "tags": [],
                     "text": "The id of the panel, linked to a tabItem in the tablist."
                 },
-                "attribute": "tab-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

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

@@ -895,21 +895,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+:host .wrapper .label-wrapper {
+  display: flex;
+}
 :host .wrapper .label {
-  display: block;
+  display: inline-block;
   line-height: normal;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-bottom: 0.25rem;
 }
-:host .wrapper .label .required {
+:host .wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 :host .wrapper.label-left {
   flex-direction: row;
 }
 :host .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 :host .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -917,7 +924,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -931,11 +937,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-:host .wrapper.invalid .label {
+:host .wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -944,14 +950,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
-  vertical-align: middle;
+  align-self: center;
   flex-shrink: 0;
   transform: translateY(-1px);
 }
@@ -1229,6 +1235,9 @@
   overflow: auto;
   margin-block-start: 1.5rem;
 }
+:host .table-wrapper:focus {
+  outline: none;
+}
 :host .table-wrapper #table {
   width: 100%;
   border-spacing: 0px;
@@ -1255,10 +1264,6 @@
   box-shadow: inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);
   font-weight: 500;
 }
-:host .table-wrapper tr.focused {
-  background-color: var(--wmcolor-taginput-row-background-focus);
-  box-shadow: none;
-}
 :host .table-wrapper tr:hover:not(.locked) {
   background-color: var(--wmcolor-taginput-row-background-hover);
   box-shadow: none;
@@ -1271,21 +1276,25 @@
   color: var(--wmcolor-taginput-tag-text);
   margin-inline-end: 0.5rem;
 }
+:host .table-wrapper.user-is-keying:focus-visible tr.focused {
+  background-color: var(--wmcolor-taginput-row-background-focus);
+  box-shadow: none;
+}
 :host .table-wrapper td {
   height: 3.75rem;
   vertical-align: middle;
   padding: 0 1.5rem;
   cursor: pointer;
 }
-:host .table-wrapper td.focused {
-  outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: -3px;
-}
 :host .table-wrapper td .cell-content-wrapper.trunc {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+:host .table-wrapper.user-is-keying:focus-visible td.focused {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: -3px;
+}
 :host .description {
   display: none;
 }