@igo2/geo 1.13.2 → 1.13.3

package/fesm2015/igo2-geo.mjs

@@ -116,7 +116,7 @@ import * as i14 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i7$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i15$1 from '@angular/material/slide-toggle';
+import * as i23 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i13$1 from '@angular/material/slider';
 import { MatSliderModule, MatSlider } from '@angular/material/slider';
@@ -3021,6 +3021,7 @@ class WMSDataSource extends DataSource {
         }
         const filterQueryString = ogcFilterWriter.handleOgcFiltersAppliedValue(options, fieldNameGeometry);
         sourceParams.FILTER = filterQueryString;
+        this.ol.updateParams({ 'FILTER': sourceParams.FILTER });
         this.setOgcFilters(initOgcFilters, true);
         const timeFilterableDataSourceOptions = options;
         if ((timeFilterableDataSourceOptions === null || timeFilterableDataSourceOptions === void 0 ? void 0 : timeFilterableDataSourceOptions.timeFilterable) &&
@@ -8346,7 +8347,7 @@ class IgoMap {
     }
 }
 
-const _c0$l = ["*"];
+const _c0$m = ["*"];
 class MapBrowserComponent {
     constructor(activityService) {
         this.activityService = activityService;
@@ -8392,7 +8393,7 @@ class MapBrowserComponent {
     }
 }
 MapBrowserComponent.ɵfac = function MapBrowserComponent_Factory(t) { return new (t || MapBrowserComponent)(i0.ɵɵdirectiveInject(i2$1.ActivityService)); };
-MapBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapBrowserComponent, selectors: [["igo-map-browser"]], inputs: { map: "map", view: "view" }, ngContentSelectors: _c0$l, decls: 2, vars: 1, consts: [[1, "igo-map-browser-target", 3, "id"]], template: function MapBrowserComponent_Template(rf, ctx) {
+MapBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapBrowserComponent, selectors: [["igo-map-browser"]], inputs: { map: "map", view: "view" }, ngContentSelectors: _c0$m, decls: 2, vars: 1, consts: [[1, "igo-map-browser-target", 3, "id"]], template: function MapBrowserComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelement(0, "div", 0);
@@ -9231,7 +9232,7 @@ function computeProjectionsConstraints(projectionsLimitations) {
     return projectionsConstraints;
 }
 
-const _c0$k = function (a0) { return { zoom: a0 }; };
+const _c0$l = function (a0) { return { zoom: a0 }; };
 class ZoomButtonComponent {
     constructor() { }
     get zoom() { return this.map.viewController.getZoom(); }
@@ -9254,9 +9255,9 @@ ZoomButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ZoomBut
         }
         if (rf & 2) {
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.zoomIn", i0.ɵɵpureFunction1(12, _c0$k, ctx.zoom + 1)))("color", ctx.color)("disabled", ctx.zoom >= ctx.maxZoom);
+            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.zoomIn", i0.ɵɵpureFunction1(12, _c0$l, ctx.zoom + 1)))("color", ctx.color)("disabled", ctx.zoom >= ctx.maxZoom);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(5, 9, "igo.geo.mapButtons.zoomOut", i0.ɵɵpureFunction1(14, _c0$k, ctx.zoom - 1)))("color", ctx.color)("disabled", ctx.zoom <= ctx.minZoom);
+            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(5, 9, "igo.geo.mapButtons.zoomOut", i0.ɵɵpureFunction1(14, _c0$l, ctx.zoom - 1)))("color", ctx.color)("disabled", ctx.zoom <= ctx.minZoom);
         }
     }, dependencies: [i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: [".igo-zoom-button-container[_ngcontent-%COMP%]{width:40px}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{background-color:#fff}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background-color:#efefef}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:first-child{margin-bottom:2px}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () {
@@ -9467,7 +9468,7 @@ HomeExtentButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: H
             }] });
 })();
 
-const _c0$j = function (a0) { return [a0]; };
+const _c0$k = function (a0) { return [a0]; };
 function OfflineButtonComponent_div_0_Template(rf, ctx) {
     if (rf & 1) {
         const _r2 = i0.ɵɵgetCurrentView();
@@ -9481,7 +9482,7 @@ function OfflineButtonComponent_div_0_Template(rf, ctx) {
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("matTooltip", ctx_r0.checked ? i0.ɵɵpipeBind1(3, 3, "igo.geo.mapButtons.online") : i0.ɵɵpipeBind1(4, 5, "igo.geo.mapButtons.offline"))("ngClass", i0.ɵɵpureFunction1(7, _c0$j, ctx_r0.btnStyle))("color", ctx_r0.checked ? ctx_r0.color : i0.ɵɵpureFunction1(9, _c0$j, ctx_r0.colorOff));
+        i0.ɵɵproperty("matTooltip", ctx_r0.checked ? i0.ɵɵpipeBind1(3, 3, "igo.geo.mapButtons.online") : i0.ɵɵpipeBind1(4, 5, "igo.geo.mapButtons.offline"))("ngClass", i0.ɵɵpureFunction1(7, _c0$k, ctx_r0.btnStyle))("color", ctx_r0.checked ? ctx_r0.color : i0.ɵɵpureFunction1(9, _c0$k, ctx_r0.colorOff));
     }
 }
 class OfflineButtonComponent {
@@ -9697,7 +9698,7 @@ function BaseLayersSwitcherComponent_div_0_igo_mini_basemap_2_Template(rf, ctx)
         i0.ɵɵproperty("map", ctx_r2.map)("baseLayer", baseLayer_r3)("title", ctx_r2.baseLayers.length > 2 && !ctx_r2.expand ? i0.ɵɵpipeBind1(1, 5, "igo.geo.baselayersSwitcher.title") : baseLayer_r3.title)("display", ctx_r2.expand || i_r4 === 0 && !ctx_r2.useStaticIcon)("disabled", !ctx_r2.expand && ctx_r2.baseLayers.length > 1);
     }
 }
-const _c0$i = function (a0) { return { "container-expand": a0 }; };
+const _c0$j = function (a0) { return { "container-expand": a0 }; };
 function BaseLayersSwitcherComponent_div_0_Template(rf, ctx) {
     if (rf & 1) {
         const _r6 = i0.ɵɵgetCurrentView();
@@ -9711,7 +9712,7 @@ function BaseLayersSwitcherComponent_div_0_Template(rf, ctx) {
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$i, ctx_r0.expand))("@baseLayerSwitcherState", ctx_r0.expand ? "expand" : ctx_r0.useStaticIcon ? "collapseIcon" : "collapseMap");
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$j, ctx_r0.expand))("@baseLayerSwitcherState", ctx_r0.expand ? "expand" : ctx_r0.useStaticIcon ? "collapseIcon" : "collapseMap");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx_r0.useStaticIcon && !ctx_r0.expand && ctx_r0.showButton);
         i0.ɵɵadvance(1);
@@ -10319,7 +10320,7 @@ MiniBaseMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniBa
             }] });
 })();
 
-const _c0$h = function (a0, a1) { return { azimuth: a0, rotation: a1 }; };
+const _c0$i = function (a0, a1) { return { azimuth: a0, rotation: a1 }; };
 function RotationButtonComponent_div_0_Template(rf, ctx) {
     if (rf & 1) {
         const _r2 = i0.ɵɵgetCurrentView();
@@ -10336,7 +10337,7 @@ function RotationButtonComponent_div_0_Template(rf, ctx) {
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 4, ctx_r0.rotated$) ? i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.resetRotation", i0.ɵɵpureFunction2(15, _c0$h, ctx_r0.azimuthRounded, ctx_r0.rotationRounded)) : i0.ɵɵpipeBind1(3, 9, "igo.geo.mapButtons.tipRotation"));
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 4, ctx_r0.rotated$) ? i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.resetRotation", i0.ɵɵpureFunction2(15, _c0$i, ctx_r0.azimuthRounded, ctx_r0.rotationRounded)) : i0.ɵɵpipeBind1(3, 9, "igo.geo.mapButtons.tipRotation"));
         i0.ɵɵadvance(4);
         i0.ɵɵproperty("color", ctx_r0.color)("disabled", i0.ɵɵpipeBind1(5, 11, ctx_r0.rotated$) === false);
         i0.ɵɵadvance(2);
@@ -12828,7 +12829,7 @@ CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cat
             }] });
 })();
 
