diff --git a/projects/demo-integrations/src/tests/kit/time/time-mode.cy.ts b/projects/demo-integrations/src/tests/kit/time/time-mode.cy.ts index d415d996a..5465474a5 100644 --- a/projects/demo-integrations/src/tests/kit/time/time-mode.cy.ts +++ b/projects/demo-integrations/src/tests/kit/time/time-mode.cy.ts @@ -413,9 +413,9 @@ describe('Time', () => { }); }); - describe('MM.SS.MSS', () => { + describe('MM:SS.MSS', () => { beforeEach(() => { - cy.visit(`/${DemoPath.Time}/API?mode=MM.SS.MSS`); + cy.visit(`/${DemoPath.Time}/API?mode=MM:SS.MSS`); cy.get('#demo-content input') .should('be.visible') .first() @@ -430,28 +430,28 @@ describe('Time', () => { .type('5959999') .type('{moveToStart}') .type('0') - .should('have.value', '09.59.999') + .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) + .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); + .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('59:59.999') .type('{moveToStart}') - .type('{rightArrow}'.repeat('59.59.'.length)) + .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); + .should('have.value', '59:59.999') + .should('have.prop', 'selectionStart', '59:59.9'.length) + .should('have.prop', 'selectionEnd', '59:59.9'.length); }); }); @@ -462,83 +462,83 @@ describe('Time', () => { .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) + .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); + .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', + '|59|:59.999 => Type 2 => 2|0:59.999', BROWSER_SUPPORTS_REAL_EVENTS, () => { cy.get('@input') .type('5959999') - .should('have.value', '59.59.999') + .should('have.value', '59:59.999') .realPress([ - ...new Array('.59.999'.length).fill('ArrowLeft'), + ...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.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', + '|59|:59.999 => Type 6 => 06:|59.999', BROWSER_SUPPORTS_REAL_EVENTS, () => { cy.get('@input') .type('5959999') - .should('have.value', '59.59.999') + .should('have.value', '59:59.999') .realPress([ - ...new Array('.59.999'.length).fill('ArrowLeft'), + ...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); + .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.', () => { + 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); + .type(':') + .should('have.value', '59:') + .should('have.prop', 'selectionStart', '59:'.length) + .should('have.prop', 'selectionEnd', '59:'.length); }); - it('59.59 => Type . => 59:59.', () => { + it('59:59 => Type . => 59:59.', () => { cy.get('@input') .type('5959') - .should('have.value', '59.59') + .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); + .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'); + it('type 5959999 => 59:59.999', () => { + cy.get('@input').type('5959999').should('have.value', '59:59.999'); }); }); diff --git a/projects/demo/src/pages/kit/time/time-mask-doc.component.ts b/projects/demo/src/pages/kit/time/time-mask-doc.component.ts index dd6b8e7ff..22b06be9a 100644 --- a/projects/demo/src/pages/kit/time/time-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/time/time-mask-doc.component.ts @@ -60,7 +60,7 @@ export default class TimeMaskDocComponent implements GeneratorOptions { 'HH:MM:SS', 'HH:MM:SS.MSS', 'HH', - 'MM.SS.MSS', + 'MM:SS.MSS', 'SS.MSS', ] as const satisfies readonly MaskitoTimeMode[]; diff --git a/projects/kit/src/lib/masks/time/utils/tests/parse-time.spec.ts b/projects/kit/src/lib/masks/time/utils/tests/parse-time.spec.ts index 5da2a0b8e..fde43978a 100644 --- a/projects/kit/src/lib/masks/time/utils/tests/parse-time.spec.ts +++ b/projects/kit/src/lib/masks/time/utils/tests/parse-time.spec.ts @@ -84,7 +84,7 @@ describe('maskitoParseTime', () => { ], ], [ - 'MM.SS.MSS', + 'MM:SS.MSS', [ {text: '', ms: 0}, {text: '00:00.000', ms: 0}, @@ -93,18 +93,18 @@ describe('maskitoParseTime', () => { {text: '10', ms: 600000}, {text: '12', ms: 720000}, {text: '12.', ms: 720000}, - {text: '12.3', ms: 750000}, - {text: '12.30', ms: 750000}, - {text: '12.34', ms: 754000}, - {text: '12.34.', ms: 754000}, - {text: '12.34.5', ms: 754500}, - {text: '12.34.50', ms: 754500}, - {text: '12.34.500', ms: 754500}, - {text: '12.34.56', ms: 754560}, - {text: '12.34.560', ms: 754560}, - {text: '12.34.567', ms: 754567}, + {text: '12:3', ms: 750000}, + {text: '12:30', ms: 750000}, + {text: '12:34', ms: 754000}, + {text: '12:34.', ms: 754000}, + {text: '12:34.5', ms: 754500}, + {text: '12:34.50', ms: 754500}, + {text: '12:34.500', ms: 754500}, + {text: '12:34.56', ms: 754560}, + {text: '12:34.560', ms: 754560}, + {text: '12:34.567', ms: 754567}, - {text: '59.59.999', ms: 3599999}, + {text: '59:59.999', ms: 3599999}, ], ], [ diff --git a/projects/kit/src/lib/masks/time/utils/tests/stringify-time.spec.ts b/projects/kit/src/lib/masks/time/utils/tests/stringify-time.spec.ts index 306287969..2a917cd7c 100644 --- a/projects/kit/src/lib/masks/time/utils/tests/stringify-time.spec.ts +++ b/projects/kit/src/lib/masks/time/utils/tests/stringify-time.spec.ts @@ -42,12 +42,12 @@ describe('maskitoStringifyTime', () => { ], ], [ - 'MM.SS.MSS', + 'MM:SS.MSS', [ - {ms: 0, text: '00.00.000'}, - {ms: 61001, text: '01.01.001'}, - {ms: 754567, text: '12.34.567'}, - {ms: 3599999, text: '59.59.999'}, + {ms: 0, text: '00:00.000'}, + {ms: 61001, text: '01:01.001'}, + {ms: 754567, text: '12:34.567'}, + {ms: 3599999, text: '59:59.999'}, ], ], [ diff --git a/projects/kit/src/lib/types/time-mode.ts b/projects/kit/src/lib/types/time-mode.ts index 6c247a2e9..64a4d9e17 100644 --- a/projects/kit/src/lib/types/time-mode.ts +++ b/projects/kit/src/lib/types/time-mode.ts @@ -3,5 +3,6 @@ export type MaskitoTimeMode = | 'HH:MM:SS' | 'HH:MM' | 'HH' - | 'MM.SS.MSS' + | 'MM:SS.MSS' + | 'MM.SS.MSS' // TODO: delete in v4 | 'SS.MSS'; diff --git a/projects/kit/src/lib/utils/time/tests/parse-time-string.spec.ts b/projects/kit/src/lib/utils/time/tests/parse-time-string.spec.ts index f648ed4ce..37fd8aa12 100644 --- a/projects/kit/src/lib/utils/time/tests/parse-time-string.spec.ts +++ b/projects/kit/src/lib/utils/time/tests/parse-time-string.spec.ts @@ -33,8 +33,8 @@ describe('parseTimeString', () => { }); }); - it('mm.ss.mss', () => { - expect(parseTimeString('12.30.001', 'MM.SS.MSS')).toEqual({ + it('mm:ss.mss', () => { + expect(parseTimeString('12:30.001', 'MM:SS.MSS')).toEqual({ minutes: '12', seconds: '30', milliseconds: '001',