@igo2/geo 1.13.0-alpha.0 → 1.13.0-alpha.1

package/fesm2020/igo2-geo.mjs

@@ -105,7 +105,7 @@ import { MAT_DATE_LOCALE, MatOptionModule, MatNativeDateModule } from '@angular/
 import * as i13 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i16 from '@angular/forms';
-import { FormsModule, Validators, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { FormsModule, Validators, ReactiveFormsModule, FormControl } from '@angular/forms';
 import * as i15 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i12 from '@angular/material/checkbox';
@@ -15728,7 +15728,7 @@ class AddCatalogDialogComponent {
         this.dialogRef.close();
     }
 }
-AddCatalogDialogComponent.ɵfac = function AddCatalogDialogComponent_Factory(t) { return new (t || AddCatalogDialogComponent)(i0.ɵɵdirectiveInject(i16.UntypedFormBuilder), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i3.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA, 8)); };
+AddCatalogDialogComponent.ɵfac = function AddCatalogDialogComponent_Factory(t) { return new (t || AddCatalogDialogComponent)(i0.ɵɵdirectiveInject(i16.FormBuilder), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i3.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA, 8)); };
 AddCatalogDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddCatalogDialogComponent, selectors: [["igo-add-catalog-dialog"]], decls: 34, vars: 25, consts: [["mat-dialog-title", "", 1, "mat-typography"], ["mat-dialog-content", "", 1, "mat-typography"], [1, "igo-form", 3, "formGroup"], [1, "igo-input-container"], ["type", "text", "formControlName", "title", "matInput", "", 3, "placeholder", "matAutocomplete"], [3, "optionSelected"], ["auto2", "matAutocomplete"], ["matTooltipShowDelay", "500", 3, "matTooltip", "value", 4, "ngFor", "ngForOf"], ["type", "text", "formControlName", "url", "placeholder", "URL", "matInput", "", 3, "matAutocomplete"], ["auto", "matAutocomplete"], ["formControlName", "type", "placeholder", "Type"], [3, "value", "click", 4, "ngFor", "ngForOf"], [4, "ngIf"], ["mat-dialog-actions", "", 2, "justify-content", "center"], [1, "igo-form-button-group", "add-catalog-button-top-padding"], ["mat-raised-button", "", "type", "button", 3, "click"], ["id", "addCatalogBtnDialog", "mat-raised-button", "", "type", "button", "color", "primary", 3, "disabled", "click"], ["matTooltipShowDelay", "500", 3, "matTooltip", "value"], [3, "value", "click"], ["mat-line", ""], [1, "error"]], template: function AddCatalogDialogComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "h1", 0);
         i0.ɵɵtext(1);
@@ -15797,7 +15797,7 @@ AddCatalogDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddCatalogDialogComponent, [{
         type: Component,
         args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.geo.catalog.library.addTitle' | translate}}</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input type=\"text\" formControlName=\"title\" placeholder=\"{{'igo.geo.printForm.title' | translate}}\" matInput [matAutocomplete]=\"auto2\">\r\n        <mat-autocomplete #auto2=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\r\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.title\" [value]=\"predefinedCatalog\">\r\n            {{predefinedCatalog.title}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input type=\"text\" formControlName=\"url\" placeholder=\"URL\" matInput [matAutocomplete]=\"auto\">\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\r\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.url\" [value]=\"predefinedCatalog\">\r\n            {{predefinedCatalog.url}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <mat-select\r\n          formControlName=\"type\"\r\n          placeholder=\"Type\">\r\n          <mat-option\r\n            *ngFor=\"let type of typeCapabilities\"\r\n            [value]=\"type\"\r\n            (click)=\"$event.stopPropagation()\">\r\n              <p mat-line>{{type}}</p>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\r\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.externalProvider.unavailableWithEmail', { value: addedCatalog.url, email: emailAddress })}}</p>\r\n  </span>\r\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\r\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.unavailable', { value: addedCatalog.url })}}</p>\r\n  </span>\r\n</div>\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"cancel()\">\r\n      {{'igo.geo.catalog.library.cancel' | translate}}\r\n    </button>\r\n    <button\r\n      id=\"addCatalogBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      [disabled]=\"!form.valid\"\r\n      (click)=\"addCatalog(form.value)\">\r\n      {{'igo.geo.catalog.library.add' | translate}}\r\n    </button>\r\n  </div>\r\n</div>", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
-    }], function () { return [{ type: i16.UntypedFormBuilder }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i16.FormBuilder }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Optional
             }, {
                 type: Inject,
@@ -19136,7 +19136,7 @@ class DrawComponent {
         return Object.values(FontType);
     }
 }
