Implement character limit feature for inputs

packages/components/src/components/@deprecated/input/controller.ts

@@ -39,6 +39,7 @@ import { ControlledInputController } from '../../input-adapter-leanup/controller
 import type { Props as AdapterProps } from '../../input-adapter-leanup/types';
 import type { Props, Watches } from './types';
 import { validateAccessAndShortKey } from '../../../schema/validators/access-and-short-key';
+import { debounce } from 'lodash-es';
 
 type ValueChangeListener = (value: StencilUnknown) => void;
 
@@ -272,4 +273,16 @@ export class InputController extends ControlledInputController implements Watche
 		onFocus: this.onFocus.bind(this),
 		onInput: this.onInput.bind(this),
 	};
+
+	public readonly updateCurrentLengthDebounced = debounce((length: number) => {
+		setState(this.component, '_currentLengthDebounced', length);
+	}, 500);
+
+	public hasSoftCharacterLimit() {
+		return typeof this.component.state._maxLength === 'number' && this.component.state._maxLengthBehavior === 'soft';
+	}
+
+	public hasCounter() {
+		return this.component.state._hasCounter === true;
+	}
 }

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 { InputEmailProps, InputEmailWatches, MaxLengthBehaviorPropType, MultiplePropType } from '../../schema';
+import { validateMultiple, validateMaxLengthBehavior } from '../../schema';
 
 import { InputTextEmailController } from '../input-text/controller';
 
@@ -17,8 +17,13 @@ export class InputEmailController extends InputTextEmailController implements In
 		validateMultiple(this.component, value);
 	}
 
+	public validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {
+		validateMaxLengthBehavior(this.component, value);
+	}
+
 	public componentWillLoad(): void {
 		super.componentWillLoad();
+		this.validateMaxLengthBehavior(this.component._maxLengthBehavior);
 		this.validateMultiple(this.component._multiple);
 	}
 }

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

@@ -1,5 +1,5 @@
 import { test } from '@stencil/playwright';
-import { testInputCallbacksAndEvents, testInputValueReflection } from '../../e2e';
+import { testInputCallbacksAndEvents, testInputCharacterLimit, testInputValueReflection } from '../../e2e';
 import { testInputMessage } from '../../e2e/input-msg';
 
 const COMPONENT_NAME = 'kol-input-email';
@@ -13,5 +13,6 @@ test.describe(COMPONENT_NAME, () => {
 	testInputCallbacksAndEvents<HTMLKolInputEmailElement>({
 		componentName: COMPONENT_NAME,
 	});
+	testInputCharacterLimit(COMPONENT_NAME);
 	testInputMessage<HTMLKolInputEmailElement>(COMPONENT_NAME);
 });

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