-const _c0$g = ["renderedLegend"];
+const _c0$h = ["renderedLegend"];
 function LayerLegendComponent_ng_container_0_ng_container_1_ng_container_1_div_2_mat_list_item_1_Template(rf, ctx) {
     if (rf & 1) {
         const _r15 = i0.ɵɵgetCurrentView();
@@ -13215,7 +13216,7 @@ class LayerLegendComponent {
 LayerLegendComponent.ɵfac = function LayerLegendComponent_Factory(t) { return new (t || LayerLegendComponent)(i0.ɵɵdirectiveInject(CapabilitiesService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 LayerLegendComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerLegendComponent, selectors: [["igo-layer-legend"]], viewQuery: function LayerLegendComponent_Query(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$g, 5);
+            i0.ɵɵviewQuery(_c0$h, 5);
         }
         if (rf & 2) {
             let _t;
@@ -13854,7 +13855,7 @@ function LayerItemComponent_mat_checkbox_1_Template(rf, ctx) {
         i0.ɵɵproperty("checked", ctx_r0.layerCheck);
     }
 }
-const _c0$f = function (a0) { return { disabled: a0 }; };
+const _c0$g = function (a0) { return { disabled: a0 }; };
 function LayerItemComponent_button_4_Template(rf, ctx) {
     if (rf & 1) {
         const _r9 = i0.ɵɵgetCurrentView();
@@ -13871,7 +13872,7 @@ function LayerItemComponent_button_4_Template(rf, ctx) {
         const ctx_r1 = i0.ɵɵnextContext();
         i0.ɵɵproperty("color", ctx_r1.layer.visible ? "primary" : "default")("matTooltip", i0.ɵɵpipeBind1(1, 5, ctx_r1.eyeTooltip));
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(3, 7, ctx_r1.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$f, i0.ɵɵpipeBind1(4, 9, ctx_r1.inResolutionRange$) === false))("svgIcon", i0.ɵɵpipeBind1(5, 11, ctx_r1.layer.visible$) ? "eye" : "eye-off");
+        i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(3, 7, ctx_r1.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$g, i0.ɵɵpipeBind1(4, 9, ctx_r1.inResolutionRange$) === false))("svgIcon", i0.ɵɵpipeBind1(5, 11, ctx_r1.layer.visible$) ? "eye" : "eye-off");
     }
 }
 function LayerItemComponent_button_5_Template(rf, ctx) {
@@ -13890,7 +13891,7 @@ function LayerItemComponent_button_5_Template(rf, ctx) {
         const ctx_r2 = i0.ɵɵnextContext();
         i0.ɵɵproperty("color", ctx_r2.layer.visible ? "primary" : "default")("matTooltip", ctx_r2.layer.visible ? i0.ɵɵpipeBind1(1, 5, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 7, "igo.geo.layer.showLayer"));
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(4, 9, ctx_r2.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$f, i0.ɵɵpipeBind1(5, 11, ctx_r2.inResolutionRange$) === false))("svgIcon", ctx_r2.layer.visible ? "eye" : "eye-off");
+        i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(4, 9, ctx_r2.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$g, i0.ɵɵpipeBind1(5, 11, ctx_r2.inResolutionRange$) === false))("svgIcon", ctx_r2.layer.visible ? "eye" : "eye-off");
     }
 }
 function LayerItemComponent_button_6_Template(rf, ctx) {
@@ -14175,7 +14176,7 @@ var LayerListDisplacement;
     LayerListDisplacement["Lower"] = "lower";
 })(LayerListDisplacement || (LayerListDisplacement = {}));
 
-const _c0$e = ["igoLayerItemToolbar"];
+const _c0$f = ["igoLayerItemToolbar"];
 function LayerListComponent_igo_layer_list_tool_1_Template(rf, ctx) {
     if (rf & 1) {
         const _r7 = i0.ɵɵgetCurrentView();
@@ -15139,7 +15140,7 @@ class LayerListComponent {
 LayerListComponent.ɵfac = function LayerListComponent_Factory(t) { return new (t || LayerListComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
 LayerListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerListComponent, selectors: [["igo-layer-list"]], contentQueries: function LayerListComponent_ContentQueries(rf, ctx, dirIndex) {
         if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0$e, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0$f, 5);
         }
         if (rf & 2) {
             let _t;
@@ -16740,7 +16741,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_4_Template(rf, ctx) {
         i0.ɵɵproperty("innerHTML", property_r3.value, i0.ɵɵsanitizeHtml);
     }
 }
-const _c0$d = function () { return { "cursor": "pointer", "color": "blue" }; };
+const _c0$e = function () { return { "cursor": "pointer", "color": "blue" }; };
 function FeatureDetailsComponent_table_0_tr_2_td_5_Template(rf, ctx) {
     if (rf & 1) {
         const _r20 = i0.ɵɵgetCurrentView();
@@ -16753,7 +16754,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_5_Template(rf, ctx) {
         const property_r3 = i0.ɵɵnextContext().$implicit;
         const ctx_r8 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c0$d));
+        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c0$e));
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate(ctx_r8.getEmbeddedLinkText(property_r3.value));
     }
@@ -16773,7 +16774,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_6_Template(rf, ctx) {
     }
     if (rf & 2) {
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c0$d));
+        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c0$e));
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "igo.geo.targetHtmlUrl"));
     }
@@ -16863,13 +16864,12 @@ function FeatureDetailsComponent_iframe_1_Template(rf, ctx) {
     }
 }
 class FeatureDetailsComponent {
-    constructor(http, cdRef, sanitizer, networkService, messageService, languageService, configService) {
+    constructor(http, cdRef, sanitizer, networkService, messageService, configService) {
         this.http = http;
         this.cdRef = cdRef;
         this.sanitizer = sanitizer;
         this.networkService = networkService;
         this.messageService = messageService;
-        this.languageService = languageService;
         this.configService = configService;
         this.unsubscribe$ = new Subject();
         this.ready = false;
@@ -16955,14 +16955,17 @@ class FeatureDetailsComponent {
                 window.open(fileUrl, '_blank');
                 this.cdRef.detectChanges();
             }, (error) => {
-                const translate = this.languageService.translate;
-                const title = translate.instant('igo.geo.targetHtmlUrlUnauthorizedTitle');
-                const message = translate.instant('igo.geo.targetHtmlUrlUnauthorized');
-                this.messageService.error(message, title);
+                this.messageService.error('igo.geo.targetHtmlUrlUnauthorized', 'igo.geo.targetHtmlUrlUnauthorizedTitle');
             });
         }
         else {
-            window.open(value, '_blank');
+            let url = value;
+            if (this.isEmbeddedLink(value)) {
+                var div = document.createElement('div');
+                div.innerHTML = value;
+                url = div.children[0].getAttribute('href');
+            }
+            window.open(url, '_blank');
         }
     }
     isUrl(value) {
@@ -17081,7 +17084,7 @@ class FeatureDetailsComponent {
         }
     }
 }
-FeatureDetailsComponent.ɵfac = function FeatureDetailsComponent_Factory(t) { return new (t || FeatureDetailsComponent)(i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$3.DomSanitizer), i0.ɵɵdirectiveInject(i2$1.NetworkService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService)); };
+FeatureDetailsComponent.ɵfac = function FeatureDetailsComponent_Factory(t) { return new (t || FeatureDetailsComponent)(i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$3.DomSanitizer), i0.ɵɵdirectiveInject(i2$1.NetworkService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.ConfigService)); };
 FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FeatureDetailsComponent, selectors: [["igo-feature-details"]], inputs: { source: "source", map: "map", toolbox: "toolbox", feature: "feature" }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, decls: 2, vars: 2, consts: [["class", "igo-striped mat-typography", 4, "ngIf"], [3, "srcdoc", "src", 4, "ngIf"], [1, "igo-striped", "mat-typography"], [4, "ngFor", "ngForOf"], [4, "ngIf"], ["id", "keyValue", 4, "ngIf"], [3, "innerHTML", 4, "ngIf"], ["mat-list-avatar", "", 3, "svgIcon"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href"], ["mat-icon-button", "", 1, "copyClipboard", 3, "click"], ["svgIcon", "content-copy"], ["id", "keyValue"], [3, "innerHTML"], [3, "ngStyle", "click"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href", "click"], ["igoImageError", "", "width", "225", "height", "auto", 3, "src"], [3, "srcdoc", "src"]], template: function FeatureDetailsComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵtemplate(0, FeatureDetailsComponent_table_0_Template, 4, 3, "table", 0);
@@ -17097,7 +17100,7 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureDetailsComponent, [{
             type: Component,
             args: [{ selector: 'igo-feature-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"igo-striped mat-typography\" *ngIf=\"ready && feature && isObject(feature.properties) && feature.properties.target !== 'iframe'\">\r\n  <tbody>\r\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\r\n\r\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\r\n        <mat-icon mat-list-avatar svgIcon=\"{{icon}}\"></mat-icon>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\r\n        <a href=\"{{property.value}}\" target='_blank' rel=\"noopener noreferrer\"> {{ 'igo.geo.targetHtmlUrl' | translate }} {{title}}</a>\r\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\r\n        {{property.key}}\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value) && !isEmbeddedLink(property.value)\" [innerHTML]=\"property.value\">\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && isEmbeddedLink(property.value)\">\r\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ getEmbeddedLinkText(property.value) }}</u>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && (isDoc(property.value) || isUrl(property.value)) && !isImg(property.value)\">\r\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ 'igo.geo.targetHtmlUrl' | translate }}</u>\r\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value) && isImg(property.value)\">\r\n        <a href=\"{{property.value}}\" target='_blank' (click)=\"openSecureUrl(property.value)\" rel=\"noopener noreferrer\">\r\n          <img igoImageError src=\"{{(property.value | secureImage) |\u00A0async}}\" width=\"225\" height=\"auto\">\r\n        </a>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && isObject(property.value)\" [innerHTML]=\"property.value | json\">\r\n      </td>\r\n\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<iframe *ngIf=\"isHtmlDisplay()\" [srcdoc]=\"htmlSanitizer(feature.properties)\" [src]=\"urlSanitizer(feature.properties.url)\"></iframe>\r\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
-        }], function () { return [{ type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }, { type: i2$1.NetworkService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }]; }, { source: [{
+        }], function () { return [{ type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }, { type: i2$1.NetworkService }, { type: i2$1.MessageService }, { type: i2$1.ConfigService }]; }, { source: [{
                 type: Input
             }], map: [{
                 type: Input
@@ -17114,7 +17117,7 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
             }] });
 })();
 
