@watermarkinsights/ripple 5.7.0-1 → 5.7.0-11

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

@@ -1,5 +1,5 @@
 import { h, Host, forceUpdate } from "@stencil/core";
-import { getTextDir, intl, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
+import { getContextMeasurements, getTextDir, intl, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
 import { globalMessages } from "../../../global/intl";
 export class NestedSelect {
     constructor() {
@@ -18,7 +18,7 @@ export class NestedSelect {
                 description: "Button text to clear selection. Use imperative",
             });
         this.disabled = false;
-        this.maxHeight = undefined;
+        this.maxHeight = "200px";
         this.label = undefined;
         this.labelPosition = "top";
         this.requiredField = false;
@@ -49,6 +49,8 @@ export class NestedSelect {
         });
         this.isExpanded = false;
         this.showClearSelectionButton = false;
+        this.announcement = "";
+        this.constrainedMaxHeight = this.maxHeight;
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -67,7 +69,7 @@ export class NestedSelect {
         return this.childOptions.every((option) => option.selected);
     }
     componentWillLoad() {
-        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildChange(mutationRecord)));
+        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((_mutationRecord) => this.handleChildChange()));
         mutationObserver.observe(this.el, {
             childList: true,
             attributes: true,
@@ -75,16 +77,14 @@ export class NestedSelect {
             attributeFilter: ["selected"],
         });
     }
-    componentDidLoad() {
-        if (this.maxHeight) {
-            this.dropdownEl.style.maxHeight = this.maxHeight;
-        }
-    }
-    handleChildChange(_) {
+    handleChildChange() {
         // on update of children or children selected state, reset button text and rerender
         this.setButtonText();
         forceUpdate(this.el);
-        // this.optionListEl.handleChildChange(_);
+        if (this.multiple) {
+            // update state of clone options
+            this.optgroupEls.forEach((optgroupEl) => optgroupEl.handleChildChange());
+        }
     }
     setButtonText() {
         this.displayedOptions = this.childOptions.filter((x) => x.selected);
@@ -124,6 +124,28 @@ export class NestedSelect {
     closePopupOnEscape() {
         this.close();
     }
+    handleKeyDown(ev) {
+        // when shift tabbing but component is still in focus, close dropdown
+        switch (ev.key) {
+            case "Tab":
+                if (ev.shiftKey) {
+                    this.close();
+                }
+                break;
+            case "ArrowDown":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open();
+                }
+                break;
+            case "ArrowUp":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open(true);
+                }
+                break;
+        }
+    }
     close(returnFocus = true) {
         if (this.isExpanded) {
             this.isExpanded = false;
@@ -136,40 +158,50 @@ export class NestedSelect {
             }, 150);
         }
     }
