@igo2/context 1.14.2 → 1.15.1

package/fesm2020/igo2-context.mjs

@@ -30,9 +30,8 @@ import * as i1$2 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { Observable, BehaviorSubject, Subject, of, merge, ReplaySubject, EMPTY, timer, combineLatest } from 'rxjs';
 import { skip, first, catchError, tap, map, mergeMap, debounceTime, take, filter, buffer, debounce } from 'rxjs/operators';
-import * as olStyle from 'ol/style';
 import * as i1$1 from '@igo2/geo';
-import { FeatureDataSource, VectorLayer, ClusterDataSource, moveToOlFeatures, FeatureMotion, IgoFeatureModule } from '@igo2/geo';
+import { FeatureDataSource, featureRandomStyleFunction, featureRandomStyle, VectorLayer, ClusterDataSource, moveToOlFeatures, FeatureMotion, IgoFeatureModule } from '@igo2/geo';
 import { downloadContent, ObjectUtils, uuid, Clipboard } from '@igo2/utils';
 import olPoint from 'ol/geom/Point';
 import GeoJSON from 'ol/format/GeoJSON';
@@ -76,85 +75,59 @@ class ExportNothingToExportError extends ExportError {
     }
 }
 
-function handleFileExportError(error, messageService, languageService) {
+function handleFileExportError(error, messageService) {
     if (error instanceof ExportNothingToExportError) {
-        this.handleNothingToExportError(messageService, languageService);
+        this.handleNothingToExportError(messageService);
         return;
     }
-    const translate = languageService.translate;
-    const title = translate.instant('igo.context.contextImportExport.export.failed.title');
-    const message = translate.instant('igo.context.contextImportExport.export.failed.text');
-    messageService.error(message, title);
+    messageService.error('igo.context.contextImportExport.export.failed.text', 'igo.context.contextImportExport.export.failed.title');
 }
-function handleFileExportSuccess(messageService, languageService) {
-    const translate = languageService.translate;
-    const title = translate.instant('igo.context.contextImportExport.export.success.title');
-    const message = translate.instant('igo.context.contextImportExport.export.success.text');
-    messageService.success(message, title);
+function handleFileExportSuccess(messageService) {
+    messageService.success('igo.context.contextImportExport.export.success.text', 'igo.context.contextImportExport.export.success.title');
 }
-function handleNothingToExportError(messageService, languageService) {
-    const translate = languageService.translate;
-    const title = translate.instant('igo.context.contextImportExport.export.nothing.title');
-    const message = translate.instant('igo.context.contextImportExport.export.nothing.text');
-    messageService.error(message, title);
+function handleNothingToExportError(messageService) {
+    messageService.error('igo.context.contextImportExport.export.nothing.text', 'igo.context.contextImportExport.export.nothing.title');
 }
 
-function handleFileImportSuccess(file, context, messageService, languageService, contextService) {
+function handleFileImportSuccess(file, context, messageService, contextService) {
     if (Object.keys(context).length <= 0) {
-        handleNothingToImportError(file, messageService, languageService);
+        handleNothingToImportError(file, messageService);
         return;
     }
     const contextTitle = computeLayerTitleFromFile(file);
     addContextToContextList(context, contextTitle, contextService);
-    const translate = languageService.translate;
-    const messageTitle = translate.instant('igo.context.contextImportExport.import.success.title');
-    const message = translate.instant('igo.context.contextImportExport.import.success.text', {
+    messageService.success('igo.context.contextImportExport.import.success.text', 'igo.context.contextImportExport.import.success.title', undefined, {
         value: contextTitle
     });
-    messageService.success(message, messageTitle);
 }
-function handleFileImportError(file, error, messageService, languageService, sizeMb) {
+function handleFileImportError(file, error, messageService, sizeMb) {
     sizeMb = sizeMb ? sizeMb : 30;
     const errMapping = {
         'Invalid file': handleInvalidFileImportError,
         'File is too large': handleSizeFileImportError,
         'Failed to read file': handleUnreadbleFileImportError
     };
-    errMapping[error.message](file, error, messageService, languageService, sizeMb);
+    errMapping[error.message](file, error, messageService, sizeMb);
 }
-function handleInvalidFileImportError(file, error, messageService, languageService) {
-    const translate = languageService.translate;
-    const title = translate.instant('igo.context.contextImportExport.import.invalid.title');
-    const message = translate.instant('igo.context.contextImportExport.import.invalid.text', {
+function handleInvalidFileImportError(file, error, messageService) {
+    messageService.error('igo.context.contextImportExport.import.invalid.text', 'igo.context.contextImportExport.import.invalid.title', undefined, {
         value: file.name,
         mimeType: file.type
     });
-    messageService.error(message, title);
 }
-function handleSizeFileImportError(file, error, messageService, languageService, sizeMb) {
-    const translate = languageService.translate;
-    const title = translate.instant('igo.context.contextImportExport.import.tooLarge.title');
-    const message = translate.instant('igo.context.contextImportExport.import.tooLarge.text', {
+function handleSizeFileImportError(file, error, messageService, sizeMb) {
+    messageService.error('igo.context.contextImportExport.import.tooLarge.text', 'igo.context.contextImportExport.import.tooLarge.title', undefined, {
         value: file.name,
         size: sizeMb
     });
-    messageService.error(message, title);
 }
-function handleUnreadbleFileImportError(file, error, messageService, languageService) {
-    const translate = languageService.translate;
-    const title = translate.instant('igo.context.contextImportExport.import.unreadable.title');
-    const message = translate.instant('igo.context.contextImportExport.import.unreadable.text', {
+function handleUnreadbleFileImportError(file, error, messageService) {
+    messageService.error('igo.context.contextImportExport.import.unreadable.text', 'igo.context.contextImportExport.import.unreadable.title', undefined, {
         value: file.name
     });
-    messageService.error(message, title);
 }
-function handleNothingToImportError(file, messageService, languageService) {
-    const translate = languageService.translate;
-    const title = translate.instant('igo.context.contextImportExport.import.empty.title');
-    const message = translate.instant('igo.context.contextImportExport.import.empty.text', {
-        value: file.name
-    });
-    messageService.error(message, title);
+function handleNothingToImportError(file, messageService) {
+    messageService.error('igo.context.contextImportExport.import.empty.text', 'igo.context.contextImportExport.import.empty.title', undefined, { value: file.name });
 }
 function addContextToContextList(context, contextTitle, contextService) {
     context.title = contextTitle;
@@ -171,35 +144,28 @@ function computeLayerTitleFromFile(file) {
     return file.name.substr(0, file.name.lastIndexOf('.'));
 }
 function addImportedFeaturesToMap(olFeatures, map, layerTitle) {
-    const r = Math.floor(Math.random() * 255);
-    const g = Math.floor(Math.random() * 255);
-    const b = Math.floor(Math.random() * 255);
-    const stroke = new olStyle.Stroke({
-        color: [r, g, b, 1],
-        width: 2
-    });
-    const fill = new olStyle.Fill({
-        color: [r, g, b, 0.4]
-    });
     const sourceOptions = {
         type: 'vector',
         queryable: true
     };
     const source = new FeatureDataSource(sourceOptions);
     source.ol.addFeatures(olFeatures);
+    let randomStyle;
+    let editable = false;
+    if (olFeatures[0].getKeys().includes('_style') ||
+        olFeatures[0].getKeys().includes('_mapTitle')) {
+        randomStyle = featureRandomStyleFunction();
+    }
+    else {
+        randomStyle = featureRandomStyle();
+        editable = true;
+    }
     const layer = new VectorLayer({
         title: layerTitle,
         isIgoInternalLayer: true,
         source,
-        style: new olStyle.Style({
-            stroke,
-            fill,
-            image: new olStyle.Circle({
-                radius: 5,
-                stroke,
-                fill
-            })
-        })
+        igoStyle: { editable },
+        style: randomStyle
     });
     map.addLayer(layer);
     return layer;
@@ -792,16 +758,17 @@ class ContextService {
             };
         });
         layers.forEach((layer) => {
+            // Do not seem to work properly. layerFound is always undefined.
             const layerFound = currentContext.layers.find((contextLayer) => {
                 const source = contextLayer.source;
                 return source && layer.id === source.id && !contextLayer.baseLayer;
             });
             if (layerFound) {
                 let layerStyle = layerFound[`style`];
-                if (layerFound[`styleByAttribute`]) {
+                if (layerFound[`igoStyle`][`styleByAttribute`]) {
                     layerStyle = undefined;
                 }
-                else if (layerFound[`clusterBaseStyle`]) {
+                else if (layerFound[`igoStyle`][`clusterBaseStyle`]) {
                     layerStyle = undefined;
                     delete layerFound.sourceOptions[`source`];
                     delete layerFound.sourceOptions[`format`];
@@ -810,8 +777,10 @@ class ContextService {
                     baseLayer: layerFound.baseLayer,
                     title: layer.options.title,
                     zIndex: layer.zIndex,
-                    styleByAttribute: layerFound[`styleByAttribute`],
-                    clusterBaseStyle: layerFound[`clusterBaseStyle`],
+                    igoStyle: {
+                        styleByAttribute: layerFound[`igoStyle`][`styleByAttribute`],
+                        clusterBaseStyle: layerFound[`igoStyle`][`clusterBaseStyle`],
+                    },
                     style: layerStyle,
                     clusterParam: layerFound[`clusterParam`],
                     visible: layer.visible,
@@ -951,7 +920,7 @@ class ContextService {
             error.error.title = this.languageService.translate.instant('igo.context.contextManager.errors.addPermissionTitle');
             error.error.message = this.languageService.translate.instant('igo.context.contextManager.errors.addPermission');
         }
-        this.messageService.error(error.error.message, error.error.title);
+        this.messageService.error('igo.context.contextManager.errors.addPermission', 'igo.context.contextManager.errors.addPermissionTitle');
     }
     handleContextsChange(keepCurrentContext = true) {
         const context = this.context$.value;
@@ -1119,10 +1088,9 @@ function ContextImportExportComponent_form_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("shown", i0.ɵɵpipeBind1(25, 19, ctx_r1.loading$));
 } }
 class ContextImportExportComponent {
-    constructor(contextImportService, contextExportService, languageService, messageService, formBuilder, config, contextService) {
+    constructor(contextImportService, contextExportService, messageService, formBuilder, config, contextService) {
         this.contextImportService = contextImportService;
         this.contextExportService = contextExportService;
-        this.languageService = languageService;
         this.messageService = messageService;
         this.formBuilder = formBuilder;
         this.config = config;
@@ -1165,18 +1133,18 @@ class ContextImportExportComponent {
         });
     }
     onFileImportSuccess(file, context) {
-        handleFileImportSuccess(file, context, this.messageService, this.languageService, this.contextService);
+        handleFileImportSuccess(file, context, this.messageService, this.contextService);
     }
     onFileImportError(file, error) {
         this.loading$.next(false);
-        handleFileImportError(file, error, this.messageService, this.languageService, this.fileSizeMb);
+        handleFileImportError(file, error, this.messageService, this.fileSizeMb);
     }
     onFileExportError(error) {
         this.loading$.next(false);
-        handleFileExportError(error, this.messageService, this.languageService);
+        handleFileExportError(error, this.messageService);
     }
     onFileExportSuccess() {
-        handleFileExportSuccess(this.messageService, this.languageService);
+        handleFileExportSuccess(this.messageService);
     }
     selectAll(e) {
         if (e._selected) {
@@ -1191,7 +1159,7 @@ class ContextImportExportComponent {
         this.activeImportExport = event.value;
     }
 }
-ContextImportExportComponent.ɵfac = function ContextImportExportComponent_Factory(t) { return new (t || ContextImportExportComponent)(i0.ɵɵdirectiveInject(ContextImportService), i0.ɵɵdirectiveInject(ContextExportService), i0.ɵɵdirectiveInject(i3.LanguageService), i0.ɵɵdirectiveInject(i3.MessageService), i0.ɵɵdirectiveInject(i1$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(i3.ConfigService), i0.ɵɵdirectiveInject(ContextService)); };
+ContextImportExportComponent.ɵfac = function ContextImportExportComponent_Factory(t) { return new (t || ContextImportExportComponent)(i0.ɵɵdirectiveInject(ContextImportService), i0.ɵɵdirectiveInject(ContextExportService), i0.ɵɵdirectiveInject(i3.MessageService), i0.ɵɵdirectiveInject(i1$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(i3.ConfigService), i0.ɵɵdirectiveInject(ContextService)); };
 ContextImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContextImportExportComponent, selectors: [["igo-context-import-export"]], inputs: { map: "map" }, decls: 10, vars: 11, consts: [[1, "import-export-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [4, "ngIf"], ["class", "igo-form", 3, "formGroup", 4, "ngIf"], [1, "igo-form"], [1, "igo-form-button-group"], ["mat-raised-button", "", "type", "button", 3, "disabled", "click"], [3, "shown"], ["type", "file", 3, "click", "change"], ["fileInput", ""], [1, "mat-typography"], [1, "igo-form", 3, "formGroup"], [1, "igo-input-container"], [1, "example-full-width"], ["formControlName", "name", "matInput", "", 3, "value"], ["formControlName", "layers", "multiple", ""], [3, "value", "click"], ["e", ""], [3, "value", 4, "ngFor", "ngForOf"]], template: function ContextImportExportComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "mat-button-toggle-group", 1);
         i0.ɵɵlistener("change", function ContextImportExportComponent_Template_mat_button_toggle_group_change_1_listener($event) { return ctx.onImportExportChange($event); });
@@ -1223,8 +1191,8 @@ ContextImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
     } }, dependencies: [i1$2.ɵNgNoValidate, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgForm, i1$2.FormGroupDirective, i1$2.FormControlName, i4.NgForOf, i4.NgIf, i7.MatButton, i8.MatButtonToggleGroup, i8.MatButtonToggle, i9.MatDivider, i6.MatFormField, i6.MatLabel, i11.MatSelect, i12.MatOption, i5.MatInput, i13.SpinnerComponent, i4.AsyncPipe, i9$1.TranslatePipe], styles: [".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%}.igo-input-container[_ngcontent-%COMP%]{padding:10px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}h4[_ngcontent-%COMP%]{padding:0 5px}.igo-form[_ngcontent-%COMP%]{padding:15px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-spinner[_ngcontent-%COMP%]{position:absolute;padding-left:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextImportExportComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-import-export', template: "<div class=\"import-export-toggle mat-typography\">\n    <mat-button-toggle-group\n          [value]=\"activeImportExport\"\n          (change)=\"onImportExportChange($event)\">\n          <mat-button-toggle [value]=\"'import'\">\n            {{'igo.geo.importExportForm.importTabTitle' | translate}}\n          </mat-button-toggle>\n          <mat-button-toggle [value]=\"'export'\">\n            {{'igo.geo.importExportForm.exportTabTitle' | translate}}\n          </mat-button-toggle>\n    </mat-button-toggle-group>\n</div>\n\n<div *ngIf=\"activeImportExport === 'import'\">\n    <form class=\"igo-form\">\n        <div class=\"igo-form-button-group\">\n            <button mat-raised-button type=\"button\" (click)=\"fileInput.click()\" [disabled]=\"loading$ | async\">\n                {{'igo.geo.importExportForm.importButton' | translate}}\n            </button>\n            <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n            <input\n                #fileInput\n                type=\"file\"\n                [style.display]=\"'none'\"\n                (click)=\"fileInput.value = null\"\n                (change)=\"importFiles($event.target.files)\">\n        </div>\n    </form>\n    <section class=\"mat-typography\">\n        <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>\n            <ul>\n                <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\n            </ul>\n    </section>\n</div>\n\n\n<form class=\"igo-form\" *ngIf=\"activeImportExport === 'export'\" [formGroup]=\"form\">\n    <div class=\"igo-input-container\">\n        <mat-form-field class=\"example-full-width\">\n            <mat-label>{{'igo.context.contextImportExport.export.exportContextName' | translate}}</mat-label>\n            <input formControlName=\"name\" matInput [value]=\"\">\n        </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n        <mat-form-field>\n            <mat-label>{{'igo.context.contextImportExport.export.exportPlaceHolder' | translate}}</mat-label>\n            <mat-select formControlName=\"layers\" multiple>\n                <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\n                    {{'igo.context.contextImportExport.export.exportSelectAll' | translate}}\n                </mat-option>\n                <mat-divider></mat-divider>\n                <mat-option *ngFor=\"let layer of userControlledLayerList\" [value]=\"layer\">{{layer.title}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n    <div class=\"igo-form-button-group\">\n        <button\n            mat-raised-button\n            type=\"button\"\n            [disabled]=\"!form.valid || (loading$ | async)\"\n            (click)=\"handleExportFormSubmit(form.value)\">\n            {{'igo.geo.importExportForm.exportButton' | translate}}\n        </button>\n        <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n    </div>\n</form>\n", styles: [".import-export-toggle{padding:10px;text-align:center}.import-export-toggle mat-button-toggle-group{width:100%}.import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}.igo-input-container{padding:10px}.igo-input-container mat-form-field{width:100%}h4{padding:0 5px}.igo-form{padding:15px 5px}.igo-form-button-group{text-align:center;padding-top:10px}igo-spinner{position:absolute;padding-left:10px}\n"] }]
-    }], function () { return [{ type: ContextImportService }, { type: ContextExportService }, { type: i3.LanguageService }, { type: i3.MessageService }, { type: i1$2.UntypedFormBuilder }, { type: i3.ConfigService }, { type: ContextService }]; }, { map: [{
+        args: [{ selector: 'igo-context-import-export', template: "<div class=\"import-export-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n          [value]=\"activeImportExport\"\r\n          (change)=\"onImportExportChange($event)\">\r\n          <mat-button-toggle [value]=\"'import'\">\r\n            {{'igo.geo.importExportForm.importTabTitle' | translate}}\r\n          </mat-button-toggle>\r\n          <mat-button-toggle [value]=\"'export'\">\r\n            {{'igo.geo.importExportForm.exportTabTitle' | translate}}\r\n          </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n</div>\r\n\r\n<div *ngIf=\"activeImportExport === 'import'\">\r\n    <form class=\"igo-form\">\r\n        <div class=\"igo-form-button-group\">\r\n            <button mat-raised-button type=\"button\" (click)=\"fileInput.click()\" [disabled]=\"loading$ | async\">\r\n                {{'igo.geo.importExportForm.importButton' | translate}}\r\n            </button>\r\n            <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n            <input\r\n                #fileInput\r\n                type=\"file\"\r\n                [style.display]=\"'none'\"\r\n                (click)=\"fileInput.value = null\"\r\n                (change)=\"importFiles($event.target.files)\">\r\n        </div>\r\n    </form>\r\n    <section class=\"mat-typography\">\r\n        <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>\r\n            <ul>\r\n                <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\r\n            </ul>\r\n    </section>\r\n</div>\r\n\r\n\r\n<form class=\"igo-form\" *ngIf=\"activeImportExport === 'export'\" [formGroup]=\"form\">\r\n    <div class=\"igo-input-container\">\r\n        <mat-form-field class=\"example-full-width\">\r\n            <mat-label>{{'igo.context.contextImportExport.export.exportContextName' | translate}}</mat-label>\r\n            <input formControlName=\"name\" matInput [value]=\"\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n        <mat-form-field>\r\n            <mat-label>{{'igo.context.contextImportExport.export.exportPlaceHolder' | translate}}</mat-label>\r\n            <mat-select formControlName=\"layers\" multiple>\r\n                <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\r\n                    {{'igo.context.contextImportExport.export.exportSelectAll' | translate}}\r\n                </mat-option>\r\n                <mat-divider></mat-divider>\r\n                <mat-option *ngFor=\"let layer of userControlledLayerList\" [value]=\"layer\">{{layer.title}}</mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-form-button-group\">\r\n        <button\r\n            mat-raised-button\r\n            type=\"button\"\r\n            [disabled]=\"!form.valid || (loading$ | async)\"\r\n            (click)=\"handleExportFormSubmit(form.value)\">\r\n            {{'igo.geo.importExportForm.exportButton' | translate}}\r\n        </button>\r\n        <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n    </div>\r\n</form>\r\n", styles: [".import-export-toggle{padding:10px;text-align:center}.import-export-toggle mat-button-toggle-group{width:100%}.import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}.igo-input-container{padding:10px}.igo-input-container mat-form-field{width:100%}h4{padding:0 5px}.igo-form{padding:15px 5px}.igo-form-button-group{text-align:center;padding-top:10px}igo-spinner{position:absolute;padding-left:10px}\n"] }]
+    }], function () { return [{ type: ContextImportService }, { type: ContextExportService }, { type: i3.MessageService }, { type: i1$2.UntypedFormBuilder }, { type: i3.ConfigService }, { type: ContextService }]; }, { map: [{
             type: Input
         }] }); })();
 
@@ -1411,15 +1379,7 @@ class LayerContextDirective {
         layersAndIndex$
             .pipe(buffer(layersAndIndex$.pipe(debounceTime(500))))
             .subscribe((layers) => {
-            layers = layers
-                .filter((layer) => layer !== undefined)
-                .map((layer) => {
-                layer.visible = this.computeLayerVisibilityFromUrl(layer);
-                layer.zIndex = layer.zIndex;
-                return layer;
-            });
-            this.contextLayers.concat(layers);
-            this.map.addLayers(layers);
+            this.handleAddLayers(layers);
             if (context.extraFeatures) {
                 context.extraFeatures.forEach((featureCollection) => {
                     const format = new GeoJSON();
@@ -1429,7 +1389,18 @@ class LayerContextDirective {
                         dataProjection: 'EPSG:4326',
                         featureProjection: 'EPSG:3857'
                     });
-                    if (!this.configService.getConfig('importWithStyle')) {
+                    const importExportOptions = this.configService.getConfig('importExport');
+                    const importWithStyle = importExportOptions?.importWithStyle || this.configService.getConfig('importWithStyle');
+                    if (this.configService.getConfig('importWithStyle')) {
+                        console.warn(`
+              The location of this config importWithStyle is deprecated.
+              Please move this property within importExport configuration.
+              Ex: importWithStyle: true/false must be transfered to importExport: { importWithStyle: true/false }
+              Refer to environnement.ts OR config/config.json
+              This legacy conversion will be deleted in 2024.
+              `);
+                    }
+                    if (!importWithStyle) {
                         addImportedFeaturesToMap(featureCollection, this.map, title);
                     }
                     else {
@@ -1438,6 +1409,19 @@ class LayerContextDirective {
                 });
             }
         });
+        this.layerService.createAsyncIdbLayers(context.uri).pipe(debounceTime(500))
+            .subscribe((layers) => this.handleAddLayers(layers));
+    }
+    handleAddLayers(layers) {
+        layers = layers
+            .filter((layer) => layer !== undefined)
+            .map((layer) => {
+            layer.visible = this.computeLayerVisibilityFromUrl(layer);
+            layer.zIndex = layer.zIndex;
+            return layer;
+        });
+        this.contextLayers.concat(layers);
+        this.map.addLayers(layers);
     }
     computeLayerVisibilityFromUrl(layer) {
         const params = this.queryParams;
@@ -1543,7 +1527,7 @@ BookmarkDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Boo
     } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.RequiredValidator, i1$2.MaxLengthValidator, i1$2.NgModel, i7.MatButton, i6.MatFormField, i1$3.MatDialogTitle, i1$3.MatDialogContent, i1$3.MatDialogActions, i5.MatInput, i9$1.TranslatePipe], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BookmarkDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-bookmark-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{ 'igo.context.bookmarkButton.dialog.title' |\u00A0translate }}</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <mat-form-field>\n    <input matInput required autocomplete=\"off\"\n      maxlength=\"128\"\n      [placeholder]=\"'igo.context.bookmarkButton.dialog.placeholder' |\u00A0translate\"\n      [(ngModel)]=\"title\">\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-button color=\"primary\"\n         [disabled]=\"!title\"\n         (click)=\"dialogRef.close(title)\">\n    {{'igo.common.confirmDialog.confirmBtn' | translate}}\n  </button>\n  <button mat-button\n          (click)=\"dialogRef.close(false)\">\n    {{'igo.common.confirmDialog.cancelBtn' |\u00A0translate}}\n  </button>\n</div>\n" }]
+        args: [{ selector: 'igo-bookmark-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{ 'igo.context.bookmarkButton.dialog.title' |\u00A0translate }}</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <mat-form-field>\r\n    <input matInput required autocomplete=\"off\"\r\n      maxlength=\"128\"\r\n      [placeholder]=\"'igo.context.bookmarkButton.dialog.placeholder' |\u00A0translate\"\r\n      [(ngModel)]=\"title\">\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button color=\"primary\"\r\n         [disabled]=\"!title\"\r\n         (click)=\"dialogRef.close(title)\">\r\n    {{'igo.common.confirmDialog.confirmBtn' | translate}}\r\n  </button>\r\n  <button mat-button\r\n          (click)=\"dialogRef.close(false)\">\r\n    {{'igo.common.confirmDialog.cancelBtn' |\u00A0translate}}\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i1$3.MatDialogRef }]; }, null); })();
 
 function ContextItemComponent_button_1_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
@@ -1749,7 +1733,7 @@ ContextItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Contex
     } }, dependencies: [i4.NgClass, i4.NgIf, i4$1.MatIcon, i7.MatButton, i6$1.MatTooltip, i7$1.MatListItem, i7$1.MatListAvatarCssMatStyler, i12.MatLine, i13.CollapseDirective, i13.StopPropagationDirective, i9$1.TranslatePipe], styles: ["[_nghost-%COMP%]{overflow:hidden}.igo-actions-container[_ngcontent-%COMP%]{flex-shrink:0}.igo-actions-expand-container[_ngcontent-%COMP%]{display:inline-flex}mat-list-item[_ngcontent-%COMP%]     .mat-list-item-content .mat-list-text{padding:0}mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}mat-list-item.mat-list-item-light[_ngcontent-%COMP%]     .mat-list-item-content{color:#969696}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item\n  class=\"mat-list-item\"\n  [ngClass]=\"{'mat-list-item-light': hidden}\">\n  <button mat-list-avatar\n    *ngIf=\"auth.authenticated\"\n    mat-icon-button\n    igoStopPropagation\n    [matTooltip]=\"auth.authenticated ? ('igo.context.contextManager.favorite' | translate) : ''\"\n    matTooltipShowDelay=\"500\"\n    [color]=\"default ? 'primary' : 'default'\"\n    (click)=\"favoriteClick(context)\">\n    <mat-icon *ngIf=\"!context.iconImage\" svgIcon=\"{{context.icon ? context.icon : context.scope === 'public' ? 'earth' : 'star'}}\"></mat-icon>\n    <img *ngIf=\"context.iconImage\" [src]=\"context.iconImage\">\n  </button>\n  <button mat-list-avatar\n    *ngIf=\"!auth.authenticated && showFavorite\"\n    mat-icon-button\n    igoStopPropagation\n    [matTooltip]=\"'igo.context.contextManager.favorite' | translate\"\n    matTooltipShowDelay=\"500\"\n    [color]=\"default ? 'primary' : 'default'\"\n    (click)=\"favoriteClick(context)\">\n    <mat-icon svgIcon=\"star\"></mat-icon>\n  </button>\n  <h4 matLine>{{context.title}}</h4>\n\n  <div *ngIf=\"auth.authenticated\"\n       igoStopPropagation\n       class=\"igo-actions-container\">\n\n     <button *ngIf=\"collapsed && selected && (context.permission === typePermission[typePermission.write] || context.imported)\"\n       class=\"save-button\"\n       mat-icon-button\n       [matTooltip]=\"'igo.context.contextManager.save' | translate\"\n       matTooltipShowDelay=\"500\"\n       [color]=\"color\"\n       (click)=\"save.emit(context)\">\n       <mat-icon svgIcon=\"content-save\"></mat-icon>\n     </button>\n\n    <div #actions class=\"igo-actions-expand-container\">\n\n      <button *ngIf=\"canShare && !context.imported\"\n        mat-icon-button\n        [matTooltip]=\"'igo.context.contextManager.managePermissions' | translate\"\n        matTooltipShowDelay=\"500\"\n        [color]=\"color\"\n        (click)=\"managePermissions.emit(context)\">\n        <mat-icon svgIcon=\"account-arrow-right\"></mat-icon>\n      </button>\n\n      <!--button\n        mat-icon-button\n        [matTooltip]=\"'igo.context.contextManager.manageTools' | translate\"\n        [color]=\"color\"\n        (click)=\"manageTools.emit(context)\">\n        <mat-icon svgIcon=\"widgets\"></mat-icon>\n      </button-->\n\n      <button *ngIf=\"!context.imported\"\n        class=\"clone-button\"\n        mat-icon-button\n        [matTooltip]=\"'igo.context.contextManager.clone' | translate\"\n        matTooltipShowDelay=\"500\"\n        [color]=\"color\"\n        (click)=\"clone.emit(context)\">\n        <mat-icon svgIcon=\"content-copy\"></mat-icon>\n      </button>\n\n      <button *ngIf=\"context.permission === typePermission[typePermission.write] && !context.imported\"\n        class=\"edit-button\"\n        mat-icon-button\n        [color]=\"color\"\n        [matTooltip]=\"'igo.context.contextManager.edit' | translate\"\n        matTooltipShowDelay=\"500\"\n        (click)=\"edit.emit(context)\">\n        <mat-icon svgIcon=\"pencil\"></mat-icon>\n      </button>\n\n      <button *ngIf=\"!context.hidden && !context.imported\"\n        class=\"hide-button\"\n        mat-icon-button\n        [color]=\"color\"\n        [matTooltip]=\"'igo.context.contextManager.hide' | translate\"\n        matTooltipShowDelay=\"500\"\n        (click)=\"hide.emit(context)\">\n        <mat-icon svgIcon=\"eye\"></mat-icon>\n      </button>\n\n      <button *ngIf=\"context.hidden && !context.imported\"\n        class=\"hide-button\"\n        mat-icon-button\n        [color]=\"color\"\n        [matTooltip]=\"'igo.context.contextManager.show' | translate\"\n        matTooltipShowDelay=\"500\"\n        (click)=\"show.emit(context)\">\n        <mat-icon svgIcon=\"eye-off\"></mat-icon>\n      </button>\n\n      <button *ngIf=\"context.permission === typePermission[typePermission.write] || context.imported\"\n        class=\"delete-button\"\n        mat-icon-button\n        color=\"warn\"\n        [matTooltip]=\"'igo.context.contextManager.delete' | translate\"\n        matTooltipShowDelay=\"500\"\n        (click)=\"delete.emit(context)\">\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n    </div>\n\n    <button\n      class=\"actions-button\"\n      mat-icon-button\n      igoCollapse\n      [color]=\"color\"\n      [target]=\"actions\"\n      [collapsed]=collapsed\n      (click)=\"collapsed = !collapsed\">\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\n    </button>\n\n  </div>\n\n</mat-list-item>\n", styles: [":host{overflow:hidden}.igo-actions-container{flex-shrink:0}.igo-actions-expand-container{display:inline-flex}mat-list-item ::ng-deep .mat-list-item-content .mat-list-text{padding:0}mat-icon.disabled{color:#00000061}mat-list-item.mat-list-item-light ::ng-deep .mat-list-item-content{color:#969696}\n"] }]
+        args: [{ selector: 'igo-context-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item\r\n  class=\"mat-list-item\"\r\n  [ngClass]=\"{'mat-list-item-light': hidden}\">\r\n  <button mat-list-avatar\r\n    *ngIf=\"auth.authenticated\"\r\n    mat-icon-button\r\n    igoStopPropagation\r\n    [matTooltip]=\"auth.authenticated ? ('igo.context.contextManager.favorite' | translate) : ''\"\r\n    matTooltipShowDelay=\"500\"\r\n    [color]=\"default ? 'primary' : 'default'\"\r\n    (click)=\"favoriteClick(context)\">\r\n    <mat-icon *ngIf=\"!context.iconImage\" svgIcon=\"{{context.icon ? context.icon : context.scope === 'public' ? 'earth' : 'star'}}\"></mat-icon>\r\n    <img *ngIf=\"context.iconImage\" [src]=\"context.iconImage\">\r\n  </button>\r\n  <button mat-list-avatar\r\n    *ngIf=\"!auth.authenticated && showFavorite\"\r\n    mat-icon-button\r\n    igoStopPropagation\r\n    [matTooltip]=\"'igo.context.contextManager.favorite' | translate\"\r\n    matTooltipShowDelay=\"500\"\r\n    [color]=\"default ? 'primary' : 'default'\"\r\n    (click)=\"favoriteClick(context)\">\r\n    <mat-icon svgIcon=\"star\"></mat-icon>\r\n  </button>\r\n  <h4 matLine>{{context.title}}</h4>\r\n\r\n  <div *ngIf=\"auth.authenticated\"\r\n       igoStopPropagation\r\n       class=\"igo-actions-container\">\r\n\r\n     <button *ngIf=\"collapsed && selected && (context.permission === typePermission[typePermission.write] || context.imported)\"\r\n       class=\"save-button\"\r\n       mat-icon-button\r\n       [matTooltip]=\"'igo.context.contextManager.save' | translate\"\r\n       matTooltipShowDelay=\"500\"\r\n       [color]=\"color\"\r\n       (click)=\"save.emit(context)\">\r\n       <mat-icon svgIcon=\"content-save\"></mat-icon>\r\n     </button>\r\n\r\n    <div #actions class=\"igo-actions-expand-container\">\r\n\r\n      <button *ngIf=\"canShare && !context.imported\"\r\n        mat-icon-button\r\n        [matTooltip]=\"'igo.context.contextManager.managePermissions' | translate\"\r\n        matTooltipShowDelay=\"500\"\r\n        [color]=\"color\"\r\n        (click)=\"managePermissions.emit(context)\">\r\n        <mat-icon svgIcon=\"account-arrow-right\"></mat-icon>\r\n      </button>\r\n\r\n      <!--button\r\n        mat-icon-button\r\n        [matTooltip]=\"'igo.context.contextManager.manageTools' | translate\"\r\n        [color]=\"color\"\r\n        (click)=\"manageTools.emit(context)\">\r\n        <mat-icon svgIcon=\"widgets\"></mat-icon>\r\n      </button-->\r\n\r\n      <button *ngIf=\"!context.imported\"\r\n        class=\"clone-button\"\r\n        mat-icon-button\r\n        [matTooltip]=\"'igo.context.contextManager.clone' | translate\"\r\n        matTooltipShowDelay=\"500\"\r\n        [color]=\"color\"\r\n        (click)=\"clone.emit(context)\">\r\n        <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n      </button>\r\n\r\n      <button *ngIf=\"context.permission === typePermission[typePermission.write] && !context.imported\"\r\n        class=\"edit-button\"\r\n        mat-icon-button\r\n        [color]=\"color\"\r\n        [matTooltip]=\"'igo.context.contextManager.edit' | translate\"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"edit.emit(context)\">\r\n        <mat-icon svgIcon=\"pencil\"></mat-icon>\r\n      </button>\r\n\r\n      <button *ngIf=\"!context.hidden && !context.imported\"\r\n        class=\"hide-button\"\r\n        mat-icon-button\r\n        [color]=\"color\"\r\n        [matTooltip]=\"'igo.context.contextManager.hide' | translate\"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"hide.emit(context)\">\r\n        <mat-icon svgIcon=\"eye\"></mat-icon>\r\n      </button>\r\n\r\n      <button *ngIf=\"context.hidden && !context.imported\"\r\n        class=\"hide-button\"\r\n        mat-icon-button\r\n        [color]=\"color\"\r\n        [matTooltip]=\"'igo.context.contextManager.show' | translate\"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"show.emit(context)\">\r\n        <mat-icon svgIcon=\"eye-off\"></mat-icon>\r\n      </button>\r\n\r\n      <button *ngIf=\"context.permission === typePermission[typePermission.write] || context.imported\"\r\n        class=\"delete-button\"\r\n        mat-icon-button\r\n        color=\"warn\"\r\n        [matTooltip]=\"'igo.context.contextManager.delete' | translate\"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"delete.emit(context)\">\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <button\r\n      class=\"actions-button\"\r\n      mat-icon-button\r\n      igoCollapse\r\n      [color]=\"color\"\r\n      [target]=\"actions\"\r\n      [collapsed]=collapsed\r\n      (click)=\"collapsed = !collapsed\">\r\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n</mat-list-item>\r\n", styles: [":host{overflow:hidden}.igo-actions-container{flex-shrink:0}.igo-actions-expand-container{display:inline-flex}mat-list-item ::ng-deep .mat-list-item-content .mat-list-text{padding:0}mat-icon.disabled{color:#00000061}mat-list-item.mat-list-item-light ::ng-deep .mat-list-item-content{color:#969696}\n"] }]
     }], function () { return [{ type: i2.AuthService }, { type: i3.StorageService }]; }, { showFavorite: [{
             type: Input
         }], context: [{
@@ -2306,7 +2290,7 @@ ContextListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Contex
     } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i6.MatFormField, i6.MatSuffix, i5.MatInput, i4$1.MatIcon, i7.MatButton, i6$1.MatTooltip, i11$1.MatCheckbox, i12$1.MatMenu, i12$1.MatMenuItem, i12$1.MatMenuTrigger, i13.ListItemDirective, i13.ListComponent, i13.CollapsibleComponent, i13.ActionbarComponent, ContextItemComponent, i4.AsyncPipe, i13.KeyValuePipe, i9$1.TranslatePipe], styles: [".context-filter-max-width[_ngcontent-%COMP%]{width:calc(100% - 100px);margin:5px;padding-left:6px}.context-filter-min-width[_ngcontent-%COMP%]{width:calc(100% - 135px);margin:5px;padding-left:6px}mat-form-field[_ngcontent-%COMP%]{height:40px}.profilsMenu[_ngcontent-%COMP%]{display:flex}.profilsMenu[_ngcontent-%COMP%] > mat-checkbox[_ngcontent-%COMP%]{width:8px}.add-context-button[_ngcontent-%COMP%]{margin:0;width:40px;display:inline-flex;overflow:hidden}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\">\n  <mat-form-field *ngIf=\"showFilter()\" [ngClass]=\"auth.authenticated && configService.getConfig('context') ? 'context-filter-min-width' : 'context-filter-max-width'\">\n    <input\n      matInput\n      type=\"text\"\n      [placeholder]=\"'igo.context.contextManager.filterPlaceHolder' | translate\"\n      [(ngModel)]=\"term\">\n    <button\n      mat-button\n      mat-icon-button\n      matSuffix\n      class=\"clear-button\"\n      *ngIf=\"term.length\"\n      aria-label=\"Clear\"\n      color=\"warn\"\n      (click)=\"clearFilter()\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <button\n  *ngIf=\"!sortedAlpha\"\n  class=\"sort-alpha\"\n  mat-icon-button\n  [matTooltip]=\"'igo.context.contextManager.sortAlphabetically' | translate\"\n  matTooltipShowDelay=\"500\"\n  (click)=\"toggleSort(true)\">\n  <mat-icon color=\"primary\" svgIcon=\"sort-alphabetical-variant\"></mat-icon>\n  </button>\n  <button\n    *ngIf=\"sortedAlpha\"\n    class=\"sort-alpha\"\n    mat-icon-button\n    [matTooltip]=\"'igo.context.contextManager.sortContextOrder' | translate\"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSort(false)\">\n    <mat-icon color=\"warn\" svgIcon=\"sort-variant-remove\"></mat-icon>\n  </button>\n\n  <igo-actionbar *ngIf=\"auth.authenticated && configService.getConfig('context')\"\n    class=\"add-context-button\"\n    [iconColor]=\"color\"\n    [store]=\"actionStore\"\n    [withIcon]=\"true\"\n    icon=\"plus\"\n    [withTitle]=\"actionbarMode === 'overlay'\"\n    [horizontal]=\"false\"\n    [mode]=\"actionbarMode\">\n  </igo-actionbar>\n\n  <button *ngIf=\"auth.authenticated && configService.getConfig('context')\"\n    class=\"users-filter\"\n    mat-icon-button\n    [matTooltip]=\"'igo.context.contextManager.filterUser' | translate\"\n    matTooltipShowDelay=\"500\"\n    [matMenuTriggerFor]=\"accountMenu\">\n    <mat-icon color=\"primary\" svgIcon=\"filter-menu\"></mat-icon>\n  </button>\n\n  <mat-menu #accountMenu=\"matMenu\">\n    <ng-container *ngFor=\"let user of users\">\n      <span class=\"profilsMenu\">\n        <mat-checkbox\n          class=\"mat-menu-item\"\n          [checked]=\"getPermission(user).checked\"\n          [indeterminate]=\"getPermission(user).indeterminate\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"userSelection(user)\">\n        </mat-checkbox>\n        <button *ngIf=\"user.childs\"\n          [matMenuTriggerFor]=\"subAccountMenu\"\n          mat-menu-item>\n          {{user.title}}\n        </button>\n        <button\n          mat-menu-item\n          *ngIf=\"!user.childs\">\n          {{user.title}}\n        </button>\n      </span>\n\n      <mat-menu #subAccountMenu=\"matMenu\">\n        <mat-checkbox *ngFor=\"let child of user.childs\"\n          class=\"mat-menu-item\"\n          [checked]=\"getPermission(child).checked\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"userSelection(child, user)\">\n          {{child.title}}\n        </mat-checkbox>\n      </mat-menu>\n    </ng-container>\n\n    <span class=\"profilsMenu\">\n      <mat-checkbox\n        class=\"mat-menu-item\"\n        [checked]=\"showHidden\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"showHiddenContexts.emit()\">\n      </mat-checkbox>\n      <button mat-menu-item>\n        {{ 'igo.context.contextManager.showHidden' | translate }}\n      </button>\n    </span>\n  </mat-menu>\n\n  <ng-template ngFor let-groupContexts [ngForOf]=\"contexts$ | async | keyvalue\">\n\n    <igo-collapsible *ngIf=\"groupContexts.value.length && auth.authenticated\" [title]=\"titleMapping[groupContexts.key] | translate\"\n      [collapsed]=\"collapsed[titleMapping[groupContexts.key]]\" (toggle)=\"collapsed[titleMapping[groupContexts.key]] = $event\">\n\n      <ng-template ngFor let-context [ngForOf]=\"groupContexts.value\">\n        <igo-context-item\n          igoListItem\n          color=\"accent\"\n          [selected]=\"selectedContext && selectedContext.uri === context.uri\"\n          [context]=\"context\"\n          [default]=\"context.id && this.defaultContextId && this.defaultContextId === context.id\"\n          (edit)=\"edit.emit(context)\"\n          (delete)=\"delete.emit(context)\"\n          (clone)=\"clone.emit(context)\"\n          (save)=\"save.emit(context)\"\n          (hide)=\"hideContext(context)\"\n          (show)=\"showContext(context)\"\n          (favorite)=\"favorite.emit(context)\"\n          (manageTools)=\"manageTools.emit(context)\"\n          (managePermissions)=\"managePermissions.emit(context)\"\n          (select)=\"select.emit(context)\"\n          (unselect)=\"unselect.emit(context)\">\n        </igo-context-item>\n      </ng-template>\n\n    </igo-collapsible>\n\n    <ng-template *ngIf=\"groupContexts.value.length && !auth.authenticated\" ngFor let-context [ngForOf]=\"groupContexts.value\">\n      <igo-context-item\n        igoListItem\n        color=\"accent\"\n        [showFavorite]=\"configService.getConfig('favoriteContext4NonAuthenticated')\"\n        [selected]=\"selectedContext && selectedContext.uri === context.uri\"\n        [context]=\"context\"\n        [default]=\"configService.getConfig('context') ? defaultContextId === context.id : defaultContextId === context.uri\"\n        (favorite)=\"favorite.emit(context)\"\n        (select)=\"select.emit(context)\"\n        (unselect)=\"unselect.emit(context)\">\n      </igo-context-item>\n    </ng-template>\n\n  </ng-template>\n</igo-list>\n", styles: [".context-filter-max-width{width:calc(100% - 100px);margin:5px;padding-left:6px}.context-filter-min-width{width:calc(100% - 135px);margin:5px;padding-left:6px}mat-form-field{height:40px}.profilsMenu{display:flex}.profilsMenu>mat-checkbox{width:8px}.add-context-button{margin:0;width:40px;display:inline-flex;overflow:hidden}\n"] }]
+        args: [{ selector: 'igo-context-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\">\r\n  <mat-form-field *ngIf=\"showFilter()\" [ngClass]=\"auth.authenticated && configService.getConfig('context') ? 'context-filter-min-width' : 'context-filter-max-width'\">\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [placeholder]=\"'igo.context.contextManager.filterPlaceHolder' | translate\"\r\n      [(ngModel)]=\"term\">\r\n    <button\r\n      mat-button\r\n      mat-icon-button\r\n      matSuffix\r\n      class=\"clear-button\"\r\n      *ngIf=\"term.length\"\r\n      aria-label=\"Clear\"\r\n      color=\"warn\"\r\n      (click)=\"clearFilter()\">\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <button\r\n  *ngIf=\"!sortedAlpha\"\r\n  class=\"sort-alpha\"\r\n  mat-icon-button\r\n  [matTooltip]=\"'igo.context.contextManager.sortAlphabetically' | translate\"\r\n  matTooltipShowDelay=\"500\"\r\n  (click)=\"toggleSort(true)\">\r\n  <mat-icon color=\"primary\" svgIcon=\"sort-alphabetical-variant\"></mat-icon>\r\n  </button>\r\n  <button\r\n    *ngIf=\"sortedAlpha\"\r\n    class=\"sort-alpha\"\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.context.contextManager.sortContextOrder' | translate\"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleSort(false)\">\r\n    <mat-icon color=\"warn\" svgIcon=\"sort-variant-remove\"></mat-icon>\r\n  </button>\r\n\r\n  <igo-actionbar *ngIf=\"auth.authenticated && configService.getConfig('context')\"\r\n    class=\"add-context-button\"\r\n    [iconColor]=\"color\"\r\n    [store]=\"actionStore\"\r\n    [withIcon]=\"true\"\r\n    icon=\"plus\"\r\n    [withTitle]=\"actionbarMode === 'overlay'\"\r\n    [horizontal]=\"false\"\r\n    [mode]=\"actionbarMode\">\r\n  </igo-actionbar>\r\n\r\n  <button *ngIf=\"auth.authenticated && configService.getConfig('context')\"\r\n    class=\"users-filter\"\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.context.contextManager.filterUser' | translate\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matMenuTriggerFor]=\"accountMenu\">\r\n    <mat-icon color=\"primary\" svgIcon=\"filter-menu\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #accountMenu=\"matMenu\">\r\n    <ng-container *ngFor=\"let user of users\">\r\n      <span class=\"profilsMenu\">\r\n        <mat-checkbox\r\n          class=\"mat-menu-item\"\r\n          [checked]=\"getPermission(user).checked\"\r\n          [indeterminate]=\"getPermission(user).indeterminate\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"userSelection(user)\">\r\n        </mat-checkbox>\r\n        <button *ngIf=\"user.childs\"\r\n          [matMenuTriggerFor]=\"subAccountMenu\"\r\n          mat-menu-item>\r\n          {{user.title}}\r\n        </button>\r\n        <button\r\n          mat-menu-item\r\n          *ngIf=\"!user.childs\">\r\n          {{user.title}}\r\n        </button>\r\n      </span>\r\n\r\n      <mat-menu #subAccountMenu=\"matMenu\">\r\n        <mat-checkbox *ngFor=\"let child of user.childs\"\r\n          class=\"mat-menu-item\"\r\n          [checked]=\"getPermission(child).checked\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"userSelection(child, user)\">\r\n          {{child.title}}\r\n        </mat-checkbox>\r\n      </mat-menu>\r\n    </ng-container>\r\n\r\n    <span class=\"profilsMenu\">\r\n      <mat-checkbox\r\n        class=\"mat-menu-item\"\r\n        [checked]=\"showHidden\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"showHiddenContexts.emit()\">\r\n      </mat-checkbox>\r\n      <button mat-menu-item>\r\n        {{ 'igo.context.contextManager.showHidden' | translate }}\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n\r\n  <ng-template ngFor let-groupContexts [ngForOf]=\"contexts$ | async | keyvalue\">\r\n\r\n    <igo-collapsible *ngIf=\"groupContexts.value.length && auth.authenticated\" [title]=\"titleMapping[groupContexts.key] | translate\"\r\n      [collapsed]=\"collapsed[titleMapping[groupContexts.key]]\" (toggle)=\"collapsed[titleMapping[groupContexts.key]] = $event\">\r\n\r\n      <ng-template ngFor let-context [ngForOf]=\"groupContexts.value\">\r\n        <igo-context-item\r\n          igoListItem\r\n          color=\"accent\"\r\n          [selected]=\"selectedContext && selectedContext.uri === context.uri\"\r\n          [context]=\"context\"\r\n          [default]=\"context.id && this.defaultContextId && this.defaultContextId === context.id\"\r\n          (edit)=\"edit.emit(context)\"\r\n          (delete)=\"delete.emit(context)\"\r\n          (clone)=\"clone.emit(context)\"\r\n          (save)=\"save.emit(context)\"\r\n          (hide)=\"hideContext(context)\"\r\n          (show)=\"showContext(context)\"\r\n          (favorite)=\"favorite.emit(context)\"\r\n          (manageTools)=\"manageTools.emit(context)\"\r\n          (managePermissions)=\"managePermissions.emit(context)\"\r\n          (select)=\"select.emit(context)\"\r\n          (unselect)=\"unselect.emit(context)\">\r\n        </igo-context-item>\r\n      </ng-template>\r\n\r\n    </igo-collapsible>\r\n\r\n    <ng-template *ngIf=\"groupContexts.value.length && !auth.authenticated\" ngFor let-context [ngForOf]=\"groupContexts.value\">\r\n      <igo-context-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [showFavorite]=\"configService.getConfig('favoriteContext4NonAuthenticated')\"\r\n        [selected]=\"selectedContext && selectedContext.uri === context.uri\"\r\n        [context]=\"context\"\r\n        [default]=\"configService.getConfig('context') ? defaultContextId === context.id : defaultContextId === context.uri\"\r\n        (favorite)=\"favorite.emit(context)\"\r\n        (select)=\"select.emit(context)\"\r\n        (unselect)=\"unselect.emit(context)\">\r\n      </igo-context-item>\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n</igo-list>\r\n", styles: [".context-filter-max-width{width:calc(100% - 100px);margin:5px;padding-left:6px}.context-filter-min-width{width:calc(100% - 135px);margin:5px;padding-left:6px}mat-form-field{height:40px}.profilsMenu{display:flex}.profilsMenu>mat-checkbox{width:8px}.add-context-button{margin:0;width:40px;display:inline-flex;overflow:hidden}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i3.ConfigService }, { type: i2.AuthService }, { type: i1$3.MatDialog }, { type: i3.LanguageService }, { type: i3.StorageService }]; }, { contexts: [{
             type: Input
         }], selectedContext: [{
@@ -2369,12 +2353,9 @@ class ContextListBindingDirective {
         const map = this.mapService.getMap();
         const contextFromMap = this.contextService.getContextFromMap(map);
         const msgSuccess = () => {
-            const translate = this.languageService.translate;
-            const message = translate.instant('igo.context.contextManager.dialog.saveMsg', {
+            this.messageService.success('igo.context.contextManager.dialog.saveMsg', 'igo.context.contextManager.dialog.saveTitle', undefined, {
                 value: context.title
             });
-            const title = translate.instant('igo.context.contextManager.dialog.saveTitle');
-            this.messageService.success(message, title);
         };
         if (context.imported) {
             contextFromMap.title = context.title;
@@ -2404,12 +2385,9 @@ class ContextListBindingDirective {
                 this.messageService.remove(this.previousMessageId);
             }
             this.contextService.defaultContextId$.next(context.id);
-            const translate = this.languageService.translate;
-            const message = translate.instant('igo.context.contextManager.dialog.favoriteMsg', {
+            const messageObj = this.messageService.success('igo.context.contextManager.dialog.favoriteMsg', 'igo.context.contextManager.dialog.favoriteTitle', undefined, {
                 value: context.title
             });
-            const title = translate.instant('igo.context.contextManager.dialog.favoriteTitle');
-            const messageObj = this.messageService.success(message, title);
             this.previousMessageId = messageObj.toastId;
             this.cdRef.detectChanges();
         });
@@ -2429,11 +2407,7 @@ class ContextListBindingDirective {
                 this.contextService
                     .delete(context.id, context.imported)
                     .subscribe(() => {
-                    const message = translate.instant('igo.context.contextManager.dialog.deleteMsg', {
-                        value: context.title
-                    });
-                    const title = translate.instant('igo.context.contextManager.dialog.deleteTitle');
-                    this.messageService.info(message, title);
+                    this.messageService.info('igo.context.contextManager.dialog.deleteMsg', 'igo.context.contextManager.dialog.deleteTitle', undefined, { value: context.title });
                 });
             }
         });
@@ -2444,12 +2418,7 @@ class ContextListBindingDirective {
             uri: context.uri + '-copy'
         };
         this.contextService.clone(context.id, properties).subscribe(() => {
-            const translate = this.languageService.translate;
-            const message = translate.instant('igo.context.contextManager.dialog.cloneMsg', {
-                value: context.title
-            });
-            const title = translate.instant('igo.context.contextManager.dialog.cloneTitle');
-            this.messageService.success(message, title);
+            this.messageService.success('igo.context.contextManager.dialog.cloneMsg', 'igo.context.contextManager.dialog.cloneTitle', undefined, { value: context.title });
         });
     }
     onCreate(opts) {
@@ -2457,12 +2426,7 @@ class ContextListBindingDirective {
         const context = this.contextService.getContextFromMap(this.component.map, empty);
         context.title = title;
         this.contextService.create(context).subscribe(() => {
-            const translate = this.languageService.translate;
-            const titleD = translate.instant('igo.context.bookmarkButton.dialog.createTitle');
-            const message = translate.instant('igo.context.bookmarkButton.dialog.createMsg', {
-                value: context.title
-            });
-            this.messageService.success(message, titleD);
+            this.messageService.success('igo.context.bookmarkButton.dialog.createMsg', 'igo.context.bookmarkButton.dialog.createTitle', undefined, { value: context.title });
             this.contextService.loadContext(context.uri);
         });
     }
@@ -2608,9 +2572,8 @@ function ContextFormComponent_span_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1("", ctx_r0.prefix, "-");
 } }
 class ContextFormComponent {
-    constructor(formBuilder, languageService, messageService) {
+    constructor(formBuilder, messageService) {
         this.formBuilder = formBuilder;
-        this.languageService = languageService;
         this.messageService = messageService;
         this._disabled = false;
         // TODO: replace any by ContextOptions or Context
@@ -2656,10 +2619,7 @@ class ContextFormComponent {
         const text = this.prefix + '-' + this.form.value.uri.replace(' ', '');
         const successful = Clipboard.copy(text);
         if (successful) {
-            const translate = this.languageService.translate;
-            const title = translate.instant('igo.context.contextManager.dialog.copyTitle');
-            const msg = translate.instant('igo.context.contextManager.dialog.copyMsg');
-            this.messageService.success(msg, title);
+            this.messageService.success('igo.context.contextManager.dialog.copyMsg', 'igo.context.contextManager.dialog.copyTitle');
         }
     }
     buildForm() {
@@ -2673,7 +2633,7 @@ class ContextFormComponent {
         });
     }
 }
-ContextFormComponent.ɵfac = function ContextFormComponent_Factory(t) { return new (t || ContextFormComponent)(i0.ɵɵdirectiveInject(i1$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(i3.LanguageService), i0.ɵɵdirectiveInject(i3.MessageService)); };
+ContextFormComponent.ɵfac = function ContextFormComponent_Factory(t) { return new (t || ContextFormComponent)(i0.ɵɵdirectiveInject(i1$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(i3.MessageService)); };
 ContextFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContextFormComponent, selectors: [["igo-context-form"]], inputs: { btnSubmitText: "btnSubmitText", context: "context", disabled: "disabled" }, outputs: { submitForm: "submitForm", clone: "clone", delete: "delete" }, decls: 19, vars: 18, consts: [[1, "igo-form", 3, "formGroup", "ngSubmit"], [1, "full-width"], ["matInput", "", "required", "", "maxlength", "128", "formControlName", "title", 3, "placeholder"], ["id", "uriInput", 1, "full-width"], ["class", "prefix", 4, "ngIf"], [1, "fieldWrapper"], ["matInput", "", "maxlength", "64", "floatLabel", "always", "formControlName", "uri", 3, "placeholder"], ["id", "copyButton", "type", "button", "mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "content-copy"], [1, "igo-form-button-group"], ["mat-raised-button", "", "type", "submit", 3, "disabled"], [1, "prefix"]], template: function ContextFormComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "form", 0);
         i0.ɵɵlistener("ngSubmit", function ContextFormComponent_Template_form_ngSubmit_0_listener() { return ctx.handleFormSubmit(ctx.form.value); });
@@ -2718,8 +2678,8 @@ ContextFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Contex
     } }, dependencies: [i4.NgIf, i1$2.ɵNgNoValidate, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.RequiredValidator, i1$2.MaxLengthValidator, i1$2.FormGroupDirective, i1$2.FormControlName, i6.MatError, i6.MatFormField, i5.MatInput, i4$1.MatIcon, i7.MatButton, i6$1.MatTooltip, i9$1.TranslatePipe], styles: ["form[_ngcontent-%COMP%]{margin:10px}.full-width[_ngcontent-%COMP%]{width:100%}#uriInput[_ngcontent-%COMP%]   .fieldWrapper[_ngcontent-%COMP%]{display:block;overflow:hidden}#uriInput[_ngcontent-%COMP%]   .prefix[_ngcontent-%COMP%]{float:left}#copyButton[_ngcontent-%COMP%]{width:24px;float:right;position:relative;top:-58px;left:5px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-form', template: "<form class=\"igo-form\" [formGroup]=\"form\"\n  (ngSubmit)=\"handleFormSubmit(form.value)\">\n\n  <mat-form-field class=\"full-width\">\n    <input matInput required\n           maxlength=\"128\"\n           [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\n           formControlName=\"title\">\n   <mat-error>\n    {{ 'igo.context.contextManager.form.titleRequired' | translate }}\n   </mat-error>\n  </mat-form-field>\n\n  <mat-form-field id=\"uriInput\" class=\"full-width\">\n    <span *ngIf=\"prefix\" class=\"prefix\">{{prefix}}-</span>\n    <span class=\"fieldWrapper\">\n      <input matInput\n           maxlength=\"64\"\n           floatLabel = \"always\"\n           [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\n           formControlName=\"uri\">\n    </span>\n  </mat-form-field>\n\n  <button\n    id=\"copyButton\"\n    type=\"button\"\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.context.contextManager.form.copy' | translate\"\n    color=\"primary\"\n    (click)=\"copyTextToClipboard()\">\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\n  </button>\n\n  <div class=\"igo-form-button-group\">\n    <button\n      mat-raised-button\n      type=\"submit\"\n      [disabled]=\"!form.valid || disabled\">\n      {{ 'igo.context.contextManager.form.edit' | translate }}\n    </button>\n  </div>\n\n</form>\n", styles: ["form{margin:10px}.full-width{width:100%}#uriInput .fieldWrapper{display:block;overflow:hidden}#uriInput .prefix{float:left}#copyButton{width:24px;float:right;position:relative;top:-58px;left:5px}\n"] }]
-    }], function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i3.LanguageService }, { type: i3.MessageService }]; }, { btnSubmitText: [{
+        args: [{ selector: 'igo-context-form', template: "<form class=\"igo-form\" [formGroup]=\"form\"\r\n  (ngSubmit)=\"handleFormSubmit(form.value)\">\r\n\r\n  <mat-form-field class=\"full-width\">\r\n    <input matInput required\r\n           maxlength=\"128\"\r\n           [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\r\n           formControlName=\"title\">\r\n   <mat-error>\r\n    {{ 'igo.context.contextManager.form.titleRequired' | translate }}\r\n   </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field id=\"uriInput\" class=\"full-width\">\r\n    <span *ngIf=\"prefix\" class=\"prefix\">{{prefix}}-</span>\r\n    <span class=\"fieldWrapper\">\r\n      <input matInput\r\n           maxlength=\"64\"\r\n           floatLabel = \"always\"\r\n           [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\r\n           formControlName=\"uri\">\r\n    </span>\r\n  </mat-form-field>\r\n\r\n  <button\r\n    id=\"copyButton\"\r\n    type=\"button\"\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.context.contextManager.form.copy' | translate\"\r\n    color=\"primary\"\r\n    (click)=\"copyTextToClipboard()\">\r\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n  </button>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"submit\"\r\n      [disabled]=\"!form.valid || disabled\">\r\n      {{ 'igo.context.contextManager.form.edit' | translate }}\r\n    </button>\r\n  </div>\r\n\r\n</form>\r\n", styles: ["form{margin:10px}.full-width{width:100%}#uriInput .fieldWrapper{display:block;overflow:hidden}#uriInput .prefix{float:left}#copyButton{width:24px;float:right;position:relative;top:-58px;left:5px}\n"] }]
+    }], function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i3.MessageService }]; }, { btnSubmitText: [{
             type: Input
         }], context: [{
             type: Input
@@ -2767,7 +2727,7 @@ ContextEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Contex
     } }, dependencies: [i4.NgIf, ContextFormComponent, i9$1.TranslatePipe], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextEditComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-edit', template: "<igo-context-form *ngIf=\"context\"\n   [btnSubmitText]=\"'igo.context.contextManager.save' | translate\"\n   [context]=\"context\"\n   (submitForm)=\"submitForm.emit($event)\">\n</igo-context-form>\n" }]
+        args: [{ selector: 'igo-context-edit', template: "<igo-context-form *ngIf=\"context\"\r\n   [btnSubmitText]=\"'igo.context.contextManager.save' | translate\"\r\n   [context]=\"context\"\r\n   (submitForm)=\"submitForm.emit($event)\">\r\n</igo-context-form>\r\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { context: [{
             type: Input
         }], submitForm: [{
@@ -2775,22 +2735,18 @@ ContextEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Contex
         }] }); })();
 
 class ContextEditBindingDirective {
-    constructor(component, contextService, messageService, languageService) {
+    constructor(component, contextService, messageService) {
         this.contextService = contextService;
         this.messageService = messageService;
-        this.languageService = languageService;
         this.submitSuccessed = new EventEmitter();
         this.component = component;
     }
     onEdit(context) {
         const id = this.component.context.id;
         this.contextService.update(id, context).subscribe(() => {
-            const translate = this.languageService.translate;
-            const message = translate.instant('igo.context.contextManager.dialog.saveMsg', {
+            this.messageService.success('igo.context.contextManager.dialog.saveMsg', 'igo.context.contextManager.dialog.saveTitle', undefined, {
                 value: context.title || this.component.context.title
             });
-            const title = translate.instant('igo.context.contextManager.dialog.saveTitle');
-            this.messageService.success(message, title);
             this.contextService.setEditedContext(undefined);
             this.submitSuccessed.emit(context);
         });
@@ -2805,7 +2761,7 @@ class ContextEditBindingDirective {
         this.component.context = context;
     }
 }
-ContextEditBindingDirective.ɵfac = function ContextEditBindingDirective_Factory(t) { return new (t || ContextEditBindingDirective)(i0.ɵɵdirectiveInject(ContextEditComponent, 2), i0.ɵɵdirectiveInject(ContextService), i0.ɵɵdirectiveInject(i3.MessageService), i0.ɵɵdirectiveInject(i3.LanguageService)); };
+ContextEditBindingDirective.ɵfac = function ContextEditBindingDirective_Factory(t) { return new (t || ContextEditBindingDirective)(i0.ɵɵdirectiveInject(ContextEditComponent, 2), i0.ɵɵdirectiveInject(ContextService), i0.ɵɵdirectiveInject(i3.MessageService)); };
 ContextEditBindingDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ContextEditBindingDirective, selectors: [["", "igoContextEditBinding", ""]], hostBindings: function ContextEditBindingDirective_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("submitForm", function ContextEditBindingDirective_submitForm_HostBindingHandler($event) { return ctx.onEdit($event); });
     } }, outputs: { submitSuccessed: "submitSuccessed" } });
@@ -2816,7 +2772,7 @@ ContextEditBindingDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type:
             }]
     }], function () { return [{ type: ContextEditComponent, decorators: [{
                 type: Self
-            }] }, { type: ContextService }, { type: i3.MessageService }, { type: i3.LanguageService }]; }, { submitSuccessed: [{
+            }] }, { type: ContextService }, { type: i3.MessageService }]; }, { submitSuccessed: [{
             type: Output
         }], onEdit: [{
             type: HostListener,
@@ -3096,7 +3052,7 @@ ContextPermissionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i4.NgForOf, i4.NgIf, i1$2.ɵNgNoValidate, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.RequiredValidator, i1$2.NgModel, i1$2.FormControlDirective, i1$2.FormGroupDirective, i1$2.FormControlName, i6.MatError, i6.MatFormField, i5.MatInput, i4$1.MatIcon, i7.MatButton, i6$1.MatTooltip, i7$1.MatListItem, i7$1.MatListAvatarCssMatStyler, i12.MatLine, i13$1.MatRadioGroup, i13$1.MatRadioButton, i12.MatOption, i14.MatAutocomplete, i14.MatAutocompleteTrigger, i13.ListComponent, i13.CollapsibleComponent, i13.StopPropagationDirective, i13.KeyValuePipe, i9$1.TranslatePipe], styles: ["[_nghost-%COMP%]{margin:10px}.full-width[_ngcontent-%COMP%]{width:100%}mat-radio-button[_ngcontent-%COMP%]{padding:14px 14px 14px 0}.scopeForm[_ngcontent-%COMP%], form[_ngcontent-%COMP%]{padding:5px}mat-option[_ngcontent-%COMP%]     .mat-option-text{line-height:normal;line-height:initial}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextPermissionsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-permissions', template: "<div *ngIf=\"context\">\n\n  <div *ngIf=\"!canWrite\" class=\"scopeForm\">\n    <h4>{{ 'igo.context.permission.readOnlyTitle' | translate }}</h4>\n    <p>{{ 'igo.context.permission.readOnlyMsg' | translate }}</p>\n  </div>\n\n  <div *ngIf=\"canWrite\" class=\"scopeForm\">\n    <mat-radio-group [(ngModel)]=\"context.scope\"\n                    (change)=\"scopeChanged.emit(context)\">\n      <mat-radio-button value=\"private\">\n        {{ 'igo.context.permission.scope.private' | translate }}\n      </mat-radio-button>\n      <mat-radio-button value=\"protected\">\n        {{ 'igo.context.permission.scope.shared' | translate }}\n      </mat-radio-button>\n      <mat-radio-button *ngIf=\"authService.isAdmin\" value=\"public\">\n        {{ 'igo.context.permission.scope.public' | translate }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </div>\n\n  <form *ngIf=\"context.scope !== 'private' && canWrite\" [formGroup]=\"form\"\n    (ngSubmit)=\"handleFormSubmit(form.value)\">\n\n    <mat-form-field class=\"full-width\">\n      <input matInput required\n             [placeholder]=\"'igo.context.permission.user' | translate\"\n             [formControl]=\"formControl\"\n             [matAutocomplete]=\"auto\">\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onProfilSelected($event.option.value)\"\n        [displayWith]=\"displayFn\">\n          <mat-option *ngFor=\"let profil of this.profils\" [value]=\"profil\">\n              {{profil.title}}<br>\n              <small class=\"mat-typography\">{{profil.name}}</small>\n          </mat-option>\n      </mat-autocomplete>\n     <mat-error>\n       {{ 'igo.context.permission.profilRequired' | translate }}\n     </mat-error>\n    </mat-form-field>\n\n\n    <mat-radio-group formControlName=\"typePermission\">\n      <mat-radio-button value=\"read\">\n        {{ 'igo.context.permission.read' | translate }}\n      </mat-radio-button>\n      <mat-radio-button value=\"write\">\n        {{ 'igo.context.permission.write' | translate }}\n      </mat-radio-button>\n    </mat-radio-group>\n\n\n    <div class=\"igo-form-button-group\">\n      <button\n        mat-raised-button\n        type=\"submit\"\n        [disabled]=\"!form.valid\">\n        {{ 'igo.context.permission.addBtn' | translate }}\n      </button>\n    </div>\n\n  </form>\n\n  <igo-list *ngIf=\"permissions && context.scope !== 'private'\">\n    <ng-template ngFor let-groupPermissions [ngForOf]=\"permissions | keyvalue\">\n      <igo-collapsible\n        *ngIf=\"groupPermissions.value.length\"\n        [title]=\"'igo.context.permission.' + groupPermissions.key | translate\">\n\n        <ng-template ngFor let-permission [ngForOf]=\"groupPermissions.value\">\n          <mat-list-item>\n            <mat-icon mat-list-avatar svgIcon=\"account-outline\"></mat-icon>\n            <h4 mat-line>{{permission.profilTitle}} <small class=\"mat-typography\">{{permission.profil}}</small></h4>\n\n            <div igoStopPropagation\n                 class=\"igo-actions-container\">\n\n               <button *ngIf=\"canWrite || permission.profil === authService.decodeToken().user.sourceId\"\n                 mat-icon-button\n                 [matTooltip]=\"'igo.context.permission.delete' | translate\"\n                 matTooltipShowDelay=\"500\"\n                 color=\"warn\"\n                 (click)=\"removePermission.emit(permission)\">\n                 <mat-icon svgIcon=\"delete\"></mat-icon>\n               </button>\n            </div>\n\n          </mat-list-item>\n        </ng-template>\n      </igo-collapsible>\n    </ng-template>\n  </igo-list>\n\n</div>\n", styles: [":host{margin:10px}.full-width{width:100%}mat-radio-button{padding:14px 14px 14px 0}.scopeForm,form{padding:5px}mat-option ::ng-deep .mat-option-text{line-height:normal;line-height:initial}\n"] }]
+        args: [{ selector: 'igo-context-permissions', template: "<div *ngIf=\"context\">\r\n\r\n  <div *ngIf=\"!canWrite\" class=\"scopeForm\">\r\n    <h4>{{ 'igo.context.permission.readOnlyTitle' | translate }}</h4>\r\n    <p>{{ 'igo.context.permission.readOnlyMsg' | translate }}</p>\r\n  </div>\r\n\r\n  <div *ngIf=\"canWrite\" class=\"scopeForm\">\r\n    <mat-radio-group [(ngModel)]=\"context.scope\"\r\n                    (change)=\"scopeChanged.emit(context)\">\r\n      <mat-radio-button value=\"private\">\r\n        {{ 'igo.context.permission.scope.private' | translate }}\r\n      </mat-radio-button>\r\n      <mat-radio-button value=\"protected\">\r\n        {{ 'igo.context.permission.scope.shared' | translate }}\r\n      </mat-radio-button>\r\n      <mat-radio-button *ngIf=\"authService.isAdmin\" value=\"public\">\r\n        {{ 'igo.context.permission.scope.public' | translate }}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </div>\r\n\r\n  <form *ngIf=\"context.scope !== 'private' && canWrite\" [formGroup]=\"form\"\r\n    (ngSubmit)=\"handleFormSubmit(form.value)\">\r\n\r\n    <mat-form-field class=\"full-width\">\r\n      <input matInput required\r\n             [placeholder]=\"'igo.context.permission.user' | translate\"\r\n             [formControl]=\"formControl\"\r\n             [matAutocomplete]=\"auto\">\r\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onProfilSelected($event.option.value)\"\r\n        [displayWith]=\"displayFn\">\r\n          <mat-option *ngFor=\"let profil of this.profils\" [value]=\"profil\">\r\n              {{profil.title}}<br>\r\n              <small class=\"mat-typography\">{{profil.name}}</small>\r\n          </mat-option>\r\n      </mat-autocomplete>\r\n     <mat-error>\r\n       {{ 'igo.context.permission.profilRequired' | translate }}\r\n     </mat-error>\r\n    </mat-form-field>\r\n\r\n\r\n    <mat-radio-group formControlName=\"typePermission\">\r\n      <mat-radio-button value=\"read\">\r\n        {{ 'igo.context.permission.read' | translate }}\r\n      </mat-radio-button>\r\n      <mat-radio-button value=\"write\">\r\n        {{ 'igo.context.permission.write' | translate }}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n\r\n\r\n    <div class=\"igo-form-button-group\">\r\n      <button\r\n        mat-raised-button\r\n        type=\"submit\"\r\n        [disabled]=\"!form.valid\">\r\n        {{ 'igo.context.permission.addBtn' | translate }}\r\n      </button>\r\n    </div>\r\n\r\n  </form>\r\n\r\n  <igo-list *ngIf=\"permissions && context.scope !== 'private'\">\r\n    <ng-template ngFor let-groupPermissions [ngForOf]=\"permissions | keyvalue\">\r\n      <igo-collapsible\r\n        *ngIf=\"groupPermissions.value.length\"\r\n        [title]=\"'igo.context.permission.' + groupPermissions.key | translate\">\r\n\r\n        <ng-template ngFor let-permission [ngForOf]=\"groupPermissions.value\">\r\n          <mat-list-item>\r\n            <mat-icon mat-list-avatar svgIcon=\"account-outline\"></mat-icon>\r\n            <h4 mat-line>{{permission.profilTitle}} <small class=\"mat-typography\">{{permission.profil}}</small></h4>\r\n\r\n            <div igoStopPropagation\r\n                 class=\"igo-actions-container\">\r\n\r\n               <button *ngIf=\"canWrite || permission.profil === authService.decodeToken().user.sourceId\"\r\n                 mat-icon-button\r\n                 [matTooltip]=\"'igo.context.permission.delete' | translate\"\r\n                 matTooltipShowDelay=\"500\"\r\n                 color=\"warn\"\r\n                 (click)=\"removePermission.emit(permission)\">\r\n                 <mat-icon svgIcon=\"delete\"></mat-icon>\r\n               </button>\r\n            </div>\r\n\r\n          </mat-list-item>\r\n        </ng-template>\r\n      </igo-collapsible>\r\n    </ng-template>\r\n  </igo-list>\r\n\r\n</div>\r\n", styles: [":host{margin:10px}.full-width{width:100%}mat-radio-button{padding:14px 14px 14px 0}.scopeForm,form{padding:5px}mat-option ::ng-deep .mat-option-text{line-height:normal;line-height:initial}\n"] }]
     }], function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i2.AuthService }, { type: i3.ConfigService }]; }, { context: [{
             type: Input
         }], permissions: [{
@@ -3118,11 +3074,8 @@ class ContextPermissionsBindingDirective {
         this.component = component;
     }
     onAddPermission(permission) {
-        const translate = this.languageService.translate;
         if (!permission.profil) {
-            const message = translate.instant('igo.context.contextManager.errors.addPermissionEmpty');
-            const title = translate.instant('igo.context.contextManager.errors.addPermissionTitle');
-            this.messageService.error(message, title);
+            this.messageService.error('igo.context.contextManager.errors.addPermissionEmpty', 'igo.context.contextManager.errors.addPermissionTitle');
             return;
         }
         const contextId = this.component.context.id;
@@ -3133,11 +3086,7 @@ class ContextPermissionsBindingDirective {
                 this.component.permissions[permission.typePermission].push(p);
             }
             const profil = permission.profil;
-            const message = translate.instant('igo.context.permission.dialog.addMsg', {
-                value: profil
-            });
-            const title = translate.instant('igo.context.permission.dialog.addTitle');
-            this.messageService.success(message, title);
+            this.messageService.success('igo.context.permission.dialog.addMsg', 'igo.context.permission.dialog.addTitle', undefined, { value: profil });
             this.cd.detectChanges();
         });
     }
@@ -3151,24 +3100,14 @@ class ContextPermissionsBindingDirective {
             });
             this.component.permissions[permission.typePermission].splice(index, 1);
             const profil = permission.profil;
-            const translate = this.languageService.translate;
-            const message = translate.instant('igo.context.permission.dialog.deleteMsg', {
-                value: profil
-            });
-            const title = translate.instant('igo.context.permission.dialog.deleteTitle');
-            this.messageService.success(message, title);
+            this.messageService.success('igo.context.permission.dialog.deleteMsg', 'igo.context.permission.dialog.deleteTitle', undefined, { value: profil });
             this.cd.detectChanges();
         });
     }
     onScopeChanged(context) {
         const scope = context.scope;
         this.contextService.update(context.id, { scope }).subscribe(() => {
-            const translate = this.languageService.translate;
-            const message = translate.instant('igo.context.permission.dialog.scopeChangedMsg', {
-                value: translate.instant('igo.context.permission.scope.' + scope)
-            });
-            const title = translate.instant('igo.context.permission.dialog.scopeChangedTitle');
-            this.messageService.success(message, title);
+            this.messageService.success('igo.context.permission.dialog.scopeChangedMsg', 'igo.context.permission.dialog.scopeChangedTitle', undefined, { value: 'igo.context.permission.scope.' + scope });
         });
     }
     ngOnInit() {
@@ -3221,10 +3160,9 @@ ContextPermissionsBindingDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective(
         }] }); })();
 
 class BookmarkButtonComponent {
-    constructor(dialog, contextService, languageService, messageService) {
+    constructor(dialog, contextService, messageService) {
         this.dialog = dialog;
         this.contextService = contextService;
-        this.languageService = languageService;
         this.messageService = messageService;
     }
     get map() {
@@ -3249,19 +3187,14 @@ class BookmarkButtonComponent {
                 const context = this.contextService.getContextFromMap(this.map);
                 context.title = title;
                 this.contextService.create(context).subscribe(() => {
-                    const translate = this.languageService.translate;
-                    const titleD = translate.instant('igo.context.bookmarkButton.dialog.createTitle');
-                    const message = translate.instant('igo.context.bookmarkButton.dialog.createMsg', {
-                        value: context.title
-                    });
-                    this.messageService.success(message, titleD);
+                    this.messageService.success('igo.context.bookmarkButton.dialog.createMsg', 'igo.context.bookmarkButton.dialog.createTitle', undefined, { value: context.title });
                     this.contextService.loadContext(context.uri);
                 });
             }
         });
     }
 }
