@igo2/context 16.3.0 → 17.0.0-next.0

package/fesm2022/igo2-context.mjs

@@ -1,64 +1,63 @@
 import * as i0 from '@angular/core';
 import { Injectable, Optional, Component, Input, NgModule, EventEmitter, Output, Directive, Self, HostListener, ChangeDetectionStrategy } from '@angular/core';
-import * as i6$1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i12$1 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i6 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1$2 from '@angular/forms';
+import { NgIf, NgFor, AsyncPipe, NgClass, KeyValuePipe } from '@angular/common';
+import * as i4 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import * as i7 from '@angular/material/button';
+import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i8 from '@angular/material/button-toggle';
+import * as i6 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i11$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i12 from '@angular/material/core';
+import * as i11 from '@angular/material/core';
 import { MatOptionModule } from '@angular/material/core';
-import * as i9 from '@angular/material/divider';
+import * as i12 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i11 from '@angular/material/select';
+import * as i4$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i10 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$1 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i6$3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i13 from '@igo2/common';
-import { IgoSpinnerModule, IgoConfirmDialogModule, IgoStopPropagationModule, ActionStore, ActionbarMode, IgoListModule, IgoKeyValueModule, IgoCollapsibleModule, IgoActionbarModule, IgoCustomHtmlModule, getEntityTitle, IgoPanelModule, IgoFlexibleModule } from '@igo2/common';
+import * as i5$2 from '@igo2/common';
+import { SpinnerComponent, StopPropagationDirective, CollapseDirective, ActionStore, ActionbarMode, ListComponent, ActionbarComponent, CollapsibleComponent, ListItemDirective, ConfirmDialogService, CustomHtmlComponent, getEntityTitle, FlexibleComponent, PanelComponent } from '@igo2/common';
 import * as i3 from '@igo2/core';
-import { IgoLanguageModule } from '@igo2/core';
-import { BehaviorSubject, Subject, of, Observable, EMPTY, ReplaySubject, timer, merge, combineLatest } from 'rxjs';
+import * as i7 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { BehaviorSubject, Subject, of, Observable, ReplaySubject, timer, merge, EMPTY, combineLatest } from 'rxjs';
 import { skip, first, catchError, tap, map, mergeMap, debounceTime, take, debounce, filter, buffer } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import * as i2 from '@igo2/auth';
-import { IgoAuthModule } from '@igo2/auth';
 import * as i1$1 from '@igo2/geo';
-import { FeatureDataSource, featureRandomStyleFunction, featureRandomStyle, VectorLayer, ClusterDataSource, moveToOlFeatures, FeatureMotion, IgoFeatureModule } from '@igo2/geo';
+import { FeatureDataSource, featureRandomStyleFunction, featureRandomStyle, VectorLayer, ClusterDataSource, moveToOlFeatures, FeatureMotion, FeatureDetailsComponent } from '@igo2/geo';
 import { ObjectUtils, uuid, downloadContent, Clipboard } from '@igo2/utils';
 import GeoJSON from 'ol/format/GeoJSON';
 import olPoint from 'ol/geom/Point';
 import Cluster from 'ol/source/Cluster';
 import olVectorSource from 'ol/source/Vector';
