chore(demo): create documentation page Maskito in Real World Form (#…

…1325)

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

@@ -219,6 +219,13 @@ export const appRoutes: Routes = [
             title: 'Supported <input /> types',
         },
     },
+    {
+        path: DemoPath.RealWorldForm,
+        loadComponent: () => import('../pages/documentation/real-world-form'),
+        data: {
+            title: 'Maskito in Real World Form',
+        },
+    },
     {
         path: DemoPath.Changelog,
         loadComponent: () =>

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

@@ -26,6 +26,7 @@ export const DemoPath = {
     Placeholder: 'recipes/placeholder',
     BrowserSupport: 'browser-support',
     SupportedInputTypes: 'supported-input-types',
+    RealWorldForm: 'real-world-form',
     Changelog: 'changelog',
     Stackblitz: 'stackblitz',
 } as const;

projects/demo/src/pages/documentation/real-world-form/index.html

@@ -0,0 +1,174 @@
+<form
+    #formElement
+    autocomplete="on"
+    class="tui-form"
+    [formGroup]="form"
+    (ngSubmit)="log(form.value); formElement.submit()"
+>
+    <h3 class="tui-form__header tui-form__header_margin-top_none">Real World Form</h3>
+    <div class="tui-form__row tui-form__row_multi-fields">
+        <tui-input
+            formControlName="name"
+            class="tui-form__multi-field"
+        >
+            Name
+            <input
+                autocomplete="name"
+                name="name"
+                placeholder="Only latin letters"
+                tuiTextfield
+                [maskito]="nameMask"
+            />
+        </tui-input>
+        <tui-input
+            formControlName="surname"
+            class="tui-form__multi-field"
+        >
+            Surname
+            <input
+                autocomplete="family-name"
+                name="surname"
+                placeholder="Only CAPITAL latin letters"
+                tuiTextfield
+                [maskito]="surnameMask"
+            />
+        </tui-input>
+    </div>
+
+    <div class="tui-form__row">
+        <tui-input
+            formControlName="phone"
+            [tuiTextfieldCustomContent]="countryIsoCode ? flag : 'tuiIconPhoneLarge'"
+        >
+            Enter phone number
+            <input
+                autocomplete="tel"
+                inputmode="tel"
+                name="phone"
+                tuiTextfield
+                [attr.pattern]="phoneTextfieldPattern"
+                [maskito]="phoneMask"
+            />
+        </tui-input>
+
+        <ng-template #flag>
+            <img
+                width="28"
+                [attr.alt]="countryIsoCode"
+                [src]="countryIsoCode | tuiFlag"
+            />
+        </ng-template>
+    </div>
+
+    <div class="tui-form__row tui-form__row_multi-fields">
+        <tui-input
+            formControlName="password"
+            class="tui-form__multi-field"
+            [tuiTextfieldCustomContent]="showHideIcon"
+        >
+            Enter password
+            <input
+                autocomplete="new-password"
+                name="password"
+                placeholder="Only digits and one latin letter"
+                tuiTextfield
+                [maskito]="passwordMask"
+                [type]="showPassword ? 'password' : 'text'"
+            />
+        </tui-input>
+        <tui-input
+            formControlName="repeatedPassword"
+            class="tui-form__multi-field"
+            [tuiTextfieldCustomContent]="showHideIcon"
+        >
+            Repeat password
+            <input
+                autocomplete="new-password"
+                name="repeatPassword"
+                placeholder="Only digits and one latin letter"
+                tuiTextfield
+                [maskito]="passwordMask"
+                [type]="showPassword ? 'password' : 'text'"
+            />
+        </tui-input>
+
+        <ng-template #showHideIcon>
+            <tui-svg
+                class="password-icon"
+                [src]="showPassword ? 'tuiIconEyeLarge' : 'tuiIconEyeOffLarge'"
+                (click)="showPassword = !showPassword"
+            />
+        </ng-template>
+    </div>
+
+    <div class="tui-form__row tui-form__row_multi-fields">
+        <tui-input
+            formControlName="transactionDate"
+            tuiTextfieldCustomContent="tuiIconCalendarLarge"
+            class="tui-form__multi-field"
+        >
+            Transaction date
+            <input
+                inputmode="decimal"
+                name="transactionDate"
+                placeholder="dd.mm.yyyy"
+                tuiTextfield
+                [maskito]="transactionDateMask"
+            />
+        </tui-input>
+
+        <tui-input
+            formControlName="transactionAmount"
+            class="tui-form__multi-field"
+        >
+            Transaction amount
+            <input
+                autocomplete="transaction-amount"
+                inputmode="decimal"
+                name="transactionAmount"
+                placeholder="Enter amount"
+                tuiTextfield
+                [maskito]="transactionAmountMask"
+            />
+        </tui-input>
+    </div>
+
+    <div class="tui-form__row">
+        <tui-textarea
+            formControlName="address"
+            [expandable]="true"
+        >
+            Enter address
+
+            <textarea
+                autocomplete="street-address"
+                name="address"
+                placeholder="Only latin letters, digits and some punctuation signs are allowed"
+                tuiTextfield
+                [maskito]="addressMask"
+            ></textarea>
+        </tui-textarea>
+    </div>
+
+    <div class="tui-form__buttons">
+        <button
+            size="l"
+            tuiButton
+            type="submit"
+            class="tui-form__button"
+        >
+            Submit
+        </button>
+
+        <button
+            appearance="flat"
+            size="l"
+            tuiButton
+            type="button"
+            class="tui-form__button"
+            (click)="form.reset()"
+        >
+            Clear all
+        </button>
+    </div>
+</form>

projects/demo/src/pages/documentation/real-world-form/index.less

@@ -0,0 +1,16 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 2rem;
+}
+
+form {
+    width: 80%;
+    max-width: 40rem;
+}
+
+.password-icon {
+    pointer-events: all;
+    cursor: pointer;
+}

