iptdevs-design-system 2.2.30 → 2.2.33

package/fesm2020/iptdevs-design-system.mjs

@@ -4,10 +4,12 @@ import * as i1 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 * as i3 from 'ng2-currency-mask';
+import { CurrencyMaskModule } from 'ng2-currency-mask';
 import Swal from 'sweetalert2';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
-import * as i3 from '@angular/material/sidenav';
+import * as i3$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -252,53 +254,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
             }] } });
 
 class InputComponent {
-    constructor(currencyPipe) {
-        this.currencyPipe = currencyPipe;
+    constructor() {
         this.data = [];
         this.clicked = false;
         this.withPipe = false;
+        this.prefix = '$';
+        this.thousands = '.';
+        this.decimal = ',';
     }
     set control(value) {
         if (this.formControl !== value) {
             this.formControl = value;
         }
     }
-    ngOnChanges(changes) {
-        if (changes['control']) {
-            if (this.withPipe && this.formControl !== null) {
-                this.formControl = this.currenPipe(this.control);
-                console.log(this.formControl);
-            }
-        }
-    }
-    ngOnInit() {
-        // if (this.withPipe && this.formControl !== null) {
-        //   this.formControl = this.currenPipe(this.control);
-        //   console.log(this.formControl);
-        // 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);
-        console.log(formatted);
-        return formatted;
-    }
+    ngOnInit() { }
     click(value) {
         this.clicked = value.isTrusted;
     }
 }
-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" }, usesOnChanges: true, ngImport: i0, template: `
+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", withPipe: "withPipe", list: "list", iconUrl: "iconUrl", control: "control", prefix: "prefix", thousands: "thousands", decimal: "decimal" }, ngImport: i0, template: `
     <div class="input-container">
       <input *ngIf="inputType === 'date'"
         class="input"
@@ -316,14 +291,12 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         [attr.list]="list"/>
 
         <input *ngIf="inputType === 'text' && withPipe"
-        class="input"
-        type="{{ inputType }}"
-        [formControl]="formControl"
-        [attr.list]="list"/>
-        <pre>
-          {{ formControl | json }}
-          {{ control | json }}
-        </pre>
+          class="input"
+          currencyMask
+          [options]="{ prefix: prefix, thousands: thousands, decimal: decimal, allowNegative: false }"
+          type="{{ inputType }}"
+          [formControl]="formControl"
+          [attr.list]="list"/>
 
         <input *ngIf="inputType === 'time'"
           class="input"
@@ -343,7 +316,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"] }], pipes: { "json": i1.JsonPipe } });
+    `, 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: i3.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipt-input', template: `
@@ -364,14 +337,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         [attr.list]="list"/>
 
         <input *ngIf="inputType === 'text' && withPipe"
-        class="input"
-        type="{{ inputType }}"
-        [formControl]="formControl"
-        [attr.list]="list"/>
-        <pre>
-          {{ formControl | json }}
-          {{ control | json }}
-        </pre>
+          class="input"
+          currencyMask
+          [options]="{ prefix: prefix, thousands: thousands, decimal: decimal, allowNegative: false }"
+          type="{{ inputType }}"
+          [formControl]="formControl"
+          [attr.list]="list"/>
 
         <input *ngIf="inputType === 'time'"
           class="input"
@@ -392,7 +363,7 @@ 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"] }]
-        }], ctorParameters: function () { return [{ type: i1.CurrencyPipe }]; }, propDecorators: { inputType: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { inputType: [{
                 type: Input
             }], placeHolder: [{
                 type: Input
@@ -406,6 +377,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], control: [{
                 type: Input
+            }], prefix: [{
+                type: Input
+            }], thousands: [{
+                type: Input
+            }], decimal: [{
+                type: Input
             }] } });
 
 class LevelButtonComponent {
@@ -973,7 +950,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", "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"] }] });
+  `, 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", "prefix", "thousands", "decimal"] }, { 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: `
@@ -1088,7 +1065,7 @@ SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         <div class="photo-logout"></div>
       </div>
     </mat-toolbar>
-  `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){.header{background-color:#fff;display:flex;justify-content:space-between;filter:drop-shadow(0px -1px 7px #000)}mat-sidenav{width:-moz-fit-content!important;width:fit-content!important;background-color:#1c77f7!important}.img-logo,.text-container{display:none}.mat-toolbar.mat-primary{background-color:#fff!important;color:#003d99!important;filter:drop-shadow(0px -1px 7px #000)}.logout-container{box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px;height:35px;width:auto;border-radius:30px;display:flex;margin-left:10px}.logout-button{display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin-left:20px;text-align:center;width:150px}.photo-logout{background:url(http://qa.iptdev.com.co/assets/icons/exit.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat}.menu-icon{background:url(http://qa.iptdev.com.co/assets/icons/icon-menu.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat}.menu-icon-close{background:url(http://qa.iptdev.com.co/assets/icons/cruz.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat;width:35px;height:35px}.menu-container{box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px;height:35px;width:52.5px;width:auto;border-radius:30px;display:flex}.menu-container p{width:85px;display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin:0 0 0 15px;text-align:center}}@media screen and (min-width: 768px){.img-logo{display:flex;width:120px;height:60px}.text-container{border-radius:40px;height:45px;width:100%;display:flex;gap:-100px;justify-content:center;flex-direction:column;align-items:flex-start}}.p1{color:gray;margin-left:30px;font-size:13px;height:20px}.p2{margin-left:30px;font-size:14px;font-weight:600;color:#1c77f7}.flex-container-menu{font-size:18px;color:#fff!important}.mat-nav-list{padding:0}\n"], components: [{ type: i3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: AsideButtonComponent, selector: "ipt-aside-button", inputs: ["icon", "text", "buttonActive"], outputs: ["isClicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){.header{background-color:#fff;display:flex;justify-content:space-between;filter:drop-shadow(0px -1px 7px #000)}mat-sidenav{width:-moz-fit-content!important;width:fit-content!important;background-color:#1c77f7!important}.img-logo,.text-container{display:none}.mat-toolbar.mat-primary{background-color:#fff!important;color:#003d99!important;filter:drop-shadow(0px -1px 7px #000)}.logout-container{box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px;height:35px;width:auto;border-radius:30px;display:flex;margin-left:10px}.logout-button{display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin-left:20px;text-align:center;width:150px}.photo-logout{background:url(http://qa.iptdev.com.co/assets/icons/exit.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat}.menu-icon{background:url(http://qa.iptdev.com.co/assets/icons/icon-menu.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat}.menu-icon-close{background:url(http://qa.iptdev.com.co/assets/icons/cruz.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat;width:35px;height:35px}.menu-container{box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px;height:35px;width:52.5px;width:auto;border-radius:30px;display:flex}.menu-container p{width:85px;display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin:0 0 0 15px;text-align:center}}@media screen and (min-width: 768px){.img-logo{display:flex;width:120px;height:60px}.text-container{border-radius:40px;height:45px;width:100%;display:flex;gap:-100px;justify-content:center;flex-direction:column;align-items:flex-start}}.p1{color:gray;margin-left:30px;font-size:13px;height:20px}.p2{margin-left:30px;font-size:14px;font-weight:600;color:#1c77f7}.flex-container-menu{font-size:18px;color:#fff!important}.mat-nav-list{padding:0}\n"], components: [{ type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: AsideButtonComponent, selector: "ipt-aside-button", inputs: ["icon", "text", "buttonActive"], outputs: ["isClicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SidenavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipt-sidenav', template: `
@@ -1179,7 +1156,8 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         // BrowserModule, // Para evitar doble carga de BrowserModule
         FormsModule,
         ReactiveFormsModule,
-        MaterialModule], exports: [AsideButtonComponent,
+        MaterialModule,
+        CurrencyMaskModule], exports: [AsideButtonComponent,
         ButtonComponent,
         CheckboxComponent,
         DatalistComponent,
@@ -1199,7 +1177,8 @@ ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             // BrowserModule, // Para evitar doble carga de BrowserModule
             FormsModule,
             ReactiveFormsModule,
-            MaterialModule
+            MaterialModule,
+            CurrencyMaskModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ComponentsModule, decorators: [{
             type: NgModule,
@@ -1223,7 +1202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                         // BrowserModule, // Para evitar doble carga de BrowserModule
                         FormsModule,
                         ReactiveFormsModule,
-                        MaterialModule
+                        MaterialModule,
+                        CurrencyMaskModule
                     ],
                     exports: [
                         AsideButtonComponent,