@dile/ui 3.14.0 → 3.16.1

package/components/drop-file/drop-file.spec.js

@@ -78,4 +78,137 @@ describe('dile-drop-file', () => {
     fileInput = el.shadowRoot.querySelector('input[type="file"]');
     expect(fileInput.getAttribute('capture')).toBe('user');
   });
+
+  it('emits dile-drop-file-changed event when file is selected', async () => {
+    const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+    let eventDetail = null;
+    el.addEventListener('dile-drop-file-changed', (e) => { eventDetail = e.detail; });
+
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    const file = new File(['content'], 'test.pdf', { type: 'application/pdf' });
+    Object.defineProperty(fileInput, 'files', {
+      value: [file],
+      writable: false,
+    });
+    
+    fileInput.dispatchEvent(new Event('change', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(eventDetail).toBeTruthy();
+    expect(eventDetail.file).toEqual(file);
+  });
+
+  it('emits dile-drop-file-changed event with null when file is cleared', async () => {
+    const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+    let eventDetail = null;
+    el.addEventListener('dile-drop-file-changed', (e) => { eventDetail = e.detail; });
+
+    el.clear();
+    await el.updateComplete;
+
+    expect(eventDetail).toBeTruthy();
+    expect(eventDetail.file).toBeNull();
+  });
+
+  describe('multiple mode', () => {
+    function createFile(name, content = 'content') {
+      return new File([content], name, { lastModified: 1 });
+    }
+
+    function dropFiles(el, files) {
+      const dataTransfer = new DataTransfer();
+      files.forEach(file => dataTransfer.items.add(file));
+      const dropZone = el.shadowRoot.querySelector('#dropZone');
+      dropZone.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }));
+      return el.updateComplete;
+    }
+
+    it('renders the file input with the multiple attribute', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      expect(el.shadowRoot.querySelector('input[type="file"]').hasAttribute('multiple')).toBe(true);
+    });
+
+    it('does not render the multiple attribute by default', async () => {
+      const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+      expect(el.shadowRoot.querySelector('input[type="file"]').hasAttribute('multiple')).toBe(false);
+    });
+
+    it('accepts several dropped files and renders a preview for each one', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      let eventDetail = null;
+      el.addEventListener('dile-drop-file-changed', (e) => { eventDetail = e.detail; });
+
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(2);
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(el.getFiles().length).toBe(2);
+      expect(el.shadowRoot.querySelector('#fileInput').files.length).toBe(2);
+      expect(eventDetail.files.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(eventDetail.file.name).toBe('a.txt');
+    });
+
+    it('accumulates files between selections without duplicates', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt')]);
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(2);
+    });
+
+    it('removes a single file with removeFile', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt'), createFile('c.txt')]);
+
+      el.removeFile(1);
+      await el.updateComplete;
+
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'c.txt']);
+      expect(el.shadowRoot.querySelector('#fileInput').files.length).toBe(2);
+    });
+
+    it('removes a file when its preview clear link is clicked', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      const preview = el.shadowRoot.querySelectorAll('dile-file-preview')[0];
+      await preview.updateComplete;
+      preview.shadowRoot.querySelector('a').click();
+      await el.updateComplete;
+
+      expect(el.value.map(file => file.name)).toEqual(['b.txt']);
+    });
+
+    it('discards files with invalid extensions and keeps the valid ones', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      el.allowedExtensions = ['pdf'];
+      await dropFiles(el, [createFile('a.pdf'), createFile('b.exe')]);
+
+      expect(el.value.map(file => file.name)).toEqual(['a.pdf']);
+      expect(el.errored).toBe(true);
+      expect(el.shadowRoot.querySelector('.message.errored-msg')).toBeTruthy();
+    });
+
+    it('clears all the files', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      el.clear();
+      await el.updateComplete;
+
+      expect(el.value).toEqual([]);
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(0);
+    });
+
+    it('sets all the files as form value', async () => {
+      document.body.innerHTML = '<form><dile-drop-file name="docs" multiple></dile-drop-file></form>';
+      const el = document.querySelector('dile-drop-file');
+      await el.updateComplete;
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      const formData = new FormData(document.querySelector('form'));
+      expect(formData.getAll('docs').map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+    });
+  });
 });

package/components/drop-file/src/DileDropFile.js

@@ -64,6 +64,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       name: { type: String, reflect: true },
       accept: { type: String },
       capture: { type: String },
+      multiple: { type: Boolean, reflect: true },
+      files: { state: true },
     };
   }
 
@@ -83,6 +85,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     this.allowedExtensions = [];
     this.accept = '';
     this.capture = '';
+    this.multiple = false;
+    this.files = [];
     this.internals = this.attachInternals();
   } 
 
