From 19ac83c6d35e6270a12925c68e0c59a921a8b8ea Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Fri, 21 Jun 2024 15:40:07 +0300 Subject: [PATCH 1/3] chore(demo): create documentation page `Maskito in Real World Form` --- projects/demo/src/app/app.routes.ts | 7 + projects/demo/src/app/constants/demo-path.ts | 1 + .../documentation/real-world-form/index.html | 173 ++++++++++++++++++ .../documentation/real-world-form/index.less | 16 ++ .../documentation/real-world-form/index.ts | 104 +++++++++++ projects/demo/src/pages/pages.ts | 6 + 6 files changed, 307 insertions(+) create mode 100644 projects/demo/src/pages/documentation/real-world-form/index.html create mode 100644 projects/demo/src/pages/documentation/real-world-form/index.less create mode 100644 projects/demo/src/pages/documentation/real-world-form/index.ts diff --git a/projects/demo/src/app/app.routes.ts b/projects/demo/src/app/app.routes.ts index 1e6187a15..fedaa0314 100644 --- a/projects/demo/src/app/app.routes.ts +++ b/projects/demo/src/app/app.routes.ts @@ -219,6 +219,13 @@ export const appRoutes: Routes = [ title: 'Supported types', }, }, + { + path: DemoPath.RealWorldForm, + loadComponent: () => import('../pages/documentation/real-world-form'), + data: { + title: 'Maskito in Real World Form', + }, + }, { path: DemoPath.Changelog, loadComponent: () => diff --git a/projects/demo/src/app/constants/demo-path.ts b/projects/demo/src/app/constants/demo-path.ts index f67da32ca..b43ca7b67 100644 --- a/projects/demo/src/app/constants/demo-path.ts +++ b/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; diff --git a/projects/demo/src/pages/documentation/real-world-form/index.html b/projects/demo/src/pages/documentation/real-world-form/index.html new file mode 100644 index 000000000..7b06cc8aa --- /dev/null +++ b/projects/demo/src/pages/documentation/real-world-form/index.html @@ -0,0 +1,173 @@ +
+

Real World Form

+
+ + Name + + + + Surname + + +
+ +
+ + Enter phone number + + + + + + +
+ +
+ + Enter password + + + + Repeat password + + + + + + +
+ +
+ + Transaction date + + + + + Transaction amount + + +
+ +
+ + Enter address + + + +
+ +
+ + + +
+
diff --git a/projects/demo/src/pages/documentation/real-world-form/index.less b/projects/demo/src/pages/documentation/real-world-form/index.less new file mode 100644 index 000000000..71220e209 --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/pages/documentation/real-world-form/index.ts b/projects/demo/src/pages/documentation/real-world-form/index.ts new file mode 100644 index 000000000..0938d2c75 --- /dev/null +++ b/projects/demo/src/pages/documentation/real-world-form/index.ts @@ -0,0 +1,104 @@ +import {ChangeDetectionStrategy, Component} 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 { + 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 { + 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 log(smth: any): void { + console.info(smth); + } +} diff --git a/projects/demo/src/pages/pages.ts b/projects/demo/src/pages/pages.ts index 588903f94..855578ba5 100644 --- a/projects/demo/src/pages/pages.ts +++ b/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', From fd901e40340b90e9cb916b88bdf9f69ac00c14e7 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Fri, 21 Jun 2024 17:03:22 +0300 Subject: [PATCH 2/3] chore: fix cspell job --- .../demo/src/pages/documentation/real-world-form/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/demo/src/pages/documentation/real-world-form/index.ts b/projects/demo/src/pages/documentation/real-world-form/index.ts index 0938d2c75..50f7e464f 100644 --- a/projects/demo/src/pages/documentation/real-world-form/index.ts +++ b/projects/demo/src/pages/documentation/real-world-form/index.ts @@ -98,7 +98,7 @@ export default class RealWorldForm { return maskitoGetCountryFromNumber(this.form.value.phone || '', metadata) || ''; } - protected log(smth: any): void { - console.info(smth); + protected log(something: any): void { + console.info(something); } } From b97f8b277350872a8364baa934d65f0e01cbe6a4 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Fri, 21 Jun 2024 17:13:59 +0300 Subject: [PATCH 3/3] chore: fix autofill for iphone --- .../src/pages/documentation/real-world-form/index.html | 1 + .../src/pages/documentation/real-world-form/index.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/projects/demo/src/pages/documentation/real-world-form/index.html b/projects/demo/src/pages/documentation/real-world-form/index.html index 7b06cc8aa..58158b700 100644 --- a/projects/demo/src/pages/documentation/real-world-form/index.html +++ b/projects/demo/src/pages/documentation/real-world-form/index.html @@ -46,6 +46,7 @@

Real World Form diff --git a/projects/demo/src/pages/documentation/real-world-form/index.ts b/projects/demo/src/pages/documentation/real-world-form/index.ts index 50f7e464f..ac224d6a4 100644 --- a/projects/demo/src/pages/documentation/real-world-form/index.ts +++ b/projects/demo/src/pages/documentation/real-world-form/index.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +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'; @@ -9,6 +9,7 @@ import { maskitoRemoveOnBlurPlugin, } from '@maskito/kit'; import {maskitoGetCountryFromNumber, maskitoPhoneOptionsGenerator} from '@maskito/phone'; +import {TUI_IS_APPLE} from '@taiga-ui/cdk'; import { TuiButtonModule, TuiFlagPipeModule, @@ -44,6 +45,8 @@ const ONLY_LATIN_LETTERS_RE = /^[a-z]+$/i; 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(''), @@ -98,6 +101,10 @@ export default class RealWorldForm { 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); }