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

package/fesm2022/rt-tools-ui-kit-v2-image-cropper.mjs

@@ -1,540 +1,713 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { numberAttribute, inject, DestroyRef, signal, computed, viewChild, input, booleanAttribute, output, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { WINDOW, PlatformService, BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
-import { RtSpinnerComponent } from '@rt-tools/ui-kit-v2/spinner';
-
-/**
- * Чистая логика обрезки: вписывание исходника в поле, рамка в пикселях
- * исходника, её движение и растяжение, перевод клавиш и выбор формата.
- * Компонент только переводит указатель в сдвиги и рисует то, что вернулось.
- */
-/** Все восемь ручек по часовой стрелке от левого верхнего угла */
-const RT_IMAGE_CROPPER_HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
-/** Шаг клавиш в пикселях поля: стрелка и стрелка с Shift */
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, effect, inject, input, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective, PlatformService, WINDOW } from "@rt-tools/core";
+import { RT_KIT_LABELS } from "@rt-tools/ui-kit-v2/core";
+import { RtSpinnerComponent } from "@rt-tools/ui-kit-v2/spinner";
+const RT_IMAGE_CROPPER_HANDLES = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+];
 const RT_IMAGE_CROPPER_KEY_STEP = 1;
 const RT_IMAGE_CROPPER_KEY_STEP_LARGE = 10;
-/** Качество по умолчанию — то же, что у загрузчика первого кита */
 const RT_IMAGE_CROPPER_QUALITY = 92;
-const OWN_TYPES = ['image/png', 'image/jpeg', 'image/webp'];
+const OWN_TYPES = [
+	"image/png",
+	"image/jpeg",
+	"image/webp"
+];
 function clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
+	return Math.max(min, Math.min(max, value));
 }
-/**
- * Вписывает исходник в поле целиком, с его пропорциями, по центру. Ни одна часть
- * картинки не срезается полем, и ни одна не растянута.
- */
 function fitSource(source, field) {
-    if (source.width <= 0 || source.height <= 0 || field.width <= 0 || field.height <= 0) {
-        return { scale: 0, offsetX: 0, offsetY: 0, width: 0, height: 0 };
-    }
-    const scale = Math.min(field.width / source.width, field.height / source.height);
-    const width = source.width * scale;
-    const height = source.height * scale;
-    return { offsetX: (field.width - width) / 2, offsetY: (field.height - height) / 2, scale, width, height };
+	if (source.width <= 0 || source.height <= 0 || field.width <= 0 || field.height <= 0) return {
+		scale: 0,
+		offsetX: 0,
+		offsetY: 0,
+		width: 0,
+		height: 0
+	};
+	const scale = Math.min(field.width / source.width, field.height / source.height);
+	const width = source.width * scale;
+	const height = source.height * scale;
+	return {
+		offsetX: (field.width - width) / 2,
+		offsetY: (field.height - height) / 2,
+		scale,
+		width,
+		height
+	};
 }
-/**
- * Пропорция, которую держит рамка. Круглый вид держит один к одному при любой
- * заданной; заданная не числом или не больше нуля значит свободную рамку.
- */
 function frameRatio(ratio, round) {
-    if (round) {
-        return 1;
-    }
-    return typeof ratio === 'number' && Number.isFinite(ratio) && ratio > 0 ? ratio : null;
+	if (round) return 1;
+	return typeof ratio === "number" && Number.isFinite(ratio) && ratio > 0 ? ratio : null;
 }
-/**
- * Начальная рамка — наибольшая, какую позволяет пропорция, по центру исходника.
- * Свободная начинается как весь исходник.
- */
 function initialFrame(source, ratio) {
-    if (ratio === null) {
-        return { x: 0, y: 0, width: source.width, height: source.height };
-    }
-    const width = Math.min(source.width, source.height * ratio);
-    const height = width / ratio;
-    return { x: (source.width - width) / 2, y: (source.height - height) / 2, width, height };
+	if (ratio === null) return {
+		x: 0,
+		y: 0,
+		width: source.width,
+		height: source.height
+	};
+	const width = Math.min(source.width, source.height * ratio);
+	const height = width / ratio;
+	return {
+		x: (source.width - width) / 2,
+		y: (source.height - height) / 2,
+		width,
+		height
+	};
 }
-/** Сдвиг рамки целиком: размер тот же, у края исходника рамка останавливается */
 function moveFrame(frame, delta, source) {
-    return {
-        x: clamp(frame.x + delta.dx, 0, Math.max(0, source.width - frame.width)),
-        y: clamp(frame.y + delta.dy, 0, Math.max(0, source.height - frame.height)),
-        width: frame.width,
-        height: frame.height,
-    };
+	return {
+		x: clamp(frame.x + delta.dx, 0, Math.max(0, source.width - frame.width)),
+		y: clamp(frame.y + delta.dy, 0, Math.max(0, source.height - frame.height)),
+		width: frame.width,
+		height: frame.height
+	};
 }
-/** Знак оси по ручке: к концу оси, к началу, или ось не тянется */
 function axisSign(handle, forward, backward) {
-    if (handle.includes(forward)) {
-        return 1;
-    }
-    return handle.includes(backward) ? -1 : 0;
+	if (handle.includes(forward)) return 1;
+	return handle.includes(backward) ? -1 : 0;
 }
-/** По каким осям и в какую сторону тянет ручка */
 function handleDirection(handle) {
-    return { x: axisSign(handle, 'e', 'w'), y: axisSign(handle, 's', 'n') };
+	return {
+		x: axisSign(handle, "e", "w"),
+		y: axisSign(handle, "s", "n")
+	};
 }
-/**
- * Наибольший размер по оси: от неподвижной стороны до края исходника, а для оси,
- * которую ручка не тянет, — удвоенное расстояние от центра до ближнего края.
- */
 function axisRoom(start, size, limit, direction) {
-    if (direction > 0) {
-        return limit - start;
-    }
-    if (direction < 0) {
-        return start + size;
-    }
-    const centre = start + size / 2;
-    return 2 * Math.min(centre, limit - centre);
+	if (direction > 0) return limit - start;
+	if (direction < 0) return start + size;
+	const centre = start + size / 2;
+	return 2 * Math.min(centre, limit - centre);
 }
-/** Где рамка встаёт на оси: от неподвижной стороны, или вокруг центра для оси, которую ручка не тянет */
 function axisStart(start, size, next, direction) {
-    if (direction > 0) {
-        return start;
-    }
-    if (direction < 0) {
-        return start + size - next;
-    }
-    return start + size / 2 - next / 2;
+	if (direction > 0) return start;
+	if (direction < 0) return start + size - next;
+	return start + size / 2 - next / 2;
 }
-/** Свободная рамка: каждая ось тянется сама, ось без ручки остаётся как была */
 function resizeFree(frame, direction, delta, source, least) {
-    let { x, y, width, height } = frame;
-    if (direction.x !== 0) {
-        const room = axisRoom(frame.x, frame.width, source.width, direction.x);
-        width = clamp(frame.width + direction.x * delta.dx, Math.min(least, room), room);
-        x = axisStart(frame.x, frame.width, width, direction.x);
-    }
-    if (direction.y !== 0) {
-        const room = axisRoom(frame.y, frame.height, source.height, direction.y);
-        height = clamp(frame.height + direction.y * delta.dy, Math.min(least, room), room);
-        y = axisStart(frame.y, frame.height, height, direction.y);
-    }
-    return { x, y, width, height };
+	let { x, y, width, height } = frame;
+	if (direction.x !== 0) {
+		const room = axisRoom(frame.x, frame.width, source.width, direction.x);
+		width = clamp(frame.width + direction.x * delta.dx, Math.min(least, room), room);
+		x = axisStart(frame.x, frame.width, width, direction.x);
+	}
+	if (direction.y !== 0) {
+		const room = axisRoom(frame.y, frame.height, source.height, direction.y);
+		height = clamp(frame.height + direction.y * delta.dy, Math.min(least, room), room);
+		y = axisStart(frame.y, frame.height, height, direction.y);
+	}
+	return {
+		x,
+		y,
+		width,
+		height
+	};
 }
-/**
- * Ширина, которую просит сдвиг при заданной пропорции. Угол берёт ту ось, по
- * которой сдвиг больше; сторона — свою ось.
- */
 function wantedRatioWidth(frame, direction, delta, ratio) {
-    const byWidth = frame.width + direction.x * delta.dx;
-    const byHeight = (frame.height + direction.y * delta.dy) * ratio;
-    if (direction.x === 0) {
-        return byHeight;
-    }
-    if (direction.y === 0) {
-        return byWidth;
-    }
-    return Math.abs(delta.dx) >= Math.abs(delta.dy * ratio) ? byWidth : byHeight;
+	const byWidth = frame.width + direction.x * delta.dx;
+	const byHeight = (frame.height + direction.y * delta.dy) * ratio;
+	if (direction.x === 0) return byHeight;
+	if (direction.y === 0) return byWidth;
+	return Math.abs(delta.dx) >= Math.abs(delta.dy * ratio) ? byWidth : byHeight;
 }