@@ -109,12 +113,23 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
         ${this.dropLabelTemplate}
       </div>
       ${this.messageTemplate}
-      <input type="file" id="fileInput" @change=${this._handleFileInput} accept=${ifDefined(this.accept || undefined)} capture=${ifDefined(this.capture || undefined)}>
-      <dile-file-preview 
-        fileName="${this.fileName}"
-        selectedFileLabel="${this.selectedFileLabel}"
-        @dile-file-clear=${this.clear}
-      ></dile-file-preview>
+      <input type="file" id="fileInput" ?multiple=${this.multiple} @change=${this._handleFileInput} accept=${ifDefined(this.accept || undefined)} capture=${ifDefined(this.capture || undefined)}>
+      ${this.multiple
+        ? this.files.map((file, index) => html`
+          <dile-file-preview
+            fileName="${file.name}"
+            selectedFileLabel="${this.selectedFileLabel}"
+            @dile-file-clear=${() => this.removeFile(index)}
+          ></dile-file-preview>
+        `)
+        : html`
+          <dile-file-preview 
+            fileName="${this.fileName}"
+            selectedFileLabel="${this.selectedFileLabel}"
+            @dile-file-clear=${this.clear}
+          ></dile-file-preview>
+        `
+      }
     `;
   }
 
@@ -167,10 +182,15 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
   }
 
   _processFile(files) {
+    if (this.multiple) {
+      this._processMultipleFiles(files);
+      return;
+    }
     this.internals.setFormValue(files.length > 0 ? files[0] : null);
     if (files.length > 0) {
       this.fileName = files[0].name;
       this.emmitChange();
+      this._emitDropFileChanged(files[0]);
       if(this._isValidExtension(this.fileName)) {
         this.message = this.firstMessage || '';
         this.errored = false;
@@ -182,6 +202,56 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     }
   }
 
+  _processMultipleFiles(files) {
+    const incoming = Array.from(files);
+    if (incoming.length === 0) {
+      // Restore the input files, as a canceled dialog empties it
+      this._syncFileInput();
+      return;
+    }
+    const validFiles = incoming.filter(file => this._isValidExtension(file.name));
+    const newFiles = validFiles.filter(file => !this.files.some(current => this._isSameFile(current, file)));
+    this.files = [...this.files, ...newFiles];
+    if (validFiles.length < incoming.length) {
+      this.message = `${this.extensionErrorMessage} ${this.allowedExtensions.join(', ')}`;
+      this.errored = true;
+    } else {
+      this.message = this.firstMessage || '';
+      this.errored = false;
+    }
+    this._syncFiles();
+  }
+
+  _isSameFile(a, b) {
+    return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+  }
+
+  _syncFileInput() {
+    if (!this.fileInput) return;
+    const dataTransfer = new DataTransfer();
+    this.files.forEach(file => dataTransfer.items.add(file));
+    this.fileInput.files = dataTransfer.files;
+  }
+
+  _syncFiles() {
+    this._syncFileInput();
+    if (this.files.length > 0) {
+      const formData = new FormData();
+      this.files.forEach(file => formData.append(this.name || 'files', file));
+      this.internals.setFormValue(formData);
+    } else {
+      this.internals.setFormValue(null);
+    }
+    this.emmitChange();
+    this._emitDropFileChanged(this.files[0] || null);
+  }
+
+  removeFile(index) {
+    if (index < 0 || index >= this.files.length) return;
+    this.files = this.files.filter((_, i) => i !== index);
+    this._syncFiles();
+  }
+
   _isValidExtension(fileName) {
     if(this.allowedExtensions.length === 0) {
       return true;
@@ -210,6 +280,17 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     }
   }
 
+  _emitDropFileChanged(file) {
+    this.dispatchEvent(new CustomEvent('dile-drop-file-changed', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        file: file,
+        files: this.multiple ? [...this.files] : (file ? [file] : []),
+      }
+    }));
+  }
+
   openFileDialog() {
     this.fileInput.click();
   }
@@ -217,15 +298,23 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
   clear() {
     this.fileInput.value = "";
     this.fileName = "";
+    this.files = [];
     this.internals.setFormValue(null);
+    this._emitDropFileChanged(null);
     this.emmitChange();
   }
 
   getFiles() {
+    if (this.multiple) {
+      return [...this.files];
+    }
     return this.fileInput.files;
   }
 
   get value() {
+    if (this.multiple) {
+      return [...this.files];
+    }
     if(this.fileInput) {
       return this.fileInput.files[0];
     } else {

package/components/input/input-search.spec.js

@@ -31,6 +31,48 @@ describe('dile-input-search', () => {
     expect(input.getAttribute('data-form-type')).toBe('other');
   });
 
+  it('does not show an empty error box when errored without error slot content', async () => {
+    const el = await renderInputSearch('<dile-input-search errored></dile-input-search>');
+
+    const errorMessage = el.shadowRoot.getElementById('error-msg');
+    expect(errorMessage.hidden).toBe(true);
+    expect(errorMessage.getBoundingClientRect().height).toBe(0);
+    // Only the search box itself gets the bordered box styles
+    expect(getComputedStyle(errorMessage).borderTopStyle).toBe('none');
+  });
+
+  it('shows the error slot content when errored', async () => {
+    const el = await renderInputSearch('<dile-input-search errored><span slot="error">Wrong search</span></dile-input-search>');
+    await el.updateComplete;
+
+    const errorMessage = el.shadowRoot.getElementById('error-msg');
+    expect(errorMessage.hidden).toBe(false);
+    expect(el.shadowRoot.querySelector('input').getAttribute('aria-describedby')).toBe('error-msg');
+  });
+
+  it('labels the button in English by default, with configurable texts', async () => {
+    const el = await renderInputSearch('<dile-input-search></dile-input-search>');
+    const button = el.shadowRoot.querySelector('button');
+    expect(button.getAttribute('aria-label')).toBe('Search');
+    expect(el.shadowRoot.querySelector('input').getAttribute('aria-label')).toBe('Search');
+
+    el.value = 'lit';
+    await el.updateComplete;
+    expect(button.getAttribute('aria-label')).toBe('Clear search');
+
+    el.clearButtonLabel = 'Limpiar búsqueda';
+    await el.updateComplete;
+    expect(button.getAttribute('aria-label')).toBe('Limpiar búsqueda');
+  });
+
+  it('uses accessibleLabel as aria-label, falling back to name', async () => {
+    const named = await renderInputSearch('<dile-input-search name="Products"></dile-input-search>');
+    expect(named.shadowRoot.querySelector('input').getAttribute('aria-label')).toBe('Products');
+
+    const labelled = await renderInputSearch('<dile-input-search name="Products" accessibleLabel="Search products"></dile-input-search>');
+    expect(labelled.shadowRoot.querySelector('input').getAttribute('aria-label')).toBe('Search products');
+  });
+
   it('updates the value on input and dispatches dile-input-search after the delay', async () => {
     const el = await renderInputSearch('<dile-input-search delay="10"></dile-input-search>');
     const input = el.shadowRoot.querySelector('input');

package/components/input/src/DileInputSearch.js

@@ -8,7 +8,7 @@ export class DileInputSearch extends LitElement {
             :host {
                 display: block;
             }
-            div {
+            .search-box {
                 display: flex;
                 box-sizing: border-box;
                 border-radius: var(--dile-input-border-radius, 5px);
@@ -17,7 +17,7 @@ export class DileInputSearch extends LitElement {
                 width: var(--dile-input-width, 100%);
                 background-color: var(--dile-input-background-color, #fff);
             }
-            div:focus-within {
+            .search-box:focus-within {
                 border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
                 /* Outline adicional para mayor visibilidad */
                 outline: 2px solid var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
@@ -25,6 +25,7 @@ export class DileInputSearch extends LitElement {
             }
             input {
                 flex-grow: 1;
+                min-width: 0;
                 border: none;
                 color: var(--dile-input-color, #303030);
                 font-size: var(--dile-input-font-size, 1em);
@@ -97,6 +98,14 @@ export class DileInputSearch extends LitElement {
         errored: { type: Boolean },
         /** Name for this input field */
         name: { type: String },
+        /** Whether there is content in the "error" slot */
+        _hasErrorContent: { state: true },
+        /** Accessible name of the input field, read by screen readers. Defaults to name, or to searchButtonLabel. */
+        accessibleLabel: { type: String },
+        /** Accessible name of the button when the field is empty */
+        searchButtonLabel: { type: String },
+        /** Accessible name of the button that clears the field */
+        clearButtonLabel: { type: String },
       };
     }
 
@@ -107,6 +116,9 @@ export class DileInputSearch extends LitElement {
         this.value = '';
         this.readOnly = false;
         this.errored = false;
+        this._hasErrorContent = false;
+        this.searchButtonLabel = 'Search';
+        this.clearButtonLabel = 'Clear search';
     }
 
     firstUpdated() {
@@ -114,12 +126,12 @@ export class DileInputSearch extends LitElement {
     }
 
     render() {
-        const iconLabel = this.value.length 
-            ? 'Limpiar búsqueda'
-            : 'Buscar';
+        const iconLabel = this.value.length
+            ? this.clearButtonLabel
+            : this.searchButtonLabel;
         
         return html`
