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

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/src/styles/_semantic.scss

@@ -311,7 +311,7 @@
 
     /* Typography */
     --rt-input-font-size: var(--rt-text-sm);
-    --rt-input-line-height: var(--rt-leading-none);
+    --rt-input-line-height: var(--rt-leading-snug);
 
     /* State / motion */
     --rt-input-disabled-opacity: var(--rt-opacity-disabled);

package/styles/tokens.css

@@ -715,7 +715,7 @@
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
   /* Typography */
   --rt-input-font-size: var(--rt-text-sm);
-  --rt-input-line-height: var(--rt-leading-none);
+  --rt-input-line-height: var(--rt-leading-snug);
   /* State / motion */
   --rt-input-disabled-opacity: var(--rt-opacity-disabled);
   --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
@@ -1624,7 +1624,7 @@ html.rt-theme-dark {
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
   /* Typography */
   --rt-input-font-size: var(--rt-text-sm);
-  --rt-input-line-height: var(--rt-leading-none);
+  --rt-input-line-height: var(--rt-leading-snug);
   /* State / motion */
   --rt-input-disabled-opacity: var(--rt-opacity-disabled);
   --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
@@ -2116,7 +2116,7 @@ html.rt-theme-dark {
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
   /* Typography */
   --rt-input-font-size: var(--rt-text-sm);
-  --rt-input-line-height: var(--rt-leading-none);
+  --rt-input-line-height: var(--rt-leading-snug);
   /* State / motion */
   --rt-input-disabled-opacity: var(--rt-opacity-disabled);
   --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
@@ -2749,7 +2749,7 @@ html.rt-theme-dark {
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
   /* Typography */
   --rt-input-font-size: var(--rt-text-sm);
-  --rt-input-line-height: var(--rt-leading-none);
+  --rt-input-line-height: var(--rt-leading-snug);
   /* State / motion */
   --rt-input-disabled-opacity: var(--rt-opacity-disabled);
   --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
@@ -3444,7 +3444,7 @@ html.rt-theme-dark .rt-preset-material {
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
   /* Typography */
   --rt-input-font-size: var(--rt-text-sm);
-  --rt-input-line-height: var(--rt-leading-none);
+  --rt-input-line-height: var(--rt-leading-snug);
   /* State / motion */
   --rt-input-disabled-opacity: var(--rt-opacity-disabled);
   --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
@@ -4309,7 +4309,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
   /* Typography */
   --rt-input-font-size: var(--rt-text-sm);
-  --rt-input-line-height: var(--rt-leading-none);
+  --rt-input-line-height: var(--rt-leading-snug);
   /* State / motion */
   --rt-input-disabled-opacity: var(--rt-opacity-disabled);
   --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
@@ -5003,7 +5003,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
   /* Typography */
   --rt-input-font-size: var(--rt-text-sm);
-  --rt-input-line-height: var(--rt-leading-none);
+  --rt-input-line-height: var(--rt-leading-snug);
   /* State / motion */
   --rt-input-disabled-opacity: var(--rt-opacity-disabled);
   --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
@@ -5694,7 +5694,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
   /* Typography */
   --rt-input-font-size: var(--rt-text-sm);
-  --rt-input-line-height: var(--rt-leading-none);
+  --rt-input-line-height: var(--rt-leading-snug);
   /* State / motion */
   --rt-input-disabled-opacity: var(--rt-opacity-disabled);
   --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
@@ -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-accordion.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { WritableSignal, InputSignal } from '@angular/core';
+
+declare namespace IRtAccordion {
+    /** Пункт аккордеона: заголовок раскрывает текст под собой. Строки приходят уже переведёнными. */
+    interface Item {
+        readonly title: string;
+        readonly text: string;
+    }
+}
+
+/**
+ * Список пунктов, у каждого заголовок-кнопка и текст под ней. Нажатие раскрывает или сворачивает
+ * пункт, соседи остаются как были. Предмета показа аккордеон не знает: пункты приходят входом уже
+ * переведёнными.
+ */
+declare class RtAccordionComponent {
+    /** Основа id кнопок и панелей: два аккордеона на одной странице не ссылаются на чужие панели. */
+    protected readonly idBase: string;
+    /** Пришёл новый список — раскрытие начинается заново с пункта из входа. */
+    protected readonly open: WritableSignal<ReadonlySet<number>>;
+    readonly items: InputSignal<readonly IRtAccordion.Item[]>;
+    /** Пункт, раскрытый при входе. `null` оставляет все свёрнутыми. */
+    readonly openIndex: InputSignal<number | null>;
+    protected toggle(index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtAccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtAccordionComponent, "rt-accordion", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "openIndex": { "alias": "openIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { IRtAccordion, RtAccordionComponent };

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

@@ -0,0 +1,140 @@
+import * as i0 from '@angular/core';
+import { Signal, InputSignal, OutputEmitterRef } from '@angular/core';
+import { IRtIcon } from '@rt-tools/ui-kit-v2/core';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+
+/**
+ * Контракты полосы массовых действий. Один корневой неймспейс с префиксом `I`.
+ *
+ * Отличие от договора первого кита одно и оно намеренное: произвольного объекта
+ * стилей на действии здесь нет. Вид кнопки называется именем из набора кита —
+ * значение цвета в разметку не приходит вовсе.
+ */
+declare namespace IRtActionBar {
+    /** Вид действия: тем же именем, каким его зовёт кнопка кита. */
+    type Look = 'plain' | 'danger';
+    /**
+     * Одно нажатие в полосе. Либо `run` — то, что действие делает, — либо `menu`:
+     * вложенный список. Действие с вложенным списком само не срабатывает: оно
+     * заголовок группы, и запуск его наравне с раскрытием запустил бы то, чего
+     * человек не выбирал.
+     */
+    interface Action {
+        readonly label: string;
+        readonly icon?: IRtIcon.Name;
+        readonly look?: IRtActionBar.Look;
+        readonly run?: () => void;
+        readonly menu?: readonly IRtActionBar.Action[];
+    }
+    /**
+     * Настройка полосы целиком. Счёт приходит парой: сколько выбрано и сколько
+     * всего. Полоса ничего из этого не считает — ей дают числа.
+     */
+    interface Config {
+        readonly selected: number;
+        readonly total: number;
+        readonly actions: readonly IRtActionBar.Action[];
+    }
+}
+/**
+ * Сколько полоса держится в разметке после закрытия — ровно длительность ухода
+ * из стилей.
+ *
+ * Число живёт здесь, а не только в правиле стиля: разметку снимает держатель, и,
+ * разойдясь с правилом, он обрывает уход на полпути. Держателю и стилям нужно
+ * одно и то же число, поэтому оно объявлено рядом с договором, а не в одном из них.
+ */
+declare const RT_ACTION_BAR_LEAVE_MS: number;
+
+/** Действие вместе с готовой записью модификаторов: шаблон методов не зовёт. */
+interface IActionView {
+    readonly action: IRtActionBar.Action;
+    readonly modifiers: Readonly<Record<string, boolean>>;
+    /**
+     * Имя кнопки для вспомогательных средств — у действия со значком. На грубом указателе подпись
+     * снята правилом стиля, а значок немой: без имени кнопка осталась бы безымянной.
+     */
+    readonly ariaLabel: string | null;
+}
+/**
+ * Полоса массовых действий: счёт слева, действия рядом, крестик справа.
+ *
+ * Своего состояния не держит вовсе — ни выбранного, ни открытости. Ей дают
+ * настройку входом, а наружу она сообщает две вещи: что нажали действие и что
+ * нажали крестик. Держатель `rt-action-bar-holder` решает, стоит ли она в
+ * разметке и где над страницей приколота.
+ *
+ * Действие с вложенным списком само не срабатывает: оно заголовок группы, и
+ * список раскрывается всплывающим слоем кита. Нажатие пункта списка закрывает
+ * полосу так же, как нажатие обычного действия: где человек нажал — в полосе
+ * или на шаг глубже — о трате выбранного не говорит ничего.
+ */
+declare class RtActionBarComponent {
+    #private;
+    protected readonly countText: Signal<string>;
+    protected readonly closeLabel: Signal<string>;
+    /**
+     * Действия с готовыми модификаторами. Признак значка стоит модификатором, а не
+     * условием в шаблоне: подпись у действия со значком снимает правило стиля по
+     * грубому указателю, и решать это условием значило бы увезти оформление в код.
+     */
+    protected readonly actions: Signal<readonly IActionView[]>;
+    readonly config: InputSignal<IRtActionBar.Config>;
+    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: {}; }]>;
+}
+
+/**
+ * Держатель полосы массовых действий: решает, стоит ли она в разметке, и прикалывает
+ * её над страницей. Настройку читает у службы, которую потребитель объявил на своём
+ * уровне — там, где у него живёт список.
+ *
+ * Полоса открывается счётом выбранного, а не своим признаком: два источника одного
+ * признака расходятся молча, и признак, оставшийся поднятым над опустевшим выбором,
+ * держал бы полосу над страницей, где ничего не выбрано.
+ *
+ * После закрытия полоса остаётся в разметке ровно на длительность ухода — число одно
+ * и лежит в договоре рядом. Разойдясь с правилом стиля, держатель обрывал бы уход на
+ * полпути.
+ */
+declare class RtActionBarHolderComponent {
+    #private;
+    protected readonly config: Signal<IRtActionBar.Config>;
+    /** Выбрано ли что-нибудь: этим полоса и открывается. */
+    protected readonly opened: Signal<boolean>;
+    /** Стоит ли полоса в разметке: она остаётся в ней и на время ухода. */
+    protected readonly shown: Signal<boolean>;
+    protected readonly leaving: Signal<boolean>;
+    constructor();
+    /** Крестик сообщает наружу; выбранное отпускает служба, которой список и владеет. */
+    protected onClosed(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtActionBarHolderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtActionBarHolderComponent, "rt-action-bar-holder", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Настройка полосы массовых действий: держатель её читает, список — пишет.
+ *
+ * Служба без корня намеренно. Тот, кто отмечает строки, и тот, кто рисует полосу,
+ * стоят на разной глубине одного экрана, и передавать настройку вниз через всё,
+ * что между ними, значит рассказать о полосе каждому из них. Потребитель
+ * объявляет службу на своём уровне — там, где у него живёт список.
+ */
+declare class RtActionBarService {
+    #private;
+    readonly config: Signal<IRtActionBar.Config>;
+    /** Список действий. Счёт не трогается: он приходит своим вызовом. */
+    setActions(actions: readonly IRtActionBar.Action[]): void;
+    /** Счёт выбранного. Полоса открывается именно им. */
+    setCounts(selected: number, total: number): void;
+    /** Отпустить выбранное: счёт обнуляется, список действий остаётся. */
+    clearSelection(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtActionBarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+
+export { IRtActionBar, RT_ACTION_BAR_LEAVE_MS, RtActionBarComponent, RtActionBarHolderComponent, RtActionBarService };

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

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { InputSignal } from '@angular/core';
+
+/**
+ * Смысловая секция внутри асайда: единый вертикальный ритм между полями и
+ * необязательный заголовок одного стиля. Заменяет разнобой из `fieldset`,
+ * самопальных `div`-секций, `h3` и `<legend>`, которым раньше каждый диалог
+ * группировал контент по-своему.
+ *
+ * Заголовок (`[heading]`) рендерится только когда задан. Соседние секции
+ * автоматически разделяются верхней границей — отдельный разделитель в
+ * потребителе не нужен.
+ *
+ * Внутри секция размечена словарём формы панели: тело — колонкой контролов,
+ * заголовок — заголовком раздела. Ритм между ними приходит зазорами словаря,
+ * поэтому панель, собранная из готовых секций, и панель, размеченная словарём
+ * вручную, стоят одинаково.
+ */
+declare class RtAsideSectionComponent {
+    readonly heading: InputSignal<string | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtAsideSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideSectionComponent, "rt-aside-section", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { RtAsideSectionComponent };