@rt-tools/ui-kit-v2 0.13.1 → 0.14.0

package/README.md

@@ -157,10 +157,10 @@ export const appConfig: ApplicationConfig = {
 ## Что внутри
 
 **Компоненты** — 73 семейства: поля формы (`rt-input`, `rt-select`, `rt-multiselect`,
-`rt-date-picker`, `rt-file-input`, `rt-rich-editor`, `rt-field`), таблица с настройкой колонок и
-пагинацией, панель правки записи с маршрутом и защитой несохранённого, диалоги, чат с композером,
-календарь, шапка страницы с навигацией, тосты, просмотрщик фотографий, показ размеченного текста
-(`rt-markdown-text`) и остальное.
+`rt-date-picker`, `rt-date-range`, `rt-file-input`, `rt-rich-editor`, `rt-field`), таблица с
+настройкой колонок и пагинацией, панель правки записи с маршрутом и защитой несохранённого,
+диалоги, чат с композером, календарь, шапка страницы с навигацией, тосты, просмотрщик фотографий,
+показ размеченного текста (`rt-markdown-text`) и остальное.
 
 **Дизайн-система** — `src/styles`:
 
@@ -225,6 +225,27 @@ provideRtKitLabels({
 доживает до рантайма) и то, что на них отвечают готовой строкой: подстановки вида `{{name}}`
 переводчик делает сам. Подпись, которой он не дал, берётся английской — поштучно, не набором.
 
+## Скругление одним входом
+
+Каждый компонент с поверхностью принимает вход `radius` — шаг общей шкалы: `none`, `xs`, `sm`,
+`ms`, `md`, `lg`, `xl`, `2xl`, `full`. Без входа компонент скруглён по макету, и умолчание у
+каждого своё.
+
+```html
+<rt-card radius="none">…</rt-card>
+<rt-input radius="full" />
+<button rtButton label="Сохранить" radius="sm"></button>
+```
+
+Шаг ложится на хост атрибутом `data-rt-radius` и переназначает своё свойство главной поверхности.
+Вложенный компонент его не наследует: скруглённая карточка не скругляет кнопки внутри.
+Внутренние части — точка, значок, кольцо фокуса — держат своё скругление. Круглую кнопку для
+всего приложения задаёт настройка кита `components.button.radius`.
+
+Входа нет у подтверждения, всплывающего уведомления, подсказки и просмотра фото: их рисует
+директива или сервис поверх страницы, и тега для шага у приложения нет. Все шаги всех компонентов
+показаны на странице витрины `Foundation / Radius`.
+
 ## Настройка компонента снаружи
 
 Компонент не берёт ступень шкалы там, где рисует себя: между ступенью и местом употребления
@@ -305,4 +326,3 @@ pnpm exec stylelint "projects/ui-kit-v2/**/*.scss"
 - **Кит больше не настаивает на своём восклицательным знаком.** Таблица в карточном виде
   перестала перебивать `min-width` приложения: приложению, которому нужен и горизонтальный
   скролл, и карточный вид, остаётся сузить свой селектор до широкого экрана.
-

package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs

@@ -175,10 +175,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], propDecorators: { editorHost: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
 const BEM_BLOCK$1 = 'rt-message-composer';
+/** Текст в поле выше полутора строк — он перенёсся, и капсула берёт скругление высокой. */
+function rtComposerWraps(node) {
+    const style = getComputedStyle(node);
+    const line = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5;
+    const text = node.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+    return text > line * 1.5;
+}
 /**
- * Композер сообщения: авто-растущая textarea сверху, под разделительной линией —
- * ряд контролов (слева — прикрепить файл, справа — отправить). Презентационный,
- * без data-access: наружу торчит только `submitted` с текстом и файлами.
+ * Композер сообщения — капсула: слева круглая кнопка вложения, по центру авто-растущая
+ * textarea, справа круглая кнопка отправки; вложения стоят внутри капсулы над строкой.
+ * Презентационный, без data-access: наружу торчит только `submitted` с текстом и файлами.
  *
  * Отправка — `Enter` (без Shift) или клик по иконке; `Shift+Enter` — перенос
  * строки. Кнопка отправки активна, пока есть непустой текст или вложения.
@@ -186,13 +193,20 @@ const BEM_BLOCK$1 = 'rt-message-composer';
 class RtMessageComposerComponent {
     #formValue;
     #t_chatPlaceholder;
+    /** Текст перенёсся на вторую строку — меряется по высоте textarea после отрисовки. */
+    #multiRow;
     constructor() {
         this.#t_chatPlaceholder = rtKitLabel('chatPlaceholder');
+        /** Текст перенёсся на вторую строку — меряется по высоте textarea после отрисовки. */
+        this.#multiRow = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#multiRow" }] : /* istanbul ignore next */ []));
         this.t = inject(RT_KIT_LABELS);
         this.placeholderText = computed(() => this.placeholder() || this.#t_chatPlaceholder(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
         this.fileInput = viewChild('fileEl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+        this.textInput = viewChild('textEl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textInput" }] : /* istanbul ignore next */ []));
         this.form = new FormGroup({
             message: new FormControl('', { nonNullable: true }),
             files: new FormControl([], { nonNullable: true }),
@@ -214,15 +228,25 @@ class RtMessageComposerComponent {
             return hasText || hasFiles;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []));
+        /** Капсула выше одной строки: перенос текста, вложения или режим форматирования. */
+        this.tall = computed(() => this.#multiRow() || this.formatting() || (this.attachments() && this.files().length > 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tall" }] : /* istanbul ignore next */ []));
+        this.capsuleMods = computed(() => ({
+            tall: this.tall(),
+            disabled: this.disabled(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "capsuleMods" }] : /* istanbul ignore next */ []));
         /** Текст-подсказка textarea. Пусто — берётся переведённое умолчание. */
         this.placeholder = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         /** Фильтр типов для file-input (`.pdf,.doc,...`). */
         this.accept = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        /** Строка под капсулой про Enter и Shift + Enter. */
+        this.hint = input(false, { ...(ngDevMode ? { debugName: "hint" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Показывать кнопку вложения и список файлов. */
         this.attachments = input(false, { ...(ngDevMode ? { debugName: "attachments" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Отправка в процессе — блокирует submit и показывает её недоступность. */
+        /** Отправка в процессе — блокирует submit, кнопка отправки крутит индикатор. */
         this.sending = input(false, { ...(ngDevMode ? { debugName: "sending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Полная блокировка композера. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -256,6 +280,17 @@ class RtMessageComposerComponent {
                 this.form.enable({ emitEvent: false });
             }
         });
+        // Поле пересоздаётся при смене режима форматирования: наблюдатель идёт за текущим узлом.
+        effect((onCleanup) => {
+            const node = this.textInput()?.nativeElement;
+            if (!node || typeof ResizeObserver === 'undefined') {
+                this.#multiRow.set(false);
+                return;
+            }
+            const observer = new ResizeObserver(() => this.#multiRow.set(rtComposerWraps(node)));
+            observer.observe(node);
+            onCleanup(() => observer.disconnect());
+        });
         effect(() => {
             const dropped = this.droppedFiles();
             if (dropped !== null && dropped.length > 0 && this.attachments()) {
@@ -310,13 +345,13 @@ class RtMessageComposerComponent {
         this.form.reset({ message: '', files: [], delta: null });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMessageComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtMessageComposerComponent, isStandalone: true, selector: "rt-message-composer", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, sending: { classPropertyName: "sending", publicName: "sending", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatting: { classPropertyName: "formatting", publicName: "formatting", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, droppedFiles: { classPropertyName: "droppedFiles", publicName: "droppedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { classAttribute: "rt-message-composer" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-message-composer\" [formGroup]=\"form\">\n    @if (formatting()) {\n        <rt-rich-editor\n            qa-dataid=\"message-composer-rich\"\n            formControlName=\"delta\"\n            [placeholder]=\"placeholderText()\"\n            [toolbar]=\"toolbar()\"\n            (enterPressed)=\"submit()\" />\n    } @else {\n        <textarea\n            rtElem=\"input\"\n            qa-dataid=\"message-composer-input\"\n            cdkTextareaAutosize\n            formControlName=\"message\"\n            [attr.aria-label]=\"t().chatComposerAria\"\n            [placeholder]=\"placeholderText()\"\n            [cdkAutosizeMinRows]=\"minRows()\"\n            [cdkAutosizeMaxRows]=\"maxRows()\"\n            (keydown)=\"onKeydown($event)\"></textarea>\n    }\n\n    @if (attachments() && files().length) {\n        <div rtElem=\"files\" qa-dataid=\"message-composer-files\">\n            @for (file of files(); track $index) {\n                <rt-file-card\n                    showRemove\n                    qa-dataid=\"message-composer-file\"\n                    size=\"sm\"\n                    [name]=\"file.name\"\n                    [sizeBytes]=\"file.size\"\n                    [disabled]=\"disabled() || sending()\"\n                    (removed)=\"removeFile($index)\" />\n            }\n        </div>\n    }\n\n    <div rtElem=\"divider\"></div>\n\n    <div rtElem=\"controls\">\n        @if (attachments()) {\n            <input\n                #fileEl\n                qa-dataid=\"message-composer-file-input\"\n                type=\"file\"\n                hidden\n                multiple\n                [attr.accept]=\"accept() || null\"\n                (change)=\"onFilesPicked($event)\" />\n            <rt-icon-button\n                qa-dataid=\"message-composer-attach\"\n                icon=\"paperclip\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().chatAttachAria\"\n                [tooltip]=\"t().chatAttachTooltip\"\n                [disabled]=\"disabled() || sending()\"\n                (clicked)=\"openPicker()\" />\n        }\n\n        <rt-icon-button\n            rtElem=\"send\"\n            qa-dataid=\"message-composer-send\"\n            icon=\"send\"\n            variant=\"primary\"\n            [ariaLabel]=\"t().chatSendAria\"\n            [tooltip]=\"t().chatSendLabel\"\n            [disabled]=\"!canSend()\"\n            (clicked)=\"submit()\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-message-composer{--rt-message-composer-radius: var(--rt-radius-md);--rt-message-composer-border-width: var(--rt-border-width-thin);--rt-message-composer-divider-width: var(--rt-border-width-thin);display:flex;flex-direction:column;padding:var(--rt-space-4);border:var(--rt-message-composer-border-width) solid var(--rt-color-border-default);border-radius:var(--rt-message-composer-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-2);inline-size:100%}.rt-message-composer:focus-within{border-color:var(--rt-color-border-strong)}.rt-message-composer__input{padding:0;border:0;margin:0;background:transparent;color:inherit;font:inherit;font-size:var(--rt-text-sm);inline-size:100%;line-height:var(--rt-leading-snug);min-inline-size:0;outline:0;resize:none}.rt-message-composer__input::placeholder{color:var(--rt-color-text-muted)}.rt-message-composer__input:disabled{cursor:not-allowed}.rt-message-composer__files{display:flex;flex-direction:column;gap:var(--rt-space-1)}.rt-message-composer__divider{background:var(--rt-color-border-default);block-size:var(--rt-message-composer-divider-width);margin-inline:calc(-1 * var(--rt-space-4))}.rt-message-composer__controls{display:flex;align-items:center;gap:var(--rt-space-2)}.rt-message-composer__send{margin-inline-start:auto}}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtMessageComposerComponent, isStandalone: true, selector: "rt-message-composer", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, sending: { classPropertyName: "sending", publicName: "sending", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatting: { classPropertyName: "formatting", publicName: "formatting", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, droppedFiles: { classPropertyName: "droppedFiles", publicName: "droppedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { classAttribute: "rt-message-composer" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileEl"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["textEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-message-composer\" [formGroup]=\"form\">\n    <div rtElem=\"capsule\" qa-dataid=\"message-composer-capsule\" [rtMod]=\"capsuleMods()\">\n        @if (attachments() && files().length) {\n            <div rtElem=\"files\" qa-dataid=\"message-composer-files\">\n                @for (file of files(); track $index) {\n                    <rt-file-card\n                        showRemove\n                        qa-dataid=\"message-composer-file\"\n                        size=\"sm\"\n                        [name]=\"file.name\"\n                        [sizeBytes]=\"file.size\"\n                        [disabled]=\"disabled() || sending()\"\n                        (removed)=\"removeFile($index)\" />\n                }\n            </div>\n        }\n\n        @if (formatting()) {\n            <rt-rich-editor\n                rtElem=\"rich\"\n                qa-dataid=\"message-composer-rich\"\n                formControlName=\"delta\"\n                [placeholder]=\"placeholderText()\"\n                [toolbar]=\"toolbar()\"\n                (enterPressed)=\"submit()\" />\n        }\n\n        <div rtElem=\"row\">\n            @if (attachments()) {\n                <input\n                    #fileEl\n                    qa-dataid=\"message-composer-file-input\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    [attr.accept]=\"accept() || null\"\n                    (change)=\"onFilesPicked($event)\" />\n                <rt-icon-button\n                    qa-dataid=\"message-composer-attach\"\n                    icon=\"paperclip\"\n                    iconColor=\"muted\"\n                    radius=\"full\"\n                    variant=\"ghost\"\n                    [ariaLabel]=\"t().chatAttachAria\"\n                    [tooltip]=\"t().chatAttachTooltip\"\n                    [disabled]=\"disabled() || sending()\"\n                    (clicked)=\"openPicker()\" />\n            }\n\n            @if (!formatting()) {\n                <textarea\n                    #textEl\n                    rtElem=\"input\"\n                    qa-dataid=\"message-composer-input\"\n                    cdkTextareaAutosize\n                    formControlName=\"message\"\n                    [attr.aria-label]=\"t().chatComposerAria\"\n                    [placeholder]=\"placeholderText()\"\n                    [cdkAutosizeMinRows]=\"minRows()\"\n                    [cdkAutosizeMaxRows]=\"maxRows()\"\n                    (keydown)=\"onKeydown($event)\"></textarea>\n            }\n\n            <rt-icon-button\n                rtElem=\"send\"\n                qa-dataid=\"message-composer-send\"\n                icon=\"arrow-up\"\n                radius=\"full\"\n                variant=\"primary\"\n                [ariaLabel]=\"t().chatSendAria\"\n                [tooltip]=\"t().chatSendLabel\"\n                [loading]=\"sending()\"\n                [disabled]=\"!canSend()\"\n                (clicked)=\"submit()\" />\n        </div>\n    </div>\n\n    @if (hint()) {\n        <p rtElem=\"hint\" qa-dataid=\"message-composer-hint\">{{ t().chatComposerHint }}</p>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-message-composer{--rt-message-composer-radius: var(--rt-radius-full);--rt-message-composer-tall-radius: var(--rt-radius-2xl);--rt-message-composer-border-width: var(--rt-border-width-thin);display:flex;flex-direction:column;gap:calc(var(--rt-space-1) * 1.5);inline-size:100%}.rt-message-composer__capsule{display:flex;flex-direction:column;padding:calc(var(--rt-space-1) * 1.5);border:var(--rt-message-composer-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-message-composer-radius);background:var(--rt-input-color-bg);gap:calc(var(--rt-space-1) * 1.5)}.rt-message-composer__capsule:focus-within{border-color:var(--rt-input-color-border-focus);background:var(--rt-color-bg-surface);box-shadow:var(--rt-input-focus-shadow)}.rt-message-composer__capsule--tall{--rt-message-composer-radius: var(--rt-message-composer-tall-radius)}.rt-message-composer__capsule--disabled{background:var(--rt-input-color-bg-disabled)}.rt-message-composer__files{display:flex;flex-direction:column;gap:var(--rt-space-1)}.rt-message-composer__rich{inline-size:100%}.rt-message-composer__row{display:flex;align-items:flex-end;gap:var(--rt-space-2)}.rt-message-composer__input{box-sizing:content-box;flex:1 1 auto;border:0;margin:0;background:transparent;color:var(--rt-input-color-text);font:inherit;font-size:var(--rt-input-font-size);inline-size:100%;line-height:var(--rt-leading-normal);margin-inline-start:calc(var(--rt-space-1) * 1.5);min-inline-size:0;outline:0;padding-block:calc((var(--rt-control-height-md) - 1lh) / 2);resize:none;scrollbar-color:var(--rt-color-border-default) transparent;scrollbar-gutter:stable;scrollbar-width:thin}.rt-message-composer__input::placeholder{color:var(--rt-input-color-text-placeholder)}.rt-message-composer__input:disabled{cursor:not-allowed}.rt-message-composer__input:disabled::placeholder{color:var(--rt-color-text-disabled)}.rt-message-composer__send{margin-inline-start:auto}.rt-message-composer__hint{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug)}}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // angular
                 ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 
                 // cdk
                 CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: 
                 // standalone components / directives
-                RtFileCardComponent, selector: "rt-file-card", inputs: ["name", "sizeBytes", "size", "showDownload", "showRemove", "showRename", "disabled"], outputs: ["download", "removed", "rename"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtRichEditorComponent, selector: "rt-rich-editor", inputs: ["placeholder", "toolbar"], outputs: ["enterPressed"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                RtFileCardComponent, selector: "rt-file-card", inputs: ["name", "sizeBytes", "size", "showDownload", "showRemove", "showRename", "disabled"], outputs: ["download", "removed", "rename"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtRichEditorComponent, selector: "rt-rich-editor", inputs: ["placeholder", "toolbar"], outputs: ["enterPressed"] }, { 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.1.6", ngImport: i0, type: RtMessageComposerComponent, decorators: [{
             type: Component,
@@ -331,10 +366,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         RtRichEditorComponent,
                         BlockDirective,
                         ElemDirective,
+                        ModDirective,
                     ], host: {
                         class: BEM_BLOCK$1,
-                    }, template: "<ng-container rtBlock=\"rt-message-composer\" [formGroup]=\"form\">\n    @if (formatting()) {\n        <rt-rich-editor\n            qa-dataid=\"message-composer-rich\"\n            formControlName=\"delta\"\n            [placeholder]=\"placeholderText()\"\n            [toolbar]=\"toolbar()\"\n            (enterPressed)=\"submit()\" />\n    } @else {\n        <textarea\n            rtElem=\"input\"\n            qa-dataid=\"message-composer-input\"\n            cdkTextareaAutosize\n            formControlName=\"message\"\n            [attr.aria-label]=\"t().chatComposerAria\"\n            [placeholder]=\"placeholderText()\"\n            [cdkAutosizeMinRows]=\"minRows()\"\n            [cdkAutosizeMaxRows]=\"maxRows()\"\n            (keydown)=\"onKeydown($event)\"></textarea>\n    }\n\n    @if (attachments() && files().length) {\n        <div rtElem=\"files\" qa-dataid=\"message-composer-files\">\n            @for (file of files(); track $index) {\n                <rt-file-card\n                    showRemove\n                    qa-dataid=\"message-composer-file\"\n                    size=\"sm\"\n                    [name]=\"file.name\"\n                    [sizeBytes]=\"file.size\"\n                    [disabled]=\"disabled() || sending()\"\n                    (removed)=\"removeFile($index)\" />\n            }\n        </div>\n    }\n\n    <div rtElem=\"divider\"></div>\n\n    <div rtElem=\"controls\">\n        @if (attachments()) {\n            <input\n                #fileEl\n                qa-dataid=\"message-composer-file-input\"\n                type=\"file\"\n                hidden\n                multiple\n                [attr.accept]=\"accept() || null\"\n                (change)=\"onFilesPicked($event)\" />\n            <rt-icon-button\n                qa-dataid=\"message-composer-attach\"\n                icon=\"paperclip\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().chatAttachAria\"\n                [tooltip]=\"t().chatAttachTooltip\"\n                [disabled]=\"disabled() || sending()\"\n                (clicked)=\"openPicker()\" />\n        }\n\n        <rt-icon-button\n            rtElem=\"send\"\n            qa-dataid=\"message-composer-send\"\n            icon=\"send\"\n            variant=\"primary\"\n            [ariaLabel]=\"t().chatSendAria\"\n            [tooltip]=\"t().chatSendLabel\"\n            [disabled]=\"!canSend()\"\n            (clicked)=\"submit()\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-message-composer{--rt-message-composer-radius: var(--rt-radius-md);--rt-message-composer-border-width: var(--rt-border-width-thin);--rt-message-composer-divider-width: var(--rt-border-width-thin);display:flex;flex-direction:column;padding:var(--rt-space-4);border:var(--rt-message-composer-border-width) solid var(--rt-color-border-default);border-radius:var(--rt-message-composer-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-2);inline-size:100%}.rt-message-composer:focus-within{border-color:var(--rt-color-border-strong)}.rt-message-composer__input{padding:0;border:0;margin:0;background:transparent;color:inherit;font:inherit;font-size:var(--rt-text-sm);inline-size:100%;line-height:var(--rt-leading-snug);min-inline-size:0;outline:0;resize:none}.rt-message-composer__input::placeholder{color:var(--rt-color-text-muted)}.rt-message-composer__input:disabled{cursor:not-allowed}.rt-message-composer__files{display:flex;flex-direction:column;gap:var(--rt-space-1)}.rt-message-composer__divider{background:var(--rt-color-border-default);block-size:var(--rt-message-composer-divider-width);margin-inline:calc(-1 * var(--rt-space-4))}.rt-message-composer__controls{display:flex;align-items:center;gap:var(--rt-space-2)}.rt-message-composer__send{margin-inline-start:auto}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileEl', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], sending: [{ type: i0.Input, args: [{ isSignal: true, alias: "sending", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatting: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatting", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], droppedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppedFiles", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
+                    }, template: "<ng-container rtBlock=\"rt-message-composer\" [formGroup]=\"form\">\n    <div rtElem=\"capsule\" qa-dataid=\"message-composer-capsule\" [rtMod]=\"capsuleMods()\">\n        @if (attachments() && files().length) {\n            <div rtElem=\"files\" qa-dataid=\"message-composer-files\">\n                @for (file of files(); track $index) {\n                    <rt-file-card\n                        showRemove\n                        qa-dataid=\"message-composer-file\"\n                        size=\"sm\"\n                        [name]=\"file.name\"\n                        [sizeBytes]=\"file.size\"\n                        [disabled]=\"disabled() || sending()\"\n                        (removed)=\"removeFile($index)\" />\n                }\n            </div>\n        }\n\n        @if (formatting()) {\n            <rt-rich-editor\n                rtElem=\"rich\"\n                qa-dataid=\"message-composer-rich\"\n                formControlName=\"delta\"\n                [placeholder]=\"placeholderText()\"\n                [toolbar]=\"toolbar()\"\n                (enterPressed)=\"submit()\" />\n        }\n\n        <div rtElem=\"row\">\n            @if (attachments()) {\n                <input\n                    #fileEl\n                    qa-dataid=\"message-composer-file-input\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    [attr.accept]=\"accept() || null\"\n                    (change)=\"onFilesPicked($event)\" />\n                <rt-icon-button\n                    qa-dataid=\"message-composer-attach\"\n                    icon=\"paperclip\"\n                    iconColor=\"muted\"\n                    radius=\"full\"\n                    variant=\"ghost\"\n                    [ariaLabel]=\"t().chatAttachAria\"\n                    [tooltip]=\"t().chatAttachTooltip\"\n                    [disabled]=\"disabled() || sending()\"\n                    (clicked)=\"openPicker()\" />\n            }\n\n            @if (!formatting()) {\n                <textarea\n                    #textEl\n                    rtElem=\"input\"\n                    qa-dataid=\"message-composer-input\"\n                    cdkTextareaAutosize\n                    formControlName=\"message\"\n                    [attr.aria-label]=\"t().chatComposerAria\"\n                    [placeholder]=\"placeholderText()\"\n                    [cdkAutosizeMinRows]=\"minRows()\"\n                    [cdkAutosizeMaxRows]=\"maxRows()\"\n                    (keydown)=\"onKeydown($event)\"></textarea>\n            }\n\n            <rt-icon-button\n                rtElem=\"send\"\n                qa-dataid=\"message-composer-send\"\n                icon=\"arrow-up\"\n                radius=\"full\"\n                variant=\"primary\"\n                [ariaLabel]=\"t().chatSendAria\"\n                [tooltip]=\"t().chatSendLabel\"\n                [loading]=\"sending()\"\n                [disabled]=\"!canSend()\"\n                (clicked)=\"submit()\" />\n        </div>\n    </div>\n\n    @if (hint()) {\n        <p rtElem=\"hint\" qa-dataid=\"message-composer-hint\">{{ t().chatComposerHint }}</p>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-message-composer{--rt-message-composer-radius: var(--rt-radius-full);--rt-message-composer-tall-radius: var(--rt-radius-2xl);--rt-message-composer-border-width: var(--rt-border-width-thin);display:flex;flex-direction:column;gap:calc(var(--rt-space-1) * 1.5);inline-size:100%}.rt-message-composer__capsule{display:flex;flex-direction:column;padding:calc(var(--rt-space-1) * 1.5);border:var(--rt-message-composer-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-message-composer-radius);background:var(--rt-input-color-bg);gap:calc(var(--rt-space-1) * 1.5)}.rt-message-composer__capsule:focus-within{border-color:var(--rt-input-color-border-focus);background:var(--rt-color-bg-surface);box-shadow:var(--rt-input-focus-shadow)}.rt-message-composer__capsule--tall{--rt-message-composer-radius: var(--rt-message-composer-tall-radius)}.rt-message-composer__capsule--disabled{background:var(--rt-input-color-bg-disabled)}.rt-message-composer__files{display:flex;flex-direction:column;gap:var(--rt-space-1)}.rt-message-composer__rich{inline-size:100%}.rt-message-composer__row{display:flex;align-items:flex-end;gap:var(--rt-space-2)}.rt-message-composer__input{box-sizing:content-box;flex:1 1 auto;border:0;margin:0;background:transparent;color:var(--rt-input-color-text);font:inherit;font-size:var(--rt-input-font-size);inline-size:100%;line-height:var(--rt-leading-normal);margin-inline-start:calc(var(--rt-space-1) * 1.5);min-inline-size:0;outline:0;padding-block:calc((var(--rt-control-height-md) - 1lh) / 2);resize:none;scrollbar-color:var(--rt-color-border-default) transparent;scrollbar-gutter:stable;scrollbar-width:thin}.rt-message-composer__input::placeholder{color:var(--rt-input-color-text-placeholder)}.rt-message-composer__input:disabled{cursor:not-allowed}.rt-message-composer__input:disabled::placeholder{color:var(--rt-color-text-disabled)}.rt-message-composer__send{margin-inline-start:auto}.rt-message-composer__hint{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileEl', { isSignal: true }] }], textInput: [{ type: i0.ViewChild, args: ['textEl', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], sending: [{ type: i0.Input, args: [{ isSignal: true, alias: "sending", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatting: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatting", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], droppedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppedFiles", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
 
 /**
  * Захватывает `<ng-template rtChatMessageActions let-message>` — содержимое «…»-меню
@@ -834,7 +870,7 @@ class RtChatComponent {
                 // Angular
                 CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 
                 // standalone components / directives
-                RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "rounded", "loading", "loadingIcon", "pressed"] }, { kind: "directive", type: RtConfirmDirective, selector: "[rtConfirm]", inputs: ["rtConfirm", "rtConfirmTitle", "rtConfirmLabel", "rtConfirmCancelLabel", "rtConfirmTone", "rtConfirmDisabled"], outputs: ["confirmed"], exportAs: ["rtConfirm"] }, { kind: "component", type: RtDeltaViewComponent, selector: "rt-delta-view", inputs: ["delta"] }, { kind: "component", type: RtFileCardComponent, selector: "rt-file-card", inputs: ["name", "sizeBytes", "size", "showDownload", "showRemove", "showRename", "disabled"], outputs: ["download", "removed", "rename"] }, { kind: "component", type: RtFileDropComponent, selector: "rt-file-drop", inputs: ["disabled", "overlayLabel", "zones", "accept"], outputs: ["filesDropped", "zoneFilesDropped", "draggingChange"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "fill", "rotate"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtMessageComposerComponent, selector: "rt-message-composer", inputs: ["placeholder", "accept", "attachments", "sending", "disabled", "formatting", "toolbar", "minRows", "maxRows", "droppedFiles"], outputs: ["submitted"] }, { kind: "component", type: RtNoteComponent, selector: "rt-note" }, { kind: "component", type: RtSkeletonWrapperComponent, selector: "rt-skeleton-wrapper", inputs: ["width", "height", "shape", "size", "borderRadius", "animation", "isLoading"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color"] }, { kind: "component", type: RtToolbarComponent, selector: "rt-toolbar", inputs: ["dense"] }, { kind: "directive", type: RtToolbarLeftDirective, selector: "[rtToolbarLeft]" }, { kind: "directive", type: RtToolbarRightDirective, selector: "[rtToolbarRight]" }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: RtChatStatusLabelPipe, name: "rtChatStatusLabel" }, { kind: "pipe", type: RtChatMessageHasActionsPipe, name: "rtChatMessageHasActions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "pressed"] }, { kind: "directive", type: RtConfirmDirective, selector: "[rtConfirm]", inputs: ["rtConfirm", "rtConfirmTitle", "rtConfirmLabel", "rtConfirmCancelLabel", "rtConfirmTone", "rtConfirmDisabled"], outputs: ["confirmed"], exportAs: ["rtConfirm"] }, { kind: "component", type: RtDeltaViewComponent, selector: "rt-delta-view", inputs: ["delta"] }, { kind: "component", type: RtFileCardComponent, selector: "rt-file-card", inputs: ["name", "sizeBytes", "size", "showDownload", "showRemove", "showRename", "disabled"], outputs: ["download", "removed", "rename"] }, { kind: "component", type: RtFileDropComponent, selector: "rt-file-drop", inputs: ["disabled", "overlayLabel", "zones", "accept"], outputs: ["filesDropped", "zoneFilesDropped", "draggingChange"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "fill", "rotate"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtMessageComposerComponent, selector: "rt-message-composer", inputs: ["placeholder", "accept", "hint", "attachments", "sending", "disabled", "formatting", "toolbar", "minRows", "maxRows", "droppedFiles"], outputs: ["submitted"] }, { kind: "component", type: RtNoteComponent, selector: "rt-note" }, { kind: "component", type: RtSkeletonWrapperComponent, selector: "rt-skeleton-wrapper", inputs: ["width", "height", "shape", "size", "radius", "animation", "isLoading"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color"] }, { kind: "component", type: RtToolbarComponent, selector: "rt-toolbar", inputs: ["dense"] }, { kind: "directive", type: RtToolbarLeftDirective, selector: "[rtToolbarLeft]" }, { kind: "directive", type: RtToolbarRightDirective, selector: "[rtToolbarRight]" }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: RtChatStatusLabelPipe, name: "rtChatStatusLabel" }, { kind: "pipe", type: RtChatMessageHasActionsPipe, name: "rtChatMessageHasActions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtChatComponent, decorators: [{
             type: Component,