-BookmarkButtonComponent.ɵfac = function BookmarkButtonComponent_Factory(t) { return new (t || BookmarkButtonComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialog), i0.ɵɵdirectiveInject(ContextService), i0.ɵɵdirectiveInject(i3.LanguageService), i0.ɵɵdirectiveInject(i3.MessageService)); };
+BookmarkButtonComponent.ɵfac = function BookmarkButtonComponent_Factory(t) { return new (t || BookmarkButtonComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialog), i0.ɵɵdirectiveInject(ContextService), i0.ɵɵdirectiveInject(i3.MessageService)); };
 BookmarkButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BookmarkButtonComponent, selectors: [["igo-bookmark-button"]], inputs: { map: "map", color: "color" }, decls: 4, vars: 4, consts: [[1, "igo-bookmark-button-container"], ["mat-icon-button", "", "matTooltipPosition", "above", 3, "matTooltip", "color", "click"], ["svgIcon", "star"]], template: function BookmarkButtonComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
         i0.ɵɵlistener("click", function BookmarkButtonComponent_Template_button_click_1_listener() { return ctx.createContext(); });
@@ -3274,8 +3207,8 @@ BookmarkButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Boo
     } }, dependencies: [i4$1.MatIcon, i7.MatButton, i6$1.MatTooltip, i9$1.TranslatePipe], styles: [".igo-bookmark-button-container[_ngcontent-%COMP%]{width:40px}.igo-bookmark-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{background-color:#fff}.igo-bookmark-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BookmarkButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-bookmark-button', template: "<div class=\"igo-bookmark-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.context.bookmarkButton.create' | translate\"\n    matTooltipPosition=\"above\"\n    [color]=\"color\"\n    (click)=\"createContext()\">\n    <mat-icon svgIcon=\"star\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-bookmark-button-container{width:40px}.igo-bookmark-button-container button{background-color:#fff}.igo-bookmark-button-container button:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
-    }], function () { return [{ type: i1$3.MatDialog }, { type: ContextService }, { type: i3.LanguageService }, { type: i3.MessageService }]; }, { map: [{
+        args: [{ selector: 'igo-bookmark-button', template: "<div class=\"igo-bookmark-button-container\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.context.bookmarkButton.create' | translate\"\r\n    matTooltipPosition=\"above\"\r\n    [color]=\"color\"\r\n    (click)=\"createContext()\">\r\n    <mat-icon svgIcon=\"star\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-bookmark-button-container{width:40px}.igo-bookmark-button-container button{background-color:#fff}.igo-bookmark-button-container button:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+    }], function () { return [{ type: i1$3.MatDialog }, { type: ContextService }, { type: i3.MessageService }]; }, { map: [{
             type: Input
         }], color: [{
             type: Input
@@ -3320,7 +3253,7 @@ PoiDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoiDialo
     } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.RequiredValidator, i1$2.NgModel, i7.MatButton, i6.MatFormField, i1$3.MatDialogTitle, i1$3.MatDialogContent, i1$3.MatDialogActions, i5.MatInput, i9$1.TranslatePipe], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoiDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-poi-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{ 'igo.context.poiButton.dialog.title' | translate }}</h1>\n<div mat-dialog-content>\n  <mat-form-field>\n    <input matInput required autocomplete=\"off\"\n      [placeholder]=\"'igo.context.poiButton.dialog.placeholder' | translate\"\n      [(ngModel)]=\"title\">\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-button color=\"primary\"\n         [disabled]=\"!title\"\n         (click)=\"dialogRef.close(title)\">\n    {{'igo.common.confirmDialog.confirmBtn' | translate}}\n  </button>\n  <button mat-button\n          (click)=\"dialogRef.close(false)\">\n    {{'igo.common.confirmDialog.cancelBtn' |\u00A0translate}}\n  </button>\n</div>\n" }]
