import { I18nController as e } from "../internal/controllers/i18n.controller.js";
import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
import { useStyles as n } from "../internal/styles/index.js";
import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
import { Icon as i } from "../icon/icon2.js";
import { Control as a } from "../forms/control/control2.js";
import { Switch as o } from "../switch/switch2.js";
import { Menu as s } from "../menu/menu2.js";
import { MenuItem as c } from "../menu/menu-item2.js";
import { Divider as l } from "../divider/divider2.js";
import u from "./preferences-input.js";
import { LitElement as d, html as f, isServer as p } from "lit";
import { property as m } from "lit/decorators/property.js";
import { state as h } from "lit/decorators/state.js";
import { FormControlMixin as g } from "@nvidia-elements/forms/mixins";
//#region src/preferences-input/preferences-input.ts
var _ = [
	"auto",
	"light",
	"dark",
	"high-contrast"
], v = ["default", "compact"], y = {
	auto: "computer",
	light: "sun",
	dark: "moon",
	"high-contrast": "circle-half"
};
function b(e = globalThis.document.documentElement) {
	let t = getComputedStyle(e);
	return {
		light: t.getPropertyValue("--nve-config-color-scheme-light") === "true",
		dark: t.getPropertyValue("--nve-config-color-scheme-dark") === "true",
		"high-contrast": t.getPropertyValue("--nve-config-color-scheme-high-contrast") === "true",
		compact: t.getPropertyValue("--nve-config-scale-compact") === "true",
		"reduced-motion": t.getPropertyValue("--nve-config-reduced-motion") === "true"
	};
}
var x = class extends g(d) {
	#e;
	static {
		this.styles = n([u]);
	}
	static {
		this.metadata = {
			tag: "nve-preferences-input",
			version: "2.0.2",
			valueSchema: {
				type: "object",
				properties: {
					"color-scheme": { type: "string" },
					scale: { type: "string" },
					"reduced-motion": { type: "boolean" }
				}
			}
		};
	}
	static {
		this.elementDefinitions = {
			[a.metadata.tag]: a,
			[l.metadata.tag]: l,
			[i.metadata.tag]: i,
			[s.metadata.tag]: s,
			[c.metadata.tag]: c,
			[o.metadata.tag]: o
		};
	}
	render() {
		return f`<div internal-host><nve-control part="control"><label>${this.i18n.colorScheme}</label><nve-menu part="menu" nve-control>${_.map((e) => f`<nve-menu-item part="menu-item" .selected="${this.value?.["color-scheme"] === e}" .value="${e}" @click="${() => this.#n(e)}"><nve-icon part="icon" name="${y[e]}"></nve-icon>${e}</nve-menu-item>`)}</nve-menu></nve-control>${this.activePreferences.compact ? f`<nve-divider part="divider"></nve-divider><nve-control part="control"><label>${this.i18n.scale}</label><nve-menu part="menu" nve-control>${v.map((e) => f`<nve-menu-item part="menu-item" .selected="${this.value?.scale === e}" .value="${e}" @click="${() => this.#r(e)}">${e}</nve-menu-item>`)}</nve-menu></nve-control>` : ""} ${this.activePreferences["reduced-motion"] ? f`<nve-divider part="divider"></nve-divider><nve-switch part="switch"><label>${this.i18n.reducedMotion}</label> <input type="checkbox" value="reduced-motion" .checked="${this.value?.["reduced-motion"]}" @change="${(e) => this.#i(e.target.checked)}"></nve-switch>` : ""}</div>`;
	}
	constructor() {
		super(), this.#e = new e(this), this.i18n = this.#e.i18n, this.activePreferences = {
			light: !1,
			dark: !1,
			"high-contrast": !1,
			compact: !1,
			"reduced-motion": !1
		}, this.value = {
			"color-scheme": "auto",
			"reduced-motion": !1,
			scale: "default"
		};
	}
	connectedCallback() {
		super.connectedCallback(), this.setAttribute("nve-control", ""), this.#t();
	}
	updateValue(e) {
		super.updateValue({
			...this.value,
			...e
		}), this.#t();
	}
	#t() {
		/* istanbul ignore else -- Lit SSR mode is not reachable in browser unit tests. */
		if (!p) {
			let e = b();
			JSON.stringify(this.activePreferences) !== JSON.stringify(e) && (this.activePreferences = e);
		}
	}
	#n(e) {
		this.value = {
			...this.value,
			"color-scheme": e
		}, this.#a();
	}
	#r(e) {
		this.value = {
			...this.value,
			scale: e
		}, this.#a();
	}
	#i(e) {
		this.value = {
			...this.value,
			"reduced-motion": e
		}, this.#a();
	}
	#a() {
		this.dispatchInputEvent(), this.dispatchChangeEvent();
	}
};
r([m({ type: Object })], x.prototype, "i18n", void 0), r([h()], x.prototype, "activePreferences", void 0), x = r([t()], x);
//#endregion
export { x as PreferencesInput };

//# sourceMappingURL=preferences-input2.js.map