@rt-tools/ui-kit 0.7.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/ui-kit/side-menu/favorites/rtui-side-menu-favorites.component.scss

@@ -0,0 +1,123 @@
+:host {
+    display: block;
+
+    // Блок отделён от списка раздела чертой: без неё строка избранного и строка того же пункта
+    // в списке стоят подряд и читаются как повтор. Отступ под чертой даёт верхний отступ самого
+    // списка, 8 px: свой отступ здесь удвоил бы его. Черта и отступы — те же, что у разделителей
+    // пунктов подменю у потребителей: 8 px, приглушённая черта, 8 px.
+    &:has(.rtui-side-menu-favorites__list) {
+        padding-bottom: var(--rt-side-menu-favorites-divider-gap, var(--rt-spacing-8));
+        border-bottom: 1px solid var(--rt-side-menu-favorites-divider-color, var(--rt-border-neutral-subtle));
+    }
+
+    .rtui-side-menu-favorites {
+        // Заголовок: подпись и звезда. Звезда красится тем же цветом, что и закрашенные звёзды
+        // списка; цвет и размер подписи и звезды приложение задаёт своими свойствами.
+        &__title {
+            display: flex;
+            align-items: center;
+            padding: var(--rt-spacing-8) var(--rt-spacing-16) var(--rt-spacing-4);
+            color: var(--rt-side-menu-favorites-title-color, var(--rt-text-base-secondary));
+            font-size: var(--rt-side-menu-favorites-title-font-size, var(--rt-font-size-sm));
+            font-weight: var(--rt-font-weight-semibold);
+            gap: var(--rt-spacing-6);
+        }
+
+        &__title-icon {
+            width: var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm));
+            height: var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm));
+            color: var(
+                --rt-side-menu-favorite-color,
+                var(--mat-sys-primary, var(--mat-button-filled-container-color, var(--rt-icon-accent-primary)))
+            );
+            font-size: var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm));
+        }
+
+        &__title-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__list {
+            padding: 0;
+        }
+    }
+}
+
+// Строка, ручка и её значок объявлены вне корня блока: строку в руке CDK выносит в оверлей, и
+// правило из корня до неё не доходит — ручка там становилась кнопкой Material по умолчанию,
+// крупнее и другого цвета.
+.rtui-side-menu-favorites {
+    &__row {
+        display: flex;
+        align-items: center;
+    }
+
+    &__handle {
+        --mat-icon-button-state-layer-size: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));
+        --mat-icon-button-icon-size: var(--rt-side-menu-favorite-action-icon-size, var(--rt-font-size-lg));
+        --mat-icon-button-icon-color: var(--rt-side-menu-favorite-action-color, var(--rt-text-base-secondary));
+
+        flex: 0 0 auto;
+        cursor: grab;
+        opacity: 0;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        // Ручка видна так же, как кнопка «убрать»: под наведением и фокусом своей строки, на узком
+        // экране и там, где указатель не умеет наводиться, — всегда. Прячется прозрачностью, а не
+        // снятием с раскладки: кнопка остаётся на месте и достижима клавишей Tab.
+        &--always {
+            opacity: 1;
+        }
+
+        @media (hover: none) {
+            opacity: 1;
+        }
+    }
+
+    // Фокус показывает кнопки только с клавиатуры: после нажатия мышью кнопка держит фокус, и
+    // правило по любому фокусу оставляло бы её видимой, когда указатель уже ушёл.
+    &__row:hover &__handle,
+    &__row:has(:focus-visible) &__handle,
+    &__row.cdk-drag-preview &__handle {
+        opacity: 1;
+    }
+
+    // Значок берёт размер кнопки: иначе он остаётся в 24 px и съезжает от центра. Поворот глифа
+    // приходит числом из настроек меню, своего поворота у стилей нет.
+    &__handle-icon {
+        width: var(--mat-icon-button-icon-size);
+        height: var(--mat-icon-button-icon-size);
+        font-size: var(--mat-icon-button-icon-size);
+        line-height: 1;
+    }
+
+    &__item {
+        min-width: 0;
+        flex: 1 1 auto;
+    }
+}
+
+// На узком экране под блоком не список со своим отступом, а сами пункты раздела вплотную:
+// отступ под чертой блок ставит сам.
+:host-context(.rtui-mobile-side-menu-list__sub):has(.rtui-side-menu-favorites__list) {
+    margin-bottom: var(--rt-spacing-8);
+}
+
+// Строка в руке живёт в оверлее CDK, вне блока, и правило из корня до неё не доходит. Тень — та же,
+// что у строки в руке динамического селектора: имена шкалы теней кита совпадают со вторым китом.
+.rtui-side-menu-favorites__row.cdk-drag-preview {
+    display: flex;
+    align-items: center;
+    border-radius: var(--rt-radius-xl);
+    background-color: var(--rt-side-menu-favorites-drag-background, var(--rt-bg-base-base));
+    box-shadow: var(--rt-side-menu-favorites-drag-shadow, 0 0.5rem 1rem 0 var(--rt-shadow-color));
+}
+
+.rtui-side-menu-favorites__row.cdk-drag-placeholder {
+    opacity: 0;
+}

