@moni-labs/moni-ui 0.4.6 → 0.4.8

package/src/components/moni-select.ts

@@ -158,6 +158,15 @@ export class MoniSelect extends MoniElement {
 	 */
 	@property({ type: Boolean, reflect: true }) disabled = false;
 
+	/**
+	 * Obliga a elegir una opción antes de enviar el formulario.
+	 *
+	 * El `<input>` visible es de sólo lectura, así que la validación nativa no
+	 * se aplica sobre él: la restricción se declara en el host con
+	 * `ElementInternals.setValidity`, que es lo que mira el formulario.
+	 */
+	@property({ type: Boolean, reflect: true }) required = false;
+
 	/**
 	 * Si es verdadero, muestra un indicador de carga (progreso lineal).
 	 * @type {boolean}
@@ -281,6 +290,50 @@ export class MoniSelect extends MoniElement {
 
 	@query('slot') private _slot!: HTMLSlotElement;
 	@query('input') private _input!: HTMLInputElement;
+
+	/**
+	 * Declara la validez del host según `required`.
+	 *
+	 * No se puede delegar en el `<input>` interno porque es `readonly`, y un
+	 * campo de sólo lectura queda excluido de la validación de restricciones. El
+	 * ancla sigue siendo ese input para que el navegador tenga dónde mostrar el
+	 * mensaje y a dónde llevar 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-select` se pueda interrogar igual que un `<input>`.
+	 */
+	get validity(): ValidityState {
+		return this._internals.validity;
+	}
+
+	get validationMessage(): string {
+		return this._internals.validationMessage;
+	}
+
+	checkValidity(): boolean {
+		return this._internals.checkValidity();
+	}
+
+	reportValidity(): boolean {
+		return this._internals.reportValidity();
+	}
+
+	private _syncValidity() {
+		if (!this._internals?.setValidity) return;
+		if (this.required && !this.value) {
+			this._internals.setValidity(
+				{ valueMissing: true },
+				'Selecciona una opción.',
+				this._input ?? undefined
+			);
+			return;
+		}
+		this._internals.setValidity({});
+	}
 	@query('.dropdown-menu') private _menu?: HTMLElement;
 
 	static override styles = [
@@ -664,6 +717,7 @@ export class MoniSelect extends MoniElement {
 		if (changedProperties.has('value')) {
 			this._internals?.setFormValue?.(this.value);
 		}
+		this._syncValidity();
 		if (
 			changedProperties.has('_open') ||
 			changedProperties.has('_drilldownPath') ||

package/src/components/moni-text-field.test.ts

@@ -254,3 +254,81 @@ describe('moni-text-field · nombre accesible', () => {
 		el.remove();
 	});
 })
+
+describe('moni-text-field · restricciones nativas', () => {
+	/*
+	 * El componente sólo reenviaba type/placeholder/disabled/value/name, así que
+	 * cualquier campo con `required` o `autocomplete` tenía que renunciar a
+	 * moni-ui y usar un input nativo.
+	 */
+	it('reenvía las restricciones al input interno', async () => {
+		const el = document.createElement('moni-text-field') as HTMLElement & {
+			updateComplete: Promise<unknown>;
+			[key: string]: unknown;
+		};
+		Object.assign(el, {
+			label: 'Correo',
+			type: 'email',
+			required: true,
+			autocomplete: 'email',
+			maxlength: 40,
+			minlength: 5,
+			pattern: '.+@.+',
+			inputmode: 'email'
+		});
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		const input = el.shadowRoot?.querySelector('input') as HTMLInputElement;
+		expect(input.required).toBe(true);
+		expect(input.getAttribute('autocomplete')).toBe('email');
+		expect(input.maxLength).toBe(40);
+		expect(input.minLength).toBe(5);
+		expect(input.getAttribute('pattern')).toBe('.+@.+');
+		expect(input.getAttribute('inputmode')).toBe('email');
+		el.remove();
+	});
+
+	it('acepta los tipos de fecha y hora', async () => {
+		const el = document.createElement('moni-text-field') as HTMLElement & {
+			type: string;
+			updateComplete: Promise<unknown>;
+		};
+		el.type = 'date';
+		document.body.appendChild(el);
+		await el.updateComplete;
+		expect(el.shadowRoot?.querySelector('input')?.getAttribute('type')).toBe('date');
+		el.remove();
+	});
+
+	it('publica la validez en el host para que el formulario la vea', async () => {
+		// jsdom no implementa checkValidity() en custom elements form-associated,
+		// así que se observa la llamada a setValidity. El bloqueo real del envío
+		// se verifica en navegador.
+		const calls: Array<Record<string, unknown>> = [];
+		const originalAttach = HTMLElement.prototype.attachInternals;
+		HTMLElement.prototype.attachInternals = function spy(this: HTMLElement) {
+			const internals = originalAttach.call(this);
+			const setValidity = internals.setValidity.bind(internals);
+			internals.setValidity = ((flags, message, anchor) => {
+				// ValidityState expone sus flags como getters del prototipo, así que un
+				// spread devolvería {}: hay que leerlas uña a uña.
+				calls.push({ valueMissing: flags?.valueMissing === true });
+				return setValidity(flags, message, anchor);
+			}) as typeof internals.setValidity;
+			return internals;
+		};
+		const el = document.createElement('moni-text-field') as HTMLElement & {
+			required: boolean;
+			updateComplete: Promise<unknown>;
+		};
+		HTMLElement.prototype.attachInternals = originalAttach;
+
+		el.required = true;
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		expect(calls.some((c) => c.valueMissing === true)).toBe(true);
+		el.remove();
+	});
+})

package/src/components/moni-text-field.ts

@@ -114,7 +114,7 @@ export class MoniTextField extends MoniElement {
 
 	/**
 	 * El tipo de input HTML nativo.
-	 * @type {'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'}
+	 * @type {'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color'}
 	 * @default 'text'
 	 */
 	@property({ reflect: true })
@@ -125,7 +125,13 @@ export class MoniTextField extends MoniElement {
 		| 'number'
 		| 'tel'
 		| 'url'
-		| 'search' = 'text';
+		| 'search'
+		| 'date'
+		| 'time'
+		| 'datetime-local'
+		| 'month'
+		| 'week'
+		| 'color' = 'text';
 
 	/**
 	 * Nombre del icono inicial (leading) (Material Symbols).
@@ -202,6 +208,50 @@ export class MoniTextField extends MoniElement {
 	 */
 	@property({ reflect: true }) placeholder = '';
 
+	/*
+	 * Restricciones nativas.
+	 *
+	 * Antes ninguna de estas llegaba al `<input>` interno: el componente sólo
+	 * reenviaba `type`, `placeholder`, `disabled`, `value` y `name`. Eso dejaba
+	 * fuera el autocompletado de contraseñas, el teclado correcto en móvil, el
+	 * límite de caracteres y toda la validación de restricciones, así que cada
+	 * consumidor que necesitaba una de ellas tenía que renunciar al componente y
+	 * usar un input nativo.
+	 *
+	 * Se reflejan al host además de reenviarse para que `[required]` y compañía
+	 * puedan usarse como selectores CSS desde fuera.
+	 */
+
+	/** Marca el campo como obligatorio y lo integra en la validación del formulario. */
+	@property({ type: Boolean, reflect: true }) required = false;
+
+	/** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
+	@property({ type: Boolean, reflect: true }) readonly = false;
+
+	/** Pista de autocompletado del navegador, por ejemplo `email` o `current-password`. */
+	@property({ reflect: true }) autocomplete = '';
+
+	/** Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`. */
+	@property({ reflect: true }) inputmode = '';
+
+	/** Máximo de caracteres aceptados. */
+	@property({ type: Number, reflect: true }) maxlength: number | null = null;
+
+	/** Mínimo de caracteres aceptados. */
+	@property({ type: Number, reflect: true }) minlength: number | null = null;
+
+	/** Valor mínimo para `number` y los tipos de fecha y hora. */
+	@property({ reflect: true }) min = '';
+
+	/** Valor máximo para `number` y los tipos de fecha y hora. */
+	@property({ reflect: true }) max = '';
+
+	/** Incremento para `number` y los tipos de fecha y hora. */
+	@property({ reflect: true }) step = '';
+
+	/** Expresión regular que debe cumplir el valor. */
+	@property({ reflect: true }) pattern = '';
+
 	/**
 	 * Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `|`,
 	 * cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT).
@@ -334,11 +384,58 @@ export class MoniTextField extends MoniElement {
 			}
 			if (changed.has('disabled')) this._input.disabled = this.disabled;
 		}
+		this._syncValidity();
+	}
+
+	/**
+	 * Copia la validez del `<input>` interno al host.
+	 *
+	 * Reenviar `required` o `pattern` no basta: el navegador valida el
+	 * formulario mirando los controles asociados a él, y el que aquí participa
+	 * es el host, no el input del Shadow DOM. Sin este puente el campo se
+	 * pintaría como obligatorio pero el envío no se detendría.
+	 *
+	 * El tercer argumento ancla el globo de validación al input real, para que
+	 * 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>`.
+	 */
+	get validity(): ValidityState {
+		return this._internals.validity;
+	}
+
+	get validationMessage(): string {
+		return this._internals.validationMessage;
+	}
+
+	checkValidity(): boolean {
+		return this._internals.checkValidity();
+	}
+
+	reportValidity(): boolean {
+		return this._internals.reportValidity();
+	}
+
+	private _syncValidity() {
+		if (!this._input || !this._internals?.setValidity) return;
+		this._internals.setValidity(
+			this._input.validity,
+			this._input.validationMessage,
+			this._input
+		);
 	}
 
 	private _handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
 		this.value = target.value;
+		// 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 }
 		});
@@ -499,6 +596,16 @@ export class MoniTextField extends MoniElement {
 				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' : ''}

package/src/components/moni-textarea.ts

@@ -148,6 +148,24 @@ export class MoniTextarea extends MoniElement {
 	 */
 	@property({ type: Number, reflect: true }) maxlength: number | null = null;
 
+	/*
+	 * Restricciones nativas. Antes sólo `maxlength` llegaba al `<textarea>`
+	 * interno, así que un campo obligatorio o de sólo lectura obligaba a
+	 * abandonar el componente y usar un control nativo.
+	 */
+
+	/** Marca el campo como obligatorio y lo integra en la validación del formulario. */
+	@property({ type: Boolean, reflect: true }) required = false;
+
+	/** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
+	@property({ type: Boolean, reflect: true }) readonly = false;
+
+	/** Mínimo de caracteres aceptados. */
+	@property({ type: Number, reflect: true }) minlength: number | null = null;
+
+	/** Pista de autocompletado del navegador. */
+	@property({ reflect: true }) autocomplete = '';
+
 	/**
 	 * Oculta la visualización del contador de caracteres cuando se establece `maxlength`.
 	 * @type {boolean}
@@ -266,6 +284,46 @@ export class MoniTextarea extends MoniElement {
 				changed.has('maxRows')
 			) this._resizeTextarea();
 		}
+		this._syncValidity();
+	}
+
+	/**
+	 * Copia la validez del `<textarea>` interno al host.
+	 *
+	 * El navegador valida mirando los controles asociados al formulario, y el
+	 * que participa es el host, no el control del Shadow DOM: sin este puente
+	 * `required` se pintaría pero no detendría el envío.
+	 */
+/**
+	 * 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-textarea` se pueda interrogar igual que un `<input>`.
+	 */
+	get validity(): ValidityState {
+		return this._internals.validity;
+	}
+
+	get validationMessage(): string {
+		return this._internals.validationMessage;
+	}
+
+	checkValidity(): boolean {
+		return this._internals.checkValidity();
+	}
+
+	reportValidity(): boolean {
+		return this._internals.reportValidity();
+	}
+
+	private _syncValidity() {
+		if (!this._input || !this._internals?.setValidity) return;
+		this._internals.setValidity(
+			this._input.validity,
+			this._input.validationMessage,
+			this._input
+		);
 	}
 
 	static override styles = [sharedStyles, fieldStyles, css`
@@ -361,8 +419,12 @@ export class MoniTextarea extends MoniElement {
 				part="input"
 				rows=${this.rows}
 				maxlength=${ifDefined(this.maxlength ?? undefined)}
+				minlength=${ifDefined(this.minlength ?? undefined)}
 				placeholder=${placeholder}
 				?disabled=${this.disabled}
+				?required=${this.required}
+				?readonly=${this.readonly}
+				autocomplete=${ifDefined(this.autocomplete || undefined)}
 				.value=${this.value}
 				name=${ifDefined(this.name || undefined)}
 				class=${isActive ? 'active' : ''}