🚀 - Time-mask (@maskito/kit)

[nsbarsukov]

Developing mask for InputTime-component.

Proposed API

import {Maskito} from '@maskito/core';
import {maskitoTimeOptionsGenerator} from '@maskito/kit';

const inputElement = document.querySelector('input#time');

const inputTime = new Maskito(
    inputElement,
    maskitoTimeOptionsGenerator({
        mode: 'HH:MM:SS',
        maxValues: {HH: 23, MM: 59, SS: 59, MS: 999}, // default value
        // ... (more options?)
    }),
);

Problems:

• It is not obvious for user what maxValues-option means!
  For example, maxValues: {HH: 11, MM: 30}. Okey, 11:31 is obviously invalid value. What's about 10:31 ?
  We should think about better naming (now it can be confused with max allowable point in the time).

Acceptance criteria

• Minutes and seconds cannot be greater than or 59. Millisecond – 999.
• Hour cannot be greater than maxValues['HH'], minutes – maxValues['MM'], seconds – maxValues['SS'], millisecond - maxValues['MS'].
• If the first typed digit for time-segment (hours | minutes | seconds | ms) is already exceeds limits, mask adds 0.
  For example, you type 11:7. Seventy-hours are not allowable. Mask should guess that you mean 11:07.
• User cannot type anything excepts digits (and fixed values, of course).