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

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

@@ -1,227 +1,579 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, viewChild, signal, computed, linkedSignal, input, booleanAttribute, numberAttribute, output, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { WINDOW, BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
-import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
-import { RtEmptyStateComponent } from '@rt-tools/ui-kit-v2/empty-state';
-import { RtFileDropComponent } from '@rt-tools/ui-kit-v2/file-drop';
-import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
-import { RT_IMAGE_CROPPER_QUALITY, RtImageCropperComponent } from '@rt-tools/ui-kit-v2/image-cropper';
-import { RtSpinnerComponent } from '@rt-tools/ui-kit-v2/spinner';
-import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
-
-/**
- * Какое состояние занимает место. Загрузка приложения важнее всего, выбранный исходник важнее
- * картинки, картинка важнее зоны загрузки.
- */
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, booleanAttribute, computed, inject, input, linkedSignal, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective, WINDOW } from "@rt-tools/core";
+import { RT_KIT_LABELS } from "@rt-tools/ui-kit-v2/core";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
+import { RtEmptyStateComponent } from "@rt-tools/ui-kit-v2/empty-state";
+import { RtFileDropComponent } from "@rt-tools/ui-kit-v2/file-drop";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import { RT_IMAGE_CROPPER_QUALITY, RtImageCropperComponent } from "@rt-tools/ui-kit-v2/image-cropper";
+import { RtSpinnerComponent } from "@rt-tools/ui-kit-v2/spinner";
+import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
 function uploadState(loading, hasSource, image) {
-    if (loading) {
-        return 'loading';
-    }
-    if (hasSource) {
-        return 'cropping';
-    }
-    return image ? 'image' : 'empty';
+	if (loading) return "loading";
+	if (hasSource) return "cropping";
+	return image ? "image" : "empty";
 }
