docs(kit): maskitoParseTime/maskitoStringifyTime examples

projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md

@@ -0,0 +1,10 @@
+```ts
+import {maskitoTimeOptionsGenerator, maskitoParseTime, maskitoStringifyTime} from '@maskito/kit';
+
+const options = maskitoTimeOptionsGenerator({mode: 'HH:MM:SS.MSS'});
+
+maskitoParseTime('23:59:59.999', options); // 86399999
+maskitoParseTime('12:3', options); // 43380000 (parsed like '12:30:00.000')
+
+maskitoStringifyTime(86399999, options); // '23:59:59.999'
+```

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

@@ -7,7 +7,7 @@ import type {MaskitoTimeMode, MaskitoTimeSegments} from '@maskito/kit';
 import {maskitoTimeOptionsGenerator} from '@maskito/kit';
 import type {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
-import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiNotificationModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import {TimeMaskDocExample1} from './examples/1-modes/component';
@@ -28,12 +28,17 @@ type GeneratorOptions = Required<Parameters<typeof maskitoTimeOptionsGenerator>[
         TimeMaskDocExample1,
         TimeMaskDocExample2,
         TimeMaskDocExample3,
+        TuiNotificationModule,
     ],
     templateUrl: './time-mask-doc.template.html',
     styleUrls: ['./time-mask-doc.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TimeMaskDocComponent implements GeneratorOptions {
+    protected readonly maskitoParseStringifyTimeDemo = import(
+        './examples/maskito-parse-stringify-time-demo.md?raw'
+    );
+
     protected readonly modeExample1: TuiDocExample = {
         [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/1-modes/mask.ts?raw'),
     };

projects/demo/src/pages/kit/time/time-mask-doc.template.html

@@ -7,6 +7,23 @@
         <code>maskitoTimeOptionsGenerator</code>
         to create a mask for time input.
 
+        <tui-notification class="tui-space_top-4">
+            Despite the name of the mask, element's raw value is still string.
+
+            <p>
+                Use
+                <code>maskitoParseTime</code>
+                to get milliseconds from masked string.
+            </p>
+            <p>
+                Use
+                <code>maskitoStringifyTime</code>
+                to get the masked string from milliseconds.
+            </p>
+
+            <tui-doc-code [code]="maskitoParseStringifyTimeDemo" />
+        </tui-notification>
+
         <tui-doc-example
             id="mode"
             heading="Mode"