@rt-tools/ui-kit-v2 0.28.0 → 0.29.1

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

@@ -1,3 +1,5 @@
+@use '../../../../styles/breakpoints' as bp;
+
 @layer rt-kit.components {
     .rt-chat {
         --rt-chat-bubble-radius: var(--rt-radius-lg);
@@ -37,9 +39,9 @@
         &--expanded > .rt-file-drop {
             block-size: 100%;
 
-            // На широких экранах чат не растягивается на весь вьюпорт: тред и
-            // композер иначе разрежены. Свыше 1440px фиксируем колонку по центру.
-            @media (width >= 1441px) {
+            // На широком месте чат не растягивается во всю ширину: тред и композер иначе
+            // разрежены. Шире 1440px колонка стоит по центру.
+            @include bp.place-min(1440px) {
                 inline-size: 1000px;
                 margin-inline: auto;
                 max-inline-size: 100%;

package/src/styles/_breakpoints.scss

@@ -5,3 +5,22 @@ $rt-bp-sm: 480px !default;
 $rt-bp-md: 768px !default;
 $rt-bp-lg: 1080px !default;
 $rt-bp-xl: 1380px !default;
+
+// Место страницы — контейнер с именем `rt-place`. Его объявляют корень документа и
+// `rt-container`: компонент внутри контейнера считает порог от его ширины, вне его — от корня,
+// то есть от окна. Имя записано буквами: линтер стилей не читает имя из переменной.
+
+// Порог по ширине места: `@include bp.place-max(bp.$rt-bp-md) { … }`. Окна и панели поверх
+// экрана сюда не идут: они лежат вне места страницы и остаются на `@media`.
+@mixin place-max($width) {
+    @container rt-place (width <= #{$width}) {
+        @content;
+    }
+}
+
+// Шире порога по месту — пара к `place-max`.
+@mixin place-min($width) {
+    @container rt-place (width > #{$width}) {
+        @content;
+    }
+}

package/src/styles/_index.scss

@@ -43,6 +43,10 @@
 // раскладку у себя, ради чего словарь и переехал в кит.
 @forward './form';
 
+// Запасное место страницы на корне документа: без него порог по месту у компонента вне
+// `rt-container` не нашёл бы контейнера и не сработал.
+@forward './place';
+
 // Стили директивы кнопки: своего представления у директивы нет, поэтому её `.scss` не
 // подключён ни одним `styleUrl`. Без этой строки потребитель, взявший `tokens.css` по
 // инструкции README, получает `rtButton`, нарисованный браузерной кнопкой.

package/src/styles/_place.scss

@@ -0,0 +1,7 @@
+/* Корень документа — запасное место страницы. Компонент кита считает пороги от ближайшего
+   места по имени: внутри `rt-container` от его ширины, вне его от корня, а ширина корня равна
+   окну. Так потребитель без контейнера видит пороги окна, как раньше. Объявление стоит вне
+   слоя, как и свойства на корне: потребитель перебивает его порядком. */
+:root {
+    container: rt-place / inline-size;
+}

package/styles/tokens.css

@@ -6799,6 +6799,14 @@ html.rt-theme-dark.rt-preset-material {
     }
   }
 }
+/* Корень документа — запасное место страницы. Компонент кита считает пороги от ближайшего
+   места по имени: внутри `rt-container` от его ширины, вне его от корня, а ширина корня равна
+   окну. Так потребитель без контейнера видит пороги окна, как раньше. Объявление стоит вне
+   слоя, как и свойства на корне: потребитель перебивает его порядком. */
+:root {
+  container: rt-place/inline-size;
+}
+
 @layer rt-kit.components {
   .rt-button {
     /* Высота приходит общей шкалой контролов, а не своим числом: кнопка, поле и

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

@@ -669,6 +669,7 @@ export declare const RT_KIT_LABELS_EN: {
   readonly uiMoveStage: "Move";
   readonly uiMoveStageAria: "Move stage";
   readonly uiNavMenu: "Navigation menu";
+  readonly uiNavMore: "More";
   readonly uiNavUnread: "Unread";
   readonly uiNextMonth: "Next month";
   readonly uiNextPage: "Next page";
@@ -863,10 +864,19 @@ export declare class RtKitLabelPipe implements PipeTransform {
   static ɵfac: i0.ɵɵFactoryDeclaration<RtKitLabelPipe, never>;
   static ɵpipe: i0.ɵɵPipeDeclaration<RtKitLabelPipe, "rtKitLabel", true>;
 }
+/** Порог узкого вида — тот же, что у `$rt-bp-lg` в стилях кита. */
+export declare const RT_NARROW_WIDTH: number;
+/**
+ * Узок ли вид. Ширина места страницы решает, когда место объявлено; без него решает окно.
+ */
+export declare function rtNarrowByWidth(placeWidth: number | null, viewportNarrow: boolean): boolean;
 /**
  * Обёртка над CDK `BreakpointObserver` — публикует reactive signals для
  * mobile/tablet/desktop матчей. `toSignal()` обёртывает CDK Observable в Signal
  * с `initialValue` для CSR-safe рендера.
+ *
+ * Узкий вид считается от ширины места страницы: его объявляет `rt-container`, и рядом с
+ * боковой панелью место уже окна. Без объявленного места вид считается от окна.
  */
 export declare class BreakpointsService {
   #private;
@@ -874,13 +884,22 @@ export declare class BreakpointsService {
   readonly tablet: Signal<boolean>;
   readonly desktop: Signal<boolean>;
   /**
-   * Узкий вьюпорт (≤1080px, планшет + мобила) — единый порог для компонентов,
-   * которые на узком экране подменяют развёрнутый контрол на компактный
-   * (напр. `rt-filter-control`: сегменты → `rt-select`). Совпадает с
-   * брейкпоинтом 1080px из SCSS-конвенции кита. `initialValue: false` — на
-   * SSR/CSR до первого matchMedia рендерим desktop-вариант.
+   * Узкое окно (≤1080px). Его читает то, что открывается поверх экрана и занимает окно:
+   * выбор между всплывающим окном и листом снизу, подсказки списка в окне выбора.
+   * `initialValue: false` — на SSR/CSR до первого matchMedia рендерим desktop-вариант.
+   */
+  readonly viewportNarrow: Signal<boolean>;
+  /**
+   * Узкий вид (≤1080px) — единый порог для компонентов, которые на узком месте подменяют
+   * развёрнутый контрол на компактный (напр. `rt-filter-control`: сегменты → `rt-select`).
+   * Считается от ширины места страницы, без места — от окна.
    */
   readonly narrow: Signal<boolean>;
+  /**
+   * Объявляет узел местом страницы и возвращает снятие. Без `ResizeObserver` (сервер
+   * отрисовки) место не объявляется, и вид считается от окна.
+   */
+  registerPlace(element: HTMLElement): () => void;
   static ɵfac: i0.ɵɵFactoryDeclaration<BreakpointsService, never>;
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }

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

@@ -1,6 +1,6 @@
 import { BooleanInput, NumberInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal, TemplateRef, WritableSignal } from "@angular/core";
+import { ElementRef, InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal, TemplateRef, WritableSignal } from "@angular/core";
 import { IRtIcon, TRtKitLabelMap, TRtKitTranslator } from "@rt-tools/ui-kit-v2/core";
 import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
 export declare namespace IRtPageHeader {
@@ -31,6 +31,13 @@ export declare namespace IRtPageHeader {
     readonly unread?: boolean;
     /** Панель второго уровня: колонка → группа → пункт. */
     readonly columns?: ReadonlyArray<Column>;
+    /**
+     * Важность раздела верхнего ряда: в какой очереди он уходит в пункт «Ещё», когда ряду
+     * не хватает ширины. Чем меньше число, тем раньше раздел уходит. По умолчанию `0`; среди
+     * разделов с равной важностью первым уходит стоящий дальше от начала списка. У пункта
+     * панели поле не читается.
+     */
+    readonly priority?: number;
   }
   /** Колонка панели. Ширина панели считается числом колонок, а не содержимым. */
   interface Column {
@@ -90,6 +97,31 @@ declare namespace IRtPageHeaderView {
     readonly panelItems: ReadonlyArray<Entry>;
     /** Группы всех колонок подряд: на узком экране колонок нет, а группы есть. */
     readonly panelGroups: ReadonlyArray<Group>;
+    /** Очередь ухода в «Ещё»: меньшее число уходит раньше. */
+    readonly priority: number;
+  }
+}
+declare namespace IRtPageHeaderFit {
+  /** Раздел верхнего ряда с замеренной шириной и важностью. */
+  interface Slot {
+    readonly id: string;
+    readonly width: number;
+    readonly priority: number;
+  }
+  interface Input {
+    /** Разделы в порядке списка. */
+    readonly slots: ReadonlyArray<Slot>;
+    /** Ширина пункта «Ещё». */
+    readonly moreWidth: number;
+    /** Ширина, которую ряд может занять. */
+    readonly available: number;
+    /** Промежуток между соседними пунктами ряда. */
+    readonly gap: number;
+  }
+  /** Раскладка ряда: оба списка идут в порядке исходного списка. */
+  interface Result {
+    readonly row: ReadonlyArray<string>;
+    readonly more: ReadonlyArray<string>;
   }
 }
 /** Пункты панели одним списком — колонки и группы для этого раскрываются. */
@@ -108,11 +140,6 @@ declare function toSections(items: ReadonlyArray<IRtPageHeader.Item>): ReadonlyA
 /** Адрес без строки запроса и якоря — подсветка считается по пути. */
 declare function pathOf(url: string): string;
 declare function isEntryActive(entry: IRtPageHeaderView.Entry, path: string): boolean;
-/**
- * Разделы, у которых активен хоть один пункт панели. Обход идёт по раскрытому
- * списку пунктов: своего адреса у раздела с панелью нет, и подсветить его больше
- * нечем.
- */
 /**
  * Разделы для кругов сжатой полосы: первые `count` из тех, у кого есть иконка. Раздел без
  * иконки в круг не попадает — показать в нём нечего, и он остаётся под кнопкой «ещё».
@@ -124,7 +151,23 @@ declare function compactSectionsOf(sections: ReadonlyArray<IRtPageHeaderView.Sec
  * из области целиком, прилипшим не считается: его не видно вовсе.
  */
 declare function isStuck(intersectionRatio: number, isIntersecting: boolean): boolean;
+/**
+ * Разделы, у которых активен хоть один пункт панели. Обход идёт по раскрытому
+ * списку пунктов: своего адреса у раздела с панелью нет, и подсветить его больше
+ * нечем.
+ */
 declare function activeSectionIds(sections: ReadonlyArray<IRtPageHeaderView.Section>, url: string): ReadonlySet<string>;
+/**
+ * Какие разделы стоят в ряду, а какие уходят в «Ещё». Всё помещается — «Ещё» нет. Иначе разделы
+ * уходят по очереди важности, пока оставшиеся вместе с «Ещё» не встанут в доступную ширину:
+ * меньшая важность уходит раньше, а при равной — стоящий дальше от начала списка. Порядок
+ * оставшихся не меняется.
+ */
+declare function fitRow(input: IRtPageHeaderFit.Input): IRtPageHeaderFit.Result;
+/** Активен ли раздел: своим адресом или адресом пункта своей панели. */
+declare function isSectionActive(section: IRtPageHeaderView.Section, path: string): boolean;
+/** Есть ли среди разделов активный — по нему «Ещё» подсвечивается, как выбранный пункт ряда. */
+declare function hasActiveSection(sections: ReadonlyArray<IRtPageHeaderView.Section>, url: string): boolean;
 /**
  * Верхняя горизонтальная плашка-навигация для первого уровня доменных страниц.
  *
@@ -141,6 +184,9 @@ declare function activeSectionIds(sections: ReadonlyArray<IRtPageHeaderView.Sect
  */
 export declare class RtPageHeaderComponent {
   #private;
+  protected readonly navRef: Signal<ElementRef<HTMLElement> | undefined>;
+  protected readonly listRef: Signal<ElementRef<HTMLElement> | undefined>;
+  protected readonly moreItemRef: Signal<ElementRef<HTMLElement> | undefined>;
   /** Переводчик для чистого пайпа подписи: шаблон отдаёт его вторым доводом. */
   protected readonly translate: Signal<TRtKitTranslator>;
   protected readonly t: Signal<TRtKitLabelMap>;
@@ -151,6 +197,14 @@ export declare class RtPageHeaderComponent {
   protected readonly compact: Signal<boolean>;
   /** Разделы в кругах сжатой полосы: первые с иконкой, число — по входу. */
   protected readonly compactSections: Signal<ReadonlyArray<IRtPageHeaderView.Section>>;
+  /** Разделы, ушедшие из ряда в «Ещё»: шаблон вынимает их из ряда, сохраняя в разметке для замера. */
+  protected readonly overflowIds: Signal<ReadonlySet<string>>;
+  /** Разделы панели «Ещё» в порядке списка. */
+  protected readonly moreSections: Signal<ReadonlyArray<IRtPageHeaderView.Section>>;
+  /** «Ещё» стоит в ряду, только когда в ряд не встал хоть один раздел. */
+  protected readonly moreShown: Signal<boolean>;
+  /** Выбранный раздел ушёл в «Ещё» — подсвечивается сам «Ещё». */
+  protected readonly moreActive: Signal<boolean>;
   /** Форма пункта решается один раз здесь, а не ветвлениями в шаблоне. */
   protected readonly sections: Signal<ReadonlyArray<IRtPageHeaderView.Section>>;
   /**

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

@@ -65,6 +65,10 @@ export declare class RtCopyCellComponent {
    *
    * Ширина известна только отрисованному узлу, а меняется она и от переезда столбца, и от
    * ширины окна: посчитанная один раз при заведении, она соврала бы при первом же изменении.
+   *
+   * Браузер шлёт `mouseenter` сперва ячейке, потом её содержимому, и перерисовки между ними
+   * нет. Подсказка читает свой текст на входе указателя в содержимое, поэтому текст отдаётся
+   * ей сразу: иначе она застала бы прежний, пустой, и появилась бы только со второго наведения.
    */
   protected measureTruncation(): void;
   protected onCopy(event: MouseEvent): void;