globuswebcomponents 0.9.6 → 0.9.8

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

@@ -17,30 +17,48 @@ export class GbInputDropdown {
         this.leadingIcon = '';
         this.icon = undefined;
         this.items = [
-            // { name: 'Mock Item A', username: 'A', selected: false },
-            // { name: 'Mock Item B', username: 'B', selected: false },
-            // { name: 'Mock Item C', username: 'C', selected: false },
-            45, 50, 20, 25, 90,
-            // 'Activated',
-            // 'Deactivated',
+            { name: 'Mock Item A', username: 'A', selected: false },
+            { name: 'Mock Item B', username: 'B', selected: false },
+            { name: 'Mock Item C', username: 'C', selected: false },
+            45, 50, 20, 25, 90, 92, 53,
+            'Activated',
+            'Deactivated',
         ];
         this.value = [
-        // { name: 'Mock Item A', username: 'A', selected: false },
-        // { name: 'Mock Item B', username: 'B', selected: false },
-        // { name: 'Mock Item C', username: 'C', selected: false },
-        // 45, 50, 20, 25, 90,
-        // 'Activated',
-        // 'Deactivated',
+            { name: 'Mock Item A', username: 'A', selected: false },
+            { name: 'Mock Item B', username: 'B', selected: false },
+            { name: 'Mock Item C', username: 'C', selected: false },
+            45, 50, 20, 25, 90,
+            'Activated',
+            // 'Deactivated',
         ];
         this.supportingText = false;
         this.color = undefined;
         this.showBorder = false;
         this.menuPosition = undefined;
+        this.showSearchInput = false;
+        this.inputValue = undefined;
         this.leadingIconSvg = '';
         this.dropdownOpen = false;
         this.selectedItems = [];
         this.unselectedItems = [];
         this.selectedItem = undefined;
+        this.searchItem = undefined;
+        this.searchResults = undefined;
+    }
+    searchItems(event) {
+        this.searchItem = event.detail;
+        this.searchResults = this.items.filter((item) => {
+            if (typeof item === 'string') {
+                return item.toLowerCase().includes(this.searchItem.toLowerCase());
+            }
+            else if (typeof item === 'number') {
+                return item.toString().includes(this.searchItem.toString());
+            }
+            else if (typeof item === 'object') {
+                return item.name.toLowerCase().includes(this.searchItem.toLowerCase());
+            }
+        });
     }
     disconnectedCallback() {
         document.removeEventListener('click', this.handleClickOutside);
@@ -54,17 +72,17 @@ export class GbInputDropdown {
         if (this.state !== 'disabled') {
             this.dropdownOpen = !this.dropdownOpen;
         }
+        // console.log(this.inputValue);
         event.stopPropagation();
     }
     isItemSelected(item) {
-        // if(typeof selectedItem === 'object') {
-        //   const found = this.selectedItems.find(item => item.name === selectedItem.name);
-        //   return found !== undefined;
-        // } else {
-        //   return this.selectedItem === selectedItem;
-        // }
         const isObject = typeof item === 'object';
-        return this.selectedItems.some(i => (isObject ? i.name === item.name : i === item));
+        if (this.value.length === 0) {
+            return this.selectedItems.some(i => (isObject ? i.name === item.name : i === item));
+        }
+        else if (this.value.length > 0) {
+            return this.value.some(i => (isObject ? i.name === item.name : i === item));
+        }
     }
     async loadIcon(iconName) {
         const iconPath = getAssetPath(`${iconName}`);
@@ -92,58 +110,109 @@ export class GbInputDropdown {
         });
     }
     handleItemSelect(item) {
-        const isObject = typeof item === 'object';
         if (this.type === 'tags') {
-            // Handle multiple selection for "tags" type
-            const isSelected = this.selectedItems.some(i => (isObject ? i.name === item.name : i === item));
-            if (isSelected) {
-                // Unselect item: Move it from selectedItems to unselectedItems
-                this.selectedItems = this.selectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));
-                if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {
-                    this.unselectedItems = [...this.unselectedItems, item];
-                }
+            if (this.state === 'default') {
+                this.selectMultipleItems(item);
+                console.log(this.selectedItems);
             }
-            else {
-                // Select item: Move it from unselectedItems to selectedItems
-                this.selectedItems = [...this.selectedItems, item];
-                this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));
-                this.dropdownItemSelected.emit(this.selectedItems);
+            else if (this.state === 'filled' && this.value.length > 0) {
+                this.state = 'default';
+                this.value.length = 0;
+                this.selectMultipleItems(item);
+            }
+            else if (this.state === 'filled' && this.value.length === 0) {
+                this.selectMultipleItems(item);
             }
         }
         else {
-            // Handle single selection for other types
-            this.selectedItem = item; // Store single selected item
-            this.selectedItems = [item]; // Ensure only one item in selectedItems
-            // this.unselectedItems = this.items.filter(i => (isObject ? i.name !== item.name : i !== item));
-            // Close the dropdown after selection for single selection types
-            this.dropdownOpen = false;
-            this.dropdownItemSelected.emit(this.selectedItem);
+            if (this.state === 'default') {
+                this.singleItemSelect(item);
+            }
+            else if (this.state === 'filled' && this.value.length > 0) {
+                this.state = 'default';
+                this.value.length = 0;
+                this.singleItemSelect(item);
+            }
+            else if (this.state === 'filled' && this.value.length === 0) {
+                this.singleItemSelect(item);
+            }
         }
         this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