-/**
- * Растяжение рамки за ручку. Сторона или угол напротив ручки стоит на месте;
- * рамка не выходит за исходник и не становится меньше наименьшего размера; рамка
- * с пропорцией держит её, а боковая ручка тянет её вокруг центра второй оси.
- */
 function resizeFrame(frame, handle, delta, source, ratio, minSize) {
-    const direction = handleDirection(handle);
-    const least = Math.max(0, minSize);
-    if (ratio === null) {
-        return resizeFree(frame, direction, delta, source, least);
-    }
-    const roomWidth = Math.min(axisRoom(frame.x, frame.width, source.width, direction.x), axisRoom(frame.y, frame.height, source.height, direction.y) * ratio);
-    const leastWidth = Math.min(Math.max(least, least * ratio), roomWidth);
-    const width = clamp(wantedRatioWidth(frame, direction, delta, ratio), leastWidth, roomWidth);
-    const height = width / ratio;
-    return {
-        x: axisStart(frame.x, frame.width, width, direction.x),
-        y: axisStart(frame.y, frame.height, height, direction.y),
-        width,
-        height,
-    };
+	const direction = handleDirection(handle);
+	const least = Math.max(0, minSize);
+	if (ratio === null) return resizeFree(frame, direction, delta, source, least);
+	const roomWidth = Math.min(axisRoom(frame.x, frame.width, source.width, direction.x), axisRoom(frame.y, frame.height, source.height, direction.y) * ratio);
+	const leastWidth = Math.min(Math.max(least, least * ratio), roomWidth);
+	const width = clamp(wantedRatioWidth(frame, direction, delta, ratio), leastWidth, roomWidth);
+	const height = width / ratio;
+	return {
+		x: axisStart(frame.x, frame.width, width, direction.x),
+		y: axisStart(frame.y, frame.height, height, direction.y),
+		width,
+		height
+	};
 }
-/**
- * Сдвиг от стрелки клавиатуры в пикселях исходника. Одно нажатие — пиксель поля,
- * с Shift десять; не стрелка даёт `null`.
- */
 function keyDelta(key, isLarge, scale) {
-    if (scale <= 0) {
-        return null;
-    }
-    const step = (isLarge ? RT_IMAGE_CROPPER_KEY_STEP_LARGE : RT_IMAGE_CROPPER_KEY_STEP) / scale;
-    switch (key) {
-        case 'ArrowLeft':
-            return { dx: -step, dy: 0 };
-        case 'ArrowRight':
-            return { dx: step, dy: 0 };
-        case 'ArrowUp':
-            return { dx: 0, dy: -step };
-        case 'ArrowDown':
-            return { dx: 0, dy: step };
-        default:
-            return null;
-    }
+	if (scale <= 0) return null;
+	const step = (isLarge ? 10 : 1) / scale;
+	switch (key) {
+		case "ArrowLeft": return {
+			dx: -step,
+			dy: 0
+		};
+		case "ArrowRight": return {
+			dx: step,
+			dy: 0
+		};
+		case "ArrowUp": return {
+			dx: 0,
+			dy: -step
+		};
+		case "ArrowDown": return {
+			dx: 0,
+			dy: step
+		};
+		default: return null;
+	}
 }
-/** Сдвиг указателя в пикселях поля переводится в пиксели исходника */
 function fieldDelta(dx, dy, scale) {
-    return scale > 0 ? { dx: dx / scale, dy: dy / scale } : { dx: 0, dy: 0 };
+	return scale > 0 ? {
+		dx: dx / scale,
+		dy: dy / scale
+	} : {
+		dx: 0,
+		dy: 0
+	};
 }
-/** Рамка в пикселях поля — для рисования поверх вписанной картинки */
 function frameInField(frame, fit) {
-    return {
-        x: fit.offsetX + frame.x * fit.scale,
-        y: fit.offsetY + frame.y * fit.scale,
-        width: frame.width * fit.scale,
-        height: frame.height * fit.scale,
-    };
+	return {
+		x: fit.offsetX + frame.x * fit.scale,
+		y: fit.offsetY + frame.y * fit.scale,
+		width: frame.width * fit.scale,
+		height: frame.height * fit.scale
+	};
 }
-/** Рамка в целых пикселях исходника — то, что вырезает холст; не меньше пикселя */
 function cropArea(frame, source) {
-    const x = clamp(Math.round(frame.x), 0, Math.max(0, source.width - 1));
-    const y = clamp(Math.round(frame.y), 0, Math.max(0, source.height - 1));
-    return {
-        x,
-        y,
-        width: clamp(Math.round(frame.width), 1, Math.max(1, source.width - x)),
-        height: clamp(Math.round(frame.height), 1, Math.max(1, source.height - y)),
-    };
+	const x = clamp(Math.round(frame.x), 0, Math.max(0, source.width - 1));
+	const y = clamp(Math.round(frame.y), 0, Math.max(0, source.height - 1));
+	return {
+		x,
+		y,
+		width: clamp(Math.round(frame.width), 1, Math.max(1, source.width - x)),
+		height: clamp(Math.round(frame.height), 1, Math.max(1, source.height - y))
+	};
 }
-/**
- * Тип результата. Без выбранного формата берётся формат исходника, и png, когда
- * он не из трёх.
- */
 function resultType(format, sourceType) {
-    if (format) {
-        return `image/${format}`;
-    }
-    return OWN_TYPES.includes(sourceType) ? sourceType : 'image/png';
+	if (format) return `image/${format}`;
+	return OWN_TYPES.includes(sourceType) ? sourceType : "image/png";
 }
-/** Качество холста — доля единицы; вход берёт проценты */
 function resultQuality(quality) {
-    return Number.isFinite(quality) ? clamp(quality, 0, 100) / 100 : RT_IMAGE_CROPPER_QUALITY / 100;
+	return Number.isFinite(quality) ? clamp(quality, 0, 100) / 100 : 92 / 100;
 }
-/** Имя файла результата: основа имени исходника и расширение по типу результата */
 function resultFileName(sourceName, type) {
-    const extension = type === 'image/jpeg' ? 'jpg' : type.replace('image/', '');
-    const dot = sourceName.lastIndexOf('.');
-    let base = sourceName || 'image';
-    if (dot > 0) {
-        base = sourceName.slice(0, dot);
-    }
-    return `${base}.${extension}`;
+	const extension = type === "image/jpeg" ? "jpg" : type.replace("image/", "");
+	const dot = sourceName.lastIndexOf(".");
+	let base = sourceName || "image";
+	if (dot > 0) base = sourceName.slice(0, dot);
+	return `${base}.${extension}`;
 }
-
-const BEM_BLOCK = 'rt-image-cropper';
-/** Наименьший размер рамки по умолчанию, в пикселях исходника */
+const BEM_BLOCK = "rt-image-cropper";
 const DEFAULT_MIN_SIZE = 16;
