globuswebcomponents 2.1.0 → 2.1.1

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

@@ -2658,291 +2658,305 @@
     margin-top: -0.416em;
 }
 
-.input_dropdown_div{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    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;
-    position: relative;
+.input_dropdown_div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  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;
+  position: relative;
 }
 
-.input_dropdown_container{
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
+.input_dropdown_container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
 }
 
-.input_dropdown_container.tag{
-    min-height: 3rem;
+.input_dropdown_container.tag {
+  min-height: 3rem;
 }
 
-.icon{
-    display: flex;
-    align-items: center;
+.icon {
+  display: flex;
+  align-items: center;
 }
 
-.input_with_label{
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
+.input_with_label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
 }
 
-.hint_text{
+.hint_text {
   color: var(--color-text-subtle, #697586);
 }
 
-.error_text{
-  color: var(--color-text-danger, #B51726);
+.error_text {
+  color: var(--color-text-danger, #b51726);
 }
 
 /* Size Styles */
-.input_dropdown_div.sm{
-    height: 2.5rem;
+.input_dropdown_div.sm {
+  height: 2.5rem;
 }
 
-.input_dropdown_div.md{
-    height: 3rem;
+.input_dropdown_div.md {
+  height: 3rem;
 }
 
-.dot.sm{
-    width: var(--spacing-2);
-    height: var(--spacing-2);
+.dot.sm {
+  width: var(--spacing-2);
+  height: var(--spacing-2);
 }
 
-.dot.md{
-    width: 0.625rem;
-    height: 0.625rem;
+.dot.md {
+  width: 0.625rem;
+  height: 0.625rem;
 }
 
 /* State Styles */
-.input_dropdown_div.focused{
-    border-color: var(--color-border-selected, #075DB2);
+.input_dropdown_div.focused {
+  border-color: var(--color-border-selected, #075db2);
 }
 
-.input_dropdown_div.destructive{
-    border-color: var(--color-border-danger, #B51726);
+.input_dropdown_div.destructive {
+  border-color: var(--color-border-danger, #b51726);
 }
 
-.input_dropdown_div.disabled{
-    background-color: var(--color-background-disabled, #F6F8FA);
-    pointer-events: none;
-    cursor: not-allowed;
+.input_dropdown_div.disabled {
+  background-color: var(--color-background-disabled, #f6f8fa);
+  pointer-events: none;
+  cursor: not-allowed;
 }
 
-.placeholder{
-    display: flex;
-    justify-content: stretch;
-    width: 100%;
-    white-space: nowrap;
+.placeholder {
+  display: flex;
+  justify-content: stretch;
+  width: 100%;
+  white-space: nowrap;
 }
 
-.content{
-    display: flex;
-    gap: var(--spacing-2);
-    overflow: hidden; /* Clip overflowing content */
-    /* width: 50px; */
-    flex: 1 0 0;
+.content {
+  display: flex;
+  gap: var(--spacing-2);
+  overflow: hidden; /* Clip overflowing content */
+  /* width: 50px; */
+  flex: 1 0 0;
 }
 
-.text.tag{
-    display: flex;
-    justify-content: flex-start;
-    align-items: stretch;
-    flex-wrap: wrap;
-    gap: 0.38rem;
-    padding: 0.4rem 0;
+.text.tag {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: 0.38rem;
+  padding: 0.4rem 0;
 }
 
-.supporting_text{
-    display: flex;
-    align-items: center;
+.supporting_text {
+  display: flex;
+  align-items: center;
 }
 
-.added_tag{
-    width: fit-content;
+.added_tag {
+  width: fit-content;
 }
 
-.help_icon{
-    display: flex;
-    align-items: center;
-    height: fit-content;
+.help_icon {
+  display: flex;
+  align-items: center;
+  height: fit-content;
 }
 
-.dropdown_icon{
-    display: flex;
-    align-items: center;
+.dropdown_icon {
+  display: flex;
+  align-items: center;
 }
 
-svg.disabled path{
-    stroke: var(--color-icon-disabled, #CDD5DF);
+svg.disabled path {
+  stroke: var(--color-icon-disabled, #cdd5df);
 }
 
-.dropdown_menu{
-    display: flex;
-    min-width: 100%;
-    max-height: 300px;
-    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;
-    gap: var(--spacing-none);
-    transition: 1s ease-in-out;
-    overflow-y: auto;
+.dropdown_menu {
+  display: flex;
+  min-width: 100%;
+  max-height: 300px;
+  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;
+  gap: var(--spacing-none);
+  transition: 1s ease-in-out;
+  overflow-y: auto;
 }
 
-.dropdown_menu.top{
-    bottom: 105%;
-    left: 0;
-    z-index: 999;
+.dropdown_menu.top {
+  bottom: 105%;
+  left: 0;
+  z-index: 999;
 }
 
-.dropdown_menu.bottom{
-    top: 105%;
-    right: 0;
-    z-index: 999;
+.dropdown_menu.bottom {
+  top: 105%;
+  right: 0;
+  z-index: 999;
 }
 
 /* .input_dropdown_div.sm.tag{
     min-height: 2.5rem;
 } */
 
-.input_dropdown_div.tag{
-    min-height: 3rem;
-    height: fit-content;
+.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: 2.5rem;
 }
 
-.input_dropdown_div.md.tag{
-    min-height: 3rem;
+.input_dropdown_div.md.tag {
+  min-height: 3rem;
 }
 
-.opened{
-    transform: rotate(180deg);
-    transition: 0.2s ease-in-out;
+.opened {
+  transform: rotate(180deg);
+  transition: 0.2s ease-in-out;
 }
 
-::slotted([slot="tooltip_label"]){
+::slotted([slot='tooltip_label']) {
   white-space: nowrap;
-  color: var(--color-text, #4B5565);
+  color: var(--color-text, #4b5565);
 }
 
-::slotted([slot="tooltip_supporting_text"]){
+::slotted([slot='tooltip_supporting_text']) {
   min-width: fit-content;
   max-width: 18.5rem;
   color: var(--color-text-subtle, #697586);
   margin-top: 5rem;
 }
 
-::slotted([slot="initials"].gray){
-    color: #4B5565;
+::slotted([slot='initials'].gray) {
+  color: #4b5565;
 }
 
-::slotted([slot="initials"].blue){
-    color: var(--color-text-information, #064E94);
+::slotted([slot='initials'].blue) {
+  color: var(--color-text-information, #064e94);
 }
 
-::slotted([slot="initials"].cyan){
-    color: var(--color-text-discovery, #0086C9);
+::slotted([slot='initials'].cyan) {
+  color: var(--color-text-discovery, #0086c9);
 }
 
-::slotted([slot="initials"].pink){
-    color: var(--color-text-pink, #DD2590);
+::slotted([slot='initials'].pink) {
+  color: var(--color-text-pink, #dd2590);
 }
 
-::slotted([slot="initials"].purple){
-    color: var(--color-text-purple, #6938EF);
+::slotted([slot='initials'].purple) {
+  color: var(--color-text-purple, #6938ef);
 }
 
-::slotted([slot="initials"].green){
-    color: var(--color-text-success, #079455);
+::slotted([slot='initials'].green) {
+  color: var(--color-text-success, #079455);
 }
 
-::slotted([slot="initials"].yellow){
-    color: var(--color-text-warning, #DC6803);
+::slotted([slot='initials'].yellow) {
+  color: var(--color-text-warning, #dc6803);
 }
 
-.dropdown_search_field{
-    background: var(--color-surface, #FFFFFF);
-    padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);
-    position: sticky;
-    top: 0;
-    z-index: 999;
+.dropdown_search_field {
+  background: var(--color-surface, #ffffff);
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);
+  position: sticky;
+  top: 0;
+  z-index: 999;
 }
 
-.empty_state{
-    margin: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.empty_state {
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.background{
-    position: relative;
-    width: 80%;
+.background {
+  position: relative;
+  width: 80%;
 }
 
-.message_background{
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-1);
+.message_background {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
 }
 
-.illustration{
-    width: 100px;
-    height: 100px;
+.illustration {
+  width: 100px;
+  height: 100px;
 }
 
-.message{
-    color: var(--color-text-bold, #202939);
+.message {
+  color: var(--color-text-bold, #202939);
 }
 
-.text{
-    display: flex;
-    align-items: center;
-    /* flex: 1 1 auto; */
-    overflow: hidden; /* Prevent content from overflowing */
+.text {
+  display: flex;
+  align-items: center;
+  /* flex: 1 1 auto; */
+  overflow: hidden; /* Prevent content from overflowing */
 }
 
-.selected_text{
-    overflow: hidden; /* Hide overflowing text */
-    text-overflow: ellipsis;
-    white-space: nowrap; /* Prevent wrapping */
-    flex: 1 1 auto; /* Take up available space and adjust dynamically */
-    min-width: 0; /* Ensures it respects parent width in flexbox */
+.selected_text {
+  overflow: hidden; /* Hide overflowing text */
+  text-overflow: ellipsis;
+  white-space: nowrap; /* Prevent wrapping */
+  flex: 1 1 auto; /* Take up available space and adjust dynamically */
+  min-width: 0; /* Ensures it respects parent width in flexbox */
 }
 
-.search_input{
-    display: flex;
-    flex: 1 0 0;
-    width: 100%;
+.search_input {
+  display: flex;
+  flex: 1 0 0;
+  width: 100%;
 }
 
-input{
-    border: none;
-    color: var(--color-text, #4B5565);
+input {
+  border: none;
+  color: var(--color-text, #4b5565);
 }
 
-input:focus{
-    outline: none;
+input:focus {
+  outline: none;
 }
 
-input::placeholder{
-    color: var(--color-text-disabled, #CDD5DF);
+input::placeholder {
+  color: var(--color-text-disabled, #cdd5df);
+}
+
+.close_button {
+  position: absolute;
+}
+
+.close_button.sm {
+  right: 0.2rem;
+  top: 0.15rem;
+}
+
+.close_button.md {
+  right: 0.3rem;
+  top: 0.25rem;
 }
 
 /* .new_div{
@@ -2956,4 +2970,4 @@ input::placeholder{
     background: purple;
     display: flex;
     flex: 1 0 0;
-} */
+} */

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

@@ -52,12 +52,33 @@ export class GbInputDropdown {
         this.selectedItems = [];
         this.unselectedItems = [];
         this.internalItems = [...this.items];
+        this.showCloseButton = false;
+    }
+    async clearSelection() {
+        if (this.selectedItem.length > 0)
+            this.selectedItem = [];
+        if (this.selectedItems.length > 0)
+            this.selectedItems = [];
+    }
+    clearInput() {
+        if (this.inputRef) {
+            this.inputRef.value = '';
+            this.inputValue = this.inputRef.value;
+            this.showCloseButton = false;
+            this.inputValueChanged.emit(this.inputValue);
+        }
     }
     updateResultsAndShowInDropdown(newItems) {
         this.internalItems = [...newItems];
     }
     emitInputValueToUseForSearch() {
-        this.inputValueChanged.emit(this.inputRef.value);
+        if (this.inputRef.value.length > 0) {
+            this.showCloseButton = true;
+            this.inputValueChanged.emit(this.inputRef.value);
+        }
+        else {
+            this.showCloseButton = false;
+        }
     }
     searchItemsInDropdownMenu(event) {
         this.searchItem = event.detail;
@@ -298,16 +319,16 @@ export class GbInputDropdown {
         const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');
         const illustration = getAssetPath('assets/empty-state-no-data.svg');
         return [
-            h("div", { key: 'dd3b4f9da413cbcc10227d63714ec03489fae32d', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: 'a4ca1f3daafceaaead2aeb62882ef2a617f6bfe0', class: `input_with_label` }, this.showLabel && (h("p", { key: 'cb331c3ac5565b9c7443bca33be597bbc2cc1de2', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), h("div", { key: '30dc75ed35b213e4bdc6dc9afc4c5d2d60241bdf', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (h("svg", { key: '7f1fc16e6ad4b7315eea15c4fc5639a4c8dd178b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '8a817135b002b4c212182ddddc38574d24ca48e6', 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: 'a0cbc19430d69b29956cc9f27f6d3e9e426d7065', 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: '1563e8697df3b34ff91dce0d3ec765d27cedd06b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'eab2a996b46b0b137e9764980405042fb93230f3', 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: '60ba98b1053f81c69e3332a6eb5d6c0b749da8e0', 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: '3ad5bf963b96e2760c18b12a5f321a2956aca6ae', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (h(Fragment, null, typeof item === 'object' ? (h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : (h("h1", { slot: "initials" }, item.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: '92b2399e4fe536fcb2b744e0c70eb543cc35e628', 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: 'e60ac40df2f1f8d51b13788d4ceda5333c181519', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && this.type !== 'search' && (h(Fragment, null, this.placeholder && (h("div", { key: 'fcadcccf8f96b40bf1616a80c9071314699c3c31', class: "placeholder" }, h("p", { key: '6fd579ae85181ec0037f39d22b0eedac2550e785', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '07c57e29258487e3f29ff8869a3a492801aaf16b', class: "search_input" }, h("input", { key: '620770df4d644940073af4c27589b1781916116d', type: "text", placeholder: this.placeholder, class: "text-md-regular", ref: el => this.inputRef = el, onInput: this.emitInputValueToUseForSearch.bind(this) }))), this.state === 'filled' && (h(Fragment, null, h("div", { key: 'cecdf6863b5d89dcb3048785f8dc72e54df9451d', class: `content` }, h("div", { key: '7405d6e5feec328631c6e3445e34cec0cbe503ff', 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: '98d88806c1540499b714d61cf717f90734aefba3', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: 'd6266b58897eb01309c3e90fab86b76b11b67ed6', class: `input_with_label` }, this.showLabel && (h("p", { key: '903b66f681d5c3b9b8086c420fe2fe150e85c535', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), h("div", { key: '80adfb30a21c9d21e1fdb7ff21a2af0dceac9ac3', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (h("svg", { key: '07f7913f639c67559fc199b4b6f2b1fc515485cc', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '47a3c5135ade1d967d0898c66ecf06fd91c5f984', 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: 'b4df76b10fae0df5e9cf5ecf457bd398a2e2f329', 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: 'd7c9321dfea62d589e6d05a1db1bfc88a16fd75a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '5fd7aaf89e85d95e21483ddd120a5318b49771a6', 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: '6d097155193975d272898be86481a02d22521bd0', 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: '20ffef8a8fd01076c49654ac3c35665db2feed1e', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (h(Fragment, null, typeof item === 'object' ? (h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : (h("h1", { slot: "initials" }, item.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: 'ec8121606cd21d8a85d2c9da7b392fac73457d0d', 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: 'a5b637ad703a8f8f547933effa0dac724c962e10', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && this.type !== 'search' && (h(Fragment, null, this.placeholder && (h("div", { key: '956ee061934f85b764ad137a70d866535aba5da7', class: "placeholder" }, h("p", { key: 'ad0bb150eff05cb1a7f4d428f412754bf339cb7b', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '91fc7b841ac964723e6479228ef9b5e5325b3c47', class: "search_input" }, h("input", { key: '7d4b72d524f687ee714a3d5f7b3213833268710f', type: "text", placeholder: this.placeholder, class: "text-md-regular", ref: el => (this.inputRef = el), onInput: this.emitInputValueToUseForSearch.bind(this) }), this.showCloseButton && (h("gb-button", { key: '41b311b4c7d62dd61ed786d7dbb9e76d1f63abe6', class: `close_button ${this.size}`, size: this.size, hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))), this.state === 'filled' && (h(Fragment, null, h("div", { key: 'f90c8891a7304f65a0eafcbfed4d768e3fc2a813', class: `content` }, h("div", { key: 'a5b3cb9240980d084b7b6c57641084e8b0906157', 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("p", { class: "selected_text text-md-regular" }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: 'becb6a1118221f06c7349e65694b6d5f0f4a2399', 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: 'e4a5a6c04b97498cb67f45f59b1c5b3fddfd5928', class: `content` }, h("div", { key: 'dd906e190547345f11c145b0016f4a2c2b27c94f', 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("p", { class: "selected_text text-md-regular" }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: 'babdbdee95e9f126f021101c0b088a5102ef35f1', 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: '53d421048bc3baf678fb520a8f0d0387de346763', class: `content` }, h("div", { key: '27bc204cc966f64732d17d94d8d7086778883580', 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: 'bc095bd7d29403c12b825a4a9de372ac119bc8cb', 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: '589643238767fe72f7174325a99128147824c3c7', class: `help_icon` }, h("gb-help-tooltip", { key: '9206638d2c1d78fea44181d69e1e32e1b7b60d3a', "show-supporting-text": true }, h("slot", { key: 'ad0c19899a806014d6674ca6f04599a321166f8e', name: "tooltip_label", slot: "label" }), h("slot", { key: '11573383d072f67df145408f812021e7c13e162a', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: 'ca40f9cf30499f07dd897de19074f1d5fb5b3e9c', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'f7761668e7d80dd01bbfa650f1cd609160163b93', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '22cabe2b48b694966da72ef8375cedc038c4e1c8', 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: 'bbd6b7c3e4d2702a4371eeaf1a09dc537eace850', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'eca8bbcf664685c2d5bd92eba02a41e47001d6bb', class: "dropdown_search_field" }, h("gb-input-field", { key: '83f54cd35b8e1a1abce4bb944ac2f6e779b569a1', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.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 === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : '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: '94f744517a18d6ba7010d12d4ee7a0af9f532bcd', 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: 'cbf93a3712001dc7d49cffcf4f91accb13fe4133', class: `help_icon` }, h("gb-help-tooltip", { key: '9462466ca88e117a1ff726ccf53d82a5772b9cd6', "show-supporting-text": true }, h("slot", { key: '98f636d2e395e6d5690c8b28324c716424dccac8', name: "tooltip_label", slot: "label" }), h("slot", { key: 'f97d5910e6bdc552a2bfea674c750ea2c7201f17', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '4d5635fbd24040607cb80b885604e7572cceac6f', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '5b2d2393e27360bf8d5b31fd8d1c2b1a36574ce3', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '6de8715d2ea7c5b6a484acea836f1968fcb307ba', 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: 'ade2e7030db475fa015ecfdfedac987934ee52ad', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'ac1b7644a2037fcc0f7fbefaaf9e00266f588c5a', class: "dropdown_search_field" }, h("gb-input-field", { key: '23f313d503006f89a8bb0fab1d45706d8389eb45', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.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 === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
             //Empty state for when there are no search results
             h("div", { class: "empty_state" }, h("img", { src: emptyStateBackground, class: "background", alt: "" }), h("div", { class: "message_background" }, h("img", { src: illustration, alt: "", class: "illustration" }), h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (h(Fragment, null, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username), h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())))) : (h(Fragment, null, h("p", { slot: "name" }, item), h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase()))))))), 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 === '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(' ')
@@ -823,12 +844,13 @@ export class GbInputDropdown {
         return {
             "leadingIconSvg": {},
             "dropdownOpen": {},
+            "selectedItem": {},
             "selectedItems": {},
             "unselectedItems": {},
-            "selectedItem": {},
             "searchItem": {},
             "searchResults": {},
-            "internalItems": {}
+            "internalItems": {},
+            "showCloseButton": {}
         };
     }
     static get events() {
@@ -864,6 +886,27 @@ export class GbInputDropdown {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{