npm - globuswebcomponents - Versions diffs - 2.13.0 → 2.13.1 - Mend

globuswebcomponents 2.13.0 → 2.13.1

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 (342) hide show

package/dist/collection/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.css CHANGED Viewed

@@ -2809,196 +2809,261 @@
 } */
-.container{
-    display: flex;
-    width: 6rem;
-    padding: var(--spacing-2) var(--spacing-none);
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-1);
-    cursor: pointer;
-}
-.wrapper{
-    display: flex;
-    height: 3rem;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 0.25rem;
-}
-.bar{
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
+.container {
+  display: flex;
+  width: 6rem;
+  padding: var(--spacing-2) var(--spacing-none);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
+  cursor: pointer;
+}
+.wrapper {
+  display: flex;
+  height: 3rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+}
+.bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
 }
-.icon{
-    display: flex;
-    align-items: center;
+.icon {
+  display: flex;
+  align-items: center;
 }
-.icon svg{
-    width: 1.5rem;
-    height: 1.5rem;
+.icon svg {
+  width: 1.5rem;
+  height: 1.5rem;
 }
-.container{
-    position: relative;
+.container {
+  position: relative;
 }
 /* State Styles*/
-.container.default.colored_background:hover{
-    background: var(--color-blanket, rgba(33, 44, 101, 0.2));
+.container.default.colored_background:hover {
+  background: var(--color-blanket, rgba(33, 44, 101, 0.2));
 }
-.container.colored_background.active{
-    background: var(--color-background-information-bold, #042F59);
+.container.colored_background.active {
+  background: var(--color-background-information-bold, #042f59);
 }
-.container.default.plain_background:hover{
-    background: var(--color-background-gray-subtler, #EEF2F6);
+.container.default.plain_background:hover {
+  background: var(--color-background-gray-subtler, #eef2f6);
 }
-.container.plain_background.active{
-    background: var(--color-background-information-subtler, #C8E0F9);
+.container.plain_background.active {
+  background: var(--color-background-information-subtler, #c8e0f9);
 }
 /* Icon Color Styles */
-.icon.plain_background path[stroke] {
-    stroke: var(--color-icon, #4B5565);
+.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);
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 .icon.plain_background.active path[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
-.icon.plain_background path#Icon[fill] {
-    fill: var(--color-icon, #4B5565);
+.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);
+  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);
+  fill: var(--color-icon-information-bold, #042f59);
 }
-.icon.plain_background circle[stroke] {
-    stroke: var(--color-icon, #4B5565);
+.icon.plain_background.default circle[stroke] {
+  stroke: var(--color-icon, #4b5565);
 }
 .icon.plain_background.active circle[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
+}
+.icon.colored_background.default path[stroke] {
+  stroke: var(--base-white, #ffffff);
+}
+.icon.colored_background.default path[fill] {
+  fill: var(--base-white, #ffffff);
 }
-.icon.colored_background path[stroke] {
-    stroke: var(--color-icon-inverse, #FFFFFF);
+.icon.colored_background.active path[stroke] {
+  stroke: var(--base-white, #ffffff);
 }
 .icon.colored_background.active path[fill] {
-    fill: var(--color-icon-inverse, #FFFFFF);
+  fill: var(--base-white, #ffffff);
+}
+.icon.colored_background path#Icon[stroke] {
+  stroke: var(--base-white, #ffffff);
 }
 .icon.colored_background path#Icon[fill] {
-    fill: var(--color-icon-inverse, #FFFFFF);
+  fill: var(--base-white, #ffffff);
+}
+.icon.colored_background.active path#Accent[stroke] {
+  stroke: var(--base-white, #ffffff);
 }
 .icon.colored_background.active path#Accent[fill] {
-    fill: var(--color-icon-inverse, #FFFFFF);
+  fill: var(--base-white, #ffffff);
 }
 .icon.colored_background circle[stroke] {
-    stroke: var(--color-icon-inverse, #FFFFFF);
+  stroke: var(--base-white, #ffffff);
+}
+.icon.colored_background circle[fill] {
+  fill: var(--base-white, #ffffff);
+}
+.icon.colored_background.active circle[stroke] {
+  stroke: var(--base-white, #ffffff);
 }
 .icon.colored_background.active circle[fill] {
-    fill: var(--color-icon-inverse, #FFFFFF);
+  fill: var(--base-white, #ffffff);
 }
-.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;
-}
+  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.colored_background {
-    color: #FFFFFF; /**/
+  color: #ffffff; /**/
 }
 .label_text.plain_background {
-    color: var(--color-text, #4B5565);
-}
+  color: var(--color-text, #4b5565);
+}
 .label_text.plain_background.active {
-    color: var(--color-text-information-bold, #042F59);
+  color: var(--color-text-information-bold, #042f59);
 }
 /* Compact Item Styles */
-.compact_container{
-    display: flex;
-    width: 6rem;
-    padding: var(--spacing-2) 0rem;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-1);
+.compact_container {
+  display: flex;
+  width: 6rem;
+  padding: var(--spacing-2) 0rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+.compact_wrapper {
+  display: flex;
+  width: 3rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--rounded-sm);
+  position: relative;
+  cursor: pointer;
 }
-.compact_wrapper{
-    display: flex;
-    width: 3rem;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
-    border-radius: var(--rounded-sm);
-    position: relative;
-    cursor: pointer;
+.compact_bar {
+  position: absolute;
+  top: 0.72rem;
+  left: 0;
 }
-.compact_bar{
-    position: absolute;
-    top: 0.72rem;
-    left: 0;
+.compact_wrapper.colored_background:hover {
+  background: var(--color-blanket, rgba(33, 44, 101, 0.2));
 }
-.compact_wrapper.colored_background:hover{
-    background: var(--color-blanket, rgba(33, 44, 101, 0.2));
+.compact_wrapper.colored_background.active {
+  background: #042f59;
 }
-.compact_wrapper.colored_background.active{
-    background: #042F59;
+.compact_wrapper.plain_background:hover {
+  background: var(--color-background-gray-subtler, #eef2f6);
 }
-.compact_wrapper.plain_background:hover{
-    background: var(--color-background-gray-subtler, #EEF2F6);
+.compact_wrapper.plain_background.active {
+  background: var(--color-background-information-subtler, #c8e0f9);
 }
-.compact_wrapper.plain_background.active{
-    background: var(--color-background-information-subtler, #C8E0F9);
+.compact_icon_container {
+  display: flex;
+  height: 3rem;
+  padding: var(--spacing-none) var(--spacing-5);
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+  border-radius: 62.4375rem;
 }
-.compact_icon_container{
-    display: flex;
-    height: 3rem;
-    padding: var(--spacing-none) var(--spacing-5);
-    justify-content: center;
-    align-items: center;
-    flex: 1 0 0;
-    border-radius: 62.4375rem;
+.tooltip {
+  position: absolute;
+  top: 0.4rem;
+  left: 3.3rem;
 }
-.tooltip{
-    position: absolute;
-    top: 0.4rem;
-    left: 3.3rem;
-}

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

@@ -10,7 +10,22 @@ export class GbComplexPrimarySideBarItem {
         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;
     }
     componentWillLoad() {
         this.loadIcon(this.icon);
@@ -22,7 +37,7 @@ export class GbComplexPrimarySideBarItem {
         const whiteBarSrc = getAssetPath(`assets/complex_bar_white.svg`);
         const redCompactBarSrc = getAssetPath(`assets/compact_bar_red.svg`);
         const whiteCompactBarSrc = getAssetPath(`assets/compact_bar_white.svg`);
-        return (h(Fragment, null, this.itemStyle === 'standard' && (h("div", { key: '010fdbc2b6d223274842335552db2069e87038f2', class: `container ${this.state} ${this.category}` }, h("div", { key: '0daa500cbf631dd658b923c7fc820c2505ab3096', class: `wrapper ${this.state} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '92db8d45c83749a3310f76ab432f1adb73bd7168', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'c068a7dc353564c03ec5bb6edda8426ad65be3d9', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: '61f67be1ae2029d06bc8bf8748d63558a3f529b1', class: "icon_container" }, h("div", { key: 'd6677e31219039868dcce217ee96b640abdbb11e', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg })), h("p", { key: 'e555611e56dbbc0279cdec0aeb6097b8c21b32c5', class: `label_text ${this.state} ${this.category} ${this.state === 'active' ? 'text-xs-semi-bold' : 'text-xs-regular'}` }, this.label)))), this.itemStyle === 'compact' && (h("div", { key: '7ad9b4ed781ada6907986d46d5a0cda160d224cf', class: "compact_container" }, h("div", { key: '4b648f9b365560a25fc29f1e4c13aa16a702737d', class: `compact_wrapper ${this.state} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: 'f7a95814e90381325fbeb3df652a0af97e0ff0f4', src: redCompactBarSrc, alt: "", class: "compact_bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'c6b6446c5a74cd3606f31edb82c9ba810887349c', src: whiteCompactBarSrc, alt: "", class: "compact_bar" }), h("div", { key: '5e62fd26fcd4f29dbb88a86e4fad240220caac7c', class: "compact_icon_container" }, h("div", { key: '19dab808198f8c9d0632262dc847a69e4abb2867', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg })), this.itemStyle === 'compact' && this.showTooltip && (h("gb-tooltip", { key: '63bfe3e7e25e03b885d16d86e2bf9b9cf339673b', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '2af46d17aefc492faac4b47978ecf7b7e4f47f3a', slot: "label" }, this.label))))))));
+        return (h(Fragment, null, this.itemStyle === 'standard' && (h("div", { key: '781e666284bc5d62281f8b5bc831769800f6ea59', class: `container ${this.state} ${this.category}` }, h("div", { key: '644906a7f77e7d16bc207108068bdbb8058e5804', class: `wrapper ${this.state} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: 'a3b44301053e9f5ca6417dcf62ccc75569542597', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '5a5978a699e1b5272f8a6564385fd04870853439', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: 'ac9ff7f121d6a7b801db2278db8d17a369cdaaf3', class: "icon_container" }, h("div", { key: 'f5ddc77047a3668917d76fcc654e80bd52451b81', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg })), h("p", { key: 'b0a306961055edbbf1e0274fa21885a2d1bda1f2', class: `label_text ${this.state} ${this.category} ${this.state === 'active' ? 'text-xs-semi-bold' : 'text-xs-regular'}` }, this.label)))), this.itemStyle === 'compact' && (h("div", { key: '478f637c3ff5bdcddd584c5c1480d6c25830a9bc', class: "compact_container" }, h("div", { key: 'c495aa81bb51b026ca72e0eeeb3d21dd6caf2446', class: `compact_wrapper ${this.state} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '1970de54c1faa99739cced473cbd0e71fa3c0787', src: redCompactBarSrc, alt: "", class: "compact_bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'a10cfb32848bed6f9e8744ecad0c8e87a0c3d2a7', src: whiteCompactBarSrc, alt: "", class: "compact_bar" }), h("div", { key: '6544db1db8e4c2532eb90562ffe2b2c196bc4ff7', class: "compact_icon_container" }, h("div", { key: '7e127486f086d8d61818a60cd88af3a8ff005406', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg })), this.itemStyle === 'compact' && this.showTooltip && (h("gb-tooltip", { key: '4b1334a6528e14746ef87412133f551cf2bc4374', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '0c0016042713be4197022d06299f6c1f81cca158', slot: "label" }, this.label))))))));
     }
     static get is() { return "gb-complex-primary-side-bar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-complex-primary-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;~~AAS3F~~,MAAM,OAAO,2BAA2B;~~IANxC~~;~~QAUY~~,SAAI,GAAW,EAAE,CAAC;QAClB,UAAK,GAAW,aAAa,CAAC;QACb,gBAAW,GAAY,KAAK,CAAC;QAC7C,mBAAc,GAAW,EAAE,CAAC;~~KAyDxC~~;~~IAtDG~~,KAAK,CAAC,QAAQ,CAAC,QAAgB;~~QAC3B~~,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;~~IAC9B~~,CAAC;IAED,iBAAiB;~~QACb~~,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;~~IAC7B~~,CAAC;IAED,uBAAuB;IAEvB,IAAI;IAEJ,MAAM;~~QACF~~,MAAM,SAAS,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAC7D,MAAM,WAAW,GAAG,YAAY,CAAC,8BAA8B,CAAC,CAAC;QACjE,MAAM,gBAAgB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QACpE,MAAM,kBAAkB,GAAG,YAAY,CAAC,8BAA8B,CAAC,CAAC;QAExE,OAAO,CACL;YACG,IAAI,CAAC,SAAS,KAAK,UAAU,IAAI,CAChC,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACpD,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjD,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,kBAAkB,IAAI,4DAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,KAAK,GAAG;oBAC7G,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,oBAAoB,IAAI,4DAAK,GAAG,EAAE,WAAW,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,KAAK,GAAG;oBAClH,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;oBACN,0DAAG,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CACxI,CACF,CACP;YACA,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,CAC/B,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;oBACxJ,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,kBAAkB,IAAI,4DAAK,GAAG,EAAE,gBAAgB,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,aAAa,GAAG;oBAC5H,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,oBAAoB,IAAI,4DAAK,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,aAAa,GAAG;oBACjI,4DAAK,KAAK,EAAC,wBAAwB;wBACjC,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CACrF;oBACL,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,CACnD,iFAAwB,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS;~~wBACrD~~,0DAAG,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,~~CACxB~~,CACd,CACG,CACF,CACP,CACA,CACJ,CAAC;~~IACN~~,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ~~","sourcesContent":["import { Component, Element, Prop, State, getAssetPath, h, Fragment } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-complex-primary-side-bar-item',\r\n styleUrl: 'gb-complex-primary-side-bar-item.css',\r\n shadow: true\r\n})\r\~~n\r\~~nexport class GbComplexPrimarySideBarItem {\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() itemStyle: 'standard' \| 'compact';\r\n @Prop() state: 'default' \| 'active';\r\n @Prop() icon: string = '';\r\n @Prop() label: string = 'Recruitment';\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @State() leadingIconSvg: string = '';\r\n @Element() el: HTMLElement;\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 componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n // componentDidLoad() {\r\n \r\n // }\r\n\r\n render() {\r\n const redBarSrc = getAssetPath(`assets/complex_bar_red.svg`);\r\n const whiteBarSrc = getAssetPath(`assets/complex_bar_white.svg`);\r\n const redCompactBarSrc = getAssetPath(`assets/compact_bar_red.svg`);\r\n const whiteCompactBarSrc = getAssetPath(`assets/compact_bar_white.svg`);\r\n\r\n return (\r\n <>\r\n {this.itemStyle === 'standard' && (\r\n <div class={`container ${this.state} ${this.category}`}>\r\n <div class={`wrapper ${this.state} ${this.category}`}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n <div class=\"icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n <p class={`label_text ${this.state} ${this.category} ${this.state === 'active' ? 'text-xs-semi-bold' : 'text-xs-regular'}`}>{this.label}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.itemStyle === 'compact' && (\r\n <div class=\"compact_container\">\r\n <div class={`compact_wrapper ${this.state} ${this.category}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redCompactBarSrc} alt=\"\" class=\"compact_bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteCompactBarSrc} alt=\"\" class=\"compact_bar\" />}\r\n <div class=\"compact_icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n {this.itemStyle === 'compact' && 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 }\r\n}"]}
1	+ {"version":3,"file":"gb-complex-primary-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, State, getAssetPath, h, Fragment } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-complex-primary-side-bar-item',\r\n styleUrl: 'gb-complex-primary-side-bar-item.css',\r\n shadow: true,\r\n})\r\nexport class GbComplexPrimarySideBarItem {\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() itemStyle: 'standard' \| 'compact';\r\n @Prop() state: 'default' \| 'active';\r\n @Prop() icon: string = '';\r\n @Prop() label: string = 'Recruitment';\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @State() leadingIconSvg: string = '';\r\n @Element() el: HTMLElement;\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 componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n // componentDidLoad() {\r\n\r\n // }\r\n\r\n render() {\r\n const redBarSrc = getAssetPath(`assets/complex_bar_red.svg`);\r\n const whiteBarSrc = getAssetPath(`assets/complex_bar_white.svg`);\r\n const redCompactBarSrc = getAssetPath(`assets/compact_bar_red.svg`);\r\n const whiteCompactBarSrc = getAssetPath(`assets/compact_bar_white.svg`);\r\n\r\n return (\r\n <>\r\n {this.itemStyle === 'standard' && (\r\n <div class={`container ${this.state} ${this.category}`}>\r\n <div class={`wrapper ${this.state} ${this.category}`}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n <div class=\"icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n <p class={`label_text ${this.state} ${this.category} ${this.state === 'active' ? 'text-xs-semi-bold' : 'text-xs-regular'}`}>{this.label}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.itemStyle === 'compact' && (\r\n <div class=\"compact_container\">\r\n <div class={`compact_wrapper ${this.state} ${this.category}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redCompactBarSrc} alt=\"\" class=\"compact_bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteCompactBarSrc} alt=\"\" class=\"compact_bar\" />}\r\n <div class=\"compact_icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n {this.itemStyle === 'compact' && 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 }\r\n}\r\n"]}

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

@@ -2941,6 +2941,19 @@
 }
 /* Text Styles */
+.label_text {
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  scrollbar-width: none;
+}
+.label_text::-webkit-scrollbar {
+  display: none;
+}
 .label_text.colored_background,
 .label_text.plain_background {
   color: var(--color-text, #4b5565); /**/
@@ -2953,6 +2966,6 @@
 .tooltip {
   position: absolute;
-  top: 0.3rem;
+  top: 0rem;
   left: 4.8rem;
 }

package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js CHANGED Viewed

@@ -203,7 +203,7 @@ export class GbHorizontalTabs {
         this.tabItemClicked.emit(index);
     }
     render() {
-        return (h("div", { key: '4aff83589e8f2c9173f74ee9f5cba31e3c5c930c', class: `horizontal_tab_div_wrapper ${this.type}` }, h("div", { key: 'a29d85b579ade73bf6e6e9176569e51e0efcb37f', class: "scroll_button_div left" }, this.showLeftButton && (h("div", { key: 'aca2f2ab05fe0dae5ed390d603ba71a50da7c5e9', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'b5ef036e57df70f4f2cd410b13c885ffddb673d0', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '7f8583eefef4544e5d7317f433574c3fa1cb82c5', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '7184dd6a5883cc048fe53bb89a5916a4062c05b5', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '278defd9b4c32b8fcd30ea4759badcb3f45b3261', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), h("div", { key: 'f212e56576cb3aaa6fad8f0f8c168109ef01c3f8', class: "scroll_button_div right" }, this.showRightButton && (h("div", { key: 'eded2ec6497d721892191942a2f54b7655687636', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '1618181859db054c37f323af2c7910e92af4a72a', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'b6f80ecb308ff34df81ccff50dc08861eda8451c', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h("div", { key: '4aff83589e8f2c9173f74ee9f5cba31e3c5c930c', class: `horizontal_tab_div_wrapper ${this.type}` }, this.showLeftButton && (h("div", { key: 'b8997f9bd2e2777fea6dc80920a0f595324a54a1', class: "scroll_button_div left" }, h("div", { key: '8cd875d42796f4cfe202b39f83f26c325b7661cf', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'b5ef036e57df70f4f2cd410b13c885ffddb673d0', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '7f8583eefef4544e5d7317f433574c3fa1cb82c5', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '7184dd6a5883cc048fe53bb89a5916a4062c05b5', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '278defd9b4c32b8fcd30ea4759badcb3f45b3261', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), this.showRightButton && (h("div", { key: '56ad6b14189e5b13393f1df415b1f4d13c8b0f5c', class: "scroll_button_div right" }, h("div", { key: '7dee4281b68809bd2670e079fbe03a4343bba78e', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '1618181859db054c37f323af2c7910e92af4a72a', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'b6f80ecb308ff34df81ccff50dc08861eda8451c', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "gb-horizontal-tabs"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Listen, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-horizontal-tabs',\r\n styleUrl: 'gb-horizontal-tabs.css',\r\n shadow: true,\r\n})\r\nexport class GbHorizontalTabs {\r\n @Prop() type: TabTypes;\r\n @Prop() size: GeneralSizes;\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() badge: boolean = false;\r\n @Prop({ mutable: true }) activeIndex: number;\r\n @Prop() tabs: { name: string; index: number; badgeCount?: string }[] = [\r\n // {\r\n // name: 'All accounts',\r\n // index: 0,\r\n // badgeCount: '5',\r\n // },\r\n // {\r\n // name: 'LCY Accounts',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'FCY',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n ];\r\n @State() internalTabs: { name: string; index: number; badgeCount?: string }[] = [...this.tabs];\r\n @State() internalActiveIndex: number = 0;\r\n // @State() showScrollButtons: boolean = false;\r\n @State() width: number = window.innerWidth;\r\n @Event() tabItemClicked: EventEmitter<number>;\r\n @State() showLeftButton = false;\r\n @State() showRightButton = false;\r\n private tabContainer!: HTMLElement;\r\n private touchStartX: number = 0;\r\n private touchEndX: number = 0;\r\n private mouseStartX: number = 0;\r\n private isMouseDown: boolean = false;\r\n\r\n componentDidLoad() {\r\n this.updateScrollButtons();\r\n }\r\n\r\n scrollLeft() {\r\n this.tabContainer.scrollBy({ left: -200, behavior: 'smooth' });\r\n }\r\n\r\n scrollRight() {\r\n this.tabContainer.scrollBy({ left: 200, behavior: 'smooth' });\r\n }\r\n\r\n handleScroll() {\r\n this.updateScrollButtons();\r\n }\r\n\r\n handleTouchStart(e: TouchEvent) {\r\n this.touchStartX = e.touches[0].clientX;\r\n }\r\n\r\n handleTouchEnd(e: TouchEvent) {\r\n this.touchEndX = e.changedTouches[0].clientX;\r\n this.handleSwipe();\r\n }\r\n\r\n handleSwipe() {\r\n const swipeThreshold = 50; // minimum distance for a swipe\r\n const diff = this.touchStartX - this.touchEndX;\r\n\r\n if (Math.abs(diff) > swipeThreshold) {\r\n if (diff > 0) {\r\n // Swiped left, scroll right\r\n this.scrollRight();\r\n } else {\r\n // Swiped right, scroll left\r\n this.scrollLeft();\r\n }\r\n }\r\n }\r\n\r\n handleMouseDown(e: MouseEvent) {\r\n this.isMouseDown = true;\r\n this.mouseStartX = e.clientX;\r\n }\r\n\r\n handleMouseUp(e: MouseEvent) {\r\n if (!this.isMouseDown) return;\r\n this.isMouseDown = false;\r\n const mouseEndX = e.clientX;\r\n const swipeThreshold = 50;\r\n const diff = this.mouseStartX - mouseEndX;\r\n\r\n if (Math.abs(diff) > swipeThreshold) {\r\n if (diff > 0) {\r\n // Dragged left, scroll right\r\n this.scrollRight();\r\n } else {\r\n // Dragged right, scroll left\r\n this.scrollLeft();\r\n }\r\n }\r\n }\r\n\r\n handleMouseLeave() {\r\n this.isMouseDown = false;\r\n }\r\n\r\n @Listen('resize', { target: 'window' })\r\n updateScrollButtons() {\r\n if (!this.tabContainer) return;\r\n\r\n // Read current viewport width so behavior updates dynamically on resize\r\n this.width = window.innerWidth;\r\n\r\n if (this.width > 768) {\r\n const { scrollLeft, scrollWidth, clientWidth } = this.tabContainer;\r\n\r\n // Only show buttons if overflow exists and the width greater than 768px for screens larger than mobile\r\n const isOverflowing = scrollWidth > clientWidth;\r\n this.showLeftButton = isOverflowing && scrollLeft > 0;\r\n this.showRightButton = isOverflowing && scrollLeft + clientWidth < scrollWidth - 1;\r\n } else {\r\n this.showLeftButton = false;\r\n this.showRightButton = false;\r\n }\r\n }\r\n\r\n @Watch('activeIndex')\r\n setActiveIndex(_oldValue: number, newValue: number) {\r\n this.internalActiveIndex = newValue;\r\n }\r\n\r\n @Watch('tabs')\r\n onTabsChanged(newTabs: { name: string; index: number; badgeCount?: string }[]) {\r\n this.internalTabs = newTabs;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalTabs = this.tabs;\r\n }\r\n\r\n componentWillRender() {\r\n this.internalActiveIndex = this.activeIndex;\r\n }\r\n\r\n async handleTabClick(index: number) {\r\n this.activeIndex = index;\r\n this.tabItemClicked.emit(index);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`horizontal_tab_div_wrapper ${this.type}`}>\r\n <div class=\"scroll_button_div left\">\r\n {this.showLeftButton && (\r\n <div class=\"scroll_button\" onClick={() => this.scrollLeft()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18\"\r\n stroke=\"var(--color-icon, #4B5565)\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n <div\r\n class=\"horizontal_tab_wrapper\"\r\n ref={el => (this.tabContainer = el as HTMLElement)}\r\n onScroll={() => this.handleScroll()}\r\n onTouchStart={e => this.handleTouchStart(e)}\r\n onTouchEnd={e => this.handleTouchEnd(e)}\r\n onMouseDown={e => this.handleMouseDown(e)}\r\n onMouseUp={e => this.handleMouseUp(e)}\r\n onMouseLeave={() => this.handleMouseLeave()}\r\n >\r\n <div class={`horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}`}>\r\n {this.internalTabs.map((tab, index) => (\r\n <gb-tab-button-base\r\n class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n size={this.size}\r\n full-width={this.fullWidth}\r\n type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n onClick={() => this.handleTabClick(index)}\r\n current={this.internalActiveIndex === index}\r\n tab-name={tab.name}\r\n badge={this.badge}\r\n alignment=\"horizontal\"\r\n >\r\n <p slot=\"count\">{tab.badgeCount}</p>\r\n </gb-tab-button-base>\r\n ))}\r\n </div>\r\n </div>\r\n <div class=\"scroll_button_div right\">\r\n {this.showRightButton && (\r\n <div class=\"scroll_button\" onClick={() => this.scrollRight()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18\"\r\n stroke=\"var(--color-icon, #4B5565)\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Listen, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-horizontal-tabs',\r\n styleUrl: 'gb-horizontal-tabs.css',\r\n shadow: true,\r\n})\r\nexport class GbHorizontalTabs {\r\n @Prop() type: TabTypes;\r\n @Prop() size: GeneralSizes;\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() badge: boolean = false;\r\n @Prop({ mutable: true }) activeIndex: number;\r\n @Prop() tabs: { name: string; index: number; badgeCount?: string }[] = [\r\n // {\r\n // name: 'All accounts',\r\n // index: 0,\r\n // badgeCount: '5',\r\n // },\r\n // {\r\n // name: 'LCY Accounts',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'FCY',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n // {\r\n // name: 'Second',\r\n // index: 1,\r\n // badgeCount: '10',\r\n // },\r\n ];\r\n @State() internalTabs: { name: string; index: number; badgeCount?: string }[] = [...this.tabs];\r\n @State() internalActiveIndex: number = 0;\r\n // @State() showScrollButtons: boolean = false;\r\n @State() width: number = window.innerWidth;\r\n @Event() tabItemClicked: EventEmitter<number>;\r\n @State() showLeftButton = false;\r\n @State() showRightButton = false;\r\n private tabContainer!: HTMLElement;\r\n private touchStartX: number = 0;\r\n private touchEndX: number = 0;\r\n private mouseStartX: number = 0;\r\n private isMouseDown: boolean = false;\r\n\r\n componentDidLoad() {\r\n this.updateScrollButtons();\r\n }\r\n\r\n scrollLeft() {\r\n this.tabContainer.scrollBy({ left: -200, behavior: 'smooth' });\r\n }\r\n\r\n scrollRight() {\r\n this.tabContainer.scrollBy({ left: 200, behavior: 'smooth' });\r\n }\r\n\r\n handleScroll() {\r\n this.updateScrollButtons();\r\n }\r\n\r\n handleTouchStart(e: TouchEvent) {\r\n this.touchStartX = e.touches[0].clientX;\r\n }\r\n\r\n handleTouchEnd(e: TouchEvent) {\r\n this.touchEndX = e.changedTouches[0].clientX;\r\n this.handleSwipe();\r\n }\r\n\r\n handleSwipe() {\r\n const swipeThreshold = 50; // minimum distance for a swipe\r\n const diff = this.touchStartX - this.touchEndX;\r\n\r\n if (Math.abs(diff) > swipeThreshold) {\r\n if (diff > 0) {\r\n // Swiped left, scroll right\r\n this.scrollRight();\r\n } else {\r\n // Swiped right, scroll left\r\n this.scrollLeft();\r\n }\r\n }\r\n }\r\n\r\n handleMouseDown(e: MouseEvent) {\r\n this.isMouseDown = true;\r\n this.mouseStartX = e.clientX;\r\n }\r\n\r\n handleMouseUp(e: MouseEvent) {\r\n if (!this.isMouseDown) return;\r\n this.isMouseDown = false;\r\n const mouseEndX = e.clientX;\r\n const swipeThreshold = 50;\r\n const diff = this.mouseStartX - mouseEndX;\r\n\r\n if (Math.abs(diff) > swipeThreshold) {\r\n if (diff > 0) {\r\n // Dragged left, scroll right\r\n this.scrollRight();\r\n } else {\r\n // Dragged right, scroll left\r\n this.scrollLeft();\r\n }\r\n }\r\n }\r\n\r\n handleMouseLeave() {\r\n this.isMouseDown = false;\r\n }\r\n\r\n @Listen('resize', { target: 'window' })\r\n updateScrollButtons() {\r\n if (!this.tabContainer) return;\r\n\r\n // Read current viewport width so behavior updates dynamically on resize\r\n this.width = window.innerWidth;\r\n\r\n if (this.width > 768) {\r\n const { scrollLeft, scrollWidth, clientWidth } = this.tabContainer;\r\n\r\n // Only show buttons if overflow exists and the width greater than 768px for screens larger than mobile\r\n const isOverflowing = scrollWidth > clientWidth;\r\n this.showLeftButton = isOverflowing && scrollLeft > 0;\r\n this.showRightButton = isOverflowing && scrollLeft + clientWidth < scrollWidth - 1;\r\n } else {\r\n this.showLeftButton = false;\r\n this.showRightButton = false;\r\n }\r\n }\r\n\r\n @Watch('activeIndex')\r\n setActiveIndex(_oldValue: number, newValue: number) {\r\n this.internalActiveIndex = newValue;\r\n }\r\n\r\n @Watch('tabs')\r\n onTabsChanged(newTabs: { name: string; index: number; badgeCount?: string }[]) {\r\n this.internalTabs = newTabs;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalTabs = this.tabs;\r\n }\r\n\r\n componentWillRender() {\r\n this.internalActiveIndex = this.activeIndex;\r\n }\r\n\r\n async handleTabClick(index: number) {\r\n this.activeIndex = index;\r\n this.tabItemClicked.emit(index);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`horizontal_tab_div_wrapper ${this.type}`}>\r\n {this.showLeftButton && (\r\n <div class=\"scroll_button_div left\">\r\n <div class=\"scroll_button\" onClick={() => this.scrollLeft()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18\"\r\n stroke=\"var(--color-icon, #4B5565)\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n )}\r\n <div\r\n class=\"horizontal_tab_wrapper\"\r\n ref={el => (this.tabContainer = el as HTMLElement)}\r\n onScroll={() => this.handleScroll()}\r\n onTouchStart={e => this.handleTouchStart(e)}\r\n onTouchEnd={e => this.handleTouchEnd(e)}\r\n onMouseDown={e => this.handleMouseDown(e)}\r\n onMouseUp={e => this.handleMouseUp(e)}\r\n onMouseLeave={() => this.handleMouseLeave()}\r\n >\r\n <div class={`horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}`}>\r\n {this.internalTabs.map((tab, index) => (\r\n <gb-tab-button-base\r\n class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n size={this.size}\r\n full-width={this.fullWidth}\r\n type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n onClick={() => this.handleTabClick(index)}\r\n current={this.internalActiveIndex === index}\r\n tab-name={tab.name}\r\n badge={this.badge}\r\n alignment=\"horizontal\"\r\n >\r\n <p slot=\"count\">{tab.badgeCount}</p>\r\n </gb-tab-button-base>\r\n ))}\r\n </div>\r\n </div>\r\n {this.showRightButton && (\r\n <div class=\"scroll_button_div right\">\r\n <div class=\"scroll_button\" onClick={() => this.scrollRight()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18\"\r\n stroke=\"var(--color-icon, #4B5565)\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -2818,6 +2818,10 @@ input {
   outline: none;
 }
+input:focus{
+  caret-color: var(--color-text, #4b5565);
+}
 /* Target Chrome/Edge/Safari autofill */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,

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

@@ -2816,7 +2816,8 @@ div {
   align-items: center;
   gap: var(--spacing-Positive-spacing-2, 0.5rem);
   border-radius: 8px;
-  border: 1px solid var(--color-boarder-input, #CDD5DF);
+  background: var(--color-background-card, #ffffff);
+  border: 1px solid var(--color-border-input, #CDD5DF);
 }
 div.sm {
@@ -2847,7 +2848,7 @@ div.active {
 div.disabled {
   background: var(--color-background-gray-subtlest, #F6F8FA);
-  border: 1px solid var(--color-boarder-disabled, #E3E8EF);
+  border: 1px solid var(--color-border-disabled, #E3E8EF);
 }
 input[type="number"]::-webkit-outer-spin-button,