@unnilouis.org/vs-chipdropdown 0.0.2-v17 → 0.0.3

package/fesm2022/unnilouis.org-vs-chipdropdown.mjs

@@ -1,364 +1,254 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, EventEmitter, Input, ViewChild, Output, NgModule } from '@angular/core';
 import * as i1 from '@angular/common/http';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
-import * as i5 from '@angular/material/autocomplete';
-import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i6 from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { map, takeUntil, debounceTime, distinctUntilChanged, tap, switchMap, finalize } from 'rxjs/operators';
 import { fromEvent } from 'rxjs';
-import * as i2 from '@angular/forms';
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/core';
-import * as i6 from '@angular/material/chips';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/material/core';
+import * as i7 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i7 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i8 from '@ngx-translate/core';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { CommonModule } from '@angular/common';
 import { MatGridListModule } from '@angular/material/grid-list';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
-class VsChipdropdownService {
-    constructor(http) {
-        this.http = http;
-    }
-    postApi(Apiurl, json = {}, params) {
-        const getToken = localStorage.getItem("sessionData");
-        let tokenValue = JSON.parse(getToken);
-        let token = tokenValue.token;
-        console.log("params", params);
-        let paradata = '';
-        if (params !== undefined && params !== null && params !== '') {
-            paradata = params;
-        }
-        const headers = { Authorization: "Token " + token };
-        return this.http.post(Apiurl + paradata, json, {
-            headers: headers,
-        });
-    }
-    GetApi(Apiurl, params = '') {
-        const getToken = localStorage.getItem("sessionData");
-        let tokenValue = JSON.parse(getToken);
-        let token = tokenValue.token;
-        console.log("params", params);
-        let paradata = '';
-        if (params !== undefined && params !== null && params !== '') {
-            paradata = params;
-        }
-        const headers = { Authorization: "Token " + token };
-        return this.http.get(Apiurl + paradata, {
-            headers: headers,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+class VsChipdropdownService {
+    constructor(http) {
+        this.http = http;
+    }
+    postApi(Apiurl, json = {}, params) {
+        const getToken = localStorage.getItem("sessionData");
+        let tokenValue = JSON.parse(getToken);
+        let token = tokenValue.token;
+        console.log("params", params);
+        let paradata = '';
+        if (params !== undefined && params !== null && params !== '') {
+            paradata = params;
+        }
+        const headers = { Authorization: "Token " + token };
+        return this.http.post(Apiurl + paradata, json, {
+            headers: headers,
+        });
+    }
+    GetApi(Apiurl, params = '') {
+        const getToken = localStorage.getItem("sessionData");
+        let tokenValue = JSON.parse(getToken);
+        let token = tokenValue.token;
+        console.log("params", params);
+        let paradata = '';
+        if (params !== undefined && params !== null && params !== '') {
+            paradata = params;
+        }
+        const headers = { Authorization: "Token " + token };
+        return this.http.get(Apiurl + paradata, {
+            headers: headers,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
-class VsChipdropdownComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: VsChipdropdownComponent, selector: "lib-vs-chipdropdown", ngImport: i0, template: `
-    <p>
-      vs-chipdropdown works!
-    </p>
-  `, isInline: true, styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-vs-chipdropdown', template: `
-    <p>
-      vs-chipdropdown works!
-    </p>
-  ` }]
+class VsChipdropdownComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VsChipdropdownComponent, selector: "lib-vs-chipdropdown", ngImport: i0, template: `
+    <p>
+      vs-chipdropdown works!
+    </p>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-vs-chipdropdown', template: `
+    <p>
+      vs-chipdropdown works!
+    </p>
+  ` }]
         }] });
 
-class VsChipddCmpComponent {
-    constructor(service, fb) {
-        this.service = service;
-        this.fb = fb;
-        this.DrodownLoading = false;
-        this.Backendapi = true;
-        this.autocompleteTrigger = MatAutocompleteTrigger;
-        this.matAutocompleteApp = MatAutocomplete;
-        this.dataEvent = new EventEmitter();
-        this.separatorsKeysCodes = [ENTER, COMMA];
-        this.has_next = false;
-        this.currentpage = 1;
-        this.Dropdowndata = [];
-        this.has_previous = false;
-        this.DropdownForm = FormGroup;
-        this.chipSelectedId = [];
-        this.chipSelectedObj = [];
-    }
-    ngOnInit() {
-        this.DropdownForm = this.fb.group({
-            value: ''
-        });
-        if (this.InputFields?.defaultvalue) {
-            this.DropdownForm.get("value").patchValue(this.InputFields?.defaultvalue);
-            this.chipSelectedObj = this.InputFields?.defaultvalue;
-            if (this.chipSelectedObj.length > 0) {
-                for (let foundemp of this.chipSelectedObj) {
-                    if (this.InputFields?.Outputkey) {
-                        this.chipSelectedId.push(foundemp[this.InputFields?.Outputkey]);
-                    }
-                    else {
-                        this.chipSelectedId.push(foundemp.id);
-                    }
-                }
-                this.selected();
-            }
-        }
-        if (this.InputFields?.fronentdata) {
-            this.Dropdowndata = this.InputFields?.data;
-        }
-        else {
-            this.getdropdown('');
-        }
-    }
-    ngOnChanges(changes) {
-        console.log("changes.ResetForm", changes['ResetForm'], changes['ResetForm'].currentValue, changes['ResetForm'] && changes['ResetForm'].currentValue);
-        if (changes['InputFields'] && changes['InputFields'].currentValue) {
-            console.log("Summary Log Changes");
-            this.currentpage = 1;
-            this.ngOnInit();
-        }
-        if (changes['ResetForm'] && changes['ResetForm'].currentValue) {
-            console.log("hitted");
-            this.DropdownForm.reset();
-            this.currentpage = 1;
-            this.ngOnInit();
-            this.chipSelectedId = [];
-            this.chipSelectedObj = [];
-            this.dataEvent.emit([]);
-        }
-    }
-    // public displaydevelopclient(clt: any, key: string) {
-    //   return key[clt];
-    // }
-    autocompleteAppScroll() {
-        if (!(this.InputFields?.fronentdata)) {
-            setTimeout(() => {
-                if (this.matAutocompleteApp &&
-                    this.autocompleteTrigger &&
-                    this.matAutocompleteApp.panel) {
-                    fromEvent(this.matAutocompleteApp.panel.nativeElement, 'scroll')
-                        .pipe(map(x => this.matAutocompleteApp.panel.nativeElement.scrollTop), takeUntil(this.autocompleteTrigger.panelClosingActions))
-                        .subscribe(x => {
-                        const scrollTop = this.matAutocompleteApp.panel.nativeElement.scrollTop;
-                        const scrollHeight = this.matAutocompleteApp.panel.nativeElement.scrollHeight;
-                        const elementHeight = this.matAutocompleteApp.panel.nativeElement.clientHeight;
-                        const atBottom = scrollHeight - 1 <= scrollTop + elementHeight;
-                        if (atBottom) {
-                            if (this.has_next === true) {
-                                let value = this.DropInput.nativeElement.value;
-                                let params = this.searchparams(value);
-                                this.currentpage = this.currentpage + 1;
-                                if (this.currentpage > 1) {
-                                    this.service.GetApi(this.InputFields.url + "?page=" + this.currentpage, params)
-                                        .subscribe((results) => {
-                                        let datas = results["data"];
-                                        let datapagination = results["pagination"];
-                                        this.Dropdowndata = this.Dropdowndata.concat(datas);
-                                        console.log("this.Dropdowndata", this.Dropdowndata);
-                                        if (this.Dropdowndata.length >= 0) {
-                                            this.has_next = datapagination.has_next;
-                                            this.has_previous = datapagination.has_previous;
-                                            this.currentpage = datapagination.index;
-                                        }
-                                    });
-                                }
-                            }
-                        }
-                    });
-                }
-            });
-        }
-    }
-    dropdownsearch() {
-        if (!(this.InputFields?.fronentdata)) {
-            this.DropdownForm.get("value").valueChanges.pipe(debounceTime(100), distinctUntilChanged(), tap(() => {
-                this.DrodownLoading = true;
-                console.log("inside tap");
-            }), switchMap((value) => {
-                let params = this.searchparams(value);
-                this.currentpage = 1;
-                return this.service.GetApi(this.InputFields.url + "?page=" + this.currentpage, params).pipe(finalize(() => {
-                    this.DrodownLoading = false;
-                }));
-            })).subscribe((results) => {
-                let datas = results["data"];
-                this.Dropdowndata = datas;
-            });
-        }
-    }
-    getdropdown(value) {
-        let params = this.searchparams(value);
-        this.service.GetApi(this.InputFields.url + "?page=" + this.currentpage, params)
-            .subscribe((results) => {
-            let datas = results["data"];
-            let datapagination = results["pagination"];
-            this.Dropdowndata = datas;
-            if (this.Dropdowndata.length >= 0) {
-                this.has_next = datapagination.has_next;
-                this.has_previous = datapagination.has_previous;
-                this.currentpage = datapagination.index;
-            }
-        });
-    }
-    selected() {
-        // let data = this.DropdownForm.value.value
-        if (this.InputFields?.wholedata) {
-            this.dataEvent.emit(this.chipSelectedObj);
-        }
-        else {
-            if (this.InputFields?.Outputkey) {
-                this.dataEvent.emit(this.chipSelectedId);
-            }
-            else {
-                this.dataEvent.emit(this.chipSelectedObj);
-            }
-        }
-    }
-    searchparams(value) {
-        let params = '';
-        if (this.InputFields.params) {
-            params = this.InputFields.params;
-        }
-        let inpValue = value;
-        inpValue ? params += '&' + this.InputFields.searchkey + '=' + inpValue : '';
-        return params;
-    }
-    removechip(obj) {
-        const index = this.chipSelectedObj.indexOf(obj);
-        if (index >= 0) {
-            this.chipSelectedObj.splice(index, 1);
-            console.log(this.chipSelectedObj);
-            this.chipSelectedId.splice(index, 1);
-            console.log(this.chipSelectedId);
-            this.DropInput.nativeElement.value = '';
-            this.selected();
-        }
-    }
-    venSelected(event) {
-        this.DropInput.nativeElement.value = '';
-        console.log('event.option.value', event.option.value);
-        this.selectvenByName(event.option.value[this.comparekey(event.option.value)]);
-        console.log('chipSelectedvenid', this.chipSelectedObj);
-    }
-    selectvenByName(ven) {
-        let foundemp1 = this.chipSelectedObj.filter((e) => e[this.comparekey(e)] == ven);
-        if (foundemp1.length) {
-            return;
-        }
-        let foundemp = this.Dropdowndata.filter((e) => e[this.comparekey(e)] == ven);
-        if (foundemp.length) {
-            this.chipSelectedObj.push(foundemp[0]);
-            if (this.InputFields?.Outputkey) {
-                this.chipSelectedId.push(foundemp[0][this.InputFields?.Outputkey]);
-            }
-            else {
-                this.chipSelectedId.push(foundemp[0].id);
-            }
-        }
-    }
-    comparekey(e) {
-        if (this.InputFields?.comparekey) {
-            return this.InputFields?.comparekey;
-        }
-        else {
-            if (e?.id) {
-                return "id";
-            }
-            else {
-                return this.InputFields.displaykey;
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipddCmpComponent, deps: [{ token: VsChipdropdownService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: VsChipddCmpComponent, selector: "lib-vs-chipdd-cmp", inputs: { InputFields: "InputFields", ResetForm: "ResetForm", Backendapi: "Backendapi" }, outputs: { dataEvent: "dataEvent" }, viewQueries: [{ 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\">\r\n        <mat-form-field class=\"mat-chipScroll\"\r\n        appearance=\"outline\">\r\n            <mat-label>{{InputFields.label | translate}}</mat-label>\r\n            <mat-chip-grid multiple #chipListvendor class=\"chip-container\">\r\n                @for(obj of chipSelectedObj; track obj ){\r\n                    <mat-chip-row  [removable]=\"true\" (removed)=\"removechip(obj)\" class=\"mat-chipEx\">\r\n                        {{ obj[InputFields.displaykey] }}\r\n                        <mat-icon matChipRemove>cancel</mat-icon>\r\n                    </mat-chip-row>\r\n                }\r\n                \r\n                <input #DropInput [matAutocomplete]=\"scrolll\" class=\"matformfieldinputstyle\"\r\n                    (keydown)=\"dropdownsearch()\" [matChipInputFor]=\"chipListvendor\" [matChipInputSeparatorKeyCodes]=\"\r\n                              separatorsKeysCodes\r\n                            \" [matChipInputAddOnBlur]=\"true\" formControlName=\"value\" />\r\n            </mat-chip-grid>\r\n            <mat-autocomplete #scrolll=\"matAutocomplete\" (optionSelected)=\"venSelected($event)\"\r\n                (opened)=\"autocompleteAppScroll()\">\r\n                <ng-container>\r\n                    @for(dropvalues of Dropdowndata; track dropvalues ){\r\n                        <mat-option [value]=\"dropvalues\" (click)=\"selected()\">\r\n                            {{dropvalues[InputFields.displaykey]}}\r\n                        </mat-option>\r\n                    }\r\n                  \r\n                </ng-container>\r\n            </mat-autocomplete>\r\n        </mat-form-field>\r\n    </form>\r\n</div>", styles: [".mat-chipScroll{max-width:420px;width:100%}.mat-chipEx{text-align:left}.chip-container{overflow-y:scroll;max-height:80px}.chip-container::-webkit-scrollbar{width:6px;height:6px}.chip-container::-webkit-scrollbar-track{background:transparent}.chip-container::-webkit-scrollbar-thumb{border-radius:20px;background:#c3c3c3}.chip-container::-webkit-scrollbar-thumb:hover{background:#a6a6a6}\n"], dependencies: [{ 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: "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: 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"], 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"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipddCmpComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-vs-chipdd-cmp', template: "<div>\r\n    <form [formGroup]=\"DropdownForm\">\r\n        <mat-form-field class=\"mat-chipScroll\"\r\n        appearance=\"outline\">\r\n            <mat-label>{{InputFields.label | translate}}</mat-label>\r\n            <mat-chip-grid multiple #chipListvendor class=\"chip-container\">\r\n                @for(obj of chipSelectedObj; track obj ){\r\n                    <mat-chip-row  [removable]=\"true\" (removed)=\"removechip(obj)\" class=\"mat-chipEx\">\r\n                        {{ obj[InputFields.displaykey] }}\r\n                        <mat-icon matChipRemove>cancel</mat-icon>\r\n                    </mat-chip-row>\r\n                }\r\n                \r\n                <input #DropInput [matAutocomplete]=\"scrolll\" class=\"matformfieldinputstyle\"\r\n                    (keydown)=\"dropdownsearch()\" [matChipInputFor]=\"chipListvendor\" [matChipInputSeparatorKeyCodes]=\"\r\n                              separatorsKeysCodes\r\n                            \" [matChipInputAddOnBlur]=\"true\" formControlName=\"value\" />\r\n            </mat-chip-grid>\r\n            <mat-autocomplete #scrolll=\"matAutocomplete\" (optionSelected)=\"venSelected($event)\"\r\n                (opened)=\"autocompleteAppScroll()\">\r\n                <ng-container>\r\n                    @for(dropvalues of Dropdowndata; track dropvalues ){\r\n                        <mat-option [value]=\"dropvalues\" (click)=\"selected()\">\r\n                            {{dropvalues[InputFields.displaykey]}}\r\n                        </mat-option>\r\n                    }\r\n                  \r\n                </ng-container>\r\n            </mat-autocomplete>\r\n        </mat-form-field>\r\n    </form>\r\n</div>", styles: [".mat-chipScroll{max-width:420px;width:100%}.mat-chipEx{text-align:left}.chip-container{overflow-y:scroll;max-height:80px}.chip-container::-webkit-scrollbar{width:6px;height:6px}.chip-container::-webkit-scrollbar-track{background:transparent}.chip-container::-webkit-scrollbar-thumb{border-radius:20px;background:#c3c3c3}.chip-container::-webkit-scrollbar-thumb:hover{background:#a6a6a6}\n"] }]
-        }], ctorParameters: () => [{ type: VsChipdropdownService }, { type: i2.FormBuilder }], propDecorators: { InputFields: [{
-                type: Input
-            }], ResetForm: [{
-                type: Input
-            }], Backendapi: [{
-                type: Input
-            }], autocompleteTrigger: [{
-                type: ViewChild,
-                args: [MatAutocompleteTrigger]
-            }], matAutocompleteApp: [{
-                type: ViewChild,
-                args: ['scrolll']
-            }], dataEvent: [{
-                type: Output
-            }], DropInput: [{
-                type: ViewChild,
-                args: ['DropInput']
+class VsChipddCmpComponent {
+    constructor(service, fb) {
+        this.service = service;
+        this.fb = fb;
+        this.dataEvent = new EventEmitter();
+        this.separatorsKeysCodes = [ENTER, COMMA];
+        this.has_next = false;
+        this.currentpage = 1;
+        this.Dropdowndata = [];
+        this.has_previous = false;
+        this.chipSelectedven = [];
+    }
+    ngOnInit() {
+        this.DropdownForm = this.fb.group({
+            value: ''
+        });
+        this.getdropdown('');
+    }
+    displaydevelopclient(clt, key) {
+        return key[clt];
+    }
+    autocompleteAppScroll() {
+        setTimeout(() => {
+            if (this.matAutocompleteApp &&
+                this.autocompleteTrigger &&
+                this.matAutocompleteApp.panel) {
+                fromEvent(this.matAutocompleteApp.panel.nativeElement, 'scroll')
+                    .pipe(map(x => this.matAutocompleteApp.panel.nativeElement.scrollTop), takeUntil(this.autocompleteTrigger.panelClosingActions))
+                    .subscribe(x => {
+                    const scrollTop = this.matAutocompleteApp.panel.nativeElement.scrollTop;
+                    const scrollHeight = this.matAutocompleteApp.panel.nativeElement.scrollHeight;
+                    const elementHeight = this.matAutocompleteApp.panel.nativeElement.clientHeight;
+                    const atBottom = scrollHeight - 1 <= scrollTop + elementHeight;
+                    if (atBottom) {
+                        if (this.has_next === true) {
+                            let value = this.DropInput.nativeElement.value;
+                            let params = this.searchparams(value);
+                            this.currentpage = this.currentpage + 1;
+                            if (this.currentpage > 1) {
+                                this.service.GetApi(this.InputFields.url + "?page=" + this.currentpage, params)
+                                    .subscribe((results) => {
+                                    let datas = results["data"];
+                                    let datapagination = results["pagination"];
+                                    this.Dropdowndata = this.Dropdowndata.concat(datas);
+                                    console.log("this.Dropdowndata", this.Dropdowndata);
+                                    if (this.Dropdowndata.length >= 0) {
+                                        this.has_next = datapagination.has_next;
+                                        this.has_previous = datapagination.has_previous;
+                                        this.currentpage = datapagination.index;
+                                    }
+                                });
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    }
+    dropdownsearch() {
+        this.DropdownForm.get("value").valueChanges.pipe(debounceTime(100), distinctUntilChanged(), tap(() => {
+            this.DrodownLoading = true;
+            console.log("inside tap");
+        }), switchMap((value) => {
+            let params = this.searchparams(value);
+            this.currentpage = 1;
+            return this.service.GetApi(this.InputFields.url + "?page=" + this.currentpage, params).pipe(finalize(() => {
+                this.DrodownLoading = false;
+            }));
+        })).subscribe((results) => {
+            let datas = results["data"];
+            this.Dropdowndata = datas;
+        });
+    }
+    getdropdown(value) {
+        let params = this.searchparams(value);
+        this.service.GetApi(this.InputFields.url + "?page=" + this.currentpage, params)
+            .subscribe((results) => {
+            let datas = results["data"];
+            let datapagination = results["pagination"];
+            this.Dropdowndata = datas;
+            if (this.Dropdowndata.length >= 0) {
+                this.has_next = datapagination.has_next;
+                this.has_previous = datapagination.has_previous;
+                this.currentpage = datapagination.index;
+            }
+        });
+    }
+    selected() {
+        let data = this.DropdownForm.value.value;
+        this.dataEvent.emit(data);
+    }
+    searchparams(value) {
+        let params = '';
+        if (this.InputFields.params) {
+            params = this.InputFields.params;
+        }
+        let inpValue = value;
+        inpValue ? params += '&' + this.InputFields.searchkey + '=' + inpValue : '';
+        return params;
+    }
+    removechip(obj) {
+    }
+    venSelected(event) {
+        this.DropInput.nativeElement.value = '';
+        console.log('event.option.value', event.option.value);
+        this.selectvenByName(event.option.value.name);
+        console.log('chipSelectedvenid', this.chipSelectedven);
+    }
+    selectvenByName(ven) {
+        let foundemp1 = this.chipSelectedven.filter(e => e.name == ven);
+        if (foundemp1.length) {
+            return;
+        }
+        let foundemp = this.Dropdowndata.filter(e => e.name == ven);
+        if (foundemp.length) {
+            this.chipSelectedven.push(foundemp[0]);
+            this.chipSelectedven.push(foundemp[0].id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipddCmpComponent, deps: [{ token: VsChipdropdownService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VsChipddCmpComponent, selector: "lib-vs-chipdd-cmp", inputs: { InputFields: "InputFields" }, outputs: { dataEvent: "dataEvent" }, viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "matAutocompleteApp", first: true, predicate: ["scrolll"], descendants: true }, { propertyName: "DropInput", first: true, predicate: ["DropInput"], descendants: true }], ngImport: i0, template: "<div>\n    <form [formGroup]=\"DropdownForm\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{InputFields.label}}</mat-label>\n            <mat-chip-grid multiple #chipListvendor>\n                          <mat-chip-row\n                            *ngFor=\"let vendor of chipSelectedven\"\n                            [removable]=\"true\"\n                            (removed)=\"removechip(vendor)\"\n                          >\n                            {{ vendor[InputFields.displaykey] }}\n                            <mat-icon matChipRemove>cancel</mat-icon>\n                          </mat-chip-row>\n                          <input\n                            #DropInput\n                            formControlName=\"value\"\n                            [matAutocomplete]=\"scrolll\"\n                            class=\"matformfieldinputstyle\"\n                            (keydown)=\"dropdownsearch()\"\n                            [matChipInputFor]=\"chipListvendor\"\n                            [matChipInputSeparatorKeyCodes]=\"\n                              separatorsKeysCodes\n                            \"\n                            [matChipInputAddOnBlur]=\"true\"\n                          />\n                        </mat-chip-grid>\n            <mat-autocomplete #scrolll=\"matAutocomplete\"\n                (optionSelected)=\"venSelected($event)\"\n                (opened)=\"autocompleteAppScroll()\">\n                <ng-container>\n                    <mat-option *ngFor=\"let dropvalues of Dropdowndata\" [value]=\"dropvalues\" (click)=\"selected()\">\n                        {{dropvalues[InputFields.displaykey]}}\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </mat-form-field>\n    </form>\n    <!-- <mat-chip-grid multiple #chipListvendor>\n                          <mat-chip-row\n                            *ngFor=\"let vendor of chipSelectedven\"\n                            [removable]=\"true\"\n                            (removed)=\"removedven(vendor)\"\n                          >\n                            {{ vendor.name }}\n                            <mat-icon matChipRemove>cancel</mat-icon>\n                          </mat-chip-row>\n                          <input\n                            #DropInput\n                            formControlName=\"value\"\n                            [matAutocomplete]=\"scrolll\"\n                            class=\"matformfieldinputstyle\"\n                            (keydown)=\"dropdownsearch()\"\n                            [matChipInputFor]=\"chipListvendor\"\n                            [matChipInputSeparatorKeyCodes]=\"\n                              separatorsKeysCodes\n                            \"\n                            [matChipInputAddOnBlur]=\"true\"\n                          />\n                        </mat-chip-grid> -->\n</div>", styles: [""], dependencies: [{ 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: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipddCmpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-vs-chipdd-cmp', template: "<div>\n    <form [formGroup]=\"DropdownForm\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{InputFields.label}}</mat-label>\n            <mat-chip-grid multiple #chipListvendor>\n                          <mat-chip-row\n                            *ngFor=\"let vendor of chipSelectedven\"\n                            [removable]=\"true\"\n                            (removed)=\"removechip(vendor)\"\n                          >\n                            {{ vendor[InputFields.displaykey] }}\n                            <mat-icon matChipRemove>cancel</mat-icon>\n                          </mat-chip-row>\n                          <input\n                            #DropInput\n                            formControlName=\"value\"\n                            [matAutocomplete]=\"scrolll\"\n                            class=\"matformfieldinputstyle\"\n                            (keydown)=\"dropdownsearch()\"\n                            [matChipInputFor]=\"chipListvendor\"\n                            [matChipInputSeparatorKeyCodes]=\"\n                              separatorsKeysCodes\n                            \"\n                            [matChipInputAddOnBlur]=\"true\"\n                          />\n                        </mat-chip-grid>\n            <mat-autocomplete #scrolll=\"matAutocomplete\"\n                (optionSelected)=\"venSelected($event)\"\n                (opened)=\"autocompleteAppScroll()\">\n                <ng-container>\n                    <mat-option *ngFor=\"let dropvalues of Dropdowndata\" [value]=\"dropvalues\" (click)=\"selected()\">\n                        {{dropvalues[InputFields.displaykey]}}\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </mat-form-field>\n    </form>\n    <!-- <mat-chip-grid multiple #chipListvendor>\n                          <mat-chip-row\n                            *ngFor=\"let vendor of chipSelectedven\"\n                            [removable]=\"true\"\n                            (removed)=\"removedven(vendor)\"\n                          >\n                            {{ vendor.name }}\n                            <mat-icon matChipRemove>cancel</mat-icon>\n                          </mat-chip-row>\n                          <input\n                            #DropInput\n                            formControlName=\"value\"\n                            [matAutocomplete]=\"scrolll\"\n                            class=\"matformfieldinputstyle\"\n                            (keydown)=\"dropdownsearch()\"\n                            [matChipInputFor]=\"chipListvendor\"\n                            [matChipInputSeparatorKeyCodes]=\"\n                              separatorsKeysCodes\n                            \"\n                            [matChipInputAddOnBlur]=\"true\"\n                          />\n                        </mat-chip-grid> -->\n</div>" }]
+        }], ctorParameters: function () { return [{ type: VsChipdropdownService }, { type: i2.FormBuilder }]; }, propDecorators: { InputFields: [{
+                type: Input
+            }], autocompleteTrigger: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger]
+            }], matAutocompleteApp: [{
+                type: ViewChild,
+                args: ['scrolll']
+            }], dataEvent: [{
+                type: Output
+            }], DropInput: [{
+                type: ViewChild,
+                args: ['DropInput']
             }] } });
 
-class VsChipdropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownModule, declarations: [VsChipdropdownComponent,
-            VsChipddCmpComponent], imports: [MatFormFieldModule, MatInputModule, MatSelectModule, MatAutocompleteModule, FormsModule, ReactiveFormsModule, CommonModule, MatGridListModule, MatChipsModule, MatIconModule,
-            HttpClientModule, i8.TranslateModule], exports: [VsChipddCmpComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownModule, imports: [MatFormFieldModule, MatInputModule, MatSelectModule, MatAutocompleteModule, FormsModule, ReactiveFormsModule, CommonModule, MatGridListModule, MatChipsModule, MatIconModule,
-            HttpClientModule,
-            TranslateModule.forRoot({
-                loader: {
-                    provide: TranslateLoader,
-                    useFactory: httpTranslateLoader,
-                    deps: [HttpClient],
-                },
-            })] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: VsChipdropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        VsChipdropdownComponent,
-                        VsChipddCmpComponent
-                    ],
-                    imports: [MatFormFieldModule, MatInputModule, MatSelectModule, MatAutocompleteModule, FormsModule, ReactiveFormsModule, CommonModule, MatGridListModule, MatChipsModule, MatIconModule,
-                        HttpClientModule,
-                        TranslateModule.forRoot({
-                            loader: {
-                                provide: TranslateLoader,
-                                useFactory: httpTranslateLoader,
-                                deps: [HttpClient],
-                            },
-                        }),
-                    ],
-                    exports: [
-                        VsChipddCmpComponent
-                    ]
-                }]
+class VsChipdropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownModule, declarations: [VsChipdropdownComponent,
+            VsChipddCmpComponent], imports: [MatFormFieldModule, CommonModule,
+            MatInputModule, MatSelectModule, MatAutocompleteModule, FormsModule, ReactiveFormsModule, MatGridListModule, MatChipsModule], exports: [VsChipddCmpComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownModule, imports: [MatFormFieldModule, CommonModule,
+            MatInputModule, MatSelectModule, MatAutocompleteModule, FormsModule, ReactiveFormsModule, MatGridListModule, MatChipsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VsChipdropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        VsChipdropdownComponent,
+                        VsChipddCmpComponent
+                    ],
+                    imports: [MatFormFieldModule, CommonModule,
+                        MatInputModule, MatSelectModule, MatAutocompleteModule, FormsModule, ReactiveFormsModule, MatGridListModule, MatChipsModule
+                    ],
+                    exports: [
+                        VsChipddCmpComponent
+                    ]
+                }]
         }] });
-function httpTranslateLoader(http) {
-    return new TranslateHttpLoader(http);
-}
 
-/*
- * Public API Surface of vs-chipdropdown
+/*
+ * Public API Surface of vs-chipdropdown
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { VsChipddCmpComponent, VsChipdropdownComponent, VsChipdropdownModule, VsChipdropdownService, httpTranslateLoader };
+export { VsChipddCmpComponent, VsChipdropdownComponent, VsChipdropdownModule, VsChipdropdownService };
 //# sourceMappingURL=unnilouis.org-vs-chipdropdown.mjs.map