globuswebcomponents 2.8.9 → 2.8.10

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

@@ -2792,6 +2792,11 @@
   flex: 1;
 }
 
+.horizontal_tab_div_wrapper.underline,
+.horizontal_tab_div_wrapper.underline_filled{
+  box-shadow: inset 0 -1px 0 0 var(--color-border-subtle, #cdd5df);
+}
+
 .horizontal_tab_wrapper {
   display: flex;
   align-items: center;
@@ -2814,7 +2819,6 @@
 /* Tab Type Styles */
 .horizontal_tab_div.underline,
 .horizontal_tab_div.underline_filled {
-  box-shadow: inset 0 -1px 0 0 var(--color-border-subtle, #cdd5df);
   width: 100%;
 }
 
@@ -2866,12 +2870,16 @@
   left: 0;
   background: linear-gradient(90deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);
   padding: 0.1rem 2rem 0.1rem 0.5rem;
+  /* width: 2rem;
+  height: 100%; */
 }
 
 .scroll_button_div.right {
   background: linear-gradient(270deg, var(--color-surface-bold, #f9fafb) 37.05%, var(--color-surface-bold-transparent-full, rgba(249, 250, 251, 0)) 100%);
   padding: 0.1rem 0.5rem 0.1rem 2rem;
   right: 0;
+  width: 1.5rem;
+  height: 100%;
 }
 
 .scroll_button {

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

@@ -102,12 +102,17 @@ export class GbHorizontalTabs {
         ];
         this.internalTabs = [...this.tabs];
         this.internalActiveIndex = 0;
+        // @State() showScrollButtons: boolean = false;
+        this.width = window.innerWidth;
         this.showLeftButton = false;
         this.showRightButton = false;
+        this.touchStartX = 0;
+        this.touchEndX = 0;
+        this.mouseStartX = 0;
+        this.isMouseDown = false;
     }
     componentDidLoad() {
         this.updateScrollButtons();
-        window.addEventListener('resize', this.updateScrollButtons.bind(this)); // Recheck on resize
     }
     scrollLeft() {
         this.tabContainer.scrollBy({ left: -200, behavior: 'smooth' });
@@ -118,14 +123,68 @@ export class GbHorizontalTabs {
     handleScroll() {
         this.updateScrollButtons();
     }
+    handleTouchStart(e) {
+        this.touchStartX = e.touches[0].clientX;
+    }
+    handleTouchEnd(e) {
+        this.touchEndX = e.changedTouches[0].clientX;
+        this.handleSwipe();
+    }
+    handleSwipe() {
+        const swipeThreshold = 50; // minimum distance for a swipe
+        const diff = this.touchStartX - this.touchEndX;
+        if (Math.abs(diff) > swipeThreshold) {
+            if (diff > 0) {
+                // Swiped left, scroll right
+                this.scrollRight();
+            }
+            else {
+                // Swiped right, scroll left
+                this.scrollLeft();
+            }
+        }
+    }
+    handleMouseDown(e) {
+        this.isMouseDown = true;
+        this.mouseStartX = e.clientX;
+    }
+    handleMouseUp(e) {
+        if (!this.isMouseDown)
+            return;
+        this.isMouseDown = false;
+        const mouseEndX = e.clientX;
+        const swipeThreshold = 50;
+        const diff = this.mouseStartX - mouseEndX;
+        if (Math.abs(diff) > swipeThreshold) {
+            if (diff > 0) {
+                // Dragged left, scroll right
+                this.scrollRight();
+            }
+            else {
+                // Dragged right, scroll left
+                this.scrollLeft();
+            }
+        }
+    }
+    handleMouseLeave() {
+        this.isMouseDown = false;
+    }
     updateScrollButtons() {
         if (!this.tabContainer)
             return;
-        const { scrollLeft, scrollWidth, clientWidth } = this.tabContainer;
-        // Only show buttons if overflow exists
-        const isOverflowing = scrollWidth > clientWidth;
-        this.showLeftButton = isOverflowing && scrollLeft > 0;
-        this.showRightButton = isOverflowing && scrollLeft + clientWidth < scrollWidth - 1;
+        // Read current viewport width so behavior updates dynamically on resize
+        this.width = window.innerWidth;
+        if (this.width > 768) {
+            const { scrollLeft, scrollWidth, clientWidth } = this.tabContainer;
+            // Only show buttons if overflow exists and the width greater than 768px for screens larger than mobile
+            const isOverflowing = scrollWidth > clientWidth;
+            this.showLeftButton = isOverflowing && scrollLeft > 0;
+            this.showRightButton = isOverflowing && scrollLeft + clientWidth < scrollWidth - 1;
+        }
+        else {
+            this.showLeftButton = false;
+            this.showRightButton = false;
+        }
     }
     setActiveIndex(_oldValue, newValue) {
         this.internalActiveIndex = newValue;
@@ -139,15 +198,12 @@ export class GbHorizontalTabs {
     componentWillRender() {
         this.internalActiveIndex = this.activeIndex;
     }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.updateScrollButtons.bind(this));
-    }
     async handleTabClick(index) {
         this.activeIndex = index;
         this.tabItemClicked.emit(index);
     }
     render() {
-        return (h("div", { key: '23e4f9c4fd7bc8aff3723ce8bb5c32a21b77a61d', class: "horizontal_tab_div_wrapper" }, this.showLeftButton && (h("div", { key: 'a31bdba86c9508c37061e9bfaade579b3c15c9db', class: "scroll_button_div left" }, h("div", { key: '7fcccf338618bb91579b880a4df79d2e9d465ea3', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'd3a4689059426067bcf461be08d7f3a7b5e71cde', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'aca97301206468205408c1af13d4d497c9e2e8d6', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: 'f81592ca370412390a4c47c391c8976c492fce71', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll() }, h("div", { key: '4305f5427fc1a310ad07efc848041ec28270867b', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), this.showRightButton && (h("div", { key: 'ffbdbb8d545b6c77d5008f651622659519ae080d', class: "scroll_button_div right" }, h("div", { key: '528492019e0f07ebdf4ccfb7ffe4f4d80eb821e1', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: 'a8afb120354db8f50ad0b3138068d750d13d7a35', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '32ab3b82a262d36c6abd06c498f3bfb0d77acf5f', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h("div", { key: '54f179d340920c66abeebff6e651853d4fe34726', class: `horizontal_tab_div_wrapper ${this.type}` }, h("div", { key: '06bec2c6776414902393ea58d9c9b5fbcc9db42e', class: "scroll_button_div left" }, this.showLeftButton && (h("div", { key: 'e95d3c8d470e5985abeaff7501aae75d6283f999', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'f4f9b80d61d7629b3727b88df7e061fea7df287e', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'e5077eafebebf562514d97ffaa60948e676e8dde', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: 'b56dde1f3664cfc121dfb88cacb1a7d74bfd11e6', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '4071c76de952db8e2fdcd0356231bb75e961832d', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), h("div", { key: 'd07af9e4cfd0cb806e2814fe111c01e300f21c3f', class: "scroll_button_div right" }, this.showRightButton && (h("div", { key: 'd1175772810a48a573f4fac65f157fe8cf3e92c0', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '441a4a4017f6fa6b650b5c321519093864f208c5', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '279a9a8f38ceff8cf537975dad9809abddd734b8', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "gb-horizontal-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -296,6 +352,7 @@ export class GbHorizontalTabs {
         return {
             "internalTabs": {},
             "internalActiveIndex": {},
+            "width": {},
             "showLeftButton": {},
             "showRightButton": {}
         };
@@ -327,5 +384,14 @@ export class GbHorizontalTabs {
                 "methodName": "onTabsChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "updateScrollButtons",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 //# sourceMappingURL=gb-horizontal-tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-horizontal-tabs',\r\n  styleUrl: 'gb-horizontal-tabs.css',\r\n  shadow: true,\r\n})\r\nexport class GbHorizontalTabs {\r\n  @Prop() type: TabTypes;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() fullWidth: boolean = false;\r\n  @Prop() badge: boolean = false;\r\n  @Prop({ mutable: true }) activeIndex: number;\r\n  @Prop() tabs: { name: string; index: number; badgeCount?: string }[] = [\r\n    // {\r\n    //   name: 'All accounts',\r\n    //   index: 0,\r\n    //   badgeCount: '5',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n  ];\r\n  @State() internalTabs: { name: string; index: number; badgeCount?: string }[] = [...this.tabs];\r\n  @State() internalActiveIndex: number = 0;\r\n  @Event() tabItemClicked: EventEmitter<number>;\r\n  @State() showLeftButton = false;\r\n  @State() showRightButton = false;\r\n  private tabContainer!: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    this.updateScrollButtons();\r\n    window.addEventListener('resize', this.updateScrollButtons.bind(this)); // Recheck on resize\r\n  }\r\n\r\n  scrollLeft() {\r\n    this.tabContainer.scrollBy({ left: -200, behavior: 'smooth' });\r\n  }\r\n\r\n  scrollRight() {\r\n    this.tabContainer.scrollBy({ left: 200, behavior: 'smooth' });\r\n  }\r\n\r\n  handleScroll() {\r\n    this.updateScrollButtons();\r\n  }\r\n\r\n  updateScrollButtons() {\r\n    if (!this.tabContainer) return;\r\n    const { scrollLeft, scrollWidth, clientWidth } = this.tabContainer;\r\n\r\n    // Only show buttons if overflow exists\r\n    const isOverflowing = scrollWidth > clientWidth;\r\n    this.showLeftButton = isOverflowing && scrollLeft > 0;\r\n    this.showRightButton = isOverflowing && scrollLeft + clientWidth < scrollWidth - 1;\r\n  }\r\n\r\n  @Watch('activeIndex')\r\n  setActiveIndex(_oldValue: number, newValue: number) {\r\n    this.internalActiveIndex = newValue;\r\n  }\r\n\r\n  @Watch('tabs')\r\n  onTabsChanged(newTabs: { name: string; index: number; badgeCount?: string }[]) {\r\n    this.internalTabs = newTabs;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalTabs = this.tabs;\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalActiveIndex = this.activeIndex;\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('resize', this.updateScrollButtons.bind(this));\r\n  }\r\n\r\n  async handleTabClick(index: number) {\r\n    this.activeIndex = index;\r\n    this.tabItemClicked.emit(index);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"horizontal_tab_div_wrapper\">\r\n        {this.showLeftButton && (\r\n          <div class=\"scroll_button_div left\">\r\n            <div class=\"scroll_button\" onClick={() => this.scrollLeft()}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path\r\n                  d=\"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18\"\r\n                  stroke=\"var(--color-icon, #4B5565)\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n          </div>\r\n        )}\r\n        <div class=\"horizontal_tab_wrapper\" ref={el => (this.tabContainer = el as HTMLElement)} onScroll={() => this.handleScroll()}>\r\n          <div class={`horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}`}>\r\n            {this.internalTabs.map((tab, index) => (\r\n              <gb-tab-button-base\r\n                class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n                size={this.size}\r\n                full-width={this.fullWidth}\r\n                type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n                onClick={() => this.handleTabClick(index)}\r\n                current={this.internalActiveIndex === index}\r\n                tab-name={tab.name}\r\n                badge={this.badge}\r\n                alignment=\"horizontal\"\r\n              >\r\n                <p slot=\"count\">{tab.badgeCount}</p>\r\n              </gb-tab-button-base>\r\n            ))}\r\n          </div>\r\n        </div>\r\n        {this.showRightButton && (\r\n          <div class=\"scroll_button_div right\">\r\n            <div class=\"scroll_button\" onClick={() => this.scrollRight()}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path\r\n                  d=\"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18\"\r\n                  stroke=\"var(--color-icon, #4B5565)\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Listen, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-horizontal-tabs',\r\n  styleUrl: 'gb-horizontal-tabs.css',\r\n  shadow: true,\r\n})\r\nexport class GbHorizontalTabs {\r\n  @Prop() type: TabTypes;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() fullWidth: boolean = false;\r\n  @Prop() badge: boolean = false;\r\n  @Prop({ mutable: true }) activeIndex: number;\r\n  @Prop() tabs: { name: string; index: number; badgeCount?: string }[] = [\r\n    // {\r\n    //   name: 'All accounts',\r\n    //   index: 0,\r\n    //   badgeCount: '5',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n  ];\r\n  @State() internalTabs: { name: string; index: number; badgeCount?: string }[] = [...this.tabs];\r\n  @State() internalActiveIndex: number = 0;\r\n  // @State() showScrollButtons: boolean = false;\r\n  @State() width: number = window.innerWidth;\r\n  @Event() tabItemClicked: EventEmitter<number>;\r\n  @State() showLeftButton = false;\r\n  @State() showRightButton = false;\r\n  private tabContainer!: HTMLElement;\r\n  private touchStartX: number = 0;\r\n  private touchEndX: number = 0;\r\n  private mouseStartX: number = 0;\r\n  private isMouseDown: boolean = false;\r\n\r\n  componentDidLoad() {\r\n    this.updateScrollButtons();\r\n  }\r\n\r\n  scrollLeft() {\r\n    this.tabContainer.scrollBy({ left: -200, behavior: 'smooth' });\r\n  }\r\n\r\n  scrollRight() {\r\n    this.tabContainer.scrollBy({ left: 200, behavior: 'smooth' });\r\n  }\r\n\r\n  handleScroll() {\r\n    this.updateScrollButtons();\r\n  }\r\n\r\n  handleTouchStart(e: TouchEvent) {\r\n    this.touchStartX = e.touches[0].clientX;\r\n  }\r\n\r\n  handleTouchEnd(e: TouchEvent) {\r\n    this.touchEndX = e.changedTouches[0].clientX;\r\n    this.handleSwipe();\r\n  }\r\n\r\n  handleSwipe() {\r\n    const swipeThreshold = 50; // minimum distance for a swipe\r\n    const diff = this.touchStartX - this.touchEndX;\r\n\r\n    if (Math.abs(diff) > swipeThreshold) {\r\n      if (diff > 0) {\r\n        // Swiped left, scroll right\r\n        this.scrollRight();\r\n      } else {\r\n        // Swiped right, scroll left\r\n        this.scrollLeft();\r\n      }\r\n    }\r\n  }\r\n\r\n  handleMouseDown(e: MouseEvent) {\r\n    this.isMouseDown = true;\r\n    this.mouseStartX = e.clientX;\r\n  }\r\n\r\n  handleMouseUp(e: MouseEvent) {\r\n    if (!this.isMouseDown) return;\r\n    this.isMouseDown = false;\r\n    const mouseEndX = e.clientX;\r\n    const swipeThreshold = 50;\r\n    const diff = this.mouseStartX - mouseEndX;\r\n\r\n    if (Math.abs(diff) > swipeThreshold) {\r\n      if (diff > 0) {\r\n        // Dragged left, scroll right\r\n        this.scrollRight();\r\n      } else {\r\n        // Dragged right, scroll left\r\n        this.scrollLeft();\r\n      }\r\n    }\r\n  }\r\n\r\n  handleMouseLeave() {\r\n    this.isMouseDown = false;\r\n  }\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  updateScrollButtons() {\r\n    if (!this.tabContainer) return;\r\n\r\n    // Read current viewport width so behavior updates dynamically on resize\r\n    this.width = window.innerWidth;\r\n\r\n    if (this.width > 768) {\r\n      const { scrollLeft, scrollWidth, clientWidth } = this.tabContainer;\r\n\r\n      // Only show buttons if overflow exists and the width greater than 768px for screens larger than mobile\r\n      const isOverflowing = scrollWidth > clientWidth;\r\n      this.showLeftButton = isOverflowing && scrollLeft > 0;\r\n      this.showRightButton = isOverflowing && scrollLeft + clientWidth < scrollWidth - 1;\r\n    } else {\r\n      this.showLeftButton = false;\r\n      this.showRightButton = false;\r\n    }\r\n  }\r\n\r\n  @Watch('activeIndex')\r\n  setActiveIndex(_oldValue: number, newValue: number) {\r\n    this.internalActiveIndex = newValue;\r\n  }\r\n\r\n  @Watch('tabs')\r\n  onTabsChanged(newTabs: { name: string; index: number; badgeCount?: string }[]) {\r\n    this.internalTabs = newTabs;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalTabs = this.tabs;\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalActiveIndex = this.activeIndex;\r\n  }\r\n\r\n  async handleTabClick(index: number) {\r\n    this.activeIndex = index;\r\n    this.tabItemClicked.emit(index);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`horizontal_tab_div_wrapper ${this.type}`}>\r\n        <div class=\"scroll_button_div left\">\r\n          {this.showLeftButton && (\r\n            <div class=\"scroll_button\" onClick={() => this.scrollLeft()}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path\r\n                  d=\"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18\"\r\n                  stroke=\"var(--color-icon, #4B5565)\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n          )}\r\n        </div>\r\n        <div\r\n          class=\"horizontal_tab_wrapper\"\r\n          ref={el => (this.tabContainer = el as HTMLElement)}\r\n          onScroll={() => this.handleScroll()}\r\n          onTouchStart={e => this.handleTouchStart(e)}\r\n          onTouchEnd={e => this.handleTouchEnd(e)}\r\n          onMouseDown={e => this.handleMouseDown(e)}\r\n          onMouseUp={e => this.handleMouseUp(e)}\r\n          onMouseLeave={() => this.handleMouseLeave()}\r\n        >\r\n          <div class={`horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}`}>\r\n            {this.internalTabs.map((tab, index) => (\r\n              <gb-tab-button-base\r\n                class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n                size={this.size}\r\n                full-width={this.fullWidth}\r\n                type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n                onClick={() => this.handleTabClick(index)}\r\n                current={this.internalActiveIndex === index}\r\n                tab-name={tab.name}\r\n                badge={this.badge}\r\n                alignment=\"horizontal\"\r\n              >\r\n                <p slot=\"count\">{tab.badgeCount}</p>\r\n              </gb-tab-button-base>\r\n            ))}\r\n          </div>\r\n        </div>\r\n        <div class=\"scroll_button_div right\">\r\n          {this.showRightButton && (\r\n            <div class=\"scroll_button\" onClick={() => this.scrollRight()}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path\r\n                  d=\"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18\"\r\n                  stroke=\"var(--color-icon, #4B5565)\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -2888,4 +2888,10 @@ gb-input-dropdown{
     justify-content: center;
     align-items: center;
     gap: 0.5rem;
+}
+
+.card_default_buttons{
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
 }

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

@@ -3,6 +3,7 @@ export class GbPagination {
     constructor() {
         this.currentPage = 1;
         this.entries = [10, 20, 50, 80, 100];
+        this.entriesDropdownMenuPosition = 'top';
         this.selectedPageSize = this.entries[0];
         this.pages = [];
         this.width = window.innerWidth;
@@ -33,7 +34,7 @@ export class GbPagination {
         }
     }
     componentWillLoad() {
-        this.internalTotalPages = this.totalPages;
+        // this.internalTotalPages = this.totalPages;
         this.pages = [];
         if (this.totalPages <= 5) {
             // Show all pages if totalPages <= 5
@@ -50,13 +51,9 @@ export class GbPagination {
     }
     generatePages() {
         const tempPages = [];
-        if (this.internalTotalPages <= 5) {
-            for (let i = 1; i <= this.internalTotalPages; i++) {
-                tempPages.push(i);
-            }
-        }
-        else {
-            // Optional: logic for > 5 pages if needed
+        const maxVisible = Math.min(this.internalTotalPages, 5);
+        for (let i = 1; i <= maxVisible; i++) {
+            tempPages.push(i);
         }
         this.pages = tempPages;
     }
@@ -64,8 +61,9 @@ export class GbPagination {
     // setTimeout(() => {this.totalPages = 5}, 2000)
     // }
     onTotalPagesChange(newValue, _oldValue) {
-        // console.log('totalPages changed from', oldValue, 'to', newValue);
-        this.internalTotalPages = newValue;
+        if (!newValue || newValue < 1)
+            return;
+        this.internalTotalPages = Number(newValue);
         this.generatePages();
     }
     handlePageSizeSelect(item) {
@@ -77,10 +75,10 @@ export class GbPagination {
         this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
     }
     render() {
-        return (h("div", { key: '4bfc08bb4f68cf862b3028532cada789417ab8a5', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '1d9eba3747b2a127f78fa8447898ebb9c70f110a', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'b04c6229f18488fd971c760aac1574a86519f319' }, "Previous")), h("div", { key: '5a8a767e3e5ff199453ea48b1185eb1f6c1ae359', class: "pagination_numbers" }, this.internalTotalPages <= 5 &&
-            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'ec700d0aae3bf55ddfb52c2fdd397585c0d23968', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '216e524b049803c83bb242c7981acf3d4082da06', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '79aa128b17ee36f98229afd58be5c9e0df26a740', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '5a7d949ad74013889c8d57343fadb5707e3b3bd2', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'c0b850686c8cb5a91c2b8f5e9f17bd1e0c1b8543', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '4301ff264026efd83a0d2421e6d1a9deeb49f48d', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'c786ca1f36bd7f4f93b9cb878aa6ae22798ddcd3', shape: this.shape }, h("p", { key: '240fb7df2419e28f900ef3ec5dfe8f8bc9d5048c', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '6839928af6edade0266ce8246acdffda6eb3c213', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '5db8bc6b8e140cddd432c5bef115d34de22dbe66', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '4991659dba30388ac476003bbaaaec2cfa07abc2', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '1db15fade5830bae3ed1044d147f318ab4f72983', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'da8afca09bf50ee6af3069f9697a9f23f38be6e2', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'daf3ba190d5b59ba700292514f6ed934b234f9e2', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: 'adcff2a57141fb6a70181a997d65e458f9314793', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'ae4d929bb999c37a0323f4439a56b42ff132d025' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'b6eeb3a22342444d917ab9a2d8ff016aca31d4a8', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'fe464abf515d13553897f86084dbdf8dd117b586' }, "Previous")), h("div", { key: '1baf84ce05f5141e1b5e6bc607373374be2ecc4f', class: "pagination_numbers" }, this.internalTotalPages <= 5 && (h(Fragment, null, this.internalTotalPages <= 5 &&
-            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'f76e44533745c8b4cd53e8e1d9ad342e2764aad8', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '6a898efaefcac6d7d842e2e430afc8ec94449de2', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'f782d945c19b2661c1194d829024e95efefd50d9', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '79fcbd00f8953badca2bfe01c0d6c58c0a08ce09', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '80b63253a5a551df80c229e895b30b56503ee206', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'dbca28c34d6dc85a6c838373e96ed4faaeded5d9', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'a43f2aec331d8ae5e68b51012281644c0c567713', shape: this.shape }, h("p", { key: 'a48dc33068bb58fcc2de9f96dcf7d10e18fa2b83', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '3a8d8d8c9dacbc60f3f53e2c301159b112a1a4c4', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'f031e6cb13b4343a9a03f5f93213e5f1d0f43217', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: 'b618546536e9570c6a004faf833db7ad7ff235b4', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '3e6c79b0c37cb17ed80ad4f6d08d33f96ff9304e', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'd6688bb2311f6a11196ff80f5f22a88673e61372', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '698d2c52201258fa18f42f7609acb3211828d5d9', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: 'eae4ae55c8603ec36f82804e3f8c34265dfb04ae', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'a99216f6d9a99e92f3482ad155981dd9c6966704' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'a411a6dc8e885b8dcfc021855efcb3858db046eb', class: "pagination_entries" }, h("div", { key: 'b836d7dbe41c512ba481afd6fd75cdb2a0029a40', class: "entries_text" }, h("p", { key: 'cbaea0f8803243eaaaf5ed3bbf1c75a1a6a2221d', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'aff153031081fcb2cf2026281009850cfd741b66', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '64af7a9088ba8954ecdfda3b3e1de68a871592ac', type: "default", state: "default", size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-help-icon": false, items: this.entries, "menu-position": "top", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '7c4ec531279adc9af83b21560ee658a7c183e994', class: "pagination_numbers" }, this.internalTotalPages <= 5 &&
-            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'e45a13aaf363ec2e3298a9901123facfaadf610f', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '986bb57641f0eb2c22ac0f3ae0e4cad8ee5f4062', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '5be2e5ca2a402900f8e53a4593057f7c2b1a1e43', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: 'e88f483c8767477cf78c38fb874b429b754d69a5', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'd1ea8bde1012a1784c2b200b5dff4d1e03db821a', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '90ffd8329f0002b417c142a101c01ff22eed4816', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'a7b7ad0a019aaf4cb62fe4bcb007cdb8abe51b82', shape: this.shape, state: "default" }, h("p", { key: 'ebc96927e9c8d02db833a6fde2e5ed07abf01c3f', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '3c06cf1d969de4e13fb0e381003998b3fa1bdeb5', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '29a691b62242990157b12b9e517270d327048498', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: 'ad178c451b716a053a8de882c7b6f52a0848f983', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '4c351ce8165bbd8030551d6c7b97b26752017fa3', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'c53d6260c9011546f17e2686cd58c64726a7ea54', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '6e3676ae13a9968653ab1bedee3ac906d37c5104', slot: "page_number" }, this.internalTotalPages))))), h("div", { key: '9be9e323eebf0987c19e657da89c7e85074057a4', class: "pagination_btns" }, h("gb-button", { key: 'f84a5c86cc04e0e22f6d4bf2d24158625e381d06', size: "sm", hierarchy: "secondary_gray", icon: "only", state: this.totalPages === 1 && this.currentPage === 1 ? 'disabled' : this.currentPage === 1 ? 'disabled' : 'default', "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: '86a2b4fa6afc5759400794eb14a033b947bce18e', size: "sm", hierarchy: "secondary_gray", icon: "only", state: this.currentPage === this.internalTotalPages ? 'disabled' : this.currentPage === 1 && this.totalPages === 1 ? 'disabled' : '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: 'eb6367bcb1fcd8a2b4559b817f91fbd9a1ac86bf', class: "pagination_entries" }, h("div", { key: '628ae5f5dfb776bccd9bf3591a68741994f9fc88', class: "entries_text" }, h("p", { key: 'dd93b1700641f8beb852d0bf6863eb9ea4653c8b', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '05d35ac9fb2ae4d7f2e7d43b56442568d2688032', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '8104dcf44ce341daee64671ccde9bca25d50a942', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '1cd34c0bc281d1782328e80f105cb2677ef21390', class: "page_number_text" }, h("p", { key: '52f707ac6706249af3e4880658ed13cb98c1db88', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: 'ad043a8185ff4a5a67057db71f633673dc0ec26e', class: "pagination_btns" }, h("gb-button", { key: '245cf2baeb18b502a41f93e1c3c9492cf5836462', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '52e4f40ea5d725d26cbe06f66f7a691c5df88c62' }, "Previous")), h("gb-button", { key: '514fd4b3b1d1ce83299520a77eb2fe1a034c0f8e', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '6453e01c04f942183656806fbfc141a715e04e37' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '197bcf305d24ccc4da0a9af21c0b60eb9d60844e', class: "pagination_btns" }, h("gb-button", { key: '7d9c49bde8a5fc6e00289e7962a7452c75a84b3d', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'f18e1990ae653f09409de26a664bb7a655727975' }, "Previous")), h("gb-button", { key: '0eb244f1a49f63ca1e27077f6f79bc18b404412d', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '7f79b992ceddfe776a4b95820fb1dd714d7121fc' }, "Next"))), h("div", { key: 'c0417358b05a45fec1a5a22a120683e9b0a11edf', class: "page_number_text" }, h("p", { key: '1de32586fbe804738af1feadef03ab2bbab7c7a8', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: '04a74d07a87a57b5fff9a4ab4ae2b401de8f6eeb', class: "pagination_entries" }, h("div", { key: 'd1b08524ffcdae63e72bf4f6d5337a8398151418', class: "entries_text" }, h("p", { key: 'bf49c04405589f652ad0c11acd6a0ffa632bc399', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'e1cd735da8cc26598e8080a1d12e9d758dec932e', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'cf0402be6d1497c195192b1c266e6d7d44d908bd', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '2b088b7f1895c3388b87348ce5573c80c32b4714', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '948e6104870fe4678dee132ff95a4f451198f005' }, "Previous")), h("div", { key: '0c5e2f7febea81943c2a9f0564104f5e1075bd37', class: "page_number_text" }, h("p", { key: '91a60b436d8f2b1394e9621a464f046e26ff88b9', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '8242d276bdbcfcfef74c319135858eed9451212f', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'edd814796806f025ad13548adb288b1f3593b9c3' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'be6b48b719b3407470553a316df8d82b3c9803a8', class: "pagination_entries" }, h("div", { key: '30308652f76206dbf2879f743d117cdeda49c5a1', class: "entries_text" }, h("p", { key: 'ee5f49b057c6379acbc4a9be015bd01ab90d3c2b', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'bc68cc2af2ab876d0e60d1988b7e3b6015f377fb', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '73a940b0e4467ef19c2be77bfedea213e7fd7416', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '92ce6f1b431f8c4b8b71f0e4922dc2b5bd1cd5a1', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'b4821395df4b1feaa069a4b6ede9f235df1e2e7c', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '08638b7506831a26e438ac0c5a036908b917748e' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'dd882a8e02282932066ae81dbc22e1982e1ea6d8', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'c8397f50aec2a0feb728a95a10b82a51f39b6ae4' }, "1")), h("gb-pagination-button-group-base", { key: '8860bfda07796158c721e1acfd61ef2f5b9fa018', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'eec30b9bc1af27bd6fd63d6229f675799ddb0af2' }, "2")), h("gb-pagination-button-group-base", { key: 'f3dc1f764a88f66324ad6c8f4e86b2ab3c206171', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'c78a245569d81adcda0bc0a848d1eac8f5922507' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '85e1486ba14844ad9d13a6dd1ed6e6930d1a0978', icon: "false" }, h("p", { key: '3279782a3175410e24db957b1fe232b4270d98c1' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '7378ab65420dcb3f1e33b64fdf2f2c6205096d72', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '5c9d516054464a577a8f6b465253a9b1f442e927' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '8e11475be5c9ef010b30002d77b8f141ccecb31d', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '82ef2369f0b70f4fb4112b69b44aa3c9ee30ebe9' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '4f835b1356c08253c002159fab13e7ce4594ca47', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'd7da93014a566ffde3d12685856add10aa5e4248' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '7964b44785fb5c6f28d041d18060649b2f026711', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '041e5bde034933c782eb6c5370d4e3af4c0c4d68' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '485d0f223f46b01013dddc2cf5aa6b90c49da3d2', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'be7fe9eea708001c5abfb1386f3db6a7fd71b771', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '9d89e0faeee11113c79cb0c3f74f01dd88cf889b' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '3a401cb12c02a8b7be5cba38fc0204fa051a0643', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '2446cb4a060aefd1dab6050bb066a541d3f49ed6' }, "1")), h("gb-pagination-button-group-base", { key: 'dbb396c879c52d2bb733933829141cc843cf553e', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '4e7af80bbdcef5bdb02471479bf4ad95bc4a51f0' }, "2")), h("gb-pagination-button-group-base", { key: 'f76382d468f8e31b81471e34f4cbe1805161ec3f', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '62f997ee84b973a41eccf55d9d6a6248282a0a51' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '57f5adaaf05613dd0e444dcab70254446fd0eeac', icon: "false" }, h("p", { key: '2eb84b6cfa67e9349055b35f61920cdeed16b5e2' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '11be6437bec2ceb47d4fae35a50514ddb5a69aa8', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '13fc45bd6f05204a1391942c6703e8620fc84a72' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'ea86f3e6685f44557a1a8e53841b5cf1ce0794a9', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '0b60f390629f88af61d02b251679656183cd1911' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'e14ca7c8757d01e5f6025fa5667e668988c094cc', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '9e75abd78acdbd6972a50430a894d4055c9801bc' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'c368fc647d49e1ae838a0bfb8dae843ec23f5081', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '7aacf51e556f73fa50a96251bf00c493da9c4845' }, "Next"))), h("div", { key: '62285db85257addb66376b1fe0512ea4b6af6d36', class: "pagination_entries" }, h("div", { key: '09e6dae235fe02be172566baa44904d90ed92781', class: "entries_text" }, h("p", { key: '16f9e74ec0273df517e77862303688c10d42ce6d', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '350fd0e554f43398f5b2d5ebaf95d2e70c8b70b5', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '717daeb847ee95b0ad587384a50964ce93abc986', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'efeef7f6b33facc9a00c80daa4f64c84429e00af', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'd2b81b1f17ec2f0623867666236955e1ebc803ae', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '67cbde1715d74105ff1e3dc79786a29845ec1a1b' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '5ffc33556014524bff2b2bd5ee210259e3ca5fc9', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'cbadb05b7206bff83d516c24258f167992fc23da' }, "1")), h("gb-pagination-button-group-base", { key: 'b08dd4f6d4248e1855fe560dd1b32a2478117381', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'd071051e364e61f0b32c33e95f6ac892b06b7d9a' }, "2")), h("gb-pagination-button-group-base", { key: '4013440181b10e5fb5126804f3813b16cd912c13', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '960015f69838c3ff7f528e6b86e3e475f6a39167' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '18d7c6e599deb70299fd922668151be7074686d9', icon: "false" }, h("p", { key: 'a75b56f749456d15f7cc5954c91dfe74f0c92c77' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '104c517bbed7ca807da37cc833a972bbf5013063', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'b2c0d7aa8822eeb54cbefa4e19b52f9833b0d2c3' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '07b9f576cac644681ad4c2fa3f12f08842f8bb2c', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'c7b43f9f5c84f09d05bb90f8a0087562d86e1eda' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '12e926ea5b4f46352fa4e42292f02d223ae8ee1e', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '08bb331ac108488a536631e7e20ce031ff60973b' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '779c78533885ef881667f07a52aa753f430f25a3', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '0c396839b7bdbfc9d538cf08523acd49bf849501' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: 'f2f933f93c6b9ab69f48e2e32d6f67572bb88b0f', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '8735720cde23426a312e361a6ffd84245ac3aa8b', class: "page_number_text" }, h("p", { key: '22c580bc1bda16da3174131100fa646df4d2ad06', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'eeaea97f918e55fbba14fc42bf36b6e0c8138583', 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 === 'page_minimal_center_aligned' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '13c9d52bca9563d0c31559a504202af7a3f97af4', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '6e8d2d92d3abe5d4cda23a56a87d691515fca1b5', class: "page_number_text" }, h("p", { key: 'db41c32289766cdcb2b14f0a6a95ab03d1572550', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'c6b5c6f0681a05664bb07c5fee9669f170b0ee67', 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_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '73075204710b7475d14fd2bd3027b2c52e7dc76b', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'd5c5c39f1e40985d6d76a52cf9e19c27add6b360', class: "page_number_text" }, h("p", { key: '97aeadbf5faea3542cfc789fa493812d28ac75c0', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '1065fa8e34a0352f4f236e3cf846fbd19d593852', 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 === 'mobile' && (h(Fragment, null, h("gb-button", { key: '8fe0bee9c472a61579d6b5e97305c7774c121917', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '6306d594386400f00222336803e0a67671118413', class: "page_number_text" }, h("p", { key: 'b9015dfba9a17a0305db8bc394fe03e973d6794d', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'bcde0348ab7672db3325a95d8c33110467d2704d', 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_left_aligned' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '03ad16dea39db86d529b187962eb8e61afb46c75', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '430ec92d10e3785ffe86e8f041528b5bd4da9eaa', class: "page_number_text" }, h("p", { key: 'dec8a4fd1528368a92411a073d6aa51186fbb9e6', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '01e426425c871fb87645ef97559e2792862f6441', 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_center_aligned' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: 'c131191eed91b7627e8f04294592b5a545c2b046', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '2dc202097d8a0f32cb1c6811e98a3a2c732d1e56', class: "page_number_text" }, h("p", { key: 'a4634f912089754f3fdf1131f27e35dbb6ccd36d', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'bd6fe700abad6e1192975d41b455d9cdefdef2d5', 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_button_group_right_aligned' && this.breakpoint === 'mobile' && (h("div", { key: 'f2a0c3cb864ba311a784598067bff3ff6d7800e1', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '602b68018f5903ba140ec4a25268fa3d9ea33f0b', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '43069de4a1a11c23fdc5111a2b8bffe8e42c29aa', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'feb6827ca6f67e109e0af2de21d8b5b902936d2f' }, "1")), h("gb-pagination-button-group-base", { key: '18fe68c698fc20b8514a8b6040628eba28d3c83f', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '65286d93ae33fff140ccd8ed4fb16fb8b3c5dda5' }, "2")), h("gb-pagination-button-group-base", { key: '4b53597c904a97ab406ef63ba919f9003a838532', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '1270621b1b04b1a274befc95ea39d1e0496ed14d' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '1e04723c80055d34db24a8b5f13b6904450e2f4d', icon: "false" }, h("p", { key: '8c2f65cb8756502d003e9c481389880aa2e9bad0' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '3c88fb7671826125b08d29e907334e1949d3c010', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '1b95706972c7eafc2b03972d2e75f193a7c28b47' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '3c4f1465238e36812ddbbd1c377d525215e52e51', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'a4a68208304ddf1881470e3540b5e914f79838fd' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '4501f6506dabf7ddc43632c7671693618b523684', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '0bdf7cf219a3d667f0bfdf2e82e29ef2dc5bd6ad' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'c7223b100261a491d4021d0c966450e2421767bb', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'mobile' && (h("div", { key: 'f79fb957fe597db7ec1f67e7b9a5273def13e3ce', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '2c3b90ea2e056757f88f0384e0a59ec5d140c289', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'f1350f9aa61f9a224a5d6f0c96ad77159d667024', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'b5f2b280c080eb86159f03ddbfaaafa24fab3ee3' }, "1")), h("gb-pagination-button-group-base", { key: '2f1850d394355d6f365f43ebb03d530953a73806', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '26317f06faf36819da5d81fda36d78c8eb1895b3' }, "2")), h("gb-pagination-button-group-base", { key: '2284de6a7041d8bfb2b336f6cd327bd6282bfaca', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '2afb6c532d2787c7f4e90adc36574720f6e44d0b' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '4ff03e87fabd6e355a3f8fa48eef8369fcf39771', icon: "false" }, h("p", { key: 'd3288dc4c574f71cda6f76a464680fdd69a61c3c' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '46cd2303bb4badb42f34e8bbb327072d6bd04e65', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'b62504e893990eae64e74fb5e57d2cda4e42254c' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'c6c622e2eb2d21fc5ca26938702321544f319239', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '7249a1587dbacb0c328397c41f35478490240ca2' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'f8303f581df09fb231c47cc7b7e10472164f9045', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '93fb3906af924a37fca76f4caf1b2fb70988a991' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '9b3ebd2c9ca0297b691b18e99ef5d4c199c92d3a', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'mobile' && (h("div", { key: '5f272c4f5da6c2e40ffdbb50d7bbb14e77c54705', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'c26300afcddc6e26f1c5c12a8206cc31f6019425', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'ed55c0040ee2d0fa78d89e2e88d2f51277895f71', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '127391f882d8dde08bf166c530ac591d5f48d93a' }, "1")), h("gb-pagination-button-group-base", { key: '3a6acf9a540046e7bd99a4edb92f0dc040c59c7a', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '234f813a40b46e72de7360c88643438c76e0cbf7' }, "2")), h("gb-pagination-button-group-base", { key: '49bd6975c922a19c77ffb8f9ee8b80200fae06ec', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '257bdb98b90dddb7bf90ae60b806504ca7590b63' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'a29cf952cc68cd354cc862956b15cf2ac3f36c87', icon: "false" }, h("p", { key: 'f04ff14135090756c0f784d33041be95cb22e332' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'e5c7940e5d966d5dc74d95d6c68b8a71cfb040c8', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '3b240bbf8e8615c065603f24bd3d5919a65dcce6' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'e28e69ca851618747131f9bbab0f7d6a2d11f353', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'e130f5936779e5388037df9e963677a02e0e9528' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '58a1cca90e48b87780d3aee74c79a9c80c409cc3', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '156a3ce787af2bfe5d5c20e55e7ee0f67b348554' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '88948a205deaa3172956753b04918d9588580766', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
+        return (h("div", { key: '1d08d3ad48119b17d17aefd79b79d018a172c438', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '96ebcbbd13237f3405679f18a8536945becba299', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'b61cfa42abd027e087dcdf3aa2a823ce1bbc09d6' }, "Previous")), h("div", { key: 'a5bcb9bb0ca14cd92f5d1236d917bc07b5d0f574', class: "pagination_numbers" }, this.internalTotalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'ec4c68b20f6cd77345527a8605401fa337c5e943', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '35a08363d2de42ef4b906f2e8418773364fbfeda', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '6aa11b7843fa618a729ce873a7721c636a8b525a', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '73c14a368a646c015cb4ee42c1288796ee21cf45', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '228df6297a82e86926f8a0d00aef082ffc0e8db0', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '2682f886f14e20835b00fb1cc36979a61d20c16c', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '3e09d98d39d4a94eb7fe893e75fc4b473ac7a666', shape: this.shape }, h("p", { key: 'd775522d036f647232ef1187ecc33801da15d61c', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '001c3b70ab9d929979b9be8c95770f66428b1dfe', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '90bf3c0fdbd39d81c8c81d37e9b1fa4dc68a0bb7', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '958f42337a300262a84574069a0390cc3e6b8249', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '77f961976e64fd66e6287fe09ecc9ed66c4c57a0', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '3aec7973463a4934a5e04ed78845b9be77e12e66', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '0c723009a5acdca758fcb152c64b8e3bf42fe458', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: '0431e69aff5dda2807e056fc09b047498a3b611f', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }, h("p", { key: '878b7c820ddd9d11b898fa4f2b5397b5a22214ac' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '83ebfd1f8c9e6b06a0b26a61ec78134c536dcf9d', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'e01e4113aa216ef9d5f5e24c9bfdfcf1171c5d84' }, "Previous")), h("div", { key: '1606c68c47aa0533880ef769cebde23d486ea05d', class: "pagination_numbers" }, this.internalTotalPages <= 5 && (h(Fragment, null, this.internalTotalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: '72e782d430301cb34903f82f5a638b73371601b6', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: 'f25563af9a5120d8d7ad0c1dbed368e6b76e3d00', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '92a2a31a944733650d7c6f02fd95fd7cb3017bbe', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '6f508838c662157bc17b3b49eb4681456032e967', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'b77cc31011662fda9be9857c2899c2f837bd65d5', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '2e28dd1568878336e00092657d37f64cc3a8d8b8', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '2e8891512c248e33698b2470e5e5cc1aaf1a60ee', shape: this.shape }, h("p", { key: '63b3664858b385c26e80f22c232b98f1fa6cc954', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'cf5f5a85a80cc38a1766ebbb05b78c44d403f8eb', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '7522dcbbb05719859f31ad3cb276344bfc104dd6', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '47b2d400f174852bcd5a63340de0df047eaf0bf5', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: 'ffa821c2a9b89f99ba20f7a6323ca804587b6653', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '03d687965d06da4f9cfd8822d46e19ee7cc61eee', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'd6ce44227829e2d6590af39d22f14c9391f51ea4', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: '166ed1b023f0b376cbc2f11b8969243c9676c36e', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }, h("p", { key: '956e2cf5db5f5452732331a24e07d98bfa13caae' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '667643e80dfe26788c96f3c2215e85eb55d9d828', class: "pagination_entries" }, h("div", { key: '535a2d8b2e4ff9c8a15cdf47af57fc71fa4f0af6', class: "entries_text" }, h("p", { key: '85467f8c23261d7f7d3032a1b122031dbf8a05d2', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'db7069ce5d0a8f261b761ab6679d42de741bb7ef', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'ef39384c41583a28abfa5799fd9cd6f39012b6d2', type: "default", state: "default", size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-help-icon": false, items: this.entries, "menu-position": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '1171a38687ad63fea88deb06dfbe4afa595dce35', class: "pagination_numbers" }, this.internalTotalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: '3669f91d946d119f1682839a83a4e44076f6a591', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '95c1e6167cdd8ff8e4d7e04e2a2120e7b9cad890', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'd0e070019631f2849ddb01602da776dcd263d4d3', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '5754680ae515dd4d630914ff5e119b42d9f3c8e8', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '385ee9a233dbd19d89e8aa0fdbfe51d54b54e6a1', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '521175d8b302a727718c1ccc858607726d69659c', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'a1a0ba1ec48ea8a43287c2866df4b44aeeba2b29', shape: this.shape, state: "default" }, h("p", { key: '2328e48bbbd828e265cfd38dd6dc18516cf94b62', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'ce86f735fe2268abcfcaafd6a99af00ec243cfc9', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'f9c3feb2ffda05a2fa403cc3f9ad81891cbe2ecb', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '66acfe4fe5a7f51bd1ef8c51327b88c8f37e7a2b', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: 'c2156f97f2b962d95cef6133fa71530e20b49354', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'cdf2687483f4a1e1f1d5caed075f668c7fce23fa', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '86519da1dce9c1f9f0e3cf33f0543890630a5f00', slot: "page_number" }, this.internalTotalPages))))), h("div", { key: '9ae970c461b5281783bf41b2b43208a93bfb2c03', class: "pagination_btns" }, h("gb-button", { key: '9082df00d5a55ed1a86fb360d57652050d9c3b9a', size: "sm", hierarchy: "secondary_gray", icon: "only", state: this.totalPages === 1 && this.currentPage === 1 ? 'disabled' : this.currentPage === 1 ? 'disabled' : 'default', "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: '6d880a26f36748025cc4ebb9f3729049a7c4c469', size: "sm", hierarchy: "secondary_gray", icon: "only", state: this.currentPage === this.internalTotalPages ? 'disabled' : this.currentPage === 1 && this.totalPages === 1 ? 'disabled' : '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: '78a56c0f5f9e51f20eeeccd7ac84beb2bd8f8418', class: "pagination_entries" }, h("div", { key: '18d4585d31cefcb85df1bf1002267790d303b4fb', class: "entries_text" }, h("p", { key: '4ab8ee0d8d02e6bd71a4b23a5b46d8f0cd9c0a9a', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '48ba0ab59d07717aaddaa6a29bb96be187180ae0', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'cd507fb54213242e2310299a7d82b76b5b4e2388', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '59b7d3d47b66a4d5f28321d6dd4e344535d52959', class: "page_number_text" }, h("p", { key: 'ce82db803821aefe692743ea4e8fc0c98466860e', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: 'ea7925ad5cd46ba342ba342a61ba3226edac0e0d', class: "pagination_btns" }, h("gb-button", { key: '5eff22e9a15975e822488d8c4884e0308b1b5da2', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '7ec099d3da2ff46f7fe1f246044fd57693214750' }, "Previous")), h("gb-button", { key: 'b8c6ad399e20b75c56dc091958e20eb3352427e1', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'c76a7488723187f5b109ff50d59fb425cd86bbf2' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'cbc9598462dab6b02e429144b2b3129825039a72', class: "pagination_btns" }, h("gb-button", { key: '069c41d4ccd5e080a29cf1d2a78fa06bb5590749', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '6f94935643e05fadb7d546549abbd5d5e1ff4831' }, "Previous")), h("gb-button", { key: '8bdeaa4ba5a096cce2d0c134e35a5ca3d6ceb593', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'b620b20f18b955465ec8a6e74a7e763426daa472' }, "Next"))), h("div", { key: 'f612642510a0fbceab15b605eb168bb131846667', class: "page_number_text" }, h("p", { key: '441fa73759971e7d36376b3dc42eb79498befc91', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: 'a5d4d0eed50503037d318ad34f10ea7d587ffdfe', class: "pagination_entries" }, h("div", { key: '87a44a3a3aa57c5123bd688583a97afe1e11720a', class: "entries_text" }, h("p", { key: 'bdea40c3088362a28a0541a79dde86531189bdd6', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'd9c2a85d659542e4495bdf42bf5c9a958d5ee0dd', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'b1a384836fb78b1f33d90f48055250595c65e48b', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '6cd0f1158c74ae6b121993ba2fbcc34c742f56c2', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '45ed3731acee67db7801eb761fe69ee95181108b' }, "Previous")), h("div", { key: '4766d8c8776dbf194408c88e4afe7f6d84f19f2f', class: "page_number_text" }, h("p", { key: '37650c4b1eeb3d2b1c693e1a0412fcb1f396fde4', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '205727376210e9e8ca93f6ff173cd5da956a82bc', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '7a3f9a80fb77569bc7bdf996aaed2fc7e022e0f1' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '3a6af44d9da6c09ec3607476a1bfa948461a8f14', class: "pagination_entries" }, h("div", { key: '166ab6f692bd8c2b6e4e6752a69b1e034b069e9d', class: "entries_text" }, h("p", { key: '484ebdb7e757980e306e2f3d89db4699d31df197', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '735113f8d3483cee27b8a55c019442188f50a03a', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '4e2a212641e51b4cda3ee296a3d3a132cf064ec1', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: 'dcc54fd3d39cffb04c9dd9582b46e33037585eb8', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '90eda333ee219c2242ba35d095469d9d312b65fb', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'c5bd94e525bf43333695a741126d7276b6671ffc' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '0867d971123d1c5e027856c8d6aac5bc95727e58', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'de2f09f863361b4b79f1b2fe5c705b9a05c1fec0' }, "1")), h("gb-pagination-button-group-base", { key: '7bc7f4575ffc1090288cb13dbfea92b4fc791f38', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '0c7dff2e55a1b7375b579dbf4fd558670ba50502' }, "2")), h("gb-pagination-button-group-base", { key: '458d11471b7f9815e583dc0b13dba020087779ab', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'f20de36a91a102c54e0bdb8fbc07b4fe59908a54' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '2fc859fac83d9f1b2e5263e1731f9b9b6d2c2e5c', icon: "false" }, h("p", { key: '3a5299878f5e5498d94af04acb01fe815326b7ca' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'f069b15c03faabc8b06ad9f9a7a8c107935604a1', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'dc3d329da7c326aca9aae7aa44cfd16ce4df9cef' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'cdea14cb347c84344dc01f6663370913155562e8', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'f8c39dbc8036484ba9b626ae14ac9be89ca97422' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'fb7a9b4671d4b01d03d7f62fbafb5e6a1356ecd1', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '6248839064afe1214380d62ca3c77322fb3ebcfe' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'be6dfe9eb6685d96e53d76bcbac586b2de768611', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'd65a7609edf9c6548b654287873c1fab9e5c38eb' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'bbf180656c7c1d8d7ef25d005795083f8e5ecf0d', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '5bdfde775309104d822b1fce1f5fe672d54bd0e7', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '0a733d8b18788af2d77a9d25e1275d89aec289e4' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '6a857fa0006a48c2585c27136db677a25bd97599', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '02b657345bf7a565389eab0572afa11156fa98b1' }, "1")), h("gb-pagination-button-group-base", { key: '7780dfaf63b8427c587a9b2dbae70fccebe8c8df', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '2f3c1de66e51e6de255f8e424a2cd6101004cd54' }, "2")), h("gb-pagination-button-group-base", { key: '4803a3a3b0b65e35c0e18db111dd813abd8ee056', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '51ab87422428f6f305e50341f7ceff08b7dfb3d8' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'efe68a741c005f75793471194866429abef3817e', icon: "false" }, h("p", { key: 'e2a18b7815f46c6f76464235ddfcdae807769494' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '6d9ceccc2a233015b1d86a62e296a27b0da9e4f0', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '1f09ed8f205f30970aca462e419ab62dff646967' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '33cbfcb1ddf207bfc0bf5c7998791b8bf0ec497e', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '234ebdd1778c4bc473452393ff298fb6bc1f97d8' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '7386b1d833d97ee22085286f2c5201d81d5a43e1', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'ff13d08b7a1f4f7886f15a8d282bcfecc9bdb59a' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '556a192dcd15c8de36280d5c9b1a9715f2453426', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'cc2a89fafdd693efc231a0a91c1e64fed0680151' }, "Next"))), h("div", { key: 'ed386c5fcfe1ad29d3b93be81fc5c7ce514f9d47', class: "pagination_entries" }, h("div", { key: 'cb5f8092c28bddf58a89de334a934466558cf192', class: "entries_text" }, h("p", { key: 'ee51f198e35a0c20d1c6a4dd4dda4d226e22dd35', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '31b94443a190d1e0908103cd9ab2926795019c74', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'dbc6b905ddefffcd7732ef9747f7646d36875e21', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '1b430f942df56385856dcb05963f299757b11859', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '7f9161530f62918ba6a39fb7dd1af1f34a1e726b', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '5c98f185246159bb44bb19e0cdbf50b9231b3a72' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '4c4937f04e4b3a400ffa29a1406dec3b3a57f2e7', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '0702c55270eb7c40792f2444896023ab4a8796b8' }, "1")), h("gb-pagination-button-group-base", { key: '5e97d0c76c9e581d367cf4b6144a6c6a11f1909a', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '1e03d3c68f5090388ef8b4ac5d05085aa4c50544' }, "2")), h("gb-pagination-button-group-base", { key: 'c4a27ca8cd4f91697f76b76c6a3c1e58ff5eff70', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '811e468b375cd177892d5bdf8d0de4d7e9d4e173' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'c8247918296bf0d06944104a90b915a37b3ec42e', icon: "false" }, h("p", { key: 'f588904c6614d600fd906d30efbcd00048c27d20' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '4d952259bde917584b3269b6b9e469753b588029', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '34fdf8caa2feb06546addae3cefb6f879eea7412' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '953af1f34874f46eca7fba6bff787e4a611234a6', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'eb246b6818f00bb574bfb929eeb3e98523e7bfe0' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '5d7985bb5fbdec5e9dfb73bbde03e3ab0adc7fdf', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '039db767d2411fd6bcd377a7d7347a36f5bd8a44' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '0f91d9d6602c6fcdf444d83d9446790789b151b1', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'b2ba22d1258afd755fe960e6c758b124ab7bf8ee' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '2a6a27bc9cb18983b53af9a1a021051504f42039', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '4c4c9918b98a2735180eeaedac3c97171fb64ea9', class: "page_number_text" }, h("p", { key: '02f2bd5aaf12a9a9c59f17096a2ec1c6587da0bd', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '24b11662695d4bdd078f20a7f85895941e3c115a', 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 === 'page_minimal_center_aligned' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '8671aeed20292d20a3f0a7a17ecc1e2ff5154346', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'a6f063a6ccff73063912f6840e04431ecabe54dd', class: "page_number_text" }, h("p", { key: '6416b9366028222e0638adb957d884d732595b29', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'b431e8eb464a3ef540cd568844f50c1ee17b9910', 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_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("div", { key: 'e67d61cb8f88cd5743bbff04148a5f8ea8177a3e', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '888b90ecf19135dd93f5d8f2e896bf0e8d0265f4', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected })), h("div", { key: '45a6c22253f99f9d6d79a969b6d6a3309cd566ed', class: "card_default_buttons" }, h("gb-button", { key: '080b40fc35d5c0abf2521cae593cce71e25422b6', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '8f00b7d8fb93d99d07d002d942c33392cf750e93', class: "page_number_text" }, h("p", { key: '244a1ac4cb53e448875595db912fbcd79a0987a0', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'e6368ee0c11fc5ee2cedbc574e5746df2c6c3ded', 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 === 'mobile' && (h(Fragment, null, h("gb-button", { key: '21b5c285e098329b2dae557a1b461c6d2d015a0c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'ea12596c53920fe0ae7946402672b9980360e8b2', class: "page_number_text" }, h("p", { key: 'c89a2c409d97c96e7b004c5ff214e111c00aa1e6', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '563344d61a9274d1fba1d6cee6b1856e1a6c5e53', 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_left_aligned' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '2d3b080be65c9e911ef80e9cddbf08907d7e8514', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '4d75ed4d6d33e48c2e02157622bee9ec7d9c0763', class: "page_number_text" }, h("p", { key: '4ead3c2dedd0a71c0e0913443b48f723b610f8c3', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'd988612a5223bffa7450d9c464cffa37e6a6d03c', 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_center_aligned' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '5b7ee11c1a3cb80ac7d2a719e25fe5c1b3a4e1f5', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '999dbfa935af09bd8553f2e000327892cb1b8fab', class: "page_number_text" }, h("p", { key: 'ba2f853a45777c4e473ec552ea346243440b23ac', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '9e849e4d8f8e57e0f4df2f172da2efa656c41722', 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_button_group_right_aligned' && this.breakpoint === 'mobile' && (h("div", { key: '030e88cac8eae0b33789c4731b44e54eed90f3d3', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '9364452f760f7f7d961e57be64c1fc7fe04ee3ec', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '75e7dd80799a0f68dc2eaf07316067c169d5d81f', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '58eec040cb7713c0182480533ce4aa04ed094a85' }, "1")), h("gb-pagination-button-group-base", { key: 'decaa9aa37934c4b27d0cd088deb29362c1e98b0', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'a119ea8e38edb2ea0edddae3f8ac05e4983663cc' }, "2")), h("gb-pagination-button-group-base", { key: '9485292979491c2ab3a18f63afd7281e0929623f', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '0b059c55a9c1f3032689ae5c9377d1bb0a2edb7a' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '7e4cba942bc9d1a659c239489954cf128d2cc438', icon: "false" }, h("p", { key: '80a424e1ea5dd784f95ecb31ee2ff044caf11c5a' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '816276fa2ffcaedb51a7f9322fd8d0ec26a8e89b', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '826383b458f8ea6b17f4345a8af4373e8697fa85' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '45e58c5d4f2dc4cf47e8d6d65eca6e237760d1a3', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '68e86b43352c67a78afdb950bc61ac1d1d2ff607' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'afcf2aec97a2ec78f2afae8d074d8688f703b765', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '7bd51ad208ef7354473c9e63dd1aaec04fe8a3b5' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '8b9274b161a61e33ca4e394ba3f5216ad95969ae', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'mobile' && (h("div", { key: 'cb74591ae016afba9f1a14b007809608a2194bc1', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '687b9e91b36649d04f042b20ed17f4448d865eb4', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '68f7815668b0b98b95edd9d94c15e8b45e3a9bed', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'd168e5c9e8955fe0c8240b0c86ebe60929d7c53a' }, "1")), h("gb-pagination-button-group-base", { key: '62d67dc9b4bba8621bd1e61338156bcba3b2bd45', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'e42c1f0c59f17ade08a9af2955948afca3257828' }, "2")), h("gb-pagination-button-group-base", { key: '108262cf1c0e13c4c93462d723a4531af66333ed', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '1522a23c76a47600da7ea4206b799a7fc3b03a34' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'dfca49348de156190ecaf194421a4dfd71b68aa1', icon: "false" }, h("p", { key: '61d1df0e5a3d9c408d13859d3cbace9f04e13b3e' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'b8ff418d71649a859ccd7a90399edab83a29634c', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '977111f4138cc56d9f0beb6c703f15590cef1e82' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'c8c8b0514d09b1b856447a1a121566918bd534ca', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '6f64040ca3c35cbe522282f532476ff01b0f4ac3' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '8c4b04d483868d0f8ec3f38e00d79597c7c12022', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '75ec0edab9491d39a157ffd9902c94dcac05c0d0' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '7ee18cff8a31b7d7b849157bd203681d13e2cf02', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'mobile' && (h("div", { key: '71a6024a2a163f1843f5578e24fa0c07791d13b4', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '41ea59c887f126029de45e9fde8de052893c2419', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '51f4a90cb8d0909b2f743e520c6997d54686b619', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '8711fe68b1eb03174ba4282af2d531a86e87b2c6' }, "1")), h("gb-pagination-button-group-base", { key: '506ea59ddd244980ea913bb8d8f8cdf1cc01abc6', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'ef483c458dbf7b71c40ea70c582b3a9f8416abcf' }, "2")), h("gb-pagination-button-group-base", { key: 'd52980a452a554cde65f43139e11f2de333eccc0', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'd872d3656d9d87575c00bb2a130057b075f90012' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '3d897a16562f66b5a62407f01c3cf8e63a485f6b', icon: "false" }, h("p", { key: '8e33fbaf72b4402a6ff03cab43129257153fa240' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '96b76e3642c9999c17606bd2ac96268ab46de53c', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'f4f0a179acf9a5e6be57a46f53b0654aa981a635' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '5cce3ceb95f219ad40928f054ff5f2db7c1d0a32', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '54735180437732a6648096c2b947fa598b3f71f4' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '585d82b01131dd23d3dc68f6bad8c9c80bf14afd', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '69d33091cc58ec457319ae34f304ded26afbe3b7' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'f3df7378026359283a412e486eecb541341c1f03', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
     }
     static get is() { return "gb-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -227,6 +225,26 @@ export class GbPagination {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[10, 20, 50, 80, 100]"
+            },
+            "entriesDropdownMenuPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | ' bottom'",
+                    "resolved": "\" bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "entries-dropdown-menu-position",
+                "defaultValue": "'top'"
             }
         };
     }