globuswebcomponents 2.14.0 → 2.14.1

package/dist/collection/components/gb-empty-state/gb-empty-state.js

@@ -21,6 +21,7 @@ export class GbEmptyState {
         this.fileStyle = 'solid';
         this.fileType = 'pdf';
         this.featuredIconSwap = '';
+        this.buttonFullWidth = false;
         this.isDarkTheme = false;
         this.patternKey = 0;
     }
@@ -51,7 +52,7 @@ export class GbEmptyState {
         }
     }
     render() {
-        return (h("div", { key: '5729cc2720dcc69f957262d3c8cfd4c0fe4cc5eb', class: "overall_container" }, h("div", { key: '415195742c860885056ffeb567f3a39c3dc51933', class: `empty_state_wrapper ${this.size}` }, this.background && h("gb-pattern", { key: this.patternKey, type: this.backgroundType, theme: this.theme, class: `pattern` }), h("div", { key: 'a3fc8d4586c7b463de91897ba63f1a191866b293', class: `top ${this.size}` }, this.icon === 'featured_icon' && h("gb-featured-icon", { key: 'e56a0856cf7f2df77cc2168ec4005e65d39f6c36', size: "lg", icon: this.featuredIconSwap }), this.icon === 'illustration' && (h("gb-illustration", { key: '33fb3a0f89af9d2037f937d7f5063e99a7a71e85', size: this.size, color: this.color, "illustration-style": this.illustrationStyle, "illustration-icon": this.illustrationIcon })), this.icon === 'file_type_icon' && (h("div", { key: '2fd76012abbed8efe0dc1349820c83c0965e3629', class: "file_type_icon_div" }, h("gb-file-type-icon", { key: 'dea2984d79199a9e923e0acacdcdefde32d7a547', "file-style": this.fileStyle, "file-type": this.fileType }))), h("div", { key: 'b489ae735aada4f2ff2003673c13dc1af2c5120a', class: "text_wrapper" }, h("p", { key: 'c75ccbcd173a0090552477bff89285d94bc58269', class: "heading text-md-semi-bold" }, this.mainText), h("p", { key: '83abc2b0a22505b28c1d862cd20fb07a82a5b5c1', class: "supporting_text text-sm-regular" }, this.supportingText))), (this.primaryButtonText || this.secondaryButtonText) && (h("div", { key: '4c8920efe88810f5b2ba0414c64b49c0e213d754', class: "actions" }, this.secondaryButtonText && (h("div", { key: '26d33ec7c33bb6c41ce3f539f02a34729cf47267', class: "btn" }, h("gb-button", { key: '5702adc436a4c87305cac95491c71b3d1df79206', size: "lg", hierarchy: "secondary_gray", icon: "default", "icon-leading": this.secondaryButtonIconLeadingSwap ? true : false, "icon-leading-swap": this.secondaryButtonIconLeadingSwap, "icon-trailing": this.secondaryButtonIconTrailingSwap ? true : false, "icon-trailing-swap": this.secondaryButtonIconTrailingSwap, onClick: () => this.onSecondaryButtonClicked() }, h("p", { key: 'efd2234ed737f728ba8129755d4579cc9c1cedeb' }, this.secondaryButtonText)))), this.primaryButtonText && (h("div", { key: '0e5010eb23431c0b6e781a1d0b3a3f93f517a793', class: "btn" }, h("gb-button", { key: '2a5501f767cd44660c0de0a9cb401f2e3efc1cb4', size: "lg", state: this.primaryButtonState, hierarchy: "primary", icon: "default", "icon-leading": this.primaryButtonIconLeadingSwap ? true : false, "icon-leading-swap": this.primaryButtonIconLeadingSwap, "icon-trailing": this.primaryButtonIconTrailingSwap ? true : false, "icon-trailing-swap": this.primaryButtonIconTrailingSwap, onClick: () => this.onPrimaryButtonClicked() }, h("p", { key: 'ba3aa4fdce70e263e21890a7621af325aa012ed2' }, this.primaryButtonText)))))))));
+        return (h("div", { key: 'fce2bfa90aa78a3a620718e8bc01110015a7ea19', class: "overall_container" }, h("div", { key: '0e7fb8cbbfd9f615233e1a08f42894d1aec24315', class: `empty_state_wrapper ${this.size}` }, this.background && h("gb-pattern", { key: this.patternKey, type: this.backgroundType, theme: this.theme, class: `pattern` }), h("div", { key: 'b1666e60e63468073f03b5d8f98af00da0c4406a', class: `top ${this.size}` }, this.icon === 'featured_icon' && h("gb-featured-icon", { key: '5688bfed665b66e230443ae636f49fc15bffe610', size: "lg", icon: this.featuredIconSwap }), this.icon === 'illustration' && (h("gb-illustration", { key: '2e0a54075a44b4e999765c49b5c1aa7bfaa27cd9', size: this.size, color: this.color, "illustration-style": this.illustrationStyle, "illustration-icon": this.illustrationIcon })), this.icon === 'file_type_icon' && (h("div", { key: '312d7b31ffc2457546edabd8647e00463550ffa3', class: "file_type_icon_div" }, h("gb-file-type-icon", { key: 'a5801c2f0edd0260133ddd76bc329e4102464b76', "file-style": this.fileStyle, "file-type": this.fileType }))), h("div", { key: '0068f6f285259803e444fa70b1a1836ddb9d21d3', class: "text_wrapper" }, h("p", { key: '1df442b0800dbbcd756b5837a286691c714ab3e7', class: "heading text-md-semi-bold" }, this.mainText), h("p", { key: 'c6bf3c5b7d606153e58fcb30067e71d266168226', class: "supporting_text text-sm-regular" }, this.supportingText))), (this.primaryButtonText || this.secondaryButtonText) && (h("div", { key: '9c701e21c9e6d44154ef543723953bccda61d5b7', class: `actions ${this.buttonFullWidth ? 'full_width' : ''}`, style: { 'justify-content': this.secondaryButtonText && !this.buttonFullWidth ? 'flex-start' : this.secondaryButtonText && this.buttonFullWidth ? 'space-between' : 'center' } }, this.secondaryButtonText && (h("div", { key: '483f955470a7a607317123737fea6d4fb85e5120', class: `btn ${this.buttonFullWidth ? 'full_width' : ''}` }, h("gb-button", { key: 'd717de7170c576901706d4bf2ba99df17ac65126', size: "lg", hierarchy: "secondary_gray", icon: "default", "icon-leading": this.secondaryButtonIconLeadingSwap ? true : false, "icon-leading-swap": this.secondaryButtonIconLeadingSwap, "icon-trailing": this.secondaryButtonIconTrailingSwap ? true : false, "icon-trailing-swap": this.secondaryButtonIconTrailingSwap, onClick: () => this.onSecondaryButtonClicked() }, h("p", { key: '9f2db1c5865d0420cd72973f805705dd260d8541' }, this.secondaryButtonText)))), this.primaryButtonText && (h("div", { key: '31c72129c113904c225b4a99dddbbb0fea2ffa0a', style: { 'width': !this.secondaryButtonText && !this.buttonFullWidth ? 'fit-content' : !this.secondaryButtonText && this.buttonFullWidth ? '100%' : '' }, class: `btn` }, h("gb-button", { key: 'da56e749e6c6a676bca4edec1e60469fbeb12c6c', size: "lg", state: this.primaryButtonState, hierarchy: "primary", icon: "default", "icon-leading": this.primaryButtonIconLeadingSwap ? true : false, "icon-leading-swap": this.primaryButtonIconLeadingSwap, "icon-trailing": this.primaryButtonIconTrailingSwap ? true : false, "icon-trailing-swap": this.primaryButtonIconTrailingSwap, onClick: () => this.onPrimaryButtonClicked() }, h("p", { key: 'e3ef61e73c1b8cd610410578cda55897aaa49fae' }, this.primaryButtonText)))))))));
     }
     static get is() { return "gb-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -508,6 +509,26 @@ export class GbEmptyState {
                 "reflect": false,
                 "attribute": "featured-icon-swap",
                 "defaultValue": "''"
+            },
+            "buttonFullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-full-width",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/gb-empty-state/gb-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-empty-state.js","sourceRoot":"","sources":["../../../src/components/gb-empty-state/gb-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQtF,MAAM,OAAO,YAAY;IALzB;QAMU,SAAI,GAAiB,IAAI,CAAC;QAC1B,SAAI,GAAwD,cAAc,CAAC;QAC3E,UAAK,GAAkB,MAAM,CAAC;QAC9B,UAAK,GAAe,QAAQ,CAAC;QAC7B,sBAAiB,GAAsB,KAAK,CAAC;QAC7C,qBAAgB,GAAW,EAAE,CAAC;QAC9B,eAAU,GAAY,IAAI,CAAC;QAC3B,mBAAc,GAAuB,MAAM,CAAC;QAC5C,sBAAiB,GAAW,EAAE,CAAC;QAC/B,wBAAmB,GAAW,EAAE,CAAC;QACjC,uBAAkB,GAAc,SAAS,CAAC;QAC1C,iCAA4B,GAAW,EAAE,CAAC;QAC1C,kCAA6B,GAAW,EAAE,CAAC;QAC3C,mCAA8B,GAAW,EAAE,CAAC;QAC5C,oCAA+B,GAAW,EAAE,CAAC;QAC7C,aAAQ,GAAW,EAAE,CAAC;QACtB,mBAAc,GAAW,EAAE,CAAC;QAC5B,cAAS,GAAmB,OAAO,CAAC;QACpC,aAAQ,GAAkB,KAAK,CAAC;QAChC,qBAAgB,GAAW,EAAE,CAAC;QAC7B,gBAAW,GAAY,KAAK,CAAC;QAG7B,eAAU,GAAW,CAAC,CAAC;KA4FjC;IA1FC,sBAAsB;QACpB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;IACnC,CAAC;IAED,wBAAwB;QACtB,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;IACrC,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,IAAI,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,EAAE,CAAC;gBAC9D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,mBAAmB;YAC5B,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,EAAE;gBAE3C,IAAI,CAAC,UAAU,IAAI,kBAAY,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,GAAe;gBACnI,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,IAAI,EAAE;oBAC3B,IAAI,CAAC,IAAI,KAAK,eAAe,IAAI,yEAAkB,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAqB;oBAC7G,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAC/B,wEAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,wBAAsB,IAAI,CAAC,iBAAiB,uBAAqB,IAAI,CAAC,gBAAgB,GAAoB,CAC9J;oBACA,IAAI,CAAC,IAAI,KAAK,gBAAgB,IAAI,CACjC,4DAAK,KAAK,EAAC,oBAAoB;wBAC7B,wFAA+B,IAAI,CAAC,SAAS,eAAa,IAAI,CAAC,QAAQ,GAAsB,CACzF,CACP;oBACD,4DAAK,KAAK,EAAC,cAAc;wBACvB,0DAAG,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,QAAQ,CAAK;wBACxD,0DAAG,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,cAAc,CAAK,CAChE,CACF;gBACL,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CACvD,4DAAK,KAAK,EAAC,SAAS;oBACjB,IAAI,CAAC,mBAAmB,IAAI,CAC3B,4DAAK,KAAK,EAAC,KAAK;wBACd,kEACE,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAC,SAAS,kBACA,IAAI,CAAC,8BAA8B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,uBAC7C,IAAI,CAAC,8BAA8B,mBACvC,IAAI,CAAC,+BAA+B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,wBAC9C,IAAI,CAAC,+BAA+B,EACxD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE;4BAE9C,4DAAI,IAAI,CAAC,mBAAmB,CAAK,CACvB,CACR,CACP;oBACA,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,KAAK;wBACd,kEACE,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,SAAS,kBACA,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,uBAC3C,IAAI,CAAC,4BAA4B,mBACrC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,wBAC5C,IAAI,CAAC,6BAA6B,EACtD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE;4BAE5C,4DAAI,IAAI,CAAC,iBAAiB,CAAK,CACrB,CACR,CACP,CACG,CACP,CACG,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { FileIconStyles, FileIconTypes, GeneralColors, GeneralSizes, IllustrationTypes, StateType, ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-empty-state',\r\n  styleUrl: 'gb-empty-state.css',\r\n  shadow: true,\r\n})\r\nexport class GbEmptyState {\r\n  @Prop() size: GeneralSizes = 'sm';\r\n  @Prop() icon: 'featured_icon' | 'illustration' | 'file_type_icon' = 'illustration';\r\n  @Prop() color: GeneralColors = 'gray';\r\n  @Prop() theme: ThemeTypes = 'system';\r\n  @Prop() illustrationStyle: IllustrationTypes = 'box';\r\n  @Prop() illustrationIcon: string = '';\r\n  @Prop() background: boolean = true;\r\n  @Prop() backgroundType: 'grid' | 'circles' = 'grid';\r\n  @Prop() primaryButtonText: string = '';\r\n  @Prop() secondaryButtonText: string = '';\r\n  @Prop() primaryButtonState: StateType = 'default';\r\n  @Prop() primaryButtonIconLeadingSwap: string = '';\r\n  @Prop() primaryButtonIconTrailingSwap: string = '';\r\n  @Prop() secondaryButtonIconLeadingSwap: string = '';\r\n  @Prop() secondaryButtonIconTrailingSwap: string = '';\r\n  @Prop() mainText: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @Prop() fileStyle: FileIconStyles = 'solid';\r\n  @Prop() fileType: FileIconTypes = 'pdf';\r\n  @Prop() featuredIconSwap: string = '';\r\n  @State() isDarkTheme: boolean = false;\r\n  @Event() primaryButtonClicked: EventEmitter<void>;\r\n  @Event() secondaryButtonClicked: EventEmitter<void>;\r\n  @State() patternKey: number = 0;\r\n\r\n  onPrimaryButtonClicked() {\r\n    this.primaryButtonClicked.emit();\r\n  }\r\n\r\n  onSecondaryButtonClicked() {\r\n    this.secondaryButtonClicked.emit();\r\n  }\r\n\r\n  @Watch('theme')\r\n  onThemeChanged() {\r\n    this.changeTheme();\r\n    this.patternKey++;\r\n  }\r\n\r\n  changeTheme() {\r\n    if (this.theme === 'system') {\r\n      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\r\n        this.isDarkTheme = true;\r\n      } else {\r\n        this.isDarkTheme = false;\r\n      }\r\n    } else if (this.theme === 'light') {\r\n      this.isDarkTheme = false;\r\n    } else if (this.theme === 'dark') {\r\n      this.isDarkTheme = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"overall_container\">\r\n        <div class={`empty_state_wrapper ${this.size}`}>\r\n          {/* <div class=\"pattern\"></div> */}\r\n          {this.background && <gb-pattern key={this.patternKey} type={this.backgroundType} theme={this.theme} class={`pattern`}></gb-pattern>}\r\n          <div class={`top ${this.size}`}>\r\n            {this.icon === 'featured_icon' && <gb-featured-icon size=\"lg\" icon={this.featuredIconSwap}></gb-featured-icon>}\r\n            {this.icon === 'illustration' && (\r\n              <gb-illustration size={this.size} color={this.color} illustration-style={this.illustrationStyle} illustration-icon={this.illustrationIcon}></gb-illustration>\r\n            )}\r\n            {this.icon === 'file_type_icon' && (\r\n              <div class=\"file_type_icon_div\">\r\n                <gb-file-type-icon file-style={this.fileStyle} file-type={this.fileType}></gb-file-type-icon>\r\n              </div>\r\n            )}\r\n            <div class=\"text_wrapper\">\r\n              <p class=\"heading text-md-semi-bold\">{this.mainText}</p>\r\n              <p class=\"supporting_text text-sm-regular\">{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n          {(this.primaryButtonText || this.secondaryButtonText) && (\r\n            <div class=\"actions\">\r\n              {this.secondaryButtonText && (\r\n                <div class=\"btn\">\r\n                  <gb-button\r\n                    size=\"lg\"\r\n                    hierarchy=\"secondary_gray\"\r\n                    icon=\"default\"\r\n                    icon-leading={this.secondaryButtonIconLeadingSwap ? true : false}\r\n                    icon-leading-swap={this.secondaryButtonIconLeadingSwap}\r\n                    icon-trailing={this.secondaryButtonIconTrailingSwap ? true : false}\r\n                    icon-trailing-swap={this.secondaryButtonIconTrailingSwap}\r\n                    onClick={() => this.onSecondaryButtonClicked()}\r\n                  >\r\n                    <p>{this.secondaryButtonText}</p>\r\n                  </gb-button>\r\n                </div>\r\n              )}\r\n              {this.primaryButtonText && (\r\n                <div class=\"btn\">\r\n                  <gb-button\r\n                    size=\"lg\"\r\n                    state={this.primaryButtonState}\r\n                    hierarchy=\"primary\"\r\n                    icon=\"default\"\r\n                    icon-leading={this.primaryButtonIconLeadingSwap ? true : false}\r\n                    icon-leading-swap={this.primaryButtonIconLeadingSwap}\r\n                    icon-trailing={this.primaryButtonIconTrailingSwap ? true : false}\r\n                    icon-trailing-swap={this.primaryButtonIconTrailingSwap}\r\n                    onClick={() => this.onPrimaryButtonClicked()}\r\n                  >\r\n                    <p>{this.primaryButtonText}</p>\r\n                  </gb-button>\r\n                </div>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-empty-state.js","sourceRoot":"","sources":["../../../src/components/gb-empty-state/gb-empty-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { FileIconStyles, FileIconTypes, GeneralColors, GeneralSizes, IllustrationTypes, StateType, ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-empty-state',\r\n  styleUrl: 'gb-empty-state.css',\r\n  shadow: true,\r\n})\r\nexport class GbEmptyState {\r\n  @Prop() size: GeneralSizes = 'sm';\r\n  @Prop() icon: 'featured_icon' | 'illustration' | 'file_type_icon' = 'illustration';\r\n  @Prop() color: GeneralColors = 'gray';\r\n  @Prop() theme: ThemeTypes = 'system';\r\n  @Prop() illustrationStyle: IllustrationTypes = 'box';\r\n  @Prop() illustrationIcon: string = '';\r\n  @Prop() background: boolean = true;\r\n  @Prop() backgroundType: 'grid' | 'circles' = 'grid';\r\n  @Prop() primaryButtonText: string = '';\r\n  @Prop() secondaryButtonText: string = '';\r\n  @Prop() primaryButtonState: StateType = 'default';\r\n  @Prop() primaryButtonIconLeadingSwap: string = '';\r\n  @Prop() primaryButtonIconTrailingSwap: string = '';\r\n  @Prop() secondaryButtonIconLeadingSwap: string = '';\r\n  @Prop() secondaryButtonIconTrailingSwap: string = '';\r\n  @Prop() mainText: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @Prop() fileStyle: FileIconStyles = 'solid';\r\n  @Prop() fileType: FileIconTypes = 'pdf';\r\n  @Prop() featuredIconSwap: string = '';\r\n  @Prop() buttonFullWidth: boolean = false;\r\n  @State() isDarkTheme: boolean = false;\r\n  @Event() primaryButtonClicked: EventEmitter<void>;\r\n  @Event() secondaryButtonClicked: EventEmitter<void>;\r\n  @State() patternKey: number = 0;\r\n\r\n  onPrimaryButtonClicked() {\r\n    this.primaryButtonClicked.emit();\r\n  }\r\n\r\n  onSecondaryButtonClicked() {\r\n    this.secondaryButtonClicked.emit();\r\n  }\r\n\r\n  @Watch('theme')\r\n  onThemeChanged() {\r\n    this.changeTheme();\r\n    this.patternKey++;\r\n  }\r\n\r\n  changeTheme() {\r\n    if (this.theme === 'system') {\r\n      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\r\n        this.isDarkTheme = true;\r\n      } else {\r\n        this.isDarkTheme = false;\r\n      }\r\n    } else if (this.theme === 'light') {\r\n      this.isDarkTheme = false;\r\n    } else if (this.theme === 'dark') {\r\n      this.isDarkTheme = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"overall_container\">\r\n        <div class={`empty_state_wrapper ${this.size}`}>\r\n          {/* <div class=\"pattern\"></div> */}\r\n          {this.background && <gb-pattern key={this.patternKey} type={this.backgroundType} theme={this.theme} class={`pattern`}></gb-pattern>}\r\n          <div class={`top ${this.size}`}>\r\n            {this.icon === 'featured_icon' && <gb-featured-icon size=\"lg\" icon={this.featuredIconSwap}></gb-featured-icon>}\r\n            {this.icon === 'illustration' && (\r\n              <gb-illustration size={this.size} color={this.color} illustration-style={this.illustrationStyle} illustration-icon={this.illustrationIcon}></gb-illustration>\r\n            )}\r\n            {this.icon === 'file_type_icon' && (\r\n              <div class=\"file_type_icon_div\">\r\n                <gb-file-type-icon file-style={this.fileStyle} file-type={this.fileType}></gb-file-type-icon>\r\n              </div>\r\n            )}\r\n            <div class=\"text_wrapper\">\r\n              <p class=\"heading text-md-semi-bold\">{this.mainText}</p>\r\n              <p class=\"supporting_text text-sm-regular\">{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n          {(this.primaryButtonText || this.secondaryButtonText) && (\r\n            <div class={`actions ${this.buttonFullWidth ? 'full_width' : ''}`} style={{ 'justify-content': this.secondaryButtonText && !this.buttonFullWidth ? 'flex-start' : this.secondaryButtonText && this.buttonFullWidth ? 'space-between' : 'center' }}>\r\n              {this.secondaryButtonText && (\r\n                <div class={`btn ${this.buttonFullWidth ? 'full_width' : ''}`}>\r\n                  <gb-button\r\n                    size=\"lg\"\r\n                    hierarchy=\"secondary_gray\"\r\n                    icon=\"default\"\r\n                    icon-leading={this.secondaryButtonIconLeadingSwap ? true : false}\r\n                    icon-leading-swap={this.secondaryButtonIconLeadingSwap}\r\n                    icon-trailing={this.secondaryButtonIconTrailingSwap ? true : false}\r\n                    icon-trailing-swap={this.secondaryButtonIconTrailingSwap}\r\n                    onClick={() => this.onSecondaryButtonClicked()}\r\n                  >\r\n                    <p>{this.secondaryButtonText}</p>\r\n                  </gb-button>\r\n                </div>\r\n              )}\r\n              {this.primaryButtonText && (\r\n                <div style={{ 'width': !this.secondaryButtonText && !this.buttonFullWidth ? 'fit-content' : !this.secondaryButtonText && this.buttonFullWidth ? '100%' : '' }} class={`btn`}>\r\n                  <gb-button\r\n                    size=\"lg\"\r\n                    state={this.primaryButtonState}\r\n                    hierarchy=\"primary\"\r\n                    icon=\"default\"\r\n                    icon-leading={this.primaryButtonIconLeadingSwap ? true : false}\r\n                    icon-leading-swap={this.primaryButtonIconLeadingSwap}\r\n                    icon-trailing={this.primaryButtonIconTrailingSwap ? true : false}\r\n                    icon-trailing-swap={this.primaryButtonIconTrailingSwap}\r\n                    onClick={() => this.onPrimaryButtonClicked()}\r\n                  >\r\n                    <p>{this.primaryButtonText}</p>\r\n                  </gb-button>\r\n                </div>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -3143,6 +3143,15 @@ svg.disabled path {
   width: 100%;
 }
 
+.dropdown_search_input{
+  background: transparent;
+  border: none;
+}
+
+.dropdown_search_input:focus {
+  outline: none;
+}
+
 input {
   border: none;
   color: var(--color-text, #4b5565);

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

@@ -14,23 +14,23 @@ export class GbInputDropdown {
         this.text = false;
         this.leadingIcon = '';
         this.items = [
-            { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },
-            { name: 'Mock Item B', username: 3 },
-            { name: 'Mock Item C', username: 3 },
-            { name: 'Mock Item D', username: 3 },
-            { name: 'Mock Item E', username: 3 },
-            45,
-            50,
-            20,
-            25,
-            90,
-            92,
-            53,
-            'Activated',
-            'Deactivated',
-            'John Doe',
-            'John smith',
-            'Jane leo',
+        // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },
+        // { name: 'Mock Item B', username: 3 },
+        // { name: 'Mock Item C', username: 3 },
+        // { name: 'Mock Item D', username: 3 },
+        // { name: 'Mock Item E', username: 3 },
+        // 45,
+        // 50,
+        // 20,
+        // 25,
+        // 90,
+        // 92,
+        // 53,
+        // 'Activated',
+        // 'Deactivated',
+        // 'John Doe',
+        // 'John smith',
+        // 'Jane leo',
         ];
         this.value = [
         // { name: 'Mock Item A', username: 1, selected: false },
@@ -420,7 +420,7 @@ export class GbInputDropdown {
         const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');
         const illustration = getAssetPath('assets/empty-state-no-data.svg');
         return [
-            h("div", { key: 'c70f04a1c56f170af9fd2d638f85d17e8bc4a544', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: 'bcc7b8b1bbe4fcd879647db2f1324d367fcba0ba', class: `input_with_label` }, this.showLabel && (h(Fragment, null, this.formatLabel ? (h("p", { class: "dropdown_label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())) : (h("p", { class: "dropdown_label text-sm-medium" }, this.label)))), h("div", { key: '315b24f70a0342173d5ca92cfeae92e61c5df44e', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: '46af80db0d63f13a3e4fedf0ed2858e2ac63cf3d', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'ebff6559d13d8462d7ec0a96a9b830de034bea27', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.66667" }), h("path", { key: '5b52b89f155c630b396f74f2b77155a499926a6f', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: 'a14af2c01bde59e7bccf176bb26bba62de5384c4', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (h(Fragment, null, typeof item === 'object' ? (h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : typeof item === 'string' ? (h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase()))) : (h("h1", { slot: "initials" }, item))))))))), this.showLeadingIcon && (h(Fragment, null, this.type === 'search' || this.type === 'tags' || this.type === 'icon_leading' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null)), this.type === 'dot_leading' && (h("svg", { key: '425e1ab74389851193dba33f4055b2c90fb511fd', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: '3436e7edf76d3f9cb0b5b91bae8988ec5a1fd003', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && this.type !== 'search' && (h(Fragment, null, this.placeholder && (h("div", { key: '0efc8d588f7db3acb336f4274622b4c370098791', class: "placeholder" }, h("p", { key: 'f5c49ec142154fcc2ef8178540943dffabf3b736', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '34fb2672b8e1e04183de760952338c3b947268de', class: "search_input" }, h("input", { key: '1ca9bbd22896dbb7dbe216d4b1fab4e2bd6dde6b', type: "text", placeholder: this.placeholder, class: `text-${this.size}-regular`, ref: el => (this.inputRef = el), onInput: this.emitInputValueToUseForSearch.bind(this) }), this.showCloseButton && (h("gb-button", { key: '8f20081910163b82d3e1dbf7fd2a474737e707ca', class: `close_button ${this.size}`, size: this.size, hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '24fdcf1d9bbd0c0daad2970c7cab93dbc56f853b', class: `content` }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'false', action: "X_close", onClick: e => {
+            h("div", { key: 'd9f848049456360027f3e0a20d61e6cd8948e1fa', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: 'd5ce67df37e8edbf217b692cbd9476413cea3e75', class: `input_with_label` }, this.showLabel && (h(Fragment, null, this.formatLabel ? (h("p", { class: "dropdown_label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())) : (h("p", { class: "dropdown_label text-sm-medium" }, this.label)))), h("div", { key: '41e69dc4b1c47fbdec28a9cedcfadc6badf8b377', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: 'f4da0e9c43501dbc1fc51f9ffb4093835fd6237c', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '0f137f5a00549cf135dfa3a3fa0863dad699a97b', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.66667" }), h("path", { key: '08c98446575a7bd69c9603dfd9ce5a490cf164ab', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: '83d2158fbf9d0ced2259b783a52af5db81a23ff0', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (h(Fragment, null, typeof item === 'object' ? (h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : typeof item === 'string' ? (h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase()))) : (h("h1", { slot: "initials" }, item))))))))), this.showLeadingIcon && (h(Fragment, null, this.type === 'search' || this.type === 'tags' || this.type === 'icon_leading' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null)), this.type === 'dot_leading' && (h("svg", { key: '8bcd0b04db5740deabdacd8578c37f272c89efb6', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: '16f002f5c024d48e952386430487cc54224d4d98', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && this.type !== 'search' && (h(Fragment, null, this.placeholder && (h("div", { key: '47f9560270cb6e2322b5bbb51a79776b4b37b50d', class: "placeholder" }, h("p", { key: '50fc6b70800412395b660319c2aa8cf6c25f4167', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: 'd17869a6639a1a3b3b22a40dc8e0767585d387b9', class: "search_input" }, h("input", { key: '24c58b533c8b5ac0c5ec20856988e52683b87452', type: "text", placeholder: this.placeholder, class: `dropdown_search_input text-${this.size}-regular`, ref: el => (this.inputRef = el), onInput: this.emitInputValueToUseForSearch.bind(this) }), this.showCloseButton && (h("gb-button", { key: '6b31404e350eb18a9eea82859870e4975a542bc1', class: `close_button ${this.size}`, size: this.size, hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))), this.state === 'filled' && (h(Fragment, null, h("div", { key: 'd34ca07e58a5d60d82eefbbcc1300c4a686b5def', class: `content` }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'false', action: "X_close", onClick: e => {
                     e.stopPropagation();
                     this.handleTagRemove(item);
                 } }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
@@ -438,10 +438,10 @@ export class GbInputDropdown {
                 .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'false', action: "X_close", onClick: e => {
                     e.stopPropagation();
                     this.handleTagRemove(item);
-                } }, h("p", { class: "text-xs-medium" }, item))))))))) : (h("p", { class: `selected_text text-${this.size}-regular` }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item))))), this.supportingText && (h("div", { key: '8a35c90a715baedafc716e6e6e9b1b645e709175', class: `supporting_text text-${this.size}-regular`, style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && item.username))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: 'f15136bb7c4f0b34a36ddb47cc9824fb5ce329aa', class: `content` }, h("div", { key: 'd249eebf552d09c3102bda5149c35883fc38a3a3', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'false', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+                } }, h("p", { class: "text-xs-medium" }, item))))))))) : (h("p", { class: `selected_text text-${this.size}-regular` }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item))))), this.supportingText && (h("div", { key: '86f634d256290a04fb6153d639c030bc7d9df0f7', class: `supporting_text text-${this.size}-regular`, style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && item.username))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: '336d12d271a1f06628ec75fcfde58b859d2998b8', class: `content` }, h("div", { key: 'fc1c03984b0159dc1931b946024a1f906bf30bae', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'false', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .split(' ')
                 .map(part => part.charAt(0).toUpperCase())
-                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'false', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '8c7639d53f769b7067000569e0b209b52bf6cc15', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && h(Fragment, null, item.username))))))))))), this.showHelpIcon && (h("div", { key: 'c9874f1758f186cbd38f6304d021b708173b1149', class: `help_icon` }, h("gb-help-tooltip", { key: '285756f8a144b017c4cc768a9d39fdf4fe8a66b9', "show-supporting-text": true }, h("slot", { key: '00c20fdf5ca5a0e5166eb00805c6ecd24eeff6b9', name: "tooltip_label", slot: "label" }), h("slot", { key: 'c15f693d111752f9066263c347b8011d731ff2be', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '520a8956f98f0c65bdb4f473fcd8850667bd1bbd', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '52468a033a6b8782d635cf60a52dc299a198791d', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'fe01f08341f1cc36cea09e7f4e8d6896dc6ffd59', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: 'e0dab0970c66bd08f7eb5dddf087a63f863bb468', class: `dropdown_menu ${this.computedMenuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'ee55d2feb630c43a333fdaf91bd265e27089a5fa', class: "dropdown_search_field" }, h("gb-input-field", { key: 'c8a9093e4bd6e46db11cb9d4275e3e04df3784f5', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.bind(this), ref: el => (this.searchInputRef = el) }))), this.loading && (h("div", { key: 'd3a9db062b46f56850cef892b8126d4bb0b3c19f', class: "loader_div" }, h("div", { key: '66522956cddcb7b5403c79b4424e8abd1db8454c', class: "loader" }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'false', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '3e0fdf2315f43dd2c87c977694e4746ba70f3771', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && h(Fragment, null, item.username))))))))))), this.showHelpIcon && (h("div", { key: '9d0fd865895910ad97561627222b0228e689678e', class: `help_icon` }, h("gb-help-tooltip", { key: '0585bf4731602104848f81e10247c1b3aac77273', "show-supporting-text": true }, h("slot", { key: 'a222c2db53f6bd1e646d0fd86762f4acb5ba30e6', name: "tooltip_label", slot: "label" }), h("slot", { key: 'f1326e1d07f91bd3e8f64ef43849abef7463cba9', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '99cf9db2f69eab7456ef82ce37e7598f1c314ec9', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'a54b9f436132a3610de1740a9db813d849016244', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'b73986ca0466c97415ace8c97982d9fb8a87262e', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: '429cccecd2ee369141b35d912b2b722ca4914007', class: `dropdown_menu ${this.computedMenuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'ce031b6ac1f189ea62849ca8e68848c45d55d8d9', class: "dropdown_search_field" }, h("gb-input-field", { key: '4c0aa249ff9fd1b6795dfabc183f6afbe47ef66c', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.bind(this), ref: el => (this.searchInputRef = el) }))), this.loading && (h("div", { key: '0e4e46e0ed2de98ff3f1c68df9c33986a2f57472', class: "loader_div" }, h("div", { key: '802b24bf650f95b9987d337341a574f89d4a014e', class: "loader" }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
             //Empty state for when there are no search results
             h("div", { class: "empty_state" }, h("img", { src: emptyStateBackground, class: "background", alt: "" }), h("div", { class: "message_background" }, h("img", { src: illustration, alt: "", class: "illustration" }), h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (h(Fragment, null, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username), h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())))) : typeof item === 'string' ? (h(Fragment, null, h("p", { slot: "name" }, item), h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase())))) : (h(Fragment, null, h("p", { slot: "name" }, item), h("h1", { slot: "initials" }, item)))))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : (h(Fragment, null, h("gb-input-dropdown-menu-item", { state: StateEnum.Default, "supporting-text": this.supportingText, color: this.color, onClick: () => this.handleItemSelect() }, h("p", { slot: "name" }, "--", this.placeholder, "--")), this.items.map(item => [
                 h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("h1", { slot: "initials" }, item.name
@@ -773,7 +773,7 @@ export class GbInputDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n    { name: 'Mock Item B', username: 3 },\r\n    { name: 'Mock Item C', username: 3 },\r\n    { name: 'Mock Item D', username: 3 },\r\n    { name: 'Mock Item E', username: 3 },\r\n    45,\r\n    50,\r\n    20,\r\n    25,\r\n    90,\r\n    92,\r\n    53,\r\n    'Activated',\r\n    'Deactivated',\r\n    'John Doe',\r\n    'John smith',\r\n    'Jane leo',\r\n  ]"
+                "defaultValue": "[\r\n    // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n    // { name: 'Mock Item B', username: 3 },\r\n    // { name: 'Mock Item C', username: 3 },\r\n    // { name: 'Mock Item D', username: 3 },\r\n    // { name: 'Mock Item E', username: 3 },\r\n    // 45,\r\n    // 50,\r\n    // 20,\r\n    // 25,\r\n    // 90,\r\n    // 92,\r\n    // 53,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n    // 'John Doe',\r\n    // 'John smith',\r\n    // 'Jane leo',\r\n  ]"
             },
             "value": {
                 "type": "unknown",