fix(ref:no-ref): clean up deps

igor.nepipenko · igor.nepipenko · commit 2f3b4f933771 · 2026-01-29T10:44:14.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# 21.0.1(2026-01-29)
+
+### fix
+
+- Fix ([#1590](https://github.com/JsDaddy/ngx-mask/issues/1590))
+- Fix ([#1591](https://github.com/JsDaddy/ngx-mask/issues/1591))
+
 # 21.0.0(2026-01-28)
 
 ### fix
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "21.0.0",
+    "version": "21.0.1",
     "description": "Awesome ngx mask",
     "license": "MIT",
     "engines": {
@@ -60,25 +60,15 @@
         "url": "https://github.com/JsDaddy/ngx-mask.git"
     },
     "dependencies": {
-        "@angular/animations": "21.1.1",
-        "@angular/common": "21.1.1",
-        "@angular/compiler": "21.1.1",
-        "@angular/core": "21.1.1",
-        "@angular/forms": "21.1.1",
-        "@angular/platform-browser": "21.1.1",
-        "@angular/platform-browser-dynamic": "21.1.1",
-        "@angular/router": "21.1.1",
-        "@types/jest": "30.0.0",
-        "@types/mocha": "10.0.10",
-        "cypress": "15.9.0",
+        "@angular/animations": "21.1.2",
+        "@angular/common": "21.1.2",
+        "@angular/compiler": "21.1.2",
+        "@angular/core": "21.1.2",
+        "@angular/forms": "21.1.2",
+        "@angular/platform-browser": "21.1.2",
+        "@angular/router": "21.1.2",
         "highlight.js": "11.11.1",
-        "ngx-highlightjs": "14.0.1",
-        "ngxtension": "7.0.2",
-        "rxjs": "7.8.2",
-        "semantic-release": "25.0.2",
-        "semantic-release-export-data": "1.2.0",
-        "snyk": "1.1302.1",
-        "@tailwindcss/postcss": "4.1.18"
+        "ngx-highlightjs": "14.0.1"
     },
     "devDependencies": {
         "@angular-devkit/build-angular": "21.1.2",
@@ -88,33 +78,38 @@
         "@angular-eslint/schematics": "21.1.0",
         "@angular-eslint/template-parser": "21.1.0",
         "@angular/cli": "21.1.2",
-        "@angular/compiler-cli": "21.1.1",
-        "@angular/language-service": "21.1.1",
+        "@angular/compiler-cli": "21.1.2",
+        "@angular/language-service": "21.1.2",
+        "@angular/platform-browser-dynamic": "21.1.2",
         "@commitlint/cli": "20.3.1",
         "@commitlint/config-conventional": "20.3.1",
-        "@jscutlery/cypress-angular": "0.9.22",
+        "@tailwindcss/postcss": "4.1.18",
         "@types/highlight.js": "10.1.0",
-        "@types/node": "25.0.10",
+        "@types/jest": "30.0.0",
+        "@types/node": "25.1.0",
         "@typescript-eslint/eslint-plugin": "8.54.0",
         "@typescript-eslint/parser": "8.54.0",
-        "@vitest/browser-playwright": "^4.0.18",
+        "@vitest/browser-playwright": "4.0.18",
         "@web/test-runner": "0.20.2",
         "angular-cli-ghpages": "3.0.2",
         "angular-eslint": "21.1.0",
         "angular-http-server": "1.12.0",
         "bun-types": "1.3.7",
+        "cypress": "15.9.0",
         "eslint": "9.39.2",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-json": "4.0.1",
         "eslint-plugin-prettier": "5.5.5",
-        "jsdom": "^27.4.0",
+        "jsdom": "27.4.0",
         "lint-staged": "16.2.7",
         "markdownlint-cli": "0.47.0",
         "ng-packagr": "21.1.0",
         "npm-check-updates": "19.3.2",
         "postcss": "8.5.6",
         "prettier": "3.8.1",
-        "puppeteer": "24.36.1",
+        "semantic-release": "25.0.2",
+        "semantic-release-export-data": "1.2.0",
+        "snyk": "1.1302.1",
         "stylelint": "17.0.0",
         "stylelint-config-prettier": "9.0.5",
         "stylelint-config-recommended-scss": "17.0.0",
@@ -123,7 +118,7 @@
         "type-coverage": "2.29.7",
         "typescript": "5.9.3",
         "typescript-eslint": "8.54.0",
-        "vitest": "^4.0.18"
+        "vitest": "4.0.18"
     },
     "typeCoverage": {
         "atLeast": 91,
diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "21.0.0",
+    "version": "21.0.1",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",
@@ -28,9 +28,9 @@
         "url": "https://github.com/JsDaddy/ngx-mask/issues"
     },
     "peerDependencies": {
-        "@angular/common": ">=14.0.0",
-        "@angular/core": ">=14.0.0",
-        "@angular/forms": ">=14.0.0"
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/forms": "^21.0.0"
     },
     "dependencies": {}
 }
diff --git a/projects/ngx-mask-lib/src/test/emit-events.cy-spec.ts b/projects/ngx-mask-lib/src/test/emit-events.cy-spec.ts
@@ -10,10 +10,10 @@ describe('Directive: Mask (emit-events)', () => {
         });
 
         cy.get('#masked').type('1dd').type('dd');
-        cy.get('#pre').should('have.text', '2');
+        cy.get('#pre').should('have.text', '1');
 
         cy.get('#masked').type('121212').type('dd');
-        cy.get('#pre').should('have.text', '7');
+        cy.get('#pre').should('have.text', '6');
     });
 
     it('should emit event only when mask is correct with hiddenINput', () => {
@@ -25,10 +25,10 @@ describe('Directive: Mask (emit-events)', () => {
         });
 
         cy.get('#masked').type('1dd').type('dd');
-        cy.get('#pre').should('have.text', '2');
+        cy.get('#pre').should('have.text', '1');
 
         cy.get('#masked').type('121212').type('dd');
-        cy.get('#pre').should('have.text', '7');
+        cy.get('#pre').should('have.text', '6');
     });
 
     it('should add trailing zero when mask="separator.1" and leadZero="true"', () => {
@@ -63,7 +63,7 @@ describe('Directive: Mask (emit-events)', () => {
         });
 
         cy.get('#masked').type('10').blur().should('have.value', '10.00 $');
-        cy.get('#pre').should('have.text', '3');
+        cy.get('#pre').should('have.text', '2');
     });
 
     it('should emit event only when mask is correct with suffix separator.3', () => {
@@ -76,7 +76,7 @@ describe('Directive: Mask (emit-events)', () => {
         });
 
         cy.get('#masked').type('10.0').blur().should('have.value', '10.000 $');
-        cy.get('#pre').should('have.text', '5');
+        cy.get('#pre').should('have.text', '4');
     });
 
     it('should emit event only when mask is correct with separator2', () => {
@@ -88,7 +88,7 @@ describe('Directive: Mask (emit-events)', () => {
         });
 
         cy.get('#masked').type('10').blur().should('have.value', '10.00');
-        cy.get('#pre').should('have.text', '3');
+        cy.get('#pre').should('have.text', '2');
     });
 
     it('should emit event only when mask is correct with separator.3', () => {
@@ -100,7 +100,7 @@ describe('Directive: Mask (emit-events)', () => {
         });
 
         cy.get('#masked').type('10').blur().should('have.value', '10.000');
-        cy.get('#pre').should('have.text', '3');
+        cy.get('#pre').should('have.text', '2');
     });
 
     it('should emit event only when mask is correct with SS000', () => {
@@ -111,7 +111,7 @@ describe('Directive: Mask (emit-events)', () => {
         });
 
         cy.get('#masked').type('SS11111DDDD11').blur().should('have.value', 'SS111');
-        cy.get('#pre').should('have.text', '6');
+        cy.get('#pre').should('have.text', '5');
     });
 
     it("inputTransformFn should not break if it's null", () => {
@@ -123,7 +123,7 @@ describe('Directive: Mask (emit-events)', () => {
         });
 
         cy.get('#masked').type('123456789').blur().should('have.value', '12345-6789');
-        cy.get('#pre').should('have.text', '10');
+        cy.get('#pre').should('have.text', '9');
     });
 
     it('inputTransformFn should not change input form status', () => {
@@ -163,6 +163,6 @@ describe('Directive: Mask (emit-events)', () => {
             });
 
         cy.get('#pristine').should('have.text', 'true');
-        cy.get('#pre').should('have.text', '2');
+        cy.get('#pre').should('have.text', '1');
     });
 });
