From 876cf07fdbe727bebb47c3b6d2e2e27a420d9734 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Tue, 15 Mar 2022 19:05:03 +0100
Subject: [PATCH] chore(form-core): fix types

---
 .../types/FormControlMixinTypes.d.ts          |  2 ++
 .../form-core/types/FormatMixinTypes.d.ts     | 25 +++++++++++++------
 .../types/validate/ValidateMixinTypes.d.ts    |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

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 <input> 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 <input> 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