From 08bb9b32439ea1b05ecc3b24992061fa2732b152 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Fri, 19 Apr 2024 10:38:13 +0300 Subject: [PATCH] =?UTF-8?q?chore(demo):=20new=20documentation=20page=20`Su?= =?UTF-8?q?pported=C2=A0=C2=A0types`=20(#1206)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .cspell.json | 2 +- projects/demo/project.json | 2 +- projects/demo/src/app/app.routes.ts | 10 ++ projects/demo/src/app/constants/demo-path.ts | 1 + .../core-concepts-overview.component.ts | 10 +- .../core-concepts-overview.template.html | 26 +++- .../examples/password/component.ts | 39 ++++++ .../examples/password/mask.ts | 5 + .../examples/search/component.ts | 38 ++++++ .../examples/search/mask.ts | 5 + .../examples/tel/component.ts | 47 +++++++ .../examples/tel/mask.ts | 7 + .../examples/text/component.ts | 39 ++++++ .../examples/text/mask.ts | 5 + .../examples/url/component.ts | 38 ++++++ .../examples/url/mask.ts | 6 + .../supported-input-types.component.ts | 56 ++++++++ .../supported-input-types.template.html | 126 ++++++++++++++++++ projects/demo/src/pages/pages.ts | 7 + 19 files changed, 465 insertions(+), 4 deletions(-) create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/password/component.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/password/mask.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/search/component.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/search/mask.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/tel/component.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/tel/mask.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/text/component.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/text/mask.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/url/component.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/examples/url/mask.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/supported-input-types.component.ts create mode 100644 projects/demo/src/pages/documentation/supported-input-types/supported-input-types.template.html diff --git a/.cspell.json b/.cspell.json index a957f1c52..0fde7727b 100644 --- a/.cspell.json +++ b/.cspell.json @@ -15,5 +15,5 @@ "**/package.json", "**/tsconfig*.json" ], - "ignoreWords": ["Acpekt"] + "ignoreWords": ["Acpekt", "WHATWG"] } diff --git a/projects/demo/project.json b/projects/demo/project.json index e3afea5d1..020090272 100644 --- a/projects/demo/project.json +++ b/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": { diff --git a/projects/demo/src/app/app.routes.ts b/projects/demo/src/app/app.routes.ts index 0aeadfef1..1e6187a15 100644 --- a/projects/demo/src/app/app.routes.ts +++ b/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 types', + }, + }, { 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 ee0fc015f..f67da32ca 100644 --- a/projects/demo/src/app/constants/demo-path.ts +++ b/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; diff --git a/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts b/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts index fca901f83..c89c7d227 100644 --- a/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts +++ b/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}`; } diff --git a/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.template.html b/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.template.html index 8c2f31bd6..69920d0ec 100644 --- a/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.template.html +++ b/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.template.html @@ -9,7 +9,31 @@
  1. native - HTMLInputElement + + HTMLInputElement + + + + Maskito + supports only limited types of + HTMLInputElement + due to some browser limitations! + +

    + + See a full list of supported types + +

    +     +     or HTMLTextAreaElement
    2. diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/password/component.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/password/component.ts new file mode 100644 index 000000000..9e13ba6bc --- /dev/null +++ b/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: ` + + Enter password + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class InputPasswordDocExample { + protected readonly maskitoOptions = mask; + protected value = ''; +} diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/password/mask.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/password/mask.ts new file mode 100644 index 000000000..a63a91fa5 --- /dev/null +++ b/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; diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/search/component.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/search/component.ts new file mode 100644 index 000000000..90bb04581 --- /dev/null +++ b/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: ` + + Enter any english word + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class InputSearchDocExample { + protected readonly maskitoOptions = mask; + protected value = ''; +} diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/search/mask.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/search/mask.ts new file mode 100644 index 000000000..44a4b8e42 --- /dev/null +++ b/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; diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/tel/component.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/tel/component.ts new file mode 100644 index 000000000..c050a220d --- /dev/null +++ b/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: ` + + Enter phone number + + + + + Flag of the United States + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class InputTelDocExample { + protected readonly maskitoOptions = mask; + protected value = ''; +} diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/tel/mask.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/tel/mask.ts new file mode 100644 index 000000000..82ea31e72 --- /dev/null +++ b/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', +}); diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/text/component.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/text/component.ts new file mode 100644 index 000000000..2eff5df68 --- /dev/null +++ b/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: ` + + Enter time + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class InputTextDocExample { + protected readonly maskitoOptions = mask; + protected value = ''; +} diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/text/mask.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/text/mask.ts new file mode 100644 index 000000000..69f9b9c91 --- /dev/null +++ b/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', +}); diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/url/component.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/url/component.ts new file mode 100644 index 000000000..cd30c7016 --- /dev/null +++ b/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: ` + + Enter url + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class InputURLDocExample { + protected readonly maskitoOptions = mask; + protected value = ''; +} diff --git a/projects/demo/src/pages/documentation/supported-input-types/examples/url/mask.ts b/projects/demo/src/pages/documentation/supported-input-types/examples/url/mask.ts new file mode 100644 index 000000000..3f247d465 --- /dev/null +++ b/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; diff --git a/projects/demo/src/pages/documentation/supported-input-types/supported-input-types.component.ts b/projects/demo/src/pages/documentation/supported-input-types/supported-input-types.component.ts new file mode 100644 index 000000000..5afd07a13 --- /dev/null +++ b/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 ``; + } +} diff --git a/projects/demo/src/pages/documentation/supported-input-types/supported-input-types.template.html b/projects/demo/src/pages/documentation/supported-input-types/supported-input-types.template.html new file mode 100644 index 000000000..101adbc8b --- /dev/null +++ b/projects/demo/src/pages/documentation/supported-input-types/supported-input-types.template.html @@ -0,0 +1,126 @@ + + + Maskito + supports only limited types of + HTMLInputElement + due to some browser limitations! + + +
    +

    + Maskito + accepts only the types whose support the following native properties/methods: +

    + +
      +
    • selectionStart
      • +
    • selectionEnd
      • +
    • setSelectionRange
      • +
    + +

    + According to the + + WHATWG forms spec + + they apply only to inputs of types + text + , + search + , + URL + , + tel + and + password + . +
    + All other types will not work properly with Maskito! +

    +
    + +

    All examples below are demonstrations to see different supported types in action.

    + + + + {{ getInput('text') }} + is the default, the simplest and the most popular type of input-element. +
    + Use it if you don't know which type to choose. +     + + +     + + + + {{ getInput('tel') }} + is a control for entering a telephone number. +
    + Displays a telephone keypad in some devices with dynamic keypads. +     + + +     + + + + {{ getInput('password') }} + is a single-line text field whose value is obscured. + + + + + + + + {{ getInput('url') }} + is a field for entering a URL. +
    + Looks like a text input, but has relevant keyboard in supporting browsers and devices with dynamic + keyboards. +     + + +     + + + + {{ getInput('search') }} + is a single-line text field for entering search strings. +
    + Displays a search icon instead of enter key on some devices with dynamic keypads. +     + + +     +     diff --git a/projects/demo/src/pages/pages.ts b/projects/demo/src/pages/pages.ts index 5fff8353a..588903f94 100644 --- a/projects/demo/src/pages/pages.ts +++ b/projects/demo/src/pages/pages.ts @@ -160,6 +160,13 @@ export const DEMO_PAGES: TuiDocPages = [ route: DemoPath.BrowserSupport, keywords: 'chrome, safari, ie, edge, firefox, browser, support', }, + { + section: 'Other', + title: 'Supported types', + route: DemoPath.SupportedInputTypes, + keywords: + 'input, type, text, password, search, tel, url, email, number, date, month', + }, { section: 'Other', title: 'Changelog',