diff --git a/.eslintrc.js b/.eslintrc.js index 315f4669a..29097b23f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,7 +21,6 @@ module.exports = { files: ['*.ts'], rules: { '@taiga-ui/experience/strict-tui-doc-example': 'off', - '@taiga-ui/experience/prefer-inject-decorator': 'off', '@typescript-eslint/consistent-type-assertions': 'off', }, }, diff --git a/projects/angular/src/lib/maskito.directive.ts b/projects/angular/src/lib/maskito.directive.ts index 6811b0445..5f93d1cdd 100644 --- a/projects/angular/src/lib/maskito.directive.ts +++ b/projects/angular/src/lib/maskito.directive.ts @@ -1,13 +1,11 @@ import { Directive, ElementRef, - Inject, + inject, Input, NgZone, OnChanges, OnDestroy, - Optional, - Self, } from '@angular/core'; import {DefaultValueAccessor} from '@angular/forms'; import { @@ -21,6 +19,8 @@ import { @Directive({standalone: true, selector: '[maskito]'}) export class MaskitoDirective implements OnDestroy, OnChanges { + private readonly elementRef: HTMLElement = inject(ElementRef).nativeElement; + private readonly ngZone = inject(NgZone); private maskedElement: Maskito | null = null; @Input() @@ -29,14 +29,9 @@ export class MaskitoDirective implements OnDestroy, OnChanges { @Input() maskitoElement: MaskitoElementPredicate = MASKITO_DEFAULT_ELEMENT_PREDICATE; - constructor( - @Inject(NgZone) private readonly ngZone: NgZone, - @Inject(ElementRef) private readonly elementRef: ElementRef, - @Inject(DefaultValueAccessor) - @Self() - @Optional() - accessor: DefaultValueAccessor | null, - ) { + constructor() { + const accessor = inject(DefaultValueAccessor, {self: true, optional: true}); + if (accessor) { const original = accessor.writeValue.bind(accessor); @@ -54,7 +49,7 @@ export class MaskitoDirective implements OnDestroy, OnChanges { this.maskedElement?.destroy(); const predicate = this.maskitoElement; - const predicateResult = await predicate(this.elementRef.nativeElement); + const predicateResult = await predicate(this.elementRef); if (this.maskitoElement !== predicate) { // Ignore the result of the predicate if the diff --git a/projects/demo/src/app/app.providers.ts b/projects/demo/src/app/app.providers.ts index 053fd2d3c..72117df64 100644 --- a/projects/demo/src/app/app.providers.ts +++ b/projects/demo/src/app/app.providers.ts @@ -62,7 +62,7 @@ export const APP_PROVIDERS: Provider[] = [ return `${link}/${context.package.toLowerCase()}/src/lib/masks/${( context.header[0].toLowerCase() + context.header.slice(1) - ).replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)}`; + ).replaceAll(/[A-Z]/g, m => `-${m.toLowerCase()}`)}`; }, }, { diff --git a/projects/demo/src/pages/kit/date-range/date-range-mask-doc.component.ts b/projects/demo/src/pages/kit/date-range/date-range-mask-doc.component.ts index 2353157d6..3b64d9b47 100644 --- a/projects/demo/src/pages/kit/date-range/date-range-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/date-range/date-range-mask-doc.component.ts @@ -105,7 +105,7 @@ export class DateRangeMaskDocComponent implements GeneratorOptions { dateSeparator: string, rangeSeparator: string, ): string { - const datePlaceholder = mode.replace(/\//g, dateSeparator); + const datePlaceholder = mode.replaceAll('/', dateSeparator); return `${datePlaceholder}${rangeSeparator}${datePlaceholder}`; } diff --git a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts index 7a9a0593c..6eadaf0e5 100644 --- a/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/date-time/date-time-mask-doc.component.ts @@ -81,7 +81,7 @@ export class DateTimeMaskDocComponent implements GeneratorOptions { ): string { const dateTimeSep = `,${CHAR_NO_BREAK_SPACE}`; - return `${dateMode.replace(/\//g, separator)}${dateTimeSep}${timeMode}`; + return `${dateMode.replaceAll('/', separator)}${dateTimeSep}${timeMode}`; } updateOptions(): void { diff --git a/projects/demo/src/pages/phone/examples/3-non-strict/component.ts b/projects/demo/src/pages/phone/examples/3-non-strict/component.ts index 0d51c487f..c59c2ebf3 100644 --- a/projects/demo/src/pages/phone/examples/3-non-strict/component.ts +++ b/projects/demo/src/pages/phone/examples/3-non-strict/component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, Inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MaskitoDirective} from '@maskito/angular'; import {maskitoGetCountryFromNumber} from '@maskito/phone'; @@ -46,6 +46,8 @@ import mask from './mask'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class PhoneMaskDocExample3 { + private readonly isApple = inject(TUI_IS_APPLE); + value = ''; readonly mask = mask; @@ -53,8 +55,6 @@ export class PhoneMaskDocExample3 { return maskitoGetCountryFromNumber(this.value, metadata) || ''; } - constructor(@Inject(TUI_IS_APPLE) private readonly isApple: boolean) {} - get pattern(): string { return this.isApple ? '+[0-9-]{1,20}' : ''; } diff --git a/projects/demo/src/pages/phone/phone-doc.component.ts b/projects/demo/src/pages/phone/phone-doc.component.ts index 49b3228bd..379996ffc 100644 --- a/projects/demo/src/pages/phone/phone-doc.component.ts +++ b/projects/demo/src/pages/phone/phone-doc.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, Inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {DocExamplePrimaryTab} from '@demo/constants'; import {MaskitoDirective} from '@maskito/angular'; @@ -37,6 +37,8 @@ type GeneratorOptions = Required changeDetection: ChangeDetectionStrategy.OnPush, }) export class PhoneDocComponent implements GeneratorOptions { + private readonly isApple = inject(TUI_IS_APPLE); + apiPageControl = new FormControl(''); readonly basic: TuiDocExample = { @@ -84,8 +86,6 @@ export class PhoneDocComponent implements GeneratorOptions { maskitoOptions = maskitoPhoneOptionsGenerator(this); - constructor(@Inject(TUI_IS_APPLE) private readonly isApple: boolean) {} - get pattern(): string { return this.isApple ? '+[0-9-]{1,20}' : ''; } diff --git a/projects/demo/src/pages/recipes/phone/examples/2-kz-phone/mask.ts b/projects/demo/src/pages/recipes/phone/examples/2-kz-phone/mask.ts index 1833ee2b0..6fee3a1a6 100644 --- a/projects/demo/src/pages/recipes/phone/examples/2-kz-phone/mask.ts +++ b/projects/demo/src/pages/recipes/phone/examples/2-kz-phone/mask.ts @@ -47,7 +47,7 @@ export default { // Paste "89123456789" => "+7 (912) 345-67-89" function createCompletePhoneInsertionPreprocessor(): MaskitoPreprocessor { const trimPrefix = (value: string): string => value.replace(/^(\+?7?\s?8?)\s?/, ''); - const countDigits = (value: string): number => value.replace(/\D/g, '').length; + const countDigits = (value: string): number => value.replaceAll(/\D/g, '').length; return ({elementState, data}) => { const {value, selection} = elementState; diff --git a/projects/demo/src/pages/recipes/postfix/examples/1-pattern-mask/mask.ts b/projects/demo/src/pages/recipes/postfix/examples/1-pattern-mask/mask.ts index 667c04cbf..5a7a17c22 100644 --- a/projects/demo/src/pages/recipes/postfix/examples/1-pattern-mask/mask.ts +++ b/projects/demo/src/pages/recipes/postfix/examples/1-pattern-mask/mask.ts @@ -2,7 +2,7 @@ import {MaskitoOptions} from '@maskito/core'; export default { mask: ({value}) => { - const digitsMask = Array.from(value.replace(/%/g, '')).map(() => /\d/); + const digitsMask = Array.from(value.replaceAll('%', '')).map(() => /\d/); if (!digitsMask.length) { return [/\d/]; diff --git a/projects/demo/src/pages/recipes/prefix/examples/1-pattern-mask/mask.ts b/projects/demo/src/pages/recipes/prefix/examples/1-pattern-mask/mask.ts index de83e5273..699ae5fd6 100644 --- a/projects/demo/src/pages/recipes/prefix/examples/1-pattern-mask/mask.ts +++ b/projects/demo/src/pages/recipes/prefix/examples/1-pattern-mask/mask.ts @@ -2,7 +2,7 @@ import {MaskitoOptions} from '@maskito/core'; export default { mask: ({value}) => { - const digitsCount = value.replace(/\D/g, '').length; + const digitsCount = value.replaceAll(/\D/g, '').length; return ['$', ...new Array(digitsCount || 1).fill(/\d/)]; }, diff --git a/projects/demo/src/pages/stackblitz/components/stackblitz-starter/stackblitz-starter.component.ts b/projects/demo/src/pages/stackblitz/components/stackblitz-starter/stackblitz-starter.component.ts index a670e40df..e9ee3634b 100644 --- a/projects/demo/src/pages/stackblitz/components/stackblitz-starter/stackblitz-starter.component.ts +++ b/projects/demo/src/pages/stackblitz/components/stackblitz-starter/stackblitz-starter.component.ts @@ -2,7 +2,7 @@ import {isPlatformBrowser} from '@angular/common'; import { ChangeDetectionStrategy, Component, - Inject, + inject, OnInit, PLATFORM_ID, } from '@angular/core'; @@ -28,10 +28,8 @@ import {StackblitzService} from '../../stackblitz.service'; providers: [StackblitzService], }) export class StackblitzStarterComponent implements OnInit { - constructor( - @Inject(PLATFORM_ID) private readonly platformId: Record, - private readonly stackblitz: StackblitzService, - ) {} + private readonly platformId = inject(PLATFORM_ID); + private readonly stackblitz = inject(StackblitzService); async ngOnInit(): Promise { if (isPlatformBrowser(this.platformId)) { diff --git a/projects/kit/src/lib/masks/number/processors/repeated-decimal-separator-preprocessor.ts b/projects/kit/src/lib/masks/number/processors/repeated-decimal-separator-preprocessor.ts index e03d9b8f1..0acf327f0 100644 --- a/projects/kit/src/lib/masks/number/processors/repeated-decimal-separator-preprocessor.ts +++ b/projects/kit/src/lib/masks/number/processors/repeated-decimal-separator-preprocessor.ts @@ -28,7 +28,10 @@ export function createRepeatedDecimalSeparatorPreprocessor({ !cleanValue.includes(decimalSeparator) || value.slice(from, to + 1).includes(decimalSeparator) ? data - : data.replace(new RegExp(escapeRegExp(decimalSeparator), 'gi'), ''), + : data.replaceAll( + new RegExp(escapeRegExp(decimalSeparator), 'gi'), + '', + ), }; }; } diff --git a/projects/kit/src/lib/masks/number/utils/generate-mask-expression.ts b/projects/kit/src/lib/masks/number/utils/generate-mask-expression.ts index fb2f1373b..b89348765 100644 --- a/projects/kit/src/lib/masks/number/utils/generate-mask-expression.ts +++ b/projects/kit/src/lib/masks/number/utils/generate-mask-expression.ts @@ -28,7 +28,7 @@ export function generateMaskExpression({ ? `[${CHAR_MINUS}${pseudoMinuses.map(x => `\\${x}`).join('')}]?` : ''; const integerPart = thousandSeparator - ? `[${digit}${escapeRegExp(thousandSeparator).replace(/\s/g, '\\s')}]*` + ? `[${digit}${escapeRegExp(thousandSeparator).replaceAll(/\s/g, '\\s')}]*` : `[${digit}]*`; const decimalPart = precision > 0 diff --git a/projects/kit/src/lib/masks/number/utils/parse-number.ts b/projects/kit/src/lib/masks/number/utils/parse-number.ts index a211cd7ac..aa8682be6 100644 --- a/projects/kit/src/lib/masks/number/utils/parse-number.ts +++ b/projects/kit/src/lib/masks/number/utils/parse-number.ts @@ -9,9 +9,9 @@ export function maskitoParseNumber(maskedNumber: string, decimalSeparator = '.') const unmaskedNumber = maskedNumber // drop all decimal separators not followed by a digit - .replace(new RegExp(`${escapedDecimalSeparator}(?!\\d)`, 'g'), '') + .replaceAll(new RegExp(`${escapedDecimalSeparator}(?!\\d)`, 'g'), '') // drop all non-digit characters except decimal separator - .replace(new RegExp(`[^\\d${escapedDecimalSeparator}]`, 'g'), '') + .replaceAll(new RegExp(`[^\\d${escapedDecimalSeparator}]`, 'g'), '') .replace(decimalSeparator, '.'); return unmaskedNumber diff --git a/projects/kit/src/lib/processors/valid-date-preprocessor.ts b/projects/kit/src/lib/processors/valid-date-preprocessor.ts index c9badf631..b876127d4 100644 --- a/projects/kit/src/lib/processors/valid-date-preprocessor.ts +++ b/projects/kit/src/lib/processors/valid-date-preprocessor.ts @@ -21,7 +21,7 @@ export function createValidDatePreprocessor({ }; } - const newCharacters = data.replace( + const newCharacters = data.replaceAll( new RegExp( `[^\\d${escapeRegExp(dateSegmentsSeparator)}${rangeSeparator}]`, 'g', diff --git a/projects/kit/src/lib/processors/zero-placeholders-preprocessor.ts b/projects/kit/src/lib/processors/zero-placeholders-preprocessor.ts index d9de223a6..bd70aeabd 100644 --- a/projects/kit/src/lib/processors/zero-placeholders-preprocessor.ts +++ b/projects/kit/src/lib/processors/zero-placeholders-preprocessor.ts @@ -10,7 +10,7 @@ export function createZeroPlaceholdersPreprocessor(): MaskitoPreprocessor { const [from, to] = selection; - const zeroes = value.slice(from, to).replace(/\d/g, '0'); + const zeroes = value.slice(from, to).replaceAll(/\d/g, '0'); const newValue = value.slice(0, from) + zeroes + value.slice(to); if (actionType === 'validation' || (actionType === 'insert' && from === to)) { diff --git a/projects/kit/src/lib/utils/count-digits.ts b/projects/kit/src/lib/utils/count-digits.ts index 98b31b21c..5fc9b0aea 100644 --- a/projects/kit/src/lib/utils/count-digits.ts +++ b/projects/kit/src/lib/utils/count-digits.ts @@ -1,3 +1,3 @@ export function countDigits(str: string): number { - return str.replace(/\W/g, '').length; + return str.replaceAll(/\W/g, '').length; } diff --git a/projects/kit/src/lib/utils/date/parse-date-string.ts b/projects/kit/src/lib/utils/date/parse-date-string.ts index 30c7cd658..1cf451e6d 100644 --- a/projects/kit/src/lib/utils/date/parse-date-string.ts +++ b/projects/kit/src/lib/utils/date/parse-date-string.ts @@ -4,8 +4,8 @@ export function parseDateString( dateString: string, fullMode: string, ): Partial { - const cleanMode = fullMode.replace(/[^dmy]/g, ''); - const onlyDigitsDate = dateString.replace(/\D+/g, ''); + const cleanMode = fullMode.replaceAll(/[^dmy]/g, ''); + const onlyDigitsDate = dateString.replaceAll(/\D+/g, ''); const dateSegments: MaskitoDateSegments = { day: onlyDigitsDate.slice(cleanMode.indexOf('d'), cleanMode.lastIndexOf('d') + 1), diff --git a/projects/kit/src/lib/utils/date/to-date-string.ts b/projects/kit/src/lib/utils/date/to-date-string.ts index d1f35c7f3..07ece2339 100644 --- a/projects/kit/src/lib/utils/date/to-date-string.ts +++ b/projects/kit/src/lib/utils/date/to-date-string.ts @@ -18,13 +18,13 @@ export function toDateString( const fullMode = dateMode + (timeMode ? DATE_TIME_SEPARATOR + timeMode : ''); return fullMode - .replace(/d+/g, day ?? '') - .replace(/m+/g, month ?? '') - .replace(/y+/g, safeYear ?? '') - .replace(/H+/g, hours ?? '') - .replace(/MSS/g, milliseconds ?? '') - .replace(/M+/g, minutes ?? '') - .replace(/S+/g, seconds ?? '') - .replace(/^\D+/g, '') - .replace(/\D+$/g, ''); + .replaceAll(/d+/g, day ?? '') + .replaceAll(/m+/g, month ?? '') + .replaceAll(/y+/g, safeYear ?? '') + .replaceAll(/H+/g, hours ?? '') + .replaceAll('MSS', milliseconds ?? '') + .replaceAll(/M+/g, minutes ?? '') + .replaceAll(/S+/g, seconds ?? '') + .replaceAll(/^\D+/g, '') + .replaceAll(/\D+$/g, ''); } diff --git a/projects/kit/src/lib/utils/escape-reg-exp.ts b/projects/kit/src/lib/utils/escape-reg-exp.ts index 50f5fe336..04d92450e 100644 --- a/projects/kit/src/lib/utils/escape-reg-exp.ts +++ b/projects/kit/src/lib/utils/escape-reg-exp.ts @@ -7,5 +7,5 @@ const reRegExpChar = /[\\^$.*+?()[\]{}|]/g; const reHasRegExpChar = new RegExp(reRegExpChar.source); export function escapeRegExp(str: string): string { - return str && reHasRegExpChar.test(str) ? str.replace(reRegExpChar, '\\$&') : str; + return str && reHasRegExpChar.test(str) ? str.replaceAll(reRegExpChar, '\\$&') : str; } diff --git a/projects/kit/src/lib/utils/time/parse-time-string.ts b/projects/kit/src/lib/utils/time/parse-time-string.ts index ae1c597f1..334aea37c 100644 --- a/projects/kit/src/lib/utils/time/parse-time-string.ts +++ b/projects/kit/src/lib/utils/time/parse-time-string.ts @@ -4,7 +4,7 @@ import {MaskitoTimeSegments} from '../../types'; * @param timeString can be with/without fixed characters */ export function parseTimeString(timeString: string): Partial { - const onlyDigits = timeString.replace(/\D+/g, ''); + const onlyDigits = timeString.replaceAll(/\D+/g, ''); const timeSegments = { hours: onlyDigits.slice(0, 2), diff --git a/projects/kit/src/lib/utils/to-half-width-colon.ts b/projects/kit/src/lib/utils/to-half-width-colon.ts index d53e1077f..3b8d43a07 100644 --- a/projects/kit/src/lib/utils/to-half-width-colon.ts +++ b/projects/kit/src/lib/utils/to-half-width-colon.ts @@ -6,5 +6,5 @@ import {CHAR_COLON, CHAR_JP_COLON} from '../constants'; * @returns processed half width colon */ export function toHalfWidthColon(fullWidthColon: string): string { - return fullWidthColon.replace(new RegExp(CHAR_JP_COLON, 'g'), CHAR_COLON); + return fullWidthColon.replaceAll(new RegExp(CHAR_JP_COLON, 'g'), CHAR_COLON); } diff --git a/projects/kit/src/lib/utils/to-half-width-number.ts b/projects/kit/src/lib/utils/to-half-width-number.ts index 855702b13..4affb87af 100644 --- a/projects/kit/src/lib/utils/to-half-width-number.ts +++ b/projects/kit/src/lib/utils/to-half-width-number.ts @@ -4,7 +4,7 @@ * @returns processed half width number */ export function toHalfWidthNumber(fullWidthNumber: string): string { - return fullWidthNumber.replace(/[０-９]/g, s => + return fullWidthNumber.replaceAll(/[０-９]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xfee0), ); } diff --git a/projects/phone/src/lib/masks/phone/phone-mask-non-strict.ts b/projects/phone/src/lib/masks/phone/phone-mask-non-strict.ts index 10e67b661..b39b1308e 100644 --- a/projects/phone/src/lib/masks/phone/phone-mask-non-strict.ts +++ b/projects/phone/src/lib/masks/phone/phone-mask-non-strict.ts @@ -25,7 +25,7 @@ export function maskitoPhoneNonStrictOptionsGenerator({ ...MASKITO_DEFAULT_OPTIONS, mask: ({value}) => { const newTemplate = getPhoneTemplate(formatter, value, separator); - const newPhoneLength = value.replace(/\D/g, '').length; + const newPhoneLength = value.replaceAll(/\D/g, '').length; currentTemplate = selectTemplate({ currentTemplate, diff --git a/projects/phone/src/lib/masks/phone/phone-mask-strict.ts b/projects/phone/src/lib/masks/phone/phone-mask-strict.ts index c01b7bcb0..113a81a99 100644 --- a/projects/phone/src/lib/masks/phone/phone-mask-strict.ts +++ b/projects/phone/src/lib/masks/phone/phone-mask-strict.ts @@ -39,7 +39,7 @@ export function maskitoPhoneStrictOptionsGenerator({ ...MASKITO_DEFAULT_OPTIONS, mask: ({value}) => { const newTemplate = getPhoneTemplate(formatter, value, separator); - const newPhoneLength = value.replace(/\D/g, '').length; + const newPhoneLength = value.replaceAll(/\D/g, '').length; currentTemplate = selectTemplate({ currentTemplate, diff --git a/projects/phone/src/lib/masks/phone/utils/get-phone-template.ts b/projects/phone/src/lib/masks/phone/utils/get-phone-template.ts index da6faa0ba..70ffa065a 100644 --- a/projects/phone/src/lib/masks/phone/utils/get-phone-template.ts +++ b/projects/phone/src/lib/masks/phone/utils/get-phone-template.ts @@ -5,7 +5,7 @@ export function getPhoneTemplate( value: string, separator: string, ): string { - formatter.input(value.replace(/[^\d+]/g, '')); + formatter.input(value.replaceAll(/[^\d+]/g, '')); const initialTemplate = formatter.getTemplate(); const split = initialTemplate.split(' '); diff --git a/scripts/generate-demo-routes-file.ts b/scripts/generate-demo-routes-file.ts index 7add4f893..d9d4f9eb4 100644 --- a/scripts/generate-demo-routes-file.ts +++ b/scripts/generate-demo-routes-file.ts @@ -29,7 +29,7 @@ const EXCEPTIONS = ['/', `${DemoPath.Angular}/Setup`, `${DemoPath.PhonePackage}/ const routes = demoPathEnumContent .match(/['"`](.*)['"`]/g) - ?.map(route => route.replace(/['"`]/g, '')) || []; + ?.map(route => route.replaceAll(/['"`]/g, '')) || []; routes.forEach(route => { if (route.startsWith('kit')) {