iptdevs-design-system 2.2.24 → 2.2.27
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 +28 -13
- package/fesm2015/iptdevs-design-system.mjs +27 -12
- package/fesm2015/iptdevs-design-system.mjs.map +1 -1
- package/fesm2020/iptdevs-design-system.mjs +27 -12
- package/fesm2020/iptdevs-design-system.mjs.map +1 -1
- package/lib/components/atoms/input/input.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -16,17 +16,24 @@ export class InputComponent {
|
|
|
16
16
|
}
|
|
17
17
|
ngOnInit() {
|
|
18
18
|
if (this.withPipe && this.formControl !== null) {
|
|
19
|
-
|
|
20
|
-
this.formControl.
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
this.formControl = this.currenPipe(this.formControl.value);
|
|
20
|
+
// console.log(this.withPipe, this.formControl, this.control);
|
|
21
|
+
// this.formControl.valueChanges.subscribe(value => {
|
|
22
|
+
// console.log(value);
|
|
23
|
+
// this.formControl.patchValue(
|
|
24
|
+
// { control: this.currencyPipe.transform(value)},
|
|
25
|
+
// { onlySelf: true, emitEvent: false}
|
|
26
|
+
// )
|
|
27
|
+
// })
|
|
24
28
|
}
|
|
25
29
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
currenPipe(datControl) {
|
|
31
|
+
let formatted = new Intl.NumberFormat("en-US", {
|
|
32
|
+
style: 'currency',
|
|
33
|
+
currency: 'USD'
|
|
34
|
+
}).format(datControl);
|
|
35
|
+
return formatted;
|
|
36
|
+
}
|
|
30
37
|
click(value) {
|
|
31
38
|
this.clicked = value.isTrusted;
|
|
32
39
|
}
|
|
@@ -43,7 +50,7 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
43
50
|
uib-datepicker-popup="dd/MM/yyyy"
|
|
44
51
|
ng-model="inputType"/>
|
|
45
52
|
|
|
46
|
-
<input *ngIf="inputType !== 'date' && inputType !== 'time'"
|
|
53
|
+
<input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
|
|
47
54
|
class="input"
|
|
48
55
|
type="{{ inputType }}"
|
|
49
56
|
[formControl]="formControl"
|
|
@@ -54,6 +61,10 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
54
61
|
type="{{ inputType }}"
|
|
55
62
|
[formControl]="formControl"
|
|
56
63
|
[attr.list]="list"/>
|
|
64
|
+
<pre>
|
|
65
|
+
{{ formControl | json }}
|
|
66
|
+
{{ control | json }}
|
|
67
|
+
</pre>
|
|
57
68
|
|
|
58
69
|
<input *ngIf="inputType === 'time'"
|
|
59
70
|
class="input"
|
|
@@ -73,7 +84,7 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
73
84
|
{{ validateText }}
|
|
74
85
|
</p>
|
|
75
86
|
</div>
|
|
76
|
-
`, 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
87
|
+
`, 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "json": i1.JsonPipe } });
|
|
77
88
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, decorators: [{
|
|
78
89
|
type: Component,
|
|
79
90
|
args: [{ selector: 'ipt-input', template: `
|
|
@@ -87,7 +98,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
87
98
|
uib-datepicker-popup="dd/MM/yyyy"
|
|
88
99
|
ng-model="inputType"/>
|
|
89
100
|
|
|
90
|
-
<input *ngIf="inputType !== 'date' && inputType !== 'time'"
|
|
101
|
+
<input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
|
|
91
102
|
class="input"
|
|
92
103
|
type="{{ inputType }}"
|
|
93
104
|
[formControl]="formControl"
|
|
@@ -98,6 +109,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
98
109
|
type="{{ inputType }}"
|
|
99
110
|
[formControl]="formControl"
|
|
100
111
|
[attr.list]="list"/>
|
|
112
|
+
<pre>
|
|
113
|
+
{{ formControl | json }}
|
|
114
|
+
{{ control | json }}
|
|
115
|
+
</pre>
|
|
101
116
|
|
|
102
117
|
<input *ngIf="inputType === 'time'"
|
|
103
118
|
class="input"
|
|
@@ -133,4 +148,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
133
148
|
}], control: [{
|
|
134
149
|
type: Input
|
|
135
150
|
}] } });
|
|
136
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
151
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vZGVzaWduLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvaW5wdXQvaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUEyQyxNQUFNLGVBQWUsQ0FBQzs7OztBQXNEMUYsTUFBTSxPQUFPLGNBQWM7SUFtQnpCLFlBQW9CLFlBQTBCO1FBQTFCLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBaEI5QyxTQUFJLEdBQVUsRUFBRSxDQUFDO1FBRWpCLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFLaEIsYUFBUSxHQUFhLEtBQUssQ0FBQztJQVNhLENBQUM7SUFObEQsSUFBYSxPQUFPLENBQUMsS0FBK0I7UUFDbEQsSUFBSSxJQUFJLENBQUMsV0FBVyxLQUFLLEtBQUssRUFBRTtZQUM5QixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQW9CLENBQUM7U0FDekM7SUFDSCxDQUFDO0lBSUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsV0FBVyxLQUFLLElBQUksRUFBRTtZQUM5QyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUMzRCw4REFBOEQ7WUFDOUQscURBQXFEO1lBQ3JELHdCQUF3QjtZQUN4QixpQ0FBaUM7WUFDakMsc0RBQXNEO1lBQ3RELDBDQUEwQztZQUMxQyxNQUFNO1lBQ04sS0FBSztTQUNOO0lBRUgsQ0FBQztJQUNELFVBQVUsQ0FBQyxVQUFlO1FBQ3hCLElBQUksU0FBUyxHQUFHLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLEVBQUU7WUFDN0MsS0FBSyxFQUFFLFVBQVU7WUFDakIsUUFBUSxFQUFFLEtBQUs7U0FDaEIsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUN0QixPQUFPLFNBQVMsQ0FBQztJQUNuQixDQUFDO0lBRUQsS0FBSyxDQUFDLEtBQWlCO1FBQ3JCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDLFNBQVMsQ0FBQztJQUNqQyxDQUFDOzsyR0E3Q1UsY0FBYzsrRkFBZCxjQUFjLDJOQWhEZjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBNkNQOzJGQUdRLGNBQWM7a0JBbEQxQixTQUFTOytCQUNFLFdBQVcsWUFDWDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBNkNQO21HQVVNLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDTyxPQUFPO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ3VycmVuY3lQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBWaWV3Q2hpbGQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWJzdHJhY3RDb250cm9sLCBGb3JtQnVpbGRlciwgRm9ybUNvbnRyb2wsIEZvcm1Hcm91cCwgTmdGb3JtLCBWYWxpZGF0b3JzIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2lwdC1pbnB1dCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cImlucHV0LWNvbnRhaW5lclwiPlxuICAgICAgPGlucHV0ICpuZ0lmPVwiaW5wdXRUeXBlID09PSAnZGF0ZSdcIlxuICAgICAgICBjbGFzcz1cImlucHV0XCJcbiAgICAgICAgdHlwZT1cInt7IGlucHV0VHlwZSA/ICd0ZXh0JyA6ICdkYXRlJyB9fVwiXG4gICAgICAgIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiXG4gICAgICAgIG9uZm9jdXM9XCJ0aGlzLnR5cGU9J2RhdGUnO1wiXG4gICAgICAgIG9uYmx1cj1cImphdmFzY3JpcHQ6IGlmKCAhdGhpcy52YWx1ZSApIHRoaXMudHlwZT0ndGV4dCc7XCJcbiAgICAgICAgdWliLWRhdGVwaWNrZXItcG9wdXA9XCJkZC9NTS95eXl5XCJcbiAgICAgICAgbmctbW9kZWw9XCJpbnB1dFR5cGVcIi8+XG5cbiAgICAgIDxpbnB1dCAqbmdJZj1cImlucHV0VHlwZSAhPT0gJ2RhdGUnICYmIGlucHV0VHlwZSAhPT0gJ3RpbWUnICYmICF3aXRoUGlwZVwiXG4gICAgICAgIGNsYXNzPVwiaW5wdXRcIlxuICAgICAgICB0eXBlPVwie3sgaW5wdXRUeXBlIH19XCJcbiAgICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgW2F0dHIubGlzdF09XCJsaXN0XCIvPlxuXG4gICAgICAgIDxpbnB1dCAqbmdJZj1cImlucHV0VHlwZSA9PT0gJ3RleHQnICYmIHdpdGhQaXBlXCJcbiAgICAgICAgY2xhc3M9XCJpbnB1dFwiXG4gICAgICAgIHR5cGU9XCJ7eyBpbnB1dFR5cGUgfX1cIlxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICBbYXR0ci5saXN0XT1cImxpc3RcIi8+XG4gICAgICAgIDxwcmU+XG4gICAgICAgICAge3sgZm9ybUNvbnRyb2wgfCBqc29uIH19XG4gICAgICAgICAge3sgY29udHJvbCB8IGpzb24gfX1cbiAgICAgICAgPC9wcmU+XG5cbiAgICAgICAgPGlucHV0ICpuZ0lmPVwiaW5wdXRUeXBlID09PSAndGltZSdcIlxuICAgICAgICAgIGNsYXNzPVwiaW5wdXRcIlxuICAgICAgICAgIHR5cGU9XCJ0aW1lXCJcbiAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICAgIFttaW5dPVwiJzA2OjAwOjAwJ1wiXG4gICAgICAgICAgbWF4PVwiMjI6MDA6MDBcIlxuICAgICAgICAgIHN0ZXA9XCI5MDBcIlxuICAgICAgICAgIGF1dG9jb21wbGV0ZT1cIm9uXCJcbiAgICAgICAgICB2YWx1ZT1cIjA4OjAwOjAwXCJcbiAgICAgICAgICAoY2xpY2spPVwiY2xpY2soJGV2ZW50KVwiXG4gICAgICAgIC8+XG5cbiAgICAgIDxsYWJlbCBbbmdDbGFzc109XCJ7J2xhYmVsVXAnOiBmb3JtQ29udHJvbC52YWx1ZSAhPT0gJyd9XCI+e3sgcGxhY2VIb2xkZXIgfX08L2xhYmVsPlxuXG4gICAgICA8cCAqbmdJZj1cIihmb3JtQ29udHJvbC5pbnZhbGlkICYmIGZvcm1Db250cm9sLnZhbHVlICE9PSAnJykgfHwgZm9ybUNvbnRyb2wudG91Y2hlZFwiPlxuICAgICAgICB7eyB2YWxpZGF0ZVRleHQgfX1cbiAgICAgIDwvcD5cbiAgICA8L2Rpdj5cbiAgICBgLFxuICBzdHlsZVVybHM6IFsnLi9pbnB1dC5jc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBcbiAgcHVibGljIGNvZGVWYWx1ZSE6IHN0cmluZztcbiAgZGF0YTogYW55W10gPSBbXTtcbiAgZm9ybUNvbnRyb2whOiBGb3JtQ29udHJvbDtcbiAgY2xpY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBcbiAgQElucHV0KCkgaW5wdXRUeXBlITogc3RyaW5nO1xuICBASW5wdXQoKSBwbGFjZUhvbGRlciE6IHN0cmluZztcbiAgQElucHV0KCkgdmFsaWRhdGVUZXh0Pzogc3RyaW5nO1xuICBASW5wdXQoKSB3aXRoUGlwZT86IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgbGlzdD86IHN0cmluZzsgLy9QYXJhIGVsIGRhdGFsaXN0XG4gIEBJbnB1dCgpIGljb25Vcmw/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNldCBjb250cm9sKHZhbHVlOiBBYnN0cmFjdENvbnRyb2wgfCBzdHJpbmcpIHtcbiAgICBpZiAodGhpcy5mb3JtQ29udHJvbCAhPT0gdmFsdWUpIHtcbiAgICAgIHRoaXMuZm9ybUNvbnRyb2wgPSB2YWx1ZSBhcyBGb3JtQ29udHJvbDtcbiAgICB9XG4gIH1cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGN1cnJlbmN5UGlwZTogQ3VycmVuY3lQaXBlKSB7fVxuICBcbiAgbmdPbkluaXQoKSB7XG4gICAgaWYgKHRoaXMud2l0aFBpcGUgJiYgdGhpcy5mb3JtQ29udHJvbCAhPT0gbnVsbCkge1xuICAgICAgdGhpcy5mb3JtQ29udHJvbCA9IHRoaXMuY3VycmVuUGlwZSh0aGlzLmZvcm1Db250cm9sLnZhbHVlKTtcbiAgICAgIC8vIGNvbnNvbGUubG9nKHRoaXMud2l0aFBpcGUsIHRoaXMuZm9ybUNvbnRyb2wsIHRoaXMuY29udHJvbCk7XG4gICAgICAvLyB0aGlzLmZvcm1Db250cm9sLnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUodmFsdWUgPT4ge1xuICAgICAgLy8gICBjb25zb2xlLmxvZyh2YWx1ZSk7XG4gICAgICAvLyAgIHRoaXMuZm9ybUNvbnRyb2wucGF0Y2hWYWx1ZShcbiAgICAgIC8vICAgICB7IGNvbnRyb2w6IHRoaXMuY3VycmVuY3lQaXBlLnRyYW5zZm9ybSh2YWx1ZSl9LFxuICAgICAgLy8gICAgIHsgb25seVNlbGY6IHRydWUsIGVtaXRFdmVudDogZmFsc2V9XG4gICAgICAvLyAgIClcbiAgICAgIC8vIH0pXG4gICAgfVxuXG4gIH1cbiAgY3VycmVuUGlwZShkYXRDb250cm9sOiBhbnkpOiBhbnkge1xuICAgIGxldCBmb3JtYXR0ZWQgPSBuZXcgSW50bC5OdW1iZXJGb3JtYXQoXCJlbi1VU1wiLCB7XG4gICAgICBzdHlsZTogJ2N1cnJlbmN5JyxcbiAgICAgIGN1cnJlbmN5OiAnVVNEJ1xuICAgIH0pLmZvcm1hdChkYXRDb250cm9sKTtcbiAgICByZXR1cm4gZm9ybWF0dGVkO1xuICB9XG5cbiAgY2xpY2sodmFsdWU6IE1vdXNlRXZlbnQpIHtcbiAgICB0aGlzLmNsaWNrZWQgPSB2YWx1ZS5pc1RydXN0ZWQ7XG4gIH1cblxufVxuIl19
|
|
@@ -265,17 +265,24 @@ class InputComponent {
|
|
|
265
265
|
}
|
|
266
266
|
ngOnInit() {
|
|
267
267
|
if (this.withPipe && this.formControl !== null) {
|
|
268
|
-
|
|
269
|
-
this.formControl.
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
268
|
+
this.formControl = this.currenPipe(this.formControl.value);
|
|
269
|
+
// console.log(this.withPipe, this.formControl, this.control);
|
|
270
|
+
// this.formControl.valueChanges.subscribe(value => {
|
|
271
|
+
// console.log(value);
|
|
272
|
+
// this.formControl.patchValue(
|
|
273
|
+
// { control: this.currencyPipe.transform(value)},
|
|
274
|
+
// { onlySelf: true, emitEvent: false}
|
|
275
|
+
// )
|
|
276
|
+
// })
|
|
273
277
|
}
|
|
274
278
|
}
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
+
currenPipe(datControl) {
|
|
280
|
+
let formatted = new Intl.NumberFormat("en-US", {
|
|
281
|
+
style: 'currency',
|
|
282
|
+
currency: 'USD'
|
|
283
|
+
}).format(datControl);
|
|
284
|
+
return formatted;
|
|
285
|
+
}
|
|
279
286
|
click(value) {
|
|
280
287
|
this.clicked = value.isTrusted;
|
|
281
288
|
}
|
|
@@ -292,7 +299,7 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
292
299
|
uib-datepicker-popup="dd/MM/yyyy"
|
|
293
300
|
ng-model="inputType"/>
|
|
294
301
|
|
|
295
|
-
<input *ngIf="inputType !== 'date' && inputType !== 'time'"
|
|
302
|
+
<input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
|
|
296
303
|
class="input"
|
|
297
304
|
type="{{ inputType }}"
|
|
298
305
|
[formControl]="formControl"
|
|
@@ -303,6 +310,10 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
303
310
|
type="{{ inputType }}"
|
|
304
311
|
[formControl]="formControl"
|
|
305
312
|
[attr.list]="list"/>
|
|
313
|
+
<pre>
|
|
314
|
+
{{ formControl | json }}
|
|
315
|
+
{{ control | json }}
|
|
316
|
+
</pre>
|
|
306
317
|
|
|
307
318
|
<input *ngIf="inputType === 'time'"
|
|
308
319
|
class="input"
|
|
@@ -322,7 +333,7 @@ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
322
333
|
{{ validateText }}
|
|
323
334
|
</p>
|
|
324
335
|
</div>
|
|
325
|
-
`, 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"] }] });
|
|
336
|
+
`, 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 } });
|
|
326
337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, decorators: [{
|
|
327
338
|
type: Component,
|
|
328
339
|
args: [{ selector: 'ipt-input', template: `
|
|
@@ -336,7 +347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
336
347
|
uib-datepicker-popup="dd/MM/yyyy"
|
|
337
348
|
ng-model="inputType"/>
|
|
338
349
|
|
|
339
|
-
<input *ngIf="inputType !== 'date' && inputType !== 'time'"
|
|
350
|
+
<input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
|
|
340
351
|
class="input"
|
|
341
352
|
type="{{ inputType }}"
|
|
342
353
|
[formControl]="formControl"
|
|
@@ -347,6 +358,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
347
358
|
type="{{ inputType }}"
|
|
348
359
|
[formControl]="formControl"
|
|
349
360
|
[attr.list]="list"/>
|
|
361
|
+
<pre>
|
|
362
|
+
{{ formControl | json }}
|
|
363
|
+
{{ control | json }}
|
|
364
|
+
</pre>
|
|
350
365
|
|
|
351
366
|
<input *ngIf="inputType === 'time'"
|
|
352
367
|
class="input"
|