@watermarkinsights/ripple 5.16.0-alpha.12 → 5.16.0-alpha.13

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

@@ -4,19 +4,24 @@ import { intl, snakeCaseToCamelCase, getNewIndexToFocus } from "../../global/fun
 import { getRequest } from "../../global/services/http-service";
 export class Navigator {
     constructor() {
+        this.authType = 1; // 1: none or off, 2: username-password or username_password_sso, 3: saml or saml_sso
+        // The new way is to retrieve user info from an endpoint
+        // dev needs to opt-in by setting loadFromUserinfo to true
+        this.loadFromUserinfo = false;
         // comp can check whether the info was successfully retrieved with:
         this.retrievedInfo = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed
         // used either way to store the products
         this.parsedProducts = [];
-        this.openRight = false; // whether the menu should open on the right side
-        this.userName = undefined;
-        this.email = undefined;
-        this.authType = 1;
-        this.connectionName = undefined;
-        this.logoutUrl = undefined;
-        this.products = undefined;
-        this.loadFromUserinfo = false;
+        /**
+         * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.
+         */
         this.isOpen = false;
+        this.openRight = false; // whether the menu should open on the right side
+        /**
+         * Value is set to the index of the current product on load.
+         * Keyboard navigation updates the state to keep track of focus in the dropdown.
+         * State resets to the index of the current product when the dropdown closes.
+         */
         this.itemIndexToFocus = 0;
     }
     isSafeUrl(url) {
@@ -314,6 +319,7 @@ export class Navigator {
         return {
             "userName": {
                 "type": "string",
+                "attribute": "user-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -326,11 +332,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "user-name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "email": {
                 "type": "string",
+                "attribute": "email",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -343,11 +351,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "email",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "authType": {
                 "type": "number",
+                "attribute": "auth-type",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -360,12 +370,14 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "auth-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "connectionName": {
                 "type": "string",
+                "attribute": "connection-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -378,11 +390,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "connection-name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "logoutUrl": {
                 "type": "string",
+                "attribute": "logout-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -395,11 +409,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "logout-url",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "products": {
                 "type": "string",
+                "attribute": "products",
                 "mutable": false,
                 "complexType": {
                     "original": "string | []",
@@ -412,11 +428,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "products",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "loadFromUserinfo": {
                 "type": "boolean",
+                "attribute": "load-from-userinfo",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -429,7 +447,8 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "load-from-userinfo",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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({
@@ -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.
@@ -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)));
@@ -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;
@@ -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.
@@ -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() {
@@ -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": "\"\""
             }