feat(kit): Time supports SS.MSS & MM.SS.MSS modes

projects/demo-integrations/src/tests/kit/time/time-mode.cy.ts

@@ -412,5 +412,241 @@ describe('Time', () => {
                 });
             });
         });
+
+        describe('MM.SS.MSS', () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.Time}/API?mode=MM.SS.MSS`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .clear()
+                    .as('input');
+            });
+
+            describe('Typing new character overwrite character after cursor', () => {
+                it('new character is different from the next one', () => {
+                    cy.get('@input')
+                        .type('5959999')
+                        .type('{moveToStart}')
+                        .type('0')
+                        .should('have.value', '09.59.999')
+                        .should('have.prop', 'selectionStart', '0'.length)
+                        .should('have.prop', 'selectionEnd', '0'.length)
+                        .type('000')
+                        .should('have.value', '00.00.999')
+                        .should('have.prop', 'selectionStart', '00.00.'.length)
+                        .should('have.prop', 'selectionEnd', '00.00.'.length)
+                        .type('00')
+                        .should('have.value', '00.00.009')
+                        .should('have.prop', 'selectionStart', '00.00.00'.length)
+                        .should('have.prop', 'selectionEnd', '00.00.00'.length);
+                });
+
+                it('moves cursor behind next character if new character is the same with the next one', () => {
+                    cy.get('@input')
+                        .type('59.59.999')
+                        .type('{moveToStart}')
+                        .type('{rightArrow}'.repeat('59.59.'.length))
+                        .type('9')
+                        .should('have.value', '59.59.999')
+                        .should('have.prop', 'selectionStart', '59.59.9'.length)
+                        .should('have.prop', 'selectionEnd', '59.59.9'.length);
+                });
+            });
+
+            it('Pad typed value with zero if digit exceeds the first digit of time segment', () => {
+                cy.get('@input')
+                    .type('6')
+                    .should('have.value', '06')
+                    .should('have.prop', 'selectionStart', '06'.length)
+                    .should('have.prop', 'selectionEnd', '06'.length)
+                    .type('6')
+                    .should('have.value', '06.06')
+                    .should('have.prop', 'selectionStart', '06.06'.length)
+                    .should('have.prop', 'selectionEnd', '06.06'.length)
+                    .type('999')
+                    .should('have.value', '06.06.999')
+                    .should('have.prop', 'selectionStart', '06.06.999'.length)
+                    .should('have.prop', 'selectionEnd', '06.06.999'.length);
+            });
+
+            describe('Select range and press new digit', () => {
+                it(
+                    '|59|.59.999 => Type 2 => 2|0.59.999',
+                    BROWSER_SUPPORTS_REAL_EVENTS,
+                    () => {
+                        cy.get('@input')
+                            .type('5959999')
+                            .should('have.value', '59.59.999')
+                            .realPress([
+                                ...new Array('.59.999'.length).fill('ArrowLeft'),
+                                'Shift',
+                                ...new Array('59'.length).fill('ArrowLeft'),
+                            ]);
+
+                        cy.get('@input')
+                            .type('2')
+                            .should('have.value', '20.59.999')
+                            .should('have.prop', 'selectionStart', '2'.length)
+                            .should('have.prop', 'selectionEnd', '2'.length);
+                    },
+                );
+
+                it(
+                    '|59|.59.999 => Type 6 => 06.|59.999',
+                    BROWSER_SUPPORTS_REAL_EVENTS,
+                    () => {
+                        cy.get('@input')
+                            .type('5959999')
+                            .should('have.value', '59.59.999')
+                            .realPress([
+                                ...new Array('.59.999'.length).fill('ArrowLeft'),
+                                'Shift',
+                                ...new Array('59'.length).fill('ArrowLeft'),
+                            ]);
+
+                        cy.get('@input')
+                            .type('6')
+                            .should('have.value', '06.59.999')
+                            .should('have.prop', 'selectionStart', '06.'.length)
+                            .should('have.prop', 'selectionEnd', '06.'.length);
+                    },
+                );
+            });
+
+            describe('accepts time segment separators typed by user', () => {
+                it('59 => Type . => 59.', () => {
+                    cy.get('@input')
+                        .type('59')
+                        .should('have.value', '59')
+                        .type('.')
+                        .should('have.value', '59.')
+                        .should('have.prop', 'selectionStart', '59.'.length)
+                        .should('have.prop', 'selectionEnd', '59.'.length);
+                });
+
+                it('59.59 => Type . => 59:59.', () => {
+                    cy.get('@input')
+                        .type('5959')
+                        .should('have.value', '59.59')
+                        .type('.')
+                        .should('have.value', '59.59.')
+                        .should('have.prop', 'selectionStart', '59.59.'.length)
+                        .should('have.prop', 'selectionEnd', '59.59.'.length);
+                });
+            });
+
+            it('type 5959999 => 59.59.999', () => {
+                cy.get('@input').type('5959999').should('have.value', '59.59.999');
+            });
+        });
+
+        describe('SS.MSS', () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.Time}/API?mode=SS.MSS`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .clear()
+                    .as('input');
+            });
+
+            describe('Typing new character overwrite character after cursor', () => {
+                it('new character is different from the next one', () => {
+                    cy.get('@input')
+                        .type('59999')
+                        .type('{moveToStart}')
+                        .type('0')
+                        .should('have.value', '09.999')
+                        .should('have.prop', 'selectionStart', '0'.length)
+                        .should('have.prop', 'selectionEnd', '0'.length)
+                        .type('0')
+                        .should('have.value', '00.999')
+                        .should('have.prop', 'selectionStart', '00.'.length)
+                        .should('have.prop', 'selectionEnd', '00.'.length)
+                        .type('00')
+                        .should('have.value', '00.009')
+                        .should('have.prop', 'selectionStart', '00.00'.length)
+                        .should('have.prop', 'selectionEnd', '00.00'.length);
+                });
+
+                it('moves cursor behind next character if new character is the same with the next one', () => {
+                    cy.get('@input')
+                        .type('59.999')
+                        .type('{moveToStart}')
+                        .type('{rightArrow}'.repeat('59.'.length))
+                        .type('9')
+                        .should('have.value', '59.999')
+                        .should('have.prop', 'selectionStart', '59.9'.length)
+                        .should('have.prop', 'selectionEnd', '59.9'.length);
+                });
+            });
+
+            it('Pad typed value with zero if digit exceeds the first digit of time segment', () => {
+                cy.get('@input')
+                    .type('6')
+                    .should('have.value', '06')
+                    .should('have.prop', 'selectionStart', '06'.length)
+                    .should('have.prop', 'selectionEnd', '06'.length)
+                    .type('999')
+                    .should('have.value', '06.999')
+                    .should('have.prop', 'selectionStart', '06.999'.length)
+                    .should('have.prop', 'selectionEnd', '06:999'.length);
+            });
+
+            describe('Select range and press new digit', () => {
+                it('|59|.999 => Type 2 => 2|0.999', BROWSER_SUPPORTS_REAL_EVENTS, () => {
+                    cy.get('@input')
+                        .type('59999')
+                        .should('have.value', '59.999')
+                        .realPress([
+                            ...new Array('.999'.length).fill('ArrowLeft'),
+                            'Shift',
+                            ...new Array('59'.length).fill('ArrowLeft'),
+                        ]);
+
+                    cy.get('@input')
+                        .type('2')
+                        .should('have.value', '20.999')
+                        .should('have.prop', 'selectionStart', '2'.length)
+                        .should('have.prop', 'selectionEnd', '2'.length);
+                });
+
+                it('|59|.999 => Type 6 => 06.|999', BROWSER_SUPPORTS_REAL_EVENTS, () => {
+                    cy.get('@input')
+                        .type('59999')
+                        .should('have.value', '59.999')
+                        .realPress([
+                            ...new Array('.999'.length).fill('ArrowLeft'),
+                            'Shift',
+                            ...new Array('59'.length).fill('ArrowLeft'),
+                        ]);
+
+                    cy.get('@input')
+                        .type('6')
+                        .should('have.value', '06.999')
+                        .should('have.prop', 'selectionStart', '06.'.length)
+                        .should('have.prop', 'selectionEnd', '06.'.length);
+                });
+            });
+
+            describe('accepts time segment separators typed by user', () => {
+                it('59 => Type . => 59.', () => {
+                    cy.get('@input')
+                        .type('59')
+                        .should('have.value', '59')
+                        .type('.')
+                        .should('have.value', '59.')
+                        .should('have.prop', 'selectionStart', '59.'.length)
+                        .should('have.prop', 'selectionEnd', '59.'.length);
+                });
+            });
+
+            it('type 59999 => 59.999', () => {
+                cy.get('@input').type('59999').should('have.value', '59.999');
+            });
+        });
     });
 });

