@npm9912/v-map 0.1.0 → 0.2.0

package/dist/cjs/v-map_3.cjs.entry.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var vMap_vMapLayerOsm_vMapLayergroup_entry = require('./v-map.v-map-layer-osm.v-map-layergroup-BsXp3BoL.js');
-require('./index-JSwBbvGA.js');
-require('./messages-D7h4m8Tx.js');
-require('./v-map-layer-helper-iAzxAg9I.js');
+var vMap_vMapLayerOsm_vMapLayergroup_entry = require('./v-map.v-map-layer-osm.v-map-layergroup-BJ3_NqAj.js');
+require('./index-DmGHwivM.js');
+require('./messages-CFCxeG8p.js');
+require('./events-BMG7RKne.js');
+require('./v-map-layer-helper-DnWpjZ_Q.js');
 
 
 

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "components/v-map-layer-scatterplot/v-map-layer-scatterplot.js",
     "components/v-map/v-map.js",
     "components/v-map-builder/v-map-builder.js",
+    "components/v-map-error/v-map-error.js",
     "components/v-map-layer-geojson/v-map-layer-geojson.js",
     "components/v-map-layer-geotiff/v-map-layer-geotiff.js",
     "components/v-map-layer-google/v-map-layer-google.js",

package/dist/collection/components/v-map/v-map.css

@@ -1,3 +1,6 @@
 :host {
   display: block;
+  /* Establish a positioning context so overlay children like
+     <v-map-error> can use position: absolute relative to the map. */
+  position: relative;
 }

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

@@ -0,0 +1,136 @@
+:host {
+  /* The host element overlays its parent v-map container.
+     v-map.css sets position: relative on its host so this lines up.
+     pointer-events: none lets map interactions pass through; the toasts
+     themselves re-enable pointer-events so they can still be clicked. */
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.stack {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: min(420px, calc(100% - 32px));
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+:host([position='top-right']) .stack {
+  top: 0;
+  right: 0;
+}
+
+:host([position='top-left']) .stack {
+  top: 0;
+  left: 0;
+}
+
+:host([position='top']) .stack {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+:host([position='bottom-right']) .stack {
+  bottom: 0;
+  right: 0;
+}
+
+:host([position='bottom-left']) .stack {
+  bottom: 0;
+  left: 0;
+}
+
+:host([position='bottom']) .stack {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  background: rgba(28, 28, 32, 0.95);
+  color: #fff;
+  border-radius: 8px;
+  border-left: 4px solid #ff5252;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+  pointer-events: auto;
+  animation: v-map-error-slide-in 200ms ease-out;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+.badge {
+  flex: none;
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(255, 82, 82, 0.2);
+  color: #ff8a8a;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.message {
+  flex: 1 1 auto;
+  word-break: break-word;
+}
+
+.close {
+  flex: none;
+  align-self: flex-start;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin: -2px -4px 0 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}
+
+.close:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+@keyframes v-map-error-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    animation: none;
+  }
+}

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-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"; }