-import * as i9$1 from '@ngx-translate/core';
-import * as i14 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i1$3 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
-import * as i6$2 from '@angular/material/icon';
+import * as i6$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7$1 from '@angular/material/list';
+import * as i5$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i12$2 from '@angular/material/radio';
+import * as i11$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$2 from '@angular/material/dialog';
+import { MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import * as i10$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i8 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i5$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as oleasing from 'ol/easing';
 import * as olproj from 'ol/proj';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i5$1 from '@angular/material/sidenav';
+import * as i2$1 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i2$2 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$4 from '@angular/platform-browser';
+import * as i1$3 from '@angular/platform-browser';
 
 var TypePermission;
 (function (TypePermission) {
@@ -709,17 +708,17 @@ class ContextService {
         }
         return found;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextService, deps: [{ token: i1.HttpClient }, { token: i2.AuthService }, { token: i3.LanguageService }, { token: i3.ConfigService }, { token: i3.MessageService }, { token: i3.StorageService }, { token: i1$1.ExportService }, { token: i3.RouteService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextService, deps: [{ token: i1.HttpClient }, { token: i2.AuthService }, { token: i3.LanguageService }, { token: i3.ConfigService }, { token: i3.MessageService }, { token: i3.StorageService }, { token: i1$1.ExportService }, { token: i3.RouteService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.AuthService }, { type: i3.LanguageService }, { type: i3.ConfigService }, { type: i3.MessageService }, { type: i3.StorageService }, { type: i1$1.ExportService }, { type: i3.RouteService, decorators: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.AuthService }, { type: i3.LanguageService }, { type: i3.ConfigService }, { type: i3.MessageService }, { type: i3.StorageService }, { type: i1$1.ExportService }, { type: i3.RouteService, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }] });
 
 class ExportError extends Error {
 }
@@ -759,10 +758,10 @@ class ContextExportService {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextExportService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextExportService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextExportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1027,15 +1026,15 @@ class ContextImportService {
         const context = JSON.parse(data);
         return context;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextImportService, deps: [{ token: i3.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextImportService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextImportService, deps: [{ token: i3.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextImportService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextImportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextImportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i3.ConfigService }]; } });
+        }], ctorParameters: () => [{ type: i3.ConfigService }] });
 
 class ContextImportExportComponent {
     contextImportService;
@@ -1134,352 +1133,360 @@ class ContextImportExportComponent {
     ngOnDestroy() {
         this.layers$$.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextImportExportComponent, deps: [{ token: ContextImportService }, { token: ContextExportService }, { token: i3.MessageService }, { token: i1$2.UntypedFormBuilder }, { token: i3.ConfigService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContextImportExportComponent, selector: "igo-context-import-export", inputs: { map: "map" }, ngImport: i0, 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  >\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\r\n        mat-raised-button\r\n        type=\"button\"\r\n        (click)=\"fileInput.click()\"\r\n        [disabled]=\"loading$ | async\"\r\n      >\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      />\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>\r\n        {{\r\n          'igo.geo.importExportForm.importSizeMax'\r\n            | translate: { size: fileSizeMb }\r\n        }}\r\n      </li>\r\n    </ul>\r\n  </section>\r\n</div>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  *ngIf=\"activeImportExport === 'export'\"\r\n  [formGroup]=\"form\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field class=\"example-full-width\">\r\n      <mat-label>{{\r\n        'igo.context.contextImportExport.export.exportContextName' | translate\r\n      }}</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>{{\r\n        'igo.context.contextImportExport.export.exportPlaceHolder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"layers\" multiple>\r\n        <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\r\n          {{\r\n            'igo.context.contextImportExport.export.exportSelectAll' | translate\r\n          }}\r\n        </mat-option>\r\n        <mat-divider></mat-divider>\r\n        <mat-option\r\n          *ngFor=\"let layer of userControlledLayerList\"\r\n          [value]=\"layer\"\r\n          >{{ layer.title }}</mat-option\r\n        >\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    >\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"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.SpinnerComponent, selector: "igo-spinner", inputs: ["shown"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextImportExportComponent, deps: [{ token: ContextImportService }, { token: ContextExportService }, { token: i3.MessageService }, { token: i4.UntypedFormBuilder }, { token: i3.ConfigService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ContextImportExportComponent, isStandalone: true, selector: "igo-context-import-export", inputs: { map: "map" }, ngImport: i0, 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  >\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\r\n        mat-raised-button\r\n        type=\"button\"\r\n        (click)=\"fileInput.click()\"\r\n        [disabled]=\"loading$ | async\"\r\n      >\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($any($event.target).files)\"\r\n      />\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>\r\n        {{\r\n          'igo.geo.importExportForm.importSizeMax'\r\n            | translate: { size: fileSizeMb }\r\n        }}\r\n      </li>\r\n    </ul>\r\n  </section>\r\n</div>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  *ngIf=\"activeImportExport === 'export'\"\r\n  [formGroup]=\"form\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field class=\"example-full-width\">\r\n      <mat-label>{{\r\n        'igo.context.contextImportExport.export.exportContextName' | translate\r\n      }}</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>{{\r\n        'igo.context.contextImportExport.export.exportPlaceHolder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"layers\" multiple>\r\n        <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\r\n          {{\r\n            'igo.context.contextImportExport.export.exportSelectAll' | translate\r\n          }}\r\n        </mat-option>\r\n        <mat-divider></mat-divider>\r\n        <mat-option\r\n          *ngFor=\"let layer of userControlledLayerList\"\r\n          [value]=\"layer\"\r\n          >{{ layer.title }}</mat-option\r\n        >\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    >\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"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: SpinnerComponent, selector: "igo-spinner", inputs: ["shown"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextImportExportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextImportExportComponent, decorators: [{
             type: Component,
-            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  >\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\r\n        mat-raised-button\r\n        type=\"button\"\r\n        (click)=\"fileInput.click()\"\r\n        [disabled]=\"loading$ | async\"\r\n      >\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      />\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>\r\n        {{\r\n          'igo.geo.importExportForm.importSizeMax'\r\n            | translate: { size: fileSizeMb }\r\n        }}\r\n      </li>\r\n    </ul>\r\n  </section>\r\n</div>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  *ngIf=\"activeImportExport === 'export'\"\r\n  [formGroup]=\"form\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field class=\"example-full-width\">\r\n      <mat-label>{{\r\n        'igo.context.contextImportExport.export.exportContextName' | translate\r\n      }}</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>{{\r\n        'igo.context.contextImportExport.export.exportPlaceHolder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"layers\" multiple>\r\n        <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\r\n          {{\r\n            'igo.context.contextImportExport.export.exportSelectAll' | translate\r\n          }}\r\n        </mat-option>\r\n        <mat-divider></mat-divider>\r\n        <mat-option\r\n          *ngFor=\"let layer of userControlledLayerList\"\r\n          [value]=\"layer\"\r\n          >{{ layer.title }}</mat-option\r\n        >\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    >\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"] }]
-        }], ctorParameters: function () { return [{ type: ContextImportService }, { type: ContextExportService }, { type: i3.MessageService }, { type: i1$2.UntypedFormBuilder }, { type: i3.ConfigService }, { type: ContextService }]; }, propDecorators: { map: [{
+            args: [{ selector: 'igo-context-import-export', standalone: true, imports: [
+                        MatButtonToggleModule,
+                        NgIf,
+                        FormsModule,
+                        MatButtonModule,
+                        SpinnerComponent,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatDividerModule,
+                        NgFor,
+                        AsyncPipe,
+                        TranslateModule
+                    ], 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  >\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\r\n        mat-raised-button\r\n        type=\"button\"\r\n        (click)=\"fileInput.click()\"\r\n        [disabled]=\"loading$ | async\"\r\n      >\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($any($event.target).files)\"\r\n      />\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>\r\n        {{\r\n          'igo.geo.importExportForm.importSizeMax'\r\n            | translate: { size: fileSizeMb }\r\n        }}\r\n      </li>\r\n    </ul>\r\n  </section>\r\n</div>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  *ngIf=\"activeImportExport === 'export'\"\r\n  [formGroup]=\"form\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field class=\"example-full-width\">\r\n      <mat-label>{{\r\n        'igo.context.contextImportExport.export.exportContextName' | translate\r\n      }}</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>{{\r\n        'igo.context.contextImportExport.export.exportPlaceHolder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"layers\" multiple>\r\n        <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\r\n          {{\r\n            'igo.context.contextImportExport.export.exportSelectAll' | translate\r\n          }}\r\n        </mat-option>\r\n        <mat-divider></mat-divider>\r\n        <mat-option\r\n          *ngFor=\"let layer of userControlledLayerList\"\r\n          [value]=\"layer\"\r\n          >{{ layer.title }}</mat-option\r\n        >\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    >\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"] }]
+        }], ctorParameters: () => [{ type: ContextImportService }, { type: ContextExportService }, { type: i3.MessageService }, { type: i4.UntypedFormBuilder }, { type: i3.ConfigService }, { type: ContextService }], propDecorators: { map: [{
                 type: Input
             }] } });
 
+/**
+ * @deprecated import the ContextImportExportComponent directly
+ */
 class IgoContextImportExportModule {
     static forRoot() {
         return {
             ngModule: IgoContextImportExportModule
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextImportExportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IgoContextImportExportModule, declarations: [ContextImportExportComponent], imports: [FormsModule,
-            ReactiveFormsModule,
-            CommonModule,
-            MatButtonModule,
-            MatButtonToggleModule,
-            MatDividerModule,
-            MatTabsModule,
-            MatSelectModule,
-            MatOptionModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatCheckboxModule,
-            IgoLanguageModule,
-            IgoSpinnerModule,
-            MatTooltipModule], exports: [ContextImportExportComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextImportExportModule, imports: [FormsModule,
-            ReactiveFormsModule,
-            CommonModule,
-            MatButtonModule,
-            MatButtonToggleModule,
-            MatDividerModule,
-            MatTabsModule,
-            MatSelectModule,
-            MatOptionModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatCheckboxModule,
-            IgoLanguageModule,
-            IgoSpinnerModule,
-            MatTooltipModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextImportExportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgoContextImportExportModule, imports: [ContextImportExportComponent], exports: [ContextImportExportComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextImportExportModule, imports: [ContextImportExportComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextImportExportModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextImportExportModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        CommonModule,
-                        MatButtonModule,
-                        MatButtonToggleModule,
-                        MatDividerModule,
-                        MatTabsModule,
-                        MatSelectModule,
-                        MatOptionModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatCheckboxModule,
-                        IgoLanguageModule,
-                        IgoSpinnerModule,
-                        MatTooltipModule
-                    ],
-                    exports: [ContextImportExportComponent],
-                    declarations: [ContextImportExportComponent]
+                    imports: [ContextImportExportComponent],
+                    exports: [ContextImportExportComponent]
                 }]
         }] });
 
-class BookmarkDialogComponent {
-    dialogRef;
-    title;
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarkDialogComponent, deps: [{ token: i1$3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BookmarkDialogComponent, selector: "igo-bookmark-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.context.bookmarkButton.dialog.title' | translate }}\r\n</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      required\r\n      autocomplete=\"off\"\r\n      maxlength=\"128\"\r\n      [placeholder]=\"\r\n        'igo.context.bookmarkButton.dialog.placeholder' | translate\r\n      \"\r\n      [(ngModel)]=\"title\"\r\n    />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button\r\n    mat-button\r\n    color=\"primary\"\r\n    [disabled]=\"!title\"\r\n    (click)=\"dialogRef.close(title)\"\r\n  >\r\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\r\n  </button>\r\n  <button mat-button (click)=\"dialogRef.close(false)\">\r\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarkDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-bookmark-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.context.bookmarkButton.dialog.title' | translate }}\r\n</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      required\r\n      autocomplete=\"off\"\r\n      maxlength=\"128\"\r\n      [placeholder]=\"\r\n        'igo.context.bookmarkButton.dialog.placeholder' | translate\r\n      \"\r\n      [(ngModel)]=\"title\"\r\n    />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button\r\n    mat-button\r\n    color=\"primary\"\r\n    [disabled]=\"!title\"\r\n    (click)=\"dialogRef.close(title)\"\r\n  >\r\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\r\n  </button>\r\n  <button mat-button (click)=\"dialogRef.close(false)\">\r\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\r\n  </button>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }]; } });
-
-class BookmarkButtonComponent {
-    dialog;
-    contextService;
+class ContextFormComponent {
+    formBuilder;
     messageService;
-    get map() {
-        return this._map;
+    form;
+    prefix;
+    get btnSubmitText() {
+        return this._btnSubmitText;
     }
-    set map(value) {
-        this._map = value;
+    set btnSubmitText(value) {
+        this._btnSubmitText = value;
     }
-    _map;
-    get color() {
-        return this._color;
+    _btnSubmitText;
+    get context() {
+        return this._context;
     }
-    set color(value) {
-        this._color = value;
+    set context(value) {
+        this._context = value;
+        this.buildForm();
     }
-    _color;
-    constructor(dialog, contextService, messageService) {
-        this.dialog = dialog;
-        this.contextService = contextService;
+    _context;
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    _disabled = false;
+    // TODO: replace any by ContextOptions or Context
+    submitForm = new EventEmitter();
+    clone = new EventEmitter();
+    delete = new EventEmitter();
+    constructor(formBuilder, messageService) {
+        this.formBuilder = formBuilder;
         this.messageService = messageService;
     }
-    createContext() {
-        this.dialog
-            .open(BookmarkDialogComponent, { disableClose: false })
-            .afterClosed()
-            .pipe(take(1))
-            .subscribe((title) => {
-            if (title) {
-                const context = this.contextService.getContextFromMap(this.map);
-                context.title = title;
-                this.contextService.create(context).subscribe(() => {
-                    this.messageService.success('igo.context.bookmarkButton.dialog.createMsg', 'igo.context.bookmarkButton.dialog.createTitle', undefined, { value: context.title });
-                    this.contextService.loadContext(context.uri);
-                });
-            }
+    ngOnInit() {
+        this.buildForm();
+    }
+    handleFormSubmit(value) {
+        let inputs = Object.assign({}, value);
+        inputs = ObjectUtils.removeNull(inputs);
+        inputs.uri = inputs.uri.replace(' ', '');
+        if (inputs.uri) {
+            inputs.uri = this.prefix + '-' + inputs.uri;
+        }
+        else {
+            inputs.uri = this.prefix;
+        }
+        this.submitForm.emit(inputs);
+    }
+    copyTextToClipboard() {
+        const text = this.prefix + '-' + this.form.value.uri.replace(' ', '');
+        const successful = Clipboard.copy(text);
+        if (successful) {
+            this.messageService.success('igo.context.contextManager.dialog.copyMsg', 'igo.context.contextManager.dialog.copyTitle');
+        }
+    }
+    buildForm() {
+        const context = this.context || {};
+        const uriSplit = context.uri.split('-');
+        this.prefix = uriSplit.shift();
+        const uri = uriSplit.join('-');
+        this.form = this.formBuilder.group({
+            title: [context.title],
+            uri: [uri || ' ']
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarkButtonComponent, deps: [{ token: i1$3.MatDialog }, { token: ContextService }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BookmarkButtonComponent, selector: "igo-bookmark-button", inputs: { map: "map", color: "color" }, ngImport: i0, 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  >\r\n    <mat-icon svgIcon=\"star\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-bookmark-button-container{width:40px}:host .igo-bookmark-button-container button{background-color:#fff}:host .igo-bookmark-button-container button:hover{background-color:#efefef}\n"], dependencies: [{ kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextFormComponent, deps: [{ token: i4.UntypedFormBuilder }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ContextFormComponent, isStandalone: true, selector: "igo-context-form", inputs: { btnSubmitText: "btnSubmitText", context: "context", disabled: "disabled" }, outputs: { submitForm: "submitForm", clone: "clone", delete: "delete" }, ngImport: i0, template: "<form\n  class=\"igo-form\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleFormSubmit(form.value)\"\n>\n  <mat-form-field class=\"full-width\">\n    <input\n      matInput\n      required\n      maxlength=\"128\"\n      [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\n      formControlName=\"title\"\n    />\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\n        matInput\n        maxlength=\"64\"\n        floatLabel=\"always\"\n        [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\n        formControlName=\"uri\"\n      />\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  >\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    >\n      {{ 'igo.context.contextManager.form.edit' | translate }}\n    </button>\n  </div>\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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarkButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextFormComponent, decorators: [{
             type: Component,
-            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  >\r\n    <mat-icon svgIcon=\"star\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-bookmark-button-container{width:40px}:host .igo-bookmark-button-container button{background-color:#fff}:host .igo-bookmark-button-container button:hover{background-color:#efefef}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: ContextService }, { type: i3.MessageService }]; }, propDecorators: { map: [{
+            args: [{ selector: 'igo-context-form', standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        NgIf,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        TranslateModule
+                    ], template: "<form\n  class=\"igo-form\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleFormSubmit(form.value)\"\n>\n  <mat-form-field class=\"full-width\">\n    <input\n      matInput\n      required\n      maxlength=\"128\"\n      [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\n      formControlName=\"title\"\n    />\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\n        matInput\n        maxlength=\"64\"\n        floatLabel=\"always\"\n        [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\n        formControlName=\"uri\"\n      />\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  >\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    >\n      {{ 'igo.context.contextManager.form.edit' | translate }}\n    </button>\n  </div>\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"] }]
+        }], ctorParameters: () => [{ type: i4.UntypedFormBuilder }, { type: i3.MessageService }], propDecorators: { btnSubmitText: [{
                 type: Input
-            }], color: [{
+            }], context: [{
+                type: Input
+            }], disabled: [{
                 type: Input
+            }], submitForm: [{
+                type: Output
+            }], clone: [{
+                type: Output
+            }], delete: [{
+                type: Output
             }] } });
 
-class PoiDialogComponent {
-    dialogRef;
-    title;
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PoiDialogComponent, deps: [{ token: i1$3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PoiDialogComponent, selector: "igo-poi-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.context.poiButton.dialog.title' | translate }}\r\n</h1>\r\n<div mat-dialog-content>\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      required\r\n      autocomplete=\"off\"\r\n      [placeholder]=\"'igo.context.poiButton.dialog.placeholder' | translate\"\r\n      [(ngModel)]=\"title\"\r\n    />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button\r\n    mat-button\r\n    color=\"primary\"\r\n    [disabled]=\"!title\"\r\n    (click)=\"dialogRef.close(title)\"\r\n  >\r\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\r\n  </button>\r\n  <button mat-button (click)=\"dialogRef.close(false)\">\r\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PoiDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-poi-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.context.poiButton.dialog.title' | translate }}\r\n</h1>\r\n<div mat-dialog-content>\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      required\r\n      autocomplete=\"off\"\r\n      [placeholder]=\"'igo.context.poiButton.dialog.placeholder' | translate\"\r\n      [(ngModel)]=\"title\"\r\n    />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button\r\n    mat-button\r\n    color=\"primary\"\r\n    [disabled]=\"!title\"\r\n    (click)=\"dialogRef.close(title)\"\r\n  >\r\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\r\n  </button>\r\n  <button mat-button (click)=\"dialogRef.close(false)\">\r\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\r\n  </button>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }]; } });
-
-class PoiService {
-    http;
-    config;
-    baseUrl;
-    constructor(http, config) {
-        this.http = http;
-        this.config = config;
-        this.baseUrl = this.config.getConfig('context.url');
+class ContextEditComponent {
+    cd;
+    get context() {
+        return this._context;
     }
-    get() {
-        if (!this.baseUrl) {
-            return EMPTY;
-        }
-        const url = this.baseUrl + '/pois';
-        return this.http.get(url);
+    set context(value) {
+        this._context = value;
+        this.refresh();
     }
-    delete(id) {
-        const url = this.baseUrl + '/pois/' + id;
-        return this.http.delete(url);
+    _context;
+    submitForm = new EventEmitter();
+    constructor(cd) {
+        this.cd = cd;
     }
-    create(context) {
-        const url = this.baseUrl + '/pois';
-        return this.http.post(url, context);
+    refresh() {
+        this.cd.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PoiService, deps: [{ token: i1.HttpClient }, { token: i3.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PoiService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ContextEditComponent, isStandalone: true, selector: "igo-context-edit", inputs: { context: "context" }, outputs: { submitForm: "submitForm" }, ngImport: i0, template: "<igo-context-form\n  *ngIf=\"context\"\n  [btnSubmitText]=\"'igo.context.contextManager.save' | translate\"\n  [context]=\"context\"\n  (submitForm)=\"submitForm.emit($event)\"\n>\n</igo-context-form>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ContextFormComponent, selector: "igo-context-form", inputs: ["btnSubmitText", "context", "disabled"], outputs: ["submitForm", "clone", "delete"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PoiService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i3.ConfigService }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-context-edit', standalone: true, imports: [NgIf, ContextFormComponent, TranslateModule], template: "<igo-context-form\n  *ngIf=\"context\"\n  [btnSubmitText]=\"'igo.context.contextManager.save' | translate\"\n  [context]=\"context\"\n  (submitForm)=\"submitForm.emit($event)\"\n>\n</igo-context-form>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { context: [{
+                type: Input
+            }], submitForm: [{
+                type: Output
+            }] } });
 
-class PoiButtonComponent {
-    dialog;
-    authService;
-    poiService;
+class ContextEditBindingDirective {
+    contextService;
     messageService;
-    languageService;
-    confirmDialogService;
-    get map() {
-        return this._map;
-    }
-    set map(value) {
-        this._map = value;
-    }
-    _map;
-    get color() {
-        return this._color;
-    }
-    set color(value) {
-        this._color = value;
+    component;
+    editedContext$$;
+    submitSuccessed = new EventEmitter();
+    onEdit(context) {
+        const id = this.component.context.id;
+        this.contextService.update(id, context).subscribe(() => {
+            this.messageService.success('igo.context.contextManager.dialog.saveMsg', 'igo.context.contextManager.dialog.saveTitle', undefined, {
+                value: context.title || this.component.context.title
+            });
+            this.contextService.setEditedContext(undefined);
+            this.submitSuccessed.emit(context);
+        });
     }
-    _color;
-    pois;
-    authenticate$$;
-    constructor(dialog, authService, poiService, messageService, languageService, confirmDialogService) {
-        this.dialog = dialog;
-        this.authService = authService;
-        this.poiService = poiService;
+    constructor(component, contextService, messageService) {
+        this.contextService = contextService;
         this.messageService = messageService;
-        this.languageService = languageService;
-        this.confirmDialogService = confirmDialogService;
+        this.component = component;
     }
     ngOnInit() {
-        this.authenticate$$ = this.authService.authenticate$.subscribe((auth) => {
-            if (auth) {
-                this.getPois();
-            }
-        });
+        this.editedContext$$ = this.contextService.editedContext$.subscribe((context) => this.handleEditedContextChange(context));
     }
     ngOnDestroy() {
-        this.authenticate$$.unsubscribe();
+        this.editedContext$$.unsubscribe();
     }
-    deletePoi(poi) {
-        if (poi && poi.id) {
-            this.confirmDialogService
-                .open(this.languageService.translate.instant('igo.context.poiButton.dialog.confirmDelete'))
-                .subscribe((confirm) => {
-                if (confirm) {
-                    this.poiService.delete(poi.id).subscribe(() => {
-                        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';
-                        this.messageService.showError(err);
-                    });
-                }
-            });
-        }
+    handleEditedContextChange(context) {
+        this.component.context = context;
     }
-    getPois() {
-        this.poiService
-            .get()
-            .pipe(take(1))
-            .subscribe((rep) => {
-            this.pois = rep;
-        }, (err) => {
-            err.error.title = 'GET Pois';
-            this.messageService.showError(err);
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextEditBindingDirective, deps: [{ token: ContextEditComponent, self: true }, { token: ContextService }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ContextEditBindingDirective, isStandalone: true, selector: "[igoContextEditBinding]", outputs: { submitSuccessed: "submitSuccessed" }, host: { listeners: { "submitForm": "onEdit($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextEditBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[igoContextEditBinding]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: ContextEditComponent, decorators: [{
+                    type: Self
+                }] }, { type: ContextService }, { type: i3.MessageService }], propDecorators: { submitSuccessed: [{
+                type: Output
+            }], onEdit: [{
+                type: HostListener,
+                args: ['submitForm', ['$event']]
+            }] } });
+
+class ContextItemComponent {
+    auth;
+    storageService;
+    typePermission = TypePermission;
+    color = 'primary';
+    collapsed = true;
+    showFavorite = true;
+    context;
+    default;
+    selected;
+    edit = new EventEmitter();
+    delete = new EventEmitter();
+    save = new EventEmitter();
+    clone = new EventEmitter();
+    hide = new EventEmitter();
+    show = new EventEmitter();
+    favorite = new EventEmitter();
+    managePermissions = new EventEmitter();
+    manageTools = new EventEmitter();
+    get hidden() {
+        return this.context.hidden;
     }
-    createPoi() {
-        const view = this.map.ol.getView();
-        const proj = view.getProjection().getCode();
-        const center = new olPoint(view.getCenter()).transform(proj, 'EPSG:4326');
-        const poi = {
-            title: '',
-            x: center.getCoordinates()[0],
-            y: center.getCoordinates()[1],
-            zoom: view.getZoom()
-        };
-        this.dialog
-            .open(PoiDialogComponent, { disableClose: false })
-            .afterClosed()
-            .subscribe((title) => {
-            if (title) {
-                poi.title = title;
-                this.poiService.create(poi).subscribe((newPoi) => {
-                    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) => {
-                    err.error.title = 'POST Pois';
-                    this.messageService.showError(err);
-                });
-            }
-        });
+    get canShare() {
+        return this.storageService.get('canShare') === true;
     }
-    zoomOnPoi(id) {
-        const poi = this.pois.find((p) => p.id === id);
-        const center = olproj.fromLonLat([Number(poi.x), Number(poi.y)], this.map.projection);
-        this.map.ol.getView().animate({
-            center,
-            zoom: poi.zoom,
-            duration: 500,
-            easing: oleasing.easeOut
-        });
+    constructor(auth, storageService) {
+        this.auth = auth;
+        this.storageService = storageService;
+    }
+    favoriteClick(context) {
+        this.favorite.emit(context);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PoiButtonComponent, deps: [{ token: i1$3.MatDialog }, { token: i2.AuthService }, { token: PoiService }, { token: i3.MessageService }, { token: i3.LanguageService }, { token: i13.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PoiButtonComponent, selector: "igo-poi-button", inputs: { map: "map", color: "color" }, ngImport: i0, template: "<mat-select\r\n  [placeholder]=\"'igo.context.poiButton.placeholder' | translate\"\r\n  floatPlaceholder=\"never\"\r\n>\r\n  <mat-option (click)=\"createPoi()\" class=\"poi-option\">\r\n    <div class=\"titlePoi\">\r\n      {{ 'igo.context.poiButton.create' | translate }}\r\n    </div>\r\n    <button\r\n      igoStopPropagation\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"createPoi()\"\r\n    >\r\n      <mat-icon svgIcon=\"plus-circle\"></mat-icon>\r\n    </button>\r\n  </mat-option>\r\n  <mat-divider></mat-divider>\r\n  <mat-option\r\n    *ngFor=\"let poi of pois\"\r\n    class=\"poi-option\"\r\n    [value]=\"poi.id\"\r\n    (click)=\"zoomOnPoi(poi.id)\"\r\n  >\r\n    <div class=\"titlePoi\">{{ poi.title }}</div>\r\n    <button\r\n      mat-icon-button\r\n      igoStopPropagation\r\n      color=\"warn\"\r\n      (click)=\"deletePoi(poi)\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n  </mat-option>\r\n</mat-select>\r\n", styles: [":host{background-color:#fff;padding:0 8px;height:100%}mat-select{width:150px;height:100%}mat-select ::ng-deep .mat-mdc-select-trigger{height:100%}::ng-deep .poi-option .mdc-list-item__primary-text{display:flex;justify-content:space-between;align-items:center;flex:1;overflow:visible}::ng-deep .poi-option button{margin-right:-16px}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i13.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextItemComponent, deps: [{ token: i2.AuthService }, { token: i3.StorageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ContextItemComponent, isStandalone: true, selector: "igo-context-item", inputs: { showFavorite: "showFavorite", context: "context", default: "default", selected: "selected" }, outputs: { edit: "edit", delete: "delete", save: "save", clone: "clone", hide: "hide", show: "show", favorite: "favorite", managePermissions: "managePermissions", manageTools: "manageTools" }, ngImport: i0, template: "<mat-list-item\r\n  class=\"mat-list-item\"\r\n  [ngClass]=\"{ 'mat-list-item-light': hidden }\"\r\n>\r\n  <button\r\n    *ngIf=\"auth.authenticated\"\r\n    matListItemAvatar\r\n    mat-icon-button\r\n    igoStopPropagation\r\n    [matTooltip]=\"\r\n      auth.authenticated\r\n        ? ('igo.context.contextManager.favorite' | translate)\r\n        : ''\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    [color]=\"default ? 'primary' : 'default'\"\r\n    (click)=\"favoriteClick(context)\"\r\n  >\r\n    <mat-icon\r\n      *ngIf=\"!context.iconImage\"\r\n      svgIcon=\"{{\r\n        context.icon\r\n          ? context.icon\r\n          : context.scope === 'public'\r\n            ? 'earth'\r\n            : 'star'\r\n      }}\"\r\n    ></mat-icon>\r\n    <img *ngIf=\"context.iconImage\" [src]=\"context.iconImage\" />\r\n  </button>\r\n  <button\r\n    matListItemAvatar\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  >\r\n    <mat-icon svgIcon=\"star\"></mat-icon>\r\n  </button>\r\n  <span matListItemTitle>{{ context.title }}</span>\r\n\r\n  <div\r\n    *ngIf=\"auth.authenticated\"\r\n    matListItemMeta\r\n    igoStopPropagation\r\n    class=\"igo-actions-container\"\r\n  >\r\n    <button\r\n      *ngIf=\"\r\n        collapsed &&\r\n        selected &&\r\n        (context.permission === typePermission[typePermission.write] ||\r\n          context.imported)\r\n      \"\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    >\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      <button\r\n        *ngIf=\"canShare && !context.imported\"\r\n        mat-icon-button\r\n        [matTooltip]=\"\r\n          'igo.context.contextManager.managePermissions' | translate\r\n        \"\r\n        matTooltipShowDelay=\"500\"\r\n        [color]=\"color\"\r\n        (click)=\"managePermissions.emit(context)\"\r\n      >\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\r\n        *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      >\r\n        <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          context.permission === typePermission[typePermission.write] &&\r\n          !context.imported\r\n        \"\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      >\r\n        <mat-icon svgIcon=\"pencil\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *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      >\r\n        <mat-icon svgIcon=\"eye\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *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      >\r\n        <mat-icon svgIcon=\"eye-off\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          context.permission === typePermission[typePermission.write] ||\r\n          context.imported\r\n        \"\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      >\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    >\r\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [":host{overflow:hidden}:host .igo-actions-container{flex-shrink:0}:host .igo-actions-expand-container{display:inline-flex}:host mat-icon.disabled{color:#00000061}:host button[matlistitemavatar]{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$2.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i3$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i3$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PoiButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-poi-button', template: "<mat-select\r\n  [placeholder]=\"'igo.context.poiButton.placeholder' | translate\"\r\n  floatPlaceholder=\"never\"\r\n>\r\n  <mat-option (click)=\"createPoi()\" class=\"poi-option\">\r\n    <div class=\"titlePoi\">\r\n      {{ 'igo.context.poiButton.create' | translate }}\r\n    </div>\r\n    <button\r\n      igoStopPropagation\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"createPoi()\"\r\n    >\r\n      <mat-icon svgIcon=\"plus-circle\"></mat-icon>\r\n    </button>\r\n  </mat-option>\r\n  <mat-divider></mat-divider>\r\n  <mat-option\r\n    *ngFor=\"let poi of pois\"\r\n    class=\"poi-option\"\r\n    [value]=\"poi.id\"\r\n    (click)=\"zoomOnPoi(poi.id)\"\r\n  >\r\n    <div class=\"titlePoi\">{{ poi.title }}</div>\r\n    <button\r\n      mat-icon-button\r\n      igoStopPropagation\r\n      color=\"warn\"\r\n      (click)=\"deletePoi(poi)\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n  </mat-option>\r\n</mat-select>\r\n", styles: [":host{background-color:#fff;padding:0 8px;height:100%}mat-select{width:150px;height:100%}mat-select ::ng-deep .mat-mdc-select-trigger{height:100%}::ng-deep .poi-option .mdc-list-item__primary-text{display:flex;justify-content:space-between;align-items:center;flex:1;overflow:visible}::ng-deep .poi-option button{margin-right:-16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: i2.AuthService }, { type: PoiService }, { type: i3.MessageService }, { type: i3.LanguageService }, { type: i13.ConfirmDialogService }]; }, propDecorators: { map: [{
+            args: [{ selector: 'igo-context-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatListModule,
+                        NgClass,
+                        NgIf,
+                        MatButtonModule,
+                        StopPropagationDirective,
+                        MatTooltipModule,
+                        MatIconModule,
+                        CollapseDirective,
+                        TranslateModule
+                    ], template: "<mat-list-item\r\n  class=\"mat-list-item\"\r\n  [ngClass]=\"{ 'mat-list-item-light': hidden }\"\r\n>\r\n  <button\r\n    *ngIf=\"auth.authenticated\"\r\n    matListItemAvatar\r\n    mat-icon-button\r\n    igoStopPropagation\r\n    [matTooltip]=\"\r\n      auth.authenticated\r\n        ? ('igo.context.contextManager.favorite' | translate)\r\n        : ''\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    [color]=\"default ? 'primary' : 'default'\"\r\n    (click)=\"favoriteClick(context)\"\r\n  >\r\n    <mat-icon\r\n      *ngIf=\"!context.iconImage\"\r\n      svgIcon=\"{{\r\n        context.icon\r\n          ? context.icon\r\n          : context.scope === 'public'\r\n            ? 'earth'\r\n            : 'star'\r\n      }}\"\r\n    ></mat-icon>\r\n    <img *ngIf=\"context.iconImage\" [src]=\"context.iconImage\" />\r\n  </button>\r\n  <button\r\n    matListItemAvatar\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  >\r\n    <mat-icon svgIcon=\"star\"></mat-icon>\r\n  </button>\r\n  <span matListItemTitle>{{ context.title }}</span>\r\n\r\n  <div\r\n    *ngIf=\"auth.authenticated\"\r\n    matListItemMeta\r\n    igoStopPropagation\r\n    class=\"igo-actions-container\"\r\n  >\r\n    <button\r\n      *ngIf=\"\r\n        collapsed &&\r\n        selected &&\r\n        (context.permission === typePermission[typePermission.write] ||\r\n          context.imported)\r\n      \"\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    >\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      <button\r\n        *ngIf=\"canShare && !context.imported\"\r\n        mat-icon-button\r\n        [matTooltip]=\"\r\n          'igo.context.contextManager.managePermissions' | translate\r\n        \"\r\n        matTooltipShowDelay=\"500\"\r\n        [color]=\"color\"\r\n        (click)=\"managePermissions.emit(context)\"\r\n      >\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\r\n        *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      >\r\n        <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          context.permission === typePermission[typePermission.write] &&\r\n          !context.imported\r\n        \"\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      >\r\n        <mat-icon svgIcon=\"pencil\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *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      >\r\n        <mat-icon svgIcon=\"eye\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *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      >\r\n        <mat-icon svgIcon=\"eye-off\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          context.permission === typePermission[typePermission.write] ||\r\n          context.imported\r\n        \"\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      >\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    >\r\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [":host{overflow:hidden}:host .igo-actions-container{flex-shrink:0}:host .igo-actions-expand-container{display:inline-flex}:host mat-icon.disabled{color:#00000061}:host button[matlistitemavatar]{margin-right:8px}\n"] }]
+        }], ctorParameters: () => [{ type: i2.AuthService }, { type: i3.StorageService }], propDecorators: { showFavorite: [{
                 type: Input
-            }], color: [{
+            }], context: [{
+                type: Input
+            }], default: [{
+                type: Input
+            }], selected: [{
                 type: Input
+            }], edit: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], clone: [{
+                type: Output
+            }], hide: [{
+                type: Output
+            }], show: [{
+                type: Output
+            }], favorite: [{
+                type: Output
+            }], managePermissions: [{
+                type: Output
+            }], manageTools: [{
+                type: Output
             }] } });
 
-function userButtonSlideInOut() {
-    return trigger('userButtonState', [
-        state('collapse', style({
-            width: '0',
-            overflow: 'hidden',
-            display: 'none'
-        })),
-        state('expand', style({
-            overflow: 'hidden',
-            display: 'display'
-        })),
-        transition('collapse => expand', animate('200ms')),
-        transition('expand => collapse', animate('200ms'))
-    ]);
-}
-
-class UserDialogComponent {
+class BookmarkDialogComponent {
     dialogRef;
-    auth;
-    storageService;
-    user;
-    exp;
-    constructor(dialogRef, auth, storageService) {
+    title;
+    constructor(dialogRef) {
         this.dialogRef = dialogRef;
-        this.auth = auth;
-        this.storageService = storageService;
-        const decodeToken = this.auth.decodeToken();
-        this.user = decodeToken?.user;
-        this.exp = new Date(decodeToken.exp * 1000).toLocaleString();
-    }
-    clearPreferences() {
-        this.storageService.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: i2.AuthService }, { token: i3.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserDialogComponent, selector: "igo-user-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.context.userButton.infoTitle' | translate }}\r\n</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <p>\r\n    {{ 'igo.context.userButton.dialog.user' | translate }}: {{ user.sourceId }}\r\n  </p>\r\n  <p>\r\n    {{ 'igo.context.userButton.dialog.email' | translate }}: {{ user.email }}\r\n  </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\" (click)=\"dialogRef.close(false)\">\r\n    OK\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BookmarkDialogComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: BookmarkDialogComponent, isStandalone: true, selector: "igo-bookmark-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.context.bookmarkButton.dialog.title' | translate }}\n</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <mat-form-field>\n    <input\n      matInput\n      required\n      autocomplete=\"off\"\n      maxlength=\"128\"\n      [placeholder]=\"\n        'igo.context.bookmarkButton.dialog.placeholder' | translate\n      \"\n      [(ngModel)]=\"title\"\n    />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button\n    mat-button\n    color=\"primary\"\n    [disabled]=\"!title\"\n    (click)=\"dialogRef.close(title)\"\n  >\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\n  </button>\n  <button mat-button (click)=\"dialogRef.close(false)\">\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BookmarkDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-user-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.context.userButton.infoTitle' | translate }}\r\n</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <p>\r\n    {{ 'igo.context.userButton.dialog.user' | translate }}: {{ user.sourceId }}\r\n  </p>\r\n  <p>\r\n    {{ 'igo.context.userButton.dialog.email' | translate }}: {{ user.email }}\r\n  </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\" (click)=\"dialogRef.close(false)\">\r\n    OK\r\n  </button>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: i2.AuthService }, { type: i3.StorageService }]; } });
+            args: [{ selector: 'igo-bookmark-dialog', standalone: true, imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        MatDialogActions,
+                        MatButtonModule,
+                        TranslateModule
+                    ], template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.context.bookmarkButton.dialog.title' | translate }}\n</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <mat-form-field>\n    <input\n      matInput\n      required\n      autocomplete=\"off\"\n      maxlength=\"128\"\n      [placeholder]=\"\n        'igo.context.bookmarkButton.dialog.placeholder' | translate\n      \"\n      [(ngModel)]=\"title\"\n    />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button\n    mat-button\n    color=\"primary\"\n    [disabled]=\"!title\"\n    (click)=\"dialogRef.close(title)\"\n  >\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\n  </button>\n  <button mat-button (click)=\"dialogRef.close(false)\">\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }] });
 
-class UserButtonComponent {
-    dialog;
-    config;
+var ContextListControlsEnum;
+(function (ContextListControlsEnum) {
+    ContextListControlsEnum["always"] = "always";
+    ContextListControlsEnum["never"] = "never";
+    ContextListControlsEnum["default"] = "default";
+})(ContextListControlsEnum || (ContextListControlsEnum = {}));
+
+class ContextListComponent {
+    cdRef;
+    configService;
     auth;
+    dialog;
+    languageService;
+    storageService;
+    contextConfigs;
+    contextsInitial = { ours: [] };
+    contexts$ = new BehaviorSubject(this.contextsInitial);
+    change$ = new ReplaySubject(1);
+    change$$;
+    get contexts() {
+        return this._contexts;
+    }
+    set contexts(value) {
+        this._contexts = value;
+        this.next();
+    }
+    _contexts = { ours: [] };
+    get selectedContext() {
+        return this._selectedContext;
+    }
+    set selectedContext(value) {
+        this._selectedContext = value;
+        this.cdRef.detectChanges();
+    }
+    _selectedContext;
     get map() {
         return this._map;
     }
@@ -1487,413 +1494,14 @@ class UserButtonComponent {
         this._map = value;
     }
     _map;
-    get color() {
-        return this._color;
-    }
-    set color(value) {
-        this._color = value;
-    }
-    _color;
-    expand = false;
-    visible = false;
-    hasApi = false;
-    constructor(dialog, config, auth) {
-        this.dialog = dialog;
-        this.config = config;
-        this.auth = auth;
-        this.visible = this.config.getConfig('auth') ? true : false;
-        this.hasApi = this.config.getConfig('context.url') !== undefined;
-    }
-    accountClick() {
-        if (this.auth.authenticated) {
-            this.expand = !this.expand;
-        }
-        else {
-            this.auth.logout();
-        }
-    }
-    logout() {
-        this.expand = false;
-        this.auth.logout();
-    }
-    infoUser() {
-        this.dialog.open(UserDialogComponent, { disableClose: false });
+    get defaultContextId() {
+        return this.contextConfigs
+            ? this._defaultContextId
+            : this.storageService.get('favorite.context.uri') ||
+                this._defaultContextId;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserButtonComponent, deps: [{ token: i1$3.MatDialog }, { token: i3.ConfigService }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserButtonComponent, selector: "igo-user-button", inputs: { map: "map", color: "color" }, ngImport: i0, template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\r\n  <div\r\n    class=\"igo-user-button-more-container\"\r\n    [@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    >\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' | translate\"\r\n      matTooltipPosition=\"above\"\r\n      [color]=\"color\"\r\n      (click)=\"logout()\"\r\n    >\r\n      <mat-icon svgIcon=\"power\"></mat-icon>\r\n    </button>\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  >\r\n    <mat-icon svgIcon=\"account-box\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-user-button-container{display:flex;gap:4px}:host .igo-user-button-container button{background-color:#fff}:host .igo-user-button-container button:hover{background-color:#efefef}:host .igo-user-button-more-container{display:flex;gap:4px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: PoiButtonComponent, selector: "igo-poi-button", inputs: ["map", "color"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }], animations: [userButtonSlideInOut()] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-user-button', animations: [userButtonSlideInOut()], template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\r\n  <div\r\n    class=\"igo-user-button-more-container\"\r\n    [@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    >\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' | translate\"\r\n      matTooltipPosition=\"above\"\r\n      [color]=\"color\"\r\n      (click)=\"logout()\"\r\n    >\r\n      <mat-icon svgIcon=\"power\"></mat-icon>\r\n    </button>\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  >\r\n    <mat-icon svgIcon=\"account-box\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-user-button-container{display:flex;gap:4px}:host .igo-user-button-container button{background-color:#fff}:host .igo-user-button-container button:hover{background-color:#efefef}:host .igo-user-button-more-container{display:flex;gap:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: i3.ConfigService }, { type: i2.AuthService }]; }, propDecorators: { map: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-class IgoContextMapButtonModule {
-    static forRoot() {
-        return {
-            ngModule: IgoContextMapButtonModule
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextMapButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IgoContextMapButtonModule, declarations: [BookmarkButtonComponent,
-            BookmarkDialogComponent,
-            PoiButtonComponent,
-            PoiDialogComponent,
-            UserButtonComponent,
-            UserDialogComponent], imports: [CommonModule,
-            FormsModule,
-            IgoAuthModule,
-            IgoConfirmDialogModule,
-            IgoLanguageModule,
-            IgoStopPropagationModule,
-            MatButtonModule,
-            MatDialogModule,
-            MatDividerModule,
-            MatFormFieldModule,
-            MatIconModule,
-            MatInputModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatTooltipModule], exports: [BookmarkButtonComponent,
-            PoiButtonComponent,
-            UserButtonComponent,
-            BookmarkDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextMapButtonModule, providers: [PoiService], imports: [CommonModule,
-            FormsModule,
-            IgoAuthModule,
-            IgoConfirmDialogModule,
-            IgoLanguageModule,
-            IgoStopPropagationModule,
-            MatButtonModule,
-            MatDialogModule,
-            MatDividerModule,
-            MatFormFieldModule,
-            MatIconModule,
-            MatInputModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatTooltipModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextMapButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        IgoAuthModule,
-                        IgoConfirmDialogModule,
-                        IgoLanguageModule,
-                        IgoStopPropagationModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        MatDividerModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatOptionModule,
-                        MatSelectModule,
-                        MatTooltipModule
-                    ],
-                    exports: [
-                        BookmarkButtonComponent,
-                        PoiButtonComponent,
-                        UserButtonComponent,
-                        BookmarkDialogComponent
-                    ],
-                    declarations: [
-                        BookmarkButtonComponent,
-                        BookmarkDialogComponent,
-                        PoiButtonComponent,
-                        PoiDialogComponent,
-                        UserButtonComponent,
-                        UserDialogComponent
-                    ],
-                    providers: [PoiService]
-                }]
-        }] });
-
-class ContextFormComponent {
-    formBuilder;
-    messageService;
-    form;
-    prefix;
-    get btnSubmitText() {
-        return this._btnSubmitText;
-    }
-    set btnSubmitText(value) {
-        this._btnSubmitText = value;
-    }
-    _btnSubmitText;
-    get context() {
-        return this._context;
-    }
-    set context(value) {
-        this._context = value;
-        this.buildForm();
-    }
-    _context;
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-    }
-    _disabled = false;
-    // TODO: replace any by ContextOptions or Context
-    submitForm = new EventEmitter();
-    clone = new EventEmitter();
-    delete = new EventEmitter();
-    constructor(formBuilder, messageService) {
-        this.formBuilder = formBuilder;
-        this.messageService = messageService;
-    }
-    ngOnInit() {
-        this.buildForm();
-    }
-    handleFormSubmit(value) {
-        let inputs = Object.assign({}, value);
-        inputs = ObjectUtils.removeNull(inputs);
-        inputs.uri = inputs.uri.replace(' ', '');
-        if (inputs.uri) {
-            inputs.uri = this.prefix + '-' + inputs.uri;
-        }
-        else {
-            inputs.uri = this.prefix;
-        }
-        this.submitForm.emit(inputs);
-    }
-    copyTextToClipboard() {
-        const text = this.prefix + '-' + this.form.value.uri.replace(' ', '');
-        const successful = Clipboard.copy(text);
-        if (successful) {
-            this.messageService.success('igo.context.contextManager.dialog.copyMsg', 'igo.context.contextManager.dialog.copyTitle');
-        }
-    }
-    buildForm() {
-        const context = this.context || {};
-        const uriSplit = context.uri.split('-');
-        this.prefix = uriSplit.shift();
-        const uri = uriSplit.join('-');
-        this.form = this.formBuilder.group({
-            title: [context.title],
-            uri: [uri || ' ']
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextFormComponent, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContextFormComponent, selector: "igo-context-form", inputs: { btnSubmitText: "btnSubmitText", context: "context", disabled: "disabled" }, outputs: { submitForm: "submitForm", clone: "clone", delete: "delete" }, ngImport: i0, template: "<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"form\"\r\n  (ngSubmit)=\"handleFormSubmit(form.value)\"\r\n>\r\n  <mat-form-field class=\"full-width\">\r\n    <input\r\n      matInput\r\n      required\r\n      maxlength=\"128\"\r\n      [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\r\n      formControlName=\"title\"\r\n    />\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\r\n        matInput\r\n        maxlength=\"64\"\r\n        floatLabel=\"always\"\r\n        [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\r\n        formControlName=\"uri\"\r\n      />\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  >\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    >\r\n      {{ 'igo.context.contextManager.form.edit' | translate }}\r\n    </button>\r\n  </div>\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"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-context-form', template: "<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"form\"\r\n  (ngSubmit)=\"handleFormSubmit(form.value)\"\r\n>\r\n  <mat-form-field class=\"full-width\">\r\n    <input\r\n      matInput\r\n      required\r\n      maxlength=\"128\"\r\n      [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\r\n      formControlName=\"title\"\r\n    />\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\r\n        matInput\r\n        maxlength=\"64\"\r\n        floatLabel=\"always\"\r\n        [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\r\n        formControlName=\"uri\"\r\n      />\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  >\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    >\r\n      {{ 'igo.context.contextManager.form.edit' | translate }}\r\n    </button>\r\n  </div>\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"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i3.MessageService }]; }, propDecorators: { btnSubmitText: [{
-                type: Input
-            }], context: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], submitForm: [{
-                type: Output
-            }], clone: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }] } });
-
-class ContextEditComponent {
-    cd;
-    get context() {
-        return this._context;
-    }
-    set context(value) {
-        this._context = value;
-        this.refresh();
-    }
-    _context;
-    submitForm = new EventEmitter();
-    constructor(cd) {
-        this.cd = cd;
-    }
-    refresh() {
-        this.cd.detectChanges();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContextEditComponent, selector: "igo-context-edit", inputs: { context: "context" }, outputs: { submitForm: "submitForm" }, ngImport: i0, template: "<igo-context-form\r\n  *ngIf=\"context\"\r\n  [btnSubmitText]=\"'igo.context.contextManager.save' | translate\"\r\n  [context]=\"context\"\r\n  (submitForm)=\"submitForm.emit($event)\"\r\n>\r\n</igo-context-form>\r\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ContextFormComponent, selector: "igo-context-form", inputs: ["btnSubmitText", "context", "disabled"], outputs: ["submitForm", "clone", "delete"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-context-edit', template: "<igo-context-form\r\n  *ngIf=\"context\"\r\n  [btnSubmitText]=\"'igo.context.contextManager.save' | translate\"\r\n  [context]=\"context\"\r\n  (submitForm)=\"submitForm.emit($event)\"\r\n>\r\n</igo-context-form>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{
-                type: Input
-            }], submitForm: [{
-                type: Output
-            }] } });
-
-class ContextEditBindingDirective {
-    contextService;
-    messageService;
-    component;
-    editedContext$$;
-    submitSuccessed = new EventEmitter();
-    onEdit(context) {
-        const id = this.component.context.id;
-        this.contextService.update(id, context).subscribe(() => {
-            this.messageService.success('igo.context.contextManager.dialog.saveMsg', 'igo.context.contextManager.dialog.saveTitle', undefined, {
-                value: context.title || this.component.context.title
-            });
-            this.contextService.setEditedContext(undefined);
-            this.submitSuccessed.emit(context);
-        });
-    }
-    constructor(component, contextService, messageService) {
-        this.contextService = contextService;
-        this.messageService = messageService;
-        this.component = component;
-    }
-    ngOnInit() {
-        this.editedContext$$ = this.contextService.editedContext$.subscribe((context) => this.handleEditedContextChange(context));
-    }
-    ngOnDestroy() {
-        this.editedContext$$.unsubscribe();
-    }
-    handleEditedContextChange(context) {
-        this.component.context = context;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextEditBindingDirective, deps: [{ token: ContextEditComponent, self: true }, { token: ContextService }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ContextEditBindingDirective, selector: "[igoContextEditBinding]", outputs: { submitSuccessed: "submitSuccessed" }, host: { listeners: { "submitForm": "onEdit($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextEditBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[igoContextEditBinding]'
-                }]
-        }], ctorParameters: function () { return [{ type: ContextEditComponent, decorators: [{
-                    type: Self
-                }] }, { type: ContextService }, { type: i3.MessageService }]; }, propDecorators: { submitSuccessed: [{
-                type: Output
-            }], onEdit: [{
-                type: HostListener,
-                args: ['submitForm', ['$event']]
-            }] } });
-
-class ContextItemComponent {
-    auth;
-    storageService;
-    typePermission = TypePermission;
-    color = 'primary';
-    collapsed = true;
-    showFavorite = true;
-    context;
-    default;
-    selected;
-    edit = new EventEmitter();
-    delete = new EventEmitter();
-    save = new EventEmitter();
-    clone = new EventEmitter();
-    hide = new EventEmitter();
-    show = new EventEmitter();
-    favorite = new EventEmitter();
-    managePermissions = new EventEmitter();
-    manageTools = new EventEmitter();
-    get hidden() {
-        return this.context.hidden;
-    }
-    get canShare() {
-        return this.storageService.get('canShare') === true;
-    }
-    constructor(auth, storageService) {
-        this.auth = auth;
-        this.storageService = storageService;
-    }
-    favoriteClick(context) {
-        this.favorite.emit(context);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextItemComponent, deps: [{ token: i2.AuthService }, { token: i3.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContextItemComponent, selector: "igo-context-item", inputs: { showFavorite: "showFavorite", context: "context", default: "default", selected: "selected" }, outputs: { edit: "edit", delete: "delete", save: "save", clone: "clone", hide: "hide", show: "show", favorite: "favorite", managePermissions: "managePermissions", manageTools: "manageTools" }, ngImport: i0, template: "<mat-list-item\r\n  class=\"mat-list-item\"\r\n  [ngClass]=\"{ 'mat-list-item-light': hidden }\"\r\n>\r\n  <button\r\n    *ngIf=\"auth.authenticated\"\r\n    matListItemAvatar\r\n    mat-icon-button\r\n    igoStopPropagation\r\n    [matTooltip]=\"\r\n      auth.authenticated\r\n        ? ('igo.context.contextManager.favorite' | translate)\r\n        : ''\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    [color]=\"default ? 'primary' : 'default'\"\r\n    (click)=\"favoriteClick(context)\"\r\n  >\r\n    <mat-icon\r\n      *ngIf=\"!context.iconImage\"\r\n      svgIcon=\"{{\r\n        context.icon\r\n          ? context.icon\r\n          : context.scope === 'public'\r\n          ? 'earth'\r\n          : 'star'\r\n      }}\"\r\n    ></mat-icon>\r\n    <img *ngIf=\"context.iconImage\" [src]=\"context.iconImage\" />\r\n  </button>\r\n  <button\r\n    matListItemAvatar\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  >\r\n    <mat-icon svgIcon=\"star\"></mat-icon>\r\n  </button>\r\n  <span matListItemTitle>{{ context.title }}</span>\r\n\r\n  <div\r\n    *ngIf=\"auth.authenticated\"\r\n    matListItemMeta\r\n    igoStopPropagation\r\n    class=\"igo-actions-container\"\r\n  >\r\n    <button\r\n      *ngIf=\"\r\n        collapsed &&\r\n        selected &&\r\n        (context.permission === typePermission[typePermission.write] ||\r\n          context.imported)\r\n      \"\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    >\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      <button\r\n        *ngIf=\"canShare && !context.imported\"\r\n        mat-icon-button\r\n        [matTooltip]=\"\r\n          'igo.context.contextManager.managePermissions' | translate\r\n        \"\r\n        matTooltipShowDelay=\"500\"\r\n        [color]=\"color\"\r\n        (click)=\"managePermissions.emit(context)\"\r\n      >\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\r\n        *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      >\r\n        <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          context.permission === typePermission[typePermission.write] &&\r\n          !context.imported\r\n        \"\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      >\r\n        <mat-icon svgIcon=\"pencil\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *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      >\r\n        <mat-icon svgIcon=\"eye\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *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      >\r\n        <mat-icon svgIcon=\"eye-off\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          context.permission === typePermission[typePermission.write] ||\r\n          context.imported\r\n        \"\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      >\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    >\r\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [":host{overflow:hidden}:host .igo-actions-container{flex-shrink:0}:host .igo-actions-expand-container{display:inline-flex}:host mat-icon.disabled{color:#00000061}:host button[matlistitemavatar]{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i7$1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i7$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i7$1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i13.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: i13.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextItemComponent, decorators: [{
-            type: Component,
-            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>\r\n  <button\r\n    *ngIf=\"auth.authenticated\"\r\n    matListItemAvatar\r\n    mat-icon-button\r\n    igoStopPropagation\r\n    [matTooltip]=\"\r\n      auth.authenticated\r\n        ? ('igo.context.contextManager.favorite' | translate)\r\n        : ''\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    [color]=\"default ? 'primary' : 'default'\"\r\n    (click)=\"favoriteClick(context)\"\r\n  >\r\n    <mat-icon\r\n      *ngIf=\"!context.iconImage\"\r\n      svgIcon=\"{{\r\n        context.icon\r\n          ? context.icon\r\n          : context.scope === 'public'\r\n          ? 'earth'\r\n          : 'star'\r\n      }}\"\r\n    ></mat-icon>\r\n    <img *ngIf=\"context.iconImage\" [src]=\"context.iconImage\" />\r\n  </button>\r\n  <button\r\n    matListItemAvatar\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  >\r\n    <mat-icon svgIcon=\"star\"></mat-icon>\r\n  </button>\r\n  <span matListItemTitle>{{ context.title }}</span>\r\n\r\n  <div\r\n    *ngIf=\"auth.authenticated\"\r\n    matListItemMeta\r\n    igoStopPropagation\r\n    class=\"igo-actions-container\"\r\n  >\r\n    <button\r\n      *ngIf=\"\r\n        collapsed &&\r\n        selected &&\r\n        (context.permission === typePermission[typePermission.write] ||\r\n          context.imported)\r\n      \"\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    >\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      <button\r\n        *ngIf=\"canShare && !context.imported\"\r\n        mat-icon-button\r\n        [matTooltip]=\"\r\n          'igo.context.contextManager.managePermissions' | translate\r\n        \"\r\n        matTooltipShowDelay=\"500\"\r\n        [color]=\"color\"\r\n        (click)=\"managePermissions.emit(context)\"\r\n      >\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\r\n        *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      >\r\n        <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          context.permission === typePermission[typePermission.write] &&\r\n          !context.imported\r\n        \"\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      >\r\n        <mat-icon svgIcon=\"pencil\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *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      >\r\n        <mat-icon svgIcon=\"eye\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *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      >\r\n        <mat-icon svgIcon=\"eye-off\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          context.permission === typePermission[typePermission.write] ||\r\n          context.imported\r\n        \"\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      >\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    >\r\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [":host{overflow:hidden}:host .igo-actions-container{flex-shrink:0}:host .igo-actions-expand-container{display:inline-flex}:host mat-icon.disabled{color:#00000061}:host button[matlistitemavatar]{margin-right:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService }, { type: i3.StorageService }]; }, propDecorators: { showFavorite: [{
-                type: Input
-            }], context: [{
-                type: Input
-            }], default: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], edit: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], save: [{
-                type: Output
-            }], clone: [{
-                type: Output
-            }], hide: [{
-                type: Output
-            }], show: [{
-                type: Output
-            }], favorite: [{
-                type: Output
-            }], managePermissions: [{
-                type: Output
-            }], manageTools: [{
-                type: Output
-            }] } });
-
-var ContextListControlsEnum;
-(function (ContextListControlsEnum) {
-    ContextListControlsEnum["always"] = "always";
-    ContextListControlsEnum["never"] = "never";
-    ContextListControlsEnum["default"] = "default";
-})(ContextListControlsEnum || (ContextListControlsEnum = {}));
-
-class ContextListComponent {
-    cdRef;
-    configService;
-    auth;
-    dialog;
-    languageService;
-    storageService;
-    contextConfigs;
-    contextsInitial = { ours: [] };
-    contexts$ = new BehaviorSubject(this.contextsInitial);
-    change$ = new ReplaySubject(1);
-    change$$;
-    get contexts() {
-        return this._contexts;
-    }
-    set contexts(value) {
-        this._contexts = value;
-        this.next();
-    }
-    _contexts = { ours: [] };
-    get selectedContext() {
-        return this._selectedContext;
-    }
-    set selectedContext(value) {
-        this._selectedContext = value;
-        this.cdRef.detectChanges();
-    }
-    _selectedContext;
-    get map() {
-        return this._map;
-    }
-    set map(value) {
-        this._map = value;
-    }
-    _map;
-    get defaultContextId() {
-        return this.contextConfigs
-            ? this._defaultContextId
-            : this.storageService.get('favorite.context.uri') ||
-                this._defaultContextId;
-    }
-    set defaultContextId(value) {
-        this._defaultContextId = value;
+    set defaultContextId(value) {
+        this._defaultContextId = value;
     }
     _defaultContextId;
     collapsed = [];
@@ -2182,13 +1790,32 @@ class ContextListComponent {
         context.hidden = false;
         this.show.emit(context);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.ConfigService }, { token: i2.AuthService }, { token: i1$3.MatDialog }, { token: i3.LanguageService }, { token: i3.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContextListComponent, selector: "igo-context-list", inputs: { contexts: "contexts", selectedContext: "selectedContext", map: "map", defaultContextId: "defaultContextId", term: "term" }, outputs: { select: "select", unselect: "unselect", edit: "edit", delete: "delete", save: "save", clone: "clone", create: "create", hide: "hide", show: "show", showHiddenContexts: "showHiddenContexts", favorite: "favorite", managePermissions: "managePermissions", manageTools: "manageTools", filterPermissionsChanged: "filterPermissionsChanged" }, ngImport: i0, template: "<igo-list [navigation]=\"true\">\r\n  <div class=\"context-filter-container\">\r\n    <mat-form-field *ngIf=\"showFilter()\" floatLabel=\"always\">\r\n      <mat-label>{{\r\n        'igo.context.contextManager.filterPlaceHolder' | translate\r\n      }}</mat-label>\r\n      <input\r\n        matInput\r\n        type=\"text\"\r\n        [placeholder]=\"\r\n          'igo.context.contextManager.filterPlaceHolder' | translate\r\n        \"\r\n        [(ngModel)]=\"term\"\r\n      />\r\n      <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      >\r\n        <mat-icon svgIcon=\"close\"></mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <div class=\"actions-container\">\r\n      <button\r\n        *ngIf=\"!sortedAlpha\"\r\n        class=\"sort-alpha\"\r\n        mat-icon-button\r\n        [matTooltip]=\"\r\n          'igo.context.contextManager.sortAlphabetically' | translate\r\n        \"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"toggleSort(true)\"\r\n      >\r\n        <mat-icon\r\n          color=\"primary\"\r\n          svgIcon=\"sort-alphabetical-variant\"\r\n        ></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      >\r\n        <mat-icon color=\"warn\" svgIcon=\"sort-variant-remove\"></mat-icon>\r\n      </button>\r\n\r\n      <igo-actionbar\r\n        *ngIf=\"auth.authenticated && contextConfigs\"\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      >\r\n      </igo-actionbar>\r\n\r\n      <button\r\n        *ngIf=\"auth.authenticated && contextConfigs\"\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      >\r\n        <mat-icon color=\"primary\" svgIcon=\"filter-menu\"></mat-icon>\r\n      </button>\r\n      <mat-menu #accountMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let user of users\">\r\n          <button\r\n            *ngIf=\"!user.childs; else withSubMenu\"\r\n            mat-menu-item\r\n            class=\"profil-menu\"\r\n          >\r\n            <mat-checkbox\r\n              [checked]=\"getPermission(user).checked\"\r\n              [indeterminate]=\"getPermission(user).indeterminate\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"handleToggleCategory(user)\"\r\n            >\r\n            </mat-checkbox>\r\n            <span>{{ user.title }}</span>\r\n          </button>\r\n          <ng-template #withSubMenu>\r\n            <button\r\n              mat-menu-item\r\n              [matMenuTriggerFor]=\"subAccountMenu\"\r\n              class=\"profil-menu\"\r\n            >\r\n              <mat-checkbox\r\n                [checked]=\"getPermission(user).checked\"\r\n                [indeterminate]=\"getPermission(user).indeterminate\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (change)=\"handleToggleCategory(user)\"\r\n              >\r\n              </mat-checkbox>\r\n              <span>{{ user.title }}</span>\r\n            </button>\r\n\r\n            <mat-menu #subAccountMenu=\"matMenu\">\r\n              <button\r\n                mat-menu-item\r\n                *ngFor=\"let child of user.childs\"\r\n                class=\"profil-menu\"\r\n              >\r\n                <mat-checkbox\r\n                  [checked]=\"getPermission(child).checked\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"handleToggleCategory(child, user)\"\r\n                >\r\n                  {{ child.title }}\r\n                </mat-checkbox>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n        <button mat-menu-item class=\"profil-menu\">\r\n          <mat-checkbox\r\n            [checked]=\"showHidden\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"showHiddenContexts.emit()\"\r\n          >\r\n          </mat-checkbox>\r\n          <span>\r\n            {{ 'igo.context.contextManager.showHidden' | translate }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template ngFor let-groupContexts [ngForOf]=\"contexts$ | async | keyvalue\">\r\n    <igo-collapsible\r\n      *ngIf=\"groupContexts.value.length && auth.authenticated\"\r\n      [title]=\"titleMapping[groupContexts.key] | translate\"\r\n      [collapsed]=\"collapsed[titleMapping[groupContexts.key]]\"\r\n      (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]=\"\r\n            context.id &&\r\n            this.defaultContextId &&\r\n            this.defaultContextId === context.id\r\n          \"\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        >\r\n        </igo-context-item>\r\n      </ng-template>\r\n    </igo-collapsible>\r\n\r\n    <ng-template\r\n      *ngIf=\"groupContexts.value.length && !auth.authenticated\"\r\n      ngFor\r\n      let-context\r\n      [ngForOf]=\"groupContexts.value\"\r\n    >\r\n      <igo-context-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [showFavorite]=\"\r\n          configService.getConfig('favoriteContext4NonAuthenticated')\r\n        \"\r\n        [selected]=\"selectedContext && selectedContext.uri === context.uri\"\r\n        [context]=\"context\"\r\n        [default]=\"\r\n          contextConfigs\r\n            ? defaultContextId === context.id\r\n            : defaultContextId === context.uri\r\n        \"\r\n        (favorite)=\"favorite.emit(context)\"\r\n        (select)=\"select.emit(context)\"\r\n        (unselect)=\"unselect.emit(context)\"\r\n      >\r\n      </igo-context-item>\r\n    </ng-template>\r\n  </ng-template>\r\n\r\n  <div *ngIf=\"isEmpty\" class=\"no-result\">\r\n    {{ 'igo.context.contextManager.noResult' | translate }}\r\n  </div>\r\n</igo-list>\r\n", styles: [":host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.context-filter-container{display:flex;align-items:center;padding:8px 4px}.context-filter-container mat-form-field{flex:1}.context-filter-min-width{width:calc(100% - 135px);margin:5px;padding-left:6px}.profil-menu{padding-left:8px}.profil-menu mat-checkbox{margin-right:8px}.add-context-button{margin:0;width:40px;display:inline-flex;overflow:hidden}.actions-container{margin-left:4px}.no-result{padding:16px}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i12$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i12$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i13.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i13.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i13.CollapsibleComponent, selector: "igo-collapsible", inputs: ["title", "collapsed"], outputs: ["toggle"] }, { kind: "component", type: i13.ActionbarComponent, selector: "igo-actionbar", inputs: ["store", "mode", "withToggleButton", "horizontal", "color", "iconColor", "withTitle", "withTooltip", "scrollActive", "withIcon", "icon", "xPosition", "yPosition", "overlayClass"] }, { kind: "component", type: ContextItemComponent, selector: "igo-context-item", inputs: ["showFavorite", "context", "default", "selected"], outputs: ["edit", "delete", "save", "clone", "hide", "show", "favorite", "managePermissions", "manageTools"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.ConfigService }, { token: i2.AuthService }, { token: i1$2.MatDialog }, { token: i3.LanguageService }, { token: i3.StorageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ContextListComponent, isStandalone: true, selector: "igo-context-list", inputs: { contexts: "contexts", selectedContext: "selectedContext", map: "map", defaultContextId: "defaultContextId", term: "term" }, outputs: { select: "select", unselect: "unselect", edit: "edit", delete: "delete", save: "save", clone: "clone", create: "create", hide: "hide", show: "show", showHiddenContexts: "showHiddenContexts", favorite: "favorite", managePermissions: "managePermissions", manageTools: "manageTools", filterPermissionsChanged: "filterPermissionsChanged" }, ngImport: i0, template: "<igo-list [navigation]=\"true\">\r\n  <div class=\"context-filter-container\">\r\n    <mat-form-field *ngIf=\"showFilter()\" floatLabel=\"always\">\r\n      <mat-label>{{\r\n        'igo.context.contextManager.filterPlaceHolder' | translate\r\n      }}</mat-label>\r\n      <input\r\n        matInput\r\n        type=\"text\"\r\n        [placeholder]=\"\r\n          'igo.context.contextManager.filterPlaceHolder' | translate\r\n        \"\r\n        [(ngModel)]=\"term\"\r\n      />\r\n      <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      >\r\n        <mat-icon svgIcon=\"close\"></mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <div class=\"actions-container\">\r\n      <button\r\n        *ngIf=\"!sortedAlpha\"\r\n        class=\"sort-alpha\"\r\n        mat-icon-button\r\n        [matTooltip]=\"\r\n          'igo.context.contextManager.sortAlphabetically' | translate\r\n        \"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"toggleSort(true)\"\r\n      >\r\n        <mat-icon\r\n          color=\"primary\"\r\n          svgIcon=\"sort-alphabetical-variant\"\r\n        ></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      >\r\n        <mat-icon color=\"warn\" svgIcon=\"sort-variant-remove\"></mat-icon>\r\n      </button>\r\n\r\n      <igo-actionbar\r\n        *ngIf=\"auth.authenticated && contextConfigs\"\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      >\r\n      </igo-actionbar>\r\n\r\n      <button\r\n        *ngIf=\"auth.authenticated && contextConfigs\"\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      >\r\n        <mat-icon color=\"primary\" svgIcon=\"filter-menu\"></mat-icon>\r\n      </button>\r\n      <mat-menu #accountMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let user of users\">\r\n          <button\r\n            *ngIf=\"!user.childs; else withSubMenu\"\r\n            mat-menu-item\r\n            class=\"profil-menu\"\r\n          >\r\n            <mat-checkbox\r\n              [checked]=\"getPermission(user).checked\"\r\n              [indeterminate]=\"getPermission(user).indeterminate\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"handleToggleCategory(user)\"\r\n            >\r\n            </mat-checkbox>\r\n            <span>{{ user.title }}</span>\r\n          </button>\r\n          <ng-template #withSubMenu>\r\n            <button\r\n              mat-menu-item\r\n              [matMenuTriggerFor]=\"subAccountMenu\"\r\n              class=\"profil-menu\"\r\n            >\r\n              <mat-checkbox\r\n                [checked]=\"getPermission(user).checked\"\r\n                [indeterminate]=\"getPermission(user).indeterminate\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (change)=\"handleToggleCategory(user)\"\r\n              >\r\n              </mat-checkbox>\r\n              <span>{{ user.title }}</span>\r\n            </button>\r\n\r\n            <mat-menu #subAccountMenu=\"matMenu\">\r\n              <button\r\n                mat-menu-item\r\n                *ngFor=\"let child of user.childs\"\r\n                class=\"profil-menu\"\r\n              >\r\n                <mat-checkbox\r\n                  [checked]=\"getPermission(child).checked\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"handleToggleCategory(child, user)\"\r\n                >\r\n                  {{ child.title }}\r\n                </mat-checkbox>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n        <button mat-menu-item class=\"profil-menu\">\r\n          <mat-checkbox\r\n            [checked]=\"showHidden\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"showHiddenContexts.emit()\"\r\n          >\r\n          </mat-checkbox>\r\n          <span>\r\n            {{ 'igo.context.contextManager.showHidden' | translate }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template\r\n    ngFor\r\n    let-groupContexts\r\n    [ngForOf]=\"$any(contexts$ | async) | keyvalue\"\r\n  >\r\n    <igo-collapsible\r\n      *ngIf=\"$any(groupContexts).value.length && auth.authenticated\"\r\n      [title]=\"titleMapping[$any(groupContexts).key] | translate\"\r\n      [collapsed]=\"$any(collapsed[titleMapping[$any(groupContexts).key]])\"\r\n      (toggle)=\"collapsed[titleMapping[$any(groupContexts).key]] = $any($event)\"\r\n    >\r\n      <ng-template ngFor let-context [ngForOf]=\"$any(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]=\"\r\n            context.id &&\r\n            this.defaultContextId &&\r\n            this.defaultContextId === context.id\r\n          \"\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        >\r\n        </igo-context-item>\r\n      </ng-template>\r\n    </igo-collapsible>\r\n\r\n    <ng-container\r\n      *ngIf=\"$any(groupContexts).value.length && !auth.authenticated\"\r\n    ></ng-container>\r\n    <ng-template ngFor let-context [ngForOf]=\"$any(groupContexts).value\">\r\n      <igo-context-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [showFavorite]=\"\r\n          configService.getConfig('favoriteContext4NonAuthenticated')\r\n        \"\r\n        [selected]=\"selectedContext && selectedContext.uri === context.uri\"\r\n        [context]=\"context\"\r\n        [default]=\"\r\n          contextConfigs\r\n            ? defaultContextId === context.id\r\n            : defaultContextId === context.uri\r\n        \"\r\n        (favorite)=\"favorite.emit(context)\"\r\n        (select)=\"select.emit(context)\"\r\n        (unselect)=\"unselect.emit(context)\"\r\n      >\r\n      </igo-context-item>\r\n    </ng-template>\r\n  </ng-template>\r\n\r\n  <div *ngIf=\"isEmpty\" class=\"no-result\">\r\n    {{ 'igo.context.contextManager.noResult' | translate }}\r\n  </div>\r\n</igo-list>\r\n", styles: [":host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.context-filter-container{display:flex;align-items:center;padding:8px 4px}.context-filter-container mat-form-field{flex:1}.context-filter-min-width{width:calc(100% - 135px);margin:5px;padding-left:6px}.profil-menu{padding-left:8px}.profil-menu mat-checkbox{margin-right:8px}.add-context-button{margin:0;width:40px;display:inline-flex;overflow:hidden}.actions-container{margin-left:4px}.no-result{padding:16px}\n"], dependencies: [{ kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ActionbarComponent, selector: "igo-actionbar", inputs: ["store", "mode", "withToggleButton", "horizontal", "color", "iconColor", "withTitle", "withTooltip", "scrollActive", "withIcon", "icon", "xPosition", "yPosition", "overlayClass"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i11$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: CollapsibleComponent, selector: "igo-collapsible", inputs: ["title", "collapsed"], outputs: ["toggle"] }, { kind: "component", type: ContextItemComponent, selector: "igo-context-item", inputs: ["showFavorite", "context", "default", "selected"], outputs: ["edit", "delete", "save", "clone", "hide", "show", "favorite", "managePermissions", "manageTools"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-context-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\">\r\n  <div class=\"context-filter-container\">\r\n    <mat-form-field *ngIf=\"showFilter()\" floatLabel=\"always\">\r\n      <mat-label>{{\r\n        'igo.context.contextManager.filterPlaceHolder' | translate\r\n      }}</mat-label>\r\n      <input\r\n        matInput\r\n        type=\"text\"\r\n        [placeholder]=\"\r\n          'igo.context.contextManager.filterPlaceHolder' | translate\r\n        \"\r\n        [(ngModel)]=\"term\"\r\n      />\r\n      <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      >\r\n        <mat-icon svgIcon=\"close\"></mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <div class=\"actions-container\">\r\n      <button\r\n        *ngIf=\"!sortedAlpha\"\r\n        class=\"sort-alpha\"\r\n        mat-icon-button\r\n        [matTooltip]=\"\r\n          'igo.context.contextManager.sortAlphabetically' | translate\r\n        \"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"toggleSort(true)\"\r\n      >\r\n        <mat-icon\r\n          color=\"primary\"\r\n          svgIcon=\"sort-alphabetical-variant\"\r\n        ></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      >\r\n        <mat-icon color=\"warn\" svgIcon=\"sort-variant-remove\"></mat-icon>\r\n      </button>\r\n\r\n      <igo-actionbar\r\n        *ngIf=\"auth.authenticated && contextConfigs\"\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      >\r\n      </igo-actionbar>\r\n\r\n      <button\r\n        *ngIf=\"auth.authenticated && contextConfigs\"\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      >\r\n        <mat-icon color=\"primary\" svgIcon=\"filter-menu\"></mat-icon>\r\n      </button>\r\n      <mat-menu #accountMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let user of users\">\r\n          <button\r\n            *ngIf=\"!user.childs; else withSubMenu\"\r\n            mat-menu-item\r\n            class=\"profil-menu\"\r\n          >\r\n            <mat-checkbox\r\n              [checked]=\"getPermission(user).checked\"\r\n              [indeterminate]=\"getPermission(user).indeterminate\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"handleToggleCategory(user)\"\r\n            >\r\n            </mat-checkbox>\r\n            <span>{{ user.title }}</span>\r\n          </button>\r\n          <ng-template #withSubMenu>\r\n            <button\r\n              mat-menu-item\r\n              [matMenuTriggerFor]=\"subAccountMenu\"\r\n              class=\"profil-menu\"\r\n            >\r\n              <mat-checkbox\r\n                [checked]=\"getPermission(user).checked\"\r\n                [indeterminate]=\"getPermission(user).indeterminate\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (change)=\"handleToggleCategory(user)\"\r\n              >\r\n              </mat-checkbox>\r\n              <span>{{ user.title }}</span>\r\n            </button>\r\n\r\n            <mat-menu #subAccountMenu=\"matMenu\">\r\n              <button\r\n                mat-menu-item\r\n                *ngFor=\"let child of user.childs\"\r\n                class=\"profil-menu\"\r\n              >\r\n                <mat-checkbox\r\n                  [checked]=\"getPermission(child).checked\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"handleToggleCategory(child, user)\"\r\n                >\r\n                  {{ child.title }}\r\n                </mat-checkbox>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n        <button mat-menu-item class=\"profil-menu\">\r\n          <mat-checkbox\r\n            [checked]=\"showHidden\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"showHiddenContexts.emit()\"\r\n          >\r\n          </mat-checkbox>\r\n          <span>\r\n            {{ 'igo.context.contextManager.showHidden' | translate }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template ngFor let-groupContexts [ngForOf]=\"contexts$ | async | keyvalue\">\r\n    <igo-collapsible\r\n      *ngIf=\"groupContexts.value.length && auth.authenticated\"\r\n      [title]=\"titleMapping[groupContexts.key] | translate\"\r\n      [collapsed]=\"collapsed[titleMapping[groupContexts.key]]\"\r\n      (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]=\"\r\n            context.id &&\r\n            this.defaultContextId &&\r\n            this.defaultContextId === context.id\r\n          \"\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        >\r\n        </igo-context-item>\r\n      </ng-template>\r\n    </igo-collapsible>\r\n\r\n    <ng-template\r\n      *ngIf=\"groupContexts.value.length && !auth.authenticated\"\r\n      ngFor\r\n      let-context\r\n      [ngForOf]=\"groupContexts.value\"\r\n    >\r\n      <igo-context-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [showFavorite]=\"\r\n          configService.getConfig('favoriteContext4NonAuthenticated')\r\n        \"\r\n        [selected]=\"selectedContext && selectedContext.uri === context.uri\"\r\n        [context]=\"context\"\r\n        [default]=\"\r\n          contextConfigs\r\n            ? defaultContextId === context.id\r\n            : defaultContextId === context.uri\r\n        \"\r\n        (favorite)=\"favorite.emit(context)\"\r\n        (select)=\"select.emit(context)\"\r\n        (unselect)=\"unselect.emit(context)\"\r\n      >\r\n      </igo-context-item>\r\n    </ng-template>\r\n  </ng-template>\r\n\r\n  <div *ngIf=\"isEmpty\" class=\"no-result\">\r\n    {{ 'igo.context.contextManager.noResult' | translate }}\r\n  </div>\r\n</igo-list>\r\n", styles: [":host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.context-filter-container{display:flex;align-items:center;padding:8px 4px}.context-filter-container mat-form-field{flex:1}.context-filter-min-width{width:calc(100% - 135px);margin:5px;padding-left:6px}.profil-menu{padding-left:8px}.profil-menu mat-checkbox{margin-right:8px}.add-context-button{margin:0;width:40px;display:inline-flex;overflow:hidden}.actions-container{margin-left:4px}.no-result{padding:16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i3.ConfigService }, { type: i2.AuthService }, { type: i1$3.MatDialog }, { type: i3.LanguageService }, { type: i3.StorageService }]; }, propDecorators: { contexts: [{
+            args: [{ selector: 'igo-context-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        ListComponent,
+                        NgIf,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        ActionbarComponent,
+                        MatMenuModule,
+                        NgFor,
+                        MatCheckboxModule,
+                        CollapsibleComponent,
+                        ContextItemComponent,
+                        ListItemDirective,
+                        AsyncPipe,
+                        KeyValuePipe,
+                        TranslateModule
+                    ], template: "<igo-list [navigation]=\"true\">\r\n  <div class=\"context-filter-container\">\r\n    <mat-form-field *ngIf=\"showFilter()\" floatLabel=\"always\">\r\n      <mat-label>{{\r\n        'igo.context.contextManager.filterPlaceHolder' | translate\r\n      }}</mat-label>\r\n      <input\r\n        matInput\r\n        type=\"text\"\r\n        [placeholder]=\"\r\n          'igo.context.contextManager.filterPlaceHolder' | translate\r\n        \"\r\n        [(ngModel)]=\"term\"\r\n      />\r\n      <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      >\r\n        <mat-icon svgIcon=\"close\"></mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <div class=\"actions-container\">\r\n      <button\r\n        *ngIf=\"!sortedAlpha\"\r\n        class=\"sort-alpha\"\r\n        mat-icon-button\r\n        [matTooltip]=\"\r\n          'igo.context.contextManager.sortAlphabetically' | translate\r\n        \"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"toggleSort(true)\"\r\n      >\r\n        <mat-icon\r\n          color=\"primary\"\r\n          svgIcon=\"sort-alphabetical-variant\"\r\n        ></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      >\r\n        <mat-icon color=\"warn\" svgIcon=\"sort-variant-remove\"></mat-icon>\r\n      </button>\r\n\r\n      <igo-actionbar\r\n        *ngIf=\"auth.authenticated && contextConfigs\"\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      >\r\n      </igo-actionbar>\r\n\r\n      <button\r\n        *ngIf=\"auth.authenticated && contextConfigs\"\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      >\r\n        <mat-icon color=\"primary\" svgIcon=\"filter-menu\"></mat-icon>\r\n      </button>\r\n      <mat-menu #accountMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let user of users\">\r\n          <button\r\n            *ngIf=\"!user.childs; else withSubMenu\"\r\n            mat-menu-item\r\n            class=\"profil-menu\"\r\n          >\r\n            <mat-checkbox\r\n              [checked]=\"getPermission(user).checked\"\r\n              [indeterminate]=\"getPermission(user).indeterminate\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"handleToggleCategory(user)\"\r\n            >\r\n            </mat-checkbox>\r\n            <span>{{ user.title }}</span>\r\n          </button>\r\n          <ng-template #withSubMenu>\r\n            <button\r\n              mat-menu-item\r\n              [matMenuTriggerFor]=\"subAccountMenu\"\r\n              class=\"profil-menu\"\r\n            >\r\n              <mat-checkbox\r\n                [checked]=\"getPermission(user).checked\"\r\n                [indeterminate]=\"getPermission(user).indeterminate\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (change)=\"handleToggleCategory(user)\"\r\n              >\r\n              </mat-checkbox>\r\n              <span>{{ user.title }}</span>\r\n            </button>\r\n\r\n            <mat-menu #subAccountMenu=\"matMenu\">\r\n              <button\r\n                mat-menu-item\r\n                *ngFor=\"let child of user.childs\"\r\n                class=\"profil-menu\"\r\n              >\r\n                <mat-checkbox\r\n                  [checked]=\"getPermission(child).checked\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"handleToggleCategory(child, user)\"\r\n                >\r\n                  {{ child.title }}\r\n                </mat-checkbox>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n        <button mat-menu-item class=\"profil-menu\">\r\n          <mat-checkbox\r\n            [checked]=\"showHidden\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"showHiddenContexts.emit()\"\r\n          >\r\n          </mat-checkbox>\r\n          <span>\r\n            {{ 'igo.context.contextManager.showHidden' | translate }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template\r\n    ngFor\r\n    let-groupContexts\r\n    [ngForOf]=\"$any(contexts$ | async) | keyvalue\"\r\n  >\r\n    <igo-collapsible\r\n      *ngIf=\"$any(groupContexts).value.length && auth.authenticated\"\r\n      [title]=\"titleMapping[$any(groupContexts).key] | translate\"\r\n      [collapsed]=\"$any(collapsed[titleMapping[$any(groupContexts).key]])\"\r\n      (toggle)=\"collapsed[titleMapping[$any(groupContexts).key]] = $any($event)\"\r\n    >\r\n      <ng-template ngFor let-context [ngForOf]=\"$any(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]=\"\r\n            context.id &&\r\n            this.defaultContextId &&\r\n            this.defaultContextId === context.id\r\n          \"\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        >\r\n        </igo-context-item>\r\n      </ng-template>\r\n    </igo-collapsible>\r\n\r\n    <ng-container\r\n      *ngIf=\"$any(groupContexts).value.length && !auth.authenticated\"\r\n    ></ng-container>\r\n    <ng-template ngFor let-context [ngForOf]=\"$any(groupContexts).value\">\r\n      <igo-context-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [showFavorite]=\"\r\n          configService.getConfig('favoriteContext4NonAuthenticated')\r\n        \"\r\n        [selected]=\"selectedContext && selectedContext.uri === context.uri\"\r\n        [context]=\"context\"\r\n        [default]=\"\r\n          contextConfigs\r\n            ? defaultContextId === context.id\r\n            : defaultContextId === context.uri\r\n        \"\r\n        (favorite)=\"favorite.emit(context)\"\r\n        (select)=\"select.emit(context)\"\r\n        (unselect)=\"unselect.emit(context)\"\r\n      >\r\n      </igo-context-item>\r\n    </ng-template>\r\n  </ng-template>\r\n\r\n  <div *ngIf=\"isEmpty\" class=\"no-result\">\r\n    {{ 'igo.context.contextManager.noResult' | translate }}\r\n  </div>\r\n</igo-list>\r\n", styles: [":host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.context-filter-container{display:flex;align-items:center;padding:8px 4px}.context-filter-container mat-form-field{flex:1}.context-filter-min-width{width:calc(100% - 135px);margin:5px;padding-left:6px}.profil-menu{padding-left:8px}.profil-menu mat-checkbox{margin-right:8px}.add-context-button{margin:0;width:40px;display:inline-flex;overflow:hidden}.actions-container{margin-left:4px}.no-result{padding:16px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i3.ConfigService }, { type: i2.AuthService }, { type: i1$2.MatDialog }, { type: i3.LanguageService }, { type: i3.StorageService }], propDecorators: { contexts: [{
                 type: Input
             }], selectedContext: [{
                 type: Input
@@ -2412,618 +2039,965 @@ class ContextListBindingDirective {
         });
     }
     ngOnDestroy() {
-        this.contexts$$.unsubscribe();
-        this.selectedContext$$.unsubscribe();
-        this.defaultContextId$$.unsubscribe();
+        this.contexts$$.unsubscribe();
+        this.selectedContext$$.unsubscribe();
+        this.defaultContextId$$.unsubscribe();
+    }
+    handleContextsChange(contexts) {
+        this.component.contexts = contexts;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextListBindingDirective, deps: [{ token: ContextListComponent, self: true }, { token: ContextService }, { token: i1$1.MapService }, { token: i3.LanguageService }, { token: i5$2.ConfirmDialogService }, { token: i3.MessageService }, { token: i2.AuthService }, { token: i3.StorageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ContextListBindingDirective, isStandalone: true, selector: "[igoContextListBinding]", host: { listeners: { "select": "onSelect($event)", "edit": "onEdit($event)", "save": "onSave($event)", "favorite": "onFavorite($event)", "manageTools": "onManageTools($event)", "managePermissions": "onManagePermissions($event)", "delete": "onDelete($event)", "clone": "onClone($event)", "create": "onCreate($event)", "filterPermissionsChanged": "loadContexts()", "showHiddenContexts": "showHiddenContexts()", "show": "onShowContext($event)", "hide": "onHideContext($event)" } }, providers: [ConfirmDialogService], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextListBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[igoContextListBinding]',
+                    standalone: true,
+                    providers: [ConfirmDialogService]
+                }]
+        }], ctorParameters: () => [{ type: ContextListComponent, decorators: [{
+                    type: Self
+                }] }, { type: ContextService }, { type: i1$1.MapService }, { type: i3.LanguageService }, { type: i5$2.ConfirmDialogService }, { type: i3.MessageService }, { type: i2.AuthService }, { type: i3.StorageService }, { type: i0.ChangeDetectorRef }], propDecorators: { onSelect: [{
+                type: HostListener,
+                args: ['select', ['$event']]
+            }], onEdit: [{
+                type: HostListener,
+                args: ['edit', ['$event']]
+            }], onSave: [{
+                type: HostListener,
+                args: ['save', ['$event']]
+            }], onFavorite: [{
+                type: HostListener,
+                args: ['favorite', ['$event']]
+            }], onManageTools: [{
+                type: HostListener,
+                args: ['manageTools', ['$event']]
+            }], onManagePermissions: [{
+                type: HostListener,
+                args: ['managePermissions', ['$event']]
+            }], onDelete: [{
+                type: HostListener,
+                args: ['delete', ['$event']]
+            }], onClone: [{
+                type: HostListener,
+                args: ['clone', ['$event']]
+            }], onCreate: [{
+                type: HostListener,
+                args: ['create', ['$event']]
+            }], loadContexts: [{
+                type: HostListener,
+                args: ['filterPermissionsChanged']
+            }], showHiddenContexts: [{
+                type: HostListener,
+                args: ['showHiddenContexts']
+            }], onShowContext: [{
+                type: HostListener,
+                args: ['show', ['$event']]
+            }], onHideContext: [{
+                type: HostListener,
+                args: ['hide', ['$event']]
+            }] } });
+
+class ContextPermissionsComponent {
+    formBuilder;
+    cd;
+    http;
+    authService;
+    config;
+    form;
+    get context() {
+        return this._context;
+    }
+    set context(value) {
+        this._context = value;
+        this.cd.detectChanges();
+    }
+    _context;
+    get permissions() {
+        return this._permissions;
+    }
+    set permissions(value) {
+        this._permissions = value;
+        this.cd.detectChanges();
+    }
+    _permissions;
+    get profils() {
+        return this._profils;
+    }
+    set profils(value) {
+        this._profils = value;
+        this.cd.detectChanges();
+    }
+    _profils = [];
+    get canWrite() {
+        return this.context.permission === TypePermission[TypePermission.write];
+    }
+    baseUrlProfils;
+    formControl = new UntypedFormControl();
+    formValueChanges$$;
+    addPermission = new EventEmitter();
+    removePermission = new EventEmitter();
+    scopeChanged = new EventEmitter();
+    constructor(formBuilder, cd, http, authService, config) {
+        this.formBuilder = formBuilder;
+        this.cd = cd;
+        this.http = http;
+        this.authService = authService;
+        this.config = config;
+    }
+    ngOnInit() {
+        this.buildForm();
+        this.baseUrlProfils =
+            this.config.getConfig('context.url') + '/profils-users?';
+        this.formValueChanges$$ = this.formControl.valueChanges.subscribe((value) => {
+            if (value.length) {
+                this.http
+                    .get(this.baseUrlProfils + 'q=' + value)
+                    .subscribe((profils) => {
+                    this.profils = profils;
+                });
+                this.profils.filter((profil) => {
+                    const filterNormalized = value
+                        .toLowerCase()
+                        .normalize('NFD')
+                        .replace(/[\u0300-\u036f]/g, '');
+                    const profilTitleNormalized = profil.title
+                        .toLowerCase()
+                        .normalize('NFD')
+                        .replace(/[\u0300-\u036f]/g, '');
+                    const profilNameNormalized = profil.name
+                        .toLowerCase()
+                        .normalize('NFD')
+                        .replace(/[\u0300-\u036f]/g, '');
+                    const profilNormalized = profilNameNormalized + profilTitleNormalized;
+                    return profilNormalized.includes(filterNormalized);
+                });
+            }
+            else {
+                this.profils = [];
+            }
+        });
+    }
+    displayFn(profil) {
+        return profil ? profil.title : undefined;
+    }
+    handleFormSubmit(value) {
+        this.addPermission.emit(value);
+    }
+    buildForm() {
+        this.form = this.formBuilder.group({
+            profil: [],
+            typePermission: ['read']
+        });
+    }
+    onProfilSelected(value) {
+        this.form.setValue({
+            profil: value.name,
+            typePermission: this.form.value.typePermission
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextPermissionsComponent, deps: [{ token: i4.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i2.AuthService }, { token: i3.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ContextPermissionsComponent, isStandalone: true, selector: "igo-context-permissions", inputs: { context: "context", permissions: "permissions" }, outputs: { addPermission: "addPermission", removePermission: "removePermission", scopeChanged: "scopeChanged" }, ngImport: i0, template: "<div *ngIf=\"context\">\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\n      [(ngModel)]=\"context.scope\"\n      (change)=\"scopeChanged.emit(context)\"\n    >\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\n    *ngIf=\"context.scope !== 'private' && canWrite\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"handleFormSubmit(form.value)\"\n  >\n    <mat-form-field class=\"full-width\">\n      <input\n        matInput\n        required\n        [placeholder]=\"'igo.context.permission.user' | translate\"\n        [formControl]=\"formControl\"\n        [matAutocomplete]=\"auto\"\n      />\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"onProfilSelected($event.option.value)\"\n        [displayWith]=\"displayFn\"\n      >\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    <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    <div class=\"igo-form-button-group\">\n      <button mat-raised-button type=\"submit\" [disabled]=\"!form.valid\">\n        {{ 'igo.context.permission.addBtn' | translate }}\n      </button>\n    </div>\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 matListItemIcon svgIcon=\"account-outline\"></mat-icon>\n            <h4 matListItemTitle>\n              {{ permission.profilTitle }}\n              <small class=\"mat-typography\">{{ permission.profil }}</small>\n            </h4>\n\n            <div\n              matListItemMeta\n              igoStopPropagation\n              class=\"igo-actions-container\"\n            >\n              <button\n                *ngIf=\"\n                  canWrite ||\n                  permission.profil === authService.decodeToken().user.sourceId\n                \"\n                mat-icon-button\n                [matTooltip]=\"'igo.context.permission.delete' | translate\"\n                matTooltipShowDelay=\"500\"\n                color=\"warn\"\n                (click)=\"removePermission.emit(permission)\"\n              >\n                <mat-icon svgIcon=\"delete\"></mat-icon>\n              </button>\n            </div>\n          </mat-list-item>\n        </ng-template>\n      </igo-collapsible>\n    </ng-template>\n  </igo-list>\n</div>\n", styles: [":host{margin:10px}.full-width{width:100%}mat-radio-button{padding:14px 14px 14px 0}.scopeForm,form{padding:5px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i5$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: CollapsibleComponent, selector: "igo-collapsible", inputs: ["title", "collapsed"], outputs: ["toggle"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i3$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i3$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextPermissionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-context-permissions', standalone: true, imports: [
+                        NgIf,
+                        MatRadioModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        NgFor,
+                        MatOptionModule,
+                        MatButtonModule,
+                        ListComponent,
+                        CollapsibleComponent,
+                        MatListModule,
+                        MatIconModule,
+                        StopPropagationDirective,
+                        MatTooltipModule,
+                        KeyValuePipe,
+                        TranslateModule
+                    ], template: "<div *ngIf=\"context\">\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\n      [(ngModel)]=\"context.scope\"\n      (change)=\"scopeChanged.emit(context)\"\n    >\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\n    *ngIf=\"context.scope !== 'private' && canWrite\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"handleFormSubmit(form.value)\"\n  >\n    <mat-form-field class=\"full-width\">\n      <input\n        matInput\n        required\n        [placeholder]=\"'igo.context.permission.user' | translate\"\n        [formControl]=\"formControl\"\n        [matAutocomplete]=\"auto\"\n      />\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"onProfilSelected($event.option.value)\"\n        [displayWith]=\"displayFn\"\n      >\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    <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    <div class=\"igo-form-button-group\">\n      <button mat-raised-button type=\"submit\" [disabled]=\"!form.valid\">\n        {{ 'igo.context.permission.addBtn' | translate }}\n      </button>\n    </div>\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 matListItemIcon svgIcon=\"account-outline\"></mat-icon>\n            <h4 matListItemTitle>\n              {{ permission.profilTitle }}\n              <small class=\"mat-typography\">{{ permission.profil }}</small>\n            </h4>\n\n            <div\n              matListItemMeta\n              igoStopPropagation\n              class=\"igo-actions-container\"\n            >\n              <button\n                *ngIf=\"\n                  canWrite ||\n                  permission.profil === authService.decodeToken().user.sourceId\n                \"\n                mat-icon-button\n                [matTooltip]=\"'igo.context.permission.delete' | translate\"\n                matTooltipShowDelay=\"500\"\n                color=\"warn\"\n                (click)=\"removePermission.emit(permission)\"\n              >\n                <mat-icon svgIcon=\"delete\"></mat-icon>\n              </button>\n            </div>\n          </mat-list-item>\n        </ng-template>\n      </igo-collapsible>\n    </ng-template>\n  </igo-list>\n</div>\n", styles: [":host{margin:10px}.full-width{width:100%}mat-radio-button{padding:14px 14px 14px 0}.scopeForm,form{padding:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i4.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i2.AuthService }, { type: i3.ConfigService }], propDecorators: { context: [{
+                type: Input
+            }], permissions: [{
+                type: Input
+            }], addPermission: [{
+                type: Output
+            }], removePermission: [{
+                type: Output
+            }], scopeChanged: [{
+                type: Output
+            }] } });
+
+class ContextPermissionsBindingDirective {
+    contextService;
+    languageService;
+    messageService;
+    cd;
+    component;
+    editedContext$$;
+    onAddPermission(permission) {
+        if (!permission.profil) {
+            this.messageService.error('igo.context.contextManager.errors.addPermissionEmpty', 'igo.context.contextManager.errors.addPermissionTitle');
+            return;
+        }
+        const contextId = this.component.context.id;
+        this.contextService
+            .addPermissionAssociation(contextId, permission.profil, permission.typePermission)
+            .subscribe((profils) => {
+            for (const p of profils) {
+                this.component.permissions[permission.typePermission].push(p);
+            }
+            const profil = permission.profil;
+            this.messageService.success('igo.context.permission.dialog.addMsg', 'igo.context.permission.dialog.addTitle', undefined, { value: profil });
+            this.cd.detectChanges();
+        });
+    }
+    onRemovePermission(permission) {
+        const contextId = this.component.context.id;
+        this.contextService
+            .deletePermissionAssociation(contextId, permission.id)
+            .subscribe(() => {
+            const index = this.component.permissions[permission.typePermission].findIndex((p) => {
+                return p.id === permission.id;
+            });
+            this.component.permissions[permission.typePermission].splice(index, 1);
+            const profil = permission.profil;
+            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(() => {
+            this.messageService.success('igo.context.permission.dialog.scopeChangedMsg', 'igo.context.permission.dialog.scopeChangedTitle', undefined, { value: 'igo.context.permission.scope.' + scope });
+        });
+    }
+    constructor(component, contextService, languageService, messageService, cd) {
+        this.contextService = contextService;
+        this.languageService = languageService;
+        this.messageService = messageService;
+        this.cd = cd;
+        this.component = component;
+    }
+    ngOnInit() {
+        this.editedContext$$ = this.contextService.editedContext$.subscribe((context) => this.handleEditedContextChange(context));
+    }
+    ngOnDestroy() {
+        this.editedContext$$.unsubscribe();
+        this.contextService.editedContext$.next(undefined);
     }
-    handleContextsChange(contexts) {
-        this.component.contexts = contexts;
+    handleEditedContextChange(context) {
+        this.component.context = context;
+        if (context) {
+            this.contextService
+                .getPermissions(context.id)
+                .subscribe((permissionsArray) => {
+                permissionsArray = permissionsArray || [];
+                const permissions = {
+                    read: permissionsArray.filter((p) => {
+                        return p.typePermission.toString() === 'read';
+                    }),
+                    write: permissionsArray.filter((p) => {
+                        return p.typePermission.toString() === 'write';
+                    })
+                };
+                return (this.component.permissions = permissions);
+            });
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextListBindingDirective, deps: [{ token: ContextListComponent, self: true }, { token: ContextService }, { token: i1$1.MapService }, { token: i3.LanguageService }, { token: i13.ConfirmDialogService }, { token: i3.MessageService }, { token: i2.AuthService }, { token: i3.StorageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ContextListBindingDirective, selector: "[igoContextListBinding]", host: { listeners: { "select": "onSelect($event)", "edit": "onEdit($event)", "save": "onSave($event)", "favorite": "onFavorite($event)", "manageTools": "onManageTools($event)", "managePermissions": "onManagePermissions($event)", "delete": "onDelete($event)", "clone": "onClone($event)", "create": "onCreate($event)", "filterPermissionsChanged": "loadContexts()", "showHiddenContexts": "showHiddenContexts()", "show": "onShowContext($event)", "hide": "onHideContext($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextPermissionsBindingDirective, deps: [{ token: ContextPermissionsComponent, self: true }, { token: ContextService }, { token: i3.LanguageService }, { token: i3.MessageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: ContextPermissionsBindingDirective, isStandalone: true, selector: "[igoContextPermissionsBinding]", host: { listeners: { "addPermission": "onAddPermission($event)", "removePermission": "onRemovePermission($event)", "scopeChanged": "onScopeChanged($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextListBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContextPermissionsBindingDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[igoContextListBinding]'
+                    selector: '[igoContextPermissionsBinding]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: ContextListComponent, decorators: [{
+        }], ctorParameters: () => [{ type: ContextPermissionsComponent, decorators: [{
                     type: Self
-                }] }, { type: ContextService }, { type: i1$1.MapService }, { type: i3.LanguageService }, { type: i13.ConfirmDialogService }, { type: i3.MessageService }, { type: i2.AuthService }, { type: i3.StorageService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onSelect: [{
-                type: HostListener,
-                args: ['select', ['$event']]
-            }], onEdit: [{
-                type: HostListener,
-                args: ['edit', ['$event']]
-            }], onSave: [{
-                type: HostListener,
-                args: ['save', ['$event']]
-            }], onFavorite: [{
-                type: HostListener,
-                args: ['favorite', ['$event']]
-            }], onManageTools: [{
-                type: HostListener,
-                args: ['manageTools', ['$event']]
-            }], onManagePermissions: [{
-                type: HostListener,
-                args: ['managePermissions', ['$event']]
-            }], onDelete: [{
-                type: HostListener,
-                args: ['delete', ['$event']]
-            }], onClone: [{
-                type: HostListener,
-                args: ['clone', ['$event']]
-            }], onCreate: [{
-                type: HostListener,
-                args: ['create', ['$event']]
-            }], loadContexts: [{
-                type: HostListener,
-                args: ['filterPermissionsChanged']
-            }], showHiddenContexts: [{
+                }] }, { type: ContextService }, { type: i3.LanguageService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { onAddPermission: [{
                 type: HostListener,
-                args: ['showHiddenContexts']
-            }], onShowContext: [{
+                args: ['addPermission', ['$event']]
+            }], onRemovePermission: [{
                 type: HostListener,
-                args: ['show', ['$event']]
-            }], onHideContext: [{
+                args: ['removePermission', ['$event']]
+            }], onScopeChanged: [{
                 type: HostListener,
-                args: ['hide', ['$event']]
+                args: ['scopeChanged', ['$event']]
             }] } });
 
-class ContextPermissionsComponent {
-    formBuilder;
-    cd;
-    http;
-    authService;
-    config;
-    form;
-    get context() {
-        return this._context;
-    }
-    set context(value) {
-        this._context = value;
-        this.cd.detectChanges();
-    }
-    _context;
-    get permissions() {
-        return this._permissions;
+class LayerContextDirective {
+    component;
+    contextService;
+    layerService;
+    configService;
+    styleListService;
+    styleService;
+    route;
+    context$$;
+    queryParams;
+    contextLayers = [];
+    removeLayersOnContextChange = true;
+    get map() {
+        return this.component.map;
     }
-    set permissions(value) {
-        this._permissions = value;
-        this.cd.detectChanges();
+    constructor(component, contextService, layerService, configService, styleListService, styleService, route) {
+        this.component = component;
+        this.contextService = contextService;
+        this.layerService = layerService;
+        this.configService = configService;
+        this.styleListService = styleListService;
+        this.styleService = styleService;
+        this.route = route;
     }
-    _permissions;
-    get profils() {
-        return this._profils;
+    ngOnInit() {
+        this.context$$ = this.contextService.context$
+            .pipe(filter((context) => context !== undefined))
+            .subscribe((context) => this.handleContextChange(context));
+        if (this.route &&
+            this.route.options.visibleOnLayersKey &&
+            this.route.options.visibleOffLayersKey &&
+            this.route.options.contextKey) {
+            this.route.queryParams
+                .pipe(first((params) => !ObjectUtils.isEmpty(params)))
+                .subscribe((params) => {
+                this.queryParams = params;
+            });
+        }
     }
-    set profils(value) {
-        this._profils = value;
-        this.cd.detectChanges();
+    ngOnDestroy() {
+        this.context$$.unsubscribe();
     }
-    _profils = [];
-    get canWrite() {
-        return this.context.permission === TypePermission[TypePermission.write];
+    handleContextChange(context) {
+        if (context.layers === undefined) {
+            return;
+        }
+        if (this.removeLayersOnContextChange === true) {
+            this.map.removeAllLayers();
+        }
+        else {
+            this.map.removeLayers(this.contextLayers);
+        }
+        this.contextLayers = [];
+        const layersAndIndex$ = merge(...context.layers.map((layerOptions, index) => {
+            return this.layerService.createAsyncLayer(layerOptions, context.uri);
+        }));
+        layersAndIndex$
+            .pipe(buffer(layersAndIndex$.pipe(debounceTime(500))))
+            .subscribe((layers) => {
+            this.handleAddLayers(layers);
+            if (context.extraFeatures) {
+                context.extraFeatures.forEach((featureCollection) => {
+                    const importExportOptions = this.configService.getConfig('importExport');
+                    if (!importExportOptions?.importWithStyle) {
+                        addImportedFeaturesToMap(featureCollection, this.map);
+                    }
+                    else {
+                        addImportedFeaturesStyledToMap(featureCollection, this.map, this.styleListService, this.styleService);
+                    }
+                });
+            }
+        });
+        this.layerService
+            .createAsyncIdbLayers(context.uri)
+            .pipe(debounceTime(500))
+            .subscribe((layers) => this.handleAddLayers(layers));
     }
-    baseUrlProfils;
-    formControl = new UntypedFormControl();
-    formValueChanges$$;
-    addPermission = new EventEmitter();
-    removePermission = new EventEmitter();
-    scopeChanged = new EventEmitter();
-    constructor(formBuilder, cd, http, authService, config) {
-        this.formBuilder = formBuilder;
-        this.cd = cd;
-        this.http = http;
-        this.authService = authService;
-        this.config = config;
+    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);
     }
-    ngOnInit() {
-        this.buildForm();
-        this.baseUrlProfils =
-            this.config.getConfig('context.url') + '/profils-users?';
-        this.formValueChanges$$ = this.formControl.valueChanges.subscribe((value) => {
-            if (value.length) {
-                this.http
-                    .get(this.baseUrlProfils + 'q=' + value)
-                    .subscribe((profils) => {
-                    this.profils = profils;
-                });
-                this.profils.filter((profil) => {
-                    const filterNormalized = value
-                        .toLowerCase()
-                        .normalize('NFD')
-                        .replace(/[\u0300-\u036f]/g, '');
-                    const profilTitleNormalized = profil.title
-                        .toLowerCase()
-                        .normalize('NFD')
-                        .replace(/[\u0300-\u036f]/g, '');
-                    const profilNameNormalized = profil.name
-                        .toLowerCase()
-                        .normalize('NFD')
-                        .replace(/[\u0300-\u036f]/g, '');
-                    const profilNormalized = profilNameNormalized + profilTitleNormalized;
-                    return profilNormalized.includes(filterNormalized);
-                });
+    computeLayerVisibilityFromUrl(layer) {
+        const params = this.queryParams;
+        const currentContext = this.contextService.context$.value.uri;
+        const currentLayerid = layer.id;
+        let visible = layer.visible;
+        if (!params || !currentLayerid) {
+            return visible;
+        }
+        const contextParams = params[this.route.options.contextKey];
+        if (contextParams === currentContext || !contextParams) {
+            let visibleOnLayersParams = '';
+            let visibleOffLayersParams = '';
+            let visiblelayers = [];
+            let invisiblelayers = [];
+            if (this.route.options.visibleOnLayersKey &&
+                params[this.route.options.visibleOnLayersKey]) {
+                visibleOnLayersParams =
+                    params[this.route.options.visibleOnLayersKey];
+            }
+            if (this.route.options.visibleOffLayersKey &&
+                params[this.route.options.visibleOffLayersKey]) {
+                visibleOffLayersParams =
+                    params[this.route.options.visibleOffLayersKey];
+            }
+            /* This order is important because to control whichever
+             the order of * param. First whe open and close everything.*/
+            if (visibleOnLayersParams === '*') {
+                visible = true;
+            }
+            if (visibleOffLayersParams === '*') {
+                visible = false;
+            }
+            // After, managing named layer by id (context.json OR id from datasource)
+            visiblelayers = visibleOnLayersParams.split(',');
+            invisiblelayers = visibleOffLayersParams.split(',');
+            if (visiblelayers.indexOf(currentLayerid) > -1 ||
+                visiblelayers.indexOf(currentLayerid.toString()) > -1) {
+                visible = true;
             }
-            else {
-                this.profils = [];
+            if (invisiblelayers.indexOf(currentLayerid) > -1 ||
+                invisiblelayers.indexOf(currentLayerid.toString()) > -1) {
+                visible = false;
             }
-        });
-    }
-    displayFn(profil) {
-        return profil ? profil.title : undefined;
-    }
-    handleFormSubmit(value) {
-        this.addPermission.emit(value);
-    }
-    buildForm() {
-        this.form = this.formBuilder.group({
-            profil: [],
-            typePermission: ['read']
-        });
-    }
-    onProfilSelected(value) {
-        this.form.setValue({
-            profil: value.name,
-            typePermission: this.form.value.typePermission
-        });
+        }
+        return visible;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextPermissionsComponent, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i2.AuthService }, { token: i3.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContextPermissionsComponent, selector: "igo-context-permissions", inputs: { context: "context", permissions: "permissions" }, outputs: { addPermission: "addPermission", removePermission: "removePermission", scopeChanged: "scopeChanged" }, ngImport: i0, template: "<div *ngIf=\"context\">\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\r\n      [(ngModel)]=\"context.scope\"\r\n      (change)=\"scopeChanged.emit(context)\"\r\n    >\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\r\n    *ngIf=\"context.scope !== 'private' && canWrite\"\r\n    [formGroup]=\"form\"\r\n    (ngSubmit)=\"handleFormSubmit(form.value)\"\r\n  >\r\n    <mat-form-field class=\"full-width\">\r\n      <input\r\n        matInput\r\n        required\r\n        [placeholder]=\"'igo.context.permission.user' | translate\"\r\n        [formControl]=\"formControl\"\r\n        [matAutocomplete]=\"auto\"\r\n      />\r\n      <mat-autocomplete\r\n        #auto=\"matAutocomplete\"\r\n        (optionSelected)=\"onProfilSelected($event.option.value)\"\r\n        [displayWith]=\"displayFn\"\r\n      >\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    <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    <div class=\"igo-form-button-group\">\r\n      <button mat-raised-button type=\"submit\" [disabled]=\"!form.valid\">\r\n        {{ 'igo.context.permission.addBtn' | translate }}\r\n      </button>\r\n    </div>\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 matListItemIcon svgIcon=\"account-outline\"></mat-icon>\r\n            <h4 matListItemTitle>\r\n              {{ permission.profilTitle }}\r\n              <small class=\"mat-typography\">{{ permission.profil }}</small>\r\n            </h4>\r\n\r\n            <div\r\n              matListItemMeta\r\n              igoStopPropagation\r\n              class=\"igo-actions-container\"\r\n            >\r\n              <button\r\n                *ngIf=\"\r\n                  canWrite ||\r\n                  permission.profil === authService.decodeToken().user.sourceId\r\n                \"\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              >\r\n                <mat-icon svgIcon=\"delete\"></mat-icon>\r\n              </button>\r\n            </div>\r\n          </mat-list-item>\r\n        </ng-template>\r\n      </igo-collapsible>\r\n    </ng-template>\r\n  </igo-list>\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}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i7$1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i7$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i7$1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i12$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i12$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i13.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i13.CollapsibleComponent, selector: "igo-collapsible", inputs: ["title", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: i13.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "pipe", type: i13.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: LayerContextDirective, deps: [{ token: i1$1.MapBrowserComponent }, { token: ContextService }, { token: i1$1.LayerService }, { token: i3.ConfigService }, { token: i1$1.StyleListService }, { token: i1$1.StyleService }, { token: i3.RouteService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: LayerContextDirective, isStandalone: true, selector: "[igoLayerContext]", inputs: { removeLayersOnContextChange: "removeLayersOnContextChange" }, providers: [HttpClientModule], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextPermissionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-context-permissions', template: "<div *ngIf=\"context\">\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\r\n      [(ngModel)]=\"context.scope\"\r\n      (change)=\"scopeChanged.emit(context)\"\r\n    >\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\r\n    *ngIf=\"context.scope !== 'private' && canWrite\"\r\n    [formGroup]=\"form\"\r\n    (ngSubmit)=\"handleFormSubmit(form.value)\"\r\n  >\r\n    <mat-form-field class=\"full-width\">\r\n      <input\r\n        matInput\r\n        required\r\n        [placeholder]=\"'igo.context.permission.user' | translate\"\r\n        [formControl]=\"formControl\"\r\n        [matAutocomplete]=\"auto\"\r\n      />\r\n      <mat-autocomplete\r\n        #auto=\"matAutocomplete\"\r\n        (optionSelected)=\"onProfilSelected($event.option.value)\"\r\n        [displayWith]=\"displayFn\"\r\n      >\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    <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    <div class=\"igo-form-button-group\">\r\n      <button mat-raised-button type=\"submit\" [disabled]=\"!form.valid\">\r\n        {{ 'igo.context.permission.addBtn' | translate }}\r\n      </button>\r\n    </div>\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 matListItemIcon svgIcon=\"account-outline\"></mat-icon>\r\n            <h4 matListItemTitle>\r\n              {{ permission.profilTitle }}\r\n              <small class=\"mat-typography\">{{ permission.profil }}</small>\r\n            </h4>\r\n\r\n            <div\r\n              matListItemMeta\r\n              igoStopPropagation\r\n              class=\"igo-actions-container\"\r\n            >\r\n              <button\r\n                *ngIf=\"\r\n                  canWrite ||\r\n                  permission.profil === authService.decodeToken().user.sourceId\r\n                \"\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              >\r\n                <mat-icon svgIcon=\"delete\"></mat-icon>\r\n              </button>\r\n            </div>\r\n          </mat-list-item>\r\n        </ng-template>\r\n      </igo-collapsible>\r\n    </ng-template>\r\n  </igo-list>\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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i2.AuthService }, { type: i3.ConfigService }]; }, propDecorators: { context: [{
-                type: Input
-            }], permissions: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: LayerContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[igoLayerContext]',
+                    standalone: true,
+                    providers: [HttpClientModule]
+                }]
+        }], ctorParameters: () => [{ type: i1$1.MapBrowserComponent }, { type: ContextService }, { type: i1$1.LayerService }, { type: i3.ConfigService }, { type: i1$1.StyleListService }, { type: i1$1.StyleService }, { type: i3.RouteService, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { removeLayersOnContextChange: [{
                 type: Input
-            }], addPermission: [{
-                type: Output
-            }], removePermission: [{
-                type: Output
-            }], scopeChanged: [{
-                type: Output
             }] } });
 
-class ContextPermissionsBindingDirective {
+class MapContextDirective {
     contextService;
-    languageService;
-    messageService;
-    cd;
+    mediaService;
     component;
-    editedContext$$;
-    onAddPermission(permission) {
-        if (!permission.profil) {
-            this.messageService.error('igo.context.contextManager.errors.addPermissionEmpty', 'igo.context.contextManager.errors.addPermissionTitle');
+    context$$;
+    get map() {
+        return this.component.map;
+    }
+    constructor(component, contextService, mediaService) {
+        this.contextService = contextService;
+        this.mediaService = mediaService;
+        this.component = component;
+    }
+    ngOnInit() {
+        this.context$$ = this.contextService.context$
+            .pipe(filter((context) => context !== undefined))
+            .subscribe((context) => this.handleContextChange(context));
+    }
+    ngOnDestroy() {
+        this.context$$.unsubscribe();
+    }
+    handleContextChange(context) {
+        if (context.map === undefined) {
             return;
         }
-        const contextId = this.component.context.id;
-        this.contextService
-            .addPermissionAssociation(contextId, permission.profil, permission.typePermission)
-            .subscribe((profils) => {
-            for (const p of profils) {
-                this.component.permissions[permission.typePermission].push(p);
+        // This creates a new ol.Map when the context changes. Doing that
+        // allows the print tool to work properly even when the map's canvas
+        // has been tainted (CORS) with the layers of another context. This could
+        // have some side effects such as unbinding all listeners on the first map.
+        // A better solution would be to create a new map (preview) before
+        // printing and avoid the tainted canvas issue. This will come later so
+        // this snippet of code is kept here in case it takes too long becomes
+        // an issue
+        // const target = this.component.map.ol.getTarget();
+        // this.component.map.ol.setTarget(undefined);
+        // this.component.map.init();
+        // this.component.map.ol.setTarget(target);
+        const viewContext = context.map.view;
+        if (!this.component.view ||
+            viewContext.keepCurrentView !== true ||
+            context.map.view.projection !== this.map.projection) {
+            this.component.view = viewContext;
+        }
+        if (this.component.map.geolocationController) {
+            this.component.map.geolocationController.updateGeolocationOptions(viewContext);
+        }
+        const controlsContext = context.map.controls;
+        if (!this.component.controls && controlsContext) {
+            if (this.mediaService.isMobile()) {
+                if (typeof controlsContext.scaleLine !== 'boolean') {
+                    const scaleLineOption = controlsContext.scaleLine;
+                    if (!scaleLineOption.minWidth) {
+                        scaleLineOption.minWidth = Math.min(64, scaleLineOption.minWidth);
+                        controlsContext.scaleLine = scaleLineOption;
+                    }
+                }
             }
-            const profil = permission.profil;
-            this.messageService.success('igo.context.permission.dialog.addMsg', 'igo.context.permission.dialog.addTitle', undefined, { value: profil });
-            this.cd.detectChanges();
-        });
+            this.component.controls = controlsContext;
+        }
     }
-    onRemovePermission(permission) {
-        const contextId = this.component.context.id;
-        this.contextService
-            .deletePermissionAssociation(contextId, permission.id)
-            .subscribe(() => {
-            const index = this.component.permissions[permission.typePermission].findIndex((p) => {
-                return p.id === permission.id;
-            });
-            this.component.permissions[permission.typePermission].splice(index, 1);
-            const profil = permission.profil;
-            this.messageService.success('igo.context.permission.dialog.deleteMsg', 'igo.context.permission.dialog.deleteTitle', undefined, { value: profil });
-            this.cd.detectChanges();
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MapContextDirective, deps: [{ token: i1$1.MapBrowserComponent }, { token: ContextService }, { token: i3.MediaService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: MapContextDirective, isStandalone: true, selector: "[igoMapContext]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MapContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[igoMapContext]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1$1.MapBrowserComponent }, { type: ContextService }, { type: i3.MediaService }] });
+
+/**
+ * @deprecated import the components/directives directly or CONTEXT_MANAGER_DIRECTIVES for the set
+ */
+class IgoContextManagerModule {
+    static forRoot() {
+        return {
+            ngModule: IgoContextManagerModule
+        };
     }
-    onScopeChanged(context) {
-        const scope = context.scope;
-        this.contextService.update(context.id, { scope }).subscribe(() => {
-            this.messageService.success('igo.context.permission.dialog.scopeChangedMsg', 'igo.context.permission.dialog.scopeChangedTitle', undefined, { value: 'igo.context.permission.scope.' + scope });
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgoContextManagerModule, imports: [ContextListComponent,
+            ContextListBindingDirective,
+            ContextItemComponent,
+            ContextFormComponent,
+            ContextEditComponent,
+            ContextEditBindingDirective,
+            ContextPermissionsComponent,
+            ContextPermissionsBindingDirective,
+            LayerContextDirective,
+            MapContextDirective], exports: [ContextListComponent,
+            ContextListBindingDirective,
+            ContextItemComponent,
+            ContextFormComponent,
+            ContextEditComponent,
+            ContextEditBindingDirective,
+            ContextPermissionsComponent,
+            ContextPermissionsBindingDirective,
+            LayerContextDirective,
+            MapContextDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextManagerModule, imports: [ContextListComponent,
+            ContextItemComponent,
+            ContextFormComponent,
+            ContextEditComponent,
+            ContextPermissionsComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextManagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ContextListComponent,
+                        ContextListBindingDirective,
+                        ContextItemComponent,
+                        ContextFormComponent,
+                        ContextEditComponent,
+                        ContextEditBindingDirective,
+                        ContextPermissionsComponent,
+                        ContextPermissionsBindingDirective,
+                        LayerContextDirective,
+                        MapContextDirective
+                    ],
+                    exports: [
+                        ContextListComponent,
+                        ContextListBindingDirective,
+                        ContextItemComponent,
+                        ContextFormComponent,
+                        ContextEditComponent,
+                        ContextEditBindingDirective,
+                        ContextPermissionsComponent,
+                        ContextPermissionsBindingDirective,
+                        LayerContextDirective,
+                        MapContextDirective
+                    ]
+                }]
+        }] });
+
+class BookmarkButtonComponent {
+    dialog;
+    contextService;
+    messageService;
+    get map() {
+        return this._map;
     }
-    constructor(component, contextService, languageService, messageService, cd) {
+    set map(value) {
+        this._map = value;
+    }
+    _map;
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value;
+    }
+    _color;
+    constructor(dialog, contextService, messageService) {
+        this.dialog = dialog;
         this.contextService = contextService;
-        this.languageService = languageService;
         this.messageService = messageService;
-        this.cd = cd;
-        this.component = component;
     }
-    ngOnInit() {
-        this.editedContext$$ = this.contextService.editedContext$.subscribe((context) => this.handleEditedContextChange(context));
+    createContext() {
+        this.dialog
+            .open(BookmarkDialogComponent, { disableClose: false })
+            .afterClosed()
+            .pipe(take(1))
+            .subscribe((title) => {
+            if (title) {
+                const context = this.contextService.getContextFromMap(this.map);
+                context.title = title;
+                this.contextService.create(context).subscribe(() => {
+                    this.messageService.success('igo.context.bookmarkButton.dialog.createMsg', 'igo.context.bookmarkButton.dialog.createTitle', undefined, { value: context.title });
+                    this.contextService.loadContext(context.uri);
+                });
+            }
+        });
     }
-    ngOnDestroy() {
-        this.editedContext$$.unsubscribe();
-        this.contextService.editedContext$.next(undefined);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BookmarkButtonComponent, deps: [{ token: i1$2.MatDialog }, { token: ContextService }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: BookmarkButtonComponent, isStandalone: true, selector: "igo-bookmark-button", inputs: { map: "map", color: "color" }, ngImport: i0, 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  >\n    <mat-icon svgIcon=\"star\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-bookmark-button-container{width:40px}:host .igo-bookmark-button-container button{background-color:#fff}:host .igo-bookmark-button-container button:hover{background-color:#efefef}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BookmarkButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-bookmark-button', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, TranslateModule], 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  >\n    <mat-icon svgIcon=\"star\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-bookmark-button-container{width:40px}:host .igo-bookmark-button-container button{background-color:#fff}:host .igo-bookmark-button-container button:hover{background-color:#efefef}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: ContextService }, { type: i3.MessageService }], propDecorators: { map: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class PoiDialogComponent {
+    dialogRef;
+    title;
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PoiDialogComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: PoiDialogComponent, isStandalone: true, selector: "igo-poi-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.context.poiButton.dialog.title' | translate }}\n</h1>\n<div mat-dialog-content>\n  <mat-form-field>\n    <input\n      matInput\n      required\n      autocomplete=\"off\"\n      [placeholder]=\"'igo.context.poiButton.dialog.placeholder' | translate\"\n      [(ngModel)]=\"title\"\n    />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button\n    mat-button\n    color=\"primary\"\n    [disabled]=\"!title\"\n    (click)=\"dialogRef.close(title)\"\n  >\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\n  </button>\n  <button mat-button (click)=\"dialogRef.close(false)\">\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PoiDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-poi-dialog', standalone: true, imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        MatDialogActions,
+                        MatButtonModule,
+                        TranslateModule
+                    ], template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.context.poiButton.dialog.title' | translate }}\n</h1>\n<div mat-dialog-content>\n  <mat-form-field>\n    <input\n      matInput\n      required\n      autocomplete=\"off\"\n      [placeholder]=\"'igo.context.poiButton.dialog.placeholder' | translate\"\n      [(ngModel)]=\"title\"\n    />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button\n    mat-button\n    color=\"primary\"\n    [disabled]=\"!title\"\n    (click)=\"dialogRef.close(title)\"\n  >\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\n  </button>\n  <button mat-button (click)=\"dialogRef.close(false)\">\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }] });
+
+class PoiService {
+    http;
+    config;
+    baseUrl;
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+        this.baseUrl = this.config.getConfig('context.url');
     }
-    handleEditedContextChange(context) {
-        this.component.context = context;
-        if (context) {
-            this.contextService
-                .getPermissions(context.id)
-                .subscribe((permissionsArray) => {
-                permissionsArray = permissionsArray || [];
-                const permissions = {
-                    read: permissionsArray.filter((p) => {
-                        return p.typePermission.toString() === 'read';
-                    }),
-                    write: permissionsArray.filter((p) => {
-                        return p.typePermission.toString() === 'write';
-                    })
-                };
-                return (this.component.permissions = permissions);
-            });
+    get() {
+        if (!this.baseUrl) {
+            return EMPTY;
         }
+        const url = this.baseUrl + '/pois';
+        return this.http.get(url);
+    }
+    delete(id) {
+        const url = this.baseUrl + '/pois/' + id;
+        return this.http.delete(url);
+    }
+    create(context) {
+        const url = this.baseUrl + '/pois';
+        return this.http.post(url, context);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextPermissionsBindingDirective, deps: [{ token: ContextPermissionsComponent, self: true }, { token: ContextService }, { token: i3.LanguageService }, { token: i3.MessageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ContextPermissionsBindingDirective, selector: "[igoContextPermissionsBinding]", host: { listeners: { "addPermission": "onAddPermission($event)", "removePermission": "onRemovePermission($event)", "scopeChanged": "onScopeChanged($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PoiService, deps: [{ token: i1.HttpClient }, { token: i3.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PoiService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextPermissionsBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[igoContextPermissionsBinding]'
-                }]
-        }], ctorParameters: function () { return [{ type: ContextPermissionsComponent, decorators: [{
-                    type: Self
-                }] }, { type: ContextService }, { type: i3.LanguageService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onAddPermission: [{
-                type: HostListener,
-                args: ['addPermission', ['$event']]
-            }], onRemovePermission: [{
-                type: HostListener,
-                args: ['removePermission', ['$event']]
-            }], onScopeChanged: [{
-                type: HostListener,
-                args: ['scopeChanged', ['$event']]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PoiService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i3.ConfigService }] });
 
-class LayerContextDirective {
-    component;
-    contextService;
-    layerService;
-    configService;
-    styleListService;
-    styleService;
-    route;
-    context$$;
-    queryParams;
-    contextLayers = [];
-    removeLayersOnContextChange = true;
+class PoiButtonComponent {
+    dialog;
+    authService;
+    poiService;
+    messageService;
+    languageService;
+    confirmDialogService;
     get map() {
-        return this.component.map;
+        return this._map;
     }
-    constructor(component, contextService, layerService, configService, styleListService, styleService, route) {
-        this.component = component;
-        this.contextService = contextService;
-        this.layerService = layerService;
-        this.configService = configService;
-        this.styleListService = styleListService;
-        this.styleService = styleService;
-        this.route = route;
+    set map(value) {
+        this._map = value;
+    }
+    _map;
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value;
+    }
+    _color;
+    pois;
+    authenticate$$;
+    constructor(dialog, authService, poiService, messageService, languageService, confirmDialogService) {
+        this.dialog = dialog;
+        this.authService = authService;
+        this.poiService = poiService;
+        this.messageService = messageService;
+        this.languageService = languageService;
+        this.confirmDialogService = confirmDialogService;
     }
     ngOnInit() {
-        this.context$$ = this.contextService.context$
-            .pipe(filter((context) => context !== undefined))
-            .subscribe((context) => this.handleContextChange(context));
-        if (this.route &&
-            this.route.options.visibleOnLayersKey &&
-            this.route.options.visibleOffLayersKey &&
-            this.route.options.contextKey) {
-            this.route.queryParams
-                .pipe(first((params) => !ObjectUtils.isEmpty(params)))
-                .subscribe((params) => {
-                this.queryParams = params;
-            });
-        }
+        this.authenticate$$ = this.authService.authenticate$.subscribe((auth) => {
+            if (auth) {
+                this.getPois();
+            }
+        });
     }
     ngOnDestroy() {
-        this.context$$.unsubscribe();
+        this.authenticate$$.unsubscribe();
     }
-    handleContextChange(context) {
-        if (context.layers === undefined) {
-            return;
-        }
-        if (this.removeLayersOnContextChange === true) {
-            this.map.removeAllLayers();
-        }
-        else {
-            this.map.removeLayers(this.contextLayers);
+    deletePoi(poi) {
+        if (poi && poi.id) {
+            this.confirmDialogService
+                .open(this.languageService.translate.instant('igo.context.poiButton.dialog.confirmDelete'))
+                .subscribe((confirm) => {
+                if (confirm) {
+                    this.poiService.delete(poi.id).subscribe(() => {
+                        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';
+                        this.messageService.showError(err);
+                    });
+                }
+            });
         }
-        this.contextLayers = [];
-        const layersAndIndex$ = merge(...context.layers.map((layerOptions, index) => {
-            return this.layerService.createAsyncLayer(layerOptions, context.uri);
-        }));
-        layersAndIndex$
-            .pipe(buffer(layersAndIndex$.pipe(debounceTime(500))))
-            .subscribe((layers) => {
-            this.handleAddLayers(layers);
-            if (context.extraFeatures) {
-                context.extraFeatures.forEach((featureCollection) => {
-                    const importExportOptions = this.configService.getConfig('importExport');
-                    if (!importExportOptions?.importWithStyle) {
-                        addImportedFeaturesToMap(featureCollection, this.map);
-                    }
-                    else {
-                        addImportedFeaturesStyledToMap(featureCollection, this.map, this.styleListService, this.styleService);
-                    }
+    }
+    getPois() {
+        this.poiService
+            .get()
+            .pipe(take(1))
+            .subscribe((rep) => {
+            this.pois = rep;
+        }, (err) => {
+            err.error.title = 'GET Pois';
+            this.messageService.showError(err);
+        });
+    }
+    createPoi() {
+        const view = this.map.ol.getView();
+        const proj = view.getProjection().getCode();
+        const center = new olPoint(view.getCenter()).transform(proj, 'EPSG:4326');
+        const poi = {
+            title: '',
+            x: center.getCoordinates()[0],
+            y: center.getCoordinates()[1],
+            zoom: view.getZoom()
+        };
+        this.dialog
+            .open(PoiDialogComponent, { disableClose: false })
+            .afterClosed()
+            .subscribe((title) => {
+            if (title) {
+                poi.title = title;
+                this.poiService.create(poi).subscribe((newPoi) => {
+                    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) => {
+                    err.error.title = 'POST Pois';
+                    this.messageService.showError(err);
                 });
             }
         });
-        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;
+    zoomOnPoi(id) {
+        const poi = this.pois.find((p) => p.id === id);
+        const center = olproj.fromLonLat([Number(poi.x), Number(poi.y)], this.map.projection);
+        this.map.ol.getView().animate({
+            center,
+            zoom: poi.zoom,
+            duration: 500,
+            easing: oleasing.easeOut
         });
-        this.contextLayers.concat(layers);
-        this.map.addLayers(layers);
-    }
-    computeLayerVisibilityFromUrl(layer) {
-        const params = this.queryParams;
-        const currentContext = this.contextService.context$.value.uri;
-        const currentLayerid = layer.id;
-        let visible = layer.visible;
-        if (!params || !currentLayerid) {
-            return visible;
-        }
-        const contextParams = params[this.route.options.contextKey];
-        if (contextParams === currentContext || !contextParams) {
-            let visibleOnLayersParams = '';
-            let visibleOffLayersParams = '';
-            let visiblelayers = [];
-            let invisiblelayers = [];
-            if (this.route.options.visibleOnLayersKey &&
-                params[this.route.options.visibleOnLayersKey]) {
-                visibleOnLayersParams =
-                    params[this.route.options.visibleOnLayersKey];
-            }
-            if (this.route.options.visibleOffLayersKey &&
-                params[this.route.options.visibleOffLayersKey]) {
-                visibleOffLayersParams =
-                    params[this.route.options.visibleOffLayersKey];
-            }
-            /* This order is important because to control whichever
-             the order of * param. First whe open and close everything.*/
-            if (visibleOnLayersParams === '*') {
-                visible = true;
-            }
-            if (visibleOffLayersParams === '*') {
-                visible = false;
-            }
-            // After, managing named layer by id (context.json OR id from datasource)
-            visiblelayers = visibleOnLayersParams.split(',');
-            invisiblelayers = visibleOffLayersParams.split(',');
-            if (visiblelayers.indexOf(currentLayerid) > -1 ||
-                visiblelayers.indexOf(currentLayerid.toString()) > -1) {
-                visible = true;
-            }
-            if (invisiblelayers.indexOf(currentLayerid) > -1 ||
-                invisiblelayers.indexOf(currentLayerid.toString()) > -1) {
-                visible = false;
-            }
-        }
-        return visible;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerContextDirective, deps: [{ token: i1$1.MapBrowserComponent }, { token: ContextService }, { token: i1$1.LayerService }, { token: i3.ConfigService }, { token: i1$1.StyleListService }, { token: i1$1.StyleService }, { token: i3.RouteService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LayerContextDirective, selector: "[igoLayerContext]", inputs: { removeLayersOnContextChange: "removeLayersOnContextChange" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PoiButtonComponent, deps: [{ token: i1$2.MatDialog }, { token: i2.AuthService }, { token: PoiService }, { token: i3.MessageService }, { token: i3.LanguageService }, { token: i5$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: PoiButtonComponent, isStandalone: true, selector: "igo-poi-button", inputs: { map: "map", color: "color" }, ngImport: i0, template: "<mat-select\n  [placeholder]=\"'igo.context.poiButton.placeholder' | translate\"\n  floatPlaceholder=\"never\"\n>\n  <mat-option (click)=\"createPoi()\" class=\"poi-option\">\n    <div class=\"titlePoi\">\n      {{ 'igo.context.poiButton.create' | translate }}\n    </div>\n    <button\n      igoStopPropagation\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"createPoi()\"\n    >\n      <mat-icon svgIcon=\"plus-circle\"></mat-icon>\n    </button>\n  </mat-option>\n  <mat-divider></mat-divider>\n  <mat-option\n    *ngFor=\"let poi of pois\"\n    class=\"poi-option\"\n    [value]=\"poi.id\"\n    (click)=\"zoomOnPoi(poi.id)\"\n  >\n    <div class=\"titlePoi\">{{ poi.title }}</div>\n    <button\n      mat-icon-button\n      igoStopPropagation\n      color=\"warn\"\n      (click)=\"deletePoi(poi)\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </mat-option>\n</mat-select>\n", styles: [":host{background-color:#fff;padding:0 8px;height:100%}mat-select{width:150px;height:100%}mat-select ::ng-deep .mat-mdc-select-trigger{height:100%}::ng-deep .poi-option .mdc-list-item__primary-text{display:flex;justify-content:space-between;align-items:center;flex:1;overflow:visible}::ng-deep .poi-option button{margin-right:-16px}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerContextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[igoLayerContext]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.MapBrowserComponent }, { type: ContextService }, { type: i1$1.LayerService }, { type: i3.ConfigService }, { type: i1$1.StyleListService }, { type: i1$1.StyleService }, { type: i3.RouteService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { removeLayersOnContextChange: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PoiButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-poi-button', standalone: true, imports: [
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatButtonModule,
+                        StopPropagationDirective,
+                        MatIconModule,
+                        MatDividerModule,
+                        NgFor,
+                        TranslateModule
+                    ], template: "<mat-select\n  [placeholder]=\"'igo.context.poiButton.placeholder' | translate\"\n  floatPlaceholder=\"never\"\n>\n  <mat-option (click)=\"createPoi()\" class=\"poi-option\">\n    <div class=\"titlePoi\">\n      {{ 'igo.context.poiButton.create' | translate }}\n    </div>\n    <button\n      igoStopPropagation\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"createPoi()\"\n    >\n      <mat-icon svgIcon=\"plus-circle\"></mat-icon>\n    </button>\n  </mat-option>\n  <mat-divider></mat-divider>\n  <mat-option\n    *ngFor=\"let poi of pois\"\n    class=\"poi-option\"\n    [value]=\"poi.id\"\n    (click)=\"zoomOnPoi(poi.id)\"\n  >\n    <div class=\"titlePoi\">{{ poi.title }}</div>\n    <button\n      mat-icon-button\n      igoStopPropagation\n      color=\"warn\"\n      (click)=\"deletePoi(poi)\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </mat-option>\n</mat-select>\n", styles: [":host{background-color:#fff;padding:0 8px;height:100%}mat-select{width:150px;height:100%}mat-select ::ng-deep .mat-mdc-select-trigger{height:100%}::ng-deep .poi-option .mdc-list-item__primary-text{display:flex;justify-content:space-between;align-items:center;flex:1;overflow:visible}::ng-deep .poi-option button{margin-right:-16px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: i2.AuthService }, { type: PoiService }, { type: i3.MessageService }, { type: i3.LanguageService }, { type: i5$2.ConfirmDialogService }], propDecorators: { map: [{
+                type: Input
+            }], color: [{
                 type: Input
             }] } });
 
-class MapContextDirective {
-    contextService;
-    mediaService;
-    component;
-    context$$;
+function userButtonSlideInOut() {
+    return trigger('userButtonState', [
+        state('collapse', style({
+            width: '0',
+            overflow: 'hidden',
+            display: 'none'
+        })),
+        state('expand', style({
+            overflow: 'hidden',
+            display: 'display'
+        })),
+        transition('collapse => expand', animate('200ms')),
+        transition('expand => collapse', animate('200ms'))
+    ]);
+}
+
+class UserDialogComponent {
+    dialogRef;
+    auth;
+    storageService;
+    user;
+    exp;
+    constructor(dialogRef, auth, storageService) {
+        this.dialogRef = dialogRef;
+        this.auth = auth;
+        this.storageService = storageService;
+        const decodeToken = this.auth.decodeToken();
+        this.user = decodeToken?.user;
+        this.exp = new Date(decodeToken.exp * 1000).toLocaleString();
+    }
+    clearPreferences() {
+        this.storageService.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UserDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i2.AuthService }, { token: i3.StorageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UserDialogComponent, isStandalone: true, selector: "igo-user-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.context.userButton.infoTitle' | translate }}\n</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <p>\n    {{ 'igo.context.userButton.dialog.user' | translate }}: {{ user.sourceId }}\n  </p>\n  <p>\n    {{ 'igo.context.userButton.dialog.email' | translate }}: {{ user.email }}\n  </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\" (click)=\"dialogRef.close(false)\">\n    OK\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UserDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-user-dialog', standalone: true, imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatButtonModule,
+                        MatDialogActions,
+                        TranslateModule
+                    ], template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.context.userButton.infoTitle' | translate }}\n</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <p>\n    {{ 'igo.context.userButton.dialog.user' | translate }}: {{ user.sourceId }}\n  </p>\n  <p>\n    {{ 'igo.context.userButton.dialog.email' | translate }}: {{ user.email }}\n  </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\" (click)=\"dialogRef.close(false)\">\n    OK\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: i2.AuthService }, { type: i3.StorageService }] });
+
+class UserButtonComponent {
+    dialog;
+    config;
+    auth;
     get map() {
-        return this.component.map;
+        return this._map;
     }
-    constructor(component, contextService, mediaService) {
-        this.contextService = contextService;
-        this.mediaService = mediaService;
-        this.component = component;
+    set map(value) {
+        this._map = value;
     }
-    ngOnInit() {
-        this.context$$ = this.contextService.context$
-            .pipe(filter((context) => context !== undefined))
-            .subscribe((context) => this.handleContextChange(context));
+    _map;
+    get color() {
+        return this._color;
     }
-    ngOnDestroy() {
-        this.context$$.unsubscribe();
+    set color(value) {
+        this._color = value;
     }
-    handleContextChange(context) {
-        if (context.map === undefined) {
-            return;
-        }
-        // This creates a new ol.Map when the context changes. Doing that
-        // allows the print tool to work properly even when the map's canvas
-        // has been tainted (CORS) with the layers of another context. This could
-        // have some side effects such as unbinding all listeners on the first map.
-        // A better solution would be to create a new map (preview) before
-        // printing and avoid the tainted canvas issue. This will come later so
-        // this snippet of code is kept here in case it takes too long becomes
-        // an issue
-        // const target = this.component.map.ol.getTarget();
-        // this.component.map.ol.setTarget(undefined);
-        // this.component.map.init();
-        // this.component.map.ol.setTarget(target);
-        const viewContext = context.map.view;
-        if (!this.component.view ||
-            viewContext.keepCurrentView !== true ||
-            context.map.view.projection !== this.map.projection) {
-            this.component.view = viewContext;
-        }
-        if (this.component.map.geolocationController) {
-            this.component.map.geolocationController.updateGeolocationOptions(viewContext);
+    _color;
+    expand = false;
+    visible = false;
+    hasApi = false;
+    constructor(dialog, config, auth) {
+        this.dialog = dialog;
+        this.config = config;
+        this.auth = auth;
+        this.visible = this.config.getConfig('auth') ? true : false;
+        this.hasApi = this.config.getConfig('context.url') !== undefined;
+    }
+    accountClick() {
+        if (this.auth.authenticated) {
+            this.expand = !this.expand;
         }
-        const controlsContext = context.map.controls;
-        if (!this.component.controls && controlsContext) {
-            if (this.mediaService.isMobile()) {
-                if (typeof controlsContext.scaleLine !== 'boolean') {
-                    const scaleLineOption = controlsContext.scaleLine;
-                    if (!scaleLineOption.minWidth) {
-                        scaleLineOption.minWidth = Math.min(64, scaleLineOption.minWidth);
-                        controlsContext.scaleLine = scaleLineOption;
-                    }
-                }
-            }
-            this.component.controls = controlsContext;
+        else {
+            this.auth.logout();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, deps: [{ token: i1$1.MapBrowserComponent }, { token: ContextService }, { token: i3.MediaService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MapContextDirective, selector: "[igoMapContext]", ngImport: i0 });
+    logout() {
+        this.expand = false;
+        this.auth.logout();
+    }
+    infoUser() {
+        this.dialog.open(UserDialogComponent, { disableClose: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UserButtonComponent, deps: [{ token: i1$2.MatDialog }, { token: i3.ConfigService }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UserButtonComponent, isStandalone: true, selector: "igo-user-button", inputs: { map: "map", color: "color" }, ngImport: i0, template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\n  <div\n    class=\"igo-user-button-more-container\"\n    [@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    >\n      <mat-icon svgIcon=\"information-outline\"></mat-icon>\n    </button>\n\n    <button\n      mat-icon-button\n      [matTooltip]=\"'igo.context.userButton.logout' | translate\"\n      matTooltipPosition=\"above\"\n      [color]=\"color\"\n      (click)=\"logout()\"\n    >\n      <mat-icon svgIcon=\"power\"></mat-icon>\n    </button>\n  </div>\n\n  <button\n    mat-icon-button\n    [color]=\"auth.authenticated ? color : 'warn'\"\n    (click)=\"accountClick()\"\n  >\n    <mat-icon svgIcon=\"account-box\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-user-button-container{display:flex;gap:4px}:host .igo-user-button-container button{background-color:#fff}:host .igo-user-button-container button:hover{background-color:#efefef}:host .igo-user-button-more-container{display:flex;gap:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoiButtonComponent, selector: "igo-poi-button", inputs: ["map", "color"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [userButtonSlideInOut()] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[igoMapContext]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.MapBrowserComponent }, { type: ContextService }, { type: i3.MediaService }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UserButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-user-button', animations: [userButtonSlideInOut()], standalone: true, imports: [
+                        NgIf,
+                        PoiButtonComponent,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        TranslateModule
+                    ], template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\n  <div\n    class=\"igo-user-button-more-container\"\n    [@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    >\n      <mat-icon svgIcon=\"information-outline\"></mat-icon>\n    </button>\n\n    <button\n      mat-icon-button\n      [matTooltip]=\"'igo.context.userButton.logout' | translate\"\n      matTooltipPosition=\"above\"\n      [color]=\"color\"\n      (click)=\"logout()\"\n    >\n      <mat-icon svgIcon=\"power\"></mat-icon>\n    </button>\n  </div>\n\n  <button\n    mat-icon-button\n    [color]=\"auth.authenticated ? color : 'warn'\"\n    (click)=\"accountClick()\"\n  >\n    <mat-icon svgIcon=\"account-box\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-user-button-container{display:flex;gap:4px}:host .igo-user-button-container button{background-color:#fff}:host .igo-user-button-container button:hover{background-color:#efefef}:host .igo-user-button-more-container{display:flex;gap:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: i3.ConfigService }, { type: i2.AuthService }], propDecorators: { map: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
 
-const CONTEXT_DIRECTIVES = [MapContextDirective, LayerContextDirective];
-class IgoContextManagerModule {
+/**
+ * @deprecated import the components/directives directly or CONTEXT_MAP_BUTTON_DIRECTIVES for the set
+ */
+class IgoContextMapButtonModule {
     static forRoot() {
         return {
-            ngModule: IgoContextManagerModule
+            ngModule: IgoContextMapButtonModule
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IgoContextManagerModule, declarations: [ContextListComponent,
-            ContextListBindingDirective,
-            ContextItemComponent,
-            ContextFormComponent,
-            ContextEditComponent,
-            ContextEditBindingDirective,
-            ContextPermissionsComponent,
-            ContextPermissionsBindingDirective, MapContextDirective, LayerContextDirective], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatIconModule,
-            MatButtonModule,
-            MatTooltipModule,
-            MatListModule,
-            MatCheckboxModule,
-            MatRadioModule,
-            MatDialogModule,
-            MatMenuModule,
-            MatOptionModule,
-            MatAutocompleteModule,
-            IgoAuthModule,
-            IgoListModule,
-            IgoKeyValueModule,
-            IgoCollapsibleModule,
-            IgoStopPropagationModule,
-            IgoLanguageModule,
-            IgoContextImportExportModule,
-            IgoContextMapButtonModule,
-            IgoActionbarModule], exports: [ContextListComponent,
-            ContextListBindingDirective,
-            ContextItemComponent,
-            ContextFormComponent,
-            ContextEditComponent,
-            ContextEditBindingDirective,
-            ContextPermissionsComponent,
-            ContextPermissionsBindingDirective, MapContextDirective, LayerContextDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextManagerModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatIconModule,
-            MatButtonModule,
-            MatTooltipModule,
-            MatListModule,
-            MatCheckboxModule,
-            MatRadioModule,
-            MatDialogModule,
-            MatMenuModule,
-            MatOptionModule,
-            MatAutocompleteModule,
-            IgoAuthModule,
-            IgoListModule,
-            IgoKeyValueModule,
-            IgoCollapsibleModule,
-            IgoStopPropagationModule,
-            IgoLanguageModule,
-            IgoContextImportExportModule,
-            IgoContextMapButtonModule,
-            IgoActionbarModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextMapButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgoContextMapButtonModule, imports: [BookmarkButtonComponent,
+            BookmarkDialogComponent,
+            PoiButtonComponent,
+            UserButtonComponent], exports: [BookmarkButtonComponent,
+            PoiButtonComponent,
+            UserButtonComponent,
+            BookmarkDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextMapButtonModule, providers: [PoiService], imports: [BookmarkButtonComponent,
+            BookmarkDialogComponent,
+            PoiButtonComponent,
+            UserButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextManagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextMapButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatTooltipModule,
-                        MatListModule,
-                        MatCheckboxModule,
-                        MatRadioModule,
-                        MatDialogModule,
-                        MatMenuModule,
-                        MatOptionModule,
-                        MatAutocompleteModule,
-                        IgoAuthModule,
-                        IgoListModule,
-                        IgoKeyValueModule,
-                        IgoCollapsibleModule,
-                        IgoStopPropagationModule,
-                        IgoLanguageModule,
-                        IgoContextImportExportModule,
-                        IgoContextMapButtonModule,
-                        IgoActionbarModule
+                        BookmarkButtonComponent,
+                        BookmarkDialogComponent,
+                        PoiButtonComponent,
+                        UserButtonComponent
                     ],
                     exports: [
-                        ContextListComponent,
-                        ContextListBindingDirective,
-                        ContextItemComponent,
-                        ContextFormComponent,
-                        ContextEditComponent,
-                        ContextEditBindingDirective,
-                        ContextPermissionsComponent,
-                        ContextPermissionsBindingDirective,
-                        ...CONTEXT_DIRECTIVES
+                        BookmarkButtonComponent,
+                        PoiButtonComponent,
+                        UserButtonComponent,
+                        BookmarkDialogComponent
                     ],
-                    declarations: [
-                        ContextListComponent,
-                        ContextListBindingDirective,
-                        ContextItemComponent,
-                        ContextFormComponent,
-                        ContextEditComponent,
-                        ContextEditBindingDirective,
-                        ContextPermissionsComponent,
-                        ContextPermissionsBindingDirective,
-                        ...CONTEXT_DIRECTIVES
-                    ]
+                    providers: [PoiService]
                 }]
         }] });
 
@@ -3230,17 +3204,17 @@ class ShareMapService {
         }
         return addedLayersQueryParams;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapService, deps: [{ token: ContextService }, { token: i3.RouteService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapService, deps: [{ token: ContextService }, { token: i3.RouteService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: i3.RouteService, decorators: [{
+        }], ctorParameters: () => [{ type: ContextService }, { type: i3.RouteService, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }] });
 
 class ShareMapApiComponent {
     languageService;
@@ -3307,13 +3281,23 @@ class ShareMapApiComponent {
             uri: [id]
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapApiComponent, deps: [{ token: i3.LanguageService }, { token: i3.MessageService }, { token: i2.AuthService }, { token: ShareMapService }, { token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShareMapApiComponent, selector: "igo-share-map-api", inputs: { map: "map" }, ngImport: i0, template: "<form class=\"igo-form\" [formGroup]=\"form\" (ngSubmit)=\"createUrl(form.value)\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        required\r\n        [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\r\n        formControlName=\"title\"\r\n      />\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\r\n          matInput\r\n          required\r\n          [readonly]=\"!userId\"\r\n          [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\r\n          formControlName=\"uri\"\r\n        />\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\r\n      *ngIf=\"!url\"\r\n      mat-raised-button\r\n      type=\"submit\"\r\n      [disabled]=\"!form.valid\"\r\n    >\r\n      {{ 'igo.context.shareMap.button' | translate }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"url\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"updateContextShared(form.value)\"\r\n    >\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\r\n      #textArea\r\n      matInput\r\n      readonly\r\n      rows=\"3\"\r\n      class=\"textAreaWithButton\"\r\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\r\n      [value]=\"url\"\r\n    ></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    >\r\n      <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n  <div></div>\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"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapApiComponent, deps: [{ token: i3.LanguageService }, { token: i3.MessageService }, { token: i2.AuthService }, { token: ShareMapService }, { token: i4.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ShareMapApiComponent, isStandalone: true, selector: "igo-share-map-api", inputs: { map: "map" }, ngImport: i0, template: "<form class=\"igo-form\" [formGroup]=\"form\" (ngSubmit)=\"createUrl(form.value)\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        required\n        [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\n        formControlName=\"title\"\n      />\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\n          matInput\n          required\n          [readonly]=\"!userId\"\n          [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\n          formControlName=\"uri\"\n        />\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\n      *ngIf=\"!url\"\n      mat-raised-button\n      type=\"submit\"\n      [disabled]=\"!form.valid\"\n    >\n      {{ 'igo.context.shareMap.button' | translate }}\n    </button>\n    <button\n      *ngIf=\"url\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"updateContextShared(form.value)\"\n    >\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\n      #textArea\n      matInput\n      readonly\n      rows=\"3\"\n      class=\"textAreaWithButton\"\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\n      [value]=\"url\"\n    ></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    >\n      <mat-icon svgIcon=\"content-copy\"></mat-icon>\n    </button>\n  </mat-form-field>\n  <div></div>\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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapApiComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapApiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-share-map-api', template: "<form class=\"igo-form\" [formGroup]=\"form\" (ngSubmit)=\"createUrl(form.value)\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        required\r\n        [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\r\n        formControlName=\"title\"\r\n      />\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\r\n          matInput\r\n          required\r\n          [readonly]=\"!userId\"\r\n          [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\r\n          formControlName=\"uri\"\r\n        />\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\r\n      *ngIf=\"!url\"\r\n      mat-raised-button\r\n      type=\"submit\"\r\n      [disabled]=\"!form.valid\"\r\n    >\r\n      {{ 'igo.context.shareMap.button' | translate }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"url\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"updateContextShared(form.value)\"\r\n    >\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\r\n      #textArea\r\n      matInput\r\n      readonly\r\n      rows=\"3\"\r\n      class=\"textAreaWithButton\"\r\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\r\n      [value]=\"url\"\r\n    ></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    >\r\n      <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n  <div></div>\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"] }]
-        }], ctorParameters: function () { return [{ type: i3.LanguageService }, { type: i3.MessageService }, { type: i2.AuthService }, { type: ShareMapService }, { type: i1$2.UntypedFormBuilder }]; }, propDecorators: { map: [{
+            args: [{ selector: 'igo-share-map-api', standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        NgIf,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        TranslateModule
+                    ], template: "<form class=\"igo-form\" [formGroup]=\"form\" (ngSubmit)=\"createUrl(form.value)\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        required\n        [placeholder]=\"'igo.context.contextManager.form.title' | translate\"\n        formControlName=\"title\"\n      />\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\n          matInput\n          required\n          [readonly]=\"!userId\"\n          [placeholder]=\"'igo.context.contextManager.form.uri' | translate\"\n          formControlName=\"uri\"\n        />\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\n      *ngIf=\"!url\"\n      mat-raised-button\n      type=\"submit\"\n      [disabled]=\"!form.valid\"\n    >\n      {{ 'igo.context.shareMap.button' | translate }}\n    </button>\n    <button\n      *ngIf=\"url\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"updateContextShared(form.value)\"\n    >\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\n      #textArea\n      matInput\n      readonly\n      rows=\"3\"\n      class=\"textAreaWithButton\"\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\n      [value]=\"url\"\n    ></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    >\n      <mat-icon svgIcon=\"content-copy\"></mat-icon>\n    </button>\n  </mat-form-field>\n  <div></div>\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"] }]
+        }], ctorParameters: () => [{ type: i3.LanguageService }, { type: i3.MessageService }, { type: i2.AuthService }, { type: ShareMapService }, { type: i4.UntypedFormBuilder }], propDecorators: { map: [{
                 type: Input
             }] } });
 
@@ -3357,13 +3341,21 @@ class ShareMapUrlComponent {
             this.messageService.success('igo.context.shareMap.dialog.copyMsg', 'igo.context.shareMap.dialog.copyTitle');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapUrlComponent, deps: [{ token: i3.MessageService }, { token: ShareMapService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShareMapUrlComponent, selector: "igo-share-map-url", inputs: { map: "map" }, ngImport: i0, template: "<div class=\"igo-input-container linkToShare\">\r\n  <mat-form-field>\r\n    <textarea\r\n      #textArea\r\n      matInput\r\n      readonly\r\n      rows=\"3\"\r\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\r\n      [value]=\"url\"\r\n    ></textarea>\r\n  </mat-form-field>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button mat-raised-button (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\r\n        *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate) === ''\"\r\n      >\r\n        <h4 *ngIf=\"('igo.context.shareMap.included' | translate) !== ''\">\r\n          {{ 'igo.context.shareMap.included' | translate }}\r\n        </h4>\r\n        <ul>\r\n          <li *ngIf=\"('igo.context.shareMap.context' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.context' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.center' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.center' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.zoom' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.zoom' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.addedLayers' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.addedLayers' | translate }}\r\n          </li>\r\n          <li\r\n            *ngIf=\"('igo.context.shareMap.visibleInvisible' | translate) !== ''\"\r\n          >\r\n            {{ 'igo.context.shareMap.visibleInvisible' | translate }}\r\n          </li>\r\n        </ul>\r\n\r\n        <h4 *ngIf=\"('igo.context.shareMap.excluded' | translate) !== ''\">\r\n          {{ 'igo.context.shareMap.excluded' | translate }}\r\n        </h4>\r\n        <ul>\r\n          <li *ngIf=\"('igo.context.shareMap.order' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.order' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.opacity' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.opacity' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.filterOgc' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.filterOgc' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.filterTime' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.filterTime' | translate }}\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      <igo-custom-html\r\n        class=\"shareCustomPadding\"\r\n        *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate) !== ''\"\r\n        class=\"mat-typography\"\r\n        [html]=\"'igo.context.shareMap.htmlClarifications' | translate\"\r\n      >\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"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i13.CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapUrlComponent, deps: [{ token: i3.MessageService }, { token: ShareMapService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ShareMapUrlComponent, isStandalone: true, selector: "igo-share-map-url", inputs: { map: "map" }, ngImport: i0, template: "<div class=\"igo-input-container linkToShare\">\n  <mat-form-field>\n    <textarea\n      #textArea\n      matInput\n      readonly\n      rows=\"3\"\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\n      [value]=\"url\"\n    ></textarea>\n  </mat-form-field>\n\n  <div class=\"igo-form-button-group\">\n    <button mat-raised-button (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\n        *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate) === ''\"\n      >\n        <h4 *ngIf=\"('igo.context.shareMap.included' | translate) !== ''\">\n          {{ 'igo.context.shareMap.included' | translate }}\n        </h4>\n        <ul>\n          <li *ngIf=\"('igo.context.shareMap.context' | translate) !== ''\">\n            {{ 'igo.context.shareMap.context' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.center' | translate) !== ''\">\n            {{ 'igo.context.shareMap.center' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.zoom' | translate) !== ''\">\n            {{ 'igo.context.shareMap.zoom' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.addedLayers' | translate) !== ''\">\n            {{ 'igo.context.shareMap.addedLayers' | translate }}\n          </li>\n          <li\n            *ngIf=\"('igo.context.shareMap.visibleInvisible' | translate) !== ''\"\n          >\n            {{ 'igo.context.shareMap.visibleInvisible' | translate }}\n          </li>\n        </ul>\n\n        <h4 *ngIf=\"('igo.context.shareMap.excluded' | translate) !== ''\">\n          {{ 'igo.context.shareMap.excluded' | translate }}\n        </h4>\n        <ul>\n          <li *ngIf=\"('igo.context.shareMap.order' | translate) !== ''\">\n            {{ 'igo.context.shareMap.order' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.opacity' | translate) !== ''\">\n            {{ 'igo.context.shareMap.opacity' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.filterOgc' | translate) !== ''\">\n            {{ 'igo.context.shareMap.filterOgc' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.filterTime' | translate) !== ''\">\n            {{ 'igo.context.shareMap.filterTime' | translate }}\n          </li>\n        </ul>\n      </div>\n      <igo-custom-html\n        class=\"shareCustomPadding\"\n        *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate) !== ''\"\n        class=\"mat-typography\"\n        [html]=\"'igo.context.shareMap.htmlClarifications' | translate\"\n      >\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"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapUrlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapUrlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-share-map-url', template: "<div class=\"igo-input-container linkToShare\">\r\n  <mat-form-field>\r\n    <textarea\r\n      #textArea\r\n      matInput\r\n      readonly\r\n      rows=\"3\"\r\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\r\n      [value]=\"url\"\r\n    ></textarea>\r\n  </mat-form-field>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button mat-raised-button (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\r\n        *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate) === ''\"\r\n      >\r\n        <h4 *ngIf=\"('igo.context.shareMap.included' | translate) !== ''\">\r\n          {{ 'igo.context.shareMap.included' | translate }}\r\n        </h4>\r\n        <ul>\r\n          <li *ngIf=\"('igo.context.shareMap.context' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.context' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.center' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.center' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.zoom' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.zoom' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.addedLayers' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.addedLayers' | translate }}\r\n          </li>\r\n          <li\r\n            *ngIf=\"('igo.context.shareMap.visibleInvisible' | translate) !== ''\"\r\n          >\r\n            {{ 'igo.context.shareMap.visibleInvisible' | translate }}\r\n          </li>\r\n        </ul>\r\n\r\n        <h4 *ngIf=\"('igo.context.shareMap.excluded' | translate) !== ''\">\r\n          {{ 'igo.context.shareMap.excluded' | translate }}\r\n        </h4>\r\n        <ul>\r\n          <li *ngIf=\"('igo.context.shareMap.order' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.order' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.opacity' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.opacity' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.filterOgc' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.filterOgc' | translate }}\r\n          </li>\r\n          <li *ngIf=\"('igo.context.shareMap.filterTime' | translate) !== ''\">\r\n            {{ 'igo.context.shareMap.filterTime' | translate }}\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      <igo-custom-html\r\n        class=\"shareCustomPadding\"\r\n        *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate) !== ''\"\r\n        class=\"mat-typography\"\r\n        [html]=\"'igo.context.shareMap.htmlClarifications' | translate\"\r\n      >\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"] }]
-        }], ctorParameters: function () { return [{ type: i3.MessageService }, { type: ShareMapService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { map: [{
+            args: [{ selector: 'igo-share-map-url', standalone: true, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        NgIf,
+                        CustomHtmlComponent,
+                        TranslateModule
+                    ], template: "<div class=\"igo-input-container linkToShare\">\n  <mat-form-field>\n    <textarea\n      #textArea\n      matInput\n      readonly\n      rows=\"3\"\n      [placeholder]=\"'igo.context.shareMap.placeholderLink' | translate\"\n      [value]=\"url\"\n    ></textarea>\n  </mat-form-field>\n\n  <div class=\"igo-form-button-group\">\n    <button mat-raised-button (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\n        *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate) === ''\"\n      >\n        <h4 *ngIf=\"('igo.context.shareMap.included' | translate) !== ''\">\n          {{ 'igo.context.shareMap.included' | translate }}\n        </h4>\n        <ul>\n          <li *ngIf=\"('igo.context.shareMap.context' | translate) !== ''\">\n            {{ 'igo.context.shareMap.context' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.center' | translate) !== ''\">\n            {{ 'igo.context.shareMap.center' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.zoom' | translate) !== ''\">\n            {{ 'igo.context.shareMap.zoom' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.addedLayers' | translate) !== ''\">\n            {{ 'igo.context.shareMap.addedLayers' | translate }}\n          </li>\n          <li\n            *ngIf=\"('igo.context.shareMap.visibleInvisible' | translate) !== ''\"\n          >\n            {{ 'igo.context.shareMap.visibleInvisible' | translate }}\n          </li>\n        </ul>\n\n        <h4 *ngIf=\"('igo.context.shareMap.excluded' | translate) !== ''\">\n          {{ 'igo.context.shareMap.excluded' | translate }}\n        </h4>\n        <ul>\n          <li *ngIf=\"('igo.context.shareMap.order' | translate) !== ''\">\n            {{ 'igo.context.shareMap.order' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.opacity' | translate) !== ''\">\n            {{ 'igo.context.shareMap.opacity' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.filterOgc' | translate) !== ''\">\n            {{ 'igo.context.shareMap.filterOgc' | translate }}\n          </li>\n          <li *ngIf=\"('igo.context.shareMap.filterTime' | translate) !== ''\">\n            {{ 'igo.context.shareMap.filterTime' | translate }}\n          </li>\n        </ul>\n      </div>\n      <igo-custom-html\n        class=\"shareCustomPadding\"\n        *ngIf=\"('igo.context.shareMap.htmlClarifications' | translate) !== ''\"\n        class=\"mat-typography\"\n        [html]=\"'igo.context.shareMap.htmlClarifications' | translate\"\n      >\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"] }]
+        }], ctorParameters: () => [{ type: i3.MessageService }, { type: ShareMapService }, { type: i0.ChangeDetectorRef }], propDecorators: { map: [{
                 type: Input
             }] } });
 
@@ -3375,64 +3367,40 @@ class ShareMapComponent {
         this.config = config;
         this.hasApi = this.config.getConfig('context.url') ? true : false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapComponent, deps: [{ token: i3.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShareMapComponent, selector: "igo-share-map", inputs: { map: "map" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: ShareMapUrlComponent, selector: "igo-share-map-url", inputs: ["map"] }, { kind: "component", type: ShareMapApiComponent, selector: "igo-share-map-api", inputs: ["map"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapComponent, deps: [{ token: i3.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ShareMapComponent, isStandalone: true, selector: "igo-share-map", inputs: { map: "map" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: ShareMapApiComponent, selector: "igo-share-map-api", inputs: ["map"] }, { kind: "component", type: ShareMapUrlComponent, selector: "igo-share-map-url", inputs: ["map"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ShareMapComponent, decorators: [{
             type: Component,
-            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" }]
-        }], ctorParameters: function () { return [{ type: i3.ConfigService }]; }, propDecorators: { map: [{
+            args: [{ selector: 'igo-share-map', standalone: true, imports: [
+                        NgIf,
+                        MatTabsModule,
+                        ShareMapApiComponent,
+                        ShareMapUrlComponent,
+                        TranslateModule
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: i3.ConfigService }], propDecorators: { map: [{
                 type: Input
             }] } });
 
+/**
+ * @deprecated import the components/directives directly or SHARE_MAP_DIRECTIVES for the set
+ */
 class IgoShareMapModule {
     static forRoot() {
         return {
             ngModule: IgoShareMapModule
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoShareMapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IgoShareMapModule, declarations: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatIconModule,
-            MatTooltipModule,
-            MatTabsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatButtonModule,
-            IgoLanguageModule,
-            IgoCustomHtmlModule], exports: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoShareMapModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatIconModule,
-            MatTooltipModule,
-            MatTabsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatButtonModule,
-            IgoLanguageModule,
-            IgoCustomHtmlModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoShareMapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgoShareMapModule, imports: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent], exports: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoShareMapModule, imports: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoShareMapModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoShareMapModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                        MatTabsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatButtonModule,
-                        IgoLanguageModule,
-                        IgoCustomHtmlModule
-                    ],
-                    exports: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent],
-                    declarations: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent]
+                    imports: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent],
+                    exports: [ShareMapComponent, ShareMapUrlComponent, ShareMapApiComponent]
                 }]
         }] });
 
@@ -3508,13 +3476,23 @@ class SidenavComponent {
             this.topPanelState = 'initial';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavComponent, deps: [{ token: i1$4.Title }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidenavComponent, selector: "igo-sidenav", inputs: { map: "map", opened: "opened", feature: "feature", tool: "tool", media: "media", title: "title" }, ngImport: i0, template: "<mat-sidenav #sidenav igoSidenavShim mode=\"side\" [opened]=\"opened\">\r\n  <div class=\"igo-sidenav-content\">\r\n    <igo-flexible\r\n      #topPanel\r\n      initial=\"50%\"\r\n      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          >\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          >\r\n            <mat-icon svgIcon=\"menu\"></mat-icon>\r\n          </button>\r\n        </igo-panel>\r\n      </div>\r\n\r\n      <div igoFlexibleFill class=\"igo-content\">\r\n        <igo-panel [title]=\"featureTitle\" *ngIf=\"feature && media !== 'mobile'\">\r\n          <button\r\n            mat-icon-button\r\n            panelLeftButton\r\n            class=\"igo-icon-button\"\r\n            (click)=\"toggleTopPanel()\"\r\n          >\r\n            <mat-icon\r\n              [svgIcon]=\"\r\n                ['collapsed', 'initial'].indexOf(topPanel.state) >= 0\r\n                  ? 'arrow_downward'\r\n                  : 'arrow_upward'\r\n              \"\r\n            ></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          >\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          >\r\n          </igo-feature-details>\r\n        </igo-panel>\r\n      </div>\r\n    </igo-flexible>\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"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "component", type: i13.FlexibleComponent, selector: "igo-flexible", inputs: ["initial", "collapsed", "expanded", "initialMobile", "collapsedMobile", "expandedMobile", "direction", "state"] }, { kind: "component", type: i1$1.FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }, { kind: "pipe", type: i9$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SidenavComponent, deps: [{ token: i1$3.Title }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: SidenavComponent, isStandalone: true, selector: "igo-sidenav", inputs: { map: "map", opened: "opened", feature: "feature", tool: "tool", media: "media", title: "title" }, ngImport: i0, template: "<mat-sidenav #sidenav igoSidenavShim mode=\"side\" [opened]=\"opened\">\n  <div class=\"igo-sidenav-content\">\n    <igo-flexible\n      #topPanel\n      initial=\"50%\"\n      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          >\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          >\n            <mat-icon svgIcon=\"menu\"></mat-icon>\n          </button>\n        </igo-panel>\n      </div>\n\n      <div igoFlexibleFill class=\"igo-content\">\n        <igo-panel [title]=\"featureTitle\" *ngIf=\"feature && media !== 'mobile'\">\n          <button\n            mat-icon-button\n            panelLeftButton\n            class=\"igo-icon-button\"\n            (click)=\"toggleTopPanel()\"\n          >\n            <mat-icon\n              [svgIcon]=\"\n                ['collapsed', 'initial'].indexOf(topPanel.state) >= 0\n                  ? 'arrow_downward'\n                  : 'arrow_upward'\n              \"\n            ></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          >\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          >\n          </igo-feature-details>\n        </igo-panel>\n      </div>\n    </igo-flexible>\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{-moz-box-shadow:2px 0px 2px 0px #dddddd;-webkit-box-shadow:2px 0px 2px 0px #dddddd;-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"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: FlexibleComponent, selector: "igo-flexible", inputs: ["initial", "collapsed", "expanded", "initialMobile", "collapsedMobile", "expandedMobile", "direction", "state"] }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SidenavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-sidenav', template: "<mat-sidenav #sidenav igoSidenavShim mode=\"side\" [opened]=\"opened\">\r\n  <div class=\"igo-sidenav-content\">\r\n    <igo-flexible\r\n      #topPanel\r\n      initial=\"50%\"\r\n      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          >\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          >\r\n            <mat-icon svgIcon=\"menu\"></mat-icon>\r\n          </button>\r\n        </igo-panel>\r\n      </div>\r\n\r\n      <div igoFlexibleFill class=\"igo-content\">\r\n        <igo-panel [title]=\"featureTitle\" *ngIf=\"feature && media !== 'mobile'\">\r\n          <button\r\n            mat-icon-button\r\n            panelLeftButton\r\n            class=\"igo-icon-button\"\r\n            (click)=\"toggleTopPanel()\"\r\n          >\r\n            <mat-icon\r\n              [svgIcon]=\"\r\n                ['collapsed', 'initial'].indexOf(topPanel.state) >= 0\r\n                  ? 'arrow_downward'\r\n                  : 'arrow_upward'\r\n              \"\r\n            ></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          >\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          >\r\n          </igo-feature-details>\r\n        </igo-panel>\r\n      </div>\r\n    </igo-flexible>\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"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.Title }]; }, propDecorators: { map: [{
+            args: [{ selector: 'igo-sidenav', standalone: true, imports: [
+                        MatSidenavModule,
+                        FlexibleComponent,
+                        PanelComponent,
+                        NgIf,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        FeatureDetailsComponent,
+                        TranslateModule
+                    ], template: "<mat-sidenav #sidenav igoSidenavShim mode=\"side\" [opened]=\"opened\">\n  <div class=\"igo-sidenav-content\">\n    <igo-flexible\n      #topPanel\n      initial=\"50%\"\n      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          >\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          >\n            <mat-icon svgIcon=\"menu\"></mat-icon>\n          </button>\n        </igo-panel>\n      </div>\n\n      <div igoFlexibleFill class=\"igo-content\">\n        <igo-panel [title]=\"featureTitle\" *ngIf=\"feature && media !== 'mobile'\">\n          <button\n            mat-icon-button\n            panelLeftButton\n            class=\"igo-icon-button\"\n            (click)=\"toggleTopPanel()\"\n          >\n            <mat-icon\n              [svgIcon]=\"\n                ['collapsed', 'initial'].indexOf(topPanel.state) >= 0\n                  ? 'arrow_downward'\n                  : 'arrow_upward'\n              \"\n            ></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          >\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          >\n          </igo-feature-details>\n        </igo-panel>\n      </div>\n    </igo-flexible>\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{-moz-box-shadow:2px 0px 2px 0px #dddddd;-webkit-box-shadow:2px 0px 2px 0px #dddddd;-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"] }]
+        }], ctorParameters: () => [{ type: i1$3.Title }], propDecorators: { map: [{
                 type: Input
             }], opened: [{
                 type: Input
@@ -3528,77 +3506,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @deprecated import the SidenavComponent directly
+ */
 class IgoSidenavModule {
     static forRoot() {
         return {
             ngModule: IgoSidenavModule
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IgoSidenavModule, declarations: [SidenavComponent], imports: [CommonModule,
-            MatIconModule,
-            MatButtonModule,
-            MatSidenavModule,
-            MatTooltipModule,
-            IgoLanguageModule,
-            IgoPanelModule,
-            IgoFlexibleModule,
-            IgoFeatureModule,
-            IgoContextManagerModule], exports: [SidenavComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoSidenavModule, imports: [CommonModule,
-            MatIconModule,
-            MatButtonModule,
-            MatSidenavModule,
-            MatTooltipModule,
-            IgoLanguageModule,
-            IgoPanelModule,
-            IgoFlexibleModule,
-            IgoFeatureModule,
-            IgoContextManagerModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgoSidenavModule, imports: [SidenavComponent], exports: [SidenavComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoSidenavModule, imports: [SidenavComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoSidenavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoSidenavModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatSidenavModule,
-                        MatTooltipModule,
-                        IgoLanguageModule,
-                        IgoPanelModule,
-                        IgoFlexibleModule,
-                        IgoFeatureModule,
-                        IgoContextManagerModule
-                    ],
-                    exports: [SidenavComponent],
-                    declarations: [SidenavComponent]
+                    imports: [SidenavComponent],
+                    exports: [SidenavComponent]
                 }]
         }] });
 
+/**
+ * @deprecated import the components/directives directly or SHARE_MAP_DIRECTIVES for the set
+ */
 class IgoContextModule {
     static forRoot() {
         return {
-            ngModule: IgoContextModule,
-            providers: []
+            ngModule: IgoContextModule
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IgoContextModule, imports: [MatInputModule, MatFormFieldModule, MatMenuModule], exports: [IgoContextImportExportModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgoContextModule, exports: [IgoContextImportExportModule,
             IgoContextManagerModule,
             IgoContextMapButtonModule,
             IgoShareMapModule,
             IgoSidenavModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextModule, imports: [MatInputModule, MatFormFieldModule, MatMenuModule, IgoContextImportExportModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextModule, imports: [IgoContextImportExportModule,
             IgoContextManagerModule,
             IgoContextMapButtonModule,
             IgoShareMapModule,
             IgoSidenavModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IgoContextModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgoContextModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [MatInputModule, MatFormFieldModule, MatMenuModule],
                     declarations: [],
                     exports: [
                         IgoContextImportExportModule,
@@ -3610,6 +3562,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+const CONTEXT_MANAGER_DIRECTIVES = [
+    ContextListComponent,
+    ContextListBindingDirective,
+    ContextItemComponent,
+    ContextFormComponent,
+    ContextEditComponent,
+    ContextEditBindingDirective,
+    ContextPermissionsComponent,
+    ContextPermissionsBindingDirective,
+    MapContextDirective,
+    LayerContextDirective
+];
+
+const CONTEXT_MAP_BUTTON_DIRECTIVES = [
+    BookmarkButtonComponent,
+    BookmarkDialogComponent,
+    PoiButtonComponent,
+    UserButtonComponent
+];
+
+const SHARE_MAP_DIRECTIVES = [
+    ShareMapComponent,
+    ShareMapUrlComponent,
+    ShareMapApiComponent
+];
+
 /*
  * Public API Surface of context
  */
@@ -3618,5 +3596,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BookmarkButtonComponent, BookmarkDialogComponent, ContextEditBindingDirective, ContextEditComponent, ContextExportService, ContextFormComponent, ContextImportExportComponent, ContextImportService, ContextItemComponent, ContextListBindingDirective, ContextListComponent, ContextPermissionsBindingDirective, ContextPermissionsComponent, ContextService, ExportError, ExportInvalidFileError, ExportNothingToExportError, IgoContextImportExportModule, IgoContextManagerModule, IgoContextMapButtonModule, IgoContextModule, IgoShareMapModule, IgoSidenavModule, ImportError, ImportInvalidFileError, ImportNothingToImportError, ImportSRSError, ImportSizeError, ImportUnreadableFileError, LayerContextDirective, MapContextDirective, PoiButtonComponent, PoiDialogComponent, PoiService, Scope, ShareMapApiComponent, ShareMapComponent, ShareMapService, ShareMapUrlComponent, SidenavComponent, TypePermission, UserButtonComponent, UserDialogComponent, addContextToContextList, addImportedFeaturesStyledToMap, addImportedFeaturesToMap, computeLayerTitleFromFile, getFileExtension, handleFileExportError, handleFileExportSuccess, handleFileImportError, handleFileImportSuccess, handleInvalidFileImportError, handleNothingToExportError, handleNothingToImportError, handleSizeFileImportError, handleUnreadbleFileImportError };
+export { BookmarkButtonComponent, BookmarkDialogComponent, CONTEXT_MANAGER_DIRECTIVES, CONTEXT_MAP_BUTTON_DIRECTIVES, ContextEditBindingDirective, ContextEditComponent, ContextExportService, ContextFormComponent, ContextImportExportComponent, ContextImportService, ContextItemComponent, ContextListBindingDirective, ContextListComponent, ContextPermissionsBindingDirective, ContextPermissionsComponent, ContextService, ExportError, ExportInvalidFileError, ExportNothingToExportError, IgoContextImportExportModule, IgoContextManagerModule, IgoContextMapButtonModule, IgoContextModule, IgoShareMapModule, IgoSidenavModule, ImportError, ImportInvalidFileError, ImportNothingToImportError, ImportSRSError, ImportSizeError, ImportUnreadableFileError, LayerContextDirective, MapContextDirective, PoiButtonComponent, PoiDialogComponent, PoiService, SHARE_MAP_DIRECTIVES, Scope, ShareMapApiComponent, ShareMapComponent, ShareMapService, ShareMapUrlComponent, SidenavComponent, TypePermission, UserButtonComponent, UserDialogComponent, addContextToContextList, addImportedFeaturesStyledToMap, addImportedFeaturesToMap, computeLayerTitleFromFile, getFileExtension, handleFileExportError, handleFileExportSuccess, handleFileImportError, handleFileImportSuccess, handleInvalidFileImportError, handleNothingToExportError, handleNothingToImportError, handleSizeFileImportError, handleUnreadbleFileImportError };
 //# sourceMappingURL=igo2-context.mjs.map