Feat/is dragging prop (#2025)

* fix: lion-selected-filelist, restored composed: true and bubbles: true for 'file-remove-requested' event, otherwise removing files for subclassers won't work

* feat: added isDragging property

.changeset/yellow-eels-rule.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+lion-input-file: added isDragging property

packages/ui/components/input-file/src/LionInputFile.js

@@ -47,6 +47,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
       maxFileSize: { type: Number, attribute: 'max-file-size' },
       enableDropZone: { type: Boolean, attribute: 'enable-drop-zone' },
       uploadOnSelect: { type: Boolean, attribute: 'upload-on-select' },
+      isDragging: { type: Boolean, attribute: 'is-dragging', reflect: true },
       uploadResponse: { type: Array, state: false },
       _selectedFilesMetaData: { type: Array, state: true },
     };
@@ -300,11 +301,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         (/** @type {Event} */ ev) => {
           ev.preventDefault();
           ev.stopPropagation();
-          if (eventName !== 'dragleave') {
+          this.isDragging = eventName !== 'dragleave';
-            this.setAttribute('is-dragging', '');
-          } else {
-            this.removeAttribute('is-dragging');
-          }
         },
         false,
       );
@@ -316,7 +313,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         if (ev.target === this._inputNode) {
           ev.preventDefault();
         }
-        this.removeAttribute('is-dragging');
+        this.isDragging = false;
       },
       false,
     );
@@ -436,6 +433,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
               ];
             }
           });
+          // this._selectedFilesMetaData = [...this._selectedFilesMetaData];
         }
       });
     }
@@ -468,7 +466,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    */
   _processDroppedFiles(ev) {
     ev.preventDefault();
-    this.removeAttribute('is-dragging');
+    this.isDragging = false;
 
     const isDraggingMultipleWhileNotSupported =
       ev.dataTransfer && ev.dataTransfer.items.length > 1 && !this.multiple;

packages/ui/components/input-file/test/lion-input-file.test.js

@@ -927,12 +927,14 @@ describe('lion-input-file', () => {
     it('should set "is-dragging" on dragenter', async () => {
       const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
       dropzone?.dispatchEvent(new Event('dragenter', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(true);
     });
 
     it('should set "is-dragging" on dragover', async () => {
       const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
       dropzone?.dispatchEvent(new Event('dragover', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(true);
     });
 
@@ -942,6 +944,7 @@ describe('lion-input-file', () => {
       await el.updateComplete;
 
       dropzone?.dispatchEvent(new Event('dragleave', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(false);
     });
 
@@ -951,6 +954,7 @@ describe('lion-input-file', () => {
       await el.updateComplete;
 
       window.dispatchEvent(new Event('drop', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(false);
     });