fix(#890): fix(#890)

JsDaddy · Aug 18, 2023 · 0ad1a99 · 0ad1a99
1 parent 2f50f56
commit 0ad1a99
Show file tree

Hide file tree

Showing 13 changed files with 484 additions and 333 deletions.
diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-expression.enum.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-expression.enum.ts
@@ -38,5 +38,4 @@ export const enum MaskExpression {
     DELETE = 'Delete',
     ARROW_LEFT = 'ArrowLeft',
     ARROW_UP = 'ArrowUp',
-    CONFIG_FUNC = '(value) => value',
 }
diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.config.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.config.ts
@@ -1,6 +1,16 @@
 import { EventEmitter, InjectionToken } from '@angular/core';
 import { MaskExpression } from './ngx-mask-expression.enum';
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface InputTransformFn {
+    (value: unknown): string | number;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface OutputTransformFn {
+    (value: string | number | undefined | null): unknown;
+}
+
 export interface IConfig {
     suffix: string;
     prefix: string;
@@ -21,8 +31,8 @@ export interface IConfig {
     leadZeroDateTime: boolean;
     leadZero: boolean;
     triggerOnMaskChange: boolean;
-    inputTransformFn: (value: string) => string;
-    outputTransformFn: (value: any) => any;
+    inputTransformFn: InputTransformFn;
+    outputTransformFn: OutputTransformFn;
     maskFilled: EventEmitter<void>;
     patterns: {
         [character: string]: {
@@ -61,8 +71,8 @@ export const initialConfig: IConfig = {
     apm: false,
     leadZero: false,
     triggerOnMaskChange: false,
-    inputTransformFn: (value: string) => value,
-    outputTransformFn: (value: any) => value,
+    inputTransformFn: (value: unknown) => value as string | number,
+    outputTransformFn: (value: string | number | undefined | null) => value,
     maskFilled: new EventEmitter<void>(),
     patterns: {
         '0': {

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts
diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
@@ -500,8 +500,10 @@ export class NgxMaskService extends NgxMaskApplierService {
         if (this.writingValue || (!this.triggerOnMaskChange && this.maskChanged)) {
             this.maskChanged
                 ? this.onChange(
-                      this._toNumber(
-                          this._checkSymbols(this._removeSuffix(this._removePrefix(inputValue)))
+                      this.outputTransformFn(
+                          this._toNumber(
+                              this._checkSymbols(this._removeSuffix(this._removePrefix(inputValue)))
+                          )
                       )
                   )
                 : '';

diff --git a/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts b/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts
@@ -23,7 +23,7 @@ describe('Directive: Mask', () => {
 
     it('inputTransformFn should return value toUpperCase', () => {
         component.mask = 'S*';
-        component.inputTransformFn = (value: string): string => value.toUpperCase();
+        component.inputTransformFn = (value: unknown): string => String(value).toUpperCase();
 
         equal('a', 'A', fixture);
         equal('an', 'AN', fixture);
@@ -35,7 +35,8 @@ describe('Directive: Mask', () => {
 
     it('inputTransformFn should return value formValue toUpperCase', () => {
         component.mask = 'S*';
-        component.outputTransformFn = (value: string): string => value.toUpperCase();
+        component.outputTransformFn = (value: string | number | undefined | null): string =>
+            String(value).toUpperCase();
 
         equal('a', 'a', fixture);
         equal('an', 'an', fixture);
@@ -48,8 +49,9 @@ describe('Directive: Mask', () => {
 
     it('inputTransformFn should return value formValue toUpperCase but input value to lowerCase', () => {
         component.mask = 'S*';
-        component.outputTransformFn = (value: string): string => value.toUpperCase();
-        component.inputTransformFn = (value: string): string => value.toLowerCase();
+        component.outputTransformFn = (value: string | number | undefined | null): string =>
+            String(value).toUpperCase();
+        component.inputTransformFn = (value: unknown): string => String(value).toLowerCase();
 
         equal('A', 'a', fixture);
         equal('AN', 'an', fixture);
@@ -63,11 +65,11 @@ describe('Directive: Mask', () => {
     it('separator.2 should replace dot in model', () => {
         component.mask = 'separator.2';
         component.decimalMarker = '.';
-        component.outputTransformFn = (value: string): string => {
-            if (value.includes('.')) {
-                return value.replace('.', ',');
+        component.outputTransformFn = (value: string | number | undefined | null): string => {
+            if (String(value).includes('.')) {
+                return String(value).replace('.', ',');
             }
-            return value;
+            return String(value);
         };
 
         equal('10.2', '10.2', fixture);
@@ -83,9 +85,9 @@ describe('Directive: Mask', () => {
     it('separator.3 should toFixed value in model and return Number', () => {
         component.mask = 'separator.3';
         component.decimalMarker = '.';
-        component.outputTransformFn = (value: string): number => {
-            if (value.toString().includes('.')) {
-                const numberValue = parseFloat(value);
+        component.outputTransformFn = (value: string | number | undefined | null): number => {
+            if (String(value).includes('.')) {
+                const numberValue = parseFloat(String(value));
                 const formattedValue = Number(numberValue.toFixed(2));
                 return formattedValue;
             }
@@ -105,11 +107,11 @@ describe('Directive: Mask', () => {
     it('mask 000.00 should replace dot in model', () => {
         component.mask = '000.00';
         component.dropSpecialCharacters = false;
-        component.outputTransformFn = (value: string): string => {
-            if (value.includes('.')) {
-                return value.replace('.', ',');
+        component.outputTransformFn = (value: string | number | undefined | null): string => {
+            if (String(value).includes('.')) {
+                return String(value).replace('.', ',');
             }
-            return value;
+            return String(value);
         };
 
         equal('100.22', '100.22', fixture);
@@ -122,7 +124,8 @@ describe('Directive: Mask', () => {
     it('mask separator.1 should return number', () => {
         component.mask = 'separator.1';
         component.decimalMarker = ',';
-        component.outputTransformFn = (value: string): number => Number(value);
+        component.outputTransformFn = (value: string | number | undefined | null): number =>
+            Number(value);
 
         equal('123,2', '123,2', fixture);
         expect(component.form.value).toBe(123.2);
@@ -140,7 +143,8 @@ describe('Directive: Mask', () => {
     it('mask separator.1 should return number decimalMarker dot', () => {
         component.mask = 'separator.1';
         component.decimalMarker = '.';
-        component.outputTransformFn = (value: string): number => Number(value);
+        component.outputTransformFn = (value: string | number | undefined | null): number =>
+            Number(value);
 
         equal('123.4', '123.4', fixture);
         expect(component.form.value).toBe(123.4);
@@ -157,11 +161,11 @@ describe('Directive: Mask', () => {
 
     it('mask percent should replace dot in model', () => {
         component.mask = 'percent.2';
-        component.outputTransformFn = (value: string): string => {
-            if (value.includes('.')) {
-                return value.replace('.', ',');
+        component.outputTransformFn = (value: string | number | undefined | null): string => {
+            if (String(value).includes('.')) {
+                return String(value).replace('.', ',');
             }
-            return value;
+            return String(value);
         };
         equal('1.2', '1.2', fixture);
         expect(component.form.value).toBe('1,2');
@@ -178,22 +182,32 @@ describe('Directive: Mask', () => {
         component.showMaskTyped = true;
         component.dropSpecialCharacters = false;
         component.leadZeroDateTime = true;
-        component.outputTransformFn = (value: string) => {
-            const fetch = new Date();
-            const values = value.split(':');
-            if (values.length >= 2) {
-                const hour = Number(values[0]);
-                const minuts = Number(values[1]);
-                fetch.setHours(hour);
-                fetch.setMinutes(minuts);
+        component.outputTransformFn = (value: string | number | undefined | null) => {
+            if (value) {
+                const fetch = new Date();
+                const values = String(value).split(':');
+                if (values.length >= 2) {
+                    const hour = Number(values[0]);
+                    const minuts = Number(values[1]);
+                    fetch.setHours(hour);
+                    fetch.setMinutes(minuts);
+                }
+                fetch.setSeconds(0);
+                return fetch.toString();
             }
-            fetch.setSeconds(0);
-            return fetch.toString();
+            return;
         };
-
-        equal('1314', '13:14', fixture);
-        expect(component.form.value).toBe(
-            'Tue Aug 15 2023 13:14:00 GMT+0300 (Eastern European Summer Time)'
-        );
+        const date = new Date();
+        component.inputTransformFn = (value: unknown): string => {
+            if (typeof value !== 'object') {
+                return String(value);
+            }
+            return `${String(date.getHours()).padStart(2, '0')}${String(date.getMinutes()).padStart(
+                2,
+                '0'
+            )}`;
+        };
+        component.form.setValue(new Date().toString());
+        expect(component.form.value).toBe(date.toString());
     });
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -16,6 +16,10 @@ import { SubHeaderComponent } from '@open-source/sub-header/sub-header.component
 import { AccordionComponent } from '@open-source/accordion/accordion.component';
 import { FooterComponent } from '@open-source/footer/footer.component';
 import { LinkPath } from '@libraries/link/link.path';
+import {
+    FormatAndParserExamples,
+    ParserAndFormatterDocs,
+} from '../assets/content/parser-and-formatter';
 
 @Component({
     selector: 'jsdaddy-open-source-root',
@@ -62,6 +66,10 @@ export class AppComponent {
                 this.card.docs = OthDocs;
                 this.card.examples = OthExamples;
                 break;
+            case 5:
+                this.card.docs = ParserAndFormatterDocs;
+                this.card.examples = FormatAndParserExamples;
+                break;
             default:
                 break;
         }

diff --git a/src/app/options/options.component.html b/src/app/options/options.component.html
@@ -1,48 +1,3 @@
-<input type="text" mask="S*"  [(ngModel)]="testValue" [inputTransformFn]="toUpeerCase" /> {{testValue}}
-
-<!--<br>-->
-<!--bez input-->
-<!--<input type="text" mask="S*"  [(ngModel)]="testValue1" /> {{testValue1}}-->
-<!--<input type="text" mask="XXX/X0/0000" [hiddenInput]="true">-->
-<!--<input mask="separator.2" [leadZero]="true" [decimalMarker]="'.'" [(ngModel)]="testValue">-->
-
-<!--{{testValue}}-->
-<!--<input [formControl]="testControl" mask="separator.1" decimalMarker='.' type="text"/>-->
-<!--<div class="errors">-->
-<!--    <div>Type of control value: {{typeOfValue(testControl.value)}}</div>-->
-<!--    <div>Type of control value: {{testControl.value}}</div>-->
-<!--</div>-->
-
-<!--<input type="text" mask="separator.3" [decimalMarker]="'.'" [outputTransformFn]="toFixede" [(ngModel)]="testValue2"> {{testValue2}}-->
-
-<!--<div class="errors">-->
-<!--    <div>Type of control value: {{ typeOfValue(testValue2) }}</div>-->
-<!--    <div>Type of control value: {{ testValue2 }}</div>-->
-<!--</div>-->
-<!--<input type="text" [allowNegativeNumbers]="true" mask="separator.0" thousandSeparator="," [(ngModel)]="amount" [outputTransformFn]="saveAfterDot">-->
-<!--{{amount}}-->
-
-
-<!--<input-->
-<!--       [(ngModel)]="value"-->
-<!--       [placeholder]="'hh:mm'"-->
-<!--       mask="Hh:m0"-->
-<!--       [showMaskTyped]="true"-->
-<!--       [dropSpecialCharacters]="false"-->
-<!--       [outputTransformFn]="parser"-->
-<!--       [inputTransformFn]="date"-->
-<!--       [leadZeroDateTime]="true"/>-->
-<!--{{value}}-->
-
-
-<input type="text" mask="separator.2" [(ngModel)]="someNumber"  [outputTransformFn]="numberValue" [decimalMarker]="'.'">
-<!--{{someNumber}}-->
-<div class="errors">
-    <div>Type of control value: {{typeOfValue(someNumber)}}</div>
-    <div>Type of control value: {{someNumber}}</div>
-</div>
-
-
 <section class="content column bg-full-white" *ngIf="activeCardId$ | async as activeCardId">
     <div
         class="card"
@@ -82,7 +37,14 @@
 
 <ng-template #exampleTmpl let-ex let-placeholder="placeholder">
     <div class="dark-card bg-black" *ngIf="!ex._pipe; else pipeView">
-        <div class="dark-input pd-15" *ngIf="!ex._thousandSeparator && !ex._dropSpecialCharacters">
+        <div
+            class="dark-input pd-15"
+            *ngIf="
+                !ex._thousandSeparator &&
+                !ex._dropSpecialCharacters &&
+                !ex._inputTransformFn &&
+                !ex.outputTransformFn
+            ">
             <input
                 [placeholder]="placeholder"
                 prefix="{{ ex._prefix }}"
@@ -122,6 +84,19 @@
                 [leadZero]="ex._leadZero || null"
                 class="customDarkInput bg-black white span" />
         </div>
+        <div class="dark-input pd-15" *ngIf="ex._inputTransformFn || ex._outputTransformFn">
+            <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>
         <div *ngIf="!ex._validation; else validView">
             <div class="card-content row">
                 <jsdaddy-open-source-card-content