globuswebcomponents 0.5.1 → 0.5.3

package/dist/collection/components/gb-button/gb-button.css

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */
@@ -2979,4 +2981,10 @@ button.link_color.disabled{
 
 .center{
   flex-grow: 1;
+}
+
+button.lefticon,
+button.righticon{
+  justify-content: center;
+  gap: var(--spacing-2);
 }

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

@@ -49,7 +49,9 @@ export class GbButton {
             destructive: this.destructive,
             disabled: this.state === 'disabled',
             default: this.icon === 'default',
-            only: this.icon === 'only'
+            only: this.icon === 'only',
+            lefticon: this.iconLeading,
+            righticon: this.iconTrailing
         };
     }
     getButtonTextClasses() {
@@ -68,7 +70,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: '36326b0a11edf87336bd819ec8fc61fc6c683a9d', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '48bf204ba70afdc72601af259ba616c1c6281e79' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: '64cee60b1f4d9d8377e5701d05f8efa19d11a62f', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: 'c9154cf09451d4e1f0f50b3a5056ee65fca08252' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
     }
     static get is() { return "gb-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() hierarchy: GeneralHierarchies;\r\n  @Prop() icon: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n\r\n    if (!this.iconLeading && !this.iconTrailing) {\r\n      buttonSlot.classList.add('center');\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only'\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n        case 'xl2' : return 'text-lg-semi-bold';\r\n        case 'xl' : return 'text-md-semi-bold';\r\n        case 'lg' : return 'text-md-semi-bold';\r\n        case 'md' : return 'text-sm-semi-bold';\r\n        case 'sm' : return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() hierarchy: GeneralHierarchies;\r\n  @Prop() icon: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n\r\n    if (!this.iconLeading && !this.iconTrailing) {\r\n      buttonSlot.classList.add('center');\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      lefticon: this.iconLeading,\r\n      righticon: this.iconTrailing\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n        case 'xl2' : return 'text-lg-semi-bold';\r\n        case 'xl' : return 'text-md-semi-bold';\r\n        case 'lg' : return 'text-md-semi-bold';\r\n        case 'md' : return 'text-sm-semi-bold';\r\n        case 'sm' : return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-button/gb-button.tsx

@@ -61,7 +61,9 @@ export class GbButton {
       destructive: this.destructive,
       disabled: this.state === 'disabled',
       default: this.icon === 'default',
-      only: this.icon === 'only'
+      only: this.icon === 'only',
+      lefticon: this.iconLeading,
+      righticon: this.iconTrailing
     };
   }
 

package/dist/collection/components/gb-button-close/gb-button-close.css

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

package/dist/collection/components/gb-carousel-arrow/gb-carousel-arrow.css

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

package/dist/collection/components/gb-checkbox-group-item/gb-checkbox-group-item.css

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

package/dist/collection/components/gb-collapse-button/gb-collapse-button.css

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

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

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

package/dist/collection/components/gb-file-upload-item-base/gb-file-upload-item-base.css

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

package/dist/collection/components/gb-header-icon/gb-header-icon.css

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

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

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.css

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */

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

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */
@@ -2672,16 +2674,25 @@
     margin-top: -0.416em;
 }
 
