@dile/ui 3.6.5 → 3.6.7

package/components/confirm/confirm.spec.js

@@ -29,4 +29,29 @@ describe('dile-confirm', () => {
 
     expect(accepted).toBe(true);
   });
+
+  it('handles dontCloseOnAccept and can be reset with resetProcessing()', async () => {
+    const el = await renderConfirm('<dile-confirm dontCloseOnAccept>Are you sure?</dile-confirm>');
+    let acceptCount = 0;
+    el.addEventListener('dile-confirm-accepted', () => { acceptCount++; });
+
+    el.shadowRoot.querySelector('.accept').click();
+    await el.updateComplete;
+    expect(acceptCount).toBe(1);
+    expect(el._isProcessing).toBe(true);
+    expect(el.shadowRoot.querySelector('.accept').classList.contains('disabled')).toBe(true);
+
+    // Clicking again while processing should not trigger accept
+    el.shadowRoot.querySelector('.accept').click();
+    expect(acceptCount).toBe(1);
+
+    // Calling resetProcessing should unlock the buttons
+    el.resetProcessing();
+    await el.updateComplete;
+    expect(el._isProcessing).toBe(false);
+    expect(el.shadowRoot.querySelector('.accept').classList.contains('disabled')).toBe(false);
+
+    el.shadowRoot.querySelector('.accept').click();
+    expect(acceptCount).toBe(2);
+  });
 });

package/components/confirm/src/DileConfirm.js

@@ -52,6 +52,7 @@ export class DileConfirm extends LitElement {
       cancelLabel: { type: String },
       blocking: { type: Boolean },
       dontCloseOnAccept: { type: Boolean },
+      _isProcessing: { state: true },
     };
   }
 
@@ -61,6 +62,7 @@ export class DileConfirm extends LitElement {
     this.cancelLabel = "Cancell";
     this.opened = false;
     this.blocking = false;
+    this.dontCloseOnAccept = false;
     this._isProcessing = false;
   }
 
@@ -100,6 +102,7 @@ export class DileConfirm extends LitElement {
 
   open() {
     this.modal.open();
+    this._isProcessing = false;
   }
 
   close() {
@@ -107,6 +110,10 @@ export class DileConfirm extends LitElement {
     this._isProcessing = false;
   }
 
+  resetProcessing() {
+    this._isProcessing = false;
+  }
+
   firstUpdated() {
     this.modal = this.shadowRoot.getElementById("modal");
   }

package/components/input/src/DileInputSearch.js

@@ -19,22 +19,52 @@ export class DileInputSearch extends LitElement {
             }
             div: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));
+                outline-offset: 2px;
             }
             input {
                 flex-grow: 1;
                 border: none;
-                outline: none;
                 color: var(--dile-input-color, #303030);
                 font-size: var(--dile-input-font-size, 1em);
                 line-height: var(--dile-input-line-height, 1.5em);
                 background-color: var(--dile-input-background-color, #fff);
+                padding: 2px 4px;
+            }
+            input:focus {
+                outline: none;
             }
             input::placeholder {
-              color: var(--dile-input-placeholder-color, #ccc);
+              /* WCAG AA contrast: #666 sobre #fff = 7.5:1 */
+              color: var(--dile-input-placeholder-color, #666);
             }
-            dile-icon {
+            .icon-button {
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 4px;
                 margin-left: 1px;
                 display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 3px;
+                color: var(--dile-input-color, #303030);
+                font-size: 1em;
+            }
+            .icon-button:focus {
+                outline: 2px solid var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
+                outline-offset: 1px;
+            }
+            .icon-button:hover:not(:disabled) {
+                background-color: var(--dile-input-hover-background, rgba(0,0,0,0.05));
+            }
+            .icon-button:disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
+            dile-icon {
+                display: flex;
             }
             :host([disabled]) {
                 opacity: 0.5;
@@ -42,6 +72,12 @@ export class DileInputSearch extends LitElement {
             .errored {
                 border-color: var(--dile-input-error-border-color, #c00);
             }
+            .error-message {
+                color: var(--dile-input-error-border-color, #c00);
+                font-size: 0.875em;
+                margin-top: 4px;
+                padding: 4px 0;
+            }
         `
     ];
 
@@ -72,6 +108,10 @@ export class DileInputSearch extends LitElement {
     }
 
     render() {
+        const iconLabel = this.value.length 
+            ? 'Limpiar búsqueda'
+            : 'Buscar';
+        
         return html`
         <div class="${this.errored ? "errored" : ""}">
             <input 
@@ -83,12 +123,29 @@ export class DileInputSearch extends LitElement {
                 .value="${this.value}"
                 ?disabled="${this.disabled}"
                 ?readonly="${this.readOnly}"
+                aria-label="${this.name || 'Búsqueda'}"
+                ?aria-invalid="${this.errored}"
+                aria-describedby="${this.errored ? 'error-msg' : null}"
             >
-            <dile-icon 
+            <button
               @click=${this.iconClick}
-              .icon="${this.value.length ? clearIcon : searchIcon}"
-            ></dile-icon>
+              @keydown=${this.iconKeydown}
+              class="icon-button"
+              aria-label="${iconLabel}"
+              type="button"
+              ?disabled="${this.disabled}"
+            >
+              <dile-icon 
+                .icon="${this.value.length ? clearIcon : searchIcon}"
+                aria-hidden="true"
+              ></dile-icon>
+            </button>
         </div>
+        ${this.errored ? html`
+          <div id="error-msg" class="error-message" role="alert">
+            <slot name="error"></slot>
+          </div>
+        ` : ''}
         `;
     }
 
@@ -107,6 +164,15 @@ export class DileInputSearch extends LitElement {
         this.input.focus();
     }
 
+    iconKeydown(e) {
+        // Permitir Space y Enter para activar el icono
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this.clear();
+            this.input.focus();
+        }
+    }
+
     dispatchSearch(key) {
         this.dispatchEvent(new CustomEvent('dile-input-search', {
             bubbles: true,

package/mixins/form/src/DileForm.js

@@ -137,6 +137,17 @@ export const DileForm = (superclass) => class extends superclass {
     }
   }
 
+  clearField(name) {
+    const node = this.getNodeElement(name);
+    if (node) {
+      if (typeof node.clear === "function") {
+        node.clear();
+      } else {
+        node.value = '';
+      }
+    }
+  }
+
   showError(name, error) {
     const parts = name.split('.');
     

package/mixins/overlay/src/DileOverlay.js

@@ -82,10 +82,6 @@ export const DileOverlay = function(superClass) {
     * closes the overlay
     */
     close() {
-      this.dispatchEvent(new CustomEvent('overlay-closed', {
-        bubbles: true,
-        composed: true,
-      }));
       if(!this._opening && this._overlayClass=='opened') {
         this._overlayClass = '';
         this._removePositionListeners();
@@ -93,6 +89,10 @@ export const DileOverlay = function(superClass) {
         this.delayId = setTimeout(() => {
           this.overlay.style.display = 'none'
         }, 500);
+        this.dispatchEvent(new CustomEvent('overlay-closed', {
+        bubbles: true,
+        composed: true,
+      }));
       }
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.6.5",
+  "version": "3.6.7",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ee029c01956874746ff8c78f02f4868ef4ce4875"
+  "gitHead": "d62c55983a8fcdf7b1a4cb2b6da64d4d1e30b9c6"
 }