🚀 - Delete calibration on initialization + create `maskitoInitialCalibrationPlugin`

[nsbarsukov]

Which package(s) are relevant/related to the feature request?

@maskito/core

Description

Delete this line

maskito/projects/core/src/lib/mask.ts

Line 39 in a6777ec

this.ensureValueFitsMask();

+ add maskitoInitialCalibrationPlugin (inside @maskito/core or @maskito/kit ???):

export function maskitoInitialCalibrationPlugin(
    customOptions?: MaskitoOptions,
): MaskitoPlugin {
    return (element, options) => {
        element.value = maskitoTransform(element.value, customOptions || options);
    };
}

Why?

The current implementation is not so flexible as required.
Sometimes the such initial calibration is not required for developer, and develop wants calibration to work only on user's interactions.

The new way allows to select: use maskitoInitialCalibrationPlugin or not.

[nsbarsukov]

For these cases

maskito/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts

Lines 277 to 304 in a6777ec

	describe('runtime changes of postfix', () => {
	beforeEach(() => {
	cy.visit(DemoPath.Cypress);
	cy.get('#runtime-postfix-changes input')
	.focus()
	.should('have.value', '1 year')
	.as('input');
	});
	it('1| year => Type 0 => 10| years', () => {
	cy.get('@input')
	.type('{moveToStart}{rightArrow}')
	.type('0')
	.should('have.value', '10 years')
	.should('have.prop', 'selectionStart', '10'.length)
	.should('have.prop', 'selectionEnd', '10'.length);
	});
	it('10| years => Backspace => 1| year', () => {
	cy.get('@input')
	.type('{moveToStart}{rightArrow}')
	.type('0')
	.should('have.value', '10 years')
	.type('{backspace}')
	.should('have.value', '1 year')
	.should('have.prop', 'selectionStart', '1'.length)
	.should('have.prop', 'selectionEnd', '1'.length);
	});

Developer can use the optional argument of maskitoInitialCalibrationPlugin.

input-number.component.ts:

@tuiPure
private calculateMask(
    precision: number,
    decimalMode: TuiDecimal,
    decimalSeparator: string,
    thousandSeparator: string,
    min: number,
    max: number,
    prefix: string,
    postfix: string,
): MaskitoOptions {
    const generatorParams = {
        decimalSeparator,
        thousandSeparator,
        min,
        max,
        prefix,
        postfix,
        precision: decimalMode === 'never' ? 0 : precision,
        decimalZeroPadding: decimalMode === 'always',
    };
    const {plugins, ...options} = maskitoNumberOptionsGenerator(generatorParams);
    const initialCalibrationPlugin = maskitoInitialCalibrationPlugin(
        maskitoNumberOptionsGenerator({
                ...generatorParams,
                min: Number.MIN_SAFE_INTEGER,
                max: Number.MAX_SAFE_INTEGER
        })
    );

    return {
        ...options,
        plugins: [
            ...plugins,
            initialCalibrationPlugin,
            maskitoCaretGuard(value => [
                prefix.length,
                value.length - postfix.length,
            ]),
        ],
    };
}

[nsbarsukov]

Drop initialElementState.value && from this line (after solving this issue):

maskito/projects/kit/src/lib/processors/with-placeholder.ts

Line 66 in 77a81d1

initialElementState.value && (focused || !focusedOnly)

[nsbarsukov]

Possibly after solving this issue we can also drop these lines 🤔

maskito/projects/kit/src/lib/processors/prefix-postprocessor.ts

Line 12 in 77a81d1

(!value && !initialElementState.value.startsWith(prefix)) // cases when developer wants input to be empty

maskito/projects/kit/src/lib/processors/postfix-postprocessor.ts

Lines 12 to 15 in 77a81d1

	if (!value && !initialElementState.value.endsWith(postfix)) {
	// cases when developer wants input to be empty (programmatically)
	return {value, selection};
	}

UPDATE: nope, it will break maskitoRemoveOnBlurPlugin (it dispatches input event and triggers mask check again) and other similar cases