[4.0] Hide the clear button when no value is set in media field (#34620)

* Hide the clear button when no value is set in media field

* Remove duplicate code

Author: laoneo

build/media_source/system/js/fields/joomla-field-media.w-c.es6.js

@@ -14,7 +14,7 @@
       this.clearValue = this.clearValue.bind(this);
       this.modalClose = this.modalClose.bind(this);
       this.setValue = this.setValue.bind(this);
-      this.updatePreview = this.updatePreview.bind(this);
+      this.updateState = this.updateState.bind(this);
     }
 
     static get observedAttributes() {
@@ -108,7 +108,7 @@
         this.buttonClearEl.addEventListener('click', this.clearValue);
       }
 
-      this.updatePreview();
+      this.updateState();
     }
 
     disconnectedCallback() {
@@ -151,7 +151,7 @@
 
     setValue(value) {
       this.inputElement.value = value;
-      this.updatePreview();
+      this.updateState();
 
       // trigger change event both on the input and on the custom element
       this.inputElement.dispatchEvent(new Event('change'));
@@ -165,7 +165,10 @@
       this.setValue('');
     }
 
-    updatePreview() {
+    updateState() {
+      // Hide the clear button when no value is set
+      this.buttonClearEl.style.display = this.inputElement.value ? '' : 'none';
+
       if (['true', 'static'].indexOf(this.preview) === -1 || this.preview === 'false' || !this.previewElement) {
         return;
       }

build/media_source/system/js/fields/joomla-image-select.w-c.es6.js

@@ -173,7 +173,7 @@
             }
           }
           editor.value = `${Joomla.selectedMediaFile.url}#joomlaImage://${media.path.replace(':', '')}?width=${Joomla.selectedMediaFile.width}&height=${Joomla.selectedMediaFile.height}`;
-          fieldClass.updatePreview();
+          fieldClass.updateState();
         }
       }
     }