xv-webcomponents 1.22.2 → 1.23.1

package/dist/collection/components/xv-geo-map/xv-geo-map.js

@@ -0,0 +1,984 @@
+import { Host, h } from "@stencil/core";
+// Xv.Api wraps responses in { data: ... } (ResponseEnvelopeFilter); the XvGeoTool API returns raw payloads.
+const unwrap = (json) => (json != null && !Array.isArray(json) && 'data' in json ? json.data : json);
+// Germany bounding box (with a small margin) — the map cannot be panned outside
+const GERMANY_BOUNDS = [[4.5, 46.4], [16.5, 55.6]];
+// amber: distinct from the green selection AND from CARTO's road/water tones
+const PREVIEW_COLOR = '#f59e0b';
+/**
+ * Minimal ATV planner map: MapLibre + PLZ boundaries from the XvGeoTool API.
+ * Click a PLZ to (de)select it. No further UI — selection state and reach
+ * data are emitted via `changeSelection` for the host page to display.
+ *
+ * MapLibre (~250 KB gzip) is loaded lazily when the component scrolls near
+ * the viewport, so the host page's initial load stays untouched.
+ */
+export class XvGeoMap {
+    constructor() {
+        /**
+         * Base URL of the geo API (Xv.Api v1/geo — contract-compatible with the XvGeoTool API).
+         * Default is the same-origin Front Door route, so no CORS is involved on crossvertise pages.
+         */
+        this.apiBase = '/api-fd/v1/geo';
+        /** Indicator whose per-unit values feed the tooltips and the emitted population sum (e.g. ATV_DEVICES) */
+        this.indicator = 'MBI_P_T_2025';
+        /** Unit label shown behind the indicator value in the tooltip */
+        this.indicatorLabel = 'Einwohner';
+        /** Geo level to display and select: plz5, gemeinde, kreis, regbez, bundesland */
+        this.level = 'plz5';
+        /** Shape resolution: medium = simplified geometry (snappy), high = originals */
+        this.resolution = 'medium';
+        /**
+         * Raster tile URL template. Default: CARTO Positron — light, minimal, made for
+         * data overlays; fits the crossvertise design. For production traffic, license
+         * a tile plan (CARTO/MapTiler/Geofabrik) and set the keyed URL here.
+         */
+        this.tiles = 'https://basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}@2x.png';
+        this.attribution = '© CARTO, © OpenStreetMap contributors';
+        /** Initial map center */
+        this.centerLng = 10.45;
+        this.centerLat = 51.16;
+        this.zoom = 5.5;
+        /** Minimum zoom before boundaries are loaded and selectable (use ~5 for bundesland, 9 for plz5) */
+        this.selectZoom = 9;
+        /** Load the map bundle only when scrolled near the viewport (default: true) */
+        this.lazy = true;
+        this.ready = false;
+        this.loadError = false;
+        this.zoomGated = true;
+        this.searchResults = [];
+        this.searchQuery = '';
+        this.searchSeq = 0;
+        this.initStarted = false;
+        this.readyPromise = new Promise(res => (this.resolveReady = res));
+        this.units = new Map(); // code -> unit, accumulated across viewports
+        this.selected = new Map(); // code -> unit
+        this.preview = new Map(); // optimizer proposal (visual only)
+        this.populations = new Map(); // code -> indicator value (for tooltips + local sums)
+        this.fetchedBoxes = []; // areas already loaded
+        this.fetchSeq = 0;
+        this.popSeq = 0;
+    }
+    /** switching the level (e.g. PLZ mode -> Bundesländer mode) resets all loaded data and the selection */
+    levelChanged() {
+        if (!this.map)
+            return;
+        this.units.clear();
+        this.selected.clear();
+        this.populations.clear();
+        this.fetchedBoxes = [];
+        this.fetchSeq++;
+        this.renderUnits();
+        this.updateSelectedFilter();
+        this.emitSelection();
+        // follow the mode with the camera: out to the overview for coarse levels,
+        // in to selectable zoom for fine ones. Deferred so a select-zoom attribute
+        // changing in the same render is already applied.
+        setTimeout(() => {
+            var _a;
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.easeTo({ zoom: this.selectZoom + 0.5, duration: 800 });
+            this.refreshUnits();
+        }, 0);
+    }
+    selectZoomChanged() {
+        if (!this.map)
+            return;
+        ['units-fill', 'units-hover', 'units-line'].forEach(l => this.map.setLayerZoomRange(l, this.selectZoom, 24));
+        this.refreshUnits();
+    }
+    componentDidLoad() {
+        if (!this.lazy || !('IntersectionObserver' in window)) {
+            this.initMap();
+            return;
+        }
+        this.observer = new IntersectionObserver(entries => {
+            var _a;
+            if (entries.some(e => e.isIntersecting)) {
+                (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+                this.initMap();
+            }
+        }, { rootMargin: '300px' });
+        this.observer.observe(this.el);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.map) === null || _b === void 0 ? void 0 : _b.remove();
+    }
+    async initMap() {
+        if (this.initStarted)
+            return;
+        this.initStarted = true;
+        try {
+            const maplibregl = await import('maplibre-gl');
+            if (this.workerUrl) {
+                maplibregl.setWorkerUrl(new URL(this.workerUrl, document.baseURI).href);
+            }
+            const map = new maplibregl.Map({
+                container: this.mapContainer,
+                style: {
+                    version: 8,
+                    sources: {
+                        basemap: {
+                            type: 'raster',
+                            tiles: [this.tiles],
+                            tileSize: 256,
+                            attribution: this.attribution,
+                        },
+                    },
+                    layers: [{ id: 'basemap', type: 'raster', source: 'basemap' }],
+                },
+                center: [this.centerLng, this.centerLat],
+                zoom: this.zoom,
+                minZoom: 5,
+                maxBounds: GERMANY_BOUNDS,
+                attributionControl: { compact: true },
+            });
+            this.map = map;
+            this.el._map = map; // e2e/test handle
+            map.addControl(new maplibregl.NavigationControl({ showCompass: false }));
+            map.on('load', () => {
+                // Design tokens (Masha, MAR-15783): selection = highlight-01 fill / interactive-02
+                // outline; optimizer preview = highlight-02 fill / interactive-01 outline. Fallbacks
+                // keep the previous XV green/amber where the host page lacks the tokens.
+                const style = getComputedStyle(this.el);
+                const token = (name, fallback) => style.getPropertyValue(name).trim() || fallback;
+                const accent = token('--link-primary', '#76b82a');
+                const selectionFill = token('--highlight-01', accent);
+                const selectionLine = token('--interactive-02', accent);
+                const previewFill = token('--highlight-02', PREVIEW_COLOR);
+                const previewLine = token('--interactive-01', PREVIEW_COLOR);
+                // the highlight tokens are pale full-strength tints — at the legacy 0.3 opacity they
+                // vanish over the basemap; the saturated fallbacks still need the low opacity
+                const hasTokens = !!style.getPropertyValue('--highlight-01').trim();
+                const selectedOpacity = hasTokens ? 0.85 : 0.35;
+                const previewOpacity = hasTokens ? 0.85 : 0.3;
+                map.addSource('units', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
+                // boundary mesh only appears at selectable zoom (cleaner overview);
+                // the selected areas stay visible at every zoom level
+                map.addLayer({
+                    id: 'units-fill',
+                    type: 'fill',
+                    source: 'units',
+                    minzoom: this.selectZoom,
+                    paint: { 'fill-color': selectionFill, 'fill-opacity': 0.04 },
+                });
+                map.addLayer({
+                    id: 'units-selected',
+                    type: 'fill',
+                    source: 'units',
+                    filter: ['in', ['get', 'code'], ['literal', []]],
+                    paint: { 'fill-color': selectionFill, 'fill-opacity': selectedOpacity },
+                });
+                // optimizer preview: units a proposal would ADD, in their own tokens so they read
+                // as "suggested" next to the actual selection; visual only, never selected
+                map.addLayer({
+                    id: 'units-preview',
+                    type: 'fill',
+                    source: 'units',
+                    filter: ['in', ['get', 'code'], ['literal', []]],
+                    paint: { 'fill-color': previewFill, 'fill-opacity': previewOpacity },
+                });
+                map.addLayer({
+                    id: 'units-preview-line',
+                    type: 'line',
+                    source: 'units',
+                    filter: ['in', ['get', 'code'], ['literal', []]],
+                    paint: { 'line-color': previewLine, 'line-width': 2 },
+                });
+                map.addLayer({
+                    id: 'units-hover',
+                    type: 'fill',
+                    source: 'units',
+                    minzoom: this.selectZoom,
+                    filter: ['==', ['get', 'code'], ''],
+                    paint: { 'fill-color': selectionFill, 'fill-opacity': 0.15 },
+                });
+                map.addLayer({
+                    id: 'units-line',
+                    type: 'line',
+                    source: 'units',
+                    minzoom: this.selectZoom,
+                    paint: { 'line-color': selectionLine, 'line-width': 2, 'line-dasharray': [2, 1.5] },
+                });
+                this.popup = new maplibregl.Popup({
+                    closeButton: false,
+                    closeOnClick: false,
+                    offset: 12,
+                    maxWidth: 'none',
+                    className: 'xv-geo-map-tooltip',
+                });
+                // instant toggle; a double click fires click twice (select + deselect = net zero)
+                // and then zooms, so no debounce delay is needed
+                map.on('click', 'units-fill', e => { var _a, _b, _c; return this.toggleUnit((_c = (_b = (_a = e.features) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.code); });
+                // below the selectable zoom nothing is clickable — make a click dive to the
+                // clicked area at select level instead of doing nothing
+                map.on('click', e => {
+                    if (map.getZoom() < this.selectZoom) {
+                        map.easeTo({ center: e.lngLat, zoom: this.selectZoom + 0.5, duration: 700 });
+                    }
+                });
+                map.on('mousemove', 'units-fill', e => {
+                    var _a, _b;
+                    const props = (_b = (_a = e.features) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.properties;
+                    if (!props)
+                        return;
+                    map.getCanvas().style.cursor = 'pointer';
+                    map.setFilter('units-hover', ['==', ['get', 'code'], props.code]);
+                    const pop = this.populations.get(props.code);
+                    const selected = this.selected.has(props.code);
+                    this.popup
+                        .setLngLat(e.lngLat)
+                        .setHTML(`<strong>${props.code}</strong> ${props.name}` +
+                        (pop != null ? `<br>${pop.toLocaleString('de-DE')} ${this.indicatorLabel}` : '') +
+                        (selected ? '<br><em>Klicken zum Abwählen</em>' : '<br><em>Klicken zum Auswählen</em>'))
+                        .addTo(map);
+                });
+                map.on('mouseleave', 'units-fill', () => {
+                    map.getCanvas().style.cursor = '';
+                    map.setFilter('units-hover', ['==', ['get', 'code'], '']);
+                    this.popup.remove();
+                });
+                map.on('moveend', () => this.refreshUnits());
+                this.ready = true;
+                this.mapReady.emit();
+                this.resolveReady();
+                this.refreshUnits();
+            });
+            map.on('error', () => {
+                if (!this.ready)
+                    this.loadError = true;
+            });
+        }
+        catch (_a) {
+            this.loadError = true;
+        }
+    }
+    async refreshUnits() {
+        if (!this.map)
+            return;
+        this.zoomGated = this.map.getZoom() < this.selectZoom;
+        if (this.zoomGated)
+            return;
+        const b = this.map.getBounds();
+        // skip the fetch entirely when the viewport is inside an already-loaded area
+        if (this.fetchedBoxes.some(f => b.getNorth() <= f.n && b.getSouth() >= f.s && b.getEast() <= f.e && b.getWest() >= f.w)) {
+            return;
+        }
+        // fetch with a half-viewport margin so small pans stay within the loaded area
+        const mLat = (b.getNorth() - b.getSouth()) / 2;
+        const mLng = (b.getEast() - b.getWest()) / 2;
+        const box = { n: b.getNorth() + mLat, s: b.getSouth() - mLat, e: b.getEast() + mLng, w: b.getWest() - mLng };
+        const seq = ++this.fetchSeq;
+        try {
+            const res = await fetch(`${this.apiBase}/geo-units/${encodeURIComponent(this.level)}/by-bounds?resolution=${this.resolution}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ north: box.n, south: box.s, east: box.e, west: box.w }),
+            });
+            if (!res.ok || seq !== this.fetchSeq)
+                return;
+            const list = unwrap(await res.json());
+            this.fetchedBoxes.push(box);
+            list.forEach(u => this.units.set(u.code, u));
+            this.renderUnits();
+            this.loadPopulations(list.filter(u => !this.populations.has(u.code)));
+        }
+        catch (_a) {
+            /* viewport fetch failed (offline/CORS) — map stays usable, next moveend retries */
+        }
+    }
+    /** fetch the configured indicator per unit for hover tooltips (fire-and-forget) */
+    async loadPopulations(units) {
+        if (!units.length)
+            return;
+        try {
+            const res = await fetch(`${this.apiBase}/indicators/values`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ geoUnitIds: units.map(u => u.id), indicatorCodes: [this.indicator] }),
+            });
+            if (!res.ok)
+                return;
+            const idToCode = new Map(units.map(u => [u.id, u.code]));
+            for (const v of unwrap(await res.json())) {
+                const code = idToCode.get(v.geoUnitId);
+                if (code)
+                    this.populations.set(code, v.value);
+            }
+        }
+        catch (_a) {
+            /* tooltips just omit population */
+        }
+    }
+    renderUnits() {
+        // render everything loaded so far — panning back never flickers or re-parses
+        const source = this.map.getSource('units');
+        source === null || source === void 0 ? void 0 : source.setData({
+            type: 'FeatureCollection',
+            features: [...this.units.values()].map(u => ({
+                type: 'Feature',
+                properties: { code: u.code, name: u.name },
+                geometry: u.geography,
+            })),
+        });
+    }
+    toggleUnit(code) {
+        if (!code)
+            return;
+        if (this.selected.has(code))
+            this.selected.delete(code);
+        else
+            this.selected.set(code, this.units.get(code));
+        this.resetPreview(); // user interaction makes a shown proposal stale
+        this.updateSelectedFilter();
+        this.emitSelection();
+    }
+    updateSelectedFilter() {
+        this.map.setFilter('units-selected', ['in', ['get', 'code'], ['literal', [...this.selected.keys()]]]);
+    }
+    resetPreview() {
+        if (!this.preview.size)
+            return;
+        this.preview.clear();
+        this.updatePreviewFilter();
+    }
+    updatePreviewFilter() {
+        const codes = ['in', ['get', 'code'], ['literal', [...this.preview.keys()]]];
+        this.map.setFilter('units-preview', codes);
+        this.map.setFilter('units-preview-line', codes);
+    }
+    async emitSelection() {
+        var _a, _b, _c;
+        const postalCodes = [...this.selected.keys()];
+        const names = [...this.selected.values()].map(u => { var _a; return (_a = u === null || u === void 0 ? void 0 : u.name) !== null && _a !== void 0 ? _a : ''; });
+        const unitIds = [...this.selected.values()].map(u => u.id);
+        const seq = ++this.popSeq;
+        // populations are already cached per PLZ (tooltips) — sum locally, emit instantly
+        if (postalCodes.every(c => this.populations.has(c))) {
+            const population = postalCodes.reduce((sum, c) => sum + this.populations.get(c), 0);
+            const selection = { postalCodes, names, population: postalCodes.length ? population : null, unitIds };
+            this.changeSelection.emit(selection);
+            return selection;
+        }
+        // fallback: some populations not cached yet — aggregate server-side
+        let population = null;
+        try {
+            const res = await fetch(`${this.apiBase}/indicators/aggregate`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ geoUnitIds: unitIds, indicatorCodes: [this.indicator] }),
+            });
+            if (res.ok)
+                population = (_c = (_b = (_a = unwrap(await res.json())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.sum) !== null && _c !== void 0 ? _c : null;
+        }
+        catch (_d) {
+            /* population stays null — host can fall back */
+        }
+        if (seq !== this.popSeq)
+            return null; // a newer selection superseded this one
+        const selection = { postalCodes, names, population, unitIds };
+        this.changeSelection.emit(selection);
+        return selection;
+    }
+    // ---- public API for host applications (Angular planner) ----
+    /** Select all PLZs within `km` around a start PLZ ("Umkreis"). Replaces the selection unless `add` is true. */
+    async selectByRadius(startPlz, km, add = false) {
+        await this.ensureReady();
+        const url = `${this.apiBase}/geo-units/${encodeURIComponent(this.level)}/by-radius` +
+            `?address=${encodeURIComponent(startPlz)}&km=${km}&country=DE&resolution=${this.resolution}`;
+        const res = await fetch(url);
+        if (!res.ok)
+            throw new Error(`by-radius failed: HTTP ${res.status}`);
+        return this.applySelection(unwrap(await res.json()), add);
+    }
+    /** Select an explicit list of PLZs ("PLZ-Liste" paste, query-param restore). Replaces the selection unless `add` is true. */
+    async selectPostalCodes(codes, add = false) {
+        await this.ensureReady();
+        // 1–5 digits: PLZ5 and Kreis codes are 5, Bundesland codes are 1–2 (a strict \d{5}
+        // silently dropped state selections restored via this method)
+        const clean = [...new Set(codes.map(c => String(c).trim()).filter(c => /^\d{1,5}$/.test(c)))];
+        if (!clean.length)
+            return this.applySelection([], add);
+        const res = await fetch(`${this.apiBase}/geo-units/${encodeURIComponent(this.level)}/lookup?resolution=${this.resolution}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ codes: clean }),
+        });
+        if (!res.ok)
+            throw new Error(`lookup failed: HTTP ${res.status}`);
+        return this.applySelection(unwrap(await res.json()), add);
+    }
+    /** Clear the whole selection. */
+    async clearSelection() {
+        await this.ensureReady();
+        this.selected.clear();
+        this.resetPreview();
+        this.updateSelectedFilter();
+        this.emitSelection();
+    }
+    /**
+     * Highlight what a radius extension would ADD (optimizer proposal): the units within
+     * `km` that are not part of the selection render in the preview color. Visual only —
+     * the selection and its change events stay untouched. Returns the number of added units.
+     */
+    async previewByRadius(startPlz, km) {
+        await this.ensureReady();
+        const url = `${this.apiBase}/geo-units/${encodeURIComponent(this.level)}/by-radius` +
+            `?address=${encodeURIComponent(startPlz)}&km=${km}&country=DE&resolution=${this.resolution}`;
+        const res = await fetch(url);
+        if (!res.ok)
+            throw new Error(`by-radius failed: HTTP ${res.status}`);
+        const units = unwrap(await res.json());
+        this.preview.clear();
+        units.forEach(u => {
+            this.units.set(u.code, u);
+            if (!this.selected.has(u.code))
+                this.preview.set(u.code, u);
+        });
+        this.renderUnits();
+        this.updatePreviewFilter();
+        this.fitTo([...this.selected.values(), ...this.preview.values()]);
+        return this.preview.size;
+    }
+    /** Remove the optimizer proposal highlight. */
+    async clearPreview() {
+        await this.ensureReady();
+        this.resetPreview();
+        this.fitTo([...this.selected.values()]);
+    }
+    // ---- search box (MAR-15783): find areas by name or code, click to select ----
+    onSearchInput(value) {
+        this.searchQuery = value;
+        clearTimeout(this.searchDebounce);
+        const query = value.trim();
+        if (query.length < 2) {
+            this.searchResults = [];
+            return;
+        }
+        this.searchDebounce = setTimeout(async () => {
+            var _a;
+            const seq = ++this.searchSeq;
+            try {
+                const res = await fetch(`${this.apiBase}/geo-units/${encodeURIComponent(this.level)}/search?q=${encodeURIComponent(query)}`);
+                if (!res.ok || seq !== this.searchSeq)
+                    return;
+                this.searchResults = (_a = unwrap(await res.json())) !== null && _a !== void 0 ? _a : [];
+            }
+            catch (_b) {
+                this.searchResults = []; // search silently unavailable — the map stays usable
+            }
+        }, 300);
+    }
+    pickSearchResult(result) {
+        this.searchQuery = '';
+        this.searchResults = [];
+        // adds to the selection and flies there — exactly what "find this area" means here
+        void this.selectPostalCodes([result.code], true).catch(() => undefined);
+    }
+    /** A method call means the map is needed now — start loading even if it hasn't scrolled into view. */
+    ensureReady() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.initMap();
+        return this.readyPromise;
+    }
+    async applySelection(units, add) {
+        if (!add)
+            this.selected.clear();
+        units.forEach(u => {
+            this.units.set(u.code, u);
+            this.selected.set(u.code, u);
+        });
+        this.resetPreview();
+        this.renderUnits();
+        this.updateSelectedFilter();
+        this.fitTo([...this.selected.values()]);
+        await this.loadPopulations(units.filter(u => !this.populations.has(u.code)));
+        return this.emitSelection();
+    }
+    fitTo(units) {
+        if (!units.length)
+            return;
+        let minX = 180, minY = 90, maxX = -180, maxY = -90;
+        const scan = (c) => {
+            if (typeof c[0] === 'number') {
+                minX = Math.min(minX, c[0]);
+                maxX = Math.max(maxX, c[0]);
+                minY = Math.min(minY, c[1]);
+                maxY = Math.max(maxY, c[1]);
+            }
+            else
+                c.forEach(scan);
+        };
+        units.forEach(u => scan(u.geography.coordinates));
+        this.map.fitBounds([[minX, minY], [maxX, maxY]], { padding: 48, maxZoom: 12, duration: 800 });
+    }
+    render() {
+        return (h(Host, { key: 'b8f13f50cdb82e11502053eb7f14c31069580d5b' }, h("div", { key: '71e33adcb25ea4e35279ba8e060b9f9429126b6d', class: "container" }, h("div", { key: '14f9ad939968590fdde28d0be00d3fdf275234b5', class: "map", ref: el => (this.mapContainer = el) }), this.ready && (h("div", { key: '6711f30c53ac1c58090618af44b5dc5fde989223', class: "search" }, h("input", { key: '6e37e84e155721edd451c3465dc5ea426961b3dc', type: "search", placeholder: "Ort oder PLZ suchen", value: this.searchQuery, onInput: e => this.onSearchInput(e.target.value) }), this.searchResults.length > 0 && (h("ul", { key: 'a1df4aceef222e8d64f5d877b3ed73a821fe1f4b', class: "search-results" }, this.searchResults.map(r => (h("li", { key: r.code, onClick: () => this.pickSearchResult(r) }, h("strong", null, r.code), " ", r.name))))))), this.ready && this.zoomGated && (h("div", { key: '2079f7b7223fca39bd6d427b904c02b2a8643a9e', class: "hint" }, "Reinzoomen, um PLZ-Gebiete zu laden")), !this.ready && !this.loadError && (h("div", { key: 'd6ca85b7dd7407d6ed4af23abe74fe9b875f9cf6', class: "skeleton", "aria-busy": "true" }, h("xv-loader-v2", { key: 'b6548dd92dc724cf05c54274aa5d49a09a1f5362', variant: "vertical" }, "Karte wird geladen \u2026"))), this.loadError && h("div", { key: '7df300e7a5172e813d36638153285de64f17e4b9', class: "skeleton error" }, "Karte konnte nicht geladen werden."))));
+    }
+    static get is() { return "xv-geo-map-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-geo-map.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-geo-map.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "apiBase": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base URL of the geo API (Xv.Api v1/geo \u2014 contract-compatible with the XvGeoTool API).\nDefault is the same-origin Front Door route, so no CORS is involved on crossvertise pages."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "api-base",
+                "defaultValue": "'/api-fd/v1/geo'"
+            },
+            "indicator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicator whose per-unit values feed the tooltips and the emitted population sum (e.g. ATV_DEVICES)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator",
+                "defaultValue": "'MBI_P_T_2025'"
+            },
+            "indicatorLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unit label shown behind the indicator value in the tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-label",
+                "defaultValue": "'Einwohner'"
+            },
+            "level": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Geo level to display and select: plz5, gemeinde, kreis, regbez, bundesland"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "'plz5'"
+            },
+            "resolution": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'medium' | 'high'",
+                    "resolved": "\"high\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape resolution: medium = simplified geometry (snappy), high = originals"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resolution",
+                "defaultValue": "'medium'"
+            },
+            "tiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Raster tile URL template. Default: CARTO Positron \u2014 light, minimal, made for\ndata overlays; fits the crossvertise design. For production traffic, license\na tile plan (CARTO/MapTiler/Geofabrik) and set the keyed URL here."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tiles",
+                "defaultValue": "'https://basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}@2x.png'"
+            },
+            "attribution": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "attribution",
+                "defaultValue": "'\u00A9 CARTO, \u00A9 OpenStreetMap contributors'"
+            },
+            "centerLng": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial map center"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "center-lng",
+                "defaultValue": "10.45"
+            },
+            "centerLat": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "center-lat",
+                "defaultValue": "51.16"
+            },
+            "zoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "zoom",
+                "defaultValue": "5.5"
+            },
+            "selectZoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum zoom before boundaries are loaded and selectable (use ~5 for bundesland, 9 for plz5)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-zoom",
+                "defaultValue": "9"
+            },
+            "workerUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Explicit URL of maplibre-gl-worker.mjs (maplibre-gl-shared.mjs must sit next to it).\nNeeded when the host bundler relocates the maplibre chunk so import.meta.url-relative\nworker resolution breaks (e.g. Angular/Vite dev server)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "worker-url"
+            },
+            "lazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Load the map bundle only when scrolled near the viewport (default: true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ready": {},
+            "loadError": {},
+            "zoomGated": {},
+            "searchResults": {},
+            "searchQuery": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeSelection",
+                "name": "changeSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection changed: selected PLZs + population sum of the selection"
+                },
+                "complexType": {
+                    "original": "GeoMapSelection",
+                    "resolved": "GeoMapSelection",
+                    "references": {
+                        "GeoMapSelection": {
+                            "location": "local",
+                            "path": "/home/vsts/work/1/s/src/components/xv-geo-map/xv-geo-map.tsx",
+                            "id": "src/components/xv-geo-map/xv-geo-map.tsx::GeoMapSelection"
+                        }
+                    }
+                }
+            }, {
+                "method": "mapReady",
+                "name": "mapReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Map finished initializing"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "selectByRadius": {
+                "complexType": {
+                    "signature": "(startPlz: string, km: number, add?: boolean) => Promise<GeoMapSelection | null>",
+                    "parameters": [{
+                            "name": "startPlz",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "km",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "add",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GeoMapSelection": {
+                            "location": "local",
+                            "path": "/home/vsts/work/1/s/src/components/xv-geo-map/xv-geo-map.tsx",
+                            "id": "src/components/xv-geo-map/xv-geo-map.tsx::GeoMapSelection"
+                        }
+                    },
+                    "return": "Promise<GeoMapSelection>"
+                },
+                "docs": {
+                    "text": "Select all PLZs within `km` around a start PLZ (\"Umkreis\"). Replaces the selection unless `add` is true.",
+                    "tags": []
+                }
+            },
+            "selectPostalCodes": {
+                "complexType": {
+                    "signature": "(codes: string[], add?: boolean) => Promise<GeoMapSelection | null>",
+                    "parameters": [{
+                            "name": "codes",
+                            "type": "string[]",
+                            "docs": ""
+                        }, {
+                            "name": "add",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GeoMapSelection": {
+                            "location": "local",
+                            "path": "/home/vsts/work/1/s/src/components/xv-geo-map/xv-geo-map.tsx",
+                            "id": "src/components/xv-geo-map/xv-geo-map.tsx::GeoMapSelection"
+                        }
+                    },
+                    "return": "Promise<GeoMapSelection>"
+                },
+                "docs": {
+                    "text": "Select an explicit list of PLZs (\"PLZ-Liste\" paste, query-param restore). Replaces the selection unless `add` is true.",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear the whole selection.",
+                    "tags": []
+                }
+            },
+            "previewByRadius": {
+                "complexType": {
+                    "signature": "(startPlz: string, km: number) => Promise<number>",
+                    "parameters": [{
+                            "name": "startPlz",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "km",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GeoUnit": {
+                            "location": "global",
+                            "id": "global::GeoUnit"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Highlight what a radius extension would ADD (optimizer proposal): the units within\n`km` that are not part of the selection render in the preview color. Visual only \u2014\nthe selection and its change events stay untouched. Returns the number of added units.",
+                    "tags": []
+                }
+            },
+            "clearPreview": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove the optimizer proposal highlight.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "level",
+                "methodName": "levelChanged"
+            }, {
+                "propName": "selectZoom",
+                "methodName": "selectZoomChanged"
+            }];
+    }
+}