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

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

@@ -3,6 +3,12 @@ import { debounce, intl } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Pagination {
     constructor() {
+        this.currentPage = 1;
+        this.totalItems = undefined;
+        this.itemsPerPage = undefined;
+        this.value = 1;
+        this.isLargeSize = window.innerWidth > 600; // first estimate is based on window size, then actual measurement takes place on resize
+        this.srAnnouncement = "";
         this.totalPages = 0;
         this.navigationLabel = intl.formatMessage({
             id: "pagination.navLabel",
@@ -34,12 +40,6 @@ export class Pagination {
             }
             return coreBtns;
         };
-        this.currentPage = 1;
-        this.totalItems = undefined;
-        this.itemsPerPage = undefined;
-        this.value = 1;
-        this.isLargeSize = window.innerWidth > 600;
-        this.srAnnouncement = "";
     }
     pageButtonLabel(pageNum) {
         return intl.formatMessage({
@@ -203,7 +203,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: 'b560fdf7586a80ce3e117d74d264e56afd7de42e', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '8d35b0f1049ac65751a14d96daef2cfcd5928765', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: '4915b3425f35f85d5684893fbc82e6d6a29b9d0f', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '56b83b74efa2372e03f27ea654c808a2bb86a85b', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -222,6 +222,7 @@ export class Pagination {
         return {
             "currentPage": {
                 "type": "number",
+                "attribute": "current-page",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -234,12 +235,14 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "current-page",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "totalItems": {
                 "type": "number",
+                "attribute": "total-items",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -252,12 +255,14 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "total-items",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "itemsPerPage": {
                 "type": "number",
+                "attribute": "items-per-page",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -270,12 +275,14 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "items-per-page",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -288,12 +295,14 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "isLargeSize": {
                 "type": "boolean",
+                "attribute": "is-large-size",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -306,7 +315,8 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "is-large-size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "window.innerWidth > 600"
             }

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

@@ -3,20 +3,39 @@ import { intl, handleDisabledAttribute, toBool } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Search {
     constructor() {
-        this.linkEl = null;
         this.searchType = "basic";
         this.disabled = false;
+        /**
+         * Props required for both variants.
+         */
         this.placeholder = "";
         this.label = "";
         this.numResults = 0;
+        /**
+         * This exposes the input's value on the host component so that the app can access it.
+         */
         this.value = "";
+        /**
+         * If the user is tabbing, the search and find variant will display a link to jump to a search result.
+         */
         this.isTabbing = false;
+        /**
+         * Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,
+         * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.
+         */
         this.highlightedId = "";
         this.highlightedName = null;
+        /**
+         * Indicates which of the search results is currently highlighted. It will be displayed as "[highlightedNum] of [numResults]" next to the input in the search and find variant.
+         * This number updates as the user browses using the buttons.
+         */
         this.highlightedNum = 0;
         this.previousBlurredValue = "";
-        this.parentModal = undefined;
+        /**
+         * Live region announcement
+         */
         this.announcement = "";
+        this.linkEl = null;
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -168,10 +187,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: 'a6a5d00652d75c3f03ca996c283c0566ad229c68' }, h("div", { key: '1e7e8a9207a2ee1d5412cb2456c1c832060ac77d', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '1f36cf57bcfed0f808ef0b222d8eb65cb6518615', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: 'cd7f595a342f69a27e507f9110b1bd67ca536b14' }, h("div", { key: '613883fa806fee9b523776e2c81abcc9c7c80eaf', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '5c944cc9756d6bba9396ef768c0d26cdd4fe7b88', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: 'bf128d74c7fdbd590989d7999b1187d34b01bb31', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '9898db1a5c0c3c0e13fb32782aa98d88f124798b', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: 'd6dd15a45a5e449a5b177263e369d5016ae81a4d', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '4c3d42a0e159512713a54f99c403ca4a06549d06', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }
@@ -190,6 +209,7 @@ export class Search {
         return {
             "searchType": {
                 "type": "string",
+                "attribute": "search-type",
                 "mutable": true,
                 "complexType": {
                     "original": "\"basic\" | \"find\"",
@@ -202,12 +222,14 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "search-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"basic\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -220,12 +242,14 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -238,12 +262,14 @@ export class Search {
                     "tags": [],
                     "text": "Props required for both variants."
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -256,12 +282,14 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "numResults": {
                 "type": "number",
+                "attribute": "num-results",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -274,12 +302,14 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "num-results",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -292,12 +322,14 @@ export class Search {
                     "tags": [],
                     "text": "This exposes the input's value on the host component so that the app can access it."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "\"\""
             },
             "highlightedId": {
                 "type": "string",
+                "attribute": "highlighted-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -310,12 +342,14 @@ export class Search {
                     "tags": [],
                     "text": "Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\nso that tabbing and screen reader users can jump to this option rather than tab through the list to find it."
                 },
-                "attribute": "highlighted-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "highlightedName": {
                 "type": "string",
+                "attribute": "highlighted-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -328,7 +362,8 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "highlighted-name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
             }

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

@@ -3,18 +3,19 @@ import { generateId, hideTooltip, intl, showTooltip } from "../../global/functio
 import { globalMessages } from "../../global/intl";
 export class Snackbar {
     constructor() {
+        //Prop receives notifications as JSON string, which is later parsed into an array of objects.
+        this.notifications = "[]";
         this.parsedNotifications = [];
         this.uid = this.el.id ? this.el.id : generateId();
         this.focusOnDismiss = null;
         this.timers = {};
+        this.isTabbing = false;
+        this.announcement = "";
         this.closeSnackMessage = intl.formatMessage({
             id: "snackbar.closeNotification",
             defaultMessage: "Close this notification",
             description: "Notification refers to a notification UI element that can be dismissed",
         });
-        this.notifications = "[]";
-        this.isTabbing = false;
-        this.announcement = "";
     }
     componentDidLoad() {
         const snackObserver = new MutationObserver((snackMutations) => snackMutations.forEach((mutationRecord) => this.handleSnackMutation(mutationRecord)));
@@ -162,11 +163,11 @@ export class Snackbar {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '8c811ca49c66eccb3d4071680bccee7a7b80baf3' }, h("div", { key: '3833104505e54755fd90e25622f5e52207cd04ee', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '9b55b8fa05817c3dd826b1318c3b7fdc35d65a51' }, h("div", { key: '8debb1dfc460b20abdc86238a5850e44949364cc', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: '6d011c99adc5a69e2687014854d324d5e97e06d8', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { key: 'bd51da7d83c448ea676f4f2530dd3ad8ac529c2f', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }
@@ -184,6 +185,7 @@ export class Snackbar {
         return {
             "notifications": {
                 "type": "string",
+                "attribute": "notifications",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -196,7 +198,8 @@ export class Snackbar {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "notifications",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "\"[]\""
             }

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -1,6 +1,15 @@
 import { h, Host } from "@stencil/core";
 export class TabItem {
     constructor() {
+        /**
+         * Indicates whether the tab is currently active
+         */
+        this.selected = false;
+        this.show = true;
+        /**
+         * The id of the tab, linked to a tab panel.
+         */
+        this.tabId = "";
         this.tabClicked = (ev) => {
             ev.preventDefault();
             this.wmTabSelected.emit({ tabId: this.tabId });
@@ -16,9 +25,6 @@ export class TabItem {
                 this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
             }
         };
-        this.selected = false;
-        this.show = true;
-        this.tabId = "";
     }
     get parentTabList() {
         return this.el.parentElement;
@@ -40,7 +46,7 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { key: '1711c11246e52e27e71f30e566ab41683ee23cd4', role: "presentation" }, h("li", { key: 'f57bc99f98ff481689a68889e81c5925aa68892c', class: "tab-item", role: "presentation" }, h("a", { key: '76e051b18c17ea8367f74cc9a2b7b2b84d2ef990', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: 'e834ebba3c6c512ef7b1093d3c1ea298745fbf85' })))));
+        return (h(Host, { key: 'bcfcc1fcb3cd91456ea38458f7eb26200f27dabb', role: "presentation" }, h("li", { key: '9ece015d01a832e52af9b520695cc303a674a22e', class: "tab-item", role: "presentation" }, h("a", { key: '8b43cebd1ff8a19aa81b23db7ce0265525f79a8a', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: 'b04fa980a8eaffd3ffb64258941e943e14343cfc' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -59,6 +65,7 @@ export class TabItem {
         return {
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -71,12 +78,14 @@ export class TabItem {
                     "tags": [],
                     "text": "Indicates whether the tab is currently active"
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "show": {
                 "type": "boolean",
+                "attribute": "show",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -89,12 +98,14 @@ export class TabItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "tabId": {
                 "type": "string",
+                "attribute": "tab-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -107,7 +118,8 @@ export class TabItem {
                     "tags": [],
                     "text": "The id of the tab, linked to a tab panel."
                 },
-                "attribute": "tab-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -13,9 +13,6 @@ export class TabList {
             }
             forceUpdate(this.el);
         }, 10);
-        this.customBackground = undefined;
-        this.customPadding = undefined;
-        this.selectedTab = undefined;
     }
     /**
      * Set to true when the tab list exceeds the parent width. Component will render the menu layout.
@@ -160,7 +157,7 @@ export class TabList {
             } }, t.textContent)));
     }
     render() {
-        return h(Host, { key: '457d95719d7ab99677336d44c5bff02f5780a6af', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return h(Host, { key: 'd4a1e7380e109d5707d2215418d980a9fe319f40', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +176,7 @@ export class TabList {
         return {
             "customBackground": {
                 "type": "string",
+                "attribute": "custom-background",
                 "mutable": false,
                 "complexType": {
                     "original": "\"dark\" | \"\"",
@@ -191,11 +189,13 @@ export class TabList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "custom-background",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "customPadding": {
                 "type": "string",
+                "attribute": "custom-padding",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -208,11 +208,13 @@ export class TabList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "custom-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "selectedTab": {
                 "type": "string",
+                "attribute": "selected-tab",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -225,7 +227,8 @@ export class TabList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "selected-tab",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -2,7 +2,13 @@ import { Host, h } from "@stencil/core";
 import { generateId } from "../../../global/functions";
 export class TabPanel {
     constructor() {
+        /**
+         * Indicates whether the panel should be displayed or not.
+         */
         this.active = false;
+        /**
+         * The id of the panel, linked to a tabItem in the tablist.
+         */
         this.tabId = "";
     }
     componentWillLoad() {
@@ -12,7 +18,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: '0b7f81b627ce53b1ce496c4babd16bf74c57275c', role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: '760cc80a7e445fa0edae74157392fb49afb10fb0', role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {
@@ -29,6 +35,7 @@ export class TabPanel {
         return {
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -41,12 +48,14 @@ export class TabPanel {
                     "tags": [],
                     "text": "Indicates whether the panel should be displayed or not."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "tabId": {
                 "type": "string",
+                "attribute": "tab-id",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -59,7 +68,8 @@ export class TabPanel {
                     "tags": [],
                     "text": "The id of the panel, linked to a tabItem in the tablist."
                 },
-                "attribute": "tab-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }