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

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

@@ -20,6 +20,10 @@
 
         /* Ритм между корневыми блоками содержимого. */
         --rt-aside-content-gap: var(--rt-space-md);
+
+        /* Ширина на узком экране: во всё окно. Свойство, а не число в правиле, — чтобы коробка,
+           в которую панель поставлена разметкой, могла сдержать её своей шириной. */
+        --rt-aside-narrow-width: 100dvw;
     }
 
     /* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-aside`
@@ -31,6 +35,9 @@
     }
 
     rt-aside .rt-aside {
+        /* Точка отсчёта для слоя ожидания. Рамка и так занимает панель целиком, поэтому прочим
+           потомкам она ничего не меняет. */
+        position: relative;
         display: flex;
         width: var(--rt-aside-width, var(--rt-aside-width-md));
 
@@ -66,6 +73,15 @@
             flex-shrink: 0;
         }
 
+        /* Блок ошибки запроса стоит между шапкой и содержимым и не уезжает с прокруткой. Поля
+           по бокам — тот же инсет панели; сверху и снизу его отбивают шапка и зона содержимого. */
+        &__error {
+            min-width: 0;
+            flex-shrink: 0;
+            margin-block: var(--rt-aside-error-margin-block, 0);
+            padding-inline: var(--rt-aside-inset);
+        }
+
         /* Единственная зона содержимого: она держит инсет панели и она же
            прокручивается. Отступы живут здесь, а не в потребителях — иначе каждая
            панель помнит про них сама, и поля получают разную ширину. */
@@ -75,12 +91,24 @@
             min-height: 0;
             flex: 1 1 auto;
             flex-direction: column;
-            padding: var(--rt-aside-inset);
+            padding: var(--rt-aside-content-inset, var(--rt-aside-inset));
             gap: var(--rt-aside-content-gap);
             overflow-y: auto;
             overscroll-behavior: contain;
         }
 
+        /* Слой ожидания поверх всей панели: шапка, содержимое и футер под ним не нажимаются. Тот же
+           вид, что у слоя дозагрузки таблицы. */
+        &__pending {
+            position: absolute;
+            z-index: var(--rt-z-sticky);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: color-mix(in srgb, var(--rt-color-bg-surface) 60%, transparent);
+            inset: 0;
+        }
+
         &--size--sm {
             width: var(--rt-aside-width, var(--rt-aside-width-sm));
         }
@@ -132,8 +160,8 @@
         rt-aside .rt-aside--size--sm,
         rt-aside .rt-aside--size--md,
         rt-aside .rt-aside--size--lg {
-            width: 100dvw;
-            max-width: 100dvw;
+            width: var(--rt-aside-narrow-width);
+            max-width: var(--rt-aside-narrow-width);
         }
     }
 }

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

@@ -10,17 +10,18 @@
 <a rtButton label="На главную" [routerLink]="'/'"></a>
 ```
 
-| вход          | тип                                                                        | умолчание                     |
-| ------------- | -------------------------------------------------------------------------- | ----------------------------- |
-| `label`       | `string \| null`                                                           | `null`                        |
-| `icon`        | `string \| null` (имя из набора `rt-icon`)                                 | `null`                        |
-| `iconPos`     | `'left' \| 'right'`                                                        | `'left'`                      |
-| `theme`       | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'`                   |
-| `appearance`  | `'filled' \| 'outlined' \| 'text'`                                         | настройки кита или `'filled'` |
-| `size`        | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (30 / 40 / 50 / 60 / 70 px)        | настройки кита или `'md'`     |
-| `radius`      | `TRtRadius \| null` — шаг общей шкалы                                      | настройки кита или `null`     |
-| `loading`     | `boolean`                                                                  | `false`                       |
-| `loadingIcon` | `string \| null`                                                           | `null` → встроенное кольцо    |
+| вход           | тип                                                                        | умолчание                          |
+| -------------- | -------------------------------------------------------------------------- | ---------------------------------- |
+| `label`        | `string \| null`                                                           | `null`                             |
+| `icon`         | `string \| null` (имя из набора `rt-icon`)                                 | `null`                             |
+| `iconPos`      | `'left' \| 'right'`                                                        | `'left'`                           |
+| `theme`        | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'`                        |
+| `appearance`   | `'filled' \| 'outlined' \| 'text'`                                         | настройки кита или `'filled'`      |
+| `size`         | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (30 / 40 / 50 / 60 / 70 px)        | настройки кита или `'md'`          |
+| `radius`       | `TRtRadius \| null` — шаг общей шкалы                                      | настройки кита или `null`          |
+| `loading`      | `boolean`                                                                  | `false`                            |
+| `loadingIcon`  | `string \| null`                                                           | `null` → встроенное кольцо         |
+| `loadingLabel` | `'keep' \| 'hide'`                                                         | `'keep'` — кольцо рядом с подписью |
 
 Своего выхода нет — клик слушается нативным `(click)` на самом элементе.
 