+:host{
+    width: 100%;
+    position: relative;
+}
+
 .input_dropdown_div{
     display: flex;
     align-items: center;
-    width: fit-content;
     border-radius: 0.5rem;
     gap: var(--spacing-3);
     border: 1px solid var(--color-border-input, #CDD5DF);
     background-color: var(--color-background-card, #FFFFFF);
     padding: var(--spacing-none) var(--spacing-3);
     cursor: pointer;
+    margin: var(--spacing-2) 0;
+}
+
+.input_dropdown_container.tag{
+    min-height: 3rem;
 }
 
 /* Size Styles */
@@ -2716,7 +2727,7 @@
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
-    width: 200px;
+    width: 100%;
     white-space: nowrap;
     overflow: hidden;
 }
@@ -2724,7 +2735,19 @@
 .content{
     display: flex;
     gap: var(--spacing-2);
-    padding: 0.2rem;
+}
+
+.text.tag{
+    display: flex;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex-wrap: wrap;
+    gap: 0.38rem;
+    padding: 0.4rem 0;
+}
+
+.tag{
+    flex-grow: 1;
 }
 
 .help_icon{
@@ -2740,4 +2763,38 @@
 
 svg.disabled path{
     stroke: var(--color-icon-disabled, #CDD5DF);
+}
+
+.dropdown_menu{
+    display: flex;
+    width: 100%;
+    padding: var(--spacing-none);
+    flex-direction: column;
+    align-items: flex-start;
+    align-items: stretch;
+    border-radius: var(--rounded-sm);
+    border: 1px solid var(--color-border-subtler, #E3E8EF);
+    background: var(--color-surface, #FFFFFF);
+    box-shadow: var(--shadow-sm);
+    position: absolute;
+    top: 75%;
+    z-index: 10;
+    gap: var(--spacing-none);
+}
+
+/* .input_dropdown_div.sm.tag{
+    min-height: 2.5rem;
+} */
+
+.input_dropdown_div.tag{
+    min-height: 3rem;
+    height: fit-content;
+}
+
+.input_dropdown_div.md.tag{
+    min-height: 2.5rem;
+}
+
+.input_dropdown_div.md.tag{
+    min-height: 3rem;
 }

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

@@ -1,4 +1,5 @@
-import { h, Fragment } from "@stencil/core";
+import { h, Fragment, getAssetPath } from "@stencil/core";
+import { StateEnum } from "../../models/reusableModels";
 export class GbInputDropdown {
     constructor() {
         this.type = undefined;
@@ -11,8 +12,26 @@ export class GbInputDropdown {
         this.showHintText = undefined;
         this.hintText = '';
         this.showHelpIcon = undefined;
+        this.showLeadingIcon = false;
         this.iconSwap = '';
         this.text = false;
+        this.leadingIcon = '';
+        this.items = [];
+        this.supportingText = false;
+        this.leadingIconSvg = '';
+        this.dropdownOpen = false;
+        this.selectedItems = [];
+        this.selectedItem = undefined;
+        this.isSelected = false;
+    }
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    async loadIcon(iconName) {
+        const iconPath = getAssetPath(`${iconName}`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        this.leadingIconSvg = svg;
     }
     getAvatarSize() {
         switch (this.size) {
@@ -22,13 +41,87 @@ export class GbInputDropdown {
                 return 'xs';
         }
     }
+    handleItemSelect(item) {
+        if (this.type === 'tags') {
+            // For 'tags', allow multiple selections
+            if (this.selectedItems.includes(item)) {
+                // Deselect if already selected
+                this.selectedItems = this.selectedItems.filter(i => i !== item);
+            }
+            else {
+                // Add to selected items
+                this.selectedItem = item;
+                this.selectedItems = [...this.selectedItems, this.selectedItem];
+            }
+            // Update state based on whether there are selected items
+            this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
+        }
+        else {
+            // For other types, allow only one selection
+            this.selectedItems = [item]; // Only one item in selectedItems
+            this.selectedItem = item; // Store the selected item
+            this.state = 'filled'; // Update state to 'filled'
+            this.dropdownOpen = false; // Close the dropdown after selection
+        }
+    }
+    isItemSelected() {
+        if (this.type === 'tags') {
+            this.selectedItems.map(item => {
+                if (this.selectedItem === item) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            });
+        }
+    }
+    handleTagRemove(item) {
+        // Remove the item from selectedItems array
+        this.selectedItems = this.selectedItems.filter(i => i !== item);
+        // For non-tags type, set selectedItem to null if that item is removed
+        if (this.type !== 'tags' && this.selectedItem === item) {
+            this.selectedItem = null;
+        }
+        // Update state based on whether there are selected items
+        this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
+    }
+    componentWillLoad() {
+        this.loadIcon(this.leadingIcon);
+    }
     componentDidLoad() {
         const slottedInitials = this.el.querySelector('[slot="initials"]');
         slottedInitials.classList.add('text-xs-semi-bold');
     }
     render() {
-        return (h("div", { key: 'c4fb98b8ebab77593cc2413b34564a126713e40a', class: `input_dropdown_container` }, this.showLabel && (h("p", { key: '48db71714fa97e8b0f893fd6d83001ed44de4b6e', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label)), h("div", { key: 'a060aadccdf963369e60a760ceb39f553875046e', class: `input_dropdown_div ${this.size} ${this.state}` }, this.type === 'icon_leading' && (h("svg", { key: 'de169c57fd4c93d4762047f5d533d389c020febe', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '95c83f58e3302c90dbc71227a2df78873f517e32', 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: 'c45570a68bad8a40827cc0569fa46e58452c7735', 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: '85a3ac55d00a98032b33a1e26e7a9edcccad7b64', size: "xs", text: this.text }, !this.text ? (h("slot", { slot: "image", name: "image" })) :
-            (h("slot", { slot: "initials", name: "initials" })))), this.type === 'search' && (h("svg", { key: '79768df493512dcb06beae16ad4a9915a4f4c341', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'c666120ba224a88086b778320a2fbf52a24f4717', d: "M14.5833 14.5833L18.3333 18.3333M16.6667 9.16667C16.6667 5.02454 13.3088 1.66667 9.16667 1.66667C5.02454 1.66667 1.66667 5.02454 1.66667 9.16667C1.66667 13.3088 5.02454 16.6667 9.16667 16.6667C13.3088 16.6667 16.6667 13.3088 16.6667 9.16667Z", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.type === 'dot_leading' && (h("svg", { key: '20ac2988ce570c467e83cfa23d1a7dba4805309b', 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: 'b98876331c844c70616cc44e148f226b0396586b', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: '891e8b17d62dc087f5b76e3ee7cbe22abb22a42d', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.showPlaceholder && (h("p", { key: '71ee48cc29f1978bf22e68c40f0bc2b0a858c489', class: "text-md-regular", style: { color: '#CDD5DF' } }, "Select team member")))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '6a9cc7da8c2362f9bbd8405a08b293d9541dbcce', class: "content" }, h("div", { key: '3fe40e4af8162c0d7d38ace6cd4177fc5551fff8', class: "text text-md-regular", style: { color: '#4B5565' } }, "Olivia Rhye"), h("div", { key: '67b5bf918f1780e678e627d35b9d9cc926a462d9', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, "@olivia")))))), this.showHelpIcon && (h("div", { key: '16f1c3b3734b43078c1b172bb22d61bc58789765', class: `help_icon` }, h("svg", { key: '6909e3c63c0dfe776917affe254651fd61e940c8', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '77ac5a9cde8943afd26099b07e92ae50e798caf7', d: "M6.66665 6C6.66665 5.26362 7.2636 4.66667 7.99998 4.66667C8.73636 4.66667 9.33331 5.26362 9.33331 6C9.33331 6.26543 9.25575 6.51275 9.12205 6.72053C8.72358 7.33978 7.99998 7.93029 7.99998 8.66667V9M7.99464 11.3333H8.00063M14.6666 8C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8C1.33331 4.3181 4.31808 1.33333 7.99998 1.33333C11.6819 1.33333 14.6666 4.3181 14.6666 8Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '322a642033594047e94721e7d4c9a8f386b9b165', class: "dropdown_icon" }, h("svg", { key: '2f9b9e78e80df03aacc48f4a70fd707db03cd491', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '56eb597b3a8191303172625300363061fe16f169', 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: '3c2b282df6b8f3efcdc05487aa49491ce08265d0', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))));
+        const items = [
+            {
+                name: 'Emmanuel Kadiri',
+                username: 'kadiri2047',
+            },
+            {
+                name: 'Gideon Ogunkola',
+                username: 'gideon',
+            },
+            {
+                name: 'Precious Okon',
+                username: 'presh',
+            },
+            {
+                name: 'Efe Dakara',
+                username: 'efe',
+            },
+        ];
+        console.log(this.selectedItems);
+        console.log(this.selectedItem);
+        return [
+            h("div", { key: '0091d54aa1238a3ce995b8641c6039632c04305f', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`, onClick: () => this.toggleDropdown() }, this.showLabel && (h("p", { key: '0deb209d7be91abcddfaea72b4a4cc9493c9a5b3', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label)), h("div", { key: '423bb657cfb1fbde5f663bd682d62080971bd341', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}` }, this.type === 'icon_leading' && (h("svg", { key: '6364580eaff1fa99b87440a44d0ae6e493fa06fd', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '3e7c2ade5433793e61822d3bce4da5152285508e', 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: 'c9e9f05cc253b163ecec2ff50e5a50532b8915de', 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: '6845c3ccc11a1403b39a68c26db47dea75ec4bcb', 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: '4d1f03e65774060b51aa1ad44d4d0c4dad78f340', 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: 'd423d00b60402370ab0ce4c4e00131e71701a000', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: '56eb92891f3c765ca9a185ae78795f844c134925', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.showPlaceholder && (h("p", { key: 'dc83a906dba9f7f396f2f28309c0209fd17dc450', class: "text-md-regular", style: { color: '#CDD5DF' } }, "Select team member")))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '48ecc43195a2d4d91333e6ae57bb9dafd7f033fe', class: `content` }, h("div", { key: 'ae06c7bcd73f703609e95c96f7a39dff0efeb3d5', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags'
+                ? this.selectedItems.map((item, index) => (h("div", { class: "tag" }, h("gb-tag", { size: "sm", icon: "avatar", action: "X_close", key: index, onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("img", { src: "build/assets/avatar_pic.jpg", alt: "", slot: "image" })))))
+                : this.selectedItem.name), this.supportingText && (h("div", { key: 'ddf2c86b4008ee9668592866cd2889da6afad8eb', 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: '54fa3e31e803667b870a734fd99726e8fc402705', class: `help_icon` }, h("svg", { key: 'b4a1be5818b29a7d311e697ab559187b972c4e1f', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'd398a1e64578496aa093ae3b395e0277eb3942ad', d: "M6.66665 6C6.66665 5.26362 7.2636 4.66667 7.99998 4.66667C8.73636 4.66667 9.33331 5.26362 9.33331 6C9.33331 6.26543 9.25575 6.51275 9.12205 6.72053C8.72358 7.33978 7.99998 7.93029 7.99998 8.66667V9M7.99464 11.3333H8.00063M14.6666 8C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8C1.33331 4.3181 4.31808 1.33333 7.99998 1.33333C11.6819 1.33333 14.6666 4.3181 14.6666 8Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.type !== 'search' && (h("div", { key: '4d3ca47c25228db8cc3c31b476d96f92dbe52e63', class: "dropdown_icon" }, h("svg", { key: '2b86a39b2f56a4dc0aa8e631afe883ee4f04686b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '7182509ee882a40e98bf08bdc08ef5f6aa20c76a', 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: 'b8e18864fda59cc9d111046ca3bd6a7ade78178e', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
+            h(Fragment, null, this.dropdownOpen && (h("div", { key: '74333e0656e5068aee59e81313cc05eb6240f597', class: "dropdown_menu" }, 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.isSelected, onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))))))),
+        ];
     }
     static get is() { return "gb-input-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -48,9 +141,15 @@ export class GbInputDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'search' | 'tags'",
-                    "resolved": "\"avatar_leading\" | \"default\" | \"dot_leading\" | \"icon_leading\" | \"search\" | \"tags\"",
-                    "references": {}
+                    "original": "DropdownTypes",
+                    "resolved": "\"avatar_leading\" | \"checkbox\" | \"default\" | \"dot_leading\" | \"icon_leading\" | \"search\" | \"tags\"",
+                    "references": {
+                        "DropdownTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownTypes"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -63,7 +162,7 @@ export class GbInputDropdown {
             },
             "state": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "'default' | 'focused' | 'disabled' | 'filled'",
                     "resolved": "\"default\" | \"disabled\" | \"filled\" | \"focused\"",
@@ -225,6 +324,24 @@ export class GbInputDropdown {
                 "attribute": "show-help-icon",
                 "reflect": false
             },
+            "showLeadingIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-leading-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "iconSwap": {
                 "type": "string",
                 "mutable": false,
@@ -260,9 +377,70 @@ export class GbInputDropdown {
                 "attribute": "text",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "leadingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "leading-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "supportingText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "supporting-text",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "leadingIconSvg": {},
+            "dropdownOpen": {},
+            "selectedItems": {},
+            "selectedItem": {},
+            "isSelected": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-input-dropdown.js.map

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,MAAM,eAAe,CAAC;AAQtE,MAAM,OAAO,eAAe;;;;;yBAIG,KAAK;qBACV,EAAE;+BACS,KAAK;+BACN,EAAE;;wBAET,EAAE;;wBAEF,EAAE;oBACL,KAAK;;IAG7B,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,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAEnE,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,0BAA0B;YACnC,IAAI,CAAC,SAAS,IAAI,CACjB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACnD,IAAI,CAAC,KAAK,CACT,CACL;YACD,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;gBACxD,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;oBAC5F,6DACE,CAAC,EAAC,0QAA0Q,EAC5Q,MAAM,EAAC,SAAS,kBACH,SAAS,GACtB;oBACF,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,SAAS,GACtB,CACE,CACP;gBACA,IAAI,CAAC,IAAI,KAAK,gBAAgB,IAAI,CACjC,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACjC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAAC,CAAC,CAAC;oBACzD,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAAC,CAErC,CACb;gBACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CACzB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC5F,6DACE,CAAC,EAAC,mPAAmP,EACrP,MAAM,EAAC,SAAS,kBACH,SAAS,oBACP,OAAO,qBACN,OAAO,GACvB,CACE,CACP;gBACA,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;oBACtH,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,CACzC,CACP;gBACD,4DAAK,KAAK,EAAC,aAAa;oBACtB;wBACG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B,kBACG,IAAI,CAAC,eAAe,IAAI,CACvB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,yBAElD,CACL,CACA,CACJ;wBACA,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAC1B;4BACE,4DAAK,KAAK,EAAC,SAAS;gCAClB,4DAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,kBAEvD;gCACN,4DAAK,KAAK,EAAC,iCAAiC,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,cAElE,CACF,CACL,CACJ,CACA,CACC;gBACL,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAE,WAAW;oBACrB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;wBAC5F,6DACE,CAAC,EAAC,4ZAA4Z,EAC9Z,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACF,CACP;gBACD,4DAAK,KAAK,EAAC,eAAe;oBACxB,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;wBACnH,6DACE,CAAC,EAAC,2EAA2E,EAC7E,MAAM,EAAC,SAAS,kBACH,SAAS,oBACP,OAAO,qBACN,OAAO,GACvB,CACE,CACF,CACF;YACL,IAAI,CAAC,YAAY,IAAI,CACpB,0DAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IACnD,IAAI,CAAC,QAAQ,CACZ,CACL,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Element } from \"@stencil/core\";\r\nimport { GeneralSizes } 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: 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'search' | 'tags';\r\n  @Prop() state: 'default' | 'focused' | 'disabled' | 'filled';\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() showPlaceholder: boolean = false;\r\n  @Prop() placeholderText: string = '';\r\n  @Prop() showHintText: boolean;\r\n  @Prop() hintText: string = '';\r\n  @Prop() showHelpIcon: boolean;\r\n  @Prop() iconSwap: string = '';\r\n  @Prop() text: boolean = false;\r\n  @Element() el: HTMLElement;\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  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    slottedInitials.classList.add('text-xs-semi-bold');\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`input_dropdown_container`}>\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}`}>\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}>\r\n              {!this.text ? (<slot slot=\"image\" name=\"image\"></slot>) : \r\n              (<slot slot=\"initials\" name=\"initials\"></slot>)\r\n              }\r\n            </gb-avatar>\r\n          )}\r\n          {this.type === 'search' && (\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=\"M14.5833 14.5833L18.3333 18.3333M16.6667 9.16667C16.6667 5.02454 13.3088 1.66667 9.16667 1.66667C5.02454 1.66667 1.66667 5.02454 1.66667 9.16667C1.66667 13.3088 5.02454 16.6667 9.16667 16.6667C13.3088 16.6667 16.6667 13.3088 16.6667 9.16667Z\"\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          )}\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.showPlaceholder && (\r\n                    <p class=\"text-md-regular\" style={{ color: '#CDD5DF' }}>\r\n                      Select team member\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\" style={{ color: '#4B5565' }}>\r\n                      Olivia Rhye\r\n                    </div>\r\n                    <div class=\"supporting_text text-sm-regular\" style={{ color: '#697586' }}>\r\n                      @olivia\r\n                    </div>\r\n                  </div>\r\n                </>\r\n              )}\r\n            </>\r\n          </div>\r\n          {this.showHelpIcon && (\r\n            <div class={`help_icon`}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path\r\n                  d=\"M6.66665 6C6.66665 5.26362 7.2636 4.66667 7.99998 4.66667C8.73636 4.66667 9.33331 5.26362 9.33331 6C9.33331 6.26543 9.25575 6.51275 9.12205 6.72053C8.72358 7.33978 7.99998 7.93029 7.99998 8.66667V9M7.99464 11.3333H8.00063M14.6666 8C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8C1.33331 4.3181 4.31808 1.33333 7.99998 1.33333C11.6819 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            </div>\r\n          )}\r\n          <div class=\"dropdown_icon\">\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        </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  }\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 } 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() showPlaceholder: boolean = false;\r\n  @Prop() placeholderText: 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() selectedItem: any;\r\n  @State() isSelected: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  toggleDropdown() {\r\n    this.dropdownOpen = !this.dropdownOpen;\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  handleItemSelect(item) {\r\n    if (this.type === 'tags') {\r\n      // For 'tags', allow multiple selections\r\n      if (this.selectedItems.includes(item)) {\r\n        // Deselect if already selected\r\n        this.selectedItems = this.selectedItems.filter(i => i !== item);\r\n      } else {\r\n        // Add to selected items\r\n        this.selectedItem = item;\r\n        this.selectedItems = [...this.selectedItems, this.selectedItem];\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    } else {\r\n      // For other types, allow only one selection\r\n      this.selectedItems = [item]; // Only one item in selectedItems\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 after selection\r\n    }\r\n  }\r\n\r\n  isItemSelected() {\r\n    if(this.type === 'tags') {\r\n      this.selectedItems.map(item => {if(this.selectedItem === item){return true} else {return false}})\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    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    slottedInitials.classList.add('text-xs-semi-bold');\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    console.log(this.selectedItems);\r\n    console.log(this.selectedItem);\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.showPlaceholder && (\r\n                    <p class=\"text-md-regular\" style={{ color: '#CDD5DF' }}>\r\n                      Select team member\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=\"tag\">\r\n                              <gb-tag size=\"sm\" icon=\"avatar\" action=\"X_close\" key={index} onClick={() => this.handleTagRemove(index)}>\r\n                                <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                <img src=\"build/assets/avatar_pic.jpg\" alt=\"\" slot=\"image\" />\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              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path\r\n                  d=\"M6.66665 6C6.66665 5.26362 7.2636 4.66667 7.99998 4.66667C8.73636 4.66667 9.33331 5.26362 9.33331 6C9.33331 6.26543 9.25575 6.51275 9.12205 6.72053C8.72358 7.33978 7.99998 7.93029 7.99998 8.66667V9M7.99464 11.3333H8.00063M14.6666 8C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8C1.33331 4.3181 4.31808 1.33333 7.99998 1.33333C11.6819 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            </div>\r\n          )}\r\n          {this.type !== 'search' && (\r\n            <div class=\"dropdown_icon\">\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\">\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.isSelected}\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        "]}

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

@@ -1,3 +1,5 @@
+/* @import 'tailwind.css'; */
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */
@@ -2683,7 +2685,7 @@
 
 .dropdown-item {
     display: flex;
-    height: 40px;
+    height: 2.5rem;
     padding: var(--spacing-2);
     justify-content: flex-start;
     align-items: center;
@@ -2728,7 +2730,6 @@
 
 .dropdown-item--selected {
     display: flex;
-    justify-content: space-between;
     background-color: #E4F0FC;
 }