globuswebcomponents 2.5.1 → 2.5.2

package/dist/collection/components/gb-header/gb-header.js

@@ -1,4 +1,4 @@
-import { getAssetPath, h, Fragment } from "@stencil/core";
+import { getAssetPath, h } from "@stencil/core";
 import { StateEnum } from "../../models/reusableModels";
 export class GbHeader {
     constructor() {
@@ -10,9 +10,79 @@ export class GbHeader {
         this.showNotification = false;
         this.showHelp = false;
         this.showLogo = false;
+        this.logo = '';
         this.showSearch = false;
         this.inputPlaceholder = '';
         this.inputIcon = '';
+        this.avatarDropdownType = 'simple';
+        this.listGroupOne = [
+        // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },
+        // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },
+        // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },
+        ];
+        this.listGroupTwo = [
+        // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },
+        // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },
+        // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },
+        ];
+        this.showThemeTab = true;
+        this.showProfile = true;
+        this.showRoles = false;
+        this.roles = [
+        // {
+        //   badgeLabel: 'Initiator',
+        //   badgeColor: 'information',
+        //   badgeType: 'badge_color',
+        // },
+        // {
+        //   badgeLabel: 'Authorizer',
+        //   badgeColor: 'success',
+        //   badgeType: 'badge_color',
+        // },
+        // {
+        //   badgeLabel: 'Viewer',
+        //   badgeColor: 'gray',
+        //   badgeType: 'badge_color',
+        // },
+        ];
+        this.showLogOut = false;
+        this.showLogError = false;
+        this.notifications = [
+        // {
+        //   label: 'Flagged transaction',
+        //   time: 'Just now',
+        //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
+        // },
+        // {
+        //   label: 'Flagged transaction',
+        //   time: 'Just now',
+        //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
+        // },
+        // {
+        //   label: 'Flagged transaction',
+        //   time: 'Just now',
+        //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
+        // },
+        // {
+        //   label: 'Flagged transaction',
+        //   time: 'Just now',
+        //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
+        // },
+        // {
+        //   label: 'Flagged transaction',
+        //   time: 'Just now',
+        //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
+        // },
+        ];
+        this.avatarDropdownShown = false;
+        this.notificationDropdownShown = false;
+        this.helpDropdownShown = false;
+        this.initials = '';
     }
     applyColorToInitials() {
         switch (this.color) {
@@ -36,26 +106,47 @@ export class GbHeader {
         this.inputValueChanged.emit(item.detail);
     }
     componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside);
         const initials = this.el.querySelector("[slot='initials']");
         if (initials) {
             initials.classList.add('text-md-semi-bold');
             initials.classList.add(this.applyColorToInitials());
+            console.log(initials.textContent);
+            this.initials = initials.textContent;
         }
     }
-    async onNavBarItemClicked(item) {
-        // console.log('nav-bar-item clicked');
-        this.navBarItemClicked.emit(item);
-        // console.log(index);
+    helpDropdownItemClicked(item) {
+        this.helpItemClicked.emit(item.detail);
     }
-    async onMenuClicked() {
-        this.menuClicked.emit();
+    onThemeTabClicked(tab) {
+        this.themeTabClicked.emit(tab.detail);
+    }
+    onAvatarDropdownItemClicked(item) {
+        console.log(item.detail);
+        this.avatarDropdownItemClicked.emit(item.detail);
+    }
+    onNotificationDropdownItemClicked(item) {
+        console.log(item.detail);
+        this.avatarDropdownItemClicked.emit(item.detail);
+    }
+    handleClickOutside(event) {
+        if (this.avatarDropdownShown && !this.el.contains(event.target)) {
+            this.avatarDropdownShown = false;
+        }
+        if (this.helpDropdownShown && !this.el.contains(event.target)) {
+            this.helpDropdownShown = false;
+        }
+        if (this.notificationDropdownShown && !this.el.contains(event.target)) {
+            this.notificationDropdownShown = false;
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
     }
     render() {
         const helpIconSrc = getAssetPath(`assets/help-circle.svg`);
         const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
-        const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);
-        const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);
-        return (h("div", { key: '2c0ca7eeb74dc062dabc17fa73dacd7cefd9da82', class: `header_div ${this.showBorder ? 'border' : ''}` }, h("div", { key: '6b76298bb5ed6bc869a675ec687726da011cd65c', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: 'e82c5f77984dba2d2db9c1adea91d732e1174359', class: "logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '2920e861d0d602f3d75b4903a28a41dd4bc45938', src: logo, alt: "" })), h("div", { key: '529ab79d1ec5d1f2459eba38f8a0d7e850211465', class: "icon_logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '7d39a86be4899fafd194da3b44f06e73d79b75e8', src: iconLogo, alt: "" })))), h("div", { key: 'b23786e074437815db1f3eba69edd1189364d917', class: "inner_content" }, h("div", { key: 'e3460eb65780baca03682380388c75369a784785', class: `action` }, this.showSearch && (h("div", { key: '299b7c33e24e7f877f83a71a46add441fde903af', class: "search" }, h("gb-input-field", { key: '175651d4ae9dc255395036c8a67483f0978e0a5c', size: "sm", state: "default", type: "icon_leading", placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), this.showHelp && h("gb-header-icon", { key: 'ffdf0ffb0a97c9b534614ed99130cf529083c508', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked('help') }), this.showNotification && (h("gb-header-icon", { key: '35a3d5e8415de7c03f77d7049664a49304204a43', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked('notification') }))), h("gb-avatar", { key: 'ea0b01636613a25db6476f5540c6b40f4b125a57', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
+        return (h("div", { key: '74c36f510e8795761b1ddc822dc25ccf14ebdd44', class: `header_div ${this.showBorder ? 'border' : ''}` }, h("div", { key: '87f845392b756b2083d3c2cb567ea584dfa5bd01', class: "content" }, h("slot", { key: 'cd2bb98915bc70e10d63cb85d2012aa8a8cc5a13', name: "logo" }), h("div", { key: '705f475c37f1a4d07929ff844dd91a591d803ebf', class: "inner_content" }, h("div", { key: '57d0e7158d20875834d1a9e38a0f94f249f91edb', class: `action` }, this.showSearch && (h("div", { key: 'b50892eed8f9d82041307013aad40bab576ef1e5', class: "search" }, h("gb-input-field", { key: 'e6ef1b03a18ec28c4598045272d003ee46b920f7', size: "sm", state: "default", type: "icon_leading", placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), this.showHelp && h("gb-header-icon", { key: 'f2694b5fd111c1ab54b6d3167d7355e0f6b82178', state: StateEnum.Default, icon: helpIconSrc, onClick: () => (this.helpDropdownShown = !this.helpDropdownShown) }), this.showNotification && (h("gb-header-icon", { key: 'ca37625f8917727429500a02eeb7e5f5f7d319d5', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => (this.notificationDropdownShown = !this.notificationDropdownShown) }))), h("gb-avatar", { key: 'da8ce87bd285fc4f450a5cf9c34ef2fe3d2663e6', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => (this.avatarDropdownShown = !this.avatarDropdownShown) }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" })), this.avatarDropdownShown && (h("gb-avatar-dropdown", { key: '89aefffca15f5c0a03499444d498911cc9491c1f', ref: el => (this.avatarDropdown = el), class: "avatar_dropdown", type: this.avatarDropdownType, "show-theme-tab": this.showThemeTab, "show-profile": this.showProfile, "show-log-out": this.showLogOut, listGroupOne: this.listGroupOne, listGroupTwo: this.listGroupTwo, color: this.color, roles: this.roles, "show-roles": this.showRoles, "current-theme": "light", onThemeTabClicked: this.onThemeTabClicked.bind(this), onItemClicked: this.onAvatarDropdownItemClicked.bind(this) }, h("slot", { key: '31881c4f1fd2ed968c663ea9c5b5eed3e231ddbe', slot: "name", name: "name" }), h("slot", { key: '293ed5cfc86493a9c3813d2f7fb2f2c7e69b38bb', slot: "supporting_text", name: "supporting_text" }), h("h1", { key: '745b4df2b7171bac7f6e961e1d19d50d07ca3399', slot: "initials", class: `text-md-semi-bold` }, this.initials))), this.notificationDropdownShown && (h("gb-notification-pane", { key: '91bee0d7e9f67a614b460502497644bdf0068a2d', state: this.notificationState, class: "notification_dropdown", notifications: this.notifications }, h("p", { key: 'f6e5fd9636792dcb0f674c09596ace4924da80b7', slot: "label" }, "No notification"), h("p", { key: '1818544cc28522b26a7f6cc5a9de5d2dcf558911', slot: "supporting_text" }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events"))), this.helpDropdownShown && (h("gb-help-dropdown", { key: 'd87f042ae1a886e411b86ccbc64ec7ff66a58682', class: "help_dropdown", "show-log-error": this.showLogError, onHelpItemClicked: this.helpDropdownItemClicked.bind(this) }))))));
     }
     static get is() { return "gb-header"; }
     static get encapsulation() { return "shadow"; }
@@ -262,6 +353,26 @@ export class GbHeader {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "logo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "logo",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "showSearch": {
                 "type": "boolean",
                 "mutable": false,
@@ -321,9 +432,252 @@ export class GbHeader {
                 "attribute": "input-icon",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "avatarDropdownType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'simple' | 'complex'",
+                    "resolved": "\"complex\" | \"simple\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "avatar-dropdown-type",
+                "reflect": false,
+                "defaultValue": "'simple'"
+            },
+            "listGroupOne": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownListGroup[]",
+                    "resolved": "DropdownListGroup[]",
+                    "references": {
+                        "DropdownListGroup": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownListGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n  ]"
+            },
+            "listGroupTwo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownListGroup[]",
+                    "resolved": "DropdownListGroup[]",
+                    "references": {
+                        "DropdownListGroup": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownListGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n  ]"
+            },
+            "showThemeTab": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-theme-tab",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showProfile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-profile",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showRoles": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-roles",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "roles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownRoles[]",
+                    "resolved": "DropdownRoles[]",
+                    "references": {
+                        "DropdownRoles": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownRoles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    // {\r\n    //   badgeLabel: 'Initiator',\r\n    //   badgeColor: 'information',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Authorizer',\r\n    //   badgeColor: 'success',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Viewer',\r\n    //   badgeColor: 'gray',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n  ]"
+            },
+            "showLogOut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-log-out",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showLogError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-log-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "notificationState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'empty' | 'notification_dropdown'",
+                    "resolved": "\"empty\" | \"notification_dropdown\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "notification-state",
+                "reflect": false
+            },
+            "notifications": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Notification[]",
+                    "resolved": "Notification[]",
+                    "references": {
+                        "Notification": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::Notification"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n  ]"
             }
         };
     }
+    static get states() {
+        return {
+            "avatarDropdownShown": {},
+            "notificationDropdownShown": {},
+            "helpDropdownShown": {},
+            "initials": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "navBarItemClicked",
@@ -370,33 +724,62 @@ export class GbHeader {
                     "resolved": "string",
                     "references": {}
                 }
-            }];
-    }
-    static get methods() {
-        return {
-            "onNavBarItemClicked": {
+            }, {
+                "method": "helpItemClicked",
+                "name": "helpItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
                 "complexType": {
-                    "signature": "(item: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "item",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "themeTabClicked",
+                "name": "themeTabClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
                 },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "avatarDropdownItemClicked",
+                "name": "avatarDropdownItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 }
-            }
-        };
+            }];
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=gb-header.js.map

package/dist/collection/components/gb-header/gb-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop, Fragment } from '@stencil/core';\r\nimport { ColorTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = true;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: ColorTypes = 'blue';\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop() showNotification: boolean = false;\r\n  @Prop() showHelp: boolean = false;\r\n  @Prop() showLogo: boolean = false;\r\n  @Prop() showSearch: boolean = false;\r\n  @Prop() inputPlaceholder: string = '';\r\n  @Prop() inputIcon: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<string>;\r\n  @Event() menuClicked: EventEmitter<void>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onSearch(item) {\r\n    this.inputValueChanged.emit(item.detail);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async onNavBarItemClicked(item: string) {\r\n    // console.log('nav-bar-item clicked');\r\n    this.navBarItemClicked.emit(item);\r\n    // console.log(index);\r\n  }\r\n\r\n  async onMenuClicked() {\r\n    this.menuClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n    const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n    const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n    return (\r\n      <div class={`header_div ${this.showBorder ? 'border' : ''}`}>\r\n        <div class=\"content\">\r\n          {this.showLogo && (\r\n            <>\r\n              <div class=\"logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n                <img src={logo} alt=\"\" />\r\n              </div>\r\n              <div class=\"icon_logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n                <img src={iconLogo} alt=\"\" />\r\n              </div>\r\n            </>\r\n          )}\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              {this.showSearch && (\r\n                <div class=\"search\">\r\n                  <gb-input-field\r\n                    size=\"sm\"\r\n                    state=\"default\"\r\n                    type=\"icon_leading\"\r\n                    placeholder={this.inputPlaceholder}\r\n                    icon-swap={this.inputIcon}\r\n                    onInputValueChanged={this.onSearch.bind(this)}\r\n                  ></gb-input-field>\r\n                </div>\r\n              )}\r\n              {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked('help')}></gb-header-icon>}\r\n              {this.showNotification && (\r\n                <gb-header-icon\r\n                  state={this.state}\r\n                  icon={notificationIconSrc}\r\n                  show-indicator={this.showIndicator}\r\n                  onClick={() => this.onNavBarItemClicked('notification')}\r\n                ></gb-header-icon>\r\n              )}\r\n            </div>\r\n            <gb-avatar\r\n              size=\"md\"\r\n              text={this.text}\r\n              placeholder={this.placeholder}\r\n              color={this.color}\r\n              show-border={this.showBorder}\r\n              onClick={() => this.onNavBarItemClicked('avatar')}\r\n            >\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, getAssetPath, h, Prop, State, Listen } from '@stencil/core';\r\nimport { ColorTypes, DropdownListGroup, DropdownRoles, Notification, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = true;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: ColorTypes = 'blue';\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop() showNotification: boolean = false;\r\n  @Prop() showHelp: boolean = false;\r\n  @Prop() showLogo: boolean = false;\r\n  @Prop() logo: string = '';\r\n  @Prop() showSearch: boolean = false;\r\n  @Prop() inputPlaceholder: string = '';\r\n  @Prop() inputIcon: string = '';\r\n  @Prop() avatarDropdownType: 'simple' | 'complex' = 'simple';\r\n  @Prop() listGroupOne: DropdownListGroup[] = [\r\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n  ];\r\n  @Prop() listGroupTwo: DropdownListGroup[] = [\r\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n  ];\r\n  @Prop() showThemeTab: boolean = true;\r\n  @Prop() showProfile: boolean = true;\r\n  @Prop() showRoles: boolean = false;\r\n  @Prop() roles: DropdownRoles[] = [\r\n    // {\r\n    //   badgeLabel: 'Initiator',\r\n    //   badgeColor: 'information',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Authorizer',\r\n    //   badgeColor: 'success',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Viewer',\r\n    //   badgeColor: 'gray',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n  ];\r\n  @Prop() showLogOut: boolean = false;\r\n  @Prop() showLogError: boolean = false;\r\n  @Prop() notificationState: 'empty' | 'notification_dropdown';\r\n  @Prop({ mutable: true }) notifications: Notification[] = [\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n  ];\r\n  @State() avatarDropdownShown: boolean = false;\r\n  @State() notificationDropdownShown: boolean = false;\r\n  @State() helpDropdownShown: boolean = false;\r\n  @State() initials: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<string>;\r\n  @Event() menuClicked: EventEmitter<void>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\r\n  @Event() helpItemClicked: EventEmitter<string>;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n  @Event() avatarDropdownItemClicked: EventEmitter<string>;\r\n\r\n  avatarDropdown!: HTMLElement;\r\n  notificationDropdown!: HTMLElement;\r\n  helpDropdown!: HTMLElement;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onSearch(item) {\r\n    this.inputValueChanged.emit(item.detail);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n      console.log(initials.textContent);\r\n      this.initials = initials.textContent;\r\n    }\r\n  }\r\n\r\n  helpDropdownItemClicked(item) {\r\n    this.helpItemClicked.emit(item.detail);\r\n  }\r\n\r\n  onThemeTabClicked(tab) {\r\n    this.themeTabClicked.emit(tab.detail);\r\n  }\r\n\r\n  onAvatarDropdownItemClicked(item) {\r\n    console.log(item.detail);\r\n    this.avatarDropdownItemClicked.emit(item.detail);\r\n  }\r\n\r\n  onNotificationDropdownItemClicked(item) {\r\n    console.log(item.detail);\r\n    this.avatarDropdownItemClicked.emit(item.detail);\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.avatarDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.avatarDropdownShown = false;\r\n    }\r\n\r\n    if (this.helpDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.helpDropdownShown = false;\r\n    }\r\n\r\n    if (this.notificationDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.notificationDropdownShown = false;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n    return (\r\n      <div class={`header_div ${this.showBorder ? 'border' : ''}`}>\r\n        <div class=\"content\">\r\n          {/* {this.showLogo && (\r\n          )} */}\r\n          <slot name=\"logo\"></slot>\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              {this.showSearch && (\r\n                <div class=\"search\">\r\n                  <gb-input-field\r\n                    size=\"sm\"\r\n                    state=\"default\"\r\n                    type=\"icon_leading\"\r\n                    placeholder={this.inputPlaceholder}\r\n                    icon-swap={this.inputIcon}\r\n                    onInputValueChanged={this.onSearch.bind(this)}\r\n                  ></gb-input-field>\r\n                </div>\r\n              )}\r\n              {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => (this.helpDropdownShown = !this.helpDropdownShown)}></gb-header-icon>}\r\n              {this.showNotification && (\r\n                <gb-header-icon\r\n                  state={this.state}\r\n                  icon={notificationIconSrc}\r\n                  show-indicator={this.showIndicator}\r\n                  onClick={() => (this.notificationDropdownShown = !this.notificationDropdownShown)}\r\n                ></gb-header-icon>\r\n              )}\r\n            </div>\r\n            <gb-avatar\r\n              size=\"md\"\r\n              text={this.text}\r\n              placeholder={this.placeholder}\r\n              color={this.color}\r\n              show-border={this.showBorder}\r\n              onClick={() => (this.avatarDropdownShown = !this.avatarDropdownShown)}\r\n            >\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n            {this.avatarDropdownShown && (\r\n              <gb-avatar-dropdown\r\n                ref={el => (this.avatarDropdown = el)}\r\n                class=\"avatar_dropdown\"\r\n                type={this.avatarDropdownType}\r\n                show-theme-tab={this.showThemeTab}\r\n                show-profile={this.showProfile}\r\n                show-log-out={this.showLogOut}\r\n                listGroupOne={this.listGroupOne}\r\n                listGroupTwo={this.listGroupTwo}\r\n                color={this.color}\r\n                roles={this.roles}\r\n                show-roles={this.showRoles}\r\n                current-theme=\"light\"\r\n                onThemeTabClicked={this.onThemeTabClicked.bind(this)}\r\n                onItemClicked={this.onAvatarDropdownItemClicked.bind(this)}\r\n              >\r\n                <slot slot=\"name\" name=\"name\"></slot>\r\n                <slot slot=\"supporting_text\" name=\"supporting_text\"></slot>\r\n                <h1 slot=\"initials\" class={`text-md-semi-bold`}>\r\n                  {this.initials}\r\n                </h1>\r\n              </gb-avatar-dropdown>\r\n            )}\r\n            {this.notificationDropdownShown && (\r\n              <gb-notification-pane state={this.notificationState} class=\"notification_dropdown\" notifications={this.notifications}>\r\n                <p slot=\"label\">No notification</p>\r\n                <p slot=\"supporting_text\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p>\r\n              </gb-notification-pane>\r\n            )}\r\n            {this.helpDropdownShown && (\r\n              <gb-help-dropdown class=\"help_dropdown\" show-log-error={this.showLogError} onHelpItemClicked={this.helpDropdownItemClicked.bind(this)}></gb-help-dropdown>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-header-icon/gb-header-icon.js

@@ -27,7 +27,7 @@ export class GbHeaderIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'b24c51bc9a796afa7dc2c97f4ece95762e6746fe', class: `background ${this.state}` }, h("div", { key: 'cc71a8b8fea417f7776efe3c53d6595fab4bb877', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '9a4670fbb57844e0411da206b463517799164489', class: "red_dot" }))));
+        return (h("div", { key: '301ae1b8962b76770bc7366d519b4f52dba93094', class: `background ${this.state}` }, h("div", { key: '3a26d90aaa42163b7e2f5df9aaeea418a6c3a3ed', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '569196de2ae881e734a56e9dbd5c84bd7252621d', class: "red_dot" }))));
     }
     static get is() { return "gb-header-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-help-dropdown/gb-help-dropdown.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class GbHelpDropdown {
-    async onHelpItemClicked(item) {
+    onHelpItemClicked(item) {
         this.helpItemClicked.emit(item);
     }
     render() {
-        return (h("div", { key: '13325a8364fd67f196000203a4cad1b0be7eabeb', class: "dropdown-container" }, h("div", { key: '24e563b5b76b737dfb3ae6439f85d90654e5ace3', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: '5e7566e1ea650c9616dd4aedc9215f8793eb8f65', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: '4485d36a85826ba845c074631c944c8b372495c0', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: '0932f2cc5dfaade5ac82eacf2460c5aad2606886', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: '2cb82cc1b7745f53584e85aee4a7e26d867cf49f', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: 'aaf9778fe80b9bb8e07c33c33a4a02f8267a40b3', icon: true, iconSrc: "assets/alert_02.svg", label: "Log a profile error", onClick: () => this.onHelpItemClicked('log_a_profile_error') })))));
+        return (h("div", { key: 'e13888cf1af34d7608b254af5d522c6d903b0525', class: "dropdown-container" }, h("div", { key: '935949c20a4578de3856108e023b7d500c64e78a', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: '490d0fad07e9636a31b62a810c7cf329c206dca3', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: '90c6fb9e84c453878cb25b8151e4c35a46c259bb', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: '1ee48ef696c9b9fd052c521e162b77710015e8b9', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: '5c35693e23b7b3356315801567df801e3e5239e5', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: 'c8e1d8122ab125bb4236056109d43bb6de8e591f', icon: true, iconSrc: "assets/alert_02.svg", label: "Log a profile error", onClick: () => this.onHelpItemClicked('log_a_profile_error') })))));
     }
     static get is() { return "gb-help-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -59,30 +59,5 @@ export class GbHelpDropdown {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "onHelpItemClicked": {
-                "complexType": {
-                    "signature": "(item: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "item",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
 }
 //# sourceMappingURL=gb-help-dropdown.js.map