feat(input-mask): add control to ninth digit

TemainfoSoftware · Aug 26, 2021 · 5ceaa55 · 5ceaa55
1 parent 5255898
commit 5ceaa55
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/projects/truly-ui/src/components/input/core/input-mask.ts b/projects/truly-ui/src/components/input/core/input-mask.ts
@@ -8,6 +8,8 @@ export class InputMask {
 
   private maskGuides = true;
 
+  private addNinthDigit = false;
+
   private valueUppercase;
 
   private literalChar;
@@ -59,6 +61,9 @@ export class InputMask {
     if ( value[ 'guides' ] === false ) {
       this.maskGuides = value[ 'guides' ];
     }
+    if ( value[ 'addNinthDigit' ] ) {
+      this.addNinthDigit = value[ 'addNinthDigit' ];
+    }
     this.literalChar = value[ 'withLiteralChar' ];
     this.valueUppercase = value[ 'uppercase' ];
     this.maskExpression = value[ 'mask' ];
@@ -89,14 +94,24 @@ export class InputMask {
   onPastListener() {
     this.renderer.listen( this.input.nativeElement, 'paste', ($event: ClipboardEvent) => {
       const clipboardData = $event.clipboardData || window['clipboardData'];
-      const value = clipboardData
+      let value = clipboardData
         .getData('text')
         .replace(/ /g, '')
         .replace(/[^\w\s]/gi, '');
+      value = this.handleAddNinthDigit(value);
       this.applyMask( value, false );
     } );
   }
 
+  handleAddNinthDigit( value ) {
+    if ( this.addNinthDigit ) {
+      if (value.length <= 10 ) {
+        value = value.slice(0, 2) + '9' + value.slice(2);
+      }
+    }
+    return value;
+  }
+
   onKeyPressInputListener() {
     this.renderer.listen( this.input.nativeElement, 'keypress', $event => {
       this.handleKeypress( $event );

diff --git a/src/app/components/inputmask/inputmaskdemo.component.html b/src/app/components/inputmask/inputmaskdemo.component.html
@@ -28,7 +28,7 @@
             </div>
           </app-card>
           <app-card>
-            <div class="col-md-6">
+            <div class="col-md-4">
               <span>Text + Number</span>
               <tl-input
                 [mask]="{mask: 'AAA-0000', uppercase: true}"
@@ -41,7 +41,7 @@
 <tl-input [mask]="{mask: 'AAA-0000', uppercase: true}" [(ngModel)]="textNumber" [iconBefore]="'fas fa-print'"></tl-input>
 </textarea>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-4">
               <span>Without Guides</span>
               <tl-input
                 [mask]="{mask: 'AAA-0000', guides: false}"
@@ -52,6 +52,19 @@
               <div class="spacer"></div>
 <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
 <tl-input [mask]="{mask: 'AAA-0000', guides: false}" [(ngModel)]="sGuides" [iconAfter]="'fas fa-print'"></tl-input>
+</textarea>
+            </div>
+            <div class="col-md-4">
+              <span>Add Ninth Digit</span>
+              <tl-input
+                [mask]="{mask: '(99) 9 9999-9999', addNinthDigit: true}"
+                [(ngModel)]="basic"
+                [iconAfter]="'fas fa-print'">
+              </tl-input>
+              <app-showcase-returned-value [value]="sGuides"></app-showcase-returned-value>
+              <div class="spacer"></div>
+              <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
+<tl-input [mask]="{mask: 'AAA-0000', addNinthDigit: true}" [(ngModel)]="basic" [iconAfter]="'fas fa-print'"></tl-input>
 </textarea>
             </div>
           </app-card>