angular-geocoder/fesm5/angular-geocoder.js

import { __assign, __decorate, __metadata, __spread } from 'tslib';
import { Injectable, ViewChild, ElementRef, Input, Output, EventEmitter, HostListener, Component, NgZone, NgModule } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { parse } from 'terraformer-wkt-parser';
import { DomEvent } from 'leaflet';

var GeocoderService = /** @class */ (function () {
    function GeocoderService(http) {
        this.http = http;
        this.geocoderBaseUrl = 'https://geodata.nationaalgeoregister.nl/locatieserver/v3';
    }
    GeocoderService.prototype.suggest = function (query, options) {
        var _this = this;
        var params = {
            q: query,
            fq: '*',
            start: 0,
            rows: 10,
        };
        if (options) {
            params = Object.assign(params, options);
        }
        return this.http.get(this.geocoderBaseUrl + "/suggest?", { params: params })
            .toPromise().then(function (suggestResultObject) {
            var collations = _this.formatCollations(suggestResultObject.spellcheck.collations);
            var places = _this.formatPlaces(suggestResultObject);
            return { collations: collations, places: places };
        });
    };
    GeocoderService.prototype.suggest$ = function (query, options) {
        var _this = this;
        var params = {
            q: query,
            fq: '*',
            start: 0,
        };
        if (options) {
            params = Object.assign(params, options);
        }
        return this.http.get(this.geocoderBaseUrl + "/suggest?", { params: params })
            .pipe(map(function (suggestResultObject) {
            var collations = _this.formatCollations(suggestResultObject.spellcheck.collations);
            var places = _this.formatPlaces(suggestResultObject);
            return { collations: collations, places: places };
        }));
    };
    GeocoderService.prototype.lookup = function (id, options) {
        var _this = this;
        var params = {
            id: id,
            fl: '*'
        };
        if (options) {
            params = Object.assign(params, options);
        }
        return this.http.get(this.geocoderBaseUrl + "/lookup?", { params: params }).toPromise().then(function (lookupResponse) {
            return _this.formatLookupResponse(lookupResponse);
        });
    };
    GeocoderService.prototype.lookup$ = function (id, options) {
        var _this = this;
        var params = {
            id: id,
            fl: '*'
        };
        if (options) {
            params = Object.assign(params, options);
        }
        return this.http.get(this.geocoderBaseUrl + "/lookup?", { params: params }).pipe(map(function (lookupResponse) { return _this.formatLookupResponse(lookupResponse); }));
    };
    GeocoderService.prototype.free = function (searchTerm, options) {
        var _this = this;
        var params = {
            q: searchTerm,
            fl: '*',
            fq: '*',
            rows: 10,
            start: 0,
        };
        if (options) {
            params = Object.assign(params, options);
        }
        return this.http.get(this.geocoderBaseUrl + "/free?", { params: params })
            .toPromise().then(function (freeResponse) {
            return _this.formatReverseResponse(freeResponse);
        });
    };
    GeocoderService.prototype.free$ = function (searchTerm, options) {
        var _this = this;
        var params = {
            q: searchTerm,
            fl: '*',
            fq: '*',
            rows: 10,
            start: 0,
        };
        if (options) {
            params = Object.assign(params, options);
        }
        return this.http.get(this.geocoderBaseUrl + "/free?", { params: params }).pipe(map(function (freeResponse) { return _this.formatReverseResponse(freeResponse); }));
    };
    GeocoderService.prototype.reverse = function (location, options) {
        var _this = this;
        var params = {
            type: 'adres',
            fq: '*',
            fl: '*',
            rows: 10,
            distance: 200 // meter,
        };
        if (options) {
            params = Object.assign(params, options, location);
        }
        var reverseUrl = 'http://test.geodata.nationaalgeoregister.nl/locatieserver/revgeo?';
        return this.http.get(reverseUrl, { params: params }).toPromise().then(function (reverseResponse) {
            return _this.formatReverseResponse(reverseResponse);
        });
    };
    GeocoderService.prototype.reverse$ = function (location, options) {
        var _this = this;
        var params = {
            type: 'adres',
            fq: '*',
            fl: '*',
            rows: 10,
            distance: 200 // meter,
        };
        if (options) {
            params = Object.assign(params, options, location);
        }
        var reverseUrl = 'http://test.geodata.nationaalgeoregister.nl/locatieserver/revgeo?';
        return this.http.get(reverseUrl, { params: params }).pipe(map(function (reverseResponse) { return _this.formatReverseResponse(reverseResponse); }));
    };
    GeocoderService.prototype.formatCollations = function (collations) {
        var parsedCollations = [];
        for (var i = 0; i < collations.length; i += 2) {
            var collation = {
                id: i,
                naam: collations[i + 1].misspellingsAndCorrections[1],
                weergavenaam: collations[i + 1].hits + " resultaten gevonden voor <strong> " + collations[i + 1].misspellingsAndCorrections[1] + " </strong>",
                hits: collations[i + 1].hits,
            };
            parsedCollations.push(collation);
        }
        return parsedCollations;
    };
    GeocoderService.prototype.formatPlaces = function (suggestResponse) {
        var places = suggestResponse.response.docs.map(function (place) {
            return __assign({}, place, { highlight: suggestResponse.highlighting[place.id].suggest[0] });
        });
        return places;
    };
    /**
     * Parse WKT in lookup response.
     */
    GeocoderService.prototype.formatLookupResponse = function (lookupResponse) {
        var formatted = lookupResponse.response.docs.map(function (lookupResult) {
            var formattedLookupResult = lookupResult;
            if (lookupResult.centroide_ll) {
                formattedLookupResult.centroide_ll = parse(lookupResult.centroide_ll);
            }
            if (lookupResult.centroide_rd) {
                formattedLookupResult.centroide_rd = parse(lookupResult.centroide_rd);
            }
            if (lookupResult.geometrie_rd) {
                formattedLookupResult.geometrie_rd = parse(lookupResult.geometrie_rd);
            }
            if (lookupResult.geometrie_ll) {
                formattedLookupResult.geometrie_ll = parse(lookupResult.geometrie_ll);
            }
            return formattedLookupResult;
        });
        return formatted[0] || {};
    };
    GeocoderService.prototype.formatReverseResponse = function (lookupResultObject) {
        var formatted = lookupResultObject.response.docs.map(function (reverseResult) {
            var formattedLookupResult = reverseResult;
            if (reverseResult.centroide_ll) {
                formattedLookupResult.centroide_ll = parse(reverseResult.centroide_ll);
            }
            if (reverseResult.centroide_rd) {
                formattedLookupResult.centroide_rd = parse(reverseResult.centroide_rd);
            }
            if (reverseResult.geometrie_rd) {
                formattedLookupResult.geometrie_rd = parse(reverseResult.geometrie_rd);
            }
            if (reverseResult.geometrie_ll) {
                formattedLookupResult.geometrie_ll = parse(reverseResult.geometrie_ll);
            }
            formattedLookupResult.highlight = reverseResult.weergavenaam;
            return formattedLookupResult;
        });
        return formatted;
    };
    GeocoderService = __decorate([
        Injectable(),
        __metadata("design:paramtypes", [HttpClient])
    ], GeocoderService);
    return GeocoderService;
}());

