('refMask');
}
describe('Directive: Mask export As', () => {
@@ -24,8 +23,7 @@ describe('Directive: Mask export As', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
@@ -34,9 +32,9 @@ describe('Directive: Mask export As', () => {
});
it('should export directive instance with exportAs api by name equal mask', () => {
- expect(component.refMask).toBeInstanceOf(NgxMaskDirective);
+ expect(component.refMask()).toBeInstanceOf(NgxMaskDirective);
});
it('should export directive instance with exportAs api by name equal ngxMask', () => {
- expect(component.refNgxMask).toBeInstanceOf(NgxMaskDirective);
+ expect(component.refNgxMask()).toBeInstanceOf(NgxMaskDirective);
});
});
diff --git a/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts b/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts
index a8e5a35e..56ae77b2 100644
--- a/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts
+++ b/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts
@@ -13,8 +13,7 @@ describe('Directive: Mask', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/keep-character-position.cy-spec.ts b/projects/ngx-mask-lib/src/test/keep-character-position.cy-spec.ts
index bfba7384..82ca93ba 100644
--- a/projects/ngx-mask-lib/src/test/keep-character-position.cy-spec.ts
+++ b/projects/ngx-mask-lib/src/test/keep-character-position.cy-spec.ts
@@ -1,15 +1,14 @@
import { CypressTestMaskComponent } from './utils/cypress-test-component.component';
-import { CypressTestMaskModule } from './utils/cypress-test.module';
+import { signal } from '@angular/core';
describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: (000) 000-0000', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '(000) 000-0000',
- keepCharacterPositions: true,
- showMaskTyped: true,
+ mask: signal('(000) 000-0000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -22,11 +21,10 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: S0S S0S', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'S0S AAA',
- keepCharacterPositions: true,
- showMaskTyped: true,
+ mask: signal('S0S AAA'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -42,11 +40,10 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: 000-000.00', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '000-000.00',
- keepCharacterPositions: true,
- showMaskTyped: true,
+ mask: signal('000-000.00'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -60,11 +57,10 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: 0000 0000 0000 0000', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '0000 0000 0000 0000',
- keepCharacterPositions: true,
- showMaskTyped: true,
+ mask: signal('0000 0000 0000 0000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -81,11 +77,10 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: 00/00/0000', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '00/00/0000',
- keepCharacterPositions: true,
- showMaskTyped: true,
+ mask: signal('00/00/0000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -99,12 +94,11 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: (000)000-0000, prefix +38', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '(000)000-0000',
- keepCharacterPositions: true,
- showMaskTyped: true,
- prefix: '+38 ',
+ mask: signal('(000)000-0000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
+ prefix: signal('+38 '),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -118,12 +112,11 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: 0 000, prefix $', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '0 000',
- keepCharacterPositions: true,
- showMaskTyped: true,
- prefix: '$ ',
+ mask: signal('0 000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
+ prefix: signal('$ '),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -137,12 +130,11 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: 0000, prefix foo/', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '0000',
- keepCharacterPositions: true,
- showMaskTyped: true,
- prefix: 'foo/',
+ mask: signal('0000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
+ prefix: signal('foo/'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -155,11 +147,10 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: AAA-AAA-AAA', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'AAA-AAA-AAA',
- keepCharacterPositions: true,
- showMaskTyped: true,
+ mask: signal('AAA-AAA-AAA'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -173,12 +164,11 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: 0 000 suffix $', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '0 000',
- keepCharacterPositions: true,
- showMaskTyped: true,
- suffix: ' $',
+ mask: signal('0 000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
+ suffix: signal(' $'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -192,12 +182,11 @@ describe('Directive: Mask (Delete)', () => {
it('should replace character to _ mask: 00/00/000 suffix test', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '00/00/000',
- keepCharacterPositions: true,
- showMaskTyped: true,
- suffix: ' test',
+ mask: signal('00/00/000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
+ suffix: signal(' test'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -211,11 +200,10 @@ describe('Directive: Mask (Delete)', () => {
it('should delete character from del', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '000-000-000',
- keepCharacterPositions: true,
- showMaskTyped: true,
+ mask: signal('000-000-000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -236,11 +224,10 @@ describe('Directive: Mask (Delete)', () => {
it('should delete character from del', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '0000 0000 0000 0000',
- keepCharacterPositions: true,
- showMaskTyped: true,
+ mask: signal('0000 0000 0000 0000'),
+ keepCharacterPositions: signal(true),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
diff --git a/projects/ngx-mask-lib/src/test/percent.spec.ts b/projects/ngx-mask-lib/src/test/percent.spec.ts
index 46a8a688..4075b8b7 100644
--- a/projects/ngx-mask-lib/src/test/percent.spec.ts
+++ b/projects/ngx-mask-lib/src/test/percent.spec.ts
@@ -13,8 +13,7 @@ describe('Directive: Mask (Percent)', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts b/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts
index 92f19ef3..ef95b8ab 100644
--- a/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts
+++ b/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts
@@ -13,8 +13,7 @@ describe('Directive: Mask (Placeholder character)', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts b/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts
index fd20bf1d..318468a1 100644
--- a/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts
+++ b/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts
@@ -13,8 +13,7 @@ describe('Directive: Mask (Repeat)', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts
index fdedcdf8..295659a5 100644
--- a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts
+++ b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts
@@ -1,11 +1,12 @@
import type { ComponentFixture } from '@angular/core/testing';
-import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { TestMaskComponent } from './utils/test-component.component';
import { equal, typeTest } from './utils/test-functions.component';
-import { provideNgxMask } from '../lib/ngx-mask.providers';
-import { NgxMaskDirective } from '../lib/ngx-mask.directive';
+import { provideNgxMask } from 'ngx-mask';
+import { NgxMaskDirective } from 'ngx-mask';
import type { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
@@ -15,8 +16,7 @@ describe('Directive: Mask (Secure)', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
@@ -70,7 +70,9 @@ describe('Directive: Mask (Secure)', () => {
component.mask = 'XXX/X0/0000';
component.hiddenInput = true;
typeTest('54321', fixture);
- component.form.reset('98765');
+ component.form.reset();
+
+ component.form.setValue('98765');
fixture.whenStable().then(() => {
expect(fixture.nativeElement.querySelector('input').value).toBe('***/*5');
});
@@ -88,6 +90,8 @@ describe('Directive: Mask (Secure)', () => {
component.mask = 'XXX/X0/0000';
component.hiddenInput = true;
typeTest('54321', fixture);
+ component.form.reset();
+
component.form.setValue('1234567');
fixture.whenStable().then(() => {
expect(fixture.nativeElement.querySelector('input').value).toBe('***/*5/67');
diff --git a/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts b/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts
index 75391381..527fc9bb 100644
--- a/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts
+++ b/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts
@@ -16,8 +16,7 @@ describe('Separator: Mask with FR locale', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask(), { provide: LOCALE_ID, useValue: 'fr' }],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/separator.cy-spec.ts b/projects/ngx-mask-lib/src/test/separator.cy-spec.ts
index d7176ed8..14eba918 100644
--- a/projects/ngx-mask-lib/src/test/separator.cy-spec.ts
+++ b/projects/ngx-mask-lib/src/test/separator.cy-spec.ts
@@ -1,15 +1,14 @@
-import { CypressTestMaskModule } from './utils/cypress-test.module';
import { CypressTestMaskComponent } from './utils/cypress-test-component.component';
+import { signal } from '@angular/core';
describe('Test Date Hh:m0', () => {
it('Mask separator.2 check cursor with value 100.0', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- decimalMarker: '.',
- thousandSeparator: ',',
+ mask: signal('separator.2'),
+ decimalMarker: signal('.'),
+ thousandSeparator: signal(','),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
.type('1000')
@@ -22,11 +21,10 @@ describe('Test Date Hh:m0', () => {
it('Mask separator.2 check cursor with value 1.00', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- decimalMarker: '.',
- thousandSeparator: ',',
+ mask: signal('separator.2'),
+ decimalMarker: signal('.'),
+ thousandSeparator: signal(','),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
.type('1000')
@@ -39,11 +37,10 @@ describe('Test Date Hh:m0', () => {
it('Mask separator.2 check cursor with value 123456789.20', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- decimalMarker: '.',
- thousandSeparator: ',',
+ mask: signal('separator.2'),
+ decimalMarker: signal('.'),
+ thousandSeparator: signal(','),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
.type('123456789.20')
@@ -56,11 +53,10 @@ describe('Test Date Hh:m0', () => {
it('Mask separator.2 check cursor with value 100.0', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- decimalMarker: ',',
- thousandSeparator: '.',
+ mask: signal('separator.2'),
+ decimalMarker: signal(','),
+ thousandSeparator: signal('.'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
.type('1000')
@@ -73,11 +69,10 @@ describe('Test Date Hh:m0', () => {
it('Mask separator.2 check cursor with value 1.00', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- decimalMarker: ',',
- thousandSeparator: '.',
+ mask: signal('separator.2'),
+ decimalMarker: signal(','),
+ thousandSeparator: signal('.'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
.type('1000')
@@ -90,11 +85,10 @@ describe('Test Date Hh:m0', () => {
it('Mask separator.2 check cursor with value 123456789.20', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- decimalMarker: ',',
- thousandSeparator: '.',
+ mask: signal('separator.2'),
+ decimalMarker: signal(','),
+ thousandSeparator: signal('.'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
.type('123456789,20')
@@ -107,10 +101,9 @@ describe('Test Date Hh:m0', () => {
it('when decimalMarker doenst set should have right position cursor thousandSeparator = .', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- thousandSeparator: '.',
+ mask: signal('separator.2'),
+ thousandSeparator: signal('.'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -125,10 +118,9 @@ describe('Test Date Hh:m0', () => {
it('when decimalMarker doenst set should have right position cursor thousandSeparator = ,', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- thousandSeparator: ',',
+ mask: signal('separator.2'),
+ thousandSeparator: signal(','),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -143,10 +135,9 @@ describe('Test Date Hh:m0', () => {
it('should place cursor after backspace with separatorLimit = 10 in correct position', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- separatorLimit: '10',
+ mask: signal('separator.2'),
+ separatorLimit: signal('10'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -161,10 +152,9 @@ describe('Test Date Hh:m0', () => {
it('should place cursor after backspace with separatorLimit = 100 in correct position', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- separatorLimit: '100',
+ mask: signal('separator.2'),
+ separatorLimit: signal('100'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -179,11 +169,10 @@ describe('Test Date Hh:m0', () => {
it('should place cursor after backspace with separatorLimit = 1000 in correct position', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- thousandSeparator: ',',
- separatorLimit: '1000',
+ mask: signal('separator.2'),
+ thousandSeparator: signal(','),
+ separatorLimit: signal('1000'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -198,11 +187,10 @@ describe('Test Date Hh:m0', () => {
it('should backspace with separator and prefix', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- thousandSeparator: ',',
- prefix: '$ ',
+ mask: signal('separator.2'),
+ thousandSeparator: signal(','),
+ prefix: signal('$ '),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -216,11 +204,10 @@ describe('Test Date Hh:m0', () => {
it('should backspace with separator and prefix', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- thousandSeparator: '.',
- prefix: '$ ',
+ mask: signal('separator.2'),
+ thousandSeparator: signal('.'),
+ prefix: signal('$ '),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -234,11 +221,10 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator.6 decimalMarker . thousandSeparator ,', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.6',
- decimalMarker: '.',
- thousandSeparator: ',',
+ mask: signal('separator.6'),
+ decimalMarker: signal('.'),
+ thousandSeparator: signal(','),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -257,11 +243,10 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator.2 decimalMarker . thousandSeparator ,', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- decimalMarker: '.',
- thousandSeparator: ',',
+ mask: signal('separator.2'),
+ decimalMarker: signal('.'),
+ thousandSeparator: signal(','),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -278,12 +263,11 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator.2 decimalMarker . thousandSeparator , allowNegative', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- decimalMarker: '.',
- thousandSeparator: ',',
- allowNegativeNumbers: true,
+ mask: signal('separator.2'),
+ decimalMarker: signal('.'),
+ thousandSeparator: signal(','),
+ allowNegativeNumbers: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -300,12 +284,11 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator.3 decimalMarker . thousandSeparator , allowNegative', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.3',
- decimalMarker: '.',
- thousandSeparator: ',',
- allowNegativeNumbers: true,
+ mask: signal('separator.3'),
+ decimalMarker: signal('.'),
+ thousandSeparator: signal(','),
+ allowNegativeNumbers: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -322,11 +305,10 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator.3 leadZero allowNegative', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.3',
- allowNegativeNumbers: true,
- leadZero: true,
+ mask: signal('separator.3'),
+ allowNegativeNumbers: signal(true),
+ leadZero: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -342,9 +324,8 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator',
+ mask: signal('separator'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -358,10 +339,9 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator leadZero', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator',
- leadZero: true,
+ mask: signal('separator'),
+ leadZero: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -375,10 +355,9 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator allowNegativeNumbers', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator',
- allowNegativeNumbers: true,
+ mask: signal('separator'),
+ allowNegativeNumbers: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -392,11 +371,10 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator leadZero', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator',
- leadZero: true,
- allowNegativeNumbers: true,
+ mask: signal('separator'),
+ leadZero: signal(true),
+ allowNegativeNumbers: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -410,10 +388,9 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator.2 when first digit .', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- thousandSeparator: '.',
+ mask: signal('separator.2'),
+ thousandSeparator: signal('.'),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -427,10 +404,9 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator.2 when first digit ,', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- thousandSeparator: ',',
+ mask: signal('separator.2'),
+ thousandSeparator: signal(','),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
@@ -444,10 +420,9 @@ describe('Test Date Hh:m0', () => {
it('should correct work after backspace separator.2 when first digit whitespace', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: 'separator.2',
- thousandSeparator: ' ',
+ mask: signal('separator.2'),
+ thousandSeparator: signal(' '),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked')
diff --git a/projects/ngx-mask-lib/src/test/separator.spec.ts b/projects/ngx-mask-lib/src/test/separator.spec.ts
index 93529b7a..1f2e8ea0 100644
--- a/projects/ngx-mask-lib/src/test/separator.spec.ts
+++ b/projects/ngx-mask-lib/src/test/separator.spec.ts
@@ -15,8 +15,7 @@ describe('Separator: Mask', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/show-mask-typed.cy-spec.ts b/projects/ngx-mask-lib/src/test/show-mask-typed.cy-spec.ts
index 535118c5..a46a5a87 100644
--- a/projects/ngx-mask-lib/src/test/show-mask-typed.cy-spec.ts
+++ b/projects/ngx-mask-lib/src/test/show-mask-typed.cy-spec.ts
@@ -1,14 +1,13 @@
import { CypressTestMaskComponent } from './utils/cypress-test-component.component';
-import { CypressTestMaskModule } from './utils/cypress-test.module';
+import { signal } from '@angular/core';
describe('Directive: Mask (Delete)', () => {
it('should place cursor in right place mask (000) 000-0000', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '(000) 000-0000',
- showMaskTyped: true,
+ mask: signal('(000) 000-0000'),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked').click().should('have.prop', 'selectionStart', 1);
@@ -17,10 +16,9 @@ describe('Directive: Mask (Delete)', () => {
it('should place cursor in right place mask ((000)) 000-0000', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '((000)) 000-0000',
- showMaskTyped: true,
+ mask: signal('((000)) 000-0000'),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked').click().should('have.prop', 'selectionStart', 2);
@@ -29,10 +27,9 @@ describe('Directive: Mask (Delete)', () => {
it('should place cursor in right place mask 000 000-0000', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '000 000-0000',
- showMaskTyped: true,
+ mask: signal('000 000-0000'),
+ showMaskTyped: signal(true),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked').click().should('have.prop', 'selectionStart', 0);
@@ -41,11 +38,10 @@ describe('Directive: Mask (Delete)', () => {
it('should place cursor in right place mask (000) 000-0000', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
- mask: '(000) 000-0000',
- showMaskTyped: true,
- prefix: '+380 ',
+ mask: signal('(000) 000-0000'),
+ showMaskTyped: signal(true),
+ prefix: signal('+380 '),
},
- imports: [CypressTestMaskModule],
});
cy.get('#masked').click().should('have.prop', 'selectionStart', 6);
diff --git a/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts b/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts
index 28b9e2d8..9008dc9d 100644
--- a/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts
+++ b/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts
@@ -15,8 +15,7 @@ describe('Directive: Mask', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/test-sufix.spec.ts b/projects/ngx-mask-lib/src/test/test-sufix.spec.ts
index baec7b6e..89590bde 100644
--- a/projects/ngx-mask-lib/src/test/test-sufix.spec.ts
+++ b/projects/ngx-mask-lib/src/test/test-sufix.spec.ts
@@ -14,8 +14,7 @@ describe('Directive: Mask (Suffix)', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/time-mask.spec.ts b/projects/ngx-mask-lib/src/test/time-mask.spec.ts
index 5355a101..cf15da40 100644
--- a/projects/ngx-mask-lib/src/test/time-mask.spec.ts
+++ b/projects/ngx-mask-lib/src/test/time-mask.spec.ts
@@ -13,8 +13,7 @@ describe('Directive: Mask (Time)', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/trigger-on-mask-change.cy-spec.ts b/projects/ngx-mask-lib/src/test/trigger-on-mask-change.cy-spec.ts
index 0ccece86..66a438d6 100644
--- a/projects/ngx-mask-lib/src/test/trigger-on-mask-change.cy-spec.ts
+++ b/projects/ngx-mask-lib/src/test/trigger-on-mask-change.cy-spec.ts
@@ -1,11 +1,8 @@
import { CypressTestTriggerOnMaskChangeComponent } from './utils/cypress-test-trigger-on-mask-change.component';
-import { CypressTestMaskModule } from './utils/cypress-test.module';
describe('Directive: Mask (Trigger on mask change) [Cypress]', () => {
it('should put back initial value if mask is toggled', async () => {
- cy.mount(CypressTestTriggerOnMaskChangeComponent, {
- imports: [CypressTestMaskModule],
- });
+ cy.mount(CypressTestTriggerOnMaskChangeComponent);
cy.get('#masked').type('7912345678').should('have.value', '7912345678');
cy.get('.formvalue').should('have.text', '7912345678');
diff --git a/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts b/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts
index 2d84f3ea..c473484c 100644
--- a/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts
+++ b/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts
@@ -15,8 +15,7 @@ describe('Directive: Mask (Trigger on mask change)', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestMaskComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestMaskComponent);
diff --git a/projects/ngx-mask-lib/src/test/type-number.spec.ts b/projects/ngx-mask-lib/src/test/type-number.spec.ts
index b82144f1..5d0ebc05 100644
--- a/projects/ngx-mask-lib/src/test/type-number.spec.ts
+++ b/projects/ngx-mask-lib/src/test/type-number.spec.ts
@@ -7,6 +7,8 @@ import { equal } from './utils/test-functions.component';
@Component({
selector: 'jsdaddy-open-source-test',
+ standalone: true,
+ imports: [ReactiveFormsModule, NgxMaskDirective],
template: ` `,
})
// eslint-disable-next-line @angular-eslint/component-class-suffix
@@ -21,8 +23,7 @@ describe('Directive: Mask (Trigger on mask change)', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [TestTypeNumber],
- imports: [ReactiveFormsModule, NgxMaskDirective],
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestTypeNumber],
providers: [provideNgxMask()],
});
fixture = TestBed.createComponent(TestTypeNumber);
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
index 70cb470a..36248788 100644
--- 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,80 +1,101 @@
-import { Component, inject, Input } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { Component, inject, input } 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',
+ standalone: true,
+ imports: [NgxMaskDirective, ReactiveFormsModule],
+ providers: [provideNgxMask()],
template: `
-
- {{ counter$ | async }}
+ [mask]="mask()"
+ [prefix]="prefix()"
+ [suffix]="suffix()"
+ [leadZero]="leadZero()"
+ [showMaskTyped]="showMaskTyped()"
+ [allowNegativeNumbers]="allowNegativeNumbers()"
+ [decimalMarker]="decimalMarker()"
+ [thousandSeparator]="thousandSeparator()"
+ [shownMaskExpression]="shownMaskExpression()"
+ [leadZeroDateTime]="leadZeroDateTime()"
+ [dropSpecialCharacters]="dropSpecialCharacters()"
+ [specialCharacters]="specialCharacters()"
+ [patterns]="patterns()"
+ [keepCharacterPositions]="keepCharacterPositions()"
+ [separatorLimit]="separatorLimit()"
+ [hiddenInput]="hiddenInput()" />
+
+ {{ counter$() }}
{{ form.value }}
- {{ leadZeroDateTime }}
+ {{ leadZeroDateTime() }}
`,
})
export class CypressTestMaskComponent {
protected _config = inject(NGX_MASK_CONFIG);
- @Input() public mask = '';
+ public mask = input('');
- @Input() public hiddenInput = null;
+ public hiddenInput = input(this._config.hiddenInput);
- @Input() public allowNegativeNumbers = false;
-
- @Input() public prefix = '';
+ public allowNegativeNumbers = input(
+ this._config.allowNegativeNumbers
+ );
- @Input() public suffix = '';
+ public prefix = input(this._config.prefix);
- @Input() public leadZero = false;
+ public suffix = input(this._config.suffix);
- @Input() public showMaskTyped = false;
+ public leadZero = input(this._config.leadZero);
- @Input() public decimalMarker = '.';
+ public showMaskTyped = input(this._config.showMaskTyped);
- @Input() public thousandSeparator = ',';
+ public decimalMarker = input('.');
- @Input() public keepCharacterPositions = false;
+ public thousandSeparator = input(',');
- @Input() public shownMaskExpression = '';
+ public keepCharacterPositions = input(
+ this._config.keepCharacterPositions
+ );
- @Input() public placeHolderCharacter = '';
+ public shownMaskExpression = input(
+ this._config.shownMaskExpression
+ );
- @Input() public dropSpecialCharacters = true;
+ public placeHolderCharacter = input(
+ this._config.placeHolderCharacter
+ );
- @Input() public leadZeroDateTime = false;
+ public dropSpecialCharacters = input(
+ this._config.dropSpecialCharacters
+ );
+ public leadZeroDateTime = input(
+ this._config.leadZeroDateTime
+ );
- @Input() public separatorLimit = '';
+ public separatorLimit = input(this._config.separatorLimit);
- @Input() public patterns = this._config.patterns;
+ public patterns = input(this._config.patterns);
- @Input() public specialCharacters = this._config.specialCharacters;
+ public specialCharacters = input(
+ this._config.specialCharacters
+ );
public form: FormControl = new FormControl('');
- public readonly counter$ = this.form.valueChanges.pipe(
- startWith(0),
+ public readonly counter$ = toSignal(
+ this.form.valueChanges.pipe(
+ startWith(0),
- scan((acc) => acc + 1, 0)
+ scan((acc) => acc + 1, 0)
+ )
);
}
diff --git a/projects/ngx-mask-lib/src/test/utils/cypress-test-shadow-dom.component.ts b/projects/ngx-mask-lib/src/test/utils/cypress-test-shadow-dom.component.ts
deleted file mode 100644
index c9f942aa..00000000
--- a/projects/ngx-mask-lib/src/test/utils/cypress-test-shadow-dom.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { FormControl } from '@angular/forms';
-
-@Component({
- encapsulation: ViewEncapsulation.ShadowDom,
- selector: 'jsdaddy-open-source-test',
- template: `
-
- `,
-})
-export class CypressTestMaskShadowDomComponent {
- @Input() public mask = '';
-
- @Input() public hiddenInput = false;
-
- @Input() public prefix = '';
-
- public form: FormControl = new FormControl('');
-}
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
index 4215ac72..43dbb481 100644
--- 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,10 +1,13 @@
import type { OnDestroy, OnInit } from '@angular/core';
import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';
+import { NgxMaskDirective } from 'ngx-mask';
@Component({
selector: 'jsdaddy-open-source-test',
+ standalone: true,
+ imports: [ReactiveFormsModule, NgxMaskDirective],
styles: [
'code { border: 1px solid #ddd; background-color: #eee; padding: 0 5px; border-radius: 3px; }',
],
diff --git a/projects/ngx-mask-lib/src/test/utils/cypress-test.module.ts b/projects/ngx-mask-lib/src/test/utils/cypress-test.module.ts
deleted file mode 100644
index 68deb46b..00000000
--- a/projects/ngx-mask-lib/src/test/utils/cypress-test.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CypressTestTriggerOnMaskChangeComponent } from './cypress-test-trigger-on-mask-change.component';
-import { CypressTestMaskComponent } from './cypress-test-component.component';
-import { CypressTestMaskShadowDomComponent } from './cypress-test-shadow-dom.component';
-import { provideNgxMask } from '../../lib/ngx-mask.providers';
-import { NgxMaskDirective } from '../../lib/ngx-mask.directive';
-
-@NgModule({
- imports: [CommonModule, ReactiveFormsModule, FormsModule, NgxMaskDirective],
- declarations: [
- CypressTestMaskShadowDomComponent,
- CypressTestMaskComponent,
- CypressTestTriggerOnMaskChangeComponent,
- ],
- exports: [
- CypressTestMaskShadowDomComponent,
- CypressTestMaskComponent,
- CypressTestTriggerOnMaskChangeComponent,
- ],
- providers: [provideNgxMask()],
-})
-export class CypressTestMaskModule {}
diff --git a/projects/ngx-mask-lib/src/test/utils/test-component.component.ts b/projects/ngx-mask-lib/src/test/utils/test-component.component.ts
index 194ec9e8..f231a1cb 100644
--- a/projects/ngx-mask-lib/src/test/utils/test-component.component.ts
+++ b/projects/ngx-mask-lib/src/test/utils/test-component.component.ts
@@ -1,9 +1,13 @@
-import { ChangeDetectorRef, Component, inject } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { Component, inject } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
import type { NgxMaskConfig } from 'ngx-mask';
+import { NGX_MASK_CONFIG } from 'ngx-mask';
+import { NgxMaskDirective } from 'ngx-mask';
@Component({
selector: 'jsdaddy-open-source-test',
+ standalone: true,
+ imports: [ReactiveFormsModule, NgxMaskDirective],
template: `
`,
})
export class TestMaskComponent {
public mask!: string | null | undefined;
+ protected _config = inject(NGX_MASK_CONFIG);
public form: FormControl = new FormControl();
- public dropSpecialCharacters: NgxMaskConfig['dropSpecialCharacters'] | undefined;
+ public dropSpecialCharacters: NgxMaskConfig['dropSpecialCharacters'] =
+ this._config.dropSpecialCharacters;
- public clearIfNotMatch: NgxMaskConfig['clearIfNotMatch'] | undefined;
+ public clearIfNotMatch: NgxMaskConfig['clearIfNotMatch'] = this._config.clearIfNotMatch;
- public patterns: NgxMaskConfig['patterns'] | undefined;
+ public patterns: NgxMaskConfig['patterns'] = this._config.patterns;
- public prefix: NgxMaskConfig['prefix'] = '';
+ public prefix: NgxMaskConfig['prefix'] = this._config.prefix;
- public thousandSeparator: NgxMaskConfig['thousandSeparator'] | undefined;
+ public thousandSeparator: NgxMaskConfig['thousandSeparator'] = this._config.thousandSeparator;
- public decimalMarker: NgxMaskConfig['decimalMarker'] | undefined;
+ public decimalMarker: NgxMaskConfig['decimalMarker'] = this._config.decimalMarker;
- public suffix: NgxMaskConfig['suffix'] = '';
+ public suffix: NgxMaskConfig['suffix'] = this._config.suffix;
- public specialCharacters: NgxMaskConfig['specialCharacters'] | undefined;
+ public specialCharacters: NgxMaskConfig['specialCharacters'] = this._config.specialCharacters;
- public keepCharacterPositions: NgxMaskConfig['keepCharacterPositions'] | undefined;
+ public keepCharacterPositions: NgxMaskConfig['keepCharacterPositions'] =
+ this._config.keepCharacterPositions;
- public showMaskTyped: NgxMaskConfig['showMaskTyped'] | undefined;
+ public showMaskTyped: NgxMaskConfig['showMaskTyped'] = this._config.showMaskTyped;
- public placeHolderCharacter: NgxMaskConfig['placeHolderCharacter'] | undefined;
+ public placeHolderCharacter: NgxMaskConfig['placeHolderCharacter'] =
+ this._config.placeHolderCharacter;
- public hiddenInput: NgxMaskConfig['hiddenInput'] | undefined;
+ public hiddenInput: NgxMaskConfig['hiddenInput'] = this._config.hiddenInput;
- public separatorLimit: NgxMaskConfig['separatorLimit'] = '';
+ public separatorLimit: NgxMaskConfig['separatorLimit'] = this._config.separatorLimit;
- public allowNegativeNumbers: NgxMaskConfig['allowNegativeNumbers'] | undefined;
+ public allowNegativeNumbers: NgxMaskConfig['allowNegativeNumbers'] =
+ this._config.allowNegativeNumbers;
- public leadZeroDateTime: NgxMaskConfig['leadZeroDateTime'] | undefined;
+ public leadZeroDateTime: NgxMaskConfig['leadZeroDateTime'] = this._config.leadZeroDateTime;
- public leadZero: NgxMaskConfig['leadZero'] | undefined;
+ public leadZero: NgxMaskConfig['leadZero'] = this._config.leadZero;
- public triggerOnMaskChange: NgxMaskConfig['triggerOnMaskChange'] | undefined;
+ public triggerOnMaskChange: NgxMaskConfig['triggerOnMaskChange'] =
+ this._config.triggerOnMaskChange;
- public validation: NgxMaskConfig['validation'] | undefined;
+ public validation: NgxMaskConfig['validation'] = this._config.validation;
- public apm: NgxMaskConfig['apm'] | undefined;
+ public apm: NgxMaskConfig['apm'] = this._config.apm;
- public inputTransformFn: NgxMaskConfig['inputTransformFn'] | undefined;
+ public inputTransformFn: NgxMaskConfig['inputTransformFn'] = this._config.inputTransformFn;
- public outputTransformFn: NgxMaskConfig['outputTransformFn'] | undefined;
-
- public cdr = inject(ChangeDetectorRef);
+ public outputTransformFn: NgxMaskConfig['outputTransformFn'] = this._config.outputTransformFn;
}
diff --git a/projects/ngx-mask-lib/src/test/validation.spec.ts b/projects/ngx-mask-lib/src/test/validation.spec.ts
index 6ce0fdd9..6e566403 100644
--- a/projects/ngx-mask-lib/src/test/validation.spec.ts
+++ b/projects/ngx-mask-lib/src/test/validation.spec.ts
@@ -1,484 +1,275 @@
import type { ComponentFixture } from '@angular/core/testing';
import { TestBed } from '@angular/core/testing';
-import { Component } from '@angular/core';
-import { ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
import { equal } from './utils/test-functions.component';
import { provideNgxMask } from '../lib/ngx-mask.providers';
import { NgxMaskDirective } from '../lib/ngx-mask.directive';
-
-@Component({
- selector: 'jsdaddy-open-source-test',
- template: ` `,
-})
-export class TestMaskNoValidationAttributeComponent {
- public form: FormControl = new FormControl('');
-}
-
-@Component({
- selector: 'jsdaddy-open-source-test',
- template: ` `,
-})
-export class TestMaskValidationAttributeComponent {
- public form: FormControl = new FormControl('');
-
- public validate = true;
-}
-
-@Component({
- selector: 'jsdaddy-open-source-test',
- template: `
-
- `,
-})
-export class TestMaskValidationEmailComponent {
- public form: FormControl = new FormControl('');
-
- public mask = '';
-
- public validate = true;
-
- public dropSpecialCharacters = false;
-}
-
-@Component({
- selector: 'jsdaddy-open-source-test',
- template: ` `,
-})
-// eslint-disable-next-line @angular-eslint/component-class-suffix
-export class TestMaskValidationTestSymbolStar {
- public form: FormControl = new FormControl('', [Validators.required, Validators.min(1)]);
- public mask = '';
- public validate = true;
-}
-
-@Component({
- selector: 'jsdaddy-open-source-test',
- template: ` `,
-})
-// eslint-disable-next-line @angular-eslint/component-class-suffix
-export class TestValidatorNumber {
- public form: FormControl = new FormControl(44, Validators.required);
- public mask = '';
- public validate = true;
-}
-
-@Component({
- selector: 'jsdaddy-open-source-test',
- template: `
-
- `,
-})
-// eslint-disable-next-line @angular-eslint/component-class-suffix
-export class TestValidatorDropSpecialCharacters {
- public form: FormControl = new FormControl('+373', Validators.required);
- public mask = '+000';
- public specialCharacters = ['+', ' '];
- public dropSpecialCharacters = [' '];
-}
-
-@Component({
- selector: 'jsdaddy-open-source-test',
- template: `
-
- `,
-})
-// eslint-disable-next-line @angular-eslint/component-class-suffix
-export class TestValidatorEmailMask {
- public form: FormControl = new FormControl('', Validators.required);
- public mask = 'A*@A*.A*';
- public dropSpecialCharacters = false;
-}
+import { TestMaskComponent } from './utils/test-component.component';
describe('Directive: Mask (Validation)', () => {
- describe('Global validation true, validation attribute on input not specified', () => {
- let fixture: ComponentFixture;
- let component: TestMaskNoValidationAttributeComponent;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestMaskNoValidationAttributeComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask({ validation: true })],
- });
- fixture = TestBed.createComponent(TestMaskNoValidationAttributeComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ let fixture: ComponentFixture;
+ let component: TestMaskComponent;
- it('should be marked as not valid if not valid', () => {
- equal('12', '12', fixture);
- expect(component.form.valid).toBe(false);
- expect(component.form.hasError('mask')).toBe(true);
- });
-
- it('should be marked as valid if valid', () => {
- equal('1234', '1234', fixture);
- expect(component.form.valid).toBe(true);
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [ReactiveFormsModule, NgxMaskDirective, TestMaskComponent],
+ providers: [provideNgxMask({ validation: true })],
});
+ fixture = TestBed.createComponent(TestMaskComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
});
- describe('Global validation true, validation attribute on input specified', () => {
- let fixture: ComponentFixture;
- let component: TestMaskValidationAttributeComponent;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestMaskValidationAttributeComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask()],
- });
- fixture = TestBed.createComponent(TestMaskValidationAttributeComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ it('should be marked as not valid if not valid and validation attribute true', () => {
+ component.mask = '0000';
+ component.form.addValidators(Validators.required);
- it('should be marked as not valid if not valid and validation attribute true', () => {
- equal('12', '12', fixture);
- expect(component.form.valid).toBe(false);
- expect(component.form.hasError('mask')).toBe(true);
- });
+ equal('12', '12', fixture);
+ expect(component.form.valid).toBe(false);
+ expect(component.form.hasError('mask')).toBe(true);
+ });
- it('should be marked as valid if valid and validation attribute true', () => {
- equal('1234', '1234', fixture);
- expect(component.form.valid).toBe(true);
- });
+ it('should be marked as valid if not valid and validation attribute false', () => {
+ component.validation = false;
+ component.form.addValidators(Validators.required);
- it('should be marked as valid if not valid and validation attribute false', () => {
- component.validate = false;
- equal('12', '12', fixture);
- expect(component.form.valid).toBe(true);
- });
+ equal('12', '12', fixture);
+ expect(component.form.valid).toBe(true);
});
- describe('Global validation false, validation attribute on input not specified', () => {
- let fixture: ComponentFixture;
- let component: TestMaskNoValidationAttributeComponent;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestMaskNoValidationAttributeComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask({ validation: false })],
- });
- fixture = TestBed.createComponent(TestMaskNoValidationAttributeComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ it('should be marked as valid if valid and validation attribute true', () => {
+ component.mask = '0000';
+ component.form.addValidators(Validators.required);
- it('should be marked as valid if not valid', () => {
- equal('12', '12', fixture);
- expect(component.form.valid).toBe(true);
- });
+ equal('1234', '1234', fixture);
+ expect(component.form.valid).toBe(true);
});
- describe('Global validation false, validation attribute on input specified', () => {
- let fixture: ComponentFixture;
- let component: TestMaskValidationAttributeComponent;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestMaskValidationAttributeComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask()],
- });
- fixture = TestBed.createComponent(TestMaskValidationAttributeComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ it('should be marked as valid if not valid and validation attribute false', () => {
+ component.validation = false;
+ component.mask = '0000';
+ component.form.addValidators(Validators.required);
- it('should be marked as not valid if not valid and validation attribute true', () => {
- equal('12', '12', fixture);
- expect(component.form.valid).toBe(false);
- expect(component.form.hasError('mask')).toBe(true);
- });
+ equal('12', '12', fixture);
+ expect(component.form.valid).toBe(true);
+ });
- it('should be marked as valid if not valid and validation attribute false', () => {
- component.validate = false;
- equal('12', '12', fixture);
- expect(component.form.valid).toBe(true);
- });
+ it('should be not valid email mask A*@A*.SSS', () => {
+ component.mask = 'A*@A*.SSS';
+ component.dropSpecialCharacters = false;
+ component.form.addValidators(Validators.required);
+
+ equal('a', 'a', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('as', 'as', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('asd', 'asd', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('andr', 'andr', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('testing', 'testing', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('testing@', 'testing@', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('testing@a', 'testing@a', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('testing@aa', 'testing@aa', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('testing@gmail', 'testing@gmail', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('testing@gmail.', 'testing@gmail.', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('testing@gmail.c', 'testing@gmail.c', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('testing@email.ua', 'testing@email.ua', fixture);
+ expect(component.form.valid).toBe(false);
});
- describe('Global validation for email', () => {
- let fixture: ComponentFixture;
- let component: TestMaskValidationEmailComponent;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestMaskValidationEmailComponent],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask()],
- });
- fixture = TestBed.createComponent(TestMaskValidationEmailComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ it('should valid email mask A*@A*.SSS', () => {
+ component.mask = 'A*@A*.SSS';
+ component.dropSpecialCharacters = false;
+ component.form.addValidators(Validators.required);
- it('should be not valid email mask A*@A*.SSS', () => {
- component.mask = 'A*@A*.SSS';
- equal('a', 'a', fixture);
- expect(component.form.valid).toBe(false);
- equal('as', 'as', fixture);
- expect(component.form.valid).toBe(false);
- equal('asd', 'asd', fixture);
- expect(component.form.valid).toBe(false);
- equal('andr', 'andr', fixture);
- expect(component.form.valid).toBe(false);
- equal('testing', 'testing', fixture);
- expect(component.form.valid).toBe(false);
- equal('testing@', 'testing@', fixture);
- expect(component.form.valid).toBe(false);
- equal('testing@a', 'testing@a', fixture);
- expect(component.form.valid).toBe(false);
- equal('testing@aa', 'testing@aa', fixture);
- expect(component.form.valid).toBe(false);
- equal('testing@gmail', 'testing@gmail', fixture);
- expect(component.form.valid).toBe(false);
- equal('testing@gmail.', 'testing@gmail.', fixture);
- expect(component.form.valid).toBe(false);
- equal('testing@gmail.c', 'testing@gmail.c', fixture);
- expect(component.form.valid).toBe(false);
- equal('testing@email.ua', 'testing@email.ua', fixture);
- expect(component.form.valid).toBe(false);
- });
+ equal('testing@gmail.com', 'testing@gmail.com', fixture);
+ expect(component.form.valid).toBe(true);
+ });
- it('should valid email mask A*@A*.SSS', () => {
- component.mask = 'A*@A*.SSS';
- equal('testing@gmail.com', 'testing@gmail.com', fixture);
- expect(component.form.valid).toBe(true);
- });
+ it('should be not valid mask A*@A*.SS', () => {
+ component.mask = 'A*@A*.SS';
+ component.dropSpecialCharacters = false;
+ component.form.addValidators(Validators.required);
+
+ equal('d', 'd', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('dd', 'dd', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('ddd', 'ddd', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('dddd', 'dddd', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('andre', 'andre', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('andrey', 'andrey', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('andrey@', 'andrey@', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('andrey@a', 'andrey@a', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('andrey@te', 'andrey@te', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('andrey@test', 'andrey@test', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('andrey@test.c', 'andrey@test.c', fixture);
+ expect(component.form.valid).toBe(false);
+ });
- it('should be not valid mask A*@A*.SS', () => {
- component.mask = 'A*@A*.SS';
- equal('d', 'd', fixture);
- expect(component.form.valid).toBe(false);
- equal('dd', 'dd', fixture);
- expect(component.form.valid).toBe(false);
- equal('ddd', 'ddd', fixture);
- expect(component.form.valid).toBe(false);
- equal('dddd', 'dddd', fixture);
- expect(component.form.valid).toBe(false);
- equal('andre', 'andre', fixture);
- expect(component.form.valid).toBe(false);
- equal('andrey', 'andrey', fixture);
- expect(component.form.valid).toBe(false);
- equal('andrey@', 'andrey@', fixture);
- expect(component.form.valid).toBe(false);
- equal('andrey@a', 'andrey@a', fixture);
- expect(component.form.valid).toBe(false);
- equal('andrey@te', 'andrey@te', fixture);
- expect(component.form.valid).toBe(false);
- equal('andrey@test', 'andrey@test', fixture);
- expect(component.form.valid).toBe(false);
- equal('andrey@test.c', 'andrey@test.c', fixture);
- expect(component.form.valid).toBe(false);
- });
+ it('should valid email mask', () => {
+ component.mask = 'A*@A*.SS';
+ component.dropSpecialCharacters = false;
+ component.form.addValidators(Validators.required);
- it('should valid email mask', () => {
- component.mask = 'A*@A*.SS';
- equal('testing@some.ua', 'testing@some.ua', fixture);
- expect(component.form.valid).toBe(true);
- });
+ equal('testing@some.ua', 'testing@some.ua', fixture);
+ expect(component.form.valid).toBe(true);
});
- describe('Global validation symbol star', () => {
- let fixture: ComponentFixture;
- let component: TestMaskValidationTestSymbolStar;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestMaskValidationTestSymbolStar],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask()],
- });
- fixture = TestBed.createComponent(TestMaskValidationTestSymbolStar);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
- it('should valid from one digit mask 0*', () => {
- component.mask = '0*';
- component.validate = true;
- equal('', '', fixture);
- expect(component.form.valid).toBe(false);
- equal('0', '0', fixture);
- expect(component.form.valid).toBe(false);
- equal('00', '00', fixture);
- expect(component.form.valid).toBe(false);
- equal('1', '1', fixture);
- expect(component.form.valid).toBe(true);
- equal('01', '01', fixture);
- expect(component.form.valid).toBe(true);
- });
+ it('should valid from one digit mask 0*', () => {
+ component.mask = '0*';
+ component.form.setValidators([Validators.required, Validators.min(1)]);
+ component.form.updateValueAndValidity();
+
+ equal('', '', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('0', '0', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('00', '00', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('1', '1', fixture);
+ expect(component.form.valid).toBe(true);
+ equal('01', '01', fixture);
+ expect(component.form.valid).toBe(true);
+ });
- it('should valid from one digit mask S*', () => {
- component.mask = 'S*';
- component.validate = true;
- equal('', '', fixture);
- expect(component.form.valid).toBe(false);
- equal('d', 'd', fixture);
- expect(component.form.valid).toBe(true);
- });
+ it('should valid from one digit mask S*', () => {
+ component.mask = 'S*';
+ component.form.setValidators([Validators.required, Validators.min(1)]);
+ component.form.updateValueAndValidity();
- it('should valid from one digit mask A*', () => {
- component.mask = 'A*';
- component.validate = true;
- equal('', '', fixture);
- expect(component.form.valid).toBe(false);
- equal('d', 'd', fixture);
- expect(component.form.valid).toBe(true);
- equal('1', '1', fixture);
- expect(component.form.valid).toBe(true);
- });
+ equal('', '', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('d', 'd', fixture);
+ expect(component.form.valid).toBe(true);
});
- describe('Global validation true, validation attribute on input not specified', () => {
- let fixture: ComponentFixture;
- let component: TestValidatorNumber;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestValidatorNumber],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask({ validation: true })],
- });
- fixture = TestBed.createComponent(TestValidatorNumber);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('mask with number value should work as expected mask 0*', () => {
- component.mask = '0*';
- equal('44', '44', fixture);
- expect(component.form.valid).toBe(true);
- expect(component.form.value).toBe(44);
+ it('should valid from one digit mask A*', () => {
+ component.mask = 'A*';
+ component.form.setValidators([Validators.required, Validators.min(1)]);
+ component.form.updateValueAndValidity();
+
+ equal('', '', fixture);
+ expect(component.form.valid).toBe(false);
+ equal('d', 'd', fixture);
+ expect(component.form.valid).toBe(true);
+ equal('1', '1', fixture);
+ expect(component.form.valid).toBe(true);
+ });
- equal('', '', fixture);
- expect(component.form.invalid).toBe(true);
- expect(component.form.value).toBe('');
+ it('mask with number value should work as expected mask 0*', () => {
+ // public form: FormControl = new FormControl(44, Validators.required);
+ // public mask = '';
+ // public validate = true;
+ component.mask = '0*';
+ component.form.setValidators([Validators.required, Validators.min(1)]);
+ component.form.updateValueAndValidity();
+
+ equal('44', '44', fixture);
+ expect(component.form.valid).toBe(true);
+ expect(component.form.value).toBe('44');
+
+ equal('', '', fixture);
+ expect(component.form.invalid).toBe(true);
+ expect(component.form.value).toBe('');
+
+ equal('1', '1', fixture);
+ expect(component.form.valid).toBe(true);
+ expect(component.form.value).toBe('1');
+ });
- equal('1', '1', fixture);
- expect(component.form.valid).toBe(true);
- expect(component.form.value).toBe(1);
- });
+ it('mask with number value should work as expected mask 000.00', () => {
+ component.mask = '000.00';
+ component.form.addValidators(Validators.required);
+ component.form.setValue('');
- it('mask with number value should work as expected mask 000.00', () => {
- component.mask = '000.00';
- equal('', '', fixture);
- expect(component.form.invalid).toBe(true);
- expect(component.form.value).toBe('');
+ equal('', '', fixture);
+ expect(component.form.invalid).toBe(true);
+ expect(component.form.value).toBe('');
- equal('44', '44', fixture);
- expect(component.form.invalid).toBe(true);
- expect(component.form.value).toBe(44);
+ equal('44', '44', fixture);
+ expect(component.form.invalid).toBe(true);
+ expect(component.form.value).toBe('44');
- equal('1', '1', fixture);
- expect(component.form.invalid).toBe(true);
- expect(component.form.value).toBe(1);
+ equal('1', '1', fixture);
+ expect(component.form.invalid).toBe(true);
+ expect(component.form.value).toBe('1');
- equal('444', '444', fixture);
- expect(component.form.invalid).toBe(true);
- expect(component.form.value).toBe(444);
+ equal('444', '444', fixture);
+ expect(component.form.invalid).toBe(true);
+ expect(component.form.value).toBe('444');
- equal('444.3', '444.3', fixture);
- expect(component.form.invalid).toBe(true);
- expect(component.form.value).toBe(4443);
+ equal('444.3', '444.3', fixture);
+ expect(component.form.invalid).toBe(true);
+ expect(component.form.value).toBe('4443');
- equal('444.31', '444.31', fixture);
- expect(component.form.valid).toBe(true);
- expect(component.form.value).toBe(44431);
- });
+ equal('444.31', '444.31', fixture);
+ expect(component.form.valid).toBe(true);
+ expect(component.form.value).toBe('44431');
});
- describe('Global validation true, dropSpecialCharacters attribute on input specified as array', () => {
- let fixture: ComponentFixture;
- let component: TestValidatorDropSpecialCharacters;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestValidatorDropSpecialCharacters],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask({ validation: true })],
- });
- fixture = TestBed.createComponent(TestValidatorDropSpecialCharacters);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('dropSpecialCharacters is different from specialCharacters', () => {
- component.mask = '+000';
- component.specialCharacters = ['+', ' '];
- component.dropSpecialCharacters = [' '];
+ it('dropSpecialCharacters is different from specialCharacters', () => {
+ component.mask = '+000';
+ component.specialCharacters = ['+', ' '];
+ component.dropSpecialCharacters = [' '];
+ component.form.addValidators(Validators.required);
- equal('+37', '+37', fixture);
- expect(component.form.valid).toBe(false);
+ equal('+37', '+37', fixture);
+ expect(component.form.valid).toBe(false);
- equal('+373', '+373', fixture);
- expect(component.form.valid).toBe(true);
+ equal('+373', '+373', fixture);
+ expect(component.form.valid).toBe(true);
- component.mask = '+000 000 00 000';
+ component.mask = '+000 000 00 000';
- equal('+3736000000', '+373 600 00 00', fixture);
- expect(component.form.valid).toBe(false);
+ equal('+3736000000', '+373 600 00 00', fixture);
+ expect(component.form.valid).toBe(false);
- equal('+37360000000', '+373 600 00 000', fixture);
- expect(component.form.valid).toBe(true);
- });
+ equal('+37360000000', '+373 600 00 000', fixture);
+ expect(component.form.valid).toBe(true);
});
- describe('Global validation true, email mask', () => {
- let fixture: ComponentFixture;
- let component: TestValidatorEmailMask;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [TestValidatorEmailMask],
- imports: [ReactiveFormsModule, NgxMaskDirective],
- providers: [provideNgxMask({ validation: true })],
- });
- fixture = TestBed.createComponent(TestValidatorEmailMask);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('email Mask should validated correct', () => {
- component.mask = 'A*@A*.A*';
- component.dropSpecialCharacters = false;
+ it('email Mask should validated correct', () => {
+ component.mask = 'A*@A*.A*';
+ component.dropSpecialCharacters = false;
+ component.form.addValidators(Validators.required);
- equal('validate', 'validate', fixture);
- expect(component.form.valid).toBe(false);
+ equal('validate', 'validate', fixture);
+ expect(component.form.valid).toBe(false);
- equal('validate@', 'validate@', fixture);
- expect(component.form.valid).toBe(false);
+ equal('validate@', 'validate@', fixture);
+ expect(component.form.valid).toBe(false);
- equal('validate@some', 'validate@some', fixture);
- expect(component.form.valid).toBe(false);
+ equal('validate@some', 'validate@some', fixture);
+ expect(component.form.valid).toBe(false);
- equal('validate@some.', 'validate@some.', fixture);
- expect(component.form.valid).toBe(false);
+ equal('validate@some.', 'validate@some.', fixture);
+ expect(component.form.valid).toBe(false);
- equal('validate@some.e', 'validate@some.e', fixture);
- expect(component.form.valid).toBe(true);
+ equal('validate@some.e', 'validate@some.e', fixture);
+ expect(component.form.valid).toBe(true);
- equal('validate@some.eu', 'validate@some.eu', fixture);
- expect(component.form.valid).toBe(true);
+ equal('validate@some.eu', 'validate@some.eu', fixture);
+ expect(component.form.valid).toBe(true);
- equal('validate@some.com', 'validate@some.com', fixture);
- expect(component.form.valid).toBe(true);
- });
+ equal('validate@some.com', 'validate@some.com', fixture);
+ expect(component.form.valid).toBe(true);
});
});
diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
index 16d8b5b8..f2d53679 100644
--- a/src/app/options/options.component.ts
+++ b/src/app/options/options.component.ts
@@ -5,7 +5,6 @@ import { initialConfig, NgxMaskDirective, NgxMaskPipe } from 'ngx-mask';
import { HighlightModule } from 'ngx-highlightjs';
import { AssetPipe } from '@libraries/asset/asset.pipe';
import { IsEmptyPipe } from '@open-source/is-empty/is-empty.pipe';
-import { ColorPipe } from '@open-source/color/color.pipe';
import { CardContentComponent } from '../shared/card-content/card-content.component';
import { ScrollService } from '@open-source/scroll/scroll.service';
import { AccordionService } from '@open-source/accordion/accordion.service';
@@ -29,7 +28,6 @@ import type { ComDoc, MaskOptions, TExample } from '@open-source/accordion/conte
NgxMaskPipe,
AssetPipe,
IsEmptyPipe,
- ColorPipe,
CardContentComponent,
NgOptimizedImage,
],
diff --git a/src/libraries b/src/libraries
index 339053d4..44bebdfb 160000
--- a/src/libraries
+++ b/src/libraries
@@ -1 +1 @@
-Subproject commit 339053d4cd781ffede25ca6049defbedd69c67b5
+Subproject commit 44bebdfba90c6534af67bf84d5f90f8f1b0b343b
diff --git a/src/styles.scss b/src/styles.scss
index b5c61c95..a065c93f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,3 +1,5 @@
+@use './libraries/styles/scroll-bar';
+
@tailwind base;
@tailwind components;
@tailwind utilities;
diff --git a/tsconfig.json b/tsconfig.json
index 49d5458f..e154a50d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -39,6 +39,7 @@
"isolatedModules": true
},
"angularCompilerOptions": {
+ "strictStandalone": true,
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"preserveWhitespaces": true,
@@ -48,7 +49,8 @@
"extendedDiagnostics": {
"checks": {
"invalidBananaInBox": "error",
- "nullishCoalescingNotNullable": "warning"
+ "nullishCoalescingNotNullable": "warning",
+ "unusedStandaloneImports": "suppress"
},
"defaultCategory": "suppress"
}