diff --git a/projects/ngx-mask-lib/src/test/utils/cypress-test-component.component.ts b/projects/ngx-mask-lib/src/test/utils/cypress-test-component.component.ts
@@ -1,11 +1,10 @@
-import { Component, inject, input } from '@angular/core';
+import type { OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, input, signal } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { scan, startWith } from 'rxjs';
 import type { NgxMaskConfig } from 'ngx-mask';
 import { provideNgxMask } from 'ngx-mask';
 import { NgxMaskDirective } from 'ngx-mask';
 import { NGX_MASK_CONFIG } from 'ngx-mask';
-import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jsdaddy-open-source-test',
@@ -36,15 +35,15 @@ import { toSignal } from '@angular/core/rxjs-interop';
             [inputTransformFn]="inputTransformFn()"
             [outputTransformFn]="outputTransformFn()" />
 
-        <pre id="pre">{{ counter$() }}</pre>
+        <pre id="pre">{{ counter() }}</pre>
         <pre id="pre1">{{ form.value }}</pre>
         <pre id="pristine">{{ form.pristine }}</pre>
         <div>
             {{ leadZeroDateTime() }}
         </div>
     `,
 })
-export class CypressTestMaskComponent {
+export class CypressTestMaskComponent implements OnInit, OnDestroy {
     protected _config = inject<NgxMaskConfig>(NGX_MASK_CONFIG);
     public mask = input('');
 
@@ -103,11 +102,17 @@ export class CypressTestMaskComponent {
 
     public form: FormControl = new FormControl('');
 
-    public readonly counter$ = toSignal(
-        this.form.valueChanges.pipe(
-            startWith(0),
+    public readonly counter = signal(0);
 
-            scan((acc) => acc + 1, 0)
-        )
-    );
+    private subscription: { unsubscribe: () => void } | null = null;
+
+    public ngOnInit(): void {
+        this.subscription = this.form.valueChanges.subscribe(() => {
+            this.counter.update((c) => c + 1);
+        });
+    }
+
+    public ngOnDestroy(): void {
+        this.subscription?.unsubscribe();
+    }
 }
diff --git a/projects/ngx-mask-lib/src/test/utils/cypress-test-trigger-on-mask-change.component.ts b/projects/ngx-mask-lib/src/test/utils/cypress-test-trigger-on-mask-change.component.ts
@@ -1,7 +1,6 @@
 import type { OnDestroy, OnInit } from '@angular/core';
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Subject, takeUntil } from 'rxjs';
 import { NgxMaskDirective } from 'ngx-mask';
 
 @Component({
@@ -22,35 +21,34 @@ import { NgxMaskDirective } from 'ngx-mask';
             <input
                 id="masked"
                 [formControl]="form"
-                [mask]="mask"
+                [mask]="mask()"
                 [hiddenInput]="false"
                 [triggerOnMaskChange]="true"
                 prefix="" />
         </div>
         <div>
-            <span>Mask:&nbsp;</span><code class="mask">{{ mask }}</code>
+            <span>Mask:&nbsp;</span><code class="mask">{{ mask() }}</code>
             <br />
             <span>Form Value:&nbsp;</span><code class="formvalue">{{ form.value }}</code>
         </div>
     `,
 })
 export class CypressTestTriggerOnMaskChangeComponent implements OnInit, OnDestroy {
-    public mask = '';
+    public mask = signal('');
 
     public form: FormControl = new FormControl('');
 
     public radio: FormControl = new FormControl('de');
 
-    private destroyed = new Subject<void>();
+    private subscription: { unsubscribe: () => void } | null = null;
 
     public ngOnInit(): void {
-        this.radio.valueChanges.pipe(takeUntil(this.destroyed)).subscribe((value) => {
-            this.mask = value === 'de' ? '' : '00 000 00 00';
+        this.subscription = this.radio.valueChanges.subscribe((value) => {
+            this.mask.set(value === 'de' ? '' : '00 000 00 00');
         });
     }
 
     public ngOnDestroy(): void {
-        this.destroyed.next();
-        this.destroyed.complete();
+        this.subscription?.unsubscribe();
     }
 }
diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
@@ -21,7 +21,6 @@ import { CardContentComponent } from '../shared/card-content/card-content.compon
 import { ScrollService } from '@open-source/scroll/scroll.service';
 import { AccordionService } from '@open-source/accordion/accordion.service';
 import { OpenSourcePath } from '@open-source/path/open-source.path';
-import { toSignal } from '@angular/core/rxjs-interop';
 import type {
     ComDoc,
     MaskOptions,
@@ -71,7 +70,7 @@ export class OptionsComponent {
     private readonly accordionService = inject(AccordionService);
     private readonly injector = inject(Injector);
 
-    public readonly activeCardId = toSignal(this.scrollService.activeCard$);
+    public readonly activeCardId = this.scrollService.activeCard;
 
     public constructor() {
         effect(() => {
diff --git a/src/libraries b/src/libraries
@@ -1 +1 @@
-Subproject commit b9250e2e19381e73ec8ad207a3302de9339ae4cf
+Subproject commit e005a6c481c742011f17fbc9ed752e2b3556d447