-/** Берётся только файл изображения: брошенный файл другого типа загрузчик пропускает */
 function isImageFile(file) {
-    return !!file && file.type.startsWith('image/');
-}
-
-const BEM_BLOCK = 'rt-image-upload';
-/**
- * Загрузчик одного изображения: одно место, в котором по очереди стоят зона загрузки, обрезка и
- * сама картинка. Файл выбирают кнопкой зоны или бросают на неё; выбранный открывает обрезку, а
- * «Применить» ставит результат на место картинки и отдаёт файл приложению. Нажатие на картинку
- * выбирает другой файл.
- *
- * Картинка — адрес: приложение даёт свой, а адрес применённого файла загрузчик делает сам и
- * отпускает его, когда картинку сменили или компонент ушёл. Файл приложение получает в
- * `imageChanged`.
- */
-class RtImageUploadComponent {
-    #window;
-    #document;
-    /** Адрес, сделанный загрузчиком под применённый файл: его и только его он отпускает */
-    #ownUrl;
-    constructor() {
-        this.#window = inject(WINDOW);
-        this.#document = inject(DOCUMENT);
-        /** Адрес, сделанный загрузчиком под применённый файл: его и только его он отпускает */
-        this.#ownUrl = null;
-        this.picker = viewChild.required('picker', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
-        this.t = inject(RT_KIT_LABELS);
-        /** Выбранный файл, который сейчас режет обрезка */
-        this.source = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
-        /** Последний результат обрезки — его берёт «Применить» */
-        this.result = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
-        /** Что сейчас стоит в месте загрузчика */
-        this.state = computed(() => uploadState(this.loading(), this.source() !== null, this.image()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        /** Подсказка над картинкой: своя приложения или подпись кита */
-        this.hint = computed(() => this.tooltip() || this.t().uiImageUploadChange, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-        /** Круглая ли кнопка скачивания: подложка под размытием повторяет её скругление */
-        this.downloadRound = computed(() => this.downloadShape() === 'circle', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "downloadRound" }] : /* istanbul ignore next */ []));
-        /** Шаг скругления кнопки скачивания: круг — полный шаг, квадрат — скругление кнопки по умолчанию */
-        this.downloadRadius = computed(() => (this.downloadRound() ? 'full' : null), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "downloadRadius" }] : /* istanbul ignore next */ []));
-        /**
-         * Адрес текущей картинки: данный приложением или сделанный под применённый файл. Новый адрес от
-         * приложения снова берёт верх над применённым.
-         */
-        this.image = linkedSignal(() => this.imageUrl(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
-        /** Адрес картинки от приложения */
-        this.imageUrl = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
-        /** Имя файла, под которым картинку скачивают и отдают приложению */
-        this.fileName = input('image', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
-        /** Подсказка над картинкой; пустая — подпись кита */
-        this.tooltip = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
-        /** Кнопка скачивания рядом с картинкой */
-        this.downloadable = input(false, { ...(ngDevMode ? { debugName: "downloadable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Форма кнопки скачивания; она заходит за правый верхний угол картинки при любой форме */
-        this.downloadShape = input('circle', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "downloadShape" }] : /* istanbul ignore next */ []));
-        /** Размер значка кнопки скачивания; пусто — от размера кнопки */
-        this.downloadIconSize = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "downloadIconSize" }] : /* istanbul ignore next */ []));
-        /** Вид кнопки выбора файла в пустом загрузчике */
-        this.chooseAppearance = input('outlined', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chooseAppearance" }] : /* istanbul ignore next */ []));
-        /** Значок кнопки выбора файла; пусто — кнопка без значка */
-        this.chooseIcon = input('ico-upload', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chooseIcon" }] : /* istanbul ignore next */ []));
-        /** Без кнопок «Отмена» и «Применить»: каждый результат обрезки применяется сразу */
-        this.autoApply = input(false, { ...(ngDevMode ? { debugName: "autoApply" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Приложение загружает картинку: на месте стоит индикатор */
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Недоступный загрузчик не берёт файлов и не отзывается на нажатие картинки */
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Соотношение рамки обрезки; пусто — свободная рамка */
-        this.ratio = input(null, { ...(ngDevMode ? { debugName: "ratio" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === '' ? null : numberAttribute(value, 0) || null) });
-        /** Круглая маска обрезки для аватара */
-        this.round = input(false, { ...(ngDevMode ? { debugName: "round" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Формат результата; пусто — формат исходника */
-        this.format = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
-        /** Качество результата, от 0 до 100 */
-        this.quality = input(RT_IMAGE_CROPPER_QUALITY, { ...(ngDevMode ? { debugName: "quality" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, RT_IMAGE_CROPPER_QUALITY) });
-        /** Применённый файл — его приложение отправляет, куда ему надо */
-        this.imageChanged = output();
-        /** Картинку скачали */
-        this.downloaded = output();
-        inject(DestroyRef).onDestroy(() => this.#release());
-    }
-    /** Открывает выбор файла, если загрузчик доступен */
-    pick() {
-        if (!this.disabled()) {
-            this.picker().nativeElement.click();
-        }
-    }
-    /** Файл выбран кнопкой или брошен: изображение открывает обрезку, остальное пропускается */
-    choose(file) {
-        if (this.disabled() || !isImageFile(file)) {
-            return;
-        }
-        this.result.set(null);
-        this.source.set(file);
-    }
-    onPicked(event) {
-        const input = event.target;
-        this.choose(input.files?.[0]);
-        // Тот же файл, выбранный второй раз, иначе не даёт события
-        input.value = '';
-    }
-    onSpace(event) {
-        event.preventDefault();
-        this.pick();
-    }
-    onCropped(result) {
-        this.result.set(result);
-        if (this.autoApply()) {
-            this.#applyResult(result, false);
-        }
-    }
-    apply() {
-        const result = this.result();
-        if (result !== null) {
-            this.#applyResult(result, true);
-        }
-    }
-    cancel() {
-        this.source.set(null);
-        this.result.set(null);
-    }
-    download() {
-        const url = this.image();
-        if (url === null) {
-            return;
-        }
-        const link = this.#document.createElement('a');
-        link.href = url;
-        link.download = this.fileName();
-        this.#document.body.appendChild(link);
-        link.click();
-        link.remove();
-        this.downloaded.emit();
-    }
-    /** Результат становится картинкой; `close` убирает обрезку — при автоприменении она остаётся */
-    #applyResult(result, close) {
-        const file = new File([result.file], this.fileName(), { type: result.file.type });
-        this.#release();
-        this.#ownUrl = this.#window.URL.createObjectURL(file);
-        this.image.set(this.#ownUrl);
-        this.imageChanged.emit(file);
-        if (close) {
-            this.cancel();
-        }
-    }
-    #release() {
-        if (this.#ownUrl !== null) {
-            this.#window.URL.revokeObjectURL(this.#ownUrl);
-            this.#ownUrl = null;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtImageUploadComponent, isStandalone: true, selector: "rt-image-upload", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: true, isRequired: false, transformFunction: null }, downloadShape: { classPropertyName: "downloadShape", publicName: "downloadShape", isSignal: true, isRequired: false, transformFunction: null }, downloadIconSize: { classPropertyName: "downloadIconSize", publicName: "downloadIconSize", isSignal: true, isRequired: false, transformFunction: null }, chooseAppearance: { classPropertyName: "chooseAppearance", publicName: "chooseAppearance", isSignal: true, isRequired: false, transformFunction: null }, chooseIcon: { classPropertyName: "chooseIcon", publicName: "chooseIcon", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageChanged: "imageChanged", downloaded: "downloaded" }, host: { properties: { "class.rt-image-upload--disabled": "disabled()" }, classAttribute: "rt-image-upload" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-image-upload\">\n    <input\n        #picker\n        hidden\n        type=\"file\"\n        accept=\"image/*\"\n        qa-dataid=\"image-upload-native\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPicked($event)\" />\n\n    @switch (state()) {\n        @case ('loading') {\n            <div rtElem=\"loading\" qa-dataid=\"image-upload-loading\">\n                <rt-spinner />\n            </div>\n        }\n        @case ('cropping') {\n            <rt-image-cropper\n                qa-dataid=\"image-upload-cropper\"\n                [file]=\"source()\"\n                [ratio]=\"ratio()\"\n                [round]=\"round()\"\n                [format]=\"format()\"\n                [quality]=\"quality()\"\n                (cropped)=\"onCropped($event)\"\n                (loadFailed)=\"cancel()\" />\n\n            @if (!autoApply()) {\n                <div rtElem=\"actions\">\n                    <button\n                        rtButton\n                        appearance=\"text\"\n                        type=\"button\"\n                        qa-dataid=\"image-upload-cancel\"\n                        [label]=\"t().uiImageUploadCancel\"\n                        [attr.aria-label]=\"t().uiImageUploadCancel\"\n                        (click)=\"cancel()\"></button>\n                    <button\n                        rtButton\n                        type=\"button\"\n                        qa-dataid=\"image-upload-apply\"\n                        [label]=\"t().uiImageUploadApply\"\n                        [attr.aria-label]=\"t().uiImageUploadApply\"\n                        [disabled]=\"!result()\"\n                        (click)=\"apply()\"></button>\n                </div>\n            }\n        }\n        @case ('image') {\n            <rt-file-drop accept=\"image/*\" [disabled]=\"disabled()\" (filesDropped)=\"choose($event[0])\">\n                <div rtElem=\"preview\">\n                    <img\n                        rtElem=\"image\"\n                        role=\"button\"\n                        qa-dataid=\"image-upload-image\"\n                        [attr.tabindex]=\"disabled() ? -1 : 0\"\n                        [attr.aria-disabled]=\"disabled()\"\n                        [attr.alt]=\"t().uiImageUploadImage\"\n                        [rtTooltip]=\"disabled() ? '' : hint()\"\n                        [rtMod]=\"{ active: !disabled() }\"\n                        [src]=\"image()\"\n                        (click)=\"pick()\"\n                        (keydown.enter)=\"pick()\"\n                        (keydown.space)=\"onSpace($event)\" />\n\n                    @if (downloadable()) {\n                        <rt-icon-button\n                            rtElem=\"download\"\n                            icon=\"ico-download\"\n                            qa-dataid=\"image-upload-download\"\n                            [radius]=\"downloadRadius()\"\n                            [iconSize]=\"downloadIconSize()\"\n                            [rtMod]=\"{ round: downloadRound() }\"\n                            [ariaLabel]=\"t().uiDownload\"\n                            [tooltip]=\"t().uiDownload\"\n                            (click)=\"download()\" />\n                    }\n                </div>\n            </rt-file-drop>\n        }\n        @default {\n            <rt-file-drop accept=\"image/*\" qa-dataid=\"image-upload-drop\" [disabled]=\"disabled()\" (filesDropped)=\"choose($event[0])\">\n                <rt-empty-state framed icon=\"cloud-upload\" [title]=\"t().uiImageUploadDrop\">\n                    <button\n                        rtButton\n                        type=\"button\"\n                        qa-dataid=\"image-upload-choose\"\n                        [appearance]=\"chooseAppearance()\"\n                        [icon]=\"chooseIcon()\"\n                        [label]=\"t().uiImageUploadChoose\"\n                        [attr.aria-label]=\"t().uiImageUploadChoose\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"pick()\"></button>\n                </rt-empty-state>\n            </rt-file-drop>\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-image-upload{--rt-image-upload-image-max-height: var(--rt-size-100);--rt-image-upload-image-radius: var(--rt-radius-md);--rt-image-upload-focus-shadow: var(--rt-shadow-focus-ring);--rt-image-upload-hover-opacity: .85;--rt-image-upload-download-overhang: var(--rt-space-sm);--rt-image-upload-download-bg: color-mix(in srgb, var(--rt-color-bg-surface) 75%, transparent);--rt-image-upload-download-radius: var(--rt-radius-md);--rt-image-upload-download-blur: 8px;--rt-image-upload-download-size: var(--rt-control-height-md);display:block;width:100%}.rt-image-upload__loading{display:flex;align-items:center;justify-content:center;padding:var(--rt-space-xl)}.rt-image-upload__actions{display:flex;justify-content:flex-end;margin-top:var(--rt-space-sm);gap:var(--rt-space-sm)}.rt-image-upload__preview{position:relative;display:inline-block;max-width:100%;box-sizing:border-box;padding:var(--rt-image-upload-download-overhang);vertical-align:top}.rt-image-upload__download{position:absolute;top:0;right:0;border-radius:var(--rt-image-upload-download-radius);-webkit-backdrop-filter:blur(var(--rt-image-upload-download-blur));backdrop-filter:blur(var(--rt-image-upload-download-blur));background:var(--rt-image-upload-download-bg)}.rt-image-upload__download--round{--rt-image-upload-download-radius: var(--rt-radius-full)}.rt-image-upload__download .rt-icon-button{--rt-icon-button-size-step: var(--rt-image-upload-download-size)}.rt-image-upload__image{display:block;max-width:100%;max-height:var(--rt-image-upload-image-max-height);border-radius:var(--rt-image-upload-image-radius);object-fit:contain}.rt-image-upload__image--active{cursor:pointer}.rt-image-upload__image--active:hover{opacity:var(--rt-image-upload-hover-opacity)}.rt-image-upload__image--active:focus-visible{box-shadow:var(--rt-image-upload-focus-shadow);outline:none}}\n"], dependencies: [{ kind: "directive", type: 
-                // directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "component", type: 
-                // components
-                RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtFileDropComponent, selector: "rt-file-drop", inputs: ["disabled", "overlayLabel", "zones", "accept"], outputs: ["filesDropped", "zoneFilesDropped", "draggingChange"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtImageCropperComponent, selector: "rt-image-cropper", inputs: ["placeholder", "file", "ratio", "round", "minSize", "format", "quality", "disabled"], outputs: ["cropped", "loadFailed"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+	return !!file && file.type.startsWith("image/");
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtImageUploadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-image-upload', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // directives
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                        RtButtonDirective,
-                        RtTooltipDirective,
-                        // components
-                        RtEmptyStateComponent,
-                        RtFileDropComponent,
-                        RtIconButtonComponent,
-                        RtImageCropperComponent,
-                        RtSpinnerComponent,
-                    ], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-image-upload--disabled]': 'disabled()',
-                    }, template: "<ng-container rtBlock=\"rt-image-upload\">\n    <input\n        #picker\n        hidden\n        type=\"file\"\n        accept=\"image/*\"\n        qa-dataid=\"image-upload-native\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPicked($event)\" />\n\n    @switch (state()) {\n        @case ('loading') {\n            <div rtElem=\"loading\" qa-dataid=\"image-upload-loading\">\n                <rt-spinner />\n            </div>\n        }\n        @case ('cropping') {\n            <rt-image-cropper\n                qa-dataid=\"image-upload-cropper\"\n                [file]=\"source()\"\n                [ratio]=\"ratio()\"\n                [round]=\"round()\"\n                [format]=\"format()\"\n                [quality]=\"quality()\"\n                (cropped)=\"onCropped($event)\"\n                (loadFailed)=\"cancel()\" />\n\n            @if (!autoApply()) {\n                <div rtElem=\"actions\">\n                    <button\n                        rtButton\n                        appearance=\"text\"\n                        type=\"button\"\n                        qa-dataid=\"image-upload-cancel\"\n                        [label]=\"t().uiImageUploadCancel\"\n                        [attr.aria-label]=\"t().uiImageUploadCancel\"\n                        (click)=\"cancel()\"></button>\n                    <button\n                        rtButton\n                        type=\"button\"\n                        qa-dataid=\"image-upload-apply\"\n                        [label]=\"t().uiImageUploadApply\"\n                        [attr.aria-label]=\"t().uiImageUploadApply\"\n                        [disabled]=\"!result()\"\n                        (click)=\"apply()\"></button>\n                </div>\n            }\n        }\n        @case ('image') {\n            <rt-file-drop accept=\"image/*\" [disabled]=\"disabled()\" (filesDropped)=\"choose($event[0])\">\n                <div rtElem=\"preview\">\n                    <img\n                        rtElem=\"image\"\n                        role=\"button\"\n                        qa-dataid=\"image-upload-image\"\n                        [attr.tabindex]=\"disabled() ? -1 : 0\"\n                        [attr.aria-disabled]=\"disabled()\"\n                        [attr.alt]=\"t().uiImageUploadImage\"\n                        [rtTooltip]=\"disabled() ? '' : hint()\"\n                        [rtMod]=\"{ active: !disabled() }\"\n                        [src]=\"image()\"\n                        (click)=\"pick()\"\n                        (keydown.enter)=\"pick()\"\n                        (keydown.space)=\"onSpace($event)\" />\n\n                    @if (downloadable()) {\n                        <rt-icon-button\n                            rtElem=\"download\"\n                            icon=\"ico-download\"\n                            qa-dataid=\"image-upload-download\"\n                            [radius]=\"downloadRadius()\"\n                            [iconSize]=\"downloadIconSize()\"\n                            [rtMod]=\"{ round: downloadRound() }\"\n                            [ariaLabel]=\"t().uiDownload\"\n                            [tooltip]=\"t().uiDownload\"\n                            (click)=\"download()\" />\n                    }\n                </div>\n            </rt-file-drop>\n        }\n        @default {\n            <rt-file-drop accept=\"image/*\" qa-dataid=\"image-upload-drop\" [disabled]=\"disabled()\" (filesDropped)=\"choose($event[0])\">\n                <rt-empty-state framed icon=\"cloud-upload\" [title]=\"t().uiImageUploadDrop\">\n                    <button\n                        rtButton\n                        type=\"button\"\n                        qa-dataid=\"image-upload-choose\"\n                        [appearance]=\"chooseAppearance()\"\n                        [icon]=\"chooseIcon()\"\n                        [label]=\"t().uiImageUploadChoose\"\n                        [attr.aria-label]=\"t().uiImageUploadChoose\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"pick()\"></button>\n                </rt-empty-state>\n            </rt-file-drop>\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-image-upload{--rt-image-upload-image-max-height: var(--rt-size-100);--rt-image-upload-image-radius: var(--rt-radius-md);--rt-image-upload-focus-shadow: var(--rt-shadow-focus-ring);--rt-image-upload-hover-opacity: .85;--rt-image-upload-download-overhang: var(--rt-space-sm);--rt-image-upload-download-bg: color-mix(in srgb, var(--rt-color-bg-surface) 75%, transparent);--rt-image-upload-download-radius: var(--rt-radius-md);--rt-image-upload-download-blur: 8px;--rt-image-upload-download-size: var(--rt-control-height-md);display:block;width:100%}.rt-image-upload__loading{display:flex;align-items:center;justify-content:center;padding:var(--rt-space-xl)}.rt-image-upload__actions{display:flex;justify-content:flex-end;margin-top:var(--rt-space-sm);gap:var(--rt-space-sm)}.rt-image-upload__preview{position:relative;display:inline-block;max-width:100%;box-sizing:border-box;padding:var(--rt-image-upload-download-overhang);vertical-align:top}.rt-image-upload__download{position:absolute;top:0;right:0;border-radius:var(--rt-image-upload-download-radius);-webkit-backdrop-filter:blur(var(--rt-image-upload-download-blur));backdrop-filter:blur(var(--rt-image-upload-download-blur));background:var(--rt-image-upload-download-bg)}.rt-image-upload__download--round{--rt-image-upload-download-radius: var(--rt-radius-full)}.rt-image-upload__download .rt-icon-button{--rt-icon-button-size-step: var(--rt-image-upload-download-size)}.rt-image-upload__image{display:block;max-width:100%;max-height:var(--rt-image-upload-image-max-height);border-radius:var(--rt-image-upload-image-radius);object-fit:contain}.rt-image-upload__image--active{cursor:pointer}.rt-image-upload__image--active:hover{opacity:var(--rt-image-upload-hover-opacity)}.rt-image-upload__image--active:focus-visible{box-shadow:var(--rt-image-upload-focus-shadow);outline:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { picker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], downloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadable", required: false }] }], downloadShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadShape", required: false }] }], downloadIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadIconSize", required: false }] }], chooseAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseAppearance", required: false }] }], chooseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseIcon", required: false }] }], autoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoApply", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], round: [{ type: i0.Input, args: [{ isSignal: true, alias: "round", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], quality: [{ type: i0.Input, args: [{ isSignal: true, alias: "quality", required: false }] }], imageChanged: [{ type: i0.Output, args: ["imageChanged"] }], downloaded: [{ type: i0.Output, args: ["downloaded"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const BEM_BLOCK = "rt-image-upload";
+var RtImageUploadComponent = class RtImageUploadComponent {
+	#window;
+	#document;
+	#ownUrl;
+	constructor() {
+		this.#window = inject(WINDOW);
+		this.#document = inject(DOCUMENT);
+		this.#ownUrl = null;
+		this.picker = viewChild.required("picker", ...ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []);
+		this.t = inject(RT_KIT_LABELS);
+		this.source = signal(null, ...ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []);
+		this.result = signal(null, ...ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []);
+		this.state = computed(() => uploadState(this.loading(), this.source() !== null, this.image()), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+		this.hint = computed(() => this.tooltip() || this.t().uiImageUploadChange, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+		this.downloadRound = computed(() => this.downloadShape() === "circle", ...ngDevMode ? [{ debugName: "downloadRound" }] : /* istanbul ignore next */ []);
+		this.downloadRadius = computed(() => this.downloadRound() ? "full" : null, ...ngDevMode ? [{ debugName: "downloadRadius" }] : /* istanbul ignore next */ []);
+		this.image = linkedSignal(() => this.imageUrl(), ...ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []);
+		this.imageUrl = input(null, ...ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []);
+		this.fileName = input("image", ...ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []);
+		this.tooltip = input("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+		this.downloadable = input(false, {
+			...ngDevMode ? { debugName: "downloadable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.downloadShape = input("circle", ...ngDevMode ? [{ debugName: "downloadShape" }] : /* istanbul ignore next */ []);
+		this.downloadIconSize = input(null, ...ngDevMode ? [{ debugName: "downloadIconSize" }] : /* istanbul ignore next */ []);
+		this.chooseAppearance = input("outlined", ...ngDevMode ? [{ debugName: "chooseAppearance" }] : /* istanbul ignore next */ []);
+		this.chooseIcon = input("ico-upload", ...ngDevMode ? [{ debugName: "chooseIcon" }] : /* istanbul ignore next */ []);
+		this.autoApply = input(false, {
+			...ngDevMode ? { debugName: "autoApply" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.loading = input(false, {
+			...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.ratio = input(null, {
+			...ngDevMode ? { debugName: "ratio" } : /* istanbul ignore next */ {},
+			transform: (value) => value === null || value === "" ? null : numberAttribute(value, 0) || null
+		});
+		this.round = input(false, {
+			...ngDevMode ? { debugName: "round" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.format = input(null, ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+		this.quality = input(RT_IMAGE_CROPPER_QUALITY, {
+			...ngDevMode ? { debugName: "quality" } : /* istanbul ignore next */ {},
+			transform: (value) => numberAttribute(value, RT_IMAGE_CROPPER_QUALITY)
+		});
+		this.imageChanged = output();
+		this.downloaded = output();
+		inject(DestroyRef).onDestroy(() => this.#release());
+	}
+	pick() {
+		if (!this.disabled()) this.picker().nativeElement.click();
+	}
+	choose(file) {
+		if (this.disabled() || !isImageFile(file)) return;
+		this.result.set(null);
+		this.source.set(file);
+	}
+	onPicked(event) {
+		const input = event.target;
+		this.choose(input.files?.[0]);
+		input.value = "";
+	}
+	onSpace(event) {
+		event.preventDefault();
+		this.pick();
+	}
+	onCropped(result) {
+		this.result.set(result);
+		if (this.autoApply()) this.#applyResult(result, false);
+	}
+	apply() {
+		const result = this.result();
+		if (result !== null) this.#applyResult(result, true);
+	}
+	cancel() {
+		this.source.set(null);
+		this.result.set(null);
+	}
+	download() {
+		const url = this.image();
+		if (url === null) return;
+		const link = this.#document.createElement("a");
+		link.href = url;
+		link.download = this.fileName();
+		this.#document.body.appendChild(link);
+		link.click();
+		link.remove();
+		this.downloaded.emit();
+	}
+	#applyResult(result, close) {
+		const file = new File([result.file], this.fileName(), { type: result.file.type });
+		this.#release();
+		this.#ownUrl = this.#window.URL.createObjectURL(file);
+		this.image.set(this.#ownUrl);
+		this.imageChanged.emit(file);
+		if (close) this.cancel();
+	}
+	#release() {
+		if (this.#ownUrl !== null) {
+			this.#window.URL.revokeObjectURL(this.#ownUrl);
+			this.#ownUrl = null;
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtImageUploadComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtImageUploadComponent,
+			isStandalone: true,
+			selector: "rt-image-upload",
+			inputs: {
+				imageUrl: {
+					classPropertyName: "imageUrl",
+					publicName: "imageUrl",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fileName: {
+					classPropertyName: "fileName",
+					publicName: "fileName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tooltip: {
+					classPropertyName: "tooltip",
+					publicName: "tooltip",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				downloadable: {
+					classPropertyName: "downloadable",
+					publicName: "downloadable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				downloadShape: {
+					classPropertyName: "downloadShape",
+					publicName: "downloadShape",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				downloadIconSize: {
+					classPropertyName: "downloadIconSize",
+					publicName: "downloadIconSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				chooseAppearance: {
+					classPropertyName: "chooseAppearance",
+					publicName: "chooseAppearance",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				chooseIcon: {
+					classPropertyName: "chooseIcon",
+					publicName: "chooseIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				autoApply: {
+					classPropertyName: "autoApply",
+					publicName: "autoApply",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					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
+				},
+				format: {
+					classPropertyName: "format",
+					publicName: "format",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				quality: {
+					classPropertyName: "quality",
+					publicName: "quality",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				imageChanged: "imageChanged",
+				downloaded: "downloaded"
+			},
+			host: {
+				properties: { "class.rt-image-upload--disabled": "disabled()" },
+				classAttribute: "rt-image-upload"
+			},
+			viewQueries: [{
+				propertyName: "picker",
+				first: true,
+				predicate: ["picker"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-image-upload\">\n    <input\n        #picker\n        hidden\n        type=\"file\"\n        accept=\"image/*\"\n        qa-dataid=\"image-upload-native\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPicked($event)\" />\n\n    @switch (state()) {\n        @case ('loading') {\n            <div rtElem=\"loading\" qa-dataid=\"image-upload-loading\">\n                <rt-spinner />\n            </div>\n        }\n        @case ('cropping') {\n            <rt-image-cropper\n                qa-dataid=\"image-upload-cropper\"\n                [file]=\"source()\"\n                [ratio]=\"ratio()\"\n                [round]=\"round()\"\n                [format]=\"format()\"\n                [quality]=\"quality()\"\n                (cropped)=\"onCropped($event)\"\n                (loadFailed)=\"cancel()\" />\n\n            @if (!autoApply()) {\n                <div rtElem=\"actions\">\n                    <button\n                        rtButton\n                        appearance=\"text\"\n                        type=\"button\"\n                        qa-dataid=\"image-upload-cancel\"\n                        [label]=\"t().uiImageUploadCancel\"\n                        [attr.aria-label]=\"t().uiImageUploadCancel\"\n                        (click)=\"cancel()\"></button>\n                    <button\n                        rtButton\n                        type=\"button\"\n                        qa-dataid=\"image-upload-apply\"\n                        [label]=\"t().uiImageUploadApply\"\n                        [attr.aria-label]=\"t().uiImageUploadApply\"\n                        [disabled]=\"!result()\"\n                        (click)=\"apply()\"></button>\n                </div>\n            }\n        }\n        @case ('image') {\n            <rt-file-drop accept=\"image/*\" [disabled]=\"disabled()\" (filesDropped)=\"choose($event[0])\">\n                <div rtElem=\"preview\">\n                    <img\n                        rtElem=\"image\"\n                        role=\"button\"\n                        qa-dataid=\"image-upload-image\"\n                        [attr.tabindex]=\"disabled() ? -1 : 0\"\n                        [attr.aria-disabled]=\"disabled()\"\n                        [attr.alt]=\"t().uiImageUploadImage\"\n                        [rtTooltip]=\"disabled() ? '' : hint()\"\n                        [rtMod]=\"{ active: !disabled() }\"\n                        [src]=\"image()\"\n                        (click)=\"pick()\"\n                        (keydown.enter)=\"pick()\"\n                        (keydown.space)=\"onSpace($event)\" />\n\n                    @if (downloadable()) {\n                        <rt-icon-button\n                            rtElem=\"download\"\n                            icon=\"ico-download\"\n                            qa-dataid=\"image-upload-download\"\n                            [radius]=\"downloadRadius()\"\n                            [iconSize]=\"downloadIconSize()\"\n                            [rtMod]=\"{ round: downloadRound() }\"\n                            [ariaLabel]=\"t().uiDownload\"\n                            [tooltip]=\"t().uiDownload\"\n                            (click)=\"download()\" />\n                    }\n                </div>\n            </rt-file-drop>\n        }\n        @default {\n            <rt-file-drop accept=\"image/*\" qa-dataid=\"image-upload-drop\" [disabled]=\"disabled()\" (filesDropped)=\"choose($event[0])\">\n                <rt-empty-state framed icon=\"cloud-upload\" [title]=\"t().uiImageUploadDrop\">\n                    <button\n                        rtButton\n                        type=\"button\"\n                        qa-dataid=\"image-upload-choose\"\n                        [appearance]=\"chooseAppearance()\"\n                        [icon]=\"chooseIcon()\"\n                        [label]=\"t().uiImageUploadChoose\"\n                        [attr.aria-label]=\"t().uiImageUploadChoose\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"pick()\"></button>\n                </rt-empty-state>\n            </rt-file-drop>\n        }\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-image-upload{--rt-image-upload-image-max-height: var(--rt-size-100);--rt-image-upload-image-radius: var(--rt-radius-md);--rt-image-upload-focus-shadow: var(--rt-shadow-focus-ring);--rt-image-upload-hover-opacity: .85;--rt-image-upload-download-overhang: var(--rt-space-sm);--rt-image-upload-download-bg: color-mix(in srgb, var(--rt-color-bg-surface) 75%, transparent);--rt-image-upload-download-radius: var(--rt-radius-md);--rt-image-upload-download-blur: 8px;--rt-image-upload-download-size: var(--rt-control-height-md);display:block;width:100%}.rt-image-upload__loading{display:flex;align-items:center;justify-content:center;padding:var(--rt-space-xl)}.rt-image-upload__actions{display:flex;justify-content:flex-end;margin-top:var(--rt-space-sm);gap:var(--rt-space-sm)}.rt-image-upload__preview{position:relative;display:inline-block;max-width:100%;box-sizing:border-box;padding:var(--rt-image-upload-download-overhang);vertical-align:top}.rt-image-upload__download{position:absolute;top:0;right:0;border-radius:var(--rt-image-upload-download-radius);-webkit-backdrop-filter:blur(var(--rt-image-upload-download-blur));backdrop-filter:blur(var(--rt-image-upload-download-blur));background:var(--rt-image-upload-download-bg)}.rt-image-upload__download--round{--rt-image-upload-download-radius: var(--rt-radius-full)}.rt-image-upload__download .rt-icon-button{--rt-icon-button-size-step: var(--rt-image-upload-download-size)}.rt-image-upload__image{display:block;max-width:100%;max-height:var(--rt-image-upload-image-max-height);border-radius:var(--rt-image-upload-image-radius);object-fit:contain}.rt-image-upload__image--active{cursor:pointer}.rt-image-upload__image--active:hover{opacity:var(--rt-image-upload-hover-opacity)}.rt-image-upload__image--active:focus-visible{box-shadow:var(--rt-image-upload-focus-shadow);outline:none}}\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: "directive",
+					type: RtButtonDirective,
+					selector: "button[rtButton], a[rtButton]",
+					inputs: [
+						"label",
+						"icon",
+						"iconPos",
+						"theme",
+						"appearance",
+						"size",
+						"loading",
+						"loadingIcon",
+						"loadingLabel",
+						"pressed"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "component",
+					type: RtEmptyStateComponent,
+					selector: "rt-empty-state",
+					inputs: [
+						"icon",
+						"glyph",
+						"title",
+						"description",
+						"framed"
+					]
+				},
+				{
+					kind: "component",
+					type: RtFileDropComponent,
+					selector: "rt-file-drop",
+					inputs: [
+						"disabled",
+						"overlayLabel",
+						"zones",
+						"accept"
+					],
+					outputs: [
+						"filesDropped",
+						"zoneFilesDropped",
+						"draggingChange"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtImageCropperComponent,
+					selector: "rt-image-cropper",
+					inputs: [
+						"placeholder",
+						"file",
+						"ratio",
+						"round",
+						"minSize",
+						"format",
+						"quality",
+						"disabled"
+					],
+					outputs: ["cropped", "loadFailed"]
+				},
+				{
+					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: RtImageUploadComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-image-upload",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				BlockDirective,
+				ElemDirective,
+				ModDirective,
+				RtButtonDirective,
+				RtTooltipDirective,
+				RtEmptyStateComponent,
+				RtFileDropComponent,
+				RtIconButtonComponent,
+				RtImageCropperComponent,
+				RtSpinnerComponent
+			],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-image-upload--disabled]": "disabled()"
+			},
+			template: "<ng-container rtBlock=\"rt-image-upload\">\n    <input\n        #picker\n        hidden\n        type=\"file\"\n        accept=\"image/*\"\n        qa-dataid=\"image-upload-native\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPicked($event)\" />\n\n    @switch (state()) {\n        @case ('loading') {\n            <div rtElem=\"loading\" qa-dataid=\"image-upload-loading\">\n                <rt-spinner />\n            </div>\n        }\n        @case ('cropping') {\n            <rt-image-cropper\n                qa-dataid=\"image-upload-cropper\"\n                [file]=\"source()\"\n                [ratio]=\"ratio()\"\n                [round]=\"round()\"\n                [format]=\"format()\"\n                [quality]=\"quality()\"\n                (cropped)=\"onCropped($event)\"\n                (loadFailed)=\"cancel()\" />\n\n            @if (!autoApply()) {\n                <div rtElem=\"actions\">\n                    <button\n                        rtButton\n                        appearance=\"text\"\n                        type=\"button\"\n                        qa-dataid=\"image-upload-cancel\"\n                        [label]=\"t().uiImageUploadCancel\"\n                        [attr.aria-label]=\"t().uiImageUploadCancel\"\n                        (click)=\"cancel()\"></button>\n                    <button\n                        rtButton\n                        type=\"button\"\n                        qa-dataid=\"image-upload-apply\"\n                        [label]=\"t().uiImageUploadApply\"\n                        [attr.aria-label]=\"t().uiImageUploadApply\"\n                        [disabled]=\"!result()\"\n                        (click)=\"apply()\"></button>\n                </div>\n            }\n        }\n        @case ('image') {\n            <rt-file-drop accept=\"image/*\" [disabled]=\"disabled()\" (filesDropped)=\"choose($event[0])\">\n                <div rtElem=\"preview\">\n                    <img\n                        rtElem=\"image\"\n                        role=\"button\"\n                        qa-dataid=\"image-upload-image\"\n                        [attr.tabindex]=\"disabled() ? -1 : 0\"\n                        [attr.aria-disabled]=\"disabled()\"\n                        [attr.alt]=\"t().uiImageUploadImage\"\n                        [rtTooltip]=\"disabled() ? '' : hint()\"\n                        [rtMod]=\"{ active: !disabled() }\"\n                        [src]=\"image()\"\n                        (click)=\"pick()\"\n                        (keydown.enter)=\"pick()\"\n                        (keydown.space)=\"onSpace($event)\" />\n\n                    @if (downloadable()) {\n                        <rt-icon-button\n                            rtElem=\"download\"\n                            icon=\"ico-download\"\n                            qa-dataid=\"image-upload-download\"\n                            [radius]=\"downloadRadius()\"\n                            [iconSize]=\"downloadIconSize()\"\n                            [rtMod]=\"{ round: downloadRound() }\"\n                            [ariaLabel]=\"t().uiDownload\"\n                            [tooltip]=\"t().uiDownload\"\n                            (click)=\"download()\" />\n                    }\n                </div>\n            </rt-file-drop>\n        }\n        @default {\n            <rt-file-drop accept=\"image/*\" qa-dataid=\"image-upload-drop\" [disabled]=\"disabled()\" (filesDropped)=\"choose($event[0])\">\n                <rt-empty-state framed icon=\"cloud-upload\" [title]=\"t().uiImageUploadDrop\">\n                    <button\n                        rtButton\n                        type=\"button\"\n                        qa-dataid=\"image-upload-choose\"\n                        [appearance]=\"chooseAppearance()\"\n                        [icon]=\"chooseIcon()\"\n                        [label]=\"t().uiImageUploadChoose\"\n                        [attr.aria-label]=\"t().uiImageUploadChoose\"\n                        [disabled]=\"disabled()\"\n                        (click)=\"pick()\"></button>\n                </rt-empty-state>\n            </rt-file-drop>\n        }\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-image-upload{--rt-image-upload-image-max-height: var(--rt-size-100);--rt-image-upload-image-radius: var(--rt-radius-md);--rt-image-upload-focus-shadow: var(--rt-shadow-focus-ring);--rt-image-upload-hover-opacity: .85;--rt-image-upload-download-overhang: var(--rt-space-sm);--rt-image-upload-download-bg: color-mix(in srgb, var(--rt-color-bg-surface) 75%, transparent);--rt-image-upload-download-radius: var(--rt-radius-md);--rt-image-upload-download-blur: 8px;--rt-image-upload-download-size: var(--rt-control-height-md);display:block;width:100%}.rt-image-upload__loading{display:flex;align-items:center;justify-content:center;padding:var(--rt-space-xl)}.rt-image-upload__actions{display:flex;justify-content:flex-end;margin-top:var(--rt-space-sm);gap:var(--rt-space-sm)}.rt-image-upload__preview{position:relative;display:inline-block;max-width:100%;box-sizing:border-box;padding:var(--rt-image-upload-download-overhang);vertical-align:top}.rt-image-upload__download{position:absolute;top:0;right:0;border-radius:var(--rt-image-upload-download-radius);-webkit-backdrop-filter:blur(var(--rt-image-upload-download-blur));backdrop-filter:blur(var(--rt-image-upload-download-blur));background:var(--rt-image-upload-download-bg)}.rt-image-upload__download--round{--rt-image-upload-download-radius: var(--rt-radius-full)}.rt-image-upload__download .rt-icon-button{--rt-icon-button-size-step: var(--rt-image-upload-download-size)}.rt-image-upload__image{display:block;max-width:100%;max-height:var(--rt-image-upload-image-max-height);border-radius:var(--rt-image-upload-image-radius);object-fit:contain}.rt-image-upload__image--active{cursor:pointer}.rt-image-upload__image--active:hover{opacity:var(--rt-image-upload-hover-opacity)}.rt-image-upload__image--active:focus-visible{box-shadow:var(--rt-image-upload-focus-shadow);outline:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		picker: [{
+			type: i0.ViewChild,
+			args: ["picker", { isSignal: true }]
+		}],
+		imageUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageUrl",
+				required: false
+			}]
+		}],
+		fileName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fileName",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		downloadable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "downloadable",
+				required: false
+			}]
+		}],
+		downloadShape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "downloadShape",
+				required: false
+			}]
+		}],
+		downloadIconSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "downloadIconSize",
+				required: false
+			}]
+		}],
+		chooseAppearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chooseAppearance",
+				required: false
+			}]
+		}],
+		chooseIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chooseIcon",
+				required: false
+			}]
+		}],
+		autoApply: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoApply",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ratio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ratio",
+				required: false
+			}]
+		}],
+		round: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "round",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		quality: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "quality",
+				required: false
+			}]
+		}],
+		imageChanged: [{
+			type: i0.Output,
+			args: ["imageChanged"]
+		}],
+		downloaded: [{
+			type: i0.Output,
+			args: ["downloaded"]
+		}]
+	}
+});
 export { RtImageUploadComponent, isImageFile, uploadState };
-//# sourceMappingURL=rt-tools-ui-kit-v2-image-upload.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-image-upload.mjs.map