@edugis-org/webmapx 0.1.7 → 0.1.8

package/dist-lib/{webmapx-modal-tool-eF6Naluv.js → webmapx-modal-tool-Cs7LRrgW.js}

@@ -1,6 +1,6 @@
-import { r as e, t } from "./decorate-CWgUV1hU.js";
-import { t as n } from "./webmapx-base-tool-Dm9NAWLD.js";
-import { a as r } from "./decorators-B35AgiCU.js";
+import { r as e, t } from "./decorate-DnZTfaod.js";
+import { t as n } from "./webmapx-base-tool-DfRa7TlD.js";
+import { property as r } from "lit/decorators.js";
 //#region src/components/webmapx-modal-tool.ts
 var i = class extends n {
 	constructor(...e) {

package/dist-lib/{webmapx-plugin-tool-D2Hghf9n.js → webmapx-plugin-tool-qe2yTrWB.js}

@@ -1,8 +1,8 @@
-import { t as e } from "./decorate-CWgUV1hU.js";
-import { a as t, o as n } from "./decorators-B35AgiCU.js";
-import { LitElement as r, html as i } from "lit";
+import { t as e } from "./decorate-DnZTfaod.js";
+import { LitElement as t, html as n } from "lit";
+import { customElement as r, property as i } from "lit/decorators.js";
 //#region src/components/webmapx-plugin-tool.ts
-var a = class extends r {
+var a = class extends t {
 	constructor(...e) {
 		super(...e), this.toolId = "", this.pluginElement = null, this.configReadyHandler = (e) => this.handleConfigReady(e);
 	}
@@ -31,15 +31,15 @@ var a = class extends r {
 		this.pluginElement = t, this.requestUpdate();
 	}
 	render() {
-		return this.pluginElement ? i`<slot></slot>` : i``;
+		return this.pluginElement ? n`<slot></slot>` : n``;
 	}
 	updated() {
 		this.pluginElement && !this.contains(this.pluginElement) && this.appendChild(this.pluginElement);
 	}
 };
-e([t({
+e([i({
 	type: String,
 	attribute: "tool-id"
-})], a.prototype, "toolId", void 0), a = e([n("webmapx-plugin-tool")], a);
+})], a.prototype, "toolId", void 0), a = e([r("webmapx-plugin-tool")], a);
 //#endregion
 export { a as t };

package/dist-lib/{webmapx-print-tool-ob1bOsR5.js → webmapx-print-tool-DrK9sLC7.js}

@@ -1,13 +1,14 @@
-import { r as e, t } from "./decorate-CWgUV1hU.js";
-import { i as n, o as r } from "./decorators-B35AgiCU.js";
-import "./button-DFdGkRPQ.js";
-import "./checkbox-QoR4S8tV.js";
-import "./input-CeGntPlT.js";
-import "./spinner-DysxdNG9.js";
-import { i, r as a, t as o } from "./attribution-format-B4f05_u0.js";
-import { t as s } from "./webmapx-modal-tool-eF6Naluv.js";
-import "./option-CBxl1mZP.js";
-import { css as c, html as l } from "lit";
+import { r as e, t } from "./decorate-DnZTfaod.js";
+import { i as n, r, t as i } from "./attribution-format-B4f05_u0.js";
+import { t as a } from "./webmapx-modal-tool-Cs7LRrgW.js";
+import { css as o, html as s } from "lit";
+import { customElement as c, state as l } from "lit/decorators.js";
+import "@shoelace-style/shoelace/dist/components/button/button.js";
+import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js";
+import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
+import "@shoelace-style/shoelace/dist/components/input/input.js";
+import "@shoelace-style/shoelace/dist/components/select/select.js";
+import "@shoelace-style/shoelace/dist/components/option/option.js";
 //#region src/components/webmapx-print-tool.ts
 var u = 210, d = 297, f = 40, p = 10, m = 50, h = 12, g = 6, _ = 96 / 25.4;
 function v(e) {
@@ -25,12 +26,12 @@ function x(e) {
 		h: (y(e) ? u : d) - 2 * p
 	};
 }
-var S = class extends s {
+var S = class extends a {
 	constructor(...e) {
 		super(...e), this.toolId = "print", this.mapTitle = "", this.format = "portrait", this.addLink = !1, this.printing = !1, this.errorMsg = "", this.zoomDelta = 0, this.printBoxEl = null, this.resizeObserver = null;
 	}
 	static {
-		this.styles = c`
+		this.styles = o`
         :host { display: block; font-size: var(--sl-font-size-small); }
         .tool-content {
             padding: var(--webmapx-tool-panel-padding, 12px);
@@ -277,30 +278,30 @@ var S = class extends s {
 		}, { once: !0 }), requestAnimationFrame(() => requestAnimationFrame(() => window.print()));
 	}
 	buildAttributionText() {
-		let e = this.layerDataConfig, t = this.store?.getState()?.mapLayers ?? {}, n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+		let e = this.layerDataConfig, t = this.store?.getState()?.mapLayers ?? {}, a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map();
 		if (e) {
-			for (let t of e.sources ?? []) n.set(t.id, t);
-			for (let t of e.layers ?? []) r.set(t.id, t);
+			for (let t of e.sources ?? []) a.set(t.id, t);
+			for (let t of e.layers ?? []) o.set(t.id, t);
 		}
 		let s = /* @__PURE__ */ new Set(), c = [], l = (e) => {
 			if (e) for (let t of e.split("|")) {
-				let e = o(i(t)).trim();
+				let e = i(n(t)).trim();
 				e && !s.has(e) && (s.add(e), c.push(e));
 			}
 		};
-		for (let [e, i] of Object.entries(t)) {
-			if (i.visible === !1) continue;
-			let t = r.get(e);
-			if (t) l(a(t, n));
+		for (let [e, n] of Object.entries(t)) {
+			if (n.visible === !1) continue;
+			let t = o.get(e);
+			if (t) l(r(t, a));
 			else {
-				let e = typeof i.sourceId == "string" ? i.sourceId : null;
+				let e = typeof n.sourceId == "string" ? n.sourceId : null;
 				e && l(this.adapter?.getSourceAttribution?.(e));
 			}
 		}
 		return c.join(" • ");
 	}
 	render() {
-		return l`
+		return s`
             <div class="tool-content">
                 <p class="description">Position the map inside the box, then click Print to save as PDF.</p>
                 <div class="field">
@@ -331,18 +332,18 @@ var S = class extends s {
 			this.addLink = e.target.checked, this.updateBox();
 		}}
                 >Add viewer link</sl-checkbox>
-                ${Math.abs(this.zoomDelta) > .05 ? l`
+                ${Math.abs(this.zoomDelta) > .05 ? s`
                     <p class="warning">
                         <strong>Note:</strong> The print zoom differs from the screen zoom
                         (${this.zoomDelta > 0 ? "+" : ""}${this.zoomDelta.toFixed(1)} levels).
                         Labels and zoom-dependent layers may look different in the print.
                     </p>` : ""}
-                ${this.printing ? l`<div class="busy"><sl-spinner></sl-spinner> Rendering map…</div>` : l`<sl-button variant="primary" size="small" @click=${this.handlePrint}>Print</sl-button>`}
-                ${this.errorMsg ? l`<p class="error">${this.errorMsg}</p>` : ""}
+                ${this.printing ? s`<div class="busy"><sl-spinner></sl-spinner> Rendering map…</div>` : s`<sl-button variant="primary" size="small" @click=${this.handlePrint}>Print</sl-button>`}
+                ${this.errorMsg ? s`<p class="error">${this.errorMsg}</p>` : ""}
             </div>
         `;
 	}
 };
-t([n()], S.prototype, "mapTitle", void 0), t([n()], S.prototype, "format", void 0), t([n()], S.prototype, "addLink", void 0), t([n()], S.prototype, "printing", void 0), t([n()], S.prototype, "errorMsg", void 0), t([n()], S.prototype, "zoomDelta", void 0), S = t([r("webmapx-print-tool")], S);
+t([l()], S.prototype, "mapTitle", void 0), t([l()], S.prototype, "format", void 0), t([l()], S.prototype, "addLink", void 0), t([l()], S.prototype, "printing", void 0), t([l()], S.prototype, "errorMsg", void 0), t([l()], S.prototype, "zoomDelta", void 0), S = t([c("webmapx-print-tool")], S);
 //#endregion
 export { S as WebmapxPrintTool };

package/dist-lib/{webmapx-search-tool-Cv8BrYvY.js → webmapx-search-tool-H7NisgWH.js}

@@ -1,7 +1,7 @@
-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 { css as a, html as o } from "lit";
+import { r as e, t } from "./decorate-DnZTfaod.js";
+import { t as n } from "./webmapx-base-tool-DfRa7TlD.js";
+import { css as r, html as i } from "lit";
+import { customElement as a, state as o } from "lit/decorators.js";
 //#region src/components/webmapx-search-tool.ts
 var s, c = class extends n {
 	static {
@@ -43,7 +43,7 @@ var s, c = class extends n {
 		return s.KNOWN_PROVIDERS.has(e.toLowerCase());
 	}
 	static {
-		this.styles = a`
+		this.styles = r`
     :host { display: block; width: 100%; pointer-events: auto; }
     :host([hidden]) { display: none !important; }
     .container { width: 100%; max-width: 100%; color: var(--webmapx-search-color, var(--color-text-primary)); box-sizing: border-box; padding: var(--webmapx-tool-padding, 0); }
@@ -380,7 +380,7 @@ var s, c = class extends n {
 		r = n?.detail && typeof n.detail.checked == "boolean" ? n.detail.checked : !!t.target?.checked, r ? this.isPersisted(e) || (this.clearPreview(), this.addPersistedFeature(e), this.persistedChanged(e, !0)) : this.isPersisted(e) && (this.removePersistedFeature(e), this.persistedChanged(e, !1)), this.requestUpdate();
 	}
 	render() {
-		return o`
+		return i`
       <div class="container tool-content">
         <div class="title">Search</div>
         <div class="searchbox">
@@ -402,14 +402,14 @@ var s, c = class extends n {
         </div>
 
         <div class="results">
-          ${this.searching ? o`<div>Searching...</div>` : ""}
-          ${this.results ? o`
+          ${this.searching ? i`<div>Searching...</div>` : ""}
+          ${this.results ? i`
             <div style="display:flex; align-items:center; gap:8px; padding:2px 6px; font-size:11px; color:var(--color-text-secondary); border-bottom:1px solid var(--color-border);">
               <span style="flex:0 0 auto; min-width:1.5rem; text-align:center;" title="Check to add result as a permanent layer on the map">📌</span>
               <span>hover to preview · click to zoom</span>
             </div>
             <ul>
-              ${(this.results.features || []).map((e, t) => o`
+              ${(this.results.features || []).map((e, t) => i`
                 <li class="result-item" ?selected=${t === this.selectedIndex}
                     @mouseenter=${() => this.showPreviewForFeature(e)}
                     @mouseleave=${() => this.clearPreview()}>
@@ -426,12 +426,12 @@ var s, c = class extends n {
                 </li>
               `)}
             </ul>
-          ` : o``}
+          ` : i``}
         </div>
       </div>
     `;
 	}
 };
-t([r()], c.prototype, "query", void 0), t([r()], c.prototype, "results", void 0), t([r()], c.prototype, "searching", void 0), t([r()], c.prototype, "selectedIndex", void 0), c = s = t([i("webmapx-search-tool")], c);
+t([o()], c.prototype, "query", void 0), t([o()], c.prototype, "results", void 0), t([o()], c.prototype, "searching", void 0), t([o()], c.prototype, "selectedIndex", void 0), c = s = t([a("webmapx-search-tool")], c);
 //#endregion
 export { c as WebmapxSearchTool };

package/dist-lib/webmapx-settings-EHSm-AGU.js

@@ -0,0 +1,167 @@
+import { c as e, d as t, l as n, r, s as i, t as a, u as o } from "./decorate-DnZTfaod.js";
+import { LitElement as s, css as c, html as l } from "lit";
+import { customElement as u, state as d } from "lit/decorators.js";
+import "@shoelace-style/shoelace/dist/components/input/input.js";
+import "@shoelace-style/shoelace/dist/components/divider/divider.js";
+import "@shoelace-style/shoelace/dist/components/select/select.js";
+import "@shoelace-style/shoelace/dist/components/option/option.js";
+import "@shoelace-style/shoelace/dist/components/switch/switch.js";
+//#region src/components/webmapx-settings.ts
+var f = class extends s {
+	constructor(...e) {
+		super(...e), this.darkMode = !1, this.apiKey = "", this.currentAdapter = o, this.availableAdapters = [];
+	}
+	static {
+		this.styles = c`
+        :host {
+            display: block;
+            padding: 1rem;
+            box-sizing: border-box;
+        }
+
+        .setting-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .setting-group:last-child {
+            margin-bottom: 0;
+        }
+
+        h4 {
+            margin: 0 0 0.75rem 0;
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--color-text-secondary, #666);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        sl-switch {
+            --sl-toggle-size-medium: 1.25rem;
+        }
+
+        sl-input {
+            margin-top: 0.5rem;
+        }
+
+        sl-select {
+            margin-top: 0.5rem;
+        }
+
+        sl-select::part(combobox) {
+            min-height: 2.5rem;
+        }
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.loadSettings();
+	}
+	loadSettings() {
+		let e = localStorage.getItem("webmapx-theme");
+		e ? this.darkMode = e === "dark" : this.darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches, this.applyTheme(), this.apiKey = localStorage.getItem("webmapx-api-key") || "", this.availableAdapters = t().filter((e) => ![
+			"ol",
+			"l",
+			"c"
+		].includes(e)), this.currentAdapter = this.detectCurrentAdapter();
+	}
+	getMapStorageKey(e, t) {
+		return i(e.id, t);
+	}
+	detectCurrentAdapter() {
+		let e = r(this);
+		if (!e) return o;
+		let t = this.getMapStorageKey(e, "adapter"), i = n({
+			explicitAdapter: e.getAttribute("adapter") ?? e.getAttribute("type"),
+			savedAdapter: t ? localStorage.getItem(t) : null,
+			configuredAdapter: e.mapConfig?.type ?? null,
+			defaultAdapter: o
+		});
+		return this.availableAdapters.includes(i) ? i : o;
+	}
+	applyTheme() {
+		let e = document.documentElement;
+		this.darkMode ? (e.setAttribute("data-theme", "dark"), e.classList.add("sl-theme-dark")) : (e.removeAttribute("data-theme"), e.classList.remove("sl-theme-dark")), localStorage.setItem("webmapx-theme", this.darkMode ? "dark" : "light");
+	}
+	handleThemeChange(e) {
+		let t = e.target;
+		this.darkMode = t.checked, this.applyTheme(), this.dispatchEvent(new CustomEvent("theme-change", {
+			detail: { theme: this.darkMode ? "dark" : "light" },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleApiKeyChange(e) {
+		let t = e.target;
+		this.apiKey = t.value, localStorage.setItem("webmapx-api-key", this.apiKey), this.dispatchEvent(new CustomEvent("apikey-change", {
+			detail: { apiKey: this.apiKey },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleAdapterChange(t) {
+		let n = t.target, i = e(n.value);
+		if (!i || i === this.currentAdapter) return;
+		let a = r(this);
+		if (!a) {
+			console.error("[webmapx-settings] No <webmapx-map> found for adapter switching.");
+			return;
+		}
+		let o = this.getMapStorageKey(a, "adapter");
+		a.saveState?.(), o && localStorage.setItem(o, i), window.location.reload();
+	}
+	formatAdapterName(e) {
+		return {
+			maplibre: "MapLibre GL",
+			openlayers: "OpenLayers",
+			leaflet: "Leaflet",
+			cesium: "Cesium"
+		}[e] || e;
+	}
+	render() {
+		return l`
+            <div class="setting-group">
+                <h4>Map Engine</h4>
+                <sl-select
+                    label="Adapter"
+                    value=${this.currentAdapter}
+                    @sl-change=${this.handleAdapterChange}
+                >
+                    ${this.availableAdapters.map((e) => l`
+                        <sl-option value=${e}>
+                            ${this.formatAdapterName(e)}
+                        </sl-option>
+                    `)}
+                </sl-select>
+            </div>
+
+            <sl-divider></sl-divider>
+
+            <div class="setting-group">
+                <h4>Appearance</h4>
+                <sl-switch
+                    ?checked=${this.darkMode}
+                    @sl-change=${this.handleThemeChange}
+                >
+                    Dark Mode
+                </sl-switch>
+            </div>
+
+            <sl-divider></sl-divider>
+
+            <div class="setting-group">
+                <h4>API Configuration</h4>
+                <sl-input
+                    label="API Key"
+                    type="password"
+                    password-toggle
+                    value=${this.apiKey}
+                    @sl-input=${this.handleApiKeyChange}
+                    placeholder="Enter your API key"
+                ></sl-input>
+            </div>
+        `;
+	}
+};
+a([d()], f.prototype, "darkMode", void 0), a([d()], f.prototype, "apiKey", void 0), a([d()], f.prototype, "currentAdapter", void 0), a([d()], f.prototype, "availableAdapters", void 0), f = a([u("webmapx-settings")], f);
+//#endregion
+export { f as WebmapxSettings };

package/dist-lib/{webmapx-truearea-tool-CMB4Orm-.js → webmapx-truearea-tool-CSU9mE1D.js}

@@ -1,8 +1,8 @@
-import { r as e, t } from "./decorate-CWgUV1hU.js";
-import { i as n, o as r } from "./decorators-B35AgiCU.js";
-import { t as i } from "./esm-CTuscnN5.js";
-import { t as a } from "./webmapx-modal-tool-eF6Naluv.js";
-import { css as o, html as s } from "lit";
+import { r as e, t } from "./decorate-DnZTfaod.js";
+import { t as n } from "./esm-CTuscnN5.js";
+import { t as r } from "./webmapx-modal-tool-Cs7LRrgW.js";
+import { css as i, html as a } from "lit";
+import { customElement as o, state as s } from "lit/decorators.js";
 //#region node_modules/@turf/bearing/node_modules/@turf/helpers/dist/esm/index.js
 var c = 6371008.8;
 c * 100, c * 100, 360 / (2 * Math.PI), c * 3.28084, c * 39.37, c / 1e3, c / 1e3, c / 1609.344, c * 1e3, c * 1e3, c / 1852, c * 1.0936;
@@ -138,24 +138,24 @@ function P(e, t) {
 	}
 	return j(t);
 }
-function F(e, t, n) {
-	let r = {
+function F(e, t, r) {
+	let i = {
 		type: "Feature",
 		geometry: {
 			type: "Point",
-			coordinates: n
+			coordinates: r
 		},
 		properties: {}
 	}, a = (e) => {
-		let n = {
+		let r = {
 			type: "Feature",
 			geometry: {
 				type: "Point",
 				coordinates: e
 			},
 			properties: {}
-		}, a = m(r, n);
-		return T(r, i(r, n, { units: "kilometers" }), a + t, { units: "kilometers" }).geometry.coordinates;
+		}, a = m(i, r);
+		return T(i, n(i, r, { units: "kilometers" }), a + t, { units: "kilometers" }).geometry.coordinates;
 	}, o = (e) => e.map(a);
 	return e.type === "Polygon" ? {
 		type: "Polygon",
@@ -179,15 +179,15 @@ function I(e, t, n, r) {
 	} : e;
 }
 function L(e, t) {
-	let n = {
+	let r = {
 		type: "Feature",
 		geometry: {
 			type: "Point",
 			coordinates: t
 		},
 		properties: {}
-	}, r = (e) => e.map((e) => ({
-		bearing: m(n, {
+	}, i = (e) => e.map((e) => ({
+		bearing: m(r, {
 			type: "Feature",
 			geometry: {
 				type: "Point",
@@ -195,7 +195,7 @@ function L(e, t) {
 			},
 			properties: {}
 		}),
-		distance: i(n, {
+		distance: n(r, {
 			type: "Feature",
 			geometry: {
 				type: "Point",
@@ -204,7 +204,7 @@ function L(e, t) {
 			properties: {}
 		}, { units: "kilometers" })
 	}));
-	return e.type === "Polygon" ? e.coordinates.map(r) : e.type === "MultiPolygon" ? e.coordinates.flat().map(r) : [];
+	return e.type === "Polygon" ? e.coordinates.map(i) : e.type === "MultiPolygon" ? e.coordinates.flat().map(i) : [];
 }
 function R(e, t, n) {
 	let r = {
@@ -223,7 +223,7 @@ function R(e, t, n) {
 		coordinates: e.coordinates.map((e) => e.map(() => a()))
 	} : e;
 }
-var z = class extends a {
+var z = class extends r {
 	constructor(...e) {
 		super(...e), this.toolId = "truearea", this.mapElement = null, this.availableLayers = [], this.selectedLayerId = "", this.copies = [], this.dragging = !1, this.lastTouchedCopyId = null, this.rotationDeg = 0, this.geodesic = !0, this.copyMeta = /* @__PURE__ */ new Map(), this.features = [], this.colorIdx = 0, this.unsubEvents = [], this.dragState = null;
 	}
@@ -234,7 +234,7 @@ var z = class extends a {
 		this.cleanupEvents(), this.adapter && (this.adapter.setPanEnabled(!0), this.adapter.setTouchCaptureEnabled(!0)), this.dragState = null, this.dragging = !1, this.clearGhost(), this.copies.length === 0 && this.cleanupLayers();
 	}
 	static {
-		this.styles = o`
+		this.styles = i`
         :host { display: none; padding: var(--webmapx-tool-padding, 0); font-size: 0.875rem; min-width: 200px; }
         :host([active]) { display: block; }
         label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
@@ -566,22 +566,22 @@ var z = class extends a {
 		});
 	}
 	render() {
-		return s`
+		return a`
             <label>Source layer</label>
-            ${this.availableLayers.length === 0 ? s`<div class="hint">No visible polygon layers on map.</div>` : s`
+            ${this.availableLayers.length === 0 ? a`<div class="hint">No visible polygon layers on map.</div>` : a`
                     <select @change=${(e) => {
 			this.selectedLayerId = e.target.value;
 		}}>
-                        ${this.availableLayers.map((e) => s`
+                        ${this.availableLayers.map((e) => a`
                             <option value=${e.id} ?selected=${e.id === this.selectedLayerId}>${e.label}</option>
                         `)}
                     </select>
-                    ${this.dragging ? s`<div class="dragging-hint">Drag to target location, release to place.</div>` : s`<div class="hint">Click and drag a polygon to compare sizes.</div>`}
+                    ${this.dragging ? a`<div class="dragging-hint">Drag to target location, release to place.</div>` : a`<div class="hint">Click and drag a polygon to compare sizes.</div>`}
                 `}
 
             ${(() => {
 			let e = this.copies.find((e) => e.id === this.lastTouchedCopyId);
-			return !e && this.availableLayers.length === 0 ? "" : e ? s`
+			return !e && this.availableLayers.length === 0 ? "" : e ? a`
                     <div class="copy-item">
                         <div class="copy-swatch" style="background:${e.color}"></div>
                         <span class="copy-label" title=${e.label}>${e.label}</span>
@@ -604,12 +604,12 @@ var z = class extends a {
                         <label for="geodesic-toggle">Geodesic (shape-accurate, may rotate borders)</label>
                     </div>
 
-                    ${this.copies.length > 0 ? s`<button class="clear-btn" @click=${() => this.clearAll()}>Clear all</button>` : ""}
-                ` : s`<div class="no-copies">No copy selected. Click a polygon on the map.</div>`;
+                    ${this.copies.length > 0 ? a`<button class="clear-btn" @click=${() => this.clearAll()}>Clear all</button>` : ""}
+                ` : a`<div class="no-copies">No copy selected. Click a polygon on the map.</div>`;
 		})()}
         `;
 	}
 };
-t([n()], z.prototype, "availableLayers", void 0), t([n()], z.prototype, "selectedLayerId", void 0), t([n()], z.prototype, "copies", void 0), t([n()], z.prototype, "dragging", void 0), t([n()], z.prototype, "lastTouchedCopyId", void 0), t([n()], z.prototype, "rotationDeg", void 0), t([n()], z.prototype, "geodesic", void 0), z = t([r("webmapx-truearea-tool")], z);
+t([s()], z.prototype, "availableLayers", void 0), t([s()], z.prototype, "selectedLayerId", void 0), t([s()], z.prototype, "copies", void 0), t([s()], z.prototype, "dragging", void 0), t([s()], z.prototype, "lastTouchedCopyId", void 0), t([s()], z.prototype, "rotationDeg", void 0), t([s()], z.prototype, "geodesic", void 0), z = t([o("webmapx-truearea-tool")], z);
 //#endregion
 export { z as WebmapxTrueAreaTool };

package/dist-lib/{webmapx-view-mode-tool-CUpLNjOj.js → webmapx-view-mode-tool-D1QyQfq8.js}

@@ -1,7 +1,7 @@
-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 { css as a, html as o } from "lit";
+import { r as e, t } from "./decorate-DnZTfaod.js";
+import { t as n } from "./webmapx-base-tool-DfRa7TlD.js";
+import { css as r, html as i } from "lit";
+import { customElement as a, state as o } from "lit/decorators.js";
 //#region src/components/webmapx-view-mode-tool.ts
 var s = [{
 	id: "mercator",
@@ -18,7 +18,7 @@ var s = [{
 		super(...e), this.viewModeName = "mercator", this.centerLng = 0, this.centerLat = 30, this.parallel1 = 29.5, this.parallel2 = 45.5, this.supported = !0;
 	}
 	static {
-		this.styles = a`
+		this.styles = r`
         :host { display: block; padding: var(--webmapx-tool-padding, 0); font-size: 0.875rem; }
         .unsupported { color: var(--sl-color-neutral-500, #888); font-style: italic; }
         label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
@@ -58,14 +58,14 @@ var s = [{
 		}
 	}
 	render() {
-		if (!this.supported) return o`<div class="unsupported">View modes are not supported by this engine.</div>`;
+		if (!this.supported) return i`<div class="unsupported">View modes are not supported by this engine.</div>`;
 		let e = s.find((e) => e.id === this.viewModeName) ?? s[0], t = e.conic === !0;
-		return o`
+		return i`
             <label>View mode</label>
             <select @change=${(e) => {
 			this.viewModeName = e.target.value, this.applyViewMode();
 		}}>
-                ${s.map((e) => o`<option value=${e.id} ?selected=${e.id === this.viewModeName}>${e.name}</option>`)}
+                ${s.map((e) => i`<option value=${e.id} ?selected=${e.id === this.viewModeName}>${e.name}</option>`)}
             </select>
             <div class="mode-description">${e.description}</div>
             <img src=${e.image} alt=${e.description}>
@@ -101,6 +101,6 @@ var s = [{
         `;
 	}
 };
-t([r()], c.prototype, "viewModeName", void 0), t([r()], c.prototype, "centerLng", void 0), t([r()], c.prototype, "centerLat", void 0), t([r()], c.prototype, "parallel1", void 0), t([r()], c.prototype, "parallel2", void 0), t([r()], c.prototype, "supported", void 0), c = t([i("webmapx-view-mode-tool")], c);
+t([o()], c.prototype, "viewModeName", void 0), t([o()], c.prototype, "centerLng", void 0), t([o()], c.prototype, "centerLat", void 0), t([o()], c.prototype, "parallel1", void 0), t([o()], c.prototype, "parallel2", void 0), t([o()], c.prototype, "supported", void 0), c = t([a("webmapx-view-mode-tool")], c);
 //#endregion
 export { c as WebmapxViewModeTool };