+        args: [{ selector: 'igo-poi-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{ 'igo.context.poiButton.dialog.title' | translate }}</h1>\r\n<div mat-dialog-content>\r\n  <mat-form-field>\r\n    <input matInput required autocomplete=\"off\"\r\n      [placeholder]=\"'igo.context.poiButton.dialog.placeholder' | translate\"\r\n      [(ngModel)]=\"title\">\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button color=\"primary\"\r\n         [disabled]=\"!title\"\r\n         (click)=\"dialogRef.close(title)\">\r\n    {{'igo.common.confirmDialog.confirmBtn' | translate}}\r\n  </button>\r\n  <button mat-button\r\n          (click)=\"dialogRef.close(false)\">\r\n    {{'igo.common.confirmDialog.cancelBtn' |\u00A0translate}}\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i1$3.MatDialogRef }]; }, null); })();
 
 class PoiService {
@@ -3401,17 +3334,12 @@ class PoiButtonComponent {
     }
     deletePoi(poi) {
         if (poi && poi.id) {
-            const translate = this.languageService.translate;
             this.confirmDialogService
-                .open(translate.instant('igo.context.poiButton.dialog.confirmDelete'))
+                .open(this.languageService.translate.instant('igo.context.poiButton.dialog.confirmDelete'))
                 .subscribe(confirm => {
                 if (confirm) {
                     this.poiService.delete(poi.id).subscribe(() => {
-                        const title = translate.instant('igo.context.poiButton.dialog.deleteTitle');
-                        const message = translate.instant('igo.context.poiButton.dialog.deleteMsg', {
-                            value: poi.title
-                        });
-                        this.messageService.info(message, title);
+                        this.messageService.info('igo.context.poiButton.dialog.deleteMsg', 'igo.context.poiButton.dialog.deleteTitle', undefined, { value: poi.title });
                         this.pois = this.pois.filter(p => p.id !== poi.id);
                     }, err => {
                         err.error.title = 'DELETE Pois';
@@ -3446,12 +3374,7 @@ class PoiButtonComponent {
             if (title) {
                 poi.title = title;
                 this.poiService.create(poi).subscribe(newPoi => {
-                    const translate = this.languageService.translate;
-                    const titleD = translate.instant('igo.context.poiButton.dialog.createTitle');
-                    const message = translate.instant('igo.context.poiButton.dialog.createMsg', {
-                        value: poi.title
-                    });
-                    this.messageService.success(message, titleD);
+                    this.messageService.success('igo.context.poiButton.dialog.createMsg', 'igo.context.poiButton.dialog.createTitle', undefined, { value: poi.title });
                     poi.id = newPoi.id;
                     this.pois.push(poi);
                 }, err => {
@@ -3497,7 +3420,7 @@ PoiButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoiButto
     } }, dependencies: [i4.NgForOf, i13.StopPropagationDirective, i4$1.MatIcon, i7.MatButton, i11.MatSelect, i12.MatOption, i9$1.TranslatePipe], styles: ["mat-select[_ngcontent-%COMP%]{width:150px;background-color:#fff;height:40px;padding-top:0}mat-select[_ngcontent-%COMP%]     .mat-select-trigger{height:40px}mat-select[_ngcontent-%COMP%]     .mat-select-value-text, mat-select[_ngcontent-%COMP%]     .mat-select-placeholder{padding:5px;position:relative}.mat-option[_ngcontent-%COMP%]{text-overflow:inherit}.titlePoi[_ngcontent-%COMP%]{max-width:135px;overflow:hidden;text-overflow:ellipsis;float:left}.buttonPoi[_ngcontent-%COMP%]{float:right;margin:4px -10px 4px 0}.buttonPoi[_ngcontent-%COMP%]     .mat-icon{margin:0 8px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoiButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-poi-button', template: "<mat-select [placeholder]=\"'igo.context.poiButton.placeholder' |\u00A0translate\"\n           floatPlaceholder=\"never\">\n\n  <mat-option (click)=\"createPoi()\">\n    <div class=\"titlePoi\">{{ 'igo.context.poiButton.create' |\u00A0translate }}</div>\n    <button igoStopPropagation class=\"addPoi buttonPoi\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"createPoi()\">\n      <mat-icon svgIcon=\"plus-circle\"></mat-icon>\n    </button>\n  </mat-option>\n  <mat-option *ngFor=\"let poi of pois\" [value]=\"poi.id\" (click)=\"zoomOnPoi(poi.id)\">\n    <div class=\"titlePoi\">{{ poi.title }}</div>\n    <button igoStopPropagation class=\"deletePoi buttonPoi\"\n      mat-icon-button\n      color=\"warn\"\n      (click)=\"deletePoi(poi)\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </mat-option>\n</mat-select>\n", styles: ["mat-select{width:150px;background-color:#fff;height:40px;padding-top:0}mat-select ::ng-deep .mat-select-trigger{height:40px}mat-select ::ng-deep .mat-select-value-text,mat-select ::ng-deep .mat-select-placeholder{padding:5px;position:relative}.mat-option{text-overflow:inherit}.titlePoi{max-width:135px;overflow:hidden;text-overflow:ellipsis;float:left}.buttonPoi{float:right;margin:4px -10px 4px 0}.buttonPoi ::ng-deep .mat-icon{margin:0 8px}\n"] }]
+        args: [{ selector: 'igo-poi-button', template: "<mat-select [placeholder]=\"'igo.context.poiButton.placeholder' |\u00A0translate\"\r\n           floatPlaceholder=\"never\">\r\n\r\n  <mat-option (click)=\"createPoi()\">\r\n    <div class=\"titlePoi\">{{ 'igo.context.poiButton.create' |\u00A0translate }}</div>\r\n    <button igoStopPropagation class=\"addPoi buttonPoi\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"createPoi()\">\r\n      <mat-icon svgIcon=\"plus-circle\"></mat-icon>\r\n    </button>\r\n  </mat-option>\r\n  <mat-option *ngFor=\"let poi of pois\" [value]=\"poi.id\" (click)=\"zoomOnPoi(poi.id)\">\r\n    <div class=\"titlePoi\">{{ poi.title }}</div>\r\n    <button igoStopPropagation class=\"deletePoi buttonPoi\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      (click)=\"deletePoi(poi)\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n  </mat-option>\r\n</mat-select>\r\n", styles: ["mat-select{width:150px;background-color:#fff;height:40px;padding-top:0}mat-select ::ng-deep .mat-select-trigger{height:40px}mat-select ::ng-deep .mat-select-value-text,mat-select ::ng-deep .mat-select-placeholder{padding:5px;position:relative}.mat-option{text-overflow:inherit}.titlePoi{max-width:135px;overflow:hidden;text-overflow:ellipsis;float:left}.buttonPoi{float:right;margin:4px -10px 4px 0}.buttonPoi ::ng-deep .mat-icon{margin:0 8px}\n"] }]
     }], function () { return [{ type: i1$3.MatDialog }, { type: i2.AuthService }, { type: PoiService }, { type: i3.MessageService }, { type: i3.LanguageService }, { type: i13.ConfirmDialogService }]; }, { map: [{
             type: Input
         }], color: [{
@@ -3560,7 +3483,7 @@ UserDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserDia
     } }, dependencies: [i7.MatButton, i1$3.MatDialogTitle, i1$3.MatDialogContent, i1$3.MatDialogActions, i9$1.TranslatePipe], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-user-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.context.userButton.infoTitle' | translate}}</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <p>{{'igo.context.userButton.dialog.user' | translate}}: {{user.sourceId}}</p>\n  <p>{{'igo.context.userButton.dialog.email' | translate}}: {{user.email}}</p>\n  <p>{{'igo.context.userButton.dialog.expiration' | translate}}: {{exp}}</p>\n  <button mat-stroked-button color=\"primary\" (click)=\"clearPreferences()\">\n    {{'igo.context.userButton.dialog.clearPreferences' | translate}}\n  </button>\n  <br>\n</div>\n<div mat-dialog-actions style=\"justify-content: center\">\n  <button mat-raised-button color=\"primary\"\n         (click)=\"dialogRef.close(false)\">\n    OK\n  </button>\n</div>\n" }]
+        args: [{ selector: 'igo-user-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.context.userButton.infoTitle' | translate}}</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <p>{{'igo.context.userButton.dialog.user' | translate}}: {{user.sourceId}}</p>\r\n  <p>{{'igo.context.userButton.dialog.email' | translate}}: {{user.email}}</p>\r\n  <p>{{'igo.context.userButton.dialog.expiration' | translate}}: {{exp}}</p>\r\n  <button mat-stroked-button color=\"primary\" (click)=\"clearPreferences()\">\r\n    {{'igo.context.userButton.dialog.clearPreferences' | translate}}\r\n  </button>\r\n  <br>\r\n</div>\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <button mat-raised-button color=\"primary\"\r\n         (click)=\"dialogRef.close(false)\">\r\n    OK\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i1$3.MatDialogRef }, { type: i2.AuthService }, { type: i3.StorageService }]; }, null); })();
 
 function userButtonSlideInOut() {
@@ -3663,7 +3586,7 @@ UserButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserBut
     } }, dependencies: [i4.NgIf, i4$1.MatIcon, i7.MatButton, i6$1.MatTooltip, PoiButtonComponent, i9$1.TranslatePipe], styles: [".igo-user-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{background-color:#fff}.igo-user-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background-color:#efefef}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.igo-user-button-container[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]{position:absolute;bottom:0}}.igo-user-button-more-container[_ngcontent-%COMP%]{float:left;height:40px}.igo-user-button-more-container[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]{margin-right:2px;float:left}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.igo-user-button-more-container[_ngcontent-%COMP%]{height:80px;width:150px;position:relative;left:24px}}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"], data: { animation: [userButtonSlideInOut()] } });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-user-button', animations: [userButtonSlideInOut()], template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\n  <div class=\"igo-user-button-more-container\" [@userButtonState]=\"expand ? 'expand' : 'collapse'\">\n\n    <igo-poi-button *ngIf=\"hasApi\" [color]=\"color\" [map]=\"map\"></igo-poi-button>\n\n    <button\n      mat-icon-button\n      [matTooltip]=\"'igo.context.userButton.infoTitle' | translate\"\n      matTooltipPosition=\"above\"\n      [color]=\"color\"\n      (click)=\"infoUser()\">\n      <mat-icon svgIcon=\"information-outline\"></mat-icon>\n    </button>\n\n    <button\n      mat-icon-button\n      [matTooltip]=\"'igo.context.userButton.logout' |\u00A0translate\"\n      matTooltipPosition=\"above\"\n      [color]=\"color\"\n      (click)=\"logout()\">\n      <mat-icon svgIcon=\"power\"></mat-icon>\n    </button>\n\n  </div>\n\n  <button\n    mat-icon-button\n    [color]=\"auth.authenticated ? color : 'warn'\"\n    (click)=\"accountClick()\">\n    <mat-icon svgIcon=\"account-box\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-user-button-container button{background-color:#fff}.igo-user-button-container button:hover{background-color:#efefef}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.igo-user-button-container>button{position:absolute;bottom:0}}.igo-user-button-more-container{float:left;height:40px}.igo-user-button-more-container>*{margin-right:2px;float:left}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.igo-user-button-more-container{height:80px;width:150px;position:relative;left:24px}}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-user-button', animations: [userButtonSlideInOut()], template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\r\n  <div class=\"igo-user-button-more-container\" [@userButtonState]=\"expand ? 'expand' : 'collapse'\">\r\n\r\n    <igo-poi-button *ngIf=\"hasApi\" [color]=\"color\" [map]=\"map\"></igo-poi-button>\r\n\r\n    <button\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.context.userButton.infoTitle' | translate\"\r\n      matTooltipPosition=\"above\"\r\n      [color]=\"color\"\r\n      (click)=\"infoUser()\">\r\n      <mat-icon svgIcon=\"information-outline\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.context.userButton.logout' |\u00A0translate\"\r\n      matTooltipPosition=\"above\"\r\n      [color]=\"color\"\r\n      (click)=\"logout()\">\r\n      <mat-icon svgIcon=\"power\"></mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n  <button\r\n    mat-icon-button\r\n    [color]=\"auth.authenticated ? color : 'warn'\"\r\n    (click)=\"accountClick()\">\r\n    <mat-icon svgIcon=\"account-box\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-user-button-container button{background-color:#fff}.igo-user-button-container button:hover{background-color:#efefef}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.igo-user-button-container>button{position:absolute;bottom:0}}.igo-user-button-more-container{float:left;height:40px}.igo-user-button-more-container>*{margin-right:2px;float:left}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.igo-user-button-more-container{height:80px;width:150px;position:relative;left:24px}}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
     }], function () { return [{ type: i1$3.MatDialog }, { type: i3.ConfigService }, { type: i2.AuthService }]; }, { map: [{
             type: Input
         }], color: [{
@@ -4306,7 +4229,7 @@ ShareMapUrlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShareM
     } }, dependencies: [i4.NgIf, i4$1.MatIcon, i6.MatFormField, i5.MatInput, i7.MatButton, i13.CustomHtmlComponent, i9$1.TranslatePipe], styles: ["@charset \"UTF-8\";mat-form-field[_ngcontent-%COMP%]{width:100%}.linkToShare\\a0[_ngcontent-%COMP%] {padding:25px 5px 5px}.linkToShare\\a0[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]{resize:none;width:100%;line-height:1.3;height:40px;overflow-y:hidden;word-wrap:normal;word-break:break-all}.linkToShare\\a0[_ngcontent-%COMP%]   textarea.textAreaWithButton[_ngcontent-%COMP%]{width:calc(100% - 60px)}.linkToShare\\a0[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]{float:right;margin:-10px 0}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-custom-html.shareCustomPadding[_ngcontent-%COMP%]{padding:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareMapUrlComponent, [{
         type: Component,
-        args: [{ selector: 'igo-share-map-url', template: "<div class=\"igo-input-container linkToShare\">\n  <mat-form-field>\n    <textarea #textArea matInput readonly rows=\"3\"\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\n      [value]=\"url\"></textarea>\n  </mat-form-field>\n\n  <div class=\"igo-form-button-group\">\n    <button\n      mat-raised-button\n      (click)=\"copyTextToClipboard(textArea)\">\n      <mat-icon svgIcon=\"content-copy\"></mat-icon>\n      {{ 'igo.context.shareMap.copy' | translate }}\n    </button>\n  </div>\n  <div>\n    <br/>\n    <section class=\"mat-typography\">\n      <div *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate)===''\">\n        <h4 *ngIf=\"('igo.context.shareMap.included' | translate)!==''\">{{'igo.context.shareMap.included' | translate}}</h4>\n        <ul>\n          <li *ngIf=\"('igo.context.shareMap.context' | translate)!==''\">{{'igo.context.shareMap.context' | translate}}</li>\n          <li *ngIf=\"('igo.context.shareMap.center' | translate)!==''\">{{'igo.context.shareMap.center' | translate}}</li>\n          <li *ngIf=\"('igo.context.shareMap.zoom' | translate)!==''\">{{'igo.context.shareMap.zoom' | translate}}</li>\n          <li *ngIf=\"('igo.context.shareMap.addedLayers' | translate)!==''\">{{'igo.context.shareMap.addedLayers' | translate}}</li>\n          <li *ngIf=\"('igo.context.shareMap.visibleInvisible' | translate)!==''\">{{'igo.context.shareMap.visibleInvisible' | translate}}</li>\n        </ul>\n\n      <h4 *ngIf=\"('igo.context.shareMap.excluded' | translate)!==''\">{{'igo.context.shareMap.excluded' | translate}}</h4>\n      <ul>\n        <li *ngIf=\"('igo.context.shareMap.order' | translate)!==''\">{{'igo.context.shareMap.order' | translate}}</li>\n        <li *ngIf=\"('igo.context.shareMap.opacity' | translate)!==''\">{{'igo.context.shareMap.opacity' | translate}}</li>\n        <li *ngIf=\"('igo.context.shareMap.filterOgc' | translate)!==''\">{{'igo.context.shareMap.filterOgc' | translate}}</li>\n        <li *ngIf=\"('igo.context.shareMap.filterTime' | translate)!==''\">{{'igo.context.shareMap.filterTime' | translate}}</li>\n      </ul>\n    </div>\n    <igo-custom-html class=\"shareCustomPadding\" *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate)!==''\" class=\"mat-typography\"\n        [html]=\"('igo.context.shareMap.htmlClarifications' | translate)\">\n     </igo-custom-html>\n    </section>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";mat-form-field{width:100%}.linkToShare\\a0 {padding:25px 5px 5px}.linkToShare\\a0  textarea{resize:none;width:100%;line-height:1.3;height:40px;overflow-y:hidden;word-wrap:normal;word-break:break-all}.linkToShare\\a0  textarea.textAreaWithButton{width:calc(100% - 60px)}.linkToShare\\a0  mat-form-field>button{float:right;margin:-10px 0}.igo-form-button-group{text-align:center;padding-top:10px}igo-custom-html.shareCustomPadding{padding:0}\n"] }]
+        args: [{ selector: 'igo-share-map-url', template: "<div class=\"igo-input-container linkToShare\">\r\n  <mat-form-field>\r\n    <textarea #textArea matInput readonly rows=\"3\"\r\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\r\n      [value]=\"url\"></textarea>\r\n  </mat-form-field>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button\r\n      mat-raised-button\r\n      (click)=\"copyTextToClipboard(textArea)\">\r\n      <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n      {{ 'igo.context.shareMap.copy' | translate }}\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <br/>\r\n    <section class=\"mat-typography\">\r\n      <div *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate)===''\">\r\n        <h4 *ngIf=\"('igo.context.shareMap.included' | translate)!==''\">{{'igo.context.shareMap.included' | translate}}</h4>\r\n        <ul>\r\n          <li *ngIf=\"('igo.context.shareMap.context' | translate)!==''\">{{'igo.context.shareMap.context' | translate}}</li>\r\n          <li *ngIf=\"('igo.context.shareMap.center' | translate)!==''\">{{'igo.context.shareMap.center' | translate}}</li>\r\n          <li *ngIf=\"('igo.context.shareMap.zoom' | translate)!==''\">{{'igo.context.shareMap.zoom' | translate}}</li>\r\n          <li *ngIf=\"('igo.context.shareMap.addedLayers' | translate)!==''\">{{'igo.context.shareMap.addedLayers' | translate}}</li>\r\n          <li *ngIf=\"('igo.context.shareMap.visibleInvisible' | translate)!==''\">{{'igo.context.shareMap.visibleInvisible' | translate}}</li>\r\n        </ul>\r\n\r\n      <h4 *ngIf=\"('igo.context.shareMap.excluded' | translate)!==''\">{{'igo.context.shareMap.excluded' | translate}}</h4>\r\n      <ul>\r\n        <li *ngIf=\"('igo.context.shareMap.order' | translate)!==''\">{{'igo.context.shareMap.order' | translate}}</li>\r\n        <li *ngIf=\"('igo.context.shareMap.opacity' | translate)!==''\">{{'igo.context.shareMap.opacity' | translate}}</li>\r\n        <li *ngIf=\"('igo.context.shareMap.filterOgc' | translate)!==''\">{{'igo.context.shareMap.filterOgc' | translate}}</li>\r\n        <li *ngIf=\"('igo.context.shareMap.filterTime' | translate)!==''\">{{'igo.context.shareMap.filterTime' | translate}}</li>\r\n      </ul>\r\n    </div>\r\n    <igo-custom-html class=\"shareCustomPadding\" *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate)!==''\" class=\"mat-typography\"\r\n        [html]=\"('igo.context.shareMap.htmlClarifications' | translate)\">\r\n     </igo-custom-html>\r\n    </section>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";mat-form-field{width:100%}.linkToShare\\a0 {padding:25px 5px 5px}.linkToShare\\a0  textarea{resize:none;width:100%;line-height:1.3;height:40px;overflow-y:hidden;word-wrap:normal;word-break:break-all}.linkToShare\\a0  textarea.textAreaWithButton{width:calc(100% - 60px)}.linkToShare\\a0  mat-form-field>button{float:right;margin:-10px 0}.igo-form-button-group{text-align:center;padding-top:10px}igo-custom-html.shareCustomPadding{padding:0}\n"] }]
     }], function () { return [{ type: i3.MessageService }, { type: ShareMapService }, { type: i0.ChangeDetectorRef }]; }, { map: [{
             type: Input
         }] }); })();
@@ -4382,11 +4305,7 @@ class ShareMapApiComponent {
         this.url = this.shareMapService.getUrlWithApi(inputs);
         this.shareMapService.createContextShared(this.map, inputs).subscribe(rep => {
             this.idContextShared = rep.id;
-            const title = this.languageService.translate.instant('igo.context.contextManager.dialog.saveTitle');
-            const msg = this.languageService.translate.instant('igo.context.contextManager.dialog.saveMsg', {
-                value: inputs.title
-            });
-            this.messageService.success(msg, title);
+            this.messageService.success('igo.context.contextManager.dialog.saveMsg', 'igo.context.contextManager.dialog.saveTitle', undefined, { value: inputs.title });
         }, err => {
             err.error.title = this.languageService.translate.instant('igo.context.shareMap.errorTitle');
             this.messageService.showError(err);
@@ -4396,11 +4315,7 @@ class ShareMapApiComponent {
         const inputs = Object.assign({}, values);
         inputs.uri = this.userId ? `${this.userId}-${values.uri}` : values.uri;
         this.shareMapService.updateContextShared(this.map, inputs, this.idContextShared).subscribe(rep => {
-            const title = this.languageService.translate.instant('igo.context.contextManager.dialog.saveTitle');
-            const msg = this.languageService.translate.instant('igo.context.contextManager.dialog.saveMsg', {
-                value: inputs.title
-            });
-            this.messageService.success(msg, title);
+            this.messageService.success('igo.context.contextManager.dialog.saveMsg', 'igo.context.contextManager.dialog.saveTitle', undefined, { value: inputs.title });
         }, err => {
             err.error.title = this.languageService.translate.instant('igo.context.shareMap.errorTitle');
             this.messageService.showError(err);
@@ -4409,10 +4324,7 @@ class ShareMapApiComponent {
     copyTextToClipboard(textArea) {
         const successful = Clipboard.copy(textArea);
         if (successful) {
-            const translate = this.languageService.translate;
-            const title = translate.instant('igo.context.shareMap.dialog.copyTitle');
-            const msg = translate.instant('igo.context.shareMap.dialog.copyMsg');
-            this.messageService.success(msg, title);
+            this.messageService.success('igo.context.shareMap.dialog.copyMsg', 'igo.context.shareMap.dialog.copyTitle');
         }
     }
     buildForm() {
@@ -4473,7 +4385,7 @@ ShareMapApiComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShareM
     } }, dependencies: [i4.NgIf, i1$2.ɵNgNoValidate, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.RequiredValidator, i1$2.FormGroupDirective, i1$2.FormControlName, i4$1.MatIcon, i6$1.MatTooltip, i6.MatError, i6.MatFormField, i5.MatInput, i7.MatButton, i9$1.TranslatePipe], styles: ["@charset \"UTF-8\";mat-form-field[_ngcontent-%COMP%]{width:100%}#uriInput[_ngcontent-%COMP%]   .fieldWrapper[_ngcontent-%COMP%]{display:block;overflow:hidden}#uriInput[_ngcontent-%COMP%]   .prefix[_ngcontent-%COMP%]{float:left}.linkToShare\\a0[_ngcontent-%COMP%] {padding:25px 5px 5px}.linkToShare\\a0[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]{resize:none;width:100%;line-height:1.3;height:40px;overflow-y:hidden;word-wrap:normal;word-break:break-all}.linkToShare\\a0[_ngcontent-%COMP%]   textarea.textAreaWithButton[_ngcontent-%COMP%]{width:calc(100% - 60px)}.linkToShare\\a0[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]{float:right;margin:-10px 0}.igo-form[_ngcontent-%COMP%]{padding:20px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareMapApiComponent, [{
         type: Component,
-        args: [{ selector: 'igo-share-map-api', template: "<form class=\"igo-form\" [formGroup]=\"form\"\n  (ngSubmit)=\"createUrl(form.value)\">\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input matInput required\n             [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\n             formControlName=\"title\">\n     <mat-error>\n      {{ 'igo.context.contextManager.form.titleRequired' | translate }}\n     </mat-error>\n    </mat-form-field>\n  </div>\n\n  <div id=\"uriInput\" class=\"igo-input-container\">\n    <mat-form-field>\n      <span *ngIf=\"userId\" class=\"prefix\">{{userId}}-</span>\n      <span class=\"fieldWrapper\">\n        <input matInput required\n             [readonly]=\"!userId\"\n             [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\n             formControlName=\"uri\">\n       </span>\n     <mat-error>\n      {{ 'igo.context.contextManager.form.uriRequired' | translate }}\n     </mat-error>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-form-button-group\">\n    <button *ngIf=\"!url\"\n      mat-raised-button\n      type=\"submit\"\n      [disabled]=\"!form.valid\">\n      {{ 'igo.context.shareMap.button' | translate }}\n    </button>\n    <button *ngIf=\"url\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"updateContextShared(form.value)\">\n      {{ 'igo.context.shareMap.refreshBtn' | translate }}\n    </button>\n  </div>\n</form>\n\n<div *ngIf=\"url\" class=\"igo-input-container linkToShare\">\n  <mat-form-field>\n    <textarea #textArea matInput readonly rows=\"3\"\n      class=\"textAreaWithButton\"\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\n      [value]=\"url\"></textarea>\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.context.shareMap.copy' | translate\"\n      color=\"primary\"\n      (click)=\"copyTextToClipboard(textArea)\">\n      <mat-icon svgIcon=\"content-copy\"></mat-icon>\n    </button>\n  </mat-form-field>\n<div>\n", styles: ["@charset \"UTF-8\";mat-form-field{width:100%}#uriInput .fieldWrapper{display:block;overflow:hidden}#uriInput .prefix{float:left}.linkToShare\\a0 {padding:25px 5px 5px}.linkToShare\\a0  textarea{resize:none;width:100%;line-height:1.3;height:40px;overflow-y:hidden;word-wrap:normal;word-break:break-all}.linkToShare\\a0  textarea.textAreaWithButton{width:calc(100% - 60px)}.linkToShare\\a0  mat-form-field>button{float:right;margin:-10px 0}.igo-form{padding:20px 5px 5px}.igo-form-button-group{text-align:center;padding-top:10px}\n"] }]
+        args: [{ selector: 'igo-share-map-api', template: "<form class=\"igo-form\" [formGroup]=\"form\"\r\n  (ngSubmit)=\"createUrl(form.value)\">\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input matInput required\r\n             [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\r\n             formControlName=\"title\">\r\n     <mat-error>\r\n      {{ 'igo.context.contextManager.form.titleRequired' | translate }}\r\n     </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div id=\"uriInput\" class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <span *ngIf=\"userId\" class=\"prefix\">{{userId}}-</span>\r\n      <span class=\"fieldWrapper\">\r\n        <input matInput required\r\n             [readonly]=\"!userId\"\r\n             [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\r\n             formControlName=\"uri\">\r\n       </span>\r\n     <mat-error>\r\n      {{ 'igo.context.contextManager.form.uriRequired' | translate }}\r\n     </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button *ngIf=\"!url\"\r\n      mat-raised-button\r\n      type=\"submit\"\r\n      [disabled]=\"!form.valid\">\r\n      {{ 'igo.context.shareMap.button' | translate }}\r\n    </button>\r\n    <button *ngIf=\"url\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"updateContextShared(form.value)\">\r\n      {{ 'igo.context.shareMap.refreshBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</form>\r\n\r\n<div *ngIf=\"url\" class=\"igo-input-container linkToShare\">\r\n  <mat-form-field>\r\n    <textarea #textArea matInput readonly rows=\"3\"\r\n      class=\"textAreaWithButton\"\r\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\r\n      [value]=\"url\"></textarea>\r\n    <button\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.context.shareMap.copy' | translate\"\r\n      color=\"primary\"\r\n      (click)=\"copyTextToClipboard(textArea)\">\r\n      <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n<div>\r\n", styles: ["@charset \"UTF-8\";mat-form-field{width:100%}#uriInput .fieldWrapper{display:block;overflow:hidden}#uriInput .prefix{float:left}.linkToShare\\a0 {padding:25px 5px 5px}.linkToShare\\a0  textarea{resize:none;width:100%;line-height:1.3;height:40px;overflow-y:hidden;word-wrap:normal;word-break:break-all}.linkToShare\\a0  textarea.textAreaWithButton{width:calc(100% - 60px)}.linkToShare\\a0  mat-form-field>button{float:right;margin:-10px 0}.igo-form{padding:20px 5px 5px}.igo-form-button-group{text-align:center;padding-top:10px}\n"] }]
     }], function () { return [{ type: i3.LanguageService }, { type: i3.MessageService }, { type: i2.AuthService }, { type: ShareMapService }, { type: i1$2.UntypedFormBuilder }]; }, { map: [{
             type: Input
         }] }); })();
@@ -4522,7 +4434,7 @@ ShareMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShareMapC
     } }, dependencies: [i4.NgIf, i3$1.MatTabGroup, i3$1.MatTab, ShareMapUrlComponent, ShareMapApiComponent, i9$1.TranslatePipe] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareMapComponent, [{
         type: Component,
-        args: [{ selector: 'igo-share-map', template: "<mat-tab-group *ngIf=\"hasApi\" >\n  <mat-tab [label]=\"'igo.context.shareMap.shareWithApi' | translate\">\n    <igo-share-map-api [map]=\"map\"></igo-share-map-api>\n  </mat-tab>\n  <mat-tab [label]=\"'igo.context.shareMap.shareWithUrl' | translate\">\n    <igo-share-map-url [map]=\"map\"></igo-share-map-url>\n  </mat-tab>\n</mat-tab-group>\n\n<igo-share-map-url *ngIf=\"!hasApi\" [map]=\"map\"></igo-share-map-url>\n" }]
+        args: [{ selector: 'igo-share-map', template: "<mat-tab-group *ngIf=\"hasApi\" >\r\n  <mat-tab [label]=\"'igo.context.shareMap.shareWithApi' | translate\">\r\n    <igo-share-map-api [map]=\"map\"></igo-share-map-api>\r\n  </mat-tab>\r\n  <mat-tab [label]=\"'igo.context.shareMap.shareWithUrl' | translate\">\r\n    <igo-share-map-url [map]=\"map\"></igo-share-map-url>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n\r\n<igo-share-map-url *ngIf=\"!hasApi\" [map]=\"map\"></igo-share-map-url>\r\n" }]
     }], function () { return [{ type: i3.ConfigService }]; }, { map: [{
             type: Input
         }] }); })();
@@ -4720,7 +4632,7 @@ SidenavComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavCom
     } }, dependencies: [i4.NgIf, i4$1.MatIcon, i7.MatButton, i5$1.MatSidenav, i6$1.MatTooltip, i13.PanelComponent, i13.FlexibleComponent, i1$1.FeatureDetailsComponent, i9$1.TranslatePipe], styles: ["[_nghost-%COMP%]     .igo-flexible-fill .igo-container, .igo-sidenav-content[_ngcontent-%COMP%]   .igo-flexible-fill[_ngcontent-%COMP%]   .igo-container[_ngcontent-%COMP%]{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}[_nghost-%COMP%]     .igo-flexible-fill .igo-container, .igo-sidenav-content[_ngcontent-%COMP%]   .igo-flexible-fill[_ngcontent-%COMP%]   .igo-container[_ngcontent-%COMP%]{border-top-width:1px;border-top-style:solid;border-top-color:#0003}mat-sidenav[_ngcontent-%COMP%]{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd}[_nghost-%COMP%]{background-color:#fff}[_nghost-%COMP%]     mat-sidenav{z-index:3!important}mat-sidenav[_ngcontent-%COMP%]{width:400px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){mat-sidenav[_ngcontent-%COMP%]{width:calc(100% - 45px)}}.igo-sidenav-content[_ngcontent-%COMP%]{margin-top:50px;height:calc(100% - 50px)}igo-feature-details[_ngcontent-%COMP%]     table{width:100%}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavComponent, [{
         type: Component,
-        args: [{ selector: 'igo-sidenav', template: "<mat-sidenav\n  #sidenav\n  igoSidenavShim\n  mode=\"side\"\n  [opened]=\"opened\">\n\n  <div class=\"igo-sidenav-content\">\n\n    <igo-flexible\n      #topPanel\n      initial=\"50%\" initialMobile=\"100%\"\n      expanded=\"calc(100% - 58px)\"\n      [state]=\"topPanelState\">\n\n      <div class=\"igo-content\">\n        <igo-panel [title]=\"tool ? (tool.title | translate) : title\">\n          <button\n            mat-icon-button\n            panelLeftButton\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"'igo.context.sidenav.goBack' | translate\"\n            *ngIf=\"tool\">\n            <mat-icon svgIcon=\"arrow-back\"></mat-icon>\n          </button>\n\n          <button\n            mat-icon-button\n            panelRightButton\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"'igo.context.sidenav.mainMenu' | translate\"\n            *ngIf=\"tool\">\n            <mat-icon svgIcon=\"menu\"></mat-icon>\n          </button>\n\n        </igo-panel>\n      </div>\n\n      <div igoFlexibleFill class=\"igo-content\">\n        <igo-panel\n          [title]=\"featureTitle\"\n          *ngIf=\"feature && media !== 'mobile'\">\n\n          <button\n            mat-icon-button\n            panelLeftButton\n            class=\"igo-icon-button\"\n            (click)=\"toggleTopPanel()\">\n            <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(topPanel.state) >= 0 ? 'arrow_downward' : 'arrow_upward'\"></mat-icon>\n          </button>\n\n          <button\n            mat-icon-button\n            panelRightButton\n            class=\"igo-icon-button\"\n            (click)=\"zoomToFeatureExtent()\"\n            *ngIf=\"feature.geometry\">\n            <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n          </button>\n\n          <igo-feature-details\n            [feature]=\"feature\"\n            *ngIf=\"['collapsed', 'initial'].indexOf(topPanel.state) >= 0\">\n          </igo-feature-details>\n        </igo-panel>\n      </div>\n\n    </igo-flexible>\n\n  </div>\n</mat-sidenav>\n", styles: [":host ::ng-deep .igo-flexible-fill .igo-container,.igo-sidenav-content .igo-flexible-fill .igo-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}:host ::ng-deep .igo-flexible-fill .igo-container,.igo-sidenav-content .igo-flexible-fill .igo-container{border-top-width:1px;border-top-style:solid;border-top-color:#0003}mat-sidenav{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd}:host{background-color:#fff}:host ::ng-deep mat-sidenav{z-index:3!important}mat-sidenav{width:400px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){mat-sidenav{width:calc(100% - 45px)}}.igo-sidenav-content{margin-top:50px;height:calc(100% - 50px)}igo-feature-details ::ng-deep table{width:100%}\n"] }]
+        args: [{ selector: 'igo-sidenav', template: "<mat-sidenav\r\n  #sidenav\r\n  igoSidenavShim\r\n  mode=\"side\"\r\n  [opened]=\"opened\">\r\n\r\n  <div class=\"igo-sidenav-content\">\r\n\r\n    <igo-flexible\r\n      #topPanel\r\n      initial=\"50%\" initialMobile=\"100%\"\r\n      expanded=\"calc(100% - 58px)\"\r\n      [state]=\"topPanelState\">\r\n\r\n      <div class=\"igo-content\">\r\n        <igo-panel [title]=\"tool ? (tool.title | translate) : title\">\r\n          <button\r\n            mat-icon-button\r\n            panelLeftButton\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"'igo.context.sidenav.goBack' | translate\"\r\n            *ngIf=\"tool\">\r\n            <mat-icon svgIcon=\"arrow-back\"></mat-icon>\r\n          </button>\r\n\r\n          <button\r\n            mat-icon-button\r\n            panelRightButton\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"'igo.context.sidenav.mainMenu' | translate\"\r\n            *ngIf=\"tool\">\r\n            <mat-icon svgIcon=\"menu\"></mat-icon>\r\n          </button>\r\n\r\n        </igo-panel>\r\n      </div>\r\n\r\n      <div igoFlexibleFill class=\"igo-content\">\r\n        <igo-panel\r\n          [title]=\"featureTitle\"\r\n          *ngIf=\"feature && media !== 'mobile'\">\r\n\r\n          <button\r\n            mat-icon-button\r\n            panelLeftButton\r\n            class=\"igo-icon-button\"\r\n            (click)=\"toggleTopPanel()\">\r\n            <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(topPanel.state) >= 0 ? 'arrow_downward' : 'arrow_upward'\"></mat-icon>\r\n          </button>\r\n\r\n          <button\r\n            mat-icon-button\r\n            panelRightButton\r\n            class=\"igo-icon-button\"\r\n            (click)=\"zoomToFeatureExtent()\"\r\n            *ngIf=\"feature.geometry\">\r\n            <mat-icon svgIcon=\"zoom-in\"></mat-icon>\r\n          </button>\r\n\r\n          <igo-feature-details\r\n            [feature]=\"feature\"\r\n            *ngIf=\"['collapsed', 'initial'].indexOf(topPanel.state) >= 0\">\r\n          </igo-feature-details>\r\n        </igo-panel>\r\n      </div>\r\n\r\n    </igo-flexible>\r\n\r\n  </div>\r\n</mat-sidenav>\r\n", styles: [":host ::ng-deep .igo-flexible-fill .igo-container,.igo-sidenav-content .igo-flexible-fill .igo-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}:host ::ng-deep .igo-flexible-fill .igo-container,.igo-sidenav-content .igo-flexible-fill .igo-container{border-top-width:1px;border-top-style:solid;border-top-color:#0003}mat-sidenav{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd}:host{background-color:#fff}:host ::ng-deep mat-sidenav{z-index:3!important}mat-sidenav{width:400px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){mat-sidenav{width:calc(100% - 45px)}}.igo-sidenav-content{margin-top:50px;height:calc(100% - 50px)}igo-feature-details ::ng-deep table{width:100%}\n"] }]
     }], function () { return [{ type: i1$4.Title }]; }, { map: [{
             type: Input
         }], opened: [{