projects/demo/src/pages/documentation/real-world-form/index.ts

@@ -0,0 +1,111 @@
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
+import type {MaskitoOptions} from '@maskito/core';
+import {
+    maskitoAddOnFocusPlugin,
+    maskitoDateOptionsGenerator,
+    maskitoNumberOptionsGenerator,
+    maskitoRemoveOnBlurPlugin,
+} from '@maskito/kit';
+import {maskitoGetCountryFromNumber, maskitoPhoneOptionsGenerator} from '@maskito/phone';
+import {TUI_IS_APPLE} from '@taiga-ui/cdk';
+import {
+    TuiButtonModule,
+    TuiFlagPipeModule,
+    TuiSvgModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputModule, TuiTextareaModule} from '@taiga-ui/kit';
+import metadata from 'libphonenumber-js/min/metadata';
+
+const MONEY_AMOUNT_MASK = maskitoNumberOptionsGenerator({
+    min: 0,
+    prefix: '$ ',
+    precision: 2,
+});
+
+const ONLY_LATIN_LETTERS_RE = /^[a-z]+$/i;
+
+@Component({
+    standalone: true,
+    selector: 'real-world-form',
+    imports: [
+        ReactiveFormsModule,
+        TuiInputModule,
+        TuiButtonModule,
+        TuiTextfieldControllerModule,
+        TuiTextareaModule,
+        MaskitoDirective,
+        TuiFlagPipeModule,
+        TuiSvgModule,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class RealWorldForm {
+    private readonly isApple = inject(TUI_IS_APPLE);
+
+    protected readonly form = new FormGroup({
+        name: new FormControl(''),
+        surname: new FormControl(''),
+        phone: new FormControl(''),
+        password: new FormControl(''),
+        repeatedPassword: new FormControl(''),
+        transactionDate: new FormControl(''),
+        transactionAmount: new FormControl(''),
+        address: new FormControl(''),
+    });
+
+    protected nameMask: MaskitoOptions = {
+        mask: ONLY_LATIN_LETTERS_RE,
+    };
+
+    protected surnameMask: MaskitoOptions = {
+        mask: ONLY_LATIN_LETTERS_RE,
+        postprocessors: [
+            ({value, selection}) => ({selection, value: value.toUpperCase()}),
+        ],
+    };
+
+    protected readonly phoneMask = maskitoPhoneOptionsGenerator({
+        metadata,
+        strict: false,
+    });
+
+    protected passwordMask: MaskitoOptions = {
+        mask: /^\d*[a-z]?\d*$/i,
+    };
+
+    protected readonly transactionDateMask = maskitoDateOptionsGenerator({
+        mode: 'dd/mm/yyyy',
+    });
+
+    protected readonly transactionAmountMask: MaskitoOptions = {
+        ...MONEY_AMOUNT_MASK,
+        plugins: [
+            ...MONEY_AMOUNT_MASK.plugins,
+            maskitoAddOnFocusPlugin('$ '),
+            maskitoRemoveOnBlurPlugin('$ '),
+        ],
+    };
+
+    protected readonly addressMask: MaskitoOptions = {
+        mask: /^[a-z1-9\s.,/]+$/i,
+    };
+
+    protected showPassword = false;
+
+    protected get countryIsoCode(): string {
+        return maskitoGetCountryFromNumber(this.form.value.phone || '', metadata) || '';
+    }
+
+    protected get phoneTextfieldPattern(): string {
+        return this.isApple ? '+[0-9-]{1,20}' : '';
+    }
+
+    protected log(something: any): void {
+        console.info(something);
+    }
+}

projects/demo/src/pages/pages.ts

@@ -167,6 +167,12 @@ export const DEMO_PAGES: TuiDocPages = [
         keywords:
             'input, type, text, password, search, tel, url, email, number, date, month',
     },
+    {
+        section: 'Other',
+        title: 'Maskito in Real World Form',
+        route: DemoPath.RealWorldForm,
+        keywords: 'browser, autofill, showcase, in, action, demo',
+    },
     {
         section: 'Other',
         title: 'Changelog',