package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss

@@ -320,6 +320,11 @@ $side-menu: (
         }
 
         &--pinned {
+            // Закреплённая панель стоит вплотную к странице, и скругления у неё нет: угол срезал
+            // нижнюю подсказку прокрутки вместе с её кнопкой. Потребитель по-прежнему задаёт
+            // радиус закреплённой панели своим свойством на любом предке меню.
+            --rt-side-menu-sub-menu-radius: var(--rt-side-menu-sub-menu-pinned-radius, 0);
+
             position: relative;
             left: 0;
             width: 0;

package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss

@@ -58,8 +58,13 @@
             align-items: center;
             justify-content: space-between;
 
+            // Подпись забирает свободное место строки, и все кнопки встают вплотную к правому краю:
+            // кнопка пункта, звезда или «убрать», ручка. Разнос кнопок по ширине разводил их
+            // врозь, как только их становилось больше одной.
             &__text {
                 overflow: hidden;
+                min-width: 0;
+                flex: 1 1 auto;
                 font-size: var(--rt-side-menu-sub-menu-item-title-font-size);
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -94,6 +99,90 @@
                     border-color: var(--rt-border-neutral-emphasis);
                 }
             }
+
+            // В разделе с избранным кнопка потребителя стоит последней, в столбце звёзд и ручек:
+            // её центр ставится на центр их кнопки — половина их размера минус половина её
+            // ширины в 26 px: значок, внутренний отступ и рамка.
+            &--favorites .rtui-side-menu-sub-item-title-button {
+                --rt-side-menu-sub-item-favorite-column: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));
+
+                margin-right: calc((var(--rt-side-menu-sub-item-favorite-column) - var(--rt-spacing-24) - var(--rt-spacing-2)) / 2);
+            }
+
+            // Кнопка избранного: звезда у пункта раздела и «убрать» у строки блока. Закрашенная
+            // звезда видна всегда: выбранное читается с одного взгляда. Остальные — под
+            // наведением и под фокусом своей строки: кнопки на каждой строке длинного списка
+            // читались бы шумом. Прячется прозрачностью, а не снятием с раскладки: кнопка остаётся
+            // на своём месте и достижима клавишей Tab.
+
+            // Цвета и размеры кнопок приложение задаёт своими свойствами `--rt-side-menu-favorite-*`
+            // на любом предке меню. Свойства не объявлены в ките нарочно: значение по умолчанию стоит
+            // запасным в `var()`, а объявленное на кнопке перебило бы значение от предка.
+            &__favorite {
+                --mat-icon-button-state-layer-size: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));
+                --mat-icon-button-icon-size: var(--rt-side-menu-favorite-action-icon-size, var(--rt-font-size-lg));
+                --mat-icon-button-icon-color: var(--rt-side-menu-favorite-action-color, var(--rt-text-base-secondary));
+
+                flex: 0 0 auto;
+                margin-left: var(--rt-spacing-4);
+                opacity: 0;
+
+                // Узкий экран отмечает порог сервиса кита, а не медиазапрос: порог настраивается
+                // приложением, и число в стилях с ним разошлось бы. На узком экране рисуется своя
+                // ветка разметки, и наводиться там нечем.
+                &--on,
+                &--always {
+                    opacity: 1;
+                }
+
+                &--on {
+                    --mat-icon-button-icon-color: var(
+                        --rt-side-menu-favorite-color,
+                        var(--mat-sys-primary, var(--mat-button-filled-container-color, var(--rt-icon-accent-primary)))
+                    );
+                }
+
+                // Корзина под указателем и под фокусом клавиатуры краснеет: нажатие убирает пункт.
+                // Приложение ставит свой цвет свойством на предке меню, свой обычный — чтобы не
+                // краснела вовсе. Наведение — только где указатель умеет наводиться: на сенсорном
+                // экране оно залипает в точке касания, и после «убрать» под пальцем краснела бы
+                // корзина соседней строки.
+                @media (hover: hover) {
+                    &--remove:hover {
+                        --mat-icon-button-icon-color: var(--rt-side-menu-favorite-remove-hover-color, var(--rt-icon-accent-danger));
+                    }
+                }
+
+                &--remove:focus-visible {
+                    --mat-icon-button-icon-color: var(--rt-side-menu-favorite-remove-hover-color, var(--rt-icon-accent-danger));
+                }
+
+                // Где указатель не умеет наводиться, кнопке ждать нечего.
+                @media (hover: none) {
+                    opacity: 1;
+                }
+
+                // Зона касания Material шире кнопки и заходит на соседние строки; мыши она не нужна.
+                @media (pointer: fine) {
+                    --mat-icon-button-touch-target-display: none;
+                }
+            }
+
+            // Значок берёт размер кнопки. Сам по себе он остаётся в 24 px, а отступ кнопки
+            // считается от её размера значка — и глиф съезжает влево вверх на разницу.
+            &__favorite-icon {
+                width: var(--mat-icon-button-icon-size);
+                height: var(--mat-icon-button-icon-size);
+                font-size: var(--mat-icon-button-icon-size);
+                line-height: 1;
+            }
+        }
+
+        // Фокус показывает кнопки только с клавиатуры: снятая мышью звезда держит фокус, и правило
+        // по любому фокусу оставляло бы полую звезду видимой, когда указатель уже ушёл.
+        &:hover .rtui-side-menu-sub-item-title__favorite,
+        &:has(:focus-visible) .rtui-side-menu-sub-item-title__favorite {
+            opacity: 1;
         }
     }
 
