npm - globuswebcomponents - Versions diffs - 1.0.7 → 1.0.9 - Mend

globuswebcomponents 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (376) hide show

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

@@ -99,7 +99,7 @@ export class GbSidebar {
         const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);
         const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);
         const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);
-        return (h(Fragment, null, this.type === 'simple' && (h("div", { key: '860ce3458feec28d9da15fc9378ae6106ffa668f', class: `simple_sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '9e31e669568c460a5b329c5c5c1f7c6c0b9d8f9e', class: "pattern" }, h("img", { key: '672d84a250cdb8f72283ebd3eae7c1c1cc143b42', src: patternSrc, alt: "" }))), h("div", { key: '8b1365f46a501a795fa73e9fd400cc072dddb628', class: "nav" }, h("div", { key: '81369bf0c75124ed85e524c75897b04c433da1e7', class: `sidebar_header ${this.state}` }, h("div", { key: '18a3c5a5f072662e755ec46484c6123fabbe71f2', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && h(Fragment, null, this.category === 'plain_background' ? h("img", { src: blueLogoSrc }) : h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && h("img", { key: 'f28b46949024886b627830bc0f919b015cfca0c7', src: logoSrc, alt: "" })), h("div", { key: '2c27eadac006b7c9b5afad7a72b4dadf8d50b377', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: 'a04efa499c840821dc79247d46cf941f1c2665dc', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '6793d0bcbb4aba4f5a0fb527812f7b1d54af9c75', class: "navigation" }, h("div", { key: 'a8353e403c9cc72ba3d82cadfcff2a4cd003b2ec', class: "item" }, h("gb-simple-side-bar-item", { key: 'f3b47cc95a4a3d9e66610af58a5e09638907fc8d', 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-simple-side-bar-item", { key: '96e0c095ef06a6dd593fc73db79245fe67763f7e', 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-simple-side-bar-item", { key: '09066959554ead6bea6ddd4e25fd398a17977979', 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-simple-side-bar-item", { key: '90b67d2fdffbbc558ddd6da5e27c214b01c29325', 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-simple-side-bar-item", { key: '2bd94f3345c181c0e4be674239556dd5459d861a', 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: '736b4e06881962288deba27aa55a55c437f6c7e3', class: "navigation" }, h("div", { key: 'b4c47f109ede8bba23025c857451558928f5e8b1', class: "item" }, this.sixthItemLabel && (h("gb-simple-side-bar-item", { key: 'ea60e267d6d58f12ffa538e8172a9361243ab521', 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-simple-side-bar-item", { key: '8381715c01f5ca531a925e5891588603bba5f3a4', 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-simple-side-bar-item", { key: '51b2a7e4005879a91e9e5ba72e5b968ab6a2e9cd', 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-simple-side-bar-item", { key: 'e47b2a5ccb9bd843bf4473caed153c5657ce626e', 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-simple-side-bar-item", { key: '2a1335c76a7918987c3e4768cd814945a59673f8', 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: 'aec47b815b485655e962b2d9828572a12d1d62fd', class: "application_name" }, h("div", { key: '7e46630674d05e789567f90e798519b6de5b29f5', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '44fb71e40cf6bf570bc20ecf48ce3220399e607e', class: "application_name_pattern" }, h("img", { key: 'bc0dd5c916db7dd97fa291c0c0ed240c61768e3b', src: patternSrc, alt: "" }))), h("div", { key: 'acefccfe5163d4eb8e90b5c521055cabdeb5991c', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: '90308fc6ecbefd66a56b0952a7fad86e6bd59900', class: textClass }, h("slot", { key: '5b8dc7aa386edbee5beba29e480a8c22827c1a28', name: "application_name" }))))))), this.type === 'complex' && (h("div", { key: '0e78b21757942ab7b5c0ed20f2e15b370eddeae2', class: `sidebar_and_nav ${this.state}` }, h("div", { key: '90788a25c35e268039b2ef7ba878d83b764c465f', class: "nav_div" }, h("div", { key: 'f82274a492232ec014158745221f39674b142f80', class: "logo_and_button" }, this.state === 'expanded' && h("img", { key: 'ede37d833543a2ef69a06425b8d10c657aa6fdda', src: blueLogoSrc }), this.state === 'collapsed' && h("img", { key: 'e286035c74c793e7b218425ce0549d3fbab2564b', src: logoSrc, alt: "" }), h("gb-collapse-button", { key: '77ffef5203910a14711c2ac4b9d82c89b1105045', color: "gray", action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'c398b91f64d7ea3396a4c78a1d482ffe52d1be4f', class: "complex_sidebar_div" }, h("div", { key: 'e3178a52018558df7e390fcb8f8e57d38cf86c5a', class: `primary_side_menu ${this.category} ${this.navItemStyle}` }, this.category === 'colored_background' && (h("div", { key: '06a03b8da2d6fb7bf4e6988cff652598a3fc8ff6', class: "pattern" }, h("img", { key: 'd60f0c4f289a125c67c92b30c39613ca1ff74f1a', src: patternSrc, alt: "" }))), h("div", { key: '1f1486de70e48c786cc86c59aea0f4c0f977c7da', class: "primary_side_menu_container" }, Object.keys(this.complexSidebarData).map((primaryItem, index) => (h("gb-complex-primary-side-bar-item", { key: `${index}`, 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) }))))), h("div", { key: '4010e68f762d0ef21c52c0de732a26763221039d', class: `secondary_side_menu ${this.category} ${this.state}` }, h("div", { key: '6c24a04b607081ff341f522c7d9c8c2c19771ad8', class: "sside_menu" }, this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (h("gb-complex-secondary-side-bar-item", { key: `${this.activePrimaryItem}-${index}`, 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) }))))))))));
+        return (h(Fragment, null, this.type === 'simple' && (h("div", { key: '860ce3458feec28d9da15fc9378ae6106ffa668f', class: `simple_sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '9e31e669568c460a5b329c5c5c1f7c6c0b9d8f9e', class: "pattern" }, h("img", { key: '672d84a250cdb8f72283ebd3eae7c1c1cc143b42', src: patternSrc, alt: "" }))), h("div", { key: '8b1365f46a501a795fa73e9fd400cc072dddb628', class: "nav" }, h("div", { key: '81369bf0c75124ed85e524c75897b04c433da1e7', class: `sidebar_header ${this.state}` }, h("div", { key: '18a3c5a5f072662e755ec46484c6123fabbe71f2', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && h(Fragment, null, this.category === 'plain_background' ? h("img", { src: blueLogoSrc }) : h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && h("img", { key: 'f28b46949024886b627830bc0f919b015cfca0c7', src: logoSrc, alt: "" })), h("div", { key: '2c27eadac006b7c9b5afad7a72b4dadf8d50b377', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: 'a04efa499c840821dc79247d46cf941f1c2665dc', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '6793d0bcbb4aba4f5a0fb527812f7b1d54af9c75', class: "navigation" }, h("div", { key: 'a8353e403c9cc72ba3d82cadfcff2a4cd003b2ec', class: "item" }, h("gb-simple-side-bar-item", { key: 'f3b47cc95a4a3d9e66610af58a5e09638907fc8d', 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-simple-side-bar-item", { key: '96e0c095ef06a6dd593fc73db79245fe67763f7e', 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-simple-side-bar-item", { key: '09066959554ead6bea6ddd4e25fd398a17977979', 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-simple-side-bar-item", { key: '90b67d2fdffbbc558ddd6da5e27c214b01c29325', 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 })), h("gb-button", { key: '64f7aa7cdd8300168be8f45cc431e1d2e79cb94f', size: "sm", hierarchy: "link_color" }, this.state === 'expanded' && h("p", { key: '27f11be0af3d90f770fd9a48d48d498050c9947d' }, "Show comments")), this.fifthItemLabel && (h("gb-simple-side-bar-item", { key: '92b24d81912c735e5cac2e4083f98d5b10356908', 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: '2ce411707da0fc97ef45cc408997042f47e6eb1e', class: "navigation" }, h("div", { key: 'a84bb38767461f172211aa403b4b2dcddb98530f', class: "item" }, this.sixthItemLabel && (h("gb-simple-side-bar-item", { key: '067827c43461f02774537ebc718910ec6d678acb', 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-simple-side-bar-item", { key: '1d4fb6aaad09db9001463d150ccfcf863e9dcafc', 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-simple-side-bar-item", { key: '25ac29c6e9524d09970c7d7a787b7f7e32a45ac9', 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-simple-side-bar-item", { key: '5ca845529f5074712a298ed752964cd80aa79047', 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-simple-side-bar-item", { key: 'b8b6ea29cbae4a5bd843ad013390762ef19db62d', 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: 'f4a42773e5f3810aaa7f88f680740d26b6f3bbae', class: "application_name" }, h("div", { key: '0f90df628a9ba5f6a004d609318cd291eb5dc1c5', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '2c845b17efecf9ed4fadbdad1f4d56457e82ea4f', class: "application_name_pattern" }, h("img", { key: 'df6e39bc17387f6a6a4f5c1cd08efc9f4e08eaf7', src: patternSrc, alt: "" }))), h("div", { key: 'aed441518a68a77b6ccd1319ae1613f86eae7c99', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: '37583bd42ac898ab236af319d49cddd5df13f1e4', class: textClass }, h("slot", { key: '3a925a96a64b758f12b691f532ee49b2d0f688c5', name: "application_name" }))))))), this.type === 'complex' && (h("div", { key: 'a0a821b157fa084c4a1917558657e46a855251f5', class: `sidebar_and_nav ${this.state}` }, h("div", { key: '867a7da5390d7999948b30ab0ae0d93865b7a37d', class: "nav_div" }, h("div", { key: 'f1d4a9a6b74a10f3e24da5937e943e96054b92f7', class: "logo_and_button" }, this.state === 'expanded' && h("img", { key: 'ba85c05b4619af7d032725654eb5d2147621f179', src: blueLogoSrc }), this.state === 'collapsed' && h("img", { key: 'b303b22a425f40791e8354df9aef64f65c39ece3', src: logoSrc, alt: "" }), h("gb-collapse-button", { key: 'd8470c6a7507336efbc36f0e73a905958e7fbc7a', color: "gray", action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '34244a2afb270bae276c9da3596eff59a0a74343', class: "complex_sidebar_div" }, h("div", { key: '858ece6342517cc479535321d0cb95e70c0b534e', class: `primary_side_menu ${this.category} ${this.navItemStyle}` }, this.category === 'colored_background' && (h("div", { key: '60b48a7b75e8fc2a87a89a10b39ea476e8eb64b0', class: "pattern" }, h("img", { key: '516089d865fc63a6049aa32692e3ca6f473a1e86', src: patternSrc, alt: "" }))), h("div", { key: '5ee57779eb323f57dc4045f8551796f95d1942fd', class: "primary_side_menu_container" }, Object.keys(this.complexSidebarData).map((primaryItem, index) => (h("gb-complex-primary-side-bar-item", { key: `${index}`, 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) }))))), h("div", { key: 'd52dd647157443e4fb78fe3ad076778c002f6985', class: `secondary_side_menu ${this.category} ${this.state}` }, h("div", { key: '74755a96404b65afc33a9d35773efa140be6770f', class: "sside_menu" }, this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (h("gb-complex-secondary-side-bar-item", { key: `${this.activePrimaryItem}-${index}`, 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) }))))))))));
     }
     static get is() { return "gb-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
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' = 'expanded';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() navItemStyle: 'standard' \| 'compact';\r\n @Prop() type: 'simple' \| 'complex';\r\n @Prop() showSecondCategory: boolean = false;\r\n @Prop() iconInstance: 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() 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 @Prop() complexSidebarData: any = {\r\n Recruitment: {\r\n icon: 'assets/user-search-01.svg', // Icon class or path for Recruitment\r\n items: [\r\n { label: 'Overview', icon: 'assets/star.svg' },\r\n { label: 'My Profile', icon: 'assets/star.svg' },\r\n { label: 'Appraisal', icon: 'assets/star.svg' },\r\n { label: 'Staff Management', icon: 'assets/star.svg' },\r\n { label: 'Leave Management', icon: 'assets/star.svg' },\r\n { label: 'Resignation Portal', icon: 'assets/star.svg' },\r\n ],\r\n },\r\n Staff: {\r\n icon: 'assets/user-account.svg',\r\n items: [\r\n { label: 'Staff Overview', icon: 'assets/star.svg' },\r\n { label: 'Payroll Management', icon: 'assets/dashboard-square-03.svg' },\r\n { label: 'Attendance', icon: 'assets/dashboard-square-03.svg' },\r\n { label: 'New', icon: 'assets/dashboard-square-03.svg' },\r\n ],\r\n },\r\n };\r\n @Prop({ mutable: true }) activeIndex: number;\r\n @Prop({ mutable: true }) activePrimaryItem: string = 'Staff';\r\n @Prop({ mutable: true }) activeSecondaryItem: string = 'Attendance Tracking';\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n @Event() simpleSidebarItemClicked: EventEmitter<number>;\r\n @Event() secondaryItemClicked: EventEmitter<number>;\r\n @Event() primaryItemClicked: EventEmitter<{primary: number, secondary: number}>;\r\n @Event() sidebarState: EventEmitter<string>;\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 this.sidebarState.emit('collapsed');\r\n }\r\n\r\n expandSideBar() {\r\n if (this.state === 'collapsed') {\r\n this.state = 'expanded';\r\n }\r\n this.sidebarState.emit('expanded');\r\n }\r\n\r\n @Method()\r\n async sideBarItemClicked(index: number) {\r\n this.activeIndex = index;\r\n // console.log(index);\r\n this.simpleSidebarItemClicked.emit(index);\r\n }\r\n\r\n handlePrimaryClick(item: string, index: number) {\r\n this.activePrimaryItem = item;\r\n this.activeSecondaryItem = this.complexSidebarData[item].items[0].label; // Reset to the first secondary item\r\n console.log(index)\r\n }\r\n\r\n handleSecondaryClick(item: string, index: number) {\r\n this.activeSecondaryItem = item;\r\n console.log(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 const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);\r\n const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n return (\r\n <>\r\n {this.type === 'simple' && (\r\n <div class={`simple_sidebar_div ${this.state} ${this.category}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} 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' && <>{this.category === 'plain_background' ? <img src={blueLogoSrc} /> : <img src={whiteLogoSrc} />}</>}\r\n {this.state === 'collapsed' && <img src={logoSrc} 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-simple-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-simple-side-bar-item>\r\n <gb-simple-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-simple-side-bar-item>\r\n {this.thirdItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.fourthItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.fifthItemLabel && (\r\n <gb-simple-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-simple-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-simple-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-simple-side-bar-item>\r\n )}\r\n {this.seventhItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.eighthItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.ninthItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.tenthItemLabel && (\r\n <gb-simple-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-simple-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={patternSrc} 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 {this.type === 'complex' && (\r\n <div class={`sidebar_and_nav ${this.state}`}>\r\n <div class=\"nav_div\">\r\n <div class=\"logo_and_button\">\r\n {this.state === 'expanded' && <img src={blueLogoSrc} />}\r\n {this.state === 'collapsed' && <img src={logoSrc} alt=\"\" />}\r\n <gb-collapse-button\r\n color=\"gray\"\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=\"complex_sidebar_div\">\r\n <div class={`primary_side_menu ${this.category} ${this.navItemStyle}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n <div class=\"primary_side_menu_container\">\r\n {Object.keys(this.complexSidebarData).map((primaryItem, index) => (\r\n <gb-complex-primary-side-bar-item\r\n key={`${index}`} // Unique key\r\n label={primaryItem}\r\n category={this.category}\r\n item-style={this.navItemStyle}\r\n icon={this.complexSidebarData[primaryItem].icon}\r\n state={this.activePrimaryItem === primaryItem ? 'active' : 'default'}\r\n onClick={() => this.handlePrimaryClick(primaryItem, index)}\r\n ></gb-complex-primary-side-bar-item>\r\n ))}\r\n </div>\r\n </div>\r\n <div class={`secondary_side_menu ${this.category} ${this.state}`}>\r\n <div class=\"sside_menu\">\r\n {this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (\r\n <gb-complex-secondary-side-bar-item\r\n key={`${this.activePrimaryItem}-${index}`} // Unique key\r\n type={this.state === 'expanded' ? 'full_with_label' : 'icon_only'}\r\n label={secondaryItem.label}\r\n category={this.category}\r\n icon={secondaryItem.icon}\r\n state={this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default'}\r\n onClick={() => this.handleSecondaryClick(secondaryItem.label, index)}\r\n ></gb-complex-secondary-side-bar-item>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}"]}
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' = 'expanded';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() navItemStyle: 'standard' \| 'compact';\r\n @Prop() type: 'simple' \| 'complex';\r\n @Prop() showSecondCategory: boolean = false;\r\n @Prop() iconInstance: 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() 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 @Prop() complexSidebarData: any = {\r\n Recruitment: {\r\n icon: 'assets/user-search-01.svg', // Icon class or path for Recruitment\r\n items: [\r\n { label: 'Overview', icon: 'assets/star.svg' },\r\n { label: 'My Profile', icon: 'assets/star.svg' },\r\n { label: 'Appraisal', icon: 'assets/star.svg' },\r\n { label: 'Staff Management', icon: 'assets/star.svg' },\r\n { label: 'Leave Management', icon: 'assets/star.svg' },\r\n { label: 'Resignation Portal', icon: 'assets/star.svg' },\r\n ],\r\n },\r\n Staff: {\r\n icon: 'assets/user-account.svg',\r\n items: [\r\n { label: 'Staff Overview', icon: 'assets/star.svg' },\r\n { label: 'Payroll Management', icon: 'assets/dashboard-square-03.svg' },\r\n { label: 'Attendance', icon: 'assets/dashboard-square-03.svg' },\r\n { label: 'New', icon: 'assets/dashboard-square-03.svg' },\r\n ],\r\n },\r\n };\r\n @Prop({ mutable: true }) activeIndex: number;\r\n @Prop({ mutable: true }) activePrimaryItem: string = 'Staff';\r\n @Prop({ mutable: true }) activeSecondaryItem: string = 'Attendance Tracking';\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n @Event() simpleSidebarItemClicked: EventEmitter<number>;\r\n @Event() secondaryItemClicked: EventEmitter<number>;\r\n @Event() primaryItemClicked: EventEmitter<{primary: number, secondary: number}>;\r\n @Event() sidebarState: EventEmitter<string>;\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 this.sidebarState.emit('collapsed');\r\n }\r\n\r\n expandSideBar() {\r\n if (this.state === 'collapsed') {\r\n this.state = 'expanded';\r\n }\r\n this.sidebarState.emit('expanded');\r\n }\r\n\r\n @Method()\r\n async sideBarItemClicked(index: number) {\r\n this.activeIndex = index;\r\n // console.log(index);\r\n this.simpleSidebarItemClicked.emit(index);\r\n }\r\n\r\n handlePrimaryClick(item: string, index: number) {\r\n this.activePrimaryItem = item;\r\n this.activeSecondaryItem = this.complexSidebarData[item].items[0].label; // Reset to the first secondary item\r\n console.log(index)\r\n }\r\n\r\n handleSecondaryClick(item: string, index: number) {\r\n this.activeSecondaryItem = item;\r\n console.log(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 const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);\r\n const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n return (\r\n <>\r\n {this.type === 'simple' && (\r\n <div class={`simple_sidebar_div ${this.state} ${this.category}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} 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' && <>{this.category === 'plain_background' ? <img src={blueLogoSrc} /> : <img src={whiteLogoSrc} />}</>}\r\n {this.state === 'collapsed' && <img src={logoSrc} 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-simple-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-simple-side-bar-item>\r\n <gb-simple-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-simple-side-bar-item>\r\n {this.thirdItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.fourthItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n <gb-button size=\"sm\" hierarchy=\"link_color\">\r\n {this.state === 'expanded' && <p>Show comments</p>}\r\n </gb-button>\r\n {this.fifthItemLabel && (\r\n <gb-simple-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-simple-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-simple-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-simple-side-bar-item>\r\n )}\r\n {this.seventhItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.eighthItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.ninthItemLabel && (\r\n <gb-simple-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-simple-side-bar-item>\r\n )}\r\n {this.tenthItemLabel && (\r\n <gb-simple-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-simple-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={patternSrc} 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 {this.type === 'complex' && (\r\n <div class={`sidebar_and_nav ${this.state}`}>\r\n <div class=\"nav_div\">\r\n <div class=\"logo_and_button\">\r\n {this.state === 'expanded' && <img src={blueLogoSrc} />}\r\n {this.state === 'collapsed' && <img src={logoSrc} alt=\"\" />}\r\n <gb-collapse-button\r\n color=\"gray\"\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=\"complex_sidebar_div\">\r\n <div class={`primary_side_menu ${this.category} ${this.navItemStyle}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n <div class=\"primary_side_menu_container\">\r\n {Object.keys(this.complexSidebarData).map((primaryItem, index) => (\r\n <gb-complex-primary-side-bar-item\r\n key={`${index}`} // Unique key\r\n label={primaryItem}\r\n category={this.category}\r\n item-style={this.navItemStyle}\r\n icon={this.complexSidebarData[primaryItem].icon}\r\n state={this.activePrimaryItem === primaryItem ? 'active' : 'default'}\r\n onClick={() => this.handlePrimaryClick(primaryItem, index)}\r\n ></gb-complex-primary-side-bar-item>\r\n ))}\r\n </div>\r\n </div>\r\n <div class={`secondary_side_menu ${this.category} ${this.state}`}>\r\n <div class=\"sside_menu\">\r\n {this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (\r\n <gb-complex-secondary-side-bar-item\r\n key={`${this.activePrimaryItem}-${index}`} // Unique key\r\n type={this.state === 'expanded' ? 'full_with_label' : 'icon_only'}\r\n label={secondaryItem.label}\r\n category={this.category}\r\n icon={secondaryItem.icon}\r\n state={this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default'}\r\n onClick={() => this.handleSecondaryClick(secondaryItem.label, index)}\r\n ></gb-complex-secondary-side-bar-item>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}"]}

package/dist/collection/components/gb-simple-side-bar-item/gb-simple-side-bar-item.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class GbSimpleSideBarItem {
     render() {
         const redBarSrc = getAssetPath(`assets/bar.svg`);
         const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);
-        return (h("div", { key: '360e11136b3cb35638529473f757db40e456da4b', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '58799ea4ecb3f5a3ee420fdd65767f6ebb34ec90', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: 'e8dd2d1f388f7e4f31412ab4928f6bd91934b4d3', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '115012f4c7021947b49f0fe5614587b4642bf2c8', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: 'f28a2c75ffbec683a94dbb43d45194f4b6441f81', class: "content" }, h("div", { key: 'b6761fc9e242f2a1f502c33a0306db0ea492c523', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: 'e2330360aeafdf0a617d61d6c59326f3129b78a9', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '4d8f142f538455c76dee0d843b320024535ebea1', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '7ff77997d0af8c56a6f54ab7cc98f9a764ab2658' }, "10"))), this.showArrow && (h("svg", { key: '0127d13ca368f40e68589d3d978e6f40fb2c3199', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: '5ee119ca786c20dd3118e313b187a35274c38498', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '62e12ef601ce2ee93c620463dc355641a6a73820', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '10c82328ab909f22586668c839212fdefa8e5b63', slot: "label" }, this.label)))));
+        return (h("div", { key: '82a0d96349f9159745883d901504f50c203a3be9', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '6f3fc266b57e034d583e6808bb9826ca92e53935', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '3ae15137800f4d9a701087eb81e10dad29038551', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '6b10439cdbdae5ac5f04fcda76319208717f9d01', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: 'd0c631d40cf902b7fc1f04b7a8a2beb5a7d5be68', class: "content" }, h("div", { key: 'd7b7464ca397037449e1cfd34cb1fad895d47aca', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '90748ba00548446826a47315e730917d281cd2ba', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '713158c91286715004cb994b607323143aab6316', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: 'b75e9e7aa9832d8ecc9e2ccaa7ca2d41a277f4ce' }, "10"))), this.showArrow && (h("svg", { key: '0c6ecefafa38e87c5911999fd4845883fa76836e', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: '61b8b819a87e42e99605db24f04d77c7d48f63fb', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '8bf3f9076743acffda4ca3b9750d9e6d14229e1d', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '43ad35d7650c9cc2657a60d49e42cbdf4fafa846', slot: "label" }, this.label)))));
     }
     static get is() { return "gb-simple-side-bar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-slider/gb-slider.js CHANGED Viewed

@@ -74,7 +74,7 @@ export class GbSlider {
         return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;
     }
     render() {
-        return (h("div", { key: 'a66843b642212e6c2098b7a8b9faa490cd4a5ff8', class: "slider-container", ref: el => (this.containerEl = el) }, h("div", { key: '0f71fba7e7b363e7c43771af21427473193c2dc4', class: "track", ref: el => (this.trackEl = el) }), h("gb-slider-control-handle", { key: 'acd17a617637458a4f07b9a1fdee63ad9290f271', class: "left", value: this.formatValue(this.leftValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '3b780cb1b717cb66433d6881033cb90d8672c6c1', class: "right", value: this.formatValue(this.rightValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'right') })));
+        return (h("div", { key: '4a35810e4ce81c7da3478a36c8a21d98766749ef', class: "slider-container", ref: el => (this.containerEl = el) }, h("div", { key: '546256a6e38045f4aeeb127455a0729b9d185df0', class: "track", ref: el => (this.trackEl = el) }), h("gb-slider-control-handle", { key: 'c70c353a2925f098ffa3d4f87b6519e75a6affec', class: "left", value: this.formatValue(this.leftValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: 'e6fb1b14784fd4a2f028d3e1da0d9822da4ab260', class: "right", value: this.formatValue(this.rightValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'right') })));
     }
     static get is() { return "gb-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-slider-control-handle/gb-slider-control-handle.js CHANGED Viewed

@@ -19,7 +19,7 @@ export class GbSliderControlHandle {
         this.isFocused = false;
     }
     render() {
-        return (h("div", { key: 'a486c20251b3ac218ae06c1e97785a251c8576a0', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: '8e6687d2ec66f532d808975d10427c7c65fa65a5', class: "tooltip-container" }, h("gb-tooltip", { key: 'c73239243b737520a9501f25b42a14dfd41b1cc3', "show-arrow": false, arrow: "none", "show-supporting-text": false }, h("p", { key: '4e81f00b3884ae5a373b50a8c9730fe50feade7b', class: "text-xs-semi-bold", slot: "label" }, this.value)))), this.type === 'text' && (h("div", { key: '780aa0007f84cc3dbdcfed21a3676a06066abed4', class: "thumb-label" }, h("p", { key: '3753e7a83856220bfd0efcf6f7a886e1ffdad67d', class: "thumb_label text-md-medium" }, this.value)))));
+        return (h("div", { key: 'a919e0ff7c1b7a5f74dfb71d270d2caeb6ed4c5d', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: '5fb84987e238f9bf3bb517b8691261eaf42565d2', class: "tooltip-container" }, h("gb-tooltip", { key: 'd6ee029f6f86d1fef469baa6b8d0e3ab354b10c7', "show-arrow": false, arrow: "none", "show-supporting-text": false }, h("p", { key: 'a612132be734ff1bfb62617ae7b40d3d03921573', class: "text-xs-semi-bold", slot: "label" }, this.value)))), this.type === 'text' && (h("div", { key: 'ff87ed02fc39d1aeb19b6aff4d7137bcc0643c56', class: "thumb-label" }, h("p", { key: '2bc6af4c3e31112b20541fad2571b33398f25f17', class: "thumb_label text-md-medium" }, this.value)))));
     }
     static get is() { return "gb-slider-control-handle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-status-indicator/gb-status-indicator.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class GbStatusIndicator {
     }
     render() {
         return [
-            h("div", { key: '0ad14c646c30ffdec8cea718dc5701100ae1362e' }, this.statusIcon === 'online_indicator' && h("div", { key: 'd6f14137075298d53a21a092f5f2a3832f4be8da', class: `online_icon ${this.size} ${this.indicatorStateClass}` }), this.statusIcon === 'verified' && (h("svg", { key: 'e9755eeda167cf8a41d031c532be5bbab2312f16', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", class: `verified ${this.size}` }, h("g", { key: 'd6fd691748c7c5e2a86f376495815308522d6dfb', "clip-path": "url(#clip0_0_21453)" }, h("path", { key: 'a09d59f771bca369f833ef3f292f1089387d90a7', d: "M24.7109 5.66715C25.0148 6.40217 25.5982 6.98642 26.3328 7.29145L28.9086 8.35837C29.6436 8.66285 30.2277 9.24688 30.5321 9.98196C30.8366 10.717 30.8366 11.543 30.5321 12.2781L29.466 14.852C29.1614 15.5874 29.1609 16.4142 29.467 17.1492L30.5313 19.7224C30.6822 20.0865 30.7599 20.4767 30.76 20.8708C30.7601 21.265 30.6825 21.6553 30.5316 22.0194C30.3808 22.3835 30.1597 22.7143 29.881 22.993C29.6022 23.2716 29.2713 23.4926 28.9072 23.6433L26.3332 24.7095C25.5982 25.0134 25.0139 25.5968 24.7089 26.3314L23.642 28.9071C23.3375 29.6422 22.7535 30.2262 22.0184 30.5307C21.2833 30.8352 20.4574 30.8352 19.7223 30.5307L17.1484 29.4646C16.4133 29.1608 15.5876 29.1614 14.853 29.4663L12.2772 30.5317C11.5425 30.8355 10.7173 30.8352 9.98284 30.531C9.24835 30.2267 8.66466 29.6434 8.35997 28.9091L7.29273 26.3326C6.98881 25.5975 6.40543 25.0133 5.67087 24.7083L3.09509 23.6413C2.36033 23.337 1.77648 22.7533 1.47188 22.0187C1.16729 21.284 1.16688 20.4585 1.47073 19.7235L2.53689 17.1496C2.84062 16.4145 2.84 15.5888 2.53517 14.8542L1.47054 12.2766C1.3196 11.9125 1.24188 11.5222 1.24181 11.1281C1.24175 10.734 1.31935 10.3437 1.47017 9.97956C1.621 9.61544 1.8421 9.2846 2.12083 9.00595C2.39957 8.72731 2.73047 8.50632 3.09465 8.35561L5.66858 7.28945C6.40297 6.98579 6.98687 6.40316 7.29212 5.66944L8.35904 3.09366C8.66352 2.35857 9.24754 1.77455 9.98263 1.47007C10.7177 1.16559 11.5436 1.16559 12.2787 1.47007L14.8527 2.53623C15.5878 2.83996 16.4134 2.83934 17.148 2.5345L19.7249 1.47172C20.4599 1.16741 21.2856 1.16748 22.0206 1.4719C22.7555 1.77632 23.3395 2.36017 23.644 3.09507L24.7112 5.67161L24.7109 5.66715Z", fill: "#0086C9" }), h("path", { key: '3ced465fdd1481e0383e4dac92e0c207c4730fa3', d: "M10 18.1818C10 18.1818 11.2857 18.1818 13 22C13 22 17.7647 12 22 10", stroke: "white", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("defs", { key: '2a439235993281d22f480c9e1c514b28349533a6' }, h("clipPath", { key: '50a32fbda06d066381de0489d5c47c5b0343bcc3', id: "clip0_0_21453" }, h("rect", { key: 'cfda3bfe1da9c9182c08a5e894bd4349650c09cd', width: "32", height: "32", fill: "white" }))))), this.statusIcon === 'company' && (h("svg", { key: '891d2e80932276406912c552851c0f520567b6ac', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `company ${this.size}` }, h("path", { key: '7000aa606a6e4e453801d7c4885d0f3c3b280fba', d: "M18.8322 3.70039C16.9123 2.11995 14.5039 1.25399 12.0172 1.25001C10.6041 1.24776 9.20439 1.52413 7.89818 2.06333C6.59198 2.60252 5.4049 3.39397 4.40485 4.39237C2.64504 6.1493 1.54876 8.462 1.30275 10.9365C1.05674 13.411 1.67622 15.8943 3.05566 17.9633C4.43511 20.0323 6.48919 21.5591 8.86802 22.2836C11.2469 23.0081 13.8033 22.8855 16.1019 21.9367C18.4004 20.9878 20.299 19.2715 21.474 17.0799C22.6491 14.8884 23.0281 12.3572 22.5464 9.91759C22.0647 7.47798 20.7521 5.28082 18.8322 3.70039Z", fill: "#FF0033", stroke: "white", "stroke-width": "1.5" }), h("path", { key: '62b34cbc1f0f8b1d840d1d843d7f33dc7a1a2d6f', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8942 13.7488V11.865L15.2835 11.8807C15.5231 11.8822 15.7598 11.9336 15.9785 12.0314C16.1973 12.1293 16.3933 12.2715 16.5541 12.449C16.715 12.6266 16.8373 12.8357 16.9131 13.063C16.989 13.2903 17.0168 13.5308 16.9948 13.7694C16.9948 16.4275 12.901 16.9969 12.8973 13.7488M12.8973 8.75316C17.3054 6.44066 17.6942 11.5213 15.0323 11.2788H12.886L12.8973 8.75316ZM16.7385 11.5113C19.8985 10.3013 17.2573 5.5894 12.0854 8.5044C11.5544 8.07132 10.9218 7.78073 10.2473 7.66004C8.96979 7.40066 7.25604 7.62628 6.29479 8.52378L6.75917 8.97941C7.2569 8.55053 7.86627 8.27194 8.51626 8.17611C9.16625 8.08028 9.83009 8.17117 10.4304 8.43816C10.6321 8.53335 10.8098 8.67262 10.9505 8.8457C11.0911 9.01879 11.191 9.22127 11.2429 9.43817L11.266 13.7669C11.0785 16.7738 7.20354 16.5413 7.20354 13.7669V11.8682H10.2492V11.295H5.59729V13.1644C5.60917 16.7175 9.93104 17.315 12.0717 15.5863C12.9471 16.2353 14.0184 16.5649 15.1073 16.52C18.9442 16.4938 19.7323 12.3563 16.7273 11.5144L16.7385 11.5113Z", fill: "white" })))),
+            h("div", { key: '787d02adad93789d4277ed960886ed4a26a26e80' }, this.statusIcon === 'online_indicator' && h("div", { key: 'f8c633e62cf7738431de4b864f01cd77fd4bdedc', class: `online_icon ${this.size} ${this.indicatorStateClass}` }), this.statusIcon === 'verified' && (h("svg", { key: '7860f617f150d8c70ae4dbc8a31ad479e89871a2', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", class: `verified ${this.size}` }, h("g", { key: '3b7bd8e96f34822ee84290a13fc36fbbee8ecf2a', "clip-path": "url(#clip0_0_21453)" }, h("path", { key: '9c04a6d642079f8afd4faf7ee4ec50522aeaeead', d: "M24.7109 5.66715C25.0148 6.40217 25.5982 6.98642 26.3328 7.29145L28.9086 8.35837C29.6436 8.66285 30.2277 9.24688 30.5321 9.98196C30.8366 10.717 30.8366 11.543 30.5321 12.2781L29.466 14.852C29.1614 15.5874 29.1609 16.4142 29.467 17.1492L30.5313 19.7224C30.6822 20.0865 30.7599 20.4767 30.76 20.8708C30.7601 21.265 30.6825 21.6553 30.5316 22.0194C30.3808 22.3835 30.1597 22.7143 29.881 22.993C29.6022 23.2716 29.2713 23.4926 28.9072 23.6433L26.3332 24.7095C25.5982 25.0134 25.0139 25.5968 24.7089 26.3314L23.642 28.9071C23.3375 29.6422 22.7535 30.2262 22.0184 30.5307C21.2833 30.8352 20.4574 30.8352 19.7223 30.5307L17.1484 29.4646C16.4133 29.1608 15.5876 29.1614 14.853 29.4663L12.2772 30.5317C11.5425 30.8355 10.7173 30.8352 9.98284 30.531C9.24835 30.2267 8.66466 29.6434 8.35997 28.9091L7.29273 26.3326C6.98881 25.5975 6.40543 25.0133 5.67087 24.7083L3.09509 23.6413C2.36033 23.337 1.77648 22.7533 1.47188 22.0187C1.16729 21.284 1.16688 20.4585 1.47073 19.7235L2.53689 17.1496C2.84062 16.4145 2.84 15.5888 2.53517 14.8542L1.47054 12.2766C1.3196 11.9125 1.24188 11.5222 1.24181 11.1281C1.24175 10.734 1.31935 10.3437 1.47017 9.97956C1.621 9.61544 1.8421 9.2846 2.12083 9.00595C2.39957 8.72731 2.73047 8.50632 3.09465 8.35561L5.66858 7.28945C6.40297 6.98579 6.98687 6.40316 7.29212 5.66944L8.35904 3.09366C8.66352 2.35857 9.24754 1.77455 9.98263 1.47007C10.7177 1.16559 11.5436 1.16559 12.2787 1.47007L14.8527 2.53623C15.5878 2.83996 16.4134 2.83934 17.148 2.5345L19.7249 1.47172C20.4599 1.16741 21.2856 1.16748 22.0206 1.4719C22.7555 1.77632 23.3395 2.36017 23.644 3.09507L24.7112 5.67161L24.7109 5.66715Z", fill: "#0086C9" }), h("path", { key: 'a4c24be1943e8a3bed9bbc2eba5aa6bfb2577b17', d: "M10 18.1818C10 18.1818 11.2857 18.1818 13 22C13 22 17.7647 12 22 10", stroke: "white", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("defs", { key: 'a8aa8cbb0b1202a14536b1d23905c4321a65cb1c' }, h("clipPath", { key: 'b341a971d306bdd4c5a2d3165f151dc3ae9b5e55', id: "clip0_0_21453" }, h("rect", { key: 'e5b5bf89868b947ed032bf3a534249ad12262a77', width: "32", height: "32", fill: "white" }))))), this.statusIcon === 'company' && (h("svg", { key: '3284844ea486943e94c2fc9cd8d11484a9d52f91', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `company ${this.size}` }, h("path", { key: '6304298d51fdf08972a7dae62bfba7b0159819c3', d: "M18.8322 3.70039C16.9123 2.11995 14.5039 1.25399 12.0172 1.25001C10.6041 1.24776 9.20439 1.52413 7.89818 2.06333C6.59198 2.60252 5.4049 3.39397 4.40485 4.39237C2.64504 6.1493 1.54876 8.462 1.30275 10.9365C1.05674 13.411 1.67622 15.8943 3.05566 17.9633C4.43511 20.0323 6.48919 21.5591 8.86802 22.2836C11.2469 23.0081 13.8033 22.8855 16.1019 21.9367C18.4004 20.9878 20.299 19.2715 21.474 17.0799C22.6491 14.8884 23.0281 12.3572 22.5464 9.91759C22.0647 7.47798 20.7521 5.28082 18.8322 3.70039Z", fill: "#FF0033", stroke: "white", "stroke-width": "1.5" }), h("path", { key: 'ccf543c87d87ae311042167720bae3780bf62c5c', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8942 13.7488V11.865L15.2835 11.8807C15.5231 11.8822 15.7598 11.9336 15.9785 12.0314C16.1973 12.1293 16.3933 12.2715 16.5541 12.449C16.715 12.6266 16.8373 12.8357 16.9131 13.063C16.989 13.2903 17.0168 13.5308 16.9948 13.7694C16.9948 16.4275 12.901 16.9969 12.8973 13.7488M12.8973 8.75316C17.3054 6.44066 17.6942 11.5213 15.0323 11.2788H12.886L12.8973 8.75316ZM16.7385 11.5113C19.8985 10.3013 17.2573 5.5894 12.0854 8.5044C11.5544 8.07132 10.9218 7.78073 10.2473 7.66004C8.96979 7.40066 7.25604 7.62628 6.29479 8.52378L6.75917 8.97941C7.2569 8.55053 7.86627 8.27194 8.51626 8.17611C9.16625 8.08028 9.83009 8.17117 10.4304 8.43816C10.6321 8.53335 10.8098 8.67262 10.9505 8.8457C11.0911 9.01879 11.191 9.22127 11.2429 9.43817L11.266 13.7669C11.0785 16.7738 7.20354 16.5413 7.20354 13.7669V11.8682H10.2492V11.295H5.59729V13.1644C5.60917 16.7175 9.93104 17.315 12.0717 15.5863C12.9471 16.2353 14.0184 16.5649 15.1073 16.52C18.9442 16.4938 19.7323 12.3563 16.7273 11.5144L16.7385 11.5113Z", fill: "white" })))),
         ];
     }
     static get is() { return "gb-status-indicator"; }

package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.js CHANGED Viewed

@@ -43,17 +43,17 @@ export class GbTabButtonBase {
         this.tabClicked.emit();
     }
     render() {
-        return (h("div", { key: 'f9fd2cfa62f6c674551a210abd57de35ad287115', class: `tab_button_div ${this.type}
+        return (h("div", { key: 'fb6c70a2369c4a58bca42783777bb5a8c330738e', class: `tab_button_div ${this.type}
       ${this.current ? 'current' : ''}
       ${this.fullWidth ? 'full_width' : ''}
       ${this.size}
-      ${this.alignment}`, onClick: () => this.handleClick() }, h("p", { key: '06ad6ecbf3a54be302504976586c4b0bb1f3cfc9', class: `${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (h("gb-badge", { key: '3a869a579090b52481c26c16bb68540abf31ff20', size: "sm", type: "pill_color", color: this.current && this.type === 'button_primary'
+      ${this.alignment}`, onClick: () => this.handleClick() }, h("p", { key: 'bb028e81fc9bb29a5300f621343868918ccbd3cd', class: `${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (h("gb-badge", { key: '95444adbc23d303e7cbadc755f9a2a46a551aa81', size: "sm", type: "pill_color", color: this.current && this.type === 'button_primary'
                 ? 'information'
                 : this.current && this.type === 'underline'
                     ? 'information'
                     : this.current && this.type === 'line'
                         ? 'information'
-                        : 'gray' }, h("slot", { key: '2b3a13c3e48153ffe4d39efb7b07e51d88042517', name: "count" })))));
+                        : 'gray' }, h("slot", { key: '2ba11983dc774a38c801ce19649190200f7ce7b6', name: "count" })))));
     }
     static get is() { return "gb-tab-button-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag/gb-tag.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class GbTag {
     }
     render() {
         const flagSwap = getAssetPath(`${this.flagSwap}`);
-        return (h("div", { key: 'd5367961f92a96d3ee307a1daeaead0779a6432d', class: `container ${this.size}` }, h("div", { key: '69bdb33b1ef7801bff54c5d8afc34ac8f90d72df', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: '6a71b33f29680f28ae41f424afa28c29713d6ab6', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: '0951d5c3214501f86196e16f0573ae9b9935735e', class: "icon left-icon" }, h("img", { key: '79e4f9415b35f32df09d8704e4171253e3464500', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: 'e2c2f47d5015fb5d3cd37cf42ac535f3625918c1', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, h("slot", { key: '504063564f68b31222346d8f7ca985329de77a55', name: "initials", slot: "initials" }))), this.icon === 'dot' && (h("svg", { key: 'cd49727e44ddba02f10d96db3ddc08d4ec1aaa39', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: '3546686da22edb8175affccdb5fb380e5fcd92ef', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("div", { key: 'cfa796fcbd2ef78e2cf69176aea6dbc92b9b6f12', class: "label" }, h("slot", { key: 'b01a6553a563d60367ca8f45dc879f4c47da3e74' })), this.action === 'count' && (h("gb-tag-count", { key: '38b70f2bc569826183805ab276b78f1ca233d839', size: this.size }, h("slot", { key: '2df9bd1c13e0da4b04860af78c7c5f187829f2fe', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: '616cef619f1598299aab8021b53385aecb30a294', size: this.size, onClick: () => this.onTagClose() })));
+        return (h("div", { key: '739ca2c578d6dd1bdc2352e01f0880fe338cbb33', class: `container ${this.size}` }, h("div", { key: 'b06d5693884fcab17c5ee3e669950d3605141883', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: 'bc2e4980472c8a732b2e6ca54a099fbb928e1313', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: '101acef4f4fa0e2c19015141f919a26fe44a8f32', class: "icon left-icon" }, h("img", { key: '9da0ec58a7e1d3481767c64cf07511bee6bdcb23', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: 'ac5e81553411146c4a75e625ecefe8a8ebc384b1', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, h("slot", { key: '965303a15db1bc2855af356746f9d05d8b88264b', name: "initials", slot: "initials" }))), this.icon === 'dot' && (h("svg", { key: 'd0da65e7f135f318ba9ac56bd6bc1ce58195e05d', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: '8e5eeb8c09d28ed2ef6a2cff70780a9590884380', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("div", { key: 'b00fccc4c0ec9d9fd943268924e9b379d13c6757', class: "label" }, h("slot", { key: 'e5e0f3872cf437dcfa2fd0099a4a0d48ffe303a8' })), this.action === 'count' && (h("gb-tag-count", { key: 'd7e9c7457c1ae91e6ef8bc3a0539b69f18d45fcc', size: this.size }, h("slot", { key: '2b4ac47435196f477fb2af4519b0984df7151c5f', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: '32353e78710725995aecfdba7b7345cf8bea06e8', size: this.size, onClick: () => this.onTagClose() })));
     }
     static get is() { return "gb-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-checkbox/gb-tag-checkbox.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class GbTagCheckbox {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '3f30469657863dc9aed7e8cf887d54a2a6881b73', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '1e25e935cc4d265c758a50c7349d577893664c8d', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: 'a02a48f762fc506d737877cf70071df0eb1bde3d', class: `custom-checkbox ${this.size}` }, h("svg", { key: '411e29610bd26cb0bbfc7e1e812669f460c2f660', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '6b60bec5fa7ebd68be0d5bee69e7494591ebc37f', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("label", { key: 'e87fa0627ec2a864d6ce6168a795b0585cd3ff27', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '8c3bc163d64cdce010b48d980791a2dec0dc7d5d', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: '419076874797c539095771cfe81a25b6fad9b8ea', class: `custom-checkbox ${this.size}` }, h("svg", { key: '3909a55b18bc008f80dd695b9a23f24d69af3f28', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'fd5aff3f474ce52eb2c18d3efe2e06766443057b', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "gb-tag-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-close/gb-tag-close.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class GbTagClose {
         this.size = undefined;
     }
     render() {
-        return (h("div", { key: 'c9a4921c601f87c22aec06746c971caeb7b9d5f3', class: this.size }, h("svg", { key: '38492bf906e04d02b23b9e06c65ed50f05e269be', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: '894a01955e968db0c2b692a454571289a0543927', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: '5bc27a97dd38d0bf0780ea99e0c91077e7b33f99', class: this.size }, h("svg", { key: 'aeadd55df8f0fbfed586d20d359bd28e95d0461d', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: 'a6d9b1d8ea9201821ff2c406c8813298ccd5a57f', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-tag-close"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-count/gb-tag-count.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class GbTagCount {
         this.size = undefined;
     }
     render() {
-        return (h("div", { key: '303f8fcc85e1d8df6c0a603966a11a541b192ccd', class: this.size }, h("slot", { key: '8cf5b1288629779b1825e0637fc0b9298a63357a', name: "count" })));
+        return (h("div", { key: 'e599e05b0e281f968f529e7a133190c286268db4', class: this.size }, h("slot", { key: 'b53ccf7dbc2f9cd222b0dcf8ae0536084a85c661', name: "count" })));
     }
     static get is() { return "gb-tag-count"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.css CHANGED Viewed

@@ -2691,6 +2691,7 @@
   flex-wrap: wrap;
   position: relative;
   gap: 0.5rem;
+  width: 100%;
   background-color: var(--color-surface, #FFFFFF);
 }

package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js CHANGED Viewed

@@ -50,6 +50,9 @@ export class GbTextareaInputField {
         this.inputElement.addEventListener('input', this.handleTagInput.bind(this));
         this.updateInputWidth();
     }
+    componentWillLoad() {
+        this.updateSelectedItems(this.value);
+    }
     disconnectedCallback() {
         this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));
     }
@@ -124,26 +127,55 @@ export class GbTextareaInputField {
         this.inputElement.focus(); // Focus the input field
     }
     selectDropdownItem(item) {
-        const isObject = typeof item === 'object';
-        const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));
-        if (isSelected) {
-            // Unselect item: Move it from selectedItems to unselectedItems
-            this.selectedItems = this.selectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));
-            if (!this.unselectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item))) {
-                this.unselectedItems = [...this.unselectedItems, item];
+        if (this.value.length === 0) {
+            const isObject = typeof item === 'object';
+            const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));
+            if (isSelected) {
+                // Unselect item: Move it from selectedItems to unselectedItems
+                this.selectedItems = this.selectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));
+                if (!this.unselectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item))) {
+                    this.unselectedItems = [...this.unselectedItems, item];
+                }
+                this.textareaValueChanged.emit(this.selectedItems);
+            }
+            else {
+                // Select item: Move it from unselectedItems to selectedItems
+                this.selectedItems = [...this.selectedItems, item];
+                this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));
+                this.textareaValueChanged.emit(this.selectedItems);
             }
         }
         else {
-            // Select item: Move it from unselectedItems to selectedItems
-            this.selectedItems = [...this.selectedItems, item];
-            this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));
-            console.log(this.selectedItems);
-            this.textareaValueChanged.emit(this.selectedItems);
+            const isObject = typeof item === 'object';
+            const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));
+            if (isSelected) {
+                this.value = this.value.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));
+                console.log(this.value);
+                this.textareaValueChanged.emit(this.value);
+            }
+            else {
+                this.value = [...this.value, item]; // Add item to array
+                this.textareaValueChanged.emit(this.value);
+            }
         }
-        // this.results = [];
-        // this.showDropdown = false;
         this.updateStyles();
     }
+    updateSelectedItems(newValue) {
+        if (Array.isArray(newValue) && newValue.length > 0) {
+            this.selectedItems = [];
+            this.unselectedItems = [];
+            const objectValues = newValue.filter(val => typeof val === 'object' && val !== null);
+            const primitiveValues = newValue.filter(val => typeof val !== 'object');
+            this.selectedItems = this.results.filter(item => typeof item === 'object' && item !== null
+                ? objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) // Avoid object reference issues
+                : primitiveValues.includes(item));
+            this.unselectedItems = this.results.filter(item => typeof item === 'object' && item !== null ? !objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) : !primitiveValues.includes(item));
+        }
+        else {
+            this.selectedItems = [];
+            this.unselectedItems = [...this.results];
+        }
+    }
     isTagItemSelected(item) {
         // return this.selectedStaff.some(i => i.name === item.name);
         const isObject = typeof item === 'object';
@@ -155,14 +187,14 @@ export class GbTextareaInputField {
         }
     }
     render() {
-        return (h("div", { key: '31cc4a633710cccdce80d5dcd5825a6cf761c4f1', class: "textarea_container" }, h("div", { key: '02b230337e165b94a889e1c70496d0a3f0ce2f99', class: "input_with_label" }, this.showLabel && h("p", { key: '473c225e06e9168eb457760bca2014831262cdfe', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: '2faa13b2bac270ed5a61c525e51732d65d9b8fcb', ref: el => (this.textarea = el), onInput: () => this.handleInput(), class: `textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText })), this.type === 'tags' && (h("div", { key: '170fa2786d86c55a71aea54195595f805b5db303', class: "textarea_tags" }, h("div", { key: 'f68b33e20f430d91d4cee7573c26d610b5ec4d37', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: '0664dbadbea1841102493d1a70c45c8a9f824eda', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+        return (h("div", { key: 'f2ea01458ced3899bac0ffa515123c1fa8727e7f', class: "textarea_container" }, h("div", { key: '009326c4a308fc377eea62cd259ccbba46ada47d', class: "input_with_label" }, this.showLabel && h("p", { key: '67fe1168ac116ed48152bc4a75bad732abb40d45', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: '12666345c4010ac411f183ccff9d3375fd17a937', ref: el => (this.textarea = el), onInput: () => this.handleInput(), class: `textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText })), this.type === 'tags' && (h("div", { key: '53626796937810d11dd45f65156aefab55735fd6', class: "textarea_tags" }, h("div", { key: '98756532dc3061ab7ae09ca7de0c23d2db39e107', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: '4c83889adaa8ada3aadfa11097d0e2d17f40772a', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
             .split(' ')
             .map(part => part.charAt(0).toUpperCase())
-            .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: '2d2b21261a41a2a614e2388ba75d6d22a1c09170', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || '  '), h("div", { key: '6218c9637016ba853508c3855da29dc26058de4f', class: "input_field" }, h("input", { key: 'bf67ab072b5ca054bd6cddfa6ad4f1994ebd3371', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
+            .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: 'b953a77b6a8b62b163e9e749417a899bf942508c', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || '  '), h("div", { key: '91d56a9ffe4e7c2d6c86f81508ce87b851f412d7', class: "input_field" }, h("input", { key: '6d86542cdf7fc26e2222d27fdad8f5dcde924c94', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
             // placeholder={this.placeholderText}
-            value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: 'cab61b7f96a2942a9cfca9987cab2566176678aa', class: "help_icon" }, h("svg", { key: '102c50aa1eb72a15050370029d938eaf90d5d2c4', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'b52de43d4f4a7bcb14fef86ef07f2cfb9558e014', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: '64d24f24f7dd0e8cb5e7171bc7248150a73de69e', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
+            value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: 'f42c81f27b18b81e81b1d41d4c122ba8d1cb2ad5', class: "help_icon" }, h("svg", { key: '6d2373a14768b1833275f8a91c52fdc6104c6652', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'd72e5f12fffd9f8a1e7e6d2f8832e81556784b03', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: '6d8d351e0abe69a28cb3a0848ecc9c7ca1b52720', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
             ? [h("p", { slot: "name" }, item.objectName), h("p", { slot: "supporting_text" }, item.objectValue)]
-            : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h("p", { key: '7b8535a2312a47b4b491156776da7cffe83a434e', class: `hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
+            : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h("p", { key: 'c976f5fc802d52e28c5ae46e4ba0bb27340233d4', class: `hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
     }
     static get is() { return "gb-textarea-input-field"; }
     static get encapsulation() { return "shadow"; }
@@ -440,6 +472,12 @@ export class GbTextareaInputField {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "updateSelectedItems"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",