@edugis-org/webmapx 0.1.7 → 0.1.8

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

@@ -1,479 +0,0 @@
-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 };