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

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { viewChild, signal, computed, input, output, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, booleanAttribute, numberAttribute, effect, TemplateRef, Directive, Pipe, contentChild, afterRenderEffect } from '@angular/core';
+import { viewChild, signal, computed, input, output, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, booleanAttribute, numberAttribute, model, effect, TemplateRef, Directive, Pipe, contentChild, afterRenderEffect } from '@angular/core';
 import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
 import { RtFormControlBase, coerceQuillDeltaOutput, rtKitLabel, RT_KIT_LABELS, RtFileCardComponent, RtIconButtonComponent, RT_KIT_LOCALE, RtButtonDirective, RtConfirmDirective, RtDeltaViewComponent, RtFileDropComponent, RtIconComponent, RtMenuComponent, RtNoteComponent, RtSkeletonWrapperComponent, RtSpinnerComponent, RtToolbarComponent, RtToolbarLeftDirective, RtToolbarRightDirective, fileNameFromUrl } from '@rt-tools/ui-kit-v2';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { NgTemplateOutlet, DatePipe } from '@angular/common';
@@ -102,6 +102,10 @@ class RtRichEditorComponent extends RtFormControlBase {
         quill.on('text-change', () => this.#onEditorChange());
         this.mounted.set(true);
     }
+    /** Ставит фокус в редактор; до загрузки Quill ничего не делает. */
+    focus() {
+        this.#quill?.focus();
+    }
     ngOnDestroy() {
         this.#quill = null;
         this.mounted.set(false);
@@ -189,6 +193,9 @@ function rtComposerWraps(node) {
  *
  * Отправка — `Enter` (без Shift) или клик по иконке; `Shift+Enter` — перенос
  * строки. Кнопка отправки активна, пока есть непустой текст или вложения.
+ *
+ * Со `stoppable` во время `sending` вместо стрелки стоит кнопка «Стоп», а поле
+ * остаётся открытым: следующий вопрос набирается, пока идёт ответ.
  */
 class RtMessageComposerComponent {
     #formValue;
@@ -207,6 +214,8 @@ class RtMessageComposerComponent {
         ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
         this.textInput = viewChild('textEl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textInput" }] : /* istanbul ignore next */ []));
+        this.richEditor = viewChild(RtRichEditorComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "richEditor" }] : /* istanbul ignore next */ []));
         this.form = new FormGroup({
             message: new FormControl('', { nonNullable: true }),
             files: new FormControl([], { nonNullable: true }),
@@ -231,6 +240,9 @@ class RtMessageComposerComponent {
         /** Капсула выше одной строки: перенос текста, вложения или режим форматирования. */
         this.tall = computed(() => this.#multiRow() || this.formatting() || (this.attachments() && this.files().length > 0), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tall" }] : /* istanbul ignore next */ []));
+        /** Идёт ответ, который можно остановить: вместо стрелки — «Стоп», поле открыто. */
+        this.isStoppable = computed(() => this.stoppable() && this.sending() && !this.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isStoppable" }] : /* istanbul ignore next */ []));
         this.capsuleMods = computed(() => ({
             tall: this.tall(),
             disabled: this.disabled(),
@@ -248,6 +260,11 @@ class RtMessageComposerComponent {
         this.attachments = input(false, { ...(ngDevMode ? { debugName: "attachments" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Отправка в процессе — блокирует submit, кнопка отправки крутит индикатор. */
         this.sending = input(false, { ...(ngDevMode ? { debugName: "sending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Ответ на сообщение можно остановить. Во время `sending` стрелку сменяет кнопка
+         * «Стоп», а поле не блокируется; без входа `sending` блокирует поле, как раньше.
+         */
+        this.stoppable = input(false, { ...(ngDevMode ? { debugName: "stoppable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Полная блокировка композера. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Rich-режим: вместо textarea — Quill-редактор, отправка уходит delta-каналом. */
@@ -268,11 +285,23 @@ class RtMessageComposerComponent {
         ...(ngDevMode ? [{ debugName: "droppedFiles" }] : /* istanbul ignore next */ []));
         /** Отправка сообщения: текст + файлы (последние — только при `attachments`). */
         this.submitted = output();
+        /** Черновик поля без форматирования: задаётся снаружи, правки уходят наружу, после отправки пуст. */
+        this.text = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Клик по кнопке «Стоп» во время ответа, который можно остановить. */
+        this.stopped = output();
         this.#formValue = toSignal(this.form.valueChanges, {
             initialValue: this.form.value,
         });
         effect(() => {
-            const blocked = this.disabled() || this.sending();
+            const draft = this.text();
+            if (this.form.controls.message.value !== draft) {
+                this.form.controls.message.setValue(draft);
+            }
+        });
+        this.form.controls.message.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => this.text.set(value));
+        effect(() => {
+            const blocked = this.disabled() || (this.sending() && !this.stoppable());
             if (blocked && this.form.enabled) {
                 this.form.disable({ emitEvent: false });
             }
@@ -298,6 +327,14 @@ class RtMessageComposerComponent {
             }
         });
     }
+    /** Ставит фокус в поле: в textarea, а в режиме форматирования — в rich-редактор. */
+    focus() {
+        if (this.formatting()) {
+            this.richEditor()?.focus();
+            return;
+        }
+        this.textInput()?.nativeElement.focus();
+    }
     onKeydown(event) {
         // Enter без модификаторов — отправка; Shift+Enter оставляем переносом строки.
         // isComposing — не перехватываем подтверждение IME-композиции.
@@ -306,6 +343,11 @@ class RtMessageComposerComponent {
             this.submit();
         }
     }
+    stop() {
+        if (this.isStoppable()) {
+            this.stopped.emit();
+        }
+    }
     openPicker() {
         if (this.disabled() || this.sending()) {
             return;
@@ -345,7 +387,7 @@ 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 }, 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: 
+    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 }, stoppable: { classPropertyName: "stoppable", publicName: "stoppable", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", text: "textChange", stopped: "stopped" }, 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 }, { propertyName: "richEditor", first: true, predicate: RtRichEditorComponent, 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            @if (isStoppable()) {\n                <rt-icon-button\n                    rtElem=\"send\"\n                    qa-dataid=\"message-composer-stop\"\n                    icon=\"stop\"\n                    radius=\"full\"\n                    variant=\"primary\"\n                    [ariaLabel]=\"t().chatStopAria\"\n                    [tooltip]=\"t().chatStopLabel\"\n                    (clicked)=\"stop()\" />\n            } @else {\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            }\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
@@ -369,8 +411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         ModDirective,
                     ], host: {
                         class: BEM_BLOCK$1,
-                    }, 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"] }] } });
+                    }, 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            @if (isStoppable()) {\n                <rt-icon-button\n                    rtElem=\"send\"\n                    qa-dataid=\"message-composer-stop\"\n                    icon=\"stop\"\n                    radius=\"full\"\n                    variant=\"primary\"\n                    [ariaLabel]=\"t().chatStopAria\"\n                    [tooltip]=\"t().chatStopLabel\"\n                    (clicked)=\"stop()\" />\n            } @else {\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            }\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 }] }], richEditor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtRichEditorComponent), { 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 }] }], stoppable: [{ type: i0.Input, args: [{ isSignal: true, alias: "stoppable", 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"] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], stopped: [{ type: i0.Output, args: ["stopped"] }] } });
 
 /**
  * Захватывает `<ng-template rtChatMessageActions let-message>` — содержимое «…»-меню
@@ -870,7 +912,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", "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 }); }
+                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", "stoppable", "disabled", "formatting", "toolbar", "minRows", "maxRows", "droppedFiles", "text"], outputs: ["submitted", "textChange", "stopped"] }, { 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,