iptdevs-design-system 2.2.37 → 2.2.40
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/datalist/datalist.component.mjs +13 -8
- package/fesm2015/iptdevs-design-system.mjs +12 -7
- package/fesm2015/iptdevs-design-system.mjs.map +1 -1
- package/fesm2020/iptdevs-design-system.mjs +12 -7
- package/fesm2020/iptdevs-design-system.mjs.map +1 -1
- package/lib/components/atoms/datalist/datalist.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -16,6 +16,11 @@ export class DatalistComponent {
|
|
|
16
16
|
this.formControl.controls['dataListControl'].setValue(this.initalData);
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
+
ngOnChanges(changes) {
|
|
20
|
+
if (changes['initialData']) {
|
|
21
|
+
this.formControl.controls['dataListControl'].setValue(this.initalData);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
19
24
|
optionChanged(event) {
|
|
20
25
|
let selectOption = this.datalistData.find(element => element.name == event.target.value);
|
|
21
26
|
if (typeof (selectOption) != 'undefined') {
|
|
@@ -23,7 +28,7 @@ export class DatalistComponent {
|
|
|
23
28
|
}
|
|
24
29
|
else {
|
|
25
30
|
this.isChanged.emit('-1');
|
|
26
|
-
this.formControl.controls['dataListControl'].
|
|
31
|
+
this.formControl.controls['dataListControl'].value('');
|
|
27
32
|
}
|
|
28
33
|
}
|
|
29
34
|
click(value) {
|
|
@@ -34,8 +39,8 @@ export class DatalistComponent {
|
|
|
34
39
|
}
|
|
35
40
|
}
|
|
36
41
|
DatalistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DatalistComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
-
DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: DatalistComponent, selector: "ipt-datalist", inputs: { datalistId: "datalistId", datalistData: "datalistData", placeHolder: "placeHolder", validateText: "validateText", initalData: "initalData" }, outputs: { isChanged: "isChanged" }, ngImport: i0, template: `
|
|
38
|
-
<div class="input-container"
|
|
42
|
+
DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: DatalistComponent, selector: "ipt-datalist", inputs: { datalistId: "datalistId", datalistData: "datalistData", placeHolder: "placeHolder", validateText: "validateText", initalData: "initalData" }, outputs: { isChanged: "isChanged" }, usesOnChanges: true, ngImport: i0, template: `
|
|
43
|
+
<div class="input-container">
|
|
39
44
|
<label [ngClass]="labelClass">{{ placeHolder }}</label>
|
|
40
45
|
<input
|
|
41
46
|
type="text"
|
|
@@ -43,20 +48,20 @@ DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
|
|
|
43
48
|
(click)="click($event)"
|
|
44
49
|
[attr.list]="datalistId"
|
|
45
50
|
(change)="optionChanged($event)"
|
|
46
|
-
formControlName="dataListControl"
|
|
47
51
|
/>
|
|
48
52
|
|
|
49
53
|
<datalist id="{{ datalistId }}">
|
|
54
|
+
<option selected> {{ this.formControl.controls['dataListControl'].value }}</option>
|
|
50
55
|
<option *ngFor="let item of datalistData; index as i" [value]="item.name">
|
|
51
56
|
{{item.id_card}} {{item.name}}
|
|
52
57
|
</option>
|
|
53
58
|
</datalist>
|
|
54
59
|
</div>
|
|
55
|
-
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.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;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff}.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}.labelUp{color:#1c77f7;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:
|
|
60
|
+
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.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;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff}.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}.labelUp{color:#1c77f7;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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
56
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DatalistComponent, decorators: [{
|
|
57
62
|
type: Component,
|
|
58
63
|
args: [{ selector: 'ipt-datalist', template: `
|
|
59
|
-
<div class="input-container"
|
|
64
|
+
<div class="input-container">
|
|
60
65
|
<label [ngClass]="labelClass">{{ placeHolder }}</label>
|
|
61
66
|
<input
|
|
62
67
|
type="text"
|
|
@@ -64,10 +69,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
64
69
|
(click)="click($event)"
|
|
65
70
|
[attr.list]="datalistId"
|
|
66
71
|
(change)="optionChanged($event)"
|
|
67
|
-
formControlName="dataListControl"
|
|
68
72
|
/>
|
|
69
73
|
|
|
70
74
|
<datalist id="{{ datalistId }}">
|
|
75
|
+
<option selected> {{ this.formControl.controls['dataListControl'].value }}</option>
|
|
71
76
|
<option *ngFor="let item of datalistData; index as i" [value]="item.name">
|
|
72
77
|
{{item.id_card}} {{item.name}}
|
|
73
78
|
</option>
|
|
@@ -87,4 +92,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
87
92
|
}], isChanged: [{
|
|
88
93
|
type: Output
|
|
89
94
|
}] } });
|
|
90
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
95
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vZGVzaWduLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvZGF0YWxpc3QvZGF0YWxpc3QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQTRCLE1BQU0sZUFBZSxDQUFDO0FBQ2pHLE9BQU8sRUFBZ0UsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUF5QjFHLE1BQU0sT0FBTyxpQkFBaUI7SUFhNUIsWUFBWSxFQUFlO1FBTGpCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBR2pELFlBQU8sR0FBWSxLQUFLLENBQUM7UUFHdkIsSUFBSSxDQUFDLFdBQVcsR0FBRyxFQUFFLENBQUMsS0FBSyxDQUFDO1lBQzFCLGVBQWUsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUM3QyxDQUFDLENBQUM7SUFDSixDQUFDO0lBRUYsUUFBUTtRQUNOLElBQUcsSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1NBQ3hFO0lBQ0gsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxhQUFhLENBQUMsRUFBRTtZQUMxQixJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7U0FDeEU7SUFDSCxDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQVU7UUFDdEIsSUFBSSxZQUFZLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBRSxPQUFPLENBQUMsSUFBSSxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFMUYsSUFBSSxPQUFNLENBQUMsWUFBWSxDQUFDLElBQUksV0FBVyxFQUFFO1lBQ3ZDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUN4QzthQUFNO1lBQ0wsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDMUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDeEQ7SUFDSCxDQUFDO0lBRUQsS0FBSyxDQUFDLEtBQWlCO1FBQ3JCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDLFNBQVMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsSUFBVyxVQUFVO1FBQ25CLE9BQU8sSUFBSSxDQUFDLE9BQU8sS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO0lBQ3RELENBQUM7OzhHQWhEVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixzUUFyQmxCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrQlQ7MkZBR1UsaUJBQWlCO2tCQXZCN0IsU0FBUzsrQkFDRSxjQUFjLFlBQ2Q7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCVDtrR0FLUSxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUksU0FBUztzQkFBbEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBWaWV3Q2hpbGQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCwgRm9ybUJ1aWxkZXIsIEZvcm1Db250cm9sLCBGb3JtR3JvdXAsIE5nRm9ybSwgVmFsaWRhdG9ycyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnaXB0LWRhdGFsaXN0JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwiaW5wdXQtY29udGFpbmVyXCI+XG4gICAgICA8bGFiZWwgW25nQ2xhc3NdPVwibGFiZWxDbGFzc1wiPnt7IHBsYWNlSG9sZGVyIH19PC9sYWJlbD5cbiAgICAgIDxpbnB1dFxuICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgIGNsYXNzPVwiaW5wdXRcIlxuICAgICAgICAoY2xpY2spPVwiY2xpY2soJGV2ZW50KVwiXG4gICAgICAgIFthdHRyLmxpc3RdPVwiZGF0YWxpc3RJZFwiXG4gICAgICAgIChjaGFuZ2UpPVwib3B0aW9uQ2hhbmdlZCgkZXZlbnQpXCJcbiAgICAgIC8+XG5cbiAgICAgIDxkYXRhbGlzdCBpZD1cInt7IGRhdGFsaXN0SWQgfX1cIj5cbiAgICAgICAgPG9wdGlvbiBzZWxlY3RlZD4ge3sgdGhpcy5mb3JtQ29udHJvbC5jb250cm9sc1snZGF0YUxpc3RDb250cm9sJ10udmFsdWUgfX08L29wdGlvbj5cbiAgICAgICAgPG9wdGlvbiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBkYXRhbGlzdERhdGE7IGluZGV4IGFzIGlcIiBbdmFsdWVdPVwiaXRlbS5uYW1lXCI+XG4gICAgICAgICAge3tpdGVtLmlkX2NhcmR9fSB7e2l0ZW0ubmFtZX19XG4gICAgICAgIDwvb3B0aW9uPlxuICAgICAgPC9kYXRhbGlzdD5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVVcmxzOiBbJy4vZGF0YWxpc3QuY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIERhdGFsaXN0Q29tcG9uZW50IHtcblxuICBASW5wdXQoKSBkYXRhbGlzdElkITogc3RyaW5nO1xuICBASW5wdXQoKSBkYXRhbGlzdERhdGEhOiBhbnlbXTtcbiAgQElucHV0KCkgcGxhY2VIb2xkZXIhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHZhbGlkYXRlVGV4dCE6IHN0cmluZztcbiAgQElucHV0KCkgaW5pdGFsRGF0YSE6IHN0cmluZztcblxuICBAT3V0cHV0KCkgaXNDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgZm9ybUNvbnRyb2whOiBGb3JtR3JvdXA7XG4gIGNsaWNrZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihmYjogRm9ybUJ1aWxkZXIpIHtcbiAgICB0aGlzLmZvcm1Db250cm9sID0gZmIuZ3JvdXAoe1xuICAgICAgZGF0YUxpc3RDb250cm9sOiBbJycsIFtWYWxpZGF0b3JzLnJlcXVpcmVkXV0sXG4gICAgfSk7XG4gICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYodGhpcy5pbml0YWxEYXRhICE9IG51bGwpIHtcbiAgICAgIHRoaXMuZm9ybUNvbnRyb2wuY29udHJvbHNbJ2RhdGFMaXN0Q29udHJvbCddLnNldFZhbHVlKHRoaXMuaW5pdGFsRGF0YSk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWydpbml0aWFsRGF0YSddKSB7XG4gICAgICB0aGlzLmZvcm1Db250cm9sLmNvbnRyb2xzWydkYXRhTGlzdENvbnRyb2wnXS5zZXRWYWx1ZSh0aGlzLmluaXRhbERhdGEpO1xuICAgIH1cbiAgfVxuXG4gIG9wdGlvbkNoYW5nZWQoZXZlbnQ6IGFueSkge1xuICAgIGxldCBzZWxlY3RPcHRpb24gPSB0aGlzLmRhdGFsaXN0RGF0YS5maW5kKGVsZW1lbnQgPT4gIGVsZW1lbnQubmFtZSA9PSBldmVudC50YXJnZXQudmFsdWUpO1xuXG4gICAgaWYgKHR5cGVvZihzZWxlY3RPcHRpb24pICE9ICd1bmRlZmluZWQnKSB7XG4gICAgICB0aGlzLmlzQ2hhbmdlZC5lbWl0KHNlbGVjdE9wdGlvbi5jb2RlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5pc0NoYW5nZWQuZW1pdCgnLTEnKTtcbiAgICAgIHRoaXMuZm9ybUNvbnRyb2wuY29udHJvbHNbJ2RhdGFMaXN0Q29udHJvbCddLnZhbHVlKCcnKTtcbiAgICB9XG4gIH1cblxuICBjbGljayh2YWx1ZTogTW91c2VFdmVudCkge1xuICAgIHRoaXMuY2xpY2tlZCA9IHZhbHVlLmlzVHJ1c3RlZDtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgbGFiZWxDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmNsaWNrZWQgPT09IGZhbHNlID8gJ2xhYmVsJyA6ICdsYWJlbFVwJztcbiAgfVxufVxuIl19
|
|
@@ -183,6 +183,11 @@ class DatalistComponent {
|
|
|
183
183
|
this.formControl.controls['dataListControl'].setValue(this.initalData);
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
|
+
ngOnChanges(changes) {
|
|
187
|
+
if (changes['initialData']) {
|
|
188
|
+
this.formControl.controls['dataListControl'].setValue(this.initalData);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
186
191
|
optionChanged(event) {
|
|
187
192
|
let selectOption = this.datalistData.find(element => element.name == event.target.value);
|
|
188
193
|
if (typeof (selectOption) != 'undefined') {
|
|
@@ -190,7 +195,7 @@ class DatalistComponent {
|
|
|
190
195
|
}
|
|
191
196
|
else {
|
|
192
197
|
this.isChanged.emit('-1');
|
|
193
|
-
this.formControl.controls['dataListControl'].
|
|
198
|
+
this.formControl.controls['dataListControl'].value('');
|
|
194
199
|
}
|
|
195
200
|
}
|
|
196
201
|
click(value) {
|
|
@@ -201,8 +206,8 @@ class DatalistComponent {
|
|
|
201
206
|
}
|
|
202
207
|
}
|
|
203
208
|
DatalistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DatalistComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
204
|
-
DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: DatalistComponent, selector: "ipt-datalist", inputs: { datalistId: "datalistId", datalistData: "datalistData", placeHolder: "placeHolder", validateText: "validateText", initalData: "initalData" }, outputs: { isChanged: "isChanged" }, ngImport: i0, template: `
|
|
205
|
-
<div class="input-container"
|
|
209
|
+
DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: DatalistComponent, selector: "ipt-datalist", inputs: { datalistId: "datalistId", datalistData: "datalistData", placeHolder: "placeHolder", validateText: "validateText", initalData: "initalData" }, outputs: { isChanged: "isChanged" }, usesOnChanges: true, ngImport: i0, template: `
|
|
210
|
+
<div class="input-container">
|
|
206
211
|
<label [ngClass]="labelClass">{{ placeHolder }}</label>
|
|
207
212
|
<input
|
|
208
213
|
type="text"
|
|
@@ -210,20 +215,20 @@ DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
|
|
|
210
215
|
(click)="click($event)"
|
|
211
216
|
[attr.list]="datalistId"
|
|
212
217
|
(change)="optionChanged($event)"
|
|
213
|
-
formControlName="dataListControl"
|
|
214
218
|
/>
|
|
215
219
|
|
|
216
220
|
<datalist id="{{ datalistId }}">
|
|
221
|
+
<option selected> {{ this.formControl.controls['dataListControl'].value }}</option>
|
|
217
222
|
<option *ngFor="let item of datalistData; index as i" [value]="item.name">
|
|
218
223
|
{{item.id_card}} {{item.name}}
|
|
219
224
|
</option>
|
|
220
225
|
</datalist>
|
|
221
226
|
</div>
|
|
222
|
-
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.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;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff}.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}.labelUp{color:#1c77f7;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
|
|
227
|
+
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.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;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff}.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}.labelUp{color:#1c77f7;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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
223
228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DatalistComponent, decorators: [{
|
|
224
229
|
type: Component,
|
|
225
230
|
args: [{ selector: 'ipt-datalist', template: `
|
|
226
|
-
<div class="input-container"
|
|
231
|
+
<div class="input-container">
|
|
227
232
|
<label [ngClass]="labelClass">{{ placeHolder }}</label>
|
|
228
233
|
<input
|
|
229
234
|
type="text"
|
|
@@ -231,10 +236,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
231
236
|
(click)="click($event)"
|
|
232
237
|
[attr.list]="datalistId"
|
|
233
238
|
(change)="optionChanged($event)"
|
|
234
|
-
formControlName="dataListControl"
|
|
235
239
|
/>
|
|
236
240
|
|
|
237
241
|
<datalist id="{{ datalistId }}">
|
|
242
|
+
<option selected> {{ this.formControl.controls['dataListControl'].value }}</option>
|
|
238
243
|
<option *ngFor="let item of datalistData; index as i" [value]="item.name">
|
|
239
244
|
{{item.id_card}} {{item.name}}
|
|
240
245
|
</option>
|