@npm9912/v-map 0.1.1 → 0.2.1

package/dist/collection/components/v-map-error/v-map-error.js

@@ -0,0 +1,277 @@
+import { Host, h, } from "@stencil/core";
+import { VMapEvents } from "../../utils/events";
+const MSG_COMPONENT = 'v-map-error';
+/**
+ * `<v-map-error>` lauscht auf das `vmap-error` Event seiner Eltern-`<v-map>`
+ * (oder einer per `for`-Attribut adressierten Karte) und rendert die Fehler
+ * als kleine, opinionated gestylte Toast-Stapel innerhalb des Karten-Containers.
+ *
+ * Damit können einfache HTML-Beispiele Fehler sichtbar machen, ohne eine
+ * Zeile JavaScript zu schreiben.
+ *
+ * @example
+ * ```html
+ * <v-map flavour="ol">
+ *   <v-map-error position="top-right" auto-dismiss="5000"></v-map-error>
+ *   <v-map-layergroup group-title="Basiskarten" basemapid="OSM-BASE">
+ *     <v-map-layer-osm id="OSM-BASE" label="OSM"></v-map-layer-osm>
+ *   </v-map-layergroup>
+ * </v-map>
+ * ```
+ *
+ * @part container - Wrapper um den gesamten Toast-Stapel
+ * @part toast - Einzelner Fehler-Toast (anpassbar via `::part(toast)`)
+ * @part badge - Typ-Badge innerhalb des Toasts (z. B. "network", "validation")
+ * @part message - Fehler-Nachricht innerhalb des Toasts
+ * @part close - Schliessen-Button innerhalb des Toasts
+ */
+export class VMapError {
+    host;
+    /**
+     * ID der `<v-map>`-Karte, deren Fehler angezeigt werden sollen.
+     * Wenn nicht angegeben, hängt sich die Komponente an das nächste
+     * `<v-map>`-Vorfahrenelement im DOM-Baum.
+     */
+    for;
+    /**
+     * Position des Toast-Stapels innerhalb des `<v-map>`-Containers.
+     * @default 'top-right'
+     */
+    position = 'top-right';
+    /**
+     * Auto-Dismiss-Zeit in Millisekunden. `0` deaktiviert das automatische
+     * Ausblenden — Toasts bleiben dann sichtbar, bis sie manuell geschlossen
+     * oder durch einen neueren Fehler aus dem Stapel gedrängt werden.
+     * @default 5000
+     */
+    autoDismiss = 5000;
+    /**
+     * Maximale Anzahl gleichzeitig sichtbarer Toasts. Ältere werden bei
+     * Überschreitung am oberen Ende des Stapels entfernt.
+     * @default 3
+     */
+    max = 3;
+    /**
+     * Zusätzliches Logging in die Browser-Console.
+     * - `'none'` (Default): nur Toast-Anzeige, kein Console-Output
+     * - `'console'`: jeder Fehler wird zusätzlich mit `console.error` geloggt
+     * @default 'none'
+     */
+    log = 'none';
+    toasts = [];
+    mapElement = null;
+    boundHandler = (e) => this.onError(e);
+    retryTimer;
+    nextId = 0;
+    // ---- Lifecycle ----------------------------------------------------------
+    connectedCallback() {
+        this.attach();
+    }
+    disconnectedCallback() {
+        this.detach();
+        for (const t of this.toasts) {
+            if (t.timeoutId !== undefined)
+                clearTimeout(t.timeoutId);
+        }
+        this.toasts = [];
+        if (this.retryTimer !== undefined) {
+            clearTimeout(this.retryTimer);
+            this.retryTimer = undefined;
+        }
+    }
+    // ---- DOM-Discovery ------------------------------------------------------
+    attach(retry = 0) {
+        const target = this.for
+            ? document.getElementById(this.for)
+            : this.host.closest('v-map');
+        if (target instanceof HTMLElement) {
+            this.mapElement = target;
+            this.mapElement.addEventListener(VMapEvents.Error, this.boundHandler);
+            return;
+        }
+        // Karte noch nicht im DOM - kurz warten und erneut versuchen
+        if (retry < 50) {
+            this.retryTimer = window.setTimeout(() => this.attach(retry + 1), 100);
+        }
+    }
+    detach() {
+        if (this.mapElement) {
+            this.mapElement.removeEventListener(VMapEvents.Error, this.boundHandler);
+            this.mapElement = null;
+        }
+    }
+    // ---- Error Handling -----------------------------------------------------
+    onError(e) {
+        const detail = e.detail;
+        if (!detail)
+            return;
+        if (this.log === 'console') {
+            console.error(`[${MSG_COMPONENT}]`, detail.type, detail.message, detail);
+        }
+        const id = this.nextId++;
+        const toast = { id, detail };
+        if (this.autoDismiss > 0) {
+            toast.timeoutId = window.setTimeout(() => this.dismiss(id), this.autoDismiss);
+        }
+        const next = [...this.toasts, toast];
+        while (next.length > this.max) {
+            const removed = next.shift();
+            if (removed?.timeoutId !== undefined)
+                clearTimeout(removed.timeoutId);
+        }
+        this.toasts = next;
+    }
+    dismiss(id) {
+        const target = this.toasts.find(t => t.id === id);
+        if (target?.timeoutId !== undefined)
+            clearTimeout(target.timeoutId);
+        this.toasts = this.toasts.filter(t => t.id !== id);
+    }
+    // ---- Render -------------------------------------------------------------
+    render() {
+        return (h(Host, { key: 'edec9031306084f0b55ac6ef5b21e69995ca912c' }, h("div", { key: '665451bfd7a0957b947715654707705904e11d6b', class: "stack", part: "container" }, this.toasts.map(t => (h("div", { key: t.id, class: "toast", part: "toast", role: "alert", "aria-live": "assertive" }, h("span", { class: "badge", part: "badge" }, t.detail.type), h("span", { class: "message", part: "message" }, t.detail.message), h("button", { type: "button", class: "close", part: "close", "aria-label": "Schliessen", onClick: () => this.dismiss(t.id) }, '\u00d7')))))));
+    }
+    static get is() { return "v-map-error"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-error.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-error.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID der `<v-map>`-Karte, deren Fehler angezeigt werden sollen.\nWenn nicht angegeben, h\u00E4ngt sich die Komponente an das n\u00E4chste\n`<v-map>`-Vorfahrenelement im DOM-Baum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastPosition",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "ToastPosition": {
+                            "location": "global",
+                            "id": "global::ToastPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'top-right'"
+                        }],
+                    "text": "Position des Toast-Stapels innerhalb des `<v-map>`-Containers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'top-right'"
+            },
+            "autoDismiss": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "5000"
+                        }],
+                    "text": "Auto-Dismiss-Zeit in Millisekunden. `0` deaktiviert das automatische\nAusblenden \u2014 Toasts bleiben dann sichtbar, bis sie manuell geschlossen\noder durch einen neueren Fehler aus dem Stapel gedr\u00E4ngt werden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-dismiss",
+                "defaultValue": "5000"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "3"
+                        }],
+                    "text": "Maximale Anzahl gleichzeitig sichtbarer Toasts. \u00C4ltere werden bei\n\u00DCberschreitung am oberen Ende des Stapels entfernt."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "3"
+            },
+            "log": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LogMode",
+                    "resolved": "\"console\" | \"none\"",
+                    "references": {
+                        "LogMode": {
+                            "location": "global",
+                            "id": "global::LogMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'none'"
+                        }],
+                    "text": "Zus\u00E4tzliches Logging in die Browser-Console.\n- `'none'` (Default): nur Toast-Anzeige, kein Console-Output\n- `'console'`: jeder Fehler wird zus\u00E4tzlich mit `console.error` geloggt"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "log",
+                "defaultValue": "'none'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "toasts": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/v-map-error/v-map-error.test.js

