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

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

@@ -0,0 +1,219 @@
+import * as i0 from '@angular/core';
+import { Pipe, inject, computed, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective } from '@rt-tools/core';
+import { RT_KIT_LABELS, formatFileSize } from '@rt-tools/ui-kit-v2/core';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+
+/** Иконка Word-семейства (несколько расширений делят один глиф). */
+const ICON_WORD = 'attach-docx-doc';
+/** Иконка растровых изображений. */
+const ICON_IMAGE = 'attach-jpg-png';
+/** Иконка презентаций. */
+const ICON_PRESENTATION = 'attach-ppt-pptx';
+/** Иконка таблиц Excel-семейства. */
+const ICON_SPREADSHEET = 'attach-xlsx-xls';
+/** Иконка архивов. */
+const ICON_ARCHIVE = 'attach-zip-rar';
+/** Иконка web-форматов изображений/видео. */
+const ICON_WEB_MEDIA = 'attach-webp';
+/**
+ * Маппинг расширения файла → имя цветной иконки типа (`attach-*` в rt-icon-реестре).
+ */
+const FILE_TYPE_ICON = {
+    doc: ICON_WORD,
+    docx: ICON_WORD,
+    odt: ICON_WORD,
+    gif: ICON_IMAGE,
+    jpg: ICON_IMAGE,
+    jpeg: ICON_IMAGE,
+    png: ICON_IMAGE,
+    pdf: 'attach-pdf',
+    ppt: ICON_PRESENTATION,
+    pptx: ICON_PRESENTATION,
+    txt: 'attach-txt',
+    webp: ICON_WEB_MEDIA,
+    webm: ICON_WEB_MEDIA,
+    xls: ICON_SPREADSHEET,
+    xlsx: ICON_SPREADSHEET,
+    zip: ICON_ARCHIVE,
+    rar: ICON_ARCHIVE,
+    msg: 'attach-msg',
+    eml: 'attach-eml',
+};
+/**
+ * Возвращает имя иконки типа файла по его имени (берётся расширение после
+ * последней точки). Неизвестное/отсутствующее расширение → нейтральный `attach-other`.
+ */
+function getFileTypeIcon(fileName) {
+    const ext = fileName.split('.').pop()?.toLowerCase() ?? '';
+    return FILE_TYPE_ICON[ext] ?? 'attach-other';
+}
+/**
+ * Выводит читаемый заголовок из имени файла: отбрасывает расширение и заменяет
+ * разделители `_`/`-` на пробелы (CamelCase намеренно НЕ разбивается — это давало
+ * бы непредсказуемый результат на произвольных именах). Если после очистки строка
+ * пустая (например имя было `.pdf`) — возвращается исходное имя.
+ */
+function deriveFileTitle(fileName) {
+    const withoutExt = fileName.replace(/\.[^./\\]+$/, '');
+    const cleaned = withoutExt.replace(/[_-]+/g, ' ').replace(/\s+/g, ' ').trim();
+    return cleaned || fileName;
+}
+
+/** Многоточие, вставляемое в середину строки при усечении. */
+const ELLIPSIS = '...';
+/** Длина строки по умолчанию, при которой включается усечение. */
+const DEFAULT_MAX_LENGTH = 32;
+/**
+ * Усекает длинное имя файла по середине, сохраняя расширение видимым:
+ * `10588-1_EvaluationSearchReport.pdf` → `10588-1_EvaluationSearchRe...pdf`.
+ *
+ * Обычный CSS `text-overflow: ellipsis` режет хвост и теряет расширение —
+ * поэтому усечение по середине делается здесь, а не в стилях. Усечение
+ * посимвольное (не по ширине контейнера): предсказуемо и без измерений DOM.
+ *
+ * Pure-pipe: пересчитывается только при смене входа.
+ */
+class RtTruncateMiddlePipe {
+    transform(value, maxLength = DEFAULT_MAX_LENGTH) {
+        if (!value) {
+            return '';
+        }
+        if (value.length <= maxLength) {
+            return value;
+        }
+        const lastDot = value.lastIndexOf('.');
+        const hasExt = lastDot > 0 && lastDot < value.length - 1;
+        const ext = hasExt ? value.slice(lastDot + 1) : '';
+        const base = hasExt ? value.slice(0, lastDot) : value;
+        const headLength = maxLength - ext.length - ELLIPSIS.length;
+        if (headLength <= 0) {
+            // Расширение длиннее лимита — деградируем до простого усечения хвоста.
+            return value.slice(0, Math.max(0, maxLength - ELLIPSIS.length)) + ELLIPSIS;
+        }
+        return base.slice(0, headLength) + ELLIPSIS + ext;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTruncateMiddlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: RtTruncateMiddlePipe, isStandalone: true, name: "rtTruncateMiddle" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTruncateMiddlePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rtTruncateMiddle' }]
+        }] });
+
+const BEM_BLOCK = 'rt-file-card';
+/** Иконка типа файла крупнее прочего: по ней карточку находят взглядом. */
+const ICON_SIZES = {
+    sm: 'sm',
+    md: 'xl',
+    lg: 'xl',
+};
+/** Кнопки действий: в компактной карточке они не должны задавать её высоту. */
+const ACTION_SIZES = {
+    sm: 'sm',
+    md: 'sm',
+    lg: 'md',
+};
+/**
+ * Карточка загруженного файла: цветная иконка типа, заголовок (выведенный из имени),
+ * усечённое по середине имя файла, бейдж размера и опциональные действия справа
+ * (скачать / переименовать / удалить).
+ *
+ * Презентационный компонент: сам ничего не решает, только эмиттит события действий.
+ * Кнопки включаются точечно через `showDownload`/`showRemove`/`showRename` — в режиме
+ * загрузки обычно нужен только remove, при показе сохранённых файлов — download.
+ *
+ * `showRename` по умолчанию выключен и сейчас нигде не включается: бэкенд не
+ * поддерживает переименование (`original_name` неизменяем после создания). Вход
+ * оставлен, чтобы кнопку можно было включить без правки компонента, когда появится API.
+ */
+class RtFileCardComponent {
+    constructor() {
+        /** Имя цветной иконки типа файла по расширению. */
+        this.t = inject(RT_KIT_LABELS);
+        this.iconName = computed(() => getFileTypeIcon(this.name()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+        /** Заголовок карточки, выведенный из имени файла (без расширения, разделители → пробелы). */
+        this.title = computed(() => deriveFileTitle(this.name()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Отформатированный размер; пустая строка → размер неизвестен. */
+        this.sizeLabel = computed(() => formatFileSize(this.sizeBytes()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sizeLabel" }] : /* istanbul ignore next */ []));
+        /** Показывать ли бейдж размера. */
+        this.hasSize = computed(() => this.sizeLabel() !== '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSize" }] : /* istanbul ignore next */ []));
+        /** Размер иконки типа файла — маппится от размера карточки. */
+        this.iconSize = computed(() => ICON_SIZES[this.size()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        /** Размер кнопок действий — маппится от размера карточки. */
+        this.actionSize = computed(() => ACTION_SIZES[this.size()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionSize" }] : /* istanbul ignore next */ []));
+        /** Имя файла с расширением — обязательно. */
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Размер в байтах. `null` → бейдж размера скрыт. */
+        this.sizeBytes = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sizeBytes" }] : /* istanbul ignore next */ []));
+        /** Плотность карточки: `sm` для тесных мест вроде композера, `lg` — для страниц. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Показывать кнопку скачивания. */
+        this.showDownload = input(false, { ...(ngDevMode ? { debugName: "showDownload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Показывать кнопку удаления. */
+        this.showRemove = input(false, { ...(ngDevMode ? { debugName: "showRemove" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Показывать кнопку переименования (отключена до появления API на бэке). */
+        this.showRename = input(false, { ...(ngDevMode ? { debugName: "showRename" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Блокирует кнопки действий (например, во время сабмита формы). */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Запрошено скачивание файла. */
+        this.download = output();
+        /** Запрошено удаление файла. */
+        this.removed = output();
+        /** Запрошено переименование файла. */
+        this.rename = output();
+    }
+    onDownload() {
+        this.download.emit();
+    }
+    onRemove() {
+        this.removed.emit();
+    }
+    onRename() {
+        this.rename.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtFileCardComponent, isStandalone: true, selector: "rt-file-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, sizeBytes: { classPropertyName: "sizeBytes", publicName: "sizeBytes", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDownload: { classPropertyName: "showDownload", publicName: "showDownload", isSignal: true, isRequired: false, transformFunction: null }, showRemove: { classPropertyName: "showRemove", publicName: "showRemove", isSignal: true, isRequired: false, transformFunction: null }, showRename: { classPropertyName: "showRename", publicName: "showRename", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { download: "download", removed: "removed", rename: "rename" }, host: { properties: { "class.rt-file-card--sm": "size() === 'sm'", "class.rt-file-card--md": "size() === 'md'", "class.rt-file-card--lg": "size() === 'lg'" }, classAttribute: "rt-file-card" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-file-card\">\n    <rt-icon rtElem=\"icon\" [size]=\"iconSize()\" [name]=\"iconName()\" />\n\n    <span rtElem=\"text\">\n        <span rtElem=\"title\" qa-dataid=\"file-card-title\" [rtTooltip]=\"title()\">{{ title() }}</span>\n        <span rtElem=\"name\" qa-dataid=\"file-card-name\" [rtTooltip]=\"name()\">{{ name() | rtTruncateMiddle }}</span>\n    </span>\n\n    <span rtElem=\"meta\">\n        @if (hasSize()) {\n            <span rtElem=\"size\" qa-dataid=\"file-card-size\">{{ sizeLabel() }}</span>\n        }\n\n        @if (showDownload()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-download\"\n                icon=\"ico-download\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiDownload\"\n                [tooltip]=\"t().uiDownload\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onDownload()\" />\n        }\n\n        @if (showRename()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-rename\"\n                icon=\"ico-edit\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiRename\"\n                [tooltip]=\"t().uiRename\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onRename()\" />\n        }\n\n        @if (showRemove()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-remove\"\n                icon=\"ico-trash\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiRemove\"\n                [tooltip]=\"t().uiRemove\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onRemove()\" />\n        }\n    </span>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-file-card{--rt-file-card-radius: var(--rt-radius-lg);--rt-file-card-border-width: var(--rt-border-width-thin);--rt-file-card-badge-radius: var(--rt-radius-full);--rt-file-card-padding-block: var(--rt-space-sm);--rt-file-card-padding-inline: var(--rt-space-md);--rt-file-card-gap: var(--rt-space-sm);--rt-file-card-title-size: var(--rt-text-md);--rt-file-card-name-size: var(--rt-text-sm);--rt-file-card-badge-size: var(--rt-text-xs);display:flex;align-items:center;padding:var(--rt-file-card-padding-block) var(--rt-file-card-padding-inline);border:var(--rt-file-card-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-file-card-radius);background-color:var(--rt-color-bg-surface);gap:var(--rt-file-card-gap);max-inline-size:100%;min-inline-size:0}.rt-file-card--sm{--rt-file-card-padding-block: var(--rt-space-xs);--rt-file-card-padding-inline: var(--rt-space-sm);--rt-file-card-gap: var(--rt-space-xs);--rt-file-card-title-size: var(--rt-text-xs);--rt-file-card-name-size: var(--rt-text-2xs);--rt-file-card-badge-size: var(--rt-text-2xs)}.rt-file-card--md{--rt-file-card-padding-block: var(--rt-space-sm);--rt-file-card-padding-inline: var(--rt-space-md);--rt-file-card-gap: var(--rt-space-sm);--rt-file-card-title-size: var(--rt-text-md);--rt-file-card-name-size: var(--rt-text-sm);--rt-file-card-badge-size: var(--rt-text-xs)}.rt-file-card--lg{--rt-file-card-padding-block: var(--rt-space-md);--rt-file-card-padding-inline: var(--rt-space-lg);--rt-file-card-gap: var(--rt-space-md);--rt-file-card-title-size: var(--rt-text-lg);--rt-file-card-name-size: var(--rt-text-md);--rt-file-card-badge-size: var(--rt-text-sm)}.rt-file-card__icon{flex-shrink:0}.rt-file-card__text{display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-2xs)}.rt-file-card__title{overflow:hidden;color:var(--rt-color-text-primary);font-size:var(--rt-file-card-title-size);font-weight:var(--rt-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap}.rt-file-card__name{overflow:hidden;color:var(--rt-color-text-muted);font-size:var(--rt-file-card-name-size);text-overflow:ellipsis;white-space:nowrap}.rt-file-card__meta{display:flex;flex-shrink:0;align-items:center;gap:var(--rt-space-xs)}.rt-file-card__size{padding:var(--rt-space-2xs) var(--rt-space-sm);border:var(--rt-file-card-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-file-card-badge-radius);color:var(--rt-color-text-muted);font-size:var(--rt-file-card-badge-size);white-space:nowrap}.rt-file-card__action{flex-shrink:0}.rt-file-card[data-rt-radius=none]{--rt-file-card-radius: var(--rt-radius-none)}.rt-file-card[data-rt-radius=xs]{--rt-file-card-radius: var(--rt-radius-xs)}.rt-file-card[data-rt-radius=sm]{--rt-file-card-radius: var(--rt-radius-sm)}.rt-file-card[data-rt-radius=ms]{--rt-file-card-radius: var(--rt-radius-ms)}.rt-file-card[data-rt-radius=md]{--rt-file-card-radius: var(--rt-radius-md)}.rt-file-card[data-rt-radius=lg]{--rt-file-card-radius: var(--rt-radius-lg)}.rt-file-card[data-rt-radius=xl]{--rt-file-card-radius: var(--rt-radius-xl)}.rt-file-card[data-rt-radius=\"2xl\"]{--rt-file-card-radius: var(--rt-radius-2xl)}.rt-file-card[data-rt-radius=full]{--rt-file-card-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { 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: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: 
+                // pipes
+                RtTruncateMiddlePipe, name: "rtTruncateMiddle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtFileCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-file-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconComponent,
+                        RtIconButtonComponent,
+                        RtTooltipDirective,
+                        BlockDirective,
+                        ElemDirective,
+                        // pipes
+                        RtTruncateMiddlePipe,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-file-card--sm]': "size() === 'sm'",
+                        '[class.rt-file-card--md]': "size() === 'md'",
+                        '[class.rt-file-card--lg]': "size() === 'lg'",
+                    }, template: "<ng-container rtBlock=\"rt-file-card\">\n    <rt-icon rtElem=\"icon\" [size]=\"iconSize()\" [name]=\"iconName()\" />\n\n    <span rtElem=\"text\">\n        <span rtElem=\"title\" qa-dataid=\"file-card-title\" [rtTooltip]=\"title()\">{{ title() }}</span>\n        <span rtElem=\"name\" qa-dataid=\"file-card-name\" [rtTooltip]=\"name()\">{{ name() | rtTruncateMiddle }}</span>\n    </span>\n\n    <span rtElem=\"meta\">\n        @if (hasSize()) {\n            <span rtElem=\"size\" qa-dataid=\"file-card-size\">{{ sizeLabel() }}</span>\n        }\n\n        @if (showDownload()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-download\"\n                icon=\"ico-download\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiDownload\"\n                [tooltip]=\"t().uiDownload\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onDownload()\" />\n        }\n\n        @if (showRename()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-rename\"\n                icon=\"ico-edit\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiRename\"\n                [tooltip]=\"t().uiRename\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onRename()\" />\n        }\n\n        @if (showRemove()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-remove\"\n                icon=\"ico-trash\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiRemove\"\n                [tooltip]=\"t().uiRemove\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onRemove()\" />\n        }\n    </span>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-file-card{--rt-file-card-radius: var(--rt-radius-lg);--rt-file-card-border-width: var(--rt-border-width-thin);--rt-file-card-badge-radius: var(--rt-radius-full);--rt-file-card-padding-block: var(--rt-space-sm);--rt-file-card-padding-inline: var(--rt-space-md);--rt-file-card-gap: var(--rt-space-sm);--rt-file-card-title-size: var(--rt-text-md);--rt-file-card-name-size: var(--rt-text-sm);--rt-file-card-badge-size: var(--rt-text-xs);display:flex;align-items:center;padding:var(--rt-file-card-padding-block) var(--rt-file-card-padding-inline);border:var(--rt-file-card-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-file-card-radius);background-color:var(--rt-color-bg-surface);gap:var(--rt-file-card-gap);max-inline-size:100%;min-inline-size:0}.rt-file-card--sm{--rt-file-card-padding-block: var(--rt-space-xs);--rt-file-card-padding-inline: var(--rt-space-sm);--rt-file-card-gap: var(--rt-space-xs);--rt-file-card-title-size: var(--rt-text-xs);--rt-file-card-name-size: var(--rt-text-2xs);--rt-file-card-badge-size: var(--rt-text-2xs)}.rt-file-card--md{--rt-file-card-padding-block: var(--rt-space-sm);--rt-file-card-padding-inline: var(--rt-space-md);--rt-file-card-gap: var(--rt-space-sm);--rt-file-card-title-size: var(--rt-text-md);--rt-file-card-name-size: var(--rt-text-sm);--rt-file-card-badge-size: var(--rt-text-xs)}.rt-file-card--lg{--rt-file-card-padding-block: var(--rt-space-md);--rt-file-card-padding-inline: var(--rt-space-lg);--rt-file-card-gap: var(--rt-space-md);--rt-file-card-title-size: var(--rt-text-lg);--rt-file-card-name-size: var(--rt-text-md);--rt-file-card-badge-size: var(--rt-text-sm)}.rt-file-card__icon{flex-shrink:0}.rt-file-card__text{display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-2xs)}.rt-file-card__title{overflow:hidden;color:var(--rt-color-text-primary);font-size:var(--rt-file-card-title-size);font-weight:var(--rt-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap}.rt-file-card__name{overflow:hidden;color:var(--rt-color-text-muted);font-size:var(--rt-file-card-name-size);text-overflow:ellipsis;white-space:nowrap}.rt-file-card__meta{display:flex;flex-shrink:0;align-items:center;gap:var(--rt-space-xs)}.rt-file-card__size{padding:var(--rt-space-2xs) var(--rt-space-sm);border:var(--rt-file-card-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-file-card-badge-radius);color:var(--rt-color-text-muted);font-size:var(--rt-file-card-badge-size);white-space:nowrap}.rt-file-card__action{flex-shrink:0}.rt-file-card[data-rt-radius=none]{--rt-file-card-radius: var(--rt-radius-none)}.rt-file-card[data-rt-radius=xs]{--rt-file-card-radius: var(--rt-radius-xs)}.rt-file-card[data-rt-radius=sm]{--rt-file-card-radius: var(--rt-radius-sm)}.rt-file-card[data-rt-radius=ms]{--rt-file-card-radius: var(--rt-radius-ms)}.rt-file-card[data-rt-radius=md]{--rt-file-card-radius: var(--rt-radius-md)}.rt-file-card[data-rt-radius=lg]{--rt-file-card-radius: var(--rt-radius-lg)}.rt-file-card[data-rt-radius=xl]{--rt-file-card-radius: var(--rt-radius-xl)}.rt-file-card[data-rt-radius=\"2xl\"]{--rt-file-card-radius: var(--rt-radius-2xl)}.rt-file-card[data-rt-radius=full]{--rt-file-card-radius: var(--rt-radius-full)}}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], sizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeBytes", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownload", required: false }] }], showRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRemove", required: false }] }], showRename: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRename", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], download: [{ type: i0.Output, args: ["download"] }], removed: [{ type: i0.Output, args: ["removed"] }], rename: [{ type: i0.Output, args: ["rename"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtFileCardComponent, RtTruncateMiddlePipe, deriveFileTitle, getFileTypeIcon };
+//# sourceMappingURL=rt-tools-ui-kit-v2-file-card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-file-card.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/file-card/file-card.helper.ts","../../../projects/ui-kit-v2/src/lib/components/file-card/rt-truncate-middle.pipe.ts","../../../projects/ui-kit-v2/src/lib/components/file-card/rt-file-card.component.ts","../../../projects/ui-kit-v2/src/lib/components/file-card/rt-file-card.component.html","../../../projects/ui-kit-v2/src/lib/components/file-card/rt-tools-ui-kit-v2-file-card.ts"],"sourcesContent":["import { IRtIcon } from '@rt-tools/ui-kit-v2/core';\n\n/** Иконка Word-семейства (несколько расширений делят один глиф). */\nconst ICON_WORD: IRtIcon.Name = 'attach-docx-doc';\n\n/** Иконка растровых изображений. */\nconst ICON_IMAGE: IRtIcon.Name = 'attach-jpg-png';\n\n/** Иконка презентаций. */\nconst ICON_PRESENTATION: IRtIcon.Name = 'attach-ppt-pptx';\n\n/** Иконка таблиц Excel-семейства. */\nconst ICON_SPREADSHEET: IRtIcon.Name = 'attach-xlsx-xls';\n\n/** Иконка архивов. */\nconst ICON_ARCHIVE: IRtIcon.Name = 'attach-zip-rar';\n\n/** Иконка web-форматов изображений/видео. */\nconst ICON_WEB_MEDIA: IRtIcon.Name = 'attach-webp';\n\n/**\n * Маппинг расширения файла → имя цветной иконки типа (`attach-*` в rt-icon-реестре).\n */\nconst FILE_TYPE_ICON: Readonly<Record<string, IRtIcon.Name>> = {\n    doc: ICON_WORD,\n    docx: ICON_WORD,\n    odt: ICON_WORD,\n    gif: ICON_IMAGE,\n    jpg: ICON_IMAGE,\n    jpeg: ICON_IMAGE,\n    png: ICON_IMAGE,\n    pdf: 'attach-pdf',\n    ppt: ICON_PRESENTATION,\n    pptx: ICON_PRESENTATION,\n    txt: 'attach-txt',\n    webp: ICON_WEB_MEDIA,\n    webm: ICON_WEB_MEDIA,\n    xls: ICON_SPREADSHEET,\n    xlsx: ICON_SPREADSHEET,\n    zip: ICON_ARCHIVE,\n    rar: ICON_ARCHIVE,\n    msg: 'attach-msg',\n    eml: 'attach-eml',\n};\n\n/**\n * Возвращает имя иконки типа файла по его имени (берётся расширение после\n * последней точки). Неизвестное/отсутствующее расширение → нейтральный `attach-other`.\n */\nexport function getFileTypeIcon(fileName: string): IRtIcon.Name {\n    const ext: string = fileName.split('.').pop()?.toLowerCase() ?? '';\n    return FILE_TYPE_ICON[ext] ?? 'attach-other';\n}\n\n/**\n * Выводит читаемый заголовок из имени файла: отбрасывает расширение и заменяет\n * разделители `_`/`-` на пробелы (CamelCase намеренно НЕ разбивается — это давало\n * бы непредсказуемый результат на произвольных именах). Если после очистки строка\n * пустая (например имя было `.pdf`) — возвращается исходное имя.\n */\nexport function deriveFileTitle(fileName: string): string {\n    const withoutExt: string = fileName.replace(/\\.[^./\\\\]+$/, '');\n    const cleaned: string = withoutExt.replace(/[_-]+/g, ' ').replace(/\\s+/g, ' ').trim();\n    return cleaned || fileName;\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\n/** Многоточие, вставляемое в середину строки при усечении. */\nconst ELLIPSIS: string = '...';\n\n/** Длина строки по умолчанию, при которой включается усечение. */\nconst DEFAULT_MAX_LENGTH: number = 32;\n\n/**\n * Усекает длинное имя файла по середине, сохраняя расширение видимым:\n * `10588-1_EvaluationSearchReport.pdf` → `10588-1_EvaluationSearchRe...pdf`.\n *\n * Обычный CSS `text-overflow: ellipsis` режет хвост и теряет расширение —\n * поэтому усечение по середине делается здесь, а не в стилях. Усечение\n * посимвольное (не по ширине контейнера): предсказуемо и без измерений DOM.\n *\n * Pure-pipe: пересчитывается только при смене входа.\n */\n@Pipe({ name: 'rtTruncateMiddle' })\nexport class RtTruncateMiddlePipe implements PipeTransform {\n    public transform(value: string | null | undefined, maxLength: number = DEFAULT_MAX_LENGTH): string {\n        if (!value) {\n            return '';\n        }\n        if (value.length <= maxLength) {\n            return value;\n        }\n\n        const lastDot: number = value.lastIndexOf('.');\n        const hasExt: boolean = lastDot > 0 && lastDot < value.length - 1;\n        const ext: string = hasExt ? value.slice(lastDot + 1) : '';\n        const base: string = hasExt ? value.slice(0, lastDot) : value;\n\n        const headLength: number = maxLength - ext.length - ELLIPSIS.length;\n        if (headLength <= 0) {\n            // Расширение длиннее лимита — деградируем до простого усечения хвоста.\n            return value.slice(0, Math.max(0, maxLength - ELLIPSIS.length)) + ELLIPSIS;\n        }\n\n        return base.slice(0, headLength) + ELLIPSIS + ext;\n    }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    inject,\n    input,\n    output,\n    ChangeDetectionStrategy,\n    Component,\n    InputSignal,\n    InputSignalWithTransform,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { formatFileSize } from '@rt-tools/ui-kit-v2/core';\n\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { IRtIconButton } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { deriveFileTitle, getFileTypeIcon } from './file-card.helper';\nimport { IRtFileCard } from './rt-file-card.model';\nimport { RtTruncateMiddlePipe } from './rt-truncate-middle.pipe';\n\nconst BEM_BLOCK: string = 'rt-file-card';\n\n/** Иконка типа файла крупнее прочего: по ней карточку находят взглядом. */\nconst ICON_SIZES: Readonly<Record<IRtFileCard.Size, IRtIcon.Size>> = {\n    sm: 'sm',\n    md: 'xl',\n    lg: 'xl',\n};\n\n/** Кнопки действий: в компактной карточке они не должны задавать её высоту. */\nconst ACTION_SIZES: Readonly<Record<IRtFileCard.Size, IRtIconButton.Size>> = {\n    sm: 'sm',\n    md: 'sm',\n    lg: 'md',\n};\n\n/**\n * Карточка загруженного файла: цветная иконка типа, заголовок (выведенный из имени),\n * усечённое по середине имя файла, бейдж размера и опциональные действия справа\n * (скачать / переименовать / удалить).\n *\n * Презентационный компонент: сам ничего не решает, только эмиттит события действий.\n * Кнопки включаются точечно через `showDownload`/`showRemove`/`showRename` — в режиме\n * загрузки обычно нужен только remove, при показе сохранённых файлов — download.\n *\n * `showRename` по умолчанию выключен и сейчас нигде не включается: бэкенд не\n * поддерживает переименование (`original_name` неизменяем после создания). Вход\n * оставлен, чтобы кнопку можно было включить без правки компонента, когда появится API.\n */\n@Component({\n    selector: 'rt-file-card',\n    templateUrl: './rt-file-card.component.html',\n    styleUrls: ['./rt-file-card.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        RtIconButtonComponent,\n        RtTooltipDirective,\n        BlockDirective,\n        ElemDirective,\n\n        // pipes\n        RtTruncateMiddlePipe,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-file-card--sm]': \"size() === 'sm'\",\n        '[class.rt-file-card--md]': \"size() === 'md'\",\n        '[class.rt-file-card--lg]': \"size() === 'lg'\",\n    },\n})\nexport class RtFileCardComponent {\n    /** Имя цветной иконки типа файла по расширению. */\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly iconName: Signal<IRtIcon.Name> = computed((): IRtIcon.Name => getFileTypeIcon(this.name()));\n\n    /** Заголовок карточки, выведенный из имени файла (без расширения, разделители → пробелы). */\n    protected readonly title: Signal<string> = computed((): string => deriveFileTitle(this.name()));\n\n    /** Отформатированный размер; пустая строка → размер неизвестен. */\n    protected readonly sizeLabel: Signal<string> = computed((): string => formatFileSize(this.sizeBytes()));\n\n    /** Показывать ли бейдж размера. */\n    protected readonly hasSize: Signal<boolean> = computed((): boolean => this.sizeLabel() !== '');\n\n    /** Размер иконки типа файла — маппится от размера карточки. */\n    protected readonly iconSize: Signal<IRtIcon.Size> = computed((): IRtIcon.Size => ICON_SIZES[this.size()]);\n\n    /** Размер кнопок действий — маппится от размера карточки. */\n    protected readonly actionSize: Signal<IRtIconButton.Size> = computed((): IRtIconButton.Size => ACTION_SIZES[this.size()]);\n\n    /** Имя файла с расширением — обязательно. */\n    public readonly name: InputSignal<string> = input.required<string>();\n\n    /** Размер в байтах. `null` → бейдж размера скрыт. */\n    public readonly sizeBytes: InputSignal<number | null> = input<number | null>(null);\n\n    /** Плотность карточки: `sm` для тесных мест вроде композера, `lg` — для страниц. */\n    public readonly size: InputSignal<IRtFileCard.Size> = input<IRtFileCard.Size>('md');\n\n    /** Показывать кнопку скачивания. */\n    public readonly showDownload: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Показывать кнопку удаления. */\n    public readonly showRemove: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Показывать кнопку переименования (отключена до появления API на бэке). */\n    public readonly showRename: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Блокирует кнопки действий (например, во время сабмита формы). */\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Запрошено скачивание файла. */\n    public readonly download: OutputEmitterRef<void> = output<void>();\n\n    /** Запрошено удаление файла. */\n    public readonly removed: OutputEmitterRef<void> = output<void>();\n\n    /** Запрошено переименование файла. */\n    public readonly rename: OutputEmitterRef<void> = output<void>();\n\n    protected onDownload(): void {\n        this.download.emit();\n    }\n\n    protected onRemove(): void {\n        this.removed.emit();\n    }\n\n    protected onRename(): void {\n        this.rename.emit();\n    }\n}\n","<ng-container rtBlock=\"rt-file-card\">\n    <rt-icon rtElem=\"icon\" [size]=\"iconSize()\" [name]=\"iconName()\" />\n\n    <span rtElem=\"text\">\n        <span rtElem=\"title\" qa-dataid=\"file-card-title\" [rtTooltip]=\"title()\">{{ title() }}</span>\n        <span rtElem=\"name\" qa-dataid=\"file-card-name\" [rtTooltip]=\"name()\">{{ name() | rtTruncateMiddle }}</span>\n    </span>\n\n    <span rtElem=\"meta\">\n        @if (hasSize()) {\n            <span rtElem=\"size\" qa-dataid=\"file-card-size\">{{ sizeLabel() }}</span>\n        }\n\n        @if (showDownload()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-download\"\n                icon=\"ico-download\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiDownload\"\n                [tooltip]=\"t().uiDownload\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onDownload()\" />\n        }\n\n        @if (showRename()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-rename\"\n                icon=\"ico-edit\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiRename\"\n                [tooltip]=\"t().uiRename\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onRename()\" />\n        }\n\n        @if (showRemove()) {\n            <rt-icon-button\n                rtElem=\"action\"\n                qa-dataid=\"file-card-remove\"\n                icon=\"ico-trash\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiRemove\"\n                [tooltip]=\"t().uiRemove\"\n                [size]=\"actionSize()\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onRemove()\" />\n        }\n    </span>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,214 @@
+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 рамка мерцает. */
+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.
+ */
+
+export { RtFileDropComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-file-drop.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-file-drop.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/file-drop/rt-file-drop.component.ts","../../../projects/ui-kit-v2/src/lib/components/file-drop/rt-file-drop.component.html","../../../projects/ui-kit-v2/src/lib/components/file-drop/rt-tools-ui-kit-v2-file-drop.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    DestroyRef,\n    ElementRef,\n    HostListener,\n    inject,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    output,\n    OutputEmitterRef,\n    Signal,\n    signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtFileDrop } from './rt-file-drop.model';\n\nconst BEM_BLOCK: string = 'rt-file-drop';\n\n/** Задержка скрытия оверлея: dragleave стреляет при переходе между дочерними\n    элементами, без debounce рамка мерцает. */\nconst DRAG_LEAVE_DEBOUNCE_MS: number = 80;\n\n/**\n * Зона перетаскивания файлов: оборачивает произвольный контент через\n * content-projection и превращает его в drop-зону. При перетаскивании файла над\n * областью рисует приглушающий оверлей-приглашение поверх контента, на drop —\n * эмитит выброшенные файлы через `(filesDropped)`.\n *\n * Мультизонный режим: при непустом `zones` оверлей делится на вертикальную стопку\n * равных зон с подписями; зона под курсором подсвечивается, drop эмитится через\n * `(zoneFilesDropped)` с id зоны (а `(filesDropped)` в этом режиме НЕ эмитится).\n * Зона курсора вычисляется по Y-координате против host-rect — оверлей остаётся\n * pointer-events:none, drag-события продолжают идти в host-listener'ы.\n *\n * `accept` (формат как у нативного input[accept]) отфильтровывает неподходящие\n * файлы до эмита — drop в обход файл-пикера не проносит запрещённые расширения;\n * отбрасывание молчаливое, как у самого пикера.\n *\n * Слушает drag-события на собственном host'е (всплывают со всего спроецированного\n * контента), гасит браузерный навигейт по файлу и принимает только перетаскивание\n * файлов (а не внутренний drag элементов формы). Потребитель управляет приёмом\n * через `[disabled]` (например «активна вкладка файлов и форма редактируема») и\n * сам решает, что делать с файлами — компонент состояние файлов не хранит.\n *\n * Оверлей `pointer-events: none` — не перехватывает drag/drop, события доходят до\n * host-listener'ов.\n */\n@Component({\n    selector: 'rt-file-drop',\n    templateUrl: './rt-file-drop.component.html',\n    styleUrl: './rt-file-drop.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtFileDropComponent {\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    readonly #host: ElementRef<HTMLElement> = inject(ElementRef);\n\n    readonly #t_uiFileDropOverlay: Signal<string> = rtKitLabel('uiFileDropOverlay');\n\n    #dragLeaveTimer: ReturnType<typeof setTimeout> | null = null;\n\n    /** Активна ли подсветка drop-зоны (файл тащат над областью). */\n    protected readonly isDragging: WritableSignal<boolean> = signal(false);\n\n    /** Зона под курсором в мультизонном режиме (id из `zones`). */\n    protected readonly activeZoneId: WritableSignal<string | null> = signal(null);\n\n    protected readonly hasZones: Signal<boolean> = computed((): boolean => this.zones().length > 0);\n\n    protected readonly overlayText: Signal<string> = computed((): string => this.overlayLabel() || this.#t_uiFileDropOverlay());\n\n    /** Приём drop'а выключен (потребитель решает по своему контексту). */\n    public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Пусто — берётся переведённая подпись по умолчанию */\n    public readonly overlayLabel: InputSignal<string> = input<string>('');\n\n    /** Мультизонный режим: непустой список зон делит оверлей на стопку целей. */\n    public readonly zones: InputSignal<readonly IRtFileDrop.Zone[]> = input<readonly IRtFileDrop.Zone[]>([]);\n\n    /** Фильтр расширений/MIME (формат нативного input[accept]); пусто — без фильтра. */\n    public readonly accept: InputSignal<string> = input<string>('');\n\n    public readonly filesDropped: OutputEmitterRef<File[]> = output<File[]>();\n\n    /** Drop в мультизонном режиме: файлы + id зоны, куда их бросили. */\n    public readonly zoneFilesDropped: OutputEmitterRef<IRtFileDrop.ZoneDrop> = output<IRtFileDrop.ZoneDrop>();\n\n    public readonly draggingChange: OutputEmitterRef<boolean> = output<boolean>();\n\n    constructor() {\n        this.#destroyRef.onDestroy((): void => this.#clearLeaveTimer());\n    }\n\n    @HostListener('dragenter', ['$event'])\n    @HostListener('dragover', ['$event'])\n    protected onDragOver(event: DragEvent): void {\n        if (this.disabled() || !this.#isFileDrag(event)) {\n            return;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n        if (event.dataTransfer) {\n            event.dataTransfer.dropEffect = 'copy';\n        }\n        this.#clearLeaveTimer();\n        this.#setDragging(true);\n        if (this.hasZones()) {\n            this.activeZoneId.set(this.#zoneIdAt(event.clientY));\n        }\n    }\n\n    @HostListener('dragleave', ['$event'])\n    protected onDragLeave(event: DragEvent): void {\n        if (!this.isDragging()) {\n            return;\n        }\n        event.preventDefault();\n        this.#clearLeaveTimer();\n        this.#dragLeaveTimer = setTimeout((): void => {\n            this.#dragLeaveTimer = null;\n            this.#setDragging(false);\n        }, DRAG_LEAVE_DEBOUNCE_MS);\n    }\n\n    @HostListener('drop', ['$event'])\n    protected onDrop(event: DragEvent): void {\n        if (this.disabled() || !this.#isFileDrag(event)) {\n            return;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n        this.#clearLeaveTimer();\n        this.#setDragging(false);\n\n        const files: File[] = Array.from(event.dataTransfer?.files ?? []).filter((file: File): boolean => this.#matchesAccept(file));\n        if (files.length === 0) {\n            return;\n        }\n        if (!this.hasZones()) {\n            this.filesDropped.emit(files);\n            return;\n        }\n        const zoneId: string | null = this.#zoneIdAt(event.clientY);\n        if (zoneId === null) {\n            return;\n        }\n        this.zoneFilesDropped.emit({ zoneId, files });\n    }\n\n    /** Меняет dragging-флаг и эмитит изменение только при реальном переходе. */\n    #setDragging(value: boolean): void {\n        if (this.isDragging() === value) {\n            return;\n        }\n        this.isDragging.set(value);\n        this.draggingChange.emit(value);\n        if (!value) {\n            this.activeZoneId.set(null);\n        }\n    }\n\n    /** Зона по Y-координате курсора: стопка равных по высоте полос host-rect. */\n    #zoneIdAt(clientY: number): string | null {\n        const zones: readonly IRtFileDrop.Zone[] = this.zones();\n        if (zones.length === 0) {\n            return null;\n        }\n        const rect: DOMRect = this.#host.nativeElement.getBoundingClientRect();\n        if (rect.height <= 0) {\n            return zones[0].id;\n        }\n        const ratio: number = (clientY - rect.top) / rect.height;\n        const index: number = Math.min(zones.length - 1, Math.max(0, Math.floor(ratio * zones.length)));\n        return zones[index].id;\n    }\n\n    /** Файл проходит accept-фильтр (расширение `.pdf` / MIME `image/png` / `image/*`). */\n    #matchesAccept(file: File): boolean {\n        const accept: string = this.accept().trim();\n        if (accept === '') {\n            return true;\n        }\n        const name: string = file.name.toLowerCase();\n        const mime: string = file.type.toLowerCase();\n        return accept.split(',').some((raw: string): boolean => {\n            const token: string = raw.trim().toLowerCase();\n            if (token === '') {\n                return false;\n            }\n            if (token.startsWith('.')) {\n                return name.endsWith(token);\n            }\n            if (token.endsWith('/*')) {\n                return mime.startsWith(token.slice(0, -1));\n            }\n            return mime === token;\n        });\n    }\n\n    /** Перетаскивают именно файлы (а не внутренний drag элементов формы). */\n    #isFileDrag(event: DragEvent): boolean {\n        const types: readonly string[] | undefined = event.dataTransfer?.types;\n        return types?.includes('Files') ?? false;\n    }\n\n    #clearLeaveTimer(): void {\n        if (this.#dragLeaveTimer !== null) {\n            clearTimeout(this.#dragLeaveTimer);\n            this.#dragLeaveTimer = null;\n        }\n    }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}