@watermarkinsights/ripple 5.7.0-9 → 5.8.0-0

package/dist/cjs/{global-80ed0881.js → global-541becf9.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const version = "5.7.0-9";
+const version = "5.8.0-0";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/cjs/loader.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e86c28b6.js');
-require('./global-80ed0881.js');
+require('./global-541becf9.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/priv-option-list.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e86c28b6.js');
 const functions = require('./functions-e24249e6.js');
 
-const privOptionListCss = ".search{-webkit-box-sizing:border-box;box-sizing:border-box;padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid;border-color:var(--wmcolor-select-search-border)}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .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:\"\\f349\";color:var(--wmcolor-select-search-icon);font-size:1.12rem}.search-results-message{padding:1.25rem;color:var(--wmcolor-select-searchresults-text);font-size:0.875rem;font-style:italic}.return-btn,.select-all{width:100%;cursor:pointer;padding:1.25rem;margin:0;background:var(--wmcolor-select-option-background);font-family:inherit;font-size:inherit;text-align:left;text-align:start;font-weight:500;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.return-btn:hover,.select-all:hover{outline:none;background:var(--wmcolor-select-option-background-hover)}.return-btn:focus,.select-all:focus{outline:none;background:var(--wmcolor-select-option-background-focus)}.return-btn,.select-all,.search{border:none}.return-btn:not(:last-child),.select-all:not(:last-child),.search:not(:last-child){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}.options-wrapper{overflow-y:auto;max-height:var(--max-height)}.non-options-wrapper{border-bottom:1px solid var(--wmcolor-border-dark)}.return-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-weight:600;font-size:0.875rem}.return-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:\"\\f141\";pointer-events:none;font-size:1.28rem}";
+const privOptionListCss = ".search{-webkit-box-sizing:border-box;box-sizing:border-box;padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid;border-color:var(--wmcolor-select-search-border)}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .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:\"\\f349\";color:var(--wmcolor-select-search-icon);font-size:1.12rem}.search-results-message{padding:1.25rem;color:var(--wmcolor-select-searchresults-text);font-size:0.875rem;font-style:italic}.return-btn,.select-all{width:100%;cursor:pointer;padding:1.25rem;margin:0;background:var(--wmcolor-select-option-background);font-family:inherit;font-size:inherit;text-align:left;text-align:start;font-weight:500;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.return-btn:hover,.select-all:hover{outline:none;background:var(--wmcolor-select-option-background-hover)}.return-btn:focus,.select-all:focus{outline:none;background:var(--wmcolor-select-option-background-focus)}.return-btn,.select-all,.search{border:none}.return-btn:not(:last-child),.select-all:not(:last-child),.search:not(:last-child){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}.options-wrapper{overflow-y:auto;max-height:var(--max-height)}.non-options-wrapper{border-bottom:1px solid var(--wmcolor-border-dark)}.return-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-weight:600;font-size:0.875rem}.return-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:\"\\f141\";pointer-events:none;padding-right:0.5rem;font-size:1.28rem}.return-btn .return-btn-label{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between}.return-btn .return-btn-label .selection-count{font-weight:400;font-style:italic}";
 
 const PrivOptionList = class {
     constructor(hostRef) {
@@ -383,10 +383,21 @@ const PrivOptionList = class {
         this.announcement = message;
     }
     renderReturnBtn() {
+        const selectionCount = this.childOptions.filter((o) => o.selected).length;
+        const singleSelectionCountMessage = functions.intl.formatMessage({
+            id: "select.optgroupSingleSelectionCount",
+            defaultMessage: "Item Selected",
+            description: "Text indicating number of selected in a group, where only a single selection is possible.",
+        }, { numSelected: selectionCount });
+        const multipleSelectionCountMessage = functions.intl.formatMessage({
+            id: "select.optgroupMultipleSelectionCount",
+            defaultMessage: "{numSelected} Selected",
+            description: "Text indicating number of selected in a group, where multiple selections are possible.",
+        }, { numSelected: selectionCount });
         return (index.h("button", { ref: (el) => (this.returnBtnEl = el), id: "return-btn", class: "return-btn", onKeyDown: (ev) => this.handleKeyDown(ev), onClick: () => {
                 //@ts-ignore -- Check out this one weird trick TypeScript doesn't want you to know about
                 this.el.getRootNode().host.isExpanded = false;
-            } }, this.optgroupLabel));
+            } }, index.h("div", { class: "return-btn-label" }, this.optgroupLabel, selectionCount > 0 && (index.h("span", { class: "selection-count" }, this.multiple ? multipleSelectionCountMessage : singleSelectionCountMessage)))));
     }
     renderSearchField() {
         return (index.h("div", { class: "search" }, index.h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, index.h("div", { class: "icon" }), index.h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",

package/dist/cjs/ripple.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e86c28b6.js');
-require('./global-80ed0881.js');
+require('./global-541becf9.js');
 
 /*
  Stencil Client Patch Browser v4.8.2 | MIT Licensed | https://stenciljs.com

package/dist/cjs/wm-line-chart.cjs.entry.js

@@ -14,7 +14,6 @@ const LineChart = class {
         index.registerInstance(this, hostRef);
         this.minTickWidth = 120;
         this.popoverData = [];
-        this.focusedDataPoint = [0, 0];
         this.dataPointMatrix = [];
         this.xIntervals = [];
         this.displayedXIntervals = [];
@@ -109,7 +108,7 @@ const LineChart = class {
                 if (!ev.shiftKey && this.firstVisibleLineIdx !== -1) {
                     ev.preventDefault();
                     this.announce(this.lineFocusMessage(this.firstVisibleLineIdx));
-                    this.focusDataPoint(this.firstVisibleLineIdx, 0);
+                    this.focusDataPointByEl(this.lineEls[this.firstVisibleLineIdx].querySelector(".point"));
                 }
                 break;
             case "ArrowUp":
@@ -127,9 +126,7 @@ const LineChart = class {
         }
     }
     handleDataPointKeydown(ev) {
-        const [lineIdx, pointIdx] = this.focusedDataPoint;
-        const lineLength = this.lineEls[lineIdx].querySelectorAll(".point").length;
-        const numLines = this.dataPointMatrix.length;
+        const curPointEl = ev.target;
         switch (ev.key) {
             case "Tab":
                 if (ev.shiftKey && this.visibilityToggles) {
@@ -138,32 +135,25 @@ const LineChart = class {
                 }
                 break;
             case "ArrowUp":
-                ev.preventDefault();
-                let prevLineIdx = lineIdx;
-                do
-                    prevLineIdx = functions.wrapAround(prevLineIdx, -1, numLines - 1);
-                while (this.hiddenLines.includes(prevLineIdx));
-                this.announce(this.lineFocusMessage(prevLineIdx));
-                this.focusDataPoint(prevLineIdx, pointIdx);
-                break;
             case "ArrowDown":
                 ev.preventDefault();
-                let nextLineIdx = lineIdx;
-                do
-                    nextLineIdx = functions.wrapAround(nextLineIdx, 1, numLines - 1);
-                while (this.hiddenLines.includes(nextLineIdx));
-                this.announce(this.lineFocusMessage(nextLineIdx));
-                this.focusDataPoint(nextLineIdx, pointIdx);
+                const pointElsInColumn = Array.from(this.pointEls).filter((p) => p.dataset.pointidx == curPointEl.dataset.pointidx);
+                if (pointElsInColumn.length > 1) {
+                    const nextPointIdx = functions.wrapAround(pointElsInColumn.indexOf(curPointEl), ev.key == "ArrowUp" ? -1 : 1, pointElsInColumn.length - 1);
+                    const nextPointInColumn = pointElsInColumn[nextPointIdx];
+                    this.announce(this.lineFocusMessage(parseInt(nextPointInColumn.dataset.lineidx)));
+                    this.focusDataPointByEl(nextPointInColumn);
+                }
                 break;
             case "ArrowLeft":
-                ev.preventDefault();
-                const prevPointIdx = functions.wrapAround(pointIdx, -1, lineLength - 1);
-                this.focusDataPoint(lineIdx, prevPointIdx);
-                break;
             case "ArrowRight":
                 ev.preventDefault();
-                const nextPointIdx = functions.wrapAround(pointIdx, 1, lineLength - 1);
-                this.focusDataPoint(lineIdx, nextPointIdx);
+                const linePoints = Array.from(curPointEl.parentElement.querySelectorAll(".point"));
+                if (linePoints.length > 1) {
+                    const nextPointIdxInDirection = functions.wrapAround(linePoints.indexOf(curPointEl), ev.key == "ArrowLeft" ? -1 : 1, linePoints.length - 1);
+                    const nextPointInDirection = linePoints[nextPointIdxInDirection];
+                    this.focusDataPointByEl(nextPointInDirection);
+                }
                 break;
         }
     }
@@ -179,21 +169,13 @@ const LineChart = class {
         const numDataPoints = this.dataPointMatrix[lineIdx].filter((datapoint) => datapoint.yValue !== null).length;
         return `${label}, line ${lineIdx + 1} of ${this.dataPointMatrix.length} with ${numDataPoints} data points`;
     }
-    focusDataPoint(lineIdx, pointIdx) {
-        const lineEl = this.lineEls[lineIdx];
-        const linePointEl = lineEl.querySelectorAll(".point")[pointIdx];
-        this.pointEls.forEach((point) => (point.tabIndex = -1));
-        linePointEl.tabIndex = 0;
-        linePointEl.focus();
-        this.focusedDataPoint = [lineIdx, pointIdx];
-    }
     focusDataPointByEl(pointEl) {
-        const lineIdx = parseInt(pointEl.dataset.lineidx);
-        const pointIdx = Array.from(pointEl.parentElement.querySelectorAll(".point")).indexOf(pointEl);
+        // const lineIdx = parseInt(pointEl.dataset.lineidx!);
+        // const pointIdx = parseInt(pointEl.dataset.pointidx!);
         this.pointEls.forEach((point) => (point.tabIndex = -1));
         pointEl.tabIndex = 0;
         pointEl.focus();
-        this.focusedDataPoint = [lineIdx, pointIdx];
+        // this.focusedDataPoint = [lineIdx, pointIdx];
     }
     calcYIntervals() {
         let yIntervals = [];
@@ -286,7 +268,6 @@ const LineChart = class {
             const lineEl = this.lineEls[this.firstVisibleLineIdx];
             const linePointEl = lineEl.querySelectorAll(".point")[0];
             linePointEl.tabIndex = 0;
-            this.focusedDataPoint = [this.firstVisibleLineIdx, 0];
         }
     }
     calcDelta(dataPoint, prevDataPoint) {
@@ -366,7 +347,7 @@ const LineChart = class {
                     const changeSinceMessage = intl.lineChartMessages.getChangeSince(prevDataPoint.xValue);
                     ariaLabel += `, ${changeSinceMessage} ${this.calcDelta(dataPoint, prevDataPoint)}`;
                 }
-                return (index.h("span", { id: `${lineLabel}-${pointIdx}`, role: "img", "aria-label": ariaLabel, tabIndex: firstPointTabIndex, class: "point icon", style: iconStyle, "data-lineidx": lineIdx, "data-xvalue": xValue, onKeyDown: (ev) => this.handleDataPointKeydown(ev), onFocus: () => (this.popoverIndex = pointIdx), onClick: (ev) => this.focusDataPointByEl(ev.target), onMouseEnter: () => (this.popoverIndex = pointIdx) }));
+                return (index.h("span", { id: `${lineLabel}-${pointIdx}`, role: "img", "aria-label": ariaLabel, tabIndex: firstPointTabIndex, class: "point icon", style: iconStyle, "data-lineidx": lineIdx, "data-pointidx": pointIdx, "data-xvalue": xValue, onKeyDown: (ev) => this.handleDataPointKeydown(ev), onFocus: () => (this.popoverIndex = pointIdx), onClick: (ev) => this.focusDataPointByEl(ev.target), onMouseEnter: () => (this.popoverIndex = pointIdx) }));
             }
         })));
     }

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

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e86c28b6.js');
+const functions = require('./functions-e24249e6.js');
+const intl = require('./intl-5aeba788.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 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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items: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);-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-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:1.25rem 1.875rem}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 1.875rem 1.25rem 1.875rem;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);-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;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 Modal = class {
+const ModalPss = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.focusLastElement = index.createEvent(this, "focusLastElement", 3);
@@ -37,6 +39,12 @@ const Modal = class {
     toggleModal() {
         this.open ? this.showModal() : this.hideModal();
     }
+    //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
+    //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
+    // @Listen("wmShowModal", { target: "window" })
+    // doesEventMatchId(ev: CustomEvent) {
+    //   ev.detail === this.uid && this.showModal();
+    // }
     handleClick(ev) {
         this.open && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
     }
@@ -71,14 +79,13 @@ const Modal = class {
     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]'.");
+                console.error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
             }
         }
         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;
+        this.uid = this.el.id ? this.el.id : functions.generateId();
     }
     componentDidLoad() {
         if (this.open) {
@@ -109,13 +116,7 @@ const Modal = class {
             this.focusOnCloseEl = elToFocus.parentElement;
         }
         else {
-            let el;
-            while (elToFocus && elToFocus.shadowRoot) {
-                el = elToFocus.shadowRoot.activeElement;
-            }
-            if (el) {
-                this.focusOnCloseEl = el;
-            }
+            this.focusOnCloseEl = functions.checkForActiveElInShadow(elToFocus);
         }
     }
     redirectFocusFromBody() {
@@ -135,11 +136,11 @@ const Modal = class {
         "open": ["toggleModal"]
     }; }
 };
-Modal.style = wmModalPssCss;
+ModalPss.style = wmModalPssCss;
 
-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 wmModalPssFooterCss = "wm-modal-pss-footer{-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;margin-top:-1px}wm-modal-pss-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-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 ModalFooter = class {
+const ModalPssFooter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.secondaryText = "";
@@ -172,11 +173,11 @@ const ModalFooter = class {
     }
     get el() { return index.getElement(this); }
 };
-ModalFooter.style = wmModalPssFooterCss;
+ModalPssFooter.style = wmModalPssFooterCss;
 
-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 wmModalPssHeaderCss = "wm-modal-pss-header{-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;margin-bottom:-1px}wm-modal-pss-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-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 ModalHeader = class {
+const ModalPssHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.heading = "";
@@ -202,12 +203,12 @@ const ModalHeader = class {
     //   this.headingElement.focus();
     // }
     render() {
-        return (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: "Close", "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     get el() { return index.getElement(this); }
 };
-ModalHeader.style = wmModalPssHeaderCss;
+ModalPssHeader.style = wmModalPssHeaderCss;
 
-exports.wm_modal_pss = Modal;
-exports.wm_modal_pss_footer = ModalFooter;
-exports.wm_modal_pss_header = ModalHeader;
+exports.wm_modal_pss = ModalPss;
+exports.wm_modal_pss_footer = ModalPssFooter;
+exports.wm_modal_pss_header = ModalPssHeader;

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.js

@@ -6,7 +6,6 @@ export class LineChart {
     constructor() {
         this.minTickWidth = 120;
         this.popoverData = [];
-        this.focusedDataPoint = [0, 0];
         this.dataPointMatrix = [];
         this.xIntervals = [];
         this.displayedXIntervals = [];
@@ -101,7 +100,7 @@ export class LineChart {
                 if (!ev.shiftKey && this.firstVisibleLineIdx !== -1) {
                     ev.preventDefault();
                     this.announce(this.lineFocusMessage(this.firstVisibleLineIdx));
-                    this.focusDataPoint(this.firstVisibleLineIdx, 0);
+                    this.focusDataPointByEl(this.lineEls[this.firstVisibleLineIdx].querySelector(".point"));
                 }
                 break;
             case "ArrowUp":
@@ -119,9 +118,7 @@ export class LineChart {
         }
     }
     handleDataPointKeydown(ev) {
-        const [lineIdx, pointIdx] = this.focusedDataPoint;
-        const lineLength = this.lineEls[lineIdx].querySelectorAll(".point").length;
-        const numLines = this.dataPointMatrix.length;
+        const curPointEl = ev.target;
         switch (ev.key) {
             case "Tab":
                 if (ev.shiftKey && this.visibilityToggles) {
@@ -130,32 +127,25 @@ export class LineChart {
                 }
                 break;
             case "ArrowUp":
-                ev.preventDefault();
-                let prevLineIdx = lineIdx;
-                do
-                    prevLineIdx = wrapAround(prevLineIdx, -1, numLines - 1);
-                while (this.hiddenLines.includes(prevLineIdx));
-                this.announce(this.lineFocusMessage(prevLineIdx));
-                this.focusDataPoint(prevLineIdx, pointIdx);
-                break;
             case "ArrowDown":
                 ev.preventDefault();
-                let nextLineIdx = lineIdx;
-                do
-                    nextLineIdx = wrapAround(nextLineIdx, 1, numLines - 1);
-                while (this.hiddenLines.includes(nextLineIdx));
-                this.announce(this.lineFocusMessage(nextLineIdx));
-                this.focusDataPoint(nextLineIdx, pointIdx);
+                const pointElsInColumn = Array.from(this.pointEls).filter((p) => p.dataset.pointidx == curPointEl.dataset.pointidx);
+                if (pointElsInColumn.length > 1) {
+                    const nextPointIdx = wrapAround(pointElsInColumn.indexOf(curPointEl), ev.key == "ArrowUp" ? -1 : 1, pointElsInColumn.length - 1);
+                    const nextPointInColumn = pointElsInColumn[nextPointIdx];
+                    this.announce(this.lineFocusMessage(parseInt(nextPointInColumn.dataset.lineidx)));
+                    this.focusDataPointByEl(nextPointInColumn);
+                }
                 break;
             case "ArrowLeft":
-                ev.preventDefault();
-                const prevPointIdx = wrapAround(pointIdx, -1, lineLength - 1);
-                this.focusDataPoint(lineIdx, prevPointIdx);
-                break;
             case "ArrowRight":
                 ev.preventDefault();
-                const nextPointIdx = wrapAround(pointIdx, 1, lineLength - 1);
-                this.focusDataPoint(lineIdx, nextPointIdx);
+                const linePoints = Array.from(curPointEl.parentElement.querySelectorAll(".point"));
+                if (linePoints.length > 1) {
+                    const nextPointIdxInDirection = wrapAround(linePoints.indexOf(curPointEl), ev.key == "ArrowLeft" ? -1 : 1, linePoints.length - 1);
+                    const nextPointInDirection = linePoints[nextPointIdxInDirection];
+                    this.focusDataPointByEl(nextPointInDirection);
+                }
                 break;
         }
     }
@@ -171,21 +161,13 @@ export class LineChart {
         const numDataPoints = this.dataPointMatrix[lineIdx].filter((datapoint) => datapoint.yValue !== null).length;
         return `${label}, line ${lineIdx + 1} of ${this.dataPointMatrix.length} with ${numDataPoints} data points`;
     }
-    focusDataPoint(lineIdx, pointIdx) {
-        const lineEl = this.lineEls[lineIdx];
-        const linePointEl = lineEl.querySelectorAll(".point")[pointIdx];
-        this.pointEls.forEach((point) => (point.tabIndex = -1));
-        linePointEl.tabIndex = 0;
-        linePointEl.focus();
-        this.focusedDataPoint = [lineIdx, pointIdx];
-    }
     focusDataPointByEl(pointEl) {
-        const lineIdx = parseInt(pointEl.dataset.lineidx);
-        const pointIdx = Array.from(pointEl.parentElement.querySelectorAll(".point")).indexOf(pointEl);
+        // const lineIdx = parseInt(pointEl.dataset.lineidx!);
+        // const pointIdx = parseInt(pointEl.dataset.pointidx!);
         this.pointEls.forEach((point) => (point.tabIndex = -1));
         pointEl.tabIndex = 0;
         pointEl.focus();
-        this.focusedDataPoint = [lineIdx, pointIdx];
+        // this.focusedDataPoint = [lineIdx, pointIdx];
     }
     calcYIntervals() {
         let yIntervals = [];
@@ -278,7 +260,6 @@ export class LineChart {
             const lineEl = this.lineEls[this.firstVisibleLineIdx];
             const linePointEl = lineEl.querySelectorAll(".point")[0];
             linePointEl.tabIndex = 0;
-            this.focusedDataPoint = [this.firstVisibleLineIdx, 0];
         }
     }
     calcDelta(dataPoint, prevDataPoint) {
@@ -358,7 +339,7 @@ export class LineChart {
                     const changeSinceMessage = lineChartMessages.getChangeSince(prevDataPoint.xValue);
                     ariaLabel += `, ${changeSinceMessage} ${this.calcDelta(dataPoint, prevDataPoint)}`;
                 }
-                return (h("span", { id: `${lineLabel}-${pointIdx}`, role: "img", "aria-label": ariaLabel, tabIndex: firstPointTabIndex, class: "point icon", style: iconStyle, "data-lineidx": lineIdx, "data-xvalue": xValue, onKeyDown: (ev) => this.handleDataPointKeydown(ev), onFocus: () => (this.popoverIndex = pointIdx), onClick: (ev) => this.focusDataPointByEl(ev.target), onMouseEnter: () => (this.popoverIndex = pointIdx) }));
+                return (h("span", { id: `${lineLabel}-${pointIdx}`, role: "img", "aria-label": ariaLabel, tabIndex: firstPointTabIndex, class: "point icon", style: iconStyle, "data-lineidx": lineIdx, "data-pointidx": pointIdx, "data-xvalue": xValue, onKeyDown: (ev) => this.handleDataPointKeydown(ev), onFocus: () => (this.popoverIndex = pointIdx), onClick: (ev) => this.focusDataPointByEl(ev.target), onMouseEnter: () => (this.popoverIndex = pointIdx) }));
             }
         })));
     }

package/dist/collection/components/selects/priv-option-list/priv-option-list.css

@@ -142,5 +142,15 @@
   -moz-osx-font-smoothing: grayscale;
   content: "\f141";
   pointer-events: none;
+  padding-right: 0.5rem;
   font-size: 1.28rem;
+}
+.return-btn .return-btn-label {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+.return-btn .return-btn-label .selection-count {
+  font-weight: 400;
+  font-style: italic;
 }

package/dist/collection/components/selects/priv-option-list/priv-option-list.js

@@ -369,10 +369,21 @@ export class PrivOptionList {
         this.announcement = message;
     }
     renderReturnBtn() {
+        const selectionCount = this.childOptions.filter((o) => o.selected).length;
+        const singleSelectionCountMessage = intl.formatMessage({
+            id: "select.optgroupSingleSelectionCount",
+            defaultMessage: "Item Selected",
+            description: "Text indicating number of selected in a group, where only a single selection is possible.",
+        }, { numSelected: selectionCount });
+        const multipleSelectionCountMessage = intl.formatMessage({
+            id: "select.optgroupMultipleSelectionCount",
+            defaultMessage: "{numSelected} Selected",
+            description: "Text indicating number of selected in a group, where multiple selections are possible.",
+        }, { numSelected: selectionCount });
         return (h("button", { ref: (el) => (this.returnBtnEl = el), id: "return-btn", class: "return-btn", onKeyDown: (ev) => this.handleKeyDown(ev), onClick: () => {
                 //@ts-ignore -- Check out this one weird trick TypeScript doesn't want you to know about
                 this.el.getRootNode().host.isExpanded = false;
-            } }, this.optgroupLabel));
+            } }, h("div", { class: "return-btn-label" }, this.optgroupLabel, selectionCount > 0 && (h("span", { class: "selection-count" }, this.multiple ? multipleSelectionCountMessage : singleSelectionCountMessage)))));
     }
     renderSearchField() {
         return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",

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

@@ -30,12 +30,24 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 wm-modal-pss-footer {
+  -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;
   margin-top: -1px;
 }
 wm-modal-pss-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) {

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class ModalFooter {
+export class ModalPssFooter {
     constructor() {
         this.secondaryText = "";
         this.primaryText = "";

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

@@ -30,12 +30,24 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 wm-modal-pss-header {
+  -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;
   margin-bottom: -1px;
 }
 wm-modal-pss-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-pss-header .wm-wrapper .title {

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-export class ModalHeader {
+import { globalMessages } from "../../global/intl";
+export class ModalPssHeader {
     constructor() {
         this.heading = "";
         this.subheading = "";
@@ -24,7 +25,7 @@ export class ModalHeader {
     //   this.headingElement.focus();
     // }
     render() {
-        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: "Close", "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "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() }))));
     }
     static get is() { return "wm-modal-pss-header"; }
     static get originalStyleUrls() {

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

@@ -34,8 +34,17 @@ wm-modal-pss {
   --wmcolor-modal-border: var(--wmcolor-border);
   --wmcolor-modal-heading: var(--wmcolor-text);
   --wmcolor-modal-overlay: var(--wmcolor-overlay);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   flex-direction: column;
   position: fixed;
@@ -46,6 +55,8 @@ wm-modal-pss {
   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);
+  -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-pss * {
@@ -61,7 +72,7 @@ wm-modal-pss > *:focus {
 }
 wm-modal-pss wm-modal-pss-header,
 wm-modal-pss wm-modal-pss-footer {
-  padding: 20px 30px;
+  padding: 1.25rem 1.875rem;
 }
 wm-modal-pss wm-modal-pss-header {
   z-index: 2003;
@@ -96,7 +107,7 @@ wm-modal-pss.wm-modal wm-modal-pss-footer {
   }
 }
 wm-modal-pss.wm-dialog > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
-  padding: 0 30px 20px 30px;
+  padding: 0 1.875rem 1.25rem 1.875rem;
   font-size: 0.875rem;
   border: none;
 }
@@ -112,6 +123,9 @@ wm-modal-pss .overlay {
   right: 1;
   transform: translate(0%, 0%);
   background-color: var(--wmcolor-modal-overlay);
+  -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;
   z-index: 2000;
 }