globuswebcomponents 0.6.8 → 0.6.9

package/dist/cjs/gb-avatar-label-group.cjs.entry.js

@@ -17,6 +17,7 @@ const GbAvatarLabelGroup = class {
         this.placeholder = false;
         this.text = false;
         this.color = undefined;
+        this.showBorder = false;
     }
     getInitialsSize() {
         switch (this.size) {
@@ -60,13 +61,20 @@ const GbAvatarLabelGroup = class {
     }
     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() {
@@ -85,7 +93,7 @@ const GbAvatarLabelGroup = class {
         }
     }
     render() {
-        return (index.h("div", { key: '0b5a65941e71dd6023efae449adefceabd72dc86', class: `label ${this.size}` }, index.h("div", { key: '0da70b8e2f8e68b73e20c858e7ae57e64e4b5415', class: "label_pic" }, index.h("gb-avatar", { key: '2080d70a92e186a2e41eba3176b876c12a5a43e8', size: this.size, "status-icon": this.statusIcon, state: this.state, text: this.text, placeholder: this.placeholder, color: this.color }, !this.text ? index.h("slot", { name: "image", slot: "image" }) : index.h("slot", { name: "initials", slot: "initials" }))), index.h("div", { key: '50f18fb225e2940de89761285b5c6a5860bacdf4', class: "label_text" }, index.h("slot", { key: '1038f0e46e818fcc470ab5de97387ed520f0a1da', name: "name" }), index.h("slot", { key: 'f44e9b9080a4eb2b9e49cd64c25969d37c3b1d70', name: "supporting_text" }))));
+        return (index.h("div", { key: '5f2c54ae558d8814641dc255ec5ffc0c25760514', class: `label ${this.size}` }, index.h("div", { key: '3383b3072f0e63411aec7d6be9a713f2cb25f5f2', class: "label_pic" }, index.h("gb-avatar", { key: 'e8f295e79f31ca07ccd8a335206b5b8310f5e16b', size: this.size, "status-icon": this.statusIcon, state: this.state, text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder }, !this.text ? index.h("slot", { name: "image", slot: "image" }) : index.h("slot", { name: "initials", slot: "initials" }))), index.h("div", { key: 'bdb214547b65670913878c095c5676666b467134', class: "label_text" }, index.h("slot", { key: '1d95e060dac41a698b01afd9644901f3eefb4c00', name: "name" }), index.h("slot", { key: '6c4200a6f96884db8c756ac5f7e3b31c5f89691d', name: "supporting_text" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/gb-avatar-label-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gb-avatar-label-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,qBAAqB,GAAG,i0qEAAi0qE,CAAC;AACh2qE,iCAAe,qBAAqB;;MCOvB,kBAAkB;;;;0BAEA,EAAE;qBACQA,oCAAqB,CAAC,MAAM;2BACpC,KAAK;oBACZ,KAAK;;;IAI7B,eAAe;QACb,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,sBAAsB,CAAC;YAChC,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;SAC9B;KACF;IAED,WAAW;QACT,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;SAC9B;KACF;IAED,gBAAgB;QACd,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;SAC5B;KACF;IAED,oBAAoB;QACd,QAAO,IAAI,CAAC,KAAK;YACb,KAAK,MAAM,EAAE,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,EAAE,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,EAAE,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,EAAE,OAAO,MAAM,CAAC;YAC3B,KAAK,QAAQ,EAAE,OAAO,QAAQ,CAAC;YAC/B,KAAK,OAAO,EAAE,OAAO,OAAO,CAAC;YAC7B,KAAK,QAAQ,EAAE,OAAO,QAAQ,CAAC;SAClC;KACJ;IAEH,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACxD,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAErE,IAAI,eAAe,EAAE;YACnB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;YACtD,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SAC5D;QAED,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;SAC5C;QAED,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;SACnD;KACF;IAED,MAAM;QACJ,QACEC,kEAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,EAAE,IAC9BA,kEAAK,KAAK,EAAC,WAAW,IACpBA,wEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAe,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAC3I,CAAC,IAAI,CAAC,IAAI,GAAGA,kBAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,GAAGA,kBAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAC3F,CACR,EACNA,kEAAK,KAAK,EAAC,YAAY,IACrBA,mEAAM,IAAI,EAAC,MAAM,GAAQ,EACzBA,mEAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,CACF,EACN;KACH;;;;;;;","names":["OnlineIndicatorStates","h"],"sources":["src/components/gb-avatar-label-group/gb-avatar-label-group.css?tag=gb-avatar-label-group&encapsulation=shadow","src/components/gb-avatar-label-group/gb-avatar-label-group.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n    width: fit-content;\r\n    height: fit-content;\r\n}\r\n\r\n.label_pic{\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.label{\r\n    width: fit-content;\r\n    display: flex;\r\n    padding: var(--spacing-none);\r\n    border-radius: var(--rounded-none);\r\n}\r\n\r\n/* Label Sizes */\r\n.label.sm{\r\n    gap: 0.625rem;\r\n}\r\n\r\n.label.md{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.label.lg{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.label.xl{\r\n    gap: var(--spacing-4);\r\n}\r\n\r\n.label_text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n::slotted([slot=\"name\"]){\r\n    color: #344054;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]){\r\n    color: #697586;\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-avatar-label-group',\r\n  styleUrl: 'gb-avatar-label-group.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarLabelGroup {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() statusIcon: string = '';\r\n  @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Element() el: HTMLElement;\r\n\r\n  getInitialsSize() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'display-xs-semi-bold';\r\n      case 'xl':\r\n        return 'text-xl-semi-bold';\r\n      case 'lg':\r\n        return 'text-lg-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n    }\r\n  }\r\n\r\n  getNameSize() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-lg-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  getOtherTextSize() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-md-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n    }\r\n  }\r\n\r\n  applyColorToInitials() {\r\n        switch(this.color) {\r\n            case 'gray': return 'gray';\r\n            case 'blue': return 'blue';\r\n            case 'cyan': return 'cyan';\r\n            case 'pink': return 'pink';\r\n            case 'purple': return 'purple';\r\n            case 'green': return 'green';\r\n            case 'yellow': return 'yellow';\r\n        }\r\n    }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const othersSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add(this.getInitialsSize());\r\n      slottedInitials.classList.add(this.applyColorToInitials());\r\n    }\r\n\r\n    if (nameSlot) {\r\n      nameSlot.classList.add(this.getNameSize());\r\n    }\r\n\r\n    if (othersSlot) {\r\n      othersSlot.classList.add(this.getOtherTextSize());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`label ${this.size}`}>\r\n        <div class=\"label_pic\">\r\n          <gb-avatar size={this.size} status-icon={this.statusIcon} state={this.state} text={this.text} placeholder={this.placeholder} color={this.color}>\r\n            {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n          </gb-avatar>\r\n        </div>\r\n        <div class=\"label_text\">\r\n          <slot name=\"name\"></slot>\r\n          <slot name=\"supporting_text\"></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}
+{"file":"gb-avatar-label-group.entry.cjs.js","mappings":"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","names":["OnlineIndicatorStates","h"],"sources":["src/components/gb-avatar-label-group/gb-avatar-label-group.css?tag=gb-avatar-label-group&encapsulation=shadow","src/components/gb-avatar-label-group/gb-avatar-label-group.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n    width: fit-content;\r\n    height: fit-content;\r\n}\r\n\r\n.label_pic{\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.label{\r\n    width: fit-content;\r\n    display: flex;\r\n    padding: var(--spacing-none);\r\n    border-radius: var(--rounded-none);\r\n}\r\n\r\n/* Label Sizes */\r\n.label.sm{\r\n    gap: 0.625rem;\r\n}\r\n\r\n.label.md{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.label.lg{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.label.xl{\r\n    gap: var(--spacing-4);\r\n}\r\n\r\n.label_text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n::slotted([slot=\"name\"]){\r\n    color: #344054;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]){\r\n    color: #697586;\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-avatar-label-group',\r\n  styleUrl: 'gb-avatar-label-group.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarLabelGroup {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() statusIcon: string = '';\r\n  @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  getInitialsSize() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'display-xs-semi-bold';\r\n      case 'xl':\r\n        return 'text-xl-semi-bold';\r\n      case 'lg':\r\n        return 'text-lg-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n    }\r\n  }\r\n\r\n  getNameSize() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-lg-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  getOtherTextSize() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-md-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'sm':\r\n        return '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  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const othersSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add(this.getInitialsSize());\r\n      slottedInitials.classList.add(this.applyColorToInitials());\r\n    }\r\n\r\n    if (nameSlot) {\r\n      nameSlot.classList.add(this.getNameSize());\r\n    }\r\n\r\n    if (othersSlot) {\r\n      othersSlot.classList.add(this.getOtherTextSize());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`label ${this.size}`}>\r\n        <div class=\"label_pic\">\r\n          <gb-avatar\r\n            size={this.size}\r\n            status-icon={this.statusIcon}\r\n            state={this.state}\r\n            text={this.text}\r\n            placeholder={this.placeholder}\r\n            color={this.color}\r\n            show-border={this.showBorder}\r\n          >\r\n            {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n          </gb-avatar>\r\n        </div>\r\n        <div class=\"label_text\">\r\n          <slot name=\"name\"></slot>\r\n          <slot name=\"supporting_text\"></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/cjs/gb-avatar_34.cjs.entry.js

@@ -157,11 +157,11 @@ const GbBadges = class {
     }
     async componentWillLoad() {
         if (this.iconLeadingSwap) {
-            const iconLeadingSrc = index.getAssetPath(`assets/${this.iconLeadingSwap}.svg`);
+            const iconLeadingSrc = index.getAssetPath(`${this.iconLeadingSwap}`);
             this.leadingIconContent = await this.fetchSvgContent(iconLeadingSrc);
         }
         if (this.iconTrailingSwap) {
-            const iconTrailingSrc = index.getAssetPath(`assets/${this.iconTrailingSwap}.svg`);
+            const iconTrailingSrc = index.getAssetPath(`${this.iconTrailingSwap}`);
             this.trailingIconContent = await this.fetchSvgContent(iconTrailingSrc);
         }
     }
@@ -200,7 +200,7 @@ const GbBadges = class {
         };
         const flagSwap = index.getAssetPath(`assets/${this.flagSwap}.svg`);
         const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';
-        return (index.h("div", { key: 'b7a34ef8ca29d33bb5f38e58cdffb9edf7bed272', class: classes }, this.icon === 'dot' && (index.h("svg", { key: 'd21ee30850227a486bc1de1e1eadb57664ad18ed', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: dotColor }, index.h("circle", { key: 'a43b0b2888270b7f2092398689d50c935017c39c', cx: "4", cy: "4", r: "3" }))), this.icon === 'icon_leading' && this.iconLeadingSwap && (index.h("div", { key: '977d0793bfae6564e5b080d0daa37ec256eff086', class: "icon left-icon", innerHTML: this.leadingIconContent, style: { color: this.color } })), this.icon === 'country' && (index.h("div", { key: '17cb13147d778ee1476cdff5d3a461d0dfe85db3', class: "icon left-icon" }, index.h("img", { key: '284411201af640d82bd3f0d859e4687ace2c2750', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (index.h("gb-avatar", { key: '48e8a2ad284b63546a2235ba88b01a65d42cad34', class: "avatar-icon", size: "xxs", "status-icon": "false" }, index.h("slot", { key: 'd2090648ba63f7b23977cc71f3b8fd2a3b230978', name: 'image', slot: 'image' }))), this.icon !== 'only' && (index.h("slot", { key: 'f49e95dbf1b39a9a45ed1e484f6af23b6cb74180' })), this.icon === 'icon_trailing' && this.iconTrailingSwap && (index.h("div", { key: 'd9db02c3a2fa0c24473291f263b03fe314039652', class: "icon right-icon", innerHTML: this.trailingIconContent, style: { color: this.color } })), this.icon === 'only' && (index.h("div", { key: '6a2a38d82211c5ec7610e65738124079f65b24f8', id: "icon-only" }, index.h("svg", { key: '104beeb6549d4d7572682b2741602c31533d779e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", stroke: dotColor }, index.h("path", { key: '6de6e8a308446829a26b3d4a73f3ba39af1e2cac', d: "M6 2L6 10M10 6L2 6", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.closeButton && this.icon !== 'only' && index.h("gb-badge-close", { key: 'cb8437b24aa42ea9a2674d0db28d6c800e2ec05c', color: this.color, type: 'rounded' })));
+        return (index.h("div", { key: '45af5d2f8b7c78e5e237e4ec4771b4441e15b999', class: classes }, this.icon === 'dot' && (index.h("svg", { key: 'fba45c432a7bb3190749998720b7b8f1abb2954d', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: dotColor }, index.h("circle", { key: 'c3f9ce8cb0bcad1a39ac8e15e17791f13dbed873', cx: "4", cy: "4", r: "3" }))), this.icon === 'icon_leading' && this.iconLeadingSwap && (index.h("div", { key: 'd70a64412590e83b9c16e7f840a1ae49c6f7457e', class: "icon left-icon", innerHTML: this.leadingIconContent, style: { color: this.color } })), this.icon === 'country' && (index.h("div", { key: '4bcb7f6b78253798479ac9cd6e7b9c88202d7cfa', class: "icon left-icon" }, index.h("img", { key: '0d40cca9830b5df802a9d420bc485b3c42cc952c', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (index.h("gb-avatar", { key: '67c5be2a265e102ff3c513b0d63c3aa8db0100af', class: "avatar-icon", size: "xxs", "status-icon": "false" }, index.h("slot", { key: 'fa6da772e76c5e4bbc750973cc535f812ccd72a8', name: 'image', slot: 'image' }))), this.icon !== 'only' && (index.h("slot", { key: '44c7a0ef932029d7fe049618dd626c5003a4ee2f' })), this.icon === 'icon_trailing' && this.iconTrailingSwap && (index.h("div", { key: '8f06af2f78c728435b0afddfa32034ecc5e356bf', class: "icon right-icon", innerHTML: this.trailingIconContent, style: { color: this.color } })), this.icon === 'only' && (index.h("div", { key: '5d4c9551182accd07664e4b823a06759d43a901d', id: "icon-only" }, index.h("svg", { key: 'efef2c9c7616288bb61340df2c69eb74c4765777', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", stroke: dotColor }, index.h("path", { key: '9a1a90e2809cb7a6389e318c4b5d39d426955289', d: "M6 2L6 10M10 6L2 6", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.closeButton && this.icon !== 'only' && index.h("gb-badge-close", { key: 'b3255ce45fd36c910491fef7393bd92fd3e8940c', color: this.color, type: 'rounded' })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -883,11 +883,6 @@ const GbInputDropdown = class {
     }
     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() {
@@ -925,12 +920,12 @@ const GbInputDropdown = class {
     }
     render() {
         return [
-            index.h("div", { key: '604955e6f144db56550d707400c9b7e209a70de0', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`, onClick: () => this.toggleDropdown() }, this.showLabel && (index.h("p", { key: '0764eb1455b609af431a65a2e65b26ed905ed007', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label)), index.h("div", { key: '9c31b2a7233181b9885f4a2c4cc6df956646652f', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}` }, this.type === 'icon_leading' && (index.h("svg", { key: '792530d5574ab3789e927f7dc6c4e733ffeaf4d7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.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" }), index.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' && (index.h(index.Fragment, null, this.state === 'default' && (index.h("svg", { key: 'c67e54b8d56a69a09b9f88fb562c30e085958694', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.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" }), index.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' && (index.h("gb-avatar", { key: 'f5b563861733c461e4c24da6ddcc531e1158a5d3', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, index.h("h1", { key: '23b0d70f85f9cf01bd3b2b1eaa1ed8c0302e1600', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && index.h(index.Fragment, null, this.type === 'search' || this.type === 'tags' ? index.h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (index.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}` }, index.h("circle", { key: '8b0f75b35c9ccee05634c2ffb560b3ff3847ecaa', cx: "5", cy: "5", r: "4", fill: "#079455" }))), index.h("div", { key: '0af9d002f238107f281a97e034b947bc5fa7f705', class: "placeholder" }, index.h(index.Fragment, null, this.state === 'default' && (index.h(index.Fragment, null, this.placeholder && (index.h("p", { key: 'dfee23d8fd357b15732214efdc2805d702f27945', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (index.h(index.Fragment, null, index.h("div", { key: 'cfb9547b63a30fac2566b6101aa7d52a734a5d6e', class: `content` }, index.h("div", { key: 'a12025f90f8676260a6eae319cbc6a39519593ee', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags'
+            index.h("div", { key: '679b08398b4b536c1725fb601466be08c8b36e05', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`, onClick: () => this.toggleDropdown() }, this.showLabel && (index.h("p", { key: 'feea424318e05f8d0ca7e8b03da88de38fae44bd', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label)), index.h("div", { key: '1d194f7246649276c49c7fbc554a2c97f0d4dc5b', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}` }, this.type === 'icon_leading' && (index.h("svg", { key: '50abce30b951a18480806bc219075390998d6cfc', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'e14374493a2907b9dda0353a3b931bf80c5e1e31', 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" }), index.h("path", { key: '4ab63cefa1102649555064b24047240542953f47', 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' && (index.h(index.Fragment, null, this.state === 'default' && (index.h("svg", { key: 'fba48a44bd89c3e53d5e01baf7c51f255159e274', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'b69669fd422a66767067e453db935564b6838307', 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" }), index.h("path", { key: 'a17ad338139ed124e2179c2619966c7d1af03ebb', 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' && (index.h("gb-avatar", { key: '8f59a66ebac4f52e222e4b8a6d871dd3a16d21ea', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, index.h("h1", { key: '37288df14c5b8a096009aea43de856aefd684b2b', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && index.h(index.Fragment, null, this.type === 'search' || this.type === 'tags' ? index.h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (index.h("svg", { key: '7057af2fc2a4c2b820834a7b35ed5a8ffcd69542', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, index.h("circle", { key: 'bd604721134819005ac06d82cc5018d870b39fbe', cx: "5", cy: "5", r: "4", fill: "#079455" }))), index.h("div", { key: '8833ed6a613b342fb8d62938e358043d264a027c', class: "placeholder" }, index.h(index.Fragment, null, this.state === 'default' && (index.h(index.Fragment, null, this.placeholder && (index.h("p", { key: '90fe3baaa705b1a8d32ee6ff0015060a70aacfc1', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (index.h(index.Fragment, null, index.h("div", { key: 'c3ebb4fbd985d87d21bf8fd758b7e26e92a7b20a', class: `content` }, index.h("div", { key: 'a0644db1242c2d586c80d69db79dc2ea5204c08f', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags'
                 ? this.selectedItems.map((item, index$1) => (index.h("div", { class: "added_tag" }, index.h("gb-tag", { size: "sm", icon: "avatar", action: "X_close", key: index$1, onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))))))
-                : this.selectedItem.name), this.supportingText && (index.h("div", { key: 'eff740799065826380c7bdebfd12484e12f2cc28', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type === 'tags'
+                : this.selectedItem.name), this.supportingText && (index.h("div", { key: '58492296fb9c05f7547a85b10883f454672a04e4', 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 && (index.h("div", { key: '2870ea7504509967acbcd39ba3465fd533d918ce', class: `help_icon` }, index.h("gb-help-tooltip", { key: '6e4e6933225338fe9df589bc4d56cb2641583625', "show-supporting-text": true }, index.h("slot", { key: 'b036bc135aebbdf8c250e15163309fab8b2ae8ce', name: "tooltip_label", slot: "label" }), index.h("slot", { key: 'f5e6d10cc499ca220f485d66f1fe88993daa73ba', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (index.h("div", { key: '2b80696aecc5d1156daaa47adf4be7b5dc5b9953', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, index.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}` }, index.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 && (index.h("p", { key: '35b3bef6768acf78fcc8aa4820241b56bb135cfc', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
-            index.h(index.Fragment, null, this.dropdownOpen && (index.h("div", { key: 'f57ee7937f78b377daac688866570ad9aeebb7ec', class: "dropdown_menu", ref: el => (this.dropdownRef = el) }, this.type === 'tags' ? (index.h(index.Fragment, null, this.selectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username)))), this.unselectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username)))))) : (index.h(index.Fragment, null, this.items.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, index.h("p", { slot: "name" }, item.name), index.h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", { slot: "supporting_text" }, "@", item.username))))))))),
+                : this.selectedItem.username))))))), this.showHelpIcon && (index.h("div", { key: 'b6238e0c9731dcc90bd1e4738188364b2b637e81', class: `help_icon` }, index.h("gb-help-tooltip", { key: '09f2a75b7fa21444e000b98054a27de68a438325', "show-supporting-text": true }, index.h("slot", { key: '76251b8d67c511ee5ccb6eade713faf4f522d38e', name: "tooltip_label", slot: "label" }), index.h("slot", { key: 'a13d3fa92709fdac4a7bb1b04190ceb7d3f903f2', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (index.h("div", { key: '9d3ebdfb83c61d61d85dca2f423fd5d365eeb3e2', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, index.h("svg", { key: 'c40c86bb4bdfb90d8058d24a59af7a19c885e30f', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, index.h("path", { key: '6c901311ee0e8b95b6023eaa5f62942301a0a8a3', 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 && (index.h("p", { key: 'ef925e7e67dff7bc7e9d6c0c4ce4a884e39bb9fa', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
+            index.h(index.Fragment, null, this.dropdownOpen && (index.h("div", { key: 'a19904ee14c16841c0e32adc102402f0e96d3632', class: "dropdown_menu", ref: el => (this.dropdownRef = el) }, this.type === 'tags' ? (index.h(index.Fragment, null, this.selectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username)))), this.unselectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username)))))) : (index.h(index.Fragment, null, this.items.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, index.h("p", { slot: "name" }, item.name), index.h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", { slot: "supporting_text" }, "@", item.username))))))))),
         ];
     }
     get el() { return index.getElement(this); }