package/src/lib/components/button/rt-button.directive.scss

@@ -91,6 +91,25 @@
             font-size: var(--rt-btn-icon-size);
         }
 
+        /* Лигатура шрифта Material Symbols для имени без пары — размер ей даёт `__icon` рядом.
+           Шрифт подключает приложение, семью можно переназначить свойством сверху. До готовности
+           шрифтов лигатура скрыта: иначе на её месте видно слово. */
+        &__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;
+
+            &--pending {
+                visibility: hidden;
+            }
+        }
+
         &__label {
             display: inline-flex;
             align-items: center;
@@ -264,6 +283,23 @@
             pointer-events: none;
         }
 
+        /* Подпись спрятана на время загрузки: содержимое гаснет прозрачностью, а не
+           `visibility` — так оно держит ширину и остаётся именем кнопки для скринридера.
+           Загрузчик встаёт поверх по центру. */
+        &--loading-label-hidden {
+            position: relative;
+
+            > :not(.rt-button__loader) {
+                opacity: 0;
+            }
+        }
+
+        &__loader {
+            position: absolute;
+            margin: auto;
+            inset: 0;
+        }
+
         /* Состояние стоит ниже всех вариантов оформления и палитры того же блока.
            Специфичность у них равная, и правила равной силы разбираются порядком в
            файле: отсюда, снизу, отключённость отменяет и заливку, и цвет подписи.

package/src/lib/components/data-list/settings/rt-data-list-settings-aside.component.scss

@@ -145,7 +145,7 @@
 
         /* Кнопка «назад» — круглая `mat-icon-button` первого кита, как и кнопки подвала панели. */
         .rt-aside-header__back .rt-icon-button {
-            --rt-icon-button-size: var(--rt-data-list-settings-aside-control-size);
+            --rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);
             --rt-icon-button-color: var(--rt-list-settings-icon-color);
             --rt-icon-button-radius: var(--rt-radius-full);
         }
@@ -236,7 +236,7 @@
         }
 
         .rt-data-list-settings-aside__toggle .rt-icon-button {
-            --rt-icon-button-size: var(--rt-data-list-settings-aside-control-size);
+            --rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);
             --rt-icon-button-color: var(--rt-list-settings-icon-color);
         }
     }

package/src/lib/components/data-table/cell/rt-data-table-cell.component.scss

@@ -87,7 +87,7 @@
             --rt-icon-button-color: var(--rt-list-copy-button-color);
 
             .rt-icon-button {
-                --rt-icon-button-size: var(--rt-list-copy-button-size);
+                --rt-icon-button-size-step: var(--rt-list-copy-button-size);
                 --rt-icon-button-radius: var(--rt-list-copy-button-radius);
                 --rt-icon-button-color-hover: var(--rt-color-text-primary);
                 --rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);

package/src/lib/components/data-table/filter-cell/rt-data-table-filter-cell.component.scss

@@ -39,7 +39,7 @@
         }
 
         .rt-icon-button {
-            --rt-icon-button-size: var(--rt-list-table-button-size);
+            --rt-icon-button-size-step: var(--rt-list-table-button-size);
             --rt-icon-button-radius: var(--rt-list-table-button-radius);
         }
 

package/src/lib/components/data-table/rt-data-table.component.scss

@@ -225,7 +225,7 @@
         }
 
         .rt-icon-button {
-            --rt-icon-button-size: var(--rt-list-table-button-size);
+            --rt-icon-button-size-step: var(--rt-list-table-button-size);
             --rt-icon-button-radius: var(--rt-list-table-button-radius);
         }
 

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

@@ -44,6 +44,15 @@ ref.afterClosed().subscribe((ok?: boolean): void => …);
 `RtDialogRef.disableClose` держит окно и под кликом по подложке, и под Escape — ставится самим
 содержимым, когда закрывать нельзя.
 
