globuswebcomponents 0.6.6 → 0.6.8

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

@@ -7,16 +7,24 @@ export class GbHeader {
         this.text = false;
         this.placeholder = false;
         this.color = undefined;
+        this.showBorder = false;
     }
     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';
         }
     }
     componentDidLoad() {
@@ -34,7 +42,7 @@ export class GbHeader {
     render() {
         const helpIconSrc = getAssetPath(`assets/help-circle.svg`);
         const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
-        return (h("div", { key: '498f89fa79aa9726db6937b6e0fcc0c84b536b55', class: `header_div` }, h("div", { key: '910b340b6092907dc9f6a3c34a5fb1e5f00c9801', class: "content" }, h("div", { key: '1092c8d8c93228a4484a919d40e39e9aa3dd9158', class: "inner_content" }, h("div", { key: '6028979ae0bb3abe2a37254fa5d9730e33e26439', class: `action` }, h("gb-header-icon", { key: '7a83f22d95ddb3b6801051e314800617ea6af5b9', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked(0) }), h("gb-header-icon", { key: '1b78c89b90d8e7a163b555f848621d2e5cc232e0', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked(1) })), h("gb-avatar", { key: '7b98eb12ee5fddf807de9e870a149538d051e3c2', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, onClick: () => this.onNavBarItemClicked(2) }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
+        return (h("div", { key: '3009a580b50d00a8b88cca7b234eba20db80994d', class: `header_div` }, h("div", { key: '8ec417e3065d93b70a3dc11cf18eb566e30189ec', class: "content" }, h("div", { key: '6ac10ed7e2a4eaa6a8c2f157e77a55b2149c0084', class: "inner_content" }, h("div", { key: '04d550471137a2700d97c2799b9093b894e1c367', class: `action` }, h("gb-header-icon", { key: '2676a3fb6461616d3f2cd6fd7d3a6c4062aa773d', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked(0) }), h("gb-header-icon", { key: 'ff5f5b271e3912d44a868b76302c1a37667e06ec', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked(1) })), h("gb-avatar", { key: '7008d92ac7d7d05792822dc916a459be70ba1c36', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked(2) }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
     }
     static get is() { return "gb-header"; }
     static get encapsulation() { return "shadow"; }
@@ -149,6 +157,24 @@ export class GbHeader {
                 },
                 "attribute": "color",
                 "reflect": false
+            },
+            "showBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-border",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAoB,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAO1E,MAAM,OAAO,QAAQ;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;;IAMpC,oBAAoB;QAClB,QAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC;YAC3B,KAAK,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC;YAC/B,KAAK,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC;YAC7B,KAAK,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC;QACjC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC5C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,mBAAmB,CAAC,KAAa;QACrC,uCAAuC;QACvC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,sBAAsB;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAEvE,OAAO,CACL,4DAAK,KAAK,EAAE,YAAY;YACtB,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,eAAe;oBACxB,4DAAK,KAAK,EAAE,QAAQ;wBAClB,uEAAgB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAmB;wBAC1H,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,mBAAmB,oBAAkB,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAmB,CAC3J;oBACN,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAC/H,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC1F,CACR,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<number>;\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 initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async onNavBarItemClicked(index: number) {\r\n    // console.log('nav-bar-item clicked');\r\n    this.navBarItemClicked.emit(index);\r\n    // console.log(index);\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n    return (\r\n      <div class={`header_div`}>\r\n        <div class=\"content\">\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked(0)}></gb-header-icon>\r\n              <gb-header-icon state={this.state} icon={notificationIconSrc} show-indicator={this.showIndicator} onClick={() => this.onNavBarItemClicked(1)}></gb-header-icon>\r\n            </div>\r\n            <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder} color={this.color} onClick={() => this.onNavBarItemClicked(2)}>\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAoB,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAO1E,MAAM,OAAO,QAAQ;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;0BAEN,KAAK;;IAInC,oBAAoB;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;QACpB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC5C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,mBAAmB,CAAC,KAAa;QACrC,uCAAuC;QACvC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,sBAAsB;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAEvE,OAAO,CACL,4DAAK,KAAK,EAAE,YAAY;YACtB,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,eAAe;oBACxB,4DAAK,KAAK,EAAE,QAAQ;wBAClB,uEAAgB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAmB;wBAC1H,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,mBAAmB,oBAAkB,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAmB,CAC3J;oBACN,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,iBAAe,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAC7J,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC1F,CACR,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<number>;\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  componentDidLoad() {\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async onNavBarItemClicked(index: number) {\r\n    // console.log('nav-bar-item clicked');\r\n    this.navBarItemClicked.emit(index);\r\n    // console.log(index);\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n    return (\r\n      <div class={`header_div`}>\r\n        <div class=\"content\">\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked(0)}></gb-header-icon>\r\n              <gb-header-icon state={this.state} icon={notificationIconSrc} show-indicator={this.showIndicator} onClick={() => this.onNavBarItemClicked(1)}></gb-header-icon>\r\n            </div>\r\n            <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder} color={this.color} show-border={this.showBorder} onClick={() => this.onNavBarItemClicked(2)}>\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-help-tooltip/gb-help-tooltip.css

@@ -2664,7 +2664,6 @@
     position: relative;
     width: fit-content;
     height: fit-content;
-    margin-left: 5rem;
 }
 
 .tooltip{

package/dist/collection/components/gb-help-tooltip/gb-help-tooltip.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbHelpTooltip {
     constructor() {
-        this.showHelpTooltip = true;
+        this.showHelpTooltip = false;
         this.showArrow = false;
         this.showSupportingText = false;
     }
@@ -16,7 +16,7 @@ export class GbHelpTooltip {
         }
     }
     render() {
-        return (h("div", { key: '57e92f5de8865aa017a5054c7fdf1d3400beb264', class: `help_tooltip` }, h("svg", { key: '491dae813aa7602940f5f242b8a6db3407215824', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", onMouseEnter: () => (this.showHelpTooltip = true), onMouseLeave: () => (this.showHelpTooltip = false), class: "help_circle" }, h("path", { key: '5accbe118a9d82b47f893f583acb12b7b61ea741', d: "M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.showHelpTooltip && (h("gb-tooltip", { key: '291bbfa4e9ef49e1afb5c9d8ee70a5458ded3396', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: '17e66664576fe80bc122a03655990209ec8885b0', name: "label", slot: "label" }), h("slot", { key: 'b40c4d34d3a5e01e40913f70dbd2f6bd40995d36', name: "supporting_text", slot: "supporting_text" })))));
+        return (h("div", { key: '4a8e02a8eec68b2551d5ac14a2704a56eb999a95', class: `help_tooltip` }, h("svg", { key: '7977da7a60983c0564fdebea824ce1c5d173ca96', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", onMouseEnter: () => (this.showHelpTooltip = true), onMouseLeave: () => (this.showHelpTooltip = false), class: "help_circle" }, h("path", { key: '51f3b83adf2651b5ff5f4aef1cd4b46b97c2f9e0', d: "M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.showHelpTooltip && (h("gb-tooltip", { key: '1e54c7a6a39135b5b027b4e7c875af295b03acf6', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: 'c09baaf2c5ef8e803e9ee8586341d87a8f1d9360', name: "label", slot: "label" }), h("slot", { key: 'c8f3773c2fbc5a7a93b39ff3345d20764dc2aeff', name: "supporting_text", slot: "supporting_text" })))));
     }
     static get is() { return "gb-help-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-help-tooltip/gb-help-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-help-tooltip.js","sourceRoot":"","sources":["../../../src/components/gb-help-tooltip/gb-help-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOnE,MAAM,OAAO,aAAa;;+BACY,IAAI;yBACX,KAAK;kCACI,KAAK;;IAG3C,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAE7E,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAClD,CAAC;QAED,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,cAAc;YACxB,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EACjD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,EAClD,KAAK,EAAC,aAAa;gBAEnB,6DACE,CAAC,EAAC,4ZAA4Z,EAC9Z,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE;YACL,IAAI,CAAC,eAAe,IAAI,CACvB,iFAAwB,IAAI,EAAE,KAAK,EAAC,cAAc,0BAAuB,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAC,SAAS;gBAC/G,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ;gBACvC,6DAAM,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,iBAAiB,GAAQ,CAChD,CACd,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-help-tooltip',\r\n  styleUrl: 'gb-help-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class GbHelpTooltip {\r\n  @State() showHelpTooltip: boolean = true;\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`help_tooltip`}>\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          onMouseEnter={() => (this.showHelpTooltip = true)}\r\n          onMouseLeave={() => (this.showHelpTooltip = false)}\r\n          class=\"help_circle\"\r\n        >\r\n          <path\r\n            d=\"M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z\"\r\n            stroke=\"#697586\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        {this.showHelpTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"bottom_right\" show-supporting-text={this.showSupportingText} class=\"tooltip\">\r\n            <slot name=\"label\" slot=\"label\"></slot>\r\n            <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-help-tooltip.js","sourceRoot":"","sources":["../../../src/components/gb-help-tooltip/gb-help-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOnE,MAAM,OAAO,aAAa;;+BACY,KAAK;yBACZ,KAAK;kCACI,KAAK;;IAG3C,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAE7E,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAClD,CAAC;QAED,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,cAAc;YACxB,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EACjD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,EAClD,KAAK,EAAC,aAAa;gBAEnB,6DACE,CAAC,EAAC,4ZAA4Z,EAC9Z,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE;YACL,IAAI,CAAC,eAAe,IAAI,CACvB,iFAAwB,IAAI,EAAE,KAAK,EAAC,cAAc,0BAAuB,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAC,SAAS;gBAC/G,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ;gBACvC,6DAAM,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,iBAAiB,GAAQ,CAChD,CACd,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-help-tooltip',\r\n  styleUrl: 'gb-help-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class GbHelpTooltip {\r\n  @State() showHelpTooltip: boolean = false;\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`help_tooltip`}>\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          onMouseEnter={() => (this.showHelpTooltip = true)}\r\n          onMouseLeave={() => (this.showHelpTooltip = false)}\r\n          class=\"help_circle\"\r\n        >\r\n          <path\r\n            d=\"M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z\"\r\n            stroke=\"#697586\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        {this.showHelpTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"bottom_right\" show-supporting-text={this.showSupportingText} class=\"tooltip\">\r\n            <slot name=\"label\" slot=\"label\"></slot>\r\n            <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

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

@@ -2800,4 +2800,32 @@ svg.disabled path{
   max-width: 18.5rem;
   color: var(--color-text-subtle, #697586);
   margin-top: 5rem;
+}
+
+::slotted([slot="initials"].gray){
+    color: #4B5565;
+}
+
+::slotted([slot="initials"].blue){
+    color: var(--color-text-information, #064E94);
+}
+
+::slotted([slot="initials"].cyan){
+    color: var(--color-text-discovery, #0086C9);
+}
+
+::slotted([slot="initials"].pink){
+    color: var(--color-text-pink, #DD2590);
+}
+
+::slotted([slot="initials"].purple){
+    color: var(--color-text-purple, #6938EF);
+}
+
+::slotted([slot="initials"].green){
+    color: var(--color-text-success, #079455);
+}
+
+::slotted([slot="initials"].yellow){
+    color: var(--color-text-warning, #DC6803);
 }

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

@@ -22,11 +22,13 @@ export class GbInputDropdown {
         this.leadingIcon = '';
         this.items = [];
         this.supportingText = false;
+        this.color = undefined;
+        this.showBorder = false;
         this.leadingIconSvg = '';
         this.dropdownOpen = false;
         this.selectedItems = [];
+        this.unselectedItems = [];
         this.selectedItem = undefined;
-        this.isSelected = false;
     }
     disconnectedCallback() {
         document.removeEventListener('click', this.handleOutsideClick);
@@ -71,11 +73,22 @@ export class GbInputDropdown {
             const itemExists = this.selectedItems.some(i => i.name === item.name);
             if (itemExists) {
                 this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);
+                item.selected = false;
+                if (!this.unselectedItems.includes(item)) {
+                    this.unselectedItems = [...this.unselectedItems, item];
+                }
             }
             else {
                 this.selectedItem = item;
+                item.selected = true;
                 this.selectedItems.push(this.selectedItem);
-                this.value.emit(this.selectedItems);
+                if (item.selected) {
+                    this.unselectedItems = this.unselectedItems.filter(unselectedItem => unselectedItem !== item);
+                }
+                else {
+                    this.unselectedItems = [...this.unselectedItems, item];
+                }
+                this.dropdownValue.emit(this.selectedItems);
             }
             // Update the state based on whether there are selected items
             this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
@@ -86,12 +99,23 @@ export class GbInputDropdown {
             this.selectedItem = item; // Store the selected item
             this.state = 'filled'; // Update state to 'filled'
             this.dropdownOpen = false; // Close the dropdown
-            this.value.emit(this.selectedItem);
+            this.dropdownValue.emit(this.selectedItem);
         }
     }
     handleTagRemove(item) {
         // Remove the item from selectedItems array
-        this.selectedItems = this.selectedItems.filter(i => i !== item);
+        if (this.type === 'tags') {
+            const itemExists = this.selectedItems.some(i => i.name === item.name);
+            if (itemExists) {
+                this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);
+                item.selected = false;
+                if (!this.unselectedItems.includes(item)) {
+                    this.unselectedItems = [...this.unselectedItems, item];
+                }
+            }
+            // Update the state based on whether there are selected items
+            this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
+        }
         // For non-tags type, set selectedItem to null if that item is removed
         if (this.type !== 'tags' && this.selectedItem === item) {
             this.selectedItem = null;
@@ -101,6 +125,12 @@ export class GbInputDropdown {
     }
     componentWillLoad() {
         this.loadIcon(this.leadingIcon);
+        const items = [
+            { name: 'Emmanuel Kadiri', selected: false },
+            { name: 'Gideon Ogunkola', selected: false },
+        ];
+        this.items = items;
+        this.unselectedItems = this.items.filter(item => !item.selected);
     }
     componentDidLoad() {
         if (this.type !== 'tags') {
@@ -117,32 +147,32 @@ export class GbInputDropdown {
             supportingTextSlot.classList.add('text-xs-regular');
         }
     }
+    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';
+        }
+    }
     render() {
-        const items = [
-            {
-                name: 'Emmanuel Kadiri',
-                username: 'kadiri2047',
-            },
-            {
-                name: 'Gideon Ogunkola',
-                username: 'gideon',
-            },
-            {
-                name: 'Precious Okon',
-                username: 'presh',
-            },
-            {
-                name: 'Efe Dakara',
-                username: 'efe',
-            },
-        ];
         return [
-            h("div", { key: '9736678afae0690de4ae02ae9013617646c30edd', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`, onClick: () => this.toggleDropdown() }, this.showLabel && (h("p", { key: '676beed8252fbd596ae35becb5d895563cb28b45', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label)), h("div", { key: 'a94ef49c0e3276ba4ee982231f137c86d7f5d02f', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}` }, this.type === 'icon_leading' && (h("svg", { key: 'c1c377f9f71444d0078611049a637ea6e71ec170', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'c3605aaa4f85323484f2800f3a0bbe846681f67d', 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: "#697586", "stroke-width": "1.66667" }), h("path", { key: '0afe87caa69389299c3c5601e084c864af29f1fb', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (h("gb-avatar", { key: '242ac68289485798c5a53d527e7f1cd732a5a8c7', size: "xs", text: this.text, color: "blue" }, !this.text ? h("slot", { slot: "image", name: "image" }) : h("slot", { slot: "initials", name: "initials" }))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: '4d172e8e2f085631d1deedb940f7d367cfd96de5', 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: '049554571ddc80999df9575b268fdc44bc17e548', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: 'dae8b2c4bdf0833f56205c45976eb36029f59b4a', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: '34ea90e622ed4a94d6f8fe09df24935ef784c6da', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '87d129c81649624907bb05be565f5a04a21b5660', class: `content` }, h("div", { key: 'e4650f1c78ef07d4bcef518bcda168ddec92c3fa', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags'
+            h("div", { key: '604955e6f144db56550d707400c9b7e209a70de0', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`, onClick: () => this.toggleDropdown() }, this.showLabel && (h("p", { key: '0764eb1455b609af431a65a2e65b26ed905ed007', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label)), h("div", { key: '9c31b2a7233181b9885f4a2c4cc6df956646652f', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}` }, this.type === 'icon_leading' && (h("svg", { key: '792530d5574ab3789e927f7dc6c4e733ffeaf4d7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'd569309ae9936e02039a74eca06798d3c08b9451', 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: "#697586", "stroke-width": "1.66667" }), h("path", { key: 'ff2637b9dc603ac224d2ddcabe15ace709786395', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: 'c67e54b8d56a69a09b9f88fb562c30e085958694', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '25d8a8725d89601b9a0a00fa608525499d189c06', 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: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: '76f44194ce4a8a6cc69fd0cfa2588b42c8639f5d', 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: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: 'f5b563861733c461e4c24da6ddcc531e1158a5d3', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, h("h1", { key: '23b0d70f85f9cf01bd3b2b1eaa1ed8c0302e1600', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: 'e96eb2c8cf7a434a0edd036f312d8e01c35ed686', 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: '8b0f75b35c9ccee05634c2ffb560b3ff3847ecaa', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: '0af9d002f238107f281a97e034b947bc5fa7f705', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: 'dfee23d8fd357b15732214efdc2805d702f27945', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: 'cfb9547b63a30fac2566b6101aa7d52a734a5d6e', class: `content` }, h("div", { key: 'a12025f90f8676260a6eae319cbc6a39519593ee', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags'
                 ? this.selectedItems.map((item, index) => (h("div", { class: "added_tag" }, h("gb-tag", { size: "sm", icon: "avatar", action: "X_close", key: index, onClick: () => this.handleTagRemove(item) }, 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()))))))
-                : this.selectedItem.name), this.supportingText && (h("div", { key: 'dfde0b3a8b6dbdd89ef130ca7e69fbb18e6a9bbb', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type === 'tags'
+                : this.selectedItem.name), this.supportingText && (h("div", { key: 'eff740799065826380c7bdebfd12484e12f2cc28', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type === 'tags'
                 ? this.selectedItems.map(item => item.username).join(', ') // For multiple selections
-                : this.selectedItem.username))))))), this.showHelpIcon && (h("div", { key: '64b3cd6959b2944d5f7b676f91407c862a9eb6d8', class: `help_icon` }, h("gb-help-tooltip", { key: 'd0b4e9f595f9a862de3603ba048a04c78cb40ac1', "show-supporting-text": true }, h("slot", { key: '941abc3fa8c10e7404578fff07fccc795d93e4f9', name: "tooltip_label", slot: "label" }), h("slot", { key: '167452f219293d965b1c21cd4ca2f085bbfee448', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '4e4771cbd57d54eaa0c794bd4da69f00a8b620d5', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '8a44141b9d150cccb728642bee1c1f3512fbb584', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '6d68087a6f796f8707ed644221e0b76701edfbcd', 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" }))))), this.showHintText && (h("p", { key: '7c30e49a0516b79a3fd9a435dc342ee58c54507f', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
-            h(Fragment, null, this.dropdownOpen && (h("div", { key: 'c585f6146c6c5a2505900fffd013a60173546aeb', class: "dropdown_menu", ref: el => (this.dropdownRef = el) }, items.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: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))))))),
+                : this.selectedItem.username))))))), this.showHelpIcon && (h("div", { key: '2870ea7504509967acbcd39ba3465fd533d918ce', class: `help_icon` }, h("gb-help-tooltip", { key: '6e4e6933225338fe9df589bc4d56cb2641583625', "show-supporting-text": true }, h("slot", { key: 'b036bc135aebbdf8c250e15163309fab8b2ae8ce', name: "tooltip_label", slot: "label" }), h("slot", { key: 'f5e6d10cc499ca220f485d66f1fe88993daa73ba', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '2b80696aecc5d1156daaa47adf4be7b5dc5b9953', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '80be91d508358928487115ded4c126f6fc4b196e', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '507292dab7f45a134c84bbb17acbe5679df56552', 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" }))))), this.showHintText && (h("p", { key: '35b3bef6768acf78fcc8aa4820241b56bb135cfc', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
+            h(Fragment, null, this.dropdownOpen && (h("div", { key: 'f57ee7937f78b377daac688866570ad9aeebb7ec', class: "dropdown_menu", ref: el => (this.dropdownRef = el) }, 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: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username)))), 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: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username)))))) : (h(Fragment, null, this.items.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: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", { slot: "supporting_text" }, "@", item.username))))))))),
         ];
     }
     static get is() { return "gb-input-dropdown"; }
@@ -402,7 +432,7 @@ export class GbInputDropdown {
             },
             "items": {
                 "type": "unknown",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "any[]",
                     "resolved": "any[]",
@@ -433,6 +463,47 @@ export class GbInputDropdown {
                 "attribute": "supporting-text",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarColorTypes",
+                    "resolved": "\"blue\" | \"cyan\" | \"gray\" | \"green\" | \"pink\" | \"purple\" | \"yellow\"",
+                    "references": {
+                        "AvatarColorTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::AvatarColorTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "showBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-border",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -441,14 +512,14 @@ export class GbInputDropdown {
             "leadingIconSvg": {},
             "dropdownOpen": {},
             "selectedItems": {},
-            "selectedItem": {},
-            "isSelected": {}
+            "unselectedItems": {},
+            "selectedItem": {}
         };
     }
     static get events() {
         return [{
-                "method": "value",
-                "name": "value",
+                "method": "dropdownValue",
+                "name": "dropdownValue",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -1 +1 @@
-{"version":3,"file":"gb-input-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown/gb-input-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAChH,OAAO,EAA+B,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOrF,MAAM,OAAO,eAAe;;QA+B1B,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBAClG,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC,qBAAqB;YAClD,CAAC;QACH,CAAC,CAAC;;;;yBA/B2B,KAAK;qBACV,EAAE;2BACI,EAAE;;wBAEL,EAAE;;+BAEM,KAAK;wBACb,EAAE;oBACL,KAAK;2BACC,EAAE;qBACT,EAAE;8BACS,KAAK;8BACL,EAAE;4BACH,KAAK;6BACN,EAAE;;0BAGH,KAAK;;IAMpC,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACjE,CAAC;IAQD,cAAc;QACZ,IAAG,IAAI,CAAC,KAAK,KAAK,UAAU,EAAC,CAAC;YAC5B,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACzC,CAAC;IACH,CAAC;IAED,cAAc,CAAC,YAAY;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;QAC/E,OAAO,KAAK,KAAK,SAAS,CAAC;IAC7B,CAAC;IAED,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,aAAa;QACX,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,SAAgB;QAChC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC7B,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gBAC9B,OAAO,CAAC,CAAC,CAAC,CAAC,yBAAyB;YACtC,CAAC;iBAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACrC,OAAO,CAAC,CAAC,CAAC,6BAA6B;YACzC,CAAC;YACD,OAAO,CAAC,CAAC,CAAC,gDAAgD;QAC5D,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB,CAAC,IAAI;QACnB,kCAAkC;QAElC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;YAEtE,IAAI,UAAU,EAAE,CAAC;gBACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5E,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBACzB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACtC,CAAC;YAED,6DAA6D;YAC7D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QACpE,CAAC;aAAM,CAAC;YACN,4CAA4C;YAC5C,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B;YACzD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,0BAA0B;YACpD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,2BAA2B;YAClD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC,qBAAqB;YAChD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,eAAe,CAAC,IAAI;QAClB,2CAA2C;QAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;QAEhE,sEAAsE;QACtE,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE,CAAC;YACvD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,yDAAyD;QACzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAClC,CAAC;IAED,gBAAgB;QACd,IAAG,IAAI,CAAC,IAAI,KAAK,MAAM,EAAC,CAAC;YACvB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC9D,CAAC;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAEnE,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACrE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAC;QAErF,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAEpD,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAClD,CAAC;QAED,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ;gBACE,IAAI,EAAE,iBAAiB;gBACvB,QAAQ,EAAE,YAAY;aACvB;YACD;gBACE,IAAI,EAAE,iBAAiB;gBACvB,QAAQ,EAAE,QAAQ;aACnB;YACD;gBACE,IAAI,EAAE,eAAe;gBACrB,QAAQ,EAAE,OAAO;aAClB;YACD;gBACE,IAAI,EAAE,YAAY;gBAClB,QAAQ,EAAE,KAAK;aAChB;SACF,CAAC;QAEF,OAAO;YACL,4DAAK,KAAK,EAAE,4BAA4B,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;gBAC9G,IAAI,CAAC,SAAS,IAAI,CACjB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACnD,IAAI,CAAC,KAAK,CACT,CACL;gBACD,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC7F,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAC/B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;wBAC5F,6DACE,CAAC,EAAC,0QAA0Q,EAC5Q,MAAM,EAAC,SAAS,kBACH,SAAS,GACtB;wBACF,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,SAAS,GACtB,CACE,CACP;oBACA,IAAI,CAAC,IAAI,KAAK,gBAAgB,IAAI,CACjC,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,IAC/C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAC3F,CACb;oBACA,IAAI,CAAC,eAAe,IAAI,kBAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAK,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAAC,CAAC,CAAC,IAAI,CAAI;oBACjJ,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,CAC9B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,IAAI,EAAE;wBACtH,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,CACzC,CACP;oBACD,4DAAK,KAAK,EAAC,aAAa;wBACtB;4BACG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B,kBACG,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACnD,IAAI,CAAC,WAAW,CACf,CACL,CACA,CACJ;4BACA,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAC1B;gCACE,4DAAK,KAAK,EAAE,SAAS;oCACnB,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACjG,IAAI,CAAC,IAAI,KAAK,MAAM;wCACnB,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,WAAK,KAAK,EAAC,WAAW;4CACpB,cAAQ,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gDACpG,SAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAK;gDACvD,UAAI,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,oBAAoB,IAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAC5D,CACE,CACL,CACP,CAAC;wCACJ,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CACtB;oCACL,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,iCAAiC,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACrE,IAAI,CAAC,IAAI,KAAK,MAAM;wCACnB,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,0BAA0B;wCACrF,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC1B,CACP,CACG,CACL,CACJ,CACA,CACC;oBACL,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAE,WAAW;wBACrB,gGAAuC,IAAI;4BACzC,6DAAM,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,GAAQ;4BAC/C,6DAAM,IAAI,EAAC,yBAAyB,EAAC,IAAI,EAAC,iBAAiB,GAAQ,CACnD,CACd,CACP;oBACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CACzB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;wBAC9D,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;4BACnH,6DACE,CAAC,EAAC,2EAA2E,EAC7E,MAAM,EAAC,SAAS,kBACH,SAAS,oBACP,OAAO,qBACN,OAAO,GACvB,CACE,CACF,CACP,CACG;gBACL,IAAI,CAAC,YAAY,IAAI,CACpB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACnD,IAAI,CAAC,QAAQ,CACZ,CACL,CACG;YACN,kBACG,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,IAC1D,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,mCACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACzF,KAAK,EAAE,SAAS,CAAC,OAAO,qBACP,IAAI,CAAC,cAAc,EACpC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBAE1C,SAAG,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAK;gBAC9B,SAAG,IAAI,EAAC,iBAAiB;;oBAAG,IAAI,CAAC,QAAQ,CAAK,CAClB,CAC/B,CAAC,CACE,CACP,CACA;SACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Element, State, getAssetPath, Event, EventEmitter } from \"@stencil/core\";\r\nimport { DropdownTypes, GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown',\r\n  styleUrl: 'gb-input-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdown {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop({ mutable: true }) state: 'default' | 'focused' | 'disabled' | 'filled';\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showHintText: boolean;\r\n  @Prop() hintText: string = '';\r\n  @Prop() showHelpIcon: boolean;\r\n  @Prop() showLeadingIcon: boolean = false;\r\n  @Prop() iconSwap: string = '';\r\n  @Prop() text: boolean = false;\r\n  @Prop() leadingIcon: string = '';\r\n  @Prop() items: any[] = [];\r\n  @Prop() supportingText: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() selectedItems: any[] = [];\r\n  // @State() unselectedItems: any[] = [];\r\n  @State() selectedItem: any;\r\n  @State() isSelected: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() value: EventEmitter<any>;\r\n\r\n  dropdownRef!: HTMLElement;\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleOutsideClick);\r\n  }\r\n\r\n  handleOutsideClick = (event: MouseEvent) => {\r\n    if (this.type === 'tags' && this.dropdownOpen && !this.dropdownRef.contains(event.target as Node)) {\r\n      this.dropdownOpen = false; // Close the dropdown\r\n    }\r\n  };\r\n\r\n  toggleDropdown() {\r\n    if(this.state !== 'disabled'){\r\n      this.dropdownOpen = !this.dropdownOpen;\r\n    }\r\n  }\r\n\r\n  isItemSelected(selectedItem) {\r\n    const found = this.selectedItems.find(item => item.name === selectedItem.name);\r\n    return found !== undefined;\r\n  }\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  getAvatarSize() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'xs';\r\n      case 'md':\r\n        return 'xs';\r\n    }\r\n  }\r\n\r\n  sortDropdownItems(menuItems: any[]): any[] {\r\n    return menuItems.sort((a, b) => {\r\n      if (a.selected && !b.selected) {\r\n        return -1; // Move selected items up\r\n      } else if (!a.selected && b.selected) {\r\n        return 1; // Keep unselected items down\r\n      }\r\n      return 0; // Keep order if both are selected or unselected\r\n    });\r\n  }\r\n\r\n  handleItemSelect(item) {\r\n    // item.selected = !item.selected;\r\n\r\n    if (this.type === 'tags') {\r\n      const itemExists = this.selectedItems.some(i => i.name === item.name);\r\n\r\n      if (itemExists) {\r\n        this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);\r\n      } else {\r\n        this.selectedItem = item;\r\n        this.selectedItems.push(this.selectedItem);\r\n        this.value.emit(this.selectedItems);\r\n      }\r\n\r\n      // Update the state based on whether there are selected items\r\n      this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    } else {\r\n      // For other types, allow only one selection\r\n      this.selectedItems = [item]; // Replace with the new item\r\n      this.selectedItem = item; // Store the selected item\r\n      this.state = 'filled'; // Update state to 'filled'\r\n      this.dropdownOpen = false; // Close the dropdown\r\n      this.value.emit(this.selectedItem);\r\n    }\r\n  }\r\n\r\n  handleTagRemove(item) {\r\n    // Remove the item from selectedItems array\r\n    this.selectedItems = this.selectedItems.filter(i => i !== item);\r\n\r\n    // For non-tags type, set selectedItem to null if that item is removed\r\n    if (this.type !== 'tags' && this.selectedItem === item) {\r\n      this.selectedItem = null;\r\n    }\r\n\r\n    // Update state based on whether there are selected items\r\n    this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.leadingIcon);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if(this.type !== 'tags'){\r\n      document.addEventListener('click', this.handleOutsideClick);\r\n    }\r\n\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n\r\n    slottedInitials.classList.add('text-xxs-semi-bold');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const items = [\r\n      {\r\n        name: 'Emmanuel Kadiri',\r\n        username: 'kadiri2047',\r\n      },\r\n      {\r\n        name: 'Gideon Ogunkola',\r\n        username: 'gideon',\r\n      },\r\n      {\r\n        name: 'Precious Okon',\r\n        username: 'presh',\r\n      },\r\n      {\r\n        name: 'Efe Dakara',\r\n        username: 'efe',\r\n      },\r\n    ];\r\n\r\n    return [\r\n      <div class={`input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`} onClick={() => this.toggleDropdown()}>\r\n        {this.showLabel && (\r\n          <p class=\"text-sm-regular\" style={{ color: '#4B5565' }}>\r\n            {this.label}\r\n          </p>\r\n        )}\r\n        <div class={`input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`}>\r\n          {this.type === 'icon_leading' && (\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=\"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\"\r\n                stroke=\"#697586\"\r\n                stroke-width=\"1.66667\"\r\n              />\r\n              <path\r\n                d=\"M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z\"\r\n                stroke=\"#697586\"\r\n                stroke-width=\"1.66667\"\r\n              />\r\n            </svg>\r\n          )}\r\n          {this.type === 'avatar_leading' && (\r\n            <gb-avatar size=\"xs\" text={this.text} color=\"blue\">\r\n              {!this.text ? <slot slot=\"image\" name=\"image\"></slot> : <slot slot=\"initials\" name=\"initials\"></slot>}\r\n            </gb-avatar>\r\n          )}\r\n          {this.showLeadingIcon && <>{this.type === 'search' || this.type === 'tags' ? <div class={`icon`} innerHTML={this.leadingIconSvg}></div> : null}</>}\r\n          {this.type === 'dot_leading' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" class={`dot ${this.size}`}>\r\n              <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#079455\" />\r\n            </svg>\r\n          )}\r\n          <div class=\"placeholder\">\r\n            <>\r\n              {this.state === 'default' && (\r\n                <>\r\n                  {this.placeholder && (\r\n                    <p class=\"text-md-regular\" style={{ color: '#CDD5DF' }}>\r\n                      {this.placeholder}\r\n                    </p>\r\n                  )}\r\n                </>\r\n              )}\r\n              {this.state === 'filled' && (\r\n                <>\r\n                  <div class={`content`}>\r\n                    <div class={`text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`} style={{ color: '#4B5565' }}>\r\n                      {this.type === 'tags'\r\n                        ? this.selectedItems.map((item, index) => (\r\n                            <div class=\"added_tag\">\r\n                              <gb-tag size=\"sm\" icon=\"avatar\" action=\"X_close\" key={index} onClick={() => this.handleTagRemove(item)}>\r\n                                <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                  {item.name.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n                                </h1>\r\n                              </gb-tag>\r\n                            </div>\r\n                          ))\r\n                        : this.selectedItem.name}\r\n                    </div>\r\n                    {this.supportingText && (\r\n                      <div class=\"supporting_text text-sm-regular\" style={{ color: '#697586' }}>\r\n                        {this.type === 'tags'\r\n                          ? this.selectedItems.map(item => item.username).join(', ') // For multiple selections\r\n                          : this.selectedItem.username}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </>\r\n              )}\r\n            </>\r\n          </div>\r\n          {this.showHelpIcon && (\r\n            <div class={`help_icon`}>\r\n              <gb-help-tooltip show-supporting-text={true}>\r\n                <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n              </gb-help-tooltip>\r\n            </div>\r\n          )}\r\n          {this.type !== 'search' && (\r\n            <div class={`dropdown_icon ${this.dropdownOpen ? 'opened' : ''}`}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n                <path\r\n                  d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                  stroke=\"#697586\"\r\n                  stroke-width=\"1.66667\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.showHintText && (\r\n          <p class=\"text-sm-regular\" style={{ color: '#697586' }}>\r\n            {this.hintText}\r\n          </p>\r\n        )}\r\n      </div>,\r\n      <>\r\n        {this.dropdownOpen && (\r\n          <div class=\"dropdown_menu\" ref={el => (this.dropdownRef = el)}>\r\n            {items.map(item => (\r\n              <gb-input-dropdown-menu-item\r\n                type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                state={StateEnum.Default}\r\n                supporting-text={this.supportingText}\r\n                selected={this.isItemSelected(item)}\r\n                onClick={() => this.handleItemSelect(item)}\r\n              >\r\n                <p slot=\"name\">{item.name}</p>\r\n                <p slot=\"supporting_text\">@{item.username}</p>\r\n              </gb-input-dropdown-menu-item>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </>,\r\n    ];\r\n  }\r\n}    \r\n        "]}
+{"version":3,"file":"gb-input-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown/gb-input-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Fragment, Element, State, getAssetPath, Event, EventEmitter } from \"@stencil/core\";\r\nimport { AvatarColorTypes, DropdownTypes, GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown',\r\n  styleUrl: 'gb-input-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdown {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop({ mutable: true }) state: 'default' | 'focused' | 'disabled' | 'filled';\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showHintText: boolean;\r\n  @Prop() hintText: string = '';\r\n  @Prop() showHelpIcon: boolean;\r\n  @Prop() showLeadingIcon: boolean = false;\r\n  @Prop() iconSwap: string = '';\r\n  @Prop() text: boolean = false;\r\n  @Prop() leadingIcon: string = '';\r\n  @Prop({ mutable: true }) items: any[] = [];\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() selectedItems: any[] = [];\r\n  @State() unselectedItems: any[] = [];\r\n  @State() selectedItem: any;\r\n  @Element() el: HTMLElement;\r\n  @Event() dropdownValue: EventEmitter<any>;\r\n\r\n  dropdownRef!: HTMLElement;\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleOutsideClick);\r\n  }\r\n\r\n  handleOutsideClick = (event: MouseEvent) => {\r\n    if (this.type === 'tags' && this.dropdownOpen && !this.dropdownRef.contains(event.target as Node)) {\r\n      this.dropdownOpen = false; // Close the dropdown\r\n    }\r\n  };\r\n\r\n  toggleDropdown() {\r\n    if (this.state !== 'disabled') {\r\n      this.dropdownOpen = !this.dropdownOpen;\r\n    }\r\n  }\r\n\r\n  isItemSelected(selectedItem) {\r\n    const found = this.selectedItems.find(item => item.name === selectedItem.name);\r\n    return found !== undefined;\r\n  }\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  getAvatarSize() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'xs';\r\n      case 'md':\r\n        return 'xs';\r\n    }\r\n  }\r\n\r\n  sortDropdownItems(menuItems: any[]): any[] {\r\n    return menuItems.sort((a, b) => {\r\n      if (a.selected && !b.selected) {\r\n        return -1; // Move selected items up\r\n      } else if (!a.selected && b.selected) {\r\n        return 1; // Keep unselected items down\r\n      }\r\n      return 0; // Keep order if both are selected or unselected\r\n    });\r\n  }\r\n\r\n  handleItemSelect(item) {\r\n    // item.selected = !item.selected;\r\n\r\n    if (this.type === 'tags') {\r\n      const itemExists = this.selectedItems.some(i => i.name === item.name);\r\n\r\n      if (itemExists) {\r\n        this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);\r\n        item.selected = false;\r\n\r\n        if (!this.unselectedItems.includes(item)) {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n      } else {\r\n        this.selectedItem = item;\r\n        item.selected = true;\r\n        this.selectedItems.push(this.selectedItem);\r\n        if (item.selected) {\r\n          this.unselectedItems = this.unselectedItems.filter(unselectedItem => unselectedItem !== item);\r\n        } else {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n        this.dropdownValue.emit(this.selectedItems);\r\n      }\r\n\r\n      // Update the state based on whether there are selected items\r\n      this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    } else {\r\n      // For other types, allow only one selection\r\n      this.selectedItems = [item]; // Replace with the new item\r\n      this.selectedItem = item; // Store the selected item\r\n      this.state = 'filled'; // Update state to 'filled'\r\n      this.dropdownOpen = false; // Close the dropdown\r\n      this.dropdownValue.emit(this.selectedItem);\r\n    }\r\n  }\r\n\r\n  handleTagRemove(item) {\r\n    // Remove the item from selectedItems array\r\n    if (this.type === 'tags') {\r\n      const itemExists = this.selectedItems.some(i => i.name === item.name);\r\n\r\n      if (itemExists) {\r\n        this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);\r\n        item.selected = false;\r\n\r\n        if (!this.unselectedItems.includes(item)) {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n      }\r\n\r\n      // Update the state based on whether there are selected items\r\n      this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    }\r\n\r\n    // For non-tags type, set selectedItem to null if that item is removed\r\n    if (this.type !== 'tags' && this.selectedItem === item) {\r\n      this.selectedItem = null;\r\n    }\r\n\r\n    // Update state based on whether there are selected items\r\n    this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.leadingIcon);\r\n\r\n    const items = [\r\n      { name: 'Emmanuel Kadiri', selected: false },\r\n      { name: 'Gideon Ogunkola', selected: false },\r\n    ];\r\n\r\n    this.items = items;\r\n    this.unselectedItems = this.items.filter(item => !item.selected);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.type !== 'tags') {\r\n      document.addEventListener('click', this.handleOutsideClick);\r\n    }\r\n\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n\r\n    slottedInitials.classList.add('text-xxs-semi-bold');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\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  render() {\r\n    return [\r\n      <div class={`input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`} onClick={() => this.toggleDropdown()}>\r\n        {this.showLabel && (\r\n          <p class=\"text-sm-regular\" style={{ color: '#4B5565' }}>\r\n            {this.label}\r\n          </p>\r\n        )}\r\n        <div class={`input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`}>\r\n          {this.type === 'icon_leading' && (\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=\"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\"\r\n                stroke=\"#697586\"\r\n                stroke-width=\"1.66667\"\r\n              />\r\n              <path\r\n                d=\"M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z\"\r\n                stroke=\"#697586\"\r\n                stroke-width=\"1.66667\"\r\n              />\r\n            </svg>\r\n          )}\r\n          {this.type === 'avatar_leading' && (\r\n            <>\r\n              {this.state === 'default' && (\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=\"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\"\r\n                    stroke=\"#4B5565\"\r\n                    stroke-width=\"1.66667\"\r\n                  />\r\n                  <path\r\n                    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\"\r\n                    stroke=\"#4B5565\"\r\n                    stroke-width=\"1.66667\"\r\n                  />\r\n                </svg>\r\n              )}\r\n              {this.state === 'filled' && (\r\n                <gb-avatar size=\"xs\" text={this.text} color={this.color} show-border={this.showBorder}>\r\n                  <h1 slot=\"initials\">{this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                </gb-avatar>\r\n              )}\r\n            </>\r\n          )}\r\n          {this.showLeadingIcon && <>{this.type === 'search' || this.type === 'tags' ? <div class={`icon`} innerHTML={this.leadingIconSvg}></div> : null}</>}\r\n          {this.type === 'dot_leading' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" class={`dot ${this.size}`}>\r\n              <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#079455\" />\r\n            </svg>\r\n          )}\r\n          <div class=\"placeholder\">\r\n            <>\r\n              {this.state === 'default' && (\r\n                <>\r\n                  {this.placeholder && (\r\n                    <p class=\"text-md-regular\" style={{ color: '#CDD5DF' }}>\r\n                      {this.placeholder}\r\n                    </p>\r\n                  )}\r\n                </>\r\n              )}\r\n              {this.state === 'filled' && (\r\n                <>\r\n                  <div class={`content`}>\r\n                    <div class={`text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`} style={{ color: '#4B5565' }}>\r\n                      {this.type === 'tags'\r\n                        ? this.selectedItems.map((item, index) => (\r\n                            <div class=\"added_tag\">\r\n                              <gb-tag size=\"sm\" icon=\"avatar\" action=\"X_close\" key={index} onClick={() => this.handleTagRemove(item)}>\r\n                                <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                  {item.name.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n                                </h1>\r\n                              </gb-tag>\r\n                            </div>\r\n                          ))\r\n                        : this.selectedItem.name}\r\n                    </div>\r\n                    {this.supportingText && (\r\n                      <div class=\"supporting_text text-sm-regular\" style={{ color: '#697586' }}>\r\n                        {this.type === 'tags'\r\n                          ? this.selectedItems.map(item => item.username).join(', ') // For multiple selections\r\n                          : this.selectedItem.username}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </>\r\n              )}\r\n            </>\r\n          </div>\r\n          {this.showHelpIcon && (\r\n            <div class={`help_icon`}>\r\n              <gb-help-tooltip show-supporting-text={true}>\r\n                <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n              </gb-help-tooltip>\r\n            </div>\r\n          )}\r\n          {this.type !== 'search' && (\r\n            <div class={`dropdown_icon ${this.dropdownOpen ? 'opened' : ''}`}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n                <path\r\n                  d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                  stroke=\"#697586\"\r\n                  stroke-width=\"1.66667\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.showHintText && (\r\n          <p class=\"text-sm-regular\" style={{ color: '#697586' }}>\r\n            {this.hintText}\r\n          </p>\r\n        )}\r\n      </div>,\r\n      <>\r\n        {this.dropdownOpen && (\r\n          <div class=\"dropdown_menu\" ref={el => (this.dropdownRef = el)}>\r\n            {this.type === 'tags' ? (\r\n              <>\r\n                {this.selectedItems.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    <p slot=\"name\">{item.name}</p>\r\n                    <p slot=\"supporting_text\">@{item.username}</p>\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n                {this.unselectedItems.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    <p slot=\"name\">{item.name}</p>\r\n                    <p slot=\"supporting_text\">@{item.username}</p>\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n              </>\r\n            ) : (\r\n              <>\r\n                {this.items.map(item => (\r\n                  <gb-input-dropdown-menu-item\r\n                    type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                    state={StateEnum.Default}\r\n                    supporting-text={this.supportingText}\r\n                    selected={this.isItemSelected(item)}\r\n                    color={this.color}\r\n                    onClick={() => this.handleItemSelect(item)}\r\n                  >\r\n                    <p slot=\"name\">{item.name}</p>\r\n                    <h1 slot=\"initials\">{item.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                    <p slot=\"supporting_text\">@{item.username}</p>\r\n                  </gb-input-dropdown-menu-item>\r\n                ))}\r\n              </>\r\n            )}\r\n          </div>\r\n        )}\r\n      </>,\r\n    ];\r\n  }\r\n}    \r\n        "]}

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

@@ -5,11 +5,14 @@ export class GbInputDropdownMenuItem {
         this.supportingText = false;
         this.selected = false;
         this.state = undefined;
+        this.color = undefined;
     }
     componentDidLoad() {
         const nameSlot = this.el.querySelector('[slot="name"]');
         const supportingTextSlot = this.el.querySelector('[slot="supporting_text"]');
+        const initialsSlot = this.el.querySelector('[slot="initials"]');
         nameSlot.classList.add('text-md-medium');
+        initialsSlot.classList.add('text-xs-semi-bold');
         if (supportingTextSlot) {
             supportingTextSlot.classList.add('text-sm-regular');
         }
@@ -17,12 +20,12 @@ export class GbInputDropdownMenuItem {
     render() {
         return (
         // <div class="dropdown-container" onClick={() => (this.selected = !this.selected)}>
-        h("div", { key: 'e5749299a94d1d366c92f0a19ca99b3c2e2a1c7f', class: "dropdown-container" }, h("div", { key: 'e223504e0108d01aa3a63e58794de7fd5a867537', class: {
+        h("div", { key: 'f2fe0c2ee43eb685f0042fb1febb5903695249f9', class: "dropdown-container" }, h("div", { key: '5337aa47c81599b228f3fff1ddfd0a24e927c360', class: {
                 'dropdown-item': true,
                 'dropdown-item--selected': this.selected,
                 'dropdown-item--disabled': this.state === 'disabled',
                 [this.type]: true,
-            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '6c39293ce2cbbff1a34dac306cf04049c5ba4e79', class: "content" }, this.type === 'icon_leading' && (h("svg", { key: '702039dace5fbf5d7ef53d05d8d4876a85865a59', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '5cfcd05a991f42f37db29c0d9d163954ee45bc45', 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: '4e93333e15e773db69dd0c5d7734724aad11785e', 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: '405cce88c937fa5ad8d6441111b20bd9b35ce527', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("slot", { key: 'acd1d89ced10bbca56962a4e7b5a9c4c3e7100f3', name: "image", slot: "image" }))), this.type === 'dot_leading' && (h("svg", { key: '0d847a5acdf925109804992db4ffd03345d24a95', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { key: 'd9b621cd0c1a3cc8c3bd04bb37b870241519e317', cx: "5", cy: "5", r: "4", fill: "#17B26A" }))), this.type === 'checkbox' && h("gb-checkbox", { key: 'c5723340a4c4431f314c7003342c9c011a080e22', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '46cd6f6af088d7868e6f9d6d9f0ebf61001343af', name: "name" }), this.supportingText && (h("span", { key: '7d225e9ae5d3f1055a61e6f8898b06debf177900' }, h("slot", { key: '87949302586c4bb7cf4c2fc35f3ff12acd42491c', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: 'dd6825f001e54bfa43437082cd58dadcb5093828', class: `tick` }, h("svg", { key: '0b07350c37ddcf7711569c51fb666460d61c1df1', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '05fcf6c24b08efbbfe8703ff9f850dd65cfc565e', 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" })))))));
+            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '1597713c402baeb9ae422504225a7cbacef7d430', class: "content" }, this.type === 'icon_leading' && (h("svg", { key: 'fd9eed22338505a51fca0ce1c5f126d919447b9e', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '4f92d7e7639391f4970d8beca051975dff9a315f', 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: '36265413f9d1f9c14fe9ce8373368dd605315a88', 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: '7f879f9b4edd09ba76768864ef9fce1bb669104b', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: '3dff3e881d806922c6ee2496d48c60b6bd6a752f', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h("svg", { key: 'dc548fcf7b64e0eb8ccc9dbb2679d4136f24fbc5', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { key: '37d15d296f0ffda4c32d23b46b40723f4fd6cc54', cx: "5", cy: "5", r: "4", fill: "#17B26A" }))), this.type === 'checkbox' && h("gb-checkbox", { key: '3f0bb2acd7705a362a7c77f4b43b8003d54038f3', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '4ae71936d10346af1593774816ea92ec3e20a418', name: "name" }), this.supportingText && (h("span", { key: '302a8bafaafd970cd9eff57765dc172aa0298628' }, h("slot", { key: 'a3cb831abdfbc0195dacde681e6d51ec85c1ce2f', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: '32638fc26ea2669c330595325d7bde45e97a4fad', class: `tick` }, h("svg", { key: '2efd2ddef524eacc3e40ee48fbf93da3843f1f96', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'd429896b6cd5cfcbe8234e641871508477d86db8', 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" })))))));
     }
     static get is() { return "gb-input-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -119,6 +122,29 @@ export class GbInputDropdownMenuItem {
                 },
                 "attribute": "state",
                 "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarColorTypes",
+                    "resolved": "\"blue\" | \"cyan\" | \"gray\" | \"green\" | \"pink\" | \"purple\" | \"yellow\"",
+                    "references": {
+                        "AvatarColorTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::AvatarColorTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
             }
         };
     }