-DrawComponent.ɵfac = function DrawComponent_Factory(t) { return new (t || DrawComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i16.UntypedFormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(i3.MatDialog), i0.ɵɵdirectiveInject(DrawIconService)); };
+DrawComponent.ɵfac = function DrawComponent_Factory(t) { return new (t || DrawComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i16.FormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(i3.MatDialog), i0.ɵɵdirectiveInject(DrawIconService)); };
 DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], inputs: { fontType: "fontType", map: "map", store: "store" }, outputs: { fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, decls: 71, vars: 87, consts: [[1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [1, "draw-options", "mat-typography"], [3, "disabled", "checked", "labelPosition", "change"], [3, "checked", "labelPosition", "change"], [1, "igo-form", 3, "formGroup"], [1, "fill-color-picker", "mat-typography"], ["svgIcon", "square", 1, "stroke-palette-icon"], ["appearance", "outline", "floatLabel", "always", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "fill-field", 3, "matTooltip"], ["formControlName", "fill", "matInput", "", "type", "text", 3, "colorPicker", "readonly", "cpWidth", "cpOutputFormat", "cpPosition", "cpPositionOffset", "cpCancelButton", "cpCancelButtonText", "cpOKButton", "colorPickerChange"], [1, "stroke-color-picker", "mat-typography"], ["svgIcon", "square-outline", 1, "stroke-palette-icon"], ["appearance", "outline", "floatLabel", "always", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "stroke-field", 3, "matTooltip"], ["formControlName", "stroke", "matInput", "", "type", "text", 3, "colorPicker", "readonly", "cpWidth", "cpPosition", "cpPositionOffset", "cpOutputFormat", "cpCancelButton", "cpCancelButtonText", "cpOKButton", "colorPickerChange"], [4, "ngIf"], [1, "igo-form-font"], ["appearance", "outline", 1, "igo-form-fontSize"], ["matInput", "", "type", "number", "placeholder", "10", "min", "10", "onkeydown", "return event.keyCode !== 69", 3, "value", "input"], ["testFontSize", ""], ["matSuffix", ""], ["appearance", "outline", 1, "igo-form-fontStyle"], [3, "value", "selectionChange"], ["testFontStyle", ""], [3, "value", 4, "ngFor", "ngForOf"], ["class", "deleteBtn", "mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click", 4, "ngIf"], [1, "table-compact", 3, "store", "template", "dblclick"], ["table", ""], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"]], template: function DrawComponent_Template(rf, ctx) { if (rf & 1) {
         const _r16 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "mat-button-toggle-group", 1);
@@ -19296,7 +19296,7 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawComponent, [{
         type: Component,
         args: [{ selector: 'igo-draw', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Point\">\r\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.LineString\">\r\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\r\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Circle\">\r\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"draw-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\">\r\n      {{ 'igo.geo.spatialFilter.drawControl' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"labelsAreShown\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleLabels()\">\r\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"fill-color-picker mat-typography\">\r\n      <span>\r\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n        {{ 'igo.geo.draw.fill' | translate }}\r\n      </span>\r\n\r\n      <mat-form-field\r\n        class=\"fill-field\"\r\n        appearance=\"outline\"\r\n        floatLabel=\"always\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\r\n        <mat-label>{{ fillColor }}</mat-label>\r\n\r\n        <input\r\n          formControlName=\"fill\"\r\n          matInput\r\n          type=\"text\"\r\n          [(colorPicker)]=\"fillColor\"\r\n          [style.background]=\"fillColor\"\r\n          [readonly]=\"true\"\r\n          [colorPicker]=\"fillColor\"\r\n          [cpWidth]=\"'200px'\"\r\n          [cpOutputFormat]=\"'rgba'\"\r\n          [cpPosition]=\"'bottom'\"\r\n          [cpPositionOffset]=\"'-75%'\"\r\n          [cpCancelButton]=\"true\"\r\n          [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\r\n          [cpOKButton]=\"true\"\r\n          (colorPickerChange)=\"onColorChange(labelsAreShown, false)\"/>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"stroke-color-picker mat-typography\">\r\n      <span>\r\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\"></mat-icon>\r\n        {{ 'igo.geo.draw.stroke' | translate }}\r\n      </span>\r\n\r\n      <mat-form-field\r\n        class=\"stroke-field\"\r\n        appearance=\"outline\"\r\n        floatLabel=\"always\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\r\n        <mat-label>{{ strokeColor }}</mat-label>\r\n        <input\r\n          formControlName=\"stroke\"\r\n          matInput\r\n          type=\"text\"\r\n          [(colorPicker)]=\"strokeColor\"\r\n          [style.background]=\"strokeColor\"\r\n          [readonly]=\"true\"\r\n          [colorPicker]=\"strokeColor\"\r\n          [cpWidth]=\"'200px'\"\r\n          [cpPosition]=\"'bottom'\"\r\n          [cpPositionOffset]=\"'-75%'\"\r\n          [cpOutputFormat]=\"'rgba'\"\r\n          [cpCancelButton]=\"true\"\r\n          [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\r\n          [cpOKButton]=\"true\"\r\n          (colorPickerChange)=\"onColorChange(labelsAreShown, false)\">\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div>\r\n      <mat-form-field *ngIf=\"icons.length >= 1\">\r\n        <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\r\n        <mat-select>\r\n          <mat-select-trigger>\r\n            <div *ngIf=\"icon\" class=\"box\">\r\n              <img src=\"{{ icon }}\">\r\n            </div>\r\n          </mat-select-trigger>\r\n          <mat-option value=\"\" (click)=\"onIconChange()\">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>\r\n          <mat-option\r\n            *ngFor=\"let icon_html of icons\"\r\n            [value]=\"icon_html\"\r\n            (click)=\"onIconChange(icon_html)\">\r\n            <div class=\"box\">\r\n              <img src=\"{{ icon_html }}\">\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n\r\n\r\n  <div class=\"igo-form-font\">\r\n    <mat-form-field appearance=\"outline\" class=\"igo-form-fontSize\">\r\n      <mat-label>{{ 'igo.geo.draw.fontSize' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        #testFontSize\r\n        type=\"number\"\r\n        placeholder=\"10\"\r\n        min=\"10\"\r\n        onkeydown=\"return event.keyCode !== 69\"\r\n        [value]=\"fontSize\"\r\n        (input)=\"\r\n          onFontChange(\r\n            labelsAreShown,\r\n            $event.target.value,\r\n            testFontStyle.value\r\n          )\"\r\n      />\r\n      <span matSuffix>px</span>\r\n    </mat-form-field>\r\n    <mat-form-field appearance=\"outline\" class=\"igo-form-fontStyle\">\r\n      <mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>\r\n      <mat-select\r\n        #testFontStyle\r\n        [value]=\"fontStyle\"\r\n        (selectionChange)=\"onFontChange(labelsAreShown, testFontSize.value, $event.value)\">\r\n        <mat-option\r\n          *ngFor=\"let fontSelect of allFontStyles\"\r\n          [value]=\"fontSelect\">\r\n          {{ fontSelect }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n  <div>\r\n    <button\r\n      *ngIf=\"store.count$.getValue() > 0\"\r\n      class=\"deleteBtn\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      (click)=\"deleteDrawings()\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-entity-table\r\n      #table\r\n      class=\"table-compact\"\r\n      [store]=\"store\"\r\n      [template]=\"tableTemplate\"\r\n      (dblclick)=\"editLabelDrawing()\">\r\n    </igo-entity-table>\r\n  </div>\r\n\r\n  <button\r\n    mat-icon-button\r\n    color=\"accent\"\r\n    disableRipple=\"true\"\r\n    (click)=\"openShorcutsDialog()\">\r\n    <mat-icon\r\n      class=\"shortcuts-icon\"\r\n      svgIcon=\"keyboard-outline\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\">\r\n    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".geometry-type-toggle{padding:10px;text-align:center}.geometry-type-toggle mat-button-toggle-group{width:100%}.geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}.draw-options{overflow-x:hidden}.draw-options mat-slide-toggle{width:100%;margin:10px}.draw-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.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}img{width:100%;height:100%}.deleteBtn{margin-left:12px}.igo-form-font .mat-form-field+.mat-form-field{margin-left:18px}.igo-form-fontSize{left:10px!important;width:150px}.igo-form-fontStyle{width:150px}\n"] }]
-    }], function () { return [{ type: i2$1.LanguageService }, { type: i16.UntypedFormBuilder }, { type: DrawStyleService }, { type: i3.MatDialog }, { type: DrawIconService }]; }, { fillColor: [{
+    }], function () { return [{ type: i2$1.LanguageService }, { type: i16.FormBuilder }, { type: DrawStyleService }, { type: i3.MatDialog }, { type: DrawIconService }]; }, { fillColor: [{
             type: Output
         }], strokeColor: [{
             type: Output
@@ -25930,7 +25930,7 @@ class OgcFilterSelectionComponent {
         }
     }
 }
-OgcFilterSelectionComponent.ɵfac = function OgcFilterSelectionComponent_Factory(t) { return new (t || OgcFilterSelectionComponent)(i0.ɵɵdirectiveInject(OGCFilterService), i0.ɵɵdirectiveInject(i16.UntypedFormBuilder), i0.ɵɵdirectiveInject(i5$1.DOMService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+OgcFilterSelectionComponent.ɵfac = function OgcFilterSelectionComponent_Factory(t) { return new (t || OgcFilterSelectionComponent)(i0.ɵɵdirectiveInject(OGCFilterService), i0.ɵɵdirectiveInject(i16.FormBuilder), i0.ɵɵdirectiveInject(i5$1.DOMService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 OgcFilterSelectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcFilterSelectionComponent, selectors: [["igo-ogc-filter-selection"]], viewQuery: function OgcFilterSelectionComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$6, 5);
     } if (rf & 2) {
@@ -25951,7 +25951,7 @@ OgcFilterSelectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterSelectionComponent, [{
         type: Component,
         args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\r\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\r\n    <div class=\"pushButtonGroups\" *ngIf=\"selector.selectorType === 'pushButton'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"pushButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentPushButtonsGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\r\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <mat-button-toggle-group\r\n          formControlName=\"pushButtons\" class=\"mat-typography\" appearance=\"legacy\" vertical={{bundleIsVertical(bundle)}} multiple=\"true\">\r\n          <mat-button-toggle *ngFor=\"let ogcPushButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcPushButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\r\n            [checked]=\"ogcPushButton.enabled\" (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\r\n            [value]=\"ogcPushButton\">{{ogcPushButton.title}}\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"checkboxesGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentCheckboxesGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\r\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <div class=\"checkboxes mat-typography\">\r\n          <mat-checkbox *ngFor=\"let ogcCheckbox of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcCheckbox)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcCheckbox.enabled\" (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\r\n            [value]=\"ogcCheckbox\">{{ogcCheckbox.title}}\r\n          </mat-checkbox>\r\n        </div>\r\n        <p *ngIf=\"isLessResults(bundle, 'checkbox') || isMoreResults(bundle, 'checkbox')\">\r\n          <u *ngIf=\"isLessResults(bundle, 'checkbox')\"\r\n            class=\"lessResults mat-typography\"\r\n            (click)=\"displayLessResults('checkbox')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n          </u>\r\n          <u *ngIf=\"isMoreResults(bundle, 'checkbox')\"\r\n            class=\"moreResults mat-typography\"\r\n            (click)=\"displayMoreResults('checkbox')\">{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n          </u>\r\n        </p>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"radioButtonGroups\" *ngIf=\"selector.selectorType === 'radioButton'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"radioButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentRadioButtonsGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\r\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <mat-radio-group\r\n          formControlName=\"radioButtons\" class=\"mat-typography\">\r\n          <mat-radio-button *ngIf=\"bundle.unfiltered\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (change)=\"emptyRadioButtons()\">{{ 'igo.geo.filter.resetFilters' | translate }}\r\n          </mat-radio-button>\r\n          <mat-radio-button *ngFor=\"let ogcRadioButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcRadioButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcRadioButton.enabled\" (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\r\n            [value]=\"ogcRadioButton\">{{ogcRadioButton.title}}\r\n          </mat-radio-button>\r\n          <p *ngIf=\"isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\">\r\n            <u *ngIf=\"isLessResults(bundle, 'radio')\"\r\n              class=\"lessResults mat-typography\"\r\n              (click)=\"displayLessResults('radio')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n            </u>\r\n            <u *ngIf=\"isMoreResults(bundle, 'radio')\"\r\n              class=\"moreResults mat-typography\"\r\n              (click)=\"displayMoreResults('radio')\">{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n            </u>\r\n          </p>\r\n        </mat-radio-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"selectGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentSelectGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getSelectGroups()\"\r\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button *ngIf=\"bundle.unfiltered && !bundle.multiple\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptySelect()\">\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field [style.width.%]=\"bundle.width ? bundle.width : undefined\">\r\n            <div *ngIf=\"bundle.multiple; else notMulti\">\r\n              <mat-select\r\n                #selection [multiple]=\"bundle.multiple\" [placeholder]=\"bundle.title\" formControlName=\"selectMulti\">\r\n                <div class=\"checkboxes mat-typography\">\r\n                  <mat-checkbox *ngIf=\"bundle.multiple\"\r\n                    [(ngModel)]=\"selectAllSelected\" [ngModelOptions]=\"{standalone: true}\"\r\n                    (change)=\"toggleAllSelection()\">Tous\r\n                  </mat-checkbox>\r\n                </div>\r\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n                  (onSelectionChange)=\"selectOptionClick($event.source.value, bundle, $event)\"\r\n                  [value]=\"ogcSelect\">{{ogcSelect.title}}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <ng-template #notMulti>\r\n              <mat-select\r\n                [placeholder]=\"bundle.title\" formControlName=\"select\">\r\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n                  [value]=\"ogcSelect\" (onSelectionChange)=\"selectOptionClick($event.source.value, bundle)\">{{ogcSelect.title}}\r\n                </mat-option>\r\n              </mat-select>\r\n            </ng-template>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"autocompleteGroups\" *ngIf=\"selector.selectorType === 'autocomplete'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"autocompleteGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentAutocompleteGroup\">\r\n            <mat-option *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\r\n              [value]=\"autocompleteGroup\">{{autocompleteGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button *ngIf=\"bundle.unfiltered\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptyAutocomplete()\">\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field *ngIf=\"filteredOgcAutocomplete[bundle.id]\" [style.width.%]=\"bundle.width ? bundle.width : undefined\">\r\n            <input matInput type=\"text\" formControlName=\"autocomplete\" #autocomplete class=\"autocomplete\"\r\n              [matAutocomplete]=\"auto\" [placeholder]=\"bundle.title\">\r\n              <mat-autocomplete #auto=\"matAutocomplete\" #autocomplete (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\r\n              [displayWith]=\"displayFn\">\r\n                <mat-option *ngFor=\"let ogcAutocomplete of filteredOgcAutocomplete[bundle.id] | async\" [value]=\"ogcAutocomplete\">\r\n                  {{ ogcAutocomplete.value }}\r\n                </mat-option>\r\n              </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<div *ngIf=\"isTemporalOperator()\">\r\n  <mat-divider></mat-divider>\r\n  <h4 *ngIf=\"!currentFilter.title\">{{ 'igo.geo.filter.reportingDate' | translate }}</h4>\r\n  <h4 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h4>\r\n  <igo-ogc-filter-time\r\n    [(datasource)]=\"datasource\"\r\n    [(currentFilter)]=\"currentFilter\"\r\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\">\r\n  </igo-ogc-filter-time>\r\n</div>", styles: [".mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none}.checkboxes{flex-wrap:wrap;box-shadow:none}.groupsSelector{text-align:center}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:150px}mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:inherit;font-size:small;display:block}::ng-deep .material-tooltip{white-space:pre-wrap}mat-checkbox,mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}mat-checkbox ::ng-deep label,mat-radio-button ::ng-deep label{white-space:normal}mat-checkbox{vertical-align:middle}mat-button{padding-right:10px;cursor:pointer}h4{margin:7px;text-align:left}u{cursor:pointer;color:#00f;margin:5px}p{margin:0;margin:initial}\n"] }]
-    }], function () { return [{ type: OGCFilterService }, { type: i16.UntypedFormBuilder }, { type: i5$1.DOMService }, { type: i2$1.ConfigService }, { type: i0.ChangeDetectorRef }]; }, { sel: [{
+    }], function () { return [{ type: OGCFilterService }, { type: i16.FormBuilder }, { type: i5$1.DOMService }, { type: i2$1.ConfigService }, { type: i0.ChangeDetectorRef }]; }, { sel: [{
             type: ViewChild,
             args: ['selection']
         }], refreshFilters: [{
@@ -25987,7 +25987,7 @@ function SpatialFilterTypeComponent_mat_option_8_Template(rf, ctx) { if (rf & 1)
 class SpatialFilterTypeComponent {
     constructor() {
         this.queryType = ['Arrond', 'CircFed', 'CircProv', 'DirReg', 'Mun', 'MRC', 'AdmRegion', 'RegTour'];
-        this.selectedTypeIndex = new UntypedFormControl(0);
+        this.selectedTypeIndex = new FormControl(0);
         /**
          * Reference to the SpatialFIlterType enum
          * @internal
@@ -26138,8 +26138,8 @@ class SpatialFilterListComponent {
         this.languageService = languageService;
         this.layers = [];
         this.measureUnit = MeasureLengthUnit.Meters;
-        this.formControl = new UntypedFormControl();
-        this.bufferFormControl = new UntypedFormControl();
+        this.formControl = new FormControl();
+        this.bufferFormControl = new FormControl();
         this.zoneChange = new EventEmitter();
         this.zoneWithBufferChange = new EventEmitter();
         this.bufferChange = new EventEmitter();
@@ -26595,7 +26595,7 @@ class SpatialFilterItemComponent {
         this.drawGuide$ = new BehaviorSubject(null);
         this.overlayStyle$ = new BehaviorSubject(undefined);
         this.drawStyle$ = new BehaviorSubject(undefined);
-        this.formControl = new UntypedFormControl();
+        this.formControl = new FormControl();
         this.geometryTypeField = false;
         this.geometryTypes = ['Point', 'Polygon'];
         this.drawGuideField = false;
@@ -26605,8 +26605,8 @@ class SpatialFilterItemComponent {
         this.drawControlIsActive = true;
         this.freehandDrawIsActive = false;
         this.buffer = 0;
-        this.radiusFormControl = new UntypedFormControl();
-        this.bufferFormControl = new UntypedFormControl();
+        this.radiusFormControl = new FormControl();
+        this.bufferFormControl = new FormControl();
         this.measureUnit = MeasureLengthUnit.Meters;
         this.listIsVisible = true;
     }
@@ -27672,10 +27672,10 @@ class OgcFilterTimeComponent {
     constructor(ogcFilterTimeService) {
         this.ogcFilterTimeService = ogcFilterTimeService;
         this.changeProperty = new EventEmitter();
-        this.beginHourFormControl = new UntypedFormControl();
-        this.beginMinuteFormControl = new UntypedFormControl();
-        this.endHourFormControl = new UntypedFormControl();
-        this.endMinuteFormControl = new UntypedFormControl();
+        this.beginHourFormControl = new FormControl();
+        this.beginMinuteFormControl = new FormControl();
+        this.endHourFormControl = new FormControl();
+        this.endMinuteFormControl = new FormControl();
         this._defaultMin = '1900-01-01';
         this._defaultMax = '2052-01-06';
         this._defaultDisplayFormat = 'DD/MM/YYYY HH:mm A';
@@ -30510,7 +30510,7 @@ class ImportExportComponent {
         this.selectedMode = event.value;
     }
 }
-ImportExportComponent.ɵfac = function ImportExportComponent_Factory(t) { return new (t || ImportExportComponent)(i0.ɵɵdirectiveInject(ImportService), i0.ɵɵdirectiveInject(ExportService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(StyleListService), i0.ɵɵdirectiveInject(StyleService), i0.ɵɵdirectiveInject(i16.UntypedFormBuilder), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$1.StorageService), i0.ɵɵdirectiveInject(DownloadService)); };
+ImportExportComponent.ɵfac = function ImportExportComponent_Factory(t) { return new (t || ImportExportComponent)(i0.ɵɵdirectiveInject(ImportService), i0.ɵɵdirectiveInject(ExportService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(StyleListService), i0.ɵɵdirectiveInject(StyleService), i0.ɵɵdirectiveInject(i16.FormBuilder), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$1.StorageService), i0.ɵɵdirectiveInject(DownloadService)); };
 ImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ImportExportComponent, selectors: [["igo-import-export"]], inputs: { selectFirstProj: "selectFirstProj", map: "map", projectionsLimitations: "projectionsLimitations", store: "store", selectedMode: "selectedMode", exportOptions$: "exportOptions$" }, outputs: { selectMode: "selectMode", exportOptionsChange: "exportOptionsChange" }, decls: 14, vars: 17, consts: [[1, "import-export-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], ["class", "igo-form", 3, "formGroup", 4, "ngIf"], ["class", "mat-typography", 4, "ngIf"], [1, "igo-form", 3, "formGroup"], [1, "igo-input-container"], [3, "value", "valueChange"], [3, "value", "click", 4, "ngFor", "ngForOf"], ["tooltip-position", "below", "matTooltipShowDelay", "500", 1, "igo-form-button-group", 3, "matTooltip"], ["mat-raised-button", "", "type", "button", 3, "disabled", "click"], [3, "shown"], ["hidden", "", "type", "file", 3, "click", "change"], ["fileInput", ""], [3, "value", "click"], ["mat-line", "", 4, "ngIf"], ["mat-line", ""], [1, "mat-typography"], ["multiple", "", 3, "value", "valueChange"], ["class", "export-select-trigger", 4, "ngIf"], [3, "ngClass", "value", "click", 4, "ngFor", "ngForOf"], ["formControlName", "format"], [4, "ngIf"], ["disabled", "true", 4, "ngIf"], ["class", "igo-input-container", 4, "ngIf"], ["class", "export-combine-layers mat-typography", 4, "ngIf"], ["class", "export-separator mat-typography", 4, "ngIf"], ["class", "export-options mat-typography", 4, "ngIf"], [1, "igo-form-button-group"], [1, "export-select-trigger"], [3, "ngClass", "value", "click"], [3, "labelPosition", "click", "checked", "change", 4, "ngIf"], [3, "labelPosition", "click", "checked", "change"], [3, "value", 4, "ngFor", "ngForOf"], ["disabled", "true"], ["matInput", "", "formControlName", "name", 3, "placeholder"], ["formControlName", "encoding"], [1, "export-combine-layers", "mat-typography"], ["formControlName", "combineLayers", 3, "labelPosition"], [1, "export-separator", "mat-typography"], ["formControlName", "separator", 3, "labelPosition"], [1, "export-options", "mat-typography"], ["formControlName", "featureInMapExtent", 3, "labelPosition"]], template: function ImportExportComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "mat-button-toggle-group", 1);
         i0.ɵɵlistener("change", function ImportExportComponent_Template_mat_button_toggle_group_change_1_listener($event) { return ctx.onImportExportChange($event); });
@@ -30551,7 +30551,7 @@ ImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Impor
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportExportComponent, [{
         type: Component,
         args: [{ selector: 'igo-import-export', template: "<div class=\"import-export-toggle mat-typography\">\r\n  <mat-button-toggle-group\r\n        [value]=\"selectedMode\"\r\n        (change)=\"onImportExportChange($event)\">\r\n        <mat-button-toggle [value]=\"'import'\">\r\n          {{'igo.geo.importExportForm.importTabTitle' | translate}}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"'export'\">\r\n          {{'igo.geo.importExportForm.exportTabTitle' | translate}}\r\n        </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<form class=\"igo-form\" [formGroup]=\"importForm\" *ngIf=\"selectedMode === 'import'\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.importProjPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        [(value)]=\"inputProj\">\r\n        <mat-option\r\n          *ngFor=\"let projection of (projections$ | async)\"\r\n          [value]=\"projection\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <p mat-line *ngIf=\"projection.translateKey\">{{('igo.geo.importExportForm.projections.' + projection.translateKey) | translate: projection}}</p>\r\n          <p mat-line *ngIf=\"!projection.translateKey\">{{projection.alias}}</p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"importForm.invalid ? ('igo.geo.importExportForm.projections.choose' | translate) : ('igo.geo.importExportForm.importButton' | translate)\"\r\n    class=\"igo-form-button-group\">\r\n    <button\r\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"fileInput.click()\">\r\n        {{'igo.geo.importExportForm.importButton' | translate}}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n    <input\r\n      hidden\r\n      #fileInput\r\n      type=\"file\"\r\n      [style.display]=\"'none'\"\r\n      (click)=\"fileInput.value = null\"\r\n      (change)=\"importFiles($event.target.files)\">\r\n  </div>\r\n</form>\r\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\r\n  <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>\r\n  <ul>\r\n    <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\r\n    <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>\r\n    <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>\r\n  </ul>\r\n</section>\r\n\r\n<section class=\"mat-typography\" *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\">\r\n  <h4>{{'igo.geo.importExportForm.exportNoLayersExportable' | translate}}</h4>\r\n</section>\r\n\r\n<form class=\"igo-form\" [formGroup]=\"form\" *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.exportLayerPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        [(value)]=\"layers\" multiple>\r\n        <mat-select-trigger>\r\n          {{layers.length ? getLayerTitleById(layers[0]) : ''}}\r\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\r\n            (+{{layers.length - 1}} {{(layers?.length === 2 ? 'igo.geo.importExportForm.other' : 'igo.geo.importExportForm.others') | translate }})\r\n          </span>\r\n        </mat-select-trigger>\r\n        <mat-option\r\n          *ngFor=\"let layer of (exportableLayers$ | async)\"\r\n          [ngClass]=\"{'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)}\"\r\n          [value]=\"layer.id\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <p mat-line>{{layer.title}}</p>\r\n          <p mat-line>\r\n            <mat-slide-toggle *ngIf=\"layerHasSelectedFeatures(layer)\"\r\n              [labelPosition]=\"'after'\"\r\n              (click)=\"onlySelectedClick($event,layer.id)\"\r\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\r\n              (change)=\"onlySelected($event,layer.id)\">\r\n              <small>{{'igo.geo.importExportForm.exportSelectedFeature' | translate}}</small>\r\n            </mat-slide-toggle>\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.exportFormatPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        formControlName=\"format\">\r\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\r\n          <mat-option *ngFor=\"let format of (formats$ | async) | keyvalue\" [value]=\"format.key\">\r\n            {{'igo.geo.export.format.' + format.value | translate}}\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\r\n          {{'igo.geo.export.noFormat.title' | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" *ngIf=\"forceNaming && form.value.format !== 'URL'\">\r\n    <mat-form-field>\r\n        <input matInput formControlName=\"name\" placeholder=\"{{'igo.geo.importExportForm.exportFileNamePlaceholder' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" *ngIf=\"form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.encodingPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        formControlName=\"encoding\">\r\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\r\n          <mat-option *ngFor=\"let encoding of (encodings$ | async) | keyvalue\" [value]=\"encoding.key\">\r\n            {{'igo.geo.export.encoding.' + encoding.value | translate}}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"export-combine-layers mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\">\r\n    <mat-slide-toggle\r\n        formControlName=\"combineLayers\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportCombineResults' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"export-separator mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon') && form.value.combineLayers\">\r\n    <mat-slide-toggle\r\n        formControlName=\"separator\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportSeparator' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"export-options mat-typography\" *ngIf=\"form.value.format !== 'URL'\">\r\n    <mat-slide-toggle\r\n        formControlName=\"featureInMapExtent\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportFeatureInExtent' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (loading$ | async)\"\r\n      (click)=\"handleExportFormSubmit(form.value)\">\r\n      {{form.value.format !== 'URL'  ? ('igo.geo.importExportForm.exportButton' | translate): (form.value.layers.length > 1  ? ('igo.geo.importExportForm.exportButtonLinks' | translate): ('igo.geo.importExportForm.exportButtonLink' | translate))}}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n  </div>\r\n\r\n</form>\r\n", styles: ["mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}.import-export-toggle{padding:10px;text-align:center}.import-export-toggle mat-button-toggle-group{width:100%}.import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}h4{padding:0 5px}.igo-form{padding:15px 5px}.igo-input-container mat-form-field{width:100%}.igo-form-button-group{text-align:center;padding-top:10px}igo-spinner{position:absolute;padding-left:10px}.export-options,.export-combine-layers,.export-separator{overflow-x:hidden}.export-options mat-slide-toggle,.export-combine-layers mat-slide-toggle,.export-separator mat-slide-toggle{width:100%;margin:10px}.export-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-combine-layers mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-separator mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
-    }], function () { return [{ type: ImportService }, { type: ExportService }, { type: i2$1.LanguageService }, { type: i2$1.MessageService }, { type: StyleListService }, { type: StyleService }, { type: i16.UntypedFormBuilder }, { type: i2$1.ConfigService }, { type: i0.ChangeDetectorRef }, { type: i2$1.StorageService }, { type: DownloadService }]; }, { selectFirstProj: [{
+    }], function () { return [{ type: ImportService }, { type: ExportService }, { type: i2$1.LanguageService }, { type: i2$1.MessageService }, { type: StyleListService }, { type: StyleService }, { type: i16.FormBuilder }, { type: i2$1.ConfigService }, { type: i0.ChangeDetectorRef }, { type: i2$1.StorageService }, { type: DownloadService }]; }, { selectFirstProj: [{
             type: Input
         }], map: [{
             type: Input
@@ -32252,7 +32252,7 @@ class PrintFormComponent {
         }
     }
 }
-PrintFormComponent.ɵfac = function PrintFormComponent_Factory(t) { return new (t || PrintFormComponent)(i0.ɵɵdirectiveInject(i16.UntypedFormBuilder)); };
+PrintFormComponent.ɵfac = function PrintFormComponent_Factory(t) { return new (t || PrintFormComponent)(i0.ɵɵdirectiveInject(i16.FormBuilder)); };
 PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFormComponent, selectors: [["igo-print-form"]], inputs: { disabled$: "disabled$", imageFormat: "imageFormat", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", resolution: "resolution", legendPosition: "legendPosition", title: "title", subtitle: "subtitle", comment: "comment", showProjection: "showProjection", showScale: "showScale", showLegend: "showLegend", doZipFile: "doZipFile" }, outputs: { submit: "submit" }, decls: 65, vars: 72, consts: [[1, "igo-form", 3, "formGroup"], [1, "igo-input-container"], ["matInput", "", "formControlName", "title", 3, "placeholder"], ["matInput", "", "formControlName", "subtitle", 3, "placeholder"], ["matInput", "", "formControlName", "comment", 3, "placeholder"], [1, "print-slide-toggle-container", "mat-typography"], ["formControlName", "showProjection", 1, "print-option", 3, "labelPosition"], ["formControlName", "showScale", 1, "print-option", 3, "labelPosition"], ["formControlName", "doZipFile", 1, "print-option", 3, "labelPosition"], ["formControlName", "legendPosition", 3, "placeholder"], [3, "value", 4, "ngFor", "ngForOf"], ["formControlName", "outputFormat", 3, "placeholder", "selectionChange"], ["formControlName", "paperFormat", 3, "placeholder"], ["formControlName", "imageFormat", 3, "placeholder"], [1, "igo-input-container", 2, "display", "none"], ["formControlName", "resolution", 3, "placeholder"], ["formControlName", "orientation", 3, "placeholder"], [1, "igo-form-button-group", "print-button-top-padding"], ["mat-raised-button", "", "type", "button", 3, "disabled", "click"], [3, "value"]], template: function PrintFormComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "form", 0)(1, "div", 1)(2, "mat-form-field");
         i0.ɵɵelement(3, "input", 2);
@@ -32374,7 +32374,7 @@ PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFor
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintFormComponent, [{
         type: Component,
         args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"title\"\r\n        placeholder=\"{{'igo.geo.printForm.title' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"subtitle\"\r\n        placeholder=\"{{'igo.geo.printForm.subtitle' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"comment\"\r\n        placeholder=\"{{'igo.geo.printForm.comment' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <div class=\"print-slide-toggle-container mat-typography\">\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showProjection\"\r\n        [labelPosition]=\"'before'\">\r\n        {{'igo.geo.printForm.showProjection' | translate}}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showScale\"\r\n        [labelPosition]=\"'before'\">\r\n        {{'igo.geo.printForm.showScale' | translate}}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"doZipFile\"\r\n        [labelPosition]=\"'before'\"\r\n        [style.display]=\"isPrintService ? 'none' : ''\">\r\n        {{'igo.geo.printForm.doZipFile' | translate}}\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"legendPosition\"\r\n        placeholder=\"{{'igo.geo.printForm.legendPosition' | translate}}\">\r\n        <mat-option *ngFor=\"let legendPosition of legendPositions | keyvalue \" [value]=\"legendPosition.key\">\r\n            {{'igo.geo.printForm.legendPositions.' + legendPosition.value | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-select (selectionChange)=\"toggleImageSaveProp()\"\r\n        formControlName=\"outputFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.outputFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let outputFormat of outputFormats | keyvalue \" [value]=\"outputFormat.key\">\r\n            {{outputFormat.value}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"paperFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.paperFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let paperFormat of paperFormats | keyvalue \" [value]=\"paperFormat.key\">\r\n          {{('igo.geo.printForm.paperFormats.' + paperFormat.value) | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'none' : 'block'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"imageFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.imageFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let imageFormat of imageFormats | keyvalue \" [value]=\"imageFormat.key\">\r\n          {{imageFormat.value}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" style=\"display: none;\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{'igo.geo.printForm.resolution' | translate}}\">\r\n        <mat-option *ngFor=\"let resolution of resolutions | keyvalue \" [value]=\"resolution.key\">\r\n          {{resolution.value + ' PPI'}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"orientation\"\r\n        placeholder=\"{{'igo.geo.printForm.orientation' | translate}}\">\r\n        <mat-option *ngFor=\"let orientation of orientations | keyvalue \" [value]=\"orientation.key\">\r\n          {{('igo.geo.printForm.' + orientation.value) | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group print-button-top-padding\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (disabled$ | async)\"\r\n      (click)=\"handleFormSubmit(form.value, form.valid)\">\r\n      {{'igo.geo.printForm.saveBtn' | translate}}\r\n    </button>\r\n  </div>\r\n\r\n</form>\r\n", styles: ["mat-form-field{width:100%}.print-slide-toggle-container{overflow-x:hidden}.print-slide-toggle-container mat-slide-toggle{width:100%;margin:10px}.print-slide-toggle-container mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}\n"] }]
-    }], function () { return [{ type: i16.UntypedFormBuilder }]; }, { disabled$: [{
+    }], function () { return [{ type: i16.FormBuilder }]; }, { disabled$: [{
             type: Input
         }], imageFormat: [{
             type: Input