+**Фокус служба по умолчанию не трогает.** `trapFocus`, `restoreFocus` и `autoFocus` в настройке
+открытия включают ловушку CDK, возврат фокуса и первый фокус (`'dialog'` — на рамку,
+`'first-tabbable'` — на первый элемент под Tab). Ловушка и первый фокус ставятся после отрисовки
+окна, ловушка уходит вместе с оверлеем.
+
+**Части окна.** `rt-dialog-content` — тело с отступом и прокруткой; `rtDialogHeaderLead` — узел
+перед заголовком шапки; `align` подвала — `start`, `center`, `end` (по умолчанию) или `between`.
+Вид окна задают ручки `--rt-dialog-*` на корне страницы, перечень — на странице Theming.
+
 **Крестик в шапке ищет `RtDialogRef` необязательным инжектом.** Поэтому `rt-dialog-header` можно
 поставить и вне диалога — нажатие просто ничего не сделает, а не упадёт.
 

package/src/lib/components/dialog/content/rt-dialog-content.component.scss

@@ -0,0 +1,20 @@
+@layer rt-kit.components {
+    /* rt-dialog-content — тело модалки. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, как у шапки и подвала: класс блока висит и на хосте, и на
+       узле внутри. Хост боксом не становится — тело должно быть прямым flex-ребёнком рамки, чтобы
+       сжиматься между шапкой и подвалом и прокручиваться само.
+
+       Свойства читаются с запасным значением на месте: окно живёт в оверлее, вне блоков
+       приложения, и приложение задаёт их на корне страницы. */
+    rt-dialog-content {
+        display: contents;
+
+        .rt-dialog-content {
+            overflow: auto;
+            min-height: 0;
+            max-height: var(--rt-dialog-content-max-height, none);
+            flex: 1 1 auto;
+            padding: var(--rt-dialog-content-padding, var(--rt-space-lg));
+        }
+    }
+}

package/src/lib/components/dialog/footer/rt-dialog-footer.component.scss