-const _c0$c = ["igoForm"];
+const _c0$d = ["igoForm"];
 const _c1$a = ["*", [["", "formButtons", ""]]];
 const _c2$5 = ["*", "[formButtons]"];
 /**
@@ -17190,7 +17193,7 @@ class FeatureFormComponent {
 FeatureFormComponent.ɵfac = function FeatureFormComponent_Factory(t) { return new (t || FeatureFormComponent)(); };
 FeatureFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FeatureFormComponent, selectors: [["igo-feature-form"]], viewQuery: function FeatureFormComponent_Query(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$c, 7);
+            i0.ɵɵviewQuery(_c0$d, 7);
         }
         if (rf & 2) {
             let _t;
@@ -17736,97 +17739,181 @@ DrawShorcutsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawS
         }], null, null);
 })();
 
-function DrawComponent_button_23_Template(rf, ctx) {
+class DrawLayerPopupComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.confirmFlag = false;
+    }
+    cancelDrawing() {
+        this.dialogRef.close();
+    }
+    confirm(labelString) {
+        this.confirmFlag = true;
+        this.dialogRef.close(labelString);
+    }
+}
+DrawLayerPopupComponent.ɵfac = function DrawLayerPopupComponent_Factory(t) { return new (t || DrawLayerPopupComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef)); };
+DrawLayerPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawLayerPopupComponent, selectors: [["igo-draw-popup-component"]], inputs: { confirmFlag: "confirmFlag" }, decls: 14, vars: 9, consts: [["mat-dialog-content", ""], [1, "mat-typography"], [1, "example-full-width"], ["matInput", "", 3, "placeholder"], ["input", ""], ["mat-dialog-actions", ""], ["mat-raised-button", "", 3, "click"], ["mat-raised-button", "", "color", "primary", 3, "click"]], template: function DrawLayerPopupComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 0)(1, "p", 1);
+            i0.ɵɵtext(2);
+            i0.ɵɵpipe(3, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "mat-form-field", 2);
+            i0.ɵɵelement(5, "input", 3, 4);
+            i0.ɵɵpipe(7, "translate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 5)(9, "button", 6);
+            i0.ɵɵlistener("click", function DrawLayerPopupComponent_Template_button_click_9_listener() { return ctx.cancelDrawing(); });
+            i0.ɵɵtext(10);
+            i0.ɵɵpipe(11, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "button", 7);
+            i0.ɵɵlistener("click", function DrawLayerPopupComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.confirm(_r0.value)); });
+            i0.ɵɵtext(13, " OK ");
+            i0.ɵɵelementEnd()();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, "igo.geo.draw.layer.layerDialogInstruction"), " ");
+            i0.ɵɵadvance(3);
+            i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(7, 5, "igo.geo.draw.layer.title"));
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 7, "igo.geo.draw.cancel"), " ");
+        }
+    }, dependencies: [i3.MatButton, i13.MatFormField, i14.MatInput, i1.MatDialogContent, i1.MatDialogActions, i7.TranslatePipe] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawLayerPopupComponent, [{
+            type: Component,
+            args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\r\n  </p>\r\n  <mat-form-field class=\"example-full-width\">\r\n    <input\r\n      #input\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\r\n      />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.draw.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n    OK\r\n  </button>\r\n</div>\r\n" }]
+        }], function () { return [{ type: i1.MatDialogRef }]; }, { confirmFlag: [{
+                type: Input
+            }] });
+})();
+
+const _c0$c = ["selectedLayer"];
+function DrawComponent_mat_option_30_Template(rf, ctx) {
     if (rf & 1) {
-        const _r5 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 14);
-        i0.ɵɵlistener("click", function DrawComponent_button_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.deleteDrawings()); });
+        i0.ɵɵelementStart(0, "mat-option", 2);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const layer_r7 = ctx.$implicit;
+        i0.ɵɵproperty("value", layer_r7);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", layer_r7.title, " ");
+    }
+}
+function DrawComponent_button_34_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r9 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 20);
+        i0.ɵɵlistener("click", function DrawComponent_button_34_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.activeDrawingLayer.visible = !ctx_r8.activeDrawingLayer.visible); });
+        i0.ɵɵpipe(1, "translate");
+        i0.ɵɵpipe(2, "translate");
+        i0.ɵɵelement(3, "mat-icon", 21);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r2 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("color", ctx_r2.activeDrawingLayer.visible ? "primary" : "default")("matTooltip", ctx_r2.activeDrawingLayer.visible ? i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 5, "igo.geo.layer.showLayer"));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("svgIcon", ctx_r2.activeDrawingLayer.visible ? "eye" : "eye-off");
+    }
+}
+function DrawComponent_button_37_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r11 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 22);
+        i0.ɵɵlistener("click", function DrawComponent_button_37_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.deleteDrawings()); });
         i0.ɵɵpipe(1, "translate");
         i0.ɵɵpipe(2, "async");
-        i0.ɵɵelement(3, "mat-icon", 15);
+        i0.ɵɵelement(3, "mat-icon", 23);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, "igo.geo.draw.delete"))("disabled", i0.ɵɵpipeBind1(2, 4, ctx_r0.selectedFeatures$).length === 0);
+        const ctx_r3 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, "igo.geo.draw.delete"))("disabled", i0.ɵɵpipeBind1(2, 4, ctx_r3.selectedFeatures$).length === 0);
     }
 }
-function DrawComponent_mat_form_field_28_div_6_Template(rf, ctx) {
+function DrawComponent_mat_form_field_42_div_6_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 19);
-        i0.ɵɵelement(1, "img", 20);
+        i0.ɵɵelementStart(0, "div", 27);
+        i0.ɵɵelement(1, "img", 28);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r6 = i0.ɵɵnextContext(2);
+        const ctx_r12 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵpropertyInterpolate("src", ctx_r6.icon, i0.ɵɵsanitizeUrl);
+        i0.ɵɵpropertyInterpolate("src", ctx_r12.icon, i0.ɵɵsanitizeUrl);
     }
 }
-function DrawComponent_mat_form_field_28_mat_option_10_Template(rf, ctx) {
+function DrawComponent_mat_form_field_42_mat_option_10_Template(rf, ctx) {
     if (rf & 1) {
-        const _r10 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "mat-option", 21);
-        i0.ɵɵlistener("click", function DrawComponent_mat_form_field_28_mat_option_10_Template_mat_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r10); const icon_html_r8 = restoredCtx.$implicit; const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.onIconChange(icon_html_r8)); });
-        i0.ɵɵelementStart(1, "div", 19);
-        i0.ɵɵelement(2, "img", 20);
+        const _r16 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "mat-option", 29);
+        i0.ɵɵlistener("click", function DrawComponent_mat_form_field_42_mat_option_10_Template_mat_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const icon_html_r14 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r15.onIconChange(icon_html_r14)); });
+        i0.ɵɵelementStart(1, "div", 27);
+        i0.ɵɵelement(2, "img", 28);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const icon_html_r8 = ctx.$implicit;
-        i0.ɵɵproperty("value", icon_html_r8);
+        const icon_html_r14 = ctx.$implicit;
+        i0.ɵɵproperty("value", icon_html_r14);
         i0.ɵɵadvance(2);
-        i0.ɵɵpropertyInterpolate("src", icon_html_r8, i0.ɵɵsanitizeUrl);
+        i0.ɵɵpropertyInterpolate("src", icon_html_r14, i0.ɵɵsanitizeUrl);
     }
 }
-function DrawComponent_mat_form_field_28_Template(rf, ctx) {
+function DrawComponent_mat_form_field_42_Template(rf, ctx) {
     if (rf & 1) {
-        const _r12 = i0.ɵɵgetCurrentView();
+        const _r18 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "mat-form-field")(1, "mat-label");
         i0.ɵɵtext(2);
         i0.ɵɵpipe(3, "translate");
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(4, "mat-select")(5, "mat-select-trigger");
-        i0.ɵɵtemplate(6, DrawComponent_mat_form_field_28_div_6_Template, 2, 1, "div", 16);
+        i0.ɵɵtemplate(6, DrawComponent_mat_form_field_42_div_6_Template, 2, 1, "div", 24);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(7, "mat-option", 17);
-        i0.ɵɵlistener("click", function DrawComponent_mat_form_field_28_Template_mat_option_click_7_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onIconChange()); });
+        i0.ɵɵelementStart(7, "mat-option", 25);
+        i0.ɵɵlistener("click", function DrawComponent_mat_form_field_42_Template_mat_option_click_7_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onIconChange()); });
         i0.ɵɵtext(8);
         i0.ɵɵpipe(9, "translate");
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(10, DrawComponent_mat_form_field_28_mat_option_10_Template, 3, 2, "mat-option", 18);
+        i0.ɵɵtemplate(10, DrawComponent_mat_form_field_42_mat_option_10_Template, 3, 2, "mat-option", 26);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext();
+        const ctx_r5 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "igo.geo.draw.icon"));
         i0.ɵɵadvance(4);
-        i0.ɵɵproperty("ngIf", ctx_r2.icon);
+        i0.ɵɵproperty("ngIf", ctx_r5.icon);
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 6, "igo.geo.draw.noIcon"));
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngForOf", ctx_r2.icons);
+        i0.ɵɵproperty("ngForOf", ctx_r5.icons);
     }
 }
-function DrawComponent_button_32_Template(rf, ctx) {
+function DrawComponent_button_46_Template(rf, ctx) {
     if (rf & 1) {
-        const _r14 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 22);
-        i0.ɵɵlistener("click", function DrawComponent_button_32_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.openStyleModalDialog()); });
+        const _r20 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 30);
+        i0.ɵɵlistener("click", function DrawComponent_button_46_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.openStyleModalDialog()); });
         i0.ɵɵpipe(1, "translate");
         i0.ɵɵtext(2);
         i0.ɵɵpipe(3, "translate");
-        i0.ɵɵelement(4, "mat-icon", 23);
+        i0.ɵɵelement(4, "mat-icon", 31);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r3 = i0.ɵɵnextContext();
+        const ctx_r6 = i0.ɵɵnextContext();
         i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.style.styleModalTooltip"));
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 5, "igo.geo.layer.style.styleModal"), " ");
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("matBadge", ctx_r3.selectedFeatures$.value.length);
+        i0.ɵɵproperty("matBadge", ctx_r6.selectedFeatures$.value.length);
     }
 }
 class DrawComponent {
@@ -17859,13 +17946,21 @@ class DrawComponent {
             ]
         };
         this.geometryType = GeometryType; // Reference to the GeometryType enum
+        this._stores = [];
+        this._drawControls = [];
+        this.activeLayerChange = new EventEmitter();
+        this.drawControlsEvent = new EventEmitter();
+        this.layersIDEvent = new EventEmitter();
+        this.layerCounterID = 0;
         this.draw$ = new BehaviorSubject({}); // Observable of draw
-        this.olDrawingLayerSource = new OlVectorSource();
+        this.activeDrawingLayerSource = new OlVectorSource();
         this.selectedFeatures$ = new BehaviorSubject([]);
         this.drawControlIsDisabled = true;
         this.drawControlIsActive = false;
         this.subscriptions$$ = [];
         this.position = 'bottom';
+        this.isCreatingNewLayer = false;
+        this.currGeometryType = this.geometryType.Point;
         this.buildForm();
         this.fillColor = this.drawStyleService.getFillColor();
         this.strokeColor = this.drawStyleService.getStrokeColor();
@@ -17876,19 +17971,85 @@ class DrawComponent {
         this.fontSize = this.drawStyleService.getFontSize();
         this.fontStyle = this.drawStyleService.getFontStyle();
     }
+    get stores() {
+        return this._stores;
+    }
+    set stores(value) {
+        this._stores = value;
+    }
+    get drawControls() {
+        return this._drawControls;
+    }
+    set drawControls(value) {
+        this._drawControls = value;
+    }
+    get activeDrawingLayer() {
+        return this._activeDrawingLayer;
+    }
+    set activeDrawingLayer(value) {
+        this._activeDrawingLayer = value;
+    }
     // Initialize the store that will contain the entities and create the Draw control
     ngOnInit() {
-        this.initStore();
-        this.drawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
-        this.drawControl.setGeometryType(this.geometryType.Point);
-        this.toggleDrawControl();
+        if (!this.stores.length) {
+            this.activeStore = new FeatureStore([], {
+                map: this.map
+            });
+            this.initStore();
+            this.activeDrawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
+            this.activeDrawControl.setGeometryType(this.geometryType.Point);
+            this.toggleDrawControl();
+            this.stores.push(this.activeStore);
+            this.drawControls.push([this.activeDrawingLayer.id, this.activeDrawControl]);
+            this.drawControlsEvent.emit(this.drawControls);
+            this.layersIDEvent.emit(this.activeDrawingLayer.id);
+            this.onLayerChange(this.activeDrawingLayer);
+        }
+        else {
+            this.activeStore = this.stores.find(store => store.layer.id === this.activeDrawingLayer.id);
+            this.activeDrawControl = this.drawControls.find(dc => dc[0] === this.activeDrawingLayer.id)[1];
+            this.deactivateDrawControl();
+            this.allLayers.forEach(layer => {
+                if (layer.id !== this.activeDrawingLayer.id) {
+                    layer.opacity = 0;
+                }
+                let store = this.stores.find(s => s.layer.id === layer.id);
+                this.subscriptions$$.push(store.stateView
+                    .manyBy$((record) => {
+                    return record.state.selected === true;
+                })
+                    .pipe(first())
+                    .subscribe((records) => {
+                    records.forEach((record) => {
+                        record.state.selected = false;
+                    });
+                }));
+                this.subscriptions$$.push(store.stateView
+                    .manyBy$((record) => {
+                    return record.state.selected === true;
+                })
+                    .pipe(skip(1) // Skip initial emission
+                )
+                    .subscribe((records) => {
+                    this.selectedFeatures$.next(records.map((record) => record.entity));
+                }));
+                this.subscriptions$$.push(store.count$.subscribe((cnt) => {
+                    cnt >= 1
+                        ? (this.activeStore.layer.options.showInLayerList = true)
+                        : (this.activeStore.layer.options.showInLayerList = false);
+                }));
+            });
+            this.onLayerChange(this.activeDrawingLayer);
+        }
     }
     /**
      * Remove the drawing layer and the interactions
      * @internal
      */
     ngOnDestroy() {
-        this.drawControl.setOlMap(undefined);
+        this.allLayers.forEach(layer => layer.opacity = 1);
+        this.activeStore.state.updateAll({ selected: false });
+        this.deactivateDrawControl();
         this.subscriptions$$.map((s) => s.unsubscribe());
     }
     /**
@@ -17899,61 +18060,20 @@ class DrawComponent {
      * @returns a Draw Control
      */
     createDrawControl(fillColor, strokeColor, strokeWidth) {
-        const drawControl = new DrawControl({
+        const activeDrawControl = new DrawControl({
             geometryType: undefined,
-            drawingLayerSource: this.olDrawingLayerSource,
+            drawingLayerSource: this.activeDrawingLayerSource,
             drawingLayerStyle: new olstyle.Style({}),
             interactionStyle: createInteractionStyle(fillColor, strokeColor, strokeWidth)
         });
-        return drawControl;
+        return activeDrawControl;
     }
     /**
      * Store initialization, including drawing layer creation
      */
-    initStore() {
-        this.map.removeLayer(this.olDrawingLayer);
-        // this.map.addLayer()
-        this.olDrawingLayer = new VectorLayer({
-            isIgoInternalLayer: true,
-            id: 'igo-draw-layer',
-            title: this.languageService.translate.instant('igo.geo.draw.drawing'),
-            zIndex: 200,
-            source: new FeatureDataSource(),
-            style: (feature, resolution) => {
-                return this.drawStyleService.createIndividualElementStyle(feature, resolution, this.labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
-            },
-            showInLayerList: true,
-            exportable: true,
-            browsable: false,
-            workspace: {
-                enabled: false
-            }
-        });
-        tryBindStoreLayer(this.store, this.olDrawingLayer);
-        tryAddLoadingStrategy(this.store, new FeatureStoreLoadingStrategy({
-            motion: FeatureMotion.None
-        }));
-        tryAddSelectionStrategy(this.store, new FeatureStoreSelectionStrategy({
-            map: this.map,
-            motion: FeatureMotion.None,
-            many: true
-        }));
-        this.store.layer.visible = true;
-        this.store.source.ol.on('removefeature', (event) => {
-            const olGeometry = event.feature.getGeometry();
-            this.clearLabelsOfOlGeometry(olGeometry);
-        });
-        this.subscriptions$$.push(this.store.stateView
-            .manyBy$((record) => {
-            return record.state.selected === true;
-        })
-            .pipe(first())
-            .subscribe((records) => {
-            records.forEach((record) => {
-                record.state.selected = false;
-            });
-        }));
-        this.subscriptions$$.push(this.store.stateView
+    initStore(newTitle, isNewLayer) {
+        this.createLayer(newTitle, isNewLayer);
+        this.subscriptions$$.push(this.activeStore.stateView
             .manyBy$((record) => {
             return record.state.selected === true;
         })
@@ -17962,13 +18082,10 @@ class DrawComponent {
             .subscribe((records) => {
             this.selectedFeatures$.next(records.map((record) => record.entity));
         }));
-        this.subscriptions$$.push(this.store.count$.subscribe((cnt) => {
-            if (cnt > 0) {
-                this.store.setLayerExtent();
-            }
+        this.subscriptions$$.push(this.activeStore.count$.subscribe((cnt) => {
             cnt >= 1
-                ? (this.store.layer.options.showInLayerList = true)
-                : (this.store.layer.options.showInLayerList = false);
+                ? (this.activeStore.layer.options.showInLayerList = true)
+                : (this.activeStore.layer.options.showInLayerList = false);
         }));
     }
     /**
@@ -18035,12 +18152,12 @@ class DrawComponent {
                 }
                 // deletes the feature
                 else {
-                    this.olDrawingLayerSource
+                    this.activeDrawingLayerSource
                         .getFeatures()
                         .forEach((drawingLayerFeature) => {
                         const geometry = drawingLayerFeature.getGeometry();
                         if (olGeometry === geometry) {
-                            this.olDrawingLayerSource.removeFeature(drawingLayerFeature);
+                            this.activeDrawingLayerSource.removeFeature(drawingLayerFeature);
                         }
                     });
                 }
@@ -18054,10 +18171,10 @@ class DrawComponent {
     onDrawEnd(olGeometry, radius) {
         this.addFeatureToStore(olGeometry, radius);
         this.clearLabelsOfOlGeometry(olGeometry);
-        this.store.layer.ol.getSource().refresh();
+        this.activeStore.layer.ol.getSource().refresh();
     }
     onModifyDraw(olGeometry) {
-        const entities = this.store.all();
+        const entities = this.activeStore.all();
         entities.forEach((entity) => {
             const entityId = entity.properties.id;
             const olGeometryId = olGeometry.ol_uid;
@@ -18071,7 +18188,7 @@ class DrawComponent {
         });
     }
     onSelectDraw(olFeature, label) {
-        const entities = this.store.all();
+        const entities = this.activeStore.all();
         const olGeometry = olFeature.getGeometry();
         olGeometry.ol_uid = olFeature.get('id');
         const olGeometryCoordinates = JSON.stringify(olGeometry.getCoordinates()[0]);
@@ -18142,7 +18259,7 @@ class DrawComponent {
             lon4326 = point4326[0];
             lat4326 = point4326[1];
         }
-        this.store.update({
+        this.activeStore.update({
             type: FEATURE,
             geometry,
             projection: projection.getCode(),
@@ -18171,6 +18288,40 @@ class DrawComponent {
             stroke: ['']
         });
     }
+    setupLayer(isNewLayer) {
+        setTimeout(() => {
+            const dialogRef = this.dialog.open(DrawLayerPopupComponent, {
+                disableClose: false,
+            });
+            dialogRef.afterClosed().subscribe((label) => {
+                if (dialogRef.componentInstance.confirmFlag) {
+                    this.activeStore.state.updateAll({ selected: false });
+                    this.activeStore = new FeatureStore([], { map: this.map });
+                    this.activeDrawingLayerSource = new OlVectorSource();
+                    this.activeDrawingLayer.opacity = 0;
+                    this.deactivateDrawControl();
+                    this.initStore(label, isNewLayer);
+                    this.activeDrawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
+                    this.activeDrawControl.setGeometryType(this.currGeometryType);
+                    this.toggleDrawControl();
+                    this.stores.push(this.activeStore);
+                    this.drawControls.push([this.activeDrawingLayer.id, this.activeDrawControl]);
+                    this.drawControlsEvent.emit(this.drawControls);
+                    this.layersIDEvent.emit(this.activeDrawingLayer.id);
+                    this.isCreatingNewLayer = false;
+                    if (!this.labelsAreShown) {
+                        this.onToggleLabels();
+                    }
+                    this.activeLayerChange.emit(this.activeDrawingLayer);
+                }
+                else {
+                    this.select.value = this.activeDrawingLayer;
+                    this.select.selectionChange.emit(this.activeDrawingLayer);
+                }
+            });
+        }, 250);
+    }
+    // HTML user interactions
     /**
      * Called when the user double-clicks the selected drawing
      */
@@ -18184,12 +18335,14 @@ class DrawComponent {
         this.dialog.open(DrawShorcutsComponent);
     }
     deleteDrawings() {
-        this.store.deleteMany(this.selectedFeatures$.value);
+        this.activeStore.deleteMany(this.selectedFeatures$.value);
         this.selectedFeatures$.value.forEach((selectedFeature) => {
-            this.olDrawingLayerSource.getFeatures().forEach((drawingLayerFeature) => {
+            this.activeDrawingLayerSource
+                .getFeatures()
+                .forEach((drawingLayerFeature) => {
                 const geometry = drawingLayerFeature.getGeometry();
                 if (selectedFeature.properties.id === geometry.ol_uid) {
-                    this.olDrawingLayerSource.removeFeature(drawingLayerFeature);
+                    this.activeDrawingLayerSource.removeFeature(drawingLayerFeature);
                 }
             });
         });
@@ -18202,8 +18355,9 @@ class DrawComponent {
         this.drawStyleService.toggleLabelsAreShown();
         this.labelsAreShown = !this.labelsAreShown;
         this.icon
-            ? this.onColorChange(this.labelsAreShown, true, this.fillColor, this.strokeColor)
-            : this.onColorChange(this.labelsAreShown, false, this.fillColor, this.strokeColor);
+            ? this.elementStyle(this.labelsAreShown, true)
+            : this.elementStyle(this.labelsAreShown, false);
+        this.createDrawControl();
     }
     /**
      * Called when the user toggles the Draw control is toggled
@@ -18213,6 +18367,69 @@ class DrawComponent {
         toggleIsChecked ? this.toggleDrawControl() : this.deactivateDrawControl();
     }
     // User changes properties of a drawing element
+    /**
+     * Display the current layer with the current store and the current layerSource
+     */
+    onLayerChange(currLayer) {
+        if (currLayer) {
+            this.activeStore.state.updateAll({ selected: false });
+            this.isCreatingNewLayer = false;
+            this.activeDrawingLayer.opacity = 0;
+            this.activeDrawingLayer = currLayer;
+            this.activeDrawingLayer.opacity = 1;
+            this.deactivateDrawControl();
+            if (!this.labelsAreShown) {
+                this.onToggleLabels();
+            }
+            this.activeStore = this.stores.find(store => store.layer.id === this.activeDrawingLayer.id);
+            this.activeDrawControl = this.drawControls.find(dc => dc[0] === this.activeDrawingLayer.id)[1];
+            this.activeDrawingLayerSource = this.activeDrawControl.olDrawingLayerSource;
+            this.activeDrawControl.setGeometryType(this.currGeometryType);
+            this.toggleDrawControl();
+        }
+        else {
+            this.setupLayer(true);
+        }
+        this.activeLayerChange.emit(this.activeDrawingLayer);
+    }
+    createLayer(newTitle, isNewLayer) {
+        for (const layer of this.allLayers) {
+            let numberId = Number(layer.id.replace('igo-draw-layer', ''));
+            this.layerCounterID = Math.max(numberId, this.layerCounterID);
+        }
+        this.activeDrawingLayer = new VectorLayer({
+            isIgoInternalLayer: true,
+            id: 'igo-draw-layer' + ++this.layerCounterID,
+            title: isNewLayer
+                ? newTitle
+                : this.languageService.translate.instant('igo.geo.draw.drawing'),
+            zIndex: 200,
+            source: new FeatureDataSource(),
+            style: (feature, resolution) => {
+                return this.drawStyleService.createIndividualElementStyle(feature, resolution, this.labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
+            },
+            showInLayerList: true,
+            exportable: true,
+            browsable: false,
+            workspace: {
+                enabled: false
+            }
+        });
+        tryBindStoreLayer(this.activeStore, this.activeDrawingLayer);
+        tryAddLoadingStrategy(this.activeStore, new FeatureStoreLoadingStrategy({
+            motion: FeatureMotion.None
+        }));
+        tryAddSelectionStrategy(this.activeStore, new FeatureStoreSelectionStrategy({
+            map: this.map,
+            motion: FeatureMotion.None,
+            many: true
+        }));
+        this.activeStore.layer.visible = true;
+        this.activeStore.source.ol.on('removefeature', (event) => {
+            const olGeometry = event.feature.getGeometry();
+            this.clearLabelsOfOlGeometry(olGeometry);
+        });
+    }
     /**
      * Called when the user changes the color in a color picker
      * @param labelsAreShown wheter the labels are shown or not
@@ -18225,16 +18442,14 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateFillAndStrokeColor(olFeature, fillColor, strokeColor);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.drawingStyle.fill = olFeature.get('fillColor_');
                 entity.properties.drawingStyle.stroke = olFeature.get('strokeColor_');
-                this.store.update(entity);
+                this.activeStore.update(entity);
             });
         }
-        this.fillColor = fillColor;
-        this.strokeColor = strokeColor;
         this.elementStyle(labelsAreShown, isAnIcon);
         this.createDrawControl();
     }
@@ -18249,12 +18464,12 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateFontSizeAndStyle(olFeature, size, style);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.fontStyle = olFeature.get('fontStyle_');
-                this.store.update(entity);
-                olFeature = this.store.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
+                this.activeStore.update(entity);
+                olFeature = this.activeStore.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
                 olFeature.setProperties({ fontStyle: entity.properties.fontStyle });
                 olFeature.changed();
             });
@@ -18276,13 +18491,13 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateOffset(olFeature, offsetX, offsetY);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.offsetX = olFeature.get('offsetX_');
                 entity.properties.offsetY = olFeature.get('offsetY_');
-                this.store.update(entity);
-                olFeature = this.store.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
+                this.activeStore.update(entity);
+                olFeature = this.activeStore.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
                 olFeature.setProperties({ offsetX: entity.properties.offsetX, offsetY: entity.properties.offsetY });
                 olFeature.changed();
             });
@@ -18299,7 +18514,8 @@ class DrawComponent {
      * @param geometryType the geometry type selected by the user
      */
     onGeometryTypeChange(geometryType) {
-        this.drawControl.setGeometryType(geometryType);
+        this.currGeometryType = geometryType;
+        this.activeDrawControl.setGeometryType(geometryType);
         this.toggleDrawControl();
     }
     // Updates the properties of olFeature inputted
@@ -18330,13 +18546,57 @@ class DrawComponent {
             offsetY_: offsetY
         }, true);
     }
-    /**
-     * Check the amount of rows as a possible alternative
-     */
+    // Updates values of the selected element on the HTML view
+    getFeatureFontSize() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.fontStyle
+                .split(' ')[0]
+                .replace('px', '')
+            : '20';
+    }
+    getFeatureFontStyle() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.fontStyle.substring(this.selectedFeatures$.value[0].properties.fontStyle.indexOf(' ') + 1)
+            : FontType.Arial;
+    }
+    getFeatureFillColor() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.drawingStyle.fill
+            : 'rgba(255,255,255,0.4)';
+    }
+    getFeatureStrokeColor() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.drawingStyle.stroke
+            : 'rgba(143,7,7,1)';
+    }
+    getFeatureOffsetX() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.offsetX
+            : this.drawStyleService.getOffsetX();
+    }
+    getFeatureOffsetY() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.offsetY
+            : '0';
+    }
+    get allFontStyles() {
+        return Object.values(FontType);
+    }
+    get allLayers() {
+        return this.map.layers.filter((layer) => layer.id.includes('igo-draw-layer'));
+    }
     updateHeightTable() {
-        this.numberOfDrawings = this.store.count$.getValue();
-        this.numberOfDrawings > 10 ? this.tableTemplate.tableHeight = '35vh' : this.tableTemplate.tableHeight = 'auto';
+        // Check the amount of rows as a possible alternative
+        this.numberOfDrawings = this.activeStore.count$.getValue();
+        this.numberOfDrawings > 10
+            ? (this.tableTemplate.tableHeight = '35vh')
+            : (this.tableTemplate.tableHeight = 'auto');
     }
+    updateActiveLayer() {
+        let currLayer = this.allLayers.find(layer => layer.title === this.activeDrawingLayer.title);
+        return currLayer ? currLayer : this.allLayers[0];
+    }
+    // Helper methods
     /**
      * Activate the correct control
      */
@@ -18361,20 +18621,20 @@ class DrawComponent {
      * @param olGeometry the new geometry to insert in the store
      */
     replaceFeatureInStore(entity, olGeometry, radius) {
-        this.store.delete(entity);
+        this.activeStore.delete(entity);
         this.onDrawEnd(olGeometry, radius);
     }
     /**
      * Deactivate the active draw control
      */
     deactivateDrawControl() {
-        if (!this.drawControl) {
+        if (!this.activeDrawControl) {
             return;
         }
         if (this.drawEnd$$) {
             this.drawEnd$$.unsubscribe();
         }
-        this.drawControl.setOlMap(undefined);
+        this.activeDrawControl.setOlMap(undefined);
         this.drawControlIsActive = false;
     }
     /**
@@ -18383,38 +18643,47 @@ class DrawComponent {
     activateDrawControl() {
         this.drawControlIsDisabled = false;
         this.drawControlIsActive = true;
-        this.drawEnd$$ = this.drawControl.end$.subscribe((olGeometry) => {
+        this.drawEnd$$ = this.activeDrawControl.end$.subscribe((olGeometry) => {
             this.openDrawDialog(olGeometry, true);
         });
-        this.drawControl.modify$.subscribe((olGeometry) => {
+        this.activeDrawControl.modify$.subscribe((olGeometry) => {
             this.onModifyDraw(olGeometry);
         });
         if (!this.drawSelect$$) {
-            this.drawSelect$$ = this.drawControl.select$.subscribe((olFeature) => {
+            this.drawSelect$$ = this.activeDrawControl.select$.subscribe((olFeature) => {
                 this.openDrawDialog(olFeature, false);
             });
         }
-        this.drawControl.setOlMap(this.map.ol, true);
+        this.activeDrawControl.setOlMap(this.map.ol, true);
     }
     /**
      * Recreates the style of the feature stored
      */
     elementStyle(labelsAreShown, isAnIcon) {
         if (isAnIcon) {
-            this.store.layer.ol.setStyle((feature, resolution) => {
+            this.activeStore.layer.ol.setStyle((feature, resolution) => {
                 return this.drawStyleService.createIndividualElementStyle(feature, resolution, labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
             });
         }
         else {
-            this.store.layer.ol.setStyle((feature, resolution) => {
+            this.activeStore.layer.ol.setStyle((feature, resolution) => {
                 return this.drawStyleService.createIndividualElementStyle(feature, resolution, labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'));
             });
         }
     }
 }
 DrawComponent.ɵfac = function DrawComponent_Factory(t) { return new (t || DrawComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(i1.MatDialog), i0.ɵɵdirectiveInject(DrawIconService)); };
-DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], inputs: { map: "map", store: "store" }, outputs: { fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, decls: 33, vars: 36, 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"], ["class", "deleteBtn", "mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click", 4, "ngIf"], ["id", "storeElements", 1, "table-compact", 3, "store", "template", "dblclick"], ["table", ""], [1, "icon-options"], [4, "ngIf"], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "palette", "matBadgeColor", "warn", "matBadgeSize", "medium", 1, "style-icon", 3, "matBadge"]], template: function DrawComponent_Template(rf, ctx) {
+DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], viewQuery: function DrawComponent_Query(rf, ctx) {
         if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$c, 5);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.select = _t.first);
+        }
+    }, 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" }, decls: 47, vars: 45, 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"], ["appearance", "outline", 1, "layer-select"], [3, "value", "selectionChange"], ["selectedLayer", ""], [3, "value", 4, "ngFor", "ngForOf"], ["id", "createNewLayer"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click", 4, "ngIf"], ["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", ""], [1, "icon-options"], [4, "ngIf"], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click"], [3, "svgIcon"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "palette", "matBadgeColor", "warn", "matBadgeSize", "medium", 1, "style-icon", 3, "matBadge"]], template: function DrawComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            const _r21 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "mat-button-toggle-group", 1);
             i0.ɵɵlistener("change", function DrawComponent_Template_mat_button_toggle_group_change_2_listener($event) { return ctx.onGeometryTypeChange($event.value); });
             i0.ɵɵelementStart(3, "mat-button-toggle", 2);
@@ -18443,20 +18712,35 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
             i0.ɵɵtext(20);
             i0.ɵɵpipe(21, "translate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div");
-            i0.ɵɵtemplate(23, DrawComponent_button_23_Template, 4, 6, "button", 6);
-            i0.ɵɵelementStart(24, "div")(25, "igo-entity-table", 7, 8);
-            i0.ɵɵlistener("dblclick", function DrawComponent_Template_igo_entity_table_dblclick_25_listener() { return ctx.editLabelDrawing(); });
+            i0.ɵɵelement(22, "mat-divider");
+            i0.ɵɵelementStart(23, "div")(24, "mat-form-field", 6)(25, "mat-label");
+            i0.ɵɵtext(26);
+            i0.ɵɵpipe(27, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "mat-select", 7, 8);
+            i0.ɵɵlistener("selectionChange", function DrawComponent_Template_mat_select_selectionChange_28_listener() { i0.ɵɵrestoreView(_r21); const _r0 = i0.ɵɵreference(29); return i0.ɵɵresetView(ctx.onLayerChange(_r0.value)); });
+            i0.ɵɵtemplate(30, DrawComponent_mat_option_30_Template, 2, 2, "mat-option", 9);
+            i0.ɵɵelementStart(31, "mat-option", 10);
+            i0.ɵɵtext(32);
+            i0.ɵɵpipe(33, "translate");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(27, "div", 9);
-            i0.ɵɵtemplate(28, DrawComponent_mat_form_field_28_Template, 11, 8, "mat-form-field", 10);
+            i0.ɵɵtemplate(34, DrawComponent_button_34_Template, 4, 7, "button", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "button", 11);
-            i0.ɵɵlistener("click", function DrawComponent_Template_button_click_29_listener() { return ctx.openShorcutsDialog(); });
-            i0.ɵɵelement(30, "mat-icon", 12);
-            i0.ɵɵpipe(31, "translate");
+            i0.ɵɵelement(35, "mat-divider");
+            i0.ɵɵelementStart(36, "div");
+            i0.ɵɵtemplate(37, DrawComponent_button_37_Template, 4, 6, "button", 12);
+            i0.ɵɵelementStart(38, "div")(39, "igo-entity-table", 13, 14);
+            i0.ɵɵlistener("dblclick", function DrawComponent_Template_igo_entity_table_dblclick_39_listener() { return ctx.editLabelDrawing(); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(41, "div", 15);
+            i0.ɵɵtemplate(42, DrawComponent_mat_form_field_42_Template, 11, 8, "mat-form-field", 16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(43, "button", 17);
+            i0.ɵɵlistener("click", function DrawComponent_Template_button_click_43_listener() { return ctx.openShorcutsDialog(); });
+            i0.ɵɵelement(44, "mat-icon", 18);
+            i0.ɵɵpipe(45, "translate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(32, DrawComponent_button_32_Template, 5, 7, "button", 13);
+            i0.ɵɵtemplate(46, DrawComponent_button_46_Template, 5, 7, "button", 19);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -18465,39 +18749,49 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("value", ctx.geometryType.Point);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 22, "igo.geo.draw." + ctx.geometryType.Point), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 27, "igo.geo.draw." + ctx.geometryType.Point), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.geometryType.LineString);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 24, "igo.geo.draw." + ctx.geometryType.LineString), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 29, "igo.geo.draw." + ctx.geometryType.LineString), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.geometryType.Polygon);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 26, "igo.geo.draw." + ctx.geometryType.Polygon), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 31, "igo.geo.draw." + ctx.geometryType.Polygon), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.geometryType.Circle);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 28, "igo.geo.draw." + ctx.geometryType.Circle), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 33, "igo.geo.draw." + ctx.geometryType.Circle), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("disabled", ctx.drawControlIsDisabled)("checked", ctx.drawControlIsActive)("labelPosition", "before");
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 30, "igo.geo.spatialFilter.drawControl"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 35, "igo.geo.spatialFilter.drawControl"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("checked", ctx.labelsAreShown)("labelPosition", "before");
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 32, "igo.geo.draw.toggleMapTooltips"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 37, "igo.geo.draw.toggleMapTooltips"), " ");
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(27, 39, "igo.geo.draw.layer.title"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", ctx.updateActiveLayer());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.allLayers);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 41, "igo.geo.draw.layer.createNewLayer"), " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.activeDrawingLayer);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.store.count$.getValue() > 0);
+            i0.ɵɵproperty("ngIf", ctx.activeStore.count$.getValue() > 0);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("store", ctx.store)("template", ctx.tableTemplate);
+            i0.ɵɵproperty("store", ctx.activeStore)("template", ctx.tableTemplate);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.icons.length >= 1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(31, 34, "igo.geo.draw.shortcuts"));
+            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(45, 43, "igo.geo.draw.shortcuts"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.selectedFeatures$.value.length);
         }
