@edugis-org/webmapx 0.1.9 → 0.1.11

package/dist-lib/{webmapx-geolocation-tool-DIMh2kIr.js → webmapx-geolocation-tool-qxN5aaVB.js}

@@ -1,13 +1,12 @@
-import { r as e, t } from "./decorate-DnZTfaod.js";
-import { t as n } from "./webmapx-base-tool-DfRa7TlD.js";
+import { r as e, t } from "./decorate-CKr8yG1g.js";
+import { t as n } from "./webmapx-base-tool-Bc9Wz0yA.js";
+import "./button-BlZd3WPH.js";
+import "./input-B212BH6L.js";
+import "./spinner-DdcBaa3z.js";
+import "./icon-button-B5rXu3Gg.js";
 import { a as r, i, t as a } from "./zip.js-DVhmtjxZ.js";
 import { css as o, html as s } from "lit";
 import { customElement as c, property as l, state as u } from "lit/decorators.js";
-import "@shoelace-style/shoelace/dist/components/button/button.js";
-import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
-import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
-import "@shoelace-style/shoelace/dist/components/input/input.js";
-import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
 //#region src/components/webmapx-geolocation-tool.ts
 var d, f = "webmapx-geolocation-tracks", p = "webmapx-geolocation-track-last-id";
 function m() {

package/dist-lib/{webmapx-import-layer-tool-DMiC1TpU.js → webmapx-import-layer-tool-tJ374qHR.js}

@@ -1,5 +1,5 @@
-import { r as e, t } from "./decorate-DnZTfaod.js";
-import { t as n } from "./webmapx-base-tool-DfRa7TlD.js";
+import { r as e, t } from "./decorate-CKr8yG1g.js";
+import { t as n } from "./webmapx-base-tool-Bc9Wz0yA.js";
 import { discoverLayers as r } from "./layer-discovery-DFP-WHAh.js";
 import { css as i, html as a } from "lit";
 import { customElement as o, state as s } from "lit/decorators.js";

package/dist-lib/{webmapx-info-tool-D-XbAU9J.js → webmapx-info-tool-C3txgv3v.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./decorate-DnZTfaod.js";
-import { t } from "./webmapx-base-tool-DfRa7TlD.js";
+import { t as e } from "./decorate-CKr8yG1g.js";
+import { t } from "./webmapx-base-tool-Bc9Wz0yA.js";
+import "./icon-CBNpO1lq.js";
+import "./spinner-DdcBaa3z.js";
 import { t as n } from "./throttle-BeneRNYK.js";
 import { t as r } from "./wms-feature-info-C0RVMEQC.js";
 import { css as i, html as a, nothing as o } from "lit";
 import { customElement as s, state as c } from "lit/decorators.js";
-import "@shoelace-style/shoelace/dist/components/icon/icon.js";
-import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
 //#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) {

package/dist-lib/{webmapx-language-osmvector-BAw9TR-M.js → webmapx-language-osmvector-jQzTOPU1.js}

@@ -1,9 +1,8 @@
-import { t as e } from "./decorate-DnZTfaod.js";
-import { t } from "./webmapx-modal-tool-Cs7LRrgW.js";
+import { t as e } from "./decorate-CKr8yG1g.js";
+import { t } from "./webmapx-modal-tool-DQVHNXqX.js";
+import "./option-BQN9Zz_8.js";
 import { css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
-import "@shoelace-style/shoelace/dist/components/select/select.js";
-import "@shoelace-style/shoelace/dist/components/option/option.js";
 //#region src/components/webmapx-language-osmvector.ts
 var o = "webmapx-language-osmvector", s = "webmapx-language-osmvector-change", c = /* @__PURE__ */ new WeakMap(), l = [
 	{

package/dist-lib/{webmapx-measure-tool-CXlg11s8.js → webmapx-measure-tool-Cxxrzgdf.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./decorate-DnZTfaod.js";
+import { t as e } from "./decorate-CKr8yG1g.js";
+import "./icon-CBNpO1lq.js";
+import "./button-BlZd3WPH.js";
 import { i as t, n, r, t as i } from "./geo-calculations-DbFJAUoI.js";
 import { t as a } from "./throttle-BeneRNYK.js";
-import { t as o } from "./webmapx-modal-tool-Cs7LRrgW.js";
+import { t as o } from "./webmapx-modal-tool-DQVHNXqX.js";
 import { css as s, html as c, nothing as l } from "lit";
 import { customElement as u, property as d, state as f } from "lit/decorators.js";
-import "@shoelace-style/shoelace/dist/components/button/button.js";
-import "@shoelace-style/shoelace/dist/components/icon/icon.js";
 //#region src/components/webmapx-measure-tool.ts
 var p = "webmapx-measure-static-source", m = "webmapx-measure-points", h = "webmapx-measure-lines", g = "webmapx-measure-polygon", _ = "webmapx-measure-segment-labels", v = "webmapx-measure-rubberband-source", y = "webmapx-measure-rubberband-layer", b = class extends o {
 	constructor(...e) {

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

@@ -1,5 +1,5 @@
-import { r as e, t } from "./decorate-DnZTfaod.js";
-import { t as n } from "./webmapx-base-tool-DfRa7TlD.js";
+import { r as e, t } from "./decorate-CKr8yG1g.js";
+import { t as n } from "./webmapx-base-tool-Bc9Wz0yA.js";
 import { property as r } from "lit/decorators.js";
 //#region src/components/webmapx-modal-tool.ts
 var i = class extends n {

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

@@ -1,4 +1,4 @@
-import { t as e } from "./decorate-DnZTfaod.js";
+import { t as e } from "./decorate-CKr8yG1g.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

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

@@ -1,14 +1,13 @@
-import { r as e, t } from "./decorate-DnZTfaod.js";
+import { r as e, t } from "./decorate-CKr8yG1g.js";
+import "./button-BlZd3WPH.js";
+import "./checkbox-DB4oPyyw.js";
+import "./input-B212BH6L.js";
+import "./spinner-DdcBaa3z.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 { t as a } from "./webmapx-modal-tool-DQVHNXqX.js";
+import "./option-BQN9Zz_8.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) {

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

@@ -1,5 +1,5 @@
-import { r as e, t } from "./decorate-DnZTfaod.js";
-import { t as n } from "./webmapx-base-tool-DfRa7TlD.js";
+import { r as e, t } from "./decorate-CKr8yG1g.js";
+import { t as n } from "./webmapx-base-tool-Bc9Wz0yA.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

package/dist-lib/webmapx-settings-B0AT9Vjn.js

@@ -0,0 +1,482 @@
+import { a as e, i as t, n, r } from "./chunk.YHLNUJ7P-ByKy0MKm.js";
+import { c as i, d as a, l as o, r as s, s as c, t as l, u } from "./decorate-CKr8yG1g.js";
+import { t as d } from "./chunk.NYIIDP5N-B4UCI-rQ.js";
+import { t as f } from "./chunk.3RPBFEDE-Cxq6VVR6.js";
+import { n as p } from "./input-B212BH6L.js";
+import { t as m } from "./chunk.SI4ACBFK-CLb9VfMG.js";
+import "./divider-BOFbR_Ny.js";
+import "./option-BQN9Zz_8.js";
+import { LitElement as h, css as g, html as _ } from "lit";
+import { customElement as v, property as y, query as b, state as x } from "lit/decorators.js";
+import { classMap as S } from "lit/directives/class-map.js";
+import { ifDefined as C } from "lit/directives/if-defined.js";
+import { live as w } from "lit/directives/live.js";
+//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.EU44RQUN.js
+var T = g`
+  :host {
+    display: inline-block;
+  }
+
+  :host([size='small']) {
+    --height: var(--sl-toggle-size-small);
+    --thumb-size: calc(var(--sl-toggle-size-small) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--sl-input-font-size-small);
+  }
+
+  :host([size='medium']) {
+    --height: var(--sl-toggle-size-medium);
+    --thumb-size: calc(var(--sl-toggle-size-medium) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--sl-input-font-size-medium);
+  }
+
+  :host([size='large']) {
+    --height: var(--sl-toggle-size-large);
+    --thumb-size: calc(var(--sl-toggle-size-large) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--sl-input-font-size-large);
+  }
+
+  .switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--sl-input-font-family);
+    font-size: inherit;
+    font-weight: var(--sl-input-font-weight);
+    color: var(--sl-input-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .switch__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--width);
+    height: var(--height);
+    background-color: var(--sl-color-neutral-400);
+    border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
+    border-radius: var(--height);
+    transition:
+      var(--sl-transition-fast) border-color,
+      var(--sl-transition-fast) background-color;
+  }
+
+  .switch__control .switch__thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--sl-color-neutral-0);
+    border-radius: 50%;
+    border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
+    translate: calc((var(--width) - var(--height)) / -2);
+    transition:
+      var(--sl-transition-fast) translate ease,
+      var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) border-color,
+      var(--sl-transition-fast) box-shadow;
+  }
+
+  .switch__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+    background-color: var(--sl-color-neutral-400);
+    border-color: var(--sl-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-neutral-400);
+  }
+
+  /* Focus */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--sl-color-neutral-400);
+    border-color: var(--sl-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+  }
+
+  /* Checked */
+  .switch--checked .switch__control {
+    background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  .switch--checked .switch__control .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    translate: calc((var(--width) - var(--height)) / 2);
+  }
+
+  /* Checked + hover */
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
+    background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  /* Checked + focus */
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+  }
+
+  /* Disabled */
+  .switch--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .switch__label {
+    display: inline-block;
+    line-height: var(--height);
+    margin-inline-start: 0.5em;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host([required]) .switch__label::after {
+    content: var(--sl-input-required-content);
+    color: var(--sl-input-required-content-color);
+    margin-inline-start: var(--sl-input-required-content-offset);
+  }
+
+  @media (forced-colors: active) {
+    .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
+    .switch--checked .switch__control .switch__thumb {
+      background-color: ButtonText;
+    }
+  }
+`, E = class extends n {
+	constructor() {
+		super(...arguments), this.formControlController = new f(this, {
+			value: (e) => e.checked ? e.value || "on" : void 0,
+			defaultValue: (e) => e.defaultChecked,
+			setValue: (e, t) => e.checked = t
+		}), this.hasSlotController = new d(this, "help-text"), this.hasFocus = !1, this.title = "", this.name = "", this.size = "medium", this.disabled = !1, this.checked = !1, this.defaultChecked = !1, this.form = "", this.required = !1, this.helpText = "";
+	}
+	get validity() {
+		return this.input.validity;
+	}
+	get validationMessage() {
+		return this.input.validationMessage;
+	}
+	firstUpdated() {
+		this.formControlController.updateValidity();
+	}
+	handleBlur() {
+		this.hasFocus = !1, this.emit("sl-blur");
+	}
+	handleInput() {
+		this.emit("sl-input");
+	}
+	handleInvalid(e) {
+		this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(e);
+	}
+	handleClick() {
+		this.checked = !this.checked, this.emit("sl-change");
+	}
+	handleFocus() {
+		this.hasFocus = !0, this.emit("sl-focus");
+	}
+	handleKeyDown(e) {
+		e.key === "ArrowLeft" && (e.preventDefault(), this.checked = !1, this.emit("sl-change"), this.emit("sl-input")), e.key === "ArrowRight" && (e.preventDefault(), this.checked = !0, this.emit("sl-change"), this.emit("sl-input"));
+	}
+	handleCheckedChange() {
+		this.input.checked = this.checked, this.formControlController.updateValidity();
+	}
+	handleDisabledChange() {
+		this.formControlController.setValidity(!0);
+	}
+	click() {
+		this.input.click();
+	}
+	focus(e) {
+		this.input.focus(e);
+	}
+	blur() {
+		this.input.blur();
+	}
+	checkValidity() {
+		return this.input.checkValidity();
+	}
+	getForm() {
+		return this.formControlController.getForm();
+	}
+	reportValidity() {
+		return this.input.reportValidity();
+	}
+	setCustomValidity(e) {
+		this.input.setCustomValidity(e), this.formControlController.updateValidity();
+	}
+	render() {
+		let e = this.hasSlotController.test("help-text"), t = this.helpText ? !0 : !!e;
+		return _`
+      <div
+        class=${S({
+			"form-control": !0,
+			"form-control--small": this.size === "small",
+			"form-control--medium": this.size === "medium",
+			"form-control--large": this.size === "large",
+			"form-control--has-help-text": t
+		})}
+      >
+        <label
+          part="base"
+          class=${S({
+			switch: !0,
+			"switch--checked": this.checked,
+			"switch--disabled": this.disabled,
+			"switch--focused": this.hasFocus,
+			"switch--small": this.size === "small",
+			"switch--medium": this.size === "medium",
+			"switch--large": this.size === "large"
+		})}
+        >
+          <input
+            class="switch__input"
+            type="checkbox"
+            title=${this.title}
+            name=${this.name}
+            value=${C(this.value)}
+            .checked=${w(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            role="switch"
+            aria-checked=${this.checked ? "true" : "false"}
+            aria-describedby="help-text"
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @invalid=${this.handleInvalid}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+            @keydown=${this.handleKeyDown}
+          />
+
+          <span part="control" class="switch__control">
+            <span part="thumb" class="switch__thumb"></span>
+          </span>
+
+          <div part="label" class="switch__label">
+            <slot></slot>
+          </div>
+        </label>
+
+        <div
+          aria-hidden=${t ? "false" : "true"}
+          class="form-control__help-text"
+          id="help-text"
+          part="form-control-help-text"
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+	}
+};
+//#endregion
+//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.IADS735N.js
+E.styles = [
+	r,
+	m,
+	T
+], e([b("input[type=\"checkbox\"]")], E.prototype, "input", 2), e([x()], E.prototype, "hasFocus", 2), e([y()], E.prototype, "title", 2), e([y()], E.prototype, "name", 2), e([y()], E.prototype, "value", 2), e([y({ reflect: !0 })], E.prototype, "size", 2), e([y({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "disabled", 2), e([y({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "checked", 2), e([p("checked")], E.prototype, "defaultChecked", 2), e([y({ reflect: !0 })], E.prototype, "form", 2), e([y({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "required", 2), e([y({ attribute: "help-text" })], E.prototype, "helpText", 2), e([t("checked", { waitUntilFirstUpdate: !0 })], E.prototype, "handleCheckedChange", 1), e([t("disabled", { waitUntilFirstUpdate: !0 })], E.prototype, "handleDisabledChange", 1), E.define("sl-switch");
+//#endregion
+//#region src/components/webmapx-settings.ts
+var D = class extends h {
+	constructor(...e) {
+		super(...e), this.darkMode = !1, this.apiKey = "", this.currentAdapter = u, this.availableAdapters = [];
+	}
+	static {
+		this.styles = g`
+        :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 = a().filter((e) => ![
+			"ol",
+			"l",
+			"c"
+		].includes(e)), this.currentAdapter = this.detectCurrentAdapter();
+	}
+	getMapStorageKey(e, t) {
+		return c(e.id, t);
+	}
+	detectCurrentAdapter() {
+		let e = s(this);
+		if (!e) return u;
+		let t = this.getMapStorageKey(e, "adapter"), n = o({
+			explicitAdapter: e.getAttribute("adapter") ?? e.getAttribute("type"),
+			savedAdapter: t ? localStorage.getItem(t) : null,
+			configuredAdapter: e.mapConfig?.type ?? null,
+			defaultAdapter: u
+		});
+		return this.availableAdapters.includes(n) ? n : u;
+	}
+	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(e) {
+		let t = e.target, n = i(t.value);
+		if (!n || n === this.currentAdapter) return;
+		let r = s(this);
+		if (!r) {
+			console.error("[webmapx-settings] No <webmapx-map> found for adapter switching.");
+			return;
+		}
+		let a = this.getMapStorageKey(r, "adapter");
+		r.saveState?.(), a && localStorage.setItem(a, n), window.location.reload();
+	}
+	formatAdapterName(e) {
+		return {
+			maplibre: "MapLibre GL",
+			openlayers: "OpenLayers",
+			leaflet: "Leaflet",
+			cesium: "Cesium"
+		}[e] || e;
+	}
+	render() {
+		return _`
+            <div class="setting-group">
+                <h4>Map Engine</h4>
+                <sl-select
+                    label="Adapter"
+                    value=${this.currentAdapter}
+                    @sl-change=${this.handleAdapterChange}
+                >
+                    ${this.availableAdapters.map((e) => _`
+                        <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>
+        `;
+	}
+};
+l([x()], D.prototype, "darkMode", void 0), l([x()], D.prototype, "apiKey", void 0), l([x()], D.prototype, "currentAdapter", void 0), l([x()], D.prototype, "availableAdapters", void 0), D = l([v("webmapx-settings")], D);
+//#endregion
+export { D as WebmapxSettings };

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

@@ -1,6 +1,6 @@
-import { r as e, t } from "./decorate-DnZTfaod.js";
+import { r as e, t } from "./decorate-CKr8yG1g.js";
 import { t as n } from "./esm-CTuscnN5.js";
-import { t as r } from "./webmapx-modal-tool-Cs7LRrgW.js";
+import { t as r } from "./webmapx-modal-tool-DQVHNXqX.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

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

@@ -1,5 +1,5 @@
-import { r as e, t } from "./decorate-DnZTfaod.js";
-import { t as n } from "./webmapx-base-tool-DfRa7TlD.js";
+import { r as e, t } from "./decorate-CKr8yG1g.js";
+import { t as n } from "./webmapx-base-tool-Bc9Wz0yA.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