@@ -116,6 +205,14 @@
             max-width: 100%;
             padding: 0;
 
+            // В разделе с избранным шеврон папки стоит в одном столбце со звёздами: центр значка
+            // кнопки звезды левее центра шеврона на половину её размера без половины шеврона в 24 px.
+            // Сдвиг — внешним отступом: раскрытая папка поворачивает значок вместе с его внутренними
+            // отступами, и неравный внутренний отступ уходил бы на другую сторону.
+            &--favorites ::ng-deep .mat-expansion-indicator {
+                margin-right: calc(var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2)) / 2 - var(--rt-spacing-12));
+            }
+
             &--activated {
                 background-color: var(--mat-list-active-indicator-color);
             }

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Type, OnInit, Signal, ElementRef, WritableSignal, TemplateRef, InputSignal, InjectionToken, InputSignalWithTransform, OutputEmitterRef, ModelSignal, AfterViewChecked, AfterViewInit, Provider, AfterContentChecked, OnDestroy } from '@angular/core';
+import { Type, OnInit, Signal, ElementRef, WritableSignal, TemplateRef, InputSignal, InjectionToken, InputSignalWithTransform, OutputEmitterRef, EnvironmentProviders, ModelSignal, AfterViewChecked, AfterViewInit, Provider, AfterContentChecked, OnDestroy } from '@angular/core';
 import { FormControl, ControlValueAccessor, Validator, FormGroup, ValidationErrors } from '@angular/forms';
 import { ThemePalette } from '@angular/material/core';
 import { Observable, Subject } from 'rxjs';
