From f1f136ab7323e49614e56befcd5b65f7a1abd6fa Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Tue, 30 Nov 2021 10:54:36 +0100
Subject: [PATCH] fix(textfield): Gestione dell'aggiunta/rimozione di un'icona

---
 .idea/inspectionProfiles/Project_Default.xml |  3 +-
 resources/js/WebComponents/TextField.js      | 60 +++++++++++++-------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 3af56facc..a3e41bbd7 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -99,7 +99,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="24">
+          <list size="25">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -124,6 +124,7 @@
             <item index="21" class="java.lang.String" itemvalue="mwc-checkbox" />
             <item index="22" class="java.lang.String" itemvalue="mwc-linear-progress" />
             <item index="23" class="java.lang.String" itemvalue="mwc-icon-button-toggle" />
+            <item index="24" class="java.lang.String" itemvalue="slot" />
           </list>
         </value>
       </option>
diff --git a/resources/js/WebComponents/TextField.js b/resources/js/WebComponents/TextField.js
index 887fa5f0e..08a20086b 100644
--- a/resources/js/WebComponents/TextField.js
+++ b/resources/js/WebComponents/TextField.js
@@ -1,6 +1,5 @@
 import {TextField as MWCTextField} from '@material/mwc-textfield';
 import {waitUntil} from 'async-wait-until';
-import classnames from 'classnames';
 import {
   html,
   type TemplateResult
@@ -10,15 +9,52 @@ import {
 export default class TextField extends MWCTextField {
   async connectedCallback() {
     super.connectedCallback();
+
+    // Wait until slots are added to DOM
     await waitUntil(() => this.shadowRoot.querySelectorAll('slot[name^=icon]').length > 0);
+
     const slots = this.shadowRoot.querySelectorAll('slot[name^=icon]');
     for (const slot: HTMLSlotElement of slots) {
+      const slotClass = `mdc-text-field__icon--${slot.name === 'icon' ? 'leading' : 'trailing'}`;
+      const rootClass = `mdc-text-field--with-${slot.name === 'icon' ? 'leading' : 'trailing'}-icon`;
+      const slotParent = slot.parentElement;
+      const rootElement = this.shadowRoot.firstElementChild;
+
+      // Check if slot has content
       if (slot.assignedNodes().length > 0) {
-        this[slot.name] = ' ';
+        slotParent.classList.add(slotClass);
+        rootElement.classList.add(rootClass);
       }
+
+      // Listen for changes in slot (added/removed)
+      slot.addEventListener('slotchange', () => {
+        if (slot.assignedNodes().length > 0) {
+          slotParent.classList.add(slotClass);
+          rootElement.classList.add(rootClass);
+        } else {
+          slotParent.classList.remove(slotClass);
+          rootElement.classList.remove(rootClass);
+        }
+      });
     }
   }
 
+  renderLeadingIcon() {
+    return this.renderIcon();
+  }
+
+  renderTrailingIcon() {
+    return this.renderIcon(true);
+  }
+
+  renderIcon(isTrailingIcon: boolean = false): TemplateResult {
+    return html`
+      <span class="mdc-text-field__icon">
+          <slot name="icon${isTrailingIcon ? 'Trailing' : ''}"></slot>
+        </span>
+    `;
+  }
+
   get nativeValidationMessage() {
     return this.formElement.validationMessage;
   }
@@ -46,26 +82,6 @@ export default class TextField extends MWCTextField {
     }
     return isValid;
   }
-
-  renderLeadingIcon() {
-    return this.renderIcon();
-  }
-
-  renderTrailingIcon() {
-    return this.renderIcon(true);
-  }
-
-  renderIcon(isTrailingIcon: boolean = false): TemplateResult {
-    const classes = {
-      'mdc-text-field__icon--leading': !isTrailingIcon,
-      'mdc-text-field__icon--trailing': isTrailingIcon
-    };
-
-    return html`
-      <span class="mdc-text-field__icon ${classnames(classes)}">
-          <slot name="icon${isTrailingIcon ? 'Trailing' : ''}"></slot>
-        </span>`;
-  }
 }
 
 window.customElements.define('text-field', TextField);