@dile/ui 3.6.6 → 3.7.0

package/components/input/index.js

@@ -3,6 +3,7 @@ export { DileInputIcon } from './src/DileInputIcon.js';
 export { DileInputInteger } from './src/DileInputInteger.js';
 export { DileInputMessage } from './src/DileInputMessage.js';
 export { DileInputMoney } from './src/DileInputMoney.js';
+export { DileInputNumber } from './src/DileInputNumber.js';
 export { DileInputNumberMask } from './src/DileInputNumberMask.js';
 export { DileInputPercentage } from './src/DileInputPercentage.js';
 export { DileInputSearch } from './src/DileInputSearch.js';

package/components/input/input-number.js

@@ -0,0 +1,5 @@
+import { DileInputNumber } from './src/DileInputNumber.js';
+
+if (!customElements.get('dile-input-number')) {
+  window.customElements.define('dile-input-number', DileInputNumber);
+}

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

@@ -0,0 +1,96 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-number.js';
+
+describe('dile-input-number', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputNumber(content) {
+    document.body.innerHTML = content;
+    const el = document.body.querySelector('dile-input-number');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('normalizes comma separator to dot by default', async () => {
+    const el = await renderInputNumber('<dile-input-number name="amount"></dile-input-number>');
+    const input = el.shadowRoot.querySelector('input');
+
+    input.value = '12,75';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('12.75');
+    expect(input.value).toBe('12.75');
+  });
+
+  it('normalizes dot separator to comma when configured', async () => {
+    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator=","></dile-input-number>');
+    const input = el.shadowRoot.querySelector('input');
+
+    input.value = '12.75';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('12,75');
+    expect(input.value).toBe('12,75');
+  });
+
+  it('applies min, max and decimals on blur', async () => {
+    const el = await renderInputNumber('<dile-input-number name="amount" min="1" max="10" decimals="2"></dile-input-number>');
+    const input = el.shadowRoot.querySelector('input');
+
+    input.value = '10.987';
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('10.00');
+    expect(input.value).toBe('10.00');
+  });
+
+  it('applies step rounding and decimal separator formatting on blur', async () => {
+    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," step="0.25" decimals="2"></dile-input-number>');
+    const input = el.shadowRoot.querySelector('input');
+
+    input.value = '1.37';
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('1,25');
+    expect(input.value).toBe('1,25');
+  });
+
+  it('normalizes separator only on blur when normalizeOn is blur', async () => {
+    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," normalizeOn="blur"></dile-input-number>');
+    const input = el.shadowRoot.querySelector('input');
+
+    input.value = '12.75';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('12.75');
+    expect(input.value).toBe('12.75');
+
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('12,75');
+    expect(input.value).toBe('12,75');
+  });
+
+  it('falls back to input normalization when normalizeOn is invalid', async () => {
+    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," normalizeOn="foo"></dile-input-number>');
+    const input = el.shadowRoot.querySelector('input');
+
+    await el.updateComplete;
+    expect(el.normalizeOn).toBe('input');
+
+    input.value = '12.75';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('12,75');
+    expect(input.value).toBe('12,75');
+  });
+});

package/components/input/src/DileInputNumber.js

