@rt-tools/ui-kit-v2 0.17.0 → 0.18.0

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

@@ -0,0 +1,540 @@
+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 */
+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'];
+function clamp(value, min, max) {
+    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 };
+}
+/**
+ * Пропорция, которую держит рамка. Круглый вид держит один к одному при любой
+ * заданной; заданная не числом или не больше нуля значит свободную рамку.
+ */
+function frameRatio(ratio, round) {
+    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 };
+}
+/** Сдвиг рамки целиком: размер тот же, у края исходника рамка останавливается */
+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,
+    };
+}
+/** Знак оси по ручке: к концу оси, к началу, или ось не тянется */
+function axisSign(handle, forward, backward) {
+    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') };
+}
+/**
+ * Наибольший размер по оси: от неподвижной стороны до края исходника, а для оси,
+ * которую ручка не тянет, — удвоенное расстояние от центра до ближнего края.
+ */
+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);
+}
+/** Где рамка встаёт на оси: от неподвижной стороны, или вокруг центра для оси, которую ручка не тянет */
+function axisStart(start, size, next, direction) {
+    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 };
+}
+/**
+ * Ширина, которую просит сдвиг при заданной пропорции. Угол берёт ту ось, по
+ * которой сдвиг больше; сторона — свою ось.
+ */
+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;
+}
+/**
+ * Растяжение рамки за ручку. Сторона или угол напротив ручки стоит на месте;
+ * рамка не выходит за исходник и не становится меньше наименьшего размера; рамка
+ * с пропорцией держит её, а боковая ручка тянет её вокруг центра второй оси.
+ */
+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,
+    };
+}
+/**
+ * Сдвиг от стрелки клавиатуры в пикселях исходника. Одно нажатие — пиксель поля,
+ * с 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;
+    }
+}
+/** Сдвиг указателя в пикселях поля переводится в пиксели исходника */
+function fieldDelta(dx, dy, scale) {
+    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,
+    };
+}
+/** Рамка в целых пикселях исходника — то, что вырезает холст; не меньше пикселя */
+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)),
+    };
+}
+/**
+ * Тип результата. Без выбранного формата берётся формат исходника, и png, когда
+ * он не из трёх.
+ */
+function resultType(format, sourceType) {
+    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;
+}
+/** Имя файла результата: основа имени исходника и расширение по типу результата */
+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 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',
+};
+function sameRect(a, b) {
+    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);
+}
+/**
+ * Обрезка изображения: исходник вписан в поле целиком, поверх — рамка с восемью
+ * ручками. Рамка живёт в пикселях исходника и двигается указателем, пальцем и
+ * стрелками; после прочтения исходника и после каждого законченного изменения
+ * компонент отдаёт файл, вырезанный рамкой, в выбранном формате и качестве.
+ *
+ * Поворот снимка по 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.
+ */
+
+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