@@ -0,0 +1,131 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, createTaggedElement, loadVMapBundle, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+import { VMapEvents } from "../../utils/events";
+function dispatchError(target, detail) {
+    target.dispatchEvent(new CustomEvent(VMapEvents.Error, {
+        detail,
+        bubbles: true,
+        composed: true,
+    }));
+}
+async function mountMapWithErrorComponent(attributes = {}) {
+    const map = createLiveMap();
+    const errorEl = createTaggedElement('v-map-error');
+    for (const [name, value] of Object.entries(attributes)) {
+        errorEl.setAttribute(name, value);
+    }
+    map.appendChild(errorEl);
+    document.body.appendChild(map);
+    await waitForHydration(map);
+    await waitForHydration(errorEl);
+    return { map, errorEl };
+}
+describe('v-map-error browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map');
+        await customElements.whenDefined('v-map-error');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates and renders an empty stack initially', async () => {
+        const { errorEl } = await mountMapWithErrorComponent({
+            position: 'top-right',
+            'auto-dismiss': '0',
+        });
+        const stack = errorEl.shadowRoot?.querySelector('.stack');
+        expect(stack).toBeTruthy();
+        expect(stack?.querySelectorAll('.toast').length).toBe(0);
+    });
+    it('renders a toast when its parent v-map dispatches vmap-error', async () => {
+        const { map, errorEl } = await mountMapWithErrorComponent({
+            'auto-dismiss': '0',
+        });
+        dispatchError(map, {
+            type: 'network',
+            message: 'WMS request failed',
+        });
+        await waitFor(() => (errorEl.shadowRoot?.querySelectorAll('.toast').length ?? 0) === 1);
+        const toast = errorEl.shadowRoot.querySelector('.toast');
+        expect(toast.textContent).toContain('WMS request failed');
+        expect(toast.textContent).toContain('network');
+        expect(toast.getAttribute('role')).toBe('alert');
+    });
+    it('positions the stack via the position attribute', async () => {
+        const { map, errorEl } = await mountMapWithErrorComponent({
+            position: 'bottom-left',
+            'auto-dismiss': '0',
+        });
+        dispatchError(map, { type: 'parse', message: 'positioned' });
+        await waitFor(() => (errorEl.shadowRoot?.querySelectorAll('.toast').length ?? 0) === 1);
+        const stack = errorEl.shadowRoot.querySelector('.stack');
+        const stackRect = stack.getBoundingClientRect();
+        const mapRect = map.getBoundingClientRect();
+        // bottom-left: stack should sit near map's bottom-left corner
+        expect(Math.abs(stackRect.left - mapRect.left)).toBeLessThan(40);
+        expect(Math.abs(stackRect.bottom - mapRect.bottom)).toBeLessThan(40);
+    });
+    it('overlays the map container with a high z-index host', async () => {
+        const { errorEl } = await mountMapWithErrorComponent({
+            'auto-dismiss': '0',
+        });
+        const computed = window.getComputedStyle(errorEl);
+        expect(computed.position).toBe('absolute');
+        expect(parseInt(computed.zIndex, 10)).toBeGreaterThanOrEqual(1000);
+        expect(computed.pointerEvents).toBe('none');
+    });
+    it('caps the toast stack at the configured max', async () => {
+        const { map, errorEl } = await mountMapWithErrorComponent({
+            'auto-dismiss': '0',
+            max: '2',
+        });
+        dispatchError(map, { type: 'network', message: 'first' });
+        dispatchError(map, { type: 'network', message: 'second' });
+        dispatchError(map, { type: 'network', message: 'third' });
+        await waitFor(() => (errorEl.shadowRoot?.querySelectorAll('.toast').length ?? 0) === 2);
+        const messages = Array.from(errorEl.shadowRoot.querySelectorAll('.message')).map(node => node.textContent?.trim());
+        expect(messages).toEqual(['second', 'third']);
+    });
+    it('removes a toast when the close button is clicked', async () => {
+        const { map, errorEl } = await mountMapWithErrorComponent({
+            'auto-dismiss': '0',
+        });
+        dispatchError(map, { type: 'parse', message: 'click me away' });
+        await waitFor(() => (errorEl.shadowRoot?.querySelectorAll('.toast').length ?? 0) === 1);
+        const closeBtn = errorEl.shadowRoot.querySelector('.close');
+        closeBtn.click();
+        await waitFor(() => (errorEl.shadowRoot?.querySelectorAll('.toast').length ?? 0) === 0);
+    });
+    it('auto-dismisses a toast after the configured timeout', async () => {
+        const { map, errorEl } = await mountMapWithErrorComponent({
+            'auto-dismiss': '200',
+        });
+        dispatchError(map, { type: 'network', message: 'fades' });
+        await waitFor(() => (errorEl.shadowRoot?.querySelectorAll('.toast').length ?? 0) === 1);
+        await waitFor(() => (errorEl.shadowRoot?.querySelectorAll('.toast').length ?? 0) === 0, 2_000);
+    });
+    it('targets a v-map by id via the for attribute', async () => {
+        const left = createLiveMap();
+        left.id = 'left';
+        const right = createLiveMap();
+        right.id = 'right';
+        const errorEl = createTaggedElement('v-map-error');
+        errorEl.setAttribute('for', 'right');
+        errorEl.setAttribute('auto-dismiss', '0');
+        document.body.appendChild(left);
+        document.body.appendChild(right);
+        document.body.appendChild(errorEl);
+        await waitForHydration(left);
+        await waitForHydration(right);
+        await waitForHydration(errorEl);
+        // dispatch on the wrong map - must NOT show
+        dispatchError(left, { type: 'network', message: 'wrong' });
+        await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+        expect(errorEl.shadowRoot?.querySelectorAll('.toast').length).toBe(0);
+        // dispatch on the right map - must show
+        dispatchError(right, { type: 'network', message: 'right' });
+        await waitFor(() => (errorEl.shadowRoot?.querySelectorAll('.toast').length ?? 0) === 1);
+        expect(errorEl.shadowRoot?.querySelector('.message')?.textContent).toBe('right');
+    });
+});