-        <div class="${this.errored ? "errored" : ""}">
+        <div class="search-box ${this.errored ? "errored" : ""}">
             <input 
                 id="elinput"
                 type="search"
@@ -132,9 +144,9 @@ export class DileInputSearch extends LitElement {
                 .value="${this.value}"
                 ?disabled="${this.disabled}"
                 ?readonly="${this.readOnly}"
-                aria-label="${this.name || 'Búsqueda'}"
+                aria-label="${this.accessibleLabel || this.name || this.searchButtonLabel}"
                 ?aria-invalid="${this.errored}"
-                aria-describedby="${this.errored ? 'error-msg' : null}"
+                aria-describedby="${this.showErrorMessage ? 'error-msg' : null}"
             >
             <button
               @click=${this.iconClick}
@@ -150,14 +162,21 @@ export class DileInputSearch extends LitElement {
               ></dile-icon>
             </button>
         </div>
-        ${this.errored ? html`
-          <div id="error-msg" class="error-message" role="alert">
-            <slot name="error"></slot>
-          </div>
-        ` : ''}
+        <div id="error-msg" class="error-message" role="alert" ?hidden=${!this.showErrorMessage}>
+          <slot name="error" @slotchange=${this.errorSlotChanged}></slot>
+        </div>
         `;
     }
 
+    /** The error message is only shown in the errored state, when there is an "error" slot content */
+    get showErrorMessage() {
+        return this.errored && this._hasErrorContent;
+    }
+
+    errorSlotChanged(e) {
+        this._hasErrorContent = e.target.assignedNodes({ flatten: true }).length > 0;
+    }
+
     inputHandler(e) {
         this.value = e.target.value;
         if (this.timeout) {

package/components/order-switch/order-switch.spec.js

@@ -17,8 +17,8 @@ describe('dile-order-switch', () => {
     const el = await renderOrderSwitch('<dile-order-switch label="Name"></dile-order-switch>');
 
     expect(el.value).toBe('asc');
-    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('span').textContent.trim()).toBe('Name');
+    expect(el.shadowRoot.querySelector('dile-button-icon')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('a').textContent.trim()).toBe('Name');
   });
 
   it('toggles between asc and desc', async () => {
@@ -35,7 +35,7 @@ describe('dile-order-switch', () => {
     let receivedDetail = null;
     el.addEventListener('element-changed', (e) => { receivedDetail = e.detail; });
 
-    el.shadowRoot.querySelector('span').click();
+    el.shadowRoot.querySelector('a').click();
     await el.updateComplete;
 
     expect(el.value).toBe('asc'); // unchanged
@@ -48,7 +48,7 @@ describe('dile-order-switch', () => {
     let receivedDetail = null;
     el.addEventListener('element-changed', (e) => { receivedDetail = e.detail; });
 
-    el.shadowRoot.querySelector('span').click();
+    el.shadowRoot.querySelector('a').click();
     await el.updateComplete;
 
     expect(el.value).toBe('desc'); // toggled

package/components/select/index.js

@@ -2,4 +2,6 @@ export { DileSelect } from './src/DileSelect.js';
 export { DileSelectAjax } from './src/DileSelectAjax.js';
 export { DileSelectBoolean } from './src/DileSelectBoolean.js';
 export { DileSelectOverlay } from './src/DileSelectOverlay.js';
-export { DileSelectAjaxOverlay } from './src/DileSelectAjaxOverlay.js';
+export { DileSelectAjaxOverlay } from './src/DileSelectAjaxOverlay.js';
+export { DileSelectSearch } from './src/DileSelectSearch.js';
+export { DileSelectSearchableBase } from './src/DileSelectSearchableBase.js';

package/components/select/select-overlay.spec.js

@@ -321,6 +321,22 @@ describe('dile-select-overlay', () => {
   });
 
   describe('Positioning', () => {
+    it('can open a popup wider than a narrow trigger with --dile-select-overlay-min-width', async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay style="width: 80px; --dile-select-overlay-min-width: 200px;">
+          <select slot="select">
+            <option value="1">A long option text</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      await open(el);
+
+      const overlay = el.shadowRoot.getElementById('overlay');
+      expect(overlay.getBoundingClientRect().width).toBe(200);
+      expect(el.shadowRoot.getElementById('trigger').getBoundingClientRect().width).toBe(80);
+    });
+
     it('keeps the same moveTop-tightened gap when flipping above the trigger as when sitting below it', async () => {
       // Regression test: moveTop used to only tighten the gap for the normal (below) position.
       // The flip-to-above fallback used a fixed 10px margin unrelated to moveTop, so a popup

package/components/select/select-search.js

@@ -0,0 +1,6 @@
+import './select-overlay.js'
+import { DileSelectSearch } from "./src/DileSelectSearch.js";
+
+if (!customElements.get("dile-select-search")) {
+  window.customElements.define("dile-select-search", DileSelectSearch);
+}