chore: fix coments

projects/core/src/index.ts

@@ -4,10 +4,10 @@ export {
 } from './lib/constants';
 export {Maskito} from './lib/mask';
 export {
-    MaskExpression,
     MaskitoElementPredicate,
     MaskitoElementPredicateAsync,
     MaskitoMask,
+    MaskitoMaskExpression,
     MaskitoOptions,
     MaskitoPlugin,
     MaskitoPostprocessor,

projects/core/src/lib/classes/mask-model/mask-model.ts

@@ -1,4 +1,9 @@
-import {ElementState, MaskExpression, MaskitoOptions, SelectionRange} from '../../types';
+import {
+    ElementState,
+    MaskitoMaskExpression,
+    MaskitoOptions,
+    SelectionRange,
+} from '../../types';
 import {areElementStatesEqual} from '../../utils/element-states-equality';
 import {applyOverwriteMode} from './utils/apply-overwrite-mode';
 import {calibrateValueByMask} from './utils/calibrate-value-by-mask';
@@ -102,7 +107,7 @@ export class MaskModel implements ElementState {
         this.selection = maskedElementState.selection;
     }
 
-    private getMaskExpression(elementState: ElementState): MaskExpression {
+    private getMaskExpression(elementState: ElementState): MaskitoMaskExpression {
         const {mask} = this.maskOptions;
 
         return typeof mask === 'function' ? mask(elementState) : mask;

projects/core/src/lib/classes/mask-model/utils/calibrate-value-by-mask.ts

@@ -1,11 +1,11 @@
-import {ElementState, MaskExpression} from '../../../types';
+import {ElementState, MaskitoMaskExpression} from '../../../types';
 import {guessValidValueByPattern} from './guess-valid-value-by-pattern';
 import {guessValidValueByRegExp} from './guess-valid-value-by-reg-exp';
 import {validateValueWithMask} from './validate-value-with-mask';
 
 export function calibrateValueByMask(
     elementState: ElementState,
-    mask: MaskExpression,
+    mask: MaskitoMaskExpression,
     initialElementState: ElementState | null = null,
 ): ElementState {
     if (validateValueWithMask(elementState.value, mask)) {

projects/core/src/lib/classes/mask-model/utils/remove-fixed-mask-characters.ts

@@ -1,9 +1,9 @@
-import {ElementState, MaskExpression} from '../../../types';
+import {ElementState, MaskitoMaskExpression} from '../../../types';
 import {isFixedCharacter} from './is-fixed-character';
 
 export function removeFixedMaskCharacters(
     initialElementState: ElementState,
-    mask: MaskExpression,
+    mask: MaskitoMaskExpression,
 ): ElementState {
     if (!Array.isArray(mask)) {
         return initialElementState;

projects/core/src/lib/classes/mask-model/utils/validate-value-with-mask.ts

@@ -1,9 +1,9 @@
-import {MaskExpression} from '../../../types';
+import {MaskitoMaskExpression} from '../../../types';
 import {isFixedCharacter} from './is-fixed-character';
 
 export function validateValueWithMask(
     value: string,
-    maskExpression: MaskExpression,
+    maskExpression: MaskitoMaskExpression,
 ): boolean {
     if (Array.isArray(maskExpression)) {
         return (

projects/core/src/lib/types/mask.ts

@@ -1,7 +1,7 @@
 import {ElementState} from './element-state';
 
-export type MaskExpression = Array<RegExp | string> | RegExp;
+export type MaskitoMaskExpression = Array<RegExp | string> | RegExp;
 
 export type MaskitoMask =
-    | MaskExpression
-    | ((elementState: ElementState) => MaskExpression);
+    | MaskitoMaskExpression
+    | ((elementState: ElementState) => MaskitoMaskExpression);

projects/demo-integrations/cypress/tests/addons/phone/phone-basic.cy.ts

@@ -67,7 +67,7 @@ describe('Phone', () => {
 
             it('+7 920 424-1|1-32 => Backspace => +7 920 424-|13-2 => Type "2" => +7 920 424-2|1-32', () => {
                 cy.get('@input')
-                    .type('{leftArrow}'.repeat(4))
+                    .type('{leftArrow}'.repeat('13-2'.length))
                     .type('{backspace}')
                     .should('have.value', '+7 920 424-13-2')
                     .should('have.prop', 'selectionStart', '+7 920 424-'.length)
@@ -80,7 +80,7 @@ describe('Phone', () => {
 
             it('+7 9|20 424-11-32 => Backspace => +7 2|04241132', () => {
                 cy.get('@input')
-                    .type('{leftArrow}'.repeat(12))
+                    .type('{leftArrow}'.repeat('20 424-11-32'.length))
                     .type('{backspace}')
                     .should('have.value', '+7 204241132')
                     .should('have.prop', 'selectionStart', '+7 '.length)
@@ -114,7 +114,7 @@ describe('Phone', () => {
 
                     it('+7 920 424-11-32 => Select "+7 920 424-1|1-3|2" => Backspace => +7 920 424-1|2', () => {
                         cy.get('@input')
-                            .type('{leftArrow}'.repeat('2'.length))
+                            .type('{leftArrow}')
                             .realPress([
                                 'Shift',
                                 ...Array('1-3'.length).fill('ArrowLeft'),
@@ -150,7 +150,7 @@ describe('Phone', () => {
 
                     it('+7 920 424-11-32 => Select "+7 920 424-1|1-3|2" => Type "5" => +7 920 424-15-|2', () => {
                         cy.get('@input')
-                            .type('{leftArrow}'.repeat('2'.length))
+                            .type('{leftArrow}')
                             .realPress([
                                 'Shift',
                                 ...Array('1-3'.length).fill('ArrowLeft'),

projects/demo/src/pages/phone/examples/1-basic/component.ts

@@ -1,23 +1,8 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {
-    AbstractControl,
-    FormControl,
-    ValidationErrors,
-    ValidatorFn,
-} from '@angular/forms';
-import {TuiValidationError} from '@taiga-ui/cdk';
-import {CountryCode, isValidPhoneNumber} from 'libphonenumber-js/max';
+import {FormControl} from '@angular/forms';
 
 import mask from './mask';
 
-function phoneValidator(countryCode: CountryCode): ValidatorFn {
-    return (control: AbstractControl): ValidationErrors | null => {
-        const valid = isValidPhoneNumber(control.value, countryCode);
-
-        return valid ? null : new TuiValidationError('Invalid number');
-    };
-}
-
 @Component({
     selector: 'phone-doc-example-1',
     template: `
@@ -41,7 +26,7 @@ function phoneValidator(countryCode: CountryCode): ValidatorFn {
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DateMaskDocExample1 {
-    value = new FormControl('+7 771 931-1111', phoneValidator('KZ'));
+export class PhoneMaskDocExample1 {
+    value = new FormControl('+7 771 931-1111');
     readonly mask = mask;
 }

projects/demo/src/pages/phone/examples/2-validation/component.ts

@@ -0,0 +1,47 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {
+    AbstractControl,
+    FormControl,
+    ValidationErrors,
+    ValidatorFn,
+} from '@angular/forms';
+import {TuiValidationError} from '@taiga-ui/cdk';
+import {CountryCode, isValidPhoneNumber} from 'libphonenumber-js/max';
+
+import mask from './mask';
+
+function phoneValidator(countryCode: CountryCode): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const valid = isValidPhoneNumber(control.value, countryCode);
+
+        return valid ? null : new TuiValidationError('Invalid number');
+    };
+}
+
+@Component({
+    selector: 'phone-doc-example-2',
+    template: `
+        <tui-input
+            tuiTextfieldCustomContent="tuiIconPhoneLarge"
+            [style.max-width.rem]="30"
+            [formControl]="value"
+        >
+            Basic
+            <input
+                tuiTextfield
+                autocomplete="tel"
+                inputmode="tel"
+                [maskito]="mask"
+            />
+        </tui-input>
+        <tui-error
+            [formControl]="value"
+            [error]="[] | tuiFieldError | async"
+        ></tui-error>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PhoneMaskDocExample2 {
+    value = new FormControl('+36 20 123-3122', phoneValidator('HU'));
+    readonly mask = mask;
+}

projects/demo/src/pages/phone/examples/2-validation/mask.ts

@@ -0,0 +1,4 @@
+import {maskitoPhoneOptionsGenerator} from '@maskito/phone';
+import metadata from 'libphonenumber-js/mobile/metadata';
+
+export default maskitoPhoneOptionsGenerator({countryIsoCode: 'HU', metadata});

projects/demo/src/pages/phone/phone-doc.component.ts

@@ -21,6 +21,15 @@ export class PhoneDocComponent implements GeneratorOptions {
         [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/1-basic/mask.ts?raw'),
     };
 
+    readonly validation: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import(
+            './examples/2-validation/mask.ts?raw'
+        ),
+        [DocExamplePrimaryTab.Angular]: import(
+            './examples/2-validation/component.ts?raw'
+        ),
+    };
+
     metadata = metadata;
 
     countryCodeVariants = getCountries(this.metadata);

projects/demo/src/pages/phone/phone-doc.module.ts

@@ -11,7 +11,8 @@ import {
 } from '@taiga-ui/core';
 import {TuiFieldErrorPipeModule, TuiInputModule} from '@taiga-ui/kit';
 
-import {DateMaskDocExample1} from './examples/1-basic/component';
+import {PhoneMaskDocExample1} from './examples/1-basic/component';
+import {PhoneMaskDocExample2} from './examples/2-validation/component';
 import {PhoneDocComponent} from './phone-doc.component';
 
 @NgModule({
@@ -28,7 +29,7 @@ import {PhoneDocComponent} from './phone-doc.component';
         TuiTextfieldControllerModule,
         RouterModule.forChild(tuiGenerateRoutes(PhoneDocComponent)),
     ],
-    declarations: [PhoneDocComponent, DateMaskDocExample1],
+    declarations: [PhoneDocComponent, PhoneMaskDocExample1, PhoneMaskDocExample2],
     exports: [PhoneDocComponent],
 })
 export class PhoneDocModule {}

projects/demo/src/pages/phone/phone-doc.template.html

@@ -25,6 +25,43 @@
         >
             <phone-doc-example-1></phone-doc-example-1>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="validation"
+            heading="validation"
+            [description]="description"
+            [content]="validation"
+        >
+            <phone-doc-example-2></phone-doc-example-2>
+
+            <ng-template #description>
+                <p>
+                    For validating phone number you can use
+                    <code>isValidPhoneNumber</code>
+                    ,
+                    <code>isPossiblePhoneNumber</code>
+                    functions from
+                    <a
+                        tuiLink
+                        href="https://www.npmjs.com/package/libphonenumber-js"
+                    >
+                        libphonenumber-js
+                    </a>
+                    package.
+                    <a
+                        tuiLink
+                        href="https://www.npmjs.com/package/libphonenumber-js"
+                    >
+                        Read more
+                    </a>
+                </p>
+
+                <p>
+                    Below is an example of a Hungarian phone mask with an
+                    angular validator.
+                </p>
+            </ng-template>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
@@ -38,7 +75,8 @@
                     Enter phone
                     <input
                         tuiTextfield
-                        inputmode="numeric"
+                        autocomplete="tel"
+                        inputmode="tel"
                         [maskito]="maskitoOptions"
                     />
                 </tui-input>

projects/kit/src/index.ts

@@ -3,7 +3,13 @@ export {maskitoDateRangeOptionsGenerator} from './lib/masks/date-range';
 export {maskitoDateTimeOptionsGenerator} from './lib/masks/date-time';
 export {maskitoNumberOptionsGenerator, maskitoParseNumber} from './lib/masks/number';
 export {maskitoTimeOptionsGenerator} from './lib/masks/time';
-export {maskitoCaretGuard, maskitoEventHandler, maskitoRejectEvent} from './lib/plugins';
+export {
+    maskitoAddOnFocusPlugin,
+    maskitoCaretGuard,
+    maskitoEventHandler,
+    maskitoRejectEvent,
+    maskitoRemoveOnBlurPlugin,
+} from './lib/plugins';
 export {
     maskitoPostfixPostprocessorGenerator,
     maskitoPrefixPostprocessorGenerator,

projects/phone/src/lib/plugins/add-on-focus.ts → projects/kit/src/lib/plugins/add-on-focus.ts

@@ -1,5 +1,5 @@
 import {MaskitoPlugin} from '@maskito/core';
-import {maskitoEventHandler} from '@maskito/kit';
+import {maskitoEventHandler} from './event-handler';
 
 export function maskitoAddOnFocusPlugin(value: string): MaskitoPlugin {
     return maskitoEventHandler('focus', element => {

projects/kit/src/lib/plugins/index.ts

@@ -1,3 +1,5 @@
+export {maskitoAddOnFocusPlugin} from './add-on-focus';
 export {maskitoCaretGuard} from './caret-guard';
 export {maskitoEventHandler} from './event-handler';
 export {maskitoRejectEvent} from './reject-event';
+export {maskitoRemoveOnBlurPlugin} from './remove-on-blur';

projects/phone/src/lib/plugins/remove-on-blur.ts → projects/kit/src/lib/plugins/remove-on-blur.ts

@@ -1,5 +1,5 @@
 import {MaskitoPlugin} from '@maskito/core';
-import {maskitoEventHandler} from '@maskito/kit';
+import {maskitoEventHandler} from './event-handler';
 
 export function maskitoRemoveOnBlurPlugin(value: string): MaskitoPlugin {
     return maskitoEventHandler('blur', element => {

projects/phone/package.json

@@ -29,7 +29,7 @@
         "Nikita Barsukov <nikita.s.barsukov@gmail.com>"
     ],
     "devDependencies": {
-        "libphonenumber-js": "^1.10.0"
+        "libphonenumber-js": "1.10.37"
     },
     "peerDependencies": {
         "@maskito/core": "^1.4.0",

projects/phone/project.json

@@ -35,19 +35,6 @@
                 "jestConfig": "projects/phone/jest.config.js",
                 "passWithNoTests": true
             }
-        },
-        "publish": {
-            "executor": "@nrwl/workspace:run-commands",
-            "options": {
-                "command": "ts-node ./scripts/npm-publish.ts --path ./dist/phone --dry-run {args.dry-run}"
-            },
-            "dependsOn": [
-                {
-                    "target": "build",
-                    "projects": "self",
-                    "params": "ignore"
-                }
-            ]
         }
     },
     "tags": []

projects/phone/src/index.ts

@@ -1,2 +1 @@
 export * from './lib/masks';
-export * from './lib/plugins';

projects/phone/src/lib/masks/phone/phone-mask.ts

@@ -1,16 +1,20 @@
 import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions} from '@maskito/core';
-import {maskitoCaretGuard, maskitoPrefixPostprocessorGenerator} from '@maskito/kit';
+import {
+    maskitoAddOnFocusPlugin,
+    maskitoCaretGuard,
+    maskitoPrefixPostprocessorGenerator,
+    maskitoRemoveOnBlurPlugin,
+} from '@maskito/kit';
 import {
     AsYouType,
     CountryCode,
     getCountryCallingCode,
     MetadataJson,
 } from 'libphonenumber-js/core';
 
-import {maskitoAddOnFocusPlugin, maskitoRemoveOnBlurPlugin} from '../../plugins';
 import {
     cutInitCountryCodePreprocessor,
-    maskitoCutPhonePostprocessorGenerator,
+    maskitoPhoneLengthPostprocessorGenerator,
     maskitoValidatePhonePreprocessorGenerator,
 } from './processors';
 import {generatePhoneMask, getPhoneTemplate} from './utils';
@@ -43,7 +47,7 @@ export function maskitoPhoneOptionsGenerator({
         ],
         postprocessors: [
             maskitoPrefixPostprocessorGenerator(prefix),
-            maskitoCutPhonePostprocessorGenerator(metadata, countryIsoCode),
+            maskitoPhoneLengthPostprocessorGenerator(metadata, countryIsoCode),
         ],
         preprocessors: [
             cutInitCountryCodePreprocessor({countryIsoCode, metadata}),