projects/demo/src/pages/documentation/supported-input-types/supported-input-types.template.html

@@ -13,15 +13,22 @@
         </p>
 
         <ul class="tui-list">
-            <li class="tui-list__item"><code>selectionStart</code></li>
-            <li class="tui-list__item"><code>selectionEnd</code></li>
-            <li class="tui-list__item"><code>setSelectionRange</code></li>
+            <li class="tui-list__item">
+                <code>selectionStart</code>
+            </li>
+            <li class="tui-list__item">
+                <code>selectionEnd</code>
+            </li>
+            <li class="tui-list__item">
+                <code>setSelectionRange</code>
+            </li>
         </ul>
 
         <p>
             According to the
             <a
                 href="https://html.spec.whatwg.org/multipage/input.html#concept-input-apply"
+                rel="noreferrer"
                 target="_blank"
                 tuiLink
             >

projects/demo/src/pages/kit/time/time-mask-doc.component.ts

@@ -49,6 +49,8 @@ export class TimeMaskDocComponent implements GeneratorOptions {
         'HH:MM:SS',
         'HH:MM:SS.MSS',
         'HH',
+        'MM.SS.MSS',
+        'SS.MSS',
     ];
 
     protected readonly timeSegmentMaxValuesOptions: Array<

projects/kit/src/lib/masks/date-time/date-time-mask.ts

