@unnilouis.org/vs-chipdropdown 17.1.6 → 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 +120 -170
- 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 -437
- 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 -47
- 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 { HttpClientModule, HttpClient } from '@angular/common/http';
|
|
5
|
-
import * as i5 from '@angular/material/autocomplete';
|
|
6
|
-
import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
7
|
-
import { map, takeUntil, debounceTime, distinctUntilChanged, switchMap, finalize } from 'rxjs/operators';
|
|
8
|
-
import { fromEvent } from 'rxjs';
|
|
2
|
+
import { Component, Injectable, EventEmitter, Input, ViewChild, Output, NgModule } from '@angular/core';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
9
4
|
import * as i2 from '@angular/forms';
|
|
10
5
|
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
6
|
+
import * as i5 from '@angular/material/autocomplete';
|
|
7
|
+
import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
8
|
+
import { map, takeUntil, debounceTime, distinctUntilChanged, tap, switchMap, finalize } from 'rxjs/operators';
|
|
9
|
+
import { fromEvent } from 'rxjs';
|
|
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,54 +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.isOptionSelected = false;
|
|
105
|
-
this.Outputdata = [];
|
|
106
|
-
this.formkeyarr = [];
|
|
107
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;
|
|
108
108
|
ngOnInit() {
|
|
109
109
|
// if (this.formGroup) {
|
|
110
110
|
// this.DropdownForm = this.formGroup;
|
|
@@ -142,12 +142,12 @@ class VsChipddCmpComponent {
|
|
|
142
142
|
if (this.InputFields?.Outputkey) {
|
|
143
143
|
this.chipSelectedId.push(foundemp[this.InputFields?.Outputkey]);
|
|
144
144
|
}
|
|
145
|
-
else {
|
|
146
|
-
this.chipSelectedId.push(foundemp.id);
|
|
147
|
-
}
|
|
148
145
|
if (this.InputFields?.formkey) {
|
|
149
146
|
this.formkeyarr.push(foundemp[this.InputFields?.formkey]);
|
|
150
147
|
}
|
|
148
|
+
else {
|
|
149
|
+
this.chipSelectedId.push(foundemp.id);
|
|
150
|
+
}
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
}
|
|
@@ -180,9 +180,7 @@ class VsChipddCmpComponent {
|
|
|
180
180
|
// : this.InputFields?.defaultvalue
|
|
181
181
|
// );
|
|
182
182
|
// this.DropdownForm.get(this.dynamciformcontrolparent()).patchValue(this.InputFields?.defaultvalue);
|
|
183
|
-
this.chipSelectedObj =
|
|
184
|
-
? this.InputFields.defaultvalue
|
|
185
|
-
: [this.InputFields.defaultvalue]; // 🔥 wrap into array
|
|
183
|
+
this.chipSelectedObj = this.InputFields?.defaultvalue;
|
|
186
184
|
this.chipSelectedId = [];
|
|
187
185
|
this.formkeyarr = [];
|
|
188
186
|
if (this.chipSelectedObj.length > 0) {
|
|
@@ -270,75 +268,25 @@ class VsChipddCmpComponent {
|
|
|
270
268
|
dropdownsearch() {
|
|
271
269
|
const controlName = this.dynamciformcontrolparent();
|
|
272
270
|
const control = this.DropdownForm.get(controlName);
|
|
273
|
-
if (control) {
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
console.log("hiteeeedddddddddddddd>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
|
|
292
|
-
return this.service
|
|
293
|
-
.GetApi(this.InputFields.url + '?page=' + this.currentpage, params)
|
|
294
|
-
.pipe(finalize(() => {
|
|
295
|
-
this.DrodownLoading = false;
|
|
296
|
-
}));
|
|
297
|
-
}))
|
|
298
|
-
.subscribe((results) => {
|
|
299
|
-
this.dataEvent.emit('');
|
|
300
|
-
let datas = results['data'];
|
|
301
|
-
this.Dropdowndata = datas;
|
|
302
|
-
});
|
|
303
|
-
}
|
|
304
|
-
else {
|
|
305
|
-
// this.Dropdowndata = this.InputFields?.data
|
|
306
|
-
this.DropdownForm.get(this.dynamciformcontrolparent()).valueChanges.subscribe((value) => {
|
|
307
|
-
this.Dropdowndata = this.InputFields?.data.filter((item) => item[this.InputFields?.displaykey]
|
|
308
|
-
?.toLowerCase()
|
|
309
|
-
.includes(value?.toLowerCase()));
|
|
310
|
-
});
|
|
311
|
-
}
|
|
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
|
+
});
|
|
312
289
|
}
|
|
313
|
-
// if (control && !this.InputFields?.fronentdata) {
|
|
314
|
-
// this.DropdownForm.get(this.dynamciformcontrolparent())
|
|
315
|
-
// .valueChanges.pipe(
|
|
316
|
-
// debounceTime(200),
|
|
317
|
-
// distinctUntilChanged(),
|
|
318
|
-
// tap(() => {
|
|
319
|
-
// this.DrodownLoading = true;
|
|
320
|
-
// console.log('inside tap');
|
|
321
|
-
// }),
|
|
322
|
-
// switchMap((value) => {
|
|
323
|
-
// let params = this.searchparams(value);
|
|
324
|
-
// this.currentpage = 1;
|
|
325
|
-
// return this.service
|
|
326
|
-
// .GetApi(
|
|
327
|
-
// this.InputFields.url + '?page=' + this.currentpage,
|
|
328
|
-
// params
|
|
329
|
-
// )
|
|
330
|
-
// .pipe(
|
|
331
|
-
// finalize(() => {
|
|
332
|
-
// this.DrodownLoading = false;
|
|
333
|
-
// })
|
|
334
|
-
// );
|
|
335
|
-
// })
|
|
336
|
-
// )
|
|
337
|
-
// .subscribe((results: any[]) => {
|
|
338
|
-
// let datas = results['data'];
|
|
339
|
-
// this.Dropdowndata = datas;
|
|
340
|
-
// });
|
|
341
|
-
// }
|
|
342
290
|
}
|
|
343
291
|
getdropdown(value) {
|
|
344
292
|
this.currentpage = 1;
|
|
@@ -351,9 +299,7 @@ class VsChipddCmpComponent {
|
|
|
351
299
|
let datapagination = results['pagination'];
|
|
352
300
|
this.Dropdowndata = datas;
|
|
353
301
|
setTimeout(() => {
|
|
354
|
-
|
|
355
|
-
this.trigger.openPanel();
|
|
356
|
-
}
|
|
302
|
+
this.trigger.openPanel();
|
|
357
303
|
}, 0);
|
|
358
304
|
if (this.Dropdowndata.length >= 0) {
|
|
359
305
|
this.has_next = datapagination.has_next;
|
|
@@ -363,6 +309,7 @@ class VsChipddCmpComponent {
|
|
|
363
309
|
});
|
|
364
310
|
}
|
|
365
311
|
}
|
|
312
|
+
Outputdata = [];
|
|
366
313
|
dynamciformcontrolparent() {
|
|
367
314
|
return this.InputFields?.formcontrolname && this.formGroup
|
|
368
315
|
? this.InputFields?.formcontrolname
|
|
@@ -431,9 +378,8 @@ class VsChipddCmpComponent {
|
|
|
431
378
|
this.selected();
|
|
432
379
|
}
|
|
433
380
|
}
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
this.isOptionSelected = true;
|
|
381
|
+
formkeyarr = [];
|
|
382
|
+
venSelected(data) {
|
|
437
383
|
this.DropInput.nativeElement.value = '';
|
|
438
384
|
console.log('event.option.value', data);
|
|
439
385
|
this.selectvenByName(data[this.comparekey(data)]);
|
|
@@ -472,12 +418,12 @@ class VsChipddCmpComponent {
|
|
|
472
418
|
}
|
|
473
419
|
}
|
|
474
420
|
}
|
|
475
|
-
static
|
|
476
|
-
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"] }] });
|
|
477
423
|
}
|
|
478
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipddCmp, decorators: [{
|
|
479
425
|
type: Component,
|
|
480
|
-
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" }]
|
|
481
427
|
}], ctorParameters: () => [{ type: VsChipdropdownService }, { type: i2.FormBuilder }], propDecorators: { InputFields: [{
|
|
482
428
|
type: Input
|
|
483
429
|
}], ResetForm: [{
|
|
@@ -505,44 +451,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
505
451
|
type: Input
|
|
506
452
|
}] } });
|
|
507
453
|
|
|
508
|
-
// import {VsSharedModuleModule} from '@unnilouis.org/vs-shared-module'
|
|
509
454
|
class VsChipdropdownModule {
|
|
510
|
-
static
|
|
511
|
-
static
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
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] });
|
|
524
476
|
}
|
|
525
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VsChipdropdownModule, decorators: [{
|
|
526
478
|
type: NgModule,
|
|
527
479
|
args: [{
|
|
528
|
-
declarations: [
|
|
529
|
-
imports: [
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
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],
|
|
541
494
|
}]
|
|
542
495
|
}] });
|
|
543
|
-
function httpTranslateLoader(http) {
|
|
544
|
-
return new TranslateHttpLoader(http);
|
|
545
|
-
}
|
|
546
496
|
|
|
547
497
|
/*
|
|
548
498
|
* Public API Surface of vs-chipdropdown
|
|
@@ -552,5 +502,5 @@ function httpTranslateLoader(http) {
|
|
|
552
502
|
* Generated bundle index. Do not edit.
|
|
553
503
|
*/
|
|
554
504
|
|
|
555
|
-
export {
|
|
505
|
+
export { VsChipddCmp, VsChipdropdown, VsChipdropdownModule };
|
|
556
506
|
//# sourceMappingURL=unnilouis.org-vs-chipdropdown.mjs.map
|