| 1 | {"__symbolic":"module","version":4,"metadata":{"GeocoderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":10,"character":13},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":31},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":44},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":10,"character":58}],"exports":[{"__symbolic":"reference","name":"ɵa"}],"declarations":[{"__symbolic":"reference","name":"ɵa"}],"providers":[{"__symbolic":"reference","name":"GeocoderService"}]}]}],"members":{}},"GeocoderService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":18,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":22,"character":18}]}],"suggest":[{"__symbolic":"method"}],"suggest$":[{"__symbolic":"method"}],"lookup":[{"__symbolic":"method"}],"lookup$":[{"__symbolic":"method"}],"free":[{"__symbolic":"method"}],"free$":[{"__symbolic":"method"}],"reverse":[{"__symbolic":"method"}],"reverse$":[{"__symbolic":"method"}],"formatCollations":[{"__symbolic":"method"}],"formatPlaces":[{"__symbolic":"method"}],"formatLookupResponse":[{"__symbolic":"method"}],"formatReverseResponse":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"geocoder","template":"<div #geocoder\r\n (keydown.ArrowUp)=\"moveUp()\"\r\n (keydown.ArrowDown)=\"moveDown()\"\r\n (keydown.Enter)=\"handleEnter()\"\r\n class=\"geocoder-container\">\r\n <!-- Input -->\r\n <div \r\n class=\"geocoder-search-container\">\r\n <form [formGroup]=\"searchForm\">\r\n <input\r\n formControlName=\"search\" \r\n class=\"geocoder-search-input\"\r\n [placeholder]=\"formattedPlaceholder\"\r\n type=\"text\"\r\n aria-label=\"Zoeken\"\r\n maxlength=\"100\">\r\n </form>\r\n <button \r\n class=\"searchButton\" \r\n aria-label=\"zoeken\"\r\n (click)=\"free()\" \r\n [ngClass]=\"{'highlight': canQuery()}\"> <svg aria-hidden=\"true\" data-fa-processed=\"\" data-prefix=\"fal\" data-icon=\"search\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-search fa-w-16 fa-9x\"><path fill=\"currentColor\" 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\" class=\"\"></path></svg></button>\r\n <button \r\n class=\"closeButton\"\r\n aria-label=\"zoekopdracht weghalen\"\r\n (click)=\"clear()\" \r\n [ngClass]=\"{'highlight': canClear()}\"> <svg aria-hidden=\"true\" data-fa-processed=\"\" data-prefix=\"fal\" data-icon=\"times\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" class=\"svg-inline--fa fa-times fa-w-12 fa-7x\"><path fill=\"currentColor\" 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\" class=\"\"></path></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\"\r\n tabindex={{i}}\r\n *ngFor=\"let place of places; let i = index;\"\r\n (click)=\"lookup(place.id)\"\r\n [ngClass]=\"{'focus-background': isHighlighted(i)}\">\r\n <p class=\"geocoder-suggestion-title\" [innerHTML]=\"place.highlight\"></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\"\r\n tabindex={{i}}\r\n (click)=\"onCollationClick(collation.naam)\"\r\n *ngFor=\"let collation of collations; let i = index;\"\r\n [innerHTML]=\"collation.weergavenaam\">\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n","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}"]}]}],"members":{"geocoderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":17,"character":3},"arguments":["geocoder"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"resultCountLimit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"placeFound":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":37,"character":3},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"GeocoderService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"subscribeToSearchFieldValueChanges":[{"__symbolic":"method"}],"suggest":[{"__symbolic":"method"}],"free":[{"__symbolic":"method"}],"lookup":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"clearPlaces":[{"__symbolic":"method"}],"handleEnter":[{"__symbolic":"method"}],"isNoResultsFound":[{"__symbolic":"method"}],"showCollations":[{"__symbolic":"method"}],"fillInput":[{"__symbolic":"method"}],"isHighlighted":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"resetIndex":[{"__symbolic":"method"}],"canQuery":[{"__symbolic":"method"}],"canClear":[{"__symbolic":"method"}],"formatPlaceholder":[{"__symbolic":"method"}],"onCollationClick":[{"__symbolic":"method"}],"showResults":[{"__symbolic":"method"}],"hideResults":[{"__symbolic":"method"}]}}},"origins":{"GeocoderModule":"./app/geocoder/geocoder.module","GeocoderService":"./app/geocoder/geocoder.service","ɵa":"./app/geocoder/geocoder.component"},"importAs":"angular-geocoder"} |