feat(search-bar): can set appearance and map is optional

infra-geo-ouverte · Sep 8, 2020 · 3102156 · 3102156
1 parent 3008300
commit 3102156
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.html b/packages/geo/src/lib/search/search-bar/search-bar.component.html
@@ -1,12 +1,13 @@
 <div class="igo-search-bar-container" [ngClass]="{empty: empty$ | async}">
-  <mat-form-field [floatLabel]="floatLabel">
+  <mat-form-field [floatLabel]="floatLabel" [appearance]="appearance">
+    <mat-label *ngIf="label">{{label}}</mat-label>
     <input
       #input
       matInput
       autocomplete="off"
       [ngClass]="{'hasSearchIcon': searchIcon}"
       [disabled]="disabled$ | async"
-      [placeholder]="(placeholder$ | async) ? (placeholder$.value | translate) : undefined"
+      [placeholder]="placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined"
       [value]="term$ | async"
       (keyup)="onKeyup($event)"
       (touchend)="onKeyup($event)">

diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts
@@ -9,7 +9,7 @@ import {
   ViewChild,
   ElementRef
 } from '@angular/core';
-import { FloatLabelType } from '@angular/material/form-field';
+import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { BehaviorSubject, Subscription, EMPTY, timer } from 'rxjs';
 import { debounce, distinctUntilChanged } from 'rxjs/operators';
 
@@ -127,6 +127,12 @@ export class SearchBarComponent implements OnInit, OnDestroy {
    */
   @Input() floatLabel: FloatLabelType = 'never';
 
+  @Input() appearance: MatFormFieldAppearance = 'legacy';
+
+  @Input() placeholder: string;
+
+  @Input() label: string;
+
   /**
    * Icons color (search and clear)
    */

diff --git a/packages/geo/src/lib/search/shared/search.service.ts b/packages/geo/src/lib/search/shared/search.service.ts
@@ -42,7 +42,8 @@ export class SearchService {
       return [];
     }
 
-    const response = stringToLonLat(term, this.mapService.getMap().projection, {
+    const proj = this.mapService.getMap()?.projection || 'EPSG:3857';
+    const response = stringToLonLat(term, proj, {
       forceNA: options.forceNA
     });
     if (response.lonLat) {
@@ -53,7 +54,7 @@ export class SearchService {
 
     options.extent = this.mapService
       .getMap()
-      .viewController.getExtent('EPSG:4326');
+      ?.viewController.getExtent('EPSG:4326');
 
     let sources;
 
@@ -64,10 +65,10 @@ export class SearchService {
     }
 
     if (options.sourceId) {
-      sources = sources.filter(source => source.getId() === options.sourceId);
+      sources = sources.filter((source) => source.getId() === options.sourceId);
     } else if (options.searchType) {
       sources = sources.filter(
-        source => source.getType() === options.searchType
+        (source) => source.getType() === options.searchType
       );
     }