-/** Подпись каждой ручки — ключ словаря кита */
 const HANDLE_LABELS = {
-    n: 'uiImageCropperHandleN',
-    s: 'uiImageCropperHandleS',
-    e: 'uiImageCropperHandleE',
-    w: 'uiImageCropperHandleW',
-    ne: 'uiImageCropperHandleNe',
-    nw: 'uiImageCropperHandleNw',
-    se: 'uiImageCropperHandleSe',
-    sw: 'uiImageCropperHandleSw',
+	n: "uiImageCropperHandleN",
+	s: "uiImageCropperHandleS",
+	e: "uiImageCropperHandleE",
+	w: "uiImageCropperHandleW",
+	ne: "uiImageCropperHandleNe",
+	nw: "uiImageCropperHandleNw",
+	se: "uiImageCropperHandleSe",
+	sw: "uiImageCropperHandleSw"
 };
 function sameRect(a, b) {
-    return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
 function optionalNumber(value) {
-    return value === null || value === undefined || value === '' ? null : numberAttribute(value, 0);
+	return value === null || value === void 0 || value === "" ? null : numberAttribute(value, 0);
 }
-/**
- * Обрезка изображения: исходник вписан в поле целиком, поверх — рамка с восемью
- * ручками. Рамка живёт в пикселях исходника и двигается указателем, пальцем и
- * стрелками; после прочтения исходника и после каждого законченного изменения
- * компонент отдаёт файл, вырезанный рамкой, в выбранном формате и качестве.
- *
- * Поворот снимка по EXIF делает сам браузер: картинка и холст читают исходник с
- * `image-orientation: from-image`, и размеры, которые видит логика, уже
- * повёрнутые.
- */
-class RtImageCropperComponent {
-    #destroyRef;
-    #window;
-    #document;
-    #platform;
-    #fieldSize;
-    #source;
-    #frame;
-    #ratio;
-    #fit;
-    #image;
-    /** Картинка, которая сейчас читается: ответ прежней после смены исходника не принимается */
-    #pending;
-    #sourceType;
-    #sourceName;
-    #drag;
-    /** Номер последнего запроса результата: поздний ответ холста по старой рамке отбрасывается */
-    #resultTicket;
-    constructor() {
-        this.#destroyRef = inject(DestroyRef);
-        this.#window = inject(WINDOW);
-        this.#document = inject(DOCUMENT);
-        this.#platform = inject(PlatformService);
-        this.#fieldSize = signal({ width: 0, height: 0 }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#fieldSize" }] : /* istanbul ignore next */ []));
-        this.#source = signal({ width: 0, height: 0 }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#source" }] : /* istanbul ignore next */ []));
-        this.#frame = signal({ x: 0, y: 0, width: 0, height: 0 }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#frame" }] : /* istanbul ignore next */ []));
-        this.#ratio = computed(() => frameRatio(this.ratio(), this.round()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#ratio" }] : /* istanbul ignore next */ []));
-        this.#fit = computed(() => fitSource(this.#source(), this.#fieldSize()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#fit" }] : /* istanbul ignore next */ []));
-        this.#image = null;
-        /** Картинка, которая сейчас читается: ответ прежней после смены исходника не принимается */
-        this.#pending = null;
-        this.#sourceType = '';
-        this.#sourceName = '';
-        this.#drag = null;
-        /** Номер последнего запроса результата: поздний ответ холста по старой рамке отбрасывается */
-        this.#resultTicket = 0;
-        this.field = viewChild.required('field', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-        this.t = inject(RT_KIT_LABELS);
-        this.handles = RT_IMAGE_CROPPER_HANDLES;
-        this.handleLabels = HANDLE_LABELS;
-        this.state = signal('empty', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        /** Текст пустого поля: свой, если задан, иначе подпись кита */
-        this.placeholderText = computed(() => this.placeholder() || this.t().uiImageCropperPlaceholder, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
-        /** Адрес исходника для картинки в поле */
-        this.url = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
-        /** Где картинка лежит в поле, в пикселях поля */
-        this.image = computed(() => {
-            const fit = this.#fit();
-            return { x: fit.offsetX, y: fit.offsetY, width: fit.width, height: fit.height };
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
-        /** Рамка в пикселях поля */
-        this.frameBox = computed(() => frameInField(this.#frame(), this.#fit()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "frameBox" }] : /* istanbul ignore next */ []));
-        /** Подсказка пустого поля; пусто — подпись кита `uiImageCropperPlaceholder` */
-        this.placeholder = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        /** Исходник: файл, который надо обрезать; пусто — поле с подсказкой */
-        this.file = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
-        /** Пропорция рамки, ширина к высоте; пусто — рамка свободная */
-        this.ratio = input(null, { ...(ngDevMode ? { debugName: "ratio" } : /* istanbul ignore next */ {}), transform: optionalNumber });
-        /** Круглый вид: маска на экране и пропорция один к одному; результат — квадрат */
-        this.round = input(false, { ...(ngDevMode ? { debugName: "round" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Наименьший размер рамки в пикселях исходника */
-        this.minSize = input(DEFAULT_MIN_SIZE, { ...(ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, DEFAULT_MIN_SIZE) });
-        /** Формат результата; пусто — формат исходника, png, когда он не из трёх */
-        this.format = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
-        /** Качество результата в процентах — для jpeg и webp */
-        this.quality = input(RT_IMAGE_CROPPER_QUALITY, { ...(ngDevMode ? { debugName: "quality" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, RT_IMAGE_CROPPER_QUALITY) });
-        /** Недоступна: рамка видна, но не меняется ни указателем, ни клавишами */
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Файл, вырезанный рамкой: после прочтения исходника и после каждого законченного изменения */
-        this.cropped = output();
-        /** Исходник не прочитался */
-        this.loadFailed = output();
-        effect(() => {
-            const file = this.file();
-            untracked(() => this.#load(file));
-        });
-        effect(() => {
-            const ratio = this.#ratio();
-            untracked(() => {
-                if (this.state() === 'ready') {
-                    this.#frame.set(initialFrame(this.#source(), ratio));
-                    this.#emitResult();
-                }
-            });
-        });
-        afterNextRender(() => this.#observe(this.field().nativeElement));
-        this.#destroyRef.onDestroy(() => this.#revoke());
-    }
-    onPointerDown(event, handle) {
-        if (this.disabled() || this.#drag !== null || (event.pointerType === 'mouse' && event.button !== 0)) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        const target = event.currentTarget;
-        if (target instanceof this.#window.HTMLElement && typeof target.setPointerCapture === 'function') {
-            target.setPointerCapture(event.pointerId);
-        }
-        this.#drag = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, startFrame: this.#frame(), handle };
-    }
-    onPointerMove(event) {
-        const drag = this.#drag;
-        if (drag === null || drag.pointerId !== event.pointerId) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        const delta = fieldDelta(event.clientX - drag.startX, event.clientY - drag.startY, this.#fit().scale);
-        this.#frame.set(this.#change(drag.startFrame, drag.handle, delta));
-    }
-    onPointerUp(event) {
-        const drag = this.#drag;
-        if (drag === null || drag.pointerId !== event.pointerId) {
-            return;
-        }
-        event.stopPropagation();
-        this.#drag = null;
-        const target = event.currentTarget;
-        if (target instanceof this.#window.HTMLElement && typeof target.releasePointerCapture === 'function') {
-            target.releasePointerCapture(event.pointerId);
-        }
-        if (!sameRect(drag.startFrame, this.#frame())) {
-            this.#emitResult();
-        }
-    }
-    onKeyDown(event, handle) {
-        if (this.disabled()) {
-            return;
-        }
-        const delta = keyDelta(event.key, event.shiftKey, this.#fit().scale);
-        if (delta === null) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        const before = this.#frame();
-        const next = this.#change(before, handle, delta);
-        if (!sameRect(before, next)) {
-            this.#frame.set(next);
-            this.#emitResult();
-        }
-    }
-    /** Одна точка для указателя и клавиш: внутри рамки — сдвиг, на ручке — растяжение */
-    #change(frame, handle, delta) {
-        return handle === null
-            ? moveFrame(frame, delta, this.#source())
-            : resizeFrame(frame, handle, delta, this.#source(), this.#ratio(), this.minSize());
-    }
-    #load(file) {
-        this.#revoke();
-        this.#image = null;
-        this.#pending = null;
-        this.#drag = null;
-        this.#resultTicket++;
-        if (file === null || !this.#platform.isPlatformBrowser) {
-            this.state.set('empty');
-            return;
-        }
-        this.#sourceType = file.type;
-        this.#sourceName = file instanceof this.#window.File ? file.name : '';
-        const url = this.#window.URL.createObjectURL(file);
-        const image = new this.#window.Image();
-        this.#pending = image;
-        this.url.set(url);
-        this.state.set('loading');
-        image.onload = () => {
-            if (this.#pending === image) {
-                this.#pending = null;
-                this.#ready(image);
-            }
-        };
-        image.onerror = () => {
-            if (this.#pending === image) {
-                this.#pending = null;
-                this.#refuse();
-            }
-        };
-        image.src = url;
-    }
-    #ready(image) {
-        if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
-            this.#refuse();
-            return;
-        }
-        this.#image = image;
-        this.#source.set({ width: image.naturalWidth, height: image.naturalHeight });
-        this.#frame.set(initialFrame(this.#source(), this.#ratio()));
-        this.state.set('ready');
-        this.#emitResult();
-    }
-    #refuse() {
-        this.state.set('refusal');
-        this.loadFailed.emit();
-    }
-    #revoke() {
-        const url = this.url();
-        if (url !== null) {
-            this.#window.URL.revokeObjectURL(url);
-            this.url.set(null);
-        }
-    }
-    #observe(field) {
-        const measure = () => this.#fieldSize.set({ width: field.clientWidth, height: field.clientHeight });
-        measure();
-        if (typeof this.#window.ResizeObserver !== 'function') {
-            return;
-        }
-        const observer = new this.#window.ResizeObserver(measure);
-        observer.observe(field);
-        this.#destroyRef.onDestroy(() => observer.disconnect());
-    }
-    /** Вырезает рамку холстом и отдаёт файл; ответ по устаревшей рамке не выходит */
-    #emitResult() {
-        const image = this.#image;
-        if (image === null) {
-            return;
-        }
-        this.#resultTicket++;
-        const ticket = this.#resultTicket;
-        const area = cropArea(this.#frame(), this.#source());
-        const canvas = this.#document.createElement('canvas');
-        canvas.width = area.width;
-        canvas.height = area.height;
-        const context = canvas.getContext('2d');
-        if (context === null) {
-            return;
-        }
-        context.drawImage(image, area.x, area.y, area.width, area.height, 0, 0, area.width, area.height);
-        const type = resultType(this.format(), this.#sourceType);
-        canvas.toBlob((blob) => {
-            if (blob === null || ticket !== this.#resultTicket) {
-                return;
-            }
-            const file = new this.#window.File([blob], resultFileName(this.#sourceName, type), { type });
-            this.cropped.emit({ file, frame: area });
-        }, type, resultQuality(this.quality()));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtImageCropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtImageCropperComponent, isStandalone: true, selector: "rt-image-cropper", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", loadFailed: "loadFailed" }, host: { properties: { "class.rt-image-cropper--round": "round()", "class.rt-image-cropper--disabled": "disabled()", "style.--rt-image-cropper-image-x": "image().x + 'px'", "style.--rt-image-cropper-image-y": "image().y + 'px'", "style.--rt-image-cropper-image-width": "image().width + 'px'", "style.--rt-image-cropper-image-height": "image().height + 'px'", "style.--rt-image-cropper-frame-x": "frameBox().x + 'px'", "style.--rt-image-cropper-frame-y": "frameBox().y + 'px'", "style.--rt-image-cropper-frame-width": "frameBox().width + 'px'", "style.--rt-image-cropper-frame-height": "frameBox().height + 'px'" }, classAttribute: "rt-image-cropper" }, viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-image-cropper\">\n    <div #field rtElem=\"field\" qa-dataid=\"image-cropper-field\">\n        @switch (state()) {\n            @case ('empty') {\n                <p rtElem=\"placeholder\" qa-dataid=\"image-cropper-placeholder\">{{ placeholderText() }}</p>\n            }\n            @case ('loading') {\n                <rt-spinner rtElem=\"spinner\" qa-dataid=\"image-cropper-spinner\" />\n            }\n            @case ('refusal') {\n                <p rtElem=\"refusal\" qa-dataid=\"image-cropper-refusal\">{{ t().uiImageCropperRefusal }}</p>\n            }\n            @case ('ready') {\n                <img rtElem=\"image\" qa-dataid=\"image-cropper-image\" alt=\"\" draggable=\"false\" [src]=\"url()\" />\n                <div\n                    rtElem=\"frame\"\n                    qa-dataid=\"image-cropper-frame\"\n                    role=\"group\"\n                    [attr.aria-label]=\"t().uiImageCropperFrame\"\n                    [attr.aria-disabled]=\"disabled() || null\"\n                    [attr.tabindex]=\"disabled() ? -1 : 0\"\n                    (pointerdown)=\"onPointerDown($event, null)\"\n                    (pointermove)=\"onPointerMove($event)\"\n                    (pointerup)=\"onPointerUp($event)\"\n                    (pointercancel)=\"onPointerUp($event)\"\n                    (keydown)=\"onKeyDown($event, null)\">\n                    @for (handle of handles; track handle) {\n                        <span\n                            rtElem=\"handle\"\n                            role=\"button\"\n                            [attr.qa-dataid]=\"'image-cropper-handle-' + handle\"\n                            [rtMod]=\"{ side: handle }\"\n                            [attr.aria-label]=\"t()[handleLabels[handle]]\"\n                            [attr.aria-disabled]=\"disabled() || null\"\n                            [attr.tabindex]=\"disabled() ? -1 : 0\"\n                            (pointerdown)=\"onPointerDown($event, handle)\"\n                            (pointermove)=\"onPointerMove($event)\"\n                            (pointerup)=\"onPointerUp($event)\"\n                            (pointercancel)=\"onPointerUp($event)\"\n                            (keydown)=\"onKeyDown($event, handle)\"></span>\n                    }\n                </div>\n            }\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-image-cropper{--rt-image-cropper-height: calc(var(--rt-size-20) * 4);--rt-image-cropper-radius: var(--rt-radius-md);--rt-image-cropper-frame-radius: var(--rt-radius-none);--rt-image-cropper-field-bg: var(--rt-color-bg-subtle);--rt-image-cropper-shade: var(--rt-overlay-black-50);--rt-image-cropper-rim-width: var(--rt-border-width-thin);--rt-image-cropper-rim-color: var(--rt-overlay-white-50);--rt-image-cropper-dash-style: none;--rt-image-cropper-dash-color: transparent;--rt-image-cropper-dash-opacity: 1;--rt-image-cropper-handle-size: var(--rt-size-3);--rt-image-cropper-handle-bg: var(--rt-color-action-on-primary);--rt-image-cropper-handle-border: var(--rt-color-border-strong);--rt-image-cropper-focus-shadow: var(--rt-shadow-focus-ring);--rt-image-cropper-text-color: var(--rt-color-text-muted);--rt-image-cropper-disabled-opacity: .5;--rt-image-cropper-image-x: 0;--rt-image-cropper-image-y: 0;--rt-image-cropper-image-width: 0;--rt-image-cropper-image-height: 0;--rt-image-cropper-frame-x: 0;--rt-image-cropper-frame-y: 0;--rt-image-cropper-frame-width: 0;--rt-image-cropper-frame-height: 0;display:block;width:100%}.rt-image-cropper__field{position:relative;overflow:hidden;height:var(--rt-image-cropper-height);border-radius:var(--rt-image-cropper-radius);background:var(--rt-image-cropper-field-bg);-webkit-user-select:none;user-select:none}.rt-image-cropper__spinner{position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.rt-image-cropper__placeholder,.rt-image-cropper__refusal{position:absolute;display:flex;align-items:center;justify-content:center;padding:var(--rt-space-md);margin:0;color:var(--rt-image-cropper-text-color);inset:0;text-align:center}.rt-image-cropper__image{position:absolute;top:var(--rt-image-cropper-image-y);left:var(--rt-image-cropper-image-x);width:var(--rt-image-cropper-image-width);max-width:none;height:var(--rt-image-cropper-image-height);image-orientation:from-image;pointer-events:none}.rt-image-cropper__frame{position:absolute;top:var(--rt-image-cropper-frame-y);left:var(--rt-image-cropper-frame-x);width:var(--rt-image-cropper-frame-width);height:var(--rt-image-cropper-frame-height);box-sizing:border-box;border:var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-rim-color);border-radius:var(--rt-image-cropper-frame-radius);cursor:move;outline:100vmax solid var(--rt-image-cropper-shade);touch-action:none}.rt-image-cropper__frame:after{position:absolute;border:var(--rt-image-cropper-rim-width) var(--rt-image-cropper-dash-style) var(--rt-image-cropper-dash-color);border-radius:inherit;content:\"\";inset:calc(-1 * var(--rt-image-cropper-rim-width));opacity:var(--rt-image-cropper-dash-opacity);pointer-events:none}.rt-image-cropper__frame:focus-visible{box-shadow:var(--rt-image-cropper-focus-shadow)}.rt-image-cropper__handle{position:absolute;width:var(--rt-image-cropper-handle-size);height:var(--rt-image-cropper-handle-size);box-sizing:border-box;border:var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-handle-border);background:var(--rt-image-cropper-handle-bg);touch-action:none}.rt-image-cropper__handle:focus-visible{box-shadow:var(--rt-image-cropper-focus-shadow);outline:none}.rt-image-cropper__handle--side--nw{top:0;left:0;cursor:nwse-resize}.rt-image-cropper__handle--side--n{top:0;left:50%;cursor:ns-resize;translate:-50% 0}.rt-image-cropper__handle--side--ne{top:0;left:100%;cursor:nesw-resize;translate:-100% 0}.rt-image-cropper__handle--side--e{top:50%;left:100%;cursor:ew-resize;translate:-100% -50%}.rt-image-cropper__handle--side--se{top:100%;left:100%;cursor:nwse-resize;translate:-100% -100%}.rt-image-cropper__handle--side--s{top:100%;left:50%;cursor:ns-resize;translate:-50% -100%}.rt-image-cropper__handle--side--sw{top:100%;left:0;cursor:nesw-resize;translate:0 -100%}.rt-image-cropper__handle--side--w{top:50%;left:0;cursor:ew-resize;translate:0 -50%}:is(.rt-preset-material,[data-preset=material]) .rt-image-cropper{--rt-image-cropper-radius: var(--rt-radius-none);--rt-image-cropper-field-bg: transparent;--rt-image-cropper-shade: var(--rt-overlay-white-25);--rt-image-cropper-dash-style: dashed;--rt-image-cropper-dash-color: var(--rt-mat-dark-40);--rt-image-cropper-dash-opacity: .75;--rt-image-cropper-handle-size: var(--rt-size-2);--rt-image-cropper-handle-bg: var(--rt-mat-dark-40);--rt-image-cropper-handle-border: var(--rt-overlay-white-50)}@media(pointer:coarse){:is(.rt-preset-material,[data-preset=material]) .rt-image-cropper{--rt-image-cropper-handle-size: var(--rt-size-6)}}.rt-image-cropper--round{--rt-image-cropper-frame-radius: var(--rt-radius-full)}.rt-image-cropper--disabled .rt-image-cropper__frame,.rt-image-cropper--disabled .rt-image-cropper__handle{cursor:default}.rt-image-cropper--disabled .rt-image-cropper__handle,.rt-image-cropper--disabled .rt-image-cropper__image{opacity:var(--rt-image-cropper-disabled-opacity)}@media(pointer:coarse){.rt-image-cropper{--rt-image-cropper-handle-size: var(--rt-size-6)}}}\n"], dependencies: [{ kind: "directive", type: 
-                // standalone components / directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtImageCropperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                        RtSpinnerComponent,
-                    ], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-image-cropper--round]': 'round()',
-                        '[class.rt-image-cropper--disabled]': 'disabled()',
-                        '[style.--rt-image-cropper-image-x]': "image().x + 'px'",
-                        '[style.--rt-image-cropper-image-y]': "image().y + 'px'",
-                        '[style.--rt-image-cropper-image-width]': "image().width + 'px'",
-                        '[style.--rt-image-cropper-image-height]': "image().height + 'px'",
-                        '[style.--rt-image-cropper-frame-x]': "frameBox().x + 'px'",
-                        '[style.--rt-image-cropper-frame-y]': "frameBox().y + 'px'",
-                        '[style.--rt-image-cropper-frame-width]': "frameBox().width + 'px'",
-                        '[style.--rt-image-cropper-frame-height]': "frameBox().height + 'px'",
-                    }, template: "<ng-container rtBlock=\"rt-image-cropper\">\n    <div #field rtElem=\"field\" qa-dataid=\"image-cropper-field\">\n        @switch (state()) {\n            @case ('empty') {\n                <p rtElem=\"placeholder\" qa-dataid=\"image-cropper-placeholder\">{{ placeholderText() }}</p>\n            }\n            @case ('loading') {\n                <rt-spinner rtElem=\"spinner\" qa-dataid=\"image-cropper-spinner\" />\n            }\n            @case ('refusal') {\n                <p rtElem=\"refusal\" qa-dataid=\"image-cropper-refusal\">{{ t().uiImageCropperRefusal }}</p>\n            }\n            @case ('ready') {\n                <img rtElem=\"image\" qa-dataid=\"image-cropper-image\" alt=\"\" draggable=\"false\" [src]=\"url()\" />\n                <div\n                    rtElem=\"frame\"\n                    qa-dataid=\"image-cropper-frame\"\n                    role=\"group\"\n                    [attr.aria-label]=\"t().uiImageCropperFrame\"\n                    [attr.aria-disabled]=\"disabled() || null\"\n                    [attr.tabindex]=\"disabled() ? -1 : 0\"\n                    (pointerdown)=\"onPointerDown($event, null)\"\n                    (pointermove)=\"onPointerMove($event)\"\n                    (pointerup)=\"onPointerUp($event)\"\n                    (pointercancel)=\"onPointerUp($event)\"\n                    (keydown)=\"onKeyDown($event, null)\">\n                    @for (handle of handles; track handle) {\n                        <span\n                            rtElem=\"handle\"\n                            role=\"button\"\n                            [attr.qa-dataid]=\"'image-cropper-handle-' + handle\"\n                            [rtMod]=\"{ side: handle }\"\n                            [attr.aria-label]=\"t()[handleLabels[handle]]\"\n                            [attr.aria-disabled]=\"disabled() || null\"\n                            [attr.tabindex]=\"disabled() ? -1 : 0\"\n                            (pointerdown)=\"onPointerDown($event, handle)\"\n                            (pointermove)=\"onPointerMove($event)\"\n                            (pointerup)=\"onPointerUp($event)\"\n                            (pointercancel)=\"onPointerUp($event)\"\n                            (keydown)=\"onKeyDown($event, handle)\"></span>\n                    }\n                </div>\n            }\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-image-cropper{--rt-image-cropper-height: calc(var(--rt-size-20) * 4);--rt-image-cropper-radius: var(--rt-radius-md);--rt-image-cropper-frame-radius: var(--rt-radius-none);--rt-image-cropper-field-bg: var(--rt-color-bg-subtle);--rt-image-cropper-shade: var(--rt-overlay-black-50);--rt-image-cropper-rim-width: var(--rt-border-width-thin);--rt-image-cropper-rim-color: var(--rt-overlay-white-50);--rt-image-cropper-dash-style: none;--rt-image-cropper-dash-color: transparent;--rt-image-cropper-dash-opacity: 1;--rt-image-cropper-handle-size: var(--rt-size-3);--rt-image-cropper-handle-bg: var(--rt-color-action-on-primary);--rt-image-cropper-handle-border: var(--rt-color-border-strong);--rt-image-cropper-focus-shadow: var(--rt-shadow-focus-ring);--rt-image-cropper-text-color: var(--rt-color-text-muted);--rt-image-cropper-disabled-opacity: .5;--rt-image-cropper-image-x: 0;--rt-image-cropper-image-y: 0;--rt-image-cropper-image-width: 0;--rt-image-cropper-image-height: 0;--rt-image-cropper-frame-x: 0;--rt-image-cropper-frame-y: 0;--rt-image-cropper-frame-width: 0;--rt-image-cropper-frame-height: 0;display:block;width:100%}.rt-image-cropper__field{position:relative;overflow:hidden;height:var(--rt-image-cropper-height);border-radius:var(--rt-image-cropper-radius);background:var(--rt-image-cropper-field-bg);-webkit-user-select:none;user-select:none}.rt-image-cropper__spinner{position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.rt-image-cropper__placeholder,.rt-image-cropper__refusal{position:absolute;display:flex;align-items:center;justify-content:center;padding:var(--rt-space-md);margin:0;color:var(--rt-image-cropper-text-color);inset:0;text-align:center}.rt-image-cropper__image{position:absolute;top:var(--rt-image-cropper-image-y);left:var(--rt-image-cropper-image-x);width:var(--rt-image-cropper-image-width);max-width:none;height:var(--rt-image-cropper-image-height);image-orientation:from-image;pointer-events:none}.rt-image-cropper__frame{position:absolute;top:var(--rt-image-cropper-frame-y);left:var(--rt-image-cropper-frame-x);width:var(--rt-image-cropper-frame-width);height:var(--rt-image-cropper-frame-height);box-sizing:border-box;border:var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-rim-color);border-radius:var(--rt-image-cropper-frame-radius);cursor:move;outline:100vmax solid var(--rt-image-cropper-shade);touch-action:none}.rt-image-cropper__frame:after{position:absolute;border:var(--rt-image-cropper-rim-width) var(--rt-image-cropper-dash-style) var(--rt-image-cropper-dash-color);border-radius:inherit;content:\"\";inset:calc(-1 * var(--rt-image-cropper-rim-width));opacity:var(--rt-image-cropper-dash-opacity);pointer-events:none}.rt-image-cropper__frame:focus-visible{box-shadow:var(--rt-image-cropper-focus-shadow)}.rt-image-cropper__handle{position:absolute;width:var(--rt-image-cropper-handle-size);height:var(--rt-image-cropper-handle-size);box-sizing:border-box;border:var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-handle-border);background:var(--rt-image-cropper-handle-bg);touch-action:none}.rt-image-cropper__handle:focus-visible{box-shadow:var(--rt-image-cropper-focus-shadow);outline:none}.rt-image-cropper__handle--side--nw{top:0;left:0;cursor:nwse-resize}.rt-image-cropper__handle--side--n{top:0;left:50%;cursor:ns-resize;translate:-50% 0}.rt-image-cropper__handle--side--ne{top:0;left:100%;cursor:nesw-resize;translate:-100% 0}.rt-image-cropper__handle--side--e{top:50%;left:100%;cursor:ew-resize;translate:-100% -50%}.rt-image-cropper__handle--side--se{top:100%;left:100%;cursor:nwse-resize;translate:-100% -100%}.rt-image-cropper__handle--side--s{top:100%;left:50%;cursor:ns-resize;translate:-50% -100%}.rt-image-cropper__handle--side--sw{top:100%;left:0;cursor:nesw-resize;translate:0 -100%}.rt-image-cropper__handle--side--w{top:50%;left:0;cursor:ew-resize;translate:0 -50%}:is(.rt-preset-material,[data-preset=material]) .rt-image-cropper{--rt-image-cropper-radius: var(--rt-radius-none);--rt-image-cropper-field-bg: transparent;--rt-image-cropper-shade: var(--rt-overlay-white-25);--rt-image-cropper-dash-style: dashed;--rt-image-cropper-dash-color: var(--rt-mat-dark-40);--rt-image-cropper-dash-opacity: .75;--rt-image-cropper-handle-size: var(--rt-size-2);--rt-image-cropper-handle-bg: var(--rt-mat-dark-40);--rt-image-cropper-handle-border: var(--rt-overlay-white-50)}@media(pointer:coarse){:is(.rt-preset-material,[data-preset=material]) .rt-image-cropper{--rt-image-cropper-handle-size: var(--rt-size-6)}}.rt-image-cropper--round{--rt-image-cropper-frame-radius: var(--rt-radius-full)}.rt-image-cropper--disabled .rt-image-cropper__frame,.rt-image-cropper--disabled .rt-image-cropper__handle{cursor:default}.rt-image-cropper--disabled .rt-image-cropper__handle,.rt-image-cropper--disabled .rt-image-cropper__image{opacity:var(--rt-image-cropper-disabled-opacity)}@media(pointer:coarse){.rt-image-cropper{--rt-image-cropper-handle-size: var(--rt-size-6)}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], round: [{ type: i0.Input, args: [{ isSignal: true, alias: "round", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], quality: [{ type: i0.Input, args: [{ isSignal: true, alias: "quality", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtImageCropperComponent = class RtImageCropperComponent {
+	#destroyRef;
+	#window;
+	#document;
+	#platform;
+	#fieldSize;
+	#source;
+	#frame;
+	#ratio;
+	#fit;
+	#image;
+	#pending;
+	#sourceType;
+	#sourceName;
+	#drag;
+	#resultTicket;
+	constructor() {
+		this.#destroyRef = inject(DestroyRef);
+		this.#window = inject(WINDOW);
+		this.#document = inject(DOCUMENT);
+		this.#platform = inject(PlatformService);
+		this.#fieldSize = signal({
+			width: 0,
+			height: 0
+		}, ...ngDevMode ? [{ debugName: "#fieldSize" }] : /* istanbul ignore next */ []);
+		this.#source = signal({
+			width: 0,
+			height: 0
+		}, ...ngDevMode ? [{ debugName: "#source" }] : /* istanbul ignore next */ []);
+		this.#frame = signal({
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		}, ...ngDevMode ? [{ debugName: "#frame" }] : /* istanbul ignore next */ []);
+		this.#ratio = computed(() => frameRatio(this.ratio(), this.round()), ...ngDevMode ? [{ debugName: "#ratio" }] : /* istanbul ignore next */ []);
+		this.#fit = computed(() => fitSource(this.#source(), this.#fieldSize()), ...ngDevMode ? [{ debugName: "#fit" }] : /* istanbul ignore next */ []);
+		this.#image = null;
+		this.#pending = null;
+		this.#sourceType = "";
+		this.#sourceName = "";
+		this.#drag = null;
+		this.#resultTicket = 0;
+		this.field = viewChild.required("field", ...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+		this.t = inject(RT_KIT_LABELS);
+		this.handles = RT_IMAGE_CROPPER_HANDLES;
+		this.handleLabels = HANDLE_LABELS;
+		this.state = signal("empty", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+		this.placeholderText = computed(() => this.placeholder() || this.t().uiImageCropperPlaceholder, ...ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []);
+		this.url = signal(null, ...ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []);
+		this.image = computed(() => {
+			const fit = this.#fit();
+			return {
+				x: fit.offsetX,
+				y: fit.offsetY,
+				width: fit.width,
+				height: fit.height
+			};
+		}, ...ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []);
+		this.frameBox = computed(() => frameInField(this.#frame(), this.#fit()), ...ngDevMode ? [{ debugName: "frameBox" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.file = input(null, ...ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []);
+		this.ratio = input(null, {
+			...ngDevMode ? { debugName: "ratio" } : /* istanbul ignore next */ {},
+			transform: optionalNumber
+		});
+		this.round = input(false, {
+			...ngDevMode ? { debugName: "round" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.minSize = input(DEFAULT_MIN_SIZE, {
+			...ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {},
+			transform: (value) => numberAttribute(value, DEFAULT_MIN_SIZE)
+		});
+		this.format = input(null, ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+		this.quality = input(92, {
+			...ngDevMode ? { debugName: "quality" } : /* istanbul ignore next */ {},
+			transform: (value) => numberAttribute(value, 92)
+		});
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.cropped = output();
+		this.loadFailed = output();
+		effect(() => {
+			const file = this.file();
+			untracked(() => this.#load(file));
+		});
+		effect(() => {
+			const ratio = this.#ratio();
+			untracked(() => {
+				if (this.state() === "ready") {
+					this.#frame.set(initialFrame(this.#source(), ratio));
+					this.#emitResult();
+				}
+			});
+		});
+		afterNextRender(() => this.#observe(this.field().nativeElement));
+		this.#destroyRef.onDestroy(() => this.#revoke());
+	}
+	onPointerDown(event, handle) {
+		if (this.disabled() || this.#drag !== null || event.pointerType === "mouse" && event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const target = event.currentTarget;
+		if (target instanceof this.#window.HTMLElement && typeof target.setPointerCapture === "function") target.setPointerCapture(event.pointerId);
+		this.#drag = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			startFrame: this.#frame(),
+			handle
+		};
+	}
+	onPointerMove(event) {
+		const drag = this.#drag;
+		if (drag === null || drag.pointerId !== event.pointerId) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const delta = fieldDelta(event.clientX - drag.startX, event.clientY - drag.startY, this.#fit().scale);
+		this.#frame.set(this.#change(drag.startFrame, drag.handle, delta));
+	}
+	onPointerUp(event) {
+		const drag = this.#drag;
+		if (drag === null || drag.pointerId !== event.pointerId) return;
+		event.stopPropagation();
+		this.#drag = null;
+		const target = event.currentTarget;
+		if (target instanceof this.#window.HTMLElement && typeof target.releasePointerCapture === "function") target.releasePointerCapture(event.pointerId);
+		if (!sameRect(drag.startFrame, this.#frame())) this.#emitResult();
+	}
+	onKeyDown(event, handle) {
+		if (this.disabled()) return;
+		const delta = keyDelta(event.key, event.shiftKey, this.#fit().scale);
+		if (delta === null) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const before = this.#frame();
+		const next = this.#change(before, handle, delta);
+		if (!sameRect(before, next)) {
+			this.#frame.set(next);
+			this.#emitResult();
+		}
+	}
+	#change(frame, handle, delta) {
+		return handle === null ? moveFrame(frame, delta, this.#source()) : resizeFrame(frame, handle, delta, this.#source(), this.#ratio(), this.minSize());
+	}
+	#load(file) {
+		this.#revoke();
+		this.#image = null;
+		this.#pending = null;
+		this.#drag = null;
+		this.#resultTicket++;
+		if (file === null || !this.#platform.isPlatformBrowser) {
+			this.state.set("empty");
+			return;
+		}
+		this.#sourceType = file.type;
+		this.#sourceName = file instanceof this.#window.File ? file.name : "";
+		const url = this.#window.URL.createObjectURL(file);
+		const image = new this.#window.Image();
+		this.#pending = image;
+		this.url.set(url);
+		this.state.set("loading");
+		image.onload = () => {
+			if (this.#pending === image) {
+				this.#pending = null;
+				this.#ready(image);
+			}
+		};
+		image.onerror = () => {
+			if (this.#pending === image) {
+				this.#pending = null;
+				this.#refuse();
+			}
+		};
+		image.src = url;
+	}
+	#ready(image) {
+		if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+			this.#refuse();
+			return;
+		}
+		this.#image = image;
+		this.#source.set({
+			width: image.naturalWidth,
+			height: image.naturalHeight
+		});
+		this.#frame.set(initialFrame(this.#source(), this.#ratio()));
+		this.state.set("ready");
+		this.#emitResult();
+	}
+	#refuse() {
+		this.state.set("refusal");
+		this.loadFailed.emit();
+	}
+	#revoke() {
+		const url = this.url();
+		if (url !== null) {
+			this.#window.URL.revokeObjectURL(url);
+			this.url.set(null);
+		}
+	}
+	#observe(field) {
+		const measure = () => this.#fieldSize.set({
+			width: field.clientWidth,
+			height: field.clientHeight
+		});
+		measure();
+		if (typeof this.#window.ResizeObserver !== "function") return;
+		const observer = new this.#window.ResizeObserver(measure);
+		observer.observe(field);
+		this.#destroyRef.onDestroy(() => observer.disconnect());
+	}
+	#emitResult() {
+		const image = this.#image;
+		if (image === null) return;
+		this.#resultTicket++;
+		const ticket = this.#resultTicket;
+		const area = cropArea(this.#frame(), this.#source());
+		const canvas = this.#document.createElement("canvas");
+		canvas.width = area.width;
+		canvas.height = area.height;
+		const context = canvas.getContext("2d");
+		if (context === null) return;
+		context.drawImage(image, area.x, area.y, area.width, area.height, 0, 0, area.width, area.height);
+		const type = resultType(this.format(), this.#sourceType);
+		canvas.toBlob((blob) => {
+			if (blob === null || ticket !== this.#resultTicket) return;
+			const file = new this.#window.File([blob], resultFileName(this.#sourceName, type), { type });
+			this.cropped.emit({
+				file,
+				frame: area
+			});
+		}, type, resultQuality(this.quality()));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtImageCropperComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtImageCropperComponent,
+			isStandalone: true,
+			selector: "rt-image-cropper",
+			inputs: {
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				file: {
+					classPropertyName: "file",
+					publicName: "file",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ratio: {
+					classPropertyName: "ratio",
+					publicName: "ratio",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				round: {
+					classPropertyName: "round",
+					publicName: "round",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				minSize: {
+					classPropertyName: "minSize",
+					publicName: "minSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				format: {
+					classPropertyName: "format",
+					publicName: "format",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				quality: {
+					classPropertyName: "quality",
+					publicName: "quality",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				cropped: "cropped",
+				loadFailed: "loadFailed"
+			},
+			host: {
+				properties: {
+					"class.rt-image-cropper--round": "round()",
+					"class.rt-image-cropper--disabled": "disabled()",
+					"style.--rt-image-cropper-image-x": "image().x + 'px'",
+					"style.--rt-image-cropper-image-y": "image().y + 'px'",
+					"style.--rt-image-cropper-image-width": "image().width + 'px'",
+					"style.--rt-image-cropper-image-height": "image().height + 'px'",
+					"style.--rt-image-cropper-frame-x": "frameBox().x + 'px'",
+					"style.--rt-image-cropper-frame-y": "frameBox().y + 'px'",
+					"style.--rt-image-cropper-frame-width": "frameBox().width + 'px'",
+					"style.--rt-image-cropper-frame-height": "frameBox().height + 'px'"
+				},
+				classAttribute: "rt-image-cropper"
+			},
+			viewQueries: [{
+				propertyName: "field",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-image-cropper\">\n    <div #field rtElem=\"field\" qa-dataid=\"image-cropper-field\">\n        @switch (state()) {\n            @case ('empty') {\n                <p rtElem=\"placeholder\" qa-dataid=\"image-cropper-placeholder\">{{ placeholderText() }}</p>\n            }\n            @case ('loading') {\n                <rt-spinner rtElem=\"spinner\" qa-dataid=\"image-cropper-spinner\" />\n            }\n            @case ('refusal') {\n                <p rtElem=\"refusal\" qa-dataid=\"image-cropper-refusal\">{{ t().uiImageCropperRefusal }}</p>\n            }\n            @case ('ready') {\n                <img rtElem=\"image\" qa-dataid=\"image-cropper-image\" alt=\"\" draggable=\"false\" [src]=\"url()\" />\n                <div\n                    rtElem=\"frame\"\n                    qa-dataid=\"image-cropper-frame\"\n                    role=\"group\"\n                    [attr.aria-label]=\"t().uiImageCropperFrame\"\n                    [attr.aria-disabled]=\"disabled() || null\"\n                    [attr.tabindex]=\"disabled() ? -1 : 0\"\n                    (pointerdown)=\"onPointerDown($event, null)\"\n                    (pointermove)=\"onPointerMove($event)\"\n                    (pointerup)=\"onPointerUp($event)\"\n                    (pointercancel)=\"onPointerUp($event)\"\n                    (keydown)=\"onKeyDown($event, null)\">\n                    @for (handle of handles; track handle) {\n                        <span\n                            rtElem=\"handle\"\n                            role=\"button\"\n                            [attr.qa-dataid]=\"'image-cropper-handle-' + handle\"\n                            [rtMod]=\"{ side: handle }\"\n                            [attr.aria-label]=\"t()[handleLabels[handle]]\"\n                            [attr.aria-disabled]=\"disabled() || null\"\n                            [attr.tabindex]=\"disabled() ? -1 : 0\"\n                            (pointerdown)=\"onPointerDown($event, handle)\"\n                            (pointermove)=\"onPointerMove($event)\"\n                            (pointerup)=\"onPointerUp($event)\"\n                            (pointercancel)=\"onPointerUp($event)\"\n                            (keydown)=\"onKeyDown($event, handle)\"></span>\n                    }\n                </div>\n            }\n        }\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-image-cropper{--rt-image-cropper-height: calc(var(--rt-size-20) * 4);--rt-image-cropper-radius: var(--rt-radius-md);--rt-image-cropper-frame-radius: var(--rt-radius-none);--rt-image-cropper-field-bg: var(--rt-color-bg-subtle);--rt-image-cropper-shade: var(--rt-overlay-black-50);--rt-image-cropper-rim-width: var(--rt-border-width-thin);--rt-image-cropper-rim-color: var(--rt-overlay-white-50);--rt-image-cropper-dash-style: none;--rt-image-cropper-dash-color: transparent;--rt-image-cropper-dash-opacity: 1;--rt-image-cropper-handle-size: var(--rt-size-3);--rt-image-cropper-handle-bg: var(--rt-color-action-on-primary);--rt-image-cropper-handle-border: var(--rt-color-border-strong);--rt-image-cropper-focus-shadow: var(--rt-shadow-focus-ring);--rt-image-cropper-text-color: var(--rt-color-text-muted);--rt-image-cropper-disabled-opacity: .5;--rt-image-cropper-image-x: 0;--rt-image-cropper-image-y: 0;--rt-image-cropper-image-width: 0;--rt-image-cropper-image-height: 0;--rt-image-cropper-frame-x: 0;--rt-image-cropper-frame-y: 0;--rt-image-cropper-frame-width: 0;--rt-image-cropper-frame-height: 0;display:block;width:100%}.rt-image-cropper__field{position:relative;overflow:hidden;height:var(--rt-image-cropper-height);border-radius:var(--rt-image-cropper-radius);background:var(--rt-image-cropper-field-bg);-webkit-user-select:none;user-select:none}.rt-image-cropper__spinner{position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.rt-image-cropper__placeholder,.rt-image-cropper__refusal{position:absolute;display:flex;align-items:center;justify-content:center;padding:var(--rt-space-md);margin:0;color:var(--rt-image-cropper-text-color);inset:0;text-align:center}.rt-image-cropper__image{position:absolute;top:var(--rt-image-cropper-image-y);left:var(--rt-image-cropper-image-x);width:var(--rt-image-cropper-image-width);max-width:none;height:var(--rt-image-cropper-image-height);image-orientation:from-image;pointer-events:none}.rt-image-cropper__frame{position:absolute;top:var(--rt-image-cropper-frame-y);left:var(--rt-image-cropper-frame-x);width:var(--rt-image-cropper-frame-width);height:var(--rt-image-cropper-frame-height);box-sizing:border-box;border:var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-rim-color);border-radius:var(--rt-image-cropper-frame-radius);cursor:move;outline:100vmax solid var(--rt-image-cropper-shade);touch-action:none}.rt-image-cropper__frame:after{position:absolute;border:var(--rt-image-cropper-rim-width) var(--rt-image-cropper-dash-style) var(--rt-image-cropper-dash-color);border-radius:inherit;content:\"\";inset:calc(-1 * var(--rt-image-cropper-rim-width));opacity:var(--rt-image-cropper-dash-opacity);pointer-events:none}.rt-image-cropper__frame:focus-visible{box-shadow:var(--rt-image-cropper-focus-shadow)}.rt-image-cropper__handle{position:absolute;width:var(--rt-image-cropper-handle-size);height:var(--rt-image-cropper-handle-size);box-sizing:border-box;border:var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-handle-border);background:var(--rt-image-cropper-handle-bg);touch-action:none}.rt-image-cropper__handle:focus-visible{box-shadow:var(--rt-image-cropper-focus-shadow);outline:none}.rt-image-cropper__handle--side--nw{top:0;left:0;cursor:nwse-resize}.rt-image-cropper__handle--side--n{top:0;left:50%;cursor:ns-resize;translate:-50% 0}.rt-image-cropper__handle--side--ne{top:0;left:100%;cursor:nesw-resize;translate:-100% 0}.rt-image-cropper__handle--side--e{top:50%;left:100%;cursor:ew-resize;translate:-100% -50%}.rt-image-cropper__handle--side--se{top:100%;left:100%;cursor:nwse-resize;translate:-100% -100%}.rt-image-cropper__handle--side--s{top:100%;left:50%;cursor:ns-resize;translate:-50% -100%}.rt-image-cropper__handle--side--sw{top:100%;left:0;cursor:nesw-resize;translate:0 -100%}.rt-image-cropper__handle--side--w{top:50%;left:0;cursor:ew-resize;translate:0 -50%}:is(.rt-preset-material,[data-preset=material]) .rt-image-cropper{--rt-image-cropper-radius: var(--rt-radius-none);--rt-image-cropper-field-bg: transparent;--rt-image-cropper-shade: var(--rt-overlay-white-25);--rt-image-cropper-dash-style: dashed;--rt-image-cropper-dash-color: var(--rt-mat-dark-40);--rt-image-cropper-dash-opacity: .75;--rt-image-cropper-handle-size: var(--rt-size-2);--rt-image-cropper-handle-bg: var(--rt-mat-dark-40);--rt-image-cropper-handle-border: var(--rt-overlay-white-50)}@media(pointer:coarse){:is(.rt-preset-material,[data-preset=material]) .rt-image-cropper{--rt-image-cropper-handle-size: var(--rt-size-6)}}.rt-image-cropper--round{--rt-image-cropper-frame-radius: var(--rt-radius-full)}.rt-image-cropper--disabled .rt-image-cropper__frame,.rt-image-cropper--disabled .rt-image-cropper__handle{cursor:default}.rt-image-cropper--disabled .rt-image-cropper__handle,.rt-image-cropper--disabled .rt-image-cropper__image{opacity:var(--rt-image-cropper-disabled-opacity)}@media(pointer:coarse){.rt-image-cropper{--rt-image-cropper-handle-size: var(--rt-size-6)}}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				},
+				{
+					kind: "component",
+					type: RtSpinnerComponent,
+					selector: "rt-spinner",
+					inputs: [
+						"diameter",
+						"color",
+						"appearance",
+						"overlay",
+						"backdrop",
+						"plate"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtImageCropperComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-image-cropper",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				BlockDirective,
+				ElemDirective,
+				ModDirective,
+				RtSpinnerComponent
+			],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-image-cropper--round]": "round()",
+				"[class.rt-image-cropper--disabled]": "disabled()",
+				"[style.--rt-image-cropper-image-x]": "image().x + 'px'",
+				"[style.--rt-image-cropper-image-y]": "image().y + 'px'",
+				"[style.--rt-image-cropper-image-width]": "image().width + 'px'",
+				"[style.--rt-image-cropper-image-height]": "image().height + 'px'",
+				"[style.--rt-image-cropper-frame-x]": "frameBox().x + 'px'",
+				"[style.--rt-image-cropper-frame-y]": "frameBox().y + 'px'",
+				"[style.--rt-image-cropper-frame-width]": "frameBox().width + 'px'",
+				"[style.--rt-image-cropper-frame-height]": "frameBox().height + 'px'"
+			},
+			template: "<ng-container rtBlock=\"rt-image-cropper\">\n    <div #field rtElem=\"field\" qa-dataid=\"image-cropper-field\">\n        @switch (state()) {\n            @case ('empty') {\n                <p rtElem=\"placeholder\" qa-dataid=\"image-cropper-placeholder\">{{ placeholderText() }}</p>\n            }\n            @case ('loading') {\n                <rt-spinner rtElem=\"spinner\" qa-dataid=\"image-cropper-spinner\" />\n            }\n            @case ('refusal') {\n                <p rtElem=\"refusal\" qa-dataid=\"image-cropper-refusal\">{{ t().uiImageCropperRefusal }}</p>\n            }\n            @case ('ready') {\n                <img rtElem=\"image\" qa-dataid=\"image-cropper-image\" alt=\"\" draggable=\"false\" [src]=\"url()\" />\n                <div\n                    rtElem=\"frame\"\n                    qa-dataid=\"image-cropper-frame\"\n                    role=\"group\"\n                    [attr.aria-label]=\"t().uiImageCropperFrame\"\n                    [attr.aria-disabled]=\"disabled() || null\"\n                    [attr.tabindex]=\"disabled() ? -1 : 0\"\n                    (pointerdown)=\"onPointerDown($event, null)\"\n                    (pointermove)=\"onPointerMove($event)\"\n                    (pointerup)=\"onPointerUp($event)\"\n                    (pointercancel)=\"onPointerUp($event)\"\n                    (keydown)=\"onKeyDown($event, null)\">\n                    @for (handle of handles; track handle) {\n                        <span\n                            rtElem=\"handle\"\n                            role=\"button\"\n                            [attr.qa-dataid]=\"'image-cropper-handle-' + handle\"\n                            [rtMod]=\"{ side: handle }\"\n                            [attr.aria-label]=\"t()[handleLabels[handle]]\"\n                            [attr.aria-disabled]=\"disabled() || null\"\n                            [attr.tabindex]=\"disabled() ? -1 : 0\"\n                            (pointerdown)=\"onPointerDown($event, handle)\"\n                            (pointermove)=\"onPointerMove($event)\"\n                            (pointerup)=\"onPointerUp($event)\"\n                            (pointercancel)=\"onPointerUp($event)\"\n                            (keydown)=\"onKeyDown($event, handle)\"></span>\n                    }\n                </div>\n            }\n        }\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-image-cropper{--rt-image-cropper-height: calc(var(--rt-size-20) * 4);--rt-image-cropper-radius: var(--rt-radius-md);--rt-image-cropper-frame-radius: var(--rt-radius-none);--rt-image-cropper-field-bg: var(--rt-color-bg-subtle);--rt-image-cropper-shade: var(--rt-overlay-black-50);--rt-image-cropper-rim-width: var(--rt-border-width-thin);--rt-image-cropper-rim-color: var(--rt-overlay-white-50);--rt-image-cropper-dash-style: none;--rt-image-cropper-dash-color: transparent;--rt-image-cropper-dash-opacity: 1;--rt-image-cropper-handle-size: var(--rt-size-3);--rt-image-cropper-handle-bg: var(--rt-color-action-on-primary);--rt-image-cropper-handle-border: var(--rt-color-border-strong);--rt-image-cropper-focus-shadow: var(--rt-shadow-focus-ring);--rt-image-cropper-text-color: var(--rt-color-text-muted);--rt-image-cropper-disabled-opacity: .5;--rt-image-cropper-image-x: 0;--rt-image-cropper-image-y: 0;--rt-image-cropper-image-width: 0;--rt-image-cropper-image-height: 0;--rt-image-cropper-frame-x: 0;--rt-image-cropper-frame-y: 0;--rt-image-cropper-frame-width: 0;--rt-image-cropper-frame-height: 0;display:block;width:100%}.rt-image-cropper__field{position:relative;overflow:hidden;height:var(--rt-image-cropper-height);border-radius:var(--rt-image-cropper-radius);background:var(--rt-image-cropper-field-bg);-webkit-user-select:none;user-select:none}.rt-image-cropper__spinner{position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.rt-image-cropper__placeholder,.rt-image-cropper__refusal{position:absolute;display:flex;align-items:center;justify-content:center;padding:var(--rt-space-md);margin:0;color:var(--rt-image-cropper-text-color);inset:0;text-align:center}.rt-image-cropper__image{position:absolute;top:var(--rt-image-cropper-image-y);left:var(--rt-image-cropper-image-x);width:var(--rt-image-cropper-image-width);max-width:none;height:var(--rt-image-cropper-image-height);image-orientation:from-image;pointer-events:none}.rt-image-cropper__frame{position:absolute;top:var(--rt-image-cropper-frame-y);left:var(--rt-image-cropper-frame-x);width:var(--rt-image-cropper-frame-width);height:var(--rt-image-cropper-frame-height);box-sizing:border-box;border:var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-rim-color);border-radius:var(--rt-image-cropper-frame-radius);cursor:move;outline:100vmax solid var(--rt-image-cropper-shade);touch-action:none}.rt-image-cropper__frame:after{position:absolute;border:var(--rt-image-cropper-rim-width) var(--rt-image-cropper-dash-style) var(--rt-image-cropper-dash-color);border-radius:inherit;content:\"\";inset:calc(-1 * var(--rt-image-cropper-rim-width));opacity:var(--rt-image-cropper-dash-opacity);pointer-events:none}.rt-image-cropper__frame:focus-visible{box-shadow:var(--rt-image-cropper-focus-shadow)}.rt-image-cropper__handle{position:absolute;width:var(--rt-image-cropper-handle-size);height:var(--rt-image-cropper-handle-size);box-sizing:border-box;border:var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-handle-border);background:var(--rt-image-cropper-handle-bg);touch-action:none}.rt-image-cropper__handle:focus-visible{box-shadow:var(--rt-image-cropper-focus-shadow);outline:none}.rt-image-cropper__handle--side--nw{top:0;left:0;cursor:nwse-resize}.rt-image-cropper__handle--side--n{top:0;left:50%;cursor:ns-resize;translate:-50% 0}.rt-image-cropper__handle--side--ne{top:0;left:100%;cursor:nesw-resize;translate:-100% 0}.rt-image-cropper__handle--side--e{top:50%;left:100%;cursor:ew-resize;translate:-100% -50%}.rt-image-cropper__handle--side--se{top:100%;left:100%;cursor:nwse-resize;translate:-100% -100%}.rt-image-cropper__handle--side--s{top:100%;left:50%;cursor:ns-resize;translate:-50% -100%}.rt-image-cropper__handle--side--sw{top:100%;left:0;cursor:nesw-resize;translate:0 -100%}.rt-image-cropper__handle--side--w{top:50%;left:0;cursor:ew-resize;translate:0 -50%}:is(.rt-preset-material,[data-preset=material]) .rt-image-cropper{--rt-image-cropper-radius: var(--rt-radius-none);--rt-image-cropper-field-bg: transparent;--rt-image-cropper-shade: var(--rt-overlay-white-25);--rt-image-cropper-dash-style: dashed;--rt-image-cropper-dash-color: var(--rt-mat-dark-40);--rt-image-cropper-dash-opacity: .75;--rt-image-cropper-handle-size: var(--rt-size-2);--rt-image-cropper-handle-bg: var(--rt-mat-dark-40);--rt-image-cropper-handle-border: var(--rt-overlay-white-50)}@media(pointer:coarse){:is(.rt-preset-material,[data-preset=material]) .rt-image-cropper{--rt-image-cropper-handle-size: var(--rt-size-6)}}.rt-image-cropper--round{--rt-image-cropper-frame-radius: var(--rt-radius-full)}.rt-image-cropper--disabled .rt-image-cropper__frame,.rt-image-cropper--disabled .rt-image-cropper__handle{cursor:default}.rt-image-cropper--disabled .rt-image-cropper__handle,.rt-image-cropper--disabled .rt-image-cropper__image{opacity:var(--rt-image-cropper-disabled-opacity)}@media(pointer:coarse){.rt-image-cropper{--rt-image-cropper-handle-size: var(--rt-size-6)}}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		field: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		file: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "file",
+				required: false
+			}]
+		}],
+		ratio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ratio",
+				required: false
+			}]
+		}],
+		round: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "round",
+				required: false
+			}]
+		}],
+		minSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minSize",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		quality: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "quality",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		cropped: [{
+			type: i0.Output,
+			args: ["cropped"]
+		}],
+		loadFailed: [{
+			type: i0.Output,
+			args: ["loadFailed"]
+		}]
+	}
+});
 export { RT_IMAGE_CROPPER_HANDLES, RT_IMAGE_CROPPER_KEY_STEP, RT_IMAGE_CROPPER_KEY_STEP_LARGE, RT_IMAGE_CROPPER_QUALITY, RtImageCropperComponent, cropArea, fieldDelta, fitSource, frameInField, frameRatio, handleDirection, initialFrame, keyDelta, moveFrame, resizeFrame, resultFileName, resultQuality, resultType };
-//# sourceMappingURL=rt-tools-ui-kit-v2-image-cropper.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-image-cropper.mjs.map