feat(ogcFilters): add multiple selection for autocomplete with chips

packages/common/dom/src/dom.service.ts

@@ -12,8 +12,8 @@ import { DOMOptions, DOMValue } from './dom.interfaces';
 export class DOMService {
   constructor(private http: HttpClient) {}
 
-  async getDom(dom: DOMOptions): Promise<DOMValue[]> {
-    const url = dom.url;
+  async getDomValuesFromURL(domOptions: DOMOptions): Promise<DOMValue[]> {
+    const url = domOptions.url;
     let result: DOMValue[];
 
     await this.http

packages/geo/src/lib/filter/ogc-filter-selection/ogc-filter-selection.component.html

@@ -305,31 +305,61 @@ <h3>{{ bundle.title }}</h3>
           </mat-button>
           <mat-form-field
             *ngIf="filteredOgcAutocomplete[bundle.id]"
+            floatLabel="always"
             [style.width.%]="bundle.width ? bundle.width : undefined"
           >
+            <mat-label>{{ bundle.title }}</mat-label>
+            <mat-chip-set
+              *ngIf="
+                filteredOgcAutocomplete[bundle.id] && (bundle.showChips ?? true)
+              "
+            >
+              <mat-chip
+                *ngFor="let autocompleteEnabled of autocompleteEnableds"
+                (removed)="toggleSelection(autocompleteEnabled)"
+              >
+                {{ autocompleteEnabled }}
+                <button
+                  matChipRemove
+                  [matTooltip]="'igo.geo.filter.removeFilter' | translate"
+                >
+                  <mat-icon>cancel</mat-icon>
+                </button>
+              </mat-chip>
+            </mat-chip-set>
             <input
               matInput
               type="text"
               formControlName="autocomplete"
-              #autocomplete
-              class="autocomplete"
+              #input
               [matAutocomplete]="auto"
-              [placeholder]="bundle.title"
+              (input)="onInputChange()"
             />
-            <mat-autocomplete
-              #auto="matAutocomplete"
-              #autocomplete
-              (optionSelected)="autocompleteOptionClick($event.option.value)"
-              [displayWith]="displayFn"
-            >
+            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
               <mat-option
                 *ngFor="
                   let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]
                     | async
                 "
-                [value]="ogcAutocomplete"
+                id="mat-option"
+                [matTooltip]="getToolTip(ogcAutocomplete)"
               >
-                {{ ogcAutocomplete.value }}
+                <div
+                  (click)="
+                    toggleAutocompleteOption($event, ogcAutocomplete.value)
+                  "
+                >
+                  <mat-checkbox
+                    id="mat-checkbox"
+                    color="primary"
+                    [checked]="checkedStatus(ogcAutocomplete.value)"
+                    (click)="
+                      toggleAutocompleteOption($event, ogcAutocomplete.value)
+                    "
+                  >
+                  </mat-checkbox>
+                  {{ ogcAutocomplete.value }}
+                </div>
               </mat-option>
             </mat-autocomplete>
           </mat-form-field>