globuswebcomponents 0.9.4 → 0.9.6

package/dist/collection/components/gb-pagination-dot-group/gb-pagination-dot-group.js

@@ -0,0 +1,111 @@
+import { h } from "@stencil/core";
+export class GbPaginationDotGroup {
+    constructor() {
+        this.size = undefined;
+        this.type = undefined;
+        this.color = 'gray_light_bg';
+        this.framed = false;
+    }
+    render() {
+        return (h("div", { key: '07ec77d53f8dd3cf495f5ba9ae75434677fd9400', class: "dot_group_div" }, h("div", { key: '53c550aa31df4fdedb450bb725e75ced8ed07dca' })));
+    }
+    static get is() { return "gb-pagination-dot-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-pagination-dot-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-pagination-dot-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationDotTypes",
+                    "resolved": "\"dot\" | \"line\"",
+                    "references": {
+                        "PaginationDotTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::PaginationDotTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'gray_light_bg'",
+                    "resolved": "\"gray_light_bg\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'gray_light_bg'"
+            },
+            "framed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "framed",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-pagination-dot-group.js.map

package/dist/collection/components/gb-pagination-dot-group/gb-pagination-dot-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-pagination-dot-group.js","sourceRoot":"","sources":["../../../src/components/gb-pagination-dot-group/gb-pagination-dot-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,oBAAoB;;;;qBAGE,eAAe;sBACtB,KAAK;;IAE/B,MAAM;QACJ,OAAO,CACH,4DAAK,KAAK,EAAC,eAAe;YACtB,6DAAW,CACT,CACT,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes, PaginationDotTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-pagination-dot-group',\r\n  styleUrl: 'gb-pagination-dot-group.css',\r\n  shadow: true,\r\n})\r\nexport class GbPaginationDotGroup {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: PaginationDotTypes;\r\n  @Prop() color: 'gray_light_bg' = 'gray_light_bg';\r\n  @Prop() framed: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n        <div class=\"dot_group_div\">\r\n            <div></div>\r\n        </div>\r\n    )\r\n  }\r\n}"]}

package/dist/collection/components/gb-pagination-dot-indicator/gb-pagination-dot-indicator.js

@@ -6,9 +6,9 @@ export class GbPaginationDotIndicator {
         this.size = undefined;
     }
     render() {
-        return h("div", { key: '9884fe981ab866922cfdc54ce8c5d2b4c07442e2', class: `dot_indicator_div 
+        return (h("div", { key: 'd9df6246705206942e8514a549b8974d82f5c811', class: `dot_indicator_div 
       ${this.type} ${this.current ? 'current' : ''} 
-      ${this.size}` });
+      ${this.size}` }));
     }
     static get is() { return "gb-pagination-dot-indicator"; }
     static get originalStyleUrls() {
@@ -45,9 +45,15 @@ export class GbPaginationDotIndicator {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'dot' | 'line'",
+                    "original": "PaginationDotTypes",
                     "resolved": "\"dot\" | \"line\"",
-                    "references": {}
+                    "references": {
+                        "PaginationDotTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::PaginationDotTypes"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

package/dist/collection/components/gb-pagination-dot-indicator/gb-pagination-dot-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-pagination-dot-indicator.js","sourceRoot":"","sources":["../../../src/components/gb-pagination-dot-indicator/gb-pagination-dot-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,wBAAwB;;uBACR,KAAK;;;;IAIhC,MAAM;QACJ,OAAO,4DAAK,KAAK,EAAE;QACf,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;QAC1C,IAAI,CAAC,IAAI,EAAE,GAAQ,CAAC;IAC1B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-pagination-dot-indicator',\r\n  styleUrl: 'gb-pagination-dot-indicator.css',\r\n})\r\nexport class GbPaginationDotIndicator {\r\n  @Prop() current: boolean = false;\r\n  @Prop() type: 'dot' | 'line';\r\n  @Prop() size: GeneralSizes;\r\n\r\n  render() {\r\n    return <div class={`dot_indicator_div \r\n      ${this.type} ${this.current ? 'current' : ''} \r\n      ${this.size}`}></div>;\r\n  }\r\n}"]}
+{"version":3,"file":"gb-pagination-dot-indicator.js","sourceRoot":"","sources":["../../../src/components/gb-pagination-dot-indicator/gb-pagination-dot-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,wBAAwB;;uBACR,KAAK;;;;IAIhC,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;QACP,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;QAC1C,IAAI,CAAC,IAAI,EAAE,GACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes, PaginationDotTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-pagination-dot-indicator',\r\n  styleUrl: 'gb-pagination-dot-indicator.css',\r\n})\r\nexport class GbPaginationDotIndicator {\r\n  @Prop() current: boolean = false;\r\n  @Prop() type: PaginationDotTypes;\r\n  @Prop() size: GeneralSizes;\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class={`dot_indicator_div \r\n      ${this.type} ${this.current ? 'current' : ''} \r\n      ${this.size}`}\r\n      ></div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-pagination-number-base/gb-pagination-number-base.js

@@ -17,7 +17,7 @@ export class GbPaginationNumberBase {
         }
     }
     render() {
-        return (h("div", { key: '35e6f9aa4e918dfa31cefafa6a2664ef2141a9ae', class: `page_number_base ${this.shape} ${this.state}` }, h("slot", { key: '65ab3283a4cacfcd5b58794cc7c7ddf8cd30afc4', name: "page_number" })));
+        return (h("div", { key: '2a0955c4ae070302dc7a73b8c24e6bc4d3f88ab6', class: `page_number_base ${this.shape} ${this.state}` }, h("slot", { key: 'c3a38d1c9bd644d817dd3cbfad620b951969c7a4', name: "page_number" })));
     }
     static get is() { return "gb-pagination-number-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-password-button/gb-password-button.js

@@ -8,7 +8,7 @@ export class GbPasswordButton {
         this.isPasswordVisible = !this.isPasswordVisible;
     }
     render() {
-        return (h("div", { key: '8e3bf2aea2842df4462c2dc079d3c3dbb1c160da' }, h("gb-btn", { key: 'e88320b768baee15c261cdcd06047c21f1f18b74', size: "sm", hierarchy: "link_gray", state: "default", onClick: () => this.togglePasswordVisibility() }, this.isPasswordVisible ? (h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "default", state: this.state }, h("p", null, "HIDE"))) : (h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "default", state: this.state }, h("p", null, "SHOW"))))));
+        return (h("div", { key: 'cb4098b5ed99cf57d7f8e953805a2583e22b5493' }, h("gb-btn", { key: '775d0bd78bb5a43854501b454fb7b638926caada', size: "sm", hierarchy: "link_gray", state: "default", onClick: () => this.togglePasswordVisibility() }, this.isPasswordVisible ? (h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "default", state: this.state }, h("p", null, "HIDE"))) : (h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "default", state: this.state }, h("p", null, "SHOW"))))));
     }
     static get is() { return "gb-password-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-progress-bar/gb-progress-bar.css

@@ -2668,7 +2668,6 @@
   background-color: transparent;
   display: flex;
   align-items: center;
-  align-items: stretch;
   gap: var(--spacing-3);
   width: 100%;
   height: fit-content;
@@ -2697,6 +2696,10 @@
   align-items: center;
 }
 