-    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i15$1.MatSlideToggle, i5$1.EntityTableComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:25%}.draw-options[_ngcontent-%COMP%]{overflow-x:hidden}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options[_ngcontent-%COMP%]{margin:5px 5px 0}.deleteBtn[_ngcontent-%COMP%]{margin-left:12px}img[_ngcontent-%COMP%]{width:100%;height:100%}.box[_ngcontent-%COMP%]{width:25px;height:25px}"], data: { animation: [
+    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i11.MatDivider, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i23.MatSlideToggle, i5$1.EntityTableComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:25%}.draw-options[_ngcontent-%COMP%]{overflow-x:hidden}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options[_ngcontent-%COMP%]{margin:5px 5px 0}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}img[_ngcontent-%COMP%]{width:100%;height:100%}.deleteBtn[_ngcontent-%COMP%]{margin-left:12px}.storeTable[_ngcontent-%COMP%]{height:auto!important}.layer-select[_ngcontent-%COMP%]{width:85%;padding:10px 10px 0%}.input-button-container[_ngcontent-%COMP%]{padding:10px}.input-button-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:25%}.input-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{left:8px;bottom:10px}"], data: { animation: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -18523,8 +18817,22 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
                             transition('open => closed', [animate('600ms ease')]),
                             transition('closed => open', [animate('800ms ease')])
                         ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\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  <div>\r\n    <button *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    <div>\r\n      <igo-entity-table\r\n        #table\r\n        class=\"table-compact\"\r\n        id=\"storeElements\"\r\n        [store]=\"store\"\r\n        [template]=\"tableTemplate\"\r\n        (dblclick)=\"editLabelDrawing()\">\r\n      </igo-entity-table>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"icon-options\">\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\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\r\n  <button\r\n    *ngIf=\"selectedFeatures$.value.length\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    (click)=\"openStyleModalDialog()\"\r\n    [matTooltip]=\"'igo.geo.layer.style.styleModalTooltip' | translate\">\r\n    {{'igo.geo.layer.style.styleModal' | translate}}\r\n    <mat-icon\r\n      class=\"style-icon\"\r\n      svgIcon=\"palette\"\r\n      [matBadge]=\"selectedFeatures$.value.length\"\r\n      matBadgeColor=\"warn\"\r\n      matBadgeSize=\"medium\">\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)}.icon-options{margin:5px 5px 0}.deleteBtn{margin-left:12px}img{width:100%;height:100%}.box{width:25px;height:25px}\n"] }]
