globuswebcomponents 0.3.6 → 0.3.8

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

@@ -0,0 +1,603 @@
+import { h, Fragment, getAssetPath } from "@stencil/core";
+export class GbSidebar {
+    constructor() {
+        this.state = undefined;
+        this.category = undefined;
+        this.showSecondCategory = false;
+        this.applicationName = '';
+        this.firstItemIcon = '';
+        this.secondItemIcon = '';
+        this.thirdItemIcon = '';
+        this.fourthItemIcon = '';
+        this.fifthItemIcon = '';
+        this.sixthItemIcon = '';
+        this.seventhItemIcon = '';
+        this.eighthItemIcon = '';
+        this.ninthItemIcon = '';
+        this.tenthItemIcon = '';
+        this.iconInstance = '';
+        this.label = '';
+        this.firstItemLabel = '';
+        this.secondItemLabel = '';
+        this.thirdItemLabel = '';
+        this.fourthItemLabel = '';
+        this.fifthItemLabel = '';
+        this.sixthItemLabel = '';
+        this.seventhItemLabel = '';
+        this.eighthItemLabel = '';
+        this.ninthItemLabel = '';
+        this.tenthItemLabel = '';
+        this.activeIndex = 0;
+        this.leadingIconSvg = '';
+    }
+    async loadIcon(iconName) {
+        const iconPath = getAssetPath(`${iconName}`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        this.leadingIconSvg = svg;
+    }
+    collapseSideBar() {
+        if (this.state === 'expanded') {
+            this.state = 'collapsed';
+        }
+    }
+    expandSideBar() {
+        if (this.state === 'collapsed') {
+            this.state = 'expanded';
+        }
+    }
+    async sideBarItemClicked(index) {
+        this.activeIndex = index;
+        this.sidebarItemClicked.emit(index);
+    }
+    componentDidLoad() {
+        const applicationName = this.el.querySelector('[slot="application_name"]');
+        applicationName.classList.add('text-lg-bold');
+    }
+    componentWillLoad() {
+        this.loadIcon(this.iconInstance);
+    }
+    render() {
+        const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';
+        return (h("div", { key: 'a067fab58eb07efdbc3cddea054978ac8cfeb3b9', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: 'cc0440a14fae0764686fdd5a6650854f80df4796', class: "pattern" }, h("img", { key: 'bae5ace6039fe0e0f509d61d754c6e72e9d5db7c', src: "build/assets/pattern_wrapper.svg", alt: "" }))), h("div", { key: 'd3538bec47ee111010037e052da5a82762ca1034', class: "nav" }, h("div", { key: 'e1a495ae5a86d381655f15c44d365fa0cd72cd14', class: `sidebar_header ${this.state}` }, h("div", { key: 'c611ae3402e16f914216e1fc21e4ff2bfa4a0cfd', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && (h(Fragment, null, this.category === 'plain_background' ? h("img", { src: "build/assets/globus_bank_logo_blue.svg" }) : h("img", { src: "build/assets/globus_bank_logo_white.svg" }))), this.state === 'collapsed' && h("img", { key: '8069e3acde4d73742fdd188f2a2e75a1760eb746', src: "build/assets/globus_bank_logo.svg", alt: "" })), h("div", { key: '82e5b1b9125d27c66182b383f8efff7c14ab4313', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '702d2597d4cc56499ee6990334f1e05e64a06a9b', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'a3153cfbcf42ad827de648c9685e827edc8ab8f2', class: "navigation" }, h("div", { key: '8e4ad6ab97681f9f83fbbb6dd6ba81d77a93bd5c', class: "item" }, h("gb-side-bar-item", { key: 'cec2d0454f17793ebf35f19d894c817bab047166', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-side-bar-item", { key: 'ea1c7c863d85e1528c036951f0802f1af4860144', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-side-bar-item", { key: 'e57d077360dd9a2b266fc5836ff5f9ecdcdab022', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-side-bar-item", { key: '3a39d6ef3233339c01cf74fff6ebc362665811f4', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-side-bar-item", { key: '1128a2452802972509f98124d546a50db922947b', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: '625fffcd3e37812527f2dfe67b4715c5342702e7', class: "navigation" }, h("div", { key: '42d33441f642a62ba976ab9dbbe0ff417ba25aca', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: 'dad3fae2de2f1963b24dad397113dcfb04f5a9c2', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-side-bar-item", { key: 'b57a4595c9f399bfaf4f0f8dc800c93716a76ad4', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-side-bar-item", { key: 'f27bd7882dd5fe8557ceda63cdecb603c2984b36', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-side-bar-item", { key: '25f905567be3f8b4045c6dcff3bef5342d85b975', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-side-bar-item", { key: '4749be84e1169d3d4ad2de5811ef5c05a7f25907', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: 'cc8f7380f6cac5ae780f61ea950fcbc5d9868f87', class: "application_name" }, h("div", { key: 'b4cbf3e193608521cb1b3f553554089af3b18bfb', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '142df5484a229eb08b5b6c253dde6e0bce9d90c1', class: "application_name_pattern" }, h("img", { key: 'f095748e80fc46c6d46b5f36fe5dad749a8cc2b5', src: "build/assets/pattern_wrapper.svg", alt: "" }))), h("div", { key: '779e959615e0be2071fe210c9fe147e4f57cac5f', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: '524781238e9abb8f79d438bfd144ff9e28aa0e7e', class: textClass }, h("slot", { key: '61a9f5511562596334a7ab6148ca0a3f807f3b97', name: "application_name" })))))));
+    }
+    static get is() { return "gb-sidebar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-sidebar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-sidebar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'expanded' | 'collapsed'",
+                    "resolved": "\"collapsed\" | \"expanded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralBackgroundCategories",
+                    "resolved": "\"colored_background\" | \"plain_background\"",
+                    "references": {
+                        "GeneralBackgroundCategories": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralBackgroundCategories"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "category",
+                "reflect": false
+            },
+            "showSecondCategory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-second-category",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "applicationName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "application-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "firstItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "first-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "second-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "thirdItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "third-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fourthItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fourth-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fifthItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fifth-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "sixthItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sixth-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "seventhItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "seventh-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "eighthItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "eighth-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "ninthItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "ninth-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "tenthItemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tenth-item-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "iconInstance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-instance",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "firstItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "first-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "second-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "thirdItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "third-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fourthItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fourth-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fifthItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fifth-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "sixthItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sixth-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "seventhItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "seventh-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "eighthItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "eighth-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "ninthItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "ninth-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "tenthItemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tenth-item-label",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeIndex": {},
+            "leadingIconSvg": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sidebarItemClicked",
+                "name": "sidebarItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "sideBarItemClicked": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-sidebar.js","sourceRoot":"","sources":["../../../src/components/gb-sidebar/gb-sidebar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Fragment, State, getAssetPath, Method, Event, EventEmitter } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-sidebar',\r\n  styleUrl: 'gb-sidebar.css',\r\n  shadow: true,\r\n})\r\nexport class GbSidebar {\r\n  @Prop({ mutable: true }) state: 'expanded' | 'collapsed';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showSecondCategory: boolean = false;\r\n  @Prop() applicationName: string = '';\r\n  @Prop() firstItemIcon: string = '';\r\n  @Prop() secondItemIcon: string = '';\r\n  @Prop() thirdItemIcon: string = '';\r\n  @Prop() fourthItemIcon: string = '';\r\n  @Prop() fifthItemIcon: string = '';\r\n  @Prop() sixthItemIcon: string = '';\r\n  @Prop() seventhItemIcon: string = '';\r\n  @Prop() eighthItemIcon: string = '';\r\n  @Prop() ninthItemIcon: string = '';\r\n  @Prop() tenthItemIcon: string = '';\r\n  @Prop() iconInstance: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() firstItemLabel: string = '';\r\n  @Prop() secondItemLabel: string = '';\r\n  @Prop() thirdItemLabel: string = '';\r\n  @Prop() fourthItemLabel: string = '';\r\n  @Prop() fifthItemLabel: string = '';\r\n  @Prop() sixthItemLabel: string = '';\r\n  @Prop() seventhItemLabel: string = '';\r\n  @Prop() eighthItemLabel: string = '';\r\n  @Prop() ninthItemLabel: string = '';\r\n  @Prop() tenthItemLabel: string = '';\r\n  @Element() el: HTMLElement;\r\n  @State() activeIndex: number = 0;\r\n  @State() leadingIconSvg: string = '';\r\n  @Event() sidebarItemClicked: EventEmitter<number>;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  collapseSideBar() {\r\n    if (this.state === 'expanded') {\r\n      this.state = 'collapsed';\r\n    }\r\n  }\r\n\r\n  expandSideBar() {\r\n    if (this.state === 'collapsed') {\r\n      this.state = 'expanded';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async sideBarItemClicked(index: number) {\r\n    this.activeIndex = index;\r\n    this.sidebarItemClicked.emit(index);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n    applicationName.classList.add('text-lg-bold');\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconInstance);\r\n  }\r\n\r\n  render() {\r\n    const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';\r\n\r\n    return (\r\n      <div class={`sidebar_div ${this.state} ${this.category}`}>\r\n        {this.category === 'colored_background' && (\r\n          <div class=\"pattern\">\r\n            <img src=\"build/assets/pattern_wrapper.svg\" alt=\"\" />\r\n          </div>\r\n        )}\r\n        <div class=\"nav\">\r\n          <div class={`sidebar_header ${this.state}`}>\r\n            <div class={`logo_and_name ${this.state}`}>\r\n              {this.state === 'expanded' && (\r\n                <>{this.category === 'plain_background' ? <img src=\"build/assets/globus_bank_logo_blue.svg\" /> : <img src=\"build/assets/globus_bank_logo_white.svg\" />}</>\r\n              )}\r\n              {this.state === 'collapsed' && <img src=\"build/assets/globus_bank_logo.svg\" alt=\"\" />}\r\n            </div>\r\n            <div class={`collapse_button ${this.state}`}>\r\n              <gb-collapse-button\r\n                color={this.category === 'plain_background' ? 'gray' : 'white'}\r\n                action={this.state === 'collapsed' ? 'expand' : 'collapse'}\r\n                onClick={() => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar())}\r\n              ></gb-collapse-button>\r\n            </div>\r\n          </div>\r\n          <div class=\"navigation\">\r\n            <div class=\"item\">\r\n              <gb-side-bar-item\r\n                state={this.activeIndex === 0 ? 'active' : 'default'}\r\n                icon={this.firstItemIcon}\r\n                category={this.category}\r\n                type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                onClick={() => this.sideBarItemClicked(0)}\r\n                label={this.firstItemLabel}\r\n              ></gb-side-bar-item>\r\n              <gb-side-bar-item\r\n                state={this.activeIndex === 1 ? 'active' : 'default'}\r\n                icon={this.secondItemIcon}\r\n                category={this.category}\r\n                type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                onClick={() => this.sideBarItemClicked(1)}\r\n                label={this.secondItemLabel}\r\n              ></gb-side-bar-item>\r\n              {this.thirdItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 2 ? 'active' : 'default'}\r\n                  icon={this.thirdItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(2)}\r\n                  label={this.thirdItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n              {this.fourthItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 3 ? 'active' : 'default'}\r\n                  icon={this.fourthItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(3)}\r\n                  label={this.fourthItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n              {this.fifthItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 4 ? 'active' : 'default'}\r\n                  icon={this.fifthItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(4)}\r\n                  label={this.fifthItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {this.showSecondCategory && (\r\n            <div class=\"navigation\">\r\n              <div class=\"item\">\r\n                {this.sixthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 5 ? 'active' : 'default'}\r\n                    icon={this.sixthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(5)}\r\n                    label={this.sixthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.seventhItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 6 ? 'active' : 'default'}\r\n                    icon={this.seventhItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(6)}\r\n                    label={this.seventhItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.eighthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 7 ? 'active' : 'default'}\r\n                    icon={this.eighthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(7)}\r\n                    label={this.eighthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.ninthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 8 ? 'active' : 'default'}\r\n                    icon={this.ninthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(8)}\r\n                    label={this.ninthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.tenthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 9 ? 'active' : 'default'}\r\n                    icon={this.tenthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(9)}\r\n                    label={this.tenthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.state === 'expanded' && (\r\n          <div class=\"application_name\">\r\n            <div class={`wrapper ${this.category}`}>\r\n              {this.category === 'plain_background' && (\r\n                <div class=\"application_name_pattern\">\r\n                  <img src=\"build/assets/pattern_wrapper.svg\" alt=\"\" />\r\n                </div>\r\n              )}\r\n              <div class={`application_icon ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n              <span class={textClass}>\r\n                <slot name=\"application_name\"></slot>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}