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

package/src/lib/components/toggle-switch/rt-toggle-switch.component.scss

@@ -6,17 +6,20 @@
        и на `<rt-toggle-switch>`, и на корне шаблона, поэтому правила блока вложены в хост —
        так они достаются только корню шаблона. */
 
+    /* Свойства объявлены на хосте: правило приложения на теге переопределяет их, а
+       ступени размера — тоже правила хоста, по модификатору на нём самом. Имена подписи
+       не повторяют первый кит: у его переключателя свои `--rt-toggle-label-*`. */
     rt-toggle-switch {
-        display: inline-flex;
-
-        /* Шаг входа `radius` переназначает скругление дорожки, ручка идёт за ней. */
-        @include kv.radius-steps('--rt-toggle-radius', '> .rt-toggle-switch');
-    }
-
-    rt-toggle-switch .rt-toggle-switch {
         --rt-toggle-radius: var(--rt-radius-full);
         --rt-toggle-focus-shadow: var(--rt-shadow-focus-ring);
         --rt-toggle-transition-duration: var(--rt-duration-fast);
+        --rt-toggle-disabled-opacity: 0.5;
+        --rt-toggle-justify: flex-start;
+        --rt-toggle-label-gap: var(--rt-space-2);
+        --rt-toggle-label-size: var(--rt-text-sm);
+        --rt-toggle-label-color-off: var(--rt-color-text-muted);
+        --rt-toggle-label-color-on: var(--rt-color-text-primary);
+        --rt-toggle-label-color-hover: var(--rt-color-text-primary);
 
         /* Геометрия размера. База — `sm`; модификаторы перекрывают только числа,
            правила ниже к размерам не привязаны. `thumb-travel` держим явным
@@ -29,17 +32,16 @@
         --rt-toggle-icon-inset: 4px;
 
         display: inline-flex;
-        padding: 0;
-        border: none;
-        background: none;
-        cursor: pointer;
+        align-items: center;
+        justify-content: var(--rt-toggle-justify);
+        gap: var(--rt-toggle-label-gap);
 
-        &--md {
+        &.rt-toggle-switch--md {
             --rt-toggle-track-width: 52px;
             --rt-toggle-thumb-travel: 28px;
         }
 
-        &--lg {
+        &.rt-toggle-switch--lg {
             --rt-toggle-track-width: 60px;
             --rt-toggle-track-height: 30px;
             --rt-toggle-thumb-size: 24px;
@@ -47,6 +49,22 @@
             --rt-toggle-icon-inset: 6px;
         }
 
+        /* Прозрачность — на хосте: подпись гаснет вместе с переключателем. */
+        &.rt-toggle-switch--disabled {
+            opacity: var(--rt-toggle-disabled-opacity);
+        }
+
+        /* Шаг входа `radius` переназначает скругление дорожки, ручка идёт за ней. */
+        @include kv.radius-steps('--rt-toggle-radius');
+    }
+
+    rt-toggle-switch .rt-toggle-switch {
+        display: inline-flex;
+        padding: 0;
+        border: none;
+        background: none;
+        cursor: pointer;
+
         &:focus-visible {
             border-radius: var(--rt-toggle-radius);
             box-shadow: var(--rt-toggle-focus-shadow);
@@ -56,7 +74,6 @@
 
         &--disabled {
             cursor: not-allowed;
-            opacity: 0.5;
         }
 
         &__track {
@@ -114,5 +131,27 @@
         &--on .rt-toggle-switch__thumb {
             transform: translateX(var(--rt-toggle-thumb-travel));
         }
+
+        &__label {
+            color: var(--rt-toggle-label-color-off);
+            cursor: pointer;
+            font-size: var(--rt-toggle-label-size);
+            transition: color var(--rt-toggle-transition-duration) ease;
+            user-select: none;
+        }
+    }
+
+    /* Состояния подписи — по модификаторам хоста: подпись стоит рядом с кнопкой, не в ней.
+       Наведение ниже включённого: под курсором подпись берёт свой цвет и у включённого. */
+    rt-toggle-switch.rt-toggle-switch--on .rt-toggle-switch__label {
+        color: var(--rt-toggle-label-color-on);
+    }
+
+    rt-toggle-switch:not(.rt-toggle-switch--disabled):hover .rt-toggle-switch__label {
+        color: var(--rt-toggle-label-color-hover);
+    }
+
+    rt-toggle-switch.rt-toggle-switch--disabled .rt-toggle-switch__label {
+        cursor: not-allowed;
     }
 }

package/src/lib/components/toolbar/rt-toolbar.component.scss

@@ -1,19 +1,29 @@
 @layer rt-kit.components {
     .rt-toolbar {
-        /* Отступ полосы сверху и снизу — свойства блока: обёртка переставляет их снаружи. */
+        /* Раскладка полосы — свойства блока: обёртка и приложение переставляют их снаружи.
+           Высота — наименьшая: полоса, стёкшая в колонку на узком экране, не обрезается. */
         --rt-toolbar-padding-top: var(--rt-space-2);
         --rt-toolbar-padding-bottom: var(--rt-space-2);
+        --rt-toolbar-padding-inline: 0;
+        --rt-toolbar-height: auto;
+        --rt-toolbar-border-bottom: none;
+        --rt-toolbar-gap: var(--rt-space-2);
+        --rt-toolbar-center-justify: flex-end;
+        --rt-toolbar-center-overflow: visible;
 
         display: block;
 
         &__bars {
             display: flex;
             width: 100%;
+            min-height: var(--rt-toolbar-height);
+            box-sizing: border-box;
             flex-direction: row;
             align-items: center;
             justify-content: space-between;
-            padding: var(--rt-toolbar-padding-top) 0 var(--rt-toolbar-padding-bottom);
-            gap: var(--rt-space-2);
+            padding: var(--rt-toolbar-padding-top) var(--rt-toolbar-padding-inline) var(--rt-toolbar-padding-bottom);
+            border-bottom: var(--rt-toolbar-border-bottom);
+            gap: var(--rt-toolbar-gap);
         }
 
         &__bar {
@@ -29,8 +39,9 @@
             }
 
             &--center {
+                overflow: var(--rt-toolbar-center-overflow);
                 flex: 1 1 auto;
-                justify-content: flex-end;
+                justify-content: var(--rt-toolbar-center-justify);
                 gap: var(--rt-space-2);
 
                 // Контрол-фильтр (поиск/селект) занимает ширину center и право-

package/src/lib/components/tooltip/CONTEXT.md

@@ -5,11 +5,11 @@
 <rt-icon-button icon="ico-trash" ariaLabel="Удалить" tooltip="Удалить" />
 ```
 
-| вход                     | тип                           | умолчание                                       |
-| ------------------------ | ----------------------------- | ----------------------------------------------- |
-| `rtTooltip`              | `string \| null \| undefined` | `''`                                            |
-| `rtTooltipPlacement`     | `'top' \| 'bottom' \| null`   | `null` — сверху, под материальным набором снизу |
-| `rtTooltipWhenTruncated` | `boolean`                     | `false` — подсказка только у обрезанного текста |
+| вход                     | тип                                              | умолчание                                       |
+| ------------------------ | ------------------------------------------------ | ----------------------------------------------- |
+| `rtTooltip`              | `string \| null \| undefined`                    | `''`                                            |
+| `rtTooltipPlacement`     | `'top' \| 'bottom' \| 'left' \| 'right' \| null` | `null` — сверху, под материальным набором снизу |
+| `rtTooltipWhenTruncated` | `boolean`                                        | `false` — подсказка только у обрезанного текста |
 
 Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
 

package/src/rich-editor/lib/components/chat/CONTEXT.md

@@ -16,8 +16,8 @@
 ```
 
 Основные входы: `messages`, `hasThread`, `canReply`, `replyBlockReason`, `loading`, `fetching`,
-`sending`, `attachments`, `accept`, `formatting`, `title`, `showRefresh`, `showExpand`, `fill`.
-Выходы: `send`, `refresh` и события по сообщениям (повтор, удаление).
+`sending`, `attachments`, `accept`, `formatting`, `title`, `showRefresh`, `showExpand`, `fill`,
+`typingText`. Выходы: `send`, `refresh`, `typing` и события по сообщениям (повтор, удаление).
 
 ## Главное, что нужно знать
 
@@ -35,6 +35,11 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 **Поле ответа гейтится `canReply`.** Когда отвечать нельзя, вместо него рисуется причина
 из `replyBlockReason`.
 
+**Набор текста уходит наружу одним событием на отрезок.** `typing` шлёт `true`, когда человек начал
+набирать, и `false` на пустом поле, при отправке и после 3 секунд без ввода — в обоих режимах поля.
+Что печатает вторая сторона, показывает `typingText`: плашка стоит поверх низа ленты и места не
+занимает, пустая строка её прячет. Текст и перевод даёт приложение.
+
 **Удалённое сообщение остаётся в ленте** отдельной пометкой вместо текста: иначе непонятно, на
 что отвечали соседние реплики.
 

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

@@ -3,6 +3,8 @@
         --rt-chat-bubble-radius: var(--rt-radius-lg);
         --rt-chat-message-border-width: var(--rt-border-width-thin);
         --rt-chat-transition-duration: var(--rt-duration-fast);
+        --rt-chat-typing-radius: var(--rt-radius-full);
+        --rt-chat-typing-shadow: var(--rt-shadow-sm);
 
         display: flex;
         flex-direction: column;
@@ -114,6 +116,29 @@
             inset: 0;
         }
 
+        // Строка «печатает» стоит поверх низа ленты и места не занимает: лента не сдвигается, а чат
+        // без строки не меняется ни на пиксель. Пустой узел остаётся в разметке — иначе программа
+        // чтения с экрана не объявит первую строку.
+        &__typing {
+            position: absolute;
+            z-index: 1;
+            bottom: var(--rt-space-1);
+            left: var(--rt-space-2);
+            box-sizing: border-box;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            max-inline-size: calc(100% - 2 * var(--rt-space-2));
+            overflow-wrap: anywhere;
+            pointer-events: none;
+
+            &--shown {
+                padding: var(--rt-space-0-5) var(--rt-space-2);
+                border-radius: var(--rt-chat-typing-radius);
+                background: var(--rt-color-bg-surface);
+                box-shadow: var(--rt-chat-typing-shadow);
+            }
+        }
+
         &__footer-slot {
             display: flex;
             flex-direction: column;

package/styles/tokens.css

@@ -6798,6 +6798,25 @@ html.rt-theme-dark.rt-preset-material {
     justify-content: center;
     font-size: var(--rt-btn-icon-size);
   }
+  .rt-button {
+    /* Лигатура шрифта Material Symbols для имени без пары — размер ей даёт `__icon` рядом.
+       Шрифт подключает приложение, семью можно переназначить свойством сверху. До готовности
+       шрифтов лигатура скрыта: иначе на её месте видно слово. */
+  }
+  .rt-button__glyph {
+    overflow: hidden;
+    font-family: var(--rt-icon-glyph-font, "Material Symbols Outlined"), sans-serif;
+    font-feature-settings: "liga";
+    font-style: normal;
+    font-weight: var(--rt-font-weight-regular);
+    letter-spacing: normal;
+    line-height: 1;
+    text-transform: none;
+    white-space: nowrap;
+  }
+  .rt-button__glyph--pending {
+    visibility: hidden;
+  }
   .rt-button__label {
     display: inline-flex;
     align-items: center;
@@ -6973,6 +6992,22 @@ html.rt-theme-dark.rt-preset-material {
     cursor: wait;
     pointer-events: none;
   }
+  .rt-button {
+    /* Подпись спрятана на время загрузки: содержимое гаснет прозрачностью, а не
+       `visibility` — так оно держит ширину и остаётся именем кнопки для скринридера.
+       Загрузчик встаёт поверх по центру. */
+  }
+  .rt-button--loading-label-hidden {
+    position: relative;
+  }
+  .rt-button--loading-label-hidden > :not(.rt-button__loader) {
+    opacity: 0;
+  }
+  .rt-button__loader {
+    position: absolute;
+    margin: auto;
+    inset: 0;
+  }
   .rt-button {
     /* Состояние стоит ниже всех вариантов оформления и палитры того же блока.
        Специфичность у них равная, и правила равной силы разбираются порядком в

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

@@ -278,27 +278,18 @@ declare class RtChatMessageActionsDirective {
 }
 
 /**
- * Общий презентационный чат: тред сообщений + композер. Никакого data-access/api — история
- * приходит готовым массивом `IRtChat.Message[]`, отправка/обновление/скачивание уходят наружу
- * через outputs, а стор и blob-загрузка остаются в feature-компоненте каждого домена.
- *
- * Композер держит свой `FormGroup` — наружу торчит только `send`. Полноэкранный
- * режим (expand) — overlay внутри самого компонента (`--expanded`), потребителю
- * лишь опционально сообщается через `expandedChange`.
- *
- * Шапка (тулбар «Чат» + refresh/expand) рендерится только когда включена хотя бы
- * одна из иконок (`showRefresh`/`showExpand`): в диалогах своя header-обёртка,
- * туда тулбар не нужен.
+ * Общий презентационный чат: тред сообщений + композер. История приходит готовым массивом
+ * `IRtChat.Message[]`, отправка, обновление, скачивание и набор текста уходят наружу выходами;
+ * стор и blob-загрузка остаются у потребителя. Композер держит свой `FormGroup`. Полноэкранный
+ * режим — overlay внутри компонента (`--expanded`). Шапка рисуется, только когда включена хотя бы
+ * одна из иконок `showRefresh`/`showExpand`: в диалогах своя header-обёртка.
  */
 declare class RtChatComponent {
     #private;
     /**
-     * Дата сообщения форматируется по активной локали приложения, а не по
-     * `LOCALE_ID`: тот вычисляется на подъёме приложения и там, где язык
-     * переключают на ходу, оставил бы часы в прежнем формате до перезагрузки.
-     *
-     * Данные локали для `DatePipe` регистрирует приложение: без них пайп падает
-     * `Missing locale data`, и кит за это не отвечает.
+     * Дата форматируется по активной локали приложения, а не по `LOCALE_ID`: тот вычисляется на
+     * подъёме и при смене языка на ходу оставил бы прежний формат. Данные локали для `DatePipe`
+     * регистрирует приложение: без них пайп падает `Missing locale data`.
      */
     protected readonly t: Signal<TRtKitLabelMap>;
     protected readonly locale: Signal<string>;
@@ -409,11 +400,14 @@ declare class RtChatComponent {
     readonly send: OutputEmitterRef<IRtChat.SendPayload>;
     /** Клик refresh — consumer перетягивает тред. */
     readonly refresh: OutputEmitterRef<void>;
-    /** Клик по вложению — consumer качает blob своим api. Шаблон зовёт выход прямо: релей-метод,
-     * который только повторял `emit`, ничего не добавлял, а файл при этом рос. */
+    /** Клик по вложению — consumer качает blob своим api; шаблон зовёт выход прямо, без релея. */
     readonly downloadFile: OutputEmitterRef<IRtChat.Message>;
     /** Клик по карточке вложения из `attachments[]` — консюмер качает по `publicId`. */
     readonly downloadAttachment: OutputEmitterRef<IRtChat.Attachment>;
+    /** Набор текста в поле ответа: `true` — отрезок начался, `false` — кончился. */
+    readonly typing: OutputEmitterRef<boolean>;
+    /** Строка о том, что печатает вторая сторона, поверх низа ленты; пустая прячет плашку. */
+    readonly typingText: InputSignal<string>;
     /** Смена fullscreen-состояния. */
     readonly expandedChange: OutputEmitterRef<boolean>;
     readonly deleteMessage: OutputEmitterRef<IRtChat.Message>;
@@ -431,6 +425,8 @@ declare class RtChatComponent {
     protected onComposerKeydown(event: KeyboardEvent): void;
     /** Релей submit'а от `rt-message-composer` (rich-режим) наружу как `send`. */
     protected onComposerSubmit(payload: IRtMessageComposer.SubmitPayload): void;
+    /** Ввод в поле ответа любого из двух режимов; выбор файла набором не считается. */
+    protected onReplyInput(event: Event): void;
     /**
      * Файлы выброшены в обёртку чата: в rich-режиме отдаём массив композеру через
      * input, в классическом — добавляем к уже выбранным в собственном `replyForm`.
@@ -443,7 +439,7 @@ declare class RtChatComponent {
     protected onThreadScroll(): void;
     protected toggleExpand(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtChatComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtChatComponent, "rt-chat", never, { "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fetching": { "alias": "fetching"; "required": false; "isSignal": true; }; "canReply": { "alias": "canReply"; "required": false; "isSignal": true; }; "replyBlockReason": { "alias": "replyBlockReason"; "required": false; "isSignal": true; }; "sending": { "alias": "sending"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyHint": { "alias": "emptyHint"; "required": false; "isSignal": true; }; "hasThread": { "alias": "hasThread"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "richComposer": { "alias": "richComposer"; "required": false; "isSignal": true; }; "formatting": { "alias": "formatting"; "required": false; "isSignal": true; }; "formattingToolbar": { "alias": "formattingToolbar"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "showExpand": { "alias": "showExpand"; "required": false; "isSignal": true; }; "messageHasActions": { "alias": "messageHasActions"; "required": false; "isSignal": true; }; }, { "send": "send"; "refresh": "refresh"; "downloadFile": "downloadFile"; "downloadAttachment": "downloadAttachment"; "expandedChange": "expandedChange"; "deleteMessage": "deleteMessage"; "retryMessage": "retryMessage"; }, ["messageActions"], ["[rtChatHeaderActions]", "[rtChatFooter]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtChatComponent, "rt-chat", never, { "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fetching": { "alias": "fetching"; "required": false; "isSignal": true; }; "canReply": { "alias": "canReply"; "required": false; "isSignal": true; }; "replyBlockReason": { "alias": "replyBlockReason"; "required": false; "isSignal": true; }; "sending": { "alias": "sending"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyHint": { "alias": "emptyHint"; "required": false; "isSignal": true; }; "hasThread": { "alias": "hasThread"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "richComposer": { "alias": "richComposer"; "required": false; "isSignal": true; }; "formatting": { "alias": "formatting"; "required": false; "isSignal": true; }; "formattingToolbar": { "alias": "formattingToolbar"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "showExpand": { "alias": "showExpand"; "required": false; "isSignal": true; }; "typingText": { "alias": "typingText"; "required": false; "isSignal": true; }; "messageHasActions": { "alias": "messageHasActions"; "required": false; "isSignal": true; }; }, { "send": "send"; "refresh": "refresh"; "downloadFile": "downloadFile"; "downloadAttachment": "downloadAttachment"; "typing": "typing"; "expandedChange": "expandedChange"; "deleteMessage": "deleteMessage"; "retryMessage": "retryMessage"; }, ["messageActions"], ["[rtChatHeaderActions]", "[rtChatFooter]"], true, never>;
 }
 
 /**