feat: new Time-mask (kit) + new overwriteMode-mode (core)

.github/workflows/deploy-preview.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Setup Node.js and Cache
         uses: ./.github/actions/nodejs
 
-      - run: npx nx build --base-href='/'
+      - run: npm run build
 
       - name: Debug output
         run: tree dist/demo/browser -P '*.html'

package.json

@@ -81,6 +81,7 @@
         "@taiga-ui/core": "^3.11.0",
         "@taiga-ui/icons": "^3.11.0",
         "@taiga-ui/kit": "^3.11.0",
+        "@taiga-ui/styles": "^3.11.0",
         "core-js": "^2.6.12",
         "express": "^4.17.3",
         "rxjs": "~6.6.7",

projects/core/src/lib/classes/mask-model/mask-model.ts

@@ -1,6 +1,7 @@
 import {ElementState, MaskExpression, MaskitoOptions, SelectionRange} from '../../types';
-import {removeFixedMaskCharacters} from './utils/remove-fixed-mask-characters';
+import {applyOverwriteMode} from './utils/apply-overwrite-mode';
 import {calibrateValueByMask} from './utils/calibrate-value-by-mask';
+import {removeFixedMaskCharacters} from './utils/remove-fixed-mask-characters';
 
 export class MaskModel implements ElementState {
     value = '';
@@ -31,7 +32,11 @@ export class MaskModel implements ElementState {
             {value, selection},
             maskExpression,
         );
-        const [unmaskedFrom, unmaskedTo] = unmaskedElementState.selection;
+        const [unmaskedFrom, unmaskedTo] =
+            newCharacters.length <= 1
+                ? applyOverwriteMode(unmaskedElementState, this.maskOptions.overwriteMode)
+                      .selection
+                : unmaskedElementState.selection;
         const newUnmaskedValue =
             unmaskedElementState.value.slice(0, unmaskedFrom) +
             newCharacters +
@@ -61,7 +66,7 @@ export class MaskModel implements ElementState {
         }
 
         if (from === to) {
-            throw new Error('MaskModel.removeCharacters() accepts only not-empty range');
+            return;
         }
 
         const {maskExpression, value} = this;

projects/core/src/lib/classes/mask-model/utils/apply-overwrite-mode.ts

@@ -0,0 +1,14 @@
+import {ElementState, MaskitoOptions} from '../../../types';
+
+export function applyOverwriteMode(
+    {value, selection}: ElementState,
+    mode: MaskitoOptions['overwriteMode'],
+): ElementState {
+    const [from, to] = selection;
+
+    if (from !== to || to >= value.length) {
+        return {value, selection};
+    }
+
+    return {value, selection: mode === 'replace' ? [from, to + 1] : [from, to]};
+}

projects/core/src/lib/constants/default-options.ts

@@ -5,4 +5,5 @@ export const MASKITO_DEFAULT_OPTIONS: Required<MaskitoOptions> = {
     mask: /^.*$/,
     preprocessor: identity,
     postprocessor: identity,
+    overwriteMode: 'shift',
 };

projects/core/src/lib/mask.ts

@@ -121,6 +121,8 @@ export class Maskito extends MaskHistory {
     private conformValueToMask(): void {
         const {elementState} = this.options.preprocessor({
             elementState: this.elementState,
+            data: '',
+            actionType: 'validation',
         });
         const maskModel = new MaskModel(elementState, this.options);
         const {value, selection} = this.options.postprocessor(maskModel);
@@ -130,25 +132,35 @@ export class Maskito extends MaskHistory {
     }
 
     private handleDelete(event: Event, isForward: boolean): void {
+        const initialState: ElementState = {
+            value: this.elementState.value,
+            selection: extendToNotEmptyRange(this.elementState.selection, isForward),
+        };
+        const [initialFrom, initialTo] = initialState.selection;
         const {elementState} = this.options.preprocessor({
-            elementState: this.elementState,
+            elementState: initialState,
+            data: '',
+            actionType: isForward ? 'deleteForward' : 'deleteBackward',
         });
-        const [from, to] = extendToNotEmptyRange(elementState.selection, isForward);
         const maskModel = new MaskModel(elementState, this.options);
+        const [from, to] = elementState.selection;
 
         maskModel.deleteCharacters([from, to]);
 
         const newElementState = this.options.postprocessor(maskModel);
         const newPossibleValue =
-            elementState.value.slice(0, from) + elementState.value.slice(to);
+            initialState.value.slice(0, initialFrom) +
+            initialState.value.slice(initialTo);
 
         if (newPossibleValue === newElementState.value) {
             return;
         }
 
         event.preventDefault();
 
-        if (areElementValuesEqual(elementState, maskModel, newElementState)) {
+        if (
+            areElementValuesEqual(initialState, elementState, maskModel, newElementState)
+        ) {
             // User presses Backspace/Delete for the fixed value
             return this.updateSelectionRange(isForward ? [to, to] : [from, from]);
         }
@@ -162,6 +174,7 @@ export class Maskito extends MaskHistory {
         const {elementState, data: insertedText = data} = this.options.preprocessor({
             data,
             elementState: this.elementState,
+            actionType: 'insert',
         });
         const maskModel = new MaskModel(elementState, this.options);
 
@@ -173,9 +186,7 @@ export class Maskito extends MaskHistory {
 
         const [from, to] = elementState.selection;
         const newPossibleValue =
-            elementState.value.slice(0, from) +
-            insertedText +
-            elementState.value.slice(to);
+            elementState.value.slice(0, from) + data + elementState.value.slice(to);
         const {value, selection} = this.options.postprocessor(maskModel);
 
         if (newPossibleValue !== value) {

projects/core/src/lib/types/mask-options.ts

@@ -6,4 +6,5 @@ export interface MaskitoOptions {
     mask: MaskExpression | (() => MaskExpression);
     preprocessor?: MaskPreprocessor;
     postprocessor?: MaskPostprocessor;
+    overwriteMode?: 'shift' | 'replace';
 }

projects/core/src/lib/types/mask-processors.ts

@@ -1,6 +1,10 @@
 import {ElementState} from './element-state';
 
-export type MaskPreprocessor = (_: {elementState: ElementState; data?: string}) => {
+export type MaskPreprocessor = (_: {
+    elementState: ElementState;
+    data: string;
+    actionType: 'insert' | 'deleteForward' | 'deleteBackward' | 'validation';
+}) => {
     elementState: ElementState;
     data?: string;
 };