@dile/ui 3.13.1 → 3.15.0

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

@@ -30,4 +30,83 @@ describe('dile-drop-file', () => {
 
     expect(el.fileName).toBe('');
   });
+
+  it('renders accept attribute when accept property is defined', async () => {
+    const el = await renderDropFile('<dile-drop-file accept="application/pdf,image/*"></dile-drop-file>');
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('accept')).toBe('application/pdf,image/*');
+  });
+
+  it('does not render accept attribute when accept property is empty', async () => {
+    const el = await renderDropFile('<dile-drop-file accept=""></dile-drop-file>');
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('accept')).toBeNull();
+  });
+
+  it('renders capture attribute when capture property is defined', async () => {
+    const el = await renderDropFile('<dile-drop-file capture="environment"></dile-drop-file>');
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('capture')).toBe('environment');
+  });
+
+  it('does not render capture attribute when capture property is empty', async () => {
+    const el = await renderDropFile('<dile-drop-file capture=""></dile-drop-file>');
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('capture')).toBeNull();
+  });
+
+  it('updates accept attribute when property changes after render', async () => {
+    const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+    let fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('accept')).toBeNull();
+    
+    el.accept = 'image/*';
+    await el.updateComplete;
+    
+    fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('accept')).toBe('image/*');
+  });
+
+  it('updates capture attribute when property changes after render', async () => {
+    const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+    let fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('capture')).toBeNull();
+    
+    el.capture = 'user';
+    await el.updateComplete;
+    
+    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

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../file-preview.js';
 import '../../button/button.js';
 import { labelStyles } from '../../input/src/label-styles.js';
@@ -61,6 +62,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       allowedExtensions: { type: Array },
       extensionErrorMessage: { type: String },
       name: { type: String, reflect: true },
+      accept: { type: String },
+      capture: { type: String },
     };
   }
 
@@ -78,6 +81,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     this.selectedFileLabel = "Selected file";
     this.extensionErrorMessage = "Only this file extensions are allowed: "
     this.allowedExtensions = [];
+    this.accept = '';
+    this.capture = '';
     this.internals = this.attachInternals();
   } 
 
@@ -104,7 +109,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
         ${this.dropLabelTemplate}
       </div>
       ${this.messageTemplate}
-      <input type="file" id="fileInput" @change=${this._handleFileInput}>
+      <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}"
@@ -166,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;
@@ -205,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();
   }
@@ -213,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);
+}