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

package/fesm2022/rt-tools-ui-kit-v2-file-drop.mjs

@@ -1,214 +1,290 @@
-import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, signal, computed, input, booleanAttribute, output, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { rtKitLabel } from '@rt-tools/ui-kit-v2/core';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-
-const BEM_BLOCK = 'rt-file-drop';
-/** Задержка скрытия оверлея: dragleave стреляет при переходе между дочерними
-    элементами, без debounce рамка мерцает. */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, HostListener, ViewEncapsulation, booleanAttribute, computed, inject, input, output, signal } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+const BEM_BLOCK = "rt-file-drop";
 const DRAG_LEAVE_DEBOUNCE_MS = 80;
-/**
- * Зона перетаскивания файлов: оборачивает произвольный контент через
- * content-projection и превращает его в drop-зону. При перетаскивании файла над
- * областью рисует приглушающий оверлей-приглашение поверх контента, на drop —
- * эмитит выброшенные файлы через `(filesDropped)`.
- *
- * Мультизонный режим: при непустом `zones` оверлей делится на вертикальную стопку
- * равных зон с подписями; зона под курсором подсвечивается, drop эмитится через
- * `(zoneFilesDropped)` с id зоны (а `(filesDropped)` в этом режиме НЕ эмитится).
- * Зона курсора вычисляется по Y-координате против host-rect — оверлей остаётся
- * pointer-events:none, drag-события продолжают идти в host-listener'ы.
- *
- * `accept` (формат как у нативного input[accept]) отфильтровывает неподходящие
- * файлы до эмита — drop в обход файл-пикера не проносит запрещённые расширения;
- * отбрасывание молчаливое, как у самого пикера.
- *
- * Слушает drag-события на собственном host'е (всплывают со всего спроецированного
- * контента), гасит браузерный навигейт по файлу и принимает только перетаскивание
- * файлов (а не внутренний drag элементов формы). Потребитель управляет приёмом
- * через `[disabled]` (например «активна вкладка файлов и форма редактируема») и
- * сам решает, что делать с файлами — компонент состояние файлов не хранит.
- *
- * Оверлей `pointer-events: none` — не перехватывает drag/drop, события доходят до
- * host-listener'ов.
- */
-class RtFileDropComponent {
-    #destroyRef;
-    #host;
-    #t_uiFileDropOverlay;
-    #dragLeaveTimer;
-    constructor() {
-        this.#destroyRef = inject(DestroyRef);
-        this.#host = inject(ElementRef);
-        this.#t_uiFileDropOverlay = rtKitLabel('uiFileDropOverlay');
-        this.#dragLeaveTimer = null;
-        /** Активна ли подсветка drop-зоны (файл тащат над областью). */
-        this.isDragging = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-        /** Зона под курсором в мультизонном режиме (id из `zones`). */
-        this.activeZoneId = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeZoneId" }] : /* istanbul ignore next */ []));
-        this.hasZones = computed(() => this.zones().length > 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasZones" }] : /* istanbul ignore next */ []));
-        this.overlayText = computed(() => this.overlayLabel() || this.#t_uiFileDropOverlay(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "overlayText" }] : /* istanbul ignore next */ []));
-        /** Приём drop'а выключен (потребитель решает по своему контексту). */
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Пусто — берётся переведённая подпись по умолчанию */
-        this.overlayLabel = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "overlayLabel" }] : /* istanbul ignore next */ []));
-        /** Мультизонный режим: непустой список зон делит оверлей на стопку целей. */
-        this.zones = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "zones" }] : /* istanbul ignore next */ []));
-        /** Фильтр расширений/MIME (формат нативного input[accept]); пусто — без фильтра. */
-        this.accept = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
-        this.filesDropped = output();
-        /** Drop в мультизонном режиме: файлы + id зоны, куда их бросили. */
-        this.zoneFilesDropped = output();
-        this.draggingChange = output();
-        this.#destroyRef.onDestroy(() => this.#clearLeaveTimer());
-    }
-    onDragOver(event) {
-        if (this.disabled() || !this.#isFileDrag(event)) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = 'copy';
-        }
-        this.#clearLeaveTimer();
-        this.#setDragging(true);
-        if (this.hasZones()) {
-            this.activeZoneId.set(this.#zoneIdAt(event.clientY));
-        }
-    }
-    onDragLeave(event) {
-        if (!this.isDragging()) {
-            return;
-        }
-        event.preventDefault();
-        this.#clearLeaveTimer();
-        this.#dragLeaveTimer = setTimeout(() => {
-            this.#dragLeaveTimer = null;
-            this.#setDragging(false);
-        }, DRAG_LEAVE_DEBOUNCE_MS);
-    }
-    onDrop(event) {
-        if (this.disabled() || !this.#isFileDrag(event)) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.#clearLeaveTimer();
-        this.#setDragging(false);
-        const files = Array.from(event.dataTransfer?.files ?? []).filter((file) => this.#matchesAccept(file));
-        if (files.length === 0) {
-            return;
-        }
-        if (!this.hasZones()) {
-            this.filesDropped.emit(files);
-            return;
-        }
-        const zoneId = this.#zoneIdAt(event.clientY);
-        if (zoneId === null) {
-            return;
-        }
-        this.zoneFilesDropped.emit({ zoneId, files });
-    }
-    /** Меняет dragging-флаг и эмитит изменение только при реальном переходе. */
-    #setDragging(value) {
-        if (this.isDragging() === value) {
-            return;
-        }
-        this.isDragging.set(value);
-        this.draggingChange.emit(value);
-        if (!value) {
-            this.activeZoneId.set(null);
-        }
-    }
-    /** Зона по Y-координате курсора: стопка равных по высоте полос host-rect. */
-    #zoneIdAt(clientY) {
-        const zones = this.zones();
-        if (zones.length === 0) {
-            return null;
-        }
-        const rect = this.#host.nativeElement.getBoundingClientRect();
-        if (rect.height <= 0) {
-            return zones[0].id;
-        }
-        const ratio = (clientY - rect.top) / rect.height;
-        const index = Math.min(zones.length - 1, Math.max(0, Math.floor(ratio * zones.length)));
-        return zones[index].id;
-    }
-    /** Файл проходит accept-фильтр (расширение `.pdf` / MIME `image/png` / `image/*`). */
-    #matchesAccept(file) {
-        const accept = this.accept().trim();
-        if (accept === '') {
-            return true;
-        }
-        const name = file.name.toLowerCase();
-        const mime = file.type.toLowerCase();
-        return accept.split(',').some((raw) => {
-            const token = raw.trim().toLowerCase();
-            if (token === '') {
-                return false;
-            }
-            if (token.startsWith('.')) {
-                return name.endsWith(token);
-            }
-            if (token.endsWith('/*')) {
-                return mime.startsWith(token.slice(0, -1));
-            }
-            return mime === token;
-        });
-    }
-    /** Перетаскивают именно файлы (а не внутренний drag элементов формы). */
-    #isFileDrag(event) {
-        const types = event.dataTransfer?.types;
-        return types?.includes('Files') ?? false;
-    }
-    #clearLeaveTimer() {
-        if (this.#dragLeaveTimer !== null) {
-            clearTimeout(this.#dragLeaveTimer);
-            this.#dragLeaveTimer = null;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtFileDropComponent, isStandalone: true, selector: "rt-file-drop", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, overlayLabel: { classPropertyName: "overlayLabel", publicName: "overlayLabel", isSignal: true, isRequired: false, transformFunction: null }, zones: { classPropertyName: "zones", publicName: "zones", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesDropped: "filesDropped", zoneFilesDropped: "zoneFilesDropped", draggingChange: "draggingChange" }, host: { listeners: { "dragenter": "onDragOver($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, classAttribute: "rt-file-drop" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-file-drop\">\n    <ng-content />\n\n    @if (isDragging()) {\n        <div rtElem=\"overlay\" qa-dataid=\"file-drop-overlay\" aria-hidden=\"true\" [rtMod]=\"{ zoned: hasZones() }\">\n            @if (hasZones()) {\n                @for (zone of zones(); track zone.id) {\n                    <div\n                        rtElem=\"zone\"\n                        qa-dataid=\"file-drop-zone\"\n                        [attr.data-zone]=\"zone.id\"\n                        [attr.data-active]=\"activeZoneId() === zone.id\"\n                        [rtMod]=\"{ active: activeZoneId() === zone.id }\">\n                        <span rtElem=\"label\" qa-dataid=\"file-drop-zone-label\">{{ zone.label }}</span>\n                        @if (zone.sublabel) {\n                            <span rtElem=\"sublabel\" qa-dataid=\"file-drop-zone-sublabel\">{{ zone.sublabel }}</span>\n                        }\n                    </div>\n                }\n            } @else {\n                <div rtElem=\"frame\" qa-dataid=\"file-drop-frame\">\n                    <span rtElem=\"label\" qa-dataid=\"file-drop-label\">{{ overlayText() }}</span>\n                </div>\n            }\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-file-drop{--rt-file-drop-radius: var(--rt-radius-lg);--rt-file-drop-border-width: var(--rt-border-width-thin);--rt-file-drop-transition-duration: var(--rt-duration-fast);--rt-file-drop-frame-inset: var(--rt-space-lg);--rt-file-drop-frame-padding: var(--rt-space-md);--rt-file-drop-label-size: var(--rt-text-lg);position:relative;display:block;height:100%}.rt-file-drop__overlay{position:absolute;z-index:50;display:flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--rt-file-drop-radius);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000073;container-type:size;inset:var(--rt-space-sm);pointer-events:none}.rt-file-drop__overlay--zoned{flex-direction:column;align-items:stretch;padding:var(--rt-space-md);gap:var(--rt-space-sm)}.rt-file-drop__frame{position:absolute;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--rt-file-drop-frame-padding);border:var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);border-radius:var(--rt-file-drop-radius);gap:var(--rt-space-sm);inset:var(--rt-file-drop-frame-inset);text-align:center}.rt-file-drop__zone{display:flex;min-height:0;box-sizing:border-box;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);border-radius:var(--rt-file-drop-radius);gap:var(--rt-space-2xs);text-align:center;transition:border-color var(--rt-file-drop-transition-duration) ease,background-color var(--rt-file-drop-transition-duration) ease}.rt-file-drop__zone--active{border-style:solid;border-color:var(--rt-color-action-primary);background:#ffffff1a}.rt-file-drop__label{color:var(--rt-color-action-on-primary);font-size:var(--rt-file-drop-label-size);font-weight:var(--rt-font-weight-semibold)}.rt-file-drop__sublabel{color:var(--rt-color-action-on-primary);font-size:var(--rt-text-sm);opacity:.8}.rt-file-drop[data-rt-radius=none]{--rt-file-drop-radius: var(--rt-radius-none)}.rt-file-drop[data-rt-radius=xs]{--rt-file-drop-radius: var(--rt-radius-xs)}.rt-file-drop[data-rt-radius=sm]{--rt-file-drop-radius: var(--rt-radius-sm)}.rt-file-drop[data-rt-radius=ms]{--rt-file-drop-radius: var(--rt-radius-ms)}.rt-file-drop[data-rt-radius=md]{--rt-file-drop-radius: var(--rt-radius-md)}.rt-file-drop[data-rt-radius=lg]{--rt-file-drop-radius: var(--rt-radius-lg)}.rt-file-drop[data-rt-radius=xl]{--rt-file-drop-radius: var(--rt-radius-xl)}.rt-file-drop[data-rt-radius=\"2xl\"]{--rt-file-drop-radius: var(--rt-radius-2xl)}.rt-file-drop[data-rt-radius=full]{--rt-file-drop-radius: var(--rt-radius-full)}@container (max-height: 6rem){.rt-file-drop__frame{--rt-file-drop-frame-inset: var(--rt-space-2xs);--rt-file-drop-frame-padding: var(--rt-space-2xs);--rt-file-drop-label-size: var(--rt-text-xs)}}}\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFileDropComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-file-drop', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                    }, template: "<ng-container rtBlock=\"rt-file-drop\">\n    <ng-content />\n\n    @if (isDragging()) {\n        <div rtElem=\"overlay\" qa-dataid=\"file-drop-overlay\" aria-hidden=\"true\" [rtMod]=\"{ zoned: hasZones() }\">\n            @if (hasZones()) {\n                @for (zone of zones(); track zone.id) {\n                    <div\n                        rtElem=\"zone\"\n                        qa-dataid=\"file-drop-zone\"\n                        [attr.data-zone]=\"zone.id\"\n                        [attr.data-active]=\"activeZoneId() === zone.id\"\n                        [rtMod]=\"{ active: activeZoneId() === zone.id }\">\n                        <span rtElem=\"label\" qa-dataid=\"file-drop-zone-label\">{{ zone.label }}</span>\n                        @if (zone.sublabel) {\n                            <span rtElem=\"sublabel\" qa-dataid=\"file-drop-zone-sublabel\">{{ zone.sublabel }}</span>\n                        }\n                    </div>\n                }\n            } @else {\n                <div rtElem=\"frame\" qa-dataid=\"file-drop-frame\">\n                    <span rtElem=\"label\" qa-dataid=\"file-drop-label\">{{ overlayText() }}</span>\n                </div>\n            }\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-file-drop{--rt-file-drop-radius: var(--rt-radius-lg);--rt-file-drop-border-width: var(--rt-border-width-thin);--rt-file-drop-transition-duration: var(--rt-duration-fast);--rt-file-drop-frame-inset: var(--rt-space-lg);--rt-file-drop-frame-padding: var(--rt-space-md);--rt-file-drop-label-size: var(--rt-text-lg);position:relative;display:block;height:100%}.rt-file-drop__overlay{position:absolute;z-index:50;display:flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--rt-file-drop-radius);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000073;container-type:size;inset:var(--rt-space-sm);pointer-events:none}.rt-file-drop__overlay--zoned{flex-direction:column;align-items:stretch;padding:var(--rt-space-md);gap:var(--rt-space-sm)}.rt-file-drop__frame{position:absolute;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--rt-file-drop-frame-padding);border:var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);border-radius:var(--rt-file-drop-radius);gap:var(--rt-space-sm);inset:var(--rt-file-drop-frame-inset);text-align:center}.rt-file-drop__zone{display:flex;min-height:0;box-sizing:border-box;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);border-radius:var(--rt-file-drop-radius);gap:var(--rt-space-2xs);text-align:center;transition:border-color var(--rt-file-drop-transition-duration) ease,background-color var(--rt-file-drop-transition-duration) ease}.rt-file-drop__zone--active{border-style:solid;border-color:var(--rt-color-action-primary);background:#ffffff1a}.rt-file-drop__label{color:var(--rt-color-action-on-primary);font-size:var(--rt-file-drop-label-size);font-weight:var(--rt-font-weight-semibold)}.rt-file-drop__sublabel{color:var(--rt-color-action-on-primary);font-size:var(--rt-text-sm);opacity:.8}.rt-file-drop[data-rt-radius=none]{--rt-file-drop-radius: var(--rt-radius-none)}.rt-file-drop[data-rt-radius=xs]{--rt-file-drop-radius: var(--rt-radius-xs)}.rt-file-drop[data-rt-radius=sm]{--rt-file-drop-radius: var(--rt-radius-sm)}.rt-file-drop[data-rt-radius=ms]{--rt-file-drop-radius: var(--rt-radius-ms)}.rt-file-drop[data-rt-radius=md]{--rt-file-drop-radius: var(--rt-radius-md)}.rt-file-drop[data-rt-radius=lg]{--rt-file-drop-radius: var(--rt-radius-lg)}.rt-file-drop[data-rt-radius=xl]{--rt-file-drop-radius: var(--rt-radius-xl)}.rt-file-drop[data-rt-radius=\"2xl\"]{--rt-file-drop-radius: var(--rt-radius-2xl)}.rt-file-drop[data-rt-radius=full]{--rt-file-drop-radius: var(--rt-radius-full)}@container (max-height: 6rem){.rt-file-drop__frame{--rt-file-drop-frame-inset: var(--rt-space-2xs);--rt-file-drop-frame-padding: var(--rt-space-2xs);--rt-file-drop-label-size: var(--rt-text-xs)}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], overlayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayLabel", required: false }] }], zones: [{ type: i0.Input, args: [{ isSignal: true, alias: "zones", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], zoneFilesDropped: [{ type: i0.Output, args: ["zoneFilesDropped"] }], draggingChange: [{ type: i0.Output, args: ["draggingChange"] }], onDragOver: [{
-                type: HostListener,
-                args: ['dragenter', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], onDragLeave: [{
-                type: HostListener,
-                args: ['dragleave', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtFileDropComponent = class RtFileDropComponent {
+	#destroyRef;
+	#host;
+	#t_uiFileDropOverlay;
+	#dragLeaveTimer;
+	constructor() {
+		this.#destroyRef = inject(DestroyRef);
+		this.#host = inject(ElementRef);
+		this.#t_uiFileDropOverlay = rtKitLabel("uiFileDropOverlay");
+		this.#dragLeaveTimer = null;
+		this.isDragging = signal(false, ...ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []);
+		this.activeZoneId = signal(null, ...ngDevMode ? [{ debugName: "activeZoneId" }] : /* istanbul ignore next */ []);
+		this.hasZones = computed(() => this.zones().length > 0, ...ngDevMode ? [{ debugName: "hasZones" }] : /* istanbul ignore next */ []);
+		this.overlayText = computed(() => this.overlayLabel() || this.#t_uiFileDropOverlay(), ...ngDevMode ? [{ debugName: "overlayText" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.overlayLabel = input("", ...ngDevMode ? [{ debugName: "overlayLabel" }] : /* istanbul ignore next */ []);
+		this.zones = input([], ...ngDevMode ? [{ debugName: "zones" }] : /* istanbul ignore next */ []);
+		this.accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+		this.filesDropped = output();
+		this.zoneFilesDropped = output();
+		this.draggingChange = output();
+		this.#destroyRef.onDestroy(() => this.#clearLeaveTimer());
+	}
+	onDragOver(event) {
+		if (this.disabled() || !this.#isFileDrag(event)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+		this.#clearLeaveTimer();
+		this.#setDragging(true);
+		if (this.hasZones()) this.activeZoneId.set(this.#zoneIdAt(event.clientY));
+	}
+	onDragLeave(event) {
+		if (!this.isDragging()) return;
+		event.preventDefault();
+		this.#clearLeaveTimer();
+		this.#dragLeaveTimer = setTimeout(() => {
+			this.#dragLeaveTimer = null;
+			this.#setDragging(false);
+		}, DRAG_LEAVE_DEBOUNCE_MS);
+	}
+	onDrop(event) {
+		if (this.disabled() || !this.#isFileDrag(event)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.#clearLeaveTimer();
+		this.#setDragging(false);
+		const files = Array.from(event.dataTransfer?.files ?? []).filter((file) => this.#matchesAccept(file));
+		if (files.length === 0) return;
+		if (!this.hasZones()) {
+			this.filesDropped.emit(files);
+			return;
+		}
+		const zoneId = this.#zoneIdAt(event.clientY);
+		if (zoneId === null) return;
+		this.zoneFilesDropped.emit({
+			zoneId,
+			files
+		});
+	}
+	#setDragging(value) {
+		if (this.isDragging() === value) return;
+		this.isDragging.set(value);
+		this.draggingChange.emit(value);
+		if (!value) this.activeZoneId.set(null);
+	}
+	#zoneIdAt(clientY) {
+		const zones = this.zones();
+		if (zones.length === 0) return null;
+		const rect = this.#host.nativeElement.getBoundingClientRect();
+		if (rect.height <= 0) return zones[0].id;
+		const ratio = (clientY - rect.top) / rect.height;
+		return zones[Math.min(zones.length - 1, Math.max(0, Math.floor(ratio * zones.length)))].id;
+	}
+	#matchesAccept(file) {
+		const accept = this.accept().trim();
+		if (accept === "") return true;
+		const name = file.name.toLowerCase();
+		const mime = file.type.toLowerCase();
+		return accept.split(",").some((raw) => {
+			const token = raw.trim().toLowerCase();
+			if (token === "") return false;
+			if (token.startsWith(".")) return name.endsWith(token);
+			if (token.endsWith("/*")) return mime.startsWith(token.slice(0, -1));
+			return mime === token;
+		});
+	}
+	#isFileDrag(event) {
+		return (event.dataTransfer?.types)?.includes("Files") ?? false;
+	}
+	#clearLeaveTimer() {
+		if (this.#dragLeaveTimer !== null) {
+			clearTimeout(this.#dragLeaveTimer);
+			this.#dragLeaveTimer = null;
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtFileDropComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtFileDropComponent,
+			isStandalone: true,
+			selector: "rt-file-drop",
+			inputs: {
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				overlayLabel: {
+					classPropertyName: "overlayLabel",
+					publicName: "overlayLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				zones: {
+					classPropertyName: "zones",
+					publicName: "zones",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				accept: {
+					classPropertyName: "accept",
+					publicName: "accept",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				filesDropped: "filesDropped",
+				zoneFilesDropped: "zoneFilesDropped",
+				draggingChange: "draggingChange"
+			},
+			host: {
+				listeners: {
+					"dragenter": "onDragOver($event)",
+					"dragover": "onDragOver($event)",
+					"dragleave": "onDragLeave($event)",
+					"drop": "onDrop($event)"
+				},
+				classAttribute: "rt-file-drop"
+			},
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-file-drop\">\n    <ng-content />\n\n    @if (isDragging()) {\n        <div rtElem=\"overlay\" qa-dataid=\"file-drop-overlay\" aria-hidden=\"true\" [rtMod]=\"{ zoned: hasZones() }\">\n            @if (hasZones()) {\n                @for (zone of zones(); track zone.id) {\n                    <div\n                        rtElem=\"zone\"\n                        qa-dataid=\"file-drop-zone\"\n                        [attr.data-zone]=\"zone.id\"\n                        [attr.data-active]=\"activeZoneId() === zone.id\"\n                        [rtMod]=\"{ active: activeZoneId() === zone.id }\">\n                        <span rtElem=\"label\" qa-dataid=\"file-drop-zone-label\">{{ zone.label }}</span>\n                        @if (zone.sublabel) {\n                            <span rtElem=\"sublabel\" qa-dataid=\"file-drop-zone-sublabel\">{{ zone.sublabel }}</span>\n                        }\n                    </div>\n                }\n            } @else {\n                <div rtElem=\"frame\" qa-dataid=\"file-drop-frame\">\n                    <span rtElem=\"label\" qa-dataid=\"file-drop-label\">{{ overlayText() }}</span>\n                </div>\n            }\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-file-drop{--rt-file-drop-radius: var(--rt-radius-lg);--rt-file-drop-border-width: var(--rt-border-width-thin);--rt-file-drop-transition-duration: var(--rt-duration-fast);--rt-file-drop-frame-inset: var(--rt-space-lg);--rt-file-drop-frame-padding: var(--rt-space-md);--rt-file-drop-label-size: var(--rt-text-lg);position:relative;display:block;height:100%}.rt-file-drop__overlay{position:absolute;z-index:50;display:flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--rt-file-drop-radius);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000073;container-type:size;inset:var(--rt-space-sm);pointer-events:none}.rt-file-drop__overlay--zoned{flex-direction:column;align-items:stretch;padding:var(--rt-space-md);gap:var(--rt-space-sm)}.rt-file-drop__frame{position:absolute;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--rt-file-drop-frame-padding);border:var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);border-radius:var(--rt-file-drop-radius);gap:var(--rt-space-sm);inset:var(--rt-file-drop-frame-inset);text-align:center}.rt-file-drop__zone{display:flex;min-height:0;box-sizing:border-box;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);border-radius:var(--rt-file-drop-radius);gap:var(--rt-space-2xs);text-align:center;transition:border-color var(--rt-file-drop-transition-duration) ease,background-color var(--rt-file-drop-transition-duration) ease}.rt-file-drop__zone--active{border-style:solid;border-color:var(--rt-color-action-primary);background:#ffffff1a}.rt-file-drop__label{color:var(--rt-color-action-on-primary);font-size:var(--rt-file-drop-label-size);font-weight:var(--rt-font-weight-semibold)}.rt-file-drop__sublabel{color:var(--rt-color-action-on-primary);font-size:var(--rt-text-sm);opacity:.8}.rt-file-drop[data-rt-radius=none]{--rt-file-drop-radius: var(--rt-radius-none)}.rt-file-drop[data-rt-radius=xs]{--rt-file-drop-radius: var(--rt-radius-xs)}.rt-file-drop[data-rt-radius=sm]{--rt-file-drop-radius: var(--rt-radius-sm)}.rt-file-drop[data-rt-radius=ms]{--rt-file-drop-radius: var(--rt-radius-ms)}.rt-file-drop[data-rt-radius=md]{--rt-file-drop-radius: var(--rt-radius-md)}.rt-file-drop[data-rt-radius=lg]{--rt-file-drop-radius: var(--rt-radius-lg)}.rt-file-drop[data-rt-radius=xl]{--rt-file-drop-radius: var(--rt-radius-xl)}.rt-file-drop[data-rt-radius=\"2xl\"]{--rt-file-drop-radius: var(--rt-radius-2xl)}.rt-file-drop[data-rt-radius=full]{--rt-file-drop-radius: var(--rt-radius-full)}@container (max-height: 6rem){.rt-file-drop__frame{--rt-file-drop-frame-inset: var(--rt-space-2xs);--rt-file-drop-frame-padding: var(--rt-space-2xs);--rt-file-drop-label-size: var(--rt-text-xs)}}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtFileDropComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-file-drop",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-file-drop\">\n    <ng-content />\n\n    @if (isDragging()) {\n        <div rtElem=\"overlay\" qa-dataid=\"file-drop-overlay\" aria-hidden=\"true\" [rtMod]=\"{ zoned: hasZones() }\">\n            @if (hasZones()) {\n                @for (zone of zones(); track zone.id) {\n                    <div\n                        rtElem=\"zone\"\n                        qa-dataid=\"file-drop-zone\"\n                        [attr.data-zone]=\"zone.id\"\n                        [attr.data-active]=\"activeZoneId() === zone.id\"\n                        [rtMod]=\"{ active: activeZoneId() === zone.id }\">\n                        <span rtElem=\"label\" qa-dataid=\"file-drop-zone-label\">{{ zone.label }}</span>\n                        @if (zone.sublabel) {\n                            <span rtElem=\"sublabel\" qa-dataid=\"file-drop-zone-sublabel\">{{ zone.sublabel }}</span>\n                        }\n                    </div>\n                }\n            } @else {\n                <div rtElem=\"frame\" qa-dataid=\"file-drop-frame\">\n                    <span rtElem=\"label\" qa-dataid=\"file-drop-label\">{{ overlayText() }}</span>\n                </div>\n            }\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-file-drop{--rt-file-drop-radius: var(--rt-radius-lg);--rt-file-drop-border-width: var(--rt-border-width-thin);--rt-file-drop-transition-duration: var(--rt-duration-fast);--rt-file-drop-frame-inset: var(--rt-space-lg);--rt-file-drop-frame-padding: var(--rt-space-md);--rt-file-drop-label-size: var(--rt-text-lg);position:relative;display:block;height:100%}.rt-file-drop__overlay{position:absolute;z-index:50;display:flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--rt-file-drop-radius);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000073;container-type:size;inset:var(--rt-space-sm);pointer-events:none}.rt-file-drop__overlay--zoned{flex-direction:column;align-items:stretch;padding:var(--rt-space-md);gap:var(--rt-space-sm)}.rt-file-drop__frame{position:absolute;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--rt-file-drop-frame-padding);border:var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);border-radius:var(--rt-file-drop-radius);gap:var(--rt-space-sm);inset:var(--rt-file-drop-frame-inset);text-align:center}.rt-file-drop__zone{display:flex;min-height:0;box-sizing:border-box;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);border-radius:var(--rt-file-drop-radius);gap:var(--rt-space-2xs);text-align:center;transition:border-color var(--rt-file-drop-transition-duration) ease,background-color var(--rt-file-drop-transition-duration) ease}.rt-file-drop__zone--active{border-style:solid;border-color:var(--rt-color-action-primary);background:#ffffff1a}.rt-file-drop__label{color:var(--rt-color-action-on-primary);font-size:var(--rt-file-drop-label-size);font-weight:var(--rt-font-weight-semibold)}.rt-file-drop__sublabel{color:var(--rt-color-action-on-primary);font-size:var(--rt-text-sm);opacity:.8}.rt-file-drop[data-rt-radius=none]{--rt-file-drop-radius: var(--rt-radius-none)}.rt-file-drop[data-rt-radius=xs]{--rt-file-drop-radius: var(--rt-radius-xs)}.rt-file-drop[data-rt-radius=sm]{--rt-file-drop-radius: var(--rt-radius-sm)}.rt-file-drop[data-rt-radius=ms]{--rt-file-drop-radius: var(--rt-radius-ms)}.rt-file-drop[data-rt-radius=md]{--rt-file-drop-radius: var(--rt-radius-md)}.rt-file-drop[data-rt-radius=lg]{--rt-file-drop-radius: var(--rt-radius-lg)}.rt-file-drop[data-rt-radius=xl]{--rt-file-drop-radius: var(--rt-radius-xl)}.rt-file-drop[data-rt-radius=\"2xl\"]{--rt-file-drop-radius: var(--rt-radius-2xl)}.rt-file-drop[data-rt-radius=full]{--rt-file-drop-radius: var(--rt-radius-full)}@container (max-height: 6rem){.rt-file-drop__frame{--rt-file-drop-frame-inset: var(--rt-space-2xs);--rt-file-drop-frame-padding: var(--rt-space-2xs);--rt-file-drop-label-size: var(--rt-text-xs)}}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		overlayLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overlayLabel",
+				required: false
+			}]
+		}],
+		zones: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "zones",
+				required: false
+			}]
+		}],
+		accept: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accept",
+				required: false
+			}]
+		}],
+		filesDropped: [{
+			type: i0.Output,
+			args: ["filesDropped"]
+		}],
+		zoneFilesDropped: [{
+			type: i0.Output,
+			args: ["zoneFilesDropped"]
+		}],
+		draggingChange: [{
+			type: i0.Output,
+			args: ["draggingChange"]
+		}],
+		onDragOver: [{
+			type: HostListener,
+			args: ["dragenter", ["$event"]]
+		}, {
+			type: HostListener,
+			args: ["dragover", ["$event"]]
+		}],
+		onDragLeave: [{
+			type: HostListener,
+			args: ["dragleave", ["$event"]]
+		}],
+		onDrop: [{
+			type: HostListener,
+			args: ["drop", ["$event"]]
+		}]
+	}
+});
 export { RtFileDropComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-file-drop.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-file-drop.mjs.map