@igo2/geo 17.0.0-next.9 → 17.0.0

package/fesm2022/igo2-geo.mjs

@@ -103,7 +103,7 @@ import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/c
 import * as i1$3 from '@angular/forms';
 import { FormsModule, UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i6 from '@angular/material/autocomplete';
-import { MatAutocompleteModule, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteTrigger, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
 import * as i6$1 from '@angular/material/core';
 import { MatOptionModule, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i2$3 from '@angular/material/form-field';
@@ -149,7 +149,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i2$5 from '@angular/material/slider';
 import { MatSlider, MatSliderModule } from '@angular/material/slider';
 import * as i10 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatButtonToggleModule, MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS } from '@angular/material/button-toggle';
+import * as i17 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import * as i12 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i3$6 from '@igo2/common/dom';
@@ -2735,6 +2737,14 @@ class OgcFilterWriter {
                     conditions.push(condition);
                 }
             }
+            if (ogcFilters.filters &&
+                'operator' in ogcFilters.filters &&
+                ogcFilters.filters.operator.toLowerCase() ===
+                    OgcFilterOperator.During.toLowerCase() &&
+                ogcFilters.filters.active &&
+                ogcFilters.interfaceOgcFilters?.length > 0) {
+                conditions.push(ogcFilters.interfaceOgcFilters[0]);
+            }
             if (conditions.length >= 1) {
                 filterQueryStringSelector = this.buildFilter(conditions.length === 1
                     ? conditions[0]
@@ -17038,7 +17048,7 @@ class OgcFilterTimeComponent {
             else {
                 this.endValue = value;
                 this.onlyYearEnd = this.endValue.getFullYear();
-                dateStringFromYearNotime = `${this.onlyYearEnd}-01-01`;
+                dateStringFromYearNotime = `${this.onlyYearEnd}-12-31`;
             }
             // call service with string date without time
             this.changeProperty.next({
@@ -17630,6 +17640,7 @@ class OgcFilterFormComponent {
     }
     _filterValues(value) {
         const keywordRegex = new RegExp(value
+            .replace(/[.*+?^${}()|[\]\\]/g, '')
             .toString()
             .normalize('NFD')
             .replace(/[\u0300-\u036f]/g, ''), 'gi');
@@ -17823,6 +17834,7 @@ class OgcFilterSelectionComponent {
     configService;
     cdRef;
     sel;
+    matAutocomplete;
     refreshFilters;
     datasource;
     map;
@@ -17839,6 +17851,7 @@ class OgcFilterSelectionComponent {
         }
     }
     _currentFilter;
+    inputChangeAutocomplete = new Subject();
     ogcFilterOperator = OgcFilterOperator;
     form;
     ogcFilterWriter;
@@ -17846,7 +17859,7 @@ class OgcFilterSelectionComponent {
     selectAllSelected = false;
     selectEnabled$ = new BehaviorSubject(undefined);
     selectEnableds$ = new BehaviorSubject([]);
-    autocompleteEnabled$ = new BehaviorSubject(undefined);
+    autocompleteEnableds$ = new BehaviorSubject([]);
     filteredOgcAutocomplete = {};
     applyFiltersTimeout;
     get ogcFiltersSelectors() {
@@ -17943,23 +17956,31 @@ class OgcFilterSelectionComponent {
             this.applyFilters();
         }, 750);
     }
-    get autocompleteEnabled() {
-        return this.autocompleteEnabled$.value;
+    get autocompleteEnableds() {
+        return this.autocompleteEnableds$.value;
     }
-    set autocompleteEnabled(value) {
-        this.autocompleteEnabled$.next(value);
+    // Updates the currentAutocompleteGroup and applies filters
+    set autocompleteEnableds(filterList) {
+        this.autocompleteEnableds$.next(filterList);
         clearTimeout(this.applyFiltersTimeout);
         this.currentAutocompleteGroup.computedSelectors.forEach((compSelect) => {
             compSelect.selectors?.forEach((selector) => {
-                value === selector.title
-                    ? (selector.enabled = true)
-                    : (selector.enabled = false);
+                selector.enabled = false;
+                for (const filter of filterList) {
+                    if (filter === selector.title) {
+                        selector.enabled = true;
+                    }
+                }
             });
         });
         this.applyFiltersTimeout = setTimeout(() => {
             this.applyFilters();
         }, 750);
     }
+    // Indicates the checked status of autocomplete checkboxes
+    checkedStatus(autocompleteFilter) {
+        return this.autocompleteEnableds.includes(autocompleteFilter);
+    }
     constructor(ogcFilterService, formBuilder, domService, configService, cdRef) {
         this.ogcFilterService = ogcFilterService;
         this.formBuilder = formBuilder;
@@ -17971,16 +17992,16 @@ class OgcFilterSelectionComponent {
     }
     buildForm() {
         this.form = this.formBuilder.group({
-            pushButtons: ['', [Validators.required]],
-            radioButtons: ['', [Validators.required]],
+            pushButtons: [''],
+            radioButtons: [''],
             pushButtonsGroup: ['', [Validators.required]],
             checkboxesGroup: ['', [Validators.required]],
             radioButtonsGroup: ['', [Validators.required]],
             selectGroup: ['', [Validators.required]],
-            select: ['', [Validators.required]],
-            selectMulti: ['', [Validators.required]],
+            select: [''],
+            selectMulti: [''],
             autocompleteGroup: ['', [Validators.required]],
-            autocomplete: ['', [Validators.required]]
+            autocomplete: ['']
         });
     }
     getPushButtonsGroups() {
@@ -18025,13 +18046,13 @@ class OgcFilterSelectionComponent {
             if (this.datasource.options.ogcFilters.select) {
                 this.currentSelectGroup =
                     this.datasource.options.ogcFilters.select.groups.find((group) => group.enabled) || this.datasource.options.ogcFilters.select.groups[0];
-                this.getSelectEnabled();
+                this.initSelectEnabled();
                 await this.getSelectDomValues();
             }
             if (this.datasource.options.ogcFilters.autocomplete) {
                 this.currentAutocompleteGroup =
                     this.datasource.options.ogcFilters.autocomplete.groups.find((group) => group.enabled) || this.datasource.options.ogcFilters.autocomplete.groups[0];
-                this.getAutocompleteEnabled();
+                this.initAutocompleteEnableds();
                 await this.getAutocompleteDomValues();
             }
             this.applyFilters();
@@ -18083,8 +18104,12 @@ class OgcFilterSelectionComponent {
             .subscribe(() => {
             this.applyFilters();
         });
+        // Debounce time for autocomplete filter options - value chosen arbitrarily
+        this.inputChangeAutocomplete.pipe().subscribe(() => {
+            this.getAutocompleteDomValues();
+        });
     }
-    getSelectEnabled() {
+    initSelectEnabled() {
         const enableds = [];
         let enabled;
         this.currentSelectGroup.computedSelectors.forEach((compSelect) => {
@@ -18113,8 +18138,8 @@ class OgcFilterSelectionComponent {
             }
         });
     }
-    getAutocompleteEnabled() {
-        let enabled;
+    initAutocompleteEnableds() {
+        let enabled = [];
         this.currentAutocompleteGroup.computedSelectors.forEach((compSelect) => {
             compSelect.selectors?.forEach((selector) => {
                 if (selector.enabled) {
@@ -18122,11 +18147,11 @@ class OgcFilterSelectionComponent {
                         id: selector.filters.expression,
                         value: selector.title
                     };
-                    enabled = selector.title;
+                    enabled.push(selector.title);
                     this.form.controls['autocomplete'].setValue(dom);
                 }
             });
-            this.autocompleteEnabled = enabled;
+            this.autocompleteEnableds = enabled;
         });
     }
     getToolTip(selector) {
@@ -18159,7 +18184,7 @@ class OgcFilterSelectionComponent {
                         }
                     }
                     filterDOM.url
-                        ? (domValues = (await this.domService.getDom(filterDOM)))
+                        ? (domValues = (await this.domService.getDomValuesFromURL(filterDOM)))
                         : (domValues = filterDOM.values);
                     if (domValues) {
                         let newBundle = bundle;
@@ -18199,10 +18224,14 @@ class OgcFilterSelectionComponent {
                             .computedSelectors.find((comp) => comp.title === newBundle.title).selectors = newBundle.selectors;
                     }
                 }
-                this.getSelectEnabled();
+                this.initSelectEnabled();
             }
         }
     }
+    // Trigger filter refresh (with debounce)
+    onInputChange() {
+        this.inputChangeAutocomplete.next();
+    }
     async getAutocompleteDomValues() {
         for (const bundle of this.datasource.options.ogcFilters.autocomplete
             .bundles) {
@@ -18210,63 +18239,46 @@ class OgcFilterSelectionComponent {
                 let domValues;
                 for (const domSelector of bundle.domSelectors) {
                     let filterDOM;
-                    for (const domOptions of this.configService.getConfig('dom')) {
-                        if (domSelector.id === domOptions.id ||
-                            domSelector.name === domOptions.name) {
+                    for (const configDom of this.configService.getConfig('dom')) {
+                        if (domSelector.id === configDom.id ||
+                            domSelector.name === configDom.name) {
                             filterDOM = {
-                                id: domOptions.id,
-                                url: domOptions.url,
-                                name: domOptions.name,
-                                values: domOptions.values
+                                id: configDom.id,
+                                url: configDom.url,
+                                name: configDom.name,
+                                values: configDom.values
                             };
                         }
                     }
                     filterDOM.url
-                        ? (domValues = (await this.domService.getDom(filterDOM)))
+                        ? (domValues = (await this.domService.getDomValuesFromURL(filterDOM)))
                         : (domValues = filterDOM.values);
                     if (domValues) {
                         let newBundle = bundle;
                         newBundle.selectors = [];
                         let selector;
-                        for (const value of domValues) {
+                        for (const domValue of domValues) {
                             selector = {
-                                title: value.value,
-                                enabled: this.autocompleteEnabled &&
-                                    this.autocompleteEnabled === value.value
+                                title: domValue.id,
+                                enabled: this.autocompleteEnableds?.includes(domValue.value)
                                     ? true
                                     : false,
                                 filters: {
                                     operator: domSelector.operator,
                                     propertyName: domSelector.propertyName,
-                                    expression: value.id
+                                    expression: domValue.value
                                 }
                             };
                             newBundle.selectors.push(selector);
                         }
                         this.getAutocompleteGroups()
                             .find((group) => group.ids.includes(newBundle.id))
-                            .computedSelectors.find((comp) => comp.title === newBundle.title).selectors = newBundle.selectors;
+                            .computedSelectors.find((computedSelector) => computedSelector.title === newBundle.title).selectors = newBundle.selectors;
                     }
                 }
                 this.filteredOgcAutocomplete[bundle.id] = new Observable();
                 this.cdRef.detectChanges();
-                this.filteredOgcAutocomplete[bundle.id] = this.form.controls['autocomplete'].valueChanges.pipe(map((value) => {
-                    if (value.length) {
-                        return domValues?.filter((option) => {
-                            const filterNormalized = value
-                                ? value
-                                    .toLowerCase()
-                                    .normalize('NFD')
-                                    .replace(/[\u0300-\u036f]/g, '')
-                                : '';
-                            const featureNameNormalized = option.value
-                                .toLowerCase()
-                                .normalize('NFD')
-                                .replace(/[\u0300-\u036f]/g, '');
-                            return featureNameNormalized.includes(filterNormalized);
-                        });
-                    }
-                }));
+                this.filteredOgcAutocomplete[bundle.id] = of(domValues);
             }
         }
     }
@@ -18340,7 +18352,7 @@ class OgcFilterSelectionComponent {
         this.selectEnabled = undefined;
     }
     emptyAutocomplete() {
-        this.autocompleteEnabled = undefined;
+        this.autocompleteEnableds = [];
         this.form.controls['autocomplete'].setValue('');
         this.form.controls['autocomplete'].markAsUntouched();
     }
@@ -18397,12 +18409,23 @@ class OgcFilterSelectionComponent {
             this.selectEnabled = value;
         }
     }
-    autocompleteOptionClick(value) {
-        this.autocompleteEnabled = value.value;
+    toggleAutocompleteOption(event, toggledFilter) {
+        event.stopPropagation();
+        this.toggleSelection(toggledFilter);
     }
-    displayFn(dom) {
-        return dom ? dom.value : undefined;
+    toggleSelection(toggledFilter) {
+        if (this.autocompleteEnableds.includes(toggledFilter)) {
+            this.autocompleteEnableds = this.autocompleteEnableds.filter((enabledFilter) => enabledFilter !== toggledFilter);
+        }
+        else {
+            this.autocompleteEnableds = [...this.autocompleteEnableds, toggledFilter];
+        }
     }
+    // Value displayed in the autocomplete input box
+    displayFn() {
+        return '';
+    }
+    // Applies filters based on the current group of all filter selection types
     applyFilters() {
         let filterQueryString = '';
         const conditions = [];
@@ -18520,7 +18543,7 @@ class OgcFilterSelectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: OgcFilterSelectionComponent, deps: [{ token: OGCFilterService }, { token: i1$3.UntypedFormBuilder }, { token: i3$6.DOMService }, { token: i1$2.ConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: OgcFilterSelectionComponent, isStandalone: true, selector: "igo-ogc-filter-selection", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", checkboxesIndex: "checkboxesIndex", radioButtonsIndex: "radioButtonsIndex", baseIndex: "baseIndex", currentFilter: "currentFilter" }, providers: [DOMService], viewQueries: [{ propertyName: "sel", first: true, predicate: ["selection"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div\n      class=\"pushButtonGroups\"\n      *ngIf=\"selector.selectorType === 'pushButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"pushButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\"\n          class=\"mat-typography\"\n          appearance=\"legacy\"\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\n          multiple=\"true\"\n        >\n          <mat-button-toggle\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\"\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\"\n            >{{ ogcPushButton.title }}\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </ng-container>\n    </div>\n\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"checkboxesGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\"\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\"\n            >{{ ogcCheckbox.title }}\n          </mat-checkbox>\n        </div>\n        <p\n          *ngIf=\"\n            isLessResults(bundle, 'checkbox') ||\n            isMoreResults(bundle, 'checkbox')\n          \"\n        >\n          <u\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"radioButtonGroups\"\n      *ngIf=\"selector.selectorType === 'radioButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"radioButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button\n            *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\"\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\"\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\"\n            >{{ ogcRadioButton.title }}\n          </mat-radio-button>\n          <p\n            *ngIf=\"\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\n            \"\n          >\n            <u\n              *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\"\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\"\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n            </u>\n          </p>\n        </mat-radio-group>\n      </ng-container>\n    </div>\n\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"selectGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\"\n          >\n            <mat-icon>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection\n                [multiple]=\"bundle.multiple\"\n                [placeholder]=\"bundle.title\"\n                formControlName=\"selectMulti\"\n              >\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox\n                    *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (change)=\"toggleAllSelection()\"\n                    >Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle, $event)\n                  \"\n                  [value]=\"ogcSelect\"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle)\n                  \"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </ng-template>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"autocompleteGroups\"\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"autocompleteGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\"\n          >\n            <mat-option\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\"\n              >{{ autocompleteGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\"\n          >\n            <mat-icon>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <input\n              matInput\n              type=\"text\"\n              formControlName=\"autocomplete\"\n              #autocomplete\n              class=\"autocomplete\"\n              [matAutocomplete]=\"auto\"\n              [placeholder]=\"bundle.title\"\n            />\n            <mat-autocomplete\n              #auto=\"matAutocomplete\"\n              #autocomplete\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\n              [displayWith]=\"displayFn\"\n            >\n              <mat-option\n                *ngFor=\"\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\n                    | async\n                \"\n                [value]=\"ogcAutocomplete\"\n              >\n                {{ ogcAutocomplete.value }}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</form>\n\n<div *ngIf=\"isTemporalOperator()\">\n  <mat-divider></mat-divider>\n  <h3 *ngIf=\"!currentFilter.title\">\n    {{ 'igo.geo.filter.reportingDate' | translate }}\n  </h3>\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\n  <igo-ogc-filter-time\n    [datasource]=\"datasource\"\n    [currentFilter]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n  >\n  </igo-ogc-filter-time>\n</div>\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: OgcFilterSelectionComponent, isStandalone: true, selector: "igo-ogc-filter-selection", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", checkboxesIndex: "checkboxesIndex", radioButtonsIndex: "radioButtonsIndex", baseIndex: "baseIndex", currentFilter: "currentFilter" }, providers: [DOMService], viewQueries: [{ propertyName: "sel", first: true, predicate: ["selection"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: MatAutocompleteTrigger, descendants: true, read: MatAutocompleteTrigger }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div\n      class=\"pushButtonGroups\"\n      *ngIf=\"selector.selectorType === 'pushButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"pushButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\"\n          class=\"mat-typography\"\n          appearance=\"legacy\"\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\n          multiple=\"true\"\n        >\n          <mat-button-toggle\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\"\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\"\n            >{{ ogcPushButton.title }}\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </ng-container>\n    </div>\n\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"checkboxesGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\"\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\"\n            >{{ ogcCheckbox.title }}\n          </mat-checkbox>\n        </div>\n        <p\n          *ngIf=\"\n            isLessResults(bundle, 'checkbox') ||\n            isMoreResults(bundle, 'checkbox')\n          \"\n        >\n          <u\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"radioButtonGroups\"\n      *ngIf=\"selector.selectorType === 'radioButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"radioButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button\n            *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\"\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\"\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\"\n            >{{ ogcRadioButton.title }}\n          </mat-radio-button>\n          <p\n            *ngIf=\"\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\n            \"\n          >\n            <u\n              *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\"\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\"\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n            </u>\n          </p>\n        </mat-radio-group>\n      </ng-container>\n    </div>\n\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"selectGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\"\n          >\n            <mat-icon>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection\n                [multiple]=\"bundle.multiple\"\n                [placeholder]=\"bundle.title\"\n                formControlName=\"selectMulti\"\n              >\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox\n                    *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (change)=\"toggleAllSelection()\"\n                    >Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle, $event)\n                  \"\n                  [value]=\"ogcSelect\"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle)\n                  \"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </ng-template>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"autocompleteGroups\"\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"autocompleteGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\"\n          >\n            <mat-option\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\"\n              >{{ autocompleteGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\"\n          >\n            <mat-icon>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\n            floatLabel=\"always\"\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <mat-label>{{ bundle.title }}</mat-label>\n            <mat-chip-set\n              *ngIf=\"\n                filteredOgcAutocomplete[bundle.id] && (bundle.showChips ?? true)\n              \"\n            >\n              <mat-chip\n                *ngFor=\"let autocompleteEnabled of autocompleteEnableds\"\n                (removed)=\"toggleSelection(autocompleteEnabled)\"\n              >\n                {{ autocompleteEnabled }}\n                <button\n                  matChipRemove\n                  [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\n                >\n                  <mat-icon>cancel</mat-icon>\n                </button>\n              </mat-chip>\n            </mat-chip-set>\n            <input\n              matInput\n              type=\"text\"\n              formControlName=\"autocomplete\"\n              #input\n              [matAutocomplete]=\"auto\"\n              (input)=\"onInputChange()\"\n            />\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\">\n              <mat-option\n                *ngFor=\"\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\n                    | async\n                \"\n                id=\"mat-option\"\n                [matTooltip]=\"getToolTip(ogcAutocomplete)\"\n              >\n                <div\n                  (click)=\"\n                    toggleAutocompleteOption($event, ogcAutocomplete.value)\n                  \"\n                >\n                  <mat-checkbox\n                    id=\"mat-checkbox\"\n                    color=\"primary\"\n                    [checked]=\"checkedStatus(ogcAutocomplete.value)\"\n                    (click)=\"\n                      toggleAutocompleteOption($event, ogcAutocomplete.value)\n                    \"\n                  >\n                  </mat-checkbox>\n                  {{ ogcAutocomplete.value }}\n                </div>\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</form>\n\n<div *ngIf=\"isTemporalOperator()\">\n  <mat-divider></mat-divider>\n  <h3 *ngIf=\"!currentFilter.title\">\n    {{ 'igo.geo.filter.reportingDate' | translate }}\n  </h3>\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\n  <igo-ogc-filter-time\n    [datasource]=\"datasource\"\n    [currentFilter]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n  >\n  </igo-ogc-filter-time>\n</div>\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i17.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i17.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i17.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: OgcFilterSelectionComponent, decorators: [{
             type: Component,
@@ -18543,11 +18566,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         MatAutocompleteModule,
                         OgcFilterTimeComponent,
                         AsyncPipe,
-                        IgoLanguageModule
-                    ], template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div\n      class=\"pushButtonGroups\"\n      *ngIf=\"selector.selectorType === 'pushButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"pushButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\"\n          class=\"mat-typography\"\n          appearance=\"legacy\"\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\n          multiple=\"true\"\n        >\n          <mat-button-toggle\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\"\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\"\n            >{{ ogcPushButton.title }}\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </ng-container>\n    </div>\n\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"checkboxesGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\"\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\"\n            >{{ ogcCheckbox.title }}\n          </mat-checkbox>\n        </div>\n        <p\n          *ngIf=\"\n            isLessResults(bundle, 'checkbox') ||\n            isMoreResults(bundle, 'checkbox')\n          \"\n        >\n          <u\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"radioButtonGroups\"\n      *ngIf=\"selector.selectorType === 'radioButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"radioButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button\n            *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\"\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\"\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\"\n            >{{ ogcRadioButton.title }}\n          </mat-radio-button>\n          <p\n            *ngIf=\"\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\n            \"\n          >\n            <u\n              *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\"\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\"\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n            </u>\n          </p>\n        </mat-radio-group>\n      </ng-container>\n    </div>\n\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"selectGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\"\n          >\n            <mat-icon>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection\n                [multiple]=\"bundle.multiple\"\n                [placeholder]=\"bundle.title\"\n                formControlName=\"selectMulti\"\n              >\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox\n                    *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (change)=\"toggleAllSelection()\"\n                    >Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle, $event)\n                  \"\n                  [value]=\"ogcSelect\"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle)\n                  \"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </ng-template>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"autocompleteGroups\"\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"autocompleteGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\"\n          >\n            <mat-option\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\"\n              >{{ autocompleteGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\"\n          >\n            <mat-icon>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <input\n              matInput\n              type=\"text\"\n              formControlName=\"autocomplete\"\n              #autocomplete\n              class=\"autocomplete\"\n              [matAutocomplete]=\"auto\"\n              [placeholder]=\"bundle.title\"\n            />\n            <mat-autocomplete\n              #auto=\"matAutocomplete\"\n              #autocomplete\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\n              [displayWith]=\"displayFn\"\n            >\n              <mat-option\n                *ngFor=\"\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\n                    | async\n                \"\n                [value]=\"ogcAutocomplete\"\n              >\n                {{ ogcAutocomplete.value }}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</form>\n\n<div *ngIf=\"isTemporalOperator()\">\n  <mat-divider></mat-divider>\n  <h3 *ngIf=\"!currentFilter.title\">\n    {{ 'igo.geo.filter.reportingDate' | translate }}\n  </h3>\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\n  <igo-ogc-filter-time\n    [datasource]=\"datasource\"\n    [currentFilter]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n  >\n  </igo-ogc-filter-time>\n</div>\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"] }]
+                        IgoLanguageModule,
+                        MatChipsModule
+                    ], template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div\n      class=\"pushButtonGroups\"\n      *ngIf=\"selector.selectorType === 'pushButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"pushButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\"\n          class=\"mat-typography\"\n          appearance=\"legacy\"\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\n          multiple=\"true\"\n        >\n          <mat-button-toggle\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\"\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\"\n            >{{ ogcPushButton.title }}\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </ng-container>\n    </div>\n\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"checkboxesGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\"\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\"\n            >{{ ogcCheckbox.title }}\n          </mat-checkbox>\n        </div>\n        <p\n          *ngIf=\"\n            isLessResults(bundle, 'checkbox') ||\n            isMoreResults(bundle, 'checkbox')\n          \"\n        >\n          <u\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"radioButtonGroups\"\n      *ngIf=\"selector.selectorType === 'radioButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"radioButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button\n            *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\"\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\"\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\"\n            >{{ ogcRadioButton.title }}\n          </mat-radio-button>\n          <p\n            *ngIf=\"\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\n            \"\n          >\n            <u\n              *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\"\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\"\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n            </u>\n          </p>\n        </mat-radio-group>\n      </ng-container>\n    </div>\n\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"selectGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\"\n          >\n            <mat-icon>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection\n                [multiple]=\"bundle.multiple\"\n                [placeholder]=\"bundle.title\"\n                formControlName=\"selectMulti\"\n              >\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox\n                    *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (change)=\"toggleAllSelection()\"\n                    >Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle, $event)\n                  \"\n                  [value]=\"ogcSelect\"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle)\n                  \"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </ng-template>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"autocompleteGroups\"\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"autocompleteGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\"\n          >\n            <mat-option\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\"\n              >{{ autocompleteGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\"\n          >\n            <mat-icon>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\n            floatLabel=\"always\"\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <mat-label>{{ bundle.title }}</mat-label>\n            <mat-chip-set\n              *ngIf=\"\n                filteredOgcAutocomplete[bundle.id] && (bundle.showChips ?? true)\n              \"\n            >\n              <mat-chip\n                *ngFor=\"let autocompleteEnabled of autocompleteEnableds\"\n                (removed)=\"toggleSelection(autocompleteEnabled)\"\n              >\n                {{ autocompleteEnabled }}\n                <button\n                  matChipRemove\n                  [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\n                >\n                  <mat-icon>cancel</mat-icon>\n                </button>\n              </mat-chip>\n            </mat-chip-set>\n            <input\n              matInput\n              type=\"text\"\n              formControlName=\"autocomplete\"\n              #input\n              [matAutocomplete]=\"auto\"\n              (input)=\"onInputChange()\"\n            />\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\">\n              <mat-option\n                *ngFor=\"\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\n                    | async\n                \"\n                id=\"mat-option\"\n                [matTooltip]=\"getToolTip(ogcAutocomplete)\"\n              >\n                <div\n                  (click)=\"\n                    toggleAutocompleteOption($event, ogcAutocomplete.value)\n                  \"\n                >\n                  <mat-checkbox\n                    id=\"mat-checkbox\"\n                    color=\"primary\"\n                    [checked]=\"checkedStatus(ogcAutocomplete.value)\"\n                    (click)=\"\n                      toggleAutocompleteOption($event, ogcAutocomplete.value)\n                    \"\n                  >\n                  </mat-checkbox>\n                  {{ ogcAutocomplete.value }}\n                </div>\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</form>\n\n<div *ngIf=\"isTemporalOperator()\">\n  <mat-divider></mat-divider>\n  <h3 *ngIf=\"!currentFilter.title\">\n    {{ 'igo.geo.filter.reportingDate' | translate }}\n  </h3>\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\n  <igo-ogc-filter-time\n    [datasource]=\"datasource\"\n    [currentFilter]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n  >\n  </igo-ogc-filter-time>\n</div>\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"] }]
         }], ctorParameters: () => [{ type: OGCFilterService }, { type: i1$3.UntypedFormBuilder }, { type: i3$6.DOMService }, { type: i1$2.ConfigService }, { type: i0.ChangeDetectorRef }], propDecorators: { sel: [{
                 type: ViewChild,
                 args: ['selection']
+            }], matAutocomplete: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger, { read: MatAutocompleteTrigger }]
             }], refreshFilters: [{
                 type: Input
             }], datasource: [{
@@ -20111,7 +20138,7 @@ class FeatureDetailsComponent {
     }
     openSecureUrl(value) {
         let url;
-        const regexDepot = new RegExp(this.configService?.getConfig('depot.url') + '.*?(?="|$)');
+        const regexDepot = new RegExp(this.configService?.getConfig('depot.url') + '.*?(?=\\s|$)');
         if (regexDepot.test(value)) {
             url = value.match(regexDepot)[0];
             this.http
@@ -22816,7 +22843,14 @@ class DrawComponent {
         return Number(length / (2 * Math.PI));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DrawComponent, deps: [{ token: i1$1.LanguageService }, { token: i1$3.UntypedFormBuilder }, { token: DrawStyleService }, { token: i1$5.MatDialog }, { token: DrawIconService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: DrawComponent, isStandalone: true, selector: "igo-draw", inputs: { map: "map", stores: "stores", drawControls: "drawControls", activeDrawingLayer: "activeDrawingLayer" }, outputs: { activeLayerChange: "activeLayerChange", drawControlsEvent: "drawControlsEvent", layersIDEvent: "layersIDEvent", fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["selectedLayer"], descendants: true }], ngImport: i0, template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\"\n      [value]=\"geometryType.Point\"\n    >\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.draw.drawControl' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\"\n    >\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\"\n    >\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <mat-form-field class=\"radius\">\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n          [formControl]=\"radiusFormControl\"\n          [readonly]=\"this.freehandMode\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\n        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div class=\"layer-select-container\">\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\n      <mat-select\n        #selectedLayer\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\n        [value]=\"updateActiveLayer()\"\n      >\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\">\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        activeDrawingLayer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\n    >\n      <mat-icon>\n        {{ activeDrawingLayer.visible ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\"\n      >\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\" />\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\n          'igo.geo.draw.noIcon' | translate\n        }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\"\n        >\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\" />\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"actions-container\">\n    <button\n      mat-icon-button\n      color=\"accent\"\n      disableRipple=\"true\"\n      (click)=\"openShorcutsDialog()\"\n    >\n      <mat-icon\n        class=\"shortcuts-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n        >keyboard\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectedFeatures$.value.length\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"openStyleModalDialog()\"\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\n    >\n      {{ 'igo.geo.style.styleModal' | translate }}\n      <mat-icon\n        aria-hidden=\"false\"\n        iconPositionEnd\n        class=\"style-icon\"\n        [matBadge]=\"selectedFeatures$.value.length\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        >palette\n      </mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: DrawComponent, isStandalone: true, selector: "igo-draw", inputs: { map: "map", stores: "stores", drawControls: "drawControls", activeDrawingLayer: "activeDrawingLayer" }, outputs: { activeLayerChange: "activeLayerChange", drawControlsEvent: "drawControlsEvent", layersIDEvent: "layersIDEvent", fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, providers: [
+            {
+                provide: MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
+                useValue: {
+                    hideSingleSelectionIndicator: true
+                }
+            }
+        ], viewQueries: [{ propertyName: "select", first: true, predicate: ["selectedLayer"], descendants: true }], ngImport: i0, template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\"\n      [value]=\"geometryType.Point\"\n    >\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.draw.drawControl' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\"\n    >\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\"\n    >\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <mat-form-field class=\"radius\">\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n          [formControl]=\"radiusFormControl\"\n          [readonly]=\"this.freehandMode\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\n        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div class=\"layer-select-container\">\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\n      <mat-select\n        #selectedLayer\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\n        [value]=\"updateActiveLayer()\"\n      >\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\">\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        activeDrawingLayer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\n    >\n      <mat-icon>\n        {{ activeDrawingLayer.visible ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\"\n      >\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\" />\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\n          'igo.geo.draw.noIcon' | translate\n        }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\"\n        >\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\" />\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"actions-container\">\n    <button\n      mat-icon-button\n      color=\"accent\"\n      disableRipple=\"true\"\n      (click)=\"openShorcutsDialog()\"\n    >\n      <mat-icon\n        class=\"shortcuts-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n        >keyboard\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectedFeatures$.value.length\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"openStyleModalDialog()\"\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\n    >\n      {{ 'igo.geo.style.styleModal' | translate }}\n      <mat-icon\n        aria-hidden=\"false\"\n        iconPositionEnd\n        class=\"style-icon\"\n        [matBadge]=\"selectedFeatures$.value.length\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        >palette\n      </mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], animations: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -22861,6 +22895,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         MatBadgeModule,
                         AsyncPipe,
                         IgoLanguageModule
+                    ], providers: [
+                        {
+                            provide: MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
+                            useValue: {
+                                hideSingleSelectionIndicator: true
+                            }
+                        }
                     ], template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\"\n      [value]=\"geometryType.Point\"\n    >\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.draw.drawControl' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\"\n    >\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\"\n    >\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <mat-form-field class=\"radius\">\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n          [formControl]=\"radiusFormControl\"\n          [readonly]=\"this.freehandMode\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\n        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div class=\"layer-select-container\">\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\n      <mat-select\n        #selectedLayer\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\n        [value]=\"updateActiveLayer()\"\n      >\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\">\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        activeDrawingLayer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\n    >\n      <mat-icon>\n        {{ activeDrawingLayer.visible ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\"\n      >\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\" />\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\n          'igo.geo.draw.noIcon' | translate\n        }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\"\n        >\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\" />\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"actions-container\">\n    <button\n      mat-icon-button\n      color=\"accent\"\n      disableRipple=\"true\"\n      (click)=\"openShorcutsDialog()\"\n    >\n      <mat-icon\n        class=\"shortcuts-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n        >keyboard\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectedFeatures$.value.length\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"openStyleModalDialog()\"\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\n    >\n      {{ 'igo.geo.style.styleModal' | translate }}\n      <mat-icon\n        aria-hidden=\"false\"\n        iconPositionEnd\n        class=\"style-icon\"\n        [matBadge]=\"selectedFeatures$.value.length\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        >palette\n      </mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.LanguageService }, { type: i1$3.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1$5.MatDialog }, { type: DrawIconService }], propDecorators: { map: [{
                 type: Input
@@ -34940,7 +34981,7 @@ class StyleModalLayerComponent {
         this.dialogRef.disableClose = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: StyleModalLayerComponent, deps: [{ token: i1$5.MatDialogRef }, { token: i1$3.UntypedFormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: StyleModalLayerComponent, isStandalone: true, selector: "igo-style-modal-layer", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edition-drawing mat-typography\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div\n        class=\"fill-color-picker mat-typography\"\n        *ngIf=\"linestringOnly !== true\"\n      >\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">format_color_fill</mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n          (colorChange)=\"setLayerFillColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">border_color</mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: StyleModalLayerComponent, isStandalone: true, selector: "igo-style-modal-layer", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edit-colorpicker\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div class=\"color-picker\">\n        <ng-container *ngIf=\"linestringOnly !== true\">\n          <span>\n            <mat-icon class=\"stroke-palette-icon\">format_color_fill</mat-icon>\n            {{ 'igo.geo.style.fill' | translate }}\n          </span>\n\n          <igo-color-picker-form-field\n            formControlName=\"fill\"\n            (colorChange)=\"setLayerFillColor($event)\"\n          ></igo-color-picker-form-field>\n        </ng-container>\n\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">border_color</mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}.color-picker span{display:flex;align-items:center}.color-picker span mat-icon{margin-right:8px}.edit-colorpicker{padding:10px 0}button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: StyleModalLayerComponent, decorators: [{
             type: Component,
@@ -34955,7 +34996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         MatDialogActions,
                         MatButtonModule,
                         IgoLanguageModule
-                    ], template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edition-drawing mat-typography\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div\n        class=\"fill-color-picker mat-typography\"\n        *ngIf=\"linestringOnly !== true\"\n      >\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">format_color_fill</mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n          (colorChange)=\"setLayerFillColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">border_color</mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
+                    ], template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edit-colorpicker\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div class=\"color-picker\">\n        <ng-container *ngIf=\"linestringOnly !== true\">\n          <span>\n            <mat-icon class=\"stroke-palette-icon\">format_color_fill</mat-icon>\n            {{ 'igo.geo.style.fill' | translate }}\n          </span>\n\n          <igo-color-picker-form-field\n            formControlName=\"fill\"\n            (colorChange)=\"setLayerFillColor($event)\"\n          ></igo-color-picker-form-field>\n        </ng-container>\n\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">border_color</mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}.color-picker span{display:flex;align-items:center}.color-picker span mat-icon{margin-right:8px}.edit-colorpicker{padding:10px 0}button{margin-right:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: i1$3.UntypedFormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]