[WIP] Add full-width numbers support for Time, Date, DateTime, DateRange

[rikusen0335]

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Refactoring
• Build or CI related changes
• Tests related changes
• Documentation content changes

What is the current behaviour?

Closes #884

This PR implements full-width to half-width preprocessor into time, or datetime or almost similar masks.

Please see issue page for more detail

What is the new behaviour?

Above masks will have full-width to half-width preprocessor.

Implementation

• Moved createFullWidthToHalfWidthPreprocessor from projects/kit/src/lib/masks/number/processors to projects/kit/src/lib/processors (also tests)
• Added createFullWidthToHalfWidthPreprocessor to Time, Date, DateTime, DateRange masks
• Added e2e tests for Time, Date, DateTime, DateRange masks WIP

[rikusen0335]

@nsbarsukov Idk who to mention, but I have a question. Have you tried IME/Do you have IME on your input method?

I am struggling with entering full-width numbers sometimes doesn't pass data, which is {elementState, data} used in processors.
I think This part does IME thing, but it doesn't work as I expected.

I can explain more in detail, but thinking about should I elaborate this to issue or slack something.

If you guys have time, please take a light look about this.

Thanks

[nsbarsukov]

@rikusen0335

Have you tried IME/Do you have IME on your input method?

Yep, I've made some basic checks of IME to ensure that everything works fine.
But I am not sure that I've done everything right (I don't use IME in my everyday life – that's why I don't have enough knowledge about this question).

I will appreciate if you can help with it to make our library better)

You can write me in Telegram: https://t.me/nsbarsukov
Or we can use Twitter: https://twitter.com/nsbarsukov

[rikusen0335]

I'm working on date (or also date related) processors to fix this:
Still stuggling with how processors works...

Screen.Recording.2024-01-26.at.17.19.22.mov

[nsbarsukov]

@rikusen0335 Hello!

I've finally refactored code to improve support of IME composition for built-in Date / DateRange / DateTime.

• feat(kit): Date & DateRange & DateTime has improved zero-padding support for browser autofill & IME composition #1027
• refactor(kit): use FirstDateEndSeparator preprocessor for DateTime & DateRange #1032

Now it will work in the following way:

new-way.mov

Could you rebase your branch, please ?
I think we can finish your PR and finally merge it.

[nsbarsukov]

Should we use full-width characters ?

Suggested change

	['1', '1'],
	['18', '18'],
	['１', '1'],
	['１８', '18'],

[nsbarsukov]

Suggested change

	describe('Should reject when invalid cases', () => {
	describe('pads digits with zero if date segment exceeds its max possible value', () => {

[nsbarsukov]

Suggested change

	// NOTE: months doesn't have 29, so it should prevents entering invalid month
	// NOTE: months can be > 12 => pads the first 2 with zero

[nsbarsukov]

Suggested change

	.should('have.value', '2010/02')
	.should('have.prop', 'selectionStart', '2010/02'.length)
	.should('have.prop', 'selectionEnd', '2010/02'.length);
	.should('have.value', '2010/02/09')
	.should('have.prop', 'selectionStart', '2010/02/09'.length)
	.should('have.prop', 'selectionEnd', '2010/02/09'.length);

[nsbarsukov]

Enable this test, please

maskito/projects/kit/src/lib/masks/date/tests/date-mask.spec.ts

Lines 70 to 71 in 8db69ff

	// TODO: https://github.com/taiga-family/maskito/pull/907
	xit('accepts full width characters', () => {

(xit => it)

[rikusen0335]

Will work on this for this weekend! Thank you for refactoring and sharing it! :))

[rikusen0335]

Due to complexity (and also I forgot where was I fixing at), I moved PR to #1043