globuswebcomponents 2.19.2 → 2.19.3

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: '34b18e19163cbef429844af59cd80e3fb4988b58', class: "input_group", ref: el => (this.inputGroupElement = el) }, index.h("label", { key: '49204ef9d9407f76451aad133ae590fae4f7e896', htmlFor: this.idOfInput }, this.labelText), index.h("div", { key: '3affbc703efcc909770bc96ca3e2d0c4d237fb8f', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("input", { key: '036928e5d641746b2699ea7245dec01b29f79a7a', 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: 'df0482c42fb6932eccc04ea99369c8dd223588e7', 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: 'ff42b7fc15a63c3df8ceb7a76baef2b205e07946', class: "input_group", ref: el => (this.inputGroupElement = el) }, index.h("label", { key: 'd88a12a540778fdfc60d1c055bf5450855e03893', htmlFor: this.idOfInput }, this.labelText), index.h("div", { key: 'e2c522e502b2efb96002c4c62d05e05f3262dea4', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("input", { key: 'ee699e243d68189ea06dfe6e1b1323812b2239a7', 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: '9fbd5bf3afd19decf74b086b8449fc20a1f503c4', 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: '6a678e38c617d914bcb4db6065d34351b0809ac4', 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: 'e3f07c3b7c8c469116d16d5ccbfd31491f68a612', 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/components/gb-horizontal-tabs/gb-horizontal-tabs.css

@@ -2747,11 +2747,7 @@
 #slotted_button_text.link_color.default.destructive {
   color: var(--color-text-danger, #b51726) !important;
 } */
-:host {
-  /* Without this the host defaults to display:inline, so the width:100% below
-   * has no real containing block to resolve against - consuming apps
-   * shouldn't need to wrap this in a sized container just to make the
-   * overflow/scroll-button math work. */
+:host{
   display: block;
   width: 100%;
   min-width: 0;
@@ -2781,17 +2777,6 @@
   display: flex;
   justify-content: flex-start;
   gap: var(--spacing-4);
-  /* Sized to fit all the tabs at their natural (nowrap) width, not capped to
-   * the scrollable wrapper's width - that's what lets it grow wider than the
-   * wrapper so scrollWidth > clientWidth and the scroll buttons/overflow
-   * detection actually have something to trigger on. full_width below
-   * re-pins it to 100% since that variant deliberately has no overflow. */
-  width: -moz-max-content;
-  width: max-content;
-  /* It's also a flex item of .horizontal_tab_wrapper - without this, the
-   * default flex-shrink:1 would squeeze it back down to fit, undoing the
-   * width above and silently preventing any overflow/scrolling. */
-  flex-shrink: 0;
 }
 /* Tab Type Styles */
 .horizontal_tab_div.underline,
@@ -2812,7 +2797,6 @@
 }
 /* Full Width Styles */
 .horizontal_tab_div.full_width {
-  width: 100%;
   justify-content: space-between;
 }
 .horizontal_tab_div.button_primary,
@@ -2828,9 +2812,6 @@
 }
 .scroll_button_div {
   display: flex;
-  /* Fills the tab row's actual height instead of a fixed value, so it stays
-   * correctly centered whatever the row's height ends up being (it varies by
-   * `size` and `type`) rather than only matching one specific size. */
   height: 100%;
   justify-content: center;
   align-items: center;
@@ -2838,18 +2819,20 @@
   top: 0;
   position: absolute;
   z-index: 9;
-  /* No fixed width - it's sized by its own padding/content below, on both
-   * sides, so it adapts instead of clipping/gapping at other paddings. */
 }
 .scroll_button_div.left {
   left: 0;
   background: linear-gradient(90deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);
   padding: 0.1rem 2rem 0.1rem 0.5rem;
+  /* width: 2rem;
+  height: 100%; */
 }
 .scroll_button_div.right {
   background: linear-gradient(270deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);
   padding: 0.1rem 0.5rem 0.1rem 2rem;
   right: 0;
+  width: 1.5rem;
+  height: 100%;
 }
 .scroll_button {
   display: flex;

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

@@ -5,99 +5,99 @@ export class GbHorizontalTabs {
         this.badge = false;
         this.truncate = false;
         this.tabs = [
-        // {
-        //   name: 'All accounts',
-        //   index: 0,
-        // },
-        // {
-        //   name: 'LCY Accounts',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'FCY',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
-        // {
-        //   name: 'Second',
-        //   index: 1,
-        //   badgeCount: '10',
-        // },
+            {
+                name: 'All accounts',
+                index: 0,
+            },
+            {
+                name: 'LCY Accounts',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'FCY',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
+            {
+                name: 'Second',
+                index: 1,
+                badgeCount: '10',
+            },
         ];
         this.internalTabs = [...this.tabs];
         this.internalActiveIndex = 0;
@@ -184,11 +184,6 @@ export class GbHorizontalTabs {
     }
     onTabsChanged(newTabs) {
         this.internalTabs = newTabs;
-        // `tabs` is very commonly set after mount (e.g. loaded from an API), so
-        // the overflow check needs to re-run once the new tabs have actually
-        // rendered - not just at componentDidLoad. Double rAF: one frame for
-        // Stencil to commit the internalTabs re-render, another so layout (and
-        // scrollWidth) has settled before measuring.
         requestAnimationFrame(() => {
             requestAnimationFrame(() => this.updateScrollButtons());
         });
@@ -204,7 +199,7 @@ export class GbHorizontalTabs {
         this.tabItemClicked.emit(index);
     }
     render() {
-        return (h("div", { key: 'd38105b5f3fa2ae133ce3714eb4d7f95dd669bd2', class: `horizontal_tab_div_wrapper ${this.type}` }, this.showLeftButton && (h("div", { key: 'af099e119057fd042026d6ca7ae41dc144f85c25', class: "scroll_button_div left" }, h("div", { key: '520bc13879c76f6a1b459cfa6bbbd664cdc5a73c', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'ea94ee2feb0d7296b1e102d6194e3e78c26235b3', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '48195e0efdd0833614819d0a2ee2d20027643aff', 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: '48e5c5de4b497a5559cc7ba687dc9c71864aeee8', 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: 'f519e7b1a7714d145b8dddc0c53eaceba913a6fd', 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, truncate: this.truncate, badge: tab.badgeCount ? true : !tab.badgeCount ? false : this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), this.showRightButton && (h("div", { key: '9259943c2ae1cb9d5f3570c8aa6e160c15a9a54f', class: "scroll_button_div right" }, h("div", { key: '049c7085eb81a456df7392972de6b4b25732699c', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '2e5151c39eb44355de85ef0321396e8a9d4d7085', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'f0667985bd38a229bd6e4e4a623a330750b108fd', 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: '5fd4b5ec1e1f17caeaf03f179187a03a0f48942e', class: `horizontal_tab_div_wrapper ${this.type}` }, this.showLeftButton && (h("div", { key: 'c7791a510074fba1d367c5b7cfcaed38352162ea', class: "scroll_button_div left" }, h("div", { key: '6b3d1fa88e171c0c7c30fa57facef3460e452cf5', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: '79a45e6a26c95e24fef06a3c3a22b5d2756707c7', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd7bcc7a16fa5740e48df75f5fa4601d1fcf4cb14', 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: '368bf5598033b4113f1ed36d71149ec644397927', 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: '180ace0db0de8f839eb80b70e8463b8ca380a8ac', 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, truncate: this.truncate, badge: tab.badgeCount ? true : !tab.badgeCount ? false : this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), this.showRightButton && (h("div", { key: '5496e76ecc57280e3048f1efdef61f30ddc09b0c', class: "scroll_button_div right" }, h("div", { key: '16e543a363367a88321462d62f24df2339b2a618', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: 'cc0acbafe45c0ab4598c73fb82e9074b9e4c32d2', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '865de0d23c4c6b6a87f0d5cf89cfe8d7c4122723', 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"; }
@@ -365,7 +360,7 @@ export class GbHorizontalTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    // {\n    //   name: 'All accounts',\n    //   index: 0,\n    // },\n    // {\n    //   name: 'LCY Accounts',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'FCY',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n    // {\n    //   name: 'Second',\n    //   index: 1,\n    //   badgeCount: '10',\n    // },\n  ]"
+                "defaultValue": "[\n    {\n      name: 'All accounts',\n      index: 0,\n    },\n    {\n      name: 'LCY Accounts',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'FCY',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n    {\n      name: 'Second',\n      index: 1,\n      badgeCount: '10',\n    },\n  ]"
             }
         };
     }

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

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

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

@@ -2791,9 +2791,27 @@ input:autofill {
 .label {
   color: var(--color-text, #4b5565);
 }
-.hint_text {
+.hint_text.gray {
   color: var(--color-text-subtle, #697586);
 }
+.hint_text.danger{
+  color: var(--color-text-danger, #b51726);
+}
+.hint_text.success{
+  color: var(--color-text-success, #067f48);
+}
+.hint_text.information{
+  color: var(--color-text-information, #064e94);
+}
+.hint_text.discovery{
+  color: var(--color-text-discovery, #065986);
+}
+.hint_text.purple{
+  color: var(--color-text-purple, #6938ef);
+}
+.hint_text.pink{
+  color: var(--color-text-pink, #dd2590);
+}
 .error_text {
   color: var(--color-text-danger, #b51726);
 }