@unnilouis.org/vs-chipdropdown 17.1.5 → 20.0.0-beta
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/README.md +49 -10
- package/fesm2022/unnilouis.org-vs-chipdropdown.mjs +125 -213
- package/fesm2022/unnilouis.org-vs-chipdropdown.mjs.map +1 -1
- package/index.d.ts +78 -5
- package/package.json +1 -3
- package/esm2022/lib/vs-chipdd-cmp/vs-chipdd-cmp.component.mjs +0 -475
- package/esm2022/lib/vs-chipdropdown.component.mjs +0 -19
- package/esm2022/lib/vs-chipdropdown.module.mjs +0 -56
- package/esm2022/lib/vs-chipdropdown.service.mjs +0 -45
- package/esm2022/public-api.mjs +0 -8
- package/esm2022/unnilouis.org-vs-chipdropdown.mjs +0 -5
- package/lib/vs-chipdd-cmp/vs-chipdd-cmp.component.d.ts +0 -48
- package/lib/vs-chipdropdown.component.d.ts +0 -5
- package/lib/vs-chipdropdown.module.d.ts +0 -22
- package/lib/vs-chipdropdown.service.d.ts +0 -11
- package/public-api.d.ts +0 -4
package/README.md
CHANGED
|
@@ -1,24 +1,63 @@
|
|
|
1
1
|
# VsChipdropdown
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
|
|
4
4
|
|
|
5
5
|
## Code scaffolding
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project vs-chipdropdown` or else it will be added to the default project in your `angular.json` file.
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build vs-chipdropdown
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
```bash
|
|
35
|
+
cd dist/vs-chipdropdown
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
+
```bash
|
|
40
|
+
npm publish
|
|
41
|
+
```
|
|
17
42
|
|
|
18
43
|
## Running unit tests
|
|
19
44
|
|
|
20
|
-
|
|
45
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
ng test
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Running end-to-end tests
|
|
52
|
+
|
|
53
|
+
For end-to-end (e2e) testing, run:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
ng e2e
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
21
60
|
|
|
22
|
-
##
|
|
61
|
+
## Additional Resources
|
|
23
62
|
|
|
24
|
-
|
|
63
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
@@ -1,31 +1,44 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
2
|
+
import { Component, Injectable, EventEmitter, Input, ViewChild, Output, NgModule } from '@angular/core';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
import * as i2 from '@angular/forms';
|
|
5
|
+
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
6
|
import * as i5 from '@angular/material/autocomplete';
|
|
6
|
-
import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
7
|
+
import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
7
8
|
import { map, takeUntil, debounceTime, distinctUntilChanged, tap, switchMap, finalize } from 'rxjs/operators';
|
|
8
9
|
import { fromEvent } from 'rxjs';
|
|
9
|
-
import * as i2 from '@angular/forms';
|
|
10
|
-
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
11
10
|
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
11
|
+
import * as i1 from '@angular/common/http';
|
|
12
12
|
import * as i3 from '@angular/material/form-field';
|
|
13
13
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
14
|
-
import * as i4 from '@angular/material/
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import * as i7 from '@angular/material/chips';
|
|
14
|
+
import * as i4 from '@angular/material/select';
|
|
15
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
16
|
+
import * as i6 from '@angular/material/chips';
|
|
18
17
|
import { MatChipsModule } from '@angular/material/chips';
|
|
19
|
-
import * as
|
|
18
|
+
import * as i7 from '@angular/material/icon';
|
|
20
19
|
import { MatIconModule } from '@angular/material/icon';
|
|
21
|
-
import * as i9 from '@ngx-translate/core';
|
|
22
|
-
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
|
|
23
|
-
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
24
20
|
import { MatInputModule } from '@angular/material/input';
|
|
25
|
-
import { MatSelectModule } from '@angular/material/select';
|
|
26
21
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
27
22
|
|
|
23
|
+
class VsChipdropdown {
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: VsChipdropdown, isStandalone: false, selector: "lib-vs-chipdropdown", ngImport: i0, template: `
|
|
26
|
+
<p>
|
|
27
|
+
vs-chipdropdown works!
|
|
28
|
+
</p>
|
|
29
|
+
`, isInline: true, styles: [""] });
|
|
30
|
+
}
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdown, decorators: [{
|
|
32
|
+
type: Component,
|
|
33
|
+
args: [{ selector: 'lib-vs-chipdropdown', standalone: false, template: `
|
|
34
|
+
<p>
|
|
35
|
+
vs-chipdropdown works!
|
|
36
|
+
</p>
|
|
37
|
+
` }]
|
|
38
|
+
}] });
|
|
39
|
+
|
|
28
40
|
class VsChipdropdownService {
|
|
41
|
+
http;
|
|
29
42
|
constructor(http) {
|
|
30
43
|
this.http = http;
|
|
31
44
|
}
|
|
@@ -57,55 +70,41 @@ class VsChipdropdownService {
|
|
|
57
70
|
headers: headers,
|
|
58
71
|
});
|
|
59
72
|
}
|
|
60
|
-
static
|
|
61
|
-
static
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdownService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
74
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdownService, providedIn: 'root' });
|
|
62
75
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdownService, decorators: [{
|
|
64
77
|
type: Injectable,
|
|
65
78
|
args: [{
|
|
66
79
|
providedIn: 'root'
|
|
67
80
|
}]
|
|
68
81
|
}], ctorParameters: () => [{ type: i1.HttpClient }] });
|
|
69
82
|
|
|
70
|
-
class
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
vs-chipdropdown works!
|
|
75
|
-
</p>
|
|
76
|
-
`, isInline: true, styles: [""] }); }
|
|
77
|
-
}
|
|
78
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VsChipdropdownComponent, decorators: [{
|
|
79
|
-
type: Component,
|
|
80
|
-
args: [{ selector: 'lib-vs-chipdropdown', template: `
|
|
81
|
-
<p>
|
|
82
|
-
vs-chipdropdown works!
|
|
83
|
-
</p>
|
|
84
|
-
` }]
|
|
85
|
-
}] });
|
|
86
|
-
|
|
87
|
-
class VsChipddCmpComponent {
|
|
83
|
+
class VsChipddCmp {
|
|
84
|
+
service;
|
|
85
|
+
fb;
|
|
86
|
+
DrodownLoading = false;
|
|
88
87
|
constructor(service, fb) {
|
|
89
88
|
this.service = service;
|
|
90
89
|
this.fb = fb;
|
|
91
|
-
this.DrodownLoading = false;
|
|
92
|
-
this.Backendapi = true;
|
|
93
|
-
this.trigger = null;
|
|
94
|
-
this.autocompleteTrigger = null;
|
|
95
|
-
this.dataEvent = new EventEmitter();
|
|
96
|
-
this.separatorsKeysCodes = [ENTER, COMMA];
|
|
97
|
-
this.has_next = false;
|
|
98
|
-
this.currentpage = 1;
|
|
99
|
-
this.Dropdowndata = [];
|
|
100
|
-
this.has_previous = false;
|
|
101
|
-
this.DropdownForm = FormGroup;
|
|
102
|
-
this.chipSelectedId = [];
|
|
103
|
-
this.chipSelectedObj = [];
|
|
104
|
-
this.searchControl = new FormControl('');
|
|
105
|
-
this.isOptionSelected = false;
|
|
106
|
-
this.Outputdata = [];
|
|
107
|
-
this.formkeyarr = [];
|
|
108
90
|
}
|
|
91
|
+
InputFields;
|
|
92
|
+
ResetForm;
|
|
93
|
+
Backendapi = true;
|
|
94
|
+
trigger = MatAutocompleteTrigger;
|
|
95
|
+
autocompleteTrigger = MatAutocompleteTrigger;
|
|
96
|
+
matAutocompleteApp = MatAutocomplete;
|
|
97
|
+
dataEvent = new EventEmitter();
|
|
98
|
+
DropInput;
|
|
99
|
+
separatorsKeysCodes = [ENTER, COMMA];
|
|
100
|
+
has_next = false;
|
|
101
|
+
currentpage = 1;
|
|
102
|
+
Dropdowndata = [];
|
|
103
|
+
has_previous = false;
|
|
104
|
+
DropdownForm = FormGroup;
|
|
105
|
+
chipSelectedId = [];
|
|
106
|
+
chipSelectedObj = [];
|
|
107
|
+
formGroup;
|
|
109
108
|
ngOnInit() {
|
|
110
109
|
// if (this.formGroup) {
|
|
111
110
|
// this.DropdownForm = this.formGroup;
|
|
@@ -143,12 +142,12 @@ class VsChipddCmpComponent {
|
|
|
143
142
|
if (this.InputFields?.Outputkey) {
|
|
144
143
|
this.chipSelectedId.push(foundemp[this.InputFields?.Outputkey]);
|
|
145
144
|
}
|
|
146
|
-
else {
|
|
147
|
-
this.chipSelectedId.push(foundemp.id);
|
|
148
|
-
}
|
|
149
145
|
if (this.InputFields?.formkey) {
|
|
150
146
|
this.formkeyarr.push(foundemp[this.InputFields?.formkey]);
|
|
151
147
|
}
|
|
148
|
+
else {
|
|
149
|
+
this.chipSelectedId.push(foundemp.id);
|
|
150
|
+
}
|
|
152
151
|
}
|
|
153
152
|
}
|
|
154
153
|
}
|
|
@@ -159,15 +158,12 @@ class VsChipddCmpComponent {
|
|
|
159
158
|
this.DropdownForm.addControl(this.dynamciformcontrolparent(), new FormControl({ value: [], disabled: this.InputFields?.disabled }));
|
|
160
159
|
}
|
|
161
160
|
else {
|
|
162
|
-
this.InputFields?.disabled
|
|
163
|
-
? this.DropdownForm.get('chipvalue').disable()
|
|
164
|
-
: '';
|
|
161
|
+
this.InputFields?.disabled ? this.DropdownForm.get('chipvalue').disable() : '';
|
|
165
162
|
}
|
|
166
163
|
}
|
|
167
164
|
else {
|
|
168
165
|
this.DropdownForm = this.fb.group({
|
|
169
|
-
chipvalue: [],
|
|
170
|
-
disabled: this.InputFields?.disabled,
|
|
166
|
+
chipvalue: [], disabled: this.InputFields?.disabled
|
|
171
167
|
});
|
|
172
168
|
}
|
|
173
169
|
console.log('this.DropdownForm', this.DropdownForm.value);
|
|
@@ -184,9 +180,7 @@ class VsChipddCmpComponent {
|
|
|
184
180
|
// : this.InputFields?.defaultvalue
|
|
185
181
|
// );
|
|
186
182
|
// this.DropdownForm.get(this.dynamciformcontrolparent()).patchValue(this.InputFields?.defaultvalue);
|
|
187
|
-
this.chipSelectedObj =
|
|
188
|
-
? this.InputFields.defaultvalue
|
|
189
|
-
: [this.InputFields.defaultvalue]; // 🔥 wrap into array
|
|
183
|
+
this.chipSelectedObj = this.InputFields?.defaultvalue;
|
|
190
184
|
this.chipSelectedId = [];
|
|
191
185
|
this.formkeyarr = [];
|
|
192
186
|
if (this.chipSelectedObj.length > 0) {
|
|
@@ -197,7 +191,7 @@ class VsChipddCmpComponent {
|
|
|
197
191
|
if (this.DropdownForm.get(this.dynamciformcontrolparent()).value &&
|
|
198
192
|
this.DropdownForm.get(this.dynamciformcontrolparent()).value.length !== 0) {
|
|
199
193
|
this.chipSelectedObj = this.DropdownForm.get(this.dynamciformcontrolparent()).value;
|
|
200
|
-
console.log('test',
|
|
194
|
+
console.log('test', this.chipSelectedObj = this.DropdownForm.get(this.dynamciformcontrolparent()).value);
|
|
201
195
|
this.chipSelectedId = [];
|
|
202
196
|
this.formkeyarr = [];
|
|
203
197
|
this.looop();
|
|
@@ -271,112 +265,28 @@ class VsChipddCmpComponent {
|
|
|
271
265
|
});
|
|
272
266
|
}
|
|
273
267
|
}
|
|
274
|
-
// dropdownsearch() {
|
|
275
|
-
// const controlName = this.dynamciformcontrolparent();
|
|
276
|
-
// const control = this.DropdownForm.get(controlName);
|
|
277
|
-
// if (control) {
|
|
278
|
-
// if (!this.InputFields?.fronentdata) {
|
|
279
|
-
// if (!this.InputFields?.url) {
|
|
280
|
-
// return;
|
|
281
|
-
// }
|
|
282
|
-
// this.DropdownForm.get(this.dynamciformcontrolparent())
|
|
283
|
-
// .valueChanges.pipe(
|
|
284
|
-
// debounceTime(300),
|
|
285
|
-
// distinctUntilChanged(),
|
|
286
|
-
// // tap(() => {
|
|
287
|
-
// // this.DrodownLoading = true;
|
|
288
|
-
// // console.log('inside tap');
|
|
289
|
-
// // }),
|
|
290
|
-
// switchMap((value) => {
|
|
291
|
-
// // if(this.isOptionSelected){
|
|
292
|
-
// // this.isOptionSelected=false
|
|
293
|
-
// // return []
|
|
294
|
-
// // }
|
|
295
|
-
// if (this.isOptionSelected) {
|
|
296
|
-
// this.isOptionSelected = false;
|
|
297
|
-
// return of({ data: [] }); // <-- ensures emit, triggers UI refresh
|
|
298
|
-
// }
|
|
299
|
-
// let params = this.searchparams(value);
|
|
300
|
-
// this.currentpage = 1;
|
|
301
|
-
// console.log(
|
|
302
|
-
// 'hiteeeedddddddddddddd>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>',
|
|
303
|
-
// );
|
|
304
|
-
// return this.service
|
|
305
|
-
// .GetApi(
|
|
306
|
-
// this.InputFields.url + '?page=' + this.currentpage,
|
|
307
|
-
// params,
|
|
308
|
-
// )
|
|
309
|
-
// .pipe(
|
|
310
|
-
// finalize(() => {
|
|
311
|
-
// this.DrodownLoading = false;
|
|
312
|
-
// }),
|
|
313
|
-
// );
|
|
314
|
-
// }),
|
|
315
|
-
// )
|
|
316
|
-
// .subscribe((results: any) => {
|
|
317
|
-
// this.dataEvent.emit('');
|
|
318
|
-
// let datas = results['data'];
|
|
319
|
-
// this.Dropdowndata = datas;
|
|
320
|
-
// });
|
|
321
|
-
// } else {
|
|
322
|
-
// // this.Dropdowndata = this.InputFields?.data
|
|
323
|
-
// this.DropdownForm.get(
|
|
324
|
-
// this.dynamciformcontrolparent(),
|
|
325
|
-
// ).valueChanges.subscribe((value: any) => {
|
|
326
|
-
// this.Dropdowndata = this.InputFields?.data.filter((item: any) =>
|
|
327
|
-
// item[this.InputFields?.displaykey]
|
|
328
|
-
// ?.toLowerCase()
|
|
329
|
-
// .includes(value?.toLowerCase()),
|
|
330
|
-
// );
|
|
331
|
-
// });
|
|
332
|
-
// }
|
|
333
|
-
// }
|
|
334
|
-
// // if (control && !this.InputFields?.fronentdata) {
|
|
335
|
-
// // this.DropdownForm.get(this.dynamciformcontrolparent())
|
|
336
|
-
// // .valueChanges.pipe(
|
|
337
|
-
// // debounceTime(200),
|
|
338
|
-
// // distinctUntilChanged(),
|
|
339
|
-
// // tap(() => {
|
|
340
|
-
// // this.DrodownLoading = true;
|
|
341
|
-
// // console.log('inside tap');
|
|
342
|
-
// // }),
|
|
343
|
-
// // switchMap((value) => {
|
|
344
|
-
// // let params = this.searchparams(value);
|
|
345
|
-
// // this.currentpage = 1;
|
|
346
|
-
// // return this.service
|
|
347
|
-
// // .GetApi(
|
|
348
|
-
// // this.InputFields.url + '?page=' + this.currentpage,
|
|
349
|
-
// // params
|
|
350
|
-
// // )
|
|
351
|
-
// // .pipe(
|
|
352
|
-
// // finalize(() => {
|
|
353
|
-
// // this.DrodownLoading = false;
|
|
354
|
-
// // })
|
|
355
|
-
// // );
|
|
356
|
-
// // })
|
|
357
|
-
// // )
|
|
358
|
-
// // .subscribe((results: any[]) => {
|
|
359
|
-
// // let datas = results['data'];
|
|
360
|
-
// // this.Dropdowndata = datas;
|
|
361
|
-
// // });
|
|
362
|
-
// // }
|
|
363
|
-
// }
|
|
364
268
|
dropdownsearch() {
|
|
365
|
-
this.
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
269
|
+
const controlName = this.dynamciformcontrolparent();
|
|
270
|
+
const control = this.DropdownForm.get(controlName);
|
|
271
|
+
if (control && !this.InputFields?.fronentdata) {
|
|
272
|
+
this.DropdownForm.get(this.dynamciformcontrolparent())
|
|
273
|
+
.valueChanges.pipe(debounceTime(200), distinctUntilChanged(), tap(() => {
|
|
274
|
+
this.DrodownLoading = true;
|
|
275
|
+
console.log('inside tap');
|
|
276
|
+
}), switchMap((value) => {
|
|
277
|
+
let params = this.searchparams(value);
|
|
278
|
+
this.currentpage = 1;
|
|
279
|
+
return this.service
|
|
280
|
+
.GetApi(this.InputFields.url + '?page=' + this.currentpage, params)
|
|
281
|
+
.pipe(finalize(() => {
|
|
282
|
+
this.DrodownLoading = false;
|
|
283
|
+
}));
|
|
284
|
+
}))
|
|
285
|
+
.subscribe((results) => {
|
|
286
|
+
let datas = results['data'];
|
|
287
|
+
this.Dropdowndata = datas;
|
|
288
|
+
});
|
|
289
|
+
}
|
|
380
290
|
}
|
|
381
291
|
getdropdown(value) {
|
|
382
292
|
this.currentpage = 1;
|
|
@@ -389,9 +299,7 @@ class VsChipddCmpComponent {
|
|
|
389
299
|
let datapagination = results['pagination'];
|
|
390
300
|
this.Dropdowndata = datas;
|
|
391
301
|
setTimeout(() => {
|
|
392
|
-
|
|
393
|
-
this.trigger.openPanel();
|
|
394
|
-
}
|
|
302
|
+
this.trigger.openPanel();
|
|
395
303
|
}, 0);
|
|
396
304
|
if (this.Dropdowndata.length >= 0) {
|
|
397
305
|
this.has_next = datapagination.has_next;
|
|
@@ -401,6 +309,7 @@ class VsChipddCmpComponent {
|
|
|
401
309
|
});
|
|
402
310
|
}
|
|
403
311
|
}
|
|
312
|
+
Outputdata = [];
|
|
404
313
|
dynamciformcontrolparent() {
|
|
405
314
|
return this.InputFields?.formcontrolname && this.formGroup
|
|
406
315
|
? this.InputFields?.formcontrolname
|
|
@@ -469,9 +378,8 @@ class VsChipddCmpComponent {
|
|
|
469
378
|
this.selected();
|
|
470
379
|
}
|
|
471
380
|
}
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
this.isOptionSelected = true;
|
|
381
|
+
formkeyarr = [];
|
|
382
|
+
venSelected(data) {
|
|
475
383
|
this.DropInput.nativeElement.value = '';
|
|
476
384
|
console.log('event.option.value', data);
|
|
477
385
|
this.selectvenByName(data[this.comparekey(data)]);
|
|
@@ -510,12 +418,12 @@ class VsChipddCmpComponent {
|
|
|
510
418
|
}
|
|
511
419
|
}
|
|
512
420
|
}
|
|
513
|
-
static
|
|
514
|
-
static
|
|
421
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipddCmp, deps: [{ token: VsChipdropdownService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
422
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: VsChipddCmp, isStandalone: false, selector: "lib-vs-chipdd-cmp", inputs: { InputFields: "InputFields", ResetForm: "ResetForm", Backendapi: "Backendapi", formGroup: "formGroup" }, outputs: { dataEvent: "dataEvent" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["autoCompleteInput"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "matAutocompleteApp", first: true, predicate: ["scrolll"], descendants: true }, { propertyName: "DropInput", first: true, predicate: ["DropInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n <form [formGroup]=\"DropdownForm\" id=\"matChip-size\">\r\n <!-- class=\"mat-chipScroll\" -->\r\n <mat-form-field\r\n appearance=\"outline\"\r\n (click)=\"!this.InputFields?.fronentdata ? this.getdropdown('') : ''\"\r\n >\r\n <mat-label>{{ InputFields?.label }}</mat-label>\r\n <!-- class=\"chip-container\" -->\r\n <mat-chip-grid multiple #chipListvendor>\r\n <!-- class=\"mat-chipEx\" -->\r\n @for (obj of chipSelectedObj; track obj) {\r\n <mat-chip-row\r\n [removable]=\"true\"\r\n (removed)=\"removechip(obj)\"\r\n >\r\n {{ obj[InputFields?.displaykey] }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <!-- class=\"matformfieldinputstyle\" -->\r\n <input\r\n #DropInput\r\n [matAutocomplete]=\"scrolll\"\r\n [matChipInputFor]=\"chipListvendor\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorsKeysCodes\"\r\n [matChipInputAddOnBlur]=\"true\"\r\n #autoCompleteInput=\"matAutocompleteTrigger\"\r\n [formControlName]=\"this.dynamciformcontrolparent()\"\r\n />\r\n </mat-chip-grid>\r\n <mat-autocomplete\r\n #scrolll=\"matAutocomplete\"\r\n (opened)=\"autocompleteAppScroll()\"\r\n >\r\n <ng-container>\r\n @for (dropvalues of Dropdowndata; track dropvalues) {\r\n <mat-option\r\n [value]=\"\r\n this.InputFields?.formkey\r\n ? dropvalues[this.InputFields?.formkey]\r\n : dropvalues\r\n \"\r\n (onSelectionChange)=\"venSelected(dropvalues)\"\r\n >\r\n {{ dropvalues[InputFields?.displaykey] }}\r\n </mat-option>\r\n }\r\n </ng-container>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n <!-- (click)=\"selected()\"\r\n -->\r\n <!-- (optionSelected)=\"venSelected($event)\"\r\n -->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
515
423
|
}
|
|
516
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipddCmp, decorators: [{
|
|
517
425
|
type: Component,
|
|
518
|
-
args: [{ selector: 'lib-vs-chipdd-cmp', template: "
|
|
426
|
+
args: [{ selector: 'lib-vs-chipdd-cmp', standalone: false, template: "<div>\r\n <form [formGroup]=\"DropdownForm\" id=\"matChip-size\">\r\n <!-- class=\"mat-chipScroll\" -->\r\n <mat-form-field\r\n appearance=\"outline\"\r\n (click)=\"!this.InputFields?.fronentdata ? this.getdropdown('') : ''\"\r\n >\r\n <mat-label>{{ InputFields?.label }}</mat-label>\r\n <!-- class=\"chip-container\" -->\r\n <mat-chip-grid multiple #chipListvendor>\r\n <!-- class=\"mat-chipEx\" -->\r\n @for (obj of chipSelectedObj; track obj) {\r\n <mat-chip-row\r\n [removable]=\"true\"\r\n (removed)=\"removechip(obj)\"\r\n >\r\n {{ obj[InputFields?.displaykey] }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <!-- class=\"matformfieldinputstyle\" -->\r\n <input\r\n #DropInput\r\n [matAutocomplete]=\"scrolll\"\r\n [matChipInputFor]=\"chipListvendor\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorsKeysCodes\"\r\n [matChipInputAddOnBlur]=\"true\"\r\n #autoCompleteInput=\"matAutocompleteTrigger\"\r\n [formControlName]=\"this.dynamciformcontrolparent()\"\r\n />\r\n </mat-chip-grid>\r\n <mat-autocomplete\r\n #scrolll=\"matAutocomplete\"\r\n (opened)=\"autocompleteAppScroll()\"\r\n >\r\n <ng-container>\r\n @for (dropvalues of Dropdowndata; track dropvalues) {\r\n <mat-option\r\n [value]=\"\r\n this.InputFields?.formkey\r\n ? dropvalues[this.InputFields?.formkey]\r\n : dropvalues\r\n \"\r\n (onSelectionChange)=\"venSelected(dropvalues)\"\r\n >\r\n {{ dropvalues[InputFields?.displaykey] }}\r\n </mat-option>\r\n }\r\n </ng-container>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n <!-- (click)=\"selected()\"\r\n -->\r\n <!-- (optionSelected)=\"venSelected($event)\"\r\n -->\r\n" }]
|
|
519
427
|
}], ctorParameters: () => [{ type: VsChipdropdownService }, { type: i2.FormBuilder }], propDecorators: { InputFields: [{
|
|
520
428
|
type: Input
|
|
521
429
|
}], ResetForm: [{
|
|
@@ -543,44 +451,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
543
451
|
type: Input
|
|
544
452
|
}] } });
|
|
545
453
|
|
|
546
|
-
// import {VsSharedModuleModule} from '@unnilouis.org/vs-shared-module'
|
|
547
454
|
class VsChipdropdownModule {
|
|
548
|
-
static
|
|
549
|
-
static
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
455
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
456
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdownModule, declarations: [VsChipdropdown, VsChipddCmp], imports: [CommonModule,
|
|
457
|
+
FormsModule,
|
|
458
|
+
ReactiveFormsModule,
|
|
459
|
+
MatFormFieldModule,
|
|
460
|
+
MatInputModule,
|
|
461
|
+
MatSelectModule,
|
|
462
|
+
MatAutocompleteModule,
|
|
463
|
+
MatGridListModule,
|
|
464
|
+
MatChipsModule,
|
|
465
|
+
MatIconModule], exports: [VsChipddCmp] });
|
|
466
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdownModule, imports: [CommonModule,
|
|
467
|
+
FormsModule,
|
|
468
|
+
ReactiveFormsModule,
|
|
469
|
+
MatFormFieldModule,
|
|
470
|
+
MatInputModule,
|
|
471
|
+
MatSelectModule,
|
|
472
|
+
MatAutocompleteModule,
|
|
473
|
+
MatGridListModule,
|
|
474
|
+
MatChipsModule,
|
|
475
|
+
MatIconModule] });
|
|
562
476
|
}
|
|
563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdownModule, decorators: [{
|
|
564
478
|
type: NgModule,
|
|
565
479
|
args: [{
|
|
566
|
-
declarations: [
|
|
567
|
-
imports: [
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
480
|
+
declarations: [VsChipdropdown, VsChipddCmp],
|
|
481
|
+
imports: [
|
|
482
|
+
CommonModule,
|
|
483
|
+
FormsModule,
|
|
484
|
+
ReactiveFormsModule,
|
|
485
|
+
MatFormFieldModule,
|
|
486
|
+
MatInputModule,
|
|
487
|
+
MatSelectModule,
|
|
488
|
+
MatAutocompleteModule,
|
|
489
|
+
MatGridListModule,
|
|
490
|
+
MatChipsModule,
|
|
491
|
+
MatIconModule,
|
|
492
|
+
],
|
|
493
|
+
exports: [VsChipddCmp],
|
|
579
494
|
}]
|
|
580
495
|
}] });
|
|
581
|
-
function httpTranslateLoader(http) {
|
|
582
|
-
return new TranslateHttpLoader(http);
|
|
583
|
-
}
|
|
584
496
|
|
|
585
497
|
/*
|
|
586
498
|
* Public API Surface of vs-chipdropdown
|
|
@@ -590,5 +502,5 @@ function httpTranslateLoader(http) {
|
|
|
590
502
|
* Generated bundle index. Do not edit.
|
|
591
503
|
*/
|
|
592
504
|
|
|
593
|
-
export {
|
|
505
|
+
export { VsChipddCmp, VsChipdropdown, VsChipdropdownModule };
|
|
594
506
|
//# sourceMappingURL=unnilouis.org-vs-chipdropdown.mjs.map
|