+span {
+  color: var(--color-text, #4B5565);
+}
+
 /* Label Position Styles */
 .progress_bar_container.right {
   flex-direction: row;

package/dist/collection/components/gb-progress-bar/gb-progress-bar.js

@@ -4,11 +4,10 @@ export class GbProgressBar {
         this.progress = undefined;
         this.showLabel = false;
         this.labelPosition = undefined;
-        this.el = undefined;
     }
     render() {
         const progressValue = Math.min(Math.max(this.progress, 0), 100);
-        return (h("div", { key: '470a69381c526c8937ace989f9c7848e63cc99e7', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: '18f29acd6244208c00a746a21533f7de91d523fe', class: "progress_bar" }, h("div", { key: '8bbe115cb3312f5831d016979b77f7c99a21de1a', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: 'ec89c6d2d08c8271a3086629d5a441ad75583477', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: 'ca383d43754e943ea3b8b7de7962eda1e4d96698', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: '54a77f1fe3f99dd8ed952c0d40df95846637b309', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: 'd3bbe9e072121006d7033290b3ac6403f22ac9c1', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: 'a55414d59f487e94766ea000f9933d7ff1af5b99', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: '34a8285ad4a65d63217edb4b75cf6ba129c9f3ea', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: '33f5322e627db30fd974ac186dae2bcb5353eb4f', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
+        return (h("div", { key: 'b088ea298c849190f032ee78068f361776f5c1c8', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: 'd281aed15fcff0881e9f5328852fdec0d3b3afbe', class: "progress_bar" }, h("div", { key: '14fa4c4eea71dc7a859982d4dcf441340cfa510d', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: '10e6adb91bc94b0d1e28e146c094e7c1aa66972e', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: '9ee48a7cefdbf2d7038643c5adb3d6df21b25ceb', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: '4cf39cdc8816cffde2064658fe8f2ddf7740fdca', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: 'c9cd6eed8d28fe38cebed9d6199868d1aea48042', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: '5c498c4484876bc528568735193ac99d58230a1d', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: '9fe5ab43434ded05b0494843f2b3c7c0bb66dfc6', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: '74578980b2ee57c29eb96e0f73f83bd7a0f4662e', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
     }
     static get is() { return "gb-progress-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -75,26 +74,6 @@ export class GbProgressBar {
                 },
                 "attribute": "label-position",
                 "reflect": false
-            },
-            "el": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
             }
         };
     }

package/dist/collection/components/gb-progress-bar/gb-progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-progress-bar.js","sourceRoot":"","sources":["../../../src/components/gb-progress-bar/gb-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAO7D,MAAM,OAAO,aAAa;;;yBAEK,KAAK;;;;IAIlC,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAEhE,OAAO,CACL,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,aAAa,EAAE;YACxD,4DAAK,KAAK,EAAC,cAAc;gBACvB,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,aAAa,GAAG,EAAE,GAAQ,CACpE;YACN,kBACG,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,aAAa,EAAE;gBACtC,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,6DAAM,KAAK,EAAE,gBAAgB;oBAAG,aAAa;wBAAS;gBACxF,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,6DAAM,KAAK,EAAE,gBAAgB;oBAAG,aAAa;wBAAS;gBACzF,IAAI,CAAC,aAAa,KAAK,cAAc,IAAI,CACxC,mEAAY,KAAK,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE;oBAC1G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB;wBAC1C,aAAa;4BACZ,CACO,CACd;gBACA,IAAI,CAAC,aAAa,KAAK,iBAAiB,IAAI,CAC3C,mEAAY,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE;oBAC9G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB;wBAC1C,aAAa;4BACZ,CACO,CACd,CACG,CACP,CACA,CACC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-progress-bar',\r\n  styleUrl: 'gb-progress-bar.css',\r\n  shadow: true,\r\n})\r\nexport class GbProgressBar {\r\n  @Prop() progress: number;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() labelPosition: 'right' | 'bottom' | 'top_floating' | 'bottom_floating';\r\n  @Prop() el: HTMLElement;\r\n\r\n  render() {\r\n    const progressValue = Math.min(Math.max(this.progress, 0), 100);\r\n\r\n    return (\r\n      <div class={`progress_bar_container ${this.labelPosition}`}>\r\n        <div class=\"progress_bar\">\r\n          <div class=\"progress_fill\" style={{ width: `${progressValue}%` }}></div>\r\n        </div>\r\n        <>\r\n          {this.showLabel && (\r\n            <div class={`label ${this.labelPosition}`}>\r\n              {this.labelPosition === 'right' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n              {this.labelPosition === 'bottom' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n              {this.labelPosition === 'top_floating' && (\r\n                <gb-tooltip class={`top_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 6.5).toString()}%` }}>\r\n                  <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n                    {progressValue}%\r\n                  </p>\r\n                </gb-tooltip>\r\n              )}\r\n              {this.labelPosition === 'bottom_floating' && (\r\n                <gb-tooltip class={`bottom_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 59.5).toString()}%` }}>\r\n                  <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n                    {progressValue}%\r\n                  </p>\r\n                </gb-tooltip>\r\n              )}\r\n            </div>\r\n          )}\r\n        </>\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-progress-bar.js","sourceRoot":"","sources":["../../../src/components/gb-progress-bar/gb-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAO7D,MAAM,OAAO,aAAa;;;yBAEK,KAAK;;;IAGlC,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAEhE,OAAO,CACL,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,aAAa,EAAE;YACxD,4DAAK,KAAK,EAAC,cAAc;gBACvB,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,aAAa,GAAG,EAAE,GAAQ,CACpE;YACN,kBACG,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,aAAa,EAAE;gBACtC,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,6DAAM,KAAK,EAAE,gBAAgB;oBAAG,aAAa;wBAAS;gBACxF,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,6DAAM,KAAK,EAAE,gBAAgB;oBAAG,aAAa;wBAAS;gBACzF,IAAI,CAAC,aAAa,KAAK,cAAc,IAAI,CACxC,mEAAY,KAAK,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE;oBAC1G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB;wBAC1C,aAAa;4BACZ,CACO,CACd;gBACA,IAAI,CAAC,aAAa,KAAK,iBAAiB,IAAI,CAC3C,mEAAY,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE;oBAC9G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB;wBAC1C,aAAa;4BACZ,CACO,CACd,CACG,CACP,CACA,CACC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-progress-bar',\r\n  styleUrl: 'gb-progress-bar.css',\r\n  shadow: true,\r\n})\r\nexport class GbProgressBar {\r\n  @Prop() progress: number;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() labelPosition: 'right' | 'bottom' | 'top_floating' | 'bottom_floating';\r\n\r\n  render() {\r\n    const progressValue = Math.min(Math.max(this.progress, 0), 100);\r\n\r\n    return (\r\n      <div class={`progress_bar_container ${this.labelPosition}`}>\r\n        <div class=\"progress_bar\">\r\n          <div class=\"progress_fill\" style={{ width: `${progressValue}%` }}></div>\r\n        </div>\r\n        <>\r\n          {this.showLabel && (\r\n            <div class={`label ${this.labelPosition}`}>\r\n              {this.labelPosition === 'right' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n              {this.labelPosition === 'bottom' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n              {this.labelPosition === 'top_floating' && (\r\n                <gb-tooltip class={`top_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 6.5).toString()}%` }}>\r\n                  <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n                    {progressValue}%\r\n                  </p>\r\n                </gb-tooltip>\r\n              )}\r\n              {this.labelPosition === 'bottom_floating' && (\r\n                <gb-tooltip class={`bottom_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 59.5).toString()}%` }}>\r\n                  <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n                    {progressValue}%\r\n                  </p>\r\n                </gb-tooltip>\r\n              )}\r\n            </div>\r\n          )}\r\n        </>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-progress-circle/gb-progress-circle.js

@@ -30,7 +30,7 @@ export class GbProgressCircle {
         }
     }
     render() {
-        return (h("div", { key: '33e25b70d739cec2c5faae6b439c35a793a42b28', class: "gauge" }, h("div", { key: '998caa3888e3600e806d2811db517c70785e1e31', class: "arc", ref: el => (this.arcElement = el) }), h("div", { key: '3190262e6e6d7ae1fd9b4e425f458d46aab5f457', class: "mask" }), this.label && (h("div", { key: '58619e736654b01e61acf5e2b71f5786040f314a', class: "label", ref: el => (this.labelElement = el) }, h("p", { key: 'eb20d925dc8e304ffa95bbaaac6b844841550ae1', class: "display-lg-semi-bold" }, `${this.progress}%`)))));
+        return (h("div", { key: '92a64a225d9e277c1cead42e28ba532be5735c33', class: "gauge" }, h("div", { key: '31f47b93724eb88c62615d084fc112f4344bc1f4', class: "arc", ref: el => (this.arcElement = el) }), h("div", { key: '24006ef0a8cc36e5d74ba93c0a733b341280a7f9', class: "mask" }), this.label && (h("div", { key: '2e42d66a2a4d14691bf6a85eb3766ea54102bf63', class: "label", ref: el => (this.labelElement = el) }, h("p", { key: 'f20646812e084b6b70db49a01e3837a5d357c8ba', class: "display-lg-semi-bold" }, `${this.progress}%`)))));
     }
     static get is() { return "gb-progress-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-rich-text/gb-rich-text.js

@@ -15,7 +15,7 @@ export class GbRichText {
             destructive: this.destructive,
             disabled: this.state === 'disabled'
         };
-        return (h("div", { key: '35c8459f15d1c8bc3b71c657da2ca516685b7733', class: classes }, h("div", { key: '7f1eaeceb5e2c1b99c23ca13114ea1e43ae0eca5', class: "input-with-label" }, h("label", { key: '49c5e188c0e63b87826010e2a4aa690121c604c5' }, this.label), h("div", { key: '60ca3a676825fa5432d515de61d902a6a6ba3743', class: "input-container" }, h("div", { key: '4615dbac69e352cf639e44f4d16eb12bfc2f5d87', class: "toolbar-container" }, h("gb-wysiwyg-toolbar", { key: '55378c9d029968e39e1e4a134dce58dd2abfbf1b', breakpoint: "desktop", bold: true, italic: true, h1: true, h2: true, quote: true, link: true, image: true, bulletList: true, numberList: true })), this.destructive && (h("span", { key: '3b7ffbb15e91a31054b29d791b522ab27039c852', class: "error-icon" }, h("svg", { key: 'd3897aefcc17b9055316ecebb0f23d18666a812a', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '7ba2d624c73af4ae3a27bcfb226ca9b861a2cc19', d: "M7.99483 10H8.00081M8.00016 8V5.33333M14.6668 8C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 8C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 8Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '62555140b8865cdf6f6496e0a225f60af9ff03de', class: "text-container" }, h("textarea", { key: '974351b5b791b42570bf29fc769885d5c9fc44b9' }, this.showPlaceholder && (h("div", { key: 'db65386dd5a19707f8636cb10dad62a0e5a9ff1a' }, this.placeholder)))))), this.showHintText && (h("div", { key: '17b60fb6bc35be80a8b2e275176794ea01089dbd', class: "hint-text" }, this.hintText))));
+        return (h("div", { key: 'e6c8642c08d2ed2c5a2533a287eedc2e8d132141', class: classes }, h("div", { key: 'bdb3a13d6f516df9abb2d6517241f9520b32c0d7', class: "input-with-label" }, h("label", { key: '091be54c2ddba2e58f842878a74a5314901db583' }, this.label), h("div", { key: '84bd0474afa3f01ffbed4ddaef174e77a2dc0a07', class: "input-container" }, h("div", { key: 'b8e24f61c541fc003ae2e53514bf6b5ceebed08d', class: "toolbar-container" }, h("gb-wysiwyg-toolbar", { key: '935286e2a038397881f559120f4f4acf8d2fe862', breakpoint: "desktop", bold: true, italic: true, h1: true, h2: true, quote: true, link: true, image: true, bulletList: true, numberList: true })), this.destructive && (h("span", { key: '6c6b4d434ae954afdc4bd7bf9d0d5bb3448107a9', class: "error-icon" }, h("svg", { key: 'ce902df811835e7938b1f0b96c8e844181479e26', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '7640847db6ecc756ddc38d1f89a3c6c2777a7aa7', d: "M7.99483 10H8.00081M8.00016 8V5.33333M14.6668 8C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 8C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 8Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '22c805cb2ea9fba08f5b4e641a8a7e40b8047cfc', class: "text-container" }, h("textarea", { key: 'daf663b158090a3049d112b3a09b1d3d705811ec' }, this.showPlaceholder && (h("div", { key: '16f1909688bde8917df4eab9bfd77fab3c9d4bd0' }, this.placeholder)))))), this.showHintText && (h("div", { key: 'c37283a8e34852d685fda114f49f53c3e669f552', class: "hint-text" }, this.hintText))));
     }
     static get is() { return "gb-rich-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-scrollbar/gb-scrollbar.js

@@ -4,7 +4,7 @@ export class GbScrollbar {
         this.length = '25%';
     }
     render() {
-        return (h("div", { key: '424021d425f72733a348c09285ad9a642c0e45e9', class: "scrollbar-container" }, h("div", { key: '55e8fb0884224bd21bd2c06acf395bc15f9508fb', class: "scrollbar", style: { height: this.length } }, h("slot", { key: 'dabc8373b1216336d34e1d3726d29eaea9af6b4a' }))));
+        return (h("div", { key: '07e8ec2ff2a1f7c53cec5b4cff5a1fbe0faa99f6', class: "scrollbar-container" }, h("div", { key: '5483410a8af9456cd6f719d5c113b83b6c9abd08', class: "scrollbar", style: { height: this.length } }, h("slot", { key: 'de07fc69eb4803455e3b0b02035c078b66f42a73' }))));
     }
     static get is() { return "gb-scrollbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class GbSideBarItem {
     render() {
         const redBarSrc = getAssetPath(`assets/bar.svg`);
         const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);
-        return (h("div", { key: 'df82fa0fff992965ce4ac23a86840d45e268d5bc', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '82a831b0dbefd8bf4619f2f41e0b9f524ea4ecd3', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: 'eaf59a27748f7bb40fddbf72165c8a950aa8326c', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '124df93840e3254f85b38496e54a36adc9dabc1c', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: '1dfb569e10a199bbf9b9b385b46504c2fbd8d8b6', class: "content" }, h("div", { key: '80b7cd12519aa6b9068ccb64ad091154c6ea4ee7', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '8e77355f3d24aaf0741b5be1c1b60e101fc7f559', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '5b356c5765ba0e1430adc6906f2f23f7926cde9a', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '51c673601256f7152a513bd646483ce8f4ea3bda' }, "10"))), this.showArrow && (h("svg", { key: 'f64eb4cdf2bc3b4eb27693c89f9c3881bd76ad2d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: '713fb575b9255bd67eb67e1980abf71883d87455', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '06ad4ef60576053972f21e1da242ed58b35e1fe0', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '3151c47f57a48391d8f10f7f536d50f71ea49d4a', slot: "label" }, this.label)))));
+        return (h("div", { key: 'd2e15d0add59f71f2d2f91fc288f0949ca126d2a', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '08b53ae648bb9eebe9c17a70bd18afdca57404a2', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '0b6e78a32eb0496f381589dc55574d7e853eb526', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'dfae0080d3fa8551af3df38018b950bf69c7e6f5', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: '23dd8449892ce86ad79e58f41cee7ad27c933342', class: "content" }, h("div", { key: 'f1b029268d46ac1f436b14e4bd617f974f7efa6f', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '109a31eca48c21abac12f03f77540194fa5c8991', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '2532ffeb07887d75794631c8c0d382d392260b4a', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '211c91bc32050a9b5285805e0cdab9bb5bbc9309' }, "10"))), this.showArrow && (h("svg", { key: 'cbd28af6c34aaa64ae8c611502be7069ee422651', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: 'c210a7c82165283036bce1ed5b3aa2d0bd9b1665', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '592facf9832d86e42bf4de2f1fb963857d607346', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '49b946a445def14ea1e7306a00d54bf86341d02c', slot: "label" }, this.label)))));
     }
     static get is() { return "gb-side-bar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class GbSidebar {
         const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);
         const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);
         const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);
-        return (h("div", { key: '25ed6b4b2f33f86edc7b93de9db08b44dad51498', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: 'f1d3bcc59279ae5c1a80d869e2f3a4a62d8a14f3', class: "pattern" }, h("img", { key: '3da257df31e58ded1f954e71ff8788358e2a4345', src: patternSrc, alt: "" }))), h("div", { key: '093a103c5009e6a0f2c277a087c4017587799c32', class: "nav" }, h("div", { key: '153ea5f8843d8580a6b9fd42d41a6f23494358be', class: `sidebar_header ${this.state}` }, h("div", { key: 'b3579a98e3728969caeb82693aad31bfa6fee52b', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && h(Fragment, null, this.category === 'plain_background' ? h("img", { src: blueLogoSrc }) : h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && h("img", { key: 'd76592d762fa3ae66ef9e128fe3475e590c799c1', src: logoSrc, alt: "" })), h("div", { key: '6f4a2824dd71b9f58babc944ee2e6ec54a97b1c5', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '99a4aabdc18432df9fd9e0c543a6d83db801c355', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'eb50f356c90de3c9d1caabb6302e1ce200492505', class: "navigation" }, h("div", { key: '47b4d2c95cbf89f68f8c61fd0c88096c21317732', class: "item" }, h("gb-side-bar-item", { key: '5c4f9beecf63e8d762e2c3ef53c3941b8f6b9dc2', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-side-bar-item", { key: '184cb4ac709672520b2bb30c3355ea21bd23b694', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-side-bar-item", { key: '1c1f0bf367161c048233a2edfe5732b919496341', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-side-bar-item", { key: '64a3ce8326a02512f57f1a709071ca1c5b497e78', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-side-bar-item", { key: '124687d30d69877cc7788fdabea646fe6539a05e', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: '032e7e2888c826e6795fcb6339daa9bfc8eb79eb', class: "navigation" }, h("div", { key: '93e164e54775ea54c45ecc67f0377f07f9480e2c', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: '31ce08742db3151f75b59211b2e752a5decf083b', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-side-bar-item", { key: 'bb0bacc0f1dec18dd55381d66e93203490767b84', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-side-bar-item", { key: '9dcf388bb1fe1b018225f969a7417df0d1bc47d2', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-side-bar-item", { key: 'be74ce75dec38951d39d913724c6cc5abd2e4300', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-side-bar-item", { key: 'c11c93b9d9b1e42255dd2e155298eb7ea8d57421', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: '3673bbc0b546b125651a0758a9ce953537028fc1', class: "application_name" }, h("div", { key: '66e9fce0063100dfee463a6ca2b3ee7d2fb109f4', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '711ece1e42f82b0415c76356809dfba6c9559661', class: "application_name_pattern" }, h("img", { key: '1256c0848d1e5ad5ce7d95840e153cf8a388a0b1', src: patternSrc, alt: "" }))), h("div", { key: '3456a1d9a2be96901e5d6a8ecef03e1a25ce18ff', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: 'f78efa26dbaedc276b98324e4495740f63cad7cf', class: textClass }, h("slot", { key: 'fd4ad8925aa3ce083b88f06f864d65d28741c4e3', name: "application_name" })))))));
+        return (h("div", { key: '09343cb999e99fc8cee1eb8ad01310fc230a85e7', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: 'ec41ccb8a803f93e03be944d1f02ac36b4d49a67', class: "pattern" }, h("img", { key: '2bcdc4bd09a95cefaa706850f04e55208b7da79e', src: patternSrc, alt: "" }))), h("div", { key: '7b89cb6a92a3e3fee51c30b44cb05722de60f33d', class: "nav" }, h("div", { key: '181260b1a55f3c37ffb8aefd85feb1d5c08dde60', class: `sidebar_header ${this.state}` }, h("div", { key: '55c7e4fcbe7cccb44d192693384412859e434036', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && h(Fragment, null, this.category === 'plain_background' ? h("img", { src: blueLogoSrc }) : h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && h("img", { key: '6a113aa82975ae344a740a7c59ed567c694cca36', src: logoSrc, alt: "" })), h("div", { key: 'ef92ef7e229dc825cd853e0081a41f3645591b71', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: 'fb06b1cd1e19bbc18acb423908f1e61b6f01bebf', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'e1c02353b947c876f0b4cdffba8b66e372a55cf4', class: "navigation" }, h("div", { key: '65bb47c5011afeaf43bb920c56ec920247824033', class: "item" }, h("gb-side-bar-item", { key: '16e3adcd20065e1d436cb3a7bf98b6ba600b8c19', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-side-bar-item", { key: 'e3a94274034bf7dccb2a5fdd5b4ea6edc5283cd4', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-side-bar-item", { key: '414c7b1606333a22f4ce4c67febf810b089fb595', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-side-bar-item", { key: '507da8f0d48bf3a291c0c467cf29617d61f50310', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-side-bar-item", { key: '374bdbffead5f70937c995720451563ca3e0fb4b', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: '264e746e8131c9de51b4001d9e977401a9ad6bbf', class: "navigation" }, h("div", { key: '0ba0096845d1ef12088b44a8642984c0c1108c95', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: '5d18fb852a6dfe0ae831fec0374e3b4de6b4ae5d', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-side-bar-item", { key: '5c262f05fd1bd2be155129294f75b98ecd890f57', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-side-bar-item", { key: 'b07f49c20b0cad8d7b6559b5d67bd869db706017', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-side-bar-item", { key: 'c8d6dcbd783aad66b3d0ebcc240843fd84b376b2', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-side-bar-item", { key: '26de8ddbec91b473666850944685c2d377db2d09', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: 'dcdfe633d1ec316274c382b2c55fe8717fab4ef0', class: "application_name" }, h("div", { key: '50e0870d97d1af279b3919b077f026a494e2be2e', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '5fecc12ed7cc032090d36cd6850ba4f4e738d8a3', class: "application_name_pattern" }, h("img", { key: 'de71804a8756db751c51176f4d214174e57405e9', src: patternSrc, alt: "" }))), h("div", { key: 'ab8ffc59d79400223070ee0e4da0d8c70b784293', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: '11999f4882f109e9ef9ba44525a1b8c053f6b931', class: textClass }, h("slot", { key: '6a7d62e35ed12856c60aff3724babffb82b430d1', name: "application_name" })))))));
     }
     static get is() { return "gb-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,28 +3,36 @@ export class GbSlider {
     constructor() {
         this.isDragging = false;
         this.activeThumb = null;
-        this.snapPoints = [0, 25, 50, 75, 100];
         this.handleMouseDown = (_e, thumb) => {
             this.isDragging = true;
             this.activeThumb = thumb;
+            // Clamp the initial value of the thumb within bounds
+            if (thumb === 'left') {
+                this.leftValue = Math.min(this.leftValue, this.rightValue - 1);
+            }
+            else {
+                this.rightValue = Math.max(this.rightValue, this.leftValue + 1);
+            }
             document.addEventListener('mousemove', this.handleMouseMove);
             document.addEventListener('mouseup', this.handleMouseUp);
         };
         this.handleMouseMove = (e) => {
             if (!this.isDragging)
                 return;
-            // Calculate the position of the mouse relative to the slider's width.
-            const position = e.offsetX / this.containerEl.offsetWidth;
-            // Convert the position into a value within the slider's range and snap to the nearest point.
-            const value = this.findNearestSnapPoint(position * 100);
-            // Update the appropriate thumb's value.
+            // Get the bounding box of the slider container
+            const boundingBox = this.containerEl.getBoundingClientRect();
+            // Calculate the mouse position relative to the slider container
+            const position = ((e.clientX - boundingBox.left) / boundingBox.width) * (this.max - this.min) + this.min;
+            // Snap the position to the nearest integer increment of 1
+            const value = Math.round(position);
+            // Update the appropriate thumb's value, clamping it within bounds
             if (this.activeThumb === 'left') {
-                this.leftValue = Math.min(value, this.rightValue - 25);
+                this.leftValue = Math.max(this.min, Math.min(value, this.rightValue - 1)); // Ensure it doesn't exceed right thumb
             }
             else {
-                this.rightValue = Math.max(value, this.leftValue + 25);
+                this.rightValue = Math.min(this.max, Math.max(value, this.leftValue + 1)); // Ensure it doesn't go below left thumb
             }
-            // Update the track's appearance and emit the new values.
+            // Update the track's appearance and emit the new values
             this.updateTrack();
             this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });
         };
@@ -34,29 +42,39 @@ export class GbSlider {
             document.removeEventListener('mousemove', this.handleMouseMove);
             document.removeEventListener('mouseup', this.handleMouseUp);
         };
-        this.min = undefined;
-        this.max = undefined;
+        this.min = 0;
+        this.max = 100;
         this.thumbType = undefined;
-        this.leftValue = 0;
-        this.rightValue = 100;
+        this.leftControl = 0;
+        this.rightControl = 100;
+        this.label = undefined;
+        this.unit = '';
+        this.unitPosition = 'left';
+        this.leftValue = undefined;
+        this.rightValue = undefined;
+    }
+    componentWillLoad() {
+        // Set the initial values for the slider
+        this.leftValue = Math.max(this.min, Math.min(this.leftControl, this.max));
+        this.rightValue = Math.max(this.min, Math.min(this.rightControl, this.max));
     }
     componentDidLoad() {
         this.trackEl = this.el.shadowRoot.querySelector('.track');
         this.containerEl = this.el.shadowRoot.querySelector('.slider-container');
         this.updateTrack();
     }
-    findNearestSnapPoint(value) {
-        return this.snapPoints.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
-    }
     updateTrack() {
-        const leftPos = this.leftValue;
-        const rightPos = this.rightValue;
+        const leftPos = ((this.leftValue - this.min) / (this.max - this.min)) * 100;
+        const rightPos = ((this.rightValue - this.min) / (this.max - this.min)) * 100;
         // Update the track's left position and width to match the thumb positions.
         this.trackEl.style.left = `${leftPos}%`;
         this.trackEl.style.width = `${rightPos - leftPos}%`;
     }
+    formatValue(value) {
+        return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;
+    }
     render() {
-        return (h("div", { key: '9c7348a3340e11fb2d0f43e62790be56b56218c9', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: 'a24295604dd08722ef2793d00d7b06052025615b', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: '637465ef7117860036e1c9325e010ef48cc3695a', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: 'a879e43c6bb18bd76cc15d4c0009ce584d42af7f', class: "right", value: this.rightValue, type: this.thumbType, style: { left: `${this.rightValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'right') })));
+        return (h("div", { key: '7343e2e51c76a013c9987e75e96ca4583c88c4df', class: "slider-container", ref: el => (this.containerEl = el) }, h("div", { key: 'e1e41b220d4edd38b40ab874863f9f1cf548e662', class: "track", ref: el => (this.trackEl = el) }), h("gb-slider-control-handle", { key: 'e1c6bea41ca00c66a038918c24ffc0ea0e90939f', class: "left", value: this.formatValue(this.leftValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '28aadc048c5eacaced23bc7f5788495c0d8eeedb', class: "right", value: this.formatValue(this.rightValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'right') })));
     }
     static get is() { return "gb-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +105,8 @@ export class GbSlider {
                     "text": ""
                 },
                 "attribute": "min",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "0"
             },
             "max": {
                 "type": "number",
@@ -104,7 +123,8 @@ export class GbSlider {
                     "text": ""
                 },
                 "attribute": "max",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "100"
             },
             "thumbType": {
                 "type": "string",
@@ -122,6 +142,95 @@ export class GbSlider {
                 },
                 "attribute": "thumb-type",
                 "reflect": false
+            },
+            "leftControl": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "left-control",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "rightControl": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "right-control",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'false' | 'bottom' | 'top_floating'",
+                    "resolved": "\"bottom\" | \"false\" | \"top_floating\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "unit",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "unitPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "unit-position",
+                "reflect": false,
+                "defaultValue": "'left'"
             }
         };
     }