-        }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1.MatDialog }, { type: DrawIconService }]; }, { fillColor: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\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    >\r\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <div>\r\n    <mat-form-field appearance=\"outline\" class=\"layer-select\">\r\n      <mat-label>{{'igo.geo.draw.layer.title' | translate}}</mat-label>\r\n      <mat-select #selectedLayer (selectionChange)=\"onLayerChange(selectedLayer.value)\" [value]=\"updateActiveLayer()\">\r\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\r\n          {{ layer.title }}\r\n        </mat-option>\r\n        <mat-option id=\"createNewLayer\" >\r\n          {{'igo.geo.draw.layer.createNewLayer' | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <button\r\n      *ngIf=\"activeDrawingLayer\"\r\n      mat-icon-button\r\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\r\n      collapsibleButton\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"activeDrawingLayer.visible ?\r\n                    ('igo.geo.layer.hideLayer' | translate) :\r\n                    ('igo.geo.layer.showLayer' | translate)\"\r\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\">\r\n      <mat-icon\r\n        [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-divider></mat-divider>\r\n  <div>\r\n    <button\r\n      *ngIf=\"activeStore.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    <div>\r\n      <igo-entity-table\r\n        #table\r\n        class=\"table-compact\"\r\n        [store]=\"activeStore\"\r\n        [template]=\"tableTemplate\"\r\n        (dblclick)=\"editLabelDrawing()\">\r\n      </igo-entity-table>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"icon-options\">\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\r\n  <button\r\n    mat-icon-button\r\n    color=\"accent\"\r\n    disableRipple=\"true\"\r\n    (click)=\"openShorcutsDialog()\"\r\n  >\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    >\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"selectedFeatures$.value.length\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    (click)=\"openStyleModalDialog()\"\r\n    [matTooltip]=\"'igo.geo.layer.style.styleModalTooltip' | translate\">\r\n    {{'igo.geo.layer.style.styleModal' | translate}}\r\n    <mat-icon\r\n      class=\"style-icon\"\r\n      svgIcon=\"palette\"\r\n      [matBadge]=\"selectedFeatures$.value.length\"\r\n      matBadgeColor=\"warn\"\r\n      matBadgeSize=\"medium\">\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)}.icon-options{margin:5px 5px 0}.edition-drawing{padding:10px 0}img{width:100%;height:100%}.deleteBtn{margin-left:12px}.storeTable{height:auto!important}.layer-select{width:85%;padding:10px 10px 0%}.input-button-container{padding:10px}.input-button-container mat-form-field{width:25%}.input-button-container button{left:8px;bottom:10px}\n"] }]
+        }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1.MatDialog }, { type: DrawIconService }]; }, { map: [{
+                type: Input
+            }], stores: [{
+                type: Input
+            }], drawControls: [{
+                type: Input
+            }], activeDrawingLayer: [{
+                type: Input
+            }], activeLayerChange: [{
+                type: Output
+            }], drawControlsEvent: [{
+                type: Output
+            }], layersIDEvent: [{
+                type: Output
+            }], fillColor: [{
                 type: Output
             }], strokeColor: [{
                 type: Output
@@ -18534,10 +18842,9 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
                 type: Output
             }], fontStyle: [{
                 type: Output
-            }], map: [{
-                type: Input
-            }], store: [{
-                type: Input
+            }], select: [{
+                type: ViewChild,
+                args: ['selectedLayer']
             }] });
 })();
 