@@ -11,13 +11,29 @@
     rt-dialog-footer {
         display: contents;
 
+        /* Свойства читаются с запасным значением на месте — окно живёт в оверлее. Разделитель
+           кита лежит в частном `-default`, как у шапки. */
         .rt-dialog-footer {
+            --rt-dialog-footer-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+
             display: flex;
             justify-content: flex-end;
-            padding: var(--rt-space-lg);
-            border-block-start: 1px solid var(--rt-color-border-subtle);
+            padding: var(--rt-dialog-footer-padding, var(--rt-space-lg));
+            border-block-start: var(--rt-dialog-footer-border, var(--rt-dialog-footer-border-default));
             gap: var(--rt-space-sm);
 
+            &--align--start {
+                justify-content: flex-start;
+            }
+
+            &--align--center {
+                justify-content: center;
+            }
+
+            &--align--between {
+                justify-content: space-between;
+            }
+
             &:empty {
                 display: none;
             }

package/src/lib/components/dialog/header/rt-dialog-header.component.scss

@@ -13,18 +13,36 @@
     rt-dialog-header {
         display: contents;
 
+        /* Свойства читаются с запасным значением на месте: окно живёт в оверлее, и приложение
+           задаёт их на корне страницы. Разделитель кита лежит в частном `-default` — проверка
+           токенов не пускает шаг толщины рамки запасным значением напрямую. */
         .rt-dialog-header {
+            --rt-dialog-header-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: var(--rt-space-lg);
-            border-block-end: 1px solid var(--rt-color-border-subtle);
+            padding: var(--rt-dialog-header-padding, var(--rt-space-lg));
+            border-block-end: var(--rt-dialog-header-border, var(--rt-dialog-header-border-default));
             gap: var(--rt-space-sm);
 
+            /* Место перед заголовком: пустое ничего не занимает и не добавляет промежутка. */
+            &__lead {
+                display: inline-flex;
+                flex-shrink: 0;
+                align-items: center;
+
+                &:empty {
+                    display: none;
+                }
+            }
+
             &__title {
                 margin: 0;
                 color: var(--rt-color-text-primary);
-                font-size: var(--rt-text-xl);
+                font-size: var(--rt-dialog-title-font-size, var(--rt-text-xl));
+                font-weight: var(--rt-dialog-title-weight, var(--rt-font-weight-bold));
+                text-transform: var(--rt-dialog-title-transform, none);
             }
 
             &__close {

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

@@ -3,7 +3,7 @@
 @layer rt-kit.components {
     /* rt-dialog — styled frame модалки поверх CDK Overlay.
        ViewEncapsulation.None — селекторы префиксованы `.rt-dialog`.
-       Видимость / backdrop / focus-trap обеспечивает CDK Overlay через RtDialogService. */
+       Видимость и подложку даёт CDK Overlay, ловушку и первый фокус — RtDialogService по флагам. */
 
     /* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-dialog`
        висит и на `<rt-dialog>`, и на рамке внутри него, поэтому правила рамки
@@ -37,12 +37,18 @@
         max-height: 90dvh;
         flex-direction: column;
         padding: 0;
-        border: none;
+        border: var(--rt-dialog-border, none);
         border-radius: var(--rt-dialog-radius);
-        background: var(--rt-color-bg-surface);
+        background: var(--rt-dialog-bg, var(--rt-color-bg-surface));
         box-shadow: var(--rt-dialog-shadow);
         color: var(--rt-color-text-primary);
 
+        /* Рамку фокус берёт только по `autoFocus: 'dialog'` — как точку отсчёта для скринридера,
+           а не как элемент управления: кольцо вокруг всего окна читалось бы как выбор окна. */
+        &:focus {
+            outline: none;
+        }
+
         &--size--sm {
             width: var(--rt-dialog-width, var(--rt-dialog-width-sm));
         }

package/src/lib/components/dynamic-selector/CONTEXT.md

@@ -0,0 +1,50 @@
+# `rt-dynamic-selector` + `rt-dynamic-input`
+
+Поле формы со списком выбранных записей и поле, в котором строки набирают вручную.
+
+```html
+<rt-dynamic-selector keyExp="id" displayExp="name" draggable [entities]="people()" [formControl]="team" />
+<rt-dynamic-input editable [formControl]="emails" />
+```
+
+Значение селектора — массив ключей в порядке списка, значение поля строк — массив строк.
+
+## Главное, что нужно знать
+
+**Записанное формой — это и список, и значение для сброса.** Сброс возвращает последнюю запись
+формы и гаснет, пока список с ней совпадает в том же порядке. Пустой массив от формы опустошает
+список.
+
+**Очистка оставляет строки только для чтения.** У такой строки корзина выключена, и очистка гаснет,
+когда в списке остались только они.
+
+**Ключ, которого нет среди записей, остаётся в значении и строки не рисует.** Форма не теряет то,
+чего не показала.
+
+**Отметки всплывающего окна уходят только по «Применить».** «Отмена», `Escape` и щелчок мимо
+снимают их, значение остаётся прежним.
+
+**Поле строк срезает пробелы по краям и не добавляет пустое и повторное.** Повтор сравнивается
+точно, с учётом регистра.
+
+## Как этим пользоваться
+
+- Серверный поиск: `[localSearch]="false"`, запрос приходит выходом `searchChange` через 500 мс
+  после последней клавиши; найденное вызывающий кладёт в `entities`.
+- Догрузка: `lazyLoad`, выход `loadMore`; пока идёт загрузка страницы, `fetching` держит запрос.
+- Свои кнопки у строки — `<ng-template rtDynamicSelectorRowControls let-item>`, своё название —
+  `<ng-template rtDynamicSelectorRowTitle let-item>`. Корзина и ручка перетаскивания остаются китовыми.
+- Приглашение (`invitation`) встаёт вместо полосы кнопок; его кнопка открывает тот же выбор.
+  `listActionsShown = false` убирает сброс и очистку, оставляя кнопку добавления;
+  `removeShown = false` убирает корзину строк.
+- Правки в своём шаблоне строки — `extraChanged`: сброс и очистка включены при прежних ключах и
+  сообщают `listReset` и `listCleared`, значение сброс тогда не трогает.
+- Начальный запрос окна — `searchTerm`, событием поиска он не уходит. Открыто ли окно — сигнал
+  `popupOpen` и выход `popupOpenChange`.
+
+## Рядом
+
+- [`rt-multiselect`](../multiselect/CONTEXT.md) — выбор нескольких значений фишками в одной строке,
+  без списка, сброса и перетаскивания.
+- [`rt-empty-state`](../empty-state/CONTEXT.md) — на нём нарисованы приглашение и «нечего выбрать».
+- [`[rtPopover]`](../popover/CONTEXT.md) — на нём держится всплывающий выбор.

package/src/lib/components/dynamic-selector/dynamic-input/rt-dynamic-input.component.scss

@@ -0,0 +1,19 @@
+@layer rt-kit.components {
+    /* rt-dynamic-input — поле списка строк. ViewEncapsulation.None.
+       Строки и полосу рисует список семьи; здесь — поле набора и приглашение под ним. */
+
+    .rt-dynamic-input {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        gap: var(--rt-space-sm);
+
+        &__field {
+            display: block;
+        }
+
+        &__invitation {
+            display: block;
+        }
+    }
+}

package/src/lib/components/dynamic-selector/list/rt-dynamic-selector-list.component.scss

@@ -0,0 +1,108 @@
+@layer rt-kit.components {
+    /* rt-dynamic-selector-list — строки выбранного и полоса действий. ViewEncapsulation.None.
+       Вид снят с кадров первого кита: строки — тонированные плашки со скруглением, у ручки
+       перетаскивания разделитель справа, корзина строки красная, пока её можно нажать. */
+
+    .rt-dynamic-selector-list {
+        --rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);
+        --rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);
+        --rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);
+        --rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);
+        --rt-dynamic-selector-list-drag-duration: var(--rt-duration-base);
+
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-2xs);
+
+        &__rows {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
+
+        &__row {
+            display: flex;
+            min-height: var(--rt-control-height-lg);
+            box-sizing: border-box;
+            align-items: center;
+            padding: var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);
+            border-radius: var(--rt-dynamic-selector-list-row-radius);
+            background: var(--rt-dynamic-selector-list-row-bg);
+            color: var(--rt-color-text-primary);
+            gap: var(--rt-space-sm);
+        }
+
+        &__handle {
+            border-right: var(--rt-dynamic-selector-list-divider-width) solid var(--rt-color-border-default);
+            cursor: grab;
+            padding-inline-end: var(--rt-space-2xs);
+        }
+
+        // Длинная подпись переносится: обрезка спрятала бы, какая запись выбрана.
+        &__title {
+            min-width: 0;
+            flex: 1 1 auto;
+            font-size: var(--rt-text-md);
+            overflow-wrap: anywhere;
+        }
+
+        &__field {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        &__controls {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            gap: var(--rt-space-2xs);
+        }
+
+        &__actions {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-2xs);
+        }
+
+        &__add {
+            display: flex;
+            min-width: 0;
+            flex: 1 1 auto;
+            align-items: center;
+        }
+
+        // Строка в полёте живёт у конца страницы, вне блока: свойства объявлены на ней самой.
+        &__row.cdk-drag-preview {
+            --rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);
+            --rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);
+            --rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);
+            --rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);
+
+            box-shadow: var(--rt-dynamic-selector-list-drag-shadow);
+        }
+
+        &__row.cdk-drag-placeholder {
+            opacity: 0;
+        }
+
+        &__row.cdk-drag-animating,
+        &__rows.cdk-drop-list-dragging &__row:not(.cdk-drag-placeholder) {
+            transition: transform var(--rt-dynamic-selector-list-drag-duration) ease-out;
+        }
+    }
+}
+
+/* rt-layer-outside: фон, цвет и поля строки в руке.
+
+   CDK кладёт строку в руке в конец страницы и в момент перетаскивания подключает свой слой
+   `cdk-resets` с `.cdk-drag-preview { background: none; color: inherit; padding: 0 }`. Слой
+   появляется на странице позже слоя кита и потому сильнее его: оставленные в слое, три свойства
+   ниже проигрывают, и строка едет прозрачной, без полей. Тонировка строки полупрозрачна, поэтому
+   под ней лежит поверхность — в покое ту же роль играет поле, в котором стоит список. Скругление и
+   тень остаются в слое — их CDK не трогает. */
+.rt-dynamic-selector-list__row.cdk-drag-preview {
+    padding: var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);
+    background-color: var(--rt-color-bg-surface);
+    background-image: linear-gradient(var(--rt-dynamic-selector-list-row-bg), var(--rt-dynamic-selector-list-row-bg));
+    color: var(--rt-color-text-primary);
+}