+        // console.log(this.state)
     }
-    handleTagRemove(item) {
+    singleItemSelect(item) {
+        // Handle single selection for other types
+        this.selectedItem = item; // Store single selected item
+        this.selectedItems = [item]; // Ensure only one item in selectedItems
+        // Close the dropdown after selection for single selection types
+        this.dropdownOpen = false;
+        this.dropdownItemSelected.emit(this.selectedItem);
+    }
+    selectMultipleItems(item) {
         const isObject = typeof item === 'object';
-        // Remove item from selectedItems
-        this.selectedItems = this.selectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));
-        // Add item back to unselectedItems if not already present
-        if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {
-            this.unselectedItems = [...this.unselectedItems, item];
+        const isSelected = this.selectedItems.some(i => (isObject ? i.name === item.name : i === item));
+        if (isSelected) {
+            // Unselect item: Move it from selectedItems to unselectedItems
+            this.selectedItems = this.selectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));
+            if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {
+                this.unselectedItems = [...this.unselectedItems, item];
+            }
+        }
+        else {
+            // Select item: Move it from unselectedItems to selectedItems
+            this.selectedItems = [...this.selectedItems, item];
+            this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));
+            this.dropdownItemSelected.emit(this.selectedItems);
+        }
+    }
+    handleTagRemove(item) {
+        if (this.value.length === 0) {
+            const isObject = typeof item === 'object';
+            // Remove item from selectedItems
+            this.selectedItems = this.selectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));
+            // Add item back to unselectedItems if not already present
+            if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {
+                this.unselectedItems = [...this.unselectedItems, item];
+            }
+            // Optionally update state or emit event
+            this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
+        }
+        else if (this.value.length > 0) {
+            const isObject = typeof item === 'object';
+            // Remove item from selectedItems
+            this.value = this.value.filter(i => (isObject ? i.name !== item.name : i !== item));
+            this.selectedItems = this.value;
+            // Add item back to unselectedItems if not already present
+            if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {
+                this.unselectedItems = [...this.unselectedItems, item];
+            }
+            // Optionally update state or emit event
+            this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
         }
-        // Optionally update state or emit event
-        this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
     }
     componentWillRender() {
         if (this.value.length > 0 && this.state === 'default') {
             this.state = 'filled';
         }
     }
