@mobsolutions/ngx-dadata
Version:
[](https://badge.fury.io/js/%40kolkov%2Fngx-dadata) [](https://travis-ci.org/kolkov/ngx-dadata) [![Coverage Stat
397 lines (387 loc) • 12.6 kB
JavaScript
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Subject, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
import { Injectable, NgModule, Component, EventEmitter, forwardRef, HostListener, Input, Output, Renderer2, ViewChild, defineInjectable, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
const DadataType = {
fio: 'fio',
address: 'address',
party: 'party',
bank: 'bank',
email: 'email',
};
class NgxDadataService {
/**
* @param {?} http
*/
constructor(http) {
this.http = http;
this.apiKey = '';
}
/**
* @param {?} key
* @return {?}
*/
setApiKey(key) {
this.apiKey = key;
}
/**
* @param {?} value
* @param {?=} type
* @param {?=} count
* @return {?}
*/
getData(value, type = DadataType.address, count = 10) {
/** @type {?} */
const httpOptions = {
headers: new HttpHeaders({
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Token ' + this.apiKey,
})
};
/** @type {?} */
const body = { query: value, count };
return this.http.post('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/' + type, body, httpOptions);
}
}
NgxDadataService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxDadataService.ctorParameters = () => [
{ type: HttpClient }
];
/** @nocollapse */ NgxDadataService.ngInjectableDef = defineInjectable({ factory: function NgxDadataService_Factory() { return new NgxDadataService(inject(HttpClient)); }, token: NgxDadataService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DadataConfigDefault = {
apiKey: '',
type: DadataType.address,
delay: 500,
limit: 10,
width: 'auto',
minWidth: '0',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const NGX_DADATA_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NgxDadataComponent)),
multi: true
};
/*const NGX_DADATA_VALIDATOR = {
provide: NG_VALIDATORS,
useExisting: forwardRef(() => NgxDadataComponent),
multi: true,
};*/
/**
* @param {?} value
* @return {?}
*/
function createDaDataValidator(value) {
return (/**
* @param {?} c
* @return {?}
*/
(c) => {
/** @type {?} */
const err = {
rangeError: {
given: c.value,
expected: value,
}
};
return (c.value !== value) ? err : null;
});
}
class NgxDadataComponent {
/**
* @param {?} dataService
* @param {?} _r
*/
constructor(dataService, _r) {
this.dataService = dataService;
this._r = _r;
this.v = '';
this.currentFocus = -1;
this.data = [];
this.config = DadataConfigDefault;
this.disabled = null;
this.type = DadataType.address;
this.limit = DadataConfigDefault.limit;
this.placeholder = '';
this.selected = new EventEmitter();
this.inputString$ = new Subject();
// onSuggestionSelected = (value: string) => {};
this.onTouched = (/**
* @return {?}
*/
() => { });
this.propagateChange = (/**
* @return {?}
*/
() => { });
this.validateFn = (/**
* @return {?}
*/
() => { });
}
/**
* @return {?}
*/
get value() {
return this.v;
}
/**
* @param {?} v
* @return {?}
*/
set value(v) {
if (v !== this.v) {
this.v = v;
this.propagateChange(v);
}
}
/**
* @return {?}
*/
ngOnInit() {
/*this.validateFn = createDaDataValidator(this._value);
this.propagateChange(this._value);*/
this.type = this.config.type;
this.dataService.setApiKey(this.apiKey ? this.apiKey : this.config.apiKey);
this.inputString$.pipe(debounce((/**
* @return {?}
*/
() => timer(this.config.delay ? this.config.delay : 500)))).subscribe((/**
* @param {?} x
* @return {?}
*/
x => {
this.dataService.getData(x, this.type, this.limit).subscribe((/**
* @param {?} y
* @return {?}
*/
(y) => {
this.data = y.suggestions;
}));
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.value) ;
}
/**
* @param {?} value
* @return {?}
*/
getData(value) {
this.inputString$.next(value);
this.currentFocus = -1;
}
/**
* @param {?} e
* @param {?} item
* @return {?}
*/
onClick(e, item) {
// e.preventDefault();
this.inputValue.nativeElement.value = item.value;
this.propagateChange(item.value);
this.inputValue.nativeElement.focus();
this.selectedSuggestion = item;
this.data = [];
this.currentFocus = -1;
// this.writeValue(item.value);
this.selected.emit(item);
// this.selectedData.emit(item.data);
// this.selectedString.emit(item.value);
}
/**
* @return {?}
*/
onOutsideClick() {
this.data = [];
}
/**
* @return {?}
*/
onArrowDown() {
this.removeFocus(this.currentFocus);
if (this.currentFocus >= this.data.length - 1) {
this.currentFocus = 0;
}
else {
this.currentFocus++;
}
this.setFocus(this.currentFocus);
}
/**
* @return {?}
*/
onArrowUp() {
this.removeFocus(this.currentFocus);
if (this.currentFocus === 0) {
this.currentFocus = this.data.length - 1;
}
else {
this.currentFocus--;
}
this.setFocus(this.currentFocus);
}
/**
* @return {?}
*/
onEnter() {
this.selectedSuggestion = this.data[this.currentFocus];
this.inputValue.nativeElement.value = this.selectedSuggestion.value;
this.data = [];
this.currentFocus = -1;
this.propagateChange(this.selectedSuggestion.value);
// this.writeValue(this.selectedSuggestion.value);
this.selected.emit(this.selectedSuggestion);
// this.selectedData.emit(this.selectedSuggestion.data);
// this.selectedString.emit(this.selectedSuggestion.value);
}
/**
* @param {?} id
* @return {?}
*/
setFocus(id) {
/** @type {?} */
const activeEl = document.getElementById(id + 'item');
this._r.addClass(activeEl, 'active');
}
/**
* @param {?} id
* @return {?}
*/
removeFocus(id) {
if (id !== -1) {
/** @type {?} */
const activeEl = document.getElementById(id + 'item');
this._r.removeClass(activeEl, 'active');
}
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value !== undefined) {
this.v = value;
}
// this.onSuggestionSelected(value);
}
/**
* Set the function to be called
* when the control receives a change event.
*
* @param {?} fn a function
* @return {?}
*/
registerOnChange(fn) {
// this.onSuggestionSelected = fn;
this.propagateChange = fn;
}
/**
* Set the function to be called
* when the control receives a touch event.
*
* @param {?} fn a function
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* Implements disabled state for this element
*
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) {
alert('disabled!');
this.disabled = isDisabled;
}
}
NgxDadataComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-dadata',
template: "<div class=\"autocomplete\">\r\n <label for=\"address_input\"></label>\r\n <input [disabled]=\"disabled ? true : null\" type=\"text\" class=\"primary-input\" #inputValue (input)=\"getData(inputValue.value)\"\r\n [placeholder]=\"placeholder\" (keyup.ArrowDown)=\"onArrowDown()\" (keyup.ArrowUp)=\"onArrowUp()\"\r\n (keyup.Enter)=\"onEnter()\" spellcheck=\"false\" [(ngModel)]=\"value\" autocomplete=\"new-password\" />\r\n <div *ngIf=\"data.length\">\r\n <div class=\"autocomplete-items\">\r\n <div class=\"autocomplele-item\" *ngFor=\"let item of data;let i = index\" (click)=\"onClick($event, item)\" [id]=\"i+'item'\">\r\n {{item.value}}\r\n <ng-template [ngIf]=\"type==='party'\">\r\n <br/>\r\n <span>{{item.data?.inn}} {{item.data?.address?.value}}</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
providers: [NGX_DADATA_VALUE_ACCESSOR,],
styles: [".autocomplete{position:relative}.autocomplete-items{position:absolute;border:1px solid #d4d4d4;border-bottom:none;border-top:none;z-index:99;top:100%;left:0;right:0}.autocomplete-items .autocomplele-item{padding:5px 10px;cursor:pointer;background-color:#fff;border-bottom:1px solid #d4d4d4}.autocomplete-items .autocomplele-item:hover{background-color:#e9e9e9}.autocomplete-items .autocomplele-item.active{background-color:#1e90ff!important;color:#fff}.autocomplete-items .autocomplele-item span{color:#555;font-size:80%}"]
}] }
];
/** @nocollapse */
NgxDadataComponent.ctorParameters = () => [
{ type: NgxDadataService },
{ type: Renderer2 }
];
NgxDadataComponent.propDecorators = {
config: [{ type: Input }],
apiKey: [{ type: Input }],
disabled: [{ type: Input }],
type: [{ type: Input }],
limit: [{ type: Input }],
placeholder: [{ type: Input }],
selectedSuggestion: [{ type: Output }],
selected: [{ type: Output }],
inputValue: [{ type: ViewChild, args: ['inputValue' /*, { static: true }*/,] }],
onOutsideClick: [{ type: HostListener, args: ['document:click',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxDadataModule {
}
NgxDadataModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [NgxDadataComponent],
exports: [NgxDadataComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { DadataType, NgxDadataService, createDaDataValidator, NgxDadataComponent, NgxDadataModule, DadataConfigDefault };
//# sourceMappingURL=mobsolutions-ngx-dadata.js.map