globuswebcomponents 2.5.2 → 2.5.4

package/dist/collection/components/gb-metric-card/gb-metric-card.js

@@ -6,7 +6,7 @@ export class GbMetricCard {
         this.percentage = '';
     }
     render() {
-        return (h("div", { key: '585c65b79020cc39af7ccb6ad8a033a956271b7a', class: `metric_card_wrapper ${this.size} ${'radius_' + this.radius}` }, h("div", { key: '1ca12288117c5658bc604e201ca6a31b53567dc8', class: `icon_and_label ${this.size}` }, h("div", { key: '1e6527af43bb27085003fb2780002372faef5e45', class: "featured_icon" }, h("gb-metric-featured-icon", { key: 'cee0c0d1397a5ed16080cdc0a5f93a40fbf6419d', size: this.size, "featured-icon-style": this.featuredIconStyle, icon: this.icon, color: this.featuredIconColor })), this.size === 'md' && h("p", { key: 'a2351183dc4b735c455a70b02dfdf09d6e1bf6ac', class: "heading text-sm-medium" }, this.label)), h("div", { key: '68584489f6bec3ee9498a483c69f32983ef73f8d', class: "heading_and_number" }, this.size === 'sm' && h("p", { key: 'a69987a28f94eed50a021e5aed5923d3e7859792', class: "heading text-sm-medium" }, this.label), h("div", { key: '57fe43a1eb126d637fabe296dcc41a283862b173', class: "number_and_badge" }, h("p", { key: '2ab3b05f1111eb775143b2f58085cb84fb6ea554', class: "number display-md-semi-bold" }, this.metric), this.showBadge && (h("gb-badge", { key: '73daf3d9472a7533b21ac517b79e8c4f2385aec0', size: "lg", type: "pill_color", color: "gray" }, h("p", { key: '27f866649761cfa93dace4d8822ec9d4228f1ace' }, this.percentage)))))));
+        return (h("div", { key: 'c9138faf2ff78d1013dad75e699dcb01b1a41934', class: `metric_card_wrapper ${this.size} ${'radius_' + this.radius}` }, h("div", { key: '30b31f809cfa7337de2bd0a5e5e79170bde5403b', class: `icon_and_label ${this.size}` }, h("div", { key: 'b94d9c0213b0da777d29372fcb8d3f9d4176db92', class: "featured_icon" }, h("gb-metric-featured-icon", { key: 'aece275f4055bc6b12423cb49c6729aa970ac861', size: this.size, "featured-icon-style": this.featuredIconStyle, icon: this.icon, color: this.featuredIconColor })), this.size === 'md' && h("p", { key: '9e07c9e1193f3f19e4e02e952fb3283dedade8a1', class: "heading text-sm-medium" }, this.label)), h("div", { key: '4f705ad492fc5b792f5d95527e7704fc617d72cb', class: "heading_and_number" }, this.size === 'sm' && h("p", { key: '1588b676b9cd117d873a72dd0a9283a625c88635', class: "heading text-sm-medium" }, this.label), h("div", { key: 'c9f046eb7db14f74f18761925dc1c1f2b8d27926', class: "number_and_badge" }, h("p", { key: '664f9f463628c08584bc1a87467367a150b95397', class: "number display-md-semi-bold" }, this.metric), this.showBadge && (h("gb-badge", { key: 'd8ed625d10ef49a8c26ea1c99782ad8239aee8af', size: "lg", type: "pill_color", color: "gray" }, h("p", { key: '9278f4608012caf02e3321585ebfb707d1c0272d' }, this.percentage)))))));
     }
     static get is() { return "gb-metric-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-metric-featured-icon/gb-metric-featured-icon.js

@@ -13,7 +13,7 @@ export class GbMetricFeaturedIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h(Fragment, null, this.featuredIconStyle === 'glassmorphism' && (h("div", { key: 'd283608b4fe2665b66fd5494e8ef99fc2cd292eb', class: `metric_featured_icon_wrapper ${this.size}` }, h("div", { key: '5fa97ecb961d1fd1afbc67c4fa5d8b4b5176290e', class: `icon_glass ${this.size}` }, h("div", { key: 'a65e3d1e3af1bee0fa0ec2c15b42677ee7dc54d6', class: `icon ${this.size} ${this.color}`, innerHTML: this.leadingIconSvg })), h("div", { key: 'd45464dfc398eebc3ba6b386c5ceccd2b3066c55', class: `icon_background ${this.color} ${this.size}` }))), this.featuredIconStyle === 'circular_filled' && (h("div", { key: 'f3541b735b51cf25b82e7fe8193d17ce645c4778', class: `circular_filled_outer ${this.color} ${this.size}` }, h("div", { key: 'adddbdd72485e4c9b4f0563b9fa64957186912de', class: `circular_filled_icon icon ${this.size} ${this.color}`, innerHTML: this.leadingIconSvg })))));
+        return (h(Fragment, null, this.featuredIconStyle === 'glassmorphism' && (h("div", { key: '7fe3a16c4c87eba2b2e32959f5cc1e5034d782de', class: `metric_featured_icon_wrapper ${this.size}` }, h("div", { key: '4dd35238a6f08ac4b26c7831aff5ac5248868c12', class: `icon_glass ${this.size}` }, h("div", { key: '6410e0eb1979294a277bfb98f9386ccc068e40e6', class: `icon ${this.size} ${this.color}`, innerHTML: this.leadingIconSvg })), h("div", { key: 'f0215c4f3330e58a20817dce3e9eec70d8b72144', class: `icon_background ${this.color} ${this.size}` }))), this.featuredIconStyle === 'circular_filled' && (h("div", { key: '8bcb62605ab4be199eaa3e6fe157f34ee4ece2cd', class: `circular_filled_outer ${this.color} ${this.size}` }, h("div", { key: '8cfbd502fe7aa5af1352c899b5055fb3b99e0e03', class: `circular_filled_icon icon ${this.size} ${this.color}`, innerHTML: this.leadingIconSvg })))));
     }
     static get is() { return "gb-metric-featured-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -122,13 +122,35 @@ export class GbNavBar {
             this.dropdownOpen = false;
         }
     }
-    onTabsChanged(newTabs) {
-        this.internalItems = newTabs;
+    onItemsChanged(newValue, _oldValue) {
+        console.log(newValue);
+        this.internalItems = [...newValue];
+        console.log(this.internalItems);
+        setTimeout(() => {
+            this.calculateOverflow();
+            this.measured = true;
+            console.log(this.measured);
+        }, 0);
+        window.addEventListener('resize', this.handleResize);
+    }
+    componentWillLoad() {
+        // setTimeout(() => {
+        //   this.items = [
+        //     {
+        //       label: 'First',
+        //       icon: 'assets/star.svg',
+        //       iconOnly: false,
+        //       index: 0,
+        //     },
+        //   ];
+        // }, 3000);
+        this.internalItems = [...this.items]; // copy initial prop value safely
     }
     componentDidLoad() {
         setTimeout(() => {
             this.calculateOverflow();
             this.measured = true;
+            console.log(this.measured);
         }, 0);
         window.addEventListener('resize', this.handleResize);
     }
@@ -155,6 +177,7 @@ export class GbNavBar {
             }
         });
         this.visibleItems = visible;
