globuswebcomponents 1.0.1 → 1.0.2

package/dist/components/gb-avatar-dropdown.js.map

@@ -1 +1 @@
-{"file":"gb-avatar-dropdown.js","mappings":"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","names":["GbAvatarDropdown"],"sources":["src/components/gb-avatar-dropdown/gb-avatar-dropdown.css?tag=gb-avatar-dropdown&encapsulation=shadow","src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.simple-dropdown {\r\n    display: inline-flex;\r\n    padding: 0px;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 0px;\r\n    border-radius: var(--rounded-sm);\r\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-surface, #FFFFFF);\r\n    box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.profile {\r\n    display: flex;\r\n    width: 15rem;\r\n    padding: var(--spacing-3);\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-none);\r\n    border-radius: var(--rounded-none);\r\n    border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.complex-dropdown {\r\n    display: inline-flex;\r\n    padding: 0px;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 0px;\r\n    border-radius: var(--rounded-sm);\r\n    border: 1px solid #E3E8EF;\r\n    background: #FFFFFF;\r\n    box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.menu-items {\r\n    display: flex;\r\n    width: 96.5%;\r\n    padding: var(--spacing-none);\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-none);\r\n}\r\n\r\n.list {\r\n    padding: var(--spacing-1) var(--spacing-none);\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two,\r\n.list-group-three{\r\n    width: 100%;\r\n    padding: var(--spacing-1) var(--spacing-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two{\r\n    border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.one,\r\n.two,\r\n.three{\r\n    width: 96.5%;\r\n}\r\n\r\n.label_group {\r\n    display: flex;\r\n    padding: 0px;\r\n    align-items: center;\r\n    gap: 12px;\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-none);\r\n}","import {Component, Element, Event, EventEmitter, Prop, h} from '@stencil/core';\r\nimport { AvatarColorTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-avatar-dropdown',\r\n  styleUrl: 'gb-avatar-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n  @Prop() type: 'simple' | 'complex';\r\n  @Prop() text: boolean = false;\r\n  @Prop() showProfile: boolean;\r\n  @Prop() showDarkTheme: boolean;\r\n  @Prop() showLogOut: boolean;\r\n  @Prop() listGroupOne: boolean;\r\n  @Prop() listGroupTwo: boolean;\r\n  @Prop() listGroupThree: boolean;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() itemClicked: EventEmitter<string>;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onItemClicked(item: string) {\r\n    this.itemClicked.emit(item);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameInitials = this.el.querySelector('[slot=\"name\"');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add('text-md-semi-bold');\r\n      slottedInitials.classList.add(this.applyColorToInitials() || 'gray');\r\n    }\r\n\r\n    if(nameInitials) {\r\n      nameInitials.classList.add('text-sm-semi-bold');\r\n    }\r\n\r\n    if(supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    if (this.type === 'simple') {\r\n      return (\r\n        <div class=\"simple-dropdown\">\r\n          <div class=\"profile\">\r\n            <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          <div class=\"menu-items\">\r\n            <div class=\"list\">\r\n              {this.showProfile && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K + P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n              {this.showDarkTheme && <gb-dropdown-items-with-shortcut icon iconSrc=\"dark_theme\" label=\"Dark Theme\" shortcut shortcutIcon=\"T\" onClick={() => this.onItemClicked('dark_theme')}></gb-dropdown-items-with-shortcut>}\r\n              {this.showLogOut && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (this.type === 'complex') {\r\n      return (\r\n        <div class=\"complex-dropdown\">\r\n          <div class=\"profile\">\r\n            <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          {this.listGroupOne && (\r\n            <div class=\"list-group-one\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K+P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/dark_theme.svg\"\r\n                  label=\"Dark Theme\"\r\n                  shortcut\r\n                  shortcutIcon=\"T\"\r\n                  onClick={() => this.onItemClicked('dark_theme')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.listGroupTwo && (\r\n            <div class=\"list-group-two\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/configuration_02.svg\"\r\n                  label=\"Configuration\"\r\n                  shortcut\r\n                  shortcutIcon=\"S\"\r\n                  onClick={() => this.onItemClicked('configuration')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_group.svg\"\r\n                  label=\"Team\"\r\n                  shortcut\r\n                  shortcutIcon=\"K->T\"\r\n                  onClick={() => this.onItemClicked('team')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"three\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_add.svg\"\r\n                  label=\"Invite Members\"\r\n                  shortcut\r\n                  shortcutIcon=\"I\"\r\n                  onClick={() => this.onItemClicked('invite_members')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.listGroupThree && (\r\n            <div class=\"list-group-three\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n}"],"version":3}
+{"file":"gb-avatar-dropdown.js","mappings":"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","names":["GbAvatarDropdown"],"sources":["src/components/gb-avatar-dropdown/gb-avatar-dropdown.css?tag=gb-avatar-dropdown&encapsulation=shadow","src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.simple-dropdown {\r\n    display: inline-flex;\r\n    padding: 0px;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 0px;\r\n    border-radius: var(--rounded-sm);\r\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-surface, #FFFFFF);\r\n    box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.profile {\r\n    display: flex;\r\n    width: 15rem;\r\n    padding: var(--spacing-3);\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-none);\r\n    border-radius: var(--rounded-none);\r\n    border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.complex-dropdown {\r\n    display: inline-flex;\r\n    padding: 0px;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 0px;\r\n    border-radius: var(--rounded-sm);\r\n    border: 1px solid #E3E8EF;\r\n    background: #FFFFFF;\r\n    box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.menu-items {\r\n    display: flex;\r\n    width: 96.5%;\r\n    padding: var(--spacing-none);\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-none);\r\n}\r\n\r\n.list {\r\n    padding: var(--spacing-1) var(--spacing-none);\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two,\r\n.list-group-three{\r\n    width: 100%;\r\n    padding: var(--spacing-1) var(--spacing-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two{\r\n    border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.one,\r\n.two,\r\n.three{\r\n    width: 96.5%;\r\n}\r\n\r\n.label_group {\r\n    display: flex;\r\n    padding: 0px;\r\n    align-items: center;\r\n    gap: 12px;\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-none);\r\n}","import {Component, Element, Event, EventEmitter, Prop, h} from '@stencil/core';\r\nimport { AvatarColorTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-avatar-dropdown',\r\n  styleUrl: 'gb-avatar-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n  @Prop() type: 'simple' | 'complex';\r\n  @Prop() text: boolean = false;\r\n  @Prop() showProfile: boolean;\r\n  @Prop() showDarkTheme: boolean;\r\n  @Prop() showLogOut: boolean;\r\n  @Prop() listGroupOne: boolean;\r\n  @Prop() listGroupTwo: boolean;\r\n  @Prop() listGroupThree: boolean;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() itemClicked: EventEmitter<string>;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onItemClicked(item: string) {\r\n    this.itemClicked.emit(item);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameInitials = this.el.querySelector('[slot=\"name\"');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add('text-md-semi-bold');\r\n      slottedInitials.classList.add(this.applyColorToInitials() || 'gray');\r\n    }\r\n\r\n    if(nameInitials) {\r\n      nameInitials.classList.add('text-sm-semi-bold');\r\n    }\r\n\r\n    if(supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    if (this.type === 'simple') {\r\n      return (\r\n        <div class=\"simple-dropdown\">\r\n          <div class=\"profile\">\r\n            <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          <div class=\"menu-items\">\r\n            <div class=\"list\">\r\n              {this.showProfile && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K + P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n              {this.showDarkTheme && (\r\n                <gb-dropdown-items-with-shortcut \r\n                icon \r\n                iconSrc=\"assets/dark_theme.svg\" \r\n                label=\"Dark Theme\" \r\n                shortcut \r\n                shortcutIcon=\"T\" \r\n                onClick={() => this.onItemClicked('dark_theme')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n              {this.showLogOut && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (this.type === 'complex') {\r\n      return (\r\n        <div class=\"complex-dropdown\">\r\n          <div class=\"profile\">\r\n            <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          {this.listGroupOne && (\r\n            <div class=\"list-group-one\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K+P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/dark_theme.svg\"\r\n                  label=\"Dark Theme\"\r\n                  shortcut\r\n                  shortcutIcon=\"T\"\r\n                  onClick={() => this.onItemClicked('dark_theme')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.listGroupTwo && (\r\n            <div class=\"list-group-two\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/configuration_02.svg\"\r\n                  label=\"Configuration\"\r\n                  shortcut\r\n                  shortcutIcon=\"S\"\r\n                  onClick={() => this.onItemClicked('configuration')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_group.svg\"\r\n                  label=\"Team\"\r\n                  shortcut\r\n                  shortcutIcon=\"K->T\"\r\n                  onClick={() => this.onItemClicked('team')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"three\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_add.svg\"\r\n                  label=\"Invite Members\"\r\n                  shortcut\r\n                  shortcutIcon=\"I\"\r\n                  onClick={() => this.onItemClicked('invite_members')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.listGroupThree && (\r\n            <div class=\"list-group-three\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n}"],"version":3}

package/dist/components/gb-avatar-group.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-ad960c29.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-ad960c29.js';
 import { S as StateEnum, B as BorderWeights } from './p-47052b60.js';
 import { d as defineCustomElement$6 } from './p-24625c69.js';
 import { d as defineCustomElement$5 } from './p-2e73f436.js';
@@ -14,6 +14,7 @@ const GbAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class GbAvatarGroup ext
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.addMoreButtonClicked = createEvent(this, "addMoreButtonClicked", 7);
         this.size = undefined;
         this.moreUsers = undefined;
         this.addMoreButton = undefined;
@@ -21,6 +22,9 @@ const GbAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class GbAvatarGroup ext
         this.state = StateEnum.Default;
         this.images = undefined;
     }
