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

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

@@ -1,20 +1,13 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute } from "../../../global/functions";
+import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class Select {
     constructor() {
-        this.openUp = false;
-        //////////////////////////////////////
-        // for multiselect button text
-        this.overflowCount = 0;
-        this.displayedOptions = [];
         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;
@@ -23,6 +16,11 @@ export class Select {
         this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
         this.announcement = "";
+        this.openUp = false;
+        //////////////////////////////////////
+        // for multiselect button text
+        this.overflowCount = 0;
+        this.displayedOptions = [];
     }
     get childOptions() {
         return Array.from(this.el.querySelectorAll("wm-option"));
@@ -172,6 +170,12 @@ export class Select {
             this.wmSelectBlurred.emit();
         }
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     setButtonText() {
         this.displayedOptions = this.childOptions.filter((x) => x.selected);
         // handle overflow + counter for multiselect
@@ -228,9 +232,9 @@ export class Select {
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
             onClick: () => (this.isExpanded ? this.close() : this.open()),
         };
-        return (h(Host, { key: 'e37a1ce52a903991570fbf06cad2b17ccae703de', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '973d0197afb6fef37768c0ea86002b9be4a4e50e', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '7632bd4f20bc49fbfc3b4e7a9c8ed63d7a7a6f44', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '20caf14eab2111ba2b8f86519e2ba99be2eee496', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '27f57d30b836eac8dc27ae98a425015d86a0948b', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '8f48d8e8d616244350e61d6e81f350640131bbf0', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '39d3bcec9b67d671a6bdbb6a3ee738832189ea51', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: 'b0bb90a215ac20de94afa8dba56e839bdc590dc1', 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: 'a527d782f81eeeb771164cc0b7449b696f34196d', class: "button-wrapper" }, h("button", Object.assign({ key: '39ed454cbff5e73d98d36eefd6fb79320f0dc517' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '658551325b10ae492b13018e57a7871497972f8f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '425e8afaf12ee7921219e5b2076156459570fc72', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c6bfe3c261ece6a4dfd6489fae77dd91b7730629', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'f9d3c5405c82d7724b074a197ca9c6f17acc1042', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '8452deceae0ecbcbf96a64c2d406aea66023b6ef', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e5beb9e541348fe6127a058e60c4a292cbabb264', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '2ff10a32e89a597176a96ac852dd6e1fe118fc74', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '947c0114cae3a41d14f5d0ecfaf72a6e4c61f411' }))), h("div", { key: '50b156927292a726eac80a6035db6185483cdf35', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'de0b2e27d65056a691182397405c6eec7cb38fcf', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField && (h("span", { key: '4a5648503a023ff1eba34db936d49709e14da9f1', class: "required" }, h("span", { key: '3fe783c7174d3d827b20589cad412d32fa4cd978', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '85ac4ca35f1077ade1bdda403b8888cc206ff28e', "aria-hidden": "true" }, "*")))), h("div", { key: 'c2e70d87db2d533713ac9c5a877ddba98a9a9a2f', class: "button-wrapper" }, h("button", Object.assign({ key: '460c6ac5cde8637b0098201966ca4268301ac2b7' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '3af3357f45ceacc5689e90e2bdc6459cab591c2f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'bd9869db1146e54cc47c2965ebe2776873e2a18e', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'b22d952625e93fab98ebb1b688101fd8891a4af7', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '1f6448ee167d1847eff8fb5bc7a30e0a964e6efe', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '0d550b97a3e08e9b708f2f4c3d91f9cac76ba5d8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '59cc7fcfa25d9d3eab8e4d70cdcd365e36e160ad', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '9fb7d0396527bc18bb8f5d00d64c858470d0698d', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '4c307bca5104ec962ca050b46adf882fb78bb74a' }))), h("div", { key: '06f11b61b475cc6cd78c2a8278b8455a79405e17', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '86cf865fbb7fd0e2c88290fe92e6062ada7d9ab6', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }
@@ -249,6 +253,7 @@ export class Select {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -261,12 +266,14 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "maxHeight": {
                 "type": "string",
+                "attribute": "max-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -279,12 +286,14 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"200px\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -297,11 +306,13 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"left\" | \"none\"",
@@ -314,12 +325,14 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -332,12 +345,14 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -350,11 +365,13 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -367,12 +384,14 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "search": {
                 "type": "boolean",
+                "attribute": "search",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -385,12 +404,14 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "search",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selectAll": {
                 "type": "boolean",
+                "attribute": "select-all",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -403,12 +424,14 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "select-all",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -421,12 +444,14 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "selectMessages.multiPlaceholder"
             },
             "searchPlaceholder": {
                 "type": "string",
+                "attribute": "search-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -439,12 +464,14 @@ export class Select {
                     "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",
@@ -457,7 +484,8 @@ export class Select {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "all-selected-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "selectMessages.allSelected"
             }

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -3,19 +3,14 @@ import { debounce, getTextDir, shouldOpenUp, shouldShiftRight } from "../../glob
 export class ActionMenu {
     constructor() {
         this.openUp = false;
+        this.isExpanded = false;
+        this.actionMenuType = "icon";
+        this.disabled = false;
         this.keysSoFar = "";
         this.searchIndex = 0;
         this.debouncedClearKeysSoFar = debounce(() => {
             this.keysSoFar = "";
         }, 500);
-        this.isExpanded = false;
-        this.tooltipPosition = undefined;
-        this.actionMenuType = "icon";
-        this.buttonText = undefined;
-        this.disabled = false;
-        this.tooltip = undefined;
-        this.labelForIdenticalButtons = undefined;
-        this.darkMode = undefined;
     }
     get horizontalPosition() {
         return !!this.el && !!this.itemsEl && shouldShiftRight(this.el, this.itemsEl.clientWidth) ? "right" : "left";
@@ -190,7 +185,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { key: 'c6dfb14c3fe2e1a65238554ca585e94c7a5e8ed8', onBlur: () => this.close(false) }, h("div", { key: 'ae43b9b2e4da167c035ab018620f55f06cfdf17d', class: getTextDir() }, h("wm-button", { key: '22fbc47fb5e2430e2607bce4e820066906959ab7', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: '90dd3b0691b50a06eb8cc4c27d2f7febdc6a00a4', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: '5c6eeb1aa8b90c2b679d593d81f90cde7d10ff79' })))));
+        return (h(Host, { key: '6a2551f3260b0ab3a606174243d89bfc7daa68e5', onBlur: () => this.close(false) }, h("div", { key: '1dc817e8a83608d514b45aa00c4c00031ba3019d', class: getTextDir() }, h("wm-button", { key: '4d9bb231cef8871774fbe03c71a0c3e203c0dd99', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: 'c9c33887915c59b82c2b87fd65e39059a6f84bd5', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: '0c5a25373176ffa495a75a0e91ab6e71e45d3bbf' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -209,6 +204,7 @@ export class ActionMenu {
         return {
             "tooltipPosition": {
                 "type": "string",
+                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "| \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"top-right\"\n    | \"top-left\"",
@@ -221,11 +217,13 @@ export class ActionMenu {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tooltip-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "actionMenuType": {
                 "type": "string",
+                "attribute": "action-menu-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"icon\" | \"text\" | \"selector\" | \"selector-primary\"",
@@ -238,12 +236,14 @@ export class ActionMenu {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "action-menu-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"icon\""
             },
             "buttonText": {
                 "type": "string",
+                "attribute": "button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -256,11 +256,13 @@ export class ActionMenu {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "button-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -273,12 +275,14 @@ export class ActionMenu {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -291,11 +295,13 @@ export class ActionMenu {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tooltip",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "labelForIdenticalButtons": {
                 "type": "string",
+                "attribute": "label-for-identical-buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -308,11 +314,13 @@ export class ActionMenu {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-for-identical-buttons",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "darkMode": {
                 "type": "boolean",
+                "attribute": "dark-mode",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -325,7 +333,8 @@ export class ActionMenu {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "dark-mode",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -3,22 +3,17 @@ import { getIconCodeFromName } from "../../global/interfaces";
 import { generateId, hideTooltip, handleDisabledAttribute, showTooltip, toBool, triggerFormSubmit, } from "../../global/functions";
 export class Button {
     constructor() {
-        this.id = generateId();
-        this.ariaPopup = false;
+        // icon and tooltip have reflect set to true. Without reflect, the react wrappers don't expose the attribute
+        // and the component throws errors when they are required (when buttonType is icononly or navigational)
         this.disabled = false;
         this.buttonType = "secondary";
-        this.icon = undefined;
-        this.iconSize = undefined;
-        this.iconRotate = undefined;
-        this.iconFlip = undefined;
-        this.tooltip = undefined;
-        this.labelForIdenticalButtons = undefined;
         this.tooltipPosition = "bottom-right";
         this.permanentlyDelete = false;
         this.textWrap = true;
-        this.customBackground = undefined;
         this.isSubmit = false;
         this.isTabbing = false;
+        this.id = generateId();
+        this.ariaPopup = false;
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -249,7 +244,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'ed44edc43c12cbbc088b6a2872e1e26d816c1cba', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '0b94c327dd29d98e981a72fe38b122cc06313aa1', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, (this.icon || this.buttonType.endsWith("-ai")) && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: 'c31ae6ac51a1aee66734f3501e49cf9cde1bfc7a', class: "button-text" }, h("slot", { key: 'd75aa45be52f340e755bd96ea029bd51fdd69150' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: '8d510ff0af0bdbd882214d09b41a26d344591b55', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: 'd122993141c67e59f1b99fcc574772c7c35be7a7', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '6c6cb49fa724cb4e317a3a7c7fdc32e9d1ca43f6', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, (this.icon || this.buttonType.endsWith("-ai")) && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: '164207b617f46f932f462f15fb22529885a64e86', class: "button-text" }, h("slot", { key: '9e2831478378a258a8fd83405d0a1509e0e56697' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'f0a5ebc4c97bd184a7e14171aaa0f103fd8c0c35', class: "selector-icon svg-icon svg-expand-more" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }
@@ -268,6 +263,7 @@ export class Button {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -280,12 +276,14 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "buttonType": {
                 "type": "string",
+                "attribute": "button-type",
                 "mutable": true,
                 "complexType": {
                     "original": "validButtonTypes",
@@ -304,12 +302,14 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "button-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"secondary\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -322,11 +322,13 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -339,11 +341,13 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon-size",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "iconRotate": {
                 "type": "number",
+                "attribute": "icon-rotate",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -356,11 +360,13 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon-rotate",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "iconFlip": {
                 "type": "string",
+                "attribute": "icon-flip",
                 "mutable": false,
                 "complexType": {
                     "original": "\"horizontal\" | \"vertical\"",
@@ -373,11 +379,13 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon-flip",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -390,11 +398,13 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tooltip",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "labelForIdenticalButtons": {
                 "type": "string",
+                "attribute": "label-for-identical-buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -407,11 +417,13 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-for-identical-buttons",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "tooltipPosition": {
                 "type": "string",
+                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPlacement",
@@ -430,12 +442,14 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tooltip-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"bottom-right\""
             },
             "permanentlyDelete": {
                 "type": "boolean",
+                "attribute": "permanently-delete",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -448,12 +462,14 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "permanently-delete",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "textWrap": {
                 "type": "boolean",
+                "attribute": "text-wrap",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -466,12 +482,14 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "text-wrap",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "customBackground": {
                 "type": "string",
+                "attribute": "custom-background",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -484,11 +502,13 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "custom-background",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "isSubmit": {
                 "type": "boolean",
+                "attribute": "is-submit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -501,7 +521,8 @@ export class Button {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "is-submit",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }