From 59545938ed38ddd577a152978afdffae46eee112 Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Mon, 16 Oct 2023 14:34:33 +0300
Subject: [PATCH] chore: add example with maskito and input-tag

---
 .../input-tag/examples/9/index.html           |  9 +++++
 .../components/input-tag/examples/9/index.ts  | 36 +++++++++++++++++++
 .../input-tag/input-tag.component.ts          |  5 +++
 .../components/input-tag/input-tag.module.ts  |  4 +++
 .../input-tag/input-tag.template.html         |  9 +++++
 5 files changed, 63 insertions(+)
 create mode 100644 projects/demo/src/modules/components/input-tag/examples/9/index.html
 create mode 100644 projects/demo/src/modules/components/input-tag/examples/9/index.ts

diff --git a/projects/demo/src/modules/components/input-tag/examples/9/index.html b/projects/demo/src/modules/components/input-tag/examples/9/index.html
new file mode 100644
index 000000000000..678c520f41c4
--- /dev/null
+++ b/projects/demo/src/modules/components/input-tag/examples/9/index.html
@@ -0,0 +1,9 @@
+<tui-input-tag
+    tuiTextfieldIcon="tuiIconCalendarLarge"
+    [formControl]="control"
+    [maskito]="options"
+    [tagValidator]="tagValidator"
+    [tuiTextfieldLabelOutside]="true"
+>
+    dd.mm.yyyy
+</tui-input-tag>
diff --git a/projects/demo/src/modules/components/input-tag/examples/9/index.ts b/projects/demo/src/modules/components/input-tag/examples/9/index.ts
new file mode 100644
index 000000000000..199d2c196dd6
--- /dev/null
+++ b/projects/demo/src/modules/components/input-tag/examples/9/index.ts
@@ -0,0 +1,36 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {MaskitoOptions} from '@maskito/core';
+import {maskitoDateOptionsGenerator} from '@maskito/kit';
+import {TuiBooleanHandler, TuiDay} from '@taiga-ui/cdk';
+
+@Component({
+    selector: 'tui-input-tag-example-9',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiInputTagExample9 {
+    readonly control = new FormControl([]);
+    readonly min = new Date(2000, 0, 1);
+    readonly max = new Date(2025, 4, 10);
+
+    readonly options: MaskitoOptions = maskitoDateOptionsGenerator({
+        mode: 'dd/mm/yyyy',
+        separator: '.',
+        min: this.min,
+        max: this.max,
+    });
+
+    tagValidator: TuiBooleanHandler<string> = (tag: string) => {
+        const {year, month, day} = TuiDay.parseRawDateString(tag);
+
+        return (
+            TuiDay.isValidDay(year, month, day) &&
+            TuiDay.normalizeOf(year, month, day).toLocalNativeDate() >= this.min &&
+            TuiDay.normalizeOf(year, month, day).toLocalNativeDate() <= this.max
+        );
+    };
+}
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.component.ts b/projects/demo/src/modules/components/input-tag/input-tag.component.ts
index b58a87890124..4e8b449b03db 100644
--- a/projects/demo/src/modules/components/input-tag/input-tag.component.ts
+++ b/projects/demo/src/modules/components/input-tag/input-tag.component.ts
@@ -76,6 +76,11 @@ export class ExampleTuiInputTagComponent extends AbstractExampleTuiControl {
         LESS: import('./examples/8/index.less?raw'),
     };
 
+    readonly example9: TuiDocExample = {
+        TypeScript: import('./examples/9/index.ts?raw'),
+        HTML: import('./examples/9/index.html?raw'),
+    };
+
     readonly control = new FormControl(
         ['John Cleese', 'Eric Idle', 'Michael Palin'],
         Validators.required,
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.module.ts b/projects/demo/src/modules/components/input-tag/input-tag.module.ts
index 36c9f74cfbb4..8fe2d671705a 100644
--- a/projects/demo/src/modules/components/input-tag/input-tag.module.ts
+++ b/projects/demo/src/modules/components/input-tag/input-tag.module.ts
@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {MaskitoModule} from '@maskito/angular';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {
     TuiDataListModule,
@@ -28,6 +29,7 @@ import {TuiInputTagExample5} from './examples/5';
 import {TuiInputTagExample6} from './examples/6';
 import {TuiInputTagExample7} from './examples/7';
 import {TuiInputTagExample8} from './examples/8';
+import {TuiInputTagExample9} from './examples/9';
 import {ExampleTuiInputTagComponent} from './input-tag.component';
 
 @NgModule({
@@ -49,6 +51,7 @@ import {ExampleTuiInputTagComponent} from './input-tag.component';
         TuiHintModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputTagComponent)),
+        MaskitoModule,
     ],
     declarations: [
         ExampleTuiInputTagComponent,
@@ -60,6 +63,7 @@ import {ExampleTuiInputTagComponent} from './input-tag.component';
         TuiInputTagExample6,
         TuiInputTagExample7,
         TuiInputTagExample8,
+        TuiInputTagExample9,
     ],
     exports: [ExampleTuiInputTagComponent],
 })
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.template.html b/projects/demo/src/modules/components/input-tag/input-tag.template.html
index a1512c778ab5..838a76df7f42 100644
--- a/projects/demo/src/modules/components/input-tag/input-tag.template.html
+++ b/projects/demo/src/modules/components/input-tag/input-tag.template.html
@@ -84,6 +84,15 @@
 
             <tui-input-tag-example-8></tui-input-tag-example-8>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="mask"
+            heading="Mask"
+            [content]="example9"
+            [fullsize]="true"
+        >
+            <tui-input-tag-example-9></tui-input-tag-example-9>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>