// Leaflet requires the old school way for importing
var GeocoderComponent = /** @class */ (function () {
    function GeocoderComponent(geocoderService, zone) {
        this.geocoderService = geocoderService;
        this.zone = zone;
        this.resultCountLimit = 10;
        this.resultFieldsToShow = [];
        this.placeFound = new EventEmitter();
        this.formattedPlaceholder = '';
        this.resultsVisible = true;
        this.places = [];
        this.collations = [];
        this.searchThreshold = 2;
        this.foundPlace = null;
        this.selectedItem = [];
        this.selectedIndex = -1;
        this.subscriptions = [];
        this.searchField = new FormControl();
        this.searchForm = new FormGroup({ search: this.searchField });
        this.subscriptions.push(this.subscribeToSearchFieldValueChanges());
    }
    GeocoderComponent.prototype.clickout = function (event) {
        if (this.geocoderRef.nativeElement.contains(event.target)) {
            this.showResults();
        }
        else {
            this.hideResults();
        }
    };
    GeocoderComponent.prototype.ngOnInit = function () {
        this.formattedPlaceholder = this.formatPlaceholder(this.placeholder);
    };
    GeocoderComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        this.zone.runOutsideAngular(function () {
            DomEvent.disableClickPropagation(_this.geocoderRef.nativeElement);
            DomEvent.disableScrollPropagation(_this.geocoderRef.nativeElement);
        });
    };
    GeocoderComponent.prototype.ngOnChanges = function (changes) {
        if (changes.searchInput) {
            this.searchField.setValue(changes.searchInput.currentValue);
        }
    };
    GeocoderComponent.prototype.ngOnDestroy = function () {
        this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
    };
    GeocoderComponent.prototype.subscribeToSearchFieldValueChanges = function () {
        var _this = this;
        return this.searchField.valueChanges.pipe(filter(function (searchInput) { return searchInput.length > _this.searchThreshold; }), debounceTime(100), distinctUntilChanged(), switchMap(function (searchInput) { return _this.suggest(searchInput); })).subscribe(function (suggestResponse) {
            _this.places = suggestResponse.places;
            _this.collations = suggestResponse.collations;
        }); // Actual call is fired.
    };
    GeocoderComponent.prototype.suggest = function (searchTerm) {
        var flArray = __spread(['id', 'score', 'type', 'weergavenaam'], this.resultFieldsToShow);
        var params = {
            fq: '*:*',
            fl: flArray.toString(),
            rows: this.resultCountLimit
        };
        if (this.type) {
            var replace = ',';
            var regex = new RegExp(replace, 'g');
            var query = this.type.replace(regex, ' OR ');
            params.fq = "type:(" + query + ")";
        }
        return this.geocoderService.suggest$(searchTerm, params);
    };
    GeocoderComponent.prototype.free = function () {
        var _this = this;
        var searchTerm = this.searchField.value;
        var params = { fq: '*:*' };
        if (this.type) {
            var replace = ',';
            var regex = new RegExp(replace, 'g');
            var query = this.type.replace(regex, ' OR ');
            params.fq = "type:(" + query + ")";
        }
        return this.geocoderService.free$(searchTerm, params).subscribe(function (places) {
            _this.places = places;
        });
    };
    GeocoderComponent.prototype.lookup = function (id) {
        var _this = this;
        this.geocoderService.lookup$(id).subscribe(function (lookupObj) {
            _this.foundPlace = lookupObj;
            if (_this.resultFieldsToShow.length > 0) {
                var input = _this.resultFieldsToShow.map(function (resultFieldToShow) {
                    return _this.foundPlace[resultFieldToShow];
                }).join(', ');
                _this.fillInput(input);
            }
            else {
                _this.fillInput(_this.foundPlace.weergavenaam);
            }
            _this.placeFound.emit(_this.foundPlace);
            _this.clearPlaces();
        });
    };
    GeocoderComponent.prototype.clear = function () {
        this.foundPlace = null;
        this.searchField.setValue('');
        this.clearPlaces();
    };
    GeocoderComponent.prototype.clearPlaces = function () {
        this.resetIndex();
        this.places = [];
        this.collations = [];
    };
    GeocoderComponent.prototype.handleEnter = function () {
        if (this.selectedIndex === -1) {
            return;
        }
        var selectedPlace = this.places[this.selectedIndex];
        this.lookup(selectedPlace.id);
    };
    GeocoderComponent.prototype.isNoResultsFound = function () {
        var reachedThreshold = (this.searchField.value && this.searchField.value.length) > this.searchThreshold;
        var noSuggestions = this.places.length === 0;
        var noResult = (this.foundPlace == null);
        return (reachedThreshold) && (noSuggestions) && (noResult);
    };
    GeocoderComponent.prototype.showCollations = function () {
        return this.collations.length > 0 && this.places.length === 0;
    };
    GeocoderComponent.prototype.fillInput = function (content, emitEvent) {
        if (emitEvent === void 0) { emitEvent = false; }
        this.searchField.setValue(content, {
            emitEvent: emitEvent
        });
    };
    GeocoderComponent.prototype.isHighlighted = function (i) {
        if (i === this.selectedIndex) {
            return true;
        }
    };
    GeocoderComponent.prototype.moveUp = function () {
        if (this.selectedIndex > 0) {
            this.selectedIndex--;
        }
    };
    GeocoderComponent.prototype.moveDown = function () {
        if (this.selectedIndex < this.places.length) {
            this.selectedIndex++;
        }
    };
    GeocoderComponent.prototype.resetIndex = function () {
        this.selectedIndex = -1;
    };
    GeocoderComponent.prototype.canQuery = function () {
        var searchInput = this.searchField.value;
        return searchInput && searchInput.length > this.searchThreshold;
    };
    GeocoderComponent.prototype.canClear = function () {
        var searchInput = this.searchField.value;
        return searchInput && searchInput.length > 0;
    };
    GeocoderComponent.prototype.formatPlaceholder = function (placeholder) {
        var placeholderText = 'Zoeken op de kaart...';
        if (placeholder) {
            placeholderText = placeholder;
        }
        return placeholderText;
    };
    GeocoderComponent.prototype.onCollationClick = function (name) {
        this.fillInput(name, true);
    };
    GeocoderComponent.prototype.showResults = function () {
        this.resultsVisible = true;
    };
    GeocoderComponent.prototype.hideResults = function () {
        this.resultsVisible = false;
    };
    __decorate([
        ViewChild('geocoder', { static: false }),
        __metadata("design:type", ElementRef)
    ], GeocoderComponent.prototype, "geocoderRef", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], GeocoderComponent.prototype, "type", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], GeocoderComponent.prototype, "searchInput", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], GeocoderComponent.prototype, "placeholder", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Object)
    ], GeocoderComponent.prototype, "resultCountLimit", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Array)
    ], GeocoderComponent.prototype, "resultFieldsToShow", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], GeocoderComponent.prototype, "placeFound", void 0);
    __decorate([
        HostListener('document:click', ['$event']),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], GeocoderComponent.prototype, "clickout", null);
    GeocoderComponent = __decorate([
        Component({
            template: "<div #geocoder (keydown.ArrowUp)=\"moveUp()\" (keydown.ArrowDown)=\"moveDown()\" (keydown.Enter)=\"handleEnter()\"\r\n  class=\"geocoder-container\">\r\n  <!-- Input -->\r\n  <div class=\"geocoder-search-container\">\r\n    <form [formGroup]=\"searchForm\">\r\n      <input (focus)=\"showResults()\" formControlName=\"search\" class=\"geocoder-search-input\" [placeholder]=\"formattedPlaceholder\" type=\"text\"\r\n        aria-label=\"Zoeken\" maxlength=\"100\">\r\n    </form>\r\n    <button class=\"searchButton\" aria-label=\"zoeken\" (click)=\"free()\" [ngClass]=\"{'highlight': canQuery()}\"> <svg\r\n        aria-hidden=\"true\" data-fa-processed=\"\" data-prefix=\"fal\" data-icon=\"search\" role=\"img\"\r\n        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-search fa-w-16 fa-9x\">\r\n        <path fill=\"currentColor\"\r\n          d=\"M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z\"\r\n          class=\"\"></path>\r\n      </svg></button>\r\n    <button class=\"closeButton\" aria-label=\"zoekopdracht verwijderen\" (click)=\"clear()\"\r\n      [ngClass]=\"{'highlight': canClear()}\"> <svg aria-hidden=\"true\" data-fa-processed=\"\" data-prefix=\"fal\"\r\n        data-icon=\"times\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"\r\n        class=\"svg-inline--fa fa-times fa-w-12 fa-7x\">\r\n        <path fill=\"currentColor\"\r\n          d=\"M217.5 256l137.2-137.2c4.7-4.7 4.7-12.3 0-17l-8.5-8.5c-4.7-4.7-12.3-4.7-17 0L192 230.5 54.8 93.4c-4.7-4.7-12.3-4.7-17 0l-8.5 8.5c-4.7 4.7-4.7 12.3 0 17L166.5 256 29.4 393.2c-4.7 4.7-4.7 12.3 0 17l8.5 8.5c4.7 4.7 12.3 4.7 17 0L192 281.5l137.2 137.2c4.7 4.7 12.3 4.7 17 0l8.5-8.5c4.7-4.7 4.7-12.3 0-17L217.5 256z\"\r\n          class=\"\"></path>\r\n      </svg></button>\r\n  </div>\r\n  <!-- Search results-->\r\n  <div class=\"geocoder-suggestions-container\" *ngIf=\"resultsVisible === true\">\r\n    <div class=\"geocoder-suggestions-results\" *ngIf=\"places.length > 0\">\r\n      <ul class=\"geocoder-suggestions-list\">\r\n        <li class=\"geocoder-suggestion\" tabindex={{i}} *ngFor=\"let place of places; let i = index;\"\r\n          (click)=\"lookup(place.id)\" [ngClass]=\"{'focus-background': isHighlighted(i)}\">\r\n          <p *ngIf=\"resultFieldsToShow.length === 0\" class=\"geocoder-suggestion-title\" [innerHTML]=\"place.highlight\">\r\n          </p>\r\n          <p *ngIf=\"resultFieldsToShow.length > 0\" class=\"geocoder-suggestion-title\">\r\n            <ng-container *ngFor=\"let field of resultFieldsToShow\">\r\n              {{place[field]}}\r\n            </ng-container>\r\n          </p>\r\n          <p class=\"geocoder-suggestion-type\"> {{place.type}} </p>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div class=\"geocoder-no-results\" *ngIf=\"isNoResultsFound()\">\r\n      <p>Geen zoekresultaten gevonden voor <strong> {{searchField.value}}</strong>.</p>\r\n    </div>\r\n    <div class=\"geocoder-collation-container\" *ngIf=\"showCollations()\">\r\n      <ul class=\"geocoder-collations-list\">\r\n        <li class=\"geocoder-collation\" tabindex={{i}} (click)=\"onCollationClick(collation.naam)\"\r\n          *ngFor=\"let collation of collations; let i = index;\" [innerHTML]=\"collation.weergavenaam\">\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
            selector: 'geocoder',
            styles: ["::-webkit-input-placeholder{font-size:14px;color:#797979}:-moz-placeholder{font-size:14px;color:#797979}::-moz-placeholder{font-size:14px;color:#797979}:-ms-input-placeholder{font-size:14px;color:#797979}::-ms-input-placeholder{font-size:14px;color:#797979}:placeholder-shown{font-size:14px;color:#797979}:focus{outline:0}input,li,p,span{margin:0;font-size:14px;color:#797979}.geocoder-container{width:100%;position:relative;max-width:100%}.geocoder-search-container{width:100%;border:none;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);background:#fff}.geocoder-search-input{padding:15px;border:none;width:95%;width:calc(100% - 80px);overflow:hidden;max-width:100%}button{position:absolute;cursor:pointer}.searchButton{top:13px;right:50px;padding-right:15px;background:#fff;border:none;border-right:1px solid #797979;height:20px}.closeButton{top:10px;right:10px;margin-left:16px;background:#fff;border:none;height:26px}svg{width:18px;color:#797979}.closeButton:hover svg,.highlight svg,.searchButton:hover svg{color:#79abff;transition:.1s cubic-bezier(.075,.82,.165,1)}.geocoder-suggestions-results{top:53px;position:absolute;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);width:100%;z-index:1;max-height:400px;overflow-y:auto}.geocoder-collations-list,.geocoder-suggestions-list{list-style-type:none;padding:0;margin:0}.geocoder-suggestion{padding:15px;position:relative;border-bottom:1px solid #f1f1f1}.geocoder-suggestion-title{max-width:243px}.geocoder-suggestion-type{text-transform:uppercase;font-weight:700;font-size:11px;position:absolute;right:15px;top:36%;color:#bfbfbf}.geocoder-collation:hover,.geocoder-suggestion:hover{cursor:pointer;background-color:#f7f7f7}.focus-background{background-color:#f7f7f7}.geocoder-no-results{top:53px;position:absolute;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);width:100%;padding:15px;z-index:1;box-sizing:border-box}.geocoder-collation{z-index:1}.geocoder-collation-container{top:108px;position:absolute;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);width:100%;z-index:1}.geocoder-collation-container li{padding:15px;border-bottom:1px solid #f1f1f1}"]
        }),
        __metadata("design:paramtypes", [GeocoderService,
            NgZone])
    ], GeocoderComponent);
    return GeocoderComponent;
}());

var GeocoderModule = /** @class */ (function () {
    function GeocoderModule() {
    }
    GeocoderModule = __decorate([
        NgModule({
            imports: [HttpClientModule, FormsModule, CommonModule, ReactiveFormsModule],
            exports: [GeocoderComponent],
            declarations: [GeocoderComponent],
            providers: [GeocoderService]
        })
    ], GeocoderModule);
    return GeocoderModule;
}());

export { GeocoderModule, GeocoderService, GeocoderComponent as ɵa };
//# sourceMappingURL=angular-geocoder.js.map