-    open() {
+    open(focusLast = false) {
         if (!this.isDisabled) {
             this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
+            this.dropdownEl.scrollTop = 0;
             this.isExpanded = true;
             this.dropdownEl.classList.add("open");
             const elHeight = this.el.clientHeight;
             this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, elHeight, 0);
-            window.requestAnimationFrame(() => {
-                this.focusFirstMenuitem();
+            this.constrainedMaxHeight = this.maxHeight;
+            const spaceAbove = getContextMeasurements(this.el).spaceAbove;
+            if (this.openUp) {
+                if (parseInt(getComputedStyle(this.menuEl).getPropertyValue("--max-height").replace("px", "")) > spaceAbove) {
+                    this.constrainedMaxHeight = spaceAbove.toString() + "px";
+                }
+            }
+            // if opening upwards, set an upwards height limit for the optgroup level
+            this.optgroupEls.forEach((o) => {
+                o.shadowRoot.querySelector("priv-option-list").upwardsHeightLimit = this.openUp
+                    ? spaceAbove
+                    : null;
             });
-        }
-    }
-    focusFirstMenuitem() {
-        if (this.menuitemEls.length > 0) {
-            this.menuitemEls[0].focus();
+            // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
+            // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
+            // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
+            window.setTimeout(() => {
+                if (this.menuitemEls.length > 0) {
+                    const menuitemToFocus = this.menuitemEls[focusLast ? this.menuitemEls.length - 1 : 0];
+                    menuitemToFocus.scrollIntoView({ block: "nearest" });
+                    menuitemToFocus.focus();
+                }
+            }, 60);
         }
     }
     moveDown(menuitemEl) {
         const currentIndex = this.menuitemEls.indexOf(menuitemEl);
-        if (currentIndex == this.menuitemEls.length - 1) {
-            this.menuitemEls[0].focus();
-        }
-        else {
-            this.menuitemEls[currentIndex + 1].focus();
-        }
+        const menuitemToFocus = this.menuitemEls[currentIndex == this.menuitemEls.length - 1 ? 0 : currentIndex + 1];
+        menuitemToFocus.scrollIntoView({ block: "nearest" });
+        menuitemToFocus.focus();
     }
     moveUp(menuitemEl) {
         const currentIndex = this.menuitemEls.indexOf(menuitemEl);
-        if (currentIndex == 0) {
-            this.menuitemEls[this.menuitemEls.length - 1].focus();
-        }
-        else {
-            this.menuitemEls[currentIndex - 1].focus();
-        }
+        const menuitemToFocus = this.menuitemEls[currentIndex == 0 ? this.menuitemEls.length - 1 : currentIndex - 1];
+        menuitemToFocus.scrollIntoView({ block: "nearest" });
+        menuitemToFocus.focus();
     }
     handleButtonBlur(ev) {
         if (isElOrChild(this.el, ev.relatedTarget)) {
@@ -225,6 +257,13 @@ export class NestedSelect {
         const elToFocus = this.el.shadowRoot.querySelector(`button[data-label=${ev.detail}]`);
         elToFocus.focus();
     }
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
     renderButtonText() {
         if (this.displayedOptions.length < 1) {
             return h("span", null, this.placeholder);
@@ -243,6 +282,12 @@ export class NestedSelect {
     }
     handleClearSelection() {
         this.optgroupEls.forEach((optgroupEl) => optgroupEl.emitDeselection());
+        const selectionClearedAnnouncement = intl.formatMessage({
+            id: "select.selectionCleared",
+            defaultMessage: "Selection cleared",
+            description: "Screen reader announcement alerting the user they have cleared their selection",
+        });
+        this.announce(selectionClearedAnnouncement);
         if (!this.multiple) {
             this.close();
         }
@@ -282,14 +327,14 @@ export class NestedSelect {
         };
         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, 
         // 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), onFocus: () => this.close() }), 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" }, 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", { 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 }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("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", { 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", { id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }
@@ -329,17 +374,18 @@ export class NestedSelect {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "attribute": "max-height",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"200px\""
             },
             "label": {
                 "type": "string",
@@ -518,13 +564,32 @@ export class NestedSelect {
                 "attribute": "all-selected-message",
                 "reflect": false,
                 "defaultValue": "intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  })"
+            },
+            "constrainedMaxHeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "constrained-max-height",
+                "reflect": false,
+                "defaultValue": "this.maxHeight"
             }
         };
     }
     static get states() {
         return {
             "isExpanded": {},
-            "showClearSelectionButton": {}
+            "showClearSelectionButton": {},
+            "announcement": {}
         };
     }
     static get events() {
@@ -565,6 +630,12 @@ export class NestedSelect {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "click",
                 "method": "handleClick",

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

@@ -31,10 +31,16 @@ export class Optgroup {
                 this.el.classList.remove("visible");
             }, 250);
         }
+        if (this.parentNestedSelect.multiple) {
+            this.optionListEl.updateOptionVisibility();
+        }
     }
     async emitDeselection() {
         this.wmOptgroupAllDeselected.emit();
     }
+    async handleChildChange() {
+        this.optionListEl.handleChildChange();
+    }
     handleOptionKeyLeft() {
         this.isExpanded = false;
     }
@@ -42,7 +48,7 @@ export class Optgroup {
         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, 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, 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)))));
     }
     static get is() { return "wm-optgroup"; }
     static get encapsulation() { return "shadow"; }