@@ -0,0 +1,282 @@
+import { css } from 'lit';
+import { DileInput } from './DileInput.js';
+
+export class DileInputNumber extends DileInput {
+    static styles = [
+        DileInput.styles,
+        css`
+            :host {
+                display: block;
+            }
+            input {
+              text-align: var(--dile-input-number-text-align, var(--dile-input-text-align, right));
+            }
+        `
+    ];
+
+    static get properties() {
+        return {
+            decimalSeparator: { type: String },
+            allowNegative: { type: Boolean },
+            min: { type: Number },
+            max: { type: Number },
+            step: { type: String },
+            decimals: { type: Number },
+            normalizeOn: { type: String },
+        };
+    }
+
+    constructor() {
+        super();
+        this.type = 'text';
+        this.decimalSeparator = '.';
+        this.allowNegative = true;
+        this.min = null;
+        this.max = null;
+        this.step = 'any';
+        this.decimals = null;
+        this.normalizeOn = 'input';
+        this.changed = false;
+    }
+
+    firstUpdated() {
+        super.firstUpdated();
+        this.syncNativeInputConstraints();
+    }
+
+    get safeDecimalSeparator() {
+        return this.decimalSeparator === ',' ? ',' : '.';
+    }
+
+    get alternateDecimalSeparator() {
+        return this.safeDecimalSeparator === ',' ? '.' : ',';
+    }
+
+    sanitizeValue(value, options = {}) {
+        const normalizeSeparator = options.normalizeSeparator !== false;
+        if (value === null || value === undefined) {
+            return '';
+        }
+
+        const decimalChars = normalizeSeparator
+            ? [this.safeDecimalSeparator]
+            : [this.safeDecimalSeparator, this.alternateDecimalSeparator];
+        let text = value.toString();
+
+        if (normalizeSeparator) {
+            text = text.replaceAll(this.alternateDecimalSeparator, this.safeDecimalSeparator);
+        }
+
+        let sanitized = '';
+        let hasSeparator = false;
+
+        for (const char of text) {
+            if (char >= '0' && char <= '9') {
+                sanitized += char;
+                continue;
+            }
+            if (decimalChars.includes(char) && !hasSeparator) {
+                sanitized += char;
+                hasSeparator = true;
+                continue;
+            }
+            if (char === '-' && this.allowNegative && sanitized.length === 0) {
+                sanitized += char;
+            }
+        }
+
+        return sanitized;
+    }
+
+    normalizeForForm(value) {
+        if (!value) {
+            return '';
+        }
+        return value
+            .toString()
+            .replace(this.safeDecimalSeparator, '.')
+            .replace(this.alternateDecimalSeparator, '.');
+    }
+
+    get normalizeOnBlur() {
+        return this.safeNormalizeOn === 'blur';
+    }
+
+    get safeNormalizeOn() {
+        return this.normalizeOn === 'blur' ? 'blur' : 'input';
+    }
+
+    toNumber(value) {
+        if (value === '' || value === '-' || value === null || value === undefined) {
+            return NaN;
+        }
+        return parseFloat(this.normalizeForForm(value));
+    }
+
+    hasMinConstraint() {
+        return this.min !== null && this.min !== undefined && !isNaN(this.min);
+    }
+
+    hasMaxConstraint() {
+        return this.max !== null && this.max !== undefined && !isNaN(this.max);
+    }
+
+    hasDecimalsConstraint() {
+        return this.decimals !== null && this.decimals !== undefined && !isNaN(this.decimals) && this.decimals >= 0;
+    }
+
+    hasStepConstraint() {
+        if (this.step === null || this.step === undefined || this.step === '' || this.step === 'any') {
+            return false;
+        }
+        const numericStep = parseFloat(this.step);
+        return !isNaN(numericStep) && numericStep > 0;
+    }
+
+    roundFloating(value) {
+        return parseFloat(value.toFixed(12));
+    }
+
+    applyStep(number) {
+        if (!this.hasStepConstraint()) {
+            return number;
+        }
+        const numericStep = parseFloat(this.step);
+        const base = this.hasMinConstraint() ? this.min : 0;
+        const stepped = base + Math.round((number - base) / numericStep) * numericStep;
+        return this.roundFloating(stepped);
+    }
+
+    clamp(number) {
+        let result = number;
+        if (this.hasMinConstraint() && result < this.min) {
+            result = this.min;
+        }
+        if (this.hasMaxConstraint() && result > this.max) {
+            result = this.max;
+        }
+        return result;
+    }
+
+    formatNumber(number) {
+        if (this.hasDecimalsConstraint()) {
+            return number.toFixed(this.decimals).replace('.', this.safeDecimalSeparator);
+        }
+        return number.toString().replace('.', this.safeDecimalSeparator);
+    }
+
+    normalizeAndConstrain(value) {
+        const sanitized = this.sanitizeValue(value);
+        const parsed = this.toNumber(sanitized);
+
+        if (isNaN(parsed)) {
+            return '';
+        }
+
+        let constrained = this.clamp(parsed);
+        constrained = this.applyStep(constrained);
+        constrained = this.clamp(constrained);
+
+        if (this.hasDecimalsConstraint()) {
+            constrained = parseFloat(constrained.toFixed(this.decimals));
+        }
+
+        return this.formatNumber(constrained);
+    }
+
+    syncNativeInputConstraints() {
+        if (!this.el) {
+            return;
+        }
+
+        this.el.setAttribute('inputmode', 'decimal');
+
+        if (this.hasMinConstraint()) {
+            this.el.setAttribute('min', this.min.toString());
+        } else {
+            this.el.removeAttribute('min');
+        }
+
+        if (this.hasMaxConstraint()) {
+            this.el.setAttribute('max', this.max.toString());
+        } else {
+            this.el.removeAttribute('max');
+        }
+
+        if (this.hasStepConstraint()) {
+            this.el.setAttribute('step', this.step.toString());
+        } else {
+            this.el.setAttribute('step', 'any');
+        }
+    }
+
+    _input(e) {
+        const sanitized = this.sanitizeValue(e.target.value, {
+            normalizeSeparator: !this.normalizeOnBlur,
+        });
+        if (sanitized !== e.target.value) {
+            e.target.value = sanitized;
+        }
+        this.value = sanitized;
+
+        if (this.hideErrorOnInput && this.errored) {
+          this.clearError();
+        }
+    }
+
+    doBlur(e) {
+        const num = this.normalizeAndConstrain(e.target.value);
+
+        if (num !== e.target.value || this.changed) {
+            this.value = num;
+            this.emmitChange();
+            this.changed = false;
+        }
+    }
+
+    updated(changedProperties) {
+        super.updated(changedProperties);
+
+        if (changedProperties.has('normalizeOn') && this.normalizeOn !== this.safeNormalizeOn) {
+            this.normalizeOn = this.safeNormalizeOn;
+            return;
+        }
+
+        if (changedProperties.has('decimalSeparator') && this.value) {
+            const sanitized = this.sanitizeValue(this.value);
+            if (sanitized !== this.value) {
+                this.value = sanitized;
+                return;
+            }
+        }
+
+        if (changedProperties.has('value') && this.value) {
+            this.changed = true;
+        }
+
+        if (changedProperties.has('min') || changedProperties.has('max') || changedProperties.has('step') || changedProperties.has('decimals')) {
+            if (this.value) {
+                const normalized = this.normalizeAndConstrain(this.value);
+                if (normalized !== this.value) {
+                    this.value = normalized;
+                    return;
+                }
+            }
+            this.syncNativeInputConstraints();
+        }
+
+        if (changedProperties.has('value') || changedProperties.has('decimalSeparator')) {
+            this.internals.setFormValue(this.normalizeForForm(this.value));
+        }
+
+        if (changedProperties.has('decimalSeparator') || changedProperties.has('normalizeOn')) {
+            this.syncNativeInputConstraints();
+        }
+    }
+
+    computeValue(value) {
+        return this.sanitizeValue(value, {
+            normalizeSeparator: !this.normalizeOnBlur,
+        });
+    }
+}

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.6",
+  "version": "3.7.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3bc0a2459a5ced3e7105ce061f93f07a9c798759"
+  "gitHead": "62016dd8f5a9bd165131bc2058be322eb3aea339"
 }