-    componentWillLoad() {
+    componentWillLoad(item) {
         this.loadIcon(this.leadingIcon);
         this.unselectedItems = [...this.items];
         this.selectedItems = [];
         if (this.type !== 'tags') {
             this.selectedItem = null; // For single selection types
         }
+        if (this.value.length > 0) {
+            if (typeof item !== 'object') {
+                this.selectedItems = this.items.filter(item => this.value.includes(item));
+                this.unselectedItems = this.items.filter(item => !this.value.includes(item));
+            }
+            else if (typeof item === 'object') {
+                this.selectedItems = this.items.filter(item => this.value.includes(item.name));
+                this.unselectedItems = this.items.filter(item => !this.value.includes(item.name));
+            }
+            console.log(this.selectedItems);
+        }
     }
     componentDidLoad() {
         if (this.type !== 'tags') {
@@ -182,17 +251,21 @@ export class GbInputDropdown {
     }
     render() {
         var _a;
+        const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');
+        const illustration = getAssetPath('assets/empty-state-no-data.svg');
         return [
-            h("div", { key: 'b137b491938afaeaf20534052a7ecc60af136230', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '5089839bbef823d441ff6bb2f7f610856131363f', class: `input_with_label` }, this.showLabel && (h("p", { key: '40a8c14286ca7060d592e4da8d8aa4efda30b1dc', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), h("div", { key: 'b584d7e1c53b2977cde24449b2e5403ad93e0772', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (h("svg", { key: 'c48604e76ca6f8671aa0957a817747c2581c8bcb', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '2e93aa5408167fa84b29d5ca29c54470efe23837', 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: 'b64bb4cb437b3eb13e531798cb5a2ac1d1d30925', 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: 'cb2a9eeb976d8569785204da68521c83283ad12f', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '748548d2bd2e90c04c84e1185deb528e1f38153d', 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: '6d76f5bb6ba721f5ca57ac7e1568c5dc539f06ea', 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: '655b7cd8c4a42bd729aca791ab1ee02c3be616ce', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, h("h1", { key: 'eca7e84fb89b28d46357aaa7b01aa1ada2a94981', 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: '959aaa69e5c94e0ad789517cf1d102b7ce2b9ee2', 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: '18c5e2732c116acfffa4e112f3464b48d8983d3d', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: '4ba4317e0e92c072c185fe15049afc1f825f5c30', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: '0e85bf0050f70aef4e9bb8295c6f330eb3f98861', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: 'a2b2d4e7021bef22cb46e5c1c530e4ef88220cff', class: `content` }, h("div", { key: 'bbf8054b885ed7b8c2f3e8f592ac63a7ae72b57b', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", 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
+            h("div", { key: '72e9747f734611f23b8046306afa1f90572738cd', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '7a394b35636231df8b3bf8c9543fb7e55aa163b5', class: `input_with_label` }, this.showLabel && (h("p", { key: '4c1492fe52327d1a2c3fb8257c15279cb5e2a45e', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), h("div", { key: 'ae5f58fb4499f8909aaf368a2b5ec0ed9c367534', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (h("svg", { key: 'e1be663925b1b9c87b17430777dafda377d6cf6b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '90780193ad3b68966cc753fe432dc125c90fa541', 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: 'f730f2dd87ab0afcb1c466944a97f4b69893b5b4', 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: '173d5117e5ca2947663f62235022a9b31e746463', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '501b135ba6085a60cc32b33ecd50593c13fee640', 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: 'a743adbac79efc0f99747c9e4941be9d180bb799', 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: '54356962d194f57d05a2d4482e8ea116745f883a', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, h("h1", { key: 'a60df2c7dc5cd4ceaf869245a802af9bf479dc78', 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: '99f2317980563fe6b482d7f2ed7c7342c78d7aec', 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: '519ef6ffd0d376c1389d393c6a4413775487f881', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: 'e1eea820f5c57af8909129f8554be7853d9d3718', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: 'f9f77b0fb89786077a1955ee7f8011fb9c72ca5e', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '7eb664e69a2ffacc5c6e579ba8968510395f4120', class: `content` }, h("div", { key: '76933b5d1dde1961053e805d04c2881351c3d78e', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", 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())
                 .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", 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())
-                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: 'fb52436f6d3b795669ac49a469a4f9c5cf7a00f9', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, "@", this.selectedItem.username)) : (h(Fragment, null, this.value.map((item) => typeof item === 'object' && item.username)))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: '607300c4172fc75fb8740af8c696d0835326da08', class: `content` }, h("div", { key: 'cc99752b38229dde017336d086efaf94a9021f5f', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '5624f818c49c8d5860d8a962979f659d16037c6d', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, "@", this.selectedItem.username)) : (h(Fragment, null, this.value.map((item) => typeof item === 'object' && item.username)))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: '4cd356b524520d12bfdabfc543cba490cea966b7', class: `content` }, h("div", { key: 'e49ec3b6cf3aa1ac5cdae765c06c35f6f505c9c1', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .split(' ')
                 .map(part => part.charAt(0).toUpperCase())
-                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '3ced9afc891c487405fd91d58cb4bbd9dfd3d44b', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, "@", this.selectedItem.username)) : (h(Fragment, null, this.value.map((item) => typeof item === 'object' && (h(Fragment, null, "@", item.username)))))))))))))), this.showHelpIcon && (h("div", { key: '4a4c014fbd5ca3e521fa0ed4076e4b19b74932f4', class: `help_icon` }, h("gb-help-tooltip", { key: 'fc2299c70922126407c36bde4b1b75cd8badf794', "show-supporting-text": true }, h("slot", { key: 'd8655a48ecc83545405192804079e21d6fd5aa30', name: "tooltip_label", slot: "label" }), h("slot", { key: '701e7ebb77234dadd31357d7e538d94b7c7e3efd', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '34c9d156baf6d9fd6ff240c95e9182aa03616201', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'ecd703626ee603925ced6e931a88c1abfdd5eb73', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '895c9fdb89391abd01fe4842f455b0de9f5f152b', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: '10ecc3b6284665feb2d31c263154755b3b22c4ce', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))))) : (h(Fragment, null, 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) }, typeof item === 'object' ? (h(Fragment, null, 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))) : (typeof item !== 'object' && h("p", { slot: "name" }, item)))))))))))), this.showHintText && (h("p", { key: '0692b132152f584ccf594040faa2889f98a1b6aa', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: 'd6f4255dded94edcbb87e535c6372f6b758048bd', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, "@", this.selectedItem.username)) : (h(Fragment, null, this.value.map((item) => typeof item === 'object' && (h(Fragment, null, "@", item.username)))))))))))))), this.showHelpIcon && (h("div", { key: '70711957da57ca69152a72222bd4f68568f79e1c', class: `help_icon` }, h("gb-help-tooltip", { key: '47c4b9b39e9587073cd2d22593a12c955264d078', "show-supporting-text": true }, h("slot", { key: 'c5f3135525ba13df0e1d77aa3714092490b53320', name: "tooltip_label", slot: "label" }), h("slot", { key: 'a07e6e6b7076a7a083168c022add780fe867cb0a', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '37d5f29c2dad2d7ead4e51526407ea6ac1fef35e', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'e87694b6d129550c098c0d2a0b322c24a74c7b81', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'c63c7f8223676b8dc95973907ed4857a52416bdd', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: 'aaf62c9af0f1dcc66173ee656454ed4d9ed3a685', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'a30e67de85d3d373f98f5b25d20a619a96f73469', class: "dropdown_search_field" }, h("gb-input-field", { key: '1eed390dc66b12509591156d71a23984134b835a', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: "Search banks", type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItems.bind(this) }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
+            //Empty state for when there are no search results
+            h("div", { class: "empty_state" }, h("img", { src: emptyStateBackground, class: "background", alt: "" }), h("div", { class: "message_background" }, h("img", { src: illustration, alt: "", class: "illustration" }), h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (h(Fragment, null, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))))) : (h(Fragment, null, 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) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (typeof item !== 'object' && h("p", { slot: "name" }, item)))))))))))))), this.showHintText && (h("p", { key: '752ca98e29d6e6f7ea7ec51c36ad335c96621f26', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
         ];
     }
     static get is() { return "gb-input-dropdown"; }
@@ -471,15 +544,9 @@ export class GbInputDropdown {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "DropdownItemTypes[]",
-                    "resolved": "DropdownItemTypes[]",
-                    "references": {
-                        "DropdownItemTypes": {
-                            "location": "import",
-                            "path": "../../models/reusableModels",
-                            "id": "src/models/reusableModels.ts::DropdownItemTypes"
-                        }
-                    }
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -487,21 +554,15 @@ export class GbInputDropdown {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "[\r\n    // { name: 'Mock Item A', username: 'A', selected: false },\r\n    // { name: 'Mock Item B', username: 'B', selected: false },\r\n    // { name: 'Mock Item C', username: 'C', selected: false },\r\n    45, 50, 20, 25, 90,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n  ]"
+                "defaultValue": "[\r\n    { name: 'Mock Item A', username: 'A', selected: false },\r\n    { name: 'Mock Item B', username: 'B', selected: false },\r\n    { name: 'Mock Item C', username: 'C', selected: false },\r\n    45, 50, 20, 25, 90, 92, 53,\r\n    'Activated',\r\n    'Deactivated',\r\n  ]"
             },
             "value": {
                 "type": "unknown",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "DropdownItemTypes[]",
-                    "resolved": "DropdownItemTypes[]",
-                    "references": {
-                        "DropdownItemTypes": {
-                            "location": "import",
-                            "path": "../../models/reusableModels",
-                            "id": "src/models/reusableModels.ts::DropdownItemTypes"
-                        }
-                    }
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -509,7 +570,7 @@ export class GbInputDropdown {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "[\r\n      // { name: 'Mock Item A', username: 'A', selected: false },\r\n      // { name: 'Mock Item B', username: 'B', selected: false },\r\n      // { name: 'Mock Item C', username: 'C', selected: false },\r\n    // 45, 50, 20, 25, 90,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n  ]"
+                "defaultValue": "[\r\n    { name: 'Mock Item A', username: 'A', selected: false },\r\n    { name: 'Mock Item B', username: 'B', selected: false },\r\n    { name: 'Mock Item C', username: 'C', selected: false },\r\n    45, 50, 20, 25, 90,\r\n    'Activated',\r\n    // 'Deactivated',\r\n  ]"
             },
             "supportingText": {
                 "type": "boolean",
@@ -586,6 +647,41 @@ export class GbInputDropdown {
                 },
                 "attribute": "menu-position",
                 "reflect": false
+            },
+            "showSearchInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-search-input",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-value",
+                "reflect": false
             }
         };
     }
@@ -595,7 +691,9 @@ export class GbInputDropdown {
             "dropdownOpen": {},
             "selectedItems": {},
             "unselectedItems": {},
-            "selectedItem": {}
+            "selectedItem": {},
+            "searchItem": {},
+            "searchResults": {}
         };
     }
     static get events() {