@moni-labs/moni-ui 0.4.13 → 0.4.16

package/dist/components/moni-text-field.js

@@ -10,15 +10,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { classMap } from 'lit/directives/class-map.js';
-import Inputmask from 'inputmask';
-import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
-import { emitMoniEvent } from '../utils/event-emitter.js';
-import './moni-icon.js';
-import './moni-progress.js';
+import { css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import Inputmask from "inputmask";
+import { MoniElement, sharedStyles, fieldStyles } from "./_base/index.js";
+import { emitMoniEvent } from "../utils/event-emitter.js";
+import "./moni-icon.js";
+import "./moni-progress.js";
 /**
  * Componente Material Design 3 Text Field (Campo de texto).
  *
@@ -78,72 +78,72 @@ let MoniTextField = class MoniTextField extends MoniElement {
          * El nombre del input, enviado con los datos del formulario.
          * @type {string}
          */
-        this.name = '';
+        this.name = "";
         /**
          * El texto de la etiqueta flotante.
          * @type {string}
          */
-        this.label = '';
+        this.label = "";
         /**
          * Variante visual del campo de texto.
          * @type {'filled' | 'outlined' | 'underlined'}
          * @default 'filled'
          */
-        this.variant = 'filled';
+        this.variant = "filled";
         /**
          * Define las dimensiones del campo de texto.
          * @type {'small' | 'medium' | 'large' | 'extra'}
          * @default 'medium'
          */
-        this.size = 'medium';
+        this.size = "medium";
         /**
          * Forma del radio del borde (border-radius) del campo.
          * @type {'round' | 'small-round' | 'no-round'}
          * @default 'no-round'
          */
-        this.shape = 'no-round';
+        this.shape = "no-round";
         /**
          * El tipo de input HTML nativo.
          * @type {'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color'}
          * @default 'text'
          */
-        this.type = 'text';
+        this.type = "text";
         /**
          * Nombre del icono inicial (leading) (Material Symbols).
          * @type {string}
          */
-        this.icon = '';
+        this.icon = "";
         /**
          * Nombre del icono final (trailing) (Material Symbols).
          * @type {string}
          */
-        this.trailingIcon = '';
+        this.trailingIcon = "";
         /**
          * Prefijo de texto corto mostrado antes del valor del input.
          * @type {string}
          */
-        this.prefix = '';
+        this.prefix = "";
         /**
          * Sufijo de texto corto mostrado después del valor del input.
          * @type {string}
          */
-        this.suffix = '';
+        this.suffix = "";
         /** Icono del botón interactivo ubicado al final del campo. */
-        this.suffixButtonIcon = '';
+        this.suffixButtonIcon = "";
         /** Etiqueta accesible del botón suffix. */
-        this.suffixButtonLabel = 'Acción del campo';
+        this.suffixButtonLabel = "Acción del campo";
         this._hasSuffixSlot = false;
         /**
          * Texto de ayuda mostrado debajo del campo.
          * @type {string}
          */
-        this.helper = '';
+        this.helper = "";
         /**
          * Texto de error mostrado debajo del campo cuando `error` es true.
          * Sobrescribe el texto de ayuda.
          * @type {string}
          */
-        this.errorText = '';
+        this.errorText = "";
         /**
          * Si es true, establece el campo en un estado de error.
          * @type {boolean}
@@ -163,12 +163,12 @@ let MoniTextField = class MoniTextField extends MoniElement {
          * El valor actual del input.
          * @type {string}
          */
-        this.value = '';
+        this.value = "";
         /**
          * Texto de marcador de posición (placeholder) mostrado cuando el input está vacío y la etiqueta es flotante.
          * @type {string}
          */
-        this.placeholder = '';
+        this.placeholder = "";
         /*
          * Restricciones nativas.
          *
@@ -187,29 +187,29 @@ let MoniTextField = class MoniTextField extends MoniElement {
         /** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
         this.readonly = false;
         /** Pista de autocompletado del navegador, por ejemplo `email` o `current-password`. */
-        this.autocomplete = '';
+        this.autocomplete = "";
         /** Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`. */
-        this.inputmode = '';
+        this.inputmode = "";
         /** Máximo de caracteres aceptados. */
         this.maxlength = null;
         /** Mínimo de caracteres aceptados. */
         this.minlength = null;
         /** Valor mínimo para `number` y los tipos de fecha y hora. */
-        this.min = '';
+        this.min = "";
         /** Valor máximo para `number` y los tipos de fecha y hora. */
-        this.max = '';
+        this.max = "";
         /** Incremento para `number` y los tipos de fecha y hora. */
-        this.step = '';
+        this.step = "";
         /** Expresión regular que debe cumplir el valor. */
-        this.pattern = '';
+        this.pattern = "";
         /**
          * Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `|`,
          * cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT).
          * @example `99.999.999-K`
          */
-        this.mask = '';
+        this.mask = "";
         /** Alias integrado de Inputmask, por ejemplo `email`, `datetime`, `numeric`, `currency` o `ip`. */
-        this.maskAlias = '';
+        this.maskAlias = "";
         /** Opciones avanzadas de Inputmask. También acepta JSON mediante el atributo `mask-options`. */
         this.maskOptions = {};
         this._internals = this.attachInternals();
@@ -225,12 +225,12 @@ let MoniTextField = class MoniTextField extends MoniElement {
     maskOption(nameOrOptions, noRemask = false) {
         if (!this._maskInstance)
             return undefined;
-        return typeof nameOrOptions === 'string'
+        return typeof nameOrOptions === "string"
             ? this._maskInstance.option(nameOrOptions)
             : this._maskInstance.option(nameOrOptions, noRemask);
     }
     getEmptyMask() {
-        return this._maskInstance?.getemptymask() ?? '';
+        return this._maskInstance?.getemptymask() ?? "";
     }
     hasMaskedValue() {
         return this._maskInstance?.hasMaskedValue() ?? false;
@@ -266,13 +266,13 @@ let MoniTextField = class MoniTextField extends MoniElement {
         if (!this._input || (!this.mask && !this.maskAlias))
             return;
         const options = {
-            placeholder: '',
+            placeholder: "",
             ...this.maskOptions,
             ...(this.mask ? { mask: this.mask } : {}),
             definitions: {
                 ...(this.maskOptions.definitions ?? {}),
-                K: { validator: '[0-9Kk]', casing: 'upper' }
-            }
+                K: { validator: "[0-9Kk]", casing: "upper" },
+            },
         };
         const inputmask = this.maskAlias
             ? new Inputmask(this.maskAlias, options)
@@ -294,17 +294,19 @@ let MoniTextField = class MoniTextField extends MoniElement {
      */
     updated(changed) {
         if (this._input) {
-            if (changed.has('mask') || changed.has('maskAlias') || changed.has('maskOptions')) {
+            if (changed.has("mask") ||
+                changed.has("maskAlias") ||
+                changed.has("maskOptions")) {
                 this._configureMask();
             }
-            if (changed.has('value')) {
+            if (changed.has("value")) {
                 this._input.value = this.value;
                 if (this._maskInstance && this.value !== this._input.value) {
                     this.value = this._input.value;
                 }
                 this._internals?.setFormValue?.(this.value);
             }
-            if (changed.has('disabled'))
+            if (changed.has("disabled"))
                 this._input.disabled = this.disabled;
         }
         this._syncValidity();
@@ -321,12 +323,12 @@ let MoniTextField = class MoniTextField extends MoniElement {
      * el navegador tenga dónde mostrarlo y a dónde mover el foco.
      */
     /**
-         * API de validación equivalente a la de un control nativo.
-         *
-         * Los elementos form-associated participan en la validación del formulario,
-         * pero no reciben estos miembros automáticamente: hay que exponerlos para que
-         * un `moni-text-field` se pueda interrogar igual que un `<input>`.
-         */
+     * API de validación equivalente a la de un control nativo.
+     *
+     * Los elementos form-associated participan en la validación del formulario,
+     * pero no reciben estos miembros automáticamente: hay que exponerlos para que
+     * un `moni-text-field` se pueda interrogar igual que un `<input>`.
+     */
     get validity() {
         return this._internals.validity;
     }
@@ -350,15 +352,23 @@ let MoniTextField = class MoniTextField extends MoniElement {
         // Al teclear, `value` no siempre cambia de referencia (máscaras), así que
         // la validez se refresca aquí y no sólo desde `updated()`.
         this._syncValidity();
-        emitMoniEvent(this, 'moni-input', {
-            detail: { value: this.value, unmaskedValue: this.unmaskedValue, originalEvent: e }
+        emitMoniEvent(this, "moni-input", {
+            detail: {
+                value: this.value,
+                unmaskedValue: this.unmaskedValue,
+                originalEvent: e,
+            },
         });
     }
     _handleChange(e) {
         const target = e.target;
         this.value = target.value;
-        emitMoniEvent(this, 'moni-change', {
-            detail: { value: this.value, unmaskedValue: this.unmaskedValue, originalEvent: e }
+        emitMoniEvent(this, "moni-change", {
+            detail: {
+                value: this.value,
+                unmaskedValue: this.unmaskedValue,
+                originalEvent: e,
+            },
         });
     }
     disconnectedCallback() {
@@ -369,50 +379,77 @@ let MoniTextField = class MoniTextField extends MoniElement {
     _handleSuffixClick(event) {
         if (this.disabled)
             return;
-        this.dispatchEvent(new CustomEvent('suffix-click', {
+        this.dispatchEvent(new CustomEvent("suffix-click", {
             detail: { originalEvent: event },
             bubbles: true,
-            composed: true
+            composed: true,
         }));
     }
     _handleSuffixSlotChange(event) {
         const slot = event.currentTarget;
         this._hasSuffixSlot = slot.assignedElements({ flatten: true }).length > 0;
     }
-    static { this.styles = [sharedStyles, fieldStyles, css `
-		.suffix-action {
-			position: absolute;
-			inset-inline-end: .5rem;
-			inset-block-start: calc(var(--_middle) - 1.25rem);
-			z-index: 3;
-			display: grid;
-			place-items: center;
-			inline-size: 2.5rem;
-			block-size: 2.5rem;
-			pointer-events: auto;
-		}
-		.suffix-action[hidden] { display: none; }
-		.suffix-button {
-			all: unset;
-			box-sizing: border-box;
-			display: grid;
-			place-items: center;
-			inline-size: 2.5rem;
-			block-size: 2.5rem;
-			border-radius: 50%;
-			color: var(--on-surface-variant);
-			cursor: pointer;
-			transition: background-color 150ms ease, transform 150ms ease;
-		}
-		.suffix-button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
-		.suffix-button:active { background: color-mix(in srgb, currentColor 12%, transparent); transform: scale(.92); }
-		.suffix-button:focus-visible { outline: .125rem solid var(--primary); outline-offset: .125rem; }
-		.suffix-button:disabled { opacity: .38; cursor: default; }
-		.suffix-button moni-icon { --moni-icon-size: 1.5rem; }
-		::slotted([slot='suffix']) { pointer-events: auto; }
-		.field.suffix-action-field > input { padding-inline-end: 3.5rem; }
-		.field.suffix-action-field > input:focus { padding-inline-end: 3.4375rem; }
-	`]; }
+    static { this.styles = [
+        sharedStyles,
+        fieldStyles,
+        css `
+      .suffix-action {
+        position: absolute;
+        inset-inline-end: 0.5rem;
+        inset-block-start: calc(var(--_middle) - 1.25rem);
+        z-index: 3;
+        display: grid;
+        place-items: center;
+        inline-size: 2.5rem;
+        block-size: 2.5rem;
+        pointer-events: auto;
+      }
+      .suffix-action[hidden] {
+        display: none;
+      }
+      .suffix-button {
+        all: unset;
+        box-sizing: border-box;
+        display: grid;
+        place-items: center;
+        inline-size: 2.5rem;
+        block-size: 2.5rem;
+        border-radius: 50%;
+        color: var(--on-surface-variant);
+        cursor: pointer;
+        transition:
+          background-color 150ms ease,
+          transform 150ms ease;
+      }
+      .suffix-button:hover {
+        background: color-mix(in srgb, currentColor 8%, transparent);
+      }
+      .suffix-button:active {
+        background: color-mix(in srgb, currentColor 12%, transparent);
+        transform: scale(0.92);
+      }
+      .suffix-button:focus-visible {
+        outline: 0.125rem solid var(--primary);
+        outline-offset: 0.125rem;
+      }
+      .suffix-button:disabled {
+        opacity: 0.38;
+        cursor: default;
+      }
+      .suffix-button moni-icon {
+        --moni-icon-size: 1.5rem;
+      }
+      ::slotted([slot="suffix"]) {
+        pointer-events: auto;
+      }
+      .field.suffix-action-field > input {
+        padding-inline-end: 3.5rem;
+      }
+      .field.suffix-action-field > input:focus {
+        padding-inline-end: 3.4375rem;
+      }
+    `,
+    ]; }
     /**
      * Renderiza el campo de texto con animación de etiqueta flotante, iconos iniciales/finales, y texto de ayuda.
      *
@@ -437,107 +474,114 @@ let MoniTextField = class MoniTextField extends MoniElement {
      */
     render() {
         const hasLeading = Boolean(this.icon) || Boolean(this.prefix);
-        const hasTrailing = Boolean(this.trailingIcon) || Boolean(this.suffix) || Boolean(this.suffixButtonIcon) || this._hasSuffixSlot;
+        const hasTrailing = Boolean(this.trailingIcon) ||
+            Boolean(this.suffix) ||
+            Boolean(this.suffixButtonIcon) ||
+            this._hasSuffixSlot;
         const isActive = Boolean(this.value) || Boolean(this.placeholder);
         const fieldClasses = {
             field: true,
             label: Boolean(this.label),
-            fill: this.variant === 'filled',
-            border: this.variant === 'outlined',
-            small: this.size === 'small',
-            large: this.size === 'large',
-            extra: this.size === 'extra',
+            fill: this.variant === "filled",
+            border: this.variant === "outlined",
+            small: this.size === "small",
+            large: this.size === "large",
+            extra: this.size === "extra",
             prefix: hasLeading,
             suffix: hasTrailing,
-            'suffix-action-field': Boolean(this.suffixButtonIcon) || this._hasSuffixSlot,
+            "suffix-action-field": Boolean(this.suffixButtonIcon) || this._hasSuffixSlot,
             invalid: this.error,
-            round: this.shape === 'round' && this.variant !== 'underlined',
-            'small-round': this.shape === 'small-round' && this.variant !== 'underlined',
-            square: this.shape === 'no-round'
+            round: this.shape === "round" && this.variant !== "underlined",
+            "small-round": this.shape === "small-round" && this.variant !== "underlined",
+            square: this.shape === "no-round",
         };
-        const placeholder = this.placeholder || (this.label ? ' ' : '');
+        const placeholder = this.placeholder || (this.label ? " " : "");
         const leading = this.icon
-            ? html `<i class="leading-icon" part="leading-icon"
-					><moni-icon name="${this.icon}"></moni-icon
-				></i>`
+            ? html `<i class="leading-icon" part="leading-icon"
+          ><moni-icon name="${this.icon}"></moni-icon
+        ></i>`
             : this.prefix
-                ? html `<span class="leading-icon" part="prefix"
-						>${this.prefix}</span
-					>`
+                ? html `<span class="leading-icon" part="prefix">${this.prefix}</span>`
                 : nothing;
         const trailing = this.loading
-            ? html `<i class="trailing-icon" part="trailing-icon"
-					><moni-progress
-						variant="circular"
-						indeterminate
-						size="small"
-						style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
-					></moni-progress
-				></i>`
+            ? html `<i class="trailing-icon" part="trailing-icon"
+          ><moni-progress
+            variant="circular"
+            indeterminate
+            size="small"
+            style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
+          ></moni-progress
+        ></i>`
             : this.suffixButtonIcon
-                ? html `<span class="suffix-action" part="suffix-action">
-						<button
-							type="button"
-							class="suffix-button"
-							part="suffix-button"
-							aria-label=${this.suffixButtonLabel}
-							?disabled=${this.disabled}
-							@click=${this._handleSuffixClick}
-						><moni-icon name=${this.suffixButtonIcon}></moni-icon></button>
-					</span>`
+                ? html `<span class="suffix-action" part="suffix-action">
+            <button
+              type="button"
+              class="suffix-button"
+              part="suffix-button"
+              aria-label=${this.suffixButtonLabel}
+              ?disabled=${this.disabled}
+              @click=${this._handleSuffixClick}
+            >
+              <moni-icon name=${this.suffixButtonIcon}></moni-icon>
+            </button>
+          </span>`
                 : this.trailingIcon
-                    ? html `<i class="trailing-icon" part="trailing-icon"
-						><moni-icon name="${this.trailingIcon}"></moni-icon
-					></i>`
+                    ? html `<i class="trailing-icon" part="trailing-icon"
+              ><moni-icon name="${this.trailingIcon}"></moni-icon
+            ></i>`
                     : this.suffix
-                        ? html `<span class="trailing-icon" part="suffix"
-							>${this.suffix}</span
-						>`
+                        ? html `<span class="trailing-icon" part="suffix"
+                >${this.suffix}</span
+              >`
                         : nothing;
-        return html `<div class=${classMap(fieldClasses)} part="field">
-			${leading}
-			<input
-				id="input"
-				part="input"
-				type=${this.type}
-				placeholder=${placeholder}
-				?disabled=${this.disabled}
-				?required=${this.required}
-				?readonly=${this.readonly}
-				autocomplete=${ifDefined(this.autocomplete || undefined)}
-				inputmode=${ifDefined(this.inputmode || undefined)}
-				maxlength=${ifDefined(this.maxlength ?? undefined)}
-				minlength=${ifDefined(this.minlength ?? undefined)}
-				min=${ifDefined(this.min || undefined)}
-				max=${ifDefined(this.max || undefined)}
-				step=${ifDefined(this.step || undefined)}
-				pattern=${ifDefined(this.pattern || undefined)}
-				.value=${this.value}
-				name=${ifDefined(this.name || undefined)}
-				class=${isActive ? 'active' : ''}
-				@input=${this._handleInput}
-				@change=${this._handleChange}
-			/>
-			${this.label
-            ? html `<label
-						for="input"
-						part="label"
-						class=${classMap({ active: isActive })}
-						>${this.label}</label
-					>`
-            : nothing}
-			${trailing}
-			<span class="suffix-action" part="suffix-action" ?hidden=${Boolean(this.suffixButtonIcon) || !this._hasSuffixSlot}>
-				<slot name="suffix" @slotchange=${this._handleSuffixSlotChange}></slot>
-			</span>
-			${this.error
-            ? html `<output part="helper" class="invalid"
-						>${this.errorText || this.helper}</output
-					>`
+        return html `<div class=${classMap(fieldClasses)} part="field">
+      ${leading}
+      <input
+        id="input"
+        part="input"
+        type=${this.type}
+        placeholder=${placeholder}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        autocomplete=${ifDefined(this.autocomplete || undefined)}
+        inputmode=${ifDefined(this.inputmode || undefined)}
+        maxlength=${ifDefined(this.maxlength ?? undefined)}
+        minlength=${ifDefined(this.minlength ?? undefined)}
+        min=${ifDefined(this.min || undefined)}
+        max=${ifDefined(this.max || undefined)}
+        step=${ifDefined(this.step || undefined)}
+        pattern=${ifDefined(this.pattern || undefined)}
+        .value=${this.value}
+        name=${ifDefined(this.name || undefined)}
+        class=${isActive ? "active" : ""}
+        @input=${this._handleInput}
+        @change=${this._handleChange}
+      />
+      ${this.label
+            ? html `<label
+              for="input"
+              part="label"
+              class=${classMap({ active: isActive })}
+              >${this.label}</label
+            >`
+            : nothing}
+      ${trailing}
+      <span
+        class="suffix-action"
+        part="suffix-action"
+        ?hidden=${Boolean(this.suffixButtonIcon) || !this._hasSuffixSlot}
+      >
+        <slot name="suffix" @slotchange=${this._handleSuffixSlotChange}></slot>
+      </span>
+      ${this.error
+            ? html `<output part="helper" class="invalid"
+              >${this.errorText || this.helper}</output
+            >`
             : this.helper
                 ? html `<output part="helper">${this.helper}</output>`
-                : nothing}
-		</div>`;
+                : nothing}
+    </div>`;
     }
 };
 __decorate([
@@ -562,7 +606,7 @@ __decorate([
     property({ reflect: true })
 ], MoniTextField.prototype, "icon", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'trailing-icon' })
+    property({ reflect: true, attribute: "trailing-icon" })
 ], MoniTextField.prototype, "trailingIcon", void 0);
 __decorate([
     property({ reflect: true })
@@ -571,10 +615,10 @@ __decorate([
     property({ reflect: true })
 ], MoniTextField.prototype, "suffix", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'suffix-button-icon' })
+    property({ reflect: true, attribute: "suffix-button-icon" })
 ], MoniTextField.prototype, "suffixButtonIcon", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'suffix-button-label' })
+    property({ reflect: true, attribute: "suffix-button-label" })
 ], MoniTextField.prototype, "suffixButtonLabel", void 0);
 __decorate([
     state()
@@ -583,7 +627,7 @@ __decorate([
     property({ reflect: true })
 ], MoniTextField.prototype, "helper", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'error-text' })
+    property({ reflect: true, attribute: "error-text" })
 ], MoniTextField.prototype, "errorText", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -634,11 +678,11 @@ __decorate([
     property({ reflect: true })
 ], MoniTextField.prototype, "mask", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'mask-alias' })
+    property({ reflect: true, attribute: "mask-alias" })
 ], MoniTextField.prototype, "maskAlias", void 0);
 __decorate([
     property({
-        attribute: 'mask-options',
+        attribute: "mask-options",
         converter: {
             fromAttribute: (value) => {
                 if (!value)
@@ -650,15 +694,15 @@ __decorate([
                     return {};
                 }
             },
-            toAttribute: (value) => JSON.stringify(value ?? {})
-        }
+            toAttribute: (value) => JSON.stringify(value ?? {}),
+        },
     })
 ], MoniTextField.prototype, "maskOptions", void 0);
 __decorate([
-    query('input')
+    query("input")
 ], MoniTextField.prototype, "_input", void 0);
 MoniTextField = __decorate([
-    customElement('moni-text-field')
+    customElement("moni-text-field")
 ], MoniTextField);
 export { MoniTextField };
 export default MoniTextField;