@watermarkinsights/ripple 5.16.0-alpha.1 → 5.16.0-alpha.11

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

@@ -1,28 +1,19 @@
 import { h } from "@stencil/core";
-import { triggerFormSubmit, toBool, handleDisabledAttribute } from "../../global/functions";
+import { triggerFormSubmit, toBool, handleDisabledAttribute, hideTooltip, showTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Input {
     constructor() {
-        this.previousValue = "";
-        this.label = undefined;
         this.labelPosition = "top";
         this.value = "";
         this.disabled = false;
-        this.info = undefined;
         this.inputWidth = "";
         this.placeholder = "";
         this.requiredField = false;
-        this.errorMessage = undefined;
-        this.characterLimit = undefined;
-        this.symbolBefore = undefined;
-        this.symbolAfter = undefined;
-        this.textAfter = undefined;
         this.type = "text";
         this.step = 1;
-        this.min = undefined;
-        this.max = undefined;
         this.isSubmit = false;
         this.announcement = "";
+        this.previousValue = "";
     }
     getInputWidth() {
         return this.inputWidth ? { width: this.inputWidth } : { flex: "1" };
@@ -58,6 +49,12 @@ export class Input {
             this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
         }
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", labelEl, this.label);
+        }
+    }
     handleKeyDown(ev) {
         // in most browsers, onInput doesn't fire if the input's maxLength is reached
         // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
@@ -101,7 +98,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { key: 'd71203fd94d6401d49f9c06976da6f380525ea4f', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'ec03133431899acf8fb285d695daf5f9887398e8', class: "label-wrapper" }, h("label", { key: '561a5b17203fc6cf2a1bfb3a5dd9d75ba4cf1e66', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '74f070797a03ce7ea64efcace7f8b6e0eae189ab', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '0a2daea4a0454cfec2678c50bb685f93a162cd20', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'feaa267cd1a3b47fbd6cf666eeee9b73183494ea', class: "inner-wrapper" }, h("div", { key: 'c4f4ac493a9c26644c665bc5dd910c9d2609a9b4', class: "text-after-wrapper" }, h("div", { key: '444b80038a8593d24c84c12e13831c603852306b', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '0a112d83390a206888a73d49185e1e0006d6745c', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '93748d9f8ac38974b6b354dcc7e6b5bcd9993bab', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '2495e1224e1555fbaad0b9eeac0ef6d49c329237', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '382f7ee32c78e0457e25d003a8f3b6762fb99753', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '0fec1367ee0864a15510c3198818c5d06ec01975', id: "info", class: "info" }, this.info)), h("div", { key: '6f91548dd75581fd91e2b6a789c442607c2bf749', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'e2bb78875e9b03f4b45476eedc900cc4498ef1d3', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'abe39d76f1df8098aad09d37dae556ffafed9de3', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'f6ebdff5ee4efb2f6ce435848379e8f63bcb3f71', class: "label-wrapper" }, h("label", { key: '2c4f2b47f0b0a9c74b5aad022d7cd902324aeeb9', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '502b0bcc0f333fbfbc3c3d33d57491a1a8fe12c4', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("div", { key: 'aa9cee1f7f3c5dfc63dd9deeb934c81b879c3e03', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '53f479d7516f774efa07b782de29fa77d7d5624c', class: "inner-wrapper" }, h("div", { key: 'b03a37a1f631b49e12846156e7959783379c75ae', class: "text-after-wrapper" }, h("div", { key: '73fae0162460f8fa28ffeffb91b75bb7fa84bc4c', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '86272f79015b42f77b7ba506f179922b1855ef44', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '4d3e1e63ec9236862e7c4969713adcf7ee260ce8', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '6b11f19bdde5657a9f15ce82c541be250bc1e243', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: 'c52bb5fa02b5383df5b8eecce28eada592069ad4', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '107479fef114a8294c2243e4f52844fa1098745e', id: "info", class: "info" }, this.info)), h("div", { key: '56d84ddae6595bce7882d98586edfdb977c1a4e0', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'ddfccd79d99b3144acb6733dc89898b07a5a3ca1', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +117,7 @@ export class Input {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -132,11 +130,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"left\" | \"none\"",
@@ -149,12 +149,14 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -167,12 +169,14 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -185,12 +189,14 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "info": {
                 "type": "string",
+                "attribute": "info",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -203,11 +209,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "info",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "inputWidth": {
                 "type": "string",
+                "attribute": "input-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -220,12 +228,14 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "input-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -238,12 +248,14 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -256,12 +268,14 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -274,11 +288,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "characterLimit": {
                 "type": "number",
+                "attribute": "character-limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -291,11 +307,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "character-limit",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "symbolBefore": {
                 "type": "string",
+                "attribute": "symbol-before",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -308,11 +326,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "symbol-before",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "symbolAfter": {
                 "type": "string",
+                "attribute": "symbol-after",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -325,11 +345,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "symbol-after",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "textAfter": {
                 "type": "string",
+                "attribute": "text-after",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -342,11 +364,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "text-after",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"number\" | \"text\"",
@@ -359,12 +383,14 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"text\""
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -377,12 +403,14 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "step",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -395,11 +423,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -412,11 +442,13 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "isSubmit": {
                 "type": "boolean",
+                "attribute": "is-submit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -429,7 +461,8 @@ export class Input {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "is-submit",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -2,10 +2,10 @@ import { h, Host } from "@stencil/core";
 import { getIconCodeFromName } from "../../global/interfaces";
 export class Menuitem {
     constructor() {
-        this.descriptionCharLimit = 100;
         this.disabled = false;
         this.icon = undefined;
         this.description = undefined;
+        this.descriptionCharLimit = 100;
     }
     handleKeydown(ev) {
         const modifierKeyUsed = ev.altKey || ev.ctrlKey || ev.metaKey;
@@ -98,7 +98,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '16c2fc6ddfd8439be81e11534f9a7303c121c6f8', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '138d8175228c5de3132e2b8c491baf5ea4ffeaaf', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, this.icon && this.renderIcon(), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: 'e6315d1845768369730087b4e9e0cb52224af68a', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'a1e8dc4267cf04c0ec5678744e2928acb39102c0', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, this.icon && this.renderIcon(), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }
@@ -116,6 +116,7 @@ export class Menuitem {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -128,12 +129,14 @@ export class Menuitem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -146,12 +149,14 @@ export class Menuitem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -164,7 +169,8 @@ export class Menuitem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "description",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "undefined"
             }

package/dist/collection/components/wm-modal/wm-modal-footer.js

@@ -31,7 +31,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { key: '2aa2375ddaf321da10aabcf7012fa2defa56850e', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '345a8ffefc4289177f042777b47310fc2c912211', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '613e9b2ba1bdcd2d76ab79614fd4b184b186f270', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '0bbc068278eb0c926512d7789838bf06ded15f3b', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '2e495877bb9902f5cd3b977fcb99411764ffd16c', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
+        return (h("div", { key: '019e3ea4b92089f44320cc3f9d256f7cea96cfbc', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'e5c34592f8a374bc016fc6cb6125a864f99d17bd', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '6349bd48d3aab79be1f33438f904d758a48066fd', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '4154880503f788a9ea023fe4f0ce05b5f67b0f41', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a48b61feaf42d6da0b237a68af68d5ac8ae49642', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     static get is() { return "wm-modal-footer"; }
     static get originalStyleUrls() {
@@ -48,6 +48,7 @@ export class ModalFooter {
         return {
             "secondaryText": {
                 "type": "string",
+                "attribute": "secondary-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -60,12 +61,14 @@ export class ModalFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "primaryText": {
                 "type": "string",
+                "attribute": "primary-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -78,12 +81,14 @@ export class ModalFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "infoText": {
                 "type": "string",
+                "attribute": "info-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -96,12 +101,14 @@ export class ModalFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "info-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "primaryActionDisabled": {
                 "type": "boolean",
+                "attribute": "primary-action-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -114,12 +121,14 @@ export class ModalFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-action-disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "deleteStyle": {
                 "type": "boolean",
+                "attribute": "delete-style",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -132,7 +141,8 @@ export class ModalFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "delete-style",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/wm-modal/wm-modal-header.js

@@ -22,7 +22,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, { key: '95b62f6d1ee25e0de5c0977fad860b86eb874a0d' }, h("div", { key: 'c6e396538d6d511c1338e465829438a7de6ca20f', class: "wm-wrapper" }, h("div", { key: 'bf862bb24264b4379895a8168d07a3220582dc2c' }, h("h2", { key: '386f918c359859b2ae8db14db83097dd985f29c6', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '404136724b15cae9ade28f7852934181f22fa010', class: "subtitle" }, this.subheading))), h("wm-button", { key: '0748b3b6ba6e0aaf371435615c818e511f059ec5', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: 'ebb2d8038aa0ac395c53d4f0d91499919aa932f6' }, h("div", { key: '1f5486f23c9a9a32e5e33e47b6edc31c37c37821', class: "wm-wrapper" }, h("div", { key: 'a1192d79c1d5d7fed157386cc6acb92522e14cf7' }, h("h2", { key: 'bf4b908dad455408550d5a2695d3c4fcfcd75c3b', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '32347ba7f539174fee47edfce977f7c8426a3298', class: "subtitle" }, this.subheading))), h("wm-button", { key: '04324e5098e8580bcc3e44a107a348ff6fe5c9df', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {
@@ -39,6 +39,7 @@ export class ModalHeader {
         return {
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -51,12 +52,14 @@ export class ModalHeader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "heading",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "subheading": {
                 "type": "string",
+                "attribute": "subheading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -69,7 +72,8 @@ export class ModalHeader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "subheading",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/dist/collection/components/wm-modal/wm-modal.css

@@ -883,7 +883,7 @@ wm-modal dialog.wm-modal[open] {
   flex-direction: column;
 }
 wm-modal dialog.wm-modal > :not(wm-modal-header, wm-modal-footer) {
-  flex: 1;
+  flex: 1 1 auto;
 }
 wm-modal dialog.wm-modal > wm-modal-header {
   border-bottom: 1px solid var(--wmcolor-modal-border);

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

@@ -3,10 +3,8 @@ import { generateId } from "../../global/functions";
 export class Modal {
     constructor() {
         this.open = false;
-        this.elementToFocus = "";
+        this.elementToFocus = ""; // primary and secondary point to the corresponding buttons, otherwise focus based on element id
         this.modalType = "modal";
-        this.uid = undefined;
-        this.returnFocusEl = undefined;
     }
     get closeButtonEl() {
         return this.el.querySelector(`#wm-modal-close-${this.uid}`);
@@ -108,11 +106,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '6e922556c88e5eb0bebc59264dddaaa08c899df6', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '27b1e5ab577d061836a3e3e2d6b7fb01fedc96db', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '37c9534a1839dc5c6e2be8ca838fa9da956d34ba', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'ce59adc5fa795c32da6fd374468c451147ccca38', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { key: '113b03cdb98de4c9f29b515fa7c6b91fb443ada8', class: "wm-tooltip" }), h("slot", { key: 'a82dbd2e8b1018a2f06db0f30995e6f0ec45d359' }), h("div", { key: '272478190ff26a0e7777ea64ab20f26f1fb260e1', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: 'c62753c1bba03d72707398899b68fe318d285bc8', class: "wm-tooltip" }), h("slot", { key: '24f8462de2987ddadc5a4573bb9ff0a4ad42d95a' }), h("div", { key: '390395f0b4bc778d6811276f2a7facfe3fd8f9da', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }
@@ -131,6 +129,7 @@ export class Modal {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -143,12 +142,14 @@ export class Modal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "elementToFocus": {
                 "type": "string",
+                "attribute": "element-to-focus",
                 "mutable": true,
                 "complexType": {
                     "original": "\"primary\" | \"secondary\" | string",
@@ -161,12 +162,14 @@ export class Modal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "element-to-focus",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "modalType": {
                 "type": "string",
+                "attribute": "modal-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"modal\" | \"dialog\"",
@@ -179,12 +182,14 @@ export class Modal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "modal-type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "\"modal\""
             },
             "uid": {
                 "type": "string",
+                "attribute": "uid",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -197,7 +202,8 @@ export class Modal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "uid",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };