iptdevs-design-system 2.2.24 → 2.2.27

package/fesm2020/iptdevs-design-system.mjs

@@ -265,17 +265,24 @@ class InputComponent {
     }
     ngOnInit() {
         if (this.withPipe && this.formControl !== null) {
-            console.log(this.withPipe, this.formControl, this.control);
-            this.formControl.valueChanges.subscribe(value => {
-                console.log(value);
-                this.formControl.patchValue({ control: this.currencyPipe.transform(value) }, { onlySelf: true, emitEvent: false });
-            });
+            this.formControl = this.currenPipe(this.formControl.value);
+            // console.log(this.withPipe, this.formControl, this.control);
+            // this.formControl.valueChanges.subscribe(value => {
+            //   console.log(value);
+            //   this.formControl.patchValue(
+            //     { control: this.currencyPipe.transform(value)},
+            //     { onlySelf: true, emitEvent: false}
+            //   )
+            // })
         }
     }
-    // let forma = new Intl.NumberFormat("en-US", {
-    //   style: 'currency',
-    //   currency: 'USD'
-    // }).format((idConcept));
+    currenPipe(datControl) {
+        let formatted = new Intl.NumberFormat("en-US", {
+            style: 'currency',
+            currency: 'USD'
+        }).format(datControl);
+        return formatted;
+    }
     click(value) {
         this.clicked = value.isTrusted;
     }
@@ -292,7 +299,7 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         uib-datepicker-popup="dd/MM/yyyy"
         ng-model="inputType"/>
 
-      <input *ngIf="inputType !== 'date' && inputType !== 'time'"
+      <input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
         class="input"
         type="{{ inputType }}"
         [formControl]="formControl"
@@ -303,6 +310,10 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         type="{{ inputType }}"
         [formControl]="formControl"
         [attr.list]="list"/>
+        <pre>
+          {{ formControl | json }}
+          {{ control | json }}
+        </pre>
 
         <input *ngIf="inputType === 'time'"
           class="input"
@@ -322,7 +333,7 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         {{ validateText }}
       </p>
     </div>
-    `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:15px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:15px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:15px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:15px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:15px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:15px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "json": i1.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipt-input', template: `
@@ -336,7 +347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         uib-datepicker-popup="dd/MM/yyyy"
         ng-model="inputType"/>
 
-      <input *ngIf="inputType !== 'date' && inputType !== 'time'"
+      <input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
         class="input"
         type="{{ inputType }}"
         [formControl]="formControl"
@@ -347,6 +358,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         type="{{ inputType }}"
         [formControl]="formControl"
         [attr.list]="list"/>
+        <pre>
+          {{ formControl | json }}
+          {{ control | json }}
+        </pre>
 
         <input *ngIf="inputType === 'time'"
           class="input"