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

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

@@ -27,7 +27,7 @@ export class ModalPssFooter {
         parentModal.emitSecondaryEvent();
     }
     render() {
-        return (h("div", { key: 'c99407e9c7ad10c50dd6dd432e0d3239b7c994df', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '5ca392ca93d1ffac8a230c319220519ec0dc3a2d', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'c220ee0896616b8134018bbdff9e7711751d0397', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '302211029eb93c2808826f286b27542bca4490b6', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '224cb3bd0f006372b88952f8c1585edc75be993c', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+        return (h("div", { key: '1f7745220c7ad6d0aca3efd4b3cb8c334e680127', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '88168cdc61009781665a8a9edf365fa67907a770', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '2f2314c0cb6160b86e3ce361fd3a8536e06ad154', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '8cd98e5c43a01e42c38c54f8f9421cd20db4f34a', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '3b30db05b3a1101b6865b5986452c284f16733ef', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
     }
     static get is() { return "wm-modal-pss-footer"; }
     static get originalStyleUrls() {
@@ -44,6 +44,7 @@ export class ModalPssFooter {
         return {
             "secondaryText": {
                 "type": "string",
+                "attribute": "secondary-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -56,12 +57,14 @@ export class ModalPssFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "primaryText": {
                 "type": "string",
+                "attribute": "primary-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -74,12 +77,14 @@ export class ModalPssFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "infoText": {
                 "type": "string",
+                "attribute": "info-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -92,12 +97,14 @@ export class ModalPssFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "info-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "primaryActionDisabled": {
                 "type": "boolean",
+                "attribute": "primary-action-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -110,12 +117,14 @@ export class ModalPssFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-action-disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "deleteStyle": {
                 "type": "boolean",
+                "attribute": "delete-style",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -128,7 +137,8 @@ export class ModalPssFooter {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "delete-style",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -25,7 +25,7 @@ export class ModalPssHeader {
     //   this.headingElement.focus();
     // }
     render() {
-        return (h(Host, { key: '63e89303861f1ce98048eb433941db98c2d36e32' }, h("div", { key: '1777289f1b58fe62defafb7495d7a924079212db', class: "wm-wrapper" }, h("div", { key: '48a859d6712dae5f26b3c0bb41dd8ea40b0882f0' }, h("h2", { key: '2896aca5496c39929593aebd36b7b0bc13b3a8a2', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '31e62c779c355263f22567afb3cf395476df5ff7', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'df9c21a3db62893b43d400b0aed159896a186d44', "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() }))));
+        return (h(Host, { key: '6298c005e1a4cc648e1311138858845bb121729d' }, h("div", { key: 'af42c86d168c9c5e2e77c39816f74f8801b39e53', class: "wm-wrapper" }, h("div", { key: '23e83cea157490d8db35b6f5b94e4aec59adccef' }, h("h2", { key: 'a2c95748bc7296ba241a1e0c6a6db7316d8c20de', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '0aefd7af87247f19ee926ef097f4ea8f76d49faf', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1a74cb3f9beb7f01a60ae686ac01659a1d8ca23c', "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() {
@@ -42,6 +42,7 @@ export class ModalPssHeader {
         return {
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -54,12 +55,14 @@ export class ModalPssHeader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "heading",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "subheading": {
                 "type": "string",
+                "attribute": "subheading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -72,7 +75,8 @@ export class ModalPssHeader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "subheading",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

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

@@ -3,11 +3,10 @@ import { checkForActiveElInShadow } from "../../global/functions";
 import { generateId } from "../../global/functions";
 export class ModalPss {
     constructor() {
-        this.bodyFocusListener = () => this.redirectFocusFromBody();
         this.open = false;
-        this.elementToFocus = "";
+        this.elementToFocus = ""; // primary and secondary point to the corresponding buttons, otherwise focus based on element id
         this.modalType = "modal";
-        this.uid = undefined;
+        this.bodyFocusListener = () => this.redirectFocusFromBody();
     }
     get focusOnOpenEl() {
         let customElementToFocus = null;
@@ -112,9 +111,9 @@ export class ModalPss {
         }
     }
     render() {
-        return (h(Host, { key: '01cbfca5fef86d2177b2156d39ddc94616fc745e', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
+        return (h(Host, { key: 'bcd5fb7bf017cb1a5263e51a105fab47cb268bdf', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
                 this.focusLastElement.emit();
-            } }, h("div", { key: '61d3b91a5bc6f68c0358d1d23fa2a45a059a1cf7', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'ba39c5a0733ea1e6367299a71aecf73d5a07b0da', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { key: '2398829034757b569a1f4f754ba46697f72b70e0', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '06975360afd821c91ab816a2585f89f3c9b36565', class: "sr-only", tabIndex: 0, onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }
@@ -133,6 +132,7 @@ export class ModalPss {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -145,12 +145,14 @@ export class ModalPss {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "elementToFocus": {
                 "type": "string",
+                "attribute": "element-to-focus",
                 "mutable": true,
                 "complexType": {
                     "original": "\"primary\" | \"secondary\" | string",
@@ -163,12 +165,14 @@ export class ModalPss {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "element-to-focus",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "modalType": {
                 "type": "string",
+                "attribute": "modal-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"modal\" | \"dialog\"",
@@ -181,12 +185,14 @@ export class ModalPss {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "modal-type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "\"modal\""
             },
             "uid": {
                 "type": "string",
+                "attribute": "uid",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -199,7 +205,8 @@ export class ModalPss {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "uid",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -2,14 +2,13 @@ import { h, Host } from "@stencil/core";
 import { intl, showTooltip, hideTooltip } from "../../global/functions";
 export class NavigationHamburger {
     constructor() {
+        this.isTabbing = false;
+        this.open = false;
         this.showNavMessage = intl.formatMessage({
             id: "navigation.showNavigation",
             defaultMessage: "Show navigation",
             description: "For user interface element opening a navigation menu",
         });
-        this.navId = undefined;
-        this.isTabbing = false;
-        this.open = false;
     }
     toggleTabbingOn() {
         this.isTabbing = true;
@@ -34,7 +33,7 @@ export class NavigationHamburger {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { key: '8adc5bb2b8ae09774e3ccedb46658e7b9942dae1', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '338ceadf1b7f697ddf9e01f80b9a673c8632730c', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: '1e5f197e63d06e2ed52dff57e395b649851a1d0e', class: "svg-icon svg-menu" }))));
+        return (h(Host, { key: '2b4f6528c7ef852581d56121e8269a12129c8c1a', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'aa6041f59f4333b6ee68da53bfc7206d2733f059', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: '6b58e7ef3f124ba2fc33437e183a9e60844a8cdc', class: "svg-icon svg-menu" }))));
     }
     static get is() { return "wm-navigation-hamburger"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +52,7 @@ export class NavigationHamburger {
         return {
             "navId": {
                 "type": "string",
+                "attribute": "nav-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -65,7 +65,8 @@ export class NavigationHamburger {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "nav-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -1,12 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class NavigationItem {
-    constructor() {
-        this.href = undefined;
-        this.text = undefined;
-        this.active = undefined;
-    }
     render() {
-        return (h(Host, { key: '604abe4629c0b3a2928c7d73379578d767a0decf', role: "listitem" }, h("a", { key: '7dd1a2450f12817d8bf848ee6e96e6cbbc7249b5', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '7e7aa35f823f3b6fe4898461f083756f8e89a11f', class: "icon", "aria-hidden": "true" }, h("slot", { key: 'a3f841d593124634af25763863794f5a854d6c3d' })), h("div", { key: '7ccd3d9ae4f2238e1428edd1c7c221d320493e31', class: "text" }, this.text))));
+        return (h(Host, { key: 'fa0d860cef87f2af8b3c8ed67b37a2eafd4229c9', role: "listitem" }, h("a", { key: '192898896ee4310c0fb741d8bf5ebe27e57ab8b3', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'b0df43e4aaa9786b2d8e57fbeb766eb5cf348336', class: "icon", "aria-hidden": "true" }, h("slot", { key: 'dd4b646b3b48155163c8816344f3c947eb58403a' })), h("div", { key: 'a195cc9d6dc724553a9240896cddcfadceb7424c', class: "text" }, this.text))));
     }
     static get is() { return "wm-navigation-item"; }
     static get encapsulation() { return "shadow"; }
@@ -25,6 +20,7 @@ export class NavigationItem {
         return {
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -37,11 +33,13 @@ export class NavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "href",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -54,11 +52,13 @@ export class NavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -71,7 +71,8 @@ export class NavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -3,13 +3,13 @@ import { intl, throttle } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Navigation {
     constructor() {
+        this.open = false;
         this.mainNavigationMessage = intl.formatMessage({
             id: "navigation.mainNavigation",
             defaultMessage: "Main",
             description: "Label describing the site navigation, for screen reader users",
         });
         this.throttledRerender = throttle(() => forceUpdate(this.el), 50);
-        this.open = false;
     }
     get isCollapsible() {
         return window.innerWidth < 1024;
@@ -96,9 +96,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { key: '2814317e9df5355d6aa44cc1df266dfd3f2b3590', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '70c9225e6199aed113b4728f34afabf3c151ddb1', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '07ee2a1c4de3577e03969f7b1090524eb828044f', class: "tray" }, h("div", { key: 'fafec1a0a6b8b56cfc9c90f03e3b78ac068537cd', class: "toggle-wrapper" }, h("wm-button", { key: 'ebc0b699a4ffa1076f0e6bd73d47d216876192d0', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { key: '4f3c6aaf5ad09e2274456a581f3cb5f1600eaac7', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '8bf94a53146229835eaec0aaf98e951b43ac799b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'f76c5e0e70f98a4e5fa29e49509c879bac0292bf', class: "tray" }, h("div", { key: 'cfdfd3274efc3b99b0537ea7ca9bffa4f87d7b59', class: "toggle-wrapper" }, h("wm-button", { key: '96b6aa456c319bfa77d2180209c1175647404f5a', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), h("ul", { key: '718647b0231b179e00c36545e8bc630535c15c41', class: "navlist" }, h("slot", { key: 'fcefea770f648abb858777aab111063e04bf6aac' }))), this.isCollapsible && (h("div", { key: '62559136e2753cbbe613f7e23d9914af090b0f1f', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: '342b7a1980f6d9d978405a8c5574ef45fca49ce4', class: "navlist" }, h("slot", { key: '33d14865bb6c4d9602769344916d7d88ecbfa661' }))), this.isCollapsible && (h("div", { key: '4d600f2eb2525ce3238dd09e102063d448ef8526', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get is() { return "wm-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -117,6 +117,7 @@ export class Navigation {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -129,7 +130,8 @@ export class Navigation {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -9,7 +9,7 @@ export class PrivNavigatorButton {
     }
     render() {
         const { handleClick, altText } = this;
-        return (h("button", { key: '9d52ef2d181f38e3ee6ebc418e13f6760f5f5467', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { key: '2f1ba167d864c88cbbd1f8f5f6192ba024fbb961', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
     }
     static get is() { return "priv-navigator-button"; }
     static get encapsulation() { return "shadow"; }
@@ -28,6 +28,7 @@ export class PrivNavigatorButton {
         return {
             "expanded": {
                 "type": "boolean",
+                "attribute": "expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -40,12 +41,14 @@ export class PrivNavigatorButton {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "expanded",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "altText": {
                 "type": "string",
+                "attribute": "alt-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -58,7 +61,8 @@ export class PrivNavigatorButton {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "alt-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

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

@@ -16,7 +16,7 @@ export class PrivNavigatorItem {
     render() {
         const selectedClass = this.selected ? "selected" : "";
         const focusedClass = this.focused ? "focused" : "";
-        return (h("div", { key: '69ada1c549c3ac13aadcff7344161da84bd9d456', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: 'ad2a5ffde366484618d918f064b728e4f0caecb3' })));
+        return (h("div", { key: 'd79d559b7d56f0411ed7a2949c841df1975ed626', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '5004ab186708dca16f92e1b71bdd6c95d1080b7d' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }
@@ -34,6 +34,7 @@ export class PrivNavigatorItem {
         return {
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -46,12 +47,14 @@ export class PrivNavigatorItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focused": {
                 "type": "boolean",
+                "attribute": "focused",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -64,12 +67,14 @@ export class PrivNavigatorItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "focused",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "link": {
                 "type": "string",
+                "attribute": "link",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -82,7 +87,8 @@ export class PrivNavigatorItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "link",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

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"
             }