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

package/src/styles/_color-scheme.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+/* A colour scheme — the brand ramp under its own name, switched on by `data-rt-scheme` on `<html>`,
+   as in the first kit.
+
+   The scheme rewrites the steps, not the assignments: the accent of the own set derives from
+   `--rt-brand-*`, the accent of the material set from `--rt-mat-blue-100`, and the dark theme refers to
+   the same steps. So one ramp repaints every look the kit is drawn in, and the names the components
+   read stay untouched.
+
+   The scheme answers on the root only. A value referring to a step is resolved where it is declared,
+   and the assignments are declared on the root: a scheme on an inner node would change the steps under
+   assignments already resolved, and the piece would keep the old accent.
+
+   A Material theme of the application wins over the scheme in the material set: its `--mat-sys-primary`
+   stands in front of the step in that set's assignments.
+
+   Usage:
+     @use '@rt-tools/ui-kit-v2/styles/color-scheme' as rt;
+     @include rt.rt-color-scheme('teal', (50: #e6f4f3, …, 500: #008582, …, 950: #00201f));
+*/
+
+$brand-steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
+
+@mixin rt-color-scheme($name, $ramp) {
+    @if meta.type-of($name) != 'string' {
+        @error 'rt-color-scheme: the name must be a string, got #{meta.type-of($name)}.';
+    }
+
+    @if meta.type-of($ramp) != 'map' or not map.has-key($ramp, 500) {
+        @error 'rt-color-scheme("#{$name}"): the ramp is a map of (step: colour) and holds at least the step 500 — the brand colour.';
+    }
+
+    @each $step, $value in $ramp {
+        @if not list.index($brand-steps, $step) {
+            @error 'rt-color-scheme("#{$name}"): unknown step #{$step}. Allowed: #{$brand-steps}.';
+        }
+    }
+
+    /* `:root[…]` (0,2,0) outranks the steps on `:root` (0,1,0) whatever the order of the sources. */
+    :root[data-rt-scheme='#{$name}'] {
+        @each $step, $value in $ramp {
+            --rt-brand-#{$step}: #{$value};
+        }
+
+        --rt-mat-blue-100: #{map.get($ramp, 500)};
+    }
+}

package/types/rt-tools-ui-kit-v2-rich-editor.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { AfterViewInit, OnDestroy, Signal, ElementRef, WritableSignal, InputSignal, OutputEmitterRef, InputSignalWithTransform, TemplateRef, PipeTransform } from '@angular/core';
+import { AfterViewInit, OnDestroy, Signal, ElementRef, WritableSignal, InputSignal, OutputEmitterRef, InputSignalWithTransform, ModelSignal, TemplateRef, PipeTransform } from '@angular/core';
 import { RtFormControlBase, IQuillDelta, TRtKitLabelMap } from '@rt-tools/ui-kit-v2';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { FormGroup, FormControl } from '@angular/forms';
@@ -32,6 +32,8 @@ declare class RtRichEditorComponent extends RtFormControlBase<IQuillDelta | null
     readonly enterPressed: OutputEmitterRef<void>;
     readonly displayText: Signal<string>;
     ngAfterViewInit(): Promise<void>;
+    /** Ставит фокус в редактор; до загрузки Quill ничего не делает. */
+    focus(): void;
     ngOnDestroy(): void;
     writeValue(value: IQuillDelta | null): void;
     setDisabledState(isDisabled: boolean): void;
@@ -70,6 +72,9 @@ interface IComposerFormShape {
  *
  * Отправка — `Enter` (без Shift) или клик по иконке; `Shift+Enter` — перенос
  * строки. Кнопка отправки активна, пока есть непустой текст или вложения.
+ *
+ * Со `stoppable` во время `sending` вместо стрелки стоит кнопка «Стоп», а поле
+ * остаётся открытым: следующий вопрос набирается, пока идёт ответ.
  */
 declare class RtMessageComposerComponent {
     #private;
@@ -77,12 +82,15 @@ declare class RtMessageComposerComponent {
     protected readonly placeholderText: Signal<string>;
     protected readonly fileInput: Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly textInput: Signal<ElementRef<HTMLTextAreaElement> | undefined>;
+    protected readonly richEditor: Signal<RtRichEditorComponent | undefined>;
     protected readonly form: FormGroup<IComposerFormShape>;
     protected readonly files: Signal<readonly File[]>;
     /** Отправка доступна: есть контент (текст/delta/файлы), композер не занят. */
     protected readonly canSend: Signal<boolean>;
     /** Капсула выше одной строки: перенос текста, вложения или режим форматирования. */
     protected readonly tall: Signal<boolean>;
+    /** Идёт ответ, который можно остановить: вместо стрелки — «Стоп», поле открыто. */
+    protected readonly isStoppable: Signal<boolean>;
     protected readonly capsuleMods: Signal<Record<string, boolean>>;
     /** Текст-подсказка textarea. Пусто — берётся переведённое умолчание. */
     readonly placeholder: InputSignal<string>;
@@ -94,6 +102,11 @@ declare class RtMessageComposerComponent {
     readonly attachments: InputSignalWithTransform<boolean, BooleanInput>;
     /** Отправка в процессе — блокирует submit, кнопка отправки крутит индикатор. */
     readonly sending: InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Ответ на сообщение можно остановить. Во время `sending` стрелку сменяет кнопка
+     * «Стоп», а поле не блокируется; без входа `sending` блокирует поле, как раньше.
+     */
+    readonly stoppable: InputSignalWithTransform<boolean, BooleanInput>;
     /** Полная блокировка композера. */
     readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
     /** Rich-режим: вместо textarea — Quill-редактор, отправка уходит delta-каналом. */
@@ -112,14 +125,21 @@ declare class RtMessageComposerComponent {
     readonly droppedFiles: InputSignal<File[] | null>;
     /** Отправка сообщения: текст + файлы (последние — только при `attachments`). */
     readonly submitted: OutputEmitterRef<IRtMessageComposer.SubmitPayload>;
+    /** Черновик поля без форматирования: задаётся снаружи, правки уходят наружу, после отправки пуст. */
+    readonly text: ModelSignal<string>;
+    /** Клик по кнопке «Стоп» во время ответа, который можно остановить. */
+    readonly stopped: OutputEmitterRef<void>;
     constructor();
+    /** Ставит фокус в поле: в textarea, а в режиме форматирования — в rich-редактор. */
+    focus(): void;
     protected onKeydown(event: KeyboardEvent): void;
+    protected stop(): void;
     protected openPicker(): void;
     protected onFilesPicked(event: Event): void;
     protected removeFile(index: number): void;
     protected submit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtMessageComposerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtMessageComposerComponent, "rt-message-composer", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "sending": { "alias": "sending"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "formatting": { "alias": "formatting"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "droppedFiles": { "alias": "droppedFiles"; "required": false; "isSignal": true; }; }, { "submitted": "submitted"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtMessageComposerComponent, "rt-message-composer", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "sending": { "alias": "sending"; "required": false; "isSignal": true; }; "stoppable": { "alias": "stoppable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "formatting": { "alias": "formatting"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "droppedFiles": { "alias": "droppedFiles"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "submitted": "submitted"; "text": "textChange"; "stopped": "stopped"; }, never, never, true, never>;
 }
 
 /**