+    onAddMoreButtonClicked() {
+        this.addMoreButtonClicked.emit();
+    }
     getNumberSize() {
         switch (this.size) {
             case 'xs':
@@ -49,7 +53,7 @@ const GbAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class GbAvatarGroup ext
     }
     render() {
         // console.log(this.images);
-        return (h("div", { key: 'ee593d3bebaeb37d49c5cd64641b83026625a088', class: `avatar_group ${this.size}` }, this.images.map((image, index) => (h("div", { class: `avatar ${this.size}`, key: index }, h("gb-avatar", { size: this.size, weight: this.setWeight() }, h("img", { src: image, alt: "", slot: "image" }))))), this.moreUsers && (h("div", { key: '16b5c5ce75014eb2d6d7e5323041f5e7b0fc7ea8', class: `avatar ${this.size}` }, h("gb-avatar", { key: '9c4ac42f9d31689b56c9ab668ee918c18eda9ee8', text: this.text, size: this.size, weight: this.setWeight() }, h("slot", { key: 'b4e704261dc4ee7c57eb3f9fe8ac313b1e732638', name: "initials", slot: "initials" })))), this.addMoreButton && h("gb-avatar-add-button", { key: 'ab248cd5ed61792647273d034c9c6bcc0a3e3d29', state: this.state, size: this.size })));
+        return (h("div", { key: '42fb1252ae416fa17682e98b0ff0a4ff3c094520', class: `avatar_group ${this.size}` }, this.images.map((image, index) => (h("div", { class: `avatar ${this.size}`, key: index }, h("gb-avatar", { size: this.size, weight: this.setWeight(), text: false }, h("img", { src: image, alt: "", slot: "image" }))))), this.moreUsers && (h("div", { key: 'f85d7c181267d05ea0f9a6c41a59350436a1eb45', class: `avatar ${this.size}` }, h("gb-avatar", { key: '43873f9da4c7ed6852d90e303a643bd647a7fb4f', text: this.text, size: this.size, weight: this.setWeight() }, h("slot", { key: 'aad079046ab9489a13b89522303b2d4a69c5fea9', name: "initials", slot: "initials" })))), this.addMoreButton && h("gb-avatar-add-button", { key: '5c905f5971f1aa462917b4dc9492d34e926ad908', state: this.state, size: this.size, onClick: () => this.onAddMoreButtonClicked() })));
     }
     get el() { return this; }
     static get style() { return GbAvatarGroupStyle0; }

package/dist/components/gb-avatar-group.js.map

@@ -1 +1 @@
-{"file":"gb-avatar-group.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,mmrEAAmmrE,CAAC;AAC7nrE,4BAAe,gBAAgB;;MCOlBA,eAAa;;;;;;;;oBAIA,IAAI;qBACD,SAAS,CAAC,OAAO;;;IAI5C,aAAa;QACX,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;SAC9B;KACF;IAED,SAAS;QACP,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,aAAa,CAAC,OAAO,CAAC;YAC/B,KAAK,IAAI;gBACP,OAAO,aAAa,CAAC,KAAK,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,aAAa,CAAC,KAAK,CAAC;SAC9B;KACF;IAED,gBAAgB;QACd,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAEjD,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;SACnD;KACF;IAED,MAAM;;QAEJ,QACE,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE,IACpC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC5B,WAAK,KAAK,EAAE,UAAU,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,KAAK,IAC3C,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,IAClD,WAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,OAAO,GAAG,CAC7B,CACR,CACP,CAAC,EACD,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,IAAI,EAAE,IAC/B,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,IACnE,6DAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CACnC,CACR,CACP,EACA,IAAI,CAAC,aAAa,IAAI,6EAAsB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAyB,CACpG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbAvatarGroup"],"sources":["src/components/gb-avatar-group/gb-avatar-group.css?tag=gb-avatar-group&encapsulation=shadow","src/components/gb-avatar-group/gb-avatar-group.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.avatar_group{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: fit-content;\r\n}\r\n\r\n.avatar_group.xs{\r\n    width: 18.5rem;\r\n}\r\n\r\n.avatar_group.sm{\r\n    width: 21rem;\r\n}\r\n\r\n.avatar_group.md{\r\n    width: 22rem;\r\n}\r\n\r\n.avatar{\r\n    width: fit-content;\r\n    border-radius: var(--rounded-full);\r\n    position: relative;\r\n}\r\n\r\n.avatar.xs{\r\n    padding: 1.55px;\r\n    background-color: var(--color-border-inverse, #FFFFFF);\r\n}\r\n\r\n.avatar.sm{\r\n    padding: 1px;\r\n    background-color: var(--color-border-inverse, #FFFFFF);\r\n}\r\n\r\n.avatar.md{\r\n    padding: 1.5px;\r\n    background-color: var(--color-border-inverse, #FFFFFF);\r\n}\r\n\r\n.avatar.xs:not(:first-child){\r\n    margin-left: -0.5rem;\r\n}\r\n\r\n.avatar.sm:not(:first-child), .avatar.md:not(:first-child){\r\n    margin-left: -1.01rem;\r\n}\r\n\r\n::slotted(p){\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.image{\r\n    width: 100%;\r\n    height: 100%;\r\n    background-size: cover;\r\n    border-radius: var(--rounded-full);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-avatar-group',\r\n  styleUrl: 'gb-avatar-group.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarGroup {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() moreUsers: boolean;\r\n  @Prop() addMoreButton: boolean;\r\n  @Prop() text: boolean = true;\r\n  @Prop() state: StateEnum = StateEnum.Default;\r\n  @Prop() images: string[];\r\n  @Element() el: HTMLElement;\r\n\r\n  getNumberSize() {\r\n    switch (this.size) {\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  setWeight() {\r\n    switch (this.size) {\r\n      case 'md':\r\n        return BorderWeights.Regular;\r\n      case 'sm':\r\n        return BorderWeights.Light;\r\n      case 'xs':\r\n        return BorderWeights.Light;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedNumber = this.el.querySelector('p');\r\n\r\n    if (slottedNumber) {\r\n      slottedNumber.classList.add(this.getNumberSize());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    // console.log(this.images);\r\n    return (\r\n      <div class={`avatar_group ${this.size}`}>\r\n        {this.images.map((image, index) => (\r\n          <div class={`avatar ${this.size}`} key={index}>\r\n            <gb-avatar size={this.size} weight={this.setWeight()}>\r\n              <img src={image} alt=\"\" slot=\"image\" />\r\n            </gb-avatar>\r\n          </div>\r\n        ))}\r\n        {this.moreUsers && (\r\n          <div class={`avatar ${this.size}`}>\r\n            <gb-avatar text={this.text} size={this.size} weight={this.setWeight()}>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n            </gb-avatar>\r\n          </div>\r\n        )}\r\n        {this.addMoreButton && <gb-avatar-add-button state={this.state} size={this.size}></gb-avatar-add-button>}\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}
+{"file":"gb-avatar-group.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,mmrEAAmmrE,CAAC;AAC7nrE,4BAAe,gBAAgB;;MCOlBA,eAAa;;;;;;;;;oBAIA,IAAI;qBACD,SAAS,CAAC,OAAO;;;IAK5C,sBAAsB;QACpB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;KAClC;IAED,aAAa;QACX,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;SAC9B;KACF;IAED,SAAS;QACP,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,aAAa,CAAC,OAAO,CAAC;YAC/B,KAAK,IAAI;gBACP,OAAO,aAAa,CAAC,KAAK,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,aAAa,CAAC,KAAK,CAAC;SAC9B;KACF;IAED,gBAAgB;QACd,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAEjD,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;SACnD;KACF;IAED,MAAM;;QAEJ,QACE,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE,IACpC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC5B,WAAK,KAAK,EAAE,UAAU,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,KAAK,IAC3C,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,IAC/D,WAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,OAAO,GAAG,CAC7B,CACR,CACP,CAAC,EACD,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,IAAI,EAAE,IAC/B,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,IACnE,6DAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CACnC,CACR,CACP,EACA,IAAI,CAAC,aAAa,IAAI,6EAAsB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAAyB,CAClJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbAvatarGroup"],"sources":["src/components/gb-avatar-group/gb-avatar-group.css?tag=gb-avatar-group&encapsulation=shadow","src/components/gb-avatar-group/gb-avatar-group.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.avatar_group{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: fit-content;\r\n}\r\n\r\n.avatar_group.xs{\r\n    width: 18.5rem;\r\n}\r\n\r\n.avatar_group.sm{\r\n    width: 21rem;\r\n}\r\n\r\n.avatar_group.md{\r\n    width: 22rem;\r\n}\r\n\r\n.avatar{\r\n    width: fit-content;\r\n    border-radius: var(--rounded-full);\r\n    position: relative;\r\n}\r\n\r\n.avatar.xs{\r\n    padding: 1.55px;\r\n    background-color: var(--color-border-inverse, #FFFFFF);\r\n}\r\n\r\n.avatar.sm{\r\n    padding: 1px;\r\n    background-color: var(--color-border-inverse, #FFFFFF);\r\n}\r\n\r\n.avatar.md{\r\n    padding: 1.5px;\r\n    background-color: var(--color-border-inverse, #FFFFFF);\r\n}\r\n\r\n.avatar.xs:not(:first-child){\r\n    margin-left: -0.5rem;\r\n}\r\n\r\n.avatar.sm:not(:first-child), .avatar.md:not(:first-child){\r\n    margin-left: -1.01rem;\r\n}\r\n\r\n::slotted(p){\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.image{\r\n    width: 100%;\r\n    height: 100%;\r\n    background-size: cover;\r\n    border-radius: var(--rounded-full);\r\n}","import { Component, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-avatar-group',\r\n  styleUrl: 'gb-avatar-group.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarGroup {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() moreUsers: boolean;\r\n  @Prop() addMoreButton: boolean;\r\n  @Prop() text: boolean = true;\r\n  @Prop() state: StateEnum = StateEnum.Default;\r\n  @Prop() images: string[];\r\n  @Element() el: HTMLElement;\r\n  @Event() addMoreButtonClicked: EventEmitter<void>;\r\n\r\n  onAddMoreButtonClicked() {\r\n    this.addMoreButtonClicked.emit();\r\n  }\r\n\r\n  getNumberSize() {\r\n    switch (this.size) {\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  setWeight() {\r\n    switch (this.size) {\r\n      case 'md':\r\n        return BorderWeights.Regular;\r\n      case 'sm':\r\n        return BorderWeights.Light;\r\n      case 'xs':\r\n        return BorderWeights.Light;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedNumber = this.el.querySelector('p');\r\n\r\n    if (slottedNumber) {\r\n      slottedNumber.classList.add(this.getNumberSize());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    // console.log(this.images);\r\n    return (\r\n      <div class={`avatar_group ${this.size}`}>\r\n        {this.images.map((image, index) => (\r\n          <div class={`avatar ${this.size}`} key={index}>\r\n            <gb-avatar size={this.size} weight={this.setWeight()} text={false}>\r\n              <img src={image} alt=\"\" slot=\"image\" />\r\n            </gb-avatar>\r\n          </div>\r\n        ))}\r\n        {this.moreUsers && (\r\n          <div class={`avatar ${this.size}`}>\r\n            <gb-avatar text={this.text} size={this.size} weight={this.setWeight()}>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n            </gb-avatar>\r\n          </div>\r\n        )}\r\n        {this.addMoreButton && <gb-avatar-add-button state={this.state} size={this.size} onClick={() => this.onAddMoreButtonClicked()}></gb-avatar-add-button>}\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/components/gb-avatar-profile-photo.js

@@ -47,7 +47,7 @@ const GbAvatarProfilePhoto$1 = /*@__PURE__*/ proxyCustomElement(class GbAvatarPr
     }
     render() {
         const profileSize = this.getProfileSize();
-        return (h("div", { key: '7dd684f7e42f699f15bb685ec02b56b0de254071', class: `profile_photo ${profileSize}` }, h("gb-avatar", { key: 'dd60c81ef6437f36320483a3343f2785adfe1d88', size: profileSize, icon: "user", text: this.text, "status-icon": this.verified && ('verified'), weight: this.setWeight() }, !this.text ? (h("slot", { name: "image", slot: "image" })) : (h("slot", { name: "initials", slot: "initials" })), this.placeholder && (h("div", { key: '5f9da6cb0a34f757ac9b92b7e38aafed55c12305', class: `placeholder` }, h("svg", { key: '94650ae4f80e57d9e32c49d87f1d43a295c2ef5d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `user_avatar ${this.size}` }, h("path", { key: '6cae1b7983c7f9644d3bbc437c2321eb5f576898', d: "M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z", fill: "#697586" }), h("path", { key: '44f3480159f5770d4e1de31f7f0c60001139064e', d: "M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z", fill: "#697586" })))))));
+        return (h("div", { key: '7dd684f7e42f699f15bb685ec02b56b0de254071', class: `profile_photo ${profileSize}` }, h("gb-avatar", { key: 'dd60c81ef6437f36320483a3343f2785adfe1d88', size: profileSize, icon: "user", text: this.text, "status-icon": this.verified && ('verified'), weight: this.setWeight() }, !this.text ? (h("slot", { name: "image", slot: "image" })) : (h("slot", { name: "initials", slot: "initials" })), this.placeholder && (h("div", { key: '607aeaa41350cc4f6c2dc1b5b4bbb9beddcdfaee', class: `placeholder` }, h("svg", { key: '8cf0885da1f1ee0cf51c01a6fda4d7ad87b938cd', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `user_avatar ${this.size}` }, h("path", { key: 'e7de1ec0a7b68cc465b1e145626ba236b07ed021', d: "M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z", fill: "#697586" }), h("path", { key: '67d79b71cb14b258f9c7ff107e352a8c78e7020f', d: "M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z", fill: "#697586" })))))));
     }
     get el() { return this; }
     static get style() { return GbAvatarProfilePhotoStyle0; }

package/dist/components/gb-avatar-profile-photo.js.map

@@ -1 +1 @@
-{"file":"gb-avatar-profile-photo.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,wzqEAAwzqE,CAAC;AACz1qE,mCAAe,uBAAuB;;MCQzBA,sBAAoB;;;;;2BACE,KAAK;oBACZ,KAAK;;wBAED,KAAK;oBAEV,MAAM;;IAE7B,eAAe;QACX,QAAQ,IAAI,CAAC,IAAI;YACb,KAAK,IAAI,EAAE,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,EAAE,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,EAAE,OAAO,sBAAsB,CAAC;SAC5C;KACJ;IAED,cAAc;QACV,QAAQ,IAAI,CAAC,IAAI;YACb,KAAK,IAAI,EAAE,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,EAAE,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,EAAE,OAAO,YAAY,CAAC;SAClC;KACJ;IAED,SAAS;QACL,QAAQ,IAAI,CAAC,IAAI;YACb,KAAK,IAAK,EAAE,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,EAAE,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,EAAE,OAAO,aAAa,CAAC,OAAO,CAAC;SAC5C;KACJ;IAED,gBAAgB;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,eAAe,EAAE;YACjB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;SACzD;KACJ;IAED,MAAM;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,QACI,4DAAK,KAAK,EAAE,iBAAiB,WAAW,EAAE,IACtC,kEACA,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,iBACF,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,EAC1C,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,IAEnB,CAAC,IAAI,CAAC,IAAI,IACP,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,KAEvC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAChD,EACC,IAAI,CAAC,WAAW,KACV,4DAAK,KAAK,EAAE,aAAa,IACrB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,eAAe,IAAI,CAAC,IAAI,EAAE,IAC5H,6DAAM,CAAC,EAAC,siBAAsiB,EAAC,IAAI,EAAC,SAAS,GAAE,EAC/jB,6DAAM,CAAC,EAAC,sNAAsN,EAAC,IAAI,EAAC,SAAS,GAAE,CAC7O,CACJ,CACT,CACG,CACV,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbAvatarProfilePhoto"],"sources":["src/components/gb-avatar-profile-photo/gb-avatar-profile-photo.css?tag=gb-avatar-profile-photo&encapsulation=shadow","src/components/gb-avatar-profile-photo/gb-avatar-profile-photo.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.profile_photo{\r\n    position: relative;\r\n    width: fit-content;\r\n    height: fit-content;\r\n    background-color: var(--color-border-inverse, #FFFFFF);\r\n    border-radius: var(--rounded-full);\r\n    box-shadow: var(--shadow-md);\r\n    padding: 0.2rem;\r\n}\r\n\r\n.placeholder{\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n    border-radius: var(--rounded-full);\r\n}\r\n\r\n::slotted(h1){\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.user_avatar.sm{\r\n    width: 2.25rem;\r\n    height: 2.25rem;\r\n}\r\n\r\n.user_avatar.md{\r\n    width: 3rem;\r\n    height: 3rem;\r\n}\r\n.user_avatar.lg{\r\n    width: 5rem;\r\n    height: 5rem;\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-profile-photo',\r\n    styleUrl: 'gb-avatar-profile-photo.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarProfilePhoto {\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = false;\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() verified: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @Prop() icon: string = 'user';\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'display-xl-semi-bold';\r\n            case 'md': return 'display-md-semi-bold';\r\n            case 'sm': return 'display-sm-semi-bold';\r\n        }\r\n    }\r\n\r\n    getProfileSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'profile_lg';\r\n            case 'md': return 'profile_md';\r\n            case 'sm': return 'profile_sm';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        switch (this.size) {\r\n            case 'lg' : return BorderWeights.Heavy;\r\n            case 'md' : return BorderWeights.Heavy;\r\n            case 'sm' : return BorderWeights.Regular;\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const slottedInitials = this.el.querySelector('h1');\r\n    \r\n        if (slottedInitials) {\r\n            slottedInitials.classList.add(this.getInitialsSize());\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const profileSize = this.getProfileSize();\r\n\r\n        return (\r\n            <div class={`profile_photo ${profileSize}`}>\r\n                <gb-avatar\r\n                size={profileSize}\r\n                icon=\"user\"\r\n                text={this.text}\r\n                status-icon={this.verified && ('verified')}\r\n                weight={this.setWeight()}\r\n                >\r\n                    {!this.text ? (\r\n                        <slot name=\"image\" slot=\"image\"></slot>\r\n                    ) : (\r\n                        <slot name=\"initials\" slot=\"initials\"></slot>\r\n                    )}\r\n                    { this.placeholder && (\r\n                            <div class={`placeholder`}>\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`user_avatar ${this.size}`}>\r\n                                    <path d=\"M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z\" fill=\"#697586\"/>\r\n                                    <path d=\"M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z\" fill=\"#697586\"/>\r\n                                </svg>\r\n                            </div>\r\n                        )}\r\n                </gb-avatar>\r\n            </div>\r\n        );\r\n    }\r\n}"],"version":3}
+{"file":"gb-avatar-profile-photo.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,wzqEAAwzqE,CAAC;AACz1qE,mCAAe,uBAAuB;;MCQzBA,sBAAoB;;;;;2BACE,KAAK;oBACZ,KAAK;;wBAED,KAAK;oBAEV,MAAM;;IAE7B,eAAe;QACX,QAAQ,IAAI,CAAC,IAAI;YACb,KAAK,IAAI,EAAE,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,EAAE,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,EAAE,OAAO,sBAAsB,CAAC;SAC5C;KACJ;IAED,cAAc;QACV,QAAQ,IAAI,CAAC,IAAI;YACb,KAAK,IAAI,EAAE,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,EAAE,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,EAAE,OAAO,YAAY,CAAC;SAClC;KACJ;IAED,SAAS;QACL,QAAQ,IAAI,CAAC,IAAI;YACb,KAAK,IAAK,EAAE,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,EAAE,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,EAAE,OAAO,aAAa,CAAC,OAAO,CAAC;SAC5C;KACJ;IAED,gBAAgB;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,eAAe,EAAE;YACjB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;SACzD;KACJ;IAED,MAAM;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,QACI,4DAAK,KAAK,EAAE,iBAAiB,WAAW,EAAE,IACtC,kEACA,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,iBACF,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,EAC1C,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,IAEnB,CAAC,IAAI,CAAC,IAAI,IACP,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,KAEvC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAChD,EACA,IAAI,CAAC,WAAW,KACb,4DAAK,KAAK,EAAE,aAAa,IACrB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,eAAe,IAAI,CAAC,IAAI,EAAE,IAC5H,6DAAM,CAAC,EAAC,siBAAsiB,EAAC,IAAI,EAAC,SAAS,GAAE,EAC/jB,6DAAM,CAAC,EAAC,sNAAsN,EAAC,IAAI,EAAC,SAAS,GAAE,CAC7O,CACJ,CACT,CACO,CACV,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbAvatarProfilePhoto"],"sources":["src/components/gb-avatar-profile-photo/gb-avatar-profile-photo.css?tag=gb-avatar-profile-photo&encapsulation=shadow","src/components/gb-avatar-profile-photo/gb-avatar-profile-photo.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.profile_photo{\r\n    position: relative;\r\n    width: fit-content;\r\n    height: fit-content;\r\n    background-color: var(--color-border-inverse, #FFFFFF);\r\n    border-radius: var(--rounded-full);\r\n    box-shadow: var(--shadow-md);\r\n    padding: 0.2rem;\r\n}\r\n\r\n.placeholder{\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n    border-radius: var(--rounded-full);\r\n}\r\n\r\n::slotted(h1){\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.user_avatar.sm{\r\n    width: 2.25rem;\r\n    height: 2.25rem;\r\n}\r\n\r\n.user_avatar.md{\r\n    width: 3rem;\r\n    height: 3rem;\r\n}\r\n.user_avatar.lg{\r\n    width: 5rem;\r\n    height: 5rem;\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-profile-photo',\r\n    styleUrl: 'gb-avatar-profile-photo.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarProfilePhoto {\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = false;\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() verified: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @Prop() icon: string = 'user';\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'display-xl-semi-bold';\r\n            case 'md': return 'display-md-semi-bold';\r\n            case 'sm': return 'display-sm-semi-bold';\r\n        }\r\n    }\r\n\r\n    getProfileSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'profile_lg';\r\n            case 'md': return 'profile_md';\r\n            case 'sm': return 'profile_sm';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        switch (this.size) {\r\n            case 'lg' : return BorderWeights.Heavy;\r\n            case 'md' : return BorderWeights.Heavy;\r\n            case 'sm' : return BorderWeights.Regular;\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const slottedInitials = this.el.querySelector('h1');\r\n    \r\n        if (slottedInitials) {\r\n            slottedInitials.classList.add(this.getInitialsSize());\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const profileSize = this.getProfileSize();\r\n\r\n        return (\r\n            <div class={`profile_photo ${profileSize}`}>\r\n                <gb-avatar\r\n                size={profileSize}\r\n                icon=\"user\"\r\n                text={this.text}\r\n                status-icon={this.verified && ('verified')}\r\n                weight={this.setWeight()}\r\n                >\r\n                    {!this.text ? (\r\n                        <slot name=\"image\" slot=\"image\"></slot>\r\n                    ) : (\r\n                        <slot name=\"initials\" slot=\"initials\"></slot>\r\n                    )}\r\n                    {this.placeholder && (\r\n                        <div class={`placeholder`}>\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`user_avatar ${this.size}`}>\r\n                                <path d=\"M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z\" fill=\"#697586\"/>\r\n                                <path d=\"M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z\" fill=\"#697586\"/>\r\n                            </svg>\r\n                        </div>\r\n                    )}\r\n                </gb-avatar>\r\n            </div>\r\n        );\r\n    }\r\n}"],"version":3}

package/dist/components/gb-input-dropdown.js

@@ -1,4 +1,4 @@
-import { G as GbInputDropdown$1, d as defineCustomElement$1 } from './p-92bc1c3a.js';
+import { G as GbInputDropdown$1, d as defineCustomElement$1 } from './p-4ab53591.js';
 
 const GbInputDropdown = GbInputDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-input-field.js

@@ -1,4 +1,4 @@
-import { G as GbInputField$1, d as defineCustomElement$1 } from './p-6e4484e1.js';
+import { G as GbInputField$1, d as defineCustomElement$1 } from './p-0c56ee53.js';
 
 const GbInputField = GbInputField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-pagination.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, F as Fragment } from './p-ad960c29.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-ad960c29.js';
 import { d as defineCustomElement$k } from './p-24625c69.js';
 import { d as defineCustomElement$j } from './p-bd1c23b9.js';
 import { d as defineCustomElement$i } from './p-6ee31d8b.js';
@@ -6,14 +6,14 @@ import { d as defineCustomElement$h } from './p-bb61710a.js';
 import { d as defineCustomElement$g } from './p-0880c70c.js';
 import { d as defineCustomElement$f } from './p-db744951.js';
 import { d as defineCustomElement$e } from './p-ad3a2c04.js';
-import { d as defineCustomElement$d } from './p-92bc1c3a.js';
+import { d as defineCustomElement$d } from './p-4ab53591.js';
 import { d as defineCustomElement$c } from './p-855667d7.js';
-import { d as defineCustomElement$b } from './p-6e4484e1.js';
+import { d as defineCustomElement$b } from './p-0c56ee53.js';
 import { d as defineCustomElement$a } from './p-db3b8bbc.js';
 import { d as defineCustomElement$9 } from './p-cbe0d594.js';
 import { d as defineCustomElement$8 } from './p-12879e00.js';
 import { d as defineCustomElement$7 } from './p-0c6b277d.js';
-import { d as defineCustomElement$6 } from './p-29ca4063.js';
+import { d as defineCustomElement$6 } from './p-bdc413ec.js';
 import { d as defineCustomElement$5 } from './p-472f11a3.js';
 import { d as defineCustomElement$4 } from './p-1c1003b6.js';
 import { d as defineCustomElement$3 } from './p-c8f12e95.js';
@@ -26,18 +26,20 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
     constructor() {
         super();
         this.__registerHost();
+        this.pageSizeSelected = createEvent(this, "pageSizeSelected", 7);
         this.type = undefined;
         this.shape = undefined;
         this.breakpoint = undefined;
         this.currentPage = undefined;
         this.totalPages = undefined;
         this.entries = [10, 20, 50, 80, 100];
-        this.selectedPageSize = undefined;
+        this.selectedPageSize = 10;
+        this.defaultSelected = undefined;
     }
     onPreviousButtonClicked() {
         if (this.currentPage === this.totalPages || this.currentPage > 1) {
             this.currentPage = this.currentPage - 1;
-            console.log(this.currentPage);
+            // console.log(this.currentPage)
         }
     }
     onNextButtonClicked() {
@@ -45,13 +47,18 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
             this.currentPage = this.currentPage + 1;
         }
     }
+    componentWillLoad() {
+        console.log(this.selectedPageSize);
+        this.defaultSelected = [this.selectedPageSize];
+        this.pageSizeSelected.emit(this.selectedPageSize);
+    }
     handlePageSizeSelect(item) {
         // console.log(this.entries);
         this.selectedPageSize = item;
-        console.log('Selected page size:', item);
+        console.log('Selected page size:', this.selectedPageSize);
     }
     render() {
-        return (h("div", { key: 'd51c61c6753f7fbc735df887cc40efe26ae0bc0c', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '70a4f3aa02682caf5f3a0fccc77e1308a9a86b17', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '664e88246e0f0e49a9af22d3dc505337f384d625' }, "Previous")), h("div", { key: 'a9b9d55523079c80187d15347775783caeb7f2b3', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: 'd535eb98c4cbbffc6cebbce2115a07900e337d3f', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: 'f17e13c1b8fb7a2dc93f2ab0bbb36fcf6314e38b', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'e189780607e82fa2321caf0c37854e330fb04e91', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: 'b2be6aac418bd3bda04152c2e8cea943da8db953', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '8db8789e987e65dc204de5e127a618cff201c9a3', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: '15334d2addc6e5fa4d1cfe48a498b6e57d5c801b', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'db41c83587b16b334e3f57f3c1f31f260ef279a2', shape: this.shape }, h("p", { key: '915a2cc1acc5fb9416520c3c8e69543c533239f7', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'e0de67c1074463a8ff6fa0fb1d16cc04384fbca8', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: '6ea647c3c940ce9de1f093ffef8639aff8227896', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '04cb998d1c471d33435809f8fd56539fd7a1370c', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '443aa8b23ad045f3f75da586a2179bfcbf52de5d', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'cdad04c20521a815a0b959b2982ae5dab05b358f', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: 'd32d47cf12ceb69e7bb039c5f076a1c75874d5aa', slot: "page_number" }, this.totalPages))), h("gb-button", { key: '8c8f5d62011383ef19497708ea0c32b30daeba69', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: 'd77f0e74e8102b700087af1ec09c498d2422a2da' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '7f0d7ab1c8a6691e2e55deb885539c2c9064cc6b', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '6b86e50104dfc50b43ec1b9e9f1ac4d847c6fa84' }, "Previous")), h("div", { key: '76db41f6a24b81d1349e66a42b5ccf8902a7457b', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '74fb9eff64e383e55f236d748aeadeda7771e9d9', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: 'f0e84a7274c14b5110da951224630cd2f0ad1e95', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'eb66e68b84bd8df0553ed187a347284ab5b25818', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: '6422d7710e79f58e26324056d8ed0068a0634bc1', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '77569833c28b8f5893f3feeda5af4b03da8d1dd3', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: '7d0ca644e9cc74b3290e6e4f25235c0fe4293752', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '0f0c1758af75561034c2c3bb0deef43533fa1686', shape: this.shape }, h("p", { key: '7276590a8928b00bcd15425421163bff731a5c8f', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '94465741cff47b46b90f71249408049f2afed4b2', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: '002f01bc31dc0b4e9226a48a348530052148ee03', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'a8489f88e2dff20f54dc2e6ccb0e160613858497', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '297643375ebee6a7b3070d10ae9a1d14f1baec54', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'ed9db21f7cb8dcee37dda10938480dd53c294cbc', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: '7a10164d062d5080f996edcc5db2cd93510c12b0', slot: "page_number" }, this.totalPages))), h("gb-button", { key: '8004459f14d467f7f4cae162cb285d5b0eb44dc4', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: 'c44b92ac7d85dd72814957e0151849b332fe5488' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'b644d51a3b879e9531f97013f3581185fb24af46', class: "pagination_entries" }, h("div", { key: '8e39a3b5d26cd060a87ff76391d564dd0e8a3d0b', class: "entries_text" }, h("p", { key: 'ce3d6ab70fc813b4ab89a8c97dde60a4f04c8acc', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '4a0b4413879484231e00909a51459ae1571625fb', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'a8bd72507a851c3b8fd31cf175b2060e13604a75', 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" }))), h("div", { key: '47abfc237390a00575dbdca6834d1cbcb59ef5c9', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '176d3748027f7a042b69f4b1bdf86230a54cfe79', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '473bb2865a214924b3bdacff1a409ed9a9a1f033', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '31528fb4913736aa7b1bd177e92fe58849355846', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '73c43beef8d2b96060d178aed1802ea680055ecf', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '5787a95ffba5cd483f8eaafc9418531a9f111479', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'dfd01b946cf927b4f4351b4ff6e65db61c971d29', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '9778634b4ce81055a03ddcad14b16055cbd9b223', shape: this.shape, state: "default" }, h("p", { key: '893cb82222f6e2a23ca369078fe781eba0bcd2d5', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'dc772ef9e693290d8e95d14481f3a9eb154ecbcf', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '25e00905db71c71b325c944e2e54bd7af3c94e02', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '982422c470ca1e551e8c4f8ad4ea75948bb4e5f3', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: 'cd554bf09611e756b0eef71bc2645249b7e65ea7', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'cdce55675264897f37b9ecd27380998a695a0047', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '10a06d32641954cfc2be82aca57896426e113e54', slot: "page_number" }, this.totalPages))), h("div", { key: 'd625aadfa2944baef8a7235952529b41a5b15db7', class: "pagination_btns" }, h("gb-button", { key: '3b5aa8b297497cc313b688dc8fb32ddf797f2d10', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: 'c8ffb24a8990fd6d7d5918deef02122b442e8072', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))), this.type === 'card_minimal_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '07422545513c380e80fc512055c603504104b3a9', class: "pagination_entries" }, h("div", { key: 'a93db1809259606f9d94e0412f2fa07e5a2e770d', class: "entries_text" }, h("p", { key: 'ef779eac00523f62f8b6bf013458b2a9b045c48e', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '5764771e514fde05221f9b3e7c9a0e2ffda1b36e', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '995c3a9ed7985dac2d23d4f0a36bc5b1b15cd6e6', 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" }))), h("div", { key: 'e09e8973ba05fca966fde31b07fd1a56b687b999', class: "page_number_text" }, h("p", { key: '9509b202e60277a8681fd9dc8e975608628cbe50', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '8f248e9381708a9fefc8c4f1af131132cd0832be', class: "pagination_btns" }, h("gb-button", { key: '650aa2761392e20600e17e8f0af3a6a5a9a37e6e', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '7c54441d561f0ad376bfb325582caa49dd0bba99' }, "Previous")), h("gb-button", { key: '8613c1f5eeb391a31bdf3a025aa1e648772583d4', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '3926488a7c3196478ab1419fbc9efd9aab9c20d0' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '86ab7a44d189295e3e2fa751a654f952bf37671d', class: "pagination_btns" }, h("gb-button", { key: 'fcd5c3d5331c4fd2cceb02f3ddaaf0f728f74774', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '7ae7c08edd4dd5a94d7b0f5e3b9c29c0472bafe5' }, "Previous")), h("gb-button", { key: '4e68603028214e7b267ab8d2a94e2f08effbf0b7', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'a8bb168438b3f4eabb005e93669e03120c51499a' }, "Next"))), h("div", { key: 'd65eda3190c260f65205bc3e4ade8a9b8d780629', class: "page_number_text" }, h("p", { key: '568709d89be991e0a89734289901fb1c58ef61b7', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '8cd05a53a07f6d675dc199ebeb0c4d1afb4c4108', class: "pagination_entries" }, h("div", { key: '615759308cae35578d56eb9a3a247b937109b5e6', class: "entries_text" }, h("p", { key: '7c52cbf14f48857803a60008fd985ec9067a58bc', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'bb143243a246877bc2246b315c55778406fc3505', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '02f992ba833d2d47be1254d4f02e225eccb23c80', 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" }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '3cbd648982f565ad902677c7334c001f9b991c76', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '4949c8537958e9ed89fdad68656bd4f745bebc45' }, "Previous")), h("div", { key: '5a73984c318df16934262ec6523bfc50d37cdd84', class: "page_number_text" }, h("p", { key: '3830979cb4f3b102042bce5bfc1d82572c16b18f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '9eb49ee910abcee2a25eb5b1f7a96424e2943d8f', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'afea5b40cda8b8df403140967773a409c88c11f6' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '64b81a2badbe37fa9ca97c997d70a7a55fe489c5', class: "pagination_entries" }, h("div", { key: 'e948333db58a319cbc37d07a4d688377212bbc62', class: "entries_text" }, h("p", { key: '6f23603f4e810794e8c31d86071c1dc61912c74c', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '7198abae91a9d5c58a39f0e8966dbd0e5d731ba4', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '797d68018f1ddfcdaec260ffb87002342d36c4ad', 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" }))), h("div", { key: '0f3537dcdf415307425ab4ba0bbcd4b6d3734ccd', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '46639aa4c8eeef863691c22bf74c596275f5eb35', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '20fb8c9d560f45346eee52d02e1f977897ae8447' }, "Previous")), h("div", { key: 'c52f6fb2fa6c9c5a16d1143975ee232e077f2e60', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '29be35eb1ab2ff061725b5cfb5273a630b11302e', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '88fc2d1a4a792366afaa72e2935bfc3508a3442f' }, "1"))), h("gb-pagination-button-group-base", { key: '8b40792e795a536b838a561219f76c3f0ff7cb23', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'af1aa19b0a82f951ea5872da24231910e66a7963' }, "2")), h("gb-pagination-button-group-base", { key: 'ddfbce5d4227dd27ae51a212f00d9f704a3dbef4', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '0b639f0162a551e83775a4e9b5cd6348510c2807' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '260298a0ab08d39754398bd7aea9beb8d033cfb7', icon: "false" }, h("p", { key: '16bf3209b7d2b734747a11b2d4e73472dbdf0e85' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '6e5136f8a52c8e29037288c48bad3a36b723c924', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '91759b39a98996af64bd3fd8e80b1abecc46bdfb' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '8ba0f4ee83be9a420485a9c64cb71671c624d505', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: 'c4e7e4255b72fdce820da6cc93d4b0253919cd5e' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '14e0f39633bea69b7247ef4930b8eb405f9508ec', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '62fa32e7bf74fe681eb0944b0d9972e2f7e4afe4' }, this.totalPages)), h("gb-pagination-button-group-base", { key: '2c7cdd9af925cdda83417ea1e9977a053b42a4c4', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '562725e3d7d2bc81cfb5fdbacc4326f6a62b5aaf' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '8cf93b9739bc6b1df249fce9971a0da82ed02290', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '880572470fd64335384cac64f3757672ec9a190e', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'ef107450259611f1e1502068f59671acbdf32345' }, "Previous")), h("div", { key: '49f1460fea0f3d456982c48317e3b7483a74e61b', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '884483e224c703920502333313362f920f8c97c0', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '1b5c9bc7ba4c662ea78d0ad8ea7ba631ed79901c' }, "1"))), h("gb-pagination-button-group-base", { key: 'd74dbb6cb1466d11990cfaed6a5d47d1e2342b20', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'eb35cb695fce00e30003ca66574c4597a938495f' }, "2")), h("gb-pagination-button-group-base", { key: 'aa7fde6576f3952f38d912d494d4e151278db3b4', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '03d482914cf1c0fad309c3dbecfae5c0ffa0dd1d' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '42f578cbf5b2ccc3dcdc48db67e4a8cb54cd8b0e', icon: "false" }, h("p", { key: '4c71228045d10292a3fa9de55ee42041face1419' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '44a206b02e447c151016bc77f7f409fb2ffb10ae', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: 'b74020562c8a8ecb743338769eb69c0acc5411f1' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '86f4ddf45df644dc61a2105a15a00e0a72556084', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '98db66220578e29d3c0344a21360b49594d095b8' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'a206a646818e7d0d27e1d281c30096193010c802', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: 'a7f27abcc27def921af78c4089571f7b22e65416' }, this.totalPages)), h("gb-pagination-button-group-base", { key: 'bfc48edb42dee471b43dcfc922cdba83156f34da', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '2ea179da1b746587fbfd56c3e7a6193fe456c70f' }, "Next"))), h("div", { key: '5945800c84034bcf0b88f39a62521138008253a4', class: "pagination_entries" }, h("div", { key: 'f791932013ffe2509d247f2efd280131d772fc02', class: "entries_text" }, h("p", { key: '63a72e646618930d80e115526854a661795e6a15', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '8310d49e877a02c674c8d9b4391c0cc1146ae84b', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '96139bab6b88712e53ef879839c871fbe4a69eda', 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" }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'd70a997a924a6e0d5d9e5aa27aaa6a03cee1babe', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'b624a6b931aeaf6484eb523719a5173fc683a7bf', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '4f885df75ca0b76e18f7a0cc68b25c1461d80209' }, "Previous")), h("div", { key: '2e05855b2f209cbd8f0a17ee09fc8557d9756494', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '1137b5aeac928365c7a3ae3ef2e438ed5fb23f56', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '6ae7d9d205afa866809bbbaeede7c2fc260ef35f' }, "1"))), h("gb-pagination-button-group-base", { key: '249ce2ced29d282826f4e899efaa59f206d5657f', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'de869299a25ed6834e8db5d327d7b8f24ef2f494' }, "2")), h("gb-pagination-button-group-base", { key: '87a149ca64ccb14031aa6a5e330a879ab06104ee', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '6563f10501b0a5d237499e8d373ff87fe5e166c5' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '1abb72ab96d9a3efc915796393d540ff6ce83a28', icon: "false" }, h("p", { key: 'f8731ea7d1b0145f00b712f6f06d3b174793497c' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '1a6796213725405e417ceb4f553a9df1c76647a6', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '3c85c2372f6af91c8afa5f2f342130efea52217a' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'f1f0e1b8736acad2a34897c9abcaa10541fbcd07', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '064f9683d008d8ce0a460addc42f76e67ac703be' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '7cb54765c0c64d1408431aad08a24445ff5a6eba', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '9eea68745ef299f1cc0e7e4e879126cc8644e51f' }, this.totalPages)), h("gb-pagination-button-group-base", { key: '969ff6142fe77a44ca2f87602cc7575fd4971156', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '9a073bb3e6558d1fe99b01a97c6149643c4871f4' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: 'a0d541a4a6a9ceb1239337bf8cf25b409c2a5fcd', 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: '8510db381aa8c4154639186e07cd8263e59efe08', class: "page_number_text" }, h("p", { key: '99e93eb434c413c7b21f4465158b68fb57ad7a3c', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '0d1a75d06166054e26d7a4839f8daac7d348c4b3', 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: '042192c603e2e814fd444e3a0e3513fd4acb44fd', 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: '374b2e579c73204c477e4e60986c518d7f770f06', class: "page_number_text" }, h("p", { key: '664e9e80f61e117a9b89bb0fe5982fde15ee8309', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '0ea30bf232b046d5894e5f9b430ceb8675192be0', 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: 'fb7caefd9cb862e1cf663b974d91dba270462377', 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: '8620b551bb1de01a8eff3af408272d94f14cf592', class: "page_number_text" }, h("p", { key: '012380aedf9ab19aa64ee528a290e9bf6b4cc011', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '89198461907d84f5510f96c75a71b43fbf32985f', 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: '5775b5a9957c46cafbe4232fc6e30bc24d781385', 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: '47fd5c3c4ee8fb1ef3ee4721865095af9f070e30', class: "page_number_text" }, h("p", { key: 'af7d88693d1b33f7789b4fe10b078a2e31da8127', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '07b17bc52d4511c63e8b514410094bbc6face73a', 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: '7933069fd0680e309b93b6c2c6cd0bb78d66c519', 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: 'ba53dbb423d31ab3b347c89ee7b4b47737e260f0', class: "page_number_text" }, h("p", { key: '6ee3043aad770be96731480cf1bd6b7ccb3d5090', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '4f9fa16f0bbaa4404597f9f17f941528cd2317f9', 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: 'caaffa39d357e8cc270d9eac130b707e66a0a95a', 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: '92711cd04679432c3d57aa214bad9456e1b4366e', class: "page_number_text" }, h("p", { key: '65204648d9900c9aab0eef2acdbeb1e4deeb8836', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '8d248706fd8dcb3b00ba5f8bb1fa485427c07704', 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: '1e21b8569dc96405b348cb5b266694a1e5676e70', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'dce8b10fda3c7738a3e2f159b83c8519ad7679e3', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '5d0bc97643538567eacd4b436beb6a5448bbd39d', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '939b5e1845feb78d25b33ff526dae691529ead2a', icon: "false", state: this.currentPage === 1 ? "active" : "default", onClick: () => this.currentPage = 1 }, h("p", { key: '29998d996e7e9a44ad62251bc2b555feae7c893e' }, "1"))), h("gb-pagination-button-group-base", { key: 'c55d20391149d9467dad2a2ed99ec901dbfcafbe', icon: "false", state: this.currentPage === 2 ? "active" : "default", onClick: () => this.currentPage = 2 }, h("p", { key: 'c17b8d90f756d6ada9ed20e9c41959b6c0944c24' }, "2")), this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '34557e8377dc806f3dba328d68943296e090e1f7', icon: "false" }, h("p", { key: 'dbf625e9eb9d85f9a47effcd6c4773f6bea32413' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'c18861c7975feafff3e3d0214cc84ebd9028b100', icon: "false", state: this.currentPage === this.totalPages - 1 ? "active" : "default", onClick: () => this.currentPage = this.totalPages - 1 }, h("p", { key: '8a3363c0325f8ce57951060e3fec43db75ae2959' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '894d01f6087173c43a320b273c45ed540936e140', icon: "false", state: this.currentPage === this.totalPages ? "active" : "default", onClick: () => this.currentPage = this.totalPages }, h("p", { key: '9f1027bf72b9c9a745154c49869fc8a233d56cff' }, this.totalPages)), h("gb-pagination-button-group-base", { key: '646cbb7f925ab9e3fde1a49c799083869f732952', 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: 'a95aa275f1f46c3bb20cff1fb3a45dd9f2416d17', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '8ba8528fc012f15e2f257321f2c2f74bf6561553', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'c73dab975d317fda763ceb67a93f692b4d677e26', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '6126bfc34ba91348b25ff1f2709e2a4b142b0a8e', icon: "false", state: "active" }, h("p", { key: '30ab9fca3207e99810449a2ce1cbee99ed26db1c' }, "1"))), h("gb-pagination-button-group-base", { key: '8860a279dd62ce0c16ab1dd463be186e9d7a95da', icon: "false" }, h("p", { key: 'c9638a2c2d137c8c3c8cb76a094a561eb57be7e5' }, "2")), h("gb-pagination-button-group-base", { key: '814781493297f82512d9474b884b364dfeb70a81', icon: "false" }, h("p", { key: '69bbd9107f8cbe9e16212636d193ac819ac40617' }, "...")), h("gb-pagination-button-group-base", { key: '1d3bb72af5360b1d81f4ffc2106c65bca9c16ef8', icon: "false" }, h("p", { key: '03049250ce4b4fbfc205167363d7e7ac85602ee1' }, "9")), h("gb-pagination-button-group-base", { key: '13a329a91da42e27ca102580d60cc12c3529ceb6', icon: "false" }, h("p", { key: '32992e091b09ab37955f1a68c8019bd0ca43559f' }, "10")), h("gb-pagination-button-group-base", { key: 'b772160a491bc9ea93ed5e299cac474c7462892d', 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: '71883cb527332dc10e011719d01fd44186d9da8d', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '1335284272a397a34f905cf2208d432c3939eacb', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'c36ef8b48f1c733d2bcfb127ed64da0b4790d03d', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'b9bc49af9c46b3b5319fcf02c0fa90ee6b131b6d', icon: "false", state: "active" }, h("p", { key: '02680ecd95fa9ef8664a02789e742003b0790977' }, "1"))), h("gb-pagination-button-group-base", { key: '32afb0a2fa90456c4da2f27153bcd0b5f52a877e', icon: "false" }, h("p", { key: '4fadd3fec67f35eb117d542c3e9164da71022c02' }, "2")), h("gb-pagination-button-group-base", { key: '0a2633aca196a133e9dc80f722084941dec5bf5e', icon: "false" }, h("p", { key: '9d46db88e4db895c8cec1d762942b3419184cdf4' }, "...")), h("gb-pagination-button-group-base", { key: '65055f5e3c14ab1d68e59ea5c7e41aa5b1e2cc1a', icon: "false" }, h("p", { key: 'bb92ba9732f31d1d53ec1ffaac6ef0b2100a4fc5' }, "9")), h("gb-pagination-button-group-base", { key: '868bae80fcb59f404803db1d7909aaaae7a306f8', icon: "false" }, h("p", { key: '7c52d3d943332b14d2fedf291d052b791cdf1f0f' }, "10")), h("gb-pagination-button-group-base", { key: '3e040f2d51e5ba24e9b60979a8fe9dae4062babe', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
+        return (h("div", { key: '5b7c56f0fe2d2eb42b7c8b8daf8dbb593fe9f416', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '91a680c53d475f1a0dd4468237de151b0ebea451', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '0ba4af4351021f5efbdf3010e012ac2977d03d0c' }, "Previous")), h("div", { key: '7753bd4e66c58b143b6b4f3aa1c781a820eeabcb', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '57f48cdd4a57e1661d2f05f8271672b4e905e74c', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: '67821a8804fb0b83539fe5d8ffb32c7b10438bc1', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '6607a113615b093f0da84ce15ab7f73241866c78', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: '57e81a32812c8654be949c53b7f9b1ffe60aad13', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '88e06c636002779f08f249cda8ba398c80e8907c', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: 'edf18b6b0b2326af43ebd4657143272d88ab5dde', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '6278b2456c98d08a97f2850a12a2d6c91bf2e144', shape: this.shape }, h("p", { key: '8484a9453f7bc3e35d64d9e22e6e6e42ef8255f4', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '2122c8b2d7440c23404c314e4836bf7214a163c0', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: '692b3360d861d697c57980b26d56813f6cb99bd3', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '19f7b419c2d201d1c61865bf2120248d90094c01', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '58843b2481063c7724cb9f825f444ebf1fd6d8f3', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '9199f810f2dcd7470d08b24a8d873a7d507eafd2', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: '7e70070fd49427ce4a615520c6ef4f64f526ccef', slot: "page_number" }, this.totalPages))), h("gb-button", { key: 'a0ff6b03062e4213417dd42ca5bcdb98866eeb09', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '6d7b19f01c8f28dab0178929cc14b12ad0f39b72' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '98ea55459fb97ae7ebb0f8c1b6c65f960bbc35ad', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '247d28c604dbf1516044b6531ad03a9113be1118' }, "Previous")), h("div", { key: '3bf8691f5aa3ccd7530e9aa5ba42684e75c0a03b', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: 'fe496078a48de76dd1704a0f8a4d5922c5027a59', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: 'fc75d92c2a71ad36756a7f32a3db42251eef6088', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '6bc2808abe2b73f6abb960cd95acae4a5c5f6ed2', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: 'db21b6a300cab5998066ec86db8260087ce9f06a', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '527f37b5b06d6fc0cb2e5a961b8cc5d9d37159e2', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: 'f69c1adc015269b50936e8df03b6410bdaaac833', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'd8a14e45e8963595191bbe734015630f56ac8bbb', shape: this.shape }, h("p", { key: 'f4ba1e2076e682a4f6494be934e96c6bcfbb2b4e', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '2e0bec401666045bb04f2e3578c093f9cd2f56d3', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: '46d8181e43f5a9adcf3f5dfa062feefa8479c616', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'a54e2d6c8bf5df509d0b398d46c6eeba14bae645', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: 'bcf74569de3f8a975519c00e8b7eef60e128970b', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '7c23431c19f9abc11e2b37abcf2cfe4fe295cc6f', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: '0f209c50bec22654324abf2ecb2759c5592f5d48', slot: "page_number" }, this.totalPages))), h("gb-button", { key: 'a91c301d5630141e0ea0675dead4eff65206de7b', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '4f93b477735e2c0ebe9fb185b23b394bddaba2b5' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '7eb8b3633db6cb402689a54a59ef508537a0b8bf', class: "pagination_entries" }, h("div", { key: '4aee27850ccad17f2d61ff2017c1eb9a85900571', class: "entries_text" }, h("p", { key: '652e7dd6dc372e6a0d5d6dd0678d9fcea357ae9f', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '5b1b2f30a24aeff47c5ff5f488c9b38ae73cbb9f', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '6d9f3de5f05b3d33a0e95db0674355af1b5d2ad7', 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: '4c5508e187a05c74c9030813adfbffdadc71579e', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: 'e194cc355404fe9bcb5f7487bf40ecc8e3995aa5', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '4b9a48b2c0b60f6730bf8a2e1e4f97ce7eb3fde0', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '10d131afc3bf4744a59a9496e9a184fac836ef79', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '4aa044102caa8d14bae30d96751351d230ab277d', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'e3cecd37404672dfbc1d0c1331f18cf106945d17', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '9313dc006161a5a36ff7eb6a4ba53f4298c4b97a', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '5d2a59328acb4575ce082edf321152eecca2872e', shape: this.shape, state: "default" }, h("p", { key: 'f0c0b56520ad39db54e5b11c5750c682048ffc13', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'c847af02fa1e9b7bcf4ecb5353b332c18ea8b5f6', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '6128186a4ac5cb7a756ce7a04e3b117d25132a82', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'c9175a1d417a420213e36f341dfaf76f2d470603', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '429c85babfc601916390242cfd643815e011a734', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'b4970af3bda9db9f3b549c54ad0ad7a9237138dc', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '49a510fb7635ce46e137995937169f78fe8c015b', slot: "page_number" }, this.totalPages))), h("div", { key: '5fae73da4cf0f01f5c4bd9e03a162586f30d1587', class: "pagination_btns" }, h("gb-button", { key: '060fdb67b05419f1b9bf43f98085616a69d3ec3a', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: '73e1fa97f2df7cd80c27cb351d80de737de515cd', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))), this.type === 'card_minimal_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '29263ef681da24a0d355c8124c645c768bfac39f', class: "pagination_entries" }, h("div", { key: '0d9a973ba895f8527b8f1fc131c78436ee77f8c1', class: "entries_text" }, h("p", { key: '749c821f7b8b3fd2c56ea80456a4fb3118ff2cf9', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '6f8b907e9fe9bc8f8853a8cdcd7c61a42d1e6cd6', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '911b78331ba5218ac3def5090b0b40ea8a2bb3b6', 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" }))), h("div", { key: '146393291dbf0d7270de962bda7f7951e3cfd9ce', class: "page_number_text" }, h("p", { key: '29f74334c9227a0b3f01267eafc083e67e5e5d8a', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: 'c5caf3e0f9c28e6dec72c545075c884da82f9097', class: "pagination_btns" }, h("gb-button", { key: '06665af180e5fe2537905d2afc229511650b78fa', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '6a6c858d49e835b17cba7c0d1eb55c58b2f7c077' }, "Previous")), h("gb-button", { key: 'ecad2f6f4d6057bd375bee01eaa076c570e0a337', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'c0e71c4bc99672546b07de50536691e6676b286e' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '21c1b1e1fe7eb44c5c5bdeaf244133c3a07be308', class: "pagination_btns" }, h("gb-button", { key: 'bfcb10219cdefa847fd2501a122e016d1b1498db', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '75ed11fd5e5ff9169c94dff92cfeffbaa44c1cc4' }, "Previous")), h("gb-button", { key: 'ff737bf221f0b0f6f464d6b9049261d8fe5ec3c0', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '19241e07b9a7c8f2a7ed158b7fb4e3c0735ce23b' }, "Next"))), h("div", { key: '3e2854b055ff06d7d5cff834841b5003ba63da04', class: "page_number_text" }, h("p", { key: '2c4f243f33f293d6e949e29bde18a793e6c61b73', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: 'aaffd674263979860f382552041688e92e346722', class: "pagination_entries" }, h("div", { key: 'e6c52a4624740a38af4aca3e3ea4b26f7e362e85', class: "entries_text" }, h("p", { key: '28aa26dd87bab33416ec0e17c33d42bc57c87452', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'e7dc797ef1976b3422096f7e4f6fceb30e48bf2c', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '6d17c1b2df50bf1aafff8c73fcd91c949143faa4', 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" }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '5ab235e7e70a953c98cced92c1f35980b802e523', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '5f3d544abe125f5a04d3944350dac36a00db7245' }, "Previous")), h("div", { key: '0bfd0cbfd2aedd80c9c464937921c439a81d91c2', class: "page_number_text" }, h("p", { key: 'd16c8c16fd9d9c9d4f6abffa75d8f2a40b1985db', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'e0da3f6429a86111440a449eac374520d864f451', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '821f9288850d5fa0b6d47d32003c8e2f4db119f9' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '3c3ed508556ee274f0b199745856c9e0af1a5130', class: "pagination_entries" }, h("div", { key: 'a7954a3c152f0c55e10a80d512061e98a5a06bec', class: "entries_text" }, h("p", { key: '8e7eef8da2bbd096149a62b6736fdfc5f9a8f2f0', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '815929f40d9d762581aff66dabd0da62696fe293', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '95d09f39e6e82cff271a4b260da618287b1a5a16', 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" }))), h("div", { key: 'ac6077b10f4f4318cbb55e1190bb391e62ca3237', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '3399ef7c90864c39db731e596bb8145ff537f9f8', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '9899a25af502adc5c84fe1703a432e513ebe7a2a' }, "Previous")), h("div", { key: 'b1f4553073dffdef30701ff633ec55a932d34f08', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'd345ef30c4d8a5329df0621bddd680b6a49ee015', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '60cbcb4cc7e4706547e428a4c18e58701e52ef46' }, "1"))), h("gb-pagination-button-group-base", { key: '6a9a9c98daf12b5efd5694203a3451b0db3f1cb8', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'b92100cf4dc7890891203793d9cfebfb02d899b9' }, "2")), h("gb-pagination-button-group-base", { key: '7579b6db54d7ae99db1073bd6e7334883db0f27a', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '255ae11cdc759336b078a557b77b682b0fcd82f4' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '8449b8937b191e9dafb8b30fcf7a2eea56f59728', icon: "false" }, h("p", { key: '3c1b19d00c273064a029779df162ecc7f34a8661' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '5cba025355d39d522712ff3908c65f8d17e51806', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: 'd85f41e3736bd81b6b964202787d34690b6fce0c' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '7a02b2bffde1d8b95b844c9085cca177ea296177', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '6be82f98139353cea32eb0fd34e0439f2374a6c1' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'ac704866e0347e1b45d4b8ca739ca861f8f78741', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '0f17b9e29b7c3fc5284e16840621251e39ac1ebd' }, this.totalPages)), h("gb-pagination-button-group-base", { key: 'aafcba10c8113fd5e98a8e7ddfc445ca2bb960a6', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'e315d37a5e3fb6ec05a1f4b1854bf45006a439ab' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'b961e6d7eb6f20ea023a0a86b3e5ba57f8cb0a99', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '97095a76efd6dd936b9f541cfde9d1509fd761f9', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '877c2f67e27c7251601e31fd8e69fbc86ea78093' }, "Previous")), h("div", { key: '2f7a938f3e79903d51b321efd432366ca657d866', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'b2e892246dbf23f94b8113dac8bc8a51c961b2fc', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'a08de6fe23d0dc3c59cfd2f9914ca74073719d40' }, "1"))), h("gb-pagination-button-group-base", { key: 'b089a19d1f648afa6530d1d749ddd391490606e4', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'b1edc5d74bcac9d94a3c49aa0835933dc28006a4' }, "2")), h("gb-pagination-button-group-base", { key: 'e674a8715a9ed402b2c19571dca5a41186790669', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '939c652a8450085d2f33af295f7b274e9d2aad1d' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '29b333b3e6433e853676fb47e9051e57fa587e53', icon: "false" }, h("p", { key: '54428b0abc2782bb29fe924164639d5bcee503b9' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'faa65685aecf7af1e7c3b1ba77c02499733c19f4', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '476506856fdfc5f857e1cd33fc96db6ab3fe02a5' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '7a336b9d8fb4706bae503816313f19c3cc11f868', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: 'a43b0735c0f4c656bf71a61dff8f541e45cdb1a1' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'c67e3106d15293c6ae0d43cc84bdbbdcf48b0b5e', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '2ce64bae8352fb36596d0f4a842b7bbe829505d9' }, this.totalPages)), h("gb-pagination-button-group-base", { key: 'd09cdc3af5ed22a2eeaad4580d2b06473804dc8e', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'd57104f9fd0e645b6afb08358300f68695be7616' }, "Next"))), h("div", { key: '62fda5a8758cb56351ae78d5c8c8bbc5c1404dc1', class: "pagination_entries" }, h("div", { key: '7b30b9a80ac79186086edab3eba79e1def65ad6d', class: "entries_text" }, h("p", { key: '317b67757264cc3b36ab8d97d6740a2c6ae80cb1', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '8ec693df8606af40e0e04d6e4a8801fe6213c12d', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'bc3dd41d271b7095174ccab89a2aab3b8fcc00cd', 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" }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '9e0e8717407a711daac4bbcb0a0b49813fcd97c2', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '5925acaa144061e6ecccfa7fbdad51ddcfa204d0', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '3b2e6dc7f96c7473fedf014693e6ed37d6b68393' }, "Previous")), h("div", { key: 'f66393089730f89d4b5d01dab21cba185e396a46', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '6e650db7b77a3cc1d12c22911e9f07184f654051', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '9b904c65a74b82fe8613acbd3955a2c79e82630d' }, "1"))), h("gb-pagination-button-group-base", { key: '4fa1aa75ad4c3555f26db4fd68aa9d4b4e37368e', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'd5728950ac7a8211a89d0ce0153da90bbd097aff' }, "2")), h("gb-pagination-button-group-base", { key: 'c8625bba0deb22ae134d95cb793b46b960316f8e', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'dd30dd97a1211af19c3aa2bdffefc0394bfda2c6' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'e737a74060c3a9607eb8706000fad99165c8c82b', icon: "false" }, h("p", { key: '6fbedc8525fcb67580023096fe0ca8dc798c89ad' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '763437a80d077a2c262d5c066c8b6d52134a5727', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '438ba194d1a9b0ff6d8b2032f853440945bd5721' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '90dbc35b8ff79a34eb787dbec5aaeb89c27970a6', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '67adc0e5d8b3b917077b0f0753cdcbc407bfb893' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '2103c160fd3ba9c408991c181509ed826628ed50', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '02680a059e27618cb31419640f3723ba6a72816b' }, this.totalPages)), h("gb-pagination-button-group-base", { key: 'ee6357b83569456f153ac24ca476a15057fad3e4', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '0c6ee603b1e3fd837d7e735389622d81b29ea5c6' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '4d0636587a5f9332607d412509fa2bcac206d881', 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: '0e35a2ebbd5efc28172e2e82bc22ca1795ff694a', class: "page_number_text" }, h("p", { key: '722efb7f430b63b3a0b4bc87303a6e47b9fae304', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '1bdf515c71528321ce61a0cef6aa801718017664', 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: '30efb557042638ae3e277d872916aeb734b7dd86', 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: '86be51ff6fc1677d62e359bf9942a80ebf68608f', class: "page_number_text" }, h("p", { key: 'd89f7df011b468b95b74c383f61b47188c46182f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'b75472be0b27f4bea13c3e078f0ecd2ce65974ee', 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: '307436aa2f4cd8e03e0ce4e1135840cefa749a1d', 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: '648a30c1b080a2bc62d411ea987261f1cfe149fb', class: "page_number_text" }, h("p", { key: 'eb3eaffcbdd3dbf1c443c950102baaaf6838b22f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'a060964a86b78293cc1f54fb29730bfc8567db37', 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: '49d3a02b76aad95837bc943fc0605573e5576b4c', 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: '2a08602babe4d819051cc5e16b01b655be8a85d8', class: "page_number_text" }, h("p", { key: 'a39658fd621e858cf701dc1c7e042b3f3371c3c3', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '8aedfa39011c059e5dbcddf30ede6bc65408cb09', 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: 'a322412d1ca17c13254cb885a75c96c33a9555c2', 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: 'fe04963394c4c45a0832a4dba9b8a3b46cf0af15', class: "page_number_text" }, h("p", { key: '1acf42c79e511a20510857f9e77071fa330afc53', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'f816173b5ceac3547a847517106b933fef2b59ed', 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: '83fb18b576edf456d4ded987a8db98d9a91b8dcd', 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: '1d4d242324c0b7c32b53419f02f9d73b578070b9', class: "page_number_text" }, h("p", { key: '5424ad1dafaad1d4151d52f83570caf570462ea0', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'e0bfece9f338b4277f1b58d2d37c78c26a7fcf19', 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: '1dbe6480a0be3b515661b26c1031aff3bea99c4c', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '1d1da6458e6dbfa71b4d35143860546abb7aa5f9', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '92f41b1f86fb8444f3c575285516bbf577138379', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '56109f45d54fdc5614707972ea2fa2b35715f4ca', icon: "false", state: this.currentPage === 1 ? "active" : "default", onClick: () => this.currentPage = 1 }, h("p", { key: '8ef91a01c584bff21af1dc003ae0b0d783ce17d2' }, "1"))), h("gb-pagination-button-group-base", { key: '2e172aea87223eecfc8e47288869e4440e101951', icon: "false", state: this.currentPage === 2 ? "active" : "default", onClick: () => this.currentPage = 2 }, h("p", { key: '6b21c00d2279b2dcfde7e041b775ef5824a96192' }, "2")), this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'b54f846929f745b1f79d4e049fbe2bde4d22eedc', icon: "false" }, h("p", { key: 'a9190e9f6245f5d3805639accf409e1af3ca4ed1' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '0f4ed34cb2dafa2bd303fd3d9fb2a3cf27314aaf', icon: "false", state: this.currentPage === this.totalPages - 1 ? "active" : "default", onClick: () => this.currentPage = this.totalPages - 1 }, h("p", { key: '2abe0bb91dd7b671d6085d3dce2975ccb7b039c5' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'e5bfc0a8bb710f450037912132241f4b380c180e', icon: "false", state: this.currentPage === this.totalPages ? "active" : "default", onClick: () => this.currentPage = this.totalPages }, h("p", { key: 'f8f47a5c306d6012a83cac1a10f0efc61f546b33' }, this.totalPages)), h("gb-pagination-button-group-base", { key: 'e57aecad79fea1e0abc7314ef7c762694e895333', 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: 'a54f57a3c3e94044363b431cdae4e630a764c3c2', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'b97ada13e0693c5ef9b6bcddc839a4659af53e04', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'f8b3ccc13b4baf63856053d812d8d7f950fa50be', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'a6b216c8822fa216c74338e66dd585fe43043e62', icon: "false", state: "active" }, h("p", { key: '382905ad1441cc5d3e12dd998515c487271d4736' }, "1"))), h("gb-pagination-button-group-base", { key: '477dbba401c70f5a1b410ac5a6f8b280bd855a38', icon: "false" }, h("p", { key: 'a8eed7f1715ef3fc722ad3821d94d3a11cb9556d' }, "2")), h("gb-pagination-button-group-base", { key: '6f726020c415d0e2c138fd7ed393b9dab77b5ae6', icon: "false" }, h("p", { key: 'df3df63b994e0ebcc6066885b6bd75220e5404a8' }, "...")), h("gb-pagination-button-group-base", { key: '63974b502153e511bac07665649a3785264123a6', icon: "false" }, h("p", { key: '5965ff88ee75bf0ff49fc993672dc7d19e9302db' }, "9")), h("gb-pagination-button-group-base", { key: 'b5686bf9d23da0e6717920ac2134441231e8ad26', icon: "false" }, h("p", { key: '134553948c8a31f9a6ee9f944ed9bead9dab5c18' }, "10")), h("gb-pagination-button-group-base", { key: '1c3b58fda2656a6a48543b1d74906cdeb8bac388', 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: '21e81c122230810bdd7eae1706a96577c1f96635', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'ee64227afec53c9c9e899e00189909c0c45eafba', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '6360bb621aaf68fa171d6a0563e29ebc6b979751', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'af140f6d2f16dd03810d0a01ac64f0d955ecbebe', icon: "false", state: "active" }, h("p", { key: '5625c10cdba08a9bf21a0d1deec93d7e612e374b' }, "1"))), h("gb-pagination-button-group-base", { key: 'e2e49e384a64eb594fb8ef6b20091c81370d92e4', icon: "false" }, h("p", { key: '4854961212330c27aadb779ecfbb80959c100885' }, "2")), h("gb-pagination-button-group-base", { key: 'ecfca88b2ccce7dc1de709911083e546b45b01e1', icon: "false" }, h("p", { key: '7e2c1ad8c9ef8a24ed22c2910a9b8ae5e0617ecb' }, "...")), h("gb-pagination-button-group-base", { key: 'a89037f5bd4c745da6eff873394026b28c61670a', icon: "false" }, h("p", { key: 'b217ef6b9deb59129bb4430e532bebcaca1678d4' }, "9")), h("gb-pagination-button-group-base", { key: '8d20465cb12bda6952dd5e4f816b22db6b2203b8', icon: "false" }, h("p", { key: '38be4f9a2c4708279e7922ab9d127a3681a0c1db' }, "10")), h("gb-pagination-button-group-base", { key: '99aabde2bd2699a123f385b26cc5ff2085497c20', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
     }
     static get style() { return GbPaginationStyle0; }
 }, [0, "gb-pagination", {
@@ -61,7 +68,8 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
         "currentPage": [1026, "current-page"],
         "totalPages": [1026, "total-pages"],
         "entries": [1040],
-        "selectedPageSize": [32]
+        "selectedPageSize": [32],
+        "defaultSelected": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {