Implement character-limit for kol-input-email

Refs: #7162

Author: sdvg

packages/components/src/components/input-email/controller.ts

@@ -1,7 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
 
-import type { InputEmailProps, InputEmailWatches, MultiplePropType } from '../../schema';
-import { validateMultiple } from '../../schema';
+import type { CharacterLimitPropType, InputEmailProps, InputEmailWatches, MultiplePropType } from '../../schema';
+import { validateCharacterLimit, validateMultiple } from '../../schema';
 
 import { InputTextEmailController } from '../input-text/controller';
 
@@ -17,8 +17,13 @@ export class InputEmailController extends InputTextEmailController implements In
 		validateMultiple(this.component, value);
 	}
 
+	public validateCharacterLimit(value?: CharacterLimitPropType): void {
+		validateCharacterLimit(this.component, value);
+	}
+
 	public componentWillLoad(): void {
 		super.componentWillLoad();
+		this.validateCharacterLimit(this.component._characterLimit);
 		this.validateMultiple(this.component._multiple);
 	}
 }

packages/components/src/components/input-email/shadow.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 
 import type {
 	ButtonProps,
+	CharacterLimitPropType,
 	FocusableElement,
 	HideMsgPropType,
 	IconsHorizontalPropType,
@@ -75,6 +76,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	private readonly onInput = (event: InputEvent) => {
 		const value = (event.target as HTMLInputElement).value;
 		setState(this, '_currentLength', value.length);
+		this.controller.updateCurrentLengthDebounced(value.length);
 		this._value = value;
 		this.controller.onFacade.onInput(event);
 	};
@@ -92,10 +94,13 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	}
 
 	private getInputProps(): InputStateWrapperProps {
+		const ariaDescribedBy = this.controller.hasCharacterLimit() ? [`${this.state._id}-character-limit-hint`] : undefined; // When a character limit is defined, we provide an additional hint referenced by aria-describedby.
+
 		return {
 			ref: this.catchRef,
 			state: this.state,
 			type: 'email',
+			ariaDescribedBy,
 			...this.controller.onFacade,
 			onInput: this.onInput,
 			onKeyDown: this.onKeyDown,
@@ -133,16 +138,15 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	@Prop() public _autoComplete?: InputTypeOnOff;
 
 	/**
-	 * Makes the element not focusable and ignore all events.
-	 * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.
+	 * When defined, a remaining characters counter is shown. The field is marked as invalid when the character limit has been exceeded.
 	 */
-	@Prop() public _disabled?: boolean = false;
+	@Prop() public _characterLimit?: CharacterLimitPropType;
 
 	/**
-	 * Shows the character count on the lower border of the input.
-	 * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.
+	 * Makes the element not focusable and ignore all events.
+	 * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.
 	 */
-	@Prop() public _hasCounter?: boolean = false;
+	@Prop() public _disabled?: boolean = false;
 
 	/**
 	 * Hides the error message but leaves it in the DOM for the input's aria-describedby.
@@ -264,6 +268,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	@State() public state: InputEmailStates = {
 		_autoComplete: 'off',
 		_currentLength: 0,
+		_currentLengthDebounced: 0,
 		_hasValue: false,
 		_hideMsg: false,
 		_id: `id-${nonce()}`,
@@ -291,16 +296,16 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 		this.controller.validateAutoComplete(value);
 	}
 
+	@Watch('_characterLimit')
+	public validateCharacterLimit(value?: CharacterLimitPropType): void {
+		this.controller.validateCharacterLimit(value);
+	}
+
 	@Watch('_disabled')
 	public validateDisabled(value?: boolean): void {
 		this.controller.validateDisabled(value);
 	}
 
-	@Watch('_hasCounter')
-	public validateHasCounter(value?: boolean): void {
-		this.controller.validateHasCounter(value);
-	}
-
 	@Watch('_hideMsg')
 	public validateHideMsg(value?: HideMsgPropType): void {
 		this.controller.validateHideMsg(value);

packages/components/src/schema/components/input-email.ts

@@ -3,8 +3,8 @@ import type { Generic } from 'adopted-style-sheets';
 import type {
 	MsgPropType,
 	PropAccessKey,
+	PropCharacterLimit,
 	PropDisabled,
-	PropHasCounter,
 	PropHideLabel,
 	PropHideMsg,
 	PropHorizontalIcons,
@@ -35,8 +35,8 @@ type OptionalProps = {
 	smartButton: Stringified<ButtonProps>;
 	value: string;
 } & PropAccessKey &
+	PropCharacterLimit &
 	PropDisabled &
-	PropHasCounter &
 	PropHideMsg &
 	PropHideLabel &
 	PropHorizontalIcons &
@@ -53,12 +53,13 @@ type RequiredStates = {
 	autoComplete: InputTypeOnOff;
 	hasValue: boolean;
 	suggestions: W3CInputValue[];
+	currentLength: number;
+	currentLengthDebounced: number;
 } & PropId &
 	PropHideMsg &
 	PropLabelWithExpertSlot;
 
 type OptionalStates = {
-	currentLength: number;
 	hint: string;
 	maxLength: number;
 	on: InputTypeOnDefault;
@@ -67,8 +68,8 @@ type OptionalStates = {
 	smartButton: ButtonProps;
 	value: string;
 } & PropAccessKey &
+	PropCharacterLimit &
 	PropDisabled &
-	PropHasCounter &
 	PropHideLabel &
 	KoliBriHIcons &
 	PropMsg &