@@ -213,6 +219,23 @@ export class Optgroup {
                     "text": "",
                     "tags": []
                 }
+            },
+            "handleChildChange": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -151,7 +151,7 @@
   pointer-events: none;
 }
 
-:host(:focus) {
+:host(:focus-visible) {
   outline: none;
   background: var(--wmcolor-select-option-background-focus);
 }

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

@@ -227,9 +227,9 @@
   margin-left: 0.5rem;
 }
 .wrapper .button-wrapper > .displayedoption[disabled] {
-  color: #6b6b6b;
-  border-color: #8a8a8a;
-  background: #f0f0f0;
+  color: var(--wmcolor-select-option-text-disabled);
+  border-color: var(--wmcolor-border-dark);
+  background: var(--wmcolor-select-option-background-disabled);
   cursor: default;
 }
 .wrapper .button-wrapper > .dropdown {
@@ -260,6 +260,8 @@
   z-index: 100;
   width: 100%;
   font-size: 0.875rem;
+  max-height: var(--max-height);
+  overflow-y: auto;
 }
 .wrapper .button-wrapper > .dropdown.upwards {
   top: unset;
@@ -297,11 +299,6 @@
   margin-top: 0.25rem;
 }
 
-.options-wrapper {
-  max-height: 12.5rem;
-  overflow: auto;
-}
-
 .measurement-area {
   position: absolute;
   visibility: hidden;

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

@@ -10,7 +10,7 @@ export class Select {
         this.overflowCount = 0;
         this.displayedOptions = [];
         this.disabled = false;
-        this.maxHeight = undefined;
+        this.maxHeight = "200px";
         this.label = undefined;
         this.labelPosition = "top";
         this.requiredField = false;
@@ -107,7 +107,7 @@ export class Select {
             console.error("wm-select should have one initial option selected");
         }
         handleDisabledAttribute(this.el, this.isDisabled);
-        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildChange(mutationRecord)));
+        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((_mutationRecord) => this.handleChildChange()));
         mutationObserver.observe(this.el, {
             childList: true,
             attributes: true,
@@ -115,21 +115,19 @@ export class Select {
             attributeFilter: ["selected"],
         });
     }
-    handleChildChange(_) {
+    handleChildChange() {
         // on update of children or children selected state, reset button text and rerender
         this.setButtonText();
-        this.optionListEl.handleChildChange(_);
         forceUpdate(this.el);
+        if (this.multiple) {
+            // update state of clone options
+            this.optionListEl.handleChildChange();
+        }
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
         this.dropdownEl.classList.add("hidden");
         forceUpdate(this.el);
-        // Dev can overwrite the max-height rule set in the Sass file
-        if (this.maxHeight) {
-            // this.listboxEl.style.maxHeight = this.maxHeight;
-            this.dropdownEl.style.maxHeight = this.maxHeight;
-        }
         this.setButtonText();
     }
     open(optionToSelect) {
@@ -244,7 +242,7 @@ export class Select {
         };
         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, 
         // 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", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        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", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { 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", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { 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"; }
@@ -284,17 +282,18 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "attribute": "max-height",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"200px\""
             },
             "label": {
                 "type": "string",

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

@@ -0,0 +1,61 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+wm-modal-pss-footer {
+  border-radius: 0px 0px 5px 5px;
+  margin-top: -1px;
+}
+wm-modal-pss-footer .wm-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@media only screen and (max-width: 650px) {
+  wm-modal-pss-footer .wm-wrapper.footer-text {
+    flex-direction: column;
+    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;
+}

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

@@ -0,0 +1,138 @@
+import { h } from "@stencil/core";
+export class ModalFooter {
+    constructor() {
+        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", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { "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))));
+    }
+    static get is() { return "wm-modal-pss-footer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-pss-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-pss-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "secondaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "primaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "info-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "primaryActionDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-action-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "deleteStyle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "delete-style",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}