@dile/ui 3.14.0 → 3.15.0

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

@@ -78,4 +78,35 @@ 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();
+  });
 });

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

@@ -171,6 +171,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     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;
@@ -210,6 +211,16 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     }
   }
 
+  _emitDropFileChanged(file) {
+    this.dispatchEvent(new CustomEvent('dile-drop-file-changed', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        file: file
+      }
+    }));
+  }
+
   openFileDialog() {
     this.fileInput.click();
   }
@@ -218,6 +229,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     this.fileInput.value = "";
     this.fileName = "";
     this.internals.setFormValue(null);
+    this._emitDropFileChanged(null);
     this.emmitChange();
   }
 

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);
+}

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

@@ -0,0 +1,318 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './select-search.js';
+
+describe('dile-select-search', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  const OPTIONS = `
+    <select slot="select">
+      <option value="ES">España (+34)</option>
+      <option value="PT">Portugal (+351)</option>
+      <option value="BR">Brasil (+55)</option>
+      <option value="FR">France (+33)</option>
+    </select>
+  `;
+
+  async function renderSelectSearch(attributes = '', options = OPTIONS) {
+    document.body.innerHTML = `<dile-select-search ${attributes}>${options}</dile-select-search>`;
+    const el = document.body.querySelector('dile-select-search');
+    await el.updateComplete;
+    return el;
+  }
+
+  async function settle(el) {
+    await wait(20);
+    await el.updateComplete;
+  }
+
+  async function typeKeyword(el, keyword) {
+    const input = el.shadowRoot.getElementById('search');
+    input.value = keyword;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await settle(el);
+  }
+
+  function visibleOptionTexts(el) {
+    return Array.from(el.select.shadowRoot.querySelectorAll('[role="option"]')).map(o => o.textContent.trim());
+  }
+
+  async function selectOption(el, index) {
+    el.select.shadowRoot.querySelectorAll('[role="option"]')[index].click();
+    await el.select.updateComplete;
+    await el.updateComplete;
+  }
+
+  describe('Rendering', () => {
+    it('renders the search combobox and a label associated with it', async () => {
+      const el = await renderSelectSearch('label="Prefix"');
+
+      const input = el.shadowRoot.getElementById('search');
+      expect(input.getAttribute('role')).toBe('combobox');
+      const label = el.shadowRoot.querySelector('label');
+      expect(label.textContent).toBe('Prefix');
+      expect(label.getAttribute('for')).toBe('search');
+    });
+
+    it('throws when there is no select element in the light DOM', () => {
+      const el = document.createElement('dile-select-search');
+      expect(() => el.connectedCallback()).toThrow();
+    });
+  });
+
+  describe('Searching', () => {
+    it('filters the slotted options by text and opens the popup without waiting', async () => {
+      const el = await renderSelectSearch();
+
+      await typeKeyword(el, '3');
+
+      expect(visibleOptionTexts(el)).toEqual(['España (+34)', 'Portugal (+351)', 'France (+33)']);
+      expect(el.select.opened).toBe(true);
+    });
+
+    it('ignores case and accents', async () => {
+      const el = await renderSelectSearch();
+
+      await typeKeyword(el, 'ESPANA');
+
+      expect(visibleOptionTexts(el)).toEqual(['España (+34)']);
+    });
+
+    it('shows the empty message when nothing matches', async () => {
+      const el = await renderSelectSearch('emptyMessage="Nothing here"');
+
+      await typeKeyword(el, 'zz');
+
+      expect(el.shadowRoot.querySelector('.status').textContent.trim()).toBe('Nothing here');
+      expect(el.select.opened).toBe(false);
+    });
+
+    it('never shows a loading spinner (filtering is local)', async () => {
+      const el = await renderSelectSearch();
+
+      const input = el.shadowRoot.getElementById('search');
+      input.value = 'es';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.loading).toBe(false);
+      expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeNull();
+    });
+
+    it('can customize the matching by overriding filterOption()', async () => {
+      class PrefixSelect extends customElements.get('dile-select-search') {
+        filterOption(option, keyword) {
+          return option.value.toLowerCase().startsWith(keyword.toLowerCase());
+        }
+      }
+      customElements.define('test-prefix-select', PrefixSelect);
+      document.body.innerHTML = `<test-prefix-select>${OPTIONS}</test-prefix-select>`;
+      const el = document.body.querySelector('test-prefix-select');
+      await el.updateComplete;
+
+      await typeKeyword(el, 'p');
+
+      expect(visibleOptionTexts(el)).toEqual(['Portugal (+351)']);
+    });
+
+    it('picks up options added to the light DOM select after mount', async () => {
+      const el = await renderSelectSearch();
+      const option = document.createElement('option');
+      option.value = 'IT';
+      option.textContent = 'Italia (+39)';
+      el.querySelector('select').appendChild(option);
+      await settle(el);
+
+      await typeKeyword(el, 'ital');
+
+      expect(visibleOptionTexts(el)).toEqual(['Italia (+39)']);
+    });
+  });
+
+  describe('Search field icon', () => {
+    it('shows a decorative search icon, not a button, while the field is empty', async () => {
+      const el = await renderSelectSearch();
+
+      expect(el.shadowRoot.querySelector('.clear-button')).toBeNull();
+      expect(el.shadowRoot.querySelector('.search-wrapper dile-icon').getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('shows a real, labelled clear button once there is text', async () => {
+      const el = await renderSelectSearch('clearSearchLabel="Borrar búsqueda"');
+      await typeKeyword(el, 'esp');
+
+      const button = el.shadowRoot.querySelector('.clear-button');
+      expect(button.tagName).toBe('BUTTON');
+      expect(button.type).toBe('button');
+      expect(button.getAttribute('aria-label')).toBe('Borrar búsqueda');
+    });
+
+    it('the clear button empties the search and returns the focus to the field', async () => {
+      const el = await renderSelectSearch();
+      await typeKeyword(el, 'esp');
+
+      el.shadowRoot.querySelector('.clear-button').click();
+      await el.updateComplete;
+
+      expect(el.keyword).toBe('');
+      expect(el.shadowRoot.activeElement).toBe(el.shadowRoot.getElementById('search'));
+      expect(el.shadowRoot.querySelector('.clear-button')).toBeNull();
+    });
+  });
+
+  describe('showAllOnFocus', () => {
+    it('shows every option on focus when set', async () => {
+      const el = await renderSelectSearch('showAllOnFocus');
+
+      el.shadowRoot.getElementById('search').focus();
+      await settle(el);
+
+      expect(visibleOptionTexts(el).length).toBe(4);
+      expect(el.select.opened).toBe(true);
+    });
+
+    it('shows nothing on focus by default', async () => {
+      const el = await renderSelectSearch();
+
+      el.shadowRoot.getElementById('search').focus();
+      await settle(el);
+
+      expect(visibleOptionTexts(el).length).toBe(0);
+      expect(el.select.opened).toBe(false);
+    });
+  });
+
+  describe('Selecting', () => {
+    it('selecting an option sets value/selectedText and fires events', async () => {
+      const el = await renderSelectSearch('name="prefix"');
+      await typeKeyword(el, 'bra');
+
+      let changedDetail = null;
+      let selectedTextDetail = null;
+      el.addEventListener('element-changed', (e) => { changedDetail = e.detail; });
+      el.addEventListener('dile-select-search-selected-text-changed', (e) => { selectedTextDetail = e.detail; });
+
+      await selectOption(el, 0);
+
+      expect(el.value).toBe('BR');
+      expect(el.selectedText).toBe('Brasil (+55)');
+      expect(el.isSelected).toBe(true);
+      expect(changedDetail).toEqual({ name: 'prefix', value: 'BR' });
+      expect(selectedTextDetail.selectedText).toBe('Brasil (+55)');
+      expect(el.shadowRoot.getElementById('result')).toBeTruthy();
+    });
+
+    it('keyboard flow (ArrowDown + Enter) selects a result', async () => {
+      const el = await renderSelectSearch();
+      await typeKeyword(el, 'port');
+
+      const input = el.shadowRoot.getElementById('search');
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+      await el.select.updateComplete;
+      await el.updateComplete;
+
+      expect(el.value).toBe('PT');
+      expect(el.isSelected).toBe(true);
+    });
+
+    it('clearing the selection returns to the search field', async () => {
+      const el = await renderSelectSearch();
+      await typeKeyword(el, 'bra');
+      await selectOption(el, 0);
+
+      el.shadowRoot.getElementById('result').dispatchEvent(new CustomEvent('dile-input-search-cleared', { bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.isSelected).toBe(false);
+      expect(el.value).toBeUndefined();
+      expect(el.shadowRoot.getElementById('search')).toBeTruthy();
+    });
+
+    it('clearing with showAllOnFocus does not auto-select the first option of the remounted list', async () => {
+      const el = await renderSelectSearch('showAllOnFocus');
+      await typeKeyword(el, 'bra');
+      await selectOption(el, 0);
+
+      const changedValues = [];
+      el.addEventListener('element-changed', (e) => { changedValues.push(e.detail.value); });
+
+      el.shadowRoot.getElementById('result').dispatchEvent(new CustomEvent('dile-input-search-cleared', { bubbles: true }));
+      await settle(el);
+      await settle(el);
+
+      expect(el.value).toBeUndefined();
+      expect(el.isSelected).toBe(false);
+      expect(changedValues).toEqual([undefined]);
+    });
+  });
+
+  describe('Value API', () => {
+    it('resolves the selected text of an initial value from the slotted options', async () => {
+      const el = await renderSelectSearch('value="PT"');
+
+      expect(el.isSelected).toBe(true);
+      expect(el.selectedText).toBe('Portugal (+351)');
+      expect(el.shadowRoot.getElementById('result').value).toBe('Portugal (+351)');
+    });
+
+    it('uses the label as accessible name of the selected field', async () => {
+      const el = await renderSelectSearch('value="PT" label="Country"');
+      await el.updateComplete;
+      const result = el.shadowRoot.getElementById('result');
+      await result.updateComplete;
+      const input = result.shadowRoot.querySelector('input');
+
+      expect(input.getAttribute('aria-label')).toBe('Country');
+    });
+
+    it('set() selects a value and resolves its text synchronously', async () => {
+      const el = await renderSelectSearch();
+
+      el.set('FR');
+      await el.updateComplete;
+
+      expect(el.value).toBe('FR');
+      expect(el.selectedText).toBe('France (+33)');
+      expect(el.isSelected).toBe(true);
+    });
+
+    it('clear() resets value and selection', async () => {
+      const el = await renderSelectSearch('value="ES"');
+
+      el.clear();
+      await el.updateComplete;
+
+      expect(el.value).toBeUndefined();
+      expect(el.isSelected).toBe(false);
+      expect(el.shadowRoot.getElementById('search')).toBeTruthy();
+    });
+
+    it('is form-associated and sets the form value', async () => {
+      document.body.innerHTML = `<form><dile-select-search name="prefix" value="ES">${OPTIONS}</dile-select-search></form>`;
+      const el = document.body.querySelector('dile-select-search');
+      await el.updateComplete;
+
+      const formData = new FormData(document.body.querySelector('form'));
+      expect(formData.get('prefix')).toBe('ES');
+    });
+  });
+
+  describe('Icons', () => {
+    it('reads data-icon from options, falling back to the select data-icon', async () => {
+      const el = await renderSelectSearch('', `
+        <select slot="select" data-icon="lucide.globe">
+          <option value="ES" data-icon="material.star">España</option>
+          <option value="PT">Portugal</option>
+        </select>
+      `);
+
+      expect(el.sourceOptions.map(o => o.icon)).toEqual(['material.star', 'lucide.globe']);
+    });
+  });
+});