@igo2/geo 20.1.0-next.13 → 20.1.0-next.14

package/fesm2022/igo2-geo.mjs

@@ -9154,7 +9154,7 @@ class LayerGroupComponent {
         this.selectChange.emit(event.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerGroupComponent, isStandalone: true, selector: "igo-layer-group", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionDisabled: { classPropertyName: "selectionDisabled", publicName: "selectionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", visibilityChange: "visibilityChange", expand: "expand", selectChange: "selectChange" }, host: { properties: { "class.disabled": "this.isDisabled" } }, ngImport: i0, template: "<div class=\"layer-content\">\n  @if (viewerOptions().mode === 'selection') {\n    <mat-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"selectionDisabled()\"\n      (change)=\"handleSelect($event)\"\n    />\n  }\n  <ng-content />\n  <span class=\"igo-layer-title\" (click)=\"handleExpand()\">{{\n    layer().title\n  }}</span>\n</div>\n\n<div class=\"list-actions\">\n  <div class=\"list-secondary-actions\">\n    <button\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerGroupTool($event)\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n\n  <igo-layer-visibility-button\n    [layer]=\"layer()\"\n    [disabled]=\"isDisabled\"\n    [tooltip]=\"tooltipMessage\"\n    [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n    (visibilityChange)=\"toggleVisibility($event)\"\n  />\n</div>\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{display:flex;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.igo-layer-title{flex:1;font-weight:700;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.layer-browser-group-carret{margin-right:10px}.layer-content{display:flex;align-items:center;flex:1}.list-actions{display:flex;margin-left:4px;margin-right:4px}.child-list{padding-left:26px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayerVisibilityButtonComponent, selector: "igo-layer-visibility-button", inputs: ["layer", "tooltip", "disabled", "showQueryBadge", "inResolutionsRange"], outputs: ["visibilityChange"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerGroupComponent, isStandalone: true, selector: "igo-layer-group", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionDisabled: { classPropertyName: "selectionDisabled", publicName: "selectionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", visibilityChange: "visibilityChange", expand: "expand", selectChange: "selectChange" }, host: { properties: { "class.disabled": "this.isDisabled" } }, ngImport: i0, template: "<div class=\"layer-content\">\n  <ng-content />\n\n  @if (viewerOptions().mode === 'selection') {\n    <mat-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"selectionDisabled()\"\n      (change)=\"handleSelect($event)\"\n    />\n  }\n  <span class=\"igo-layer-title\" (click)=\"handleExpand()\">{{\n    layer().title\n  }}</span>\n</div>\n\n<div class=\"list-actions\">\n  <div class=\"list-secondary-actions\">\n    <button\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerGroupTool($event)\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n\n  <igo-layer-visibility-button\n    [layer]=\"layer()\"\n    [disabled]=\"isDisabled\"\n    [tooltip]=\"tooltipMessage\"\n    [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n    (visibilityChange)=\"toggleVisibility($event)\"\n  />\n</div>\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{display:flex;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.igo-layer-title{flex:1;font-weight:700;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.layer-browser-group-carret{margin-right:10px}.layer-content{display:flex;align-items:center;flex:1}.list-actions{display:flex;margin-left:4px;margin-right:4px}.child-list{padding-left:26px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayerVisibilityButtonComponent, selector: "igo-layer-visibility-button", inputs: ["layer", "tooltip", "disabled", "showQueryBadge", "inResolutionsRange"], outputs: ["visibilityChange"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerGroupComponent, decorators: [{
             type: Component,
@@ -9166,7 +9166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         MatIconModule,
                         LayerVisibilityButtonComponent,
                         IgoLanguageModule
-                    ], template: "<div class=\"layer-content\">\n  @if (viewerOptions().mode === 'selection') {\n    <mat-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"selectionDisabled()\"\n      (change)=\"handleSelect($event)\"\n    />\n  }\n  <ng-content />\n  <span class=\"igo-layer-title\" (click)=\"handleExpand()\">{{\n    layer().title\n  }}</span>\n</div>\n\n<div class=\"list-actions\">\n  <div class=\"list-secondary-actions\">\n    <button\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerGroupTool($event)\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n\n  <igo-layer-visibility-button\n    [layer]=\"layer()\"\n    [disabled]=\"isDisabled\"\n    [tooltip]=\"tooltipMessage\"\n    [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n    (visibilityChange)=\"toggleVisibility($event)\"\n  />\n</div>\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{display:flex;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.igo-layer-title{flex:1;font-weight:700;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.layer-browser-group-carret{margin-right:10px}.layer-content{display:flex;align-items:center;flex:1}.list-actions{display:flex;margin-left:4px;margin-right:4px}.child-list{padding-left:26px}\n"] }]
+                    ], template: "<div class=\"layer-content\">\n  <ng-content />\n\n  @if (viewerOptions().mode === 'selection') {\n    <mat-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"selectionDisabled()\"\n      (change)=\"handleSelect($event)\"\n    />\n  }\n  <span class=\"igo-layer-title\" (click)=\"handleExpand()\">{{\n    layer().title\n  }}</span>\n</div>\n\n<div class=\"list-actions\">\n  <div class=\"list-secondary-actions\">\n    <button\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerGroupTool($event)\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n\n  <igo-layer-visibility-button\n    [layer]=\"layer()\"\n    [disabled]=\"isDisabled\"\n    [tooltip]=\"tooltipMessage\"\n    [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n    (visibilityChange)=\"toggleVisibility($event)\"\n  />\n</div>\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{display:flex;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.igo-layer-title{flex:1;font-weight:700;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.layer-browser-group-carret{margin-right:10px}.layer-content{display:flex;align-items:center;flex:1}.list-actions{display:flex;margin-left:4px;margin-right:4px}.child-list{padding-left:26px}\n"] }]
         }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: false }] }], viewerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerOptions", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], expand: [{ type: i0.Output, args: ["expand"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], isDisabled: [{
                 type: HostBinding,
                 args: ['class.disabled']