@@ -14,6 +14,7 @@ import type {
 	InputTypeOnOff,
 	LabelWithExpertSlotPropType,
 	MsgPropType,
+	MaxLengthBehaviorPropType,
 	MultiplePropType,
 	NamePropType,
 	ShortKeyPropType,
@@ -22,7 +23,6 @@ import type {
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { setState } from '../../schema';
 
 import { nonce } from '../../utils/dev.utils';
 import { propagateSubmitEventToForm } from '../form/controller';
@@ -73,9 +73,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._value = value;
+		this._value = (event.target as HTMLInputElement).value;
 		this.controller.onFacade.onInput(event);
 	};
 
@@ -84,6 +82,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 			state: this.state,
 			class: clsx('kol-input-email', 'email', {
 				'has-value': this.state._hasValue,
+				'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),
 			}),
 			tooltipAlign: this._tooltipAlign,
 			onClick: () => this.inputRef?.focus(),
@@ -92,10 +91,13 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	}
 
 	private getInputProps(): InputStateWrapperProps {
+		const ariaDescribedBy = typeof this.state._maxLength === 'number' ? [`${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 +135,20 @@ 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.
+	 * Shows a character counter for the input element.
 	 */
-	@Prop() public _disabled?: boolean = false;
+	@Prop() public _hasCounter?: boolean = false;
 
 	/**
-	 * Shows the character count on the lower border of the input.
-	 * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.
+	 * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.
 	 */
-	@Prop() public _hasCounter?: boolean = false;
+	@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';
+
+	/**
+	 * Makes the element not focusable and ignore all events.
+	 * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.
+	 */
+	@Prop() public _disabled?: boolean = false;
 
 	/**
 	 * Hides the error message but leaves it in the DOM for the input's aria-describedby.
@@ -264,6 +270,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	@State() public state: InputEmailStates = {
 		_autoComplete: 'off',
 		_currentLength: 0,
+		_currentLengthDebounced: 0,
 		_hasValue: false,
 		_hideMsg: false,
 		_id: `id-${nonce()}`,
@@ -296,11 +303,6 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 		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);
@@ -311,6 +313,11 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 		this.controller.validateHideLabel(value);
 	}
 
+	@Watch('_hasCounter')
+	public validateHasCounter(value?: boolean): void {
+		this.controller.validateHasCounter(value);
+	}
+
 	@Watch('_hint')
 	public validateHint(value?: string): void {
 		this.controller.validateHint(value);
@@ -406,6 +413,11 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 		this.controller.validateValue(value);
 	}
 
+	@Watch('_maxLengthBehavior')
+	public validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {
+		this.controller.validateMaxLengthBehavior(value);
+	}
+
 	public componentWillLoad(): void {
 		this._touched = this._touched === true;
 		this.controller.componentWillLoad();

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

@@ -1,5 +1,6 @@
-import type { InputPasswordProps, InputPasswordWatches, InputTypeOnOff } from '../../schema';
+import type { InputPasswordProps, InputPasswordWatches, InputTypeOnOff, MaxLengthBehaviorPropType } from '../../schema';
 import { validateHasCounter, watchBoolean, watchNumber, watchString, watchValidator } from '../../schema';
+import { validateMaxLengthBehavior } from '../../schema/props/max-length-behavior';
 import type { PasswordVariantPropType } from '../../schema/props/variant/password-variant';
 import { validatePasswordVariant } from '../../schema/props/variant/password-variant';
 
@@ -18,6 +19,7 @@ export class InputPasswordController extends InputIconController implements Inpu
 	protected afterSyncCharCounter = () => {
 		if (typeof this.component._value === 'string' && this.component._value.length > 0) {
 			this.component.state._currentLength = this.component._value.length;
+			this.updateCurrentLengthDebounced(this.component._value.length);
 		}
 	};
 
@@ -32,11 +34,11 @@ export class InputPasswordController extends InputIconController implements Inpu
 	}
 
 	public validateHasCounter(value?: boolean): void {
-		validateHasCounter(this.component, value, {
-			hooks: {
-				afterPatch: this.afterSyncCharCounter,
-			},
-		});
+		validateHasCounter(this.component, value);
+	}
+
+	public validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {
+		validateMaxLengthBehavior(this.component, value);
 	}
 
 	public validateVariant(value?: PasswordVariantPropType): void {
@@ -45,9 +47,6 @@ export class InputPasswordController extends InputIconController implements Inpu
 
 	public validateMaxLength(value?: number): void {
 		watchNumber(this.component, '_maxLength', value, {
-			hooks: {
-				afterPatch: this.afterSyncCharCounter,
-			},
 			min: 0,
 		});
 	}
@@ -82,6 +81,7 @@ export class InputPasswordController extends InputIconController implements Inpu
 		super.componentWillLoad();
 		this.validateAutoComplete(this.component._autoComplete);
 		this.validateHasCounter(this.component._hasCounter);
+		this.validateMaxLengthBehavior(this.component._maxLengthBehavior);
 		this.validateMaxLength(this.component._maxLength);
 		this.validatePattern(this.component._pattern);
 		this.validatePlaceholder(this.component._placeholder);

packages/components/src/components/input-password/input-password.e2e.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 import { test } from '@stencil/playwright';
-import { testInputCallbacksAndEvents, testInputValueReflection } from '../../e2e';
+import { testInputCallbacksAndEvents, testInputCharacterLimit, testInputValueReflection } from '../../e2e';
 import { testInputMessage } from '../../e2e/input-msg';
 
 const COMPONENT_NAME = 'kol-input-password';
@@ -14,6 +14,7 @@ test.describe('kol-input-password', () => {
 	testInputCallbacksAndEvents<HTMLKolInputPasswordElement>({
 		componentName: COMPONENT_NAME,
 	});
+	testInputCharacterLimit(COMPONENT_NAME);
 	testInputMessage<HTMLKolInputPasswordElement>(COMPONENT_NAME);
 
 	test.describe('Password Visibility Toggle', () => {

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

@@ -13,14 +13,15 @@ import type {
 	InputTypeOnDefault,
 	InputTypeOnOff,
 	LabelWithExpertSlotPropType,
+	MaxLengthBehaviorPropType,
 	MsgPropType,
 	NamePropType,
 	ShortKeyPropType,
 	Stringified,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { devHint, setState } from '../../schema';
+import { devHint } from '../../schema';
 
 import { nonce } from '../../utils/dev.utils';
 import { propagateSubmitEventToForm } from '../form/controller';
@@ -77,9 +78,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	};
 
 	private readonly onInput = (event: InputEvent) => {
-		const value = (event.target as HTMLInputElement).value;
-		setState(this, '_currentLength', value.length);
-		this._value = value;
+		this._value = (event.target as HTMLInputElement).value;
 		this.controller.onFacade.onInput(event);
 	};
 
@@ -88,6 +87,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 			state: this.state,
 			class: clsx('kol-input-password', 'password', {
 				'has-value': this.state._hasValue,
+				'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),
 			}),
 			tooltipAlign: this._tooltipAlign,
 			onClick: () => this.inputRef?.focus(),
@@ -96,10 +96,13 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	}
 
 	private getInputProps(): InputStateWrapperProps {
+		const ariaDescribedBy = typeof this.state._maxLength === 'number' ? [`${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,
 			type: this._passwordVisible ? 'text' : 'password',
 			state: this.state,
+			ariaDescribedBy,
 			...this.controller.onFacade,
 			onInput: this.onInput,
 			onKeyDown: this.onKeyDown,
@@ -159,16 +162,20 @@ export class KolInputPassword implements InputPasswordAPI, 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.
+	 * Shows a character counter for the input element.
 	 */
-	@Prop() public _disabled?: boolean = false;
+	@Prop() public _hasCounter?: boolean = false;
 
 	/**
-	 * Shows the character count on the lower border of the input.
-	 * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.
+	 * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.
 	 */
-	@Prop() public _hasCounter?: boolean = false;
+	@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';
+
+	/**
+	 * Makes the element not focusable and ignore all events.
+	 * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.
+	 */
+	@Prop() public _disabled?: boolean = false;
 
 	/**
 	 * Hides the error message but leaves it in the DOM for the input's aria-describedby.
@@ -285,6 +292,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	@State() public state: InputPasswordStates = {
 		_autoComplete: 'off',
 		_currentLength: 0,
+		_currentLengthDebounced: 0,
 		_hasValue: false,
 		_hideMsg: false,
 		_id: `id-${nonce()}`,
@@ -315,6 +323,11 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 		}
 	}
 
+	@Watch('_maxLengthBehavior')
+	public validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {
+		this.controller.validateMaxLengthBehavior(value);
+	}
+
 	@Watch('_disabled')
 	public validateDisabled(value?: boolean): void {
 		this.controller.validateDisabled(value);
@@ -324,11 +337,6 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 		this.controller.validateVariant(value);
 	}
 
-	@Watch('_hasCounter')
-	public validateHasCounter(value?: boolean): void {
-		this.controller.validateHasCounter(value);
-	}
-
 	@Watch('_hideMsg')
 	public validateHideMsg(value?: HideMsgPropType): void {
 		this.controller.validateHideMsg(value);
@@ -339,6 +347,11 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 		this.controller.validateHideLabel(value);
 	}
 
+	@Watch('_hasCounter')
+	public validateHasCounter(value?: boolean): void {
+		this.controller.validateHasCounter(value);
+	}
+
 	@Watch('_hint')
 	public validateHint(value?: string): void {
 		this.controller.validateHint(value);

packages/components/src/components/input-text/input-text.e2e.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 import { test } from '@stencil/playwright';
-import { testInputCallbacksAndEvents, testInputValueReflection } from '../../e2e';
+import { testInputCallbacksAndEvents, testInputCharacterLimit, testInputValueReflection } from '../../e2e';
 import { testInputMessage } from '../../e2e/input-msg';
 
 const COMPONENT_NAME = 'kol-input-text';
@@ -29,5 +29,6 @@ test.describe('kol-input-text', () => {
 	testInputCallbacksAndEvents<HTMLKolInputTextElement>({
 		componentName: COMPONENT_NAME,
 	});
+	testInputCharacterLimit(COMPONENT_NAME);
 	testInputMessage<HTMLKolInputTextElement>(COMPONENT_NAME);
 });