globuswebcomponents 2.13.3 → 2.13.4

package/dist/cjs/gb-avatar-label-group_3.cjs.entry.js

@@ -143,7 +143,7 @@ const GbThemeTab = class {
         const systemIconSrc = index.getAssetPath(`assets/laptop.svg`);
         const sunSrc = index.getAssetPath(`assets/sun-02.svg`);
         const moonSrc = index.getAssetPath(`assets/moon-02.svg`);
-        return (index.h("div", { key: '61e7f8f1081729012f93efa3283e42b717840c0d', class: `theme_tab_div` }, index.h("div", { key: 'a613367fcc6ef68c2fa7941fa230ce85890b84a2', class: "tab" }, index.h("gb-icon-button-base", { key: 'b6eab15aaa1645e5b0a792faacb73a25b928517d', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), index.h("div", { key: 'cda5e5a1969889dbab1ec8480cc2c38c00012b33', class: "tab" }, index.h("gb-icon-button-base", { key: '69ba55e04e8e3e71c2e15ac84133b9ae03d2afe9', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), index.h("div", { key: '165afd0251b317e284a61e44f41aa96bbe497ef1', class: "tab" }, index.h("gb-icon-button-base", { key: 'c7497e2396e8af6bfe0b3ca7f28f9458765afddc', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
+        return (index.h("div", { key: 'ffb2bcce33216853cda0bc036051520f6471eebf', class: `theme_tab_div` }, index.h("div", { key: '8692ba05cb3658fca76f4e757fe0ecf161d0e8b8', class: "tab" }, index.h("gb-icon-button-base", { key: 'ee1d8857c34b5828d4952ebf71d9646f30a560d5', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), index.h("div", { key: '92f2dac8b0389a341fa1aa12e7c485254bb19bbb', class: "tab" }, index.h("gb-icon-button-base", { key: '6696a6e10dd567674708cc1854ab2bff0b0c1189', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), index.h("div", { key: '047e25e2870ed84edd25a543641e6311667d9077', class: "tab" }, index.h("gb-icon-button-base", { key: '5154745e1e327be999f66e0c90969c73293241a8', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/gb-slider-control-handle.cjs.entry.js

@@ -24,7 +24,7 @@ const GbSliderControlHandle = class {
         this.isFocused = false;
     }
     render() {
-        return (index.h("div", { key: 'ffe9201c9e905242352012c210a64ab13d502477', 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' && (index.h("div", { key: '0ced2d7da09f4e9f04db9148b51cbb47bddf4468', class: "tooltip-container" }, index.h("gb-tooltip", { key: '286351db60d5286f9d03a928929bc4e74ced4acf', "show-arrow": false, arrow: "none", "show-supporting-text": false }, index.h("p", { key: 'e91549a7ba636bfab0a31a3d39a1ebd0670a8584', class: "text-xs-semi-bold", slot: "label" }, this.value)))), this.type === 'text' && (index.h("div", { key: 'f1044c5ee4619def0868171f3851f4c33c078a77', class: "thumb-label" }, index.h("p", { key: '351f74720c0351428859b1b483d232134146fc6c', class: "thumb_label text-md-medium" }, this.value)))));
+        return (index.h("div", { key: '755e330214a56a9164c35e918409421324f57b93', 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' && (index.h("div", { key: 'e726f49f16573cd3e8d5f0156967d455930a6600', class: "tooltip-container" }, index.h("gb-tooltip", { key: '878340f8b487e032b29fcc9584b8cc7d9a7c02c1', "show-arrow": false, arrow: "none", "show-supporting-text": false }, index.h("p", { key: '0f40c9724f815618bc3340829b41a474b4353c90', class: "text-xs-semi-bold", slot: "label" }, this.value)))), this.type === 'text' && (index.h("div", { key: '8322f0062a48f9950cdcba8ab4544fa49f42195e', class: "thumb-label" }, index.h("p", { key: '94001ac9388a758d638c40980ac4dda07e684032', class: "thumb_label text-md-medium" }, this.value)))));
     }
 };
 GbSliderControlHandle.style = gbSliderControlHandleCss;

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

@@ -81,7 +81,7 @@ const GbSlider = class {
         return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;
     }
     render() {
-        return (index.h("div", { key: '78d700fcf9ca425ecc6f22c27ebbdc48c27f1165', class: `slider_wrapper ${this.label}` }, this.showHeading && (index.h(index.Fragment, null, this.formatHeading ? (index.h("p", { class: "slider_label text-sm-medium" }, this.heading.charAt(0).toUpperCase() + this.heading.slice(1).toLowerCase())) : (index.h("p", { class: "slider_label text-sm-medium" }, this.heading)))), index.h("div", { key: '40f718d1d8a87baecaa2b50cb9594452e47023fe', class: "slider-container", ref: el => (this.containerEl = el) }, index.h("div", { key: '3d08fcb9fe2c42da9fc6a6c346e99e6f10935be1', class: "track", ref: el => (this.trackEl = el) }), index.h("gb-slider-control-handle", { key: 'e1a3755fff9d2f72cc38a80dc4f2292475ede2bd', 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') }), index.h("gb-slider-control-handle", { key: '1e69bd130c5c2c54e03584e41b32da51627a562a', 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 (index.h("div", { key: 'fe4133f14cbbdf960861cfd3209fb6a38bb39bdf', class: `slider_wrapper ${this.label}` }, this.showHeading && (index.h(index.Fragment, null, this.formatHeading ? (index.h("p", { class: "slider_label text-sm-medium" }, this.heading.charAt(0).toUpperCase() + this.heading.slice(1).toLowerCase())) : (index.h("p", { class: "slider_label text-sm-medium" }, this.heading)))), index.h("div", { key: '19a705d3df04535f37805f0486ddd2e62a6bf5d7', class: "slider-container", ref: el => (this.containerEl = el) }, index.h("div", { key: 'e11420b7dad76b4f6426317eaf0917e3a046a3d5', class: "track", ref: el => (this.trackEl = el) }), index.h("gb-slider-control-handle", { key: '1d64be7e1ee5fb705854c33261928e19747b0a8c', 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') }), index.h("gb-slider-control-handle", { key: '0dc296c7d6b0778570b942a7bc41ce6fd7186f15', 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') }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/gb-step-base_2.cjs.entry.js

@@ -44,7 +44,7 @@ const GbStepBase = class {
         this.internalState = newValue;
     }
     render() {
-        return (index.h(index.Fragment, null, this.type === 'text_line' && (index.h(index.Fragment, null, index.h("div", { key: '4662a6c79e84c5154f7e40f6646781591685c0e8', class: `bar ${this.size} ${this.status} ${this.internalState}` }), this.showContent && (index.h("div", { key: '45e393b6352ac2bc5ba539c8a89ca894c0a496e9', class: `text_line_div ${this.size} ${this.status} ${this.internalState}` }, index.h("div", { key: '9de71d4fa8c1c8ed9f942e149cc95643337404c3', class: `text_line_div_content` }, index.h("p", { key: 'd1c8b77394118b4caa27b1cebd7564024f2736a8', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), this.showSupportingText && index.h("p", { key: 'c1ae49cc80645aa44b2f11fa5fa5302e7e20fa64', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))))), this.type === 'icon_only' && (index.h("div", { key: 'bc8a91739bc1ff97f583be9a35c05337d78d0cc6', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && index.h("div", { key: '13e0728f15d45a17e434f2fe2c3cdbc38f1ca125', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (index.h("svg", { key: '77ea2c652a4342c000c5e432cf47ee552566a6dd', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, index.h("path", { key: 'a98d3888e463d3f0cd0bf406474ba191bbdfc1bc', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.type === 'icon_left' && (index.h("div", { key: 'f0885cd97e40b55eeb0b96156e9ca58ce269d67c', class: `icon_left_div ${this.size}` }, index.h("div", { key: 'c68940b63ef897564a6db047095abca5fffe575e', class: "connector_wrap" }, index.h("gb-step-icon-base", { key: '8f06339e9c4c85bc6353001d188e287f39466607', size: this.size, status: this.internalStatus, state: this.internalState }), this.connector && (index.h("div", { key: '4b3ccc20dc14a64574c887488b8da1e9035b37b0', class: "connector_div" }, index.h("div", { key: 'e232f40e2e1d07ee8c17712b932ebf21cb628bee', class: `icon_left_connector ${this.internalState} ${this.status}` })))), index.h("div", { key: 'beb26865f9b4cf222ecc657b5ade2dc5780ee159', class: "icon_left_text" }, index.h("p", { key: 'de56128e45762c2d2d2e0f2062bc9bdfae120b65', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), index.h("p", { key: 'c7f0503c18ab6714df76d2d8bbb724bb52775742', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'icon_top' && (index.h("div", { key: '517b547e5ae544c2cf305787e51aeb2df5d67329', class: `icon_top_div ${this.size}` }, index.h("div", { key: 'b04030b475abd8b41b05928718ac87b07d539d20', class: "step_icon_div" }, index.h("div", { key: '927ea927ce7be4d3d07578395094646b53f55b57', class: "step_icon" }, index.h("div", { key: '8b22a3bce21841f4e4248475ba6dec1550bfa9fd', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && index.h("div", { key: '6b84f1424cbcec310e2420bca1cac98f906266f4', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (index.h("svg", { key: '33d65f76d257721fe7802fc5ac55c4aabc315614', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, index.h("path", { key: 'fe98915b9b04b509afe77fc766a12e99c201e288', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'dd117a41bae1d0a221c27fc25c30081dfc065b95', class: "icon_top_content" }, index.h("p", { key: 'a51f24b79902583c76863796da3a21057b20de56', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), index.h("p", { key: '19b1b22a4a2462cccfe6e326437d89374615da92', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'featured_icon_left' && (index.h("div", { key: '0daaa67dc0c54c4f25f0b2e08c936f972bdf4747', class: "featured_icon_left_div" }, index.h("div", { key: '2c4a37d03f28e448d05041dc8ff3918595ca02fa', class: "connector_wrap" }, index.h("gb-featured-icon", { key: '57b3cf87551b3a323e092701238045ff2684e72e', size: "sm", icon: "assets/user.svg", destructive: this.internalState === 'destructive' ? true : false }), this.connector && (index.h("div", { key: '9d3dc52f0b9141892034b98ee25517608e040d35', class: "connector_div" }, index.h("div", { key: '9329dd72eb81131076f0ac500f94a126a447723c', class: `featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}` })))), index.h("div", { key: 'a39d3d6ac43d56c5852f24015eafa645ef55ee07', class: "featured_icon_left_content" }, index.h("p", { key: '79d146dce37811b894cb5a47d1546c62c40b4075', class: `featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}` }, this.label), index.h("p", { key: '0aaafe28c7a103da270e2cd780abd0b8b9f11305', class: `featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}` }, this.supportingText))))));
+        return (index.h(index.Fragment, null, this.type === 'text_line' && (index.h(index.Fragment, null, index.h("div", { key: 'bbac21b829737c56dadb364e3865225c4a34fae1', class: `bar ${this.size} ${this.status} ${this.internalState}` }), this.showContent && (index.h("div", { key: '546993561d43f85540e30ac2b2dc39310191f774', class: `text_line_div ${this.size} ${this.status} ${this.internalState}` }, index.h("div", { key: 'fc687b65bb1aa956c5b03ed8c981219fa71057f0', class: `text_line_div_content` }, index.h("p", { key: 'd569a483b205996d3282f1f6d5f45a83a5121c6d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), this.showSupportingText && index.h("p", { key: 'f8bdfcb5417642cd5957fa0c8a6a539d7a4ebe90', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))))), this.type === 'icon_only' && (index.h("div", { key: 'd5019894f1032a8db58f7c7b465eb47bca21a68d', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && index.h("div", { key: '6a2dfe1239243e33bff1fb6c1423ab7ea576e880', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (index.h("svg", { key: 'a13fefa4b803769190ad281a2e2d8faac6df1aec', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, index.h("path", { key: 'c4dd819eac00998b099eb142712afcac96d7a952', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.type === 'icon_left' && (index.h("div", { key: 'cbb816393c026e56f9dcb63d41d81babf862818e', class: `icon_left_div ${this.size}` }, index.h("div", { key: '728f3e5dc2d88ea35dc406721532254825e080ed', class: "connector_wrap" }, index.h("gb-step-icon-base", { key: '6f96ef0e1ca966f14cfff0830e8fdb3eb7cda2da', size: this.size, status: this.internalStatus, state: this.internalState }), this.connector && (index.h("div", { key: '466b60ed1d23a2397a0dbc89effa0449f3e9bb60', class: "connector_div" }, index.h("div", { key: '724321478b44369cdf49460c29c073b9151eda79', class: `icon_left_connector ${this.internalState} ${this.status}` })))), index.h("div", { key: '05c9edb1478a5fe7e88508c201e04f829b1ab25b', class: "icon_left_text" }, index.h("p", { key: '8f687fd3371f16722cf3e40ef2af03700cbc77da', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), index.h("p", { key: '94dd7eb4743ee0dc2a5ea095ff38c3e83ea42ce3', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'icon_top' && (index.h("div", { key: 'b3fb1a3726b34375bebddbf119f226ef83f48806', class: `icon_top_div ${this.size}` }, index.h("div", { key: '8000a62568e45d706d6b73ea9218d2ff73a29268', class: "step_icon_div" }, index.h("div", { key: '798904a2a498833e11875693c16d0cf38c095c3b', class: "step_icon" }, index.h("div", { key: 'cc51a374660bcebeeebfddb8454b19c56375a078', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && index.h("div", { key: '6d2d4d92600c96a9c35c745e74fb05869e8196aa', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (index.h("svg", { key: '60b291b02d9e86ac18854a9d9a9ffc7bd58b0c33', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, index.h("path", { key: '16bd5b01931b7f10d788c942b036617dcddbe0a6', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'a2457eb4b2d80d6d9fe29fa590bb9279b0396236', class: "icon_top_content" }, index.h("p", { key: 'd648fc2a86dcd08aba96bbf34ae3fd28922bc904', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), index.h("p", { key: 'f01ed307958f3ee239fc9aa8f36388d027713447', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'featured_icon_left' && (index.h("div", { key: '040b9182a1458f16914eb82f9995a9ce63e1adcf', class: "featured_icon_left_div" }, index.h("div", { key: '20820f940049c935409b0bc403680b7554b5a21b', class: "connector_wrap" }, index.h("gb-featured-icon", { key: 'c788260e7d67163b2c72d5e02099146263ce5406', size: "sm", icon: "assets/user.svg", destructive: this.internalState === 'destructive' ? true : false }), this.connector && (index.h("div", { key: '89cea474a02384a3ed0b7e51a9fb12058c1f7680', class: "connector_div" }, index.h("div", { key: '5d7729fe0b94dd66fd408c22ce399976b7580242', class: `featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}` })))), index.h("div", { key: 'db1c6b983e9b0ef607def2a85b084212264e2da6', class: "featured_icon_left_content" }, index.h("p", { key: 'cba9abd409fd142428729c58ccb1cece25cf9f81', class: `featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}` }, this.label), index.h("p", { key: 'e99e90440e7e9f2735dcf45983de06e8da197652', class: `featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}` }, this.supportingText))))));
     }
     static get watchers() { return {
         "status": ["onStatusChange"],
@@ -70,7 +70,7 @@ const GbStepIconBase = class {
         this.internalState = newValue;
     }
     render() {
-        return (index.h("div", { key: 'b03c62fded57a030bd724b9601d0ced9daadc88c', class: `icon_base_div ${this.internalStatus} ${this.internalState} ${this.size}` }, this.status !== 'complete' && index.h("div", { key: '17945b0617b82fea3cc03417ee7f70b8186726a1', class: `dot ${this.internalStatus} ${this.internalState} ${this.size}` }), this.status === 'complete' && (index.h("svg", { key: '936d4069b66dd5f39c0971eef91c87cbe00fa76a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.internalStatus} ${this.internalState} ${this.size}` }, index.h("path", { key: 'c9287b92f85d509d9fa55e3475950b07184f98dc', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (index.h("div", { key: '2e884bd43d4180e7277dfdd2a156e4604ab7de83', class: `icon_base_div ${this.internalStatus} ${this.internalState} ${this.size}` }, this.status !== 'complete' && index.h("div", { key: 'f18c6d322ff63255255099a5527ba03d770c9182', class: `dot ${this.internalStatus} ${this.internalState} ${this.size}` }), this.status === 'complete' && (index.h("svg", { key: 'debd2e201428b6225484a3c7676512624ac86326', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.internalStatus} ${this.internalState} ${this.size}` }, index.h("path", { key: '45eef9a71a796a97c7c7987cbd9368666586755b', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get watchers() { return {
         "status": ["onStatusChange"],

package/dist/cjs/gb-stepper-horizontal-icons-centered.cjs.entry.js

@@ -35,7 +35,7 @@ const GbStepperHorizontalIconsCentered = class {
         ];
     }
     render() {
-        return (index.h(index.Fragment, null, this.type === 'icon' && (index.h("div", { key: 'bbc9ec63ddcc288a688b11e3410b614e95a9b4f8', class: "icons_centered_div" }, this.breakpoint === 'desktop' && (index.h("div", { key: 'eb847a2e9e2550564881178e44b26b93cece7193', class: "step_div" }, this.steps.map((step, index$1) => (index.h(index.Fragment, null, index.h("gb-step-base", { size: this.size, type: "icon_top", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText, breakpoint: "desktop" }), index$1 !== this.steps.length - 1 ? (index.h("div", { class: "connector_div" }, index.h("div", { class: `icon_top_connector ${step.state} ` }))) : null))))), this.breakpoint === 'mobile' && (index.h(index.Fragment, null, this.steps.map((step, index$1) => (index.h(index.Fragment, null, index.h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText })))))))), this.type === 'featured_icon' && (index.h("div", { key: '7f47315907dadde7326031c37e01dc70bc3c8d13', class: "icons_centered_div" }, this.breakpoint === 'desktop' && (index.h("div", { key: 'da64ca8c855a37703941566b8b6d74bfd61beb1f', class: "step_div" }, this.steps.map((step, index$1) => (index.h(index.Fragment, null, index.h("gb-step-base", { size: this.size, type: "icon_top", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText, breakpoint: "desktop" }), index$1 !== this.steps.length - 1 ? (index.h("div", { class: "connector_div" }, index.h("div", { class: `icon_top_connector ${step.state} ` }))) : null))))), this.breakpoint === 'mobile' && (index.h(index.Fragment, null, this.steps.map((step, index$1) => (index.h(index.Fragment, null, index.h("gb-step-base", { size: this.size, type: "featured_icon_left", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText }))))))))));
+        return (index.h(index.Fragment, null, this.type === 'icon' && (index.h("div", { key: '09e93bf913277d8b71102cd2334346c908072952', class: "icons_centered_div" }, this.breakpoint === 'desktop' && (index.h("div", { key: 'ce8afe0fb379ed11246a1eff5d7809fcc9e35342', class: "step_div" }, this.steps.map((step, index$1) => (index.h(index.Fragment, null, index.h("gb-step-base", { size: this.size, type: "icon_top", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText, breakpoint: "desktop" }), index$1 !== this.steps.length - 1 ? (index.h("div", { class: "connector_div" }, index.h("div", { class: `icon_top_connector ${step.state} ` }))) : null))))), this.breakpoint === 'mobile' && (index.h(index.Fragment, null, this.steps.map((step, index$1) => (index.h(index.Fragment, null, index.h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText })))))))), this.type === 'featured_icon' && (index.h("div", { key: '1d417ecc61ca9dc80324648eb194feef5296552c', class: "icons_centered_div" }, this.breakpoint === 'desktop' && (index.h("div", { key: '5019171556f1fd3f9838cd0a2400d293df4b1ce1', class: "step_div" }, this.steps.map((step, index$1) => (index.h(index.Fragment, null, index.h("gb-step-base", { size: this.size, type: "icon_top", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText, breakpoint: "desktop" }), index$1 !== this.steps.length - 1 ? (index.h("div", { class: "connector_div" }, index.h("div", { class: `icon_top_connector ${step.state} ` }))) : null))))), this.breakpoint === 'mobile' && (index.h(index.Fragment, null, this.steps.map((step, index$1) => (index.h(index.Fragment, null, index.h("gb-step-base", { size: this.size, type: "featured_icon_left", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText }))))))))));
     }
 };
 GbStepperHorizontalIconsCentered.style = gbStepperHorizontalIconsCenteredCss;

package/dist/cjs/gb-stepper-horizontal-icons-connected.cjs.entry.js

@@ -27,7 +27,7 @@ const GbStepperHorizontalIconsCentered = class {
         ];
     }
     render() {
-        return (index.h("div", { key: '8667d8e997830a0080de281d5e289a69900bb085', class: "icons_centered_container" }, index.h("div", { key: '2efcfd5d6a2d19bd3ecb235e57265db154fddee5', class: "icons_centered_div" })));
+        return (index.h("div", { key: '9d4e134e23b1ca5b9f8216e6c2b0a36995759a3f', class: "icons_centered_container" }, index.h("div", { key: '8afb200432d236cca7ee39ff5df9ec65edf29b8a', class: "icons_centered_div" })));
     }
 };
 GbStepperHorizontalIconsCentered.style = gbStepperHorizontalIconsConnectedCss;

package/dist/cjs/gb-stepper-horizontal-line-with-text.cjs.entry.js

@@ -47,7 +47,7 @@ const GbStepperHorizontalLineWithText = class {
         this.showSupportingText = this.width < 768 ? false : true;
     }
     render() {
-        return (index.h("div", { key: 'e4ed87570eb726eaa6dd907fc6526abe8b11e6d4', class: "text_with_line" }, this.internalSteps.map(step => (index.h("gb-step-base", { size: this.size, type: "text_line", state: step.state, status: step.status, label: step.label, "supporting-text": step.supportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })))));
+        return (index.h("div", { key: '32fc087ee90403e4d97d833b39fc388be7d386e5', class: "text_with_line" }, this.internalSteps.map(step => (index.h("gb-step-base", { size: this.size, type: "text_line", state: step.state, status: step.status, label: step.label, "supporting-text": step.supportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })))));
     }
     static get watchers() { return {
         "steps": ["onStepsChanged"]

package/dist/cjs/gb-stepper-horizontal-minimal-icons.cjs.entry.js

@@ -32,7 +32,7 @@ const GbStepperHorizontalMinimalIcons = class {
     }
     render() {
         const indexOfCurrentStep = this.steps.findIndex(step => step.status === 'current');
-        return (index.h("div", { key: 'f0b6c6908391bcfc99dea20c2045e236b1f8d664', class: `minimai_icons_container ${this.position}` }, index.h("div", { key: '82fd04e7e2e3d524e3fcd78a2e9e71735af26408', class: `minimai_icons_div ${this.size} ${this.position}` }, this.position !== 'left' && (index.h(index.Fragment, null, this.text && (index.h("p", { key: 'c3fed5524674eed51afcabf0f6118b98aebdb52c', class: "step_text text-sm-medium" }, this.stepLabel, " ", indexOfCurrentStep + 1, " of ", this.steps.length)))), this.steps.map(step => (index.h("gb-step-icon-base", { size: this.size, status: step.status, state: step.state }))), this.position === 'left' && (index.h(index.Fragment, null, this.text && (index.h("p", { key: 'b11feeec3b256c1c9c3b6017a9d128ec839736e2', class: "step_text text-sm-medium" }, this.stepLabel, " ", indexOfCurrentStep + 1, " of ", this.steps.length)))))));
+        return (index.h("div", { key: '99a677572046f00d36a4e56599005ca77a4ff925', class: `minimai_icons_container ${this.position}` }, index.h("div", { key: '8f63d2be5b01f360303d7809e524e4296661aa8d', class: `minimai_icons_div ${this.size} ${this.position}` }, this.position !== 'left' && (index.h(index.Fragment, null, this.text && (index.h("p", { key: 'bd3b37b4187bcbea05d251a01b49a2065706866c', class: "step_text text-sm-medium" }, this.stepLabel, " ", indexOfCurrentStep + 1, " of ", this.steps.length)))), this.steps.map(step => (index.h("gb-step-icon-base", { size: this.size, status: step.status, state: step.state }))), this.position === 'left' && (index.h(index.Fragment, null, this.text && (index.h("p", { key: '228b2d9c0d40db8491c4d20bb3b9492023517114', class: "step_text text-sm-medium" }, this.stepLabel, " ", indexOfCurrentStep + 1, " of ", this.steps.length)))))));
     }
 };
 GbStepperHorizontalMinimalIcons.style = gbStepperHorizontalMinimalIconsCss;

package/dist/cjs/gb-stepper-vertical-icons-with-text.cjs.entry.js

@@ -38,7 +38,7 @@ const GbstepperVerticalIconsWithText = class {
         this.stepClicked.emit(index);
     }
     render() {
-        return (index.h("div", { key: '14b85cafc4938404d37dbff4bad1a02387f0272b', class: "vertical_stepper_div" }, this.type === 'icon' && (index.h(index.Fragment, null, this.internalSteps.map((step, index$1) => (index.h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : this.connector, label: step.label, "supporting-text": step.supportingText, onClick: () => this.emitIndex(index$1) })))))));
+        return (index.h("div", { key: 'd99777efdb5eb30cc70ccf75c5ffba93a9f9e264', class: "vertical_stepper_div" }, this.type === 'icon' && (index.h(index.Fragment, null, this.internalSteps.map((step, index$1) => (index.h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index$1 === this.steps.length - 1 ? false : this.connector, label: step.label, "supporting-text": step.supportingText, onClick: () => this.emitIndex(index$1) })))))));
     }
     static get watchers() { return {
         "steps": ["onStepsChanged"]

package/dist/cjs/gb-vertical-tabs.cjs.entry.js

@@ -32,7 +32,7 @@ const GbVerticalTabs = class {
         this.tabItemClicked.emit({ index, label });
     }
     render() {
-        return (index.h("div", { key: 'bcb7f6a7da16cfda2c2b54b10c15208f0aa0339d', class: `vertical_tab_div` }, this.internalTabs.map((tab, index$1) => (index.h("gb-tab-button-base", { size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": tab.name, current: this.activeIndex === index$1, onClick: () => this.handleTabClick(index$1, tab.name), alignment: "vertical" })))));
+        return (index.h("div", { key: '3e1fc1b6d97df5a6a063e9f8e6e83e017f62b544', class: `vertical_tab_div` }, this.internalTabs.map((tab, index$1) => (index.h("gb-tab-button-base", { size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": tab.name, current: this.activeIndex === index$1, onClick: () => this.handleTabClick(index$1, tab.name), alignment: "vertical" })))));
     }
     static get watchers() { return {
         "tabs": ["onTabsChanged"]

package/dist/cjs/test-input-tag.cjs.entry.js

@@ -78,7 +78,7 @@ const TestInputTag = class {
         this.exportValue.emit(this.selectedStaff);
     }
     render() {
-        return (index.h("div", { key: 'e265282f76a759d969599c185ad5e9a3c46db44a', class: "input_group", ref: el => (this.inputGroupElement = el) }, index.h("label", { key: '732b65546f9f004ae104517c410121ad8725e89d', htmlFor: this.idOfInput }, this.labelText), index.h("div", { key: '26e4ec22abedfbdbc09e36970f5b9a5d5b218fee', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("input", { key: '5d297acfcd26a3df02100bb15b8bda330dcaf7a4', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), index.h("div", { key: '3b942313cc8808ee9ac9a32fce77bc8646e6eec2', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index$1) => (
+        return (index.h("div", { key: 'ae201263df9ce6ce9a269b7ada1d54d20222385f', class: "input_group", ref: el => (this.inputGroupElement = el) }, index.h("label", { key: 'a0ada4646f088d1c6684d5e9b42a17b9dec1a815', htmlFor: this.idOfInput }, this.labelText), index.h("div", { key: 'a3c9e7d8b3501965a3465c71cfc1d77731a9bfd4', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("input", { key: '309f94fedfbb6772cbefbb73702421c348bee970', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), index.h("div", { key: '8481e65dfbb3ed828e72e651a4285c389217fd20', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index$1) => (
         //   <span>
         //     {staff.fullname}
         //     <img
@@ -87,7 +87,7 @@ const TestInputTag = class {
         //       onClick={() => this.removeStaff(index)}
         //     />
         //   </span>
-        index.h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index$1) }, index.h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", null, staff.fullname.split(' ')[0])))))), this.show && (index.h("div", { key: '6c3533aca559fcf2b05cfa7e0d7424a3dd45037f', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
+        index.h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index$1) }, index.h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", null, staff.fullname.split(' ')[0])))))), this.show && (index.h("div", { key: 'f17e9758f35b957710387c60a1181b0d2e8d600c', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
         //   <li class="aList" onClick={() => this.selectStaff(staff)}>
         //     <div>{staff.fullname}</div>
         //     <div>{staff.email}</div>

package/dist/collection/assets/sent.svg

@@ -1,3 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.88903 10.1324L8.68643 10.8545H8.68643L8.88903 10.1324ZM10.2175 11.5657L9.48496 11.7268V11.7268L10.2175 11.5657ZM12.6675 17.917L12.7006 17.1677L12.6675 17.917ZM2.08301 7.12649L2.833 7.12165L2.08301 7.12649ZM17.5394 2.54476L16.9899 3.0551V3.0551L17.5394 2.54476ZM9.05265 9.88697C8.75975 10.1799 8.75975 10.6547 9.05265 10.9476C9.34554 11.2405 9.82041 11.2405 10.1133 10.9476L9.58298 10.4173L9.05265 9.88697ZM13.03 8.03096C13.3229 7.73807 13.3229 7.2632 13.03 6.9703C12.7371 6.67741 12.2622 6.67741 11.9693 6.9703L12.4996 7.50063L13.03 8.03096ZM2.08301 7.12649L1.33303 7.13132C1.33866 8.00428 1.93369 8.60931 2.53398 9.00196C3.14885 9.40415 3.94356 9.70382 4.72363 9.93644C5.5137 10.172 6.34322 10.3543 7.05326 10.5014C7.78845 10.6537 8.35111 10.7604 8.68643 10.8545L8.88903 10.1324L9.09162 9.41025C8.68981 9.29751 8.03474 9.17287 7.35759 9.03257C6.65528 8.88706 5.87784 8.71536 5.15229 8.49899C4.41673 8.27964 3.78718 8.02929 3.35507 7.74666C2.90839 7.45448 2.83376 7.23989 2.833 7.12165L2.08301 7.12649ZM10.2175 11.5657L10.95 11.4046C10.8435 10.9204 10.7001 10.4515 10.3589 10.0837C10.0142 9.71196 9.55911 9.5414 9.09162 9.41025L8.88903 10.1324L8.68643 10.8545C9.1055 10.9721 9.21243 11.0533 9.25915 11.1037C9.30941 11.1579 9.38701 11.2814 9.48496 11.7268L10.2175 11.5657ZM2.08301 7.12649L2.833 7.12165C2.83384 7.25161 2.77611 7.29231 2.83072 7.22086C2.87733 7.15986 2.97069 7.06431 3.13202 6.93791C3.45261 6.68673 3.94325 6.3894 4.57792 6.0668C5.8398 5.4254 7.56307 4.73817 9.35616 4.16099C11.1506 3.58337 12.9802 3.12723 14.4546 2.93383C15.1945 2.83679 15.8141 2.81019 16.2818 2.85527C16.785 2.90378 16.9582 3.02097 16.9899 3.0551L17.5394 2.54476L18.089 2.03441C17.667 1.57989 17.0164 1.41913 16.4257 1.36219C15.7994 1.30183 15.0547 1.34228 14.2595 1.44657C12.6639 1.65586 10.7407 2.13953 8.89655 2.73314C7.05101 3.32721 5.24979 4.04265 3.89825 4.72962C3.22621 5.07121 2.6379 5.41949 2.20693 5.75715C1.99248 5.92516 1.79191 6.10982 1.63888 6.31008C1.49385 6.49987 1.33078 6.78284 1.33303 7.13132L2.08301 7.12649ZM12.6675 17.917L12.6344 18.6663C12.9894 18.682 13.2784 18.5199 13.4672 18.3797C13.6674 18.231 13.8521 18.0343 14.0198 17.8249C14.3572 17.4034 14.7082 16.8248 15.0548 16.1625C15.7519 14.8302 16.4885 13.0474 17.1111 11.2156C17.7334 9.38464 18.2531 7.47173 18.5038 5.87851C18.6288 5.08435 18.6917 4.34114 18.6568 3.71436C18.624 3.12567 18.4984 2.47521 18.089 2.03441L17.5394 2.54476L16.9899 3.0551C17.0234 3.09119 17.1304 3.28111 17.1591 3.79769C17.1857 4.27617 17.1389 4.90309 17.0221 5.64532C16.7892 7.12489 16.2969 8.94982 15.6909 10.7328C15.0852 12.515 14.3771 14.2222 13.7257 15.4671C13.398 16.0935 13.0987 16.5752 12.8488 16.8874C12.7229 17.0448 12.6297 17.1332 12.5727 17.1755C12.5043 17.2264 12.5567 17.1614 12.7006 17.1677L12.6675 17.917ZM10.2175 11.5657L9.48496 11.7268C9.94334 13.8113 10.3013 15.4402 10.6834 16.5474C10.8739 17.0992 11.0919 17.5888 11.3738 17.9547C11.6699 18.3389 12.0833 18.6419 12.6344 18.6663L12.6675 17.917L12.7006 17.1677C12.6971 17.1676 12.6954 17.1684 12.6836 17.1613C12.6664 17.1509 12.6241 17.1197 12.5621 17.0392C12.4299 16.8677 12.2752 16.5618 12.1014 16.058C11.7548 15.0538 11.4174 13.5304 10.95 11.4046L10.2175 11.5657ZM9.58298 10.4173L10.1133 10.9476L13.03 8.03096L12.4996 7.50063L11.9693 6.9703L9.05265 9.88697L9.58298 10.4173Z" fill="#4B5565"/>
+<path opacity="0.4" d="M17.5399 2.54427C15.7249 0.589632 2.07223 5.37783 2.0835 7.126C2.09628 9.10839 7.41523 9.71826 8.88952 10.1319C9.77607 10.3806 10.0135 10.6355 10.2179 11.5652C11.1438 15.7756 11.6086 17.8697 12.668 17.9165C14.3566 17.9911 19.3113 4.45183 17.5399 2.54427Z" fill="#042F59"/>
+<path d="M8.88952 10.1319L8.68692 10.854H8.68692L8.88952 10.1319ZM10.2179 11.5652L9.48544 11.7263V11.7263L10.2179 11.5652ZM12.668 17.9165L12.7011 17.1673L12.668 17.9165ZM2.0835 7.126L2.83349 7.12116L2.0835 7.126ZM17.5399 2.54427L16.9903 3.05461V3.05461L17.5399 2.54427ZM9.05314 9.88648C8.76024 10.1794 8.76024 10.6542 9.05314 10.9471C9.34603 11.24 9.8209 11.24 10.1138 10.9471L9.58347 10.4168L9.05314 9.88648ZM13.0305 8.03048C13.3234 7.73758 13.3234 7.26271 13.0305 6.96982C12.7376 6.67692 12.2627 6.67692 11.9698 6.96982L12.5001 7.50014L13.0305 8.03048ZM2.0835 7.126L1.33352 7.13083C1.33915 8.00379 1.93418 8.60883 2.53447 9.00148C3.14933 9.40366 3.94405 9.70333 4.72412 9.93595C5.51418 10.1716 6.34371 10.3538 7.05375 10.5009C7.78894 10.6532 8.3516 10.7599 8.68692 10.854L8.88952 10.1319L9.09211 9.40976C8.69029 9.29703 8.03523 9.17239 7.35808 9.03208C6.65577 8.88657 5.87833 8.71487 5.15278 8.4985C4.41722 8.27916 3.78766 8.0288 3.35556 7.74617C2.90888 7.45399 2.83425 7.2394 2.83349 7.12116L2.0835 7.126ZM10.2179 11.5652L10.9504 11.4042C10.844 10.9199 10.7006 10.451 10.3594 10.0832C10.0147 9.71147 9.5596 9.54092 9.09211 9.40976L8.88952 10.1319L8.68692 10.854C9.10599 10.9716 9.21292 11.0528 9.25964 11.1032C9.3099 11.1574 9.3875 11.2809 9.48544 11.7263L10.2179 11.5652ZM2.0835 7.126L2.83349 7.12116C2.83433 7.25112 2.7766 7.29182 2.83121 7.22037C2.87782 7.15938 2.97118 7.06382 3.13251 6.93742C3.4531 6.68625 3.94373 6.38891 4.57841 6.06631C5.84029 5.42491 7.56356 4.73768 9.35665 4.16051C11.1511 3.58288 12.9807 3.12674 14.4551 2.93335C15.195 2.8363 15.8145 2.8097 16.2823 2.85478C16.7855 2.90329 16.9586 3.02048 16.9903 3.05461L17.5399 2.54427L18.0895 2.03392C17.6675 1.5794 17.0169 1.41864 16.4262 1.3617C15.7999 1.30134 15.0551 1.34179 14.26 1.44608C12.6644 1.65537 10.7412 2.13904 8.89704 2.73265C7.0515 3.32672 5.25028 4.04216 3.89874 4.72913C3.2267 5.07072 2.63839 5.419 2.20742 5.75666C1.99297 5.92467 1.7924 6.10934 1.63937 6.30959C1.49434 6.49938 1.33127 6.78235 1.33352 7.13083L2.0835 7.126ZM12.668 17.9165L12.6349 18.6658C12.9898 18.6815 13.2789 18.5194 13.4676 18.3792C13.6679 18.2305 13.8526 18.0338 14.0203 17.8244C14.3577 17.403 14.7087 16.8243 15.0552 16.1621C15.7524 14.8298 16.489 13.0469 17.1116 11.2151C17.7339 9.38415 18.2536 7.47125 18.5043 5.87802C18.6293 5.08386 18.6921 4.34065 18.6573 3.71387C18.6245 3.12519 18.4988 2.47472 18.0895 2.03392L17.5399 2.54427L16.9903 3.05461C17.0239 3.0907 17.1308 3.28062 17.1596 3.7972C17.1862 4.27568 17.1394 4.9026 17.0226 5.64483C16.7897 7.1244 16.2974 8.94933 15.6914 10.7324C15.0856 12.5145 14.3776 14.2217 13.7262 15.4666C13.3985 16.093 13.0992 16.5748 12.8493 16.887C12.7234 17.0443 12.6302 17.1327 12.5732 17.1751C12.5048 17.2259 12.5572 17.1609 12.7011 17.1673L12.668 17.9165ZM10.2179 11.5652L9.48544 11.7263C9.94383 13.8109 10.3018 15.4397 10.6839 16.5469C10.8744 17.0987 11.0924 17.5883 11.3743 17.9542C11.6703 18.3384 12.0837 18.6414 12.6349 18.6658L12.668 17.9165L12.7011 17.1673C12.6976 17.1671 12.6959 17.1679 12.6841 17.1608C12.6669 17.1504 12.6246 17.1192 12.5625 17.0387C12.4304 16.8672 12.2757 16.5613 12.1018 16.0575C11.7553 15.0533 11.4179 13.5299 10.9504 11.4042L10.2179 11.5652ZM9.58347 10.4168L10.1138 10.9471L13.0305 8.03048L12.5001 7.50014L11.9698 6.96982L9.05314 9.88648L9.58347 10.4168Z" fill="#042F59"/>
 </svg>

package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.css

@@ -2869,10 +2869,14 @@
 }
 
 /* Icon Color Styles */
-.icon.plain_background path[stroke] {
+.icon.plain_background.default path[stroke] {
   stroke: var(--color-icon, #4b5565);
 }
 
+.icon.plain_background.default path[fill] {
+  fill: var(--color-icon, #4b5565);
+}
+
 .icon.plain_background.active path[stroke] {
   stroke: var(--color-icon-information-bold, #042f59);
 }
@@ -2881,19 +2885,31 @@
   fill: var(--color-icon-information-bold, #042f59);
 }
 
-.icon.plain_background path#Icon[fill] {
+.icon.plain_background.default path#Icon[stroke] {
+  stroke: var(--color-icon, #4b5565);
+}
+
+.icon.plain_background.default path#Icon[fill] {
   fill: var(--color-icon, #4b5565);
 }
 
+.icon.plain_background.active path#Icon[stroke] {
+  stroke: var(--color-icon-information-bold, #042f59);
+}
+
 .icon.plain_background.active path#Icon[fill] {
   fill: var(--color-icon-information-bold, #042f59);
 }
 
+.icon.plain_background.active path#Accent[stroke] {
+  stroke: var(--color-icon-information-bold, #042f59);
+}
+
 .icon.plain_background.active path#Accent[fill] {
   fill: var(--color-icon-information-bold, #042f59);
 }
 
-.icon.plain_background circle[stroke] {
+.icon.plain_background.default circle[stroke] {
   stroke: var(--color-icon, #4b5565);
 }
 
@@ -2901,45 +2917,86 @@
   fill: var(--color-icon-information-bold, #042f59);
 }
 
-.icon.colored_background path[stroke] {
-    stroke: var(--color-icon, #4B5565);
+.icon.colored_background.default path[stroke] {
+  stroke: var(--color-icon, #4b5565);
+}
+
+.icon.colored_background.default path[fill] {
+  fill: var(--color-icon, #4b5565);
 }
 
 .icon.colored_background.active path[stroke] {
-    stroke: var(--color-icon-information-bold, #042F59);
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.colored_background.active path[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
+}
+
+.icon.colored_background path#Icon[stroke] {
+  stroke: var(--color-icon, #4b5565);
 }
 
 .icon.colored_background path#Icon[fill] {
-    fill: var(--color-icon, #4B5565);
+  fill: var(--color-icon, #4b5565);
 }
 
-.icon.colored_background.active path#Icon[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+.icon.colored_background.active path#Accent[stroke] {
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.colored_background.active path#Accent[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.colored_background circle[stroke] {
-    stroke: var(--color-icon, #4B5565);
+  stroke: var(--color-icon, #4b5565);
+}
+
+.icon.colored_background circle[fill] {
+  fill: var(--color-icon, #4b5565);
+}
+
+.icon.colored_background.active circle[stroke] {
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.colored_background.active circle[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
 
-.icon.plain_background.default path[fill],
+/* .icon.plain_background.default path[fill],
 .icon.colored_background.default path[fill],
 .icon.plain_background.default circle[fill],
 .icon.colored_background.default circle[fill] {
   fill: transparent;
+} */
+
+.icon.plain_background.default path.has_opacity,
+.icon.plain_background.default g.has_opacity,
+.icon.plain_background.default circle.has_opacity,
+.icon.colored_background.default path.has_opacity,
+.icon.colored_background.default g.has_opacity,
+.icon.colored_background.default circle.has_opacity {
+  opacity: 0;
 }
 
+.icon.plain_background.active path.has_opacity,
+.icon.plain_background.active g.has_opacity,
+.icon.plain_background.active circle.has_opacity,
+.icon.colored_background.active path.has_opacity,
+.icon.colored_background.active g.has_opacity,
+.icon.colored_background.active circle.has_opacity {
+  opacity: 0.5;
+}
+
+/* .icon.plain_background.default path[fill].has_opacity,
+.icon.plain_background.default g.has_opacity,
+.icon.colored_background.default path[fill].has_opacity,
+.icon.colored_background.default g.has_opacity{
+  fill: transparent;
+} */
+
 /* Text Styles */
 .label_text {
   max-width: 100%;

package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.js

@@ -1,7 +1,10 @@
 import { getAssetPath, h } from "@stencil/core";
 export class GbComplexSecondarySideBarItem {
     constructor() {
-        this.label = 'Appraisal';
+        this.state = 'default';
+        this.type = 'full_with_label';
+        this.category = 'colored_background';
+        this.label = '';
         this.icon = '';
         this.showTooltip = false;
         this.leadingIconSvg = '';
@@ -10,13 +13,28 @@ export class GbComplexSecondarySideBarItem {
         const iconPath = getAssetPath(`${iconName}`);
         const response = await fetch(iconPath);
         const svg = await response.text();
-        this.leadingIconSvg = svg;
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
+        const svgElement = svgDoc.documentElement;
+        // Add `has-opacity` class to all elements that have an opacity attribute
+        const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');
+        elementsWithOpacity.forEach(el => {
+            el.classList.add('has_opacity');
+        });
+        const gWithOpacity = svgElement.querySelectorAll('g[opacity]');
+        gWithOpacity.forEach(g => {
+            g.classList.add('has_opacity');
+        });
+        // Serialize and store
+        const modifiedSvg = svgElement.outerHTML;
+        // console.log(modifiedSvg)
+        this.leadingIconSvg = modifiedSvg;
     }
     componentDidLoad() {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '95c40ef250a694615cc791e8cbb4bdda9ff0fec7', class: `container ${this.type}` }, h("div", { key: '0e06a973c81b77f6f87d650b20fdf87e9f7f5726', class: `secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'c701dee78b2640b9bb3d11e0c21915fd603fa5b7', class: "icon" }, h("div", { key: '709c32f14cc432f00b6c825e972c3f9a1c609824', class: "icon_container" }, h("div", { key: '4fdb39198fb0aa17940b0687ab0b93e1cb51eb31', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }))), this.type === 'full_with_label' && (h("div", { key: '235ba2b2b915822789876161c547b1d05b770f93', class: "text" }, h("p", { key: 'c3f423d6d0ccb97a2a141d83af55155e2b939909', class: `label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}` }, this.label))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '229619866f0f2e8f8547b38444afe03ffc022040', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: 'f2cc0006265365e9049603d3352468f3bc8294f4', slot: "label" }, this.label))))));
+        return (h("div", { key: '57632db7fd548e55a471fb6fb51f784b579d6dde', class: `container ${this.type}` }, h("div", { key: '9e53f1559c074d85ff745d7d4dc40d7286a19cec', class: `secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'bfaa8ae13149b4decc820663850bdbcadd3a4edf', class: "icon" }, h("div", { key: '4566c395d1b2204ad346dfa79db6229817f35946', class: "icon_container" }, h("div", { key: 'a39d5902b0e852bfd9516ae5aef27ace8364431f', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }))), this.type === 'full_with_label' && (h("div", { key: 'e64f1b9b1d91b25205690894e884db2aa102cd46', class: "text" }, h("p", { key: 'd6b5bd96634d311ad825457a2b97da6988a3946c', class: `label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}` }, this.label))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: 'a381ca7df1756f7875ae463088d05d7e39d25a92', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '6e742a6c19798eb3dbcee7c24ebd2fb9c96d44b7', slot: "label" }, this.label))))));
     }
     static get is() { return "gb-complex-secondary-side-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -49,7 +67,8 @@ export class GbComplexSecondarySideBarItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "state"
+                "attribute": "state",
+                "defaultValue": "'default'"
             },
             "type": {
                 "type": "string",
@@ -68,7 +87,8 @@ export class GbComplexSecondarySideBarItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "type"
+                "attribute": "type",
+                "defaultValue": "'full_with_label'"
             },
             "category": {
                 "type": "string",
@@ -93,7 +113,8 @@ export class GbComplexSecondarySideBarItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "category"
+                "attribute": "category",
+                "defaultValue": "'colored_background'"
             },
             "label": {
                 "type": "string",
@@ -113,7 +134,7 @@ export class GbComplexSecondarySideBarItem {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label",
-                "defaultValue": "'Appraisal'"
+                "defaultValue": "''"
             },
             "icon": {
                 "type": "string",

package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-complex-secondary-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,6BAA6B;IAN1C;QAUY,UAAK,GAAW,WAAW,CAAC;QAC5B,SAAI,GAAW,EAAE,CAAC;QACD,gBAAW,GAAY,KAAK,CAAC;QAE7C,mBAAc,GAAW,EAAE,CAAC;KAwCxC;IAtCG,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM;QACF,OAAO,CACL,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE;YAClC,4DACE,KAAK,EAAE,+BAA+B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,EAChF,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBAE9C,4DAAK,KAAK,EAAC,MAAM;oBACf,4DAAK,KAAK,EAAC,gBAAgB;wBACzB,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CACrF,CACF;gBACL,IAAI,CAAC,IAAI,KAAK,iBAAiB,IAAI,CAClC,4DAAK,KAAK,EAAC,MAAM;oBACf,0DAAG,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,mBAAmB,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CACvI,CACP;gBACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,CAChD,iFAAwB,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS;oBACxD,0DAAG,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,CACrB,CACd,CACG,CACF,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Prop, State, getAssetPath, h } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-complex-secondary-side-bar-item',\r\n    styleUrl: 'gb-complex-secondary-side-bar-item.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbComplexSecondarySideBarItem {\r\n    @Prop() state: 'default' | 'active';\r\n    @Prop() type: 'full_with_label' | 'icon_only';\r\n    @Prop() category: GeneralBackgroundCategories;\r\n    @Prop() label: string = 'Appraisal';\r\n    @Prop() icon: string = '';\r\n    @Prop({ mutable: true }) showTooltip: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @State() leadingIconSvg: 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    componentDidLoad() {\r\n      this.loadIcon(this.icon);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n          <div class={`container ${this.type}`}>\r\n            <div\r\n              class={`secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`}\r\n              onMouseEnter={() => (this.showTooltip = true)}\r\n              onMouseLeave={() => (this.showTooltip = false)}\r\n            >\r\n              <div class=\"icon\">\r\n                <div class=\"icon_container\">\r\n                  <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n                </div>\r\n              </div>\r\n              {this.type === 'full_with_label' && (\r\n                <div class=\"text\">\r\n                  <p class={`label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}`}>{this.label}</p>\r\n                </div>\r\n              )}\r\n              {this.type === 'icon_only' && this.showTooltip && (\r\n                <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n                  <p slot=\"label\">{this.label}</p>\r\n                </gb-tooltip>\r\n              )}\r\n            </div>\r\n          </div>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-complex-secondary-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,6BAA6B;IAL1C;QAMU,UAAK,GAAyB,SAAS,CAAC;QACxC,SAAI,GAAoC,iBAAiB,CAAC;QAC1D,aAAQ,GAAgC,oBAAoB,CAAC;QAC7D,UAAK,GAAW,EAAE,CAAC;QACnB,SAAI,GAAW,EAAE,CAAC;QACD,gBAAW,GAAY,KAAK,CAAC;QAE7C,mBAAc,GAAW,EAAE,CAAC;KA4DtC;IA1DC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAElC,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;QAC5D,MAAM,UAAU,GAAG,MAAM,CAAC,eAAe,CAAC;QAE1C,yEAAyE;QACzE,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;QACrE,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YAC/B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAE/D,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACvB,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QAEH,sBAAsB;QACtB,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,CAAC;QACzC,2BAA2B;QAC3B,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;IACpC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE;YAClC,4DACE,KAAK,EAAE,+BAA+B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,EAChF,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBAE9C,4DAAK,KAAK,EAAC,MAAM;oBACf,4DAAK,KAAK,EAAC,gBAAgB;wBACzB,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CACrF,CACF;gBACL,IAAI,CAAC,IAAI,KAAK,iBAAiB,IAAI,CAClC,4DAAK,KAAK,EAAC,MAAM;oBACf,0DAAG,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,mBAAmB,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CACvI,CACP;gBACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,CAChD,iFAAwB,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS;oBACxD,0DAAG,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,CACrB,CACd,CACG,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-complex-secondary-side-bar-item',\r\n  styleUrl: 'gb-complex-secondary-side-bar-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbComplexSecondarySideBarItem {\r\n  @Prop() state: 'default' | 'active' = 'default';\r\n  @Prop() type: 'full_with_label' | 'icon_only' = 'full_with_label';\r\n  @Prop() category: GeneralBackgroundCategories = 'colored_background';\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop({ mutable: true }) showTooltip: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: 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\r\n    const parser = new DOMParser();\r\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n    const svgElement = svgDoc.documentElement;\r\n\r\n    // Add `has-opacity` class to all elements that have an opacity attribute\r\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n    elementsWithOpacity.forEach(el => {\r\n      el.classList.add('has_opacity');\r\n    });\r\n\r\n    const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n\r\n    gWithOpacity.forEach(g => {\r\n      g.classList.add('has_opacity');\r\n    });\r\n\r\n    // Serialize and store\r\n    const modifiedSvg = svgElement.outerHTML;\r\n    // console.log(modifiedSvg)\r\n    this.leadingIconSvg = modifiedSvg;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`container ${this.type}`}>\r\n        <div\r\n          class={`secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`}\r\n          onMouseEnter={() => (this.showTooltip = true)}\r\n          onMouseLeave={() => (this.showTooltip = false)}\r\n        >\r\n          <div class=\"icon\">\r\n            <div class=\"icon_container\">\r\n              <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n            </div>\r\n          </div>\r\n          {this.type === 'full_with_label' && (\r\n            <div class=\"text\">\r\n              <p class={`label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}`}>{this.label}</p>\r\n            </div>\r\n          )}\r\n          {this.type === 'icon_only' && this.showTooltip && (\r\n            <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n              <p slot=\"label\">{this.label}</p>\r\n            </gb-tooltip>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}