chore: add example with maskito and input-tag

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>

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
+        );
+    };
+}

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,

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],
 })

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>