@watermarkinsights/ripple 5.7.0-7 → 5.7.0-8

package/dist/esm/wm-modal-pss_3.entry.js

@@ -0,0 +1,210 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-130e07bb.js';
+
+const wmModalPssCss = "wm-modal-pss{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal-pss *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal-pss>*{width:80vw;max-width:750px;background:var(--wmcolor-modal-background)}wm-modal-pss>*:focus{outline:none}wm-modal-pss wm-modal-pss-header,wm-modal-pss wm-modal-pss-footer{padding:20px 30px}wm-modal-pss wm-modal-pss-header{z-index:2003}wm-modal-pss wm-modal-pss-footer{z-index:2003}wm-modal-pss>:not(wm-modal-pss-header):not(wm-modal-pss-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal-pss.wm-modal wm-modal-pss-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal-pss.wm-modal wm-modal-pss-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal-pss.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal-pss.wm-modal>*{max-width:none;width:100vw}wm-modal-pss.wm-modal>*:not(wm-modal-pss-header):not(wm-modal-pss-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal-pss.wm-dialog>:not(wm-modal-pss-header):not(wm-modal-pss-footer){padding:0 30px 20px 30px;font-size:0.875rem;border:none}wm-modal-pss .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:var(--wmcolor-modal-overlay);-webkit-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal-pss.hide{visibility:hidden}wm-modal-pss .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";
+const WmModalPssStyle0 = wmModalPssCss;
+
+const Modal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.focusLastElement = createEvent(this, "focusLastElement", 3);
+        this.focusFirstElement = createEvent(this, "focusFirstElement", 3);
+        this.wmModalCloseTriggered = createEvent(this, "wmModalCloseTriggered", 3);
+        this.wmModalPrimaryTriggered = createEvent(this, "wmModalPrimaryTriggered", 7);
+        this.wmModalSecondaryTriggered = createEvent(this, "wmModalSecondaryTriggered", 7);
+        this.bodyFocusListener = () => this.redirectFocusFromBody();
+        this.open = false;
+        this.elementToFocus = "";
+        this.modalType = "modal";
+        this.uid = undefined;
+    }
+    get focusOnOpenEl() {
+        let customElementToFocus = null;
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            customElementToFocus = this.el.querySelector(`#wm-${this.elementToFocus}-${this.uid}`);
+        }
+        else if (this.elementToFocus) {
+            customElementToFocus = this.el.querySelector("#" + this.elementToFocus);
+            !customElementToFocus &&
+                console.warn("Ripple Component Library: The modal component couldn't find an element matching the id you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
+        }
+        const closeButtonEl = this.el.querySelector(`#wm-modal-close-${this.uid}`);
+        return customElementToFocus ? customElementToFocus : closeButtonEl;
+    }
+    //App can open modal by toggling the prop
+    toggleModal() {
+        this.open ? this.showModal() : this.hideModal();
+    }
+    handleClick(ev) {
+        this.open && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
+    }
+    closeModalOnEscape(ev) {
+        if (ev.key === "Escape") {
+            // stops propagation prevents nested modal from closing all at once
+            ev.stopPropagation();
+            this.wmModalCloseTriggered.emit();
+            this.open = false;
+        }
+    }
+    showModal() {
+        this.setAriaDescribedbyOnModal();
+        this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
+        document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+        //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
+        document.body.tabIndex = 0;
+        document.body.removeEventListener("focus", this.bodyFocusListener, true);
+        document.body.addEventListener("focus", this.bodyFocusListener, true);
+        window.requestAnimationFrame(() => {
+            // nested requestAnimationFrames allow all elements to become visible on page before assigning focus
+            window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal
+        });
+    }
+    //Close the modal and focus the triggering element when the modal buttons emit their events
+    hideModal() {
+        document.body.style.overflow = "visible";
+        document.body.tabIndex = -1;
+        document.body.removeEventListener("focus", this.bodyFocusListener, true);
+        window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus
+    }
+    componentWillLoad() {
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            if (!this.el.id) {
+                console.error("For accessibility purposes, you need to set the modal content wrapper's id to 'content-[id of wm-modal-pss]'.");
+            }
+        }
+        this.el.focus = () => {
+            this.focusOnOpenEl.focus();
+        };
+        const generatedId = "wmcl-" + Math.random().toString(36).substr(2, 10);
+        this.uid = this.el.id ? this.el.id : generatedId;
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.showModal();
+        }
+    }
+    async emitCloseEvent() {
+        this.wmModalCloseTriggered.emit();
+    }
+    async emitPrimaryEvent() {
+        this.wmModalPrimaryTriggered.emit();
+    }
+    async emitSecondaryEvent() {
+        this.wmModalSecondaryTriggered.emit();
+    }
+    setAriaDescribedbyOnModal() {
+        const modalBody = document.getElementById(`content-${this.uid}`);
+        if (!modalBody) {
+            console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
+        }
+        else {
+            this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+        }
+    }
+    setElToFocusOnClose() {
+        const elToFocus = document.activeElement;
+        if (elToFocus.tagName === "WM-MENUITEM") {
+            this.focusOnCloseEl = elToFocus.parentElement;
+        }
+        else {
+            let el;
+            while (elToFocus && elToFocus.shadowRoot) {
+                el = elToFocus.shadowRoot.activeElement;
+            }
+            if (el) {
+                this.focusOnCloseEl = el;
+            }
+        }
+    }
+    redirectFocusFromBody() {
+        if (document.activeElement.tagName === "BODY") {
+            this.focusOnOpenEl.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '85e48c3a6876e546014d2100b5cf575ae0aa4eb8', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
+                this.focusLastElement.emit();
+            } }, h("div", { key: 'cf58003fbfc9ea4a013c3689aa93f45dca5a0358', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '59504e363659c2393c6b7f4a10f512485291b253', class: "sr-only", tabIndex: 0, onFocus: () => {
+                this.focusFirstElement.emit();
+            } })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["toggleModal"]
+    }; }
+};
+Modal.style = WmModalPssStyle0;
+
+const wmModalPssFooterCss = "wm-modal-pss-footer{border-radius:0px 0px 5px 5px;margin-top:-1px}wm-modal-pss-footer .wm-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 650px){wm-modal-pss-footer .wm-wrapper.footer-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}wm-modal-pss-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-pss-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-pss-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-pss-footer .wm-wrapper .wm-info:focus{outline:none}";
+const WmModalPssFooterStyle0 = wmModalPssFooterCss;
+
+const ModalFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.secondaryText = "";
+        this.primaryText = "";
+        this.infoText = "";
+        this.primaryActionDisabled = false;
+        this.deleteStyle = false;
+    }
+    componentWillLoad() {
+        this.uid = this.el.parentElement.uid;
+        // Trap focus when user shift+tabs past first element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        this.el.parentElement.addEventListener("focusLastElement", () => {
+            this.lastElement.focus();
+        });
+    }
+    emitParentPrimaryEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitPrimaryEvent();
+    }
+    emitParentSecondaryEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitSecondaryEvent();
+    }
+    render() {
+        return (h("div", { key: '51a2d057d08fee9eb7cb20610b44b5bd9d3300a1', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '18b9805744abd577708add4f5c1d6bc0149927fb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'a449547065cb247a50f859ca5a4a82f070c06399', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'd1733ed5fe143f2e65433a667a40694fd5dbad43', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '2177e7af952bd16fa6cb4cf23dbf2acf18445ebc', "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) : null) }, this.primaryText))));
+    }
+    get el() { return getElement(this); }
+};
+ModalFooter.style = WmModalPssFooterStyle0;
+
+const wmModalPssHeaderCss = "wm-modal-pss-header{border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-pss-header .wm-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}wm-modal-pss-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:var(--wmcolor-modal-heading);line-height:normal}wm-modal-pss-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-pss-header .wm-wrapper .title:focus{outline:none}";
+const WmModalPssHeaderStyle0 = wmModalPssHeaderCss;
+
+const ModalHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.heading = "";
+        this.subheading = "";
+    }
+    componentWillLoad() {
+        this.uid = this.el.parentElement.uid;
+        // Trap focus when user tabs past last element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        this.el.parentElement.addEventListener("focusFirstElement", () => {
+            this.closeButtonEl.focus();
+        });
+    }
+    emitParentCloseEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitCloseEvent();
+    }
+    // @Listen("click")
+    // directFocusOnClick() {
+    //   this.headingElement.tabIndex = 0;
+    //   this.headingElement.focus();
+    // }
+    render() {
+        return (h(Host, { key: '2b2dda4dcd73e99ead055334998d5ef97ea60df4' }, h("div", { key: '8a1f05da81b4663558e962f7b540fac35e2bbfa3', class: "wm-wrapper" }, h("div", { key: '2948adf911680be5ba5a4beb317ddd57303a9a15' }, h("h2", { key: 'f1068bac6d9692a6368f5662bbcde1aad83c3317', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '9452c69404d41425a2bce3fbe15e457fc773a640', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1961750a256f7ad40f8d06345994479b0e3ed541', "button-type": "navigational", icon: "f156", tooltip: "Close", "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+    }
+    get el() { return getElement(this); }
+};
+ModalHeader.style = WmModalPssHeaderStyle0;
+
+export { Modal as wm_modal_pss, ModalFooter as wm_modal_pss_footer, ModalHeader as wm_modal_pss_header };

package/dist/esm/{wm-modal.entry.js → wm-modal_3.entry.js}

@@ -1,7 +1,9 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-558b5a82.js';
-import { g as generateId } from './functions-b791a892.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-130e07bb.js';
+import { g as generateId } from './functions-03966124.js';
+import { g as globalMessages } from './intl-2fa0087c.js';
 
 const wmModalCss = "wm-modal{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal dialog{color:inherit;padding:0;width:80vw;max-width:750px;max-height:80vh;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-ms-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;border:none;background:var(--wmcolor-modal-background)}wm-modal dialog>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px)}wm-modal dialog::-webkit-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::-ms-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog[open]{-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal dialog.wm-modal>wm-modal-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal dialog.wm-modal>wm-modal-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal dialog.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal dialog.wm-modal>*{max-width:none;width:100vw}wm-modal dialog.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal dialog.wm-dialog>:not(wm-modal-header):not(wm-modal-footer):not(.wm-tooltip){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem;width:100%}wm-modal .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";
+const WmModalStyle0 = wmModalCss;
 
 const Modal = class {
     constructor(hostRef) {
@@ -117,11 +119,11 @@ const Modal = class {
         }
     }
     render() {
-        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '013cab28a1dba3a63ab8c350bfac543520254e63', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '0bedae272d1154b61fbd7ebac59020d6c5b6b3b9', 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", { class: "wm-tooltip" }), h("slot", null), h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '732a9e8edb3302a2d17dd9af6c8bf65ce73fc5d1', class: "wm-tooltip" }), h("slot", { key: '0ee3e5372886db1eb3f814d3f72d422771bbce27' }), h("div", { key: '197477a1dd69b1f5d2cb910fd01e1b3b247bafda', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }
@@ -130,6 +132,78 @@ const Modal = class {
         "open": ["toggleModal"]
     }; }
 };
-Modal.style = wmModalCss;
+Modal.style = WmModalStyle0;
 
-export { Modal as wm_modal };
+const wmModalFooterCss = "wm-modal-footer{display:block;-webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;-ms-border-radius:0px 0px 5px 5px;border-radius:0px 0px 5px 5px}wm-modal-footer .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper.footer-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}wm-modal-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-footer .wm-wrapper .wm-info:focus{outline:none}";
+const WmModalFooterStyle0 = wmModalFooterCss;
+
+const ModalFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.secondaryText = "";
+        this.primaryText = "";
+        this.infoText = "";
+        this.primaryActionDisabled = false;
+        this.deleteStyle = false;
+    }
+    componentWillLoad() {
+        const parentModal = this.el.closest("wm-modal");
+        this.uid = parentModal.uid;
+        // Trap focus when user shift+tabs past first element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        parentModal.addEventListener("focusLastElement", () => {
+            this.lastElement.focus();
+        });
+    }
+    emitParentPrimaryEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        if (parentModal) {
+            parentModal.emitPrimaryEvent();
+        }
+    }
+    emitParentSecondaryEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        if (parentModal) {
+            parentModal.emitSecondaryEvent();
+        }
+    }
+    render() {
+        return (h("div", { key: '38b6b1759d4bdb628259acbf229a1d634df2dbf5', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '4259692e664739723e3895e8ec8d00ef00ef79f0', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '6ffea66fdfd257e754a9012e9471848037e92a52', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '679eef458298304564cd365f15c8253796158ed8', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a6e02b671dbfbacba79aa483b8d6ab8dc9232166', "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))));
+    }
+    get el() { return getElement(this); }
+};
+ModalFooter.style = WmModalFooterStyle0;
+
+const wmModalHeaderCss = "wm-modal-header{display:block;-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:var(--wmcolor-modal-heading);line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";
+const WmModalHeaderStyle0 = wmModalHeaderCss;
+
+const ModalHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.heading = "";
+        this.subheading = "";
+    }
+    componentWillLoad() {
+        const parentModal = this.el.closest("wm-modal");
+        this.uid = parentModal.uid;
+        // Trap focus when user tabs past last element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        parentModal.addEventListener("focusFirstElement", () => {
+            this.closeButtonEl.focus();
+        });
+    }
+    emitParentCloseEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        //@ts-ignore
+        parentModal.emitCloseEvent();
+    }
+    render() {
+        return (h(Host, { key: 'f178a3e4b95a12286b3364efbebe22b3a389f24c' }, h("div", { key: '8a6589a653e28aa5eb926f50695fe129c57548d6', class: "wm-wrapper" }, h("div", { key: '33ca649393f628c8ab5160c5e11e208812dad450' }, h("h2", { key: 'e171bcaa0424e97401db3002bbc3ebaf9c66458d', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'aacf128010d3416ca788d2110240991dcf36fd17', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1a7342cd0ed7aa024b52af067ec9ed33c7a63b04', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+    }
+    get el() { return getElement(this); }
+};
+ModalHeader.style = WmModalHeaderStyle0;
+
+export { Modal as wm_modal, ModalFooter as wm_modal_footer, ModalHeader as wm_modal_header };

package/dist/esm/wm-navigation_3.entry.js

@@ -1,8 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-558b5a82.js';
-import { i as intl, A as throttle, h as hideTooltip, s as showTooltip } from './functions-b791a892.js';
-import { g as globalMessages } from './intl-f2f7ce8b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-130e07bb.js';
+import { i as intl, A as throttle, h as hideTooltip, s as showTooltip } from './functions-03966124.js';
+import { g as globalMessages } from './intl-2fa0087c.js';
 
 const wmNavigationCss = ":host{--wmcolor-navigation-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigation-background-selected:var(--wmcolor-interactive-background-selected);--wmcolor-navigation-background:var(--wmcolor-background);--wmcolor-navigation-border-selected:var(--wmcolor-interactive);--wmcolor-navigation-focus:var(--wmcolor-interactive-focus);--wmcolor-navigation-icon-selected:var(--wmcolor-interactive);--wmcolor-navigation-icon:var(--wmcolor-icon);--wmcolor-navigation-text-selected:var(--wmcolor-interactive);z-index:10}:host([aria-expanded=true]){z-index:5000}.tray{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:var(--wmcolor-navigation-background);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.tray{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.tray ul{visibility:hidden}.tray .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([aria-expanded=true]) .tray{-webkit-transform:translateX(0);transform:translateX(0)}:host([aria-expanded=true]) .tray ul{visibility:visible}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out}}";
+const WmNavigationStyle0 = wmNavigationCss;
 
 const Navigation = class {
     constructor(hostRef) {
@@ -101,9 +102,9 @@ const Navigation = class {
             } }));
     }
     render() {
-        return (h(Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { key: '4b46f2057cf47f6f2857a8c2fbd0113fbaa3d71b', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'fe2e1586827cdbc1d0de1813ca15e5dbd42d99c0', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'a65d6897042cadf2a43d99535c18ec314b6e1c54', class: "tray" }, h("div", { key: 'ff0242631c40b374c750e6377449d751ccc88d4c', class: "toggle-wrapper" }, h("wm-button", { key: 'e76ca281e2df25b9ab4169ff0aa9689ca3f71cae', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: 'd056d10575ad4aa3deb5cf00011d3469860625e0', class: "navlist" }, h("slot", { key: '5b4be146205fec5ffbd44970e60d7aa4e00c7fc1' }))), this.isCollapsible && (h("div", { key: 'dbba46d2e9e1c70a65cc968560197a56097775fe', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -111,9 +112,10 @@ const Navigation = class {
         "open": ["handleStateChange"]
     }; }
 };
-Navigation.style = wmNavigationCss;
+Navigation.style = WmNavigationStyle0;
 
 const wmNavigationHamburgerCss = "button{--wmcolor-navigation-hamburger-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigation-hamburger-icon:var(--wmcolor-interactive);display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:0}button:hover{background-color:var(--wmcolor-navigation-hamburger-background-hover)}.icon:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f35c\";font-size:1.5rem;color:var(--wmcolor-navigation-hamburger-icon)}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}";
+const WmNavigationHamburgerStyle0 = wmNavigationHamburgerCss;
 
 const NavigationHamburger = class {
     constructor(hostRef) {
@@ -151,14 +153,15 @@ const NavigationHamburger = class {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "icon" }))));
+        return (h(Host, { key: '64106288d26853ec6dced8c379e308910d0fc241', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'f874ff163e409ae233521d4c089d8f28911fe051', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: 'd85220650c6728633ca27259b5a370bbc7d47e02', class: "icon" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
 };
-NavigationHamburger.style = wmNavigationHamburgerCss;
+NavigationHamburger.style = WmNavigationHamburgerStyle0;
 
 const wmNavigationItemCss = ".link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative;background:var(--wmcolor-navigation-background)}.link:hover{background-color:var(--wmcolor-navigation-background-hover)}.link .icon{font-size:1.375rem;color:var(--wmcolor-navigation-icon)}.link .text{font-size:0.875rem}.link:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-3px}.link.active{background-color:var(--wmcolor-navigation-background-selected)}.link.active:before{content:\"\";background-color:var(--wmcolor-navigation-border-selected);position:absolute;height:100%;width:5px;left:0}.link.active .text{color:var(--wmcolor-navigation-text-selected)}.link.active .icon{color:var(--wmcolor-navigation-icon-selected)}";
+const WmNavigationItemStyle0 = wmNavigationItemCss;
 
 const NavigationItem = class {
     constructor(hostRef) {
@@ -169,11 +172,11 @@ const NavigationItem = class {
         this.active = undefined;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
+        return (h(Host, { key: 'c4420b1e4396ac065b3674f52b124c0d25359435', role: "listitem" }, h("a", { key: 'ffd82c5f726e982e4418c8bd335c3c151ac1fbfd', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'fe1a4418452356a9811359ded2aac74694f9a3d2', class: "icon", "aria-hidden": "true" }, h("slot", { key: '9690f8cbfb21a229493b9b7585ccdb3e90691aa1' })), h("div", { key: 'e134a8b4ca4df635c460b87e7a87cb3909737903', class: "text" }, this.text))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
 };
-NavigationItem.style = wmNavigationItemCss;
+NavigationItem.style = WmNavigationItemStyle0;
 
 export { Navigation as wm_navigation, NavigationHamburger as wm_navigation_hamburger, NavigationItem as wm_navigation_item };

package/dist/esm/wm-navigator.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-558b5a82.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-130e07bb.js';
 import { a as getWmMode } from './interfaces-cc5b177f.js';
-import { n as snakeCaseToCamelCase, o as getNewIndexToFocus, i as intl } from './functions-b791a892.js';
+import { n as snakeCaseToCamelCase, o as getNewIndexToFocus, i as intl } from './functions-03966124.js';
 
 const getRequest = async (url) => {
     const response = await fetch(url);
@@ -13,6 +13,7 @@ const getRequest = async (url) => {
 };
 
 const wmNavigatorCss = ":host{--wmcolor-navigator-background:var(--wmcolor-background);--wmcolor-navigator-header-background:var(--wmcolor-brand-dark);--wmcolor-navigator-header-text:var(--wmcolor-text-ondark);--wmcolor-navigator-item-background-selected:var(--wmcolor-interactive-background-selected);--wmcolor-navigator-item-background-focus:var(--wmcolor-interactive-background-focus);--wmcolor-navigator-item-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigator-item-background:var(--wmcolor-background);--wmcolor-navigator-item-border:var(--wmcolor-border);--wmcolor-navigator-item-text:var(--wmcolor-text);--wmcolor-navigator-user-background:var(--wmcolor-background-readonly);min-width:0;position:relative;display:inline-block}:host .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:var(--wmcolor-navigator-background);letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user{background:var(--wmcolor-navigator-user-background);padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p{margin:0}:host .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2{background:var(--wmcolor-navigator-header-background);color:var(--wmcolor-navigator-header-text);font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right{right:auto;left:20px}:host img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";
+const WmNavigatorStyle0 = wmNavigatorCss;
 
 const Navigator = class {
     constructor(hostRef) {
@@ -317,6 +318,6 @@ const Navigator = class {
         "products": ["parseData"]
     }; }
 };
-Navigator.style = wmNavigatorCss;
+Navigator.style = WmNavigatorStyle0;
 
 export { Navigator as wm_navigator };

package/dist/esm/wm-nested-select.entry.js

@@ -1,8 +1,9 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-558b5a82.js';
-import { i as intl, t as toBool, k as shouldOpenUp, B as getContextMeasurements, z as isElOrChild, y as getTextDir } from './functions-b791a892.js';
-import { g as globalMessages } from './intl-f2f7ce8b.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-130e07bb.js';
+import { i as intl, t as toBool, k as shouldOpenUp, B as getContextMeasurements, z as isElOrChild, y as getTextDir } from './functions-03966124.js';
+import { g as globalMessages } from './intl-2fa0087c.js';
 
 const wmNestedSelectCss = ":host{--wmcolor-select-background:var(--wmcolor-background);--wmcolor-select-border:var(--wmcolor-input-border);--wmcolor-select-option-background-disabled:var(--wmcolor-option-background-disabled);--wmcolor-select-option-background-focus:var(--wmcolor-option-background-focus);--wmcolor-select-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-select-option-background-selected:var(--wmcolor-option-background-selected);--wmcolor-select-option-background:var(--wmcolor-option-background);--wmcolor-select-option-border:var(--wmcolor-option-border);--wmcolor-select-option-text-disabled:var(--wmcolor-option-text-disabled);--wmcolor-select-option-text:var(--wmcolor-option-text);--wmcolor-select-search-border:var(--wmcolor-input-border);--wmcolor-select-search-icon:var(--wmcolor-icon-accent);--wmcolor-select-searchresults-text:var(--wmcolor-text);--wmcolor-select-selectall-background:var(--wmcolor-select-option-background);--wmcolor-select-selectall-border:var(--wmcolor-select-option-border);--wmcolor-select-selectall-text:var(--wmcolor-interactive);--wmcolor-select-text:var(--wmcolor-interactive);position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:var(--wmcolor-text-required)}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:var(--wmcolor-text-error)}.wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:var(--wmcolor-select-text);min-width:8.75rem}.button-wrapper .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background:var(--wmcolor-select-background);width:100%;border:solid 1px;border-color:var(--wmcolor-select-border);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:var(--wmcolor-select-text);font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.button-wrapper .displayedoption{height:2.75rem}}.button-wrapper .displayedoption:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f140\";position:absolute;right:0.5625rem;pointer-events:none;font-size:1.12rem}.button-wrapper .displayedoption.expanded:before{content:\"\\f143\"}.button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:var(--wmcolor-select-background);text-decoration:none}.button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.button-wrapper .displayedoption:focus{outline:none}.button-wrapper .displayedoption::-moz-focus-inner{border:0}.button-wrapper .displayedoption:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}.button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper.invalid .button-wrapper .displayedoption{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}.wrapper .error-message{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-bottom:0.25rem;top:100%;left:0}.wrapper .error-message:not(:empty){margin-top:0.25rem}.dropdown{overflow-x:hidden;overflow-y:auto;-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;transform:scale(1, 0);-webkit-overflow-scrolling:touch;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:40;right:0;background:var(--wmcolor-select-option-background);z-index:100;width:100%;font-size:0.875rem}.dropdown.upwards{top:unset;bottom:100%;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.dropdown.hidden{visibility:hidden}.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.menu{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:var(--max-height);overflow-y:auto}.menu.hidden{position:absolute;max-height:100%;overflow:hidden}.menu .menuitem{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;font-weight:600}.menu .menuitem:not(:last-child){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}.menu .menuitem.disabled{color:var(--wmcolor-select-option-text-disabled);cursor:auto}.menu .menuitem.clear-selection{color:var(--wmcolor-select-text);-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center}.menu .menuitem.clear-selection:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f156\";pointer-events:none;padding-right:0.5rem;font-size:1.12rem}.menu :focus-visible{outline:none;background:var(--wmcolor-interactive-background-focus)}.menu :hover{background:var(--wmcolor-select-option-background-hover);outline:none}.group-btn:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f142\";position:absolute;right:1.25rem;pointer-events:none;font-size:1.12rem}.group-btn.disabled{background:var(--wmcolor-select-option-background-disabled)}.selection-count,.disabled-indication{margin-right:40px;font-weight:400;font-style:italic}.disabled-indication{color:var(--wmcolor-interactive-disabled)}.option-list-wrapper{background:white;width:100%;-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:-webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:transform 0.2s cubic-bezier(0.04, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1)}.option-list-wrapper.hidden{-webkit-transform:translateX(100%);transform:translateX(100%);position:absolute;top:0px;max-height:100%;overflow-y:hidden}.measurement-area{position:absolute;visibility:hidden;height:0px;pointer-events:none}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const WmNestedSelectStyle0 = wmNestedSelectCss;
 
 const NestedSelect = class {
     constructor(hostRef) {
@@ -321,20 +322,20 @@ const NestedSelect = class {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '854bfbccf53069ca95a2c7e3beb60ec7cef4fe52', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'db844c36c341b311a1178899c3dd6f75b3cde901', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '57b77d879d3065c2fd6e51c86a4cf9589d2b69dd', class: "label-wrapper" }, h("label", { key: 'd175fa9541a93c22be70143a10b77a087913087e', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, 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: '1e100f81edc7d1dd9c6e1224cd1d5cfeb68e37a7', class: "button-wrapper" }, h("button", Object.assign({ key: 'e8e68bc84666875a5a478aae79d04cc57d231f4b' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'e0dc1adac5cdcb76da590a065b8fc80cead8df69', class: "overflowcontrol" }, h("span", { key: '36427c454c08d30402f50424772c4c3fe6d764e3', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { key: '2725d1b3b564a3d6a879e598ef5b0bf192dcd1d6', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '54b75659619de70978e10ab8e3739938686084f8', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'a6894d7f78c6eb4a155c2b55f88f43a47377ce7d', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, 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("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")));
-        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
+        })), h("div", { key: '52fd5904572fe4691cbae1422ccaf285f4a408dd', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '7e3cf958381b7035914cc7f40bd386b923b1ef31' }))), h("div", { key: '0b4dfb9684d0f61cef7781d3b20d87d0ce7771ee', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
 };
-NestedSelect.style = wmNestedSelectCss;
+NestedSelect.style = WmNestedSelectStyle0;
 
 export { NestedSelect as wm_nested_select };

package/dist/esm/wm-optgroup.entry.js

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-558b5a82.js';
-import { t as toBool, a as handleDisabledAttribute } from './functions-b791a892.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-130e07bb.js';
+import { t as toBool, a as handleDisabledAttribute } from './functions-03966124.js';
 
 const wmOptgroupCss = ":host{width:100%;display:none}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host(.visible){display:unset}";
+const WmOptgroupStyle0 = wmOptgroupCss;
 
 const Optgroup = class {
     constructor(hostRef) {
@@ -56,7 +57,7 @@ const Optgroup = class {
         handleDisabledAttribute(this.el, this.isDisabled);
     }
     render() {
-        return (h(Host, null, h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
+        return (h(Host, { key: '1db6713870fdb7ed53744c5ea7a04f767e404c34' }, h("div", { key: '504d6788ecbe82ac24ab4b7a0231b10be1435d3c', class: `list-wrapper` }, h("priv-option-list", { key: 'f435b5664196850ba254cab7868c9e55eee7be33', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: '583dd769b16ba249c6c68618d5431b7b359f69e8' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -64,6 +65,6 @@ const Optgroup = class {
         "isExpanded": ["isExpandedChanged"]
     }; }
 };
-Optgroup.style = wmOptgroupCss;
+Optgroup.style = WmOptgroupStyle0;
 
 export { Optgroup as wm_optgroup };