@@ -18964,7 +19271,7 @@ i0.ɵɵsetComponentScope(LayerItemComponent, [i1$1.NgClass, i1$1.NgIf, i2.MatIco
 i0.ɵɵsetComponentScope(LayerLegendItemComponent, [i4.MatTooltip, i5.MatListItem, i9.MatLine, LayerLegendComponent], []);
 i0.ɵɵsetComponentScope(LayerListComponent, [i2$2.NgControlStatus, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i2$2.NgModel, i11.MatDivider, i7$2.MatMenu, i7$2.MatMenuTrigger, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatList, i5.MatListItem, i13$1.MatSlider, i7$1.MatBadge, i12$1.MatCheckbox, i5$1.ListItemDirective, i5$1.ListComponent, i5$1.PanelComponent, LayerItemComponent,
     LayerListToolComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(LayerLegendListComponent, [i1$1.NgForOf, i1$1.NgIf, i11.MatDivider, i15$1.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(LayerLegendListComponent, [i1$1.NgForOf, i1$1.NgIf, i11.MatDivider, i23.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 
 /**
  * @ignore
@@ -20396,13 +20703,13 @@ IgoDrawModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FormsModul
                         BrowserModule,
                         BrowserAnimationsModule
                     ],
-                    declarations: [DrawComponent, DrawPopupComponent, DrawShorcutsComponent],
+                    declarations: [DrawComponent, DrawPopupComponent, DrawLayerPopupComponent, DrawShorcutsComponent],
                     exports: [DrawComponent]
                 }]
         }], null, null);
 })();
 (function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoDrawModule, { declarations: [DrawComponent, DrawPopupComponent, DrawShorcutsComponent], imports: [FormsModule,
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoDrawModule, { declarations: [DrawComponent, DrawPopupComponent, DrawLayerPopupComponent, DrawShorcutsComponent], imports: [FormsModule,
             ReactiveFormsModule,
             CommonModule,
             MatButtonModule,
@@ -24180,7 +24487,7 @@ TimeFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.style === "slider" && ctx.type !== "year");
         }
-    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i9.MatOption, i2.MatIcon, i3.MatButton, i13$1.MatSlider, i15$1.MatSlideToggle, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i12$2.MatDatetimepickerComponent, i12$2.MatDatetimepickerToggleComponent, i12$2.MatDatetimepickerInputDirective, i7.TranslatePipe], styles: [".igo-layer-filters-container[_ngcontent-%COMP%]{padding-left:5px}mat-slider[_ngcontent-%COMP%]     div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider[_ngcontent-%COMP%]     span.mat-slider-thumb-label-text{font-size:10px}#time-slider[_ngcontent-%COMP%]{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider[_ngcontent-%COMP%]{width:60%;margin:0 auto}}.date-below[_ngcontent-%COMP%]{margin:0}mat-form-field[_ngcontent-%COMP%]{text-align:center}mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{padding-bottom:30px}.igo-layer-actions-container[_ngcontent-%COMP%] > .mat-slide-toggle[_ngcontent-%COMP%]{vertical-align:middle}.time-filter-mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{width:auto}"] });
+    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i9.MatOption, i2.MatIcon, i3.MatButton, i13$1.MatSlider, i23.MatSlideToggle, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i12$2.MatDatetimepickerComponent, i12$2.MatDatetimepickerToggleComponent, i12$2.MatDatetimepickerInputDirective, i7.TranslatePipe], styles: [".igo-layer-filters-container[_ngcontent-%COMP%]{padding-left:5px}mat-slider[_ngcontent-%COMP%]     div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider[_ngcontent-%COMP%]     span.mat-slider-thumb-label-text{font-size:10px}#time-slider[_ngcontent-%COMP%]{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider[_ngcontent-%COMP%]{width:60%;margin:0 auto}}.date-below[_ngcontent-%COMP%]{margin:0}mat-form-field[_ngcontent-%COMP%]{text-align:center}mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{padding-bottom:30px}.igo-layer-actions-container[_ngcontent-%COMP%] > .mat-slide-toggle[_ngcontent-%COMP%]{vertical-align:middle}.time-filter-mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{width:auto}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterFormComponent, [{
             type: Component,
@@ -30275,8 +30582,8 @@ i0.ɵɵsetComponentScope(OgcFilterableFormComponent, [i1$1.NgForOf, i1$1.NgIf, i
 i0.ɵɵsetComponentScope(OgcFilterableItemComponent, [i1$1.NgClass, i1$1.NgIf, i1$1.NgStyle, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i12$1.MatCheckbox, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i11.MatDivider, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, OgcFilterableFormComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(OgcFilterableListComponent, [i1$1.NgForOf, i1$1.NgIf, i5$1.ListItemDirective, i5$1.ListComponent, OgcFilterableItemComponent], [i7.TranslatePipe, FilterableDataSourcePipe]);
 i0.ɵɵsetComponentScope(SpatialFilterTypeComponent, [i1$1.NgForOf, i9.MatOption, i2.MatIcon, i20.MatTabGroup, i20.MatTab, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i4.MatTooltip, SpatialFilterListComponent], [i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(SpatialFilterItemComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i17.MatRadioGroup, i17.MatRadioButton, i21.MatTable, i21.MatHeaderCellDef, i21.MatHeaderRowDef, i21.MatColumnDef, i21.MatRowDef, i21.MatHeaderCell, i21.MatHeaderRow, i21.MatRow, i22.MatNestedTreeNode, i22.MatTreeNodeDef, i22.MatTreeNodeToggle, i22.MatTree, i22.MatTreeNode, i22.MatTreeNodeOutlet, i12$1.MatCheckbox, i15$1.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(OgcFilterTimeComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i15$1.MatSlideToggle, i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i25.MatDatepicker, i25.MatDatepickerInput, i25.MatDatepickerToggle, OgcFilterTimeSliderComponent], [i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(SpatialFilterItemComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i17.MatRadioGroup, i17.MatRadioButton, i21.MatTable, i21.MatHeaderCellDef, i21.MatHeaderRowDef, i21.MatColumnDef, i21.MatRowDef, i21.MatHeaderCell, i21.MatHeaderRow, i21.MatRow, i22.MatNestedTreeNode, i22.MatTreeNodeDef, i22.MatTreeNodeToggle, i22.MatTree, i22.MatTreeNode, i22.MatTreeNodeOutlet, i12$1.MatCheckbox, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterTimeComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i25.MatDatepicker, i25.MatDatepickerInput, i25.MatDatepickerToggle, OgcFilterTimeSliderComponent], [i7.TranslatePipe]);
 
 function ExportButtonComponent_button_0_Template(rf, ctx) {
     if (rf & 1) {
@@ -32341,7 +32648,7 @@ ImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Impor
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(13, 15, ctx.exportableLayers$).length > 0 && ctx.selectedMode === "export");
         }
-    }, dependencies: [i4.MatTooltip, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i14.MatInput, i15$1.MatSlideToggle, i5$1.SpinnerComponent, i5$1.CustomHtmlComponent, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-option.igo-export-layer-mat-option[_ngcontent-%COMP%]{height:5em;line-height:1em}.import-export-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}h4[_ngcontent-%COMP%]{padding:0 5px}.igo-form[_ngcontent-%COMP%]{padding:15px 5px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-spinner[_ngcontent-%COMP%]{position:absolute;padding-left:10px}.export-options[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]{overflow-x:hidden}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger[_ngcontent-%COMP%]{opacity:.75;font-size:.75em}"] });
+    }, dependencies: [i4.MatTooltip, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i5$1.SpinnerComponent, i5$1.CustomHtmlComponent, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-option.igo-export-layer-mat-option[_ngcontent-%COMP%]{height:5em;line-height:1em}.import-export-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}h4[_ngcontent-%COMP%]{padding:0 5px}.igo-form[_ngcontent-%COMP%]{padding:15px 5px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-spinner[_ngcontent-%COMP%]{position:absolute;padding-left:10px}.export-options[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]{overflow-x:hidden}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger[_ngcontent-%COMP%]{opacity:.75;font-size:.75em}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportExportComponent, [{
             type: Component,
@@ -32920,7 +33227,7 @@ IgoMeasurerModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Common
             IgoEntityTableModule], exports: [MeasureFormatPipe,
             MeasurerComponent] });
 })();
-i0.ɵɵsetComponentScope(MeasurerComponent, [i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i2.MatIcon, i4.MatTooltip, i15$1.MatSlideToggle, i11.MatDivider, i5$1.EntityTableComponent, MeasurerItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(MeasurerComponent, [i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i2.MatIcon, i4.MatTooltip, i23.MatSlideToggle, i11.MatDivider, i5$1.EntityTableComponent, MeasurerItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(MeasurerDialogComponent, [i1$1.NgIf], [i7.TranslatePipe, MeasureFormatPipe]);
 
 class IgoMeasureModule {
@@ -34241,7 +34548,7 @@ PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFor
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(64, 70, "igo.geo.printForm.saveBtn"), " ");
         }
-    }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i3.MatButton, i13.MatFormField, i15.MatSelect, i9.MatOption, i14.MatInput, i15$1.MatSlideToggle, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.print-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding[_ngcontent-%COMP%]{padding-top:25px}.igo-form[_ngcontent-%COMP%]{padding:10px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center}"] });
+    }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i3.MatButton, i13.MatFormField, i15.MatSelect, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.print-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding[_ngcontent-%COMP%]{padding-top:25px}.igo-form[_ngcontent-%COMP%]{padding:10px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintFormComponent, [{
             type: Component,
@@ -38362,7 +38669,7 @@ SearchSettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasPointerReverseSearchSource && !ctx.isTouchScreen);
         }
-    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgSwitch, i1$1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12$1.MatCheckbox, i11.MatDivider, i15$1.MatSlideToggle, i7.TranslatePipe], styles: [".checkAllButton[_ngcontent-%COMP%]{text-align:center;padding:0 5px}.igo-search-settings-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column}.igo-search-settings-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}.igo-search-settings-checkbox[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{display:flex}.igo-search-settings-search-source[_ngcontent-%COMP%]{display:flex;width:100%}.igo-search-settings-search-source[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin:10px}"], changeDetection: 0 });
+    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgSwitch, i1$1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12$1.MatCheckbox, i11.MatDivider, i23.MatSlideToggle, i7.TranslatePipe], styles: [".checkAllButton[_ngcontent-%COMP%]{text-align:center;padding:0 5px}.igo-search-settings-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column}.igo-search-settings-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}.igo-search-settings-checkbox[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{display:flex}.igo-search-settings-search-source[_ngcontent-%COMP%]{display:flex;width:100%}.igo-search-settings-search-source[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin:10px}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSettingsComponent, [{
             type: Component,