chore(demo): new documentation page Supported <input /> types (#1206)

.cspell.json

@@ -15,5 +15,5 @@
         "**/package.json",
         "**/tsconfig*.json"
     ],
-    "ignoreWords": ["Acpekt"]
+    "ignoreWords": ["Acpekt", "WHATWG"]
 }

projects/demo/project.json

@@ -109,7 +109,7 @@
         "serve-ip": {
             "executor": "nx:run-commands",
             "options": {
-                "command": "nx serve --open --host 0.0.0.0 --disable-host-check"
+                "command": "nx serve demo --open --host 0.0.0.0 --disable-host-check"
             }
         },
         "serve-ssl": {

projects/demo/src/app/app.routes.ts

@@ -209,6 +209,16 @@ export const appRoutes: Routes = [
             title: 'Browser support',
         },
     },
+    {
+        path: DemoPath.SupportedInputTypes,
+        loadComponent: () =>
+            import(
+                '../pages/documentation/supported-input-types/supported-input-types.component'
+            ),
+        data: {
+            title: 'Supported <input /> types',
+        },
+    },
     {
         path: DemoPath.Changelog,
         loadComponent: () =>

projects/demo/src/app/constants/demo-path.ts

@@ -25,6 +25,7 @@ export const DemoPath = {
     Postfix: 'recipes/postfix',
     Placeholder: 'recipes/placeholder',
     BrowserSupport: 'browser-support',
+    SupportedInputTypes: 'supported-input-types',
     Changelog: 'changelog',
     Stackblitz: 'stackblitz',
 } as const;

projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts

@@ -2,7 +2,12 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
 import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
+import {
+    TuiLinkModule,
+    TuiModeModule,
+    TuiNotificationModule,
+    TuiTooltipModule,
+} from '@taiga-ui/core';
 import {TuiIslandModule} from '@taiga-ui/kit';
 
 @Component({
@@ -13,6 +18,8 @@ import {TuiIslandModule} from '@taiga-ui/kit';
         TuiLinkModule,
         TuiNotificationModule,
         TuiIslandModule,
+        TuiModeModule,
+        TuiTooltipModule,
         RouterLink,
     ],
     templateUrl: './core-concepts-overview.template.html',
@@ -29,4 +36,5 @@ export default class CoreConceptsOverviewDocPageComponent {
     protected readonly pluginsDocPage = `/${DemoPath.Plugins}`;
     protected readonly overwriteModeDocPage = `/${DemoPath.OverwriteMode}`;
     protected readonly transformerDocPage = `/${DemoPath.Transformer}`;
+    protected readonly supportedInputTypesDocPage = `/${DemoPath.SupportedInputTypes}`;
 }

projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.template.html

@@ -9,7 +9,31 @@
         <ol class="tui-list tui-list_ordered">
             <li class="tui-list__item">
                 native
-                <code>HTMLInputElement</code>
+                <code>
+                    HTMLInputElement
+                    <tui-tooltip
+                        direction="top"
+                        [content]="tooltipContent"
+                    />
+
+                    <ng-template #tooltipContent>
+                        <strong>Maskito</strong>
+                        supports only limited types of
+                        <code>HTMLInputElement</code>
+                        due to some browser limitations!
+
+                        <p class="tui-space_bottom-0">
+                            <a
+                                tuiLink
+                                tuiMode="onDark"
+                                [pseudo]="true"
+                                [routerLink]="supportedInputTypesDocPage"
+                            >
+                                See a full list of supported types
+                            </a>
+                        </p>
+                    </ng-template>
+                </code>
                 or
                 <code>HTMLTextAreaElement</code>
             </li>

projects/demo/src/pages/documentation/supported-input-types/examples/password/component.ts

@@ -0,0 +1,39 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
+import {TuiHintModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputPasswordModule} from '@taiga-ui/kit';
+
+import mask from './mask';
+
+@Component({
+    standalone: true,
+    selector: 'input-type-password-example',
+    imports: [
+        FormsModule,
+        MaskitoDirective,
+        TuiHintModule,
+        TuiInputPasswordModule,
+        TuiTextfieldControllerModule,
+    ],
+    template: `
+        <tui-input-password
+            tuiHintContent="Only 3 digits are allowed"
+            [style.max-width.rem]="20"
+            [tuiTextfieldLabelOutside]="true"
+            [(ngModel)]="value"
+        >
+            Enter password
+            <input
+                tuiTextfield
+                type="password"
+                [maskito]="maskitoOptions"
+            />
+        </tui-input-password>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputPasswordDocExample {
+    protected readonly maskitoOptions = mask;
+    protected value = '';
+}

projects/demo/src/pages/documentation/supported-input-types/examples/password/mask.ts

@@ -0,0 +1,5 @@
+import type {MaskitoOptions} from '@maskito/core';
+
+export default {
+    mask: [/\d/, /\d/, /\d/],
+} as MaskitoOptions;

projects/demo/src/pages/documentation/supported-input-types/examples/search/component.ts

@@ -0,0 +1,38 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/kit';
+
+import mask from './mask';
+
+@Component({
+    standalone: true,
+    selector: 'input-type-search-example',
+    imports: [
+        FormsModule,
+        MaskitoDirective,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+    ],
+    template: `
+        <tui-input
+            tuiTextfieldIconLeft="tuiIconSearchLarge"
+            [style.max-width.rem]="20"
+            [tuiTextfieldLabelOutside]="true"
+            [(ngModel)]="value"
+        >
+            Enter any english word
+            <input
+                tuiTextfield
+                type="search"
+                [maskito]="maskitoOptions"
+            />
+        </tui-input>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputSearchDocExample {
+    protected readonly maskitoOptions = mask;
+    protected value = '';
+}

projects/demo/src/pages/documentation/supported-input-types/examples/search/mask.ts

@@ -0,0 +1,5 @@
+import type {MaskitoOptions} from '@maskito/core';
+
+export default {
+    mask: /^[a-z]+$/i,
+} as MaskitoOptions;

projects/demo/src/pages/documentation/supported-input-types/examples/tel/component.ts

@@ -0,0 +1,47 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
+import {TuiFlagPipeModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/kit';
+
+import mask from './mask';
+
+@Component({
+    standalone: true,
+    selector: 'input-type-tel-example',
+    imports: [
+        FormsModule,
+        MaskitoDirective,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+        TuiFlagPipeModule,
+    ],
+    template: `
+        <tui-input
+            [style.max-width.rem]="20"
+            [tuiTextfieldCustomContent]="usFlag"
+            [tuiTextfieldLabelOutside]="true"
+            [(ngModel)]="value"
+        >
+            Enter phone number
+            <input
+                tuiTextfield
+                type="tel"
+                [maskito]="maskitoOptions"
+            />
+        </tui-input>
+
+        <ng-template #usFlag>
+            <img
+                alt="Flag of the United States"
+                width="28"
+                [src]="'US' | tuiFlag"
+            />
+        </ng-template>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputTelDocExample {
+    protected readonly maskitoOptions = mask;
+    protected value = '';
+}

projects/demo/src/pages/documentation/supported-input-types/examples/tel/mask.ts

@@ -0,0 +1,7 @@
+import {maskitoPhoneOptionsGenerator} from '@maskito/phone';
+import metadata from 'libphonenumber-js/metadata.min.json';
+
+export default maskitoPhoneOptionsGenerator({
+    metadata,
+    countryIsoCode: 'US',
+});

projects/demo/src/pages/documentation/supported-input-types/examples/text/component.ts

@@ -0,0 +1,39 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/kit';
+
+import mask from './mask';
+
+@Component({
+    standalone: true,
+    selector: 'input-type-text-example',
+    imports: [
+        FormsModule,
+        MaskitoDirective,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+    ],
+    template: `
+        <tui-input
+            tuiTextfieldCustomContent="tuiIconClockLarge"
+            [style.max-width.rem]="20"
+            [tuiTextfieldLabelOutside]="true"
+            [(ngModel)]="value"
+        >
+            Enter time
+            <input
+                inputmode="decimal"
+                tuiTextfield
+                type="text"
+                [maskito]="maskitoOptions"
+            />
+        </tui-input>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputTextDocExample {
+    protected readonly maskitoOptions = mask;
+    protected value = '';
+}

projects/demo/src/pages/documentation/supported-input-types/examples/text/mask.ts

@@ -0,0 +1,5 @@
+import {maskitoTimeOptionsGenerator} from '@maskito/kit';
+
+export default maskitoTimeOptionsGenerator({
+    mode: 'HH:MM',
+});

projects/demo/src/pages/documentation/supported-input-types/examples/url/component.ts

@@ -0,0 +1,38 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/kit';
+
+import mask from './mask';
+
+@Component({
+    standalone: true,
+    selector: 'input-type-url-example',
+    imports: [
+        FormsModule,
+        MaskitoDirective,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+    ],
+    template: `
+        <tui-input
+            tuiTextfieldCustomContent="tuiIconGlobeLarge"
+            [style.max-width.rem]="20"
+            [tuiTextfieldLabelOutside]="true"
+            [(ngModel)]="value"
+        >
+            Enter url
+            <input
+                tuiTextfield
+                type="url"
+                [maskito]="maskitoOptions"
+            />
+        </tui-input>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputURLDocExample {
+    protected readonly maskitoOptions = mask;
+    protected value = '';
+}

projects/demo/src/pages/documentation/supported-input-types/examples/url/mask.ts

@@ -0,0 +1,6 @@
+import type {MaskitoOptions} from '@maskito/core';
+
+export default {
+    // oversimplified version of url mask for demo purposes
+    mask: /^[\w/:.@]+$/,
+} as MaskitoOptions;

projects/demo/src/pages/documentation/supported-input-types/supported-input-types.component.ts

@@ -0,0 +1,56 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {DocExamplePrimaryTab} from '@demo/constants';
+import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
+import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
+
+import {InputPasswordDocExample} from './examples/password/component';
+import {InputSearchDocExample} from './examples/search/component';
+import {InputTelDocExample} from './examples/tel/component';
+import {InputTextDocExample} from './examples/text/component';
+import {InputURLDocExample} from './examples/url/component';
+
+@Component({
+    standalone: true,
+    selector: 'supported-input-types-doc-page',
+    imports: [
+        RouterLink,
+        TuiAddonDocModule,
+        TuiLinkModule,
+        TuiNotificationModule,
+        InputTextDocExample,
+        InputTelDocExample,
+        InputPasswordDocExample,
+        InputURLDocExample,
+        InputSearchDocExample,
+    ],
+    templateUrl: './supported-input-types.template.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class SupportedInputTypesDocPageComponent {
+    protected readonly textTypeExample: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/text/mask.ts?raw'),
+    };
+
+    protected readonly telTypeExample: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/tel/mask.ts?raw'),
+    };
+
+    protected readonly passwordTypeExample: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/password/mask.ts?raw'),
+    };
+
+    protected readonly urlTypeExample: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/url/mask.ts?raw'),
+    };
+
+    protected readonly searchTypeExample: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/search/mask.ts?raw'),
+    };
+
+    protected getInput(type: HTMLInputElement['type']): string {
+        // eslint-disable-next-line no-irregular-whitespace
+        return `<input type="${type}" />`;
+    }
+}