iptdevs-design-system 2.2.23 → 2.2.26

package/fesm2020/iptdevs-design-system.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, Injectable, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, CurrencyPipe, TitleCasePipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import Swal from 'sweetalert2';
@@ -252,21 +252,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
             }] } });
 
 class InputComponent {
-    constructor() {
+    constructor(currencyPipe) {
+        this.currencyPipe = currencyPipe;
         this.data = [];
         this.clicked = false;
+        this.withPipe = false;
     }
     set control(value) {
         if (this.formControl !== value) {
             this.formControl = value;
         }
     }
+    ngOnInit() {
+        this.formControl = this.currenPipe(this.formControl.value);
+        // 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}
+        //     )
+        //   })
+        // }
+    }
+    currenPipe(datControl) {
+        let formatted = new Intl.NumberFormat("en-US", {
+            style: 'currency',
+            currency: 'USD'
+        }).format(datControl);
+        return formatted;
+    }
     click(value) {
         this.clicked = value.isTrusted;
     }
 }
-InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: InputComponent, selector: "ipt-input", inputs: { inputType: "inputType", placeHolder: "placeHolder", validateText: "validateText", list: "list", iconUrl: "iconUrl", control: "control" }, ngImport: i0, template: `
+InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, deps: [{ token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Component });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: InputComponent, selector: "ipt-input", inputs: { inputType: "inputType", placeHolder: "placeHolder", validateText: "validateText", withPipe: "withPipe", list: "list", iconUrl: "iconUrl", control: "control" }, ngImport: i0, template: `
     <div class="input-container">
       <input *ngIf="inputType === 'date'"
         class="input"
@@ -277,12 +299,21 @@ 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"
+        [attr.list]="list"/>
+
+        <input *ngIf="inputType === 'text' && withPipe"
         class="input"
         type="{{ inputType }}"
         [formControl]="formControl"
         [attr.list]="list"/>
+        <pre>
+          {{ formControl | json }}
+          {{ control | json }}
+        </pre>
 
         <input *ngIf="inputType === 'time'"
           class="input"
@@ -302,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: `
@@ -316,12 +347,21 @@ 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"
+        [attr.list]="list"/>
+
+        <input *ngIf="inputType === 'text' && withPipe"
         class="input"
         type="{{ inputType }}"
         [formControl]="formControl"
         [attr.list]="list"/>
+        <pre>
+          {{ formControl | json }}
+          {{ control | json }}
+        </pre>
 
         <input *ngIf="inputType === 'time'"
           class="input"
@@ -342,12 +382,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
       </p>
     </div>
     `, 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"] }]
-        }], propDecorators: { inputType: [{
+        }], ctorParameters: function () { return [{ type: i1.CurrencyPipe }]; }, propDecorators: { inputType: [{
                 type: Input
             }], placeHolder: [{
                 type: Input
             }], validateText: [{
                 type: Input
+            }], withPipe: [{
+                type: Input
             }], list: [{
                 type: Input
             }], iconUrl: [{
@@ -921,7 +963,7 @@ LoginFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
       </div>
 
     </div>
-  `, isInline: true, styles: [".form-container{display:grid;grid-template-columns:1fr;justify-items:center;width:350px}.with-background{background-color:#fff;border-radius:25px;box-shadow:#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}h2{color:#1c77f7}hr{width:80%}form{margin-bottom:60px;display:grid;grid-template-columns:1fr;grid-gap:30px;gap:30px;width:100%}.button-container{margin-bottom:70px;align-items:center;display:flex;gap:50px}footer{background-color:#1c77f7;border-top-left-radius:25px;border-top-right-radius:25px;width:100%;height:100px;display:flex;align-items:center;justify-content:center}\n"], components: [{ type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "list", "iconUrl", "control"] }, { type: ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: [".form-container{display:grid;grid-template-columns:1fr;justify-items:center;width:350px}.with-background{background-color:#fff;border-radius:25px;box-shadow:#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}h2{color:#1c77f7}hr{width:80%}form{margin-bottom:60px;display:grid;grid-template-columns:1fr;grid-gap:30px;gap:30px;width:100%}.button-container{margin-bottom:70px;align-items:center;display:flex;gap:50px}footer{background-color:#1c77f7;border-top-left-radius:25px;border-top-right-radius:25px;width:100%;height:100px;display:flex;align-items:center;justify-content:center}\n"], components: [{ type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control"] }, { type: ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LoginFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipt-login-form', template: `
@@ -1139,7 +1181,10 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TextLinkComponent,
         LoginFormComponent,
         SidenavComponent] });
-ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ComponentsModule, imports: [[
+ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ComponentsModule, providers: [
+        CurrencyPipe,
+        TitleCasePipe
+    ], imports: [[
             CommonModule,
             // BrowserModule, // Para evitar doble carga de BrowserModule
             FormsModule,
@@ -1183,6 +1228,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                         TextLinkComponent,
                         LoginFormComponent,
                         SidenavComponent,
+                    ],
+                    providers: [
+                        CurrencyPipe,
+                        TitleCasePipe
                     ]
                 }]
         }] });