package/dist/collection/components/v-map-layer-geojson/v-map-layer-geojson.js

@@ -363,7 +363,7 @@ export class VMapLayerGeoJSON {
         return config;
     }
     render() {
-        return h("slot", { key: '093a5de19ea7090df1883b15e379b604dfabc1a1', name: "geojson", onSlotchange: this.onSlotChange });
+        return h("slot", { key: '92aa382d5258a981896ef7316cc269b095304d13', name: "geojson", onSlotchange: this.onSlotChange });
     }
     static get is() { return "v-map-layer-geojson"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/v-map-layer-terrain/v-map-layer-terrain.js

@@ -209,7 +209,7 @@ export class VMapLayerTerrain {
         return config;
     }
     render() {
-        return h("slot", { key: 'c199c1789ddbfdf0c9327a154d82d2ffac090b33' });
+        return h("slot", { key: 'fa57254fc8c1a200ca5e2788bcc9f2beaa388a49' });
     }
     static get is() { return "v-map-layer-terrain"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/v-map-layer-terrain-geotiff/v-map-layer-terrain-geotiff.js

@@ -187,7 +187,7 @@ export class VMapLayerTerrainGeotiff {
         log(MSG_COMPONENT + MSG.COMPONENT_WILL_RENDER);
     }
     render() {
-        return h("slot", { key: 'ec36579674879e6def334a8fc18a471aea8f286a' });
+        return h("slot", { key: '9d6029408f7126a557ae123b418b7aed610b798c' });
     }
     static get is() { return "v-map-layer-terrain-geotiff"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/v-map-layer-tile3d/v-map-layer-tile3d.js

@@ -201,7 +201,7 @@ export class VMapLayerTile3d {
         return config;
     }
     render() {
-        return h("slot", { key: '39223347c38080929d4865fa5ee2de4f3b1f87b1' });
+        return h("slot", { key: '808774d80fbe0948330b8e7f94c08d331bc49a99' });
     }
     static get is() { return "v-map-layer-tile3d"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/v-map-layer-wcs/v-map-layer-wcs.js

@@ -129,7 +129,7 @@ export class VMapLayerWcs {
         };
     }
     render() {
-        return h("slot", { key: 'b42cc02537db832f69250cb4545f7c15ce1e5a93' });
+        return h("slot", { key: '02f2834e39c6e4d041f401d982a97af14d1c3e4d' });
     }
     static get is() { return "v-map-layer-wcs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/v-map-layer-wfs/v-map-layer-wfs.js

@@ -182,7 +182,7 @@ export class VMapLayerWfs {
         return config;
     }
     render() {
-        return h("slot", { key: '347b5c4d982518a9f9c0ed25b1701d06d3f45134' });
+        return h("slot", { key: 'fb3fcca9a332f5b0bacce83b61152869b9afd820' });
     }
     static get is() { return "v-map-layer-wfs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/v-map-layergroup/v-map-layergroup.js

@@ -94,7 +94,7 @@ export class VMapLayerGroup {
         return this.groupId;
     }
     render() {
-        return h("slot", { key: '584a5816d8f73071bf257e3f70a4c2baea2d2f56' });
+        return h("slot", { key: 'cffd8e9ece1377275f6d23503004eeffafa4cfcd' });
     }
     static get is() { return "v-map-layergroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/v-map-style/v-map-style.js

@@ -248,7 +248,7 @@ export class VMapStyle {
         return this.error;
     }
     render() {
-        return (h("div", { key: 'a913bf37c39b0dc70522bb813809c38e5e099ebe', class: "style-container" }, this.isLoading && h("div", { key: 'b8a28051b8ff2ae1d80b1a0af110f9e8342e2260', class: "loading" }, "Loading style..."), this.error && (h("div", { key: 'b7db13abadd3f11f5916296d3e0278ce9044fafc', class: "error" }, "Style Error: ", this.error.message)), this.parsedStyle && (h("div", { key: '56e9327b9794d3eb09c520a17cc1103538f42453', class: "success" }, "Style loaded (", this.format.toUpperCase(), ")", this.getLayerTargets().length > 0 && (h("div", { key: 'b08e604f7fbec96aede1112538b0d785e9b3d226', class: "targets" }, "Targets: ", this.getLayerTargets().join(', '))))), h("slot", { key: '609e6131f414425f639cc81104cbb20da61bc1de' })));
+        return (h("div", { key: '8e1c5cdf6914778d39e8dd74a35d92cd65f7f32c', class: "style-container" }, this.isLoading && h("div", { key: '3c82160e21fa5f8a4ece8399b0e5cc42204104f2', class: "loading" }, "Loading style..."), this.error && (h("div", { key: '2017dd34fb9c95595c72611204ad8b7fcb411098', class: "error" }, "Style Error: ", this.error.message)), this.parsedStyle && (h("div", { key: 'a1d2893f784deca67748dd1a757dd0b2aae39974', class: "success" }, "Style loaded (", this.format.toUpperCase(), ")", this.getLayerTargets().length > 0 && (h("div", { key: '4e798d938ed53bbac980b9e98b05960c907b0447', class: "targets" }, "Targets: ", this.getLayerTargets().join(', '))))), h("slot", { key: 'e32cf2619d0347bcf0ded90cc13ddd5a168cc483' })));
     }
     static get is() { return "v-map-style"; }
     static get encapsulation() { return "shadow"; }