import { appendRootNodeStyle as e, openEyeDropper as t } from "../internal/utils/dom.js";
import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
import { useStyles as r } from "../internal/styles/index.js";
import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
import { Control as a } from "../forms/control/control2.js";
import { IconButton as o } from "../icon-button/icon-button2.js";
import { inputStyles as s } from "../input/input2.js";
import c from "./color.global.js";
import l from "./color.js";
import { html as u } from "lit";
import { property as d } from "lit/decorators/property.js";
//#region src/color/color.ts
var f = class extends a {
	static {
		this.styles = r([
			...a.styles,
			s,
			l
		]);
	}
	static {
		this.metadata = {
			tag: "nve-color",
			version: "2.0.2"
		};
	}
	static {
		this.elementDefinitions = { [o.metadata.tag]: o };
	}
	get suffixContent() {
		return u`<nve-icon-button part="icon-button" .role="${"button"}" .ariaLabel="${this.i18n.expand}" icon-name="dropper" container="inline" @click="${() => this.#e()}"></nve-icon-button>`;
	}
	connectedCallback() {
		if (super.connectedCallback(), e(this, c), this.input.value === "#000000") {
			let e = getComputedStyle(this).getPropertyValue("--background").trim();
			e.includes("#") && (this.input.value = e);
		}
	}
	async #e() {
		this.input.value = await t(), this.input.dispatchEvent(new Event("input", { bubbles: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0 }));
	}
};
i([d({
	type: String,
	reflect: !0
})], f.prototype, "container", void 0), f = i([n()], f);
//#endregion
export { f as Color };

//# sourceMappingURL=color2.js.map