globuswebcomponents 0.8.4 → 0.8.6

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

@@ -2,6 +2,15 @@ import { h } from "@stencil/core";
 import { BorderWeights, OnlineIndicatorStates } from "../../models/reusableModels";
 export class GbAvatar {
     constructor() {
+        this.colorClasses = [
+            'gray', // Red
+            'blue', // Green
+            'cyan', // Blue
+            'green', // Pink
+            'purple', // Yellow
+            'pink', // Purple
+            'yellow', // Teal
+        ];
         this.size = undefined;
         this.placeholder = false;
         this.text = true;
@@ -11,16 +20,24 @@ export class GbAvatar {
         this.color = undefined;
         this.showBorder = false;
         this.weight = BorderWeights.Light;
+        this.assignedColorClass = undefined;
     }
     getInitialsSize() {
         switch (this.size) {
-            case 'xl2': return 'display-xs-semi-bold';
-            case 'xl': return 'text-xl-semi-bold';
-            case 'lg': return 'text-lg-semi-bold';
-            case 'md': return 'text-md-semi-bold';
-            case 'sm': return 'text-sm-semi-bold';
-            case 'xs': return 'text-xs-semi-bold';
-            case 'xxs': return 'text-xxs-semi-bold';
+            case 'xl2':
+                return 'display-xs-semi-bold';
+            case 'xl':
+                return 'text-xl-semi-bold';
+            case 'lg':
+                return 'text-lg-semi-bold';
+            case 'md':
+                return 'text-md-semi-bold';
+            case 'sm':
+                return 'text-sm-semi-bold';
+            case 'xs':
+                return 'text-xs-semi-bold';
+            case 'xxs':
+                return 'text-xxs-semi-bold';
         }
     }
     setWeight() {
@@ -45,25 +62,47 @@ export class GbAvatar {
     }
     applyColorToInitials() {
         switch (this.color) {
-            case 'gray': return 'gray';
-            case 'blue': return 'blue';
-            case 'cyan': return 'cyan';
-            case 'pink': return 'pink';
-            case 'purple': return 'purple';
-            case 'green': return 'green';
-            case 'yellow': return 'yellow';
+            case 'gray':
+                return 'gray';
+            case 'blue':
+                return 'blue';
+            case 'cyan':
+                return 'cyan';
+            case 'pink':
+                return 'pink';
+            case 'purple':
+                return 'purple';
+            case 'green':
+                return 'green';
+            case 'yellow':
+                return 'yellow';
         }
     }
+    getRandomColorClass() {
+        const randomIndex = Math.floor(Math.random() * this.colorClasses.length);
+        return this.colorClasses[randomIndex];
+    }
     componentDidLoad() {
         const slottedInitials = this.el.querySelector('h1');
         if (slottedInitials) {
             slottedInitials.classList.add(this.getInitialsSize());
-            slottedInitials.classList.add(this.applyColorToInitials() || 'gray');
+            slottedInitials.classList.add(this.assignedColorClass);
+        }
+    }
+    componentWillLoad() {
+        if (!this.color) {
+            this.assignedColorClass = this.getRandomColorClass();
+        }
+        else {
+            this.assignedColorClass = this.color.toLowerCase();
         }
     }
     render() {
+        const classes = `${this.assignedColorClass}`;
         return [
-            h("div", { key: '775cf7ba5eabbc8488b8d2ba03ee258b57b32140', class: "avatar" }, h("gb-avatar-contrast-inner-border", { key: 'f84eb681b4c8797a895538b9f1eeb939d0c34bc7', "show-border": this.showBorder, size: this.size, weight: this.weight }, h("div", { key: '3618eca98b7f41234c5e7b28d70c0fc923df82e3', class: `inner_content ${this.size}` }, this.text ? (h("div", { class: `initials ${!this.color ? 'gray' : this.color}` }, h("slot", { name: "initials" }))) : (h("slot", { name: "image" })), this.placeholder && (h("div", { key: 'ab0c967fb78e8307ae120e88d35fe435065460c8', class: `placeholder ${!this.color ? 'gray' : this.color}` }, this.icon === 'user' && (h("svg", { key: '8b9c165d35264ac7375d45449155ece04da55123', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `user_avatar ${this.size} ${this.color} ${!this.color ? 'gray' : this.color}` }, h("path", { key: 'e030a366b3a56c57e830542b49820848880b3e04', 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: 'c1ef3c0a412747bd4422db59d298a2f8d3ceaff4', 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" }))))))), h("gb-status-indicator", { key: '6878d679bcbbfc288bd9471ad0c1bddc930338c7', class: `indicator ${this.size}`, "status-icon": this.statusIcon, size: this.size, state: this.state })),
+            h("div", { key: '78a2ae7ec0fe7e84b4865cbd2aa6d730a4f6d853', class: "avatar" }, h("gb-avatar-contrast-inner-border", { key: 'e8808de59d5e6f717ec05da28e8f426e8901db3d', "show-border": this.showBorder, size: this.size, weight: this.weight }, h("div", { key: '828372aa1ec9483a238d75a4a45e899d9a2d2b9a', class: `inner_content ${this.size}` }, this.text ? (
+            // ${!this.color ? 'gray' : this.color}
+            h("div", { class: `initials ${classes}` }, h("slot", { name: "initials" }))) : (h("slot", { name: "image" })), this.placeholder && (h("div", { key: '5cbba859eef07664af617e5e5120360af035f54c', class: `placeholder ${classes}` }, this.icon === 'user' && (h("svg", { key: 'f98212a325681ff1d84e2fc7436bccccf80041a8', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `user_avatar ${this.size} ${classes}` }, h("path", { key: '8ab2ccefc3d7850bf3f60a6335058a196ee0f8f7', 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: '9d2aa4af2b1d4d560ccbe532859d9471a9c81690', 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" }))))))), h("gb-status-indicator", { key: 'c9319baf7e901312b943d57ce0530a2a54136f1a', class: `indicator ${this.size}`, "status-icon": this.statusIcon, size: this.size, state: this.state })),
         ];
     }
     static get is() { return "gb-avatar"; }
@@ -266,6 +305,11 @@ export class GbAvatar {
             }
         };
     }
+    static get states() {
+        return {
+            "assignedColorClass": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"gb-avatar.js","sourceRoot":"","sources":["../../../src/components/gb-avatar/gb-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, BorderWeights, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar',\r\n    styleUrl: 'gb-avatar.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatar {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = true;\r\n    @Prop() statusIcon: string = '';\r\n    @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n    @Prop() icon: 'user' = 'user';\r\n    @Prop() color: AvatarColorTypes;\r\n    @Prop() showBorder: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @Prop() weight: BorderWeights = BorderWeights.Light;\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'xl2': return 'display-xs-semi-bold';\r\n            case 'xl': return 'text-xl-semi-bold';\r\n            case 'lg': return 'text-lg-semi-bold';\r\n            case 'md': return 'text-md-semi-bold';\r\n            case 'sm': return 'text-sm-semi-bold';\r\n            case 'xs': return 'text-xs-semi-bold';\r\n            case 'xxs': return 'text-xxs-semi-bold';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        if(this.showBorder){\r\n            switch (this.size) {\r\n              case 'xl2':\r\n                return BorderWeights.Regular;\r\n              case 'xl':\r\n                return BorderWeights.Regular;\r\n              case 'lg':\r\n                return BorderWeights.Regular;\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              case 'xxs':\r\n                return BorderWeights.VeryLight;\r\n            }\r\n        }\r\n    }\r\n\r\n    applyColorToInitials() {\r\n        switch(this.color) {\r\n            case 'gray': return 'gray';\r\n            case 'blue': return 'blue';\r\n            case 'cyan': return 'cyan';\r\n            case 'pink': return 'pink';\r\n            case 'purple': return 'purple';\r\n            case 'green': return 'green';\r\n            case 'yellow': return 'yellow';\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            slottedInitials.classList.add(this.applyColorToInitials() || 'gray');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return [\r\n          <div class=\"avatar\">\r\n            <gb-avatar-contrast-inner-border show-border={this.showBorder} size={this.size} weight={this.weight}>\r\n              <div class={`inner_content ${this.size}`}>\r\n                {this.text ? (\r\n                  <div class={`initials ${!this.color ? 'gray' : this.color}`}>\r\n                    <slot name=\"initials\"></slot>\r\n                  </div>\r\n                ) : (\r\n                  <slot name=\"image\"></slot>\r\n                )}\r\n                {this.placeholder && (\r\n                  <div class={`placeholder ${!this.color ? 'gray' : this.color}`}>\r\n                    {this.icon === 'user' && (\r\n                      <svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        width=\"16\"\r\n                        height=\"16\"\r\n                        viewBox=\"0 0 16 16\"\r\n                        fill=\"none\"\r\n                        class={`user_avatar ${this.size} ${this.color} ${!this.color ? 'gray' : this.color}`}\r\n                      >\r\n                        <path\r\n                          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\"\r\n                          fill=\"#697586\"\r\n                        />\r\n                        <path\r\n                          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\"\r\n                          fill=\"#697586\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </gb-avatar-contrast-inner-border>\r\n            <gb-status-indicator class={`indicator ${this.size}`} status-icon={this.statusIcon} size={this.size} state={this.state}></gb-status-indicator>\r\n          </div>,\r\n        ];\r\n    }\r\n}"]}
+{"version":3,"file":"gb-avatar.js","sourceRoot":"","sources":["../../../src/components/gb-avatar/gb-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State } from \"@stencil/core\";\r\nimport { AvatarColorTypes, BorderWeights, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-avatar',\r\n  styleUrl: 'gb-avatar.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatar {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() text: boolean = true;\r\n  @Prop() statusIcon: string = '';\r\n  @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n  @Prop() icon: 'user' = 'user';\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Prop() weight: BorderWeights = BorderWeights.Light;\r\n  @State() assignedColorClass: string;\r\n\r\n  private colorClasses = [\r\n    'gray', // Red\r\n    'blue', // Green\r\n    'cyan', // Blue\r\n    'green', // Pink\r\n    'purple', // Yellow\r\n    'pink', // Purple\r\n    'yellow', // Teal\r\n  ];\r\n\r\n  getInitialsSize() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'display-xs-semi-bold';\r\n      case 'xl':\r\n        return 'text-xl-semi-bold';\r\n      case 'lg':\r\n        return 'text-lg-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n      case 'xxs':\r\n        return 'text-xxs-semi-bold';\r\n    }\r\n  }\r\n\r\n  setWeight() {\r\n    if (this.showBorder) {\r\n      switch (this.size) {\r\n        case 'xl2':\r\n          return BorderWeights.Regular;\r\n        case 'xl':\r\n          return BorderWeights.Regular;\r\n        case 'lg':\r\n          return BorderWeights.Regular;\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        case 'xxs':\r\n          return BorderWeights.VeryLight;\r\n      }\r\n    }\r\n  }\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  private getRandomColorClass(): string {\r\n    const randomIndex = Math.floor(Math.random() * this.colorClasses.length);\r\n    return this.colorClasses[randomIndex];\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      slottedInitials.classList.add(this.assignedColorClass);\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.color) {\r\n      this.assignedColorClass = this.getRandomColorClass();\r\n    } else {\r\n      this.assignedColorClass = this.color.toLowerCase();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const classes = `${this.assignedColorClass}`;\r\n\r\n    return [\r\n      <div class=\"avatar\">\r\n        <gb-avatar-contrast-inner-border show-border={this.showBorder} size={this.size} weight={this.weight}>\r\n          <div class={`inner_content ${this.size}`}>\r\n            {this.text ? (\r\n              // ${!this.color ? 'gray' : this.color}\r\n              <div class={`initials ${classes}`}>\r\n                <slot name=\"initials\"></slot>\r\n              </div>\r\n            ) : (\r\n              <slot name=\"image\"></slot>\r\n            )}\r\n            {this.placeholder && (\r\n              <div class={`placeholder ${classes}`}>\r\n                {this.icon === 'user' && (\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} ${classes}`}>\r\n                    <path\r\n                      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\"\r\n                      fill=\"#697586\"\r\n                    />\r\n                    <path\r\n                      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\"\r\n                      fill=\"#697586\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </gb-avatar-contrast-inner-border>\r\n        <gb-status-indicator class={`indicator ${this.size}`} status-icon={this.statusIcon} size={this.size} state={this.state}></gb-status-indicator>\r\n      </div>,\r\n    ];\r\n  }\r\n}"]}

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.css

@@ -2679,15 +2679,24 @@
     border-radius: var(--rounded-xs);
 }
 
-.label {
+.shortcut.destructive:hover{
+    background-color: var(--color-background-danger-subtlest, #FEF1F2);
+}
+
+.shortcut.destructive:active{
+    background-color: var(--color-background-danger-subtler, #FDE3E5);
+}
+
+.label_div {
     flex-grow: 1;
+}
+
+.label {
     color: var(--color-text, #4B5565);
-    font-family: var(--Font-Family-Body, Sora);
-    font-size: var(--Font-Size-T-sm, 12px);
-    font-style: normal;
-    font-weight: var(--Font-Weight-Medium, 500);
-    line-height: var(--Font-Line-height-T-sm, 20px); /* 142.857% */
-    letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);
+}
+
+.label.destructive {
+    color: var(--color-text-danger, #B51726);
 }
 
 .shortcut-icon {
@@ -2702,12 +2711,38 @@
     letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);
 }
 
-.icon {
+.icon_div {
     padding-left: 7px;
     width: 20px;
     height: 20px;
 }
 
+.icon path[stroke] {
+    stroke: var(--color-icon, #4B5565);
+}
+
+.icon path[fill] {
+    fill: var(--color-icon, #4B5565);
+}
+
+.icon.disabled path[stroke],
+.icon.disabled.destructive path[stroke] {
+    stroke: var(--color-icon-disabled, #CDD5DF);
+}
+
+.icon.disabled path[fill],
+.icon.disabled.destructive path[fill] {
+    fill: var(--color-icon-disabled, #CDD5DF);
+}
+
+.icon.destructive path[stroke] {
+    stroke: var(--color-icon-danger, #B51726);
+}
+
+.icon.destructive path[fill] {
+    fill: var(--color-icon-danger, #B51726);
+}
+
 gb-checkbox {
     padding-top: 4px;
     padding-left: 7px;

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.js

@@ -6,13 +6,23 @@ export class GbDropdownShortcut {
         this.iconSrc = undefined;
         this.checkbox = false;
         this.shortcut = undefined;
-        this.shortcutIcon = 'C';
+        this.shortcutIcon = '';
         this.label = '';
         this.state = 'default';
+        this.destructive = false;
+        this.leadingIconSvg = '';
+    }
+    async loadIcon(iconName) {
+        const iconPath = getAssetPath(`${iconName}`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        this.leadingIconSvg = svg;
+    }
+    componentWillLoad() {
+        this.loadIcon(this.iconSrc);
     }
     render() {
-        const iconSrc = this.iconSrc ? getAssetPath(`${this.iconSrc}`) : '';
-        return (h("div", { key: '252aa72380543448651c8fd43f0226d41d7fe991', class: "shortcut-container" }, h("div", { key: '41bd8c9b1d145d650b202a516caffcb97a79bc59', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''}` }, this.icon && (h("div", { key: 'e06d6e6a497bb6885967b4a622bf16b6c8f5f7b6', class: "icon" }, h("img", { key: '13b8c5d2bc2af5bd38d98944185c4f3eb981988b', src: iconSrc, alt: "Icon" }))), this.checkbox && !this.icon && (h("gb-checkbox", { key: 'ffa08d8d18667e5e7477ca8279774746f988ece0', class: "checkbox", size: "sm", type: 'checkbox', state: StateEnum.Default })), h("span", { key: '38b1f165f0c5ed344d482b1e315b924b9b64c2ea', class: "label" }, h("p", { key: '80dc2263874ac60388deadcf89e156fc4ff0c2fb', class: `text-sm-medium` }, this.label)), this.shortcut && (h("span", { key: 'be9b2b5aaebfb8060dc78b7d8d1afa77d980d075', class: "shortcut-icon" }, h("slot", { key: 'd64b4d4244007cf8126e667929a555fff3150cba' }, "\u2318", this.shortcutIcon))))));
+        return (h("div", { key: '6174cf7418b3ff4d51e9820daa60adc02cead8fa', class: "shortcut-container" }, h("div", { key: 'df9eebd280b3260faf871022c8c0988e6c0de414', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}` }, this.icon && (h("div", { key: '9583ef7166f39a8f5d13dcce7cd5114e47d2d355', class: "icon_div" }, h("div", { key: '7a9e3452ae22f8299bdca2e2320b9ee9ab5b7324', class: `icon ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`, innerHTML: this.leadingIconSvg }))), this.checkbox && !this.icon && h("gb-checkbox", { key: 'd0d17e6ff1be4ecc35f8c3947818565343518fbf', class: "checkbox", size: "sm", type: "checkbox", state: StateEnum.Default }), h("span", { key: '969566f21e651ff1f4833ef6e671700ecffe9072', class: "label_div" }, h("p", { key: 'ac01ed5ae73bb537ae5d15926258fdff556ecd67', class: `label text-sm-medium ${this.destructive ? 'destructive' : ''}` }, this.label)), this.shortcut && (h("span", { key: 'c8215e2b01537deec3ec2ffed4c23c3097e7b50c', class: "shortcut-icon" }, h("slot", { key: '2eb30c118592710e5ba262f6f0671be4d49ca230' }, "\u2318", this.shortcutIcon))))));
     }
     static get is() { return "gb-dropdown-items-with-shortcut"; }
     static get encapsulation() { return "shadow"; }
@@ -114,7 +124,7 @@ export class GbDropdownShortcut {
                 },
                 "attribute": "shortcut-icon",
                 "reflect": false,
-                "defaultValue": "'C'"
+                "defaultValue": "''"
             },
             "label": {
                 "type": "string",
@@ -151,9 +161,32 @@ export class GbDropdownShortcut {
                 "attribute": "state",
                 "reflect": false,
                 "defaultValue": "'default'"
+            },
+            "destructive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "destructive",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "leadingIconSvg": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-dropdown-items-with-shortcut.js.map

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-dropdown-items-with-shortcut.js","sourceRoot":"","sources":["../../../src/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQvD,MAAM,OAAO,kBAAkB;;oBACH,KAAK;;wBAED,KAAK;;4BAEF,GAAG;qBACV,EAAE;qBACc,SAAS;;IAGjD,MAAM;QACF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEpE,OAAO,CACH,4DAAK,KAAK,EAAC,oBAAoB;YAC3B,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;gBAChE,IAAI,CAAC,IAAI,IAAI,CACV,4DAAK,KAAK,EAAC,MAAM;oBACb,4DAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,MAAM,GAAO,CAClC,CACT;gBACA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAC5B,oEAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,GAAgB,CACnG;gBACD,6DAAM,KAAK,EAAC,OAAO;oBACf,0DAAG,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,KAAK,CAAK,CACzC;gBACN,IAAI,CAAC,QAAQ,IAAI,CACd,6DAAM,KAAK,EAAC,eAAe;oBACvB;;wBAAQ,IAAI,CAAC,YAAY,CAAQ,CAC9B,CACV,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h, getAssetPath, Element} from '@stencil/core';\r\nimport {StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-dropdown-items-with-shortcut',\r\n    styleUrl: 'gb-dropdown-items-with-shortcut.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbDropdownShortcut {\r\n    @Prop() icon: boolean = false;\r\n    @Prop() iconSrc: string;\r\n    @Prop() checkbox: boolean = false;\r\n    @Prop() shortcut: boolean;\r\n    @Prop() shortcutIcon: string = 'C';\r\n    @Prop() label: string = '';\r\n    @Prop() state: 'default' | 'disabled' = 'default';\r\n    @Element() el: HTMLElement;\r\n\r\n    render() {\r\n        const iconSrc = this.iconSrc ? getAssetPath(`${this.iconSrc}`) : '';\r\n\r\n        return (\r\n            <div class=\"shortcut-container\">\r\n                <div class={`shortcut ${this.state === 'disabled' ? 'disabled' : ''}`}>\r\n                    {this.icon && (\r\n                        <div class=\"icon\">\r\n                            <img src={iconSrc} alt=\"Icon\"></img>\r\n                        </div>\r\n                    )}\r\n                    {this.checkbox && !this.icon && (\r\n                        <gb-checkbox class=\"checkbox\" size=\"sm\" type='checkbox' state={StateEnum.Default}></gb-checkbox>\r\n                    )}\r\n                    <span class=\"label\">\r\n                        <p class={`text-sm-medium`}>{this.label}</p>\r\n                    </span>\r\n                    {this.shortcut && (\r\n                        <span class=\"shortcut-icon\">\r\n                            <slot>⌘{this.shortcutIcon}</slot>\r\n                        </span>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"gb-dropdown-items-with-shortcut.js","sourceRoot":"","sources":["../../../src/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,OAAO,kBAAkB;;oBACL,KAAK;;wBAED,KAAK;;4BAEF,EAAE;qBACT,EAAE;qBACc,SAAS;2BAClB,KAAK;8BACF,EAAE;;IAGpC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,oBAAoB;YAC7B,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC3G,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAC,UAAU;oBACnB,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAC9I,CACP;gBACA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,oEAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,GAAgB;gBAChI,6DAAM,KAAK,EAAC,WAAW;oBACrB,0DAAG,KAAK,EAAE,wBAAwB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CACtF;gBACN,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,eAAe;oBACzB;;wBAAQ,IAAI,CAAC,YAAY,CAAQ,CAC5B,CACR,CACG,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, getAssetPath, Element, State } from '@stencil/core';\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-dropdown-items-with-shortcut',\r\n  styleUrl: 'gb-dropdown-items-with-shortcut.css',\r\n  shadow: true,\r\n})\r\nexport class GbDropdownShortcut {\r\n  @Prop() icon: boolean = false;\r\n  @Prop() iconSrc: string;\r\n  @Prop() checkbox: boolean = false;\r\n  @Prop() shortcut: boolean;\r\n  @Prop() shortcutIcon: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() state: 'default' | 'disabled' = 'default';\r\n  @Prop() destructive: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  @Element() el: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconSrc);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"shortcut-container\">\r\n        <div class={`shortcut ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`}>\r\n          {this.icon && (\r\n            <div class=\"icon_div\">\r\n              <div class={`icon ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`} innerHTML={this.leadingIconSvg}></div>\r\n            </div>\r\n          )}\r\n          {this.checkbox && !this.icon && <gb-checkbox class=\"checkbox\" size=\"sm\" type=\"checkbox\" state={StateEnum.Default}></gb-checkbox>}\r\n          <span class=\"label_div\">\r\n            <p class={`label text-sm-medium ${this.destructive ? 'destructive' : ''}`}>{this.label}</p>\r\n          </span>\r\n          {this.shortcut && (\r\n            <span class=\"shortcut-icon\">\r\n              <slot>⌘{this.shortcutIcon}</slot>\r\n            </span>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.css

@@ -2692,6 +2692,9 @@
     font-size: var(--Font-Size-T-sm, 14px);
     font-weight: var(--Font-Weight-Regular, 400);
     line-height: var(--Font-Line-height-T-sm, 20px); /* 142.857% */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 /* State Styles */

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js

@@ -21,16 +21,19 @@ export class GbInputDropdownMenuItem {
             supportingTextSlot.classList.add('text-sm-regular');
         }
     }
+    handleClick() {
+        this.dropdownItemClicked.emit();
+    }
     render() {
         return (
         // <div class="dropdown-container" onClick={() => (this.selected = !this.selected)}>
-        h("div", { key: '3ad4755e6e8759d4874c5703fcbb10a09dfd2e0d', class: "dropdown-container" }, h("div", { key: '6fa5c1a31fb96d411191eff664111aeca8483505', class: {
+        h("div", { key: '7eb046e52a4b268416c78b4e6dc8e3f4637b2144', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: '8be94f3e141263da5d976e53e0f5d6bc5aa14103', class: {
                 'dropdown-item': true,
                 'selected': this.selected,
                 'disabled': this.state === 'disabled',
                 'checkbox': this.type === 'checkbox',
                 [this.type]: true,
-            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '3c8b6f60106a316eba70717298448c3160e3b899', class: "content" }, this.type === 'icon_leading' && (h("svg", { key: '8f7495f62f3d748fa1cf8c99aa64b2e3518b9a41', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '791e389bcc3c432063556ef8ed45455807e1f673', d: "M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.5" }), h("path", { key: 'c55633838a2e7eddd0498cc593ea60dc518d258a', d: "M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z", stroke: "#4B5565", "stroke-width": "1.5" }))), this.type === 'avatar_leading' && (h("gb-avatar", { key: '9a36dc1ae4e89bb59b7fad6a6cc885e10fd7d635', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: '05a9b2dbd35102345f61f121519b73e4939ad43e', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h(Fragment, null, this.state === 'default' ? (h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && h("gb-checkbox", { key: '33f99dd391a6360b6e382379f0574ba439003b1e', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '24381cfc9c8cf7d3e58c8664ab5cc9d4ce1f0352', name: "name" }), this.supportingText && (h("span", { key: 'f3b68dc9e72d39cce04c528c5aabdd31ae6958fb' }, h("slot", { key: '820213d12e0396a61d94db95d458195a712f6800', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: '3cf143ccd4ce6bda63dd21749258e38885469e60', class: `tick` }, this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `tick ${this.state}` }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '52ed13d21563f0e68a5a30dac4d7c42929ee0ebb', class: "content" }, this.type === 'icon_leading' && (h("svg", { key: 'e2ca8d4c1d02ead0ecbf51a59fa30fa631d38be0', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '7a978b7ffb78be3fbc9d393ebd6649e5241d8c49', d: "M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.5" }), h("path", { key: 'f770b55abf3a015856592c2ca3c644a235f3464d', d: "M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z", stroke: "#4B5565", "stroke-width": "1.5" }))), this.type === 'avatar_leading' && (h("gb-avatar", { key: '99f45d2918d54a851992aab087db3c3f66eb0cb9', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: '3f0733e8b93fbc142e0b6070937d4408e96aac7c', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h(Fragment, null, this.state === 'default' ? (h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && h("gb-checkbox", { key: 'e066bd2a4f65233a6c3b7de3e4b76cc0961d1a73', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '4295ff3db413eae2dca031c382f206d5f6f8a268', name: "name" }), this.supportingText && (h("span", { key: '2580e4f1c2a0e625e8d26916e5f48402ec897681' }, h("slot", { key: '3dff37b8d5bca7a234c4a88811cd24bcac260a0e', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: 'baa6d9b0991f7bce9ece61676aee6940384209f0', class: `tick` }, this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `tick ${this.state}` }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "gb-input-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -153,6 +156,24 @@ export class GbInputDropdownMenuItem {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "dropdownItemClicked",
+                "name": "dropdownItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-input-dropdown-menu-item.js.map

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-input-dropdown-menu-item.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Fragment } from \"@stencil/core\";\r\nimport { AvatarColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown-menu-item',\r\n  styleUrl: 'gb-input-dropdown-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop() state: StateEnum;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n    const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    if(nameSlot) {\r\n      nameSlot.classList.add('text-md-medium');\r\n    }\r\n\r\n    if(initialsSlot) {\r\n      initialsSlot.classList.add('text-xs-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    return (\r\n      // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n      <div class=\"dropdown-container\">\r\n        <div\r\n          class={{\r\n            'dropdown-item': true,\r\n            'selected': this.selected,\r\n            'disabled': this.state === 'disabled',\r\n            'checkbox': this.type === 'checkbox',\r\n            [this.type]: true,\r\n          }}\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n        >\r\n          <div class=\"content\">\r\n            {this.type === 'icon_leading' && (\r\n              <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n                <path\r\n                  d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n              </svg>\r\n            )}\r\n            {this.type === 'avatar_leading' && (\r\n              <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n                <slot name=\"initials\" slot=\"initials\"></slot>\r\n              </gb-avatar>\r\n            )}\r\n            {this.type === 'dot_leading' && (\r\n              <>\r\n                {this.state === 'default' ? (\r\n                  <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n                  </svg>\r\n                ) : (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n                  </svg>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n            <slot name=\"name\"></slot>\r\n            {this.supportingText && (\r\n              <span>\r\n                <slot name=\"supporting_text\"></slot>\r\n              </span>\r\n            )}\r\n          </div>\r\n          {this.selected && this.type !== 'checkbox' && (\r\n            <div class={`tick`}>\r\n              {this.state !== 'disabled' ? (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`tick ${this.state}`}>\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#075DB2\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              ) : (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#CDD5DF\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-input-dropdown-menu-item.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Fragment, Event, EventEmitter } from \"@stencil/core\";\r\nimport { AvatarColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown-menu-item',\r\n  styleUrl: 'gb-input-dropdown-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop() state: StateEnum;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Element() el: HTMLElement;\r\n  @Event() dropdownItemClicked: EventEmitter<void>;\r\n\r\n  componentDidLoad() {\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n    const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    if (nameSlot) {\r\n      nameSlot.classList.add('text-md-medium');\r\n    }\r\n\r\n    if (initialsSlot) {\r\n      initialsSlot.classList.add('text-xs-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  handleClick() {\r\n    this.dropdownItemClicked.emit()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n      <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n        <div\r\n          class={{\r\n            'dropdown-item': true,\r\n            'selected': this.selected,\r\n            'disabled': this.state === 'disabled',\r\n            'checkbox': this.type === 'checkbox',\r\n            [this.type]: true,\r\n          }}\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n        >\r\n          <div class=\"content\">\r\n            {this.type === 'icon_leading' && (\r\n              <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n                <path\r\n                  d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n              </svg>\r\n            )}\r\n            {this.type === 'avatar_leading' && (\r\n              <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n                <slot name=\"initials\" slot=\"initials\"></slot>\r\n              </gb-avatar>\r\n            )}\r\n            {this.type === 'dot_leading' && (\r\n              <>\r\n                {this.state === 'default' ? (\r\n                  <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n                  </svg>\r\n                ) : (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n                  </svg>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n            <slot name=\"name\"></slot>\r\n            {this.supportingText && (\r\n              <span>\r\n                <slot name=\"supporting_text\"></slot>\r\n              </span>\r\n            )}\r\n          </div>\r\n          {this.selected && this.type !== 'checkbox' && (\r\n            <div class={`tick`}>\r\n              {this.state !== 'disabled' ? (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`tick ${this.state}`}>\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#075DB2\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              ) : (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#CDD5DF\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

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

@@ -6,7 +6,7 @@ export class GbPagination {
         this.breakpoint = undefined;
         this.currentPage = undefined;
         this.totalPages = undefined;
-        this.entries = [10, 20, 50, 100];
+        this.entries = [10];
         this.selectedPageSize = 10;
     }
     onPreviousButtonClicked() {
@@ -25,7 +25,7 @@ export class GbPagination {
         console.log('Selected page size:', item);
     }
     render() {
-        return (h("div", { key: '45cd83721f84a8bc0280f0f458f5a7fd70d864dd', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '601754b5b0a440942f33554391718f4cd7570e8b', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'd874fc9ad0ce72eff45351bf41619fade3fc24ea' }, "Previous")), h("div", { key: '1a44d46a3551a4a1e81aa02ec5b73c0bfc49c111', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: 'faf8cb3fbedda499c854dfcc56ab394411b1850c', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: '89f998c2dd98f41f1701b54c1051363bfecbec9d', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '54d3ba779cc849a9da0c141bca98759e11d4d2da', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: 'faa836f78afb18be87569774a8ab2209a25da184', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'e3f8c1e61393de41ba7dacc3b45cbe94c9f4e736', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: '731305e51e76fda54ba65068b7ebd5af93b13906', 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: '41e75500cac515bd2a073680a1f285d67e5b543c', shape: this.shape }, h("p", { key: '9adf5be392d5354b1d905e0f7f9e46c6ef1d8885', 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: '64c1e6a510172268b8ca2fff0cd76c202250afd2', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: '2af1bd9033a1fce03d4d437096b687fe335133e1', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'b7ad3bd51ee5dac32ba5de3049fdbf96cd668d2f', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '2d7dcaaf32dbfd2451df769078d80906e3574016', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '62dd27a299c28fc8d11845d9e731de1c22a9dacf', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: 'b9c1c6d9da3f94d62c188abf8f1f15b4325be155', slot: "page_number" }, this.totalPages))), h("gb-button", { key: 'c6c9add4fcc3666322f8f543d6dda071b4407acb', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: 'f8d652bc6f8619496661f1f748d11d18e11b35f9' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '945cc4bf98810e59f25a6238af800686b0f01c86', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '0c5dd72aaefc8cf98ab4c0ca5ff5367ba4296279' }, "Previous")), h("div", { key: '6d86effa7b5e9e640870b725fa80e1d527c457d7', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '71b82784f5e5567b1d35975ad419448cc96e4d84', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: '5180a0ee82f28fe0af5ae94d56e990244fa9f278', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '52eaefffd1b6f42b725df34bd48b5523bbb8a336', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: 'efae2edd47d193dcb74b831ef616e01b939db209', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '3fa853789946c683319849f544e15b5c9d339e5c', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: 'cd1a41f0c32855b54ba586fccd69877708068af0', 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: '6580a9acffb82fc250b46a6511228f42b70b3b79', shape: this.shape }, h("p", { key: '7ba8bff7336ba5f18d3ea35e63e5a28c53993605', 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: '789ce17ff282f938a4eedbbd813cbb5eb4b133cf', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: '0c715178008500135998c380af0921cd27639fe1', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'bbf50691ea8c4dcad0657cc75ac45c2702095fbc', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: 'e099c4a3ac88dbe01481e2dcc675f2cd2c03716e', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '75ff8f79a8ff17702ac7d1c58239bca9fba185cc', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: '58447b56df0257de2cbec4a55a6017e93944f677', slot: "page_number" }, this.totalPages))), h("gb-button", { key: 'b94ee0a11baa9a1eadd9cf360dd714f61f2769f6', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '44dfbd46a5862dad47dd8f94709c73ccef218668' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '06ec5ef90fbf8b5ea3a24a5af4ca14a3b721f478', class: "entries" }, h("div", { key: 'a4a6c4a157131b8d47338590df43143c46b618bb', class: "entries_text" }, h("p", { key: 'ef344f4cec051daab1ee64509b444825ce9b66d3', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '43fd41f304a10472fc08f2844ce4c427cc9808b6', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '03c7c727e4d801f3ca8973c69158e816ebca2b45', type: "default", state: "default", size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-help-icon": false, items: [10, 20, 50, 100], "menu-position": "bottom" }))), h("div", { key: '4fb720db5adbbb52aaaf7333511f2f57d4cb9bf3', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '5a357f6233fe54ba448c175ebce887ed454ff1af', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'a7eae4348022eb2c5342a5662cc03d798c2ef8fb', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '48da6f07c8e85eadc31c71fe0c583206d74a3151', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '826c45895d81cfdbe9270ffa2277e17e0da2687c', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '454e76b203ff87d8f0232076a91e18e91117dea5', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '54c99e84a51da28ecee1e9a3779b11a03a15974f', 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: '31e864b8b03d2ca6fd9e0edf7d60f0aa62a5221e', shape: this.shape, state: "default" }, h("p", { key: 'db0c94b478322d1e64ee27d3a181c7174bd85bd4', 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: 'e355fd3c93d085a22a417e14a1a1ec20974e597a', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '91e27fd6308f47edf6579cafba528370f5bd55f6', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '85cf91cee44b62202340a7fd575d802abb853091', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '6df9ccc83764df7a541641f5dd40f37d7b60b8e5', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'b08429c3e736389c4e6099a71a9bbc10e4567a9d', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: 'f5c137b1c2d7feddb5ea6658dc3e7c6e5cfed493', slot: "page_number" }, this.totalPages))), h("div", { key: '1b17f1d943ca6152fa77afecc5f2999f6db588a2', class: "buttons" }, h("gb-button", { key: '0b6964f31cef7f1cb6f7a73dac6f455aedf9c091', 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: '037cd89d7c4844cc5daefd5708c3c4de6079b162', 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: '05986e87e909f3f344e7c3148678b9d163d53c08', class: "entries" }, h("div", { key: '8526cefc17cf53671973e17b9d7da4ea5bc5edeb', class: "entries_text" }, h("p", { key: '31c2efab73b15d9a0832f0085349683a1f9fd106', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '51c2732144861b8986aa706d9aa39ef5b8a44a27', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'ddf0155e28d4c6be96c3fd08e93d69798436c36f', 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: '447f5f016ba0bdc306f75bac439ea814517ebc48', class: "page_number_text" }, h("p", { key: 'da9f45b2344ed5048245af38f0918f9c5cee608f', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '83398595c0022c953d00e1bfbf5d364e8e204804', class: "buttons" }, h("gb-button", { key: '4fae600667004cc2cb1f357e8aa22135530eb286', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '896c32a92b25c3c87fc4f6c6243092b58451ae66' }, "Previous")), h("gb-button", { key: '5034d803e079b0869ef73da553d0c422294958d3', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'ab941571edff92cb70a5963cff8e82639be507e8' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '0a22aa381fae700d38487b81ba3b40bc653f2c13', class: "buttons" }, h("gb-button", { key: 'fd427b4a088e6d2cc3975c20c3470119b5e37224', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'a7d62165174f84b2c88b8b6e2e02692348943245' }, "Previous")), h("gb-button", { key: '738cc9b98659fceca29c77151fc7ce4acb6452cd', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '4f5bef7ebc21d15c1228f8a4c8da9d07e3dc98cd' }, "Next"))), h("div", { key: 'e0034ccb4b4d1f0730f7aba34fb97212306ffe21', class: "page_number_text" }, h("p", { key: '9ac1036fa2fa2a83fe5b43a21667f80d2f3ceccc', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: 'e315df7efc75a42738c225bb1ce8476ec4c40f8f', class: "entries" }, h("div", { key: 'd2db8bba4499a5c0add56a2bf685901586c84e40', class: "entries_text" }, h("p", { key: 'c00806de5b26289cc680349d980a39e2260dc409', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'eff90c5e6d21591c788f7c095d9402917da4c497', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '2dfdec189cc0d5dcd4015f4940b903c1d29589f0', 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: '7c73daf39f5c0f5a5b32234910df7248231d6d91', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'a615c0a217d7ad90d4f31e8d5e2972e8278739f0' }, "Previous")), h("div", { key: 'f35f0fceb530baf1d3255397463d9601c210040b', class: "page_number_text" }, h("p", { key: 'b18cbc4a885cc02e3665e098d136aabcdb640afc', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'a6c8fe49b613d43d3f0ef676020a310cd06afd11', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '43bdcce564876750f792c4b9afa0b2c4b76914d8' }, "Next")))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '973b6ac6154cf15f12b42fed5139b42a57c03ee6', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("div", { key: '0f362c741938d0435d132f0b3d73d07d02a97a33', class: "page_number_text" }, h("p", { key: '3c9db208ea0263429d5c00fbf41725618043a44f', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '536f70425ef4f6db6f4193220d48d3ad088e4892', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))));
+        return (h("div", { key: 'fdd32a2395b48412c950d8d10ad665eed62740f9', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'ba61bc2334354a0765880dc4f425dd8b6b058673', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'f958aa0894af1120449edcdd34486f24882d39a1' }, "Previous")), h("div", { key: 'f10ad1df7127a8de30f907c079dd9bb29d1ff9dc', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '22d28dc5087dc91fbdf2bceacdc7b47bd8c6baa9', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: '8b5be20d120cdb8e225c69e752478ca6077197ab', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '38daefe9bb4ef56b52874821a636e3a0604be28f', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: 'babac26a4772eeb550264e95430b6bb9b23a6ff9', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '355bb6829cf80b6dc740cc9222ec53d277d29a01', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: '9e4cadc17c843c6f2a3bfb5661543d8e8acb8a24', 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: '85936400a66f356832d641526b830deafea27cea', shape: this.shape }, h("p", { key: 'b723e64ddb1518758e9163fb692f113b3c62a1f5', 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: 'd6225c461a08886b444e71af34b44d1cc2057ffb', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: 'b8f072b0d5546ced9b6f5d60d1ed780f72feb163', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'f03a4b6748735d238fc168ecdff396909899c53a', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '44ee93b7123f0140aed9cbf044113b6495b04556', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '4374a7440dc3c4dd0d3bc3a736d55f5fb6fbd7d7', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: 'b23530ff0cf43a4ea538c38843809d2628a187b8', slot: "page_number" }, this.totalPages))), h("gb-button", { key: '6283fbb72b5ff125fa2e67737a341e31c152f848', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '105cafebd444e8775068e37a8cc954cbcc6b2150' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '14da96b3caec504dc2eac0c22492f8d9211fc5d5', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: '7a4a50a26c4077cfe04102a9612cccf90db3b068' }, "Previous")), h("div", { key: '925597c4c4952eba84e4d5750ad13e196ecc1e2d', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '8ba1671823a786fe42f84669fe588d287291255c', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, h("p", { key: '96e2305fc118b8f39df769ea0e4053dd78014b75', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'b62bd9b091523d8ff6f210e2daf0d117a3cb0a4d', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, h("p", { key: '693c78b807fe199f02bfae03fcedb5ad214d93c5', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'bfdbc96f248f2b06b56c8616a0a354726180ce7b', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, h("p", { key: '620de7466435009094055df7461ab85f32aa87e8', 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: '045c00ae2b4dccc5e2407f9a4ad4398feb7015ee', shape: this.shape }, h("p", { key: '9ad50aa87d0b309772710ac7d776fbff7c55f0a6', 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: '2db3974afbc6aedcd6d8003d079f20cd2dc64284', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, h("p", { key: 'f125c8636bef0e6ad8ef71d6e8241fc96baa1ca7', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'ec5bb1eefb398b0adfc1bb25155dbc24b6cdd4b2', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, h("p", { key: '2e07aea9a8d648625151da7575ebfc2a2d46ec5f', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'a5b54e120b3d38999347b6517ae3e75b04bb2dba', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, h("p", { key: '82ffa8366cb0a47eaeae2b3881d7278e098c89e3', slot: "page_number" }, this.totalPages))), h("gb-button", { key: '939bb945e657ad6e8386dce64669b5dcab33621d', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: 'b35269ab65cef2b17065a91702dcb579c5a73ff9' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'd19806390e857930fa561902c59084d5e6d0f02c', class: "entries" }, h("div", { key: '146a0b6fa7f939a64f5e81da2920d58ee91b8d37', class: "entries_text" }, h("p", { key: '22c2e54b6e17463d5d9495ce9146ad29325ee68b', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'fd396694566a54ed3fd67bf47eb729a9d09f1e94', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '3642b851954eddd4aaaa6ba2ecfd1391d122b713', 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": "bottom" }))), h("div", { key: '27d64a350edc1138bc66ff56fa1f91509c5caf07', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: 'f2869e30a8c3323114f3dcafdd7f2ca45d14c604', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'da145b073b17b4aadde8e257b00c2fba9f7d4ab8', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '8ff7f77b45098f7152fcd3e41e838fdd377c288e', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '54fd007bb957dfeacf17214934ad3a22b79fc314', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '7d7ce0aebe99eddfe5233f08be871d041967cf3a', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '93f7353c6e4ba0e7201d715e974d74a055fa1c95', 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: '60384ed5dd37f5e5277ef2aaa255997213e4cf87', shape: this.shape, state: "default" }, h("p", { key: '27c8bde2b283d184a619619c26cf60bfdc1cac3c', 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: '57ac3d3eb7f94773481a1c607534809ae2f0d63b', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: 'c8ce36410f8c1a0da2c597c35bce9922b77bdb1b', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '0e56b2040a33205d76b3d3daa1433c100d451a6b', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: 'a2671fb108d0dcd25188327c5633fffeabde8b7b', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '7a7313e9bfc9a6d0eb615bd7aa1c4ecee06e783c', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '0d9210c136fe7a88f6c929e8ec5f490a01596346', slot: "page_number" }, this.totalPages))), h("div", { key: '05ee7275bda888d252f0301346c13aa949933a9f', class: "buttons" }, h("gb-button", { key: '2fdfb1736ddb54e6128b0446842254fd03c6be77', 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: '92b5f3838df2aad810053b8645d6208ac1e9c412', 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: '44bf48994db3abdd5a39dacd015b96132db9ffc7', class: "entries" }, h("div", { key: '06461662d73c333a42f4228e639b8c6222ca5f1c', class: "entries_text" }, h("p", { key: 'dfd99c7d410338d3a3e230cf7da9826eb17f8d5c', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '04fd4b788c21eadfdd5b2c08e41779d9157032a7', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'feaf9f5d813c3eac67dbbd9ff2ff47217f388a9f', 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: '36a522a2513ae97c99d9097dd6e23785a82f19cc', class: "page_number_text" }, h("p", { key: '11caf66b8ea052cfb95450af93c1d31fc7d0a3cb', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '72555e5820abaa0074def9c659d6cf5ca15963f9', class: "buttons" }, h("gb-button", { key: 'acf809dd8155b326b71fe761f57db8541501d7eb', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'f217da3a30c106270bc804c40893494c58e3ee62' }, "Previous")), h("gb-button", { key: '69671583ea859d6343efad7257b453a19e86f746', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'f430315d42241aa6f9410472b7a6b38f4221cff1' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '58c230ee79c9d2113cbe416e480685268d643c1f', class: "buttons" }, h("gb-button", { key: '0aa7d2412992d5933b1295e1bd9868c2341763b0', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '78f5450c567e04a44d1216ee9413be2d8df89fc6' }, "Previous")), h("gb-button", { key: 'eb73e1d68b9055fe2f7ef5d935694dae6971b67c', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '7dbeac9be786dcd2ac4c1afd6cdf4cc0e4b68b41' }, "Next"))), h("div", { key: '00c3e11428c0249c3534a45eded36d1fc3c31ae9', class: "page_number_text" }, h("p", { key: '917ef86e1baafbf810f78dfca9384ca909b762f7', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '36947beb8a934dbf7757b86163d83a78e19cabfb', class: "entries" }, h("div", { key: 'd2bf44906c44ec0ce190c350d0af1203a69860a5', class: "entries_text" }, h("p", { key: 'e9049b1af60d7f1795654d4b0e0b363fe79ba530', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '201be75e17a6f4c1ca755f3d2bf09a08c530978f', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'c3261ee434b1757f45c1286a5357e0fc114b6aed', 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: 'cc2be4dbce417542176c616e51946c9116695b94', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '282836d5f2587fbef548d64a9a6000d142d30e9e' }, "Previous")), h("div", { key: '19a5cdbb575d40c6f17c058f29d3bae9f156610f', class: "page_number_text" }, h("p", { key: '208830f3e0a8142d9ec36605db408642392c056b', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '28841764b81928571658f3c150293fc163fae69b', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '1a607b8e07092edb71255899e50ef1b6df86bab8' }, "Next")))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: 'cda0952ecafd4e507a8843f37fd10bc26e93abd4', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }), h("div", { key: '60c3d637517dcf2d44b2bf9f51f7c95b34042757', class: "page_number_text" }, h("p", { key: '9c1d570b8fa7ec89fbe7ed75bb59e721d095efba', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'e733f00692045905eaf11835ebd0a09d3dbcca3c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg" })))));
     }
     static get is() { return "gb-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -143,12 +143,27 @@ export class GbPagination {
                 },
                 "attribute": "total-pages",
                 "reflect": false
+            },
+            "entries": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[10]"
             }
         };
     }
     static get states() {
         return {
-            "entries": {},
             "selectedPageSize": {}
         };
     }