@magicnov/ngx-dadata
Version:
Angular 6+ and 13+ DaData suggestion (подсказки) implementation with Material Design
76 lines • 12.3 kB
JavaScript
import { Component, EventEmitter, forwardRef, Input, Output, } from "@angular/core";
import { timer } from "rxjs";
import { debounce } from "rxjs/operators";
import { DadataConfigDefault } from "./dadata-config";
import { FormControl, NG_VALUE_ACCESSOR } from "@angular/forms";
import * as i0 from "@angular/core";
import * as i1 from "./ngx-dadata.service";
import * as i2 from "@angular/material/form-field";
import * as i3 from "@angular/material/autocomplete";
import * as i4 from "@angular/material/core";
import * as i5 from "@angular/material/input";
import * as i6 from "@angular/forms";
import * as i7 from "@angular/common";
export class NgxDadataComponent {
constructor(dataService) {
this.dataService = dataService;
this.data = [];
this.config = DadataConfigDefault;
this.control = new FormControl();
this.label = "";
this.placeholder = "";
this.selected = new EventEmitter();
}
ngOnInit() {
this.dataService.setApiKey(this.config.apiKey);
this.control.valueChanges
.pipe(debounce(() => timer(this.config.delay ? this.config.delay : 500)))
.subscribe((x) => {
if (x && typeof x === "string") {
this.dataService
.getData(x, this.config.type, this.config)
.subscribe((y) => {
this.data = y.suggestions;
});
}
else {
this.data = [];
}
});
}
getItemDisplayName(item) {
return item ? item.value : "";
}
itemSelected(item) {
this.selected.emit(item);
}
}
NgxDadataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataComponent, deps: [{ token: i1.NgxDadataService }], target: i0.ɵɵFactoryTarget.Component });
NgxDadataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NgxDadataComponent, selector: "ngx-dadata", inputs: { config: "config", control: "control", label: "label", placeholder: "placeholder" }, outputs: { selected: "selected" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxDadataComponent),
multi: true,
},
], ngImport: i0, template: "<mat-form-field class=\"dadata-field\">\r\n <mat-label>{{ label }}</mat-label>\r\n <input\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n matInput\r\n [formControl]=\"control\"\r\n [matAutocomplete]=\"auto\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"getItemDisplayName\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n >\r\n <mat-option *ngFor=\"let item of data\" [value]=\"item\">\r\n {{ item.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n</mat-form-field>\r\n", styles: [".dadata-field{width:100%!important}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataComponent, decorators: [{
type: Component,
args: [{ selector: "ngx-dadata", providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxDadataComponent),
multi: true,
},
], template: "<mat-form-field class=\"dadata-field\">\r\n <mat-label>{{ label }}</mat-label>\r\n <input\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n matInput\r\n [formControl]=\"control\"\r\n [matAutocomplete]=\"auto\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"getItemDisplayName\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n >\r\n <mat-option *ngFor=\"let item of data\" [value]=\"item\">\r\n {{ item.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n</mat-form-field>\r\n", styles: [".dadata-field{width:100%!important}\n"] }]
}], ctorParameters: function () { return [{ type: i1.NgxDadataService }]; }, propDecorators: { config: [{
type: Input
}], control: [{
type: Input
}], label: [{
type: Input
}], placeholder: [{
type: Input
}], selected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWRhZGF0YS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZGFkYXRhL3NyYy9saWIvbmd4LWRhZGF0YS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZGFkYXRhL3NyYy9saWIvbmd4LWRhZGF0YS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzdCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUcxQyxPQUFPLEVBQWdCLG1CQUFtQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDcEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7Ozs7QUFjaEUsTUFBTSxPQUFPLGtCQUFrQjtJQVU3QixZQUFvQixXQUE2QjtRQUE3QixnQkFBVyxHQUFYLFdBQVcsQ0FBa0I7UUFUakQsU0FBSSxHQUF1QixFQUFFLENBQUM7UUFFckIsV0FBTSxHQUFpQixtQkFBbUIsQ0FBQztRQUMzQyxZQUFPLEdBQWdCLElBQUksV0FBVyxFQUFFLENBQUM7UUFDekMsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUN4QixhQUFRLEdBQ2hCLElBQUksWUFBWSxFQUFvQixDQUFDO0lBRWEsQ0FBQztJQUVyRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMvQyxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVk7YUFDdEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO2FBQ3hFLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFO1lBQ2YsSUFBSSxDQUFDLElBQUksT0FBTyxDQUFDLEtBQUssUUFBUSxFQUFFO2dCQUM5QixJQUFJLENBQUMsV0FBVztxQkFDYixPQUFPLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUM7cUJBQ3pDLFNBQVMsQ0FBQyxDQUFDLENBQWlCLEVBQUUsRUFBRTtvQkFDL0IsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUMsV0FBVyxDQUFDO2dCQUM1QixDQUFDLENBQUMsQ0FBQzthQUNOO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDO2FBQ2hCO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsa0JBQWtCLENBQUMsSUFBc0I7UUFDdkMsT0FBTyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRUQsWUFBWSxDQUFDLElBQXNCO1FBQ2pDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzNCLENBQUM7O2dIQW5DVSxrQkFBa0I7b0dBQWxCLGtCQUFrQixzS0FSbEI7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQztZQUNqRCxLQUFLLEVBQUUsSUFBSTtTQUNaO0tBQ0YsMEJDMUJILDZqQkFtQkE7NEZEU2Esa0JBQWtCO2tCQVo5QixTQUFTOytCQUNFLFlBQVksYUFHWDt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxtQkFBbUIsQ0FBQzs0QkFDakQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7dUdBS1EsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIGZvcndhcmRSZWYsXHJcbiAgSW5wdXQsXHJcbiAgT25Jbml0LFxyXG4gIE91dHB1dCxcclxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBOZ3hEYWRhdGFTZXJ2aWNlIH0gZnJvbSBcIi4vbmd4LWRhZGF0YS5zZXJ2aWNlXCI7XHJcbmltcG9ydCB7IHRpbWVyIH0gZnJvbSBcInJ4anNcIjtcclxuaW1wb3J0IHsgZGVib3VuY2UgfSBmcm9tIFwicnhqcy9vcGVyYXRvcnNcIjtcclxuaW1wb3J0IHsgRGFkYXRhUmVzcG9uc2UgfSBmcm9tIFwiLi9tb2RlbHMvZGFkYXRhLXJlc3BvbnNlXCI7XHJcbmltcG9ydCB7IERhZGF0YVN1Z2dlc3Rpb24gfSBmcm9tIFwiLi9tb2RlbHMvc3VnZ2VzdGlvblwiO1xyXG5pbXBvcnQgeyBEYWRhdGFDb25maWcsIERhZGF0YUNvbmZpZ0RlZmF1bHQgfSBmcm9tIFwiLi9kYWRhdGEtY29uZmlnXCI7XHJcbmltcG9ydCB7IEZvcm1Db250cm9sLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IFwibmd4LWRhZGF0YVwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vbmd4LWRhZGF0YS5jb21wb25lbnQuaHRtbFwiLFxyXG4gIHN0eWxlVXJsczogW1wiLi9uZ3gtZGFkYXRhLmNvbXBvbmVudC5jc3NcIl0sXHJcbiAgcHJvdmlkZXJzOiBbXHJcbiAgICB7XHJcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOZ3hEYWRhdGFDb21wb25lbnQpLFxyXG4gICAgICBtdWx0aTogdHJ1ZSxcclxuICAgIH0sXHJcbiAgXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIE5neERhZGF0YUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgZGF0YTogRGFkYXRhU3VnZ2VzdGlvbltdID0gW107XHJcblxyXG4gIEBJbnB1dCgpIGNvbmZpZzogRGFkYXRhQ29uZmlnID0gRGFkYXRhQ29uZmlnRGVmYXVsdDtcclxuICBASW5wdXQoKSBjb250cm9sOiBGb3JtQ29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgPSBcIlwiO1xyXG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSBcIlwiO1xyXG4gIEBPdXRwdXQoKSBzZWxlY3RlZDogRXZlbnRFbWl0dGVyPERhZGF0YVN1Z2dlc3Rpb24+ID1cclxuICAgIG5ldyBFdmVudEVtaXR0ZXI8RGFkYXRhU3VnZ2VzdGlvbj4oKTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBkYXRhU2VydmljZTogTmd4RGFkYXRhU2VydmljZSkge31cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmRhdGFTZXJ2aWNlLnNldEFwaUtleSh0aGlzLmNvbmZpZy5hcGlLZXkpO1xyXG4gICAgdGhpcy5jb250cm9sLnZhbHVlQ2hhbmdlc1xyXG4gICAgICAucGlwZShkZWJvdW5jZSgoKSA9PiB0aW1lcih0aGlzLmNvbmZpZy5kZWxheSA/IHRoaXMuY29uZmlnLmRlbGF5IDogNTAwKSkpXHJcbiAgICAgIC5zdWJzY3JpYmUoKHgpID0+IHtcclxuICAgICAgICBpZiAoeCAmJiB0eXBlb2YgeCA9PT0gXCJzdHJpbmdcIikge1xyXG4gICAgICAgICAgdGhpcy5kYXRhU2VydmljZVxyXG4gICAgICAgICAgICAuZ2V0RGF0YSh4LCB0aGlzLmNvbmZpZy50eXBlLCB0aGlzLmNvbmZpZylcclxuICAgICAgICAgICAgLnN1YnNjcmliZSgoeTogRGFkYXRhUmVzcG9uc2UpID0+IHtcclxuICAgICAgICAgICAgICB0aGlzLmRhdGEgPSB5LnN1Z2dlc3Rpb25zO1xyXG4gICAgICAgICAgICB9KTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgdGhpcy5kYXRhID0gW107XHJcbiAgICAgICAgfVxyXG4gICAgICB9KTtcclxuICB9XHJcblxyXG4gIGdldEl0ZW1EaXNwbGF5TmFtZShpdGVtOiBEYWRhdGFTdWdnZXN0aW9uKSB7XHJcbiAgICByZXR1cm4gaXRlbSA/IGl0ZW0udmFsdWUgOiBcIlwiO1xyXG4gIH1cclxuXHJcbiAgaXRlbVNlbGVjdGVkKGl0ZW06IERhZGF0YVN1Z2dlc3Rpb24pOiB2b2lkIHtcclxuICAgIHRoaXMuc2VsZWN0ZWQuZW1pdChpdGVtKTtcclxuICB9XHJcbn1cclxuIiwiPG1hdC1mb3JtLWZpZWxkIGNsYXNzPVwiZGFkYXRhLWZpZWxkXCI+XHJcbiAgPG1hdC1sYWJlbD57eyBsYWJlbCB9fTwvbWF0LWxhYmVsPlxyXG4gIDxpbnB1dFxyXG4gICAgdHlwZT1cInRleHRcIlxyXG4gICAgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcclxuICAgIG1hdElucHV0XHJcbiAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXHJcbiAgICBbbWF0QXV0b2NvbXBsZXRlXT1cImF1dG9cIlxyXG4gIC8+XHJcbiAgPG1hdC1hdXRvY29tcGxldGVcclxuICAgICNhdXRvPVwibWF0QXV0b2NvbXBsZXRlXCJcclxuICAgIFtkaXNwbGF5V2l0aF09XCJnZXRJdGVtRGlzcGxheU5hbWVcIlxyXG4gICAgKG9wdGlvblNlbGVjdGVkKT1cIml0ZW1TZWxlY3RlZCgkZXZlbnQub3B0aW9uLnZhbHVlKVwiXHJcbiAgPlxyXG4gICAgPG1hdC1vcHRpb24gKm5nRm9yPVwibGV0IGl0ZW0gb2YgZGF0YVwiIFt2YWx1ZV09XCJpdGVtXCI+XHJcbiAgICAgIHt7IGl0ZW0udmFsdWUgfX1cclxuICAgIDwvbWF0LW9wdGlvbj5cclxuICA8L21hdC1hdXRvY29tcGxldGU+XHJcbjwvbWF0LWZvcm0tZmllbGQ+XHJcbiJdfQ==