npm - globuswebcomponents - Versions diffs - 0.7.2 → 0.7.4 - Mend

globuswebcomponents 0.7.2 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (394) hide show

package/dist/collection/components/gb-notification-pane/gb-notification-pane.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, getAssetPath } from "@stencil/core";
 export class GbNotificationPane {
     constructor() {
         this.state = undefined;
@@ -7,21 +7,6 @@ export class GbNotificationPane {
         this.label = '';
         this.time = '';
         this.supportingText = '';
-        this.shadowRoot = null;
-    }
-    componentDidLoad() {
-        this.shadowRoot = this.shadowRoot;
-    }
-    handleSlotChange() {
-        const slot = this.getSlotContent();
-        this.notifications = slot ? Array.from(slot.assignedElements()) : [];
-        this.notifications.forEach(notification => {
-            notification.addEventListener('click', this.handleNotificationClick.bind(this, notification));
-        });
-    }
-    getSlotContent() {
-        var _a;
-        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
     }
     markAllAsRead() {
         this.notifications.forEach(notification => notification.remove());
@@ -30,10 +15,11 @@ export class GbNotificationPane {
         notification.remove();
     }
     render() {
-        return (h("div", { key: 'b3a58cb70b2bd2dcc9e0523846778ab95b13c85d', class: "notification_pane_div" }, this.state === 'empty' && [
-            h("div", { key: 'ba6d43e1378a3705fa8bb7890fd493ce74228162', class: `container` }, h("img", { key: '3c93a8fcd193780d7e3dee3cc80592e988cef40c', src: "build/assets/no_notification_frame.svg", alt: "" })),
-            h("div", { key: 'fc5151c5a7bbd7102ac836430c7f729d304e1b0d', class: `button` }, h("gb-button", { key: 'b798bba15b6399c1b58c41c48b13f5a3351533ff', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '131bbb21646da58e5a5bb7dae55fb754945af4f8' }, "Mark all as read"))),
-        ], this.state === 'notification_dropdown' && (h("div", { key: 'cee49e113fe054cbff7cd4ade5b3863447ececf2', class: "notification_dropdown" }, h("div", { key: 'a8fc948519af6ad6be5c5e15d5d38a63bca4d57f', class: `content_wrapper` }, h("gb-notification-content", { key: '43cfcae6a8ba440982b1880f8caaab4e48a0be6a', label: this.label, time: this.time, "supporting-text": this.supportingText, icon: this.icon })), h("gb-button", { key: '77c0c50f4310121d11ee32f289803ca48503ed5c', size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '0111379be24d81278cba4479f1083015b3451125' }, "Mark all as read"))))));
+        const illustrationSrc = getAssetPath(`assets/no_notification_frame.svg`);
+        return (h("div", { key: '05170cb88d1b88ee2b0da5578f0eb89c54c0db6f', class: "notification_pane_div" }, this.state === 'empty' && [
+            h("div", { key: '1cfe08bf709a5e384693f77a6970c303e19ad24f', class: `container` }, h("img", { key: 'ec01bedff4d3e05fa1d89239904a96d4cab9bfb3', src: illustrationSrc, alt: "" })),
+            h("div", { key: 'fcb3c6096fba60354533ccc44e3383c16e53c805', class: `button` }, h("gb-button", { key: 'd097ad0721082afbdb3aafabf90365d248c3a47e', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '633d684939c9a3cc73a7de6cc11c6ef5f22fd831' }, "Mark all as read"))),
+        ], this.state === 'notification_dropdown' && (h("div", { key: 'b81d9f71f311f56a177994c6cda6812bc07a8a31', class: "notification_dropdown" }, h("div", { key: 'e052061c046347ec27273f3e51f76461baaceb86', class: `content_wrapper` }, h("gb-notification-content", { key: '1e6a27847dd8d88a20ecd751220660655adf3781', label: this.label, time: this.time, "supporting-text": this.supportingText, icon: this.icon })), h("gb-button", { key: '71ba2818f824e9420311f469ffff093d9c8f7629', size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '3548f9fad794b252c0265b9c05185dd3fd41c2e3' }, "Mark all as read"))))));
     }
     static get is() { return "gb-notification-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -156,14 +142,5 @@ export class GbNotificationPane {
             }
         };
     }
