@edugis-org/webmapx 0.1.0

package/dist-lib/webmapx-import-layer-tool-DRYviHd5.js

@@ -0,0 +1,250 @@
+import { r as e, t } from "./decorate-CWgUV1hU.js";
+import { t as n } from "./webmapx-base-tool-Dm9NAWLD.js";
+import { i as r, o as i } from "./decorators-B35AgiCU.js";
+import { discoverLayers as a } from "./layer-discovery-afWzu5hY.js";
+import { css as o, html as s } from "lit";
+//#region src/components/webmapx-import-layer-tool.ts
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.active = !1, this.mapElement = null, this.url = "", this.discovering = !1, this.results = [], this.selected = /* @__PURE__ */ new Set(), this.error = null, this.filterText = "", this.catalog = [], this.fileDropActive = !1, this.fileImporting = !1, this.discoverySeq = 0;
+	}
+	static {
+		this.styles = o`
+    :host { display: block; width: 100%; pointer-events: auto; }
+    :host([hidden]) { display: none !important; }
+    .container { width: 100%; color: var(--color-text-primary); box-sizing: border-box; padding: var(--webmapx-tool-padding, 0); }
+    .section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin: 10px 0 6px; }
+    .section-title:first-child { margin-top: 0; }
+    .urlbox { display:flex; gap:6px; align-items:center; }
+    input[type="text"] { flex:1; padding:6px; min-width:0; }
+    .error { color: var(--sl-color-danger-600, #c0392b); font-size: 12px; margin-top: 6px; }
+    .filter { width:100%; box-sizing:border-box; padding:6px; margin-top:8px; }
+    .results { margin-top:8px; max-height:50%; overflow:auto; }
+    .results ul { list-style: none; margin: 0; padding: 0; }
+    .result-item { padding:6px; border-bottom:1px solid rgba(0,0,0,0.05); display:flex; align-items:center; gap:8px; }
+    .meta { font-size: 11px; color: var(--color-text-secondary); }
+    .actions { margin: 8px 0; display:flex; justify-content:flex-end; gap:6px; }
+    .file-row { display: flex; gap: 6px; align-items: center; }
+    .drop-zone {
+      border: 2px dashed var(--sl-color-neutral-400);
+      border-radius: var(--sl-border-radius-medium);
+      padding: 16px 8px;
+      text-align: center;
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: border-color 0.15s, background 0.15s;
+      margin-top: 6px;
+    }
+    .drop-zone:hover, .drop-zone.active {
+      border-color: var(--sl-color-primary-500);
+      background: var(--sl-color-primary-50);
+      color: var(--sl-color-primary-700);
+    }
+    input[type="file"] { display: none; }
+  `;
+	}
+	onMapAttached(t) {
+		super.onMapAttached(t), this.adapter = t, this.mapElement = e(this);
+	}
+	onMapDetached() {
+		this.adapter = null, this.mapElement = null, super.onMapDetached();
+	}
+	onConfigReady(e) {}
+	onStateChanged(e) {}
+	activate() {
+		this.active = !0, this.hidden = !1, setTimeout(() => {
+			(this.renderRoot?.querySelector("input"))?.focus();
+		}, 0);
+	}
+	deactivate() {
+		this.active = !1, this.hidden = !0;
+	}
+	async discoverUrl(e) {
+		let t = ++this.discoverySeq;
+		this.discovering = !0, this.error = null, this.results = [], this.catalog = [], this.selected = /* @__PURE__ */ new Set(), this.filterText = "";
+		try {
+			let n = await a(e);
+			if (t !== this.discoverySeq) return;
+			this.results = n.layers, this.catalog = n.catalog ?? [], this.selected = /* @__PURE__ */ new Set(), n.layers.length === 0 && this.catalog.length === 0 && (this.error = "No services discovered at this URL.");
+		} catch (e) {
+			if (t !== this.discoverySeq) return;
+			console.error("layer discovery failed", e), this.error = e instanceof Error ? e.message : "Discovery failed";
+		} finally {
+			t === this.discoverySeq && (this.discovering = !1);
+		}
+	}
+	handleDiscover() {
+		let e = (this.renderRoot?.querySelector("input")?.value ?? this.url).trim();
+		this.url = e, e && this.discoverUrl(e);
+	}
+	openCatalogEntry(e) {
+		this.discoverUrl(e.url);
+	}
+	get filteredResults() {
+		let e = this.filterText.trim().toLowerCase();
+		return e ? this.results.filter((t) => {
+			let n = t.source;
+			return [
+				t.title,
+				t.abstract,
+				t.layer.id,
+				n.data,
+				n.tiles,
+				n.url
+			].flat().some((t) => typeof t == "string" && t.toLowerCase().includes(e));
+		}) : this.results;
+	}
+	toggleSelected(e, t) {
+		let n = t, r = typeof n?.detail?.checked == "boolean" ? n.detail.checked : !!t.target?.checked, i = new Set(this.selected);
+		r ? i.add(e) : i.delete(e), this.selected = i;
+	}
+	handleAdd() {
+		if (!this.adapter || !this.mapElement || this.selected.size === 0) return;
+		let e = Array.from(this.selected);
+		for (let { source: t, layer: n } of e) try {
+			this.mapElement.addLayerRequest({
+				...n,
+				sources: { [t.id]: t }
+			});
+		} catch (e) {
+			console.error("Failed to add discovered layer", n.id, e);
+		}
+		this.dispatchEvent(new CustomEvent("webmapx-layers-found", {
+			detail: {
+				url: this.url.trim(),
+				layers: e
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.results = [], this.selected = /* @__PURE__ */ new Set();
+	}
+	async handleFiles(e) {
+		if (!(!this.mapElement || e.length === 0)) {
+			this.fileImporting = !0;
+			try {
+				await this.mapElement.addFilesAsLayers(e);
+			} finally {
+				this.fileImporting = !1;
+			}
+		}
+	}
+	handleFileInput(e) {
+		let t = e.target, n = Array.from(t.files ?? []);
+		t.value = "", this.handleFiles(n);
+	}
+	handleDropZoneDrop(e) {
+		e.preventDefault(), e.stopPropagation(), this.fileDropActive = !1;
+		let t = Array.from(e.dataTransfer?.files ?? []);
+		this.handleFiles(t);
+	}
+	handleDropZoneDragOver(e) {
+		e.dataTransfer?.types.includes("Files") && (e.preventDefault(), e.stopPropagation(), e.dataTransfer.dropEffect = "copy", this.fileDropActive = !0);
+	}
+	render() {
+		return s`
+      <div class="container tool-content">
+        <div class="section-title">From URL</div>
+        <div class="urlbox">
+          <input
+            type="text"
+            placeholder="Paste a service or tile URL"
+            aria-label="Service or tile URL"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+            data-lpignore="true"
+            data-1p-ignore
+            .value="${this.url}"
+            @input="${(e) => {
+			this.url = e.target.value;
+		}}"
+            @keyup="${(e) => {
+			e.key === "Enter" && this.handleDiscover();
+		}}"
+          />
+          <sl-button size="small" ?loading=${this.discovering} ?disabled=${this.discovering} @click="${() => this.handleDiscover()}">Discover</sl-button>
+        </div>
+
+        ${this.error ? s`<div class="error">${this.error}</div>` : ""}
+
+        ${this.catalog.length === 0 ? "" : s`
+          <div class="results">
+            <ul>
+              ${this.catalog.map((e) => s`
+                <li class="result-item" @click="${() => this.openCatalogEntry(e)}" style="cursor:pointer;">
+                  <div style="flex:1; min-width:0;">
+                    <div style="white-space:normal; word-break:break-word;" title="${e.name}">${e.kind === "folder" ? "📁" : "🗺"} ${e.name}</div>
+                    ${e.type ? s`<div class="meta">${e.type}</div>` : ""}
+                  </div>
+                </li>
+              `)}
+            </ul>
+          </div>
+        `}
+
+        ${this.results.length === 0 ? "" : s`
+          <input
+            type="text"
+            class="filter"
+            placeholder="Filter layers..."
+            aria-label="Filter layers"
+            .value="${this.filterText}"
+            @input="${(e) => {
+			this.filterText = e.target.value;
+		}}"
+          />
+          <div class="actions">
+            <sl-button size="small" variant="primary" ?disabled=${this.selected.size === 0} @click="${() => this.handleAdd()}">
+              Add selected
+            </sl-button>
+          </div>
+          <div class="results">
+            <ul>
+              ${this.filteredResults.map((e) => s`
+                <li class="result-item">
+                  <sl-checkbox
+                    .checked=${this.selected.has(e)}
+                    @sl-change=${(t) => this.toggleSelected(e, t)}
+                  ></sl-checkbox>
+                  <div style="flex:1; min-width:0;">
+                    <div style="white-space:normal; word-break:break-word;" title="${e.title}">${e.title}</div>
+                    <div class="meta">${e.serviceType}</div>
+                    ${e.abstract ? s`<div class="meta">${e.abstract}</div>` : ""}
+                  </div>
+                </li>
+              `)}
+            </ul>
+          </div>
+        `}
+
+        <div class="section-title">From file</div>
+        <div class="file-row">
+          <sl-button size="small" ?loading=${this.fileImporting} ?disabled=${this.fileImporting}
+            @click=${() => (this.renderRoot?.querySelector("input[type=\"file\"]"))?.click()}>
+            <sl-icon slot="prefix" name="folder2-open"></sl-icon>
+            Open file…
+          </sl-button>
+        </div>
+        <input type="file" multiple accept=".geojson,.json,.zip,.topojson,.gpx,.kml,.kmz,.csv"
+          @change=${this.handleFileInput} />
+        <div
+          class="drop-zone ${this.fileDropActive ? "active" : ""}"
+          @dragover=${this.handleDropZoneDragOver}
+          @dragleave=${() => {
+			this.fileDropActive = !1;
+		}}
+          @drop=${this.handleDropZoneDrop}
+          @click=${() => (this.renderRoot?.querySelector("input[type=\"file\"]"))?.click()}
+        >
+          <sl-icon name="file-earmark-arrow-up"></sl-icon>
+          Drop files here or click to browse
+        </div>
+      </div>
+    `;
+	}
+};
+t([r()], c.prototype, "url", void 0), t([r()], c.prototype, "discovering", void 0), t([r()], c.prototype, "results", void 0), t([r()], c.prototype, "selected", void 0), t([r()], c.prototype, "error", void 0), t([r()], c.prototype, "filterText", void 0), t([r()], c.prototype, "catalog", void 0), t([r()], c.prototype, "fileDropActive", void 0), t([r()], c.prototype, "fileImporting", void 0), c = t([i("webmapx-import-layer-tool")], c);
+//#endregion
+export { c as WebmapxImportLayerTool };

package/dist-lib/webmapx-info-tool-BJA157cy.js

@@ -0,0 +1,412 @@
+import { t as e } from "./decorate-CWgUV1hU.js";
+import { t } from "./webmapx-base-tool-Dm9NAWLD.js";
+import { i as n, o as r } from "./decorators-B35AgiCU.js";
+import "./icon-CEOgWlro.js";
+import "./spinner-DysxdNG9.js";
+import { t as i } from "./throttle-BeneRNYK.js";
+import { t as a } from "./wms-feature-info-C0RVMEQC.js";
+import { css as o, html as s, nothing as c } from "lit";
+//#region src/components/webmapx-info-tool.ts
+var l = "webmapx-info-pin", u = 8, d = 120, f = 4, p = 6, m = class extends t {
+	constructor(...e) {
+		super(...e), this.active = !1, this.features = [], this.loading = !1, this.mode = "hover", this.pinnedLocation = null, this.pinnedPixel = null, this.pinMarkerAdded = !1, this.unsubClick = null, this.unsubPointerMove = null, this.throttledHoverQuery = i(async (e, t) => {
+			if (this.mode !== "hover" || !this.active || !this.adapter) return;
+			let n;
+			try {
+				n = await this.adapter.queryService.queryFeatures({
+					pixel: e,
+					lngLat: t
+				}, {
+					tolerancePx: f,
+					includeWMS: !1
+				});
+			} catch (e) {
+				console.warn("[info-tool] queryFeatures failed", e), n = [];
+			}
+			this.mode === "hover" && (this.features = n);
+		}, d);
+	}
+	static {
+		this.styles = o`
+        :host {
+            display: block;
+            pointer-events: auto;
+        }
+
+        .info-container {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            padding: var(--webmapx-tool-padding, 0);
+            font-size: var(--font-size-small, 0.875rem);
+            min-width: 200px;
+        }
+
+        .mode-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            color: var(--color-text-secondary, #666);
+        }
+
+        .mode-badge.pinned {
+            color: var(--color-primary, #0f62fe);
+        }
+
+        .instructions {
+            color: var(--color-text-secondary, #666);
+            font-size: 0.75rem;
+            font-style: italic;
+            margin: 0;
+        }
+
+        .layer-group {
+            border: 1px solid var(--color-border-light, #eee);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .feature-limit-notice {
+            padding: 0.2rem 0.5rem;
+            font-size: 0.7rem;
+            color: var(--color-text-secondary, #888);
+            font-style: italic;
+            border-top: 1px solid var(--color-border-light, #eee);
+        }
+
+        .layer-title {
+            background: var(--color-surface-alt, #f5f5f5);
+            padding: 0.25rem 0.5rem;
+            font-weight: 600;
+            font-size: 0.75rem;
+            color: var(--color-text-secondary, #555);
+            border-bottom: 1px solid var(--color-border-light, #eee);
+        }
+
+        .props-list {
+            display: grid;
+            grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
+            font-size: 0.8rem;
+        }
+
+        .props-row {
+            display: contents;
+        }
+
+        .props-row:nth-child(even) > .props-key,
+        .props-row:nth-child(even) > .props-val {
+            background: var(--color-surface-alt, #fafafa);
+        }
+
+        .props-key {
+            min-width: 0;
+            padding: 0.2rem 0.5rem;
+            font-weight: 500;
+            color: var(--color-text-secondary, #555);
+            overflow-wrap: break-word;
+            border-bottom: 1px solid var(--color-border-light, #f0f0f0);
+        }
+
+        .props-val {
+            min-width: 0;
+            overflow-wrap: break-word;
+            padding: 0.2rem 0.5rem;
+            border-bottom: 1px solid var(--color-border-light, #f0f0f0);
+        }
+
+        .img-error {
+            font-size: 0.75rem;
+            color: var(--sl-color-danger-600, #c0392b);
+            font-style: italic;
+        }
+
+        .props-val a[href] {
+            display: block;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .props-val img {
+            max-width: 100%;
+            max-height: 120px;
+            border-radius: 3px;
+            object-fit: cover;
+        }
+
+        .raw-value {
+            padding: 0.4rem 0.5rem;
+            font-size: 0.75rem;
+            white-space: pre-wrap;
+            overflow: auto;
+            max-height: 200px;
+        }
+
+        .props-table img {
+            max-width: 100%;
+            max-height: 120px;
+            border-radius: 3px;
+            object-fit: cover;
+        }
+
+        .sub-layer-title {
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+            padding: 0.15rem 0.5rem;
+            background: var(--color-surface-alt, #f5f5f5);
+            border-bottom: 1px solid var(--color-border-light, #eee);
+        }
+
+        .sub-layer-name {
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: var(--color-text-secondary, #555);
+        }
+
+        .sub-layer-type {
+            font-size: 0.65rem;
+            color: var(--color-text-secondary, #888);
+            font-style: italic;
+        }
+
+        .source-badge.composite {
+            background: var(--sl-color-violet-100, #ede9fe);
+            color: var(--sl-color-violet-700, #6d28d9);
+        }
+
+        .source-badge {
+            display: inline-block;
+            font-size: 0.65rem;
+            padding: 0 0.3rem;
+            border-radius: 3px;
+            background: var(--color-border-light, #e0e0e0);
+            color: var(--color-text-secondary, #555);
+            margin-left: 0.25rem;
+            vertical-align: middle;
+        }
+
+        .source-badge.wms {
+            background: var(--color-primary-light, #d0e4ff);
+            color: var(--color-primary, #0043a8);
+        }
+
+        .empty-hint {
+            padding: 0.3rem 0.5rem;
+            color: var(--color-text-secondary, #999);
+            font-size: 0.8rem;
+            font-style: italic;
+        }
+
+        sl-spinner {
+            font-size: 0.9rem;
+        }
+    `;
+	}
+	onMapAttached(e) {
+		super.onMapAttached(e), this.unsubClick = e.events.on("click", this.handleClick.bind(this)), this.unsubPointerMove = e.events.on("pointer-move", this.handlePointerMove.bind(this));
+	}
+	onMapDetached() {
+		this.unsubClick?.(), this.unsubPointerMove?.(), this.unsubClick = null, this.unsubPointerMove = null, super.onMapDetached();
+	}
+	disconnectedCallback() {
+		this.removePinMarker(), super.disconnectedCallback();
+	}
+	activate() {
+		this.active = !0, this.style.display = "block", this.onActivate();
+	}
+	deactivate() {
+		this.active = !1, this.style.display = "none", this.onDeactivate();
+	}
+	onStateChanged(e) {}
+	onActivate() {
+		this.features = [], this.mode = "hover", this.pinnedLocation = null, this.pinnedPixel = null;
+	}
+	onDeactivate() {
+		this.features = [], this.mode = "hover", this.pinnedLocation = null, this.pinnedPixel = null, this.removePinMarker();
+	}
+	handlePointerMove(e) {
+		!this.active || this.mode === "pinned" || this.throttledHoverQuery(e.pixel, e.coords);
+	}
+	async handleClick(e) {
+		if (!(!this.active || !this.adapter)) {
+			if (this.mode === "pinned" && this.pinnedPixel) {
+				let t = e.pixel[0] - this.pinnedPixel[0], n = e.pixel[1] - this.pinnedPixel[1];
+				if (Math.sqrt(t * t + n * n) <= u) {
+					this.unpin();
+					return;
+				}
+			}
+			this.mode = "pinned", this.pinnedLocation = e.coords, this.pinnedPixel = e.pixel, this.loading = !0, this.features = [], this.updatePinMarker(e.coords);
+			try {
+				let t = await this.adapter.queryService.queryFeatures({
+					pixel: e.pixel,
+					lngLat: e.coords
+				}, {
+					tolerancePx: p,
+					includeWMS: !0
+				}), n = await this.queryGFILayers(e.pixel, e.coords);
+				this.features = [...t, ...n];
+			} finally {
+				this.loading = !1;
+			}
+		}
+	}
+	async queryGFILayers(e, t) {
+		if (!this.adapter) return [];
+		let n = this.adapter.store.getState().mapLayers ?? {}, r = 128 * (360 / (256 * 2 ** (this.adapter.getViewportState()?.zoom ?? 0))), i = {
+			west: t[0] - r,
+			south: t[1] - r,
+			east: t[0] + r,
+			north: t[1] + r
+		}, o = [];
+		return await Promise.all(Object.entries(n).map(async ([e, t]) => {
+			let n = t, r = typeof n?.getFeatureInfoUrl == "string" ? n.getFeatureInfoUrl : null;
+			if (r) try {
+				let t = new URL(r), s = (e) => {
+					for (let [n, r] of t.searchParams) if (n.toLowerCase() === e) return r;
+					return null;
+				}, c = await a({
+					sourceConfig: {
+						id: e,
+						type: "raster",
+						service: "wms",
+						url: r,
+						version: s("version") ?? "1.1.1",
+						layers: s("layers") ?? s("query_layers") ?? "",
+						format: typeof n.getFeatureInfoFormat == "string" ? n.getFeatureInfoFormat : "application/json",
+						crs: s("crs") ?? s("srs") ?? "EPSG:3857"
+					},
+					layerId: e,
+					layerTitle: typeof n.label == "string" ? n.label : e,
+					bounds: i,
+					containerWidth: 256,
+					containerHeight: 256,
+					pixelX: 128,
+					pixelY: 128
+				});
+				o.push(...c);
+			} catch {}
+		})), o;
+	}
+	updatePinMarker(e) {
+		this.adapter && (this.pinMarkerAdded ? this.adapter.moveMarker(l, e) : (this.adapter.addMarker(l, e, { color: "#0f62fe" }), this.pinMarkerAdded = !0));
+	}
+	removePinMarker() {
+		this.pinMarkerAdded &&= (this.adapter?.removeMarker(l), !1);
+	}
+	unpin() {
+		this.mode = "hover", this.pinnedLocation = null, this.pinnedPixel = null, this.features = [], this.removePinMarker();
+	}
+	renderFeatures() {
+		if (this.features.length === 0) return c;
+		let e = /* @__PURE__ */ new Map();
+		for (let t of this.features) {
+			let n = e.get(t.layerId);
+			n ? n.push(t) : e.set(t.layerId, [t]);
+		}
+		return s`
+            ${[...e.entries()].map(([e, t]) => {
+			let n = this.adapter?.store.getState().mapLayers?.[e], r = Array.isArray(n?.sublayers) && n.sublayers.length > 1, i = r ? "composite" : t[0].source, a = typeof n?.featureInfoLimit == "number" ? n.featureInfoLimit : null, o = a !== null && t.length > a, c = o ? t.slice(0, a) : t, l = /* @__PURE__ */ new Map();
+			for (let e of c) {
+				let t = e.subLayerId ?? "", n = l.get(t);
+				n ? n.push(e) : l.set(t, [e]);
+			}
+			return s`
+                <div class="layer-group">
+                    <div class="layer-title">
+                        ${t[0].layerTitle ?? e}
+                        <span class="source-badge ${r ? "composite" : t[0].source}">${i}</span>
+                    </div>
+                    ${[...l.entries()].map(([e, t]) => s`
+                        ${e ? s`<div class="sub-layer-title">
+                            <span class="sub-layer-name">${e}</span>
+                            ${t[0].subLayerType ? s`<span class="sub-layer-type">${t[0].subLayerType}</span>` : ""}
+                        </div>` : ""}
+                        ${t.map((e) => this.renderPropsTable(e))}
+                    `)}
+                    ${o ? s`<div class="feature-limit-notice">Showing ${a} of ${t.length} features</div>` : ""}
+                </div>`;
+		})}
+        `;
+	}
+	getPropertySchema(e) {
+		let t = this.adapter?.store.getState().mapLayers?.[e];
+		return Array.isArray(t?.properties) ? t.properties : null;
+	}
+	getAttributeMeta(e) {
+		let t = this.adapter?.store.getState().mapLayers?.[e], n = t?.attributes && typeof t.attributes == "object" ? t.attributes : {};
+		return {
+			translations: Array.isArray(n.translations) ? n.translations : [],
+			allowed: Array.isArray(n.allowedAttributes) ? new Set(n.allowedAttributes) : null,
+			denied: Array.isArray(n.deniedAttributes) ? new Set(n.deniedAttributes) : /* @__PURE__ */ new Set()
+		};
+	}
+	renderPropsTable(e) {
+		let t = this.getPropertySchema(e.layerId), { translations: n, allowed: r, denied: i } = this.getAttributeMeta(e.layerId), a = e.properties;
+		if (a._raw) return s`<div class="raw-value">${a._raw}</div>`;
+		let o = [], c = /* @__PURE__ */ new Set();
+		for (let e of n) {
+			let n = e.name;
+			if (i.has(n) || r && !r.has(n) || !(n in a) || a[n] === null || a[n] === void 0) continue;
+			c.add(n);
+			let s = a[n];
+			if (e.multiplier && !isNaN(parseFloat(String(e.multiplier))) && (s = parseFloat(String(s)) * parseFloat(String(e.multiplier))), e.decimals !== void 0 && !isNaN(parseInt(String(e.decimals)))) {
+				let t = 10 ** parseInt(String(e.decimals));
+				s = Math.round(parseFloat(String(s)) * t) / t;
+			}
+			if (e.valuemap && Array.isArray(e.valuemap)) {
+				let t = e.valuemap.find((e) => e.value === s);
+				t && (s = t.label);
+			}
+			e.date && (s &&= new Date(s).toLocaleString());
+			let l = e.unit && !isNaN(Number(s)) ? e.unit : "", u = e.translation || n, d = l ? `${s}${l}` : typeof s == "object" ? JSON.stringify(s) : String(s ?? "");
+			o.push(this.renderPropRow(n, u, d, t));
+		}
+		for (let [e, s] of Object.entries(a)) {
+			if (e === "_raw" || c.has(e) || i.has(e) || r && !r.has(e) || s == null || n.length > 0 && !n.find((t) => t.name === e) && r === null) continue;
+			let a = typeof s == "object" ? JSON.stringify(s) : String(s ?? "");
+			o.push(this.renderPropRow(e, e.replace(/_/g, " "), a, t));
+		}
+		return o.length === 0 ? s`<div class="empty-hint">No properties</div>` : s`<div class="props-list">${o}</div>`;
+	}
+	renderPropRow(e, t, n, r) {
+		let i = r?.find((t) => t.name === e)?.type ?? "string", a = /^https?:\/\/\S+$/.test(n.trim()), o = /^data:image\//i.test(n), c = i === "string" ? o ? "imageURL" : a ? "linkURL" : "string" : i;
+		return s`
+            <div class="props-row">
+                <span class="props-key" title=${e}>${t}</span>
+                <span class="props-val">${(c === "create-time" || c === "update-time") && n ? new Date(Number(n)).toLocaleString() : c === "imageURL" && n ? s`<img src=${n} @error=${(e) => {
+			let t = e.target, n = document.createElement("span");
+			n.className = "img-error", n.textContent = "⚠ invalid image", t.replaceWith(n);
+		}}>` : c === "linkURL" && n ? s`<a href=${n} target="_blank" rel="noopener noreferrer">${n}</a>` : n.split(",").map((e, t) => t === 0 ? s`${e}` : s`,<wbr>${e}`)}</span>
+            </div>
+        `;
+	}
+	render() {
+		let e = this.mode === "pinned";
+		return s`
+            <div class="info-container">
+                <div class="mode-badge ${e ? "pinned" : ""}">
+                    <sl-icon name=${e ? "pin-angle-fill" : "cursor"}></sl-icon>
+                    ${e ? "Pinned" : "Hover"}
+                    ${this.loading ? s`<sl-spinner></sl-spinner>` : c}
+                </div>
+
+                ${!e && this.features.length === 0 ? s`<p class="instructions">Move cursor over features to inspect. Click to pin and query WMS.</p>` : c}
+
+                ${e && !this.loading && this.features.length === 0 ? s`<p class="empty-hint">No features at this location.</p>` : c}
+
+                ${this.renderFeatures()}
+
+                ${e ? s`<p class="instructions">Click same location to unpin.</p>` : c}
+            </div>
+        `;
+	}
+};
+e([n()], m.prototype, "features", void 0), e([n()], m.prototype, "loading", void 0), e([n()], m.prototype, "mode", void 0), e([n()], m.prototype, "pinnedLocation", void 0), m = e([r("webmapx-info-tool")], m);
+//#endregion
+export { m as WebmapxInfoTool };