@@ -10591,96 +10591,96 @@ class DataSourceService {
     messageService = inject(MessageService);
     authInterceptor = inject(AuthInterceptor);
     datasources$ = new BehaviorSubject([]);
-    createAsyncDataSource(context, detailedContextUri) {
-        if (!context.type) {
-            console.error(context);
+    createAsyncDataSource(options, detailedContextUri) {
+        if (!options.type) {
+            console.error(options);
             throw new Error('Datasource needs a type');
         }
         let dataSource;
-        switch (context.type.toLowerCase()) {
+        switch (options.type.toLowerCase()) {
             case 'osm':
-                dataSource = this.createOSMDataSource(context);
+                dataSource = this.createOSMDataSource(options);
                 break;
             case 'vector':
-                dataSource = this.createFeatureDataSource(context);
+                dataSource = this.createFeatureDataSource(options);
                 break;
             case 'wfs':
-                dataSource = this.createWFSDataSource(context);
+                dataSource = this.createWFSDataSource(options);
                 break;
             case 'wms': {
-                const wmsContext = context;
+                const wmsContext = options;
                 ObjectUtils.removeDuplicateCaseInsensitive(wmsContext.params);
                 dataSource = this.createWMSDataSource(wmsContext, detailedContextUri);
                 break;
             }
             case 'wmts':
-                dataSource = this.createWMTSDataSource(context);
+                dataSource = this.createWMTSDataSource(options);
                 break;
             case 'xyz':
-                dataSource = this.createXYZDataSource(context);
+                dataSource = this.createXYZDataSource(options);
                 break;
             case 'tiledebug':
-                dataSource = this.createTileDebugDataSource(context);
+                dataSource = this.createTileDebugDataSource(options);
                 break;
             case 'carto':
-                dataSource = this.createCartoDataSource(context);
+                dataSource = this.createCartoDataSource(options);
                 break;
             case 'arcgisrest':
-                dataSource = this.createArcGISRestDataSource(context, detailedContextUri);
+                dataSource = this.createArcGISRestDataSource(options, detailedContextUri);
                 break;
             case 'imagearcgisrest':
-                dataSource = this.createArcGISRestImageDataSource(context, detailedContextUri);
+                dataSource = this.createArcGISRestImageDataSource(options, detailedContextUri);
                 break;
             case 'websocket':
-                dataSource = this.createWebSocketDataSource(context);
+                dataSource = this.createWebSocketDataSource(options);
                 break;
             case 'mvt':
-                dataSource = this.createMVTDataSource(context);
+                dataSource = this.createMVTDataSource(options);
                 break;
             case 'tilearcgisrest':
-                dataSource = this.createTileArcGISRestDataSource(context, detailedContextUri);
+                dataSource = this.createTileArcGISRestDataSource(options, detailedContextUri);
                 break;
             case 'cluster':
-                dataSource = this.createClusterDataSource(context);
+                dataSource = this.createClusterDataSource(options);
                 break;
             default:
-                console.error(context);
+                console.error(options);
                 throw new Error('Invalid datasource type');
         }
         this.datasources$.next(this.datasources$.value.concat([dataSource]));
         return dataSource;
     }
-    createOSMDataSource(context) {
-        return new Observable((d) => d.next(new OSMDataSource(context)));
+    createOSMDataSource(options) {
+        return new Observable((d) => d.next(new OSMDataSource(options)));
     }
-    createFeatureDataSource(context) {
-        return new Observable((d) => d.next(new FeatureDataSource(context)));
+    createFeatureDataSource(options) {
+        return new Observable((d) => d.next(new FeatureDataSource(options)));
     }
-    createWebSocketDataSource(context) {
-        return new Observable((d) => d.next(new WebSocketDataSource(context)));
+    createWebSocketDataSource(options) {
+        return new Observable((d) => d.next(new WebSocketDataSource(options)));
     }
-    createWFSDataSource(context) {
-        return new Observable((d) => d.next(new WFSDataSource(context, this.wfsDataSourceService, this.ogcFilterService, this.authInterceptor)));
+    createWFSDataSource(options) {
+        return new Observable((d) => d.next(new WFSDataSource(options, this.wfsDataSourceService, this.ogcFilterService, this.authInterceptor)));
     }
-    createWMSDataSource(context, detailedContextUri) {
+    createWMSDataSource(options, detailedContextUri) {
         const observables = [];
-        if (context.optionsFromCapabilities && window.navigator.onLine) {
-            observables.push(this.capabilitiesService.getWMSOptions(context).pipe(catchError$1((e) => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: context.params.LAYERS });
+        if (options.optionsFromCapabilities && window.navigator.onLine) {
+            observables.push(this.capabilitiesService.getWMSOptions(options).pipe(catchError$1((e) => {
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.params.LAYERS });
                 throw e;
             })));
         }
         if (this.optionsService &&
-            context.optionsFromApi &&
+            options.optionsFromApi &&
             window.navigator.onLine) {
-            observables.push(this.optionsService.getWMSOptions(context, detailedContextUri).pipe(catchError$1((e) => {
+            observables.push(this.optionsService.getWMSOptions(options, detailedContextUri).pipe(catchError$1((e) => {
                 e.error.toDisplay = true;
                 e.error.title = this.languageService.translate.instant('igo.geo.dataSource.unavailableTitle');
                 e.error.message = this.languageService.translate.instant('igo.geo.dataSource.optionsApiUnavailable');
                 return of({});
             })));
         }
-        observables.push(of(context));
+        observables.push(of(options));
         return forkJoin(observables).pipe(map((options) => {
             const optionsMerged = options.reduce((a, b) => ObjectUtils.mergeDeep(a, b));
             if (optionsMerged?.params) {
@@ -10700,44 +10700,44 @@ class DataSourceService {
         }
         return uppercasedParams;
     }
-    createWMTSDataSource(context) {
-        if (context.optionsFromCapabilities && window.navigator.onLine) {
-            return this.capabilitiesService.getWMTSOptions(context).pipe(map((options) => {
+    createWMTSDataSource(options) {
+        if (options.optionsFromCapabilities && window.navigator.onLine) {
+            return this.capabilitiesService.getWMTSOptions(options).pipe(map((options) => {
                 return options ? new WMTSDataSource(options) : undefined;
             }), catchError$1(() => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: context.layer });
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.layer });
                 return of(undefined);
             }));
         }
-        return new Observable((d) => d.next(new WMTSDataSource(context)));
+        return new Observable((d) => d.next(new WMTSDataSource(options)));
     }
-    createXYZDataSource(context) {
-        return new Observable((d) => d.next(new XYZDataSource(context)));
+    createXYZDataSource(options) {
+        return new Observable((d) => d.next(new XYZDataSource(options)));
     }
-    createTileDebugDataSource(context) {
-        return new Observable((d) => d.next(new TileDebugDataSource(context)));
+    createTileDebugDataSource(options) {
+        return new Observable((d) => d.next(new TileDebugDataSource(options)));
     }
-    createCartoDataSource(context) {
-        if (context.mapId) {
+    createCartoDataSource(options) {
+        if (options.mapId) {
             return this.capabilitiesService
-                .getCartoOptions(context)
+                .getCartoOptions(options)
                 .pipe(map((options) => new CartoDataSource(options)));
         }
-        return new Observable((d) => d.next(new CartoDataSource(context)));
+        return new Observable((d) => d.next(new CartoDataSource(options)));
     }
-    createArcGISRestDataSource(context, detailedContextUri) {
+    createArcGISRestDataSource(options, detailedContextUri) {
         const observables = [];
         if (window.navigator.onLine) {
-            observables.push(this.capabilitiesService.getArcgisOptions(context).pipe(catchError$1((e) => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: context.layer });
+            observables.push(this.capabilitiesService.getArcgisOptions(options).pipe(catchError$1((e) => {
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.layer });
                 throw e;
             })));
         }
         if (this.optionsService &&
-            context.optionsFromApi &&
+            options.optionsFromApi &&
             window.navigator.onLine) {
             observables.push(this.optionsService
-                .getArcgisRestOptions(context, detailedContextUri)
+                .getArcgisRestOptions(options, detailedContextUri)
                 .pipe(catchError$1((e) => {
                 e.error.toDisplay = true;
                 e.error.title = this.languageService.translate.instant('igo.geo.dataSource.unavailableTitle');
@@ -10745,7 +10745,7 @@ class DataSourceService {
                 return of({});
             })));
         }
-        observables.push(of(context));
+        observables.push(of(options));
         return forkJoin(observables).pipe(map((options) => {
             const optionsMerged = options.reduce((a, b) => ObjectUtils.mergeDeep(a, b));
             return new ArcGISRestDataSource(optionsMerged);
@@ -10753,19 +10753,19 @@ class DataSourceService {
             return of(undefined);
         }));
     }
-    createArcGISRestImageDataSource(context, detailedContextUri) {
+    createArcGISRestImageDataSource(options, detailedContextUri) {
         const observables = [];
         if (window.navigator.onLine) {
-            observables.push(this.capabilitiesService.getImageArcgisOptions(context).pipe(catchError$1((e) => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: context.params.LAYERS });
+            observables.push(this.capabilitiesService.getImageArcgisOptions(options).pipe(catchError$1((e) => {
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.params.LAYERS });
                 throw e;
             })));
         }
         if (this.optionsService &&
-            context.optionsFromApi &&
+            options.optionsFromApi &&
             window.navigator.onLine) {
             observables.push(this.optionsService
-                .getArcgisRestOptions(context, detailedContextUri)
+                .getArcgisRestOptions(options, detailedContextUri)
                 .pipe(catchError$1((e) => {
                 e.error.toDisplay = true;
                 e.error.title = this.languageService.translate.instant('igo.geo.dataSource.unavailableTitle');
@@ -10773,7 +10773,7 @@ class DataSourceService {
                 return of({});
             })));
         }
-        observables.push(of(context));
+        observables.push(of(options));
         return forkJoin(observables).pipe(map((options) => {
             const optionsMerged = options.reduce((a, b) => ObjectUtils.mergeDeep(a, b));
             return new ImageArcGISRestDataSource(optionsMerged);
@@ -10781,19 +10781,19 @@ class DataSourceService {
             return of(undefined);
         }));
     }
-    createTileArcGISRestDataSource(context, detailedContextUri) {
+    createTileArcGISRestDataSource(options, detailedContextUri) {
         const observables = [];
         if (window.navigator.onLine) {
-            observables.push(this.capabilitiesService.getImageArcgisOptions(context).pipe(catchError$1((e) => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: context.params.LAYERS });
+            observables.push(this.capabilitiesService.getImageArcgisOptions(options).pipe(catchError$1((e) => {
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.params.LAYERS });
                 throw e;
             })));
         }
         if (this.optionsService &&
-            context.optionsFromApi &&
+            options.optionsFromApi &&
             window.navigator.onLine) {
             observables.push(this.optionsService
-                .getArcgisRestOptions(context, detailedContextUri)
+                .getArcgisRestOptions(options, detailedContextUri)
                 .pipe(catchError$1((e) => {
                 e.error.toDisplay = true;
                 e.error.title = this.languageService.translate.instant('igo.geo.dataSource.unavailableTitle');
@@ -10801,7 +10801,7 @@ class DataSourceService {
                 return of({});
             })));
         }
-        observables.push(of(context));
+        observables.push(of(options));
         return forkJoin(observables).pipe(map((options) => {
             const optionsMerged = options.reduce((a, b) => ObjectUtils.mergeDeep(a, b));
             return new TileArcGISRestDataSource(optionsMerged);
@@ -10809,11 +10809,11 @@ class DataSourceService {
             return of(undefined);
         }));
     }
-    createMVTDataSource(context) {
-        return new Observable((d) => d.next(new MVTDataSource(context)));
+    createMVTDataSource(options) {
+        return new Observable((d) => d.next(new MVTDataSource(options)));
     }
-    createClusterDataSource(context) {
-        return new Observable((d) => d.next(new ClusterDataSource(context)));
+    createClusterDataSource(options) {
+        return new Observable((d) => d.next(new ClusterDataSource(options)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataSourceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataSourceService, providedIn: 'root' });
@@ -32978,7 +32978,7 @@ class SearchResultsItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SearchResultsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SearchResultsItemComponent, isStandalone: true, selector: "igo-search-results-item", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, withZoomButton: { classPropertyName: "withZoomButton", publicName: "withZoomButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoomEvent: "zoomEvent" }, ngImport: i0, template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  @if (icon) {\n    <mat-icon matListItemIcon>{{ showIcons() ? icon : 'blank' }}</mat-icon>\n  }\n\n  @if (titleHtml) {\n    <span\n      matListItemTitle\n      [innerHtml]=\"titleHtml\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"tooltipHtml\"\n      matTooltipClass=\"search-result-tooltip\"\n    ></span>\n  } @else {\n    @if (!titleHtml) {\n      <span matTooltipShowDelay=\"500\" [matTooltip]=\"title\">{{ title }}</span>\n    }\n  }\n\n  <div matListItemMeta>\n    @if (withZoomButton()) {\n      <button igoStopPropagation mat-icon-button (click)=\"onZoomHandler()\">\n        <mat-icon>search</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"[igoSearchItemToolbar]\" />\n  </div>\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}.mdc-list-item--with-leading-icon:hover .mdc-list-item__start{color:#000}.mdc-list-item--with-leading-icon .mdc-list-item__start{color:#000000de}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SearchResultsItemComponent, isStandalone: true, selector: "igo-search-results-item", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, withZoomButton: { classPropertyName: "withZoomButton", publicName: "withZoomButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoomEvent: "zoomEvent" }, ngImport: i0, template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  @if (icon) {\n    <mat-icon matListItemIcon>{{ showIcons() ? icon : 'blank' }}</mat-icon>\n  }\n\n  @if (titleHtml) {\n    <span\n      matListItemTitle\n      class=\"igo-list-item-with-text-overflow-ellipsis\"\n      [innerHtml]=\"titleHtml\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"tooltipHtml\"\n      matTooltipClass=\"search-result-tooltip\"\n    ></span>\n  } @else {\n    <span\n      class=\"igo-list-item-with-text-overflow-ellipsis\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"title\"\n      >{{ title }}</span\n    >\n  }\n\n  <div matListItemMeta>\n    @if (withZoomButton()) {\n      <button igoStopPropagation mat-icon-button (click)=\"onZoomHandler()\">\n        <mat-icon>search</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"[igoSearchItemToolbar]\" />\n  </div>\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}.mdc-list-item--with-leading-icon:hover .mdc-list-item__start{color:#000}.mdc-list-item--with-leading-icon .mdc-list-item__start{color:#000000de}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SearchResultsItemComponent, decorators: [{
             type: Component,
@@ -32988,7 +32988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         MatTooltipModule,
                         MatButtonModule,
                         StopPropagationDirective
-                    ], template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  @if (icon) {\n    <mat-icon matListItemIcon>{{ showIcons() ? icon : 'blank' }}</mat-icon>\n  }\n\n  @if (titleHtml) {\n    <span\n      matListItemTitle\n      [innerHtml]=\"titleHtml\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"tooltipHtml\"\n      matTooltipClass=\"search-result-tooltip\"\n    ></span>\n  } @else {\n    @if (!titleHtml) {\n      <span matTooltipShowDelay=\"500\" [matTooltip]=\"title\">{{ title }}</span>\n    }\n  }\n\n  <div matListItemMeta>\n    @if (withZoomButton()) {\n      <button igoStopPropagation mat-icon-button (click)=\"onZoomHandler()\">\n        <mat-icon>search</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"[igoSearchItemToolbar]\" />\n  </div>\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}.mdc-list-item--with-leading-icon:hover .mdc-list-item__start{color:#000}.mdc-list-item--with-leading-icon .mdc-list-item__start{color:#000000de}\n"] }]
+                    ], template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  @if (icon) {\n    <mat-icon matListItemIcon>{{ showIcons() ? icon : 'blank' }}</mat-icon>\n  }\n\n  @if (titleHtml) {\n    <span\n      matListItemTitle\n      class=\"igo-list-item-with-text-overflow-ellipsis\"\n      [innerHtml]=\"titleHtml\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"tooltipHtml\"\n      matTooltipClass=\"search-result-tooltip\"\n    ></span>\n  } @else {\n    <span\n      class=\"igo-list-item-with-text-overflow-ellipsis\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"title\"\n      >{{ title }}</span\n    >\n  }\n\n  <div matListItemMeta>\n    @if (withZoomButton()) {\n      <button igoStopPropagation mat-icon-button (click)=\"onZoomHandler()\">\n        <mat-icon>search</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"[igoSearchItemToolbar]\" />\n  </div>\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}.mdc-list-item--with-leading-icon:hover .mdc-list-item__start{color:#000}.mdc-list-item--with-leading-icon .mdc-list-item__start{color:#000000de}\n"] }]
         }], propDecorators: { result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], withZoomButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "withZoomButton", required: false }] }], zoomEvent: [{ type: i0.Output, args: ["zoomEvent"] }] } });
 
 class SaveFeatureDialogComponent {
@@ -39241,6 +39241,7 @@ class CatalogBrowserLayerComponent {
                 this.mouseInsideAdd = true;
                 break;
             case 'mouseleave':
+                clearTimeout(this.lastTimeoutRequest);
                 if (this.isPreview$.value) {
                     this.remove(event);
                     this.isPreview$.next(false);
@@ -39319,7 +39320,7 @@ class CatalogBrowserLayerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CatalogBrowserLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CatalogBrowserLayerComponent, isStandalone: true, selector: "igo-catalog-browser-layer", inputs: { resolution: { classPropertyName: "resolution", publicName: "resolution", isSignal: true, isRequired: false, transformFunction: null }, catalogAllowLegend: { classPropertyName: "catalogAllowLegend", publicName: "catalogAllowLegend", isSignal: true, isRequired: false, transformFunction: null }, layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, added: { classPropertyName: "added", publicName: "added", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addedChange: "addedChange", addedLayerIsPreview: "addedLayerIsPreview" }, ngImport: i0, template: "<mat-list-item>\n  @if (haveGroup()) {\n    <mat-icon class=\"catalog-browser-layer-carret\" matListItemIcon />\n  }\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [ngClass]=\"catalogAllowLegend() ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend()\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    @if (layer().externalProvider) {\n      <button disabled=\"true\" mat-icon-button>\n        <mat-icon\n          class=\"igo-cataloglayer-external-icon\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n          color=\"primary\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          public\n        </mat-icon>\n      </button>\n    }\n    <igo-metadata-button [layer]=\"$any(layer())\" />\n\n    @let isRange = inRange$ | async;\n    @let isVisible = isVisible$ | async;\n    @let isPreview = isPreview$ | async;\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"isPreview ? '' : added() ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"icon\"\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n        igoMatBadgeBackgroundColor=\"none\"\n        [igoMatBadgeInverseColor]=\"true\"\n        [matBadgeHidden]=\"\n          (isRange && isVisible) ||\n          (isRange && !added()) ||\n          (isRange && isPreview)\n        \"\n        [matBadgeDisabled]=\"isRange === false\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n      >\n        {{ isPreview ? 'preview' : added() ? 'delete' : 'add' }}\n      </mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  @let igoLayer = igoLayer$ | async;\n  @if ((layerLegendShown$ | async) && igoLayer && catalogAllowLegend()) {\n    <igo-layer-legend [layer]=\"igoLayer\" />\n  }\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CatalogBrowserLayerComponent, isStandalone: true, selector: "igo-catalog-browser-layer", inputs: { resolution: { classPropertyName: "resolution", publicName: "resolution", isSignal: true, isRequired: false, transformFunction: null }, catalogAllowLegend: { classPropertyName: "catalogAllowLegend", publicName: "catalogAllowLegend", isSignal: true, isRequired: false, transformFunction: null }, layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, added: { classPropertyName: "added", publicName: "added", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addedChange: "addedChange", addedLayerIsPreview: "addedLayerIsPreview" }, ngImport: i0, template: "<mat-list-item>\n  @if (haveGroup()) {\n    <mat-icon class=\"catalog-browser-layer-carret\" matListItemIcon />\n  }\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    class=\"igo-list-item-with-text-overflow-ellipsis\"\n    [ngClass]=\"catalogAllowLegend() ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend()\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    @if (layer().externalProvider) {\n      <button disabled=\"true\" mat-icon-button>\n        <mat-icon\n          class=\"igo-cataloglayer-external-icon\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n          color=\"primary\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          public\n        </mat-icon>\n      </button>\n    }\n    <igo-metadata-button [layer]=\"$any(layer())\" />\n\n    @let isRange = inRange$ | async;\n    @let isVisible = isVisible$ | async;\n    @let isPreview = isPreview$ | async;\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"isPreview ? '' : added() ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"icon\"\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n        igoMatBadgeBackgroundColor=\"none\"\n        [igoMatBadgeInverseColor]=\"true\"\n        [matBadgeHidden]=\"\n          (isRange && isVisible) ||\n          (isRange && !added()) ||\n          (isRange && isPreview)\n        \"\n        [matBadgeDisabled]=\"isRange === false\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n      >\n        {{ isPreview ? 'preview' : added() ? 'delete' : 'add' }}\n      </mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  @let igoLayer = igoLayer$ | async;\n  @if ((layerLegendShown$ | async) && igoLayer && catalogAllowLegend()) {\n    <igo-layer-legend [layer]=\"igoLayer\" />\n  }\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CatalogBrowserLayerComponent, decorators: [{
             type: Component,
@@ -39335,7 +39336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         LayerLegendComponent,
                         AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<mat-list-item>\n  @if (haveGroup()) {\n    <mat-icon class=\"catalog-browser-layer-carret\" matListItemIcon />\n  }\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [ngClass]=\"catalogAllowLegend() ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend()\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    @if (layer().externalProvider) {\n      <button disabled=\"true\" mat-icon-button>\n        <mat-icon\n          class=\"igo-cataloglayer-external-icon\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n          color=\"primary\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          public\n        </mat-icon>\n      </button>\n    }\n    <igo-metadata-button [layer]=\"$any(layer())\" />\n\n    @let isRange = inRange$ | async;\n    @let isVisible = isVisible$ | async;\n    @let isPreview = isPreview$ | async;\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"isPreview ? '' : added() ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"icon\"\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n        igoMatBadgeBackgroundColor=\"none\"\n        [igoMatBadgeInverseColor]=\"true\"\n        [matBadgeHidden]=\"\n          (isRange && isVisible) ||\n          (isRange && !added()) ||\n          (isRange && isPreview)\n        \"\n        [matBadgeDisabled]=\"isRange === false\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n      >\n        {{ isPreview ? 'preview' : added() ? 'delete' : 'add' }}\n      </mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  @let igoLayer = igoLayer$ | async;\n  @if ((layerLegendShown$ | async) && igoLayer && catalogAllowLegend()) {\n    <igo-layer-legend [layer]=\"igoLayer\" />\n  }\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
+                    ], template: "<mat-list-item>\n  @if (haveGroup()) {\n    <mat-icon class=\"catalog-browser-layer-carret\" matListItemIcon />\n  }\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    class=\"igo-list-item-with-text-overflow-ellipsis\"\n    [ngClass]=\"catalogAllowLegend() ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend()\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    @if (layer().externalProvider) {\n      <button disabled=\"true\" mat-icon-button>\n        <mat-icon\n          class=\"igo-cataloglayer-external-icon\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n          color=\"primary\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          public\n        </mat-icon>\n      </button>\n    }\n    <igo-metadata-button [layer]=\"$any(layer())\" />\n\n    @let isRange = inRange$ | async;\n    @let isVisible = isVisible$ | async;\n    @let isPreview = isPreview$ | async;\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"isPreview ? '' : added() ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"icon\"\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n        igoMatBadgeBackgroundColor=\"none\"\n        [igoMatBadgeInverseColor]=\"true\"\n        [matBadgeHidden]=\"\n          (isRange && isVisible) ||\n          (isRange && !added()) ||\n          (isRange && isPreview)\n        \"\n        [matBadgeDisabled]=\"isRange === false\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n      >\n        {{ isPreview ? 'preview' : added() ? 'delete' : 'add' }}\n      </mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  @let igoLayer = igoLayer$ | async;\n  @if ((layerLegendShown$ | async) && igoLayer && catalogAllowLegend()) {\n    <igo-layer-legend [layer]=\"igoLayer\" />\n  }\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
         }], propDecorators: { resolution: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolution", required: false }] }], catalogAllowLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalogAllowLegend", required: false }] }], layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: false }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], added: [{ type: i0.Input, args: [{ isSignal: true, alias: "added", required: false }] }], addedChange: [{ type: i0.Output, args: ["addedChange"] }], addedLayerIsPreview: [{ type: i0.Output, args: ["addedLayerIsPreview"] }] } });
 
 /**
@@ -39562,6 +39563,7 @@ class CatalogBrowserComponent {
      * Whether a group can be toggled when it's collapsed
      */
     toggleCollapsedGroup = input(true, ...(ngDevMode ? [{ debugName: "toggleCollapsedGroup" }] : []));
+    isAddingLayers = new BehaviorSubject(false);
     /**
      * @internal
      */
@@ -39645,6 +39647,7 @@ class CatalogBrowserComponent {
      * @param layers Catalog layers
      */
     addLayersToMap(catalogLayers, event) {
+        this.isAddingLayers.next(true);
         const layers$ = catalogLayers.map((layer) => {
             if (!layer.options.sourceOptions.optionsFromApi) {
                 layer.options.sourceOptions.optionsFromApi = true;
@@ -39661,6 +39664,7 @@ class CatalogBrowserComponent {
             }
             this.store().state.updateMany(catalogLayers, { added: true });
             this.map().layerController.add(...layers.filter(Boolean));
+            this.isAddingLayers.next(false);
         });
     }
     /**
@@ -39668,6 +39672,20 @@ class CatalogBrowserComponent {
      * @param layers Catalog layers
      */
     removeLayersFromMap(layers) {
+        if (this.isAddingLayers.value) {
+            this.isAddingLayers
+                .pipe(first((value) => value === false))
+                .subscribe((_isReady) => {
+                this._removeLayersFromMap(layers);
+            });
+        }
+        else
+            ;
+        {
+            this._removeLayersFromMap(layers);
+        }
+    }
+    _removeLayersFromMap(layers) {
         layers.forEach((layer) => {
             this.store().state.update(layer, { added: false });
             if (layer.options.baseLayer === true) {
@@ -39914,7 +39932,7 @@ class CatalogLibraryItemComponent {
         this.catalogRemove.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CatalogLibraryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CatalogLibraryItemComponent, isStandalone: true, selector: "igo-catalog-library-item", inputs: { catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { catalogRemove: "catalogRemove" }, ngImport: i0, template: "<mat-list-item>\n  <span matListItemTitle>\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    @if (catalog().externalProvider) {\n      <mat-icon\n        matListItemIcon\n        class=\"igo-external-provider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        public\n      </mat-icon>\n    }\n    @if (catalog().removable) {\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n        color=\"warn\"\n        (click)=\"removeCatalogFromLibrary($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n    @if (!catalog().removable) {\n      <button class=\"igo-blank\" disabled=\"true\" mat-icon-button>\n        <mat-icon />\n      </button>\n    }\n  </div>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CatalogLibraryItemComponent, isStandalone: true, selector: "igo-catalog-library-item", inputs: { catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { catalogRemove: "catalogRemove" }, ngImport: i0, template: "<mat-list-item>\n  <span matListItemTitle class=\"igo-list-item-with-text-overflow-ellipsis\">\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    @if (catalog().externalProvider) {\n      <mat-icon\n        matListItemIcon\n        class=\"igo-external-provider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        public\n      </mat-icon>\n    }\n    @if (catalog().removable) {\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n        color=\"warn\"\n        (click)=\"removeCatalogFromLibrary($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n    @if (!catalog().removable) {\n      <button class=\"igo-blank\" disabled=\"true\" mat-icon-button>\n        <mat-icon />\n      </button>\n    }\n  </div>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CatalogLibraryItemComponent, decorators: [{
             type: Component,
@@ -39924,7 +39942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         MatTooltipModule,
                         MatButtonModule,
                         IgoLanguageModule
-                    ], template: "<mat-list-item>\n  <span matListItemTitle>\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    @if (catalog().externalProvider) {\n      <mat-icon\n        matListItemIcon\n        class=\"igo-external-provider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        public\n      </mat-icon>\n    }\n    @if (catalog().removable) {\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n        color=\"warn\"\n        (click)=\"removeCatalogFromLibrary($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n    @if (!catalog().removable) {\n      <button class=\"igo-blank\" disabled=\"true\" mat-icon-button>\n        <mat-icon />\n      </button>\n    }\n  </div>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
+                    ], template: "<mat-list-item>\n  <span matListItemTitle class=\"igo-list-item-with-text-overflow-ellipsis\">\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    @if (catalog().externalProvider) {\n      <mat-icon\n        matListItemIcon\n        class=\"igo-external-provider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        public\n      </mat-icon>\n    }\n    @if (catalog().removable) {\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n        color=\"warn\"\n        (click)=\"removeCatalogFromLibrary($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n    @if (!catalog().removable) {\n      <button class=\"igo-blank\" disabled=\"true\" mat-icon-button>\n        <mat-icon />\n      </button>\n    }\n  </div>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
         }], propDecorators: { catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: false }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], catalogRemove: [{ type: i0.Output, args: ["catalogRemove"] }] } });
 
 /**