@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-color-palette.mjs

@@ -0,0 +1,769 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, effect, forwardRef, inject, input, linkedSignal, output, viewChild, viewChildren } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
+import { RT_KIT_LABELS } from "@rt-tools/ui-kit-v2/core";
+import { RtInputComponent } from "@rt-tools/ui-kit-v2/input";
+import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
+import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
+const RT_COLOR_PALETTE_DEFAULT = [
+	"#f44336",
+	"#e91e63",
+	"#9c27b0",
+	"#673ab7",
+	"#3f51b5",
+	"#2196f3",
+	"#03a9f4",
+	"#00bcd4",
+	"#009688",
+	"#4caf50",
+	"#8bc34a",
+	"#cddc39",
+	"#ffeb3b",
+	"#ffc107",
+	"#ff9800",
+	"#ff5722",
+	"#795548",
+	"#607d8b"
+];
+const SHORT_HEX = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i;
+const FULL_HEX = /^#?([0-9a-f]{6})$/i;
+const CHANNEL = /^\d{1,3}$/;
+const AREA_STEP = .05;
+const HUE_STEP = 6;
+const HUE_MOVES = {
+	ArrowRight: HUE_STEP,
+	ArrowUp: HUE_STEP,
+	ArrowLeft: -6,
+	ArrowDown: -6
+};
+const AREA_MOVES = {
+	ArrowRight: ["s", AREA_STEP],
+	ArrowLeft: ["s", -.05],
+	ArrowUp: ["v", AREA_STEP],
+	ArrowDown: ["v", -.05]
+};
+const SPECTRUM_HUES = [
+	0,
+	60,
+	120,
+	180,
+	240,
+	300,
+	0
+];
+function clamp(value) {
+	return Math.min(1, Math.max(0, value));
+}
+function colorPaletteHex(value) {
+	if (typeof value !== "string") return null;
+	const text = value.trim();
+	const short = SHORT_HEX.exec(text);
+	if (short) return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`.toLowerCase();
+	const full = FULL_HEX.exec(text);
+	return full ? `#${full[1].toLowerCase()}` : null;
+}
+function colorPaletteSwatches(colors, value) {
+	const source = colors.length > 0 ? colors : RT_COLOR_PALETTE_DEFAULT;
+	const seen = /* @__PURE__ */ new Set();
+	const swatches = [];
+	for (const color of source) {
+		const hex = colorPaletteHex(color);
+		if (hex !== null && !seen.has(hex)) {
+			seen.add(hex);
+			swatches.push({
+				hex,
+				custom: false
+			});
+		}
+	}
+	if (value !== null && !seen.has(value)) swatches.push({
+		hex: value,
+		custom: true
+	});
+	return swatches;
+}
+function colorPaletteNextIndex(key, current, count) {
+	if (count === 0) return null;
+	switch (key) {
+		case "ArrowDown":
+		case "ArrowRight": return current < 0 ? 0 : (current + 1) % count;
+		case "ArrowUp":
+		case "ArrowLeft": return current < 0 ? count - 1 : (current - 1 + count) % count;
+		case "Home": return 0;
+		case "End": return count - 1;
+		default: return null;
+	}
+}
+function colorPaletteToHsv(hex) {
+	const r = parseInt(hex.slice(1, 3), 16) / 255;
+	const g = parseInt(hex.slice(3, 5), 16) / 255;
+	const b = parseInt(hex.slice(5, 7), 16) / 255;
+	const max = Math.max(r, g, b);
+	const delta = max - Math.min(r, g, b);
+	let h = 0;
+	if (delta > 0) {
+		if (max === r) h = 60 * (((g - b) / delta + 6) % 6);
+		else if (max === g) h = 60 * ((b - r) / delta + 2);
+		else h = 60 * ((r - g) / delta + 4);
+	}
+	return {
+		h,
+		s: max === 0 ? 0 : delta / max,
+		v: max
+	};
+}
+function colorPaletteFromHsv(hsv) {
+	const h = (hsv.h % 360 + 360) % 360 / 60;
+	const s = clamp(hsv.s);
+	const v = clamp(hsv.v);
+	const chroma = v * s;
+	const x = chroma * (1 - Math.abs(h % 2 - 1));
+	const m = v - chroma;
+	const [r, g, b] = [
+		[
+			chroma,
+			x,
+			0
+		],
+		[
+			x,
+			chroma,
+			0
+		],
+		[
+			0,
+			chroma,
+			x
+		],
+		[
+			0,
+			x,
+			chroma
+		],
+		[
+			x,
+			0,
+			chroma
+		],
+		[
+			chroma,
+			0,
+			x
+		]
+	][Math.floor(h) % 6];
+	return `#${[
+		r,
+		g,
+		b
+	].map((channel) => Math.round((channel + m) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function colorPaletteStep(target, key, hsv) {
+	if (target === "hue") {
+		const delta = HUE_MOVES[key];
+		return delta === void 0 ? null : {
+			...hsv,
+			h: (hsv.h + delta + 360) % 360
+		};
+	}
+	const move = AREA_MOVES[key];
+	if (move === void 0) return null;
+	const [axis, delta] = move;
+	return {
+		...hsv,
+		[axis]: clamp(hsv[axis] + delta)
+	};
+}
+function colorPaletteToRgb(hex) {
+	return {
+		r: parseInt(hex.slice(1, 3), 16),
+		g: parseInt(hex.slice(3, 5), 16),
+		b: parseInt(hex.slice(5, 7), 16)
+	};
+}
+function colorPaletteFromRgb(rgb) {
+	return `#${[
+		rgb.r,
+		rgb.g,
+		rgb.b
+	].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+}
+function colorPaletteChannel(text) {
+	const trimmed = text.trim();
+	if (!CHANNEL.test(trimmed)) return null;
+	const value = Number(trimmed);
+	return value <= 255 ? value : null;
+}
+function colorPaletteSpectrum() {
+	return `linear-gradient(to right, ${SPECTRUM_HUES.map((h) => colorPaletteFromHsv({
+		h,
+		s: 1,
+		v: 1
+	})).join(", ")})`;
+}
+function colorPaletteArea(hue) {
+	const white = colorPaletteFromHsv({
+		h: 0,
+		s: 0,
+		v: 1
+	});
+	return `linear-gradient(to top, ${colorPaletteFromHsv({
+		h: 0,
+		s: 0,
+		v: 0
+	})}, transparent), linear-gradient(to right, ${white}, ${hue})`;
+}
+const BEM_BLOCK$1 = "rt-color-picker";
+const CHANNELS = [
+	"r",
+	"g",
+	"b"
+];
+var RtColorPickerComponent = class RtColorPickerComponent {
+	#dragging;
+	constructor() {
+		this.t = inject(RT_KIT_LABELS);
+		this.hsv = linkedSignal(() => colorPaletteToHsv(this.value()), ...ngDevMode ? [{ debugName: "hsv" }] : /* istanbul ignore next */ []);
+		this.picked = computed(() => colorPaletteFromHsv(this.hsv()), ...ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []);
+		this.changed = computed(() => this.picked() !== this.value(), ...ngDevMode ? [{ debugName: "changed" }] : /* istanbul ignore next */ []);
+		this.hueColor = computed(() => colorPaletteFromHsv({
+			h: this.hsv().h,
+			s: 1,
+			v: 1
+		}), ...ngDevMode ? [{ debugName: "hueColor" }] : /* istanbul ignore next */ []);
+		this.area = computed(() => colorPaletteArea(this.hueColor()), ...ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []);
+		this.spectrum = colorPaletteSpectrum();
+		this.hueDegrees = computed(() => Math.round(this.hsv().h), ...ngDevMode ? [{ debugName: "hueDegrees" }] : /* istanbul ignore next */ []);
+		this.saturation = computed(() => Math.round(this.hsv().s * 100), ...ngDevMode ? [{ debugName: "saturation" }] : /* istanbul ignore next */ []);
+		this.areaText = computed(() => `${this.saturation()}%, ${Math.round(this.hsv().v * 100)}%`, ...ngDevMode ? [{ debugName: "areaText" }] : /* istanbul ignore next */ []);
+		this.hexControl = new FormControl("", { nonNullable: true });
+		this.channelControls = CHANNELS.map((channel) => ({
+			channel,
+			name: channel.toUpperCase(),
+			control: new FormControl("", { nonNullable: true })
+		}));
+		this.channelLabels = computed(() => ({
+			r: this.t().uiColorPickerRed,
+			g: this.t().uiColorPickerGreen,
+			b: this.t().uiColorPickerBlue
+		}), ...ngDevMode ? [{ debugName: "channelLabels" }] : /* istanbul ignore next */ []);
+		this.value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.channels = input(false, {
+			...ngDevMode ? { debugName: "channels" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.applied = output();
+		this.cancelled = output();
+		this.#dragging = false;
+		effect(() => {
+			const hex = this.picked();
+			if (colorPaletteHex(this.hexControl.value) !== hex) this.hexControl.setValue(hex, { emitEvent: false });
+		});
+		this.hexControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((text) => {
+			const hex = colorPaletteHex(text);
+			if (hex !== null && hex !== this.picked()) this.hsv.set(colorPaletteToHsv(hex));
+		});
+		effect(() => {
+			const rgb = colorPaletteToRgb(this.picked());
+			for (const { channel, control } of this.channelControls) if (colorPaletteChannel(control.value) !== rgb[channel]) control.setValue(String(rgb[channel]), { emitEvent: false });
+		});
+		for (const { channel, control } of this.channelControls) control.valueChanges.pipe(takeUntilDestroyed()).subscribe((text) => {
+			const value = colorPaletteChannel(text);
+			const rgb = colorPaletteToRgb(this.picked());
+			if (value !== null && value !== rgb[channel]) this.hsv.set(colorPaletteToHsv(colorPaletteFromRgb({
+				...rgb,
+				[channel]: value
+			})));
+		});
+	}
+	onAreaPointer(event) {
+		if (event.type === "pointerdown") {
+			this.#dragging = true;
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+		}
+		if (!this.#dragging) return;
+		if (event.type === "pointerup") this.#dragging = false;
+		const box = event.currentTarget.getBoundingClientRect();
+		const s = box.width > 0 ? (event.clientX - box.left) / box.width : 0;
+		const v = box.height > 0 ? 1 - (event.clientY - box.top) / box.height : 0;
+		this.hsv.update((hsv) => ({
+			...hsv,
+			s: Math.min(1, Math.max(0, s)),
+			v: Math.min(1, Math.max(0, v))
+		}));
+	}
+	onHuePointer(event) {
+		if (event.type === "pointerdown") {
+			this.#dragging = true;
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+		}
+		if (!this.#dragging) return;
+		if (event.type === "pointerup") this.#dragging = false;
+		const box = event.currentTarget.getBoundingClientRect();
+		const share = box.width > 0 ? Math.min(1, Math.max(0, (event.clientX - box.left) / box.width)) : 0;
+		this.hsv.update((hsv) => ({
+			...hsv,
+			h: Math.min(359, share * 360)
+		}));
+	}
+	onKey(target, event) {
+		const next = colorPaletteStep(target, event.key, this.hsv());
+		if (next === null) return;
+		event.preventDefault();
+		this.hsv.set(next);
+	}
+	onApply() {
+		if (this.changed()) this.applied.emit(this.picked());
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtColorPickerComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtColorPickerComponent,
+			isStandalone: true,
+			selector: "rt-color-picker",
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				channels: {
+					classPropertyName: "channels",
+					publicName: "channels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				applied: "applied",
+				cancelled: "cancelled"
+			},
+			host: { classAttribute: "rt-color-picker" },
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-color-picker\">\n    <!-- Площадь: вправо растёт насыщенность, вверх — яркость. Её фон строит логика палитры по оттенку\n         полосы. Указатель тянет точку, стрелки двигают её шагом. -->\n    <div\n        rtElem=\"area\"\n        qa-dataid=\"color-picker-area\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        [attr.aria-label]=\"t().uiColorPickerArea\"\n        [attr.aria-valuenow]=\"saturation()\"\n        [attr.aria-valuetext]=\"areaText()\"\n        [style.--rt-color-picker-area]=\"area()\"\n        [style.--rt-color-picker-x]=\"hsv().s\"\n        [style.--rt-color-picker-y]=\"1 - hsv().v\"\n        (pointerdown)=\"onAreaPointer($event)\"\n        (pointermove)=\"onAreaPointer($event)\"\n        (pointerup)=\"onAreaPointer($event)\"\n        (keydown)=\"onKey('area', $event)\">\n        <span rtElem=\"area-thumb\" [style.--rt-color-picker-color]=\"picked()\"></span>\n    </div>\n\n    <div\n        rtElem=\"hue\"\n        qa-dataid=\"color-picker-hue\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"359\"\n        [attr.aria-label]=\"t().uiColorPickerHue\"\n        [attr.aria-valuenow]=\"hueDegrees()\"\n        [style.--rt-color-picker-x]=\"hsv().h / 360\"\n        [style.--rt-color-picker-spectrum]=\"spectrum\"\n        (pointerdown)=\"onHuePointer($event)\"\n        (pointermove)=\"onHuePointer($event)\"\n        (pointerup)=\"onHuePointer($event)\"\n        (keydown)=\"onKey('hue', $event)\">\n        <span rtElem=\"hue-thumb\" [style.--rt-color-picker-color]=\"hueColor()\"></span>\n    </div>\n\n    <div rtElem=\"row\">\n        <span rtElem=\"preview\" aria-hidden=\"true\" [style.--rt-color-picker-color]=\"picked()\"></span>\n        <rt-input\n            rtElem=\"hex\"\n            qa-dataid=\"color-picker-hex\"\n            size=\"sm\"\n            [clearable]=\"false\"\n            [ariaLabel]=\"t().uiColorPickerHex\"\n            [formControl]=\"hexControl\" />\n    </div>\n\n    @if (channels()) {\n        <div rtElem=\"channels\">\n            @for (item of channelControls; track item.channel) {\n                <div rtElem=\"channel\">\n                    <span rtElem=\"channel-name\" aria-hidden=\"true\">{{ item.name }}</span>\n                    <rt-input\n                        rtElem=\"channel-input\"\n                        qa-dataid=\"color-picker-channel\"\n                        size=\"sm\"\n                        [clearable]=\"false\"\n                        [ariaLabel]=\"channelLabels()[item.channel]\"\n                        [formControl]=\"item.control\" />\n                </div>\n            }\n        </div>\n    }\n\n    <div rtElem=\"actions\">\n        <button\n            type=\"button\"\n            rtButton\n            qa-dataid=\"color-picker-cancel\"\n            appearance=\"text\"\n            theme=\"secondary\"\n            size=\"sm\"\n            (click)=\"cancelled.emit()\">\n            {{ t().uiCancel }}\n        </button>\n        <button type=\"button\" rtButton qa-dataid=\"color-picker-apply\" size=\"sm\" [disabled]=\"!changed()\" (click)=\"onApply()\">\n            {{ t().uiApply }}\n        </button>\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-color-picker{--rt-color-palette-picker-width: var(--rt-size-64);--rt-color-palette-picker-height: auto;--rt-color-palette-area-grow: 0;--rt-color-palette-picker-padding: var(--rt-space-md);--rt-color-palette-picker-gap: var(--rt-space-sm);--rt-color-palette-picker-bg: var(--rt-color-bg-surface);--rt-color-palette-picker-radius: var(--rt-radius-md);--rt-color-palette-picker-shadow: var(--rt-shadow-md);--rt-color-palette-area-height: var(--rt-size-40);--rt-color-palette-area-radius: var(--rt-radius-sm);--rt-color-palette-hue-height: var(--rt-size-3);--rt-color-palette-thumb-size: var(--rt-size-4);--rt-color-palette-thumb-border-width: var(--rt-border-width-thick);--rt-color-palette-thumb-border-color: var(--rt-color-bg-surface);--rt-color-palette-thumb-shadow: var(--rt-shadow-sm);--rt-color-palette-preview-size: var(--rt-control-height-sm);--rt-color-palette-actions-gap: var(--rt-space-xs);--rt-color-palette-hue-radius: var(--rt-radius-full);--rt-color-palette-thumb-radius: var(--rt-radius-full);--rt-color-palette-preview-border-width: var(--rt-border-width-thin);--rt-color-palette-preview-border-color: var(--rt-color-border-default);--rt-color-picker-area: none;--rt-color-picker-spectrum: none;--rt-color-picker-color: transparent;--rt-color-picker-x: 0;--rt-color-picker-y: 0;display:flex;width:var(--rt-color-palette-picker-width);height:var(--rt-color-palette-picker-height);box-sizing:border-box;flex-direction:column;padding:var(--rt-color-palette-picker-padding);border-radius:var(--rt-color-palette-picker-radius);background:var(--rt-color-palette-picker-bg);box-shadow:var(--rt-color-palette-picker-shadow);gap:var(--rt-color-palette-picker-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-color-picker{--rt-color-palette-picker-height: calc(var(--rt-size-64) + var(--rt-size-16));--rt-color-palette-area-grow: 1;--rt-color-palette-picker-radius: var(--rt-radius-ms);--rt-color-palette-picker-shadow: 0 var(--rt-space-2) var(--rt-space-4) 0 var(--rt-mat-neutral-60);--rt-color-palette-area-radius: var(--rt-radius-xs)}.rt-color-picker__area{position:relative;height:var(--rt-color-palette-area-height);flex-grow:var(--rt-color-palette-area-grow);border-radius:var(--rt-color-palette-area-radius);background:var(--rt-color-picker-area);cursor:crosshair;touch-action:none}.rt-color-picker__hue{position:relative;height:var(--rt-color-palette-hue-height);border-radius:var(--rt-color-palette-hue-radius);background:var(--rt-color-picker-spectrum);cursor:pointer;touch-action:none}.rt-color-picker__area:focus-visible,.rt-color-picker__hue:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-color-picker__area-thumb,.rt-color-picker__hue-thumb{position:absolute;width:var(--rt-color-palette-thumb-size);height:var(--rt-color-palette-thumb-size);box-sizing:border-box;border:var(--rt-color-palette-thumb-border-width) solid var(--rt-color-palette-thumb-border-color);border-radius:var(--rt-color-palette-thumb-radius);background:var(--rt-color-picker-color);box-shadow:var(--rt-color-palette-thumb-shadow);pointer-events:none;transform:translate(-50%,-50%)}.rt-color-picker__area-thumb{top:calc(var(--rt-color-picker-y) * 100%);left:calc(var(--rt-color-picker-x) * 100%)}.rt-color-picker__hue-thumb{top:50%;left:calc(var(--rt-color-picker-x) * 100%)}.rt-color-picker__row{display:flex;align-items:center;gap:var(--rt-color-palette-picker-gap)}.rt-color-picker__preview{width:var(--rt-color-palette-preview-size);height:var(--rt-color-palette-preview-size);flex-shrink:0;border:var(--rt-color-palette-preview-border-width) solid var(--rt-color-palette-preview-border-color);border-radius:var(--rt-color-palette-hue-radius);background:var(--rt-color-picker-color)}.rt-color-picker__hex{min-width:0;flex:1 1 auto}.rt-color-picker__channels{display:grid;gap:var(--rt-color-palette-picker-gap);grid-template-columns:repeat(3,minmax(0,1fr))}.rt-color-picker__channel{display:flex;min-width:0;flex-direction:column;gap:var(--rt-space-2xs)}.rt-color-picker__channel-name{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium)}.rt-color-picker__channel-input{min-width:0}.rt-color-picker__actions{display:flex;justify-content:flex-end;gap:var(--rt-color-palette-actions-gap)}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: ReactiveFormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.FormControlDirective,
+					selector: "[formControl]",
+					inputs: [
+						"formControl",
+						"disabled",
+						"ngModel"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngForm"]
+				},
+				{
+					kind: "directive",
+					type: RtButtonDirective,
+					selector: "button[rtButton], a[rtButton]",
+					inputs: [
+						"label",
+						"icon",
+						"iconPos",
+						"theme",
+						"appearance",
+						"size",
+						"loading",
+						"loadingIcon",
+						"loadingLabel",
+						"pressed"
+					]
+				},
+				{
+					kind: "component",
+					type: RtInputComponent,
+					selector: "rt-input",
+					inputs: [
+						"appearance",
+						"type",
+						"placeholder",
+						"iconLeft",
+						"iconRight",
+						"passwordToggle",
+						"autocomplete"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtColorPickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-color-picker",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				ReactiveFormsModule,
+				RtButtonDirective,
+				RtInputComponent,
+				BlockDirective,
+				ElemDirective
+			],
+			host: { class: BEM_BLOCK$1 },
+			template: "<ng-container rtBlock=\"rt-color-picker\">\n    <!-- Площадь: вправо растёт насыщенность, вверх — яркость. Её фон строит логика палитры по оттенку\n         полосы. Указатель тянет точку, стрелки двигают её шагом. -->\n    <div\n        rtElem=\"area\"\n        qa-dataid=\"color-picker-area\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        [attr.aria-label]=\"t().uiColorPickerArea\"\n        [attr.aria-valuenow]=\"saturation()\"\n        [attr.aria-valuetext]=\"areaText()\"\n        [style.--rt-color-picker-area]=\"area()\"\n        [style.--rt-color-picker-x]=\"hsv().s\"\n        [style.--rt-color-picker-y]=\"1 - hsv().v\"\n        (pointerdown)=\"onAreaPointer($event)\"\n        (pointermove)=\"onAreaPointer($event)\"\n        (pointerup)=\"onAreaPointer($event)\"\n        (keydown)=\"onKey('area', $event)\">\n        <span rtElem=\"area-thumb\" [style.--rt-color-picker-color]=\"picked()\"></span>\n    </div>\n\n    <div\n        rtElem=\"hue\"\n        qa-dataid=\"color-picker-hue\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"359\"\n        [attr.aria-label]=\"t().uiColorPickerHue\"\n        [attr.aria-valuenow]=\"hueDegrees()\"\n        [style.--rt-color-picker-x]=\"hsv().h / 360\"\n        [style.--rt-color-picker-spectrum]=\"spectrum\"\n        (pointerdown)=\"onHuePointer($event)\"\n        (pointermove)=\"onHuePointer($event)\"\n        (pointerup)=\"onHuePointer($event)\"\n        (keydown)=\"onKey('hue', $event)\">\n        <span rtElem=\"hue-thumb\" [style.--rt-color-picker-color]=\"hueColor()\"></span>\n    </div>\n\n    <div rtElem=\"row\">\n        <span rtElem=\"preview\" aria-hidden=\"true\" [style.--rt-color-picker-color]=\"picked()\"></span>\n        <rt-input\n            rtElem=\"hex\"\n            qa-dataid=\"color-picker-hex\"\n            size=\"sm\"\n            [clearable]=\"false\"\n            [ariaLabel]=\"t().uiColorPickerHex\"\n            [formControl]=\"hexControl\" />\n    </div>\n\n    @if (channels()) {\n        <div rtElem=\"channels\">\n            @for (item of channelControls; track item.channel) {\n                <div rtElem=\"channel\">\n                    <span rtElem=\"channel-name\" aria-hidden=\"true\">{{ item.name }}</span>\n                    <rt-input\n                        rtElem=\"channel-input\"\n                        qa-dataid=\"color-picker-channel\"\n                        size=\"sm\"\n                        [clearable]=\"false\"\n                        [ariaLabel]=\"channelLabels()[item.channel]\"\n                        [formControl]=\"item.control\" />\n                </div>\n            }\n        </div>\n    }\n\n    <div rtElem=\"actions\">\n        <button\n            type=\"button\"\n            rtButton\n            qa-dataid=\"color-picker-cancel\"\n            appearance=\"text\"\n            theme=\"secondary\"\n            size=\"sm\"\n            (click)=\"cancelled.emit()\">\n            {{ t().uiCancel }}\n        </button>\n        <button type=\"button\" rtButton qa-dataid=\"color-picker-apply\" size=\"sm\" [disabled]=\"!changed()\" (click)=\"onApply()\">\n            {{ t().uiApply }}\n        </button>\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-color-picker{--rt-color-palette-picker-width: var(--rt-size-64);--rt-color-palette-picker-height: auto;--rt-color-palette-area-grow: 0;--rt-color-palette-picker-padding: var(--rt-space-md);--rt-color-palette-picker-gap: var(--rt-space-sm);--rt-color-palette-picker-bg: var(--rt-color-bg-surface);--rt-color-palette-picker-radius: var(--rt-radius-md);--rt-color-palette-picker-shadow: var(--rt-shadow-md);--rt-color-palette-area-height: var(--rt-size-40);--rt-color-palette-area-radius: var(--rt-radius-sm);--rt-color-palette-hue-height: var(--rt-size-3);--rt-color-palette-thumb-size: var(--rt-size-4);--rt-color-palette-thumb-border-width: var(--rt-border-width-thick);--rt-color-palette-thumb-border-color: var(--rt-color-bg-surface);--rt-color-palette-thumb-shadow: var(--rt-shadow-sm);--rt-color-palette-preview-size: var(--rt-control-height-sm);--rt-color-palette-actions-gap: var(--rt-space-xs);--rt-color-palette-hue-radius: var(--rt-radius-full);--rt-color-palette-thumb-radius: var(--rt-radius-full);--rt-color-palette-preview-border-width: var(--rt-border-width-thin);--rt-color-palette-preview-border-color: var(--rt-color-border-default);--rt-color-picker-area: none;--rt-color-picker-spectrum: none;--rt-color-picker-color: transparent;--rt-color-picker-x: 0;--rt-color-picker-y: 0;display:flex;width:var(--rt-color-palette-picker-width);height:var(--rt-color-palette-picker-height);box-sizing:border-box;flex-direction:column;padding:var(--rt-color-palette-picker-padding);border-radius:var(--rt-color-palette-picker-radius);background:var(--rt-color-palette-picker-bg);box-shadow:var(--rt-color-palette-picker-shadow);gap:var(--rt-color-palette-picker-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-color-picker{--rt-color-palette-picker-height: calc(var(--rt-size-64) + var(--rt-size-16));--rt-color-palette-area-grow: 1;--rt-color-palette-picker-radius: var(--rt-radius-ms);--rt-color-palette-picker-shadow: 0 var(--rt-space-2) var(--rt-space-4) 0 var(--rt-mat-neutral-60);--rt-color-palette-area-radius: var(--rt-radius-xs)}.rt-color-picker__area{position:relative;height:var(--rt-color-palette-area-height);flex-grow:var(--rt-color-palette-area-grow);border-radius:var(--rt-color-palette-area-radius);background:var(--rt-color-picker-area);cursor:crosshair;touch-action:none}.rt-color-picker__hue{position:relative;height:var(--rt-color-palette-hue-height);border-radius:var(--rt-color-palette-hue-radius);background:var(--rt-color-picker-spectrum);cursor:pointer;touch-action:none}.rt-color-picker__area:focus-visible,.rt-color-picker__hue:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-color-picker__area-thumb,.rt-color-picker__hue-thumb{position:absolute;width:var(--rt-color-palette-thumb-size);height:var(--rt-color-palette-thumb-size);box-sizing:border-box;border:var(--rt-color-palette-thumb-border-width) solid var(--rt-color-palette-thumb-border-color);border-radius:var(--rt-color-palette-thumb-radius);background:var(--rt-color-picker-color);box-shadow:var(--rt-color-palette-thumb-shadow);pointer-events:none;transform:translate(-50%,-50%)}.rt-color-picker__area-thumb{top:calc(var(--rt-color-picker-y) * 100%);left:calc(var(--rt-color-picker-x) * 100%)}.rt-color-picker__hue-thumb{top:50%;left:calc(var(--rt-color-picker-x) * 100%)}.rt-color-picker__row{display:flex;align-items:center;gap:var(--rt-color-palette-picker-gap)}.rt-color-picker__preview{width:var(--rt-color-palette-preview-size);height:var(--rt-color-palette-preview-size);flex-shrink:0;border:var(--rt-color-palette-preview-border-width) solid var(--rt-color-palette-preview-border-color);border-radius:var(--rt-color-palette-hue-radius);background:var(--rt-color-picker-color)}.rt-color-picker__hex{min-width:0;flex:1 1 auto}.rt-color-picker__channels{display:grid;gap:var(--rt-color-palette-picker-gap);grid-template-columns:repeat(3,minmax(0,1fr))}.rt-color-picker__channel{display:flex;min-width:0;flex-direction:column;gap:var(--rt-space-2xs)}.rt-color-picker__channel-name{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium)}.rt-color-picker__channel-input{min-width:0}.rt-color-picker__actions{display:flex;justify-content:flex-end;gap:var(--rt-color-palette-actions-gap)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		channels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "channels",
+				required: false
+			}]
+		}],
+		applied: [{
+			type: i0.Output,
+			args: ["applied"]
+		}],
+		cancelled: [{
+			type: i0.Output,
+			args: ["cancelled"]
+		}]
+	}
+});
+const BEM_BLOCK = "rt-color-palette";
+const PICKER_START = "#000000";
+var RtColorPaletteComponent = class RtColorPaletteComponent extends RtFormControlBase {
+	constructor() {
+		super(...arguments);
+		this.t = inject(RT_KIT_LABELS);
+		this.hasValue = computed(() => this.value() !== null, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+		this.swatches = computed(() => colorPaletteSwatches(this.colors(), this.value()), ...ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []);
+		this.checkedIndex = computed(() => this.swatches().findIndex((swatch) => swatch.hex === this.value()), ...ngDevMode ? [{ debugName: "checkedIndex" }] : /* istanbul ignore next */ []);
+		this.tabbableIndex = computed(() => Math.max(this.checkedIndex(), 0), ...ngDevMode ? [{ debugName: "tabbableIndex" }] : /* istanbul ignore next */ []);
+		this.hasCustom = computed(() => this.swatches().some((swatch) => swatch.custom), ...ngDevMode ? [{ debugName: "hasCustom" }] : /* istanbul ignore next */ []);
+		this.isReadonlyView = computed(() => this.readonly() || this.isReadonly(), ...ngDevMode ? [{ debugName: "isReadonlyView" }] : /* istanbul ignore next */ []);
+		this.pickerStart = computed(() => this.value() ?? PICKER_START, ...ngDevMode ? [{ debugName: "pickerStart" }] : /* istanbul ignore next */ []);
+		this.groupLabel = computed(() => this.ariaLabel() ?? this.t().uiColorPalette, ...ngDevMode ? [{ debugName: "groupLabel" }] : /* istanbul ignore next */ []);
+		this.swatchRefs = viewChildren("swatch", ...ngDevMode ? [{ debugName: "swatchRefs" }] : /* istanbul ignore next */ []);
+		this.picker = viewChild(RtPopoverDirective, ...ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []);
+		this.colors = input([], ...ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []);
+		this.readonly = input(false, {
+			...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.customAllowed = input(true, {
+			...ngDevMode ? { debugName: "customAllowed" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.channels = input(false, {
+			...ngDevMode ? { debugName: "channels" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.displayText = computed(() => this.value() ?? "", ...ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []);
+	}
+	writeValue(value) {
+		super.writeValue(colorPaletteHex(value));
+	}
+	onSwatch(hex) {
+		if (this.isDisabled() || this.isReadonlyView()) return;
+		this.#choose(hex);
+	}
+	onSwatchKeydown(event) {
+		if (this.isDisabled()) return;
+		const next = colorPaletteNextIndex(event.key, this.checkedIndex(), this.swatches().length);
+		if (next === null) return;
+		event.preventDefault();
+		this.#choose(this.swatches()[next].hex);
+		this.swatchRefs()[next]?.nativeElement.focus();
+	}
+	onCustomApply(hex) {
+		this.picker()?.close();
+		this.#choose(hex);
+	}
+	onCustomCancel() {
+		this.picker()?.close();
+	}
+	getEmptyValue() {
+		return null;
+	}
+	focusAfterClear() {
+		this.swatchRefs()[0]?.nativeElement.focus();
+	}
+	#choose(hex) {
+		this.value.set(hex);
+		this.emitChange(hex);
+		this.markTouched();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtColorPaletteComponent,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtColorPaletteComponent,
+			isStandalone: true,
+			selector: "rt-color-palette",
+			inputs: {
+				colors: {
+					classPropertyName: "colors",
+					publicName: "colors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				readonly: {
+					classPropertyName: "readonly",
+					publicName: "readonly",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				customAllowed: {
+					classPropertyName: "customAllowed",
+					publicName: "customAllowed",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				channels: {
+					classPropertyName: "channels",
+					publicName: "channels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				properties: {
+					"class.rt-color-palette--disabled": "isDisabled()",
+					"class.rt-color-palette--invalid": "isInvalid()",
+					"class.rt-color-palette--readonly": "isReadonlyView()"
+				},
+				classAttribute: "rt-color-palette"
+			},
+			providers: [{
+				provide: RtFormControlBase,
+				useExisting: forwardRef(() => RtColorPaletteComponent)
+			}],
+			viewQueries: [{
+				propertyName: "swatchRefs",
+				predicate: ["swatch"],
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "picker",
+				first: true,
+				predicate: RtPopoverDirective,
+				descendants: true,
+				isSignal: true
+			}],
+			usesInheritance: true,
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-color-palette\">\n    @if (isReadonlyView()) {\n        <!-- Только для чтения — один образец текущего цвета; пустой — с одной рамкой. -->\n        <span\n            rtElem=\"swatch\"\n            qa-dataid=\"color-palette-readonly\"\n            role=\"img\"\n            [rtMod]=\"{ readonly: true, empty: !hasValue() }\"\n            [attr.aria-label]=\"value() ?? t().uiColorPaletteEmpty\"\n            [style.--rt-color-palette-color]=\"value()\"></span>\n    } @else {\n        <div\n            rtElem=\"swatches\"\n            role=\"radiogroup\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"groupLabel()\"\n            [attr.aria-disabled]=\"isDisabled() || null\">\n            @for (swatch of swatches(); track swatch.hex; let index = $index) {\n                <button\n                    #swatch\n                    type=\"button\"\n                    rtElem=\"swatch\"\n                    qa-dataid=\"color-palette-swatch\"\n                    role=\"radio\"\n                    [rtMod]=\"{ checked: index === checkedIndex(), custom: swatch.custom }\"\n                    [attr.aria-checked]=\"index === checkedIndex()\"\n                    [attr.aria-label]=\"swatch.hex\"\n                    [attr.tabindex]=\"index === tabbableIndex() ? 0 : -1\"\n                    [disabled]=\"isDisabled()\"\n                    [style.--rt-color-palette-color]=\"swatch.hex\"\n                    (click)=\"onSwatch(swatch.hex)\"\n                    (keydown)=\"onSwatchKeydown($event)\"></button>\n            }\n        </div>\n\n        @if (customAllowed()) {\n            <!-- Панель своего цвета висит на кнопке: по ней встаёт и её нажатие не считает внешним. -->\n            <button\n                type=\"button\"\n                rtButton\n                rtElem=\"custom\"\n                qa-dataid=\"color-palette-custom\"\n                appearance=\"text\"\n                size=\"sm\"\n                [rtPopover]=\"pickerTpl\"\n                [disabled]=\"isDisabled()\">\n                {{ hasCustom() ? t().uiColorPaletteEditCustom : t().uiColorPaletteCustom }}\n            </button>\n\n            <ng-template #pickerTpl>\n                <rt-color-picker\n                    [value]=\"pickerStart()\"\n                    [channels]=\"channels()\"\n                    (applied)=\"onCustomApply($event)\"\n                    (cancelled)=\"onCustomCancel()\" />\n            </ng-template>\n        }\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-color-palette{--rt-color-palette-swatch-size: var(--rt-size-8);--rt-color-palette-swatch-radius: var(--rt-radius-full);--rt-color-palette-swatch-border-width: var(--rt-border-width-thin);--rt-color-palette-swatch-border-color: var(--rt-color-border-subtle);--rt-color-palette-swatch-scale-hover: 1;--rt-color-palette-gap: var(--rt-space-sm);--rt-color-palette-ring-width: var(--rt-border-width-thick);--rt-color-palette-ring-gap: var(--rt-border-width-thick);--rt-color-palette-ring-gap-color: var(--rt-color-bg-surface);--rt-color-palette-checked-inset: 0px;--rt-color-palette-checked-hollow: 0%;--rt-color-palette-checked-glow: 0px;--rt-color-palette-readonly-size: var(--rt-size-8);--rt-color-palette-readonly-border-width: var(--rt-border-width-thin);--rt-color-palette-empty-border-color: var(--rt-color-border-default);--rt-color-palette-empty-bg: transparent;--rt-color-palette-duration: var(--rt-duration-fast);--rt-color-palette-custom-gap: var(--rt-color-palette-gap);display:flex;flex-direction:column;align-items:flex-start;gap:var(--rt-color-palette-custom-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-color-palette{--rt-color-palette-custom-gap: var(--rt-space-md);--rt-color-palette-custom-height: var(--rt-control-height-sm);--rt-color-palette-custom-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));--rt-color-palette-swatch-size: calc(var(--rt-size-8) - var(--rt-space-2xs));--rt-color-palette-swatch-border-width: 0px;--rt-color-palette-swatch-scale-hover: 1.2;--rt-color-palette-gap: calc(var(--rt-space-sm) + var(--rt-space-2xs));--rt-color-palette-ring-width: 0px;--rt-color-palette-ring-gap: 0px;--rt-color-palette-checked-inset: var(--rt-border-width-thick);--rt-color-palette-checked-hollow: 100%;--rt-color-palette-checked-glow: calc(var(--rt-space-xs) + 1px);--rt-color-palette-empty-bg: var(--mat-sys-surface-container-lowest, var(--rt-neutral-0))}.rt-color-palette__swatches{display:flex;flex-wrap:wrap;gap:var(--rt-color-palette-gap)}.rt-color-palette__swatch{width:var(--rt-color-palette-swatch-size);height:var(--rt-color-palette-swatch-size);box-sizing:border-box;flex-shrink:0;padding:0;border:var(--rt-color-palette-swatch-border-width) solid var(--rt-color-palette-swatch-border-color);border-radius:var(--rt-color-palette-swatch-radius);background:var(--rt-color-palette-color);cursor:pointer;transition:box-shadow var(--rt-color-palette-duration) ease,transform var(--rt-color-palette-duration) ease}.rt-color-palette__swatch:hover:not(:disabled){transform:scale(var(--rt-color-palette-swatch-scale-hover))}.rt-color-palette__swatch:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-color-palette-ring-gap) + var(--rt-color-palette-ring-width))}.rt-color-palette__swatch--checked{--rt-color-palette-checked-shadow: inset 0 0 0 var(--rt-color-palette-checked-inset) var(--rt-color-palette-color), 0 0 0 var(--rt-color-palette-ring-gap) var(--rt-color-palette-ring-gap-color), 0 0 0 calc(var(--rt-color-palette-ring-gap) + var(--rt-color-palette-ring-width)) var(--rt-color-palette-color), 0 0 var(--rt-color-palette-checked-glow) var(--rt-color-palette-color);background:color-mix(in srgb,var(--rt-color-palette-color),transparent var(--rt-color-palette-checked-hollow));box-shadow:var(--rt-color-palette-checked-shadow)}.rt-color-palette__swatch--readonly{width:var(--rt-color-palette-readonly-size);height:var(--rt-color-palette-readonly-size);border-width:var(--rt-color-palette-readonly-border-width);cursor:default}.rt-color-palette__swatch--readonly:hover{transform:none}.rt-color-palette__swatch--empty{--rt-color-palette-color: var(--rt-color-palette-empty-bg);border-color:var(--rt-color-palette-empty-border-color)}.rt-color-palette__custom{flex-shrink:0}.rt-color-palette--disabled .rt-color-palette__swatch{cursor:not-allowed;opacity:var(--rt-opacity-disabled)}:is(.rt-preset-material,[data-preset=material]) .rt-color-palette .rt-color-palette__custom{--rt-btn-height: var(--rt-color-palette-custom-height);--rt-btn-color: var(--rt-color-palette-custom-color);--rt-btn-font-size: var(--rt-text-md);font-weight:var(--rt-font-weight-regular)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: RtButtonDirective,
+					selector: "button[rtButton], a[rtButton]",
+					inputs: [
+						"label",
+						"icon",
+						"iconPos",
+						"theme",
+						"appearance",
+						"size",
+						"loading",
+						"loadingIcon",
+						"loadingLabel",
+						"pressed"
+					]
+				},
+				{
+					kind: "component",
+					type: RtColorPickerComponent,
+					selector: "rt-color-picker",
+					inputs: ["value", "channels"],
+					outputs: ["applied", "cancelled"]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtColorPaletteComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-color-palette",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtButtonDirective,
+				RtColorPickerComponent,
+				RtPopoverDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			providers: [{
+				provide: RtFormControlBase,
+				useExisting: forwardRef(() => RtColorPaletteComponent)
+			}],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-color-palette--disabled]": "isDisabled()",
+				"[class.rt-color-palette--invalid]": "isInvalid()",
+				"[class.rt-color-palette--readonly]": "isReadonlyView()"
+			},
+			template: "<ng-container rtBlock=\"rt-color-palette\">\n    @if (isReadonlyView()) {\n        <!-- Только для чтения — один образец текущего цвета; пустой — с одной рамкой. -->\n        <span\n            rtElem=\"swatch\"\n            qa-dataid=\"color-palette-readonly\"\n            role=\"img\"\n            [rtMod]=\"{ readonly: true, empty: !hasValue() }\"\n            [attr.aria-label]=\"value() ?? t().uiColorPaletteEmpty\"\n            [style.--rt-color-palette-color]=\"value()\"></span>\n    } @else {\n        <div\n            rtElem=\"swatches\"\n            role=\"radiogroup\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"groupLabel()\"\n            [attr.aria-disabled]=\"isDisabled() || null\">\n            @for (swatch of swatches(); track swatch.hex; let index = $index) {\n                <button\n                    #swatch\n                    type=\"button\"\n                    rtElem=\"swatch\"\n                    qa-dataid=\"color-palette-swatch\"\n                    role=\"radio\"\n                    [rtMod]=\"{ checked: index === checkedIndex(), custom: swatch.custom }\"\n                    [attr.aria-checked]=\"index === checkedIndex()\"\n                    [attr.aria-label]=\"swatch.hex\"\n                    [attr.tabindex]=\"index === tabbableIndex() ? 0 : -1\"\n                    [disabled]=\"isDisabled()\"\n                    [style.--rt-color-palette-color]=\"swatch.hex\"\n                    (click)=\"onSwatch(swatch.hex)\"\n                    (keydown)=\"onSwatchKeydown($event)\"></button>\n            }\n        </div>\n\n        @if (customAllowed()) {\n            <!-- Панель своего цвета висит на кнопке: по ней встаёт и её нажатие не считает внешним. -->\n            <button\n                type=\"button\"\n                rtButton\n                rtElem=\"custom\"\n                qa-dataid=\"color-palette-custom\"\n                appearance=\"text\"\n                size=\"sm\"\n                [rtPopover]=\"pickerTpl\"\n                [disabled]=\"isDisabled()\">\n                {{ hasCustom() ? t().uiColorPaletteEditCustom : t().uiColorPaletteCustom }}\n            </button>\n\n            <ng-template #pickerTpl>\n                <rt-color-picker\n                    [value]=\"pickerStart()\"\n                    [channels]=\"channels()\"\n                    (applied)=\"onCustomApply($event)\"\n                    (cancelled)=\"onCustomCancel()\" />\n            </ng-template>\n        }\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-color-palette{--rt-color-palette-swatch-size: var(--rt-size-8);--rt-color-palette-swatch-radius: var(--rt-radius-full);--rt-color-palette-swatch-border-width: var(--rt-border-width-thin);--rt-color-palette-swatch-border-color: var(--rt-color-border-subtle);--rt-color-palette-swatch-scale-hover: 1;--rt-color-palette-gap: var(--rt-space-sm);--rt-color-palette-ring-width: var(--rt-border-width-thick);--rt-color-palette-ring-gap: var(--rt-border-width-thick);--rt-color-palette-ring-gap-color: var(--rt-color-bg-surface);--rt-color-palette-checked-inset: 0px;--rt-color-palette-checked-hollow: 0%;--rt-color-palette-checked-glow: 0px;--rt-color-palette-readonly-size: var(--rt-size-8);--rt-color-palette-readonly-border-width: var(--rt-border-width-thin);--rt-color-palette-empty-border-color: var(--rt-color-border-default);--rt-color-palette-empty-bg: transparent;--rt-color-palette-duration: var(--rt-duration-fast);--rt-color-palette-custom-gap: var(--rt-color-palette-gap);display:flex;flex-direction:column;align-items:flex-start;gap:var(--rt-color-palette-custom-gap)}:is(.rt-preset-material,[data-preset=material]) .rt-color-palette{--rt-color-palette-custom-gap: var(--rt-space-md);--rt-color-palette-custom-height: var(--rt-control-height-sm);--rt-color-palette-custom-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));--rt-color-palette-swatch-size: calc(var(--rt-size-8) - var(--rt-space-2xs));--rt-color-palette-swatch-border-width: 0px;--rt-color-palette-swatch-scale-hover: 1.2;--rt-color-palette-gap: calc(var(--rt-space-sm) + var(--rt-space-2xs));--rt-color-palette-ring-width: 0px;--rt-color-palette-ring-gap: 0px;--rt-color-palette-checked-inset: var(--rt-border-width-thick);--rt-color-palette-checked-hollow: 100%;--rt-color-palette-checked-glow: calc(var(--rt-space-xs) + 1px);--rt-color-palette-empty-bg: var(--mat-sys-surface-container-lowest, var(--rt-neutral-0))}.rt-color-palette__swatches{display:flex;flex-wrap:wrap;gap:var(--rt-color-palette-gap)}.rt-color-palette__swatch{width:var(--rt-color-palette-swatch-size);height:var(--rt-color-palette-swatch-size);box-sizing:border-box;flex-shrink:0;padding:0;border:var(--rt-color-palette-swatch-border-width) solid var(--rt-color-palette-swatch-border-color);border-radius:var(--rt-color-palette-swatch-radius);background:var(--rt-color-palette-color);cursor:pointer;transition:box-shadow var(--rt-color-palette-duration) ease,transform var(--rt-color-palette-duration) ease}.rt-color-palette__swatch:hover:not(:disabled){transform:scale(var(--rt-color-palette-swatch-scale-hover))}.rt-color-palette__swatch:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-color-palette-ring-gap) + var(--rt-color-palette-ring-width))}.rt-color-palette__swatch--checked{--rt-color-palette-checked-shadow: inset 0 0 0 var(--rt-color-palette-checked-inset) var(--rt-color-palette-color), 0 0 0 var(--rt-color-palette-ring-gap) var(--rt-color-palette-ring-gap-color), 0 0 0 calc(var(--rt-color-palette-ring-gap) + var(--rt-color-palette-ring-width)) var(--rt-color-palette-color), 0 0 var(--rt-color-palette-checked-glow) var(--rt-color-palette-color);background:color-mix(in srgb,var(--rt-color-palette-color),transparent var(--rt-color-palette-checked-hollow));box-shadow:var(--rt-color-palette-checked-shadow)}.rt-color-palette__swatch--readonly{width:var(--rt-color-palette-readonly-size);height:var(--rt-color-palette-readonly-size);border-width:var(--rt-color-palette-readonly-border-width);cursor:default}.rt-color-palette__swatch--readonly:hover{transform:none}.rt-color-palette__swatch--empty{--rt-color-palette-color: var(--rt-color-palette-empty-bg);border-color:var(--rt-color-palette-empty-border-color)}.rt-color-palette__custom{flex-shrink:0}.rt-color-palette--disabled .rt-color-palette__swatch{cursor:not-allowed;opacity:var(--rt-opacity-disabled)}:is(.rt-preset-material,[data-preset=material]) .rt-color-palette .rt-color-palette__custom{--rt-btn-height: var(--rt-color-palette-custom-height);--rt-btn-color: var(--rt-color-palette-custom-color);--rt-btn-font-size: var(--rt-text-md);font-weight:var(--rt-font-weight-regular)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		swatchRefs: [{
+			type: i0.ViewChildren,
+			args: ["swatch", { isSignal: true }]
+		}],
+		picker: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }]
+		}],
+		colors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colors",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		customAllowed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "customAllowed",
+				required: false
+			}]
+		}],
+		channels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "channels",
+				required: false
+			}]
+		}]
+	}
+});
+export { RT_COLOR_PALETTE_DEFAULT, RtColorPaletteComponent, RtColorPickerComponent, colorPaletteArea, colorPaletteChannel, colorPaletteFromHsv, colorPaletteFromRgb, colorPaletteHex, colorPaletteNextIndex, colorPaletteSpectrum, colorPaletteStep, colorPaletteSwatches, colorPaletteToHsv, colorPaletteToRgb };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-color-palette.mjs.map