@siemens/element-ng 51.3.0 → 51.4.0

package/fesm2022/siemens-element-ng-maplibre.mjs

@@ -1,11 +1,17 @@
 import * as i0 from '@angular/core';
-import { assertInInjectionContext, computed, input, output, Component, signal } from '@angular/core';
+import { assertInInjectionContext, computed, input, output, Component, signal, viewChild, Directive, inject, DestroyRef, DOCUMENT, booleanAttribute, numberAttribute, linkedSignal, resource, contentChild, TemplateRef, effect, afterRenderEffect } from '@angular/core';
 import { injectIsDarkTheme } from '@siemens/element-ng/theme';
 import { siMapStyle } from '@siemens/map-styles/common';
-import { ClusterPointDirective, GeoJSONSourceComponent, MarkersForClustersComponent } from '@maplibre/ngx-maplibre-gl';
+import { GeoJSONSourceComponent, ClusterPointDirective, MarkersForClustersComponent, MapService, PopupComponent } from '@maplibre/ngx-maplibre-gl';
 import { t, SiTranslatePipe, injectSiTranslateService } from '@siemens/element-translate-ng/translate';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { NgTemplateOutlet } from '@angular/common';
+import { elementCancel } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
+import { SiLoadingSpinnerDirective } from '@siemens/element-ng/loading-spinner';
+import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
+import { from, map } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { map } from 'rxjs';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -292,12 +298,17 @@ class SiClusterSourceComponent {
     /** Stores selection for the projected cluster-popover integration. */
     selectedCluster = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedCluster" }] : /* istanbul ignore next */ []));
-    async selectCluster(feature) {
-        this.clusterClick.emit(feature);
-        this.selectedCluster.set({ ...feature, geometry: feature.geometry });
+    source = viewChild.required(GeoJSONSourceComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /**
+     * Returns a page of original points belonging to a cluster.
+     * @see https://maplibre.org/maplibre-gl-js/docs/API/classes/GeoJSONSource/#getclusterleaves
+     */
+    getClusterLeaves(clusterId, limit, offset) {
+        return this.source().getClusterLeaves(clusterId, limit, offset);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterSourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiClusterSourceComponent, isStandalone: true, selector: "si-cluster-source", inputs: { sourceId: { classPropertyName: "sourceId", publicName: "sourceId", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, groupProperty: { classPropertyName: "groupProperty", publicName: "groupProperty", isSignal: true, isRequired: false, transformFunction: null }, groupColors: { classPropertyName: "groupColors", publicName: "groupColors", isSignal: true, isRequired: false, transformFunction: null }, statusProperty: { classPropertyName: "statusProperty", publicName: "statusProperty", isSignal: true, isRequired: false, transformFunction: null }, clusterRadius: { classPropertyName: "clusterRadius", publicName: "clusterRadius", isSignal: true, isRequired: false, transformFunction: null }, clusterMaxZoom: { classPropertyName: "clusterMaxZoom", publicName: "clusterMaxZoom", isSignal: true, isRequired: false, transformFunction: null }, clusterMinPoints: { classPropertyName: "clusterMinPoints", publicName: "clusterMinPoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clusterClick: "clusterClick" }, ngImport: i0, template: "<mgl-geojson-source\n  #source\n  [id]=\"sourceId()\"\n  [data]=\"data()\"\n  [cluster]=\"true\"\n  [clusterRadius]=\"clusterRadius()\"\n  [clusterMaxZoom]=\"clusterMaxZoom()\"\n  [clusterMinPoints]=\"clusterMinPoints()\"\n  [clusterProperties]=\"clusterConfiguration().clusterProperties\"\n/>\n\n<mgl-markers-for-clusters [source]=\"sourceId()\">\n  <ng-template let-feature mglClusterPoint>\n    <si-cluster-marker\n      [feature]=\"feature\"\n      [segments]=\"clusterConfiguration().segments\"\n      (markerClick)=\"selectCluster(feature)\"\n    />\n  </ng-template>\n</mgl-markers-for-clusters>\n\n<ng-content select=\"si-cluster-popover,[siClusterPopoverOutlet]\" />\n", dependencies: [{ kind: "directive", type: ClusterPointDirective, selector: "ng-template[mglClusterPoint]" }, { kind: "component", type: GeoJSONSourceComponent, selector: "mgl-geojson-source", inputs: ["data", "maxzoom", "attribution", "buffer", "tolerance", "cluster", "clusterRadius", "clusterMaxZoom", "clusterMinPoints", "clusterProperties", "lineMetrics", "generateId", "promoteId", "filter"] }, { kind: "component", type: MarkersForClustersComponent, selector: "mgl-markers-for-clusters", inputs: ["source"] }, { kind: "component", type: SiClusterMarkerComponent, selector: "si-cluster-marker", inputs: ["feature", "segments"], outputs: ["markerClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiClusterSourceComponent, isStandalone: true, selector: "si-cluster-source", inputs: { sourceId: { classPropertyName: "sourceId", publicName: "sourceId", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, groupProperty: { classPropertyName: "groupProperty", publicName: "groupProperty", isSignal: true, isRequired: false, transformFunction: null }, groupColors: { classPropertyName: "groupColors", publicName: "groupColors", isSignal: true, isRequired: false, transformFunction: null }, statusProperty: { classPropertyName: "statusProperty", publicName: "statusProperty", isSignal: true, isRequired: false, transformFunction: null }, clusterRadius: { classPropertyName: "clusterRadius", publicName: "clusterRadius", isSignal: true, isRequired: false, transformFunction: null }, clusterMaxZoom: { classPropertyName: "clusterMaxZoom", publicName: "clusterMaxZoom", isSignal: true, isRequired: false, transformFunction: null }, clusterMinPoints: { classPropertyName: "clusterMinPoints", publicName: "clusterMinPoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clusterClick: "clusterClick" }, viewQueries: [{ propertyName: "source", first: true, predicate: GeoJSONSourceComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<mgl-geojson-source\n  #source\n  [id]=\"sourceId()\"\n  [data]=\"data()\"\n  [cluster]=\"true\"\n  [clusterRadius]=\"clusterRadius()\"\n  [clusterMaxZoom]=\"clusterMaxZoom()\"\n  [clusterMinPoints]=\"clusterMinPoints()\"\n  [clusterProperties]=\"clusterConfiguration().clusterProperties\"\n/>\n\n<mgl-markers-for-clusters [source]=\"sourceId()\">\n  <ng-template let-feature mglClusterPoint>\n    <si-cluster-marker\n      [feature]=\"feature\"\n      [segments]=\"clusterConfiguration().segments\"\n      (markerClick)=\"clusterClick.emit(feature)\"\n    />\n  </ng-template>\n</mgl-markers-for-clusters>\n\n<ng-content />\n", dependencies: [{ kind: "directive", type: ClusterPointDirective, selector: "ng-template[mglClusterPoint]" }, { kind: "component", type: GeoJSONSourceComponent, selector: "mgl-geojson-source", inputs: ["data", "maxzoom", "attribution", "buffer", "tolerance", "cluster", "clusterRadius", "clusterMaxZoom", "clusterMinPoints", "clusterProperties", "lineMetrics", "generateId", "promoteId", "filter"] }, { kind: "component", type: MarkersForClustersComponent, selector: "mgl-markers-for-clusters", inputs: ["source"] }, { kind: "component", type: SiClusterMarkerComponent, selector: "si-cluster-marker", inputs: ["feature", "segments"], outputs: ["markerClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterSourceComponent, decorators: [{
             type: Component,
@@ -306,8 +317,280 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         GeoJSONSourceComponent,
                         MarkersForClustersComponent,
                         SiClusterMarkerComponent
-                    ], template: "<mgl-geojson-source\n  #source\n  [id]=\"sourceId()\"\n  [data]=\"data()\"\n  [cluster]=\"true\"\n  [clusterRadius]=\"clusterRadius()\"\n  [clusterMaxZoom]=\"clusterMaxZoom()\"\n  [clusterMinPoints]=\"clusterMinPoints()\"\n  [clusterProperties]=\"clusterConfiguration().clusterProperties\"\n/>\n\n<mgl-markers-for-clusters [source]=\"sourceId()\">\n  <ng-template let-feature mglClusterPoint>\n    <si-cluster-marker\n      [feature]=\"feature\"\n      [segments]=\"clusterConfiguration().segments\"\n      (markerClick)=\"selectCluster(feature)\"\n    />\n  </ng-template>\n</mgl-markers-for-clusters>\n\n<ng-content select=\"si-cluster-popover,[siClusterPopoverOutlet]\" />\n" }]
-        }], propDecorators: { sourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceId", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], groupProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupProperty", required: false }] }], groupColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupColors", required: false }] }], statusProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusProperty", required: false }] }], clusterRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterRadius", required: false }] }], clusterMaxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterMaxZoom", required: false }] }], clusterMinPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterMinPoints", required: false }] }], clusterClick: [{ type: i0.Output, args: ["clusterClick"] }] } });
+                    ], template: "<mgl-geojson-source\n  #source\n  [id]=\"sourceId()\"\n  [data]=\"data()\"\n  [cluster]=\"true\"\n  [clusterRadius]=\"clusterRadius()\"\n  [clusterMaxZoom]=\"clusterMaxZoom()\"\n  [clusterMinPoints]=\"clusterMinPoints()\"\n  [clusterProperties]=\"clusterConfiguration().clusterProperties\"\n/>\n\n<mgl-markers-for-clusters [source]=\"sourceId()\">\n  <ng-template let-feature mglClusterPoint>\n    <si-cluster-marker\n      [feature]=\"feature\"\n      [segments]=\"clusterConfiguration().segments\"\n      (markerClick)=\"clusterClick.emit(feature)\"\n    />\n  </ng-template>\n</mgl-markers-for-clusters>\n\n<ng-content />\n" }]
+        }], propDecorators: { sourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceId", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], groupProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupProperty", required: false }] }], groupColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupColors", required: false }] }], statusProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusProperty", required: false }] }], clusterRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterRadius", required: false }] }], clusterMaxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterMaxZoom", required: false }] }], clusterMinPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterMinPoints", required: false }] }], clusterClick: [{ type: i0.Output, args: ["clusterClick"] }], source: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GeoJSONSourceComponent), { isSignal: true }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Template for custom location content inside `si-cluster-popover`.
+ *
+ * Receives a {@link ClusterPopoverContext} with all locations loaded so far. Loading feedback,
+ * error recovery, and the "Load more" button are handled by the popover.
+ *
+ * @experimental
+ */
+class SiClusterPopoverTemplateDirective {
+    /** @internal */
+    static ngTemplateContextGuard(directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterPopoverTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiClusterPopoverTemplateDirective, isStandalone: true, selector: "[siClusterPopoverTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterPopoverTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siClusterPopoverTemplate]'
+                }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Optional popup with incrementally loaded locations projected into a `si-cluster-source`.
+ *
+ * @experimental
+ */
+class SiClusterPopoverComponent {
+    static idCounter = 0;
+    destroyRef = inject(DestroyRef);
+    focusTrapFactory = inject(FocusTrapFactory);
+    document = inject(DOCUMENT);
+    source = inject(SiClusterSourceComponent);
+    mapService = inject(MapService);
+    resizeObserver = inject(ResizeObserverService);
+    /**
+     * Maximum width passed to the MapLibre popup.
+     * @defaultValue '320px'
+     */
+    maxWidth = input('320px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the popup closes when the map moves.
+     * @defaultValue true
+     */
+    closeOnMove = input(true, { ...(ngDevMode ? { debugName: "closeOnMove" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Number of locations loaded initially and with each "Load more" action.
+     * @defaultValue 8
+     */
+    pageSize = input(8, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Feature property displayed in the default list.
+     * @defaultValue 'name'
+     */
+    labelProperty = input('name', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelProperty" }] : /* istanbul ignore next */ []));
+    /**
+     * Feature property displayed as the description in the default list.
+     * @defaultValue 'description'
+     */
+    descriptionProperty = input('description', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionProperty" }] : /* istanbul ignore next */ []));
+    dialog = viewChild('dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
+    scrollRegion = viewChild('scrollRegion', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollRegion" }] : /* istanbul ignore next */ []));
+    batchButton = viewChild('batchButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "batchButton" }] : /* istanbul ignore next */ []));
+    selectedCluster = linkedSignal(() => {
+        this.source.sourceId();
+        this.source.data();
+        this.source.groupProperty();
+        this.source.groupColors();
+        this.source.statusProperty();
+        this.source.clusterRadius();
+        this.source.clusterMaxZoom();
+        this.source.clusterMinPoints();
+        return undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedCluster" }] : /* istanbul ignore next */ []));
+    batchFocusRequested = linkedSignal(() => {
+        this.selectedCluster();
+        this.pageSize();
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "batchFocusRequested" }] : /* istanbul ignore next */ []));
+    offset = linkedSignal(() => {
+        this.selectedCluster();
+        this.pageSize();
+        return 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    displayedFeatures = linkedSignal({ ...(ngDevMode ? { debugName: "displayedFeatures" } : /* istanbul ignore next */ {}), source: () => ({
+            cluster: this.selectedCluster(),
+            limit: this.pageSize(),
+            offset: this.offset(),
+            features: this.leaves.hasValue() ? this.leaves.value() : undefined
+        }),
+        computation: (current, previous) => {
+            if (!current.cluster) {
+                return [];
+            }
+            const retainedFeatures = current.cluster === previous?.source.cluster && current.limit === previous.source.limit
+                ? previous.value
+                : [];
+            return current.features
+                ? [...retainedFeatures.slice(0, current.offset), ...current.features]
+                : retainedFeatures;
+        } });
+    titleId = `__si-cluster-popover-title-${SiClusterPopoverComponent.idCounter++}`;
+    popupCoordinates = linkedSignal(() => this.selectedCluster()?.geometry.coordinates, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popupCoordinates" }] : /* istanbul ignore next */ []));
+    availableBlockSize = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableBlockSize" }] : /* istanbul ignore next */ []));
+    leaves = resource({ ...(ngDevMode ? { debugName: "leaves" } : /* istanbul ignore next */ {}), params: () => {
+            const cluster = this.selectedCluster();
+            return cluster
+                ? {
+                    cluster,
+                    limit: this.pageSize(),
+                    offset: this.offset()
+                }
+                : undefined;
+        },
+        loader: ({ params }) => this.source.getClusterLeaves(Number(params.cluster.properties?.cluster_id), params.limit, params.offset) });
+    context = computed(() => {
+        const features = this.displayedFeatures();
+        const cluster = this.selectedCluster();
+        if (!cluster) {
+            return undefined;
+        }
+        return {
+            $implicit: features,
+            features,
+            total: Number(cluster.properties?.point_count),
+            loading: this.leaves.isLoading(),
+            error: this.leaves.error(),
+            cluster,
+            close: this.close
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    template = contentChild(SiClusterPopoverTemplateDirective, { ...(ngDevMode ? { debugName: "template" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    clusterPopoverTitle = t(() => $localize `:@@SI_MAP_CLUSTER.POPOVER_TITLE:Cluster with {{count}} locations`);
+    locationsLabel = t(() => $localize `:@@SI_MAP_CLUSTER.LOCATIONS:Cluster locations`);
+    errorText = t(() => $localize `:@@SI_MAP_CLUSTER.ERROR:Could not load locations.`);
+    loadMoreText = t(() => $localize `:@@SI_MAP_CLUSTER.LOAD_MORE:Load more`);
+    retryText = t(() => $localize `:@@SI_MAP_CLUSTER.RETRY:Retry`);
+    closeText = t(() => $localize `:@@SI_MAP_CLUSTER.CLOSE:Close`);
+    icons = addIcons({ elementCancel });
+    close = () => this.selectedCluster.set(undefined);
+    loadBatch = () => {
+        if (this.leaves.isLoading()) {
+            return;
+        }
+        // Safari does not focus buttons on click.
+        this.batchButton()?.nativeElement.focus({ preventScroll: true });
+        this.batchFocusRequested.set(true);
+        if (this.leaves.error()) {
+            this.leaves.reload();
+        }
+        else {
+            this.offset.set(this.displayedFeatures().length);
+        }
+    };
+    constructor() {
+        const subscription = this.source.clusterClick.subscribe(cluster => {
+            this.selectedCluster.set(cluster);
+        });
+        this.destroyRef.onDestroy(() => subscription.unsubscribe());
+        effect(onCleanup => {
+            const dialog = this.dialog()?.nativeElement;
+            const cluster = this.selectedCluster();
+            if (!dialog || !cluster) {
+                return;
+            }
+            const focusTrap = this.focusTrapFactory.create(dialog);
+            const focusSubscription = from(focusTrap.focusFirstTabbableElementWhenReady()).subscribe();
+            const map = this.mapService.mapInstance;
+            const mapContainer = map.getContainer();
+            const updateAvailableSpace = () => {
+                const [longitude, latitude] = cluster.geometry.coordinates;
+                const { y } = map.project([longitude, latitude]);
+                const height = mapContainer.clientHeight;
+                this.availableBlockSize.set(Math.min(height, Math.max(y, height - y)));
+            };
+            updateAvailableSpace();
+            const mapResizeSubscription = this.resizeObserver
+                .observe(mapContainer, 0)
+                .subscribe(updateAvailableSpace);
+            const dialogResizeSubscription = this.resizeObserver.observe(dialog, 0).subscribe(() => {
+                // A new coordinate reference refreshes MapLibre's popup anchor.
+                this.popupCoordinates.update(coordinates => (coordinates ? [...coordinates] : undefined));
+            });
+            const moveSubscription = map.on('move', updateAvailableSpace);
+            onCleanup(() => {
+                mapResizeSubscription.unsubscribe();
+                dialogResizeSubscription.unsubscribe();
+                moveSubscription.unsubscribe();
+                focusSubscription.unsubscribe();
+                focusTrap.destroy();
+            });
+        });
+        afterRenderEffect({
+            earlyRead: () => {
+                if (!this.batchFocusRequested()) {
+                    return undefined;
+                }
+                const loading = this.leaves.isLoading();
+                const button = this.batchButton()?.nativeElement;
+                const active = this.document.activeElement;
+                return {
+                    loading,
+                    button: active === button ? button : undefined,
+                    scrollRegion: !button && active === this.document.body
+                        ? this.scrollRegion()?.nativeElement
+                        : undefined
+                };
+            },
+            write: state => {
+                const request = state();
+                if (!request || request.loading) {
+                    return;
+                }
+                this.batchFocusRequested.set(false);
+                if (request.button) {
+                    request.button.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                }
+                else {
+                    request.scrollRegion?.focus({ preventScroll: true });
+                }
+            }
+        });
+        effect(onCleanup => {
+            if (!this.selectedCluster()) {
+                return;
+            }
+            const trigger = this.document.activeElement;
+            onCleanup(() => {
+                const active = this.document.activeElement;
+                if (trigger instanceof HTMLElement &&
+                    trigger.isConnected &&
+                    (active === this.document.body || this.dialog()?.nativeElement.contains(active))) {
+                    trigger.focus();
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiClusterPopoverComponent, isStandalone: true, selector: "si-cluster-popover", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnMove: { classPropertyName: "closeOnMove", publicName: "closeOnMove", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, labelProperty: { classPropertyName: "labelProperty", publicName: "labelProperty", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: SiClusterPopoverTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }, { propertyName: "scrollRegion", first: true, predicate: ["scrollRegion"], descendants: true, isSignal: true }, { propertyName: "batchButton", first: true, predicate: ["batchButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (context(); as context) {\n  <mgl-popup\n    [maxWidth]=\"maxWidth()\"\n    [lngLat]=\"popupCoordinates()\"\n    [closeOnMove]=\"closeOnMove()\"\n    [focusAfterOpen]=\"false\"\n    [closeButton]=\"false\"\n    (popupClose)=\"context.close()\"\n  >\n    <section\n      #dialog\n      class=\"cluster-popover d-flex flex-column\"\n      role=\"dialog\"\n      [attr.aria-labelledby]=\"titleId\"\n      [style.--_si-cluster-popover-available-block-size.px]=\"availableBlockSize()\"\n      (keydown.escape)=\"$event.stopPropagation(); context.close()\"\n    >\n      <div class=\"popover-header flex-shrink-0\">\n        <strong class=\"flex-grow-1\" [id]=\"titleId\">\n          {{ clusterPopoverTitle | translate: { count: context.total } }}\n        </strong>\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-sm btn-ghost ms-2\"\n          [attr.aria-label]=\"closeText | translate\"\n          (click)=\"context.close()\"\n        >\n          <si-icon [icon]=\"icons.elementCancel\" />\n        </button>\n      </div>\n      <div\n        class=\"cluster-popover-body d-flex flex-column p-2\"\n        [siLoading]=\"context.loading\"\n        [blocking]=\"true\"\n      >\n        <div\n          #scrollRegion\n          class=\"cluster-popover-scroll overflow-auto\"\n          role=\"region\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"locationsLabel | translate\"\n        >\n          <div [inert]=\"context.loading\" [attr.aria-busy]=\"context.loading\">\n            @if (template(); as customTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"customTemplate\"\n                [ngTemplateOutletContext]=\"context\"\n              />\n            } @else {\n              <ul class=\"list-unstyled mb-0\">\n                @for (feature of context.features; track feature.id ?? $index) {\n                  <li class=\"list-item p-4\">\n                    <div class=\"list-item-title pt-0\">\n                      {{ feature.properties?.[labelProperty()] }}\n                    </div>\n                    <div class=\"list-item-description mb-0\">\n                      {{ feature.properties?.[descriptionProperty()] }}\n                    </div>\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n          @if (context.error && !context.loading) {\n            <p role=\"alert\" class=\"mt-4 mb-0\">{{ errorText | translate }}</p>\n          }\n          @if (\n            context.error ||\n            (context.features.length > 0 && context.features.length < context.total)\n          ) {\n            <button\n              #batchButton\n              type=\"button\"\n              class=\"btn btn-link d-flex w-100 justify-content-center p-4 focus-inside\"\n              [class.disabled]=\"context.loading\"\n              [attr.aria-disabled]=\"context.loading\"\n              (click)=\"loadBatch()\"\n            >\n              {{ (context.error ? retryText : loadMoreText) | translate }}\n            </button>\n          }\n        </div>\n      </div>\n    </section>\n  </mgl-popup>\n}\n", styles: [".cluster-popover{min-inline-size:200px;max-block-size:calc(var(--_si-cluster-popover-available-block-size, 100dvb) - var(--si-sys-sizing-spacing-y-60) * 2)}.cluster-popover-body,.cluster-popover-scroll{min-block-size:0}.cluster-popover-scroll{overscroll-behavior-block:contain}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopupComponent, selector: "mgl-popup", inputs: ["closeButton", "closeOnClick", "closeOnMove", "focusAfterOpen", "anchor", "className", "maxWidth", "subpixelPositioning", "feature", "lngLat", "marker", "offset"], outputs: ["popupClose", "popupOpen"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiLoadingSpinnerDirective, selector: "[siLoading]", inputs: ["siLoading", "blocking", "initialDelay"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-cluster-popover', imports: [
+                        NgTemplateOutlet,
+                        PopupComponent,
+                        SiIconComponent,
+                        SiLoadingSpinnerDirective,
+                        SiTranslatePipe
+                    ], template: "@if (context(); as context) {\n  <mgl-popup\n    [maxWidth]=\"maxWidth()\"\n    [lngLat]=\"popupCoordinates()\"\n    [closeOnMove]=\"closeOnMove()\"\n    [focusAfterOpen]=\"false\"\n    [closeButton]=\"false\"\n    (popupClose)=\"context.close()\"\n  >\n    <section\n      #dialog\n      class=\"cluster-popover d-flex flex-column\"\n      role=\"dialog\"\n      [attr.aria-labelledby]=\"titleId\"\n      [style.--_si-cluster-popover-available-block-size.px]=\"availableBlockSize()\"\n      (keydown.escape)=\"$event.stopPropagation(); context.close()\"\n    >\n      <div class=\"popover-header flex-shrink-0\">\n        <strong class=\"flex-grow-1\" [id]=\"titleId\">\n          {{ clusterPopoverTitle | translate: { count: context.total } }}\n        </strong>\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-sm btn-ghost ms-2\"\n          [attr.aria-label]=\"closeText | translate\"\n          (click)=\"context.close()\"\n        >\n          <si-icon [icon]=\"icons.elementCancel\" />\n        </button>\n      </div>\n      <div\n        class=\"cluster-popover-body d-flex flex-column p-2\"\n        [siLoading]=\"context.loading\"\n        [blocking]=\"true\"\n      >\n        <div\n          #scrollRegion\n          class=\"cluster-popover-scroll overflow-auto\"\n          role=\"region\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"locationsLabel | translate\"\n        >\n          <div [inert]=\"context.loading\" [attr.aria-busy]=\"context.loading\">\n            @if (template(); as customTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"customTemplate\"\n                [ngTemplateOutletContext]=\"context\"\n              />\n            } @else {\n              <ul class=\"list-unstyled mb-0\">\n                @for (feature of context.features; track feature.id ?? $index) {\n                  <li class=\"list-item p-4\">\n                    <div class=\"list-item-title pt-0\">\n                      {{ feature.properties?.[labelProperty()] }}\n                    </div>\n                    <div class=\"list-item-description mb-0\">\n                      {{ feature.properties?.[descriptionProperty()] }}\n                    </div>\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n          @if (context.error && !context.loading) {\n            <p role=\"alert\" class=\"mt-4 mb-0\">{{ errorText | translate }}</p>\n          }\n          @if (\n            context.error ||\n            (context.features.length > 0 && context.features.length < context.total)\n          ) {\n            <button\n              #batchButton\n              type=\"button\"\n              class=\"btn btn-link d-flex w-100 justify-content-center p-4 focus-inside\"\n              [class.disabled]=\"context.loading\"\n              [attr.aria-disabled]=\"context.loading\"\n              (click)=\"loadBatch()\"\n            >\n              {{ (context.error ? retryText : loadMoreText) | translate }}\n            </button>\n          }\n        </div>\n      </div>\n    </section>\n  </mgl-popup>\n}\n", styles: [".cluster-popover{min-inline-size:200px;max-block-size:calc(var(--_si-cluster-popover-available-block-size, 100dvb) - var(--si-sys-sizing-spacing-y-60) * 2)}.cluster-popover-body,.cluster-popover-scroll{min-block-size:0}.cluster-popover-scroll{overscroll-behavior-block:contain}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], closeOnMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnMove", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], labelProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelProperty", required: false }] }], descriptionProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionProperty", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }], scrollRegion: [{ type: i0.ViewChild, args: ['scrollRegion', { isSignal: true }] }], batchButton: [{ type: i0.ViewChild, args: ['batchButton', { isSignal: true }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiClusterPopoverTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 const createDefaultLocale = () => ({
     'AttributionControl.ToggleAttribution': t(() => $localize `:@@SI_MAP.TOGGLE_ATTRIBUTION:Toggle attribution`),
@@ -397,5 +680,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiClusterSourceComponent, SiStatusMarkerComponent, injectSiMapStyle, injectSiMapTranslations };
+export { SiClusterPopoverComponent, SiClusterPopoverTemplateDirective, SiClusterSourceComponent, SiStatusMarkerComponent, injectSiMapStyle, injectSiMapTranslations };
 //# sourceMappingURL=siemens-element-ng-maplibre.mjs.map