@@ -64,6 +64,7 @@ export function maskitoDateTimeOptionsGenerator({
                 dateModeTemplate,
                 dateSegmentsSeparator: dateSeparator,
                 dateTimeSeparator,
+                timeMode,
             }),
         ],
         postprocessors: [

projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts

@@ -33,7 +33,7 @@ export function createMinMaxDateTimePostprocessor({
             dateTimeSeparator,
         });
         const parsedDate = parseDateString(dateString, dateModeTemplate);
-        const parsedTime = parseTimeString(timeString);
+        const parsedTime = parseTimeString(timeString, timeMode);
 
         if (
             !isDateTimeStringComplete(value, {

projects/kit/src/lib/masks/date-time/preprocessors/valid-date-time-preprocessor.ts

@@ -1,6 +1,7 @@
 import type {MaskitoPreprocessor} from '@maskito/core';
 
 import {DEFAULT_TIME_SEGMENT_MAX_VALUES, TIME_FIXED_CHARACTERS} from '../../../constants';
+import type {MaskitoTimeMode} from '../../../types';
 import {escapeRegExp, validateDateString} from '../../../utils';
 import {padTimeSegments, validateTimeString} from '../../../utils/time';
 import {parseDateTimeString} from '../utils';
@@ -9,10 +10,12 @@ export function createValidDateTimePreprocessor({
     dateModeTemplate,
     dateSegmentsSeparator,
     dateTimeSeparator,
+    timeMode,
 }: {
     dateModeTemplate: string;
     dateSegmentsSeparator: string;
     dateTimeSeparator: string;
+    timeMode: MaskitoTimeMode;
 }): MaskitoPreprocessor {
     const invalidCharsRegExp = new RegExp(
         `[^\\d${TIME_FIXED_CHARACTERS.map(escapeRegExp).join('')}${escapeRegExp(
@@ -69,6 +72,7 @@ export function createValidDateTimePreprocessor({
             paddedMaxValues,
             offset: validatedValue.length + dateTimeSeparator.length,
             selection: [from, to],
+            timeMode,
         });
 
         if (timeString && !validatedTimeString) {

projects/kit/src/lib/masks/time/processors/max-validation-preprocessor.ts

@@ -1,12 +1,13 @@
 import type {MaskitoPreprocessor} from '@maskito/core';
 
 import {TIME_FIXED_CHARACTERS} from '../../../constants';
-import type {MaskitoTimeSegments} from '../../../types';
+import type {MaskitoTimeMode, MaskitoTimeSegments} from '../../../types';
 import {escapeRegExp} from '../../../utils';
 import {padTimeSegments, validateTimeString} from '../../../utils/time';
 
 export function createMaxValidationPreprocessor(
     timeSegmentMaxValues: MaskitoTimeSegments<number>,
+    timeMode: MaskitoTimeMode,
 ): MaskitoPreprocessor {
     const paddedMaxValues = padTimeSegments(timeSegmentMaxValues);
     const invalidCharsRegExp = new RegExp(
@@ -26,6 +27,7 @@ export function createMaxValidationPreprocessor(
                 paddedMaxValues,
                 offset: 0,
                 selection,
+                timeMode,
             });
 
             return {
@@ -47,6 +49,7 @@ export function createMaxValidationPreprocessor(
             paddedMaxValues,
             offset: 0,
             selection: [from, to],
+            timeMode,
         });
 
         if (newPossibleValue && !validatedTimeString) {

projects/kit/src/lib/masks/time/processors/tests/max-validation-preprocessor.spec.ts

@@ -2,7 +2,10 @@ import {DEFAULT_TIME_SEGMENT_MAX_VALUES} from '../../../../constants';
 import {createMaxValidationPreprocessor} from '../max-validation-preprocessor';
 
 describe('createMaxValidationPreprocessor', () => {
-    const processor = createMaxValidationPreprocessor(DEFAULT_TIME_SEGMENT_MAX_VALUES);
+    const processor = createMaxValidationPreprocessor(
+        DEFAULT_TIME_SEGMENT_MAX_VALUES,
+        'HH:MM:SS',
+    );
 
     describe('Paste from clipboard', () => {
         const process = (data: string): string =>

projects/kit/src/lib/masks/time/time-mask.ts

@@ -31,7 +31,7 @@ export function maskitoTimeOptionsGenerator({
             createFullWidthToHalfWidthPreprocessor(),
             createColonConvertPreprocessor(),
             createZeroPlaceholdersPreprocessor(),
-            createMaxValidationPreprocessor(enrichedTimeSegmentMaxValues),
+            createMaxValidationPreprocessor(enrichedTimeSegmentMaxValues, mode),
         ],
         overwriteMode: 'replace',
     };

projects/kit/src/lib/types/time-mode.ts

@@ -1 +1,7 @@
-export type MaskitoTimeMode = 'HH:MM:SS.MSS' | 'HH:MM:SS' | 'HH:MM' | 'HH';
+export type MaskitoTimeMode =
+    | 'HH:MM:SS.MSS'
+    | 'HH:MM:SS'
+    | 'HH:MM'
+    | 'HH'
+    | 'MM.SS.MSS'
+    | 'SS.MSS';