From cf2f32ccef89414cee0e584562ee3ea20bce3c7f Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Tue, 7 Nov 2023 11:10:29 +0100
Subject: [PATCH] wc: migrate select component in disease-panel-filter
 #TASK-5070

---
 .../commons/filters/disease-panel-filter.js   | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/webcomponents/commons/filters/disease-panel-filter.js b/src/webcomponents/commons/filters/disease-panel-filter.js
index 7d80e3e7f8..21810affc0 100644
--- a/src/webcomponents/commons/filters/disease-panel-filter.js
+++ b/src/webcomponents/commons/filters/disease-panel-filter.js
@@ -255,52 +255,60 @@ export default class DiseasePanelFilter extends LitElement {
                     <label class="form-label">
                         Filter by Feature Type
                     </label>
-                    <select-field-filter
+                    <select-field-filter2
                         .data="${this.panelFeatureTypes}"
                         .value=${this.panelFeatureType}
-                        .multiple="${true}"
-                        .disabled="${this.genes?.length === 0 || this.disabled}"
+                        .config=${{
+                            tags: false,
+                            disabled: this.genes.length === 0 || this.disabled
+                        }}
                         @filterChange="${e => this.filterChange(e, "panelFeatureType")}">
-                    </select-field-filter>
+                    </select-field-filter2>
                 </div>
 
                 <div class="mb-2">
                     <label class="form-label">
                         Filter Genes by Mode of Inheritance
                     </label>
-                    <select-field-filter
+                    <select-field-filter2
                         .data="${MODE_OF_INHERITANCE}"
                         .value=${this.panelModeOfInheritance}
-                        .multiple="${true}"
-                        .disabled="${this.genes?.length === 0 || this.disabled}"
+                        .config=${{
+                            tags: false,
+                            disabled: this.genes?.length === 0 || this.disabled
+                        }}
                         @filterChange="${e => this.filterChange(e, "panelModeOfInheritance")}">
-                    </select-field-filter>
+                    </select-field-filter2>
                 </div>
 
                 <div class="mb-2">
                     <label class="form-label">
                         Filter Genes by Confidence
                     </label>
-                    <select-field-filter
+                    <select-field-filter2
                         .data="${DISEASE_PANEL_CONFIDENCE}"
                         .value=${this.panelConfidence}
-                        .multiple="${true}"
-                        .disabled="${this.genes?.length === 0 || this.disabled}"
+                        .config=${{
+                            tags: false,
+                            disabled: this.genes?.length === 0 || this.disabled
+                        }}
                         @filterChange="${e => this.filterChange(e, "panelConfidence")}">
-                    </select-field-filter>
+                    </select-field-filter2>
                 </div>
 
                 <div class="mb-2">
                     <label class="form-label">
                         Filter Genes by Role in Cancer
                     </label>
-                    <select-field-filter
+                    <select-field-filter2
                         .data="${ROLE_IN_CANCER}"
                         .value=${this.panelRoleInCancer}
-                        .multiple="${true}"
-                        .disabled="${this.genes?.length === 0 || this.disabled}"
+                        .config=${{
+                            tags: false,
+                            disabled: this.genes?.length === 0 || this.disabled
+                        }}
                         @filterChange="${e => this.filterChange(e, "panelRoleInCancer")}">
-                    </select-field-filter>
+                    </select-field-filter2>
                 </div>
             ` : nothing}
         </div>