+        console.log(this.visibleItems);
         this.overflowItems = hidden;
     }
     toggleDropdown() {
@@ -162,7 +185,7 @@ export class GbNavBar {
     }
     render() {
         const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
-        return (h("div", { key: '507e1ef6575f1afccf7f35955def3cfc7d1e4ae2', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: '9cca88c46883a1f12f6dbef3b46c3ae32d6d4ff5', class: "pattern" }, h("img", { key: '98026a1c3fb6e31efda85e3783d5f8fe77635b63', src: patternSrc, alt: "" }))), h("div", { key: '9725000be05e8b74d18f8315e3d3ebc7f122623e', class: "top_bar_content" }, h("div", { key: '3131903f87e926d186c73ac96cfd43eac5d3c468', style: { visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' } }, this.internalItems.map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label })))), h("div", { key: 'b121f83616706830eee7334f3e8c704f5a43ddc1', class: `content ${this.dropdownOpen ? 'shown' : ''}`, ref: el => (this.containerEl = el) }, (this.measured ? this.visibleItems : this.internalItems).map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index) }))), this.measured && this.overflowItems.length > 0 && (h("div", { key: '099e64cd3553e4bdfc2b6ea160a1bca927e1dc05', class: "more" }, h("gb-nav-bar-item", { key: 'a9da1135fba6987a7f8f5ebfbafe32941ba419f5', state: this.dropdownItemClicked ? 'active' : 'default', "icon-only": false, category: this.category, icon: "assets/more.svg", label: "More", class: "more_button", onClick: () => this.toggleDropdown() }), this.dropdownOpen && (h("div", { key: '45889604e9fd37c07b4fa6d1bfc0fed72fad7d99', class: "dropdown_menu" }, this.overflowItems.map(tab => (h("gb-dropdown-items-with-shortcut", { icon: true, state: "default", iconSrc: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index, true) })))))))))));
+        return (h("div", { key: 'ccc9b96c6ff5c47189508c2d255b207626970ae2', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: '4dd6404703ed01ebaefdc88a9dd29627f28acc80', class: "pattern" }, h("img", { key: 'a3de21bea16a57fe17ce5a25b9c4e225546adab0', src: patternSrc, alt: "" }))), h("div", { key: '55a0c5fa09142c5ef94c86a2a6f0a5442b702c0a', class: "top_bar_content" }, h("div", { key: 'acba4b94f4a2ed93576064615db792aa8df73521', style: { visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' } }, this.internalItems.map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label })))), h("div", { key: '9aa4ffb04eacd1d50797e59ffe2404af86499132', class: `content ${this.dropdownOpen ? 'shown' : ''}`, ref: el => (this.containerEl = el) }, (this.measured ? this.visibleItems : this.internalItems).map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index) }))), this.measured && this.overflowItems.length > 0 && (h("div", { key: '33dfd7c0d0a3b437d9285addfcfefbeda79deeb6', class: "more" }, h("gb-nav-bar-item", { key: 'c84bb469cd2f941522ac73c844f55661c973ec0c', state: this.dropdownItemClicked ? 'active' : 'default', "icon-only": false, category: this.category, icon: "assets/more.svg", label: "More", class: "more_button", onClick: () => this.toggleDropdown() }), this.dropdownOpen && (h("div", { key: '2fd67c4fdf8c8b5b458fbb6f01a93c13cf6be9c3', class: "dropdown_menu" }, this.overflowItems.map(tab => (h("gb-dropdown-items-with-shortcut", { icon: true, state: "default", iconSrc: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index, true) })))))))))));
     }
     static get is() { return "gb-nav-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -205,7 +228,7 @@ export class GbNavBar {
             },
             "items": {
                 "type": "unknown",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "{ label: string; icon?: string; iconOnly: boolean; index: number }[]",
                     "resolved": "{ label: string; icon?: string; iconOnly: boolean; index: number; }[]",
@@ -295,7 +318,7 @@ export class GbNavBar {
     static get watchers() {
         return [{
                 "propName": "items",
-                "methodName": "onTabsChanged"
+                "methodName": "onItemsChanged"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-nav-bar.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar/gb-nav-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-nav-bar',\r\n  styleUrl: 'gb-nav-bar.css',\r\n  shadow: true,\r\n})\r\nexport class GbNavBar {\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() items: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [\r\n    // {\r\n    //   label: 'First',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 0,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: '',\r\n    //   iconOnly: false,\r\n    //   index: 1,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 2,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 3,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 4,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 5,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 6,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 7,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 8,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 9,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 10,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 11,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 12,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 13,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 14,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 15,\r\n    // },\r\n  ];\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop({ mutable: true }) activeIndex: number = 0;\r\n  @Element() el: HTMLElement;\r\n  @State() internalItems: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [...this.items];\r\n  @State() visibleItems: typeof this.items = [];\r\n  @State() overflowItems: typeof this.items = [];\r\n  @State() measured: boolean = false;\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() dropdownItemClicked: boolean = false;\r\n  @Event() navBarItemClicked: EventEmitter<number>;\r\n\r\n  private containerEl!: HTMLElement;\r\n\r\n  onTabItemClicked(index: number, clicked?: boolean) {\r\n    this.dropdownItemClicked = false;\r\n    this.activeIndex = index;\r\n    this.navBarItemClicked.emit(index);\r\n\r\n    if (clicked) {\r\n      this.dropdownItemClicked = true;\r\n      this.dropdownOpen = false;\r\n    }\r\n  }\r\n\r\n  @Watch('items')\r\n  onTabsChanged(newTabs: { label: string; icon: string; iconOnly: boolean; index: number }[]) {\r\n    this.internalItems = newTabs;\r\n  }\r\n\r\n  private handleResize = () => {\r\n    setTimeout(() => {\r\n      this.calculateOverflow();\r\n    }, 0);\r\n  };\r\n\r\n  componentDidLoad() {\r\n    setTimeout(() => {\r\n      this.calculateOverflow();\r\n      this.measured = true;\r\n    }, 0);\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  calculateOverflow() {\r\n    const hiddenContainer = this.el.shadowRoot.querySelector('[style*=\"visibility: hidden\"]');\r\n    if (!hiddenContainer) return;\r\n\r\n    let containerWidth = this.containerEl.offsetWidth;\r\n    let usedWidth = 0;\r\n    const visible = [];\r\n    const hidden = [];\r\n\r\n    const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));\r\n\r\n    allItems.forEach((el, i) => {\r\n      const itemWidth = (el as HTMLElement).offsetWidth + 16;\r\n      if (usedWidth + itemWidth < containerWidth - 120) {\r\n        usedWidth += itemWidth;\r\n        visible.push(this.internalItems[i]);\r\n      } else {\r\n        hidden.push(this.internalItems[i]);\r\n      }\r\n    });\r\n\r\n    this.visibleItems = visible;\r\n    this.overflowItems = hidden;\r\n  }\r\n\r\n  toggleDropdown() {\r\n    this.dropdownOpen = !this.dropdownOpen;\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);\r\n\r\n    return (\r\n      <div class={`top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}`}>\r\n        {this.category === 'colored_background' && (\r\n          <div class=\"pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n        )}\r\n        <div class=\"top_bar_content\">\r\n          {/* Hidden measurement container for overflow calculation */}\r\n          <div style={{ visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' }}>\r\n            {this.internalItems.map(tab => (\r\n              <gb-nav-bar-item\r\n                state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n                icon-only={tab.iconOnly}\r\n                category={this.category}\r\n                icon={tab.icon}\r\n                label={tab.label}\r\n              ></gb-nav-bar-item>\r\n            ))}\r\n          </div>\r\n          <div class={`content ${this.dropdownOpen ? 'shown' : ''}`} ref={el => (this.containerEl = el)}>\r\n            {(this.measured ? this.visibleItems : this.internalItems).map(tab => (\r\n              <gb-nav-bar-item\r\n                state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n                icon-only={tab.iconOnly}\r\n                category={this.category}\r\n                icon={tab.icon}\r\n                label={tab.label}\r\n                onClick={() => this.onTabItemClicked(tab.index)}\r\n              ></gb-nav-bar-item>\r\n            ))}\r\n            {this.measured && this.overflowItems.length > 0 && (\r\n              <div class=\"more\">\r\n                <gb-nav-bar-item\r\n                  state={this.dropdownItemClicked ? 'active' : 'default'}\r\n                  icon-only={false}\r\n                  category={this.category}\r\n                  icon=\"assets/more.svg\"\r\n                  label=\"More\"\r\n                  class=\"more_button\"\r\n                  onClick={() => this.toggleDropdown()}\r\n                ></gb-nav-bar-item>\r\n                {this.dropdownOpen && (\r\n                  <div class=\"dropdown_menu\">\r\n                    {this.overflowItems.map(tab => (\r\n                      <gb-dropdown-items-with-shortcut\r\n                        icon\r\n                        state=\"default\"\r\n                        iconSrc={tab.icon}\r\n                        label={tab.label}\r\n                        onClick={() => this.onTabItemClicked(tab.index, true)}\r\n                      ></gb-dropdown-items-with-shortcut>\r\n                    ))}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-nav-bar.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar/gb-nav-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-nav-bar',\r\n  styleUrl: 'gb-nav-bar.css',\r\n  shadow: true,\r\n})\r\nexport class GbNavBar {\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop({ mutable: true }) items: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [\r\n    // {\r\n    //   label: 'First',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 0,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: '',\r\n    //   iconOnly: false,\r\n    //   index: 1,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 2,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 3,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 4,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 5,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 6,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 7,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 8,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 9,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 10,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 11,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 12,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 13,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 14,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 15,\r\n    // },\r\n  ];\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop({ mutable: true }) activeIndex: number = 0;\r\n  @Element() el: HTMLElement;\r\n  @State() internalItems: { label: string; icon?: string; iconOnly: boolean; index: number }[] = [...this.items];\r\n  @State() visibleItems: typeof this.items = [];\r\n  @State() overflowItems: typeof this.items = [];\r\n  @State() measured: boolean = false;\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() dropdownItemClicked: boolean = false;\r\n  @Event() navBarItemClicked: EventEmitter<number>;\r\n\r\n  private containerEl!: HTMLElement;\r\n\r\n  onTabItemClicked(index: number, clicked?: boolean) {\r\n    this.dropdownItemClicked = false;\r\n    this.activeIndex = index;\r\n    this.navBarItemClicked.emit(index);\r\n\r\n    if (clicked) {\r\n      this.dropdownItemClicked = true;\r\n      this.dropdownOpen = false;\r\n    }\r\n  }\r\n\r\n  @Watch('items')\r\n  onItemsChanged(newValue: { label: string; icon: string; iconOnly: boolean; index: number }[], _oldValue) {\r\n    console.log(newValue);\r\n    this.internalItems = [...newValue];\r\n    console.log(this.internalItems);\r\n\r\n    setTimeout(() => {\r\n      this.calculateOverflow();\r\n      this.measured = true;\r\n      console.log(this.measured);\r\n    }, 0);\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    // setTimeout(() => {\r\n    //   this.items = [\r\n    //     {\r\n    //       label: 'First',\r\n    //       icon: 'assets/star.svg',\r\n    //       iconOnly: false,\r\n    //       index: 0,\r\n    //     },\r\n    //   ];\r\n    // }, 3000);\r\n\r\n\r\n    this.internalItems = [...this.items]; // copy initial prop value safely\r\n  }\r\n\r\n  private handleResize = () => {\r\n    setTimeout(() => {\r\n      this.calculateOverflow();\r\n    }, 0);\r\n  };\r\n\r\n  componentDidLoad() {\r\n    setTimeout(() => {\r\n      this.calculateOverflow();\r\n      this.measured = true;\r\n      console.log(this.measured);\r\n    }, 0);\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  calculateOverflow() {\r\n    const hiddenContainer = this.el.shadowRoot.querySelector('[style*=\"visibility: hidden\"]');\r\n    if (!hiddenContainer) return;\r\n\r\n    let containerWidth = this.containerEl.offsetWidth;\r\n    let usedWidth = 0;\r\n    const visible = [];\r\n    const hidden = [];\r\n\r\n    const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));\r\n\r\n    allItems.forEach((el, i) => {\r\n      const itemWidth = (el as HTMLElement).offsetWidth + 16;\r\n      if (usedWidth + itemWidth < containerWidth - 120) {\r\n        usedWidth += itemWidth;\r\n        visible.push(this.internalItems[i]);\r\n      } else {\r\n        hidden.push(this.internalItems[i]);\r\n      }\r\n    });\r\n\r\n    this.visibleItems = visible;\r\n    console.log(this.visibleItems);\r\n    this.overflowItems = hidden;\r\n  }\r\n\r\n  toggleDropdown() {\r\n    this.dropdownOpen = !this.dropdownOpen;\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);\r\n\r\n    return (\r\n      <div class={`top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}`}>\r\n        {this.category === 'colored_background' && (\r\n          <div class=\"pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n        )}\r\n        <div class=\"top_bar_content\">\r\n          {/* Hidden measurement container for overflow calculation */}\r\n          <div style={{ visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' }}>\r\n            {this.internalItems.map(tab => (\r\n              <gb-nav-bar-item\r\n                state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n                icon-only={tab.iconOnly}\r\n                category={this.category}\r\n                icon={tab.icon}\r\n                label={tab.label}\r\n              ></gb-nav-bar-item>\r\n            ))}\r\n          </div>\r\n          <div class={`content ${this.dropdownOpen ? 'shown' : ''}`} ref={el => (this.containerEl = el)}>\r\n            {(this.measured ? this.visibleItems : this.internalItems).map(tab => (\r\n              <gb-nav-bar-item\r\n                state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n                icon-only={tab.iconOnly}\r\n                category={this.category}\r\n                icon={tab.icon}\r\n                label={tab.label}\r\n                onClick={() => this.onTabItemClicked(tab.index)}\r\n              ></gb-nav-bar-item>\r\n            ))}\r\n            {this.measured && this.overflowItems.length > 0 && (\r\n              <div class=\"more\">\r\n                <gb-nav-bar-item\r\n                  state={this.dropdownItemClicked ? 'active' : 'default'}\r\n                  icon-only={false}\r\n                  category={this.category}\r\n                  icon=\"assets/more.svg\"\r\n                  label=\"More\"\r\n                  class=\"more_button\"\r\n                  onClick={() => this.toggleDropdown()}\r\n                ></gb-nav-bar-item>\r\n                {this.dropdownOpen && (\r\n                  <div class=\"dropdown_menu\">\r\n                    {this.overflowItems.map(tab => (\r\n                      <gb-dropdown-items-with-shortcut\r\n                        icon\r\n                        state=\"default\"\r\n                        iconSrc={tab.icon}\r\n                        label={tab.label}\r\n                        onClick={() => this.onTabItemClicked(tab.index, true)}\r\n                      ></gb-dropdown-items-with-shortcut>\r\n                    ))}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -34,7 +34,7 @@ export class GbNavBarItem {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '22cf4cf6d4e2b81c35a6e1dd0c7b5240d26b43a9', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '7ee8e0bc3258ab06bcda6b3b3a082b2e52aa5564', class: `top_bar_content` }, this.icon && h("div", { key: '46e3708f31e188ffa6a60a797ea701d33a2f28dd', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: '9108931e488cde1ba543204c95d0978a2b56835b', class: "label" }, h("p", { key: '9bdced5e9fcec84bc55bf398894490abb4a2be39', class: `label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '4f52310720ded2ffe97a269b5938c41dca0afedd', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: '46f3a8290ad8df6b3c3c79027447c600cb7202af', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: '2ab9d3fe4d3c6f2f296d00c308da38b66d444336', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '61524b03474cc5c53e72458c156c080b8c1c9e9c', slot: "label" }, this.label)))));
+        return (h("div", { key: '256eb8b0f869b0f4a03ae7c03009cef4ba3659cc', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '8e2a9d6b7fd022c708a5356d9fb61a5b28a45adc', class: `top_bar_content` }, this.icon && h("div", { key: 'aaa841b86e59646ecc5ad1743f6c16125c51ac27', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: 'b9c67acf69a800bdc19e76987ac66fba3ae9f957', class: "label" }, h("p", { key: '34da3ed9505beb1faea16920dc74dd5ab6ff1371', class: `label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '791f3f98187d51977b70c100de842897d7ce9ce8', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: '2260a8c6fcc1581bc4567b9e0ba6374d716680d0', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: '7f28d56a0c65074ef8d7365818149bf36eba130a', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '21f2b1ba34a42cebfa8448ddd8eef93ce50ece25', slot: "label" }, this.label)))));
     }
     static get is() { return "gb-nav-bar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js

@@ -36,7 +36,7 @@ export class GbNavBarSidemenu {
     }
     render() {
         const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);
-        return (h("div", { key: '5a14efbf87a2f11136d13745e63e0ec7766bb49c', class: "top_bar_sidemenu_div" }, h("div", { key: '68d5accc6ff1b89f620bc30b5eea7be1a360635e', class: "vertical_tabs_div" }, h("gb-vertical-tabs", { key: '6975d582f48fdc874d845fb2063947ae26706cc7', size: "md", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) })), h("div", { key: '112045ac6f786bcf15d6da524ff19c48e86ddba4', class: "wrapper" }, h("div", { key: '2f52c3b052b9094561e09433c4adc99e136614fa', class: "wrapper_pattern" }, h("img", { key: 'cb995dd803b7ff2fc06a3edb82565d271f475d1e', src: patternSrc, alt: "" })), h("div", { key: '5eb311fb7edbc3a9dcfff3c27f226f32f8b79963', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("div", { key: 'e3c9d2f8bf63e87f72fb17946cf9feff556e7b9f', class: "application_name" }, h("slot", { key: '7011ea3b5fb0214c9a9c57f0142f674812e46ce4', name: "application_name" })))));
+        return (h("div", { key: '165a722d33d4021c404f993b3284ae74fe401102', class: "top_bar_sidemenu_div" }, h("div", { key: '7b86870572d2f6a5abd4e7cb0c0609b3aff01a7c', class: "vertical_tabs_div" }, h("gb-vertical-tabs", { key: 'b21a4f5f476aa07ec120656412dc2133ca012f46', size: "md", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) })), h("div", { key: 'de7d1e7ceb984b454b3bfe2f02b75e129f8ec753', class: "wrapper" }, h("div", { key: '7f591f7090fd9606dbc0d2488f0fe65b0e99b242', class: "wrapper_pattern" }, h("img", { key: '7b47aaf173cdbd3ae08cf49a422aee8e865c7c74', src: patternSrc, alt: "" })), h("div", { key: 'aed2feaa7f383f86d6e0bb32dda337fa4734699e', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("div", { key: '10818967609f917112f89b3373bcfc9677fb001d', class: "application_name" }, h("slot", { key: 'ff337486a98b3d2c8bfdd691aeeedfc419719d73', name: "application_name" })))));
     }
     static get is() { return "gb-nav-bar-sidemenu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-notification-content/gb-notification-content.js

@@ -7,7 +7,7 @@ export class GbNotificationContent {
     }
     render() {
         const iconSrc = getAssetPath(`${this.icon}`);
-        return (h("div", { key: 'a99ab3aa11d5f60b99adbc2c70d913eb16ff7b50', class: "notification_container" }, h("div", { key: 'b891e5c5fd3f9d5839f46aae2c92830702fa23a8', class: "notification_title" }, this.icon && (h("div", { key: 'a5e18800215e854f5a1e086df6dd9afe7a01d45a', class: "icon" }, h("img", { key: '95bd29343e2f8de7336956d870c87194b3a5d050', src: iconSrc, alt: "Icon" }))), h("label", { key: '411035edb9dc56bff91a4558e943147fc4cf345f' }, this.label), h("span", { key: '180fcf9ceb0a5bef52a52d2e88d40fef8b5a8957', class: "time" }, this.time)), h("div", { key: 'faa4b18a374fbe18f5ed47b555142d2c769624c5', class: "supporting_text" }, h("p", { key: '4a9e4fff80dabbe8eb9a654a16fea8a6fbbd67f6', class: "text-sm-regular" }, this.supportingText))));
+        return (h("div", { key: '9192354ce7f0a189165694861971ce262896b723', class: "notification_container" }, h("div", { key: '445de07c842434deba0ac3108670fb05a40b03b3', class: "notification_title" }, this.icon && (h("div", { key: 'b37cff39b148bf1ebcede2c15de07698dd3a8af8', class: "icon" }, h("img", { key: '5c4aa5eabe3a669d96ba46a041f8fb20792793e8', src: iconSrc, alt: "Icon" }))), h("label", { key: 'c2841de8b1cd7aa1a1cb793871bda4fae1505b2f' }, this.label), h("span", { key: '368c0243caa10d5dfbe29febdbca1478de7205aa', class: "time" }, this.time)), h("div", { key: '2db2405c6ed1f4dbfff35fb684dbe5a486caf7f8', class: "supporting_text" }, h("p", { key: 'c07a09493f0c04484d8a44b66987a9a81ece891d', class: "text-sm-regular" }, this.supportingText))));
     }
     static get is() { return "gb-notification-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,9 +50,9 @@ export class GbNotificationPane {
     render() {
         const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);
         const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);
-        return (h("div", { key: 'b906db345f176e71daebd46584f4549d7d0085e7', class: "notification_pane_div" }, this.state === 'empty' && [
-            h("div", { key: 'b962c1e122e0ef71ec7496340f82a1b332cabc8e', class: `container` }, h("div", { key: '5eaf77030f574bbe7907ee2e8d0174a369ea5358', class: "frame" }, h("img", { key: '59a13642e9a454904ee79547efbd6c715cdd33ee', src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { key: '9f4d44c8b47c4ae190cbc679194dadc3f8ed5de0', class: "empty_state" }, h("div", { key: '16f254dd9ae880e127ca4245f2d7bc23a3ac006c', class: "content" }, h("img", { key: '0f20f5774e63909f1fd574c2d47245d7d246d477', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { key: '9289d143c0b2b9f267ff3230aa9b3db037c2201c', class: "text" }, h("slot", { key: '583cc95e3382c12ad94a74535a0d01eeca35ab70', name: "label" }), h("slot", { key: '618f0c1e0143e03cdfa1b8b8058b48a6fb105b45', name: "supporting_text" })))))),
-            h("div", { key: '29e7c7d72989c7e4bef1bb2bb98becd81e5de212', class: `button` }, h("gb-button", { key: '02ac448f57e9eba9c5146d5adc36aa3229ae80b6', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '9e598a7e66e99c3250b8fdeb03142a1ef6705397' }, "Mark all as read"))),
+        return (h("div", { key: '96c9099792a58fc1ebf3c8469670e4008959e514', class: "notification_pane_div" }, this.state === 'empty' && [
+            h("div", { key: 'a19df64cbafa867a32601e8554fec70ff61a2de5', class: `container` }, h("div", { key: '4bea30ee8f140d2b55909f5bf2a47ff4e46193b6', class: "frame" }, h("img", { key: '69f093712086033fa80d2745d5013a41f2c76bab', src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { key: 'f4489470fc163272194ad79c6ff7a8fe5083bd58', class: "empty_state" }, h("div", { key: '72c44cfec3e95409c5dd7c01e578a7ff8552358f', class: "content" }, h("img", { key: '380dca2225029169aa00b042732af07d5b164a6e', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { key: '55b2876ed1826d6f530ba229caf7d2ad25ed12b8', class: "text" }, h("slot", { key: '0f32999820fd03767d3f6bd78c9c363871b5d598', name: "label" }), h("slot", { key: '9c972a8ccd8705b50437329f7079aded6e087ee2', name: "supporting_text" })))))),
+            h("div", { key: 'a0bd443323355b0d854385155246473f19e2fccf', class: `button` }, h("gb-button", { key: '65741bd57c3665081ae808bf8dba29506213f501', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '34478aaeea2a1dfcccf6a4a7674ce9778518295f' }, "Mark all as read"))),
         ], this.state === 'notification_dropdown' && (h(Fragment, null, this.notifications.length > 0 ? (h("div", { class: "notification_dropdown" }, h("div", { class: `content_wrapper` }, this.notifications.map(notification => (h("gb-notification-content", { label: notification.label, time: notification.time, "supporting-text": notification.desc, icon: notification.icon })))), h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg", onClick: () => this.markAllAsRead() }, h("p", null, "Mark all as read")))) : ([
             h("div", { class: `container` }, h("div", { class: "frame" }, h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { class: "empty_state" }, h("div", { class: "content" }, h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { class: "text" }, h("slot", { name: "label" }), h("slot", { name: "supporting_text" })))))),
             h("div", { class: `button` }, h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", null, "Mark all as read"))),

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

@@ -77,10 +77,10 @@ export class GbPagination {
         this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
     }
     render() {
-        return (h("div", { key: '73adf0854243199f4ab15807c21f9a0600edc12a', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'ae451b89b9448e60f74612279292e3cf3fcfec0d', 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: '3b56db014a5ab53be0f6ec66c80e06e00e3839ce' }, "Previous")), h("div", { key: '76ec8f567d6e2710aec5c2ee7168a949b274e521', 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: '69ed72f648c5097350c495b777d609499c411519', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '49040e143c4e0ca25301deb1c2d9c8f62a966191', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '14611fa2c163be51f53e0d686f96d857cc5ed9cd', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '1a88b19885bd07546d2f4bb6e8df9d30d73e6eab', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '5386809ae2447e29a2da4eb11655c0c27fbfd583', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '7a0924a71b089c1b00f60944153c2dfdfde02f56', 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: '91f1b0f8791e0d4bbfc8bf681f820667d57df66d', shape: this.shape }, h("p", { key: '8f389e12c22c359133c9adc46af989822628c9ca', 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: 'fb6871be091ccc068baab3b3a9052b8e1ca85481', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '853124b7dee09052705d33a643863c769af16684', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: 'b19de1a22d118f608a44cef495c5b7199ec1464a', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '47f00d864d5905a4507db349a7e03fc94f0d12e8', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '0c1fd47a59aa5489845beb38aec46767026d601d', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'c863415ccb03ea527d3f89158dbdde6a99311ec6', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: '7fe9ad6d8a7a7fbc9f3ec710e5e830b5d77eff10', 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: '7f4093d8d6e4b255e52589fb9954064fc88fd344' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'f74ac482bd84a737f094a6398b581fc7985eb51c', 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: '922d95c06e82215d1d0222f8eab4041d9587a61f' }, "Previous")), h("div", { key: '32a1c18888ab10454ee2fe71c99098dfe6f7ec2d', 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: 'fb74ca5b882fc9df31d3c54a9babeafeb2f047d0', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: 'ca026b4660f4b7e7703a00ba459caebd6fcb47fd', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'e9fe6dfbc574f6db29efeb9ef9a6eb3f1e4e2aad', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: 'e936933a38184c3b05e1229967c9fee6894b4074', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'f06966a7d9d3c2c58f62a86ba4540bc76b4107fb', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'fd1373c83b280af9ed161ad3b539d8aab8f7872a', 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: '723a8700ec3d58e43ffb1eb683dd60c7a2f1eb23', shape: this.shape }, h("p", { key: '8f7da1196b10122ca7762622354a921b62622936', 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: 'bf2e59269f33b4ad8dca2c9c236c5bff622a1907', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '00518534ad34a428a6a1305271e2bc1725b85a22', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: 'e270f58e96eef0fa5d3fb623e90d5cddd76de6e7', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '70187684d0cab793856cb07b1aeb466eeb43782f', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'eaccbca063f3b054c4763b94e1102b713433a515', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'ad558d802cf743ec3b74894100e435a0467e2c61', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: 'a4ad742bb26955c417c6783236a58d78ec302bab', 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: '7b32f8ebab89e5baf3d065eba898b9eeb3e58f4c' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '97b40f98674881261b4b5afe6e2e8e7716065061', class: "pagination_entries" }, h("div", { key: '0e56427cc63147c8d0a4cc7fa1076a616a27b1fd', class: "entries_text" }, h("p", { key: '31c5d82831d122fc62bf3b21291d54c6bcd5d446', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '8be609020bea31ba44ddbffa0242ae8a26ade7a5', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'f76c0ea41a4d6b40b200483bd3f20c43f5cdd27d', 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: 'c56e8ee4c1262d7657c530d4bafccd3410ddbba8', 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: '9e8576c16b38001e4799018e56c0d6245634adc8', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '73abd0b2673282ef4125f0e08f39acf6fad0ed1e', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'a9afc6e3d11da07d139c9ad32c5290a2caaa9e38', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '11f06257fd3aae2d8e0d329c869ae45a40f3c722', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '777072156b9e3c34bc29f27a5e4a6b97d1bfb8a5', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'b0c8dfa429aba160d3d8d083104dee7b740a2917', 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: 'c0c71162ac1828b591404b9eca1294ae6624d517', shape: this.shape, state: "default" }, h("p", { key: '4d2fd538665e0ad83ee30ce96ae8bb56d7151225', 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: '76e56d1d345dc909bd967936a0cfe5a1ef1a1ef2', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '9c335960dbe4358837c46fa6f43269b87ff6f44e', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '0f8df9cc078ee2f1499bb17e10449ea5bf0a44db', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '49b00cd0249733b2ff53bd146d9bdb2bdb52ab0f', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '85d5ef1c57d00b156aa5673e8d0003bc339ddf69', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '61062b7f2dea72044ee2da330c845c273e468ded', slot: "page_number" }, this.internalTotalPages))))), h("div", { key: '3ace1782ea4691eaa170053a355776f55aaa95bb', class: "pagination_btns" }, h("gb-button", { key: '5a6c6a286e6a5d4d2d5f156638d5ab4ea158d2af', 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: 'c09f520d8d0843a74782cef303419873d946b755', 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: '42a83adad70da7445213a9903ecc3d45a8f0daa5', class: "pagination_entries" }, h("div", { key: 'b5dbf4af8b48c1257c53473dd4a7c17311fb70d1', class: "entries_text" }, h("p", { key: '897b89e2d94c8a806ac145470bfeef233a48ef9e', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '9e3e664167a2831e46c4fec054085b3c43297fbb', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'b745f6a21302aad0024c6174f1b9e62a5184082c', 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: 'f98850d05ddabf0d09e72edf25b4de2b1d19c7d6', class: "page_number_text" }, h("p", { key: 'af5906ae760961abafee10df262e4356c366c03b', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: '507ae612255b1cda263c585f86a066314aebe1ee', class: "pagination_btns" }, h("gb-button", { key: '9bf652b3c68800758e7984c28154fc4b81b4185a', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '7e1ab46d1fc929c57a7ae6c907c8d9a98ecaac40' }, "Previous")), h("gb-button", { key: 'dfc6523b87aefbd13bfb0b45061bf3f3e43e695c', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '037ecd2a773f7107e03141392ca557404c77e999' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '0d3db91881a2e1367378f6fb4e7e5d4b08832ba6', class: "pagination_btns" }, h("gb-button", { key: '982d6b37fec866568be0710daa51adcb0a0911c9', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '3232ed64e16887a35cc0f109af48c1e5e5752024' }, "Previous")), h("gb-button", { key: '8694c24000f72b772200b6b59f8828c82f997603', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '891117f73de5a3373e5ebee61bb8860d6617be45' }, "Next"))), h("div", { key: '0218f1681ad019cf447b3aeca2a677c2078a644b', class: "page_number_text" }, h("p", { key: '3da119a340d67ed292fb045a9eefa20c0cff735c', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: 'dcb140ecc71f4f598254fb1f074996a3134e4dc0', class: "pagination_entries" }, h("div", { key: '41665539b59b0a1ad09fba02b0d73e924e5c333a', class: "entries_text" }, h("p", { key: '4d10b9a9b4a839f2404255c44887af4e9525598a', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '52737b81e50731d91eff97564892f4eb9d67c67a', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '192ff92854c7525cfa5af53fa44787af5b5a10f1', 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: '01d05750bd4d7cca6dd979b0eb43124dcfd50316', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '46142f10f16560fbbf6acd49c9ec9c8cbf804857' }, "Previous")), h("div", { key: '7017bd4f66566d90ea296bee1b7e7a25ed3e8e91', class: "page_number_text" }, h("p", { key: '98a3e870caad43a9bb522b7051ed2e4f44dab35e', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'd41e1f06656e9adb11c0712a214910c58f35c9d0', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'abe559e2b901d3924efc4f0d5ed755374f433550' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '2a2acec8631921e67145f1c40d2584d980502737', class: "pagination_entries" }, h("div", { key: '1d1271d3633fe66fdfedcd5c21fd0a2e62f3cb50', class: "entries_text" }, h("p", { key: 'cc15a8d33015b0023002b2d4a283a5f7905c3b30', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '9cc3b87a6c461d9f4ae22668700ebbcfdc9f39ad', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '5e6c9f56331726d761c7aad0e0449652efc03706', 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: 'b08ddcda93d0bc2abf97bdd1eceb66fae4d8c4be', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '4c3b49c592932bb1da09b4c14059ea3532faee6e', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'b02b3ac437f6ef38c05e11fa306726f4ec6d86c8' }, "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: '39c21c9f2e416b9bb49eb2945c650b37dc963254', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '3dea646a2766b9d804465987ae4556e0742660c5' }, "1")), h("gb-pagination-button-group-base", { key: 'b4a02964547c384a6a819e640b342c5b82910924', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '671810036782f5ab999a93ca927bd94944eac101' }, "2")), h("gb-pagination-button-group-base", { key: '89a5e2ad3a8094c7c0d90c8b5538d34ff98224f9', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '7f1fb399c11fcc2abfdc59285ba9986221003c53' }, "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: '789133142be1ccf5aaf0864d8bb4d9d9af574ddb', icon: "false" }, h("p", { key: '4846b2c2d82a55c0da979d1166ed6121b99192f2' }, "...")), 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: '1a3d98befdeebfe442ca8e970a9b1e9e337ae4f7', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'ba69637f32f5e28066407bc9d606c2a3719045d0' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'd8bda9b505cdbd32c52779bfc243fc19f1ea7a7a', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '3d830d320de1ecb5739e031047cbc9cac06cb5da' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '73dd008532560df089ec1a0bf3b33d628e12fa75', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '00da0b6542d3ca8a015e3e4f439d85a74085432f' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'bf4d1b2c2c6f6b20e2381983eeb37ccf1020e97e', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'de9721b5a72f77550d3fd758fc10516d32f042f1' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'e34b5626b44966ff19d332a5aee8608ceff09570', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '92aeaa0a3d90467d03876586b03a0745b10d79bc', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'd99fd95c8d390b965893a814e3e105f7d01e955c' }, "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: 'cd9a09ddcc57550860d1bfc0eae2e0a21ede7ca2', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '588b78d83f93998d0f8144eedc338455d639979a' }, "1")), h("gb-pagination-button-group-base", { key: 'fd05ff64c61f48bedee966a5e79c4b1d173bec95', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '9ede22a79c157e2ca12881516df6d9aae624748e' }, "2")), h("gb-pagination-button-group-base", { key: '6fa311eb4dba100981ee135eed2cc7329ca61411', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'f0f1fc244da990c36dba3a58affbe96522d4984c' }, "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: '938b0103bed124639ee6f5741d4009a97336d3e5', icon: "false" }, h("p", { key: 'b3abeeec73aff764f9948ccf7c8a48bf8ad06e89' }, "...")), 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: 'a71e5073c312d6f420f7cecee47e0705c7e3d602', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '9d71e31bf6c06d22f38ef767975eec0b3fbdc833' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '9cc93270598d69ca462bccd10bd3a96788c4605d', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '9f81743a463f2ad5ab7a7d5899f7c854bd0b601d' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'd46d425c0b9fe3e11ff3d571dade4ac5c030d44c', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '0b8deda9e05e9f17dec63baddda96d26323c0ffd' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '9a7fc7b515c74daa154cccd88119bb36a0f57f2f', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'a4c91fe057311adbc226f0493fd18232be91b766' }, "Next"))), h("div", { key: 'be998667e8143152f06d9bc6b34b56403e017b40', class: "pagination_entries" }, h("div", { key: '51941acf249e6a9626a12f7bbf445deabb32db1c', class: "entries_text" }, h("p", { key: '7e89ddb30a777dd240f5c95356457d9c1e70807a', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '2109898977747961359e6f0c1f6514a981f7aba8', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '121d62aca81554fa146967519f6bb5e792684b08', 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: '7405682a46a36c1943d740f311dcf3e9d83beaf2', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '802f24c436cef028707639c1ff81a892be5161a3', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'ba4d0211bfcc638506d951e18dae8d480e01bbb1' }, "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: 'e476eb96ce54d7515e48afb6794547eb530faedf', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '23720e3add3e49bb21fd852645ad935529114865' }, "1")), h("gb-pagination-button-group-base", { key: 'b7fff03b8299263a5a358bd5b0c4c0018661ecc2', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'f63207f7c015f25a497d1abdb89e307133a8bfdd' }, "2")), h("gb-pagination-button-group-base", { key: '28c1b4a9caa85e4507f5f5447d8d870effcc2e01', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '7ea1fc562eb1a21b674fca0ef87b3c82732e671b' }, "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: 'bf21b23b16954f9731f08323b0f8e92ddd9c9539', icon: "false" }, h("p", { key: '71a5906a331dccec4a467d0e05f98e240138b2d5' }, "...")), 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: '4df6cdd4c979257cc4c19ca10cc93c8de2dd6ae5', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'f59cde1e9649242329520430317931765709fccd' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '2e12c138426dab8bb09f46cf0fa87291cdbbe100', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '0624a2ea7100c9a4c585da5f0e618957c894fe60' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'd369b71367959424834f558f8f351fa6d3342a59', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '66570ed240581b7fd232b39bff9cc29ded411512' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'ae1971bdd61d497bf50bf99efa6c9e4da317eeab', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '65663b72a4e1c839679c5988ebd4e82238895fb9' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: 'a3abc33ab735b8cdcbe621ac360fd868fa1c3e42', 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: '082ff49207587d9ff076666dc7ecce3d8c6bd644', class: "page_number_text" }, h("p", { key: '4fc3052c5377208208b04c47c33cb2f332575828', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '7e42446545569263c3a475ec25718f2a7816780b', 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: '4d7224ba1ce413befc122b00b0586f27ffbe307c', 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: '555948b47d3199076d67035b5b8dbccb085dec4c', class: "page_number_text" }, h("p", { key: '1051d93c1871d82e97f1ac572a25ab96dd82e8db', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '8400dae3ac65e265ee5310a29c2c1f76a7509105', 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: 'cc06431b220f08a2a983cc18d95485b49d8a9fb1', 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: 'cff83de31ef0c9ff3c96b2ab3829d6b22213eee2', class: "page_number_text" }, h("p", { key: 'd5ce177e10437c51b37409e0ddfd1cabe6711975', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'd1318b53b3bc686ccfc42d7b6ad2e5a0377f94ab', 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: '57147a34fdb20f3ead03ecdb2c71ef0cd32596ef', 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: 'd74324bff8f15d4ec3eec6ea7e281114da08914c', class: "page_number_text" }, h("p", { key: '3cb75d8aab7b8b7aac28f2763fbe5d85b418e36b', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'e9662412c0b74fb9149fed7a1dda4b8df3aefb91', 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: '697b5039e2978bfeafcf863e97d3cc9f65befdaa', 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: 'c5ab634698dc3e807f2c800b2040277bfdfb7a2e', class: "page_number_text" }, h("p", { key: '30ad5804997f4d7952600bf3594bf6fcfa58d5ab', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'e1eae657d5fc876f79e10ee8d17952a70e4b8e12', 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: '832a5a1cd661f685251d15f2b1fd62b7023328da', 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: 'cf88e8bd5dd52e5bfb6bc68ada61b895e839f7a9', class: "page_number_text" }, h("p", { key: '3ebecb86d6a17a37304a45ed5de094d461e6dbcc', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '94be26a3a31d8b86bdd5a36d4673f5e29956ef3c', 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: 'ab5bcc9fcdacb8359a7805a259fae0cfc016fff5', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '9c8f023aecd461a2f8463c6b269326d6d4842500', 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: '4e92220c99958a9566b12b5dec379d0d6d2d2b68', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '91e3710e04d7fa4845012492ccf2c1c9c273ef3e' }, "1")), h("gb-pagination-button-group-base", { key: 'a1694fb35cd4a2b42ff391c73e3ba04dcacfbbab', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '3adb41f46dd488462aeb03a07b6b2c583e742df6' }, "2")), h("gb-pagination-button-group-base", { key: '5c0cacc5a79c5670b2528cb5c593275f624e0b29', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '9919a14ac6722a1e60ed83391ff6ed83fade3082' }, "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: '16f1cd5a78af51992fe709c5c8ccf64081b25ba9', icon: "false" }, h("p", { key: '97b288bb915d9bf75fddd79153f85ae1c9ca2c20' }, "...")), 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: '04818ecd0101233249981b96b1c86bc7e94b131b', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'a721b0dc330afb58193aa8f766267a2eef50b0b2' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'b89869ef7b7224575d587a8cb0c3dea664c17942', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'efa2a70cbd96c89a4fc6bcb42380ea5b8d90ab91' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '127ad48f16284123f8e812d6748eb2a8685df7b2', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'dae43947189299828997bb466cf7fe86e8ce99f5' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'b7179082ae9301624db13068cbe0b1abdb3299a0', 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: '24ff5c2e4a8fdee4c153cf00f44dab7f60dda38d', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'cb9548905d30058d39414a0e8ae8a9c05c224341', 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: 'df8ed0c68fc8b98fb2f706f9044984d58e653806', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '62dd84b3096eb5e29c155332350fef0f9ab0cdf9' }, "1")), h("gb-pagination-button-group-base", { key: 'd8dcbfde0a6315a9feadb0cfe800806965089ced', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '90e0fa9b2cc11783e5427e7867c71354c7c04c3c' }, "2")), h("gb-pagination-button-group-base", { key: '1b09f0d8f7e760e8c159f1ca4e38986af7fc9146', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'af78c33ccce3a7f531d1079d92ccdb29f550d08a' }, "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: '09539133bb64162b80cb0091af29b7b7c26aa9d1', icon: "false" }, h("p", { key: '4dceef96e820a3c119a290b97ded6ff07de7d37e' }, "...")), 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: 'c92dd1ff22f524c9241b2e248f29b4c10df4f079', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '5a0f472dad2ed7e0be42cc2a8127979ddb432c0c' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '47633ad2ab748f02a966b5b8f621d5f2b8f89c07', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '749e3555268cab347fb0cfe1e48ae3d4a6c1cce1' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'fbd2ff3d4848b9f9f838ae3c16969db51333b4fa', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'e159f62cb24d235d9dc29b5a67c4ef2537d60229' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'd13b175565e64adeb9873ba34b725a5d23055832', 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: '61b58a84ec315fa3c33168fbf387e3197b9bc2da', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'fc41e05aefde96d041d1bed39e07cd13307822f2', 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: '5f0be51e840b7687f21b501cf1b50d2cb090cd5f', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'b0d96a46569bd880c53d509f0a60a9cb2f6218e0' }, "1")), h("gb-pagination-button-group-base", { key: 'c9c816952a71abc703bea820e751e095b1f56d73', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '67fed012f253af58e9d09e794b749ae9f99095ed' }, "2")), h("gb-pagination-button-group-base", { key: '95d2e0a4d63bd0bee5caee9b09a5387234958caf', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'fe5572915bb5b53a06c6df3d7bafd2efaf4a14d2' }, "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: '6d68609657017ae6b83afb01e3893d0d8ab5d4a4', icon: "false" }, h("p", { key: '6ab231f361f1ab5625864f1fbdda40bd4979a985' }, "...")), 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: 'fed8049827ff8ad21cec96833a9b612d99a98572', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '47e843b1524777ab415504b40e21f176c194f650' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'e1d4438990e77edc5c8040ac37d143ae79b8c3be', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'ba877601388aeac9a192e904d8e88b22db564eee' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '6106055f82dab6d81c0b87acc97df30e685ff31e', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'c477db431108a137d557a4e26e672446bc9c2ee6' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'da7c97d330587df05d5282c44623021d25418867', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
+        return (h("div", { key: '2e739946e28d0fd2ecedb0ec6519f263381d1e4d', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '0a8f1b031384d7610c47c986f6e0d2ad03e5cdd8', 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: '644c4b42772f1ac93e8f204ff437e3f35fb9e44f' }, "Previous")), h("div", { key: '95a046377ad59a13def1adb54f20b59f94fdd23a', 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: '0f8347f56ee08cc6e6258f281c1477be66b2d179', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: 'fa5a0ae518ad6823d50e4579329fd5fc0bf67f90', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '54f8e8f3dafa8ace7e7d58ca03607aacb264274a', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '854937cc0cb305964fd6c240ddff40628f81eeff', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'a1b6ee8d63fbd0168a12b2382570d922a696c8a1', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '082c63175ad873b91db0657d081e4df90358cd3e', 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: '3dd8092b6ff3c0760f8f1e10cffbbd71c0d80db7', shape: this.shape }, h("p", { key: '75a6d5945ac64b9e77c9bc0997c214a9a84d30b8', 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: '5b735077b74183de4885a1c8049c6fe88815495e', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '763ecf697830c67b79dae1f8fa07b3e22ce60918', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: 'b56067e320a8f22fdd528b1ad172356ad835e740', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '8f347df5c41f98055c91448cbfc16724955f3290', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '585d3515aad3de69b3c93d7488116d591c2ecc50', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '808f7fd8420749f432f39ffeb4f256260e0d8b69', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: 'b490f011b8b6fc5d5c9478b337bf59e7f4b1e63d', 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: 'ce0c458908cb85c6a74a72fd6ad4e690be389b38' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '3eab606106f40e3fbfbc2c822b90f217ad43ccbd', 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: '3e6770922c1b61b7962be197136cfd00c662de08' }, "Previous")), h("div", { key: '7e44f2c82cd94778bf78bf33bfa5324a760549e9', 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: '75a097e3b533838c1461eebcea2a4e8c6efbd7e8', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '8369e9123c626fdde36e2e69cb933ffc4343f843', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'd97bee5bdb7166d05ec5feddd9628b086d2042a4', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: 'aaa79de1202644437b1ea21b53944b991bffb100', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'dd38f79f30b6b06620857ef2982080c6a6469827', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '608a3b6c6e98d911f37b495b234e21f44319d3e9', 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: '3007cdef0b0cd8dcbd971331668121906681a1fa', shape: this.shape }, h("p", { key: '40a7ae999898248b2431205ca63e15c324095bd0', 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: '110dd8886fb9a30029b8f158f0ea2236307e0dba', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'c5b2fc0f047c13f0841617e2c3552ea814e5c280', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '40722f9a1a1a298c531967d854235675ba45cf7f', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '82dd18c33a42bc8d3bb6a3eb6d8d653277c0fe65', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'e36f72f731adb20a81f3370f38d5dfeb392b3526', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '07a2af68d5fbfd911490c9bf731cd834a22487b4', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: 'cdd2f16679da1443d9b1878514bec57eaed5c227', 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: '392e9578873b1c5aa9661ecf5b787849b91cc45e' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'f7cfe362121d10eff563423f107b862bf61bc9bf', class: "pagination_entries" }, h("div", { key: 'b2d1b9e06b229a33229c97b2c2163bae85ccda9f', class: "entries_text" }, h("p", { key: '0147a762176b34feb06fbb6e3d4485f8400b12b9', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '1d8e7314a836c5dca9fe0f9b049a165ca959185b', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'f5b18c61e2e645398867881b4d96f29d345e986c', 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: '66bb46ddbc8211163757aac4ec2385a84f000337', 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: 'e14a6c6ac585842897625d6beb126c1345bee083', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '08a69b6cdcdce9acdc381b032559bf5ff537ada2', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '877ea6a6e3dd2f97d0b5f4e7f10532933be4d336', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: 'd2f9d17a6fa8b9170272ce7fed20d27f306ad4da', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'a85c84445f5c7b16d37b00113bf038f2b956286f', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'c1c257d3934ab282276d7c386297fe1408f30830', 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: 'b115cad858085aaf039b03b6fedffea9b3ab79b5', shape: this.shape, state: "default" }, h("p", { key: '75568fed7739e67dd71e6510f2246bd991598aa1', 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: '12aee49166e40246ae9d3ca5a14094867b7a1242', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'ec8cc01d5e5429541e7bce0dc803f6c45eb3405b', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: 'fd4028798761bfde83a880c8ca01fd6719a9cfed', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: 'd43fadb3647f63bda1d2cf05ee2787302e851dec', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'ceed9ecf364dc6ccc8c1def5ac57de7aabd72b96', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '52456d700b9b84e2b448c02a6f25fefed6994885', slot: "page_number" }, this.internalTotalPages))))), h("div", { key: '4255ce30f334a6abb0b4c56ca77e68760fe6d2dd', class: "pagination_btns" }, h("gb-button", { key: 'dac609d493ca9edc7c7d42099dbfa10d51060e85', 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: '9b48071f8cd05ebfffcd217aab7764fb225a7fa2', 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: '8d0c157455dd1356b5b71b851a843803674f3566', class: "pagination_entries" }, h("div", { key: 'bca4e23ecd21fd15cf5a1c93bafe199246f696ac', class: "entries_text" }, h("p", { key: 'ba854a4c090ffba656b14204ea4843f4a6de0ec8', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'e2d796b15ec39b35288cbb371dc6b38197004a9b', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'f1fde13b69c02ec341063d79e4708f1e378b3857', 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: '5ea37f7289c87e9408060543100f21dc45e87be7', class: "page_number_text" }, h("p", { key: '91a5a55af744e903f7e083300e694c0b34401260', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: '9a43b1e86d98db0c3a3bcf589a6531557cb4827f', class: "pagination_btns" }, h("gb-button", { key: '4444d528b4b8e6c5ce421ee509747ac7e9d81719', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '83ed3a447e9ba6fa607942c8e6e58e734f45ff0a' }, "Previous")), h("gb-button", { key: '20d0967e38edc6fdac27eea3fff32b738186fd06', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '0fe1a3bc7c5f00e2d7b1e0cce0c0e9435c9604c5' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '19a51a221c3156ef5a514ecde17cb8012d123ad7', class: "pagination_btns" }, h("gb-button", { key: '9bc85e364b741e0a6aaa6dddf2b5887248ac745e', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'fc258e9f19e7cde135b03bc345053689bd724bf8' }, "Previous")), h("gb-button", { key: '04488f3a0e4715184df7a568d948b13ffe192a52', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'ac152503722b166db4e0bb978e5b85fff5fd978f' }, "Next"))), h("div", { key: 'ca91732b0365367faced24e8044f76b7e44e9032', class: "page_number_text" }, h("p", { key: '3af069678aaa1305634bed4d11ae49efe7e7f464', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: 'd8b5e5a7683ae837e67362f79673ed1d75974e5a', class: "pagination_entries" }, h("div", { key: '7c856dcd073b4b2f888616a166002bc8c9095a82', class: "entries_text" }, h("p", { key: '9870da50315883ba18c4d6c2c88d7305aa4aab35', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '6919c654dc5e2f9a2ae0f1d7d6506d2a53e872c2', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '7b9301a1e0d52f9fea3180968f034a4aeda03269', 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: 'c78e30246f784150122007d4cebb3f912005b4a6', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'c6f904f9d14afbeaac46a1012fff4faaaa381e51' }, "Previous")), h("div", { key: '919c6fddc8db965693003015817a3808ccf62722', class: "page_number_text" }, h("p", { key: 'e0ed08f2e091ef46bb835ef6c494931c297992e6', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '9d034b79ac741097b83944f90755b4fcf6c4cd36', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '53f762142d187265dffdbac42b50559e1bc07c88' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '17719692a635522df0c29ad1635aa5d6818d50d3', class: "pagination_entries" }, h("div", { key: '93553b2b7165009329e4f09b5ea98a1df7d88193', class: "entries_text" }, h("p", { key: 'a4e24ecba5016d3d3f4aca95fd5b55d0191804e1', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '157f7b7af5f50080b199dead714801a4c7930d3f', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'b19629a339c26d6afb6ade7415e839b71faa7797', 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: 'e1c5ac96ffac6c684a4031c9538dcf0ea9022a8c', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '53214666f9c4fb71ebf1c877379542be586403f3', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'aecbbdcc99bb1518765c473049bd43c914200389' }, "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: '467654367f74da49ef425edd0ee48d27e861a321', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '7b7612d6f308b7602dbe6cd25e3d8455811582ec' }, "1")), h("gb-pagination-button-group-base", { key: '1a3e61a445b74ecea91502074bd4895f9b41fd23', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '862f159aa2bfeddcb5d4d455e902faaede98291d' }, "2")), h("gb-pagination-button-group-base", { key: '4fa3f62e0b253c18475dd5bd620ecab92805f46b', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '39dfbd609a6eec840eb474ed934b2cbf41b4bac1' }, "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: 'c905dcf00822a0bd6e0f144f7e52624c205eec1d', icon: "false" }, h("p", { key: 'ef4a07397ac700256eae98b18fa5b0963ff28ce2' }, "...")), 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: 'ed50171bd7cf55bae3cb24e1506e616ca4fae929', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '8801b172ebfc8eae37bea1b33bfabf32d21a3aa6' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '830c51f45df1511885229dc51fdda016ccd020cb', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '167939bca1a442b1542c86bea7528b5fc84fe887' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'afb0ccccdd5e888c38a5ed5910f304af824925d7', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'd6223f4853abba0c85caa6e8315e1e8fc37bd6a1' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'bc800d549ef591fc8141b6785788fb665b1c59c2', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '15b42060cbe5b1a6474fbb71b265a68a4866e804' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '8a2b29e3cf8f7dc8dc531dbf80baf71c8ae4e416', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '4ce7e24cba635f3f341be9d66ccee1cc3c68c145', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'ed5567a3258203d5bac0901f8f621089bdf548f9' }, "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: '12d42b949cce6deea840e3e9a8f326a904ad7936', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '3fc87ac81e80ee01dbfc3224478061d3131e99f0' }, "1")), h("gb-pagination-button-group-base", { key: 'a3273df7f4c089fb19d3b454637f590d47328f89', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '53f03d42797f9f35593ce59c9257c2646cd4572e' }, "2")), h("gb-pagination-button-group-base", { key: '833d0cbf671295b99d8235d6e464fb99973dcd73', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '4a8f97c8effa07824163dd1c90652fced1799634' }, "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: 'bd4b6d4631180aafc3a2e9533386920575115a7d', icon: "false" }, h("p", { key: '788acafb24e4222d86e824e8565c5fd9ae64902f' }, "...")), 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: '84fe2d4935e45ebacc523e8d81c5d355eb1da826', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '79d55c5fc2e26caafbdba9c635126d9e7ba26595' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '5491cb4e21344296b41dd06e734a5e5efe917995', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '412614211b45e9f64d030d52f1c0c461064a78c7' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'cbc2cbdfe9ab14f452631d120335a93c800155cf', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '6c9bbe39bcb9c47c8cf2ea6d0c747a1d2dec9195' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '4fd9d45e8518011b03573c2c880a90d7fe652f3a', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '2299ef1eb5a21349cb3fd472034fce14105f53ab' }, "Next"))), h("div", { key: 'dc1a64b9f02c6e82d7ab328fec42ef4562d635f6', class: "pagination_entries" }, h("div", { key: '13832fb8fa88f5ded2e82d4e39df9350c5a3b34e', class: "entries_text" }, h("p", { key: '7d2510939eb80a18e9d6f5f4efdd36f7b1e0bccf', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '861a2d6ea835bc3875facdf80c28a4ea19932e75', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'c9478543efb044aa8cd2c5ab2bb1894d4620eea1', 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: 'c615e174b3d0edbf67ce350db442dbd47f9d5938', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'd37ecc8e1edeac1dc12240e0476ac00909337f83', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'd46c6c5dae31da5a98984d46eae61b1c4bbba4f2' }, "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: 'c6744db6cbaea9a31e89362a227e7de878b9709f', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '56a75bc952b0ce65462be99be1fdd89465b4d692' }, "1")), h("gb-pagination-button-group-base", { key: 'b90988941ff76ad911cdf641aeb26920329bea9e', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '46417b3867e169e492de9a1a2e5669eb587e8ed0' }, "2")), h("gb-pagination-button-group-base", { key: '0b00a7ab35033874b8467d1ac9281c29dd6afa35', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '713d7f6ae6222a00115c918ac871dd02c4b9069a' }, "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: '3b5fb3dd51c70e52102c50f0260bfc288b2d3d61', icon: "false" }, h("p", { key: '786d59b8b0f9eb0717019d72110d6ee97e3c7fa7' }, "...")), 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: '61c5832c974a8157e65417368e349aea8961cd34', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '056df889266ee408c7425514ad0a425da786deb5' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'd95117ef4f4c2883e2481d1cccfd45b1bd63ef6d', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'a99d96349bbb68b3728be7da4461caf28585d65b' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '25c886e19b593147c8d2769370ef874166989cb9', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '588cc467178dd7f7443337b8c1e6b29eae19d55a' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'eae9b224f6b0c072069a9ea01df37969660cf9d9', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '07ba9ed5380a980b301d14dbb0ee2c3772e39f97' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '1afc013ae7d32e649242a0719c8a6bb1a1cfd130', 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: 'cb35a663e2b277034a1501fbbeb9f2ef15c85a94', class: "page_number_text" }, h("p", { key: '1a2590590f7f41c51aecc33b948c403b8952b3b3', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'ca09d787ae0e9c0610a1fb84ce048bc7069ecba3', 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: '21f170bdf9fb55212f7b91ec68333458aaed943b', 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: 'bb5d760baeea266d069d0b2252661459a87545d5', class: "page_number_text" }, h("p", { key: 'b2f87221e67ce4cdfa4d830dd8d351f115fe47fa', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'f03a420593ad3e1130f003860d0c8e53d89094c0', 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: '782518ef30a8ecb80b5daf4861fc0badce032364', 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: '06d9781935f15609d350042659d99e7442d82086', class: "page_number_text" }, h("p", { key: 'f64777539e21d79147bec02d8e6ca4dfa492f7f0', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '8fb0d718411f43b1eba9541939a0d4e83642d767', 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: 'b9a88ec0998e100e55e824044e600f52759bc794', 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: 'f3f8d51c2cc553819d4a89f7307913106b151d41', class: "page_number_text" }, h("p", { key: 'a7b0e902710a324ed6d84001a5367fc40f49ca60', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '7cf3612bf240ebf786f44f6b3a8786b6995c9015', 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: 'd65b9a26438f8a8355713981ddc5f2e3f36e93b3', 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: 'fd44ea53758be794de34865f88ecc5d821b51014', class: "page_number_text" }, h("p", { key: '1adcb44b2fe2052b216e50e308517afb6f80076e', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '5937edd805b68e33e46911cb7d69c7ed812c03e8', 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: '2cf02b121ea8fa12e55897ea5c4b36c1e64310a9', 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: '5d45fc67851ce2ab7c7433fb54b7c1c282ccae6f', class: "page_number_text" }, h("p", { key: '4b4a00d72df7e1ae858bfb56c45639a44f9cb0dd', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'ec2595d5403413de87fc2c962406e01ea636b352', 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: 'b0e07820abf075d2f4be6a359352be433461a02d', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '8393a57bffbc9883ba3085f7721054333cf838a7', 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: '9d0b9f760b439c27d3c63266fe1eba6ea286d629', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '9cf710e1281b106d835f83dc2bf913251067f00e' }, "1")), h("gb-pagination-button-group-base", { key: '909895906ff078ae436cbdcb9a6a08017c85772f', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'b8ea4848723e01fea2df134d9d6835be02ab173f' }, "2")), h("gb-pagination-button-group-base", { key: 'ecf8007292127ce4b455f46f23559313525784fd', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'c039c41cfde598f6f3176eb762cff3ffca3bb423' }, "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: 'c8f358ed6efc0ca22b8089c58fe5c09b9e256e04', icon: "false" }, h("p", { key: '714200da9cd0059d4b9c2f1ec76b68af65c39f98' }, "...")), 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: '7377ad90e52a06b517367a033d89b57426b9ce32', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '82d857c746f8f50d60573c1b53dfaea1abf3e60c' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '78e11e826c1999bbd82ea29a869035387c726d3d', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '03e57f656e9462236a0e0357a6c1336c1bb025dd' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'b98b858a8bc0ce51f627f13ca328537c57049b9c', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'a64d560bfb62860bd203757df71dc4031d5ebbaa' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '2973655c50c3f9ce79fde39954ae81f25445ab2d', 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: '6199388212abf0f1ebc6f15a59b4b947fa4cc9b7', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '6b4a0904ae6f7a9e3ffd483f5baff48f193984f8', 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: '0f704e58775153805cfd5027f3fbe99e7a96a601', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '10f1e38e07442878cbff96ddb554b0bb1934d570' }, "1")), h("gb-pagination-button-group-base", { key: '7db5d4735f5144981d81fced0119a2eb08c4b693', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'ca19e077b54ed1d6effd65a0acea0be593ef3484' }, "2")), h("gb-pagination-button-group-base", { key: '9f202eb8923e933ed237419ae591c49869b9de25', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'c4e82f56ad68bbfee637494c2c183f576924304d' }, "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: '50559248ea5780c74825dcc432fd9796082422c7', icon: "false" }, h("p", { key: 'c2197bbab385a1071e9dc48cd96c94f9dd6d4b06' }, "...")), 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: 'c5a44392a42c6784806cd5c584939ee06b7b1bff', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'd600201b6509dbe92aac20abe8d9934ab746ad96' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'f9dd07611e2033e7f88925a4469b12b8fb62e77f', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '0a84605026fb84cbdb98b72722ae9e32627c0de4' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '4aedd1bc99dc0f8f080c96fc8c1c1680e8ec61a2', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '76b0ca70ab2e6999ac7a49b2cc5da985897b3782' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'd26c3b19834cfc8a781543253102e3a4036d00fc', 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: '68619d5ddf6ce9780f0dcbc02857009d96d55c4b', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '9531f9fa7f617e2b078c4f5d839badd0c1aa0ee4', 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: '4f3819b980b008d634b5c53575f61715076de837', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '706cb41d793b4281ce0c5dfb69afac8841ab3b88' }, "1")), h("gb-pagination-button-group-base", { key: 'ce15876479b71962e3d5d3a103240a31edf68246', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '13a5b3c05e189f76a48d047b5a67fb2b223f3f7f' }, "2")), h("gb-pagination-button-group-base", { key: '4684d561de36f9b198be3aaec77c4f798a766e2b', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'd23abd59f662d74faf3c50cc3f7f3b91887bc65b' }, "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: 'd7d35b16d9bb308c45c96d682913a1544ee5db27', icon: "false" }, h("p", { key: '964d40a23529d5aa4891e26f0ea117cd784114d3' }, "...")), 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: 'd3b7d1f1f8e98f3ede2b3ac2aa6ead3076622aa5', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '92c7620ccd2997a94355009849cae6a8f4a35ea7' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'acbbd0c2390a5f64bb3fff439ae5616e6f960447', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '2e90723aacd59cfdc74b46f460d8ded61ccaf911' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'f93997d3db5eadd16af2c8abb53b5e97721ec218', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '8b9a1de825c773abef6df36676f4b351159d2e3d' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '4397802255af151918d2807ffb2a467f7330c119', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
     }
     static get is() { return "gb-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class GbPaginationButtonGroupBase {
         this.leadingIconSvg = svg;
     }
     render() {
-        return (h("div", { key: 'e4531b684f0be6b13e1330cb22931c2192623a73', class: `button_base_div ${this.icon} ${this.state}` }, this.icon === 'false' && h("slot", { key: '7313ec203002556f442c217af3755d99254dc7ac' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: 'e17e6f215d471e9a6a8af33d35f22a78535fedb7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '03b6ee8c784ce5b77fc2495e6c074ced7d49e3d8', d: "M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334", stroke: "#4B5565", "stroke-width": "1.67", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("slot", { key: 'd45b788b1ff6506d05a13a0550a2dbecd743ddc0' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: '9d2d82519f06f77625ebf9f507cf9c3cd8110a2b' }), h("svg", { key: 'e5e84ed1789e1eeb62f4844527933ec7eb4384ab', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '7a9398a68691c9ac25e75d164976609e9854712d', d: "M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.icon === 'only' && (h(Fragment, null, h("div", { key: 'd3f663c6644723b578521f40f82837213ef82dd6', class: `icon`, innerHTML: this.leadingIconSvg })))));
+        return (h("div", { key: 'cc657b95146a6e18a4de5bedb5a819c5be292561', class: `button_base_div ${this.icon} ${this.state}` }, this.icon === 'false' && h("slot", { key: '44590b00be0dfc96bd75dda9f6dfa501d01d3107' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: 'a68f3a199a2cae9405ff7f17abee44111dd8ff44', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '0630ec1cc12eac59b694e1d5a6fedd8aa716756f', d: "M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334", stroke: "#4B5565", "stroke-width": "1.67", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("slot", { key: 'f25e4abe7ea0382620320f0460c6d597834c68f9' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: 'e54885aa4ea5d226afd088b5180fc71c622e2c99' }), h("svg", { key: 'dc701e9af1a13c4a1deb031934be1582bbb80ca9', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '1465719a1c335cd30c446dc700d031768aca0dd5', d: "M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.icon === 'only' && (h(Fragment, null, h("div", { key: 'fe50a1661ef24f5a2d792ae802b07c8ecc1f3c13', class: `icon`, innerHTML: this.leadingIconSvg })))));
     }
     static get is() { return "gb-pagination-button-group-base"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class GbPaginationDotGroup {
         this.framed = false;
     }
     render() {
-        return (h("div", { key: 'bbd9fdb52e882559b40ada6ef1236757f2a3b559', class: "dot_group_div" }, h("div", { key: '60e316c77ba24b2b2ef2e85dad2458f1e7b59c28' })));
+        return (h("div", { key: '2bded15a539fd857f461420096aaa28cc4843304', class: "dot_group_div" }, h("div", { key: 'c5adae6efa02cbe51e6b465016fa3f92da38a298' })));
     }
     static get is() { return "gb-pagination-dot-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class GbPaginationDotIndicator {
         this.current = false;
     }
     render() {
-        return (h("div", { key: '853dc1f65f3e437ceeca915b3ce4ab3dfbec4408', class: `dot_indicator_div 
+        return (h("div", { key: '9e79fa1ade07032f6c0ce9fbc06e52acfb80784b', class: `dot_indicator_div 
       ${this.type} ${this.current ? 'current' : ''} 
       ${this.size}` }));
     }

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

@@ -13,7 +13,7 @@ export class GbPaginationNumberBase {
         }
     }
     render() {
-        return (h("div", { key: '51dfa67b0c5d9cc5ce73c30f146c8237853bff60', class: `page_number_base ${this.shape} ${this.state}` }, h("slot", { key: '771ee905973090e8b4393e44c1923c81c59a7040', name: "page_number" })));
+        return (h("div", { key: '828303cf21825259f869deff4293f03cfb0db8da', class: `page_number_base ${this.shape} ${this.state}` }, h("slot", { key: '274f5e8a50884dd6c696aa2fa357740308399ecc', name: "page_number" })));
     }
     static get is() { return "gb-pagination-number-base"; }
     static get encapsulation() { return "shadow"; }