@@ -106,7 +106,7 @@ declare class RtModalService {
     confirm<T>(data: IModal.Data<T>, config?: MatDialogConfig): Observable<TNullable<IModal.DataAnswer<T>>>;
     with<T>(data: IModal.Data<T>, config?: MatDialogConfig): IModal.ConfirmResponse<T>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtModalService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<RtModalService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 declare class RtuiScrollableContainerHeaderDirective {
@@ -173,10 +173,21 @@ declare class RtuiScrollableContainerComponent {
  * ровно то, что человек искал.
  */
 interface IRtuiSideMenuHost {
+    /** Пункты полосы: блок избранного ищет в их подменю пункты, стоящие за номерами списка. */
+    readonly menuItems: Signal<ISideMenu.Item[]>;
     readonly activeMenuIds: Signal<Array<string | number>>;
+    /**
+     * Набор, который подменю показывает сейчас, до отбора поиском: пустой, пока подменю нечего
+     * показать. По нему блок избранного и звёзды узнают свой пункт полосы.
+     */
+    readonly shownSubMenu: Signal<ISideMenu.Item[]>;
     readonly expandedMenuIds: Signal<Array<string | number>>;
     readonly highlightedMenuId: Signal<string | number | null>;
     readonly subMenuQuery: Signal<string>;
+    /** Номер меню, под которым лежат его настройки: избранное читается и пишется по нему. */
+    readonly menuId: Signal<string>;
+    /** Указатель ушёл с панели; без пункта — то же, что уход мышью. */
+    toggleSubMenu(item?: ISideMenu.Item): void;
 }
 declare const RTUI_SIDE_MENU: InjectionToken<IRtuiSideMenuHost>;
 declare namespace ISideMenu {
@@ -186,12 +197,26 @@ declare namespace ISideMenu {
      * стоит открытым, пока человек сам его не свернёт.
      */
     type SubMenuMode = 'hover' | 'pinned';
+    /** Номер пункта в списке избранного — тот же, что `id` пункта меню. */
+    type FavoriteId = Item['id'];
+    /**
+     * Настройки одного меню под его номером в хранилище. Незнакомые поля кит не удаляет: их могло
+     * положить приложение или следующая версия кита.
+     */
+    interface Settings {
+        favorites?: FavoriteId[];
+        subMenuMode?: SubMenuMode;
+        subMenuWidth?: number;
+        [field: string]: unknown;
+    }
     interface Item {
         id: string | number;
         icon?: string;
         name?: string;
         link?: string;
         submenu?: Item[];
+        /** Избранное в подменю этого пункта полосы. По умолчанию выключено. */
+        favorites?: boolean;
         iconButton?: {
             icon: string;
             data?: ItemData;
@@ -270,7 +295,7 @@ declare class RtuiSideMenuFooterDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<RtuiSideMenuFooterDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RtuiSideMenuFooterDirective, "[rtuiSideMenuFooter]", never, {}, {}, never, never, true, never>;
 }
-declare class RtuiSideMenuComponent {
+declare class RtuiSideMenuComponent implements IRtuiSideMenuHost {
     #private;
     /**
      * Натянутая ширина панели. Своего выбора нет — переменная не ставится вовсе, и ширину берёт
@@ -323,27 +348,25 @@ declare class RtuiSideMenuComponent {
     readonly backToMainMenuButton: Signal<ISideMenu.Item>;
     readonly selectedItem: WritableSignal<TNullable<ISideMenu.Item>>;
     readonly selectedSubMenu: WritableSignal<TNullable<ISideMenu.Item[]>>;
+    /** Набор, который подменю наполняет сейчас, до отбора поиском; по нему избранное узнаёт свой раздел. */
+    readonly shownSubMenu: Signal<ISideMenu.Item[]>;
     activeMenuIds: InputSignal<Array<string | number>>;
     menuItems: InputSignalWithTransform<ISideMenu.Item[], ISideMenu.Item[]>;
-    /** Мода подменю. Умолчание — сегодняшнее поведение: открывается наведением. */
-    subMenuMode: InputSignal<ISideMenu.SubMenuMode>;
-    /**
-     * Ширина закреплённого подменю в пикселях. Пустая — ширину ставит оформление; хранит выбор
-     * потребитель, как и моду.
-     */
-    subMenuWidth: InputSignal<number | null>;
+    /** Мода подменю от приложения. Задана — важнее сохранённой; нет ни той, ни другой — наведение. */
+    subMenuMode: InputSignal<ISideMenu.SubMenuMode | undefined>;
+    /** Ширина закреплённого подменю в пикселях от приложения. Пусто — берётся сохранённая, её нет — оформление. */
+    subMenuWidth: InputSignal<number | null | undefined>;
+    /** Под каким номером меню хранит свои настройки: у двух меню приложения — два номера. */
+    menuId: InputSignalWithTransform<string, string | null | undefined>;
     isSubMenuXScrollEnabled: InputSignalWithTransform<boolean, boolean>;
     isMainMenuIconsOutlined: InputSignalWithTransform<boolean, boolean>;
     isSubMenuIconsOutlined: InputSignalWithTransform<boolean, boolean>;
     isSubMenuButtonIconsOutlined: InputSignalWithTransform<boolean, boolean>;
     isSubMenuTooltipsShown: InputSignalWithTransform<boolean, boolean>;
     activeMenuId: Signal<number | string>;
-    /**
-     * Просьба о моде, а не смена моды: предпочтение хранит потребитель кита и возвращает его
-     * входом. Своего состояния о нём меню не заводит.
-     */
+    /** Выбранная мода: меню пишет её в настройки, если они включены, и сообщает приложению. */
     readonly subMenuModeChange: OutputEmitterRef<ISideMenu.SubMenuMode>;
-    /** Просьба о ширине — по той же причине, что и просьба о моде: своего состояния меню не держит. */
+    /** Натянутая ширина — так же, как мода. */
     readonly subMenuWidthChange: OutputEmitterRef<number>;
     readonly closeMobileMenuAction: OutputEmitterRef<void>;
     readonly clickSubMenuAction: OutputEmitterRef<{
@@ -367,12 +390,9 @@ declare class RtuiSideMenuComponent {
      * указателя нельзя — закрывает нажатие снаружи, то есть подложка под незакреплённой панелью.
      */
     onSearchHold(): void;
-    /** Нажат переключатель моды: наружу уходит просьба, вход остаётся прежним. */
+    /** Нажат переключатель моды: выбор уходит в настройки меню и наружу. */
     onSubMenuModeToggle(): void;
-    /**
-     * Взята ручка правого края. Слушатели вешаются на документ: рука уходит с узкой полоски
-     * ручки в первое же движение, и слушатель на ней самой терял бы тягу сразу.
-     */
+    /** Взята ручка правого края закреплённого подменю. */
     onResizeStart(event: MouseEvent): void;
     onSubMenuSearch(query: string): void;
     /**
@@ -387,9 +407,115 @@ declare class RtuiSideMenuComponent {
         event: MouseEvent;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtuiSideMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiSideMenuComponent, "rtui-side-menu", never, { "activeMenuIds": { "alias": "activeMenuIds"; "required": true; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "subMenuMode": { "alias": "subMenuMode"; "required": false; "isSignal": true; }; "subMenuWidth": { "alias": "subMenuWidth"; "required": false; "isSignal": true; }; "isSubMenuXScrollEnabled": { "alias": "isSubMenuXScrollEnabled"; "required": false; "isSignal": true; }; "isMainMenuIconsOutlined": { "alias": "isMainMenuIconsOutlined"; "required": false; "isSignal": true; }; "isSubMenuIconsOutlined": { "alias": "isSubMenuIconsOutlined"; "required": false; "isSignal": true; }; "isSubMenuButtonIconsOutlined": { "alias": "isSubMenuButtonIconsOutlined"; "required": false; "isSignal": true; }; "isSubMenuTooltipsShown": { "alias": "isSubMenuTooltipsShown"; "required": false; "isSignal": true; }; }, { "subMenuModeChange": "subMenuModeChange"; "subMenuWidthChange": "subMenuWidthChange"; "closeMobileMenuAction": "closeMobileMenuAction"; "clickSubMenuAction": "clickSubMenuAction"; "clickSubMenuAdditionalAction": "clickSubMenuAdditionalAction"; }, ["headerTpl", "footerTpl"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiSideMenuComponent, "rtui-side-menu", never, { "activeMenuIds": { "alias": "activeMenuIds"; "required": true; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "subMenuMode": { "alias": "subMenuMode"; "required": false; "isSignal": true; }; "subMenuWidth": { "alias": "subMenuWidth"; "required": false; "isSignal": true; }; "menuId": { "alias": "menuId"; "required": false; "isSignal": true; }; "isSubMenuXScrollEnabled": { "alias": "isSubMenuXScrollEnabled"; "required": false; "isSignal": true; }; "isMainMenuIconsOutlined": { "alias": "isMainMenuIconsOutlined"; "required": false; "isSignal": true; }; "isSubMenuIconsOutlined": { "alias": "isSubMenuIconsOutlined"; "required": false; "isSignal": true; }; "isSubMenuButtonIconsOutlined": { "alias": "isSubMenuButtonIconsOutlined"; "required": false; "isSignal": true; }; "isSubMenuTooltipsShown": { "alias": "isSubMenuTooltipsShown"; "required": false; "isSignal": true; }; }, { "subMenuModeChange": "subMenuModeChange"; "subMenuWidthChange": "subMenuWidthChange"; "closeMobileMenuAction": "closeMobileMenuAction"; "clickSubMenuAction": "clickSubMenuAction"; "clickSubMenuAdditionalAction": "clickSubMenuAdditionalAction"; }, ["headerTpl", "footerTpl"], never, true, never>;
 }
 
+/**
+ * Ключ настроек бокового меню в хранилище.
+ *
+ * Назван приставкой кита: хранилище браузера общее на весь адрес, и короткое имя столкнулось бы с
+ * ключом потребителя молча. Под ключом — один объект, в нём настройки каждого меню под его номером.
+ */
+declare const SIDE_MENU_SETTINGS_KEY: string;
+/** Номер меню, которому приложение своего не задало. */
+declare const DEFAULT_MENU_ID: string;
+/** Запись хранилища как есть: номер меню — и что под ним лежит, в том числе сломанное. */
+type TSideMenuSettingsRecord = Record<string, unknown>;
+
+/** Подписи избранного. У первого кита нет словаря, и приложение на другом языке называет их само. */
+interface IRtuiSideMenuFavoritesLabels {
+    readonly title: string;
+    readonly add: string;
+    readonly remove: string;
+    readonly drag: string;
+}
+/** Значок кнопки избранного: глиф набора Material Symbols и поворот. */
+interface IRtuiSideMenuFavoritesIcon {
+    readonly glyph: string;
+    /** Градусы по часовой стрелке; не задан — ноль. */
+    readonly rotate?: number;
+}
+interface IRtuiSideMenuFavoritesIcons {
+    readonly remove: IRtuiSideMenuFavoritesIcon;
+    readonly drag: IRtuiSideMenuFavoritesIcon;
+}
+interface IRtuiSideMenuSettingsConfig {
+    /** Ключ записи в хранилище; два приложения на одном адресе держат свои настройки двумя ключами. */
+    readonly storageKey?: string;
+    readonly labels?: Partial<IRtuiSideMenuFavoritesLabels>;
+    readonly icons?: Partial<IRtuiSideMenuFavoritesIcons>;
+}
+declare const RTUI_SIDE_MENU_SETTINGS_CONFIG: InjectionToken<IRtuiSideMenuSettingsConfig>;
+/**
+ * Настройки боковых меню приложения: избранное, мода подменю и его ширина.
+ *
+ * В хранилище под одним ключом лежит объект: у каждого меню — свои настройки под его номером.
+ * Номер задаёт приложение входом `menuId` меню — например, номером пользователя, — меню без номера
+ * или с пустым номером хранится под `default`. Приложение читает и пишет настройки любого меню по
+ * его номеру.
+ *
+ * Запись начинается с чтения хранилища, а не копии в памяти: другая вкладка или другой код могли
+ * записать своё после того, как сервис прочитал ключ, и запись из копии затёрла бы их. Правится одно
+ * поле одного меню, остальное уходит как лежало. Изменения из других вкладок приходят событием
+ * `storage` и обновляют сигналы. Кит сам ничего не удаляет: настройки меню уходят только по вызову
+ * приложения.
+ *
+ * Держатель один: меню и приложение читают и пишут через этот же сервис. Поэтому сервис ставится
+ * провайдером окружения — `provideRtuiSideMenuSettings()`, — а меню берёт его необязательно: не
+ * поставлен — меню ничего не хранит, звёзд нет, мода и ширина приходят входами.
+ *
+ * Хранилище берётся токеном `@rt-tools/core`. Без него, вне браузера, закрытое или полное —
+ * настройки живут в памяти, и ни чтение, ни запись не бросают.
+ */
+declare class RtuiSideMenuSettingsService {
+    #private;
+    /** Номера меню, чьи настройки лежат в хранилище. */
+    readonly menuIds: Signal<string[]>;
+    readonly labels: IRtuiSideMenuFavoritesLabels;
+    /** Заданный приложением значок заменяет свой целиком, незаданный остаётся по умолчанию. */
+    readonly icons: IRtuiSideMenuFavoritesIcons;
+    constructor();
+    /** Настройки одного меню целиком, с незнакомыми полями; не сохранены — пустой объект. */
+    settings(menuId: string): Signal<ISideMenu.Settings>;
+    /** Список избранного одного меню. Сигнал на номер один: повторный вызов отдаёт тот же. */
+    ids(menuId: string): Signal<ReadonlyArray<ISideMenu.FavoriteId>>;
+    /** Мода подменю, которую выбрал человек; ничего не выбрано — открытие наведением. */
+    subMenuMode(menuId: string): Signal<ISideMenu.SubMenuMode>;
+    /** Ширина закреплённого подменю; ничего не выбрано — пусто, и ширину ставит оформление. */
+    subMenuWidth(menuId: string): Signal<number | null>;
+    setSubMenuMode(menuId: string, mode: ISideMenu.SubMenuMode): void;
+    /** Пишется приведённая к пределам: за них уводит и рука, и чужая правка записи. */
+    setSubMenuWidth(menuId: string, width: number): void;
+    has(menuId: string, id: ISideMenu.FavoriteId): boolean;
+    /** Номер, уже стоящий в списке, остаётся на своём месте. */
+    add(menuId: string, id: ISideMenu.FavoriteId): void;
+    remove(menuId: string, id: ISideMenu.FavoriteId): void;
+    /** Решает по записи хранилища, а не по копии: другая вкладка могла уже поменять список. */
+    toggle(menuId: string, id: ISideMenu.FavoriteId): void;
+    /** Перенос по местам списка, не блока: место вне списка у источника ничего не меняет. */
+    move(menuId: string, from: number, to: number): void;
+    /**
+     * Перенос по местам видимых номеров, как в блоке меню: видимые меняются местами между собой,
+     * скрытые — пункт которых меню сейчас не показывает — остаются на своих.
+     */
+    moveVisible(menuId: string, visibleIds: ReadonlyArray<ISideMenu.FavoriteId>, from: number, to: number): void;
+    /** Замена списка целиком — чужие значения и повторы отбрасываются так же, как при чтении. */
+    set(menuId: string, ids: ReadonlyArray<ISideMenu.FavoriteId>): void;
+    clear(menuId: string): void;
+    /** Удаление всех настроек одного меню. Сам кит его не вызывает: удаляет только приложение. */
+    deleteSettings(menuId: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtuiSideMenuSettingsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Включение настроек меню: сервис и его настройки в инжектор окружения приложения.
+ *
+ * ```ts
+ * bootstrapApplication(App, { providers: [provideRtStorage(), provideRtuiSideMenuSettings({ storageKey: 'my-app-side-menu' })] });
+ * ```
+ */
+declare function provideRtuiSideMenuSettings(config?: IRtuiSideMenuSettingsConfig): EnvironmentProviders;
+
 declare class RtuiSpinnerComponent implements OnInit {
     #private;
     diameter: InputSignalWithTransform<number, number>;
@@ -477,7 +603,7 @@ declare class RtAsideService {
      */
     open<COMPONENT = null, DATA = null, ANSWER = null>(component: ComponentType$1<COMPONENT>, position: TAsidePositions, data: DATA, config?: IAsideConfig): Observable<ANSWER | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtAsideService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<RtAsideService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 declare class RtuiAsideContainerHeaderDirective {
@@ -1288,7 +1414,7 @@ declare class RtTableConfigService<ENTITY_TYPE> {
     updateConfig(storageKey: string, config: ITable.Config.Data<ENTITY_TYPE>): void;
     deleteConfig(storageKey: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtTableConfigService<any>, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<RtTableConfigService<any>>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 declare class RtCommonSelectorsDirective<ENTITY_TYPE extends Record<string, unknown>, KEY extends Extract<keyof ENTITY_TYPE, string>> {
@@ -1450,7 +1576,7 @@ declare class RtSnackBarService {
     success(message: string, config?: IRtSnackBar.Config): MatSnackBarRef<RtuiSnackBarComponent>;
     dismiss(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtSnackBarService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<RtSnackBarService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 declare enum EInfoBadgeSize {
@@ -2040,7 +2166,7 @@ declare class RtActionBarService {
     setCounts(selected: number, total: number): void;
     closeActionBar(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtActionBarService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<RtActionBarService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 /**
@@ -2078,7 +2204,7 @@ declare class RtThemeService {
      */
     registerColorScheme(name: string, ramp: TRtColorSchemeRamp): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtThemeService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<RtThemeService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 /**
@@ -2114,5 +2240,5 @@ declare class RtHideTooltipDirective implements AfterViewInit {
     static ɵdir: i0.ɵɵDirectiveDeclaration<RtHideTooltipDirective, "[rtHideTooltipDirective]", never, { "element": { "alias": "rtHideTooltipDirective"; "required": true; "isSignal": true; }; "isTooltipShown": { "alias": "isTooltipShown"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { ASIDE_REF, AsideRef, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, EAsideButtons, EInfoBadgeSize, EInfoBadgeType, EModalWindowSize, ERtAccentRole, ERtTheme, ETableColumnFilterTypes, ETableColumnTypes, ETextCellColor, EToggleSizeType, IAside, IModal, IRtActionBar, IRtSnackBar, IRtUiConfig, IRtuiButton, ISideMenu, ITable, RTUI_SIDE_MENU, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_STORAGE_KEY, RT_UI_CONFIG, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtHideTooltipDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, SUB_MENU_MODE_KEY, SUB_MENU_WIDTH_KEY, SUB_MENU_WIDTH_MAX, SUB_MENU_WIDTH_MIN, clampSubMenuWidth, comparePropNames, darkenHexColor, getColorBasedOnBackground, provideRtUi, readSubMenuMode, readSubMenuWidth, splitSubMenuTitle, writeSubMenuMode, writeSubMenuWidth };
-export type { IAsideConfig, IModalIcon, INameValueType, IRtuiSideMenuHost, IRtuiTable, ISelect, ISubMenuTitlePart, TAsideButtonsType, TAsidePositions, TIconSideType, TImageUploadFormat, TInfoBadgeSizeType, TInfoBadgeType, TMenuItemTrigger, TModalButtonAppearance, TModalWindowSizeType, TRtAccentRole, TRtColorSchemeRamp, TRtThemeType, TRtUiDesign, TRtuiIconSizeType, TRtuiIconThemeType, TToggleSizeType };
+export { ASIDE_REF, AsideRef, DEFAULT_MENU_ID, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, EAsideButtons, EInfoBadgeSize, EInfoBadgeType, EModalWindowSize, ERtAccentRole, ERtTheme, ETableColumnFilterTypes, ETableColumnTypes, ETextCellColor, EToggleSizeType, IAside, IModal, IRtActionBar, IRtSnackBar, IRtUiConfig, IRtuiButton, ISideMenu, ITable, RTUI_SIDE_MENU, RTUI_SIDE_MENU_SETTINGS_CONFIG, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_STORAGE_KEY, RT_UI_CONFIG, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtHideTooltipDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSideMenuSettingsService, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, SIDE_MENU_SETTINGS_KEY, SUB_MENU_MODE_KEY, SUB_MENU_WIDTH_KEY, SUB_MENU_WIDTH_MAX, SUB_MENU_WIDTH_MIN, clampSubMenuWidth, comparePropNames, darkenHexColor, getColorBasedOnBackground, provideRtUi, provideRtuiSideMenuSettings, readSubMenuMode, readSubMenuWidth, splitSubMenuTitle, writeSubMenuMode, writeSubMenuWidth };
+export type { IAsideConfig, IModalIcon, INameValueType, IRtuiSideMenuFavoritesIcon, IRtuiSideMenuFavoritesIcons, IRtuiSideMenuFavoritesLabels, IRtuiSideMenuHost, IRtuiSideMenuSettingsConfig, IRtuiTable, ISelect, ISubMenuTitlePart, TAsideButtonsType, TAsidePositions, TIconSideType, TImageUploadFormat, TInfoBadgeSizeType, TInfoBadgeType, TMenuItemTrigger, TModalButtonAppearance, TModalWindowSizeType, TRtAccentRole, TRtColorSchemeRamp, TRtThemeType, TRtUiDesign, TRtuiIconSizeType, TRtuiIconThemeType, TSideMenuSettingsRecord, TToggleSizeType };