globuswebcomponents 0.6.3 → 0.6.5

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

@@ -0,0 +1,135 @@
+import { h, Fragment } from "@stencil/core";
+export class GbPagination {
+    constructor() {
+        this.type = undefined;
+        this.shape = undefined;
+        this.breakpoint = undefined;
+        this.currentPage = 1;
+        this.totalPages = 10;
+    }
+    render() {
+        return (h("div", { key: 'bc8392fb731157957a2f6f86acba31bc00672d44', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '25e4be5027d583832284bb19e697ef2da506f97a', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '60c3dc1e8f18c3bb8701e4912936896fc5465ca7' }, "Previous")), h("gb-button", { key: '8208b085acab7f7ddff76fa0e02fdeb55eff3c95', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '23c2b556011421b4ac2131165995a8a1a1db3b0f' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'f43e7869da09853fb46bf6fab5c1e3f3398c0b89', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '584f9ad8cc841b645410abcdb0db752b3c916c20' }, "Previous")), h("gb-button", { key: '506eaf7525544354f51b24e7faa74ad50d1f276f', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: 'ab5a4b24e419a6ead8f7d6d0feb2d24bebb7e027' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'c8ad9b184410b8caadc61b2d6632be987bda5aac', class: "entries" }, "Entries"), h("div", { key: 'ceba2a3f856e1f650cdd8016721819f815c063ca', class: "page_numbers" }), h("div", { key: '51a758d2c9969fdfc2139678b09b351a7f43a11d', class: "buttons" }, h("gb-button", { key: '71c5f361bf04d3271a4555beebed488026ae362c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("gb-button", { key: 'd3eac75ffca374722ac189b47eaf110b77e51059', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '5453e0cfabcba6417c9380f3a78ec3842f7d16d9', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("div", { key: '6748595de959522d628291073952183cb7a23aaa', class: "page_number_text" }, h("p", { key: '421dfd886514e9ccf97e7a11802663a58b569308', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '010746b1bcebc33c7c8f0212a1e4e79d2e1a511e', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))));
+    }
+    static get is() { return "gb-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationTypes",
+                    "resolved": "\"card_button_group_ right_aligned\" | \"card_button_group_center_aligned\" | \"card_button_group_left_aligned\" | \"card_default\" | \"card_minimal_center_aligned\" | \"card_minimal_left_aligned\" | \"card_minimal_right_aligned\" | \"page_default\" | \"page_minimal_center_aligned\"",
+                    "references": {
+                        "PaginationTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::PaginationTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationNumberShapes",
+                    "resolved": "\"circle\" | \"square\"",
+                    "references": {
+                        "PaginationNumberShapes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::PaginationNumberShapes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "shape",
+                "reflect": false
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreakPoints",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {
+                        "BreakPoints": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::BreakPoints"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "breakpoint",
+                "reflect": false
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "current-page",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "total-pages",
+                "reflect": false,
+                "defaultValue": "10"
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-pagination.js","sourceRoot":"","sources":["../../../src/components/gb-pagination/gb-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,YAAY;;;;;2BAIO,CAAC;0BACF,EAAE;;IAE/B,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;YAEzD,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,CAChE;gBACE,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,kBAAe,IAAI,uBAAoB,0BAA0B;oBAC5I,uEAAe,CACL;gBAMZ,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,mBAAgB,IAAI,wBAAqB,2BAA2B;oBAC/I,mEAAW,CACD,CACX,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,6BAA6B,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,CAC/E;gBACE,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,kBAAe,IAAI,uBAAoB,0BAA0B;oBAC7I,uEAAe,CACL;gBAEZ,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,mBAAgB,IAAI,wBAAqB,2BAA2B;oBAChJ,mEAAW,CACD,CACX,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,CAChE;gBACE,4DAAK,KAAK,EAAC,SAAS,cAEd;gBACN,4DAAK,KAAK,EAAC,cAAc,GAAO;gBAChC,4DAAK,KAAK,EAAC,SAAS;oBAClB,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,kBAAe,IAAI,uBAAoB,0BAA0B,GAAa;oBACzJ,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,kBAAe,IAAI,uBAAoB,2BAA2B,GAAa,CACtJ,CACL,CACJ;YAGA,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,CAC/D;gBACE,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,kBAAe,IAAI,uBAAoB,0BAA0B,GAAa;gBACzJ,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,0DAAG,KAAK,EAAC,gBAAgB;;wBACjB,IAAI,CAAC,WAAW;;wBAAM,IAAI,CAAC,UAAU,CACzC,CACA;gBACN,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,kBAAe,IAAI,uBAAoB,2BAA2B,GAAa,CACzJ,CACJ,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment } from \"@stencil/core\";\r\nimport { BreakPoints, PaginationNumberShapes, PaginationTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-pagination',\r\n  styleUrl: 'gb-pagination.css',\r\n  shadow: true,\r\n})\r\nexport class GbPagination {\r\n  @Prop() type: PaginationTypes;\r\n  @Prop() shape: PaginationNumberShapes;\r\n  @Prop() breakpoint: BreakPoints;\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() totalPages: number = 10;\r\n\r\n  render() {\r\n    return (\r\n      <div class={`pagination_div ${this.type} ${this.breakpoint}`}>\r\n        {/* Desktop Breakpoint Pagination */}\r\n        {this.type === 'page_default' && this.breakpoint === 'desktop' && (\r\n          <>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" state=\"default\" icon-leading={true} icon-leading-swap=\"assets/arrow-left-02.svg\">\r\n              <p>Previous</p>\r\n            </gb-button>\r\n\r\n            {/* <div class=\"page_default_numbers\">\r\n              <gb-pagination-number-base shape={this.shape}></gb-pagination-number-base>\r\n            </div> */}\r\n\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" state=\"default\" icon-trailing={true} icon-trailing-swap=\"assets/arrow-right-02.svg\">\r\n              <p>Next</p>\r\n            </gb-button>\r\n          </>\r\n        )}\r\n        {this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (\r\n          <>\r\n            <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"default\" state=\"default\" icon-leading={true} icon-leading-swap=\"assets/arrow-left-02.svg\">\r\n              <p>Previous</p>\r\n            </gb-button>\r\n\r\n            <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"default\" state=\"default\" icon-trailing={true} icon-trailing-swap=\"assets/arrow-right-02.svg\">\r\n              <p>Next</p>\r\n            </gb-button>\r\n          </>\r\n        )}\r\n        {this.type === 'card_default' && this.breakpoint === 'desktop' && (\r\n          <>\r\n            <div class=\"entries\">\r\n              Entries\r\n            </div>\r\n            <div class=\"page_numbers\"></div>\r\n            <div class=\"buttons\">\r\n              <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"only\" state=\"default\" icon-leading={true} icon-leading-swap=\"assets/arrow-left-02.svg\"></gb-button>\r\n              <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"only\" state=\"default\" icon-leading={true} icon-leading-swap=\"assets/arrow-right-02.svg\"></gb-button>\r\n            </div>\r\n          </>\r\n        )}\r\n\r\n        {/* Mobile Breakpoint Pagination */}\r\n        {this.type === 'page_default' && this.breakpoint === 'mobile' && (\r\n          <>\r\n            <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"only\" state=\"default\" icon-leading={true} icon-leading-swap=\"assets/arrow-left-02.svg\"></gb-button>\r\n            <div class=\"page_number_text\">\r\n              <p class=\"text-sm-medium\">\r\n                Page {this.currentPage} of {this.totalPages}\r\n              </p>\r\n            </div>\r\n            <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"only\" state=\"default\" icon-leading={true} icon-leading-swap=\"assets/arrow-right-02.svg\"></gb-button>\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

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

@@ -0,0 +1,31 @@
+.button_base_div{
+    display: flex;
+    align-items: center;
+    border-right: 1px solid var(--color-border-subtle, #CDD5DF);
+    justify-content: center;
+    cursor: pointer;
+    width: fit-content;
+}
+
+.button_base_div:hover{
+    background: var(--color-background-gray-subtler, #EEF2F6);
+}
+
+.button_base_div:active{
+    background: none;
+}
+
+.button_base_div.false{
+    width: 2.5rem;
+    padding: 0.625rem;
+}
+
+.button_base_div.leading,
+.button_base_div.trailing{
+    gap: 0.5rem;
+    padding: 0.625rem var(--spacing-4);
+}
+
+::slotted(p){
+    color: var(--color-text, #4B5565);
+}

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

@@ -0,0 +1,86 @@
+import { h, Fragment } from "@stencil/core";
+export class GbPaginationButtonGroupBase {
+    constructor() {
+        this.icon = undefined;
+        this.iconLeading = undefined;
+        this.iconTrailing = undefined;
+    }
+    componentDidLoad() {
+        const slottedContent = this.el.querySelector('p');
+        if (slottedContent) {
+            slottedContent.classList.add('text-sm-semi-bold');
+        }
+    }
+    render() {
+        return (h("div", { key: '7150f2c905a732776c2274fe5895472c400c0a1c', class: `button_base_div ${this.icon}` }, this.icon === 'false' && h("slot", { key: 'cc20612e2c16aac7da3b2fbe67111ee772f4992c' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: 'c600af665b4c0625255b6d27bd86ed667737de21', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '983ac86c8b102c3777d541fe2a399bb90def7d67', 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: '959797b0d186f5ea39604fadda49963449ca9ba1' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: 'e87eae29b6aeb717da8cdb76df0a6583bea228a8' }), this.iconTrailing && (h("svg", { key: '3920623dffbc9e5a56da52e7e7881c40d858cbfd', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'a80f846e43ec8fb4269280c81aac44acb0582037', 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" })))))));
+    }
+    static get is() { return "gb-pagination-button-group-base"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-pagination-button-group-base.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-pagination-button-group-base.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'false' | 'only' | 'trailing' | 'leading'",
+                    "resolved": "\"false\" | \"leading\" | \"only\" | \"trailing\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconLeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-leading",
+                "reflect": false
+            },
+            "iconTrailing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-trailing",
+                "reflect": false
+            }
+        };
+    }
+    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

@@ -0,0 +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;;;;;;IAMtC,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,EAAE;YACvC,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;gBACZ,IAAI,CAAC,YAAY,IAAI,CACpB,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,CACA,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  @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}`}>\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            {this.iconTrailing && (\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        )}\r\n        {/* {this.icon === 'only' && ()} */}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

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

@@ -0,0 +1,30 @@
+.dot_indicator_div{
+    border-radius: var(--rounded-full);
+    background: var(--color-icon-disabled, #CDD5DF);
+}
+
+/* Current Styles */
+.dot_indicator_div.current{
+    background: var(--color-icon-selected, #075DB2);
+}
+
+/* Type Styles */
+.dot_indicator_div.dot.md{
+    width: 0.5rem;
+    height: 0.5rem;
+}
+
+.dot_indicator_div.dot.lg{
+    width: 0.625rem;
+    height: 0.625rem;
+}
+
+.dot_indicator_div.line.md{
+    width: 2.5rem;
+    height: 0.375rem;
+}
+
+.dot_indicator_div.line.lg{
+    width: 2.5rem;
+    height: 0.5rem;
+}

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

@@ -0,0 +1,87 @@
+import { h } from "@stencil/core";
+export class GbPaginationDotIndicator {
+    constructor() {
+        this.current = false;
+        this.type = undefined;
+        this.size = undefined;
+    }
+    render() {
+        return h("div", { key: '7a55bd2fd6e008566a6bfae35b033ca02e25e17c', class: `dot_indicator_div 
+      ${this.type} ${this.current ? 'current' : ''} 
+      ${this.size}` });
+    }
+    static get is() { return "gb-pagination-dot-indicator"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-pagination-dot-indicator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-pagination-dot-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "current",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dot' | 'line'",
+                    "resolved": "\"dot\" | \"line\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "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
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-pagination-dot-indicator.js.map

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

@@ -0,0 +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}"]}