From 7d488ef4ef27734110e8beb4972b768de2d4e318 Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Mon, 25 Mar 2024 16:10:32 +0200
Subject: [PATCH 1/8] feat(ref: #1298, #1302, #1301): fix issues

---
 CHANGELOG.md                                  |  23 +-
 .../src/lib/ngx-mask-applier.service.ts       |   3 +-
 .../ngx-mask-lib/src/lib/ngx-mask.service.ts  |   7 +-
 .../ngx-mask-lib/src/test/add-prefix.spec.ts  |   9 +
 .../src/test/drop-special-charaters.spec.ts   |  26 +
 .../ngx-mask-lib/src/test/time-mask.spec.ts   |  30 +-
 src/app/options/options.component.html        | 525 ++++++++++++------
 src/app/options/options.component.ts          |  16 +-
 8 files changed, 461 insertions(+), 178 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9def9397..c54dc4d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,14 +1,23 @@
+# 17.0.6(2024-03-25)
+
+### Fix
+
+-   Fix ([#1301](https://github.com/JsDaddy/ngx-mask/issues/1301))
+-   Fix ([#1302](https://github.com/JsDaddy/ngx-mask/issues/1302))
+-   Fix ([#1298](https://github.com/JsDaddy/ngx-mask/issues/1298))
+
 # 17.0.5(2024-03-25)
 
 ### Fix
 
-https://github.com/JsDaddy/ngx-mask/issues/1295 
-https://github.com/JsDaddy/ngx-mask/issues/1292 
-https://github.com/JsDaddy/ngx-mask/issues/1314
-https://github.com/JsDaddy/ngx-mask/issues/1310 
-https://github.com/JsDaddy/ngx-mask/issues/1304 
-https://github.com/JsDaddy/ngx-mask/issues/1308 
-https://github.com/JsDaddy/ngx-mask/issues/1299 
+-   Fix ([#1295](https://github.com/JsDaddy/ngx-mask/issues/1295))
+-   Fix ([#1292](https://github.com/JsDaddy/ngx-mask/issues/1292))
+-   Fix ([#1314](https://github.com/JsDaddy/ngx-mask/issues/1314))
+-   Fix ([#1310](https://github.com/JsDaddy/ngx-mask/issues/1310))
+-   Fix ([#1304](https://github.com/JsDaddy/ngx-mask/issues/1304))
+-   Fix ([#1308](https://github.com/JsDaddy/ngx-mask/issues/1308))
+-   Fix ([#1299](https://github.com/JsDaddy/ngx-mask/issues/1299))
+
 
 # 17.0.4(2023-12-01)
 
diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
index 3cd2b535..4c1d675e 100644
--- a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
+++ b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
@@ -576,7 +576,8 @@ export class NgxMaskApplierService {
                             !this.specialCharacters.includes(
                                 inputValueSliceMinusTwoCursor as string
                             ) &&
-                            Number(inputValueSliceMinusTwoCursor) > monthsCount;
+                            Number(inputValueSliceMinusTwoCursor) > monthsCount &&
+                            maskExpression.includes('d0');
                         // 10<day<31 && month<12 for paste whole data
                         const day2monthPaste: boolean =
                             Number(inputValueSliceMinusThreeMinusOne) <= daysCount &&
diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
index ad6bee1c..7a8c7eae 100644
--- a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
+++ b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
@@ -204,8 +204,11 @@ export class NgxMaskService extends NgxMaskApplierService {
                 this.maskChanged ||
                 (this._previousValue === this._currentValue && justPasted);
         }
-
-        this._emitValue ? this.formControlResult(result) : '';
+        this._emitValue
+            ? this.writingValue
+                ? requestAnimationFrame(() => this.formControlResult(result))
+                : this.formControlResult(result)
+            : '';
         if (!this.showMaskTyped || (this.showMaskTyped && this.hiddenInput)) {
             if (this.hiddenInput) {
                 if (backspaced) {
diff --git a/projects/ngx-mask-lib/src/test/add-prefix.spec.ts b/projects/ngx-mask-lib/src/test/add-prefix.spec.ts
index a8dff092..dbc78b0f 100644
--- a/projects/ngx-mask-lib/src/test/add-prefix.spec.ts
+++ b/projects/ngx-mask-lib/src/test/add-prefix.spec.ts
@@ -130,4 +130,13 @@ describe('Directive: Mask (Add prefix)', () => {
         equal('KZ123123', 'KZ123 123', fixture);
         expect(component.form.value).toBe('123123');
     });
+
+    it('should remove prefix when setValue', () => {
+        component.mask = '000 000';
+        component.prefix = 'KZ';
+        component.dropSpecialCharacters = false;
+        component.form.setValue('KZ123123');
+        equal('KZ123123', 'KZ123 123', fixture);
+        expect(component.form.value).toBe('123123');
+    });
 });
diff --git a/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts b/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts
index a3a6fcf3..1d32980b 100644
--- a/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts
+++ b/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts
@@ -126,4 +126,30 @@ describe('Directive: Mask (Drop special characters)', () => {
         equal('1234567890', '(123) 456-7890', fixture);
         expect(component.form.valid).toBe(true);
     });
+
+    it('dropSpecialCharacter = false test for valid with setValue', () => {
+        component.mask = '(000) 000-0000';
+        component.dropSpecialCharacters = false;
+        component.validation = true;
+        equal('1', '(1', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('12', '(12', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('123', '(123', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('1234', '(123) 4', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('12345', '(123) 45', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('123456', '(123) 456', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('1234567', '(123) 456-7', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('12345678', '(123) 456-78', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('123456789', '(123) 456-789', fixture);
+        expect(component.form.valid).toBeFalsy();
+        equal('1234567890', '(123) 456-7890', fixture);
+        expect(component.form.valid).toBeTrue();
+    });
 });
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 2fe04c8f..872c2737 100644
--- a/projects/ngx-mask-lib/src/test/time-mask.spec.ts
+++ b/projects/ngx-mask-lib/src/test/time-mask.spec.ts
@@ -457,9 +457,31 @@ describe('Directive: Mask (Time)', () => {
         equal('442000', '04/04/2000', fixture);
     });
 
-    it('Date (Hh:m0 leadZero)', () => {
-        component.mask = 'Hh:m0';
-        component.leadZeroDateTime = true;
-        equal('49', '04:09', fixture);
+    it('Date (0000-M0)', () => {
+        component.mask = '0000-M0';
+        equal('1', '1', fixture);
+        equal('12', '12', fixture);
+        equal('123', '123', fixture);
+        equal('1234', '1234', fixture);
+        equal('12341', '1234-1', fixture);
+        equal('123412', '1234-12', fixture);
+    });
+    it('Date (0000/M0)', () => {
+        component.mask = '0000/M0';
+        equal('1', '1', fixture);
+        equal('12', '12', fixture);
+        equal('123', '123', fixture);
+        equal('1234', '1234', fixture);
+        equal('12341', '1234/1', fixture);
+        equal('123412', '1234/12', fixture);
+    });
+    it('Date (0000:M0)', () => {
+        component.mask = '0000:M0';
+        equal('1', '1', fixture);
+        equal('12', '12', fixture);
+        equal('123', '123', fixture);
+        equal('1234', '1234', fixture);
+        equal('12341', '1234:1', fixture);
+        equal('123412', '1234:12', fixture);
     });
 });
diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
index 47bb32a3..0be8977e 100644
--- a/src/app/options/options.component.html
+++ b/src/app/options/options.component.html
@@ -1,165 +1,364 @@
-<section class="content column bg-full-white">
-    @for (tile of cardDocs(); track tile.id; let i = $index) {
-        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>
-            <div class="mr-title title row uppercase ls-25">
-                {{ tile.header }}
-            </div>
+<input
+    type="text"
+    mask="M0-d0-0000"
+    [dropSpecialCharacters]="false"
+    [leadZeroDateTime]="true"
+    [showMaskTyped]="true"
+    placeholder="dd-MM-yyyy" />
+<input
+    type="text"
+    mask="d0-M0-0000"
+    [dropSpecialCharacters]="false"
+    [leadZeroDateTime]="true"
+    [showMaskTyped]="true"
+    placeholder="dd-MM-yyyy" />
 
-            <div class="cards-block row" [id]="tile.anchor">
-                <div class="light-card bg-full-white pd-15">
-                    <div class="light-title row ai-c">
-                        <img
-                            width="20"
-                            height="20"
-                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"
-                            alt="Hand with box" />
-                        <span class="span">Usage</span>
-                    </div>
-                    <span class="source uppercase ls-25 full-white span">Source code</span>
-                    <div class="white-input">
-                        <pre class="row">
-                <code [highlight]="tile.code" class="input-view bg-white"></code>
-                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
-              </pre>
-                    </div>
-                </div>
-                <ng-container
-                    *ngTemplateOutlet="
-                        exampleTmpl;
-                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }
-                    "></ng-container>
-            </div>
-        </div>
-    }
-</section>
+<!--<input [formControl]="testValue" type="text" [mask]="'separator.2'" />-->
 
-<ng-template #exampleTmpl let-ex let-placeholder="placeholder">
-    @if (!ex._pipe) {
-        <div class="dark-card bg-black">
-            @if (
-                !ex._thousandSeparator &&
-                !ex._dropSpecialCharacters &&
-                !ex._inputTransformFn &&
-                !ex.outputTransformFn &&
-                !ex._keepCharacterPositions
-            ) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        prefix="{{ ex._prefix }}"
-                        suffix="{{ ex._suffix }}"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        mask="{{ ex._mask || '' }}"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"
-                        [specialCharacters]="ex._specialCharacters || null"
-                        [shownMaskExpression]="ex._shownMaskExpression || null"
-                        [(ngModel)]="ex.control.model"
-                        [apm]="ex._apm || false"
-                        [decimalMarker]="ex._decimalMarker"
-                        [leadZero]="ex._leadZero || null"
-                        [validation]="ex._validation || null"
-                        [showMaskTyped]="ex._showMaskTyped || null"
-                        [clearIfNotMatch]="ex._clearIfNotMatch || null"
-                        [hiddenInput]="ex._hiddenInput"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._dropSpecialCharacters) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        [keepCharacterPositions]="ex._keepCharacterPositions"
-                        [prefix]="ex._prefix"
-                        [suffix]="ex._suffix"
-                        mask="{{ ex._mask || '' }}"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        [formControl]="ex.control.form"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._keepCharacterPositions) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        [keepCharacterPositions]="ex._keepCharacterPositions"
-                        [showMaskTyped]="ex._showMaskTyped"
-                        [prefix]="ex._prefix || ''"
-                        [suffix]="ex._suffix || ''"
-                        mask="{{ ex._mask || '' }}"
-                        [(ngModel)]="ex.control.model"
-                        [formControl]="ex.control.form"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._thousandSeparator) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        mask="{{ ex._mask || '' }}"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [(ngModel)]="ex.control.model"
-                        [decimalMarker]="ex._decimalMarker || '.'"
-                        [leadZero]="ex._leadZero || null"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._inputTransformFn || ex._outputTransformFn) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        mask="{{ ex._mask || '' }}"
-                        [inputTransformFn]="ex._inputTransformFn"
-                        [outputTransformFn]="ex._outputTransformFn || ''"
-                        [(ngModel)]="ex.control.model"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        [decimalMarker]="ex._decimalMarker || '.'"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (!ex._validation) {
-                <div>
-                    <div class="card-content row">
-                        <jsdaddy-open-source-card-content
-                            value="{{ ex.control.form.value | isEmpty }}"
-                            title="Form Control:"
-                            color="yellow-view" />
-                        <jsdaddy-open-source-card-content
-                            value="{{ ex.control.model | isEmpty }}"
-                            title="Ng Model:"
-                            color="yellow-view" />
-                    </div>
-                    <jsdaddy-open-source-card-content
-                        value="{{ ex._mask }}"
-                        title="Mask:"
-                        color="green-view" />
-                </div>
-            } @else {
-                <jsdaddy-open-source-card-content
-                    value="{{ ex.control.form.errors | json }}"
-                    title="Form Control:"
-                    color="yellow-view" />
-                <jsdaddy-open-source-card-content
-                    value="{{ ex.control.form.errors | json }}"
-                    title="Mask:"
-                    color="green-view" />
-            }
-        </div>
-    } @else {
-        <div class="dark-card bg-black">
-            <jsdaddy-open-source-card-content
-                value="{{ phone | mask: '(000) 000-0000' }}"
-                title=""
-                color="" />
-            <jsdaddy-open-source-card-content
-                value="(000) 000-0000"
-                title="Mask:"
-                color="green-view" />
-            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />
-        </div>
-    }
-</ng-template>
+<!--<button type="button" (click)="displayValue()">Display value</button>-->
+<!--<br />-->
+<!--<input prefix="KZ" [mask]="mask" [dropSpecialCharacters]="true" [formControl]="control" />-->
+
+<!--<div>value: {{ control.value }}</div>-->
+
+<!-- -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
+<!--<input-->
+<!--    mask="(000) 000-0000"-->
+<!--    [dropSpecialCharacters]="false"-->
+<!--    [formControl]="widthDropSpecialCharacters" />-->
+<!--<br />-->
+<!--<input mask="(000) 000-0000" [formControl]="widthoutDropSpecialCharacters" />-->
+
+<!--<div>valid: {{ widthDropSpecialCharacters.valid }}</div>-->
+
+<!--<div>valid: {{ widthoutDropSpecialCharacters.valid }}</div>-->
+<!--<section class="content column bg-full-white">-->
+<!--    @for (tile of cardDocs(); track tile.id; let i = $index) {-->
+<!--        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>-->
+<!--            <div class="mr-title title row uppercase ls-25">-->
+<!--                {{ tile.header }}-->
+<!--            </div>-->
+
+<!--            <div class="cards-block row" [id]="tile.anchor">-->
+<!--                <div class="light-card bg-full-white pd-15">-->
+<!--                    <div class="light-title row ai-c">-->
+<!--                        <img-->
+<!--                            width="20"-->
+<!--                            height="20"-->
+<!--                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"-->
+<!--                            alt="Hand with box" />-->
+<!--                        <span class="span">Usage</span>-->
+<!--                    </div>-->
+<!--                    <span class="source uppercase ls-25 full-white span">Source code</span>-->
+<!--                    <div class="white-input">-->
+<!--                        <pre class="row">-->
+<!--                <code [highlight]="tile.code" class="input-view bg-white"></code>-->
+<!--                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />-->
+<!--              </pre>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <ng-container-->
+<!--                    *ngTemplateOutlet="-->
+<!--                        exampleTmpl;-->
+<!--                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }-->
+<!--                    "></ng-container>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--    }-->
+<!--</section>-->
+
+<!--<ng-template #exampleTmpl let-ex let-placeholder="placeholder">-->
+<!--    @if (!ex._pipe) {-->
+<!--        <div class="dark-card bg-black">-->
+<!--            @if (-->
+<!--                !ex._thousandSeparator &&-->
+<!--                !ex._dropSpecialCharacters &&-->
+<!--                !ex._inputTransformFn &&-->
+<!--                !ex.outputTransformFn &&-->
+<!--                !ex._keepCharacterPositions-->
+<!--            ) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        prefix="{{ ex._prefix }}"-->
+<!--                        suffix="{{ ex._suffix }}"-->
+<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"-->
+<!--                        [specialCharacters]="ex._specialCharacters || null"-->
+<!--                        [shownMaskExpression]="ex._shownMaskExpression || null"-->
+<!--                        [(ngModel)]="ex.control.model"-->
+<!--                        [apm]="ex._apm || false"-->
+<!--                        [decimalMarker]="ex._decimalMarker"-->
+<!--                        [leadZero]="ex._leadZero || null"-->
+<!--                        [validation]="ex._validation || null"-->
+<!--                        [showMaskTyped]="ex._showMaskTyped || null"-->
+<!--                        [clearIfNotMatch]="ex._clearIfNotMatch || null"-->
+<!--                        [hiddenInput]="ex._hiddenInput"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (ex._dropSpecialCharacters) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        [keepCharacterPositions]="ex._keepCharacterPositions"-->
+<!--                        [prefix]="ex._prefix"-->
+<!--                        [suffix]="ex._suffix"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (ex._keepCharacterPositions) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        [keepCharacterPositions]="ex._keepCharacterPositions"-->
+<!--                        [showMaskTyped]="ex._showMaskTyped"-->
+<!--                        [prefix]="ex._prefix || ''"-->
+<!--                        [suffix]="ex._suffix || ''"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [(ngModel)]="ex.control.model"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (ex._thousandSeparator) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        [(ngModel)]="ex.control.model"-->
+<!--                        [decimalMarker]="ex._decimalMarker || '.'"-->
+<!--                        [leadZero]="ex._leadZero || null"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (ex._inputTransformFn || ex._outputTransformFn) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [inputTransformFn]="ex._inputTransformFn"-->
+<!--                        [outputTransformFn]="ex._outputTransformFn || ''"-->
+<!--                        [(ngModel)]="ex.control.model"-->
+<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
+<!--                        [decimalMarker]="ex._decimalMarker || '.'"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (!ex._validation) {-->
+<!--                <div>-->
+<!--                    <div class="card-content row">-->
+<!--                        <jsdaddy-open-source-card-content-->
+<!--                            value="{{ ex.control.form.value | isEmpty }}"-->
+<!--                            title="Form Control:"-->
+<!--                            color="yellow-view" />-->
+<!--                        <jsdaddy-open-source-card-content-->
+<!--                            value="{{ ex.control.model | isEmpty }}"-->
+<!--                            title="Ng Model:"-->
+<!--                            color="yellow-view" />-->
+<!--                    </div>-->
+<!--                    <jsdaddy-open-source-card-content-->
+<!--                        value="{{ ex._mask }}"-->
+<!--                        title="Mask:"-->
+<!--                        color="green-view" />-->
+<!--                </div>-->
+<!--            } @else {-->
+<!--                <jsdaddy-open-source-card-content-->
+<!--                    value="{{ ex.control.form.errors | json }}"-->
+<!--                    title="Form Control:"-->
+<!--                    color="yellow-view" />-->
+<!--                <jsdaddy-open-source-card-content-->
+<!--                    value="{{ ex.control.form.errors | json }}"-->
+<!--                    title="Mask:"-->
+<!--                    color="green-view" />-->
+<!--            }-->
+<!--        </div>-->
+<!--    } @else {-->
+<!--        <div class="dark-card bg-black">-->
+<!--            <jsdaddy-open-source-card-content-->
+<!--                value="{{ phone | mask: '(000) 000-0000' }}"-->
+<!--                title=""-->
+<!--                color="" />-->
+<!--            <jsdaddy-open-source-card-content-->
+<!--                value="(000) 000-0000"-->
+<!--                title="Mask:"-->
+<!--                color="green-view" />-->
+<!--            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />-->
+<!--        </div>-->
+<!--    }-->
+<!--</ng-template>-->
+<!--<section class="content column bg-full-white">-->
+<!--    @for (tile of cardDocs(); track tile.id; let i = $index) {-->
+<!--        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>-->
+<!--            <div class="mr-title title row uppercase ls-25">-->
+<!--                {{ tile.header }}-->
+<!--            </div>-->
+
+<!--            <div class="cards-block row" [id]="tile.anchor">-->
+<!--                <div class="light-card bg-full-white pd-15">-->
+<!--                    <div class="light-title row ai-c">-->
+<!--                        <img-->
+<!--                            width="20"-->
+<!--                            height="20"-->
+<!--                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"-->
+<!--                            alt="Hand with box" />-->
+<!--                        <span class="span">Usage</span>-->
+<!--                    </div>-->
+<!--                    <span class="source uppercase ls-25 full-white span">Source code</span>-->
+<!--                    <div class="white-input">-->
+<!--                        <pre class="row">-->
+<!--                <code [highlight]="tile.code" class="input-view bg-white"></code>-->
+<!--                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />-->
+<!--              </pre>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <ng-container-->
+<!--                    *ngTemplateOutlet="-->
+<!--                        exampleTmpl;-->
+<!--                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }-->
+<!--                    "></ng-container>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--    }-->
+<!--</section>-->
+
+<!--<ng-template #exampleTmpl let-ex let-placeholder="placeholder">-->
+<!--    @if (!ex._pipe) {-->
+<!--        <div class="dark-card bg-black">-->
+<!--            @if (-->
+<!--                !ex._thousandSeparator &&-->
+<!--                !ex._dropSpecialCharacters &&-->
+<!--                !ex._inputTransformFn &&-->
+<!--                !ex.outputTransformFn &&-->
+<!--                !ex._keepCharacterPositions-->
+<!--            ) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        prefix="{{ ex._prefix }}"-->
+<!--                        suffix="{{ ex._suffix }}"-->
+<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"-->
+<!--                        [specialCharacters]="ex._specialCharacters || null"-->
+<!--                        [shownMaskExpression]="ex._shownMaskExpression || null"-->
+<!--                        [(ngModel)]="ex.control.model"-->
+<!--                        [apm]="ex._apm || false"-->
+<!--                        [decimalMarker]="ex._decimalMarker"-->
+<!--                        [leadZero]="ex._leadZero || null"-->
+<!--                        [validation]="ex._validation || null"-->
+<!--                        [showMaskTyped]="ex._showMaskTyped || null"-->
+<!--                        [clearIfNotMatch]="ex._clearIfNotMatch || null"-->
+<!--                        [hiddenInput]="ex._hiddenInput"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (ex._dropSpecialCharacters) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        [keepCharacterPositions]="ex._keepCharacterPositions"-->
+<!--                        [prefix]="ex._prefix"-->
+<!--                        [suffix]="ex._suffix"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (ex._keepCharacterPositions) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        [keepCharacterPositions]="ex._keepCharacterPositions"-->
+<!--                        [showMaskTyped]="ex._showMaskTyped"-->
+<!--                        [prefix]="ex._prefix || ''"-->
+<!--                        [suffix]="ex._suffix || ''"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [(ngModel)]="ex.control.model"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (ex._thousandSeparator) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        [(ngModel)]="ex.control.model"-->
+<!--                        [decimalMarker]="ex._decimalMarker || '.'"-->
+<!--                        [leadZero]="ex._leadZero || null"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (ex._inputTransformFn || ex._outputTransformFn) {-->
+<!--                <div class="dark-input pd-15">-->
+<!--                    <input-->
+<!--                        [placeholder]="placeholder"-->
+<!--                        mask="{{ ex._mask || '' }}"-->
+<!--                        [inputTransformFn]="ex._inputTransformFn"-->
+<!--                        [outputTransformFn]="ex._outputTransformFn || ''"-->
+<!--                        [(ngModel)]="ex.control.model"-->
+<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
+<!--                        [formControl]="ex.control.form"-->
+<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
+<!--                        [decimalMarker]="ex._decimalMarker || '.'"-->
+<!--                        class="customDarkInput bg-black white span" />-->
+<!--                </div>-->
+<!--            }-->
+<!--            @if (!ex._validation) {-->
+<!--                <div>-->
+<!--                    <div class="card-content row">-->
+<!--                        <jsdaddy-open-source-card-content-->
+<!--                            value="{{ ex.control.form.value | isEmpty }}"-->
+<!--                            title="Form Control:"-->
+<!--                            color="yellow-view" />-->
+<!--                        <jsdaddy-open-source-card-content-->
+<!--                            value="{{ ex.control.model | isEmpty }}"-->
+<!--                            title="Ng Model:"-->
+<!--                            color="yellow-view" />-->
+<!--                    </div>-->
+<!--                    <jsdaddy-open-source-card-content-->
+<!--                        value="{{ ex._mask }}"-->
+<!--                        title="Mask:"-->
+<!--                        color="green-view" />-->
+<!--                </div>-->
+<!--            } @else {-->
+<!--                <jsdaddy-open-source-card-content-->
+<!--                    value="{{ ex.control.form.errors | json }}"-->
+<!--                    title="Form Control:"-->
+<!--                    color="yellow-view" />-->
+<!--                <jsdaddy-open-source-card-content-->
+<!--                    value="{{ ex.control.form.errors | json }}"-->
+<!--                    title="Mask:"-->
+<!--                    color="green-view" />-->
+<!--            }-->
+<!--        </div>-->
+<!--    } @else {-->
+<!--        <div class="dark-card bg-black">-->
+<!--            <jsdaddy-open-source-card-content-->
+<!--                value="{{ phone | mask: '(000) 000-0000' }}"-->
+<!--                title=""-->
+<!--                color="" />-->
+<!--            <jsdaddy-open-source-card-content-->
+<!--                value="(000) 000-0000"-->
+<!--                title="Mask:"-->
+<!--                color="green-view" />-->
+<!--            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />-->
+<!--        </div>-->
+<!--    }-->
+<!--</ng-template>-->
diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
index 86e8009c..7938d26a 100644
--- a/src/app/options/options.component.ts
+++ b/src/app/options/options.component.ts
@@ -1,6 +1,6 @@
 import { Component, effect, ElementRef, inject, input, viewChildren } from '@angular/core';
 import { JsonPipe, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgxMaskDirective, NgxMaskPipe } from 'ngx-mask';
 import { HighlightModule } from 'ngx-highlightjs';
 import { IComDoc, IMaskOptions, TExample } from '@open-source/accordion/content.interfaces';
@@ -50,10 +50,24 @@ export class OptionsComponent {
 
     public readonly activeCardId = toSignal(this.scrollService.activeCard$);
 
+    public control = new FormControl('KZ12312');
+    public widthDropSpecialCharacters = new FormControl('');
+    public widthoutDropSpecialCharacters = new FormControl('');
+    public testValue = new FormControl('');
+    public mask = '0000';
+    public formControl1 = new FormControl(100);
+    public formControl2 = new FormControl(123412);
+    public prefix1 = '$';
+    public prefix2 = '$';
     public constructor() {
         effect(() => {
             this.scrollService.onScroll(this.cards());
             this.accordionService.onChangeAccordion(this.cards());
         });
+        this.widthDropSpecialCharacters.setValue('1234567890');
+        this.widthoutDropSpecialCharacters.setValue('1234567890');
+    }
+    public displayValue() {
+        console.log(typeof this.testValue.value);
     }
 }

From c617e72ef8741fb141944ebb31463151bfdfbd03 Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Tue, 26 Mar 2024 17:13:55 +0200
Subject: [PATCH 2/8] fix(ref: #1292): fix percent mask with zero at start

---
 .../src/lib/ngx-mask-applier.service.ts       | 15 ++++---
 .../ngx-mask-lib/src/test/percent.spec.ts     | 43 +++++++++++++++++++
 src/app/options/options.component.html        | 39 +++++++++++------
 src/app/options/options.component.ts          |  2 +-
 4 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
index 4c1d675e..d5000a03 100644
--- a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
+++ b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
@@ -724,7 +724,6 @@ export class NgxMaskApplierService {
         let res = `${this.prefix}${onlySpecial ? MaskExpression.EMPTY_STRING : result}${
             this.showMaskTyped ? '' : this.suffix
         }`;
-
         if (result.length === 0) {
             res = !this.dropSpecialCharacters ? `${this.prefix}${result}` : `${result}`;
         }
@@ -942,18 +941,24 @@ export class NgxMaskApplierService {
             typeof this.decimalMarker === 'string'
                 ? value.indexOf(this.decimalMarker)
                 : value.indexOf(MaskExpression.DOT);
+        const emptyOrMinus =
+            this.allowNegativeNumbers && value.includes(MaskExpression.MINUS) ? '-' : '';
         if (decimalIndex === -1) {
-            const parsedValue = parseInt(value, 10);
-            return isNaN(parsedValue) ? MaskExpression.EMPTY_STRING : parsedValue.toString();
+            const parsedValue = parseInt(emptyOrMinus ? value.slice(1, value.length) : value, 10);
+            return isNaN(parsedValue)
+                ? MaskExpression.EMPTY_STRING
+                : emptyOrMinus + parsedValue.toString();
         } else {
-            const integerPart = parseInt(value.substring(0, decimalIndex), 10);
+            const integerPart = parseInt(value.replace('-', '').substring(0, decimalIndex), 10);
             const decimalPart = value.substring(decimalIndex + 1);
             const integerString = isNaN(integerPart) ? '' : integerPart.toString();
+
             const decimal =
                 typeof this.decimalMarker === 'string' ? this.decimalMarker : MaskExpression.DOT;
+
             return integerString === MaskExpression.EMPTY_STRING
                 ? MaskExpression.EMPTY_STRING
-                : integerString + decimal + decimalPart;
+                : emptyOrMinus + integerString + decimal + decimalPart;
         }
     }
 }
diff --git a/projects/ngx-mask-lib/src/test/percent.spec.ts b/projects/ngx-mask-lib/src/test/percent.spec.ts
index 3e62d808..ffae64ae 100644
--- a/projects/ngx-mask-lib/src/test/percent.spec.ts
+++ b/projects/ngx-mask-lib/src/test/percent.spec.ts
@@ -233,16 +233,44 @@ describe('Directive: Mask (Percent)', () => {
         component.allowNegativeNumbers = true;
 
         equal('-', '-', fixture);
+        equal('-0', '-0', fixture);
         equal('-1', '-1', fixture);
         equal('-12', '-12', fixture);
         expect(component.form.value).toBe('-12');
     });
 
+    it('percent with allowNegative = true', () => {
+        component.mask = 'percent.1';
+        component.allowNegativeNumbers = true;
+
+        equal('-', '-', fixture);
+        equal('-0', '-0', fixture);
+        equal('-0.', '-0.', fixture);
+        equal('-0.1', '-0.1', fixture);
+        expect(component.form.value).toBe('-0.1');
+    });
+
+    it('percent with allowNegative = true', () => {
+        component.mask = 'percent.1';
+        component.decimalMarker = ',';
+        component.allowNegativeNumbers = true;
+
+        equal('-', '-', fixture);
+        equal('-0', '-0', fixture);
+        equal('-0,', '-0,', fixture);
+        equal('-0,1', '-0,1', fixture);
+        expect(component.form.value).toBe('-0.1');
+    });
+
     it('percent 2 with allowNegative = true', () => {
         component.mask = 'percent.2';
         component.allowNegativeNumbers = true;
 
         equal('-', '-', fixture);
+        equal('-0', '-0', fixture);
+        equal('-0.', '-0.', fixture);
+        equal('-0.1', '-0.1', fixture);
+        equal('-0.12', '-0.12', fixture);
         equal('-1', '-1', fixture);
         equal('-12', '-12', fixture);
         equal('-12.3', '-12.3', fixture);
@@ -255,6 +283,11 @@ describe('Directive: Mask (Percent)', () => {
         component.allowNegativeNumbers = true;
 
         equal('-', '-', fixture);
+        equal('-0', '-0', fixture);
+        equal('-0.', '-0.', fixture);
+        equal('-0.1', '-0.1', fixture);
+        equal('-0.12', '-0.12', fixture);
+        equal('-0.123', '-0.123', fixture);
         equal('-1', '-1', fixture);
         equal('-12', '-12', fixture);
         equal('-12.3', '-12.3', fixture);
@@ -269,6 +302,7 @@ describe('Directive: Mask (Percent)', () => {
         component.allowNegativeNumbers = true;
 
         equal('-', '-', fixture);
+        equal('-0', '-0', fixture);
         equal('-1', '-1', fixture);
         equal('-12', '-12', fixture);
         expect(component.form.value).toBe('-12');
@@ -280,6 +314,10 @@ describe('Directive: Mask (Percent)', () => {
         component.allowNegativeNumbers = true;
 
         equal('-', '-', fixture);
+        equal('-0', '-0', fixture);
+        equal('-0,', '-0,', fixture);
+        equal('-0,1', '-0,1', fixture);
+        equal('-0,12', '-0,12', fixture);
         equal('-1', '-1', fixture);
         equal('-12', '-12', fixture);
         equal('-12,3', '-12,3', fixture);
@@ -293,6 +331,11 @@ describe('Directive: Mask (Percent)', () => {
         component.decimalMarker = ',';
 
         equal('-', '-', fixture);
+        equal('-0', '-0', fixture);
+        equal('-0,', '-0,', fixture);
+        equal('-0,1', '-0,1', fixture);
+        equal('-0,12', '-0,12', fixture);
+        equal('-0,123', '-0,123', fixture);
         equal('-1', '-1', fixture);
         equal('-12', '-12', fixture);
         equal('-12,3', '-12,3', fixture);
diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
index 0be8977e..fa0b5761 100644
--- a/src/app/options/options.component.html
+++ b/src/app/options/options.component.html
@@ -1,17 +1,30 @@
+percent2 , <input mask="percent.2" [allowNegativeNumbers]="true" [decimalMarker]="','" /> <br />
+percent2 . <input mask="percent.2" [allowNegativeNumbers]="true" [decimalMarker]="'.'" /> <br />
+percent
+<input mask="percent" [allowNegativeNumbers]="true" />
+<br />
+leadzero
 <input
-    type="text"
-    mask="M0-d0-0000"
-    [dropSpecialCharacters]="false"
-    [leadZeroDateTime]="true"
-    [showMaskTyped]="true"
-    placeholder="dd-MM-yyyy" />
-<input
-    type="text"
-    mask="d0-M0-0000"
-    [dropSpecialCharacters]="false"
-    [leadZeroDateTime]="true"
-    [showMaskTyped]="true"
-    placeholder="dd-MM-yyyy" />
+    mask="separator.2"
+    [leadZero]="true"
+    decimalMarker="."
+    [thousandSeparator]="''"
+    [formControl]="testValue" />
+{{ testValue.value }}
+<!--<input-->
+<!--    type="text"-->
+<!--    mask="M0-d0-0000"-->
+<!--    [dropSpecialCharacters]="false"-->
+<!--    [leadZeroDateTime]="true"-->
+<!--    [showMaskTyped]="true"-->
+<!--    placeholder="dd-MM-yyyy" />-->
+<!--<input-->
+<!--    type="text"-->
+<!--    mask="d0-M0-0000"-->
+<!--    [dropSpecialCharacters]="false"-->
+<!--    [leadZeroDateTime]="true"-->
+<!--    [showMaskTyped]="true"-->
+<!--    placeholder="dd-MM-yyyy" />-->
 
 <!--<input [formControl]="testValue" type="text" [mask]="'separator.2'" />-->
 
diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
index 7938d26a..83e546c5 100644
--- a/src/app/options/options.component.ts
+++ b/src/app/options/options.component.ts
@@ -53,7 +53,7 @@ export class OptionsComponent {
     public control = new FormControl('KZ12312');
     public widthDropSpecialCharacters = new FormControl('');
     public widthoutDropSpecialCharacters = new FormControl('');
-    public testValue = new FormControl('');
+    public testValue = new FormControl('100');
     public mask = '0000';
     public formControl1 = new FormControl(100);
     public formControl2 = new FormControl(123412);

From ecb14c828635796d6d3905a5a352c5a921ab1412 Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Wed, 27 Mar 2024 11:55:52 +0200
Subject: [PATCH 3/8] fix(ref: no-ref): remove unusable code

---
 CHANGELOG.md                           |   3 +-
 projects/ngx-mask-lib/package.json     |   2 +-
 src/app/options/options.component.html | 699 ++++++++++++-------------
 src/app/options/options.component.ts   |  16 +-
 4 files changed, 330 insertions(+), 390 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c54dc4d7..d6243fff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,11 @@
-# 17.0.6(2024-03-25)
+# 17.0.6(2024-03-27)
 
 ### Fix
 
 -   Fix ([#1301](https://github.com/JsDaddy/ngx-mask/issues/1301))
 -   Fix ([#1302](https://github.com/JsDaddy/ngx-mask/issues/1302))
 -   Fix ([#1298](https://github.com/JsDaddy/ngx-mask/issues/1298))
+-   Fix ([#1292](https://github.com/JsDaddy/ngx-mask/issues/1292))
 
 # 17.0.5(2024-03-25)
 
diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json
index 3e6c603a..1fc274d4 100644
--- a/projects/ngx-mask-lib/package.json
+++ b/projects/ngx-mask-lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "17.0.5",
+    "version": "17.0.6",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",
diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
index fa0b5761..51075c16 100644
--- a/src/app/options/options.component.html
+++ b/src/app/options/options.component.html
@@ -1,377 +1,330 @@
-percent2 , <input mask="percent.2" [allowNegativeNumbers]="true" [decimalMarker]="','" /> <br />
-percent2 . <input mask="percent.2" [allowNegativeNumbers]="true" [decimalMarker]="'.'" /> <br />
-percent
-<input mask="percent" [allowNegativeNumbers]="true" />
-<br />
-leadzero
-<input
-    mask="separator.2"
-    [leadZero]="true"
-    decimalMarker="."
-    [thousandSeparator]="''"
-    [formControl]="testValue" />
-{{ testValue.value }}
-<!--<input-->
-<!--    type="text"-->
-<!--    mask="M0-d0-0000"-->
-<!--    [dropSpecialCharacters]="false"-->
-<!--    [leadZeroDateTime]="true"-->
-<!--    [showMaskTyped]="true"-->
-<!--    placeholder="dd-MM-yyyy" />-->
-<!--<input-->
-<!--    type="text"-->
-<!--    mask="d0-M0-0000"-->
-<!--    [dropSpecialCharacters]="false"-->
-<!--    [leadZeroDateTime]="true"-->
-<!--    [showMaskTyped]="true"-->
-<!--    placeholder="dd-MM-yyyy" />-->
+<section class="content column bg-full-white">
+    @for (tile of cardDocs(); track tile.id; let i = $index) {
+        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>
+            <div class="mr-title title row uppercase ls-25">
+                {{ tile.header }}
+            </div>
 
-<!--<input [formControl]="testValue" type="text" [mask]="'separator.2'" />-->
+            <div class="cards-block row" [id]="tile.anchor">
+                <div class="light-card bg-full-white pd-15">
+                    <div class="light-title row ai-c">
+                        <img
+                            width="20"
+                            height="20"
+                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"
+                            alt="Hand with box" />
+                        <span class="span">Usage</span>
+                    </div>
+                    <span class="source uppercase ls-25 full-white span">Source code</span>
+                    <div class="white-input">
+                        <pre class="row">
+                <code [highlight]="tile.code" class="input-view bg-white"></code>
+                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
+              </pre>
+                    </div>
+                </div>
+                <ng-container
+                    *ngTemplateOutlet="
+                        exampleTmpl;
+                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }
+                    "></ng-container>
+            </div>
+        </div>
+    }
+</section>
 
-<!--<button type="button" (click)="displayValue()">Display value</button>-->
-<!--<br />-->
-<!--<input prefix="KZ" [mask]="mask" [dropSpecialCharacters]="true" [formControl]="control" />-->
+<ng-template #exampleTmpl let-ex let-placeholder="placeholder">
+    @if (!ex._pipe) {
+        <div class="dark-card bg-black">
+            @if (
+                !ex._thousandSeparator &&
+                !ex._dropSpecialCharacters &&
+                !ex._inputTransformFn &&
+                !ex.outputTransformFn &&
+                !ex._keepCharacterPositions
+            ) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        prefix="{{ ex._prefix }}"
+                        suffix="{{ ex._suffix }}"
+                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
+                        mask="{{ ex._mask || '' }}"
+                        [thousandSeparator]="ex._thousandSeparator || ' '"
+                        [formControl]="ex.control.form"
+                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"
+                        [specialCharacters]="ex._specialCharacters || null"
+                        [shownMaskExpression]="ex._shownMaskExpression || null"
+                        [(ngModel)]="ex.control.model"
+                        [apm]="ex._apm || false"
+                        [decimalMarker]="ex._decimalMarker"
+                        [leadZero]="ex._leadZero || null"
+                        [validation]="ex._validation || null"
+                        [showMaskTyped]="ex._showMaskTyped || null"
+                        [clearIfNotMatch]="ex._clearIfNotMatch || null"
+                        [hiddenInput]="ex._hiddenInput"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (ex._dropSpecialCharacters) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        [keepCharacterPositions]="ex._keepCharacterPositions"
+                        [prefix]="ex._prefix"
+                        [suffix]="ex._suffix"
+                        mask="{{ ex._mask || '' }}"
+                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
+                        [formControl]="ex.control.form"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (ex._keepCharacterPositions) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        [keepCharacterPositions]="ex._keepCharacterPositions"
+                        [showMaskTyped]="ex._showMaskTyped"
+                        [prefix]="ex._prefix || ''"
+                        [suffix]="ex._suffix || ''"
+                        mask="{{ ex._mask || '' }}"
+                        [(ngModel)]="ex.control.model"
+                        [formControl]="ex.control.form"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (ex._thousandSeparator) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        mask="{{ ex._mask || '' }}"
+                        [thousandSeparator]="ex._thousandSeparator || ' '"
+                        [formControl]="ex.control.form"
+                        [(ngModel)]="ex.control.model"
+                        [decimalMarker]="ex._decimalMarker || '.'"
+                        [leadZero]="ex._leadZero || null"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (ex._inputTransformFn || ex._outputTransformFn) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        mask="{{ ex._mask || '' }}"
+                        [inputTransformFn]="ex._inputTransformFn"
+                        [outputTransformFn]="ex._outputTransformFn || ''"
+                        [(ngModel)]="ex.control.model"
+                        [thousandSeparator]="ex._thousandSeparator || ' '"
+                        [formControl]="ex.control.form"
+                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
+                        [decimalMarker]="ex._decimalMarker || '.'"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (!ex._validation) {
+                <div>
+                    <div class="card-content row">
+                        <jsdaddy-open-source-card-content
+                            value="{{ ex.control.form.value | isEmpty }}"
+                            title="Form Control:"
+                            color="yellow-view" />
+                        <jsdaddy-open-source-card-content
+                            value="{{ ex.control.model | isEmpty }}"
+                            title="Ng Model:"
+                            color="yellow-view" />
+                    </div>
+                    <jsdaddy-open-source-card-content
+                        value="{{ ex._mask }}"
+                        title="Mask:"
+                        color="green-view" />
+                </div>
+            } @else {
+                <jsdaddy-open-source-card-content
+                    value="{{ ex.control.form.errors | json }}"
+                    title="Form Control:"
+                    color="yellow-view" />
+                <jsdaddy-open-source-card-content
+                    value="{{ ex.control.form.errors | json }}"
+                    title="Mask:"
+                    color="green-view" />
+            }
+        </div>
+    } @else {
+        <div class="dark-card bg-black">
+            <jsdaddy-open-source-card-content
+                value="{{ phone | mask: '(000) 000-0000' }}"
+                title=""
+                color="" />
+            <jsdaddy-open-source-card-content
+                value="(000) 000-0000"
+                title="Mask:"
+                color="green-view" />
+            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />
+        </div>
+    }
+</ng-template>
+<section class="content column bg-full-white">
+    @for (tile of cardDocs(); track tile.id; let i = $index) {
+        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>
+            <div class="mr-title title row uppercase ls-25">
+                {{ tile.header }}
+            </div>
 
-<!--<div>value: {{ control.value }}</div>-->
+            <div class="cards-block row" [id]="tile.anchor">
+                <div class="light-card bg-full-white pd-15">
+                    <div class="light-title row ai-c">
+                        <img
+                            width="20"
+                            height="20"
+                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"
+                            alt="Hand with box" />
+                        <span class="span">Usage</span>
+                    </div>
+                    <span class="source uppercase ls-25 full-white span">Source code</span>
+                    <div class="white-input">
+                        <pre class="row">
+                <code [highlight]="tile.code" class="input-view bg-white"></code>
+                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
+              </pre>
+                    </div>
+                </div>
+                <ng-container
+                    *ngTemplateOutlet="
+                        exampleTmpl;
+                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }
+                    "></ng-container>
+            </div>
+        </div>
+    }
+</section>
 
-<!-- -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
-<!--<input-->
-<!--    mask="(000) 000-0000"-->
-<!--    [dropSpecialCharacters]="false"-->
-<!--    [formControl]="widthDropSpecialCharacters" />-->
-<!--<br />-->
-<!--<input mask="(000) 000-0000" [formControl]="widthoutDropSpecialCharacters" />-->
-
-<!--<div>valid: {{ widthDropSpecialCharacters.valid }}</div>-->
-
-<!--<div>valid: {{ widthoutDropSpecialCharacters.valid }}</div>-->
-<!--<section class="content column bg-full-white">-->
-<!--    @for (tile of cardDocs(); track tile.id; let i = $index) {-->
-<!--        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>-->
-<!--            <div class="mr-title title row uppercase ls-25">-->
-<!--                {{ tile.header }}-->
-<!--            </div>-->
-
-<!--            <div class="cards-block row" [id]="tile.anchor">-->
-<!--                <div class="light-card bg-full-white pd-15">-->
-<!--                    <div class="light-title row ai-c">-->
-<!--                        <img-->
-<!--                            width="20"-->
-<!--                            height="20"-->
-<!--                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"-->
-<!--                            alt="Hand with box" />-->
-<!--                        <span class="span">Usage</span>-->
-<!--                    </div>-->
-<!--                    <span class="source uppercase ls-25 full-white span">Source code</span>-->
-<!--                    <div class="white-input">-->
-<!--                        <pre class="row">-->
-<!--                <code [highlight]="tile.code" class="input-view bg-white"></code>-->
-<!--                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />-->
-<!--              </pre>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--                <ng-container-->
-<!--                    *ngTemplateOutlet="-->
-<!--                        exampleTmpl;-->
-<!--                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }-->
-<!--                    "></ng-container>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--    }-->
-<!--</section>-->
-
-<!--<ng-template #exampleTmpl let-ex let-placeholder="placeholder">-->
-<!--    @if (!ex._pipe) {-->
-<!--        <div class="dark-card bg-black">-->
-<!--            @if (-->
-<!--                !ex._thousandSeparator &&-->
-<!--                !ex._dropSpecialCharacters &&-->
-<!--                !ex._inputTransformFn &&-->
-<!--                !ex.outputTransformFn &&-->
-<!--                !ex._keepCharacterPositions-->
-<!--            ) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        prefix="{{ ex._prefix }}"-->
-<!--                        suffix="{{ ex._suffix }}"-->
-<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"-->
-<!--                        [specialCharacters]="ex._specialCharacters || null"-->
-<!--                        [shownMaskExpression]="ex._shownMaskExpression || null"-->
-<!--                        [(ngModel)]="ex.control.model"-->
-<!--                        [apm]="ex._apm || false"-->
-<!--                        [decimalMarker]="ex._decimalMarker"-->
-<!--                        [leadZero]="ex._leadZero || null"-->
-<!--                        [validation]="ex._validation || null"-->
-<!--                        [showMaskTyped]="ex._showMaskTyped || null"-->
-<!--                        [clearIfNotMatch]="ex._clearIfNotMatch || null"-->
-<!--                        [hiddenInput]="ex._hiddenInput"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (ex._dropSpecialCharacters) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        [keepCharacterPositions]="ex._keepCharacterPositions"-->
-<!--                        [prefix]="ex._prefix"-->
-<!--                        [suffix]="ex._suffix"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (ex._keepCharacterPositions) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        [keepCharacterPositions]="ex._keepCharacterPositions"-->
-<!--                        [showMaskTyped]="ex._showMaskTyped"-->
-<!--                        [prefix]="ex._prefix || ''"-->
-<!--                        [suffix]="ex._suffix || ''"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [(ngModel)]="ex.control.model"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (ex._thousandSeparator) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        [(ngModel)]="ex.control.model"-->
-<!--                        [decimalMarker]="ex._decimalMarker || '.'"-->
-<!--                        [leadZero]="ex._leadZero || null"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (ex._inputTransformFn || ex._outputTransformFn) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [inputTransformFn]="ex._inputTransformFn"-->
-<!--                        [outputTransformFn]="ex._outputTransformFn || ''"-->
-<!--                        [(ngModel)]="ex.control.model"-->
-<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
-<!--                        [decimalMarker]="ex._decimalMarker || '.'"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (!ex._validation) {-->
-<!--                <div>-->
-<!--                    <div class="card-content row">-->
-<!--                        <jsdaddy-open-source-card-content-->
-<!--                            value="{{ ex.control.form.value | isEmpty }}"-->
-<!--                            title="Form Control:"-->
-<!--                            color="yellow-view" />-->
-<!--                        <jsdaddy-open-source-card-content-->
-<!--                            value="{{ ex.control.model | isEmpty }}"-->
-<!--                            title="Ng Model:"-->
-<!--                            color="yellow-view" />-->
-<!--                    </div>-->
-<!--                    <jsdaddy-open-source-card-content-->
-<!--                        value="{{ ex._mask }}"-->
-<!--                        title="Mask:"-->
-<!--                        color="green-view" />-->
-<!--                </div>-->
-<!--            } @else {-->
-<!--                <jsdaddy-open-source-card-content-->
-<!--                    value="{{ ex.control.form.errors | json }}"-->
-<!--                    title="Form Control:"-->
-<!--                    color="yellow-view" />-->
-<!--                <jsdaddy-open-source-card-content-->
-<!--                    value="{{ ex.control.form.errors | json }}"-->
-<!--                    title="Mask:"-->
-<!--                    color="green-view" />-->
-<!--            }-->
-<!--        </div>-->
-<!--    } @else {-->
-<!--        <div class="dark-card bg-black">-->
-<!--            <jsdaddy-open-source-card-content-->
-<!--                value="{{ phone | mask: '(000) 000-0000' }}"-->
-<!--                title=""-->
-<!--                color="" />-->
-<!--            <jsdaddy-open-source-card-content-->
-<!--                value="(000) 000-0000"-->
-<!--                title="Mask:"-->
-<!--                color="green-view" />-->
-<!--            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />-->
-<!--        </div>-->
-<!--    }-->
-<!--</ng-template>-->
-<!--<section class="content column bg-full-white">-->
-<!--    @for (tile of cardDocs(); track tile.id; let i = $index) {-->
-<!--        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>-->
-<!--            <div class="mr-title title row uppercase ls-25">-->
-<!--                {{ tile.header }}-->
-<!--            </div>-->
-
-<!--            <div class="cards-block row" [id]="tile.anchor">-->
-<!--                <div class="light-card bg-full-white pd-15">-->
-<!--                    <div class="light-title row ai-c">-->
-<!--                        <img-->
-<!--                            width="20"-->
-<!--                            height="20"-->
-<!--                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"-->
-<!--                            alt="Hand with box" />-->
-<!--                        <span class="span">Usage</span>-->
-<!--                    </div>-->
-<!--                    <span class="source uppercase ls-25 full-white span">Source code</span>-->
-<!--                    <div class="white-input">-->
-<!--                        <pre class="row">-->
-<!--                <code [highlight]="tile.code" class="input-view bg-white"></code>-->
-<!--                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />-->
-<!--              </pre>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--                <ng-container-->
-<!--                    *ngTemplateOutlet="-->
-<!--                        exampleTmpl;-->
-<!--                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }-->
-<!--                    "></ng-container>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--    }-->
-<!--</section>-->
-
-<!--<ng-template #exampleTmpl let-ex let-placeholder="placeholder">-->
-<!--    @if (!ex._pipe) {-->
-<!--        <div class="dark-card bg-black">-->
-<!--            @if (-->
-<!--                !ex._thousandSeparator &&-->
-<!--                !ex._dropSpecialCharacters &&-->
-<!--                !ex._inputTransformFn &&-->
-<!--                !ex.outputTransformFn &&-->
-<!--                !ex._keepCharacterPositions-->
-<!--            ) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        prefix="{{ ex._prefix }}"-->
-<!--                        suffix="{{ ex._suffix }}"-->
-<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"-->
-<!--                        [specialCharacters]="ex._specialCharacters || null"-->
-<!--                        [shownMaskExpression]="ex._shownMaskExpression || null"-->
-<!--                        [(ngModel)]="ex.control.model"-->
-<!--                        [apm]="ex._apm || false"-->
-<!--                        [decimalMarker]="ex._decimalMarker"-->
-<!--                        [leadZero]="ex._leadZero || null"-->
-<!--                        [validation]="ex._validation || null"-->
-<!--                        [showMaskTyped]="ex._showMaskTyped || null"-->
-<!--                        [clearIfNotMatch]="ex._clearIfNotMatch || null"-->
-<!--                        [hiddenInput]="ex._hiddenInput"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (ex._dropSpecialCharacters) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        [keepCharacterPositions]="ex._keepCharacterPositions"-->
-<!--                        [prefix]="ex._prefix"-->
-<!--                        [suffix]="ex._suffix"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (ex._keepCharacterPositions) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        [keepCharacterPositions]="ex._keepCharacterPositions"-->
-<!--                        [showMaskTyped]="ex._showMaskTyped"-->
-<!--                        [prefix]="ex._prefix || ''"-->
-<!--                        [suffix]="ex._suffix || ''"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [(ngModel)]="ex.control.model"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (ex._thousandSeparator) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        [(ngModel)]="ex.control.model"-->
-<!--                        [decimalMarker]="ex._decimalMarker || '.'"-->
-<!--                        [leadZero]="ex._leadZero || null"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (ex._inputTransformFn || ex._outputTransformFn) {-->
-<!--                <div class="dark-input pd-15">-->
-<!--                    <input-->
-<!--                        [placeholder]="placeholder"-->
-<!--                        mask="{{ ex._mask || '' }}"-->
-<!--                        [inputTransformFn]="ex._inputTransformFn"-->
-<!--                        [outputTransformFn]="ex._outputTransformFn || ''"-->
-<!--                        [(ngModel)]="ex.control.model"-->
-<!--                        [thousandSeparator]="ex._thousandSeparator || ' '"-->
-<!--                        [formControl]="ex.control.form"-->
-<!--                        [dropSpecialCharacters]="ex._dropSpecialCharacters"-->
-<!--                        [decimalMarker]="ex._decimalMarker || '.'"-->
-<!--                        class="customDarkInput bg-black white span" />-->
-<!--                </div>-->
-<!--            }-->
-<!--            @if (!ex._validation) {-->
-<!--                <div>-->
-<!--                    <div class="card-content row">-->
-<!--                        <jsdaddy-open-source-card-content-->
-<!--                            value="{{ ex.control.form.value | isEmpty }}"-->
-<!--                            title="Form Control:"-->
-<!--                            color="yellow-view" />-->
-<!--                        <jsdaddy-open-source-card-content-->
-<!--                            value="{{ ex.control.model | isEmpty }}"-->
-<!--                            title="Ng Model:"-->
-<!--                            color="yellow-view" />-->
-<!--                    </div>-->
-<!--                    <jsdaddy-open-source-card-content-->
-<!--                        value="{{ ex._mask }}"-->
-<!--                        title="Mask:"-->
-<!--                        color="green-view" />-->
-<!--                </div>-->
-<!--            } @else {-->
-<!--                <jsdaddy-open-source-card-content-->
-<!--                    value="{{ ex.control.form.errors | json }}"-->
-<!--                    title="Form Control:"-->
-<!--                    color="yellow-view" />-->
-<!--                <jsdaddy-open-source-card-content-->
-<!--                    value="{{ ex.control.form.errors | json }}"-->
-<!--                    title="Mask:"-->
-<!--                    color="green-view" />-->
-<!--            }-->
-<!--        </div>-->
-<!--    } @else {-->
-<!--        <div class="dark-card bg-black">-->
-<!--            <jsdaddy-open-source-card-content-->
-<!--                value="{{ phone | mask: '(000) 000-0000' }}"-->
-<!--                title=""-->
-<!--                color="" />-->
-<!--            <jsdaddy-open-source-card-content-->
-<!--                value="(000) 000-0000"-->
-<!--                title="Mask:"-->
-<!--                color="green-view" />-->
-<!--            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />-->
-<!--        </div>-->
-<!--    }-->
-<!--</ng-template>-->
+<ng-template #exampleTmpl let-ex let-placeholder="placeholder">
+    @if (!ex._pipe) {
+        <div class="dark-card bg-black">
+            @if (
+                !ex._thousandSeparator &&
+                !ex._dropSpecialCharacters &&
+                !ex._inputTransformFn &&
+                !ex.outputTransformFn &&
+                !ex._keepCharacterPositions
+            ) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        prefix="{{ ex._prefix }}"
+                        suffix="{{ ex._suffix }}"
+                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
+                        mask="{{ ex._mask || '' }}"
+                        [thousandSeparator]="ex._thousandSeparator || ' '"
+                        [formControl]="ex.control.form"
+                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"
+                        [specialCharacters]="ex._specialCharacters || null"
+                        [shownMaskExpression]="ex._shownMaskExpression || null"
+                        [(ngModel)]="ex.control.model"
+                        [apm]="ex._apm || false"
+                        [decimalMarker]="ex._decimalMarker"
+                        [leadZero]="ex._leadZero || null"
+                        [validation]="ex._validation || null"
+                        [showMaskTyped]="ex._showMaskTyped || null"
+                        [clearIfNotMatch]="ex._clearIfNotMatch || null"
+                        [hiddenInput]="ex._hiddenInput"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (ex._dropSpecialCharacters) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        [keepCharacterPositions]="ex._keepCharacterPositions"
+                        [prefix]="ex._prefix"
+                        [suffix]="ex._suffix"
+                        mask="{{ ex._mask || '' }}"
+                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
+                        [formControl]="ex.control.form"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (ex._keepCharacterPositions) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        [keepCharacterPositions]="ex._keepCharacterPositions"
+                        [showMaskTyped]="ex._showMaskTyped"
+                        [prefix]="ex._prefix || ''"
+                        [suffix]="ex._suffix || ''"
+                        mask="{{ ex._mask || '' }}"
+                        [(ngModel)]="ex.control.model"
+                        [formControl]="ex.control.form"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (ex._thousandSeparator) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        mask="{{ ex._mask || '' }}"
+                        [thousandSeparator]="ex._thousandSeparator || ' '"
+                        [formControl]="ex.control.form"
+                        [(ngModel)]="ex.control.model"
+                        [decimalMarker]="ex._decimalMarker || '.'"
+                        [leadZero]="ex._leadZero || null"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (ex._inputTransformFn || ex._outputTransformFn) {
+                <div class="dark-input pd-15">
+                    <input
+                        [placeholder]="placeholder"
+                        mask="{{ ex._mask || '' }}"
+                        [inputTransformFn]="ex._inputTransformFn"
+                        [outputTransformFn]="ex._outputTransformFn || ''"
+                        [(ngModel)]="ex.control.model"
+                        [thousandSeparator]="ex._thousandSeparator || ' '"
+                        [formControl]="ex.control.form"
+                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
+                        [decimalMarker]="ex._decimalMarker || '.'"
+                        class="customDarkInput bg-black white span" />
+                </div>
+            }
+            @if (!ex._validation) {
+                <div>
+                    <div class="card-content row">
+                        <jsdaddy-open-source-card-content
+                            value="{{ ex.control.form.value | isEmpty }}"
+                            title="Form Control:"
+                            color="yellow-view" />
+                        <jsdaddy-open-source-card-content
+                            value="{{ ex.control.model | isEmpty }}"
+                            title="Ng Model:"
+                            color="yellow-view" />
+                    </div>
+                    <jsdaddy-open-source-card-content
+                        value="{{ ex._mask }}"
+                        title="Mask:"
+                        color="green-view" />
+                </div>
+            } @else {
+                <jsdaddy-open-source-card-content
+                    value="{{ ex.control.form.errors | json }}"
+                    title="Form Control:"
+                    color="yellow-view" />
+                <jsdaddy-open-source-card-content
+                    value="{{ ex.control.form.errors | json }}"
+                    title="Mask:"
+                    color="green-view" />
+            }
+        </div>
+    } @else {
+        <div class="dark-card bg-black">
+            <jsdaddy-open-source-card-content
+                value="{{ phone | mask: '(000) 000-0000' }}"
+                title=""
+                color="" />
+            <jsdaddy-open-source-card-content
+                value="(000) 000-0000"
+                title="Mask:"
+                color="green-view" />
+            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />
+        </div>
+    }
+</ng-template>
diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
index 83e546c5..86e8009c 100644
--- a/src/app/options/options.component.ts
+++ b/src/app/options/options.component.ts
@@ -1,6 +1,6 @@
 import { Component, effect, ElementRef, inject, input, viewChildren } from '@angular/core';
 import { JsonPipe, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgxMaskDirective, NgxMaskPipe } from 'ngx-mask';
 import { HighlightModule } from 'ngx-highlightjs';
 import { IComDoc, IMaskOptions, TExample } from '@open-source/accordion/content.interfaces';
@@ -50,24 +50,10 @@ export class OptionsComponent {
 
     public readonly activeCardId = toSignal(this.scrollService.activeCard$);
 
-    public control = new FormControl('KZ12312');
-    public widthDropSpecialCharacters = new FormControl('');
-    public widthoutDropSpecialCharacters = new FormControl('');
-    public testValue = new FormControl('100');
-    public mask = '0000';
-    public formControl1 = new FormControl(100);
-    public formControl2 = new FormControl(123412);
-    public prefix1 = '$';
-    public prefix2 = '$';
     public constructor() {
         effect(() => {
             this.scrollService.onScroll(this.cards());
             this.accordionService.onChangeAccordion(this.cards());
         });
-        this.widthDropSpecialCharacters.setValue('1234567890');
-        this.widthoutDropSpecialCharacters.setValue('1234567890');
-    }
-    public displayValue() {
-        console.log(typeof this.testValue.value);
     }
 }

From 7e48d10e5046e3a77bc4f1827fb1a805e4052b46 Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Wed, 27 Mar 2024 11:57:47 +0200
Subject: [PATCH 4/8] fix(ref: no-ref): remove unusable code

---
 src/app/options/options.component.html | 171 +------------------------
 1 file changed, 3 insertions(+), 168 deletions(-)

diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
index 51075c16..b0174a29 100644
--- a/src/app/options/options.component.html
+++ b/src/app/options/options.component.html
@@ -18,174 +18,9 @@
                     <span class="source uppercase ls-25 full-white span">Source code</span>
                     <div class="white-input">
                         <pre class="row">
-                <code [highlight]="tile.code" class="input-view bg-white"></code>
-                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
-              </pre>
-                    </div>
-                </div>
-                <ng-container
-                    *ngTemplateOutlet="
-                        exampleTmpl;
-                        context: { $implicit: cardExamples()?.[i], placeholder: tile.header }
-                    "></ng-container>
-            </div>
-        </div>
-    }
-</section>
-
-<ng-template #exampleTmpl let-ex let-placeholder="placeholder">
-    @if (!ex._pipe) {
-        <div class="dark-card bg-black">
-            @if (
-                !ex._thousandSeparator &&
-                !ex._dropSpecialCharacters &&
-                !ex._inputTransformFn &&
-                !ex.outputTransformFn &&
-                !ex._keepCharacterPositions
-            ) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        prefix="{{ ex._prefix }}"
-                        suffix="{{ ex._suffix }}"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        mask="{{ ex._mask || '' }}"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [allowNegativeNumbers]="ex._allowNegativeNumbers || null"
-                        [specialCharacters]="ex._specialCharacters || null"
-                        [shownMaskExpression]="ex._shownMaskExpression || null"
-                        [(ngModel)]="ex.control.model"
-                        [apm]="ex._apm || false"
-                        [decimalMarker]="ex._decimalMarker"
-                        [leadZero]="ex._leadZero || null"
-                        [validation]="ex._validation || null"
-                        [showMaskTyped]="ex._showMaskTyped || null"
-                        [clearIfNotMatch]="ex._clearIfNotMatch || null"
-                        [hiddenInput]="ex._hiddenInput"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._dropSpecialCharacters) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        [keepCharacterPositions]="ex._keepCharacterPositions"
-                        [prefix]="ex._prefix"
-                        [suffix]="ex._suffix"
-                        mask="{{ ex._mask || '' }}"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        [formControl]="ex.control.form"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._keepCharacterPositions) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        [keepCharacterPositions]="ex._keepCharacterPositions"
-                        [showMaskTyped]="ex._showMaskTyped"
-                        [prefix]="ex._prefix || ''"
-                        [suffix]="ex._suffix || ''"
-                        mask="{{ ex._mask || '' }}"
-                        [(ngModel)]="ex.control.model"
-                        [formControl]="ex.control.form"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._thousandSeparator) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        mask="{{ ex._mask || '' }}"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [(ngModel)]="ex.control.model"
-                        [decimalMarker]="ex._decimalMarker || '.'"
-                        [leadZero]="ex._leadZero || null"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (ex._inputTransformFn || ex._outputTransformFn) {
-                <div class="dark-input pd-15">
-                    <input
-                        [placeholder]="placeholder"
-                        mask="{{ ex._mask || '' }}"
-                        [inputTransformFn]="ex._inputTransformFn"
-                        [outputTransformFn]="ex._outputTransformFn || ''"
-                        [(ngModel)]="ex.control.model"
-                        [thousandSeparator]="ex._thousandSeparator || ' '"
-                        [formControl]="ex.control.form"
-                        [dropSpecialCharacters]="ex._dropSpecialCharacters"
-                        [decimalMarker]="ex._decimalMarker || '.'"
-                        class="customDarkInput bg-black white span" />
-                </div>
-            }
-            @if (!ex._validation) {
-                <div>
-                    <div class="card-content row">
-                        <jsdaddy-open-source-card-content
-                            value="{{ ex.control.form.value | isEmpty }}"
-                            title="Form Control:"
-                            color="yellow-view" />
-                        <jsdaddy-open-source-card-content
-                            value="{{ ex.control.model | isEmpty }}"
-                            title="Ng Model:"
-                            color="yellow-view" />
-                    </div>
-                    <jsdaddy-open-source-card-content
-                        value="{{ ex._mask }}"
-                        title="Mask:"
-                        color="green-view" />
-                </div>
-            } @else {
-                <jsdaddy-open-source-card-content
-                    value="{{ ex.control.form.errors | json }}"
-                    title="Form Control:"
-                    color="yellow-view" />
-                <jsdaddy-open-source-card-content
-                    value="{{ ex.control.form.errors | json }}"
-                    title="Mask:"
-                    color="green-view" />
-            }
-        </div>
-    } @else {
-        <div class="dark-card bg-black">
-            <jsdaddy-open-source-card-content
-                value="{{ phone | mask: '(000) 000-0000' }}"
-                title=""
-                color="" />
-            <jsdaddy-open-source-card-content
-                value="(000) 000-0000"
-                title="Mask:"
-                color="green-view" />
-            <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />
-        </div>
-    }
-</ng-template>
-<section class="content column bg-full-white">
-    @for (tile of cardDocs(); track tile.id; let i = $index) {
-        <div class="card" [class]="activeCardId() | color: tile.id" [id]="tile.id" #cards>
-            <div class="mr-title title row uppercase ls-25">
-                {{ tile.header }}
-            </div>
-
-            <div class="cards-block row" [id]="tile.anchor">
-                <div class="light-card bg-full-white pd-15">
-                    <div class="light-title row ai-c">
-                        <img
-                            width="20"
-                            height="20"
-                            [ngSrc]="'hand-box' | asset: openSourceOptionsPath"
-                            alt="Hand with box" />
-                        <span class="span">Usage</span>
-                    </div>
-                    <span class="source uppercase ls-25 full-white span">Source code</span>
-                    <div class="white-input">
-                        <pre class="row">
-                <code [highlight]="tile.code" class="input-view bg-white"></code>
-                <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
-              </pre>
+        <code [highlight]="tile.code" class="input-view bg-white"></code>
+        <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
+      </pre>
                     </div>
                 </div>
                 <ng-container

From 57846b0c2d5c20b94dbec76dde33816f19adc22e Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Wed, 27 Mar 2024 11:59:20 +0200
Subject: [PATCH 5/8] fix(ref: no-ref): remove unusable code

---
 src/app/options/options.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
index b0174a29..cbe137f4 100644
--- a/src/app/options/options.component.html
+++ b/src/app/options/options.component.html
@@ -18,9 +18,9 @@
                     <span class="source uppercase ls-25 full-white span">Source code</span>
                     <div class="white-input">
                         <pre class="row">
-        <code [highlight]="tile.code" class="input-view bg-white"></code>
-        <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
-      </pre>
+                             <code [highlight]="tile.code" class="input-view bg-white"></code>
+                             <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="input-img ais-c" alt="Input vector" />
+                        </pre>
                     </div>
                 </div>
                 <ng-container

From 6a341630f9b122846c76734fce60136f533cd323 Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Wed, 27 Mar 2024 12:07:25 +0200
Subject: [PATCH 6/8] fix(ref: no-ref): remove unusable code

---
 projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
index d5000a03..e3503893 100644
--- a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
+++ b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
@@ -724,6 +724,7 @@ export class NgxMaskApplierService {
         let res = `${this.prefix}${onlySpecial ? MaskExpression.EMPTY_STRING : result}${
             this.showMaskTyped ? '' : this.suffix
         }`;
+
         if (result.length === 0) {
             res = !this.dropSpecialCharacters ? `${this.prefix}${result}` : `${result}`;
         }

From 425c0d6ee00dee22bded5fb6b91a193dea763308 Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Wed, 27 Mar 2024 12:58:36 +0200
Subject: [PATCH 7/8] fix(ref: no-ref): replace + into template string

---
 .../src/lib/ngx-mask-applier.service.ts       |  8 +-
 .../src/lib/ngx-mask.directive.ts             | 91 +++++++------------
 .../ngx-mask-lib/src/lib/ngx-mask.service.ts  | 17 ++--
 3 files changed, 42 insertions(+), 74 deletions(-)

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
index e3503893..0efa2d85 100644
--- a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
+++ b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
@@ -176,9 +176,7 @@ export class NgxMaskApplierService {
             let value = '';
             this.allowNegativeNumbers &&
             inputValue.slice(cursor, cursor + 1) === MaskExpression.MINUS
-                ? (value =
-                      MaskExpression.MINUS +
-                      inputValue.slice(cursor + 1, cursor + inputValue.length))
+                ? (value = `${MaskExpression.MINUS}${inputValue.slice(cursor + 1, cursor + inputValue.length)}`)
                 : (value = inputValue);
             if (this.percentage(value)) {
                 result = this._splitPercentZero(inputValue);
@@ -948,7 +946,7 @@ export class NgxMaskApplierService {
             const parsedValue = parseInt(emptyOrMinus ? value.slice(1, value.length) : value, 10);
             return isNaN(parsedValue)
                 ? MaskExpression.EMPTY_STRING
-                : emptyOrMinus + parsedValue.toString();
+                : `${emptyOrMinus}${parsedValue}`;
         } else {
             const integerPart = parseInt(value.replace('-', '').substring(0, decimalIndex), 10);
             const decimalPart = value.substring(decimalIndex + 1);
@@ -959,7 +957,7 @@ export class NgxMaskApplierService {
 
             return integerString === MaskExpression.EMPTY_STRING
                 ? MaskExpression.EMPTY_STRING
-                : emptyOrMinus + integerString + decimal + decimalPart;
+                : `${emptyOrMinus}${integerString}${decimal}${decimalPart}`;
         }
     }
 }
diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts
index 7a11d442..e33f239e 100644
--- a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts
+++ b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts
@@ -469,30 +469,23 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
                     if (this._code === MaskExpression.BACKSPACE) {
                         if (!selectRangeBackspace) {
                             if (this._maskService.selStart === prefixLength) {
-                                this._maskService.actualValue =
-                                    this.prefix +
-                                    this._maskService.maskIsShown.slice(0, selEnd) +
-                                    this._inputValue.split(this.prefix).join('');
+                                this._maskService.actualValue = `${this.prefix}${this._maskService.maskIsShown.slice(0, selEnd)}${this._inputValue.split(this.prefix).join('')}`;
                             } else if (
                                 this._maskService.selStart ===
                                 this._maskService.maskIsShown.length + prefixLength
                             ) {
-                                this._maskService.actualValue =
-                                    this._inputValue +
-                                    this._maskService.maskIsShown.slice(selStart, selEnd);
+                                this._maskService.actualValue = `${this._inputValue}${this._maskService.maskIsShown.slice(selStart, selEnd)}`;
                             } else {
-                                this._maskService.actualValue =
-                                    this.prefix +
-                                    this._inputValue
-                                        .split(this.prefix)
-                                        .join('')
-                                        .slice(0, selStart) +
-                                    this._maskService.maskIsShown.slice(selStart, selEnd) +
-                                    this._maskService.actualValue.slice(
-                                        selEnd + prefixLength,
-                                        this._maskService.maskIsShown.length + prefixLength
-                                    ) +
-                                    this.suffix;
+                                this._maskService.actualValue = `${this.prefix}${this._inputValue
+                                    .split(this.prefix)
+                                    .join('')
+                                    .slice(
+                                        0,
+                                        selStart
+                                    )}${this._maskService.maskIsShown.slice(selStart, selEnd)}${this._maskService.actualValue.slice(
+                                    selEnd + prefixLength,
+                                    this._maskService.maskIsShown.length + prefixLength
+                                )}${this.suffix}`;
                             }
                         } else if (
                             !this._maskService.specialCharacters.includes(
@@ -504,21 +497,17 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
                             selectRangeBackspace
                         ) {
                             if (selStart === 1 && this.prefix) {
-                                this._maskService.actualValue =
-                                    this.prefix +
-                                    this._maskService.placeHolderCharacter +
-                                    el.value
-                                        .split(this.prefix)
-                                        .join('')
-                                        .split(this.suffix)
-                                        .join('') +
-                                    this.suffix;
+                                this._maskService.actualValue = `${this.prefix}${this._maskService.placeHolderCharacter}${el.value
+                                    .split(this.prefix)
+                                    .join('')
+                                    .split(this.suffix)
+                                    .join('')}${this.suffix}`;
+
                                 position = position - 1;
                             } else {
                                 const part1 = el.value.substring(0, position);
                                 const part2 = el.value.substring(position);
-                                this._maskService.actualValue =
-                                    part1 + this._maskService.placeHolderCharacter + part2;
+                                this._maskService.actualValue = `${part1}${this._maskService.placeHolderCharacter}${part2}`;
                             }
                         }
                     }
@@ -534,31 +523,19 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
                                 el.value.slice(position + 1, position + 2)
                             )
                         ) {
-                            this._maskService.actualValue =
-                                el.value.slice(0, position - 1) +
-                                el.value.slice(position, position + 1) +
-                                inputSymbol +
-                                el.value.slice(position + 2);
+                            this._maskService.actualValue = `${el.value.slice(0, position - 1)}${el.value.slice(position, position + 1)}${inputSymbol}${el.value.slice(position + 2)}`;
                             position = position + 1;
                         } else if (checkSymbols) {
                             if (el.value.length === 1 && position === 1) {
-                                this._maskService.actualValue =
-                                    this.prefix +
-                                    inputSymbol +
-                                    this._maskService.maskIsShown.slice(
-                                        1,
-                                        this._maskService.maskIsShown.length
-                                    ) +
-                                    this.suffix;
+                                this._maskService.actualValue = `${this.prefix}${inputSymbol}${this._maskService.maskIsShown.slice(
+                                    1,
+                                    this._maskService.maskIsShown.length
+                                )}${this.suffix}`;
                             } else {
-                                this._maskService.actualValue =
-                                    el.value.slice(0, position - 1) +
-                                    inputSymbol +
-                                    el.value
-                                        .slice(position + 1)
-                                        .split(this.suffix)
-                                        .join('') +
-                                    this.suffix;
+                                this._maskService.actualValue = `${el.value.slice(0, position - 1)}${inputSymbol}${el.value
+                                    .slice(position + 1)
+                                    .split(this.suffix)
+                                    .join('')}${this.suffix}`;
                             }
                         } else if (
                             this.prefix &&
@@ -570,14 +547,10 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
                                     MaskExpression.EMPTY_STRING
                             )
                         ) {
-                            this._maskService.actualValue =
-                                this.prefix +
-                                el.value +
-                                this._maskService.maskIsShown.slice(
-                                    1,
-                                    this._maskService.maskIsShown.length
-                                ) +
-                                this.suffix;
+                            this._maskService.actualValue = `${this.prefix}${el.value}${this._maskService.maskIsShown.slice(
+                                1,
+                                this._maskService.maskIsShown.length
+                            )}${this.suffix}`;
                         }
                     }
                 }
diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
index 7a8c7eae..dc6331a2 100644
--- a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
+++ b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
@@ -71,7 +71,7 @@ export class NgxMaskService extends NgxMaskApplierService {
         }
         if (!inputValue && this.showMaskTyped) {
             this.formControlResult(this.prefix);
-            return this.prefix + this.maskIsShown + this.suffix;
+            return `${this.prefix}${this.maskIsShown}${this.suffix}`;
         }
 
         const getSymbol: string =
@@ -163,7 +163,7 @@ export class NgxMaskService extends NgxMaskApplierService {
             this.formControlResult(value);
             return this.actualValue
                 ? this.actualValue
-                : this.prefix + this.maskIsShown + this.suffix;
+                : `${this.prefix}${this.maskIsShown}${this.suffix}`;
         }
 
         const result: string = super.applyMask(
@@ -214,26 +214,23 @@ export class NgxMaskService extends NgxMaskApplierService {
                 if (backspaced) {
                     return this.hideInput(result, this.maskExpression);
                 }
-                return (
-                    this.hideInput(result, this.maskExpression) +
-                    this.maskIsShown.slice(result.length)
-                );
+                return `${this.hideInput(result, this.maskExpression)}${this.maskIsShown.slice(result.length)}`;
             }
             return result;
         }
         const resLen: number = result.length;
-        const prefNmask: string = this.prefix + this.maskIsShown + this.suffix;
+        const prefNmask: string = `${this.prefix}${this.maskIsShown}${this.suffix}`;
 
         if (this.maskExpression.includes(MaskExpression.HOURS)) {
             const countSkipedSymbol = this._numberSkipedSymbols(result);
-            return result + prefNmask.slice(resLen + countSkipedSymbol);
+            return `${result}${prefNmask.slice(resLen + countSkipedSymbol)}`;
         } else if (
             this.maskExpression === MaskExpression.IP ||
             this.maskExpression === MaskExpression.CPF_CNPJ
         ) {
-            return result + prefNmask;
+            return `${result}${prefNmask}`;
         }
-        return result + prefNmask.slice(resLen);
+        return `${result}${prefNmask.slice(resLen)}`;
     }
 
     // get the number of characters that were shifted

From 35d2716cb4ea275415d0e8cdcb4e839b1b4b80de Mon Sep 17 00:00:00 2001
From: andriikamaldinov1 <akam@jsdaddy.io>
Date: Wed, 27 Mar 2024 13:43:34 +0200
Subject: [PATCH 8/8] fix(ref: no-ref): fix version

---
 src/app/options/options.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/options/options.component.ts b/src/app/options/options.component.ts
index 86e8009c..27827dc0 100644
--- a/src/app/options/options.component.ts
+++ b/src/app/options/options.component.ts
@@ -9,8 +9,8 @@ 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 { OpenSourcePath } from '@open-source/path/open-source.path';
 import { AccordionService } from '@open-source/accordion/accordion.service';
+import { OpenSourcePath } from '@open-source/path/open-source.path';
 import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({