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

package/src/rich-editor/lib/components/ai-chat/rt-ai-chat.component.scss

@@ -0,0 +1,222 @@
+@layer rt-kit.components {
+    /* rt-ai-chat — панель ИИ-ассистента. ViewEncapsulation.None.
+       Корень шаблона — ng-container: класс блока висит на хосте. Высоту задаёт родитель. */
+
+    .rt-ai-chat {
+        --rt-ai-chat-bubble-radius: var(--rt-radius-xl);
+        --rt-ai-chat-column-border-width: var(--rt-border-width-thin);
+        --rt-ai-chat-column-width: 280px;
+        --rt-ai-chat-match-bg: var(--rt-yellow-400);
+        --rt-ai-chat-match-color: var(--rt-neutral-950);
+        --rt-ai-chat-match-radius: var(--rt-radius-xs);
+        --rt-ai-chat-unread-radius: var(--rt-radius-full);
+
+        display: flex;
+        overflow: hidden;
+        background: var(--rt-color-bg-surface);
+        block-size: 100%;
+        color: var(--rt-color-text-primary);
+        min-block-size: 0;
+
+        &__thread-column {
+            display: flex;
+            flex: none;
+            flex-direction: column;
+            border-inline-end: var(--rt-ai-chat-column-border-width) solid var(--rt-color-border-default);
+            inline-size: var(--rt-ai-chat-column-width);
+        }
+
+        &__column-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            gap: var(--rt-space-xs);
+        }
+
+        &__column-title {
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__conversation {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            min-block-size: 0;
+            min-inline-size: 0;
+        }
+
+        &__header {
+            display: flex;
+            flex: none;
+            align-items: center;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            gap: var(--rt-space-xs);
+        }
+
+        &__heading {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            min-inline-size: 0;
+        }
+
+        &__title {
+            display: inline-flex;
+            align-items: center;
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+            gap: var(--rt-space-xs);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__subtitle {
+            overflow: hidden;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__actions {
+            display: flex;
+            flex: none;
+            align-items: center;
+            gap: var(--rt-space-xs);
+        }
+
+        &__feed {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            padding: var(--rt-space-md);
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-md);
+            min-block-size: 0;
+            overflow-y: auto;
+        }
+
+        &__spinner {
+            align-self: center;
+            margin: auto;
+        }
+
+        &__empty {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: var(--rt-space-lg);
+            margin-block: auto;
+        }
+
+        &__suggestions {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
+
+        &__question {
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        &__bubble {
+            display: flex;
+            flex-direction: column;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            border-radius: var(--rt-ai-chat-bubble-radius);
+            background: var(--rt-color-bg-subtle);
+            gap: var(--rt-space-2xs);
+            max-inline-size: 80%;
+        }
+
+        &__author,
+        &__time {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__author {
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__bubble-text {
+            margin: 0;
+            line-height: var(--rt-leading-normal);
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+        }
+
+        &__error {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: var(--rt-space-sm);
+
+            rt-message {
+                align-self: stretch;
+            }
+        }
+
+        &__composer {
+            box-sizing: border-box;
+            flex: none;
+            padding: var(--rt-space-sm) var(--rt-space-md) 0;
+        }
+
+        &__disclaimer {
+            flex: none;
+            padding: var(--rt-space-xs) var(--rt-space-md) var(--rt-space-sm);
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+            text-align: center;
+        }
+
+        &__threads {
+            flex: 1 1 auto;
+            min-block-size: 0;
+        }
+
+        &__thread-title {
+            overflow: hidden;
+            min-inline-size: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__thread-part {
+            &--match {
+                border-radius: var(--rt-ai-chat-match-radius);
+                background: var(--rt-ai-chat-match-bg);
+                color: var(--rt-ai-chat-match-color);
+            }
+        }
+
+        &__thread-meta {
+            display: flex;
+            flex: none;
+            align-items: center;
+            gap: var(--rt-space-xs);
+        }
+
+        &__thread-unread {
+            border-radius: var(--rt-ai-chat-unread-radius);
+            background: var(--rt-color-action-primary);
+            color: var(--rt-color-text-inverse);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: 18px;
+            padding-inline: 6px;
+        }
+
+        &__thread-time {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+        }
+    }
+}

package/src/rich-editor/lib/components/rich-editor/rt-rich-editor.component.scss

@@ -37,10 +37,13 @@
             overflow-y: auto;
         }
 
+        // Зону ввода рисует Quill, и класса кита у неё нет: сброс полосы для узлов приложения под
+        // узлом кита вернул бы ей полосу браузера. Она наследует тихую полосу редактора, как раньше.
         .ql-editor {
             background-color: var(--rt-color-bg-surface-subtle);
             color: var(--rt-color-text-primary);
             min-block-size: 96px;
+            scrollbar-color: inherit;
         }
 
         .ql-editor.ql-blank:before {

package/src/styles/_scrollbar.scss

@@ -14,6 +14,15 @@
         scrollbar-width: thin;
     }
 
+    // `scrollbar-color` наследуется, и без этого правила прокручиваемый узел приложения внутри узла
+    // кита получал прозрачную полосу кита, а Chrome при заданном свойстве не читал его
+    // `::-webkit-scrollbar`. Первый узел без класса кита под узлом кита возвращает умолчание
+    // браузера, и всё под ним наследует уже его. Вес селектора нулевой: правило приложения на том же
+    // узле перебивает и его.
+    :where([class^='rt-'], [class*=' rt-']) > :where(:not([class^='rt-'], [class*=' rt-'])) {
+        scrollbar-color: auto;
+    }
+
     // Проявляется ползунок наведением на саму зону, а не на себя: навести на невидимое нечем.
     // Фокус внутри зоны показывает его наравне — прокрутка с клавиатуры идёт без указателя, и
     // человек иначе не видит ни того, где он в списке, ни того, что список прокручивается.

package/styles/tokens.css

@@ -6342,6 +6342,9 @@ html.rt-theme-dark.rt-preset-material {
     scrollbar-color: transparent transparent;
     scrollbar-width: thin;
   }
+  :where([class^=rt-], [class*=" rt-"]) > :where(:not([class^=rt-], [class*=" rt-"])) {
+    scrollbar-color: auto;
+  }
   :where([class^=rt-], [class*=" rt-"]):hover,
   :where([class^=rt-], [class*=" rt-"]):focus-within {
     scrollbar-color: var(--rt-color-border-default) transparent;

package/types/rt-tools-ui-kit-v2-action-bar.d.ts

@@ -22,6 +22,11 @@ declare namespace IRtActionBar {
     interface Action {
         readonly label: string;
         readonly icon?: IRtIcon.Name;
+        /**
+         * Имя Material вместо значка кита: рисуется так же, как вход `glyph` у `rt-icon` — парой из
+         * перечня кита или лигатурой шрифта. Значок кита, заданный рядом, сильнее.
+         */
+        readonly glyph?: string;
         readonly look?: IRtActionBar.Look;
         readonly run?: () => void;
         readonly menu?: readonly IRtActionBar.Action[];
@@ -80,12 +85,14 @@ declare class RtActionBarComponent {
      */
     protected readonly actions: Signal<readonly IActionView[]>;
     readonly config: InputSignal<IRtActionBar.Config>;
+    /** Значок кнопки, закрывающей полосу. */
+    readonly closeIcon: InputSignal<IRtIcon.Name>;
     readonly actionRun: OutputEmitterRef<IRtActionBar.Action>;
     readonly closed: OutputEmitterRef<void>;
     protected onAction(action: IRtActionBar.Action): void;
     protected onClose(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtActionBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtActionBarComponent, "rt-action-bar", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, { "actionRun": "actionRun"; "closed": "closed"; }, never, never, true, [{ directive: typeof i1.RtRadiusDirective; inputs: { "radius": "radius"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtActionBarComponent, "rt-action-bar", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "closeIcon": { "alias": "closeIcon"; "required": false; "isSignal": true; }; }, { "actionRun": "actionRun"; "closed": "closed"; }, never, never, true, [{ directive: typeof i1.RtRadiusDirective; inputs: { "radius": "radius"; }; outputs: {}; }]>;
 }
 
 /**
@@ -109,11 +116,13 @@ declare class RtActionBarHolderComponent {
     /** Стоит ли полоса в разметке: она остаётся в ней и на время ухода. */
     protected readonly shown: Signal<boolean>;
     protected readonly leaving: Signal<boolean>;
+    /** Значок кнопки, закрывающей полосу, — уходит в саму полосу. */
+    readonly closeIcon: InputSignal<IRtIcon.Name>;
     constructor();
     /** Крестик сообщает наружу; выбранное отпускает служба, которой список и владеет. */
     protected onClosed(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtActionBarHolderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtActionBarHolderComponent, "rt-action-bar-holder", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtActionBarHolderComponent, "rt-action-bar-holder", never, { "closeIcon": { "alias": "closeIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**

package/types/rt-tools-ui-kit-v2-ai-run-status.d.ts

@@ -0,0 +1,49 @@
+import * as i0 from '@angular/core';
+import { Signal, InputSignal, ModelSignal } from '@angular/core';
+import { IRtIcon } from '@rt-tools/ui-kit-v2/core';
+import { IRtTimeline } from '@rt-tools/ui-kit-v2/timeline';
+
+declare namespace IRtAiRunStatus {
+    /**
+     * Состояние хода работы ассистента:
+     * - `running` — модель работает: крутилка и бегущий блик по подписи;
+     * - `done` — ответ готов;
+     * - `stopped` — человек остановил ответ;
+     * - `failed` — ответ оборвался ошибкой.
+     */
+    type State = 'running' | 'done' | 'stopped' | 'failed';
+}
+
+/**
+ * Строка хода работы ИИ-ассистента: значок состояния, подпись текущего шага или итога, мета
+ * (время, число шагов) и раскрытие списка пройденных шагов. Пока модель работает, по подписи
+ * бежит блик; при `prefers-reduced-motion` подпись стоит ровным цветом.
+ *
+ * Компонент презентационный: состояние, подпись и шаги приходят готовыми, разбор потока
+ * событий модели остаётся в приложении.
+ */
+declare class RtAiRunStatusComponent {
+    #private;
+    protected readonly stepsId: string;
+    protected readonly hasSteps: Signal<boolean>;
+    protected readonly isOpen: Signal<boolean>;
+    protected readonly mark: Signal<{
+        name: IRtIcon.Name;
+        color: IRtIcon.Color;
+    } | null>;
+    protected readonly toggleLabel: Signal<string>;
+    readonly state: InputSignal<IRtAiRunStatus.State>;
+    /** Подпись: текущий шаг, пока модель работает, или итог — «Worked for 31s». */
+    readonly label: InputSignal<string>;
+    /** Вторичная строка справа от подписи: время шага или число шагов. Пусто — не рисуется. */
+    readonly meta: InputSignal<string>;
+    /** Пройденные шаги. Пустой список — строку нельзя раскрыть. */
+    readonly steps: InputSignal<readonly IRtTimeline.Step[]>;
+    /** Раскрыт ли список шагов. */
+    readonly expanded: ModelSignal<boolean>;
+    protected onToggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtAiRunStatusComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtAiRunStatusComponent, "rt-ai-run-status", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
+}
+
+export { IRtAiRunStatus, RtAiRunStatusComponent };

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

@@ -152,6 +152,11 @@ interface IRtAsideConfig<TData = unknown> {
      * панель через `close()`. Без него родитель — корневой injector, и панель живёт сама по себе.
      */
     injector?: Injector;
+    /**
+     * Снимать панель при переходе по адресу. По умолчанию `true`; `false` оставляет её открытой —
+     * для панели, которая сама ведёт навигацию и должна пережить смену адреса.
+     */
+    disposeOnNavigation?: boolean;
 }
 /**
  * Программный API для открытия side-sheet поверх CDK Overlay.
@@ -273,6 +278,9 @@ declare namespace IRtAsideHeader {
  * Слот `[asideHeaderContent]` — строка под заголовком на всю ширину шапки: поиск, вкладки,
  * сводка. Пустой слот места не занимает.
  *
+ * Слот `[asideHeadingContent]` — содержимое в колонке заголовка, под подписью и бэйджами, по её
+ * левому краю. Пустой слот ничего не рисует.
+ *
  * `ViewEncapsulation.None` — для единообразия с rt-dialog-header (стили
  * префиксованы `.rt-aside-header`).
  *
@@ -325,7 +333,7 @@ declare class RtAsideHeaderComponent {
     readonly dismiss: OutputEmitterRef<void>;
     protected onDismiss(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtAsideHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideHeaderComponent, "rt-aside-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "overline": { "alias": "overline"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badges": { "alias": "badges"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["[asideActions]", "[asideHeaderContent]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideHeaderComponent, "rt-aside-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "overline": { "alias": "overline"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badges": { "alias": "badges"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["[asideHeadingContent]", "[asideActions]", "[asideHeaderContent]"], true, never>;
 }
 
 /**

package/types/rt-tools-ui-kit-v2-copy-value.d.ts

@@ -0,0 +1,29 @@
+import * as i0 from '@angular/core';
+import { WritableSignal, Signal, InputSignal, OutputEmitterRef } from '@angular/core';
+import { IRtIcon } from '@rt-tools/ui-kit-v2/core';
+
+/**
+ * Значение, которое человек переносит в другое место: номер обращения, ключ, идентификатор.
+ * Подпись слева, значение на подложке и кнопка копирования с подсказкой. После нажатия иконка
+ * на две секунды меняется на галочку, подпись — на «Copied».
+ */
+declare class RtCopyValueComponent {
+    #private;
+    protected readonly copied: WritableSignal<boolean>;
+    protected readonly iconName: Signal<IRtIcon.Name>;
+    protected readonly actionLabel: Signal<string>;
+    /** Что уходит в буфер и что показано на подложке. */
+    readonly value: InputSignal<string>;
+    /** Подпись слева от значения; пусто — не рисуется. */
+    readonly label: InputSignal<string>;
+    /** Подсказка и имя кнопки в покое; пусто — переведённое «Copy». */
+    readonly copyLabel: InputSignal<string>;
+    /** Значение ушло в буфер. */
+    readonly copiedValue: OutputEmitterRef<string>;
+    constructor();
+    protected onCopy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtCopyValueComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtCopyValueComponent, "rt-copy-value", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "copyLabel": { "alias": "copyLabel"; "required": false; "isSignal": true; }; }, { "copiedValue": "copiedValue"; }, never, never, true, never>;
+}
+
+export { RtCopyValueComponent };