iptdevs-design-system 2.2.21 → 2.2.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/atoms/input/input.component.mjs +34 -7
- package/esm2020/lib/components/components.module.mjs +13 -7
- package/esm2020/lib/components/forms/login-form/login-form.component.mjs +1 -1
- package/fesm2015/iptdevs-design-system.mjs +46 -13
- package/fesm2015/iptdevs-design-system.mjs.map +1 -1
- package/fesm2020/iptdevs-design-system.mjs +46 -13
- package/fesm2020/iptdevs-design-system.mjs.map +1 -1
- package/lib/components/atoms/input/input.component.d.ts +8 -2
- package/lib/components/components.module.d.ts +3 -4
- package/package.json +1 -1
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, Component, Input, Output, Injectable, NgModule } from '@angular/core';
|
|
3
|
-
import { BrowserModule } from '@angular/platform-browser';
|
|
4
3
|
import * as i1 from '@angular/common';
|
|
5
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { CommonModule, CurrencyPipe, TitleCasePipe } from '@angular/common';
|
|
6
5
|
import * as i1$1 from '@angular/forms';
|
|
7
6
|
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
7
|
import Swal from 'sweetalert2';
|
|
@@ -253,21 +252,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
253
252
|
}] } });
|
|
254
253
|
|
|
255
254
|
class InputComponent {
|
|
256
|
-
constructor() {
|
|
255
|
+
constructor(currencyPipe) {
|
|
256
|
+
this.currencyPipe = currencyPipe;
|
|
257
257
|
this.data = [];
|
|
258
258
|
this.clicked = false;
|
|
259
|
+
this.withPipe = false;
|
|
259
260
|
}
|
|
260
261
|
set control(value) {
|
|
261
262
|
if (this.formControl !== value) {
|
|
262
263
|
this.formControl = value;
|
|
263
264
|
}
|
|
264
265
|
}
|
|
266
|
+
ngOnInit() {
|
|
267
|
+
if (this.withPipe && this.formControl !== null) {
|
|
268
|
+
console.log(this.withPipe, this.formControl, this.control);
|
|
269
|
+
this.formControl.valueChanges.subscribe(value => {
|
|
270
|
+
console.log(value);
|
|
271
|
+
this.formControl.patchValue({ control: this.currencyPipe.transform(value) }, { onlySelf: true, emitEvent: false });
|
|
272
|
+
});
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
// let forma = new Intl.NumberFormat("en-US", {
|
|
276
|
+
// style: 'currency',
|
|
277
|
+
// currency: 'USD'
|
|
278
|
+
// }).format((idConcept));
|
|
265
279
|
click(value) {
|
|
266
280
|
this.clicked = value.isTrusted;
|
|
267
281
|
}
|
|
268
282
|
}
|
|
269
|
-
InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
270
|
-
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: `
|
|
283
|
+
InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, deps: [{ token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
284
|
+
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: `
|
|
271
285
|
<div class="input-container">
|
|
272
286
|
<input *ngIf="inputType === 'date'"
|
|
273
287
|
class="input"
|
|
@@ -280,6 +294,11 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
280
294
|
|
|
281
295
|
<input *ngIf="inputType !== 'date' && inputType !== 'time'"
|
|
282
296
|
class="input"
|
|
297
|
+
type="{{ inputType }}"
|
|
298
|
+
[formControl]="formControl"
|
|
299
|
+
[attr.list]="list"/>
|
|
300
|
+
|
|
301
|
+
<input *ngIf="inputType === 'text' && withPipe"
|
|
283
302
|
class="input"
|
|
284
303
|
type="{{ inputType }}"
|
|
285
304
|
[formControl]="formControl"
|
|
@@ -299,7 +318,7 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
299
318
|
|
|
300
319
|
<label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
|
|
301
320
|
|
|
302
|
-
<p *ngIf="
|
|
321
|
+
<p *ngIf="(formControl.invalid && formControl.value !== '') || formControl.touched">
|
|
303
322
|
{{ validateText }}
|
|
304
323
|
</p>
|
|
305
324
|
</div>
|
|
@@ -319,6 +338,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
319
338
|
|
|
320
339
|
<input *ngIf="inputType !== 'date' && inputType !== 'time'"
|
|
321
340
|
class="input"
|
|
341
|
+
type="{{ inputType }}"
|
|
342
|
+
[formControl]="formControl"
|
|
343
|
+
[attr.list]="list"/>
|
|
344
|
+
|
|
345
|
+
<input *ngIf="inputType === 'text' && withPipe"
|
|
322
346
|
class="input"
|
|
323
347
|
type="{{ inputType }}"
|
|
324
348
|
[formControl]="formControl"
|
|
@@ -338,17 +362,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
338
362
|
|
|
339
363
|
<label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
|
|
340
364
|
|
|
341
|
-
<p *ngIf="
|
|
365
|
+
<p *ngIf="(formControl.invalid && formControl.value !== '') || formControl.touched">
|
|
342
366
|
{{ validateText }}
|
|
343
367
|
</p>
|
|
344
368
|
</div>
|
|
345
369
|
`, 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"] }]
|
|
346
|
-
}], propDecorators: { inputType: [{
|
|
370
|
+
}], ctorParameters: function () { return [{ type: i1.CurrencyPipe }]; }, propDecorators: { inputType: [{
|
|
347
371
|
type: Input
|
|
348
372
|
}], placeHolder: [{
|
|
349
373
|
type: Input
|
|
350
374
|
}], validateText: [{
|
|
351
375
|
type: Input
|
|
376
|
+
}], withPipe: [{
|
|
377
|
+
type: Input
|
|
352
378
|
}], list: [{
|
|
353
379
|
type: Input
|
|
354
380
|
}], iconUrl: [{
|
|
@@ -922,7 +948,7 @@ LoginFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
|
|
|
922
948
|
</div>
|
|
923
949
|
|
|
924
950
|
</div>
|
|
925
|
-
`, 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"] }] });
|
|
951
|
+
`, 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"] }] });
|
|
926
952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LoginFormComponent, decorators: [{
|
|
927
953
|
type: Component,
|
|
928
954
|
args: [{ selector: 'ipt-login-form', template: `
|
|
@@ -1125,7 +1151,7 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
|
|
|
1125
1151
|
TextLinkComponent,
|
|
1126
1152
|
LoginFormComponent,
|
|
1127
1153
|
SidenavComponent], imports: [CommonModule,
|
|
1128
|
-
BrowserModule,
|
|
1154
|
+
// BrowserModule, // Para evitar doble carga de BrowserModule
|
|
1129
1155
|
FormsModule,
|
|
1130
1156
|
ReactiveFormsModule,
|
|
1131
1157
|
MaterialModule], exports: [AsideButtonComponent,
|
|
@@ -1140,9 +1166,12 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
|
|
|
1140
1166
|
TextLinkComponent,
|
|
1141
1167
|
LoginFormComponent,
|
|
1142
1168
|
SidenavComponent] });
|
|
1143
|
-
ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ComponentsModule,
|
|
1169
|
+
ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ComponentsModule, providers: [
|
|
1170
|
+
CurrencyPipe,
|
|
1171
|
+
TitleCasePipe
|
|
1172
|
+
], imports: [[
|
|
1144
1173
|
CommonModule,
|
|
1145
|
-
BrowserModule,
|
|
1174
|
+
// BrowserModule, // Para evitar doble carga de BrowserModule
|
|
1146
1175
|
FormsModule,
|
|
1147
1176
|
ReactiveFormsModule,
|
|
1148
1177
|
MaterialModule
|
|
@@ -1166,7 +1195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
1166
1195
|
],
|
|
1167
1196
|
imports: [
|
|
1168
1197
|
CommonModule,
|
|
1169
|
-
BrowserModule,
|
|
1198
|
+
// BrowserModule, // Para evitar doble carga de BrowserModule
|
|
1170
1199
|
FormsModule,
|
|
1171
1200
|
ReactiveFormsModule,
|
|
1172
1201
|
MaterialModule
|
|
@@ -1184,6 +1213,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
1184
1213
|
TextLinkComponent,
|
|
1185
1214
|
LoginFormComponent,
|
|
1186
1215
|
SidenavComponent,
|
|
1216
|
+
],
|
|
1217
|
+
providers: [
|
|
1218
|
+
CurrencyPipe,
|
|
1219
|
+
TitleCasePipe
|
|
1187
1220
|
]
|
|
1188
1221
|
}]
|
|
1189
1222
|
}] });
|