@edugis-org/webmapx 0.1.0

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

@@ -0,0 +1,479 @@
+import { c as e, d as t, l as n, r, s as i, t as a, u as o } from "./decorate-CWgUV1hU.js";
+import { a as s, i as c, n as l, o as u } from "./decorators-B35AgiCU.js";
+import { d, f, l as p, u as m } from "./chunk.YHLNUJ7P-D-kanrCf.js";
+import { a as h, n as g, t as _ } from "./chunk.NYIIDP5N-BikXIStD.js";
+import { t as v } from "./chunk.3RPBFEDE-BFO1fHVm.js";
+import { n as y, r as b } from "./input-CeGntPlT.js";
+import { t as x } from "./chunk.SI4ACBFK-CLb9VfMG.js";
+import "./divider-CPm675yY.js";
+import "./option-CBxl1mZP.js";
+import { LitElement as S, css as C, html as w } from "lit";
+//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.EU44RQUN.js
+var T = C`
+  :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 p {
+	constructor() {
+		super(...arguments), this.formControlController = new v(this, {
+			value: (e) => e.checked ? e.value || "on" : void 0,
+			defaultValue: (e) => e.defaultChecked,
+			setValue: (e, t) => e.checked = t
+		}), this.hasSlotController = new _(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 w`
+      <div
+        class=${h({
+			"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=${h({
+			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=${g(this.value)}
+            .checked=${y(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 = [
+	m,
+	x,
+	T
+], f([l("input[type=\"checkbox\"]")], E.prototype, "input", 2), f([c()], E.prototype, "hasFocus", 2), f([s()], E.prototype, "title", 2), f([s()], E.prototype, "name", 2), f([s()], E.prototype, "value", 2), f([s({ reflect: !0 })], E.prototype, "size", 2), f([s({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "disabled", 2), f([s({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "checked", 2), f([b("checked")], E.prototype, "defaultChecked", 2), f([s({ reflect: !0 })], E.prototype, "form", 2), f([s({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "required", 2), f([s({ attribute: "help-text" })], E.prototype, "helpText", 2), f([d("checked", { waitUntilFirstUpdate: !0 })], E.prototype, "handleCheckedChange", 1), f([d("disabled", { waitUntilFirstUpdate: !0 })], E.prototype, "handleDisabledChange", 1), E.define("sl-switch");
+//#endregion
+//#region src/components/webmapx-settings.ts
+var D = 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 w`
+            <div class="setting-group">
+                <h4>Map Engine</h4>
+                <sl-select
+                    label="Adapter"
+                    value=${this.currentAdapter}
+                    @sl-change=${this.handleAdapterChange}
+                >
+                    ${this.availableAdapters.map((e) => w`
+                        <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([c()], D.prototype, "darkMode", void 0), a([c()], D.prototype, "apiKey", void 0), a([c()], D.prototype, "currentAdapter", void 0), a([c()], D.prototype, "availableAdapters", void 0), D = a([u("webmapx-settings")], D);
+//#endregion
+export { D as WebmapxSettings };