globuswebcomponents 0.9.5 → 0.9.6

package/dist/collection/components/gb-pagination-button-group-base/gb-pagination-button-group-base.js

@@ -1,19 +1,33 @@
-import { h, Fragment } from "@stencil/core";
+import { h, Fragment, getAssetPath } from "@stencil/core";
 export class GbPaginationButtonGroupBase {
     constructor() {
         this.icon = undefined;
         this.iconLeading = undefined;
         this.iconTrailing = undefined;
         this.state = undefined;
+        this.iconSrc = undefined;
+        this.leadingIconSvg = '';
     }
     componentDidLoad() {
         const slottedContent = this.el.querySelector('p');
         if (slottedContent) {
             slottedContent.classList.add('text-sm-semi-bold');
         }
+        if (this.state === 'active') {
+            slottedContent.classList.add('active_text');
+        }
+    }
+    async loadIcon(iconName) {
+        const iconPath = getAssetPath(`${iconName}`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        this.leadingIconSvg = svg;
+    }
+    componentWillLoad() {
+        this.loadIcon(this.iconSrc);
     }
     render() {
-        return (h("div", { key: '59c84439fe82fbc96cf48fafd679a9e27561fd85', class: `button_base_div ${this.icon} ${this.state}` }, this.icon === 'false' && h("slot", { key: '0e34dee27cf0fc00a1d755581be19b24f246132b' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: 'df6b740cd5309803bf9ed9c2ba47edfbae29eabb', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'd51134c9031a80e7f16e4ab545c02bc33f04601e', d: "M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334", stroke: "#4B5565", "stroke-width": "1.67", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("slot", { key: 'b66bae8ef1d9fcad5174e05073d77847318f8385' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: '75dc3a4282c9a6c557341ab818a369dbc7ce9172' }), h("svg", { key: 'a483de0628cf5d9f378aa53ebbda389b7f6f5856', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'c5310e92b6e1d9e751a090d623b24e8297fd91c1', d: "M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (h("div", { key: 'ea375cf57f25dd80312f7f8f3cfd9a3f16796132', class: `button_base_div ${this.icon} ${this.state}` }, this.icon === 'false' && h("slot", { key: '5b9065b02257e2feb0c29bca0c35994fc048ad25' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: '0854ad10f0fa9f993ca9fd7bce5287c1b6a366c7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'bb02710c88056ef5bdadf28879b6c25e2e4f4bca', d: "M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334", stroke: "#4B5565", "stroke-width": "1.67", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("slot", { key: '79ce3bd09de74556f2d4bc87313e192890e1e7af' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: '703fdef6ee6d10e6cdbf6c9fda519136b7774d58' }), h("svg", { key: 'b8544d202100ea69a32f8bbf42f6ce1e32432775', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'f7b40041a3c11315268bd99bc52e5fd566e2b3cb', d: "M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.icon === 'only' && (h(Fragment, null, h("div", { key: 'acb4c2b6dd1dc010a7a7c30718e2ba6626d5acfb', class: `icon`, innerHTML: this.leadingIconSvg })))));
     }
     static get is() { return "gb-pagination-button-group-base"; }
     static get encapsulation() { return "shadow"; }
@@ -96,9 +110,31 @@ export class GbPaginationButtonGroupBase {
                 },
                 "attribute": "state",
                 "reflect": false
+            },
+            "iconSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-src",
+                "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "leadingIconSvg": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-pagination-button-group-base.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"gb-pagination-button-group-base.js","sourceRoot":"","sources":["../../../src/components/gb-pagination-button-group-base/gb-pagination-button-group-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtE,MAAM,OAAO,2BAA2B;;;;;;;IAOtC,gBAAgB;QACd,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAElD,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;YACrD,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,8DAAa;YACtC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B;gBACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC5F,6DACE,CAAC,EAAC,0JAA0J,EAC5J,MAAM,EAAC,SAAS,kBACH,MAAM,oBACJ,OAAO,qBACN,OAAO,GACvB,CACE;gBACN,8DAAa,CACZ,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B;gBACE,8DAAa;gBACX,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC5F,6DACE,CAAC,EAAC,yJAAyJ,EAC3J,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACJ,CAEG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-pagination-button-group-base',\r\n  styleUrl: 'gb-pagination-button-group-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbPaginationButtonGroupBase {\r\n  @Prop() icon: 'false' | 'only' | 'trailing' | 'leading';\r\n  @Prop() iconLeading: string;\r\n  @Prop() iconTrailing: string;\r\n  @Prop() state: 'default' | 'active';\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const slottedContent = this.el.querySelector('p');\r\n\r\n    if (slottedContent) {\r\n      slottedContent.classList.add('text-sm-semi-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`button_base_div ${this.icon} ${this.state}`}>\r\n        {this.icon === 'false' && <slot></slot>}\r\n        {this.icon === 'leading' && (\r\n          <>\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path\r\n                d=\"M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.67\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n            <slot></slot>\r\n          </>\r\n        )}\r\n        {this.icon === 'trailing' && (\r\n          <>\r\n            <slot></slot>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n          </>\r\n        )}\r\n        {/* {this.icon === 'only' && ()} */}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-pagination-button-group-base.js","sourceRoot":"","sources":["../../../src/components/gb-pagination-button-group-base/gb-pagination-button-group-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO3F,MAAM,OAAO,2BAA2B;;;;;;;8BAMJ,EAAE;;IAGpC,gBAAgB;QACd,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAElD,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QACpD,CAAC;QAED,IAAG,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC3B,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;YACrD,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,8DAAa;YACtC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B;gBACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC5F,6DACE,CAAC,EAAC,0JAA0J,EAC5J,MAAM,EAAC,SAAS,kBACH,MAAM,oBACJ,OAAO,qBACN,OAAO,GACvB,CACE;gBACN,8DAAa,CACZ,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B;gBACE,8DAAa;gBACX,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC5F,6DACE,CAAC,EAAC,yJAAyJ,EAC3J,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB;gBACA,4DAAK,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CACvD,CACJ,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Element, getAssetPath, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-pagination-button-group-base',\r\n  styleUrl: 'gb-pagination-button-group-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbPaginationButtonGroupBase {\r\n  @Prop() icon: 'false' | 'only' | 'trailing' | 'leading';\r\n  @Prop() iconLeading: string;\r\n  @Prop() iconTrailing: string;\r\n  @Prop() state: 'default' | 'active';\r\n  @Prop() iconSrc: string;\r\n  @State() leadingIconSvg: string = '';\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const slottedContent = this.el.querySelector('p');\r\n\r\n    if (slottedContent) {\r\n      slottedContent.classList.add('text-sm-semi-bold');\r\n    }\r\n\r\n    if(this.state === 'active') {\r\n      slottedContent.classList.add('active_text');\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n  \r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconSrc);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`button_base_div ${this.icon} ${this.state}`}>\r\n        {this.icon === 'false' && <slot></slot>}\r\n        {this.icon === 'leading' && (\r\n          <>\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path\r\n                d=\"M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.67\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n            <slot></slot>\r\n          </>\r\n        )}\r\n        {this.icon === 'trailing' && (\r\n          <>\r\n            <slot></slot>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n          </>\r\n        )}\r\n        {this.icon === 'only' && (\r\n          <>\r\n          <div class={`icon`} innerHTML={this.leadingIconSvg}></div>\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

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

@@ -7,7 +7,7 @@ export class GbPaginationDotGroup {
         this.framed = false;
     }
     render() {
-        return (h("div", { key: '55b4a49b0379aca117da6a7a0055ef953e5b5160', class: "dot_group_div" }, h("div", { key: '2980f830c8e7e8d247430f0f2cb7dc10168be166' })));
+        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"; }

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

@@ -6,7 +6,7 @@ export class GbPaginationDotIndicator {
         this.size = undefined;
     }
     render() {
-        return (h("div", { key: '38ef4eb63969975a7fce5247e00ca540516b8f55', class: `dot_indicator_div 
+        return (h("div", { key: 'd9df6246705206942e8514a549b8974d82f5c811', class: `dot_indicator_div 
       ${this.type} ${this.current ? 'current' : ''} 
       ${this.size}` }));
     }

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: 'ffb9c6bdd7f6b7405d563f06414cc0f1625644c0', class: `page_number_base ${this.shape} ${this.state}` }, h("slot", { key: 'a09b1161a8a17afffdc29bbe29b67dd2999b0802', 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: '134b6ad514c0ca41cfd33cdf003eea6a01dc47e4' }, h("gb-btn", { key: '10f55a0ac5fc486a7c92383dd88d67730a0d8620', 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: '947df7231d45d2d5a2df5a558c6fdaf43274b657', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: '433d29be2a8ab7e7d868facaab0f10a34078f590', class: "progress_bar" }, h("div", { key: '635f1720268246982523ba83aca9d845a8828d69', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: '65a4eb78f2c45c05c5a5f8716422ff26925371ca', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: 'e316b8da82d40fa052fdf0053c7ed9faa94768a3', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: 'd60a74a9956ac2a2f067ef8a4d14b99297efca08', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: '08509dfcc04979baaac748fd7f63220b3034b0f7', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: '44702963ec9ffd8e5b6d1d07942a5a480d378510', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: 'f999cfbacb81931a25a8fb289ef1ecbb533abd0b', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: 'bf254dd663ee59595b7c3aa046c3787a50e1b7c7', 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: '8d11623819c1a4ffae90339c78f0a11321940f06', class: "gauge" }, h("div", { key: 'eb870a6fdea88bfa8415d9963098b9b94f7d6ab1', class: "arc", ref: el => (this.arcElement = el) }), h("div", { key: '02458e1777dada9df91a8abdd916b9a2b4f5259a', class: "mask" }), this.label && (h("div", { key: '56b272e56b2f8e928f4ad84a280f34fd715ddaab', class: "label", ref: el => (this.labelElement = el) }, h("p", { key: '376f5150262192373aab796872268b836c852ae1', 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: '0b1ef0cbab82e90c1baa4508126997e6fd7e0a27', class: classes }, h("div", { key: '85ba9e25c55ab5e44f5d6bef6769334a7cf4597f', class: "input-with-label" }, h("label", { key: 'bcb0d435b9d743defc1d60c2751f7649a983eb17' }, this.label), h("div", { key: '1a98411e35055dbc1f64dc61929c02c8c56f124b', class: "input-container" }, h("div", { key: '2ce2c98707097f39ecf88fcaa570bb782a88d585', class: "toolbar-container" }, h("gb-wysiwyg-toolbar", { key: 'a9ec31e35fcdc1fe077a1ad69f59af97c088b07d', 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: '68562b5b79d483f74f463ed8d8d8907e578a8a45', class: "error-icon" }, h("svg", { key: 'cbe70fcde34e68a0184f10b4e40ffdee2a2584d7', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '08f4250f3273bcf56f443591785e04d14070a4af', 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: '5a72da28b59944fdd876068e79b4d94f0d7b24bc', class: "text-container" }, h("textarea", { key: '2e1618075e4ad76990ac11e5fd8d08d7c86e68c1' }, this.showPlaceholder && (h("div", { key: 'faf05d28d11f3586d4423932092cf0cb4ef896ca' }, this.placeholder)))))), this.showHintText && (h("div", { key: 'fecd3c3bcd6562b444a1152da64c66535abca145', 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: '1931790bb96c0527b7c56b51c8f2d8474fe6a37d', class: "scrollbar-container" }, h("div", { key: 'c82dd623eef9b80afe770f903b208379cc6e4d4c', class: "scrollbar", style: { height: this.length } }, h("slot", { key: '576f14bc5c00704cdf4feb1ef13005800619408f' }))));
+        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: '9f8332f6bc361d27b95afd74ed7981e533607a3e', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '645ad62b9a6508b2d16df8abe602417cd93ed409', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '85c435f52e0c9b0058132eee1a0f4a5741c7d7e6', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'e7be324e4e4bb1e2f1fe6b04008f2da75aeaa862', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: 'ee02070931d992212f72d068b77e0b20f55bb628', class: "content" }, h("div", { key: '4e8a62ccddedc73e6e6f7065351701264c748148', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '3b30d6a4183682dc3aff85554f704fbfbbff9cb3', 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: '2af27d854c18bcdc9f6459c8f41eb78a57b326d8', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '1f91b0b43924bf54fe342b3a0d9bbe89ef3aab6c' }, "10"))), this.showArrow && (h("svg", { key: '4841799c8a1655756e09af99985936e54411c660', 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: 'ee6e694a288db3e2aa4673944821db9d9497cc7e', 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: '72bda8f236273f18cc1b1bf67e3a599f84ad3769', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '8201e00cfb2f036791136304c94c187abfa6c1f0', 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: '9b0d3ddd4992c303adbf0bc325a39b7f9c7c43c5', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '91565c50b130cba6c1cba2ceeca5338d27efaf29', class: "pattern" }, h("img", { key: 'd53634da43c66bb13c8a7fc008b5bc6218a411ad', src: patternSrc, alt: "" }))), h("div", { key: '8914b4374a74cc8487aa0893f6d5eafdcabf514d', class: "nav" }, h("div", { key: 'd909122be6669c326ea4d446765471247d943ef5', class: `sidebar_header ${this.state}` }, h("div", { key: 'be9cd1f7ec9be389cdd39b4f7c075655f644f989', 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: 'f3415b4e4b2258cfe467c8c9ff7bcae3b6b7fb9b', src: logoSrc, alt: "" })), h("div", { key: 'ce42e8e67da12cc5de53c58beddda200c513c58b', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: 'd3e22e14f8061bd6fe06463c98c2c8cce12fe197', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '22da4616fdf886ffc4519eff16c61bf5b50cf1e0', class: "navigation" }, h("div", { key: '24f4a5f8935f8aa3e3d6ce871d0e68dd6ce0e1e7', class: "item" }, h("gb-side-bar-item", { key: 'bbd7caf910e51b9c1680f5b34e162c05a23a7e28', 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: '9a38ae512b6bb111231ffc48385a758102e5d433', 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: '3c4c25c1b719e70d52c74aca3a4b798b35b54881', 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: 'd1a3b8ddb6278170aec5938c275d3c635e123db6', 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: '30518a09b45ef5d0ba4c86df2ca7ff764e3f80c3', 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: 'fee335eb1cf51e4178aeffbb6f3f0d536810d217', class: "navigation" }, h("div", { key: 'aec96fc86a405768364119c9c074b47db62b8841', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: '75f51014e1cce97a3117c0d978732981a5943a57', 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: '2194c86a5287359cb72b6265b8da169ade8c0588', 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: '7c2d9b9e2209854818670a97efb51489db5bfb97', 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: 'b72d57bd41ed9e843182719d5ae5d80f103a8136', 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: '7313aac235c60986ce55215a09cb8dde0f1c57f0', 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: '5f14fcdd385e681f37800139d56129ce1159462a', class: "application_name" }, h("div", { key: '51e2ef73547722d66ec51ab0ccd56fdef6b64e0b', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '102d36b3a8ce7883199048bdda647cc083f104b9', class: "application_name_pattern" }, h("img", { key: 'adec6371728e1697c22a98a7619f73448cb5f73d', src: patternSrc, alt: "" }))), h("div", { key: '618a60b0480a0a17a5bace5b536bf7ec27c01ce3', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: '1e7f178265707a686a61ffa17541c3ab46b23ee2', class: textClass }, h("slot", { key: 'c49be92bc5ce38b012aea60fbbcc2806765d961a', 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: '5fed7fbebe67ef71255f4de432e69ca32667206b', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: '375e9bbceec28ea087d885ae808bccda3ec96e3e', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: '0cb58ea4a3a9916677e29f465f2a38a76f984dc4', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '2e69b6d591e9b302bcccd2281c08a8d2a027277a', 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'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-slider.js","sourceRoot":"","sources":["../../../src/components/gb-slider/gb-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() min: number;  \r\n  @Prop() max: number; \r\n  @Prop() thumbType: 'text' | 'tooltip'; \r\n\r\n  @State() leftValue: number = 0;   \r\n  @State() rightValue: number = 100; \r\n\r\n  @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement; \r\n  private containerEl: HTMLDivElement; \r\n  private isDragging: boolean = false; \r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  private snapPoints = [0, 25, 50, 75, 100];\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack(); \r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb; \r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  }\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return; \r\n\r\n    // Calculate the position of the mouse relative to the slider's width.\r\n    const position = e.offsetX / this.containerEl.offsetWidth;\r\n    \r\n    // Convert the position into a value within the slider's range and snap to the nearest point.\r\n    const value = this.findNearestSnapPoint(position * 100);\r\n\r\n    // Update the appropriate thumb's value.\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.min(value, this.rightValue - 25);\r\n    } else {\r\n      this.rightValue = Math.max(value, this.leftValue + 25);\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values.\r\n    this.updateTrack();\r\n    this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n  }\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false; \r\n    this.activeThumb = null; \r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  }\r\n\r\n  findNearestSnapPoint(value: number): number {\r\n    return this.snapPoints.reduce((prev, curr) => \r\n      Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev\r\n    );\r\n  }\r\n\r\n  updateTrack() {\r\n    const leftPos = this.leftValue; \r\n    const rightPos = this.rightValue; \r\n    \r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={(el) => this.containerEl = el as HTMLDivElement}>\r\n        <div class=\"track\" ref={(el) => this.trackEl = el as HTMLDivElement}></div>\r\n        \r\n        <gb-slider-control-handle \r\n          class=\"left\"\r\n          value={this.leftValue}\r\n          type={this.thumbType}\r\n          style={{ left: `${this.leftValue}%` }}\r\n          onMouseDown={(e) => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n\r\n        <gb-slider-control-handle \r\n          class=\"right\"\r\n          value={this.rightValue}\r\n          type={this.thumbType}\r\n          style={{ left: `${this.rightValue}%` }}\r\n          onMouseDown={(e) => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-slider.js","sourceRoot":"","sources":["../../../src/components/gb-slider/gb-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() thumbType: 'text' | 'tooltip';\r\n  @Prop() leftControl: number = 0; // Developer can set this\r\n  @Prop() rightControl: number = 100; // Developer can set this\r\n  @Prop() label: 'false' | 'bottom' | 'top_floating';\r\n  @Prop() unit: string = '';\r\n  @Prop() unitPosition: 'left' | 'right' = 'left';\r\n  @State() leftValue: number;\r\n  @State() rightValue: number;\r\n  @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement;\r\n  private containerEl: HTMLDivElement;\r\n  private isDragging: boolean = false;\r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  componentWillLoad() {\r\n    // Set the initial values for the slider\r\n    this.leftValue = Math.max(this.min, Math.min(this.leftControl, this.max));\r\n    this.rightValue = Math.max(this.min, Math.min(this.rightControl, this.max));\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack();\r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb;\r\n\r\n    // Clamp the initial value of the thumb within bounds\r\n    if (thumb === 'left') {\r\n      this.leftValue = Math.min(this.leftValue, this.rightValue - 1);\r\n    } else {\r\n      this.rightValue = Math.max(this.rightValue, this.leftValue + 1);\r\n    }\r\n\r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return;\r\n\r\n    // Get the bounding box of the slider container\r\n    const boundingBox = this.containerEl.getBoundingClientRect();\r\n\r\n    // Calculate the mouse position relative to the slider container\r\n    const position = ((e.clientX - boundingBox.left) / boundingBox.width) * (this.max - this.min) + this.min;\r\n\r\n    // Snap the position to the nearest integer increment of 1\r\n    const value = Math.round(position);\r\n\r\n    // Update the appropriate thumb's value, clamping it within bounds\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.max(this.min, Math.min(value, this.rightValue - 1)); // Ensure it doesn't exceed right thumb\r\n    } else {\r\n      this.rightValue = Math.min(this.max, Math.max(value, this.leftValue + 1)); // Ensure it doesn't go below left thumb\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values\r\n    this.updateTrack();\r\n    this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n  };\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false;\r\n    this.activeThumb = null;\r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  updateTrack() {\r\n    const leftPos = ((this.leftValue - this.min) / (this.max - this.min)) * 100;\r\n    const rightPos = ((this.rightValue - this.min) / (this.max - this.min)) * 100;\r\n\r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  formatValue(value: number): string {\r\n    return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={el => (this.containerEl = el as HTMLDivElement)}>\r\n        <div class=\"track\" ref={el => (this.trackEl = el as HTMLDivElement)}></div>\r\n\r\n        <gb-slider-control-handle\r\n          class=\"left\"\r\n          value={this.formatValue(this.leftValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n        <gb-slider-control-handle\r\n          class=\"right\"\r\n          value={this.formatValue(this.rightValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}