@magicnov/ngx-dadata
Version:
Angular 6+ and 13+ DaData suggestion (подсказки) implementation with Material Design
174 lines (166 loc) • 10.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, forwardRef, Component, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
import * as i6 from '@angular/forms';
import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i3 from '@angular/material/autocomplete';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import * as i4 from '@angular/material/core';
import * as i5 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i7 from '@angular/common';
import { CommonModule } from '@angular/common';
var DadataType;
(function (DadataType) {
DadataType["fio"] = "fio";
DadataType["address"] = "address";
DadataType["party"] = "party";
DadataType["bank"] = "bank";
DadataType["email"] = "email";
})(DadataType || (DadataType = {}));
class NgxDadataService {
constructor(http) {
this.http = http;
this.apiKey = "";
}
setApiKey(key) {
this.apiKey = key;
}
// eslint-disable-next-line max-len
getData(value, type = DadataType.address, config) {
const httpOptions = {
headers: new HttpHeaders({
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Token " + this.apiKey,
}),
};
const body = Object.assign({}, { query: value }, { count: config?.limit }, { location: config?.locations }, { location_bust: config?.locationsBoost }, { from_bound: config?.bounds?.fromBound }, { to_bound: config?.bounds?.toBound });
return this.http.post("https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/" + type, body, httpOptions);
}
}
NgxDadataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
NgxDadataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataService, providedIn: "root" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataService, decorators: [{
type: Injectable,
args: [{
providedIn: "root",
}]
}], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
const DadataConfigDefault = {
apiKey: "",
type: DadataType.address,
delay: 500,
limit: 10,
width: "auto",
minWidth: "0",
partyAddress: "city",
locations: null,
};
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: 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: NgxDadataService }]; }, propDecorators: { config: [{
type: Input
}], control: [{
type: Input
}], label: [{
type: Input
}], placeholder: [{
type: Input
}], selected: [{
type: Output
}] } });
class NgxDadataModule {
}
NgxDadataModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxDadataModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataModule, declarations: [NgxDadataComponent], imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatAutocompleteModule], exports: [NgxDadataComponent] });
NgxDadataModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataModule, imports: [[
CommonModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatAutocompleteModule,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NgxDadataModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatAutocompleteModule,
],
declarations: [NgxDadataComponent],
exports: [NgxDadataComponent],
}]
}] });
/*
* Public API Surface of ngx-dadata
*/
/**
* Generated bundle index. Do not edit.
*/
export { DadataConfigDefault, DadataType, NgxDadataComponent, NgxDadataModule, NgxDadataService };
//# sourceMappingURL=magicnov-ngx-dadata.mjs.map