@shtabapp/ui-kit 1.33.0 → 1.34.0

package/dist/SColorPicker-Cs0QmYWm.js

@@ -0,0 +1,635 @@
+import { n as e } from "./contrastSurfaceTextColor-Dl641cZ_.js";
+import { n as t, o as n, r, t as i } from "./SColorPalette-B9WrqgRz.js";
+import { a, n as o } from "./colorValue-DXJiNKGE.js";
+import { n as s, r as c, t as l } from "./SButton.types-CpdHQtyx.js";
+import { t as u } from "./SButton-DnU_XZ1C.js";
+import { i as d } from "./useFloatingOverlay-QcumEYEq.js";
+import { t as f } from "./SDropdown-CTQ5Qlez.js";
+import { r as p, t as m } from "./SSelect-AcH04gtk.js";
+import { Fragment as h, computed as g, createBlock as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onMounted as O, openBlock as k, ref as A, shallowRef as j, toRef as M, unref as N, useModel as P, useTemplateRef as F, vModelText as I, watch as L, withCtx as R, withDirectives as z } from "vue";
+import { ESColorSwatchSize as B, SColorSwatch as V } from "@shtabapp/ui-kit-primitives";
+import { useEventListener as H } from "@vueuse/core";
+//#region src/utils/color/colorFormatChannels.ts
+var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
+	let t = e % 360;
+	return t < 0 ? t + 360 : t;
+}, W = (e) => Math.max(0, Math.min(100, Math.round(e))), te = (e) => {
+	let t = e.slice(1);
+	if (t.length === 3) {
+		let e = t[0], n = t[1], r = t[2];
+		return !e || !n || !r ? void 0 : `${e}${e}${n}${n}${r}${r}`;
+	}
+	if (t.length === 6 || t.length === 8) return t.slice(0, 6);
+}, G = (e) => {
+	let t = te(e);
+	if (!t) return;
+	let n = Number.parseInt(t.slice(0, 2), 16), r = Number.parseInt(t.slice(2, 4), 16), i = Number.parseInt(t.slice(4, 6), 16);
+	if (!(Number.isNaN(n) || Number.isNaN(r) || Number.isNaN(i))) return {
+		first: n,
+		second: r,
+		third: i
+	};
+}, K = (e) => {
+	let t = U(e.first), n = U(e.second), r = U(e.third);
+	return `#${t.toString(16).padStart(2, "0").toUpperCase()}${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}`;
+}, q = (e) => {
+	let t = G(e);
+	if (!t) return;
+	let n = t.first / 255, r = t.second / 255, i = t.third / 255, a = Math.max(n, r, i), o = Math.min(n, r, i), s = a - o, c = 0, l = (a + o) / 2;
+	s !== 0 && (c = a === n ? ((r - i) / s + (r < i ? 6 : 0)) * 60 : a === r ? ((i - n) / s + 2) * 60 : ((n - r) / s + 4) * 60);
+	let u = 0;
+	return s !== 0 && (u = l > .5 ? s / (2 - a - o) : s / (a + o)), {
+		first: Math.round(c),
+		second: Math.round(u * 100),
+		third: Math.round(l * 100)
+	};
+}, ne = (e) => {
+	let t = ee(e.first), n = W(e.second) / 100, r = W(e.third) / 100, i = (e) => {
+		let i = (t + e) / 30;
+		return U((r - n * Math.min(r, 1 - r) * Math.max(-1, Math.min(i % 2 - 1, 1))) * 255);
+	};
+	return K({
+		first: i(0),
+		second: i(8),
+		third: i(4)
+	});
+}, re = (t) => {
+	let n = t.toUpperCase(), r = n.startsWith("#") ? n.slice(1) : n;
+	if (!/^[0-9A-F]{3}$/.test(r) && !/^[0-9A-F]{6}$/.test(r)) return;
+	let i = `#${r}`;
+	if (e(i)) return K(G(i) ?? {
+		first: 0,
+		second: 0,
+		third: 0
+	});
+}, ie = (e) => e.slice(1).toUpperCase(), ae = (e) => {
+	let t = e.first / 255, n = e.second / 255, r = e.third / 255, i = Math.max(t, n, r), a = i - Math.min(t, n, r), o = 0;
+	a !== 0 && (o = i === t ? (n - r) / a % 6 : i === n ? (r - t) / a + 2 : (t - n) / a + 4, o = Math.round(o * 60), o < 0 && (o += 360));
+	let s = i === 0 ? 0 : a / i;
+	return {
+		hue: o,
+		saturation: s,
+		value: i
+	};
+}, oe = (e) => {
+	let t = e.value * e.saturation, n = e.hue / 60, r = t * (1 - Math.abs(n % 2 - 1)), i = e.value - t, a = 0, o = 0, s = 0;
+	return n >= 0 && n < 1 ? (a = t, o = r) : n >= 1 && n < 2 ? (a = r, o = t) : n >= 2 && n < 3 ? (o = t, s = r) : n >= 3 && n < 4 ? (o = r, s = t) : n >= 4 && n < 5 ? (a = r, s = t) : (a = t, s = r), {
+		first: U((a + i) * 255),
+		second: U((o + i) * 255),
+		third: U((s + i) * 255)
+	};
+}, J = (e) => {
+	let t = G(e);
+	if (t) return ae(t);
+}, Y = (e) => K(oe(e)), X = [
+	n.HEX,
+	n.RGB,
+	n.HSL
+], se = {
+	[n.HEX]: "Hex",
+	[n.RGB]: "RGB",
+	[n.HSL]: "HSL"
+}, ce = (e) => {
+	let t = getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	if (!t) return;
+	let n = Number.parseInt(t[1] ?? "0", 10), r = Number.parseInt(t[2] ?? "0", 10), i = Number.parseInt(t[3] ?? "0", 10);
+	return `#${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}${i.toString(16).padStart(2, "0").toUpperCase()}`;
+}, Z = (t, n) => {
+	if (o(t) && e(t)) return t;
+	if (n) return ce(n);
+}, le = (e, t) => t === n.HEX ? ie(e) : t === n.RGB ? G(e) ?? {
+	first: 0,
+	second: 0,
+	third: 0
+} : q(e) ?? {
+	first: 0,
+	second: 0,
+	third: 0
+}, Q = (e) => {
+	let t = Number.parseInt(e, 10);
+	if (!Number.isNaN(t)) return t;
+}, $ = (e, t) => {
+	if (e === n.HEX) return typeof t == "string" ? re(t) : void 0;
+	if (typeof t == "string") return;
+	if (e === n.RGB) {
+		let e = K({
+			first: Q(String(t.first)) ?? 0,
+			second: Q(String(t.second)) ?? 0,
+			third: Q(String(t.third)) ?? 0
+		});
+		return G(e) ? e : void 0;
+	}
+	let r = ne({
+		first: Q(String(t.first)) ?? 0,
+		second: Q(String(t.second)) ?? 0,
+		third: Q(String(t.third)) ?? 0
+	});
+	if (r && q(r)) return r;
+}, ue = 17, de = "#000000", fe = (e) => e ?? de, pe = ({ modelValue: e, getEditableHex: t, saturationAreaRef: n, hueSliderRef: r, disabled: i, readonly: a }) => {
+	let o = J(fe(t())) ?? {
+		hue: 0,
+		saturation: 0,
+		value: 0
+	}, s = A(o.hue), c = A(o.saturation), l = A(o.value), u = A(!1), d = A(!1), f = A(!1), p = j(null), m = j(null), h = g(() => Y({
+		hue: s.value,
+		saturation: c.value,
+		value: l.value
+	})), _ = g(() => Y({
+		hue: s.value,
+		saturation: 1,
+		value: 1
+	})), v = (e) => {
+		s.value = Math.max(0, Math.min(360, e));
+	}, y = (e, t) => {
+		c.value = Math.max(0, Math.min(1, e)), l.value = Math.max(0, Math.min(1, t));
+	}, b = (e) => {
+		let t = J(fe(e));
+		t && (u.value = !0, t.saturation > 0 && (s.value = t.hue), c.value = t.saturation, l.value = t.value, u.value = !1);
+	}, x = () => {
+		let e = t();
+		e && e.toUpperCase() !== h.value.toUpperCase() && b(e);
+	}, S = () => {
+		let n = h.value;
+		t()?.toUpperCase() !== n.toUpperCase() && (u.value = !0, e.value = n, u.value = !1);
+	};
+	L([
+		s,
+		c,
+		l
+	], () => {
+		u.value || S();
+	}), L(e, () => {
+		u.value || x();
+	}), O(() => {
+		T(() => {
+			C(), w(), x();
+		});
+	});
+	let C = () => {
+		p.value = n.value?.getBoundingClientRect() ?? null;
+	}, w = () => {
+		m.value = r.value?.getBoundingClientRect() ?? null;
+	}, E = g(() => {
+		let e = p.value;
+		return e ? { transform: `translate3d(calc(${c.value * e.width}px - 50%), calc(${(1 - l.value) * e.height}px - 50%), 0)` } : {};
+	}), D = g(() => {
+		let e = m.value;
+		return e ? { transform: `translate3d(-50%, calc(${s.value / 360 * e.height}px - 50%), 0)` } : {};
+	}), k = () => !i.value && !a.value, M = (e) => {
+		let t = p.value;
+		if (!t) return;
+		let n = Math.max(0, Math.min(e.clientX - t.left, t.width)), r = Math.max(0, Math.min(e.clientY - t.top, t.height));
+		y(n / t.width, 1 - r / t.height);
+	}, N = (e) => {
+		let t = m.value;
+		t && v(Math.max(0, Math.min(e.clientY - t.top, t.height)) / t.height * 360);
+	}, P = (e) => {
+		k() && (C(), d.value = !0, M(e), e.currentTarget instanceof HTMLElement && e.currentTarget.setPointerCapture(e.pointerId));
+	}, F = (e) => {
+		k() && (w(), f.value = !0, N(e), e.currentTarget instanceof HTMLElement && e.currentTarget.setPointerCapture(e.pointerId));
+	}, I = () => {
+		d.value = !1;
+	}, R = () => {
+		f.value = !1;
+	};
+	return H(n, "pointermove", (e) => {
+		d.value && M(e);
+	}), H(n, "pointerup", I), H(n, "pointercancel", I), H(n, "lostpointercapture", I), H(r, "pointermove", (e) => {
+		f.value && N(e);
+	}), H(r, "pointerup", R), H(r, "pointercancel", R), H(r, "lostpointercapture", R), {
+		hexColor: h,
+		hueBackground: _,
+		saturationPointerStyle: E,
+		huePointerStyle: D,
+		handleSaturationPointerDown: P,
+		handleHuePointerDown: F,
+		syncFromModelValue: x
+	};
+}, me = (e) => {
+	if (!e) return null;
+	let t = e.$el;
+	if (!(t instanceof HTMLElement)) return null;
+	let n = t.querySelector(".s-ui-color-swatch__fill");
+	return n instanceof HTMLElement ? n : null;
+}, he = { class: "s-ui-color-area__canvas-row" }, ge = ["aria-disabled"], _e = /* @__PURE__ */ S({
+	__name: "SColorArea",
+	props: /*@__PURE__*/ C({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = P(e, "modelValue"), n = F("colorResolutionSwatchRef"), r = F("saturationAreaRef"), i = F("hueSliderRef"), o = () => Z(t.value, me(n.value)), s = g(() => a(t.value)), { hexColor: c, hueBackground: l, saturationPointerStyle: u, huePointerStyle: d, handleSaturationPointerDown: f, handleHuePointerDown: p } = pe({
+			modelValue: t,
+			getEditableHex: o,
+			saturationAreaRef: r,
+			hueSliderRef: i,
+			disabled: M(() => e.disabled),
+			readonly: M(() => e.readonly)
+		});
+		return (t, a) => (k(), v("div", w({ class: ["s-ui-color-area", {
+			"s-ui-color-area--disabled": e.disabled,
+			"s-ui-color-area--readonly": e.readonly
+		}] }, t.$attrs), [x(N(V), {
+			ref_key: "colorResolutionSwatchRef",
+			ref: n,
+			class: "s-ui-color-area__color-resolution",
+			color: s.value,
+			size: N(B).SIZE_24,
+			tabindex: "-1",
+			"aria-hidden": "true"
+		}, null, 8, ["color", "size"]), y("div", he, [y("div", {
+			ref_key: "saturationAreaRef",
+			ref: r,
+			class: "s-ui-color-area__canvas",
+			role: "img",
+			"aria-label": "Color saturation and brightness",
+			style: D({ "--s-ui-color-area-hue": N(l) }),
+			onPointerdown: a[0] ||= (...e) => N(f) && N(f)(...e)
+		}, [y("div", {
+			class: "s-ui-color-area__canvas-pointer",
+			style: D({
+				...N(u),
+				backgroundColor: N(c)
+			})
+		}, null, 4)], 36), y("div", {
+			ref_key: "hueSliderRef",
+			ref: i,
+			class: "s-ui-color-area__hue",
+			role: "slider",
+			"aria-label": "Hue",
+			"aria-valuemin": "0",
+			"aria-valuemax": "360",
+			"aria-disabled": e.disabled || e.readonly,
+			onPointerdown: a[1] ||= (...e) => N(p) && N(p)(...e)
+		}, [y("div", {
+			class: "s-ui-color-area__hue-pointer",
+			style: D({
+				...N(d),
+				backgroundColor: N(l)
+			})
+		}, null, 4)], 40, ge)])], 16));
+	}
+}), ve = { class: "s-ui-color-values__left" }, ye = { class: "s-ui-color-values__format" }, be = { class: "s-ui-color-values__value-group" }, xe = { class: "s-ui-color-values__inputs" }, Se = {
+	key: 0,
+	class: "s-ui-color-values__input-wrap"
+}, Ce = ["disabled", "readonly"], we = { class: "s-ui-color-values__input-wrap" }, Te = [
+	"disabled",
+	"readonly",
+	"aria-label"
+], Ee = { class: "s-ui-color-values__input-wrap" }, De = [
+	"disabled",
+	"readonly",
+	"aria-label"
+], Oe = { class: "s-ui-color-values__input-wrap" }, ke = [
+	"disabled",
+	"readonly",
+	"aria-label"
+], Ae = /* @__PURE__ */ S({
+	__name: "SColorValues",
+	props: /*@__PURE__*/ C({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		formats: { default: () => X }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {},
+		format: { default: n.HEX },
+		formatModifiers: {}
+	}),
+	emits: /*@__PURE__*/ C(["formatDropdownOpen", "formatDropdownClose"], ["update:modelValue", "update:format"]),
+	setup(e, { emit: t }) {
+		let r = P(e, "modelValue"), i = P(e, "format"), o = t, d = F("previewSwatchRef"), f = A(""), p = A("0"), _ = A("0"), b = A("0"), S = g(() => (e.formats.length > 0 ? e.formats : X).map((e) => ({
+			value: e,
+			label: se[e]
+		}))), C = g(() => a(r.value)), E = g(() => Z(r.value, me(d.value))), D = g(() => i.value === n.RGB ? "Red channel" : "Hue"), j = g(() => i.value === n.RGB ? "Green channel" : "Saturation"), M = g(() => i.value === n.RGB ? "Blue channel" : "Lightness"), R = () => {
+			let e = E.value;
+			if (!e) return;
+			let t = le(e, i.value);
+			if (i.value === n.HEX && typeof t == "string") {
+				f.value = t;
+				return;
+			}
+			typeof t == "object" && (p.value = String(t.first), _.value = String(t.second), b.value = String(t.third));
+		};
+		L([
+			r,
+			i,
+			E
+		], () => {
+			R();
+		}), O(() => {
+			T(() => {
+				R();
+			});
+		});
+		let H = () => {
+			if (e.disabled || e.readonly) return;
+			if (i.value === n.HEX) {
+				let e = $(n.HEX, f.value);
+				e && (r.value = e), R();
+				return;
+			}
+			let t = $(i.value, {
+				first: Number.parseInt(p.value, 10),
+				second: Number.parseInt(_.value, 10),
+				third: Number.parseInt(b.value, 10)
+			});
+			t && (r.value = t), R();
+		}, U = (e) => {
+			e.key === "Enter" && (e.preventDefault(), H());
+		};
+		return (t, r) => (k(), v("div", w({ class: ["s-ui-color-values", {
+			"s-ui-color-values--disabled": e.disabled,
+			"s-ui-color-values--readonly": e.readonly
+		}] }, t.$attrs), [y("div", ve, [x(N(V), {
+			ref_key: "previewSwatchRef",
+			ref: d,
+			class: "s-ui-color-values__preview",
+			color: C.value,
+			size: N(B).SIZE_32,
+			disabled: e.disabled,
+			tabindex: "-1",
+			"aria-hidden": "true"
+		}, null, 8, [
+			"color",
+			"size",
+			"disabled"
+		]), y("div", ye, [x(N(m), {
+			modelValue: i.value,
+			"onUpdate:modelValue": r[0] ||= (e) => i.value = e,
+			class: "s-ui-color-values__format-select",
+			options: S.value,
+			disabled: e.disabled,
+			readonly: e.readonly,
+			bordered: !0,
+			clearable: !1,
+			"close-on-select": !0,
+			"fit-viewport": !1,
+			"aria-label": "Color format",
+			onOpen: r[1] ||= (e) => o("formatDropdownOpen"),
+			onClose: r[2] ||= (e) => o("formatDropdownClose")
+		}, null, 8, [
+			"modelValue",
+			"options",
+			"disabled",
+			"readonly"
+		])])]), y("div", be, [
+			x(N(u), {
+				class: "s-ui-color-values__pipette",
+				appearance: N(l).BARE,
+				variant: N(c).NEUTRAL,
+				size: N(s).SMALL,
+				icon: "pipette",
+				"aria-label": "Pick color",
+				"aria-disabled": "true",
+				disabled: e.disabled,
+				tabindex: "-1"
+			}, null, 8, [
+				"appearance",
+				"variant",
+				"size",
+				"disabled"
+			]),
+			r[9] ||= y("span", {
+				class: "s-ui-color-values__separator",
+				"aria-hidden": "true"
+			}, null, -1),
+			y("div", xe, [i.value === N(n).HEX ? (k(), v("div", Se, [z(y("input", {
+				"onUpdate:modelValue": r[3] ||= (e) => f.value = e,
+				class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+				type: "text",
+				inputmode: "text",
+				spellcheck: "false",
+				disabled: e.disabled,
+				readonly: e.readonly,
+				"aria-label": "Hex color value",
+				onBlur: H,
+				onKeydown: U
+			}, null, 40, Ce), [[I, f.value]])])) : (k(), v(h, { key: 1 }, [
+				y("div", we, [z(y("input", {
+					"onUpdate:modelValue": r[4] ||= (e) => p.value = e,
+					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+					type: "text",
+					inputmode: "numeric",
+					spellcheck: "false",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					"aria-label": D.value,
+					onBlur: H,
+					onKeydown: U
+				}, null, 40, Te), [[I, p.value]])]),
+				r[7] ||= y("span", {
+					class: "s-ui-color-values__separator",
+					"aria-hidden": "true"
+				}, null, -1),
+				y("div", Ee, [z(y("input", {
+					"onUpdate:modelValue": r[5] ||= (e) => _.value = e,
+					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+					type: "text",
+					inputmode: "numeric",
+					spellcheck: "false",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					"aria-label": j.value,
+					onBlur: H,
+					onKeydown: U
+				}, null, 40, De), [[I, _.value]])]),
+				r[8] ||= y("span", {
+					class: "s-ui-color-values__separator",
+					"aria-hidden": "true"
+				}, null, -1),
+				y("div", Oe, [z(y("input", {
+					"onUpdate:modelValue": r[6] ||= (e) => b.value = e,
+					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+					type: "text",
+					inputmode: "numeric",
+					spellcheck: "false",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					"aria-label": M.value,
+					onBlur: H,
+					onKeydown: U
+				}, null, 40, ke), [[I, b.value]])])
+			], 64))])
+		])], 16));
+	}
+}), je = { class: "s-ui-color-picker__section" }, Me = { class: "s-ui-color-picker__section" }, Ne = { class: "s-ui-color-picker__custom-editor" }, Pe = { class: "s-ui-color-picker__custom-actions" }, Fe = /* @__PURE__ */ S({
+	__name: "SColorPicker",
+	props: /*@__PURE__*/ C({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		recommendedColors: {},
+		recentColors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ C([
+		"select",
+		"customEditorOpen",
+		"customEditorClose",
+		"formatDropdownOpen",
+		"formatDropdownClose"
+	], ["update:modelValue"]),
+	setup(e, { emit: a }) {
+		let o = P(e, "modelValue"), m = a, h = A(!1), v = A("#526DE3"), S = A(n.HEX), C = g(() => e.recommendedColors && e.recommendedColors.length > 0 ? e.recommendedColors : r), T = g(() => e.recentColors.length <= 17 ? e.recentColors : e.recentColors.slice(0, 17)), D = () => {
+			if (o.value) {
+				v.value = o.value;
+				return;
+			}
+			v.value = "#526DE3";
+		}, O = (e) => {
+			m("select", e);
+		}, j = () => {
+			o.value = v.value, m("select", v.value), h.value = !1;
+		}, M = () => {
+			h.value = !1;
+		};
+		return L(h, (e, t) => {
+			if (e && !t) {
+				D(), m("customEditorOpen");
+				return;
+			}
+			!e && t && m("customEditorClose");
+		}), (n, r) => (k(), _(N(p), w({ width: 336 }, n.$attrs), {
+			default: R(() => [y("div", { class: E(["s-ui-color-picker", { "s-ui-color-picker--disabled": e.disabled }]) }, [y("section", je, [r[8] ||= y("span", { class: "s-ui-color-picker__label" }, "Рекомендованные цвета", -1), x(N(i), {
+				modelValue: o.value,
+				"onUpdate:modelValue": r[0] ||= (e) => o.value = e,
+				class: "s-ui-color-picker__palette",
+				layout: N(t).GRID,
+				colors: C.value,
+				size: N(B).SIZE_32,
+				disabled: e.disabled,
+				onSelect: O
+			}, null, 8, [
+				"modelValue",
+				"layout",
+				"colors",
+				"size",
+				"disabled"
+			])]), y("section", Me, [r[11] ||= y("span", { class: "s-ui-color-picker__label" }, "Последние использованные", -1), x(N(i), {
+				modelValue: o.value,
+				"onUpdate:modelValue": r[7] ||= (e) => o.value = e,
+				class: "s-ui-color-picker__palette",
+				layout: N(t).ROW,
+				colors: T.value,
+				size: N(B).SIZE_32,
+				disabled: e.disabled,
+				onSelect: O
+			}, {
+				append: R(() => [x(N(f), {
+					modelValue: h.value,
+					"onUpdate:modelValue": r[6] ||= (e) => h.value = e,
+					placement: N(d).RIGHT_START,
+					offset: 8,
+					shift: !0,
+					flip: !0,
+					disabled: e.disabled,
+					"dismiss-on-click-outside": !0,
+					"dismiss-on-escape": !0
+				}, {
+					trigger: R(({ toggle: t, triggerProps: n }) => [x(N(u), w(n, {
+						class: "s-ui-color-picker__add-button",
+						appearance: N(l).OUTLINED,
+						variant: N(c).NEUTRAL,
+						size: N(s).SMALL,
+						icon: "plus",
+						"aria-label": "Add custom color",
+						disabled: e.disabled,
+						onClick: t
+					}), null, 16, [
+						"appearance",
+						"variant",
+						"size",
+						"disabled",
+						"onClick"
+					])]),
+					content: R(() => [x(N(p), { width: 320 }, {
+						footer: R(() => [y("div", Pe, [x(N(u), {
+							class: "s-ui-color-picker__save-button",
+							appearance: N(l).MAJOR,
+							variant: N(c).MAIN,
+							size: N(s).SMALL,
+							disabled: e.disabled,
+							onClick: j
+						}, {
+							default: R(() => [...r[9] ||= [b(" Сохранить ", -1)]]),
+							_: 1
+						}, 8, [
+							"appearance",
+							"variant",
+							"size",
+							"disabled"
+						]), x(N(u), {
+							class: "s-ui-color-picker__cancel-button",
+							appearance: N(l).MINOR,
+							variant: N(c).NEUTRAL,
+							size: N(s).SMALL,
+							disabled: e.disabled,
+							onClick: M
+						}, {
+							default: R(() => [...r[10] ||= [b(" Отменить ", -1)]]),
+							_: 1
+						}, 8, [
+							"appearance",
+							"variant",
+							"size",
+							"disabled"
+						])])]),
+						default: R(() => [y("div", Ne, [x(_e, {
+							modelValue: v.value,
+							"onUpdate:modelValue": r[1] ||= (e) => v.value = e,
+							disabled: e.disabled
+						}, null, 8, ["modelValue", "disabled"]), x(Ae, {
+							modelValue: v.value,
+							"onUpdate:modelValue": r[2] ||= (e) => v.value = e,
+							format: S.value,
+							"onUpdate:format": r[3] ||= (e) => S.value = e,
+							disabled: e.disabled,
+							onFormatDropdownOpen: r[4] ||= (e) => m("formatDropdownOpen"),
+							onFormatDropdownClose: r[5] ||= (e) => m("formatDropdownClose")
+						}, null, 8, [
+							"modelValue",
+							"format",
+							"disabled"
+						])])]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"modelValue",
+					"placement",
+					"disabled"
+				])]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"layout",
+				"colors",
+				"size",
+				"disabled"
+			])])], 2)]),
+			_: 1
+		}, 16));
+	}
+});
+//#endregion
+export { ue as i, Ae as n, _e as r, Fe as t };

package/dist/SColorPicker-D7QwVS2t.cjs

@@ -0,0 +1 @@
+const e=require("./contrastSurfaceTextColor-Ybh-FZof.cjs"),t=require("./SColorPalette-CYGnmIWP.cjs"),n=require("./colorValue-DClAEDHr.cjs"),r=require("./SButton.types-UKroD-ev.cjs"),i=require("./SButton-C-z_q5CG.cjs"),a=require("./useFloatingOverlay-B1UCUYQQ.cjs"),o=require("./SDropdown-_QUOP-rw.cjs"),s=require("./SSelect-CT3AMH-u.cjs");let c=require("vue"),l=require("@shtabapp/ui-kit-primitives"),u=require("@vueuse/core");var d=e=>Math.max(0,Math.min(255,Math.round(e))),f=e=>{let t=e%360;return t<0?t+360:t},p=e=>Math.max(0,Math.min(100,Math.round(e))),m=e=>{let t=e.slice(1);if(t.length===3){let e=t[0],n=t[1],r=t[2];return!e||!n||!r?void 0:`${e}${e}${n}${n}${r}${r}`}if(t.length===6||t.length===8)return t.slice(0,6)},h=e=>{let t=m(e);if(!t)return;let n=Number.parseInt(t.slice(0,2),16),r=Number.parseInt(t.slice(2,4),16),i=Number.parseInt(t.slice(4,6),16);if(!(Number.isNaN(n)||Number.isNaN(r)||Number.isNaN(i)))return{first:n,second:r,third:i}},g=e=>{let t=d(e.first),n=d(e.second),r=d(e.third);return`#${t.toString(16).padStart(2,`0`).toUpperCase()}${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}`},_=e=>{let t=h(e);if(!t)return;let n=t.first/255,r=t.second/255,i=t.third/255,a=Math.max(n,r,i),o=Math.min(n,r,i),s=a-o,c=0,l=(a+o)/2;s!==0&&(c=a===n?((r-i)/s+(r<i?6:0))*60:a===r?((i-n)/s+2)*60:((n-r)/s+4)*60);let u=0;return s!==0&&(u=l>.5?s/(2-a-o):s/(a+o)),{first:Math.round(c),second:Math.round(u*100),third:Math.round(l*100)}},v=e=>{let t=f(e.first),n=p(e.second)/100,r=p(e.third)/100,i=e=>{let i=(t+e)/30;return d((r-n*Math.min(r,1-r)*Math.max(-1,Math.min(i%2-1,1)))*255)};return g({first:i(0),second:i(8),third:i(4)})},y=t=>{let n=t.toUpperCase(),r=n.startsWith(`#`)?n.slice(1):n;if(!/^[0-9A-F]{3}$/.test(r)&&!/^[0-9A-F]{6}$/.test(r))return;let i=`#${r}`;if(e.n(i))return g(h(i)??{first:0,second:0,third:0})},b=e=>e.slice(1).toUpperCase(),x=e=>{let t=e.first/255,n=e.second/255,r=e.third/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o=Math.round(o*60),o<0&&(o+=360));let s=i===0?0:a/i;return{hue:o,saturation:s,value:i}},S=e=>{let t=e.value*e.saturation,n=e.hue/60,r=t*(1-Math.abs(n%2-1)),i=e.value-t,a=0,o=0,s=0;return n>=0&&n<1?(a=t,o=r):n>=1&&n<2?(a=r,o=t):n>=2&&n<3?(o=t,s=r):n>=3&&n<4?(o=r,s=t):n>=4&&n<5?(a=r,s=t):(a=t,s=r),{first:d((a+i)*255),second:d((o+i)*255),third:d((s+i)*255)}},C=e=>{let t=h(e);if(t)return x(t)},w=e=>g(S(e)),T=[t.o.HEX,t.o.RGB,t.o.HSL],E={[t.o.HEX]:`Hex`,[t.o.RGB]:`RGB`,[t.o.HSL]:`HSL`},D=e=>{let t=getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(!t)return;let n=Number.parseInt(t[1]??`0`,10),r=Number.parseInt(t[2]??`0`,10),i=Number.parseInt(t[3]??`0`,10);return`#${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}${i.toString(16).padStart(2,`0`).toUpperCase()}`},O=(t,r)=>{if(n.n(t)&&e.n(t))return t;if(r)return D(r)},k=(e,n)=>n===t.o.HEX?b(e):n===t.o.RGB?h(e)??{first:0,second:0,third:0}:_(e)??{first:0,second:0,third:0},A=e=>{let t=Number.parseInt(e,10);if(!Number.isNaN(t))return t},j=(e,n)=>{if(e===t.o.HEX)return typeof n==`string`?y(n):void 0;if(typeof n==`string`)return;if(e===t.o.RGB){let e=g({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});return h(e)?e:void 0}let r=v({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});if(r&&_(r))return r},M=17,N=`#000000`,P=e=>e??N,F=({modelValue:e,getEditableHex:t,saturationAreaRef:n,hueSliderRef:r,disabled:i,readonly:a})=>{let o=C(P(t()))??{hue:0,saturation:0,value:0},s=(0,c.ref)(o.hue),l=(0,c.ref)(o.saturation),d=(0,c.ref)(o.value),f=(0,c.ref)(!1),p=(0,c.ref)(!1),m=(0,c.ref)(!1),h=(0,c.shallowRef)(null),g=(0,c.shallowRef)(null),_=(0,c.computed)(()=>w({hue:s.value,saturation:l.value,value:d.value})),v=(0,c.computed)(()=>w({hue:s.value,saturation:1,value:1})),y=e=>{s.value=Math.max(0,Math.min(360,e))},b=(e,t)=>{l.value=Math.max(0,Math.min(1,e)),d.value=Math.max(0,Math.min(1,t))},x=e=>{let t=C(P(e));t&&(f.value=!0,t.saturation>0&&(s.value=t.hue),l.value=t.saturation,d.value=t.value,f.value=!1)},S=()=>{let e=t();e&&e.toUpperCase()!==_.value.toUpperCase()&&x(e)},T=()=>{let n=_.value;t()?.toUpperCase()!==n.toUpperCase()&&(f.value=!0,e.value=n,f.value=!1)};(0,c.watch)([s,l,d],()=>{f.value||T()}),(0,c.watch)(e,()=>{f.value||S()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{E(),D(),S()})});let E=()=>{h.value=n.value?.getBoundingClientRect()??null},D=()=>{g.value=r.value?.getBoundingClientRect()??null},O=(0,c.computed)(()=>{let e=h.value;return e?{transform:`translate3d(calc(${l.value*e.width}px - 50%), calc(${(1-d.value)*e.height}px - 50%), 0)`}:{}}),k=(0,c.computed)(()=>{let e=g.value;return e?{transform:`translate3d(-50%, calc(${s.value/360*e.height}px - 50%), 0)`}:{}}),A=()=>!i.value&&!a.value,j=e=>{let t=h.value;if(!t)return;let n=Math.max(0,Math.min(e.clientX-t.left,t.width)),r=Math.max(0,Math.min(e.clientY-t.top,t.height));b(n/t.width,1-r/t.height)},M=e=>{let t=g.value;t&&y(Math.max(0,Math.min(e.clientY-t.top,t.height))/t.height*360)},N=e=>{A()&&(E(),p.value=!0,j(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},F=e=>{A()&&(D(),m.value=!0,M(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},I=()=>{p.value=!1},L=()=>{m.value=!1};return(0,u.useEventListener)(n,`pointermove`,e=>{p.value&&j(e)}),(0,u.useEventListener)(n,`pointerup`,I),(0,u.useEventListener)(n,`pointercancel`,I),(0,u.useEventListener)(n,`lostpointercapture`,I),(0,u.useEventListener)(r,`pointermove`,e=>{m.value&&M(e)}),(0,u.useEventListener)(r,`pointerup`,L),(0,u.useEventListener)(r,`pointercancel`,L),(0,u.useEventListener)(r,`lostpointercapture`,L),{hexColor:_,hueBackground:v,saturationPointerStyle:O,huePointerStyle:k,handleSaturationPointerDown:N,handleHuePointerDown:F,syncFromModelValue:S}},I=e=>{if(!e)return null;let t=e.$el;if(!(t instanceof HTMLElement))return null;let n=t.querySelector(`.s-ui-color-swatch__fill`);return n instanceof HTMLElement?n:null},L={class:`s-ui-color-area__canvas-row`},R=[`aria-disabled`],z=(0,c.defineComponent)({__name:`SColorArea`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let t=(0,c.useModel)(e,`modelValue`),r=(0,c.useTemplateRef)(`colorResolutionSwatchRef`),i=(0,c.useTemplateRef)(`saturationAreaRef`),a=(0,c.useTemplateRef)(`hueSliderRef`),o=()=>O(t.value,I(r.value)),s=(0,c.computed)(()=>n.a(t.value)),{hexColor:u,hueBackground:d,saturationPointerStyle:f,huePointerStyle:p,handleSaturationPointerDown:m,handleHuePointerDown:h}=F({modelValue:t,getEditableHex:o,saturationAreaRef:i,hueSliderRef:a,disabled:(0,c.toRef)(()=>e.disabled),readonly:(0,c.toRef)(()=>e.readonly)});return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-area`,{"s-ui-color-area--disabled":e.disabled,"s-ui-color-area--readonly":e.readonly}]},t.$attrs),[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`colorResolutionSwatchRef`,ref:r,class:`s-ui-color-area__color-resolution`,color:s.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_24,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`]),(0,c.createElementVNode)(`div`,L,[(0,c.createElementVNode)(`div`,{ref_key:`saturationAreaRef`,ref:i,class:`s-ui-color-area__canvas`,role:`img`,"aria-label":`Color saturation and brightness`,style:(0,c.normalizeStyle)({"--s-ui-color-area-hue":(0,c.unref)(d)}),onPointerdown:n[0]||=(...e)=>(0,c.unref)(m)&&(0,c.unref)(m)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__canvas-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(f),backgroundColor:(0,c.unref)(u)})},null,4)],36),(0,c.createElementVNode)(`div`,{ref_key:`hueSliderRef`,ref:a,class:`s-ui-color-area__hue`,role:`slider`,"aria-label":`Hue`,"aria-valuemin":`0`,"aria-valuemax":`360`,"aria-disabled":e.disabled||e.readonly,onPointerdown:n[1]||=(...e)=>(0,c.unref)(h)&&(0,c.unref)(h)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__hue-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(p),backgroundColor:(0,c.unref)(d)})},null,4)],40,R)])],16))}}),B={class:`s-ui-color-values__left`},V={class:`s-ui-color-values__format`},H={class:`s-ui-color-values__value-group`},U={class:`s-ui-color-values__inputs`},W={key:0,class:`s-ui-color-values__input-wrap`},G=[`disabled`,`readonly`],K={class:`s-ui-color-values__input-wrap`},q=[`disabled`,`readonly`,`aria-label`],J={class:`s-ui-color-values__input-wrap`},Y=[`disabled`,`readonly`,`aria-label`],X={class:`s-ui-color-values__input-wrap`},Z=[`disabled`,`readonly`,`aria-label`],Q=(0,c.defineComponent)({__name:`SColorValues`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},formats:{default:()=>T}},{modelValue:{required:!0},modelModifiers:{},format:{default:t.o.HEX},formatModifiers:{}}),emits:(0,c.mergeModels)([`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`,`update:format`]),setup(e,{emit:a}){let o=(0,c.useModel)(e,`modelValue`),u=(0,c.useModel)(e,`format`),d=a,f=(0,c.useTemplateRef)(`previewSwatchRef`),p=(0,c.ref)(``),m=(0,c.ref)(`0`),h=(0,c.ref)(`0`),g=(0,c.ref)(`0`),_=(0,c.computed)(()=>(e.formats.length>0?e.formats:T).map(e=>({value:e,label:E[e]}))),v=(0,c.computed)(()=>n.a(o.value)),y=(0,c.computed)(()=>O(o.value,I(f.value))),b=(0,c.computed)(()=>u.value===t.o.RGB?`Red channel`:`Hue`),x=(0,c.computed)(()=>u.value===t.o.RGB?`Green channel`:`Saturation`),S=(0,c.computed)(()=>u.value===t.o.RGB?`Blue channel`:`Lightness`),C=()=>{let e=y.value;if(!e)return;let n=k(e,u.value);if(u.value===t.o.HEX&&typeof n==`string`){p.value=n;return}typeof n==`object`&&(m.value=String(n.first),h.value=String(n.second),g.value=String(n.third))};(0,c.watch)([o,u,y],()=>{C()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{C()})});let w=()=>{if(e.disabled||e.readonly)return;if(u.value===t.o.HEX){let e=j(t.o.HEX,p.value);e&&(o.value=e),C();return}let n=j(u.value,{first:Number.parseInt(m.value,10),second:Number.parseInt(h.value,10),third:Number.parseInt(g.value,10)});n&&(o.value=n),C()},D=e=>{e.key===`Enter`&&(e.preventDefault(),w())};return(n,a)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-values`,{"s-ui-color-values--disabled":e.disabled,"s-ui-color-values--readonly":e.readonly}]},n.$attrs),[(0,c.createElementVNode)(`div`,B,[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`previewSwatchRef`,ref:f,class:`s-ui-color-values__preview`,color:v.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`,`disabled`]),(0,c.createElementVNode)(`div`,V,[(0,c.createVNode)((0,c.unref)(s.t),{modelValue:u.value,"onUpdate:modelValue":a[0]||=e=>u.value=e,class:`s-ui-color-values__format-select`,options:_.value,disabled:e.disabled,readonly:e.readonly,bordered:!0,clearable:!1,"close-on-select":!0,"fit-viewport":!1,"aria-label":`Color format`,onOpen:a[1]||=e=>d(`formatDropdownOpen`),onClose:a[2]||=e=>d(`formatDropdownClose`)},null,8,[`modelValue`,`options`,`disabled`,`readonly`])])]),(0,c.createElementVNode)(`div`,H,[(0,c.createVNode)((0,c.unref)(i.t),{class:`s-ui-color-values__pipette`,appearance:(0,c.unref)(r.t).BARE,variant:(0,c.unref)(r.r).NEUTRAL,size:(0,c.unref)(r.n).SMALL,icon:`pipette`,"aria-label":`Pick color`,"aria-disabled":`true`,disabled:e.disabled,tabindex:`-1`},null,8,[`appearance`,`variant`,`size`,`disabled`]),a[9]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,U,[u.value===(0,c.unref)(t.o).HEX?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,W,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":a[3]||=e=>p.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`text`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":`Hex color value`,onBlur:w,onKeydown:D},null,40,G),[[c.vModelText,p.value]])])):((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:1},[(0,c.createElementVNode)(`div`,K,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":a[4]||=e=>m.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":b.value,onBlur:w,onKeydown:D},null,40,q),[[c.vModelText,m.value]])]),a[7]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,J,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":a[5]||=e=>h.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":x.value,onBlur:w,onKeydown:D},null,40,Y),[[c.vModelText,h.value]])]),a[8]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,X,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":a[6]||=e=>g.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":S.value,onBlur:w,onKeydown:D},null,40,Z),[[c.vModelText,g.value]])])],64))])])],16))}}),$={class:`s-ui-color-picker__section`},ee={class:`s-ui-color-picker__section`},te={class:`s-ui-color-picker__custom-editor`},ne={class:`s-ui-color-picker__custom-actions`},re=(0,c.defineComponent)({__name:`SColorPicker`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},recommendedColors:{},recentColors:{default:()=>[]}},{modelValue:{},modelModifiers:{}}),emits:(0,c.mergeModels)([`select`,`customEditorOpen`,`customEditorClose`,`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`]),setup(e,{emit:n}){let u=(0,c.useModel)(e,`modelValue`),d=n,f=(0,c.ref)(!1),p=(0,c.ref)(`#526DE3`),m=(0,c.ref)(t.o.HEX),h=(0,c.computed)(()=>e.recommendedColors&&e.recommendedColors.length>0?e.recommendedColors:t.r),g=(0,c.computed)(()=>e.recentColors.length<=17?e.recentColors:e.recentColors.slice(0,17)),_=()=>{if(u.value){p.value=u.value;return}p.value=`#526DE3`},v=e=>{d(`select`,e)},y=()=>{u.value=p.value,d(`select`,p.value),f.value=!1},b=()=>{f.value=!1};return(0,c.watch)(f,(e,t)=>{if(e&&!t){_(),d(`customEditorOpen`);return}!e&&t&&d(`customEditorClose`)}),(n,_)=>((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(s.r),(0,c.mergeProps)({width:336},n.$attrs),{default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)([`s-ui-color-picker`,{"s-ui-color-picker--disabled":e.disabled}])},[(0,c.createElementVNode)(`section`,$,[_[8]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-picker__label`},`Рекомендованные цвета`,-1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:u.value,"onUpdate:modelValue":_[0]||=e=>u.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).GRID,colors:h.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:v},null,8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])]),(0,c.createElementVNode)(`section`,ee,[_[11]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-picker__label`},`Последние использованные`,-1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:u.value,"onUpdate:modelValue":_[7]||=e=>u.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).ROW,colors:g.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:v},{append:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(o.t),{modelValue:f.value,"onUpdate:modelValue":_[6]||=e=>f.value=e,placement:(0,c.unref)(a.i).RIGHT_START,offset:8,shift:!0,flip:!0,disabled:e.disabled,"dismiss-on-click-outside":!0,"dismiss-on-escape":!0},{trigger:(0,c.withCtx)(({toggle:t,triggerProps:n})=>[(0,c.createVNode)((0,c.unref)(i.t),(0,c.mergeProps)(n,{class:`s-ui-color-picker__add-button`,appearance:(0,c.unref)(r.t).OUTLINED,variant:(0,c.unref)(r.r).NEUTRAL,size:(0,c.unref)(r.n).SMALL,icon:`plus`,"aria-label":`Add custom color`,disabled:e.disabled,onClick:t}),null,16,[`appearance`,`variant`,`size`,`disabled`,`onClick`])]),content:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(s.r),{width:320},{footer:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ne,[(0,c.createVNode)((0,c.unref)(i.t),{class:`s-ui-color-picker__save-button`,appearance:(0,c.unref)(r.t).MAJOR,variant:(0,c.unref)(r.r).MAIN,size:(0,c.unref)(r.n).SMALL,disabled:e.disabled,onClick:y},{default:(0,c.withCtx)(()=>[..._[9]||=[(0,c.createTextVNode)(` Сохранить `,-1)]]),_:1},8,[`appearance`,`variant`,`size`,`disabled`]),(0,c.createVNode)((0,c.unref)(i.t),{class:`s-ui-color-picker__cancel-button`,appearance:(0,c.unref)(r.t).MINOR,variant:(0,c.unref)(r.r).NEUTRAL,size:(0,c.unref)(r.n).SMALL,disabled:e.disabled,onClick:b},{default:(0,c.withCtx)(()=>[..._[10]||=[(0,c.createTextVNode)(` Отменить `,-1)]]),_:1},8,[`appearance`,`variant`,`size`,`disabled`])])]),default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,te,[(0,c.createVNode)(z,{modelValue:p.value,"onUpdate:modelValue":_[1]||=e=>p.value=e,disabled:e.disabled},null,8,[`modelValue`,`disabled`]),(0,c.createVNode)(Q,{modelValue:p.value,"onUpdate:modelValue":_[2]||=e=>p.value=e,format:m.value,"onUpdate:format":_[3]||=e=>m.value=e,disabled:e.disabled,onFormatDropdownOpen:_[4]||=e=>d(`formatDropdownOpen`),onFormatDropdownClose:_[5]||=e=>d(`formatDropdownClose`)},null,8,[`modelValue`,`format`,`disabled`])])]),_:1})]),_:1},8,[`modelValue`,`placement`,`disabled`])]),_:1},8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])])],2)]),_:1},16))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return Q}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return z}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return re}});