diff --git a/packages/form-core/types/FormControlMixinTypes.d.ts b/packages/form-core/types/FormControlMixinTypes.d.ts
index 156bb9f1a..3249c3930 100644
--- a/packages/form-core/types/FormControlMixinTypes.d.ts
+++ b/packages/form-core/types/FormControlMixinTypes.d.ts
@@ -36,6 +36,8 @@ export type ModelValueEventDetails = {
declare interface HTMLElementWithValue extends HTMLElement {
value: string;
+ selectionStart?: number;
+ selectionEnd?: number;
}
export declare class FormControlHost {
diff --git a/packages/form-core/types/FormatMixinTypes.d.ts b/packages/form-core/types/FormatMixinTypes.d.ts
index 1e0c668bf..f678648f7 100644
--- a/packages/form-core/types/FormatMixinTypes.d.ts
+++ b/packages/form-core/types/FormatMixinTypes.d.ts
@@ -4,6 +4,7 @@ import { FormatNumberOptions } from '@lion/localize/types/LocalizeMixinTypes';
import { ValidateHost } from './validate/ValidateMixinTypes';
import { FormControlHost } from './FormControlMixinTypes';
+export type FormatOptions = { mode: 'pasted' | 'auto' } & object;
export declare class FormatHost {
/**
* Converts viewValue to modelValue
@@ -12,7 +13,7 @@ export declare class FormatHost {
* @param {FormatOptions} opts
* @returns {*} modelValue
*/
- parser(v: string, opts: FormatNumberOptions): unknown;
+ parser(v: string, opts: FormatOptions): unknown;
/**
* Converts modelValue to formattedValue (formattedValue will be synced with
@@ -23,7 +24,7 @@ export declare class FormatHost {
* @param {FormatOptions} opts
* @returns {string} formattedValue
*/
- formatter(v: unknown, opts?: FormatNumberOptions): string;
+ formatter(v: unknown, opts?: FormatOptions): string;
/**
* Converts `.modelValue` to `.serializedValue`
@@ -44,19 +45,27 @@ export declare class FormatHost {
deserializer(v: string): unknown;
/**
- * Preprocesses the viewValue before it's parsed to a modelValue. Can be used to filter
- * invalid input amongst others.
+ * Preprocessors could be considered 'live formatters'. Their result is shown to the user
+ * on keyup instead of after blurring the field. The biggest difference between preprocessors
+ * and formatters is their moment of execution: preprocessors are run before modelValue is
+ * computed (and work based on view value), whereas formatters are run after the parser (and
+ * are based on modelValue)
+ * Automatically formats code while typing. It depends on a preprocessro that smartly
+ * updates the viewValue and caret position for best UX.
* @example
* ```js
* preprocessor(viewValue) {
* // only use digits
* return viewValue.replace(/\D/g, '');
* }
- * ```
* @param {string} v - the raw value from the after keyUp/Down event
- * @returns {string} preprocessedValue: the result of preprocessing for invalid input
+ * @param {FormatOptions & { prevViewValue: string; currentCaretIndex: number }} opts - the raw value from the after keyUp/Down event
+ * @returns {{ viewValue:string; caretIndex:number; }|string|undefined} preprocessedValue: the result of preprocessing for invalid input
*/
- preprocessor(v: string): string;
+ preprocessor(
+ v: string,
+ options: FormatOptions & { prevViewValue: string; currentCaretIndex: number },
+ ): { viewValue: string; caretIndex: number } | string | undefined;
/**
* The view value is the result of the formatter function (when available).
@@ -99,7 +108,7 @@ export declare class FormatHost {
/**
* Configuration object that will be available inside the formatter function
*/
- formatOptions: FormatNumberOptions;
+ formatOptions: FormatOptions;
/**
* The view value. Will be delegated to `._inputNode.value`
diff --git a/packages/form-core/types/validate/ValidateMixinTypes.d.ts b/packages/form-core/types/validate/ValidateMixinTypes.d.ts
index 26737c9cb..667855124 100644
--- a/packages/form-core/types/validate/ValidateMixinTypes.d.ts
+++ b/packages/form-core/types/validate/ValidateMixinTypes.d.ts
@@ -104,7 +104,7 @@ export declare class ValidateHost {
* Triggered by:
* - modelValue change
* - change in the 'validators' array
- * - change in the config of an individual Validator
+ * - change in the config of an individual Validator
*
* Three situations are handled:
* - a1) the FormControl is empty: further execution is halted. When the Required Validator