-    static get listeners() {
-        return [{
-                "name": "slotchange",
-                "method": "handleSlotChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 //# sourceMappingURL=gb-notification-pane.js.map

package/dist/collection/components/gb-notification-pane/gb-notification-pane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-notification-pane.js","sourceRoot":"","sources":["../../../src/components/gb-notification-pane/gb-notification-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,~~MAAM~~,EAAE,MAAM,eAAe,CAAC;~~AAO1D~~,MAAM,OAAO,kBAAkB~~;IAW7B;;6BAT+B~~,EAAE;oBACV,EAAE;qBACD,EAAE;oBACH,EAAE;8BACQ,EAAE;QAMjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACpC,CAAC;IAGD,gBAAgB;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;QAExF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;YACxC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;QAChG,CAAC,CAAC,CAAC;IACL,CAAC;IAED,cAAc;;~~QACZ~~,~~OAAO,MAAA,IAAI,CAAC,UAAU,0CAAE,~~aAAa~~,CAAC,MAAM,CAAC,CAAC~~;~~IAChD,CAAC;IAED,aAAa;~~QACX,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;IACpE,CAAC;IAED,uBAAuB,CAAC,YAAyB;QAC/C,YAAY,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,uBAAuB;YAC/B,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI;gBACzB,4DAAK,KAAK,EAAE,WAAW;oBACrB,4DAAK,GAAG,~~EAAC~~,~~wCAAwC~~,~~EAAC~~,GAAG,EAAC,EAAE,GAAG,~~CACvD~~;gBACN,4DAAK,KAAK,EAAE,QAAQ;oBAClB,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,kBAAe,IAAI,uBAAoB,wBAAwB;wBAC5I,+EAAuB,CACb,CACR;aACP;YACA,IAAI,CAAC,KAAK,KAAK,uBAAuB,IAAI,CACzC,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,4DAAK,KAAK,EAAE,iBAAiB;oBAC3B,gFAAyB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,qBAAmB,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAA4B,CAC1I;gBACN,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,kBAAe,IAAI,uBAAoB,wBAAwB;oBAC3H,+EAAuB,CACb,CACR,CACP,CACG,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {Component, Prop, h, ~~Listen~~ } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-notification-pane',\r\n styleUrl: 'gb-notification-pane.css',\r\n shadow: true,\r\n})\r\nexport class GbNotificationPane {\r\n @Prop() state: 'empty' \| 'notification_dropdown';\r\n @Prop() notifications: any[] = [];\r\n @Prop() icon: string = '';\r\n @Prop() label: string = '';\r\n @Prop() time: string = '';\r\n @Prop() supportingText: string = '';\r\n\r\n ~~// Add type definition for shadowRoot\r\n private shadowRoot: ShadowRoot \| null;\r\n\r\n constructor~~() {\r\n this.shadowRoot = null;\r\n }\r\n\r\n componentDidLoad() {\r\n this.shadowRoot = this.shadowRoot;\r\n }\r\n\r\n @Listen('slotchange')\r\n handleSlotChange() {\r\n const slot = this.getSlotContent();\r\n this.notifications ~~= slot ? (Array~~.~~from(slot.assignedElements()) as HTMLElement[]) : [];\r\n\r\n this.notifications.~~forEach(notification => ~~{\r\n~~ notification.~~addEventListener~~(~~'click', this.handleNotificationClick.bind(this, notification~~));\r\n ~~});\r\n~~ }\r\n\r\n ~~getSlotContent~~() {\r\n ~~return this~~.~~shadowRoot?.querySelector~~(~~'slot'~~);\r\n }\r\n\r\n ~~markAllAsRead~~() {\r\n ~~this.notifications.forEach(notification~~ => ~~notification.remove~~(~~));\r\n }\r\n\r\n handleNotificationClick(notification: HTMLElement) {\r\n notification~~.~~remove(~~);\r\n }\r\n~~\r\n render() {\r\n~~ return (\r\n <div class=\"notification_pane_div\">\r\n {this.state === 'empty' && [\r\n <div class={`container`}>\r\n <img src~~=\"build/assets/no_notification_frame.svg\"~~ alt=\"\" />\r\n </div>,\r\n <div class={`button`}>\r\n <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n <p>Mark all as read</p>\r\n </gb-button>\r\n </div>,\r\n ]}\r\n {this.state === 'notification_dropdown' && (\r\n <div class=\"notification_dropdown\">\r\n <div class={`content_wrapper`}>\r\n <gb-notification-content label={this.label} time={this.time} supporting-text={this.supportingText} icon={this.icon}></gb-notification-content>\r\n </div>\r\n <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n <p>Mark all as read</p>\r\n </gb-button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"gb-notification-pane.js","sourceRoot":"","sources":["../../../src/components/gb-notification-pane/gb-notification-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAOhE,MAAM,OAAO,kBAAkB;;;6BAEE,EAAE;oBACV,EAAE;qBACD,EAAE;oBACH,EAAE;8BACQ,EAAE;;IAEnC,aAAa;QACX,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;IACpE,CAAC;IAED,uBAAuB,CAAC,YAAyB;QAC/C,YAAY,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,YAAY,CAAC,kCAAkC,CAAC,CAAC;QAEzE,OAAO,CACL,4DAAK,KAAK,EAAC,uBAAuB;YAC/B,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI;gBACzB,4DAAK,KAAK,EAAE,WAAW;oBACrB,4DAAK,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,EAAE,GAAG,CAChC;gBACN,4DAAK,KAAK,EAAE,QAAQ;oBAClB,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,kBAAe,IAAI,uBAAoB,wBAAwB;wBAC5I,+EAAuB,CACb,CACR;aACP;YACA,IAAI,CAAC,KAAK,KAAK,uBAAuB,IAAI,CACzC,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,4DAAK,KAAK,EAAE,iBAAiB;oBAC3B,gFAAyB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,qBAAmB,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAA4B,CAC1I;gBACN,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,kBAAe,IAAI,uBAAoB,wBAAwB;oBAC3H,+EAAuB,CACb,CACR,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-notification-pane',\r\n styleUrl: 'gb-notification-pane.css',\r\n shadow: true,\r\n})\r\nexport class GbNotificationPane {\r\n @Prop() state: 'empty' \| 'notification_dropdown';\r\n @Prop() notifications: any[] = [];\r\n @Prop() icon: string = '';\r\n @Prop() label: string = '';\r\n @Prop() time: string = '';\r\n @Prop() supportingText: string = '';\r\n\r\n markAllAsRead() {\r\n this.notifications.forEach(notification => notification.remove());\r\n }\r\n\r\n handleNotificationClick(notification: HTMLElement) {\r\n notification.remove();\r\n }\r\n\r\n render() {\r\n const illustrationSrc = getAssetPath(`assets/no_notification_frame.svg`);\r\n\r\n return (\r\n <div class=\"notification_pane_div\">\r\n {this.state === 'empty' && [\r\n <div class={`container`}>\r\n <img src={illustrationSrc} alt=\"\" />\r\n </div>,\r\n <div class={`button`}>\r\n <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n <p>Mark all as read</p>\r\n </gb-button>\r\n </div>,\r\n ]}\r\n {this.state === 'notification_dropdown' && (\r\n <div class=\"notification_dropdown\">\r\n <div class={`content_wrapper`}>\r\n <gb-notification-content label={this.label} time={this.time} supporting-text={this.supportingText} icon={this.icon}></gb-notification-content>\r\n </div>\r\n <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n <p>Mark all as read</p>\r\n </gb-button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"]}

package/dist/collection/components/gb-pagination/gb-pagination.css CHANGED Viewed

@@ -2668,6 +2668,7 @@
 .entries{
     display: flex;
     gap: var(--spacing-2);
+    align-items: center;
 }
 .buttons{
@@ -2675,6 +2676,16 @@
     gap: var(--spacing-3);
 }
+.entries_dropdown{
+    width: 5.125rem;
+}
+.pagination_numbers{
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-half);
+}
 /* Pagination Type Styles */
 .pagination_div.page_default.desktop,
 .pagination_div.page_minimal_center_aligned.desktop{

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

@@ -4,11 +4,26 @@ export class GbPagination {
         this.type = undefined;
         this.shape = undefined;
         this.breakpoint = undefined;
-        this.currentPage = 1;
-        this.totalPages = 10;
+        this.currentPage = undefined;
+        this.totalPages = undefined;
+        this.entries = [];
+    }
+    componentDidLoad() {
+        const entries = [5, 10, 20, 50, 80];
+        this.entries = entries;
+    }
+    onPreviousButtonClicked() {
+        if (this.currentPage === this.totalPages || this.currentPage > 1) {
+            this.currentPage = this.currentPage - 1;
+        }
+    }
+    onNextButtonClicked() {
+        if (this.currentPage === 1 || this.currentPage <= this.totalPages - 1) {
+            this.currentPage = this.currentPage + 1;
+        }
     }
     render() {
-        return (h("div", { key: 'dd1cb50a6335c7e4bd86a90698605b02a76e9f0a', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'dc9e8e64d1ec6e903dae32a4b8753d6797d2be84', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'd034b1389645f868c83121eee8d8cb3bca992918' }, "Previous")), h("gb-button", { key: '33c1c748113484a8f27aee48511603f1e69791f3', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '02208e7dc23a618cd4133e577278983aacc820b3' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '62b9b76852f559c17001854526179a390de841cd', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '14adf7e4ce9af89099c3097851f339edb8614a13' }, "Previous")), h("gb-button", { key: 'ee0df9fdfa2dd038a0664065f576b92aa2cdb4f5', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '49c5513f51f3b4cd5ee5bada17f5e689b8ab660a' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'a151af7cdf10a51e7217c1aa8f18c9612edb12b3', class: "entries" }, "Entries"), h("div", { key: '578b067c9f3ae5042ff7a69e463bd8d57ae995f0', class: "page_numbers" }), h("div", { key: '0a0b08f6b0b64692150ef2b2895ae0b2dc12d3e2', class: "buttons" }, h("gb-button", { key: 'f972b25fae3b79bed2cdb88cfd501913b1c9ad93', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("gb-button", { key: 'dc7b17491dc0c6c1ce6c1935bf81e5e0a70d2e62', 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: 'f73454cee82aba715b74f1ad1bfdb1d777bd9a17', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("div", { key: 'bc08028b24de28ee7f5be73df11fe1c04a5dc814', class: "page_number_text" }, h("p", { key: '6aefd8388c36da9658b43a3928c8ef0cbe95a81a', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '7397f68b6704c4b5b5c073d8c6e9058f5274d1a2', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))));
+        return (h("div", { key: '650fc82612fbab1ee0ee5492f5cb91092e626de8', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'd5531744a07978f073502b6b7f0cc23dedd22ff8', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '3247d271bef8d606e4026b437aa60d4550b61820' }, "Previous")), h("div", { key: '6320e3f94ef47c06a71306e75574ce1ef8d37e33', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '68d8cd0f56ab5db51d9589c83fe8458cbb2215d5', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: 'e401b7adecb5300d5813c624c43d1f944d303c2a', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '6f841fc39785b6c429eebf32daa86f5eb13b2a82', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: '8f1eb1ba381bc5819165bc1c39ad1b6121514c17', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '783c5e3ae68bc66c88fdc427f1da81dcf6b2bdf5', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: '8a5c3ee79af35036d2c61ef66a6adbca9e414307', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '89ee5a25f868775a16449bb6d78d96072f178418', shape: this.shape }, h("p", { key: '05bfcd8c497015fb99b9b6de17063f3766f15cf2', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'efd69e7bfa0bedc780130c190d5d7167092d93d1', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: 'c1e92c533fb095939f5e5dc0be6ec325939f2f88', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'cb12cdc820e3c2ee6424443b4aa716ad4ce1e37c', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '3e54b1503fbcc673ca10bbf04873a9fb638f1a71', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '249be9f9cdc66502469d07280d50cd2ff62b7d57', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: '859d1b83f3d19dd4afafbdd62198b222fbc22f48', slot: "page_number" }, this.totalPages))), h("gb-button", { key: '44e55c8003a61baa3d3b958b0c6f3ee2168c2367', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '48bd29b3d7f29a54d505fa44df4e38b98496cd21' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '5a8ced546ae48ea0361cf6922ac86703855c4a2b', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'a372d1959423bbdeaaa63ba630bc51cc79f3c8ce' }, "Previous")), h("div", { key: '371afe460f4f6a82d5ac3bca521ad0844257b057', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '97c5a0c3e306edab1cc8d0b441fac6407e01ccc6', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: '54fb840f9ca12bf69d774b38d354f04423bd02ea', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '8e657ac69e953dc711a112c3b7d7c22a23a0a387', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: '89d2e9b1ef4855979bddf191ae512ac7f8d62a69', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '283ecc9b8df94b83e36899b9f1597031b31bb085', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: '1cc46d67f59fd87d3160fa0123ac199272641a64', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'dc8d3b4ea40084c9e07374ec9591c8754b5df7b6', shape: this.shape }, h("p", { key: '03442a7d095af3a01060496874c3923f66263b13', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '0ffc63224573362b0154a7fc1e9238dc95af35c0', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: 'f6e67198f1ae32f5961b93d5669b72a8bada5be7', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '3717eb332cbad6a0546895cce0d32af6e450b7f2', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '56dafe1b89b37b5480681d4754ba07f3319b3816', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '805006f6bc673ccb35aa8e7397e15f9cbb09ecd0', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: '75309e4289f28e5f2ce35de098532e1c37c60bab', slot: "page_number" }, this.totalPages))), h("gb-button", { key: 'dc3480b78e1238a1c23edcc2bbe81ba30739f923', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '49abd6ead533ae4ffb34f59ec931290136d81022' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'f8a6da01d8723079f8164043d1dc90d1a35bd669', class: "entries" }, h("div", { key: 'fe02a3c1a4341d9d19b1229aa82cebe436101cb2', class: "entries_text" }, h("p", { key: '18df6d7daddf1ee179e5f32708bf491848a980ec', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'a2baa5fee4a826ea0ec16cb4f196c6dd31343087', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'bb41bcd05dad5e5160cfbf2889a7a2c7dc35dac7', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries }))), h("div", { key: '9e2f103d64a4d9d13f682826173dc21d560b41c1', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: 'be461b098e41c02b0e604342acbbc78c81270c49', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: 'b82859a971be4a80ef0b5780a016bccd2533ddf7', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '6af3ed8c30047ceb8ce5523860545c4ba99b1bc0', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: 'd588236d403e877ccf1a0867ad20003d9bb98e8f', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'dd73c72d19e58b70ef8d3dbb6d590d2a2d289f28', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: '09ab5b01dc9066aea390faf077a629c1c5a6aa95', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'f86939f7e2c746f8d3609647295bf3d72b1bb7b7', shape: this.shape }, h("p", { key: '783e266c3888f240fcf1aa07ad64e0250e0037f1', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '02c024e8c4fd0e7d7575d3a912ae4e0eb29ac6e4', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: '88e824e6a7649c45e03efb6f7bf8d17f1697b323', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '867d83e080d69cd1d8e9caf7b20839a176981539', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '50133829eec3c66632cdb8ce8ffcefcc228e591f', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'c447feaf90d58a1ed99171f43af479e28175b7c6', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: '104ec88d2d7336ed7d4a189f228a2e83dee1eadb', slot: "page_number" }, this.totalPages))), h("div", { key: '49a8dc839a1ab6afd7cec8d9ff9720c35510513c', class: "buttons" }, h("gb-button", { key: '656d824fef849ddbf78dd4fedf409aaae6999d5d', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: 'dd0f3eb3e92ef4a396fd9a94007ff29cffd3f10c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))), this.type === 'card_minimal_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'e3f0f3d780fa08bf2edc1b560fa17af750e8375c', class: "entries" }, h("div", { key: 'cb6ab0466affb08f0b7941c81b843532c715d911', class: "entries_text" }, h("p", { key: '571d88c6b7caf80d33f7a7af1767f488017e566c', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'a9b22350fbfa0cc921c68c8521e570b97a0f3f1f', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '348d75e16630515a7d7d5fc6640128dd901ea10b', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries }))), h("div", { key: 'e13791db4502f10a7ee24ac0f9c4c4baea93d949', class: "page_number_text" }, h("p", { key: '31fce8275520e58a8c5daa49ca95a8c50c2ae8b5', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: 'b915fcc35bd8861329451964b47bca0e9497fdb8', class: "buttons" }, h("gb-button", { key: 'c25c3c84881133d5ca34df900828ecbca7422e21', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '7055d4856a2c25a57d0b5abab272add9ee2152a8' }, "Previous")), h("gb-button", { key: '1cd2f733752a37a08dd24b8a0e6e38747f3a8ee6', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'cb0d9fc0d642d80976bf1750ad62fbf3739d66fc' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '280968713e15331becaec3e18746ea6869770939', class: "buttons" }, h("gb-button", { key: '6abdf814110023af89d02b385f3d193dd4741c68', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'f2c381a0664d2d38c7810ce25d55346d703fcc20' }, "Previous")), h("gb-button", { key: '51d6a2ab0e8c1ace04f3fe5fdce051c76e427f4d', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '84c411a49820b7097c74a63501f81d49a8e17180' }, "Next"))), h("div", { key: 'de580ee6b6a4d207dbcaec0d0395d72064ee4eff', class: "page_number_text" }, h("p", { key: '8ab6d0eae2a74fb7750c65f0afd27def6544b2e5', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '1fc0d2333e988908132c912194972d0fa7bafd5d', class: "entries" }, h("div", { key: 'e7e4ef2798492bc089e33dabec4ed199ad770e4c', class: "entries_text" }, h("p", { key: '394205b70e91a06e28677e779cac70f8fa4cbc58', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'b33ae0ac7a84dc213b46948708b6de471ed434cb', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'db2339b1e6b18b4329e213bff0e0097aafc3fee2', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '8eca871aa92dc45fa36f4d31fd30840492e16b18', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'cb5d2e94f18429aa9224d010db952c0cbbf037c0' }, "Previous")), h("div", { key: '12182d6453e5dc69ba2ed1353988c6200f105401', class: "page_number_text" }, h("p", { key: '099a061d81ba7d84f430977d03b5a6ac7c5f56a7', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '95888b5f14f2a58f0bdbf9a703b9e8b0e3a4bd6b', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '801424db897728c7aa67d477ca76616aab175b6b' }, "Next")))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '26d671322e88536a338b3763559f138fa9352185', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("div", { key: '03bd169dbe8786d75c58233fa20a1ade9fb7474d', class: "page_number_text" }, h("p", { key: 'b0efc91924a6b6c184e8710052cd122263e49e27', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '0016b96618b80ea118d27a9d50b9833d1f5d3898', 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"; }
@@ -108,8 +123,7 @@ export class GbPagination {
                     "text": ""
                 },
                 "attribute": "current-page",
-                "reflect": false,
-                "defaultValue": "1"
+                "reflect": false
             },
             "totalPages": {
                 "type": "number",
@@ -126,8 +140,23 @@ export class GbPagination {
                     "text": ""
                 },
                 "attribute": "total-pages",
-                "reflect": false,
-                "defaultValue": "10"
+                "reflect": false
+            },
+            "entries": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
             }
         };
     }

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

	@@ -1 +1 @@
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}"]}
1	+ {"version":3,"file":"gb-pagination.js","sourceRoot":"","sources":["../../../src/components/gb-pagination/gb-pagination.tsx"],"names":[],"mappings":"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","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;\r\n @Prop() totalPages: number;\r\n @Prop({ mutable: true }) entries: any[] = [];\r\n\r\n componentDidLoad() {\r\n const entries = [5, 10, 20, 50, 80];\r\n\r\n this.entries = entries;\r\n }\r\n\r\n onPreviousButtonClicked() {\r\n if(this.currentPage === this.totalPages \|\| this.currentPage > 1) {\r\n this.currentPage = this.currentPage - 1;\r\n }\r\n }\r\n\r\n onNextButtonClicked() {\r\n if(this.currentPage === 1 \|\| this.currentPage <= this.totalPages - 1) {\r\n this.currentPage = this.currentPage + 1;\r\n }\r\n }\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=\"pagination_numbers\">\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 1 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">1</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">2</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 3 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">3</p>\r\n </gb-pagination-number-base>\r\n {this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.currentPage}</p>\r\n </gb-pagination-number-base>\r\n ) : null}\r\n <gb-pagination-number-base shape={this.shape}>\r\n <p slot=\"page_number\">...</p>\r\n </gb-pagination-number-base>\r\n {this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.currentPage}</p>\r\n </gb-pagination-number-base>\r\n ) : null}\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages - 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages - 2}</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages - 1 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages - 1}</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages}</p>\r\n </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 <div class=\"pagination_numbers\">\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 1 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">1</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">2</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 3 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">3</p>\r\n </gb-pagination-number-base>\r\n {this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.currentPage}</p>\r\n </gb-pagination-number-base>\r\n ) : null}\r\n <gb-pagination-number-base shape={this.shape}>\r\n <p slot=\"page_number\">...</p>\r\n </gb-pagination-number-base>\r\n {this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.currentPage}</p>\r\n </gb-pagination-number-base>\r\n ) : null}\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages - 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages - 2}</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages - 1 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages - 1}</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages}</p>\r\n </gb-pagination-number-base>\r\n </div>\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 <div class=\"entries_text\">\r\n <p class={`text-sm-medium`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n Entries\r\n </p>\r\n </div>\r\n <div class={`entries_dropdown`}>\r\n <gb-input-dropdown\r\n type=\"default\"\r\n state={'default'}\r\n size=\"sm\"\r\n show-label={false}\r\n show-hint-text={false}\r\n show-supporting-text={false}\r\n show-hep-icon={false}\r\n items={this.entries}\r\n ></gb-input-dropdown>\r\n </div>\r\n </div>\r\n <div class=\"pagination_numbers\">\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 1 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">1</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">2</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === 3 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">3</p>\r\n </gb-pagination-number-base>\r\n {this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.currentPage}</p>\r\n </gb-pagination-number-base>\r\n ) : null}\r\n <gb-pagination-number-base shape={this.shape}>\r\n <p slot=\"page_number\">...</p>\r\n </gb-pagination-number-base>\r\n {this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.currentPage}</p>\r\n </gb-pagination-number-base>\r\n ) : null}\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages - 2 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages - 2}</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages - 1 ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages - 1}</p>\r\n </gb-pagination-number-base>\r\n <gb-pagination-number-base shape={this.shape} state={this.currentPage === this.totalPages ? 'active' : 'default'}>\r\n <p slot=\"page_number\">{this.totalPages}</p>\r\n </gb-pagination-number-base>\r\n </div>\r\n <div class=\"buttons\">\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"secondary_gray\"\r\n icon=\"only\"\r\n state=\"default\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/arrow-left-02.svg\"\r\n onClick={() => this.onPreviousButtonClicked()}\r\n ></gb-button>\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"secondary_gray\"\r\n icon=\"only\"\r\n state=\"default\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/arrow-right-02.svg\"\r\n onClick={() => this.onNextButtonClicked()}\r\n ></gb-button>\r\n </div>\r\n </>\r\n )}\r\n {this.type === 'card_minimal_right_aligned' && this.breakpoint === 'desktop' && (\r\n <>\r\n <div class=\"entries\">\r\n <div class=\"entries_text\">\r\n <p class={`text-sm-medium`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n Entries\r\n </p>\r\n </div>\r\n <div class={`entries_dropdown`}>\r\n <gb-input-dropdown\r\n type=\"default\"\r\n state={'default'}\r\n size=\"sm\"\r\n show-label={false}\r\n show-hint-text={false}\r\n show-supporting-text={false}\r\n show-hep-icon={false}\r\n items={this.entries}\r\n ></gb-input-dropdown>\r\n </div>\r\n </div>\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 <div class=\"buttons\">\r\n <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"default\" state=\"default\" onClick={() => this.onPreviousButtonClicked()}>\r\n <p>Previous</p>\r\n </gb-button>\r\n <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"default\" state=\"default\" onClick={() => this.onNextButtonClicked()}>\r\n <p>Next</p>\r\n </gb-button>\r\n </div>\r\n </>\r\n )}\r\n {this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (\r\n <>\r\n <div class=\"buttons\">\r\n <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"default\" state=\"default\" onClick={() => this.onPreviousButtonClicked()}>\r\n <p>Previous</p>\r\n </gb-button>\r\n <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"default\" state=\"default\" onClick={() => this.onNextButtonClicked()}>\r\n <p>Next</p>\r\n </gb-button>\r\n </div>\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 <div class=\"entries\">\r\n <div class=\"entries_text\">\r\n <p class={`text-sm-medium`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n Entries\r\n </p>\r\n </div>\r\n <div class={`entries_dropdown`}>\r\n <gb-input-dropdown\r\n type=\"default\"\r\n state={'default'}\r\n size=\"sm\"\r\n show-label={false}\r\n show-hint-text={false}\r\n show-supporting-text={false}\r\n show-hep-icon={false}\r\n items={this.entries}\r\n ></gb-input-dropdown>\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n {this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (\r\n <>\r\n <gb-button size=\"sm\" hierarchy=\"secondary_gray\" icon=\"default\" state=\"default\" onClick={() => this.onPreviousButtonClicked()}>\r\n <p>Previous</p>\r\n </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=\"default\" state=\"default\" onClick={() => this.onNextButtonClicked()}>\r\n <p>Next</p>\r\n </gb-button>\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.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class GbPaginationButtonGroupBase {
         }
     }
     render() {
-        return (h("div", { key: '4a0a04e7852cc7591ca8c0ecca4c51cb76da3671', class: `button_base_div ${this.icon}` }, this.icon === 'false' && h("slot", { key: '303f27909ffb5859826efe7a136b37024ce279ef' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: 'ddb50e78595ab3d70af98a9e6c84882fbbe2a209', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'd3bd343aed8d2fc4891c93aa848f4e617e2f0a36', 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: '5832b97d5c5dd05aabfc6a70885a10cef7b155cb' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: 'c79872279071f535bb94b82481cc2de15914ede3' }), this.iconTrailing && (h("svg", { key: '4372722af49c412f02c52c72f661611f4c19fa15', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '95de36b9aa6509318f24a6a93caaea44036b4241', 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: '997b0921cfa9f8fa06b56224cd0f3f5854a0acad', class: `button_base_div ${this.icon}` }, this.icon === 'false' && h("slot", { key: 'fc3a4ae74e6b4bd87eb32f16bcf1c8f1a0464dce' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: '9ac027dde53ce5c6d2739b09a894f94867837910', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '65f36f6e7cbea22b177f18520d48d2bb637823f6', 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: '51006c608e91e42e52c375d565dfec6c1ec5d214' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: '8935bfed628cf2132a404fdc0ec4d3b1466f949e' }), this.iconTrailing && (h("svg", { key: 'f6455437fe34c933fe3b70ba84bf19058609e0a3', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '01d577bb7939c0c7f2b950839447d81213531c1c', 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"; }

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

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

package/dist/collection/components/gb-pagination-number-base/gb-pagination-number-base.css CHANGED Viewed

@@ -2682,6 +2682,7 @@
     background-color: var(--color-background-information-subtler, #C8E0F9);
 }
-.page_number_base:active{
+.page_number_base:active,
+.page_number_base.active{
     background-color: var(--color-background-information-subtle, #9AC7F4);
 }

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 export class GbPaginationNumberBase {
     constructor() {
         this.shape = undefined;
+        this.state = undefined;
     }
     componentDidLoad() {
         const slottedContent = this.el.querySelector('[slot="page_number"]');
@@ -10,7 +11,7 @@ export class GbPaginationNumberBase {
         }
     }
     render() {
-        return (h("div", { key: 'd698060f0262fff399d3b60e7cf677419c9d9576', class: `page_number_base ${this.shape}` }, h("slot", { key: 'cd0433f210a15ef6be0018148ae98f586c69faa4', name: "page_number" })));
+        return (h("div", { key: '76fe1287b235191c1b0baf0ee299e5bee43d5227', class: `page_number_base ${this.shape} ${this.state}` }, h("slot", { key: '0f407592b6fcd60f469f1f2c8d9b201f98a34423', name: "page_number" })));
     }
     static get is() { return "gb-pagination-number-base"; }
     static get encapsulation() { return "shadow"; }
@@ -48,6 +49,23 @@ export class GbPaginationNumberBase {
                 },
                 "attribute": "shape",
                 "reflect": false
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'active' | 'pressed'",
+                    "resolved": "\"active\" | \"default\" | \"pressed\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-pagination-number-base.js","sourceRoot":"","sources":["../../../src/components/gb-pagination-number-base/gb-pagination-number-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAS5D,MAAM,OAAO,sBAAsB~~;;;;IAI~~/B,gBAAgB;QACZ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAErE,IAAG,cAAc,EAAE,CAAC;YAChB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACnD,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,KAAK,EAAE;~~YACxC~~,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC9B,CACT,CAAA;IACL,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { Component, Element, Prop, h } from \"@stencil/core\";\r\nimport { PaginationNumberShapes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-pagination-number-base',\r\n styleUrl: 'gb-pagination-number-base.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbPaginationNumberBase {\r\n @Prop() shape: PaginationNumberShapes;\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const slottedContent = this.el.querySelector('[slot=\"page_number\"]');\r\n\r\n if(slottedContent) {\r\n slottedContent.classList.add('text-sm-medium');\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`page_number_base ${this.shape}`}>\r\n <slot name=\"page_number\"></slot>\r\n </div>\r\n )\r\n }\r\n}"]}
1	+ {"version":3,"file":"gb-pagination-number-base.js","sourceRoot":"","sources":["../../../src/components/gb-pagination-number-base/gb-pagination-number-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAS5D,MAAM,OAAO,sBAAsB;;;;;IAK/B,gBAAgB;QACZ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAErE,IAAG,cAAc,EAAE,CAAC;YAChB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACnD,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;YACtD,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC9B,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Prop, h } from \"@stencil/core\";\r\nimport { PaginationNumberShapes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-pagination-number-base',\r\n styleUrl: 'gb-pagination-number-base.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbPaginationNumberBase {\r\n @Prop() shape: PaginationNumberShapes;\r\n @Prop() state: 'default' \| 'active' \| 'pressed';\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const slottedContent = this.el.querySelector('[slot=\"page_number\"]');\r\n\r\n if(slottedContent) {\r\n slottedContent.classList.add('text-sm-medium');\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`page_number_base ${this.shape} ${this.state}`}>\r\n <slot name=\"page_number\"></slot>\r\n </div>\r\n )\r\n }\r\n}"]}

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

@@ -8,7 +8,7 @@ export class GbPasswordButton {
         this.isPasswordVisible = !this.isPasswordVisible;
     }
     render() {
-        return (h("div", { key: '46c2336cc79e617e1bc1deff0888a16c086076d3' }, h("gb-btn", { key: 'ef43b3646e4afc8037b136a9b3ed3c3b8da847a6', 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: '9b5e69406650fc62964f4a01e61d346a4a412591' }, h("gb-btn", { key: 'b6cdce84fc227e4f9e7cfd0e3a0453c91cf3d5ae', 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.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class GbProgressBar {
     }
     render() {
         const progressValue = Math.min(Math.max(this.progress, 0), 100);
-        return (h("div", { key: '37a6800cbf25eae67f401df7933a56e2a786988e', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: '4e3592be736ef93dde1ee400175dd081c29dfe8e', class: "progress_bar" }, h("div", { key: 'f1462c0e983bcfa6090e73ee2c11d87c123a3cec', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: 'db56c52b72d957a0408fb82685acce95f5857656', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: 'a92e250aff46f4fcf0a6d9689f8b2840016c89c3', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: 'b5ec478ca5ac97ef0626a69969ad3f640e53e34d', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: '2f42ceef72ef880b300c46864dcf44d3e82ad084', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: '34b371546dc458a4f3f4a4f51e605def3cf7bfb7', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: 'df7ab5397fcfb3666d060c3d42190a16debb16ba', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: 'f0c3212fd42fb2a95f2881cb1fee26c8d8474fb8', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
+        return (h("div", { key: '48fa9856eac8e86a2198913ed38c657ec61a9f7d', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: '0cdac568a12dd561b5883fa911b0954f87868391', class: "progress_bar" }, h("div", { key: '6540debc485001972d9944131fdab31bd92a4973', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: 'e4f261bbd583aa738e7327143e4931431eb859a6', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: '7af7d04b3f78b10a3dcdd510814c852f68e571f4', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: '987a2addef90327337be4a8e002d0e0a11fea47d', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: '2aef24c447724c4f2cc40d8cb9a55effd34f97b8', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: 'd010fe9be6b926556f354d340966c3e8a0eb47e5', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: 'fd828c7efa8fac8ad10ccc730e88c0186081b560', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: 'b854266e97d7c542b5d1daf9aabc94115b1803af', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
     }
     static get is() { return "gb-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class GbProgressCircle {
         }
     }
     render() {
-        return (h("div", { key: 'b47a2f8630b47659b164bd880f173189b6e9006a', class: "gauge" }, h("div", { key: '612ddfd00dcbd32d502bba09534045b44b4fe397', class: "arc", ref: el => (this.arcElement = el) }), h("div", { key: '728984beb403c040da88f736a940e6e95969400d', class: "mask" }), this.label && (h("div", { key: '7e987262ecba3e0ee765cf58aac4811ee78141ed', class: "label", ref: el => (this.labelElement = el) }, h("p", { key: 'edb733904507c80d856a8d5b4d7675a054404ef2', class: "display-lg-semi-bold" }, `${this.progress}%`)))));
+        return (h("div", { key: 'e40c22240d40535195c6cdf20199a46ac194feb0', class: "gauge" }, h("div", { key: 'cb0686e986a47523e1820cd4e06ff73f38f3cafd', class: "arc", ref: el => (this.arcElement = el) }), h("div", { key: '615037f657cf4ac8ecd0c38a35607ccb5c196a1b', class: "mask" }), this.label && (h("div", { key: '0007d8348d51923b8b8eba2bca5420724f3ef10f', class: "label", ref: el => (this.labelElement = el) }, h("p", { key: 'fb25d4587482a22393b688a23268259dd5679365', 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 CHANGED Viewed

@@ -15,7 +15,7 @@ export class GbRichText {
             destructive: this.destructive,
             disabled: this.state === 'disabled'
         };
-        return (h("div", { key: 'bab0351fa2a6fdadd69ccd68c7cc5a51a6cc8ad1', class: classes }, h("div", { key: '4344b4ddf7ffb1fc5e498892d9d52a4798575434', class: "input-with-label" }, h("label", { key: '7b6ed6244de30880e9cf83ce57f676022a88fb99' }, this.label), h("div", { key: 'ad7534caae78fe9e81f088859bde10812a14dd92', class: "input-container" }, h("div", { key: '8d9b71ebd3d8c36bbe641799c9e0f35d5e4eae49', class: "toolbar-container" }, h("gb-wysiwyg-toolbar", { key: 'e369b3edce2e37a3304f9e8cc5969d526b16eca6', 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: '001a8815621b9eb251845cf36459fabeddf1a5dc', class: "error-icon" }, h("svg", { key: '454870abe9921e51e573885881e2667383b88169', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '8944a8d7026377506f3e243c6495b7e797d29b51', 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: 'fc9f4669e8a44ce022ce629ac6df37efeb2882b7', class: "text-container" }, h("textarea", { key: '0261a471d1754987f80bbfcc4f84abecae7ffe4b' }, this.showPlaceholder && (h("div", { key: '60b33174c0ca4ca8f5a41c57f0b89e1e5ec28c42' }, this.placeholder)))))), this.showHintText && (h("div", { key: '63aa795bb487c308f0e7774e9b50a54b11bc2ddc', class: "hint-text" }, this.hintText))));
+        return (h("div", { key: 'dccf5650f54946427a294c3c8df02e44f1d12c76', class: classes }, h("div", { key: '57e573d457f18bd95918c0bd2961a059b5ffe331', class: "input-with-label" }, h("label", { key: 'ba15fe56cc947c407881ec707acc6bef94c6c060' }, this.label), h("div", { key: '237f7a6b164480171e790122f53b36cca1c8b8f0', class: "input-container" }, h("div", { key: '84002ccca440be6300b88458de4f764bad7c4fc9', class: "toolbar-container" }, h("gb-wysiwyg-toolbar", { key: '66e8a427e4fbb3ea94ddb05026e6a2502e2ccc97', 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: 'e544e3c0ecc1a307e9ffa2972510ea05c9313be6', class: "error-icon" }, h("svg", { key: 'e2f8aa913aa1c973923931a986fc1c0ae04fc71e', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '0cd16f03fcca2697839d80f19da89f333d7f71a6', 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: 'efe883f87d855214ee699710d13b60aa1d3ece36', class: "text-container" }, h("textarea", { key: 'cb0682f3380663cb2abd3a0d0d8717536bfcd1e6' }, this.showPlaceholder && (h("div", { key: '5360ce7fafab1233b36b84cf141f1806831cb279' }, this.placeholder)))))), this.showHintText && (h("div", { key: 'f2b1fc7c5ac216d1b6537080d61a28440dc3d195', 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 CHANGED Viewed

@@ -4,7 +4,7 @@ export class GbScrollbar {
         this.length = '25%';
     }
     render() {
-        return (h("div", { key: '70c21115959e8fe8acd1d3b681cf2ef04bb466c2', class: "scrollbar-container" }, h("div", { key: '3ea7a16d88b10b9060a83a94643799ab73f17d1a', class: "scrollbar", style: { height: this.length } }, h("slot", { key: 'b2b5b38fdca2027ca51ec48eddd2dcabb6e5d949' }))));
+        return (h("div", { key: '6b728a26fc88db5eee7333e72254a8942b92b56a', class: "scrollbar-container" }, h("div", { key: 'f46021f475166dd8b809ad2888cf36e21f455adf', class: "scrollbar", style: { height: this.length } }, h("slot", { key: '9e637983233a7787b3d3d06fb868ffb66b76b32c' }))));
     }
     static get is() { return "gb-scrollbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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: '914523b6f1f02cc9d4400bae5c3c26b8ff75d931', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '8803999f20474df425b88d0b8d93ec466df95eaf', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: 'b1e0698be41991ae4f6cddff31ef955b1ed5d79a', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '2642540736266a264b9db3ee50d79a7ecb64de6d', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: 'ee3040e7ba3c5b2f28480a19ca09140e14915c8d', class: "content" }, h("div", { key: '39160db50b7786484418dfd551279835a1f661a8', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: 'c237939583c3cadcf34022dc42fe1a356370d7bc', 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: '1d4463e099fe5fabfcf9f2a937b99ae898be3e55', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '1257c79b944bcc1c69b517f66d0eb41d7ff3f762' }, "10"))), this.showArrow && (h("svg", { key: 'faf59912f3cf0d537dd2078afe284828cabe6177', 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: 'a578ef3ca1b1152a3624c39b4f993f7bb16efc2c', 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: '8c3ec005eb60f8d263b68e7b1a9283e348d4a581', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '94626109f1471134b478f27a39fb4bea99a53a5e', slot: "label" }, this.label)))));
+        return (h("div", { key: '906b80455593f0798f5ec8e5ea6ec1757bf891b8', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '8bdcbc4e31c2839848ff99248bcfb355c3cd614b', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '4ce69cd5c936f5ceafcfbe459b0db4e43ee6649d', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'e644d8733a6d2a92a161e32ca9b470aca948ecbd', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: '9f138fab7196bbc23e95a44a2dc9feb281ef562a', class: "content" }, h("div", { key: 'c0fa238ced32b4ca881d05a36a19765931a30589', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '35c5560b657e1487a59e350683836f05af82c9bc', 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: '376f8969a3dfa83b0d10831228db3524e4359ae8', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '9d634854e5957494d8266aa5af9f1424f1d88cb1' }, "10"))), this.showArrow && (h("svg", { key: '63e55ee053de7ac8f22820002e2acccd21ff2230', 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: 'c83d31dcca637400c12a94d461e6f1728179999c', 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: '1d83d79e6b4a44039e9fd655c8fb1e86d21ffaab', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '0fd7481ab649edea804bbe67d4daa480ea7fef71', 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 CHANGED Viewed

@@ -68,7 +68,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: '289e6fa82528c77bb38ec38cf10e406459ef198d', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '80b9679c603408f92e93996185287c5c18577016', class: "pattern" }, h("img", { key: '94cabbc1f4522da3ec5ffc25d9d05ea4aa6cb0e3', src: patternSrc, alt: "" }))), h("div", { key: 'fca67c0df7c402308e86a292329cf0074e940575', class: "nav" }, h("div", { key: '239fbc2409de268ed4895a35bfc6bfb58d54da7b', class: `sidebar_header ${this.state}` }, h("div", { key: '80954f728728cdcac754f26812a23cd23b9d0d8e', 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: '1abc6fd283196847fd736f92e6301f073d01123c', src: logoSrc, alt: "" })), h("div", { key: '66b012bca85ad1d1bdd4e672c63bf5d3aa3a0671', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '9da7c88332da1a67b362276eca876cb522245ba0', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'bdde49881636f615670998f225eead1963bb5ca4', class: "navigation" }, h("div", { key: '840516c543ff0be824033e09547e74d9d775f870', class: "item" }, h("gb-side-bar-item", { key: '9963fd41baf15f14344e87b07ae5ccd65d4f45ce', 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: '3ec37422f88c8c43fa7f1fc27da6dc0cc533a6f9', 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: 'f0bd864de8fa11f31a716a480144ccf7792ec339', 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: '9b72eeb11b6d9245157beedfd376f7dc49a4cf9f', 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: 'd786d1c2a4579a377e8197eaabd932b3e23dce0d', 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: 'c0d373a2626e9eecf849bd5e98697516394369f8', class: "navigation" }, h("div", { key: '66d5d09048298ed86dc2f9f9fd3718ab4e54c510', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: 'b4af3978136a7b2af0ba2179a22c1576c79430bc', 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: '08fe0d45d2b3c813ab2c71488333b2312d6f6cc5', 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: '75faab1ccc24f2110a436151ca0a10b01976f943', 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: '0a5bb7b39d05a02e8bad94478e565f634c74f164', 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: '598e68387d802c646070014e4bc1bf7019c254ec', 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: '4333cb9a13fbd9eb856438f528c83df70a0b794c', class: "application_name" }, h("div", { key: '5ee2c5af261ac4e44d2c31e1f8734bd9c7d6ef34', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: 'f0661030bd266ee38e716c18494e6ef39a85481b', class: "application_name_pattern" }, h("img", { key: '01b0ac6a0e4456652745b63aef4b3a738d018114', src: patternSrc, alt: "" }))), h("div", { key: '6237c871cbd12c70977392c4d982d8dda0959bca', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: '2c63e3570ccb89f96a579e6630b65a52899bf9ed', class: textClass }, h("slot", { key: '1f6eb7228ab4329aa9c2caf412b93855634ebe09', name: "application_name" })))))));
+        return (h("div", { key: '2f9265c934c3f4dddc1fd2f119690d7dd3e04089', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '56067a416cac36390f28da3554eab2ffb986b62c', class: "pattern" }, h("img", { key: 'e87935b2330fc0bacc2445883ffa3ee9753e125d', src: patternSrc, alt: "" }))), h("div", { key: 'd7c651a03f0de0a038da557f21a960d3c5041278', class: "nav" }, h("div", { key: 'cf575d0819ecab751c9956898d6fc7e9e2faee5b', class: `sidebar_header ${this.state}` }, h("div", { key: '730975241ede9529ccdd2cc1e18b6f79eb66c20c', 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: 'df535344d2caabaabcf4a57c75a0e8e157b915ce', src: logoSrc, alt: "" })), h("div", { key: 'a18550cffb54f41657f163515826a83e2fa71fe6', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '6641429be1d6c32ddc562ccacf5ffa74332b7039', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'bfdd5108ea6eab63bd56c799ec57b637968bd32b', class: "navigation" }, h("div", { key: '8496f8d3196c76d97d70ddd71907925b5413da17', class: "item" }, h("gb-side-bar-item", { key: '5d697d11ed1744997dbbd3310c172b630c76086f', 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: '8dbd3089b632f7067ce5f84319327f245e9cbde7', 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: '8f8b634c3ef3f748f1c39798f64371815a3d9158', 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: 'e2ef5660d338cc06807969c342be6179e73e5bb8', 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: 'ff84480474accd7cbc7b24b949e3c4fb2e0d921a', 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: '75e3038156ad5b938a429f8cb094c8c9aa6d975c', class: "navigation" }, h("div", { key: '52c4518ff11010b7e31d477f73e60c6e38579881', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: '944b9c3f728a3c70996821c57f46107ab948f24c', 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: 'cb879b7cbc8f09d5bd1766bde88804130d87d7ed', 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: '6b5fdd1fd1c2ce8ee6a164fcc4c76a8483c42b69', 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: '84bee58579a829222125f4b916f25ca410de4c6f', 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: '24b5bffc2bae13fb20d1fe1a522732cd2c6aa5b9', 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: 'caf65037e5b80e5442a2437a2e08440fe420cc3a', class: "application_name" }, h("div", { key: 'fcd55107715b24c5bb8c87508fa7185d68c4b2aa', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: 'feb2197f78a6fc7aed90ff8e57266283d4890080', class: "application_name_pattern" }, h("img", { key: 'b2e3507f0c1c8df0aac3aedc6eba767b3b89910b', src: patternSrc, alt: "" }))), h("div", { key: '303db193d12410f48c7b4675d9dc7d73e66d10a0', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: 'a1f96282e931c70e152f024169cba33c4b0af2c9', class: textClass }, h("slot", { key: '731c3ccbf41c6579a19e35992317fd9acf139411', name: "application_name" })))))));
     }
     static get is() { return "gb-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,7 +56,7 @@ export class GbSlider {
         this.trackEl.style.width = `${rightPos - leftPos}%`;
     }
     render() {
-        return (h("div", { key: 'b38c106d5bfc1086c4a9215c79aea52348ef76a4', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: '92f06f364516b3456ec71346495961ca22e4d469', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: '0ec57ccc226bdeacea2855defde61c78d7168244', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '3749a68ec2c02e2d46d0116ec7ecbb416f30c78c', class: "right", value: this.rightValue, type: this.thumbType, style: { left: `${this.rightValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'right') })));
+        return (h("div", { key: '887c89d8eeb60dd07117e4121ca1d8ffa3dc7ef5', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: '96202315a74d9b4a245a74aee949b6501f341821', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: '1db952ecded5ae515e635a0a597e09ee8cc1c68f', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: 'a00ff854760656794f03f953f9fd975c61121c35', class: "right", value: this.rightValue, type: this.thumbType, style: { left: `${this.rightValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'right') })));
     }
     static get is() { return "gb-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-slider-control-handle/slider-control-handle.js CHANGED Viewed

@@ -19,7 +19,7 @@ export class SliderControlHandle {
         this.isFocused = false;
     }
     render() {
-        return (h("div", { key: '7e720b09977f7cff1c5697b4100fec0d6fbffcc9', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: 'baa1817c9073e7dce54d1059165bbe044d73c23a', class: "tooltip-container" }, h("gb-tooltip", { key: 'a7752bf0c2746d3166e077768bd396536e9838b7', arrow: 'none' }, h("p", { key: '087092c8df649a26e70d32d4916f8b5a09cd163b', class: "text-xs-semi-bold", slot: "main_text" }, this.value, "%")))), this.type === 'text' && (h("div", { key: '6d07d2ad554582b209e9ea09decb58baede2fe82', class: "thumb-label" }, this.value, "%"))));
+        return (h("div", { key: 'b165e418f7e1836cfca44ded81d6a1518db262b0', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: '97f7e560acfab6419652019c5e05b785557dcd5f', class: "tooltip-container" }, h("gb-tooltip", { key: 'bdf88b3ff72771a9257168fa69b682fed2c92621', arrow: 'none' }, h("p", { key: 'c36a8b84ca64ce15149d53af010b8f07ceff5186', class: "text-xs-semi-bold", slot: "main_text" }, this.value, "%")))), this.type === 'text' && (h("div", { key: 'd235bceb52e47cbd164a03a1790bf8babc48409f', class: "thumb-label" }, this.value, "%"))));
     }
     static get is() { return "gb-slider-control-handle"; }
     static get encapsulation() { return "shadow"; }