From edfa4318ea7abdf47dc8447fa26929e4a8922af2 Mon Sep 17 00:00:00 2001
From: demensky <dmytro@demensky.dev>
Date: Fri, 14 Jun 2024 01:57:39 +0300
Subject: [PATCH] docs(kit): `maskitoParseTime`/`maskitoStringifyTime` examples

---
 .../maskito-parse-stringify-time-demo.md        | 10 ++++++++++
 .../pages/kit/time/time-mask-doc.component.ts   |  7 ++++++-
 .../pages/kit/time/time-mask-doc.template.html  | 17 +++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md

diff --git a/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md b/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md
new file mode 100644
index 000000000..e1548fe25
--- /dev/null
+++ b/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'
+```
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 65a148b43..ad9a4f05f 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
@@ -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'),
     };
diff --git a/projects/demo/src/pages/kit/time/time-mask-doc.template.html b/projects/demo/src/pages/kit/time/time-mask-doc.template.html
index d74b36e0e..68b3019ea 100644
--- a/projects/demo/src/pages/kit/time/time-mask-doc.template.html
+++ b/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"