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

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js

@@ -1,20 +1,12 @@
 import { h, Host, forceUpdate } from "@stencil/core";
-import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
+import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool, showTooltip, hideTooltip } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class NestedSelect {
     constructor() {
-        this.openUp = false;
-        this.overflowCount = 0;
-        this.displayedOptions = [];
-        this.clearSelectionMessage = this.multiple
-            ? selectMessages.multiClearSelection
-            : selectMessages.singleClearSelection;
         this.disabled = false;
         this.maxHeight = "200px";
-        this.label = undefined;
         this.labelPosition = "top";
         this.requiredField = false;
-        this.errorMessage = undefined;
         this.multiple = false;
         this.search = false;
         this.selectAll = false;
@@ -24,7 +16,13 @@ export class NestedSelect {
         this.isExpanded = false;
         this.showClearSelectionButton = false;
         this.announcement = "";
-        this.constrainedMaxHeight = this.maxHeight;
+        this.openUp = false;
+        this.constrainedMaxHeight = this.maxHeight; // internal, limits the upwards maxheight of the dropdown if it decides to open upwards but there is not enough room
+        this.overflowCount = 0;
+        this.displayedOptions = [];
+        this.clearSelectionMessage = this.multiple
+            ? selectMessages.multiClearSelection
+            : selectMessages.singleClearSelection;
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -217,6 +215,12 @@ export class NestedSelect {
             this.wmNestedSelectBlurred.emit();
         }
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     handleOptgroupExpanded() {
         this.menuEl.classList.add("hidden");
         this.optListWrapperEl.classList.remove("hidden");
@@ -286,16 +290,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: 'ce60d79e0fb0863d45b2b28048e98271a099edd5', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'e0a67750ecb44f69cf3af589b0ca440c3107e824', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'cc9d739f3764b34f0939ed647e0a2dacff17df93', class: "label-wrapper" }, h("label", { key: '04fc5577d90c0787f84c9ad57bfaf66103765f60', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '5f959093568bc000490f93b887bc0c6cea467c39', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'a83e7570a7cfeb417728d4e94cadcd7b44c4a52c', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '880400f61bc3c1ab3bcbc3bb2d414f05af37c20b', class: "label-wrapper" }, h("label", { key: '776e280c3535923d6c39d4d345c50d2b552b25e6', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: 'ef502276893cf2a32bae092dec64d1136ac45e6f', class: "button-wrapper" }, h("button", Object.assign({ key: '688ef0f973c9e5c124ce0f582a8c7a302d59c371' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '9dc2d3d3ffc0a2709e40ca00e1196f49e26ab336', class: "overflowcontrol" }, h("span", { key: '76fab0f2cb0ae0c3ae8a810ebe06a9a55118c41f', class: "button-text" }, this.renderButtonText())), h("div", { key: 'b00bc698a8e1f22ebeb83f1f19a677806d5ef321', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '3f40f30b75e68f7f79101867a84f53cd48575272', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '7efc505a77195eb037bc3ac3e86ac4ebe5024052', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'd47f4f2434ae3a5228e12878f98a78250405d891', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : ("")), h("div", { key: 'e9d9fba2781c3c0abf101d4027c3f48e585dcdb4', class: "button-wrapper" }, h("button", Object.assign({ key: 'c40510c5476a961a5ec60e8f6cf1eb8fb68e236d' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '466733e138ca9162ca35cc145ac2b15600d9a381', class: "overflowcontrol" }, h("span", { key: 'b4e2134d076ab22c5baaa87f8fbe5bb022ee822f', class: "button-text" }, this.renderButtonText())), h("div", { key: '05b13a8f7aef21c663f408d48488843fa8da8be9', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '16d82a9457d895a592890d874f8dc7245478fb73', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4b0375b2acef34d7607c3fa23d741843d3005017', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '52ecc936ebdb87eae9bb2de5551c075bc75bb2fc', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "option-text" }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")), h("div", { class: "svg-icon svg-next" })));
-        })), h("div", { key: '96ac597ab2d5c6e9b48b5a7c1c46f04fb5caa053', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: 'fe57143f81a19a1e0e76d21a09f51398d6c668d4' }))), h("div", { key: '1e6f66b0a4e6bd0cd1d780fb3248ff8feaa413a9', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '949ff809135fffead8b8701aa02d2b104add38b2', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: '3861f21a5798af5cabbcdc37dd06b41db59a450f', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '1e9c15552d06669d790b8490d84da4855a0c841d' }))), h("div", { key: 'ca12e1f32d3d8e57bc562538d3959d7fc8f78575', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'd9d2aa31d14f78158a69aadb981df4063dcc9c82', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }
@@ -314,6 +318,7 @@ export class NestedSelect {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -326,12 +331,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "maxHeight": {
                 "type": "string",
+                "attribute": "max-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -344,12 +351,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"200px\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -362,11 +371,13 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"left\" | \"none\"",
@@ -379,12 +390,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -397,12 +410,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -415,11 +430,13 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -432,12 +449,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "search": {
                 "type": "boolean",
+                "attribute": "search",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -450,12 +469,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "search",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selectAll": {
                 "type": "boolean",
+                "attribute": "select-all",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -468,12 +489,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "select-all",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -486,12 +509,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder"
             },
             "searchPlaceholder": {
                 "type": "string",
+                "attribute": "search-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -504,12 +529,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "search-placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "selectMessages.searchPlaceholder"
             },
             "allSelectedMessage": {
                 "type": "string",
+                "attribute": "all-selected-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -522,12 +549,14 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "all-selected-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "selectMessages.allSelected"
             },
             "constrainedMaxHeight": {
                 "type": "string",
+                "attribute": "constrained-max-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -540,7 +569,8 @@ export class NestedSelect {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "constrained-max-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "this.maxHeight"
             }

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

@@ -2,7 +2,6 @@ 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;
@@ -67,6 +66,7 @@ export class Optgroup {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -79,11 +79,13 @@ export class Optgroup {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "isExpanded": {
                 "type": "boolean",
+                "attribute": "is-expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -96,12 +98,14 @@ export class Optgroup {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "is-expanded",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -114,12 +118,14 @@ export class Optgroup {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -132,7 +138,8 @@ export class Optgroup {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -1,7 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class Option {
     constructor() {
-        this.value = undefined;
         this.subinfo = undefined;
         this.disabled = false;
         this.selected = false;
@@ -161,6 +160,7 @@ export class Option {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -173,11 +173,13 @@ export class Option {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "subinfo": {
                 "type": "string",
+                "attribute": "subinfo",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -190,12 +192,14 @@ export class Option {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "subinfo",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -208,12 +212,14 @@ export class Option {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -226,12 +232,14 @@ export class Option {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "focused": {
                 "type": "boolean",
+                "attribute": "focused",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -244,7 +252,8 @@ export class Option {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "focused",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -891,21 +891,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+.wrapper .label-wrapper {
+  display: flex;
+}
 .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;
 }
-.wrapper .label .required {
+.wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 .wrapper.label-left {
   flex-direction: row;
 }
 .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -913,7 +920,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 .wrapper.label-none label {
   position: absolute !important;
@@ -927,11 +933,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-.wrapper.invalid .label {
+.wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-.wrapper.invalid .label:after {
+.wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -940,14 +946,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-.wrapper.invalid .label:after {
+.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");
 }
-.wrapper.invalid .label:after {
+.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);
 }