globuswebcomponents 2.4.5 → 2.4.6

package/dist/cjs/gb-avatar_35.cjs.entry.js

@@ -1789,8 +1789,7 @@ const GbSidebar = class {
             applicationName.classList.add('application_name');
         }
     }
-    componentWillLoad() {
-        this.loadIcon(this.iconInstance);
+    changeTheme() {
         if (this.theme === 'system') {
             this.isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
         }
@@ -1801,15 +1800,21 @@ const GbSidebar = class {
             this.isDarkTheme = true;
         }
     }
+    componentWillLoad() {
+        this.loadIcon(this.iconInstance);
+    }
     render() {
         const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';
         const patternSrc = index.getAssetPath(`assets/pattern_wrapper.svg`);
         const logoSrc = index.getAssetPath(`assets/globus_bank_logo.svg`);
         const blueLogoSrc = index.getAssetPath(`assets/globus_bank_logo_blue.svg`);
         const whiteLogoSrc = index.getAssetPath(`assets/globus_bank_logo_white.svg`);
-        return (index.h(index.Fragment, null, this.type === 'simple' && (index.h("div", { key: 'a87351447bc40299c01b4b92d387a16a5eb32383', class: `simple_sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (index.h("div", { key: '30222fae39d47197382de0f5f9d17172852afb64', class: "pattern" }, index.h("img", { key: '1911aa4e99ee974fc00e0c3b5633ec607e947d78', src: patternSrc, alt: "" }))), index.h("div", { key: '84e741540e05803022b74936a6cccedbd4ca0f28', class: "nav" }, index.h("div", { key: '95f847326f9aa9324a56891ba7d4a8328fdac874', class: `sidebar_header ${this.state}` }, index.h("div", { key: '64326b2b79c0bb04dcb995fbe5aa52b909197638', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && (index.h(index.Fragment, null, this.category === 'plain_background' && this.isDarkTheme ? (index.h("img", { src: whiteLogoSrc })) : this.category === 'plain_background' && !this.isDarkTheme ? (index.h("img", { src: blueLogoSrc })) : (index.h("img", { src: whiteLogoSrc })))), this.state === 'collapsed' && index.h("img", { key: 'c537c7cb362958d96b7f4702de21cc6165313566', src: logoSrc, alt: "" })), index.h("div", { key: 'adbebdc33624d35f4dc23dd157163de5523287f5', class: `collapse_button ${this.state}` }, index.h("gb-collapse-button", { key: 'a79350363685674800d78f63f35cec443f53b20d', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), index.h("div", { key: '63d703845ad267f7b629bb526daf29b8e31b6d4c', class: "navigation" }, index.h("div", { key: 'e739f1f520a4e8254befac99b6a5fe143cb6fd84', class: "item" }, index.h("gb-simple-side-bar-item", { key: '53a82de2dad8c8d0917682cb1f8591f6b7040aa3', 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 }), index.h("gb-simple-side-bar-item", { key: '3d7dba749961b527c298f16f59cad0c4124f8960', 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 && (index.h("gb-simple-side-bar-item", { key: 'cd460c6cfa5e9a441722e12a285e97d155ef7380', 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 && (index.h("gb-simple-side-bar-item", { key: '6606100a540bc98915dc027e9398fdc6b2691ade', 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 && (index.h("gb-simple-side-bar-item", { key: 'df826ae14810d17ec3bc605c01b69730f4a7b438', 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 && (index.h("div", { key: '0775483000aae25d6bf5c35d7542958fdd91821c', class: "navigation" }, index.h("div", { key: 'fd1dd4ea324e4c0f92577549f459909ba5e60fd4', class: "item" }, this.sixthItemLabel && (index.h("gb-simple-side-bar-item", { key: '45ea2f8cab2613d0e8c03f1ea807cda0cb001f4f', 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 && (index.h("gb-simple-side-bar-item", { key: 'bec1a3d5732b87ac730d7a5fee79411edbbdf15e', 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 && (index.h("gb-simple-side-bar-item", { key: '01b38d0a03f3671f62bd75194ed8ee18604d5edc', 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 && (index.h("gb-simple-side-bar-item", { key: '23ada2f7ce876ea2575b7243ac97bad9c727a39e', 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 && (index.h("gb-simple-side-bar-item", { key: 'd77d4599da5c0b2748c94ad58d281bde5076bce5', 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' && (index.h("div", { key: 'fba5cc5029542df9709bd9f7a772b05cb3110c28', class: "application_name" }, index.h("div", { key: '167eaaae1469530b0bec87de7eba182cf245c5a8', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (index.h("div", { key: '4731812a9444112d37d2de592a8c51a1d747d52b', class: "application_name_pattern" }, index.h("img", { key: '8ca6cab53b91dd4b3c97cc0dba28672c721a485f', src: patternSrc, alt: "" }))), this.hasInfo ? (index.h(index.Fragment, null, index.h("div", { class: "information_header" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `help_icon ${this.category}` }, index.h("path", { opacity: "0.4", d: "M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z", fill: "var(--color-text-brandDarkBlue, #212C65)" }), index.h("path", { d: "M11.2422 17C11.2422 17.5523 11.6899 18 12.2422 18C12.7945 18 13.2422 17.5523 13.2422 17H11.2422ZM11.2422 10C10.6899 10 10.2422 10.4477 10.2422 11C10.2422 11.5523 10.6899 12 11.2422 12V10ZM12.0957 11.1464L12.8028 10.4393L12.0957 11.1464ZM11.992 7C11.4397 7 10.992 7.44772 10.992 8C10.992 8.55228 11.4397 9 11.992 9V7ZM12.001 9C12.5533 9 13.001 8.55228 13.001 8C13.001 7.44772 12.5533 7 12.001 7V9ZM23 12C23 5.92487 18.0751 1 12 1V3C16.9706 3 21 7.02944 21 12H23ZM12 1C5.92487 1 1 5.92487 1 12H3C3 7.02944 7.02944 3 12 3V1ZM1 12C1 18.0751 5.92487 23 12 23V21C7.02944 21 3 16.9706 3 12H1ZM12 23C18.0751 23 23 18.0751 23 12H21C21 16.9706 16.9706 21 12 21V23ZM11.2422 12V17H13.2422V12H11.2422ZM11.2422 12C11.3638 12 11.4531 12.0001 11.5286 12.002C11.6046 12.0039 11.6417 12.0072 11.6576 12.0094C11.6729 12.0114 11.6408 12.009 11.5864 11.9866C11.524 11.9609 11.4526 11.9176 11.3886 11.8536L12.8028 10.4393C12.5129 10.1493 12.1711 10.0604 11.9241 10.0272C11.7058 9.99788 11.4496 10 11.2422 10V12ZM13.2422 12C13.2422 11.7926 13.2443 11.5364 13.215 11.3181C13.1818 11.0711 13.0928 10.7293 12.8028 10.4393L11.3886 11.8536C11.3246 11.7896 11.2813 11.7181 11.2556 11.6558C11.2332 11.6014 11.2307 11.5693 11.2328 11.5846C11.2349 11.6005 11.2383 11.6376 11.2402 11.7136C11.2421 11.789 11.2422 11.8784 11.2422 12H13.2422ZM11.992 9H12.001V7H11.992V9Z", fill: "var(--color-text-brandDarkBlue, #212C65)" })), index.h("p", { class: `need_help ${this.category} text-lg-bold` }, "Need help?")), index.h("p", { class: `info ${this.category} text-sm-medium` }, this.email), index.h("p", { class: `info ${this.category} text-sm-medium` }, this.phoneNumber))) : (index.h(index.Fragment, null, index.h("div", { class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), index.h("span", { class: textClass }, index.h("slot", { name: "application_name" }))))))))), this.type === 'complex' && (index.h("div", { key: '79bdfdabbfef3de5e79f881c420bf0efe67e883a', class: `sidebar_and_nav ${this.state}` }, index.h("div", { key: '2d8bddf89d7391e9c6dd1660607bd293c5c1d66d', class: "nav_div" }, index.h("div", { key: 'd1f23f8780b92bac8592cea04735fa84565635b4', class: "logo_and_button" }, this.state === 'expanded' && index.h("img", { key: '255a6de54cecc06887b968e2b344ab65bf30690f', src: blueLogoSrc }), this.state === 'collapsed' && index.h("img", { key: 'f209db42872e8c6165cca5154d8e7bb4ef845970', src: logoSrc, alt: "" }), index.h("gb-collapse-button", { key: '0f76149a1cf34f64ac18c15b2bab9aabdaec34d9', color: "gray", action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), index.h("div", { key: 'e0cdbf3552ba1f5caea35ce625c20dbd40643938', class: "complex_sidebar_div" }, index.h("div", { key: '38ccc2b4869ff65a27240d2872a12dce451ea41a', class: `primary_side_menu ${this.category} ${this.navItemStyle}` }, this.category === 'colored_background' && (index.h("div", { key: '12dfd13a7d9d42dcf83de5f78a8344f4e44bf232', class: "pattern" }, index.h("img", { key: '67ebcb8e6912f6117661727501c0a2ad171dd6c9', src: patternSrc, alt: "" }))), index.h("div", { key: '2dbc899b3a3dce4c9d73588192177552c367e692', class: "primary_side_menu_container" }, Object.keys(this.complexSidebarData).map((primaryItem, index$1) => (index.h("gb-complex-primary-side-bar-item", { key: `${index$1}`, label: primaryItem, category: this.category, "item-style": this.navItemStyle, icon: this.complexSidebarData[primaryItem].icon, state: this.activePrimaryItem === primaryItem ? 'active' : 'default', onClick: () => this.handlePrimaryClick(primaryItem, index$1) }))))), index.h("div", { key: '29f52a15beff5128cc94c7669ddf9f6e291433ef', class: `secondary_side_menu ${this.category} ${this.state}` }, index.h("div", { key: '17181fb3ae81987e34be9c32f3e2b4a098b1584c', class: "sside_menu" }, this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index$1) => (index.h("gb-complex-secondary-side-bar-item", { key: `${this.activePrimaryItem}-${index$1}`, type: this.state === 'expanded' ? 'full_with_label' : 'icon_only', label: secondaryItem.label, category: this.category, icon: secondaryItem.icon, state: this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default', onClick: () => this.handleSecondaryClick(secondaryItem.label, index$1) }))))))))));
+        return (index.h(index.Fragment, null, this.type === 'simple' && (index.h("div", { key: '1c24e6e13972a1054c3cc219f1f8c96bc81f9c35', class: `simple_sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (index.h("div", { key: 'f799f20aa69a4909734c9c2e3e04f1653e096174', class: "pattern" }, index.h("img", { key: '25653554a4ba40453794591f793d38d1ed2aa135', src: patternSrc, alt: "" }))), index.h("div", { key: '24b01c27b617a3746ec22f7c68271b82fd28abe7', class: "nav" }, index.h("div", { key: '8f0dc4ba2bd24745949d6db20ad764b74c0abebf', class: `sidebar_header ${this.state}` }, index.h("div", { key: '362010ece8d27ad8d1ab6228b3d20bccdec1abd6', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && (index.h(index.Fragment, null, this.category === 'plain_background' && this.isDarkTheme ? (index.h("img", { src: whiteLogoSrc })) : this.category === 'plain_background' && !this.isDarkTheme ? (index.h("img", { src: blueLogoSrc })) : (index.h("img", { src: whiteLogoSrc })))), this.state === 'collapsed' && index.h("img", { key: 'a0e6e92d7762dd64ba3c7f480c1b1ca8b0987863', src: logoSrc, alt: "" })), index.h("div", { key: 'd97dc8fb190dbe33cbc3e9606029bb8071270985', class: `collapse_button ${this.state}` }, index.h("gb-collapse-button", { key: 'c75dec3f2a943f9f803d424665ab01d257b085e6', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), index.h("div", { key: '5407c54642e7d7d0ba263f8a24181fc3770aaba3', class: "navigation" }, index.h("div", { key: 'a8497c48ea82dd1c2f62b0f3ef84d8b2dc3d6db4', class: "item" }, index.h("gb-simple-side-bar-item", { key: 'b0ee676cf922dccdd8a0955d4ef19f337ec8a49c', 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 }), index.h("gb-simple-side-bar-item", { key: '84abd00b2fbce90c69aff4dc85c37bd7af195dc4', 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 && (index.h("gb-simple-side-bar-item", { key: '577b94e9320f7246692b3505587902a8b97c8f7b', 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 && (index.h("gb-simple-side-bar-item", { key: '8f162dd10beac4810388bac56e327df2cedae626', 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 && (index.h("gb-simple-side-bar-item", { key: '2d96b63b7a7936c0dc3c3e42be15e2f3a8c9f9fc', 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 && (index.h("div", { key: 'e662c2d8f5bb9d7c5d7ea572b0597ec75afb3d54', class: "navigation" }, index.h("div", { key: 'ca283f32d16b44e59299aa79a5690a9884bdaa0f', class: "item" }, this.sixthItemLabel && (index.h("gb-simple-side-bar-item", { key: '24a0a761580e45a6073e1d38a55db3e105991d93', 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 && (index.h("gb-simple-side-bar-item", { key: 'cdfebd44a8f01e85f228830d78dbebcbe5c4f84c', 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 && (index.h("gb-simple-side-bar-item", { key: '56a6cfac44fdd83a4415e66437032cfe29f84c44', 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 && (index.h("gb-simple-side-bar-item", { key: 'a3a9eea18e571fe099c626511cff0dc1aaf32028', 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 && (index.h("gb-simple-side-bar-item", { key: '2075731212fe1879bfa0614b7d27d0b15878a58c', 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' && (index.h("div", { key: 'c14c0b2f5abe557d2385771e75d7db9a6d3ccc46', class: "application_name" }, index.h("div", { key: 'fa0e032e97cd08fc18e7078dd4426410ef557873', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (index.h("div", { key: 'd3c5f239ef52e7b30e6840566feaa76dea5902c1', class: "application_name_pattern" }, index.h("img", { key: 'e44b6da6185b63e16baac6c91dce13e038628a33', src: patternSrc, alt: "" }))), this.hasInfo ? (index.h(index.Fragment, null, index.h("div", { class: "information_header" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `help_icon ${this.category}` }, index.h("path", { opacity: "0.4", d: "M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z", fill: "var(--color-text-brandDarkBlue, #212C65)" }), index.h("path", { d: "M11.2422 17C11.2422 17.5523 11.6899 18 12.2422 18C12.7945 18 13.2422 17.5523 13.2422 17H11.2422ZM11.2422 10C10.6899 10 10.2422 10.4477 10.2422 11C10.2422 11.5523 10.6899 12 11.2422 12V10ZM12.0957 11.1464L12.8028 10.4393L12.0957 11.1464ZM11.992 7C11.4397 7 10.992 7.44772 10.992 8C10.992 8.55228 11.4397 9 11.992 9V7ZM12.001 9C12.5533 9 13.001 8.55228 13.001 8C13.001 7.44772 12.5533 7 12.001 7V9ZM23 12C23 5.92487 18.0751 1 12 1V3C16.9706 3 21 7.02944 21 12H23ZM12 1C5.92487 1 1 5.92487 1 12H3C3 7.02944 7.02944 3 12 3V1ZM1 12C1 18.0751 5.92487 23 12 23V21C7.02944 21 3 16.9706 3 12H1ZM12 23C18.0751 23 23 18.0751 23 12H21C21 16.9706 16.9706 21 12 21V23ZM11.2422 12V17H13.2422V12H11.2422ZM11.2422 12C11.3638 12 11.4531 12.0001 11.5286 12.002C11.6046 12.0039 11.6417 12.0072 11.6576 12.0094C11.6729 12.0114 11.6408 12.009 11.5864 11.9866C11.524 11.9609 11.4526 11.9176 11.3886 11.8536L12.8028 10.4393C12.5129 10.1493 12.1711 10.0604 11.9241 10.0272C11.7058 9.99788 11.4496 10 11.2422 10V12ZM13.2422 12C13.2422 11.7926 13.2443 11.5364 13.215 11.3181C13.1818 11.0711 13.0928 10.7293 12.8028 10.4393L11.3886 11.8536C11.3246 11.7896 11.2813 11.7181 11.2556 11.6558C11.2332 11.6014 11.2307 11.5693 11.2328 11.5846C11.2349 11.6005 11.2383 11.6376 11.2402 11.7136C11.2421 11.789 11.2422 11.8784 11.2422 12H13.2422ZM11.992 9H12.001V7H11.992V9Z", fill: "var(--color-text-brandDarkBlue, #212C65)" })), index.h("p", { class: `need_help ${this.category} text-lg-bold` }, "Need help?")), index.h("p", { class: `info ${this.category} text-sm-medium` }, this.email), index.h("p", { class: `info ${this.category} text-sm-medium` }, this.phoneNumber))) : (index.h(index.Fragment, null, index.h("div", { class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), index.h("span", { class: textClass }, index.h("slot", { name: "application_name" }))))))))), this.type === 'complex' && (index.h("div", { key: '6cd2295b46326bfa9d4a19337ac29e4925191750', class: `sidebar_and_nav ${this.state}` }, index.h("div", { key: 'cdd758acbbbfc1d6c7ff5dacdb5cc5f85d6dc976', class: "nav_div" }, index.h("div", { key: 'f6fec7a98379454b776435e579b9ad3b9f076ac6', class: "logo_and_button" }, this.state === 'expanded' && index.h("img", { key: 'bbaca7c5d48e9eb7974b8bd1f443ab7bd02c9272', src: blueLogoSrc }), this.state === 'collapsed' && index.h("img", { key: '42c7fd23b383bf196508f2bd83f76f81e30d6d4f', src: logoSrc, alt: "" }), index.h("gb-collapse-button", { key: '245c965048251d5fce6d66327625c10e5ff45ade', color: "gray", action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), index.h("div", { key: '1cb42f7105862b42364d2e26815422bce304dd9b', class: "complex_sidebar_div" }, index.h("div", { key: '26a1d8099221f59d6af0665885445454187ee571', class: `primary_side_menu ${this.category} ${this.navItemStyle}` }, this.category === 'colored_background' && (index.h("div", { key: '62d28d0348b6c804f25d054c2bf849f5756ce964', class: "pattern" }, index.h("img", { key: '5d58a8e1f2b4113fac0c4cb5520650d582a4c0b6', src: patternSrc, alt: "" }))), index.h("div", { key: 'c577b53a7f0b7396ee0b9d517712c66809560c4a', class: "primary_side_menu_container" }, Object.keys(this.complexSidebarData).map((primaryItem, index$1) => (index.h("gb-complex-primary-side-bar-item", { key: `${index$1}`, label: primaryItem, category: this.category, "item-style": this.navItemStyle, icon: this.complexSidebarData[primaryItem].icon, state: this.activePrimaryItem === primaryItem ? 'active' : 'default', onClick: () => this.handlePrimaryClick(primaryItem, index$1) }))))), index.h("div", { key: 'aafa6d9787cf37cd0b42db34d832264b95ae4ef2', class: `secondary_side_menu ${this.category} ${this.state}` }, index.h("div", { key: 'f27bd9f86c130ee9bd38b54c49bdf7597490ce3d', class: "sside_menu" }, this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index$1) => (index.h("gb-complex-secondary-side-bar-item", { key: `${this.activePrimaryItem}-${index$1}`, type: this.state === 'expanded' ? 'full_with_label' : 'icon_only', label: secondaryItem.label, category: this.category, icon: secondaryItem.icon, state: this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default', onClick: () => this.handleSecondaryClick(secondaryItem.label, index$1) }))))))))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "theme": ["changeTheme"]
+    }; }
 };
 GbSidebar.style = gbSidebarCss;