@rt-tools/ui-kit-v2 0.38.0 → 0.39.0

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

@@ -10,11 +10,15 @@
 </rt-toolbar>
 ```
 
-| вход    | тип       | умолчание |
-| ------- | --------- | --------- |
-| `dense` | `boolean` | `false`   |
+| вход            | тип       | умолчание |
+| --------------- | --------- | --------- |
+| `dense`         | `boolean` | `false`   |
+| `filtersActive` | `boolean` | `false`   |
 
-Выходов нет.
+| выход          | когда                                          |
+| -------------- | ---------------------------------------------- |
+| `filtersApply` | нажата «Применить» панели отборов, она закрыта |
+| `filtersReset` | нажата «Сбросить» панели отборов, она открыта  |
 
 ## Главное, что нужно знать
 
@@ -37,3 +41,16 @@
 **Плотная полоса остаётся строкой на любой ширине, и её левая часть сжимается.** Длинный
 заголовок в ней переносится по словам и не выходит за правый край. Кнопки справа держат свою
 ширину. Обычная полоса левую часть не сжимает: на узком экране она стекает в колонку.
+
+**Отборы списка объявляются слотом `rtToolbarFilters`, и на узком месте они уходят за кнопку.** На
+широком месте слот стоит в левой части после её содержимого. На узком месте
+(`BreakpointsService.narrow`) вместо полей рисуется кнопка фильтров, первой в ряду кнопок правой
+части; ниже 768 этот ряд начинается от левого края. Вход `filtersActive` ставит точку в угол значка.
+Кнопка открывает панель `RtToolbarFiltersAsideComponent` службой боковых панелей. «Сбросить»
+сообщает `filtersReset`, и панель остаётся открытой; «Применить» сообщает `filtersApply` и
+закрывает её. Контекст шаблона — место, где он нарисован: `bar` или `panel`. Хозяин панели —
+инжектор полосы: уничтожение полосы закрывает панель, и расширение места тоже — иначе поля отборов
+стояли бы в полосе и в панели сразу; фокус из закрытой так панели уходит в левую секцию полосы.
+Второе нажатие кнопки, пока панель открыта, ничего не открывает. Панель держит фокус
+(`trapFocus`) и объявлена модальным диалогом (`modal`), а имя кнопки при `filtersActive` говорит
+скринридеру, что отбор включён.

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

@@ -0,0 +1,22 @@
+@layer rt-kit.components {
+    /* rt-toolbar-filters-aside — панель отборов полосы на узком экране. ViewEncapsulation.None. */
+    .rt-toolbar-filters-aside {
+        --rt-toolbar-filters-aside-gap: var(--rt-space-md);
+
+        /* Поля отборов — одно под другим во всю ширину тела панели. */
+        &__fields {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-toolbar-filters-aside-gap);
+
+            // Блок получает начальный фокус панели как место, а не как элемент управления: рамки нет
+            &:focus {
+                outline: none;
+            }
+
+            > * {
+                width: 100%;
+            }
+        }
+    }
+}

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

@@ -83,6 +83,12 @@
                 gap: var(--rt-space-sm);
             }
         }
+
+        /* Кнопка фильтров узкого места — первая в ряду кнопок и не сжимается: точка включённого
+           отбора выступает за её угол, и полоса её не режет — у секций нет своего overflow. */
+        &__filters-trigger {
+            flex-shrink: 0;
+        }
     }
 
     // Плотная полоса не стекает в колонку, и длинный заголовок левой зоны ей некуда деть: зона
@@ -119,5 +125,11 @@
                 margin-left: 0;
             }
         }
+
+        // Отборы ушли за кнопку: она открывает ряд кнопок полосы у левого края, как в макете
+        // «Телефон · Toolbar · фильтры за кнопкой».
+        .rt-toolbar--filters-collapsed:not(.rt-toolbar--dense) .rt-toolbar__bar--right {
+            justify-content: flex-start;
+        }
     }
 }

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

@@ -35,7 +35,8 @@ export type TRtAsideContentLayout = 'default' | 'tabs';
  * обводка фокуса поля срезалась краем такого мини-скроллера.
  *
  * Семантика — `role="complementary"` (mirror rt-dialog имеет `role="dialog"`,
- * aside — другая роль, side-sheet не обязательно блокирующий).
+ * aside — другая роль, side-sheet не обязательно блокирующий). Панель, которая блокирует
+ * страницу и держит фокус, включает вход `modal`: рамка объявлена `role="dialog"` с `aria-modal`.
  *
  * `ViewEncapsulation.None` — стили префиксованы `.rt-aside`, чтобы соседние
  * rt-aside-header / rt-aside-footer работали с одним BEM-блоком без
@@ -59,6 +60,8 @@ export declare class RtAsideComponent {
    * элемент под Tab, а когда панель уходит или вход гаснет, возвращается туда, где стоял.
    */
   readonly trapFocus: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Панель блокирует страницу: рамка объявлена скринридеру модальным диалогом. */
+  readonly modal: InputSignalWithTransform<boolean, BooleanInput>;
   /** Идёт запрос: панель накрыта слоем с крутилкой и помечена занятой. */
   readonly pending: InputSignalWithTransform<boolean, BooleanInput>;
   constructor();
@@ -94,6 +97,11 @@ export declare class RtAsideComponent {
       "required": false;
       "isSignal": true;
     };
+    "modal": {
+      "alias": "modal";
+      "required": false;
+      "isSignal": true;
+    };
     "pending": {
       "alias": "pending";
       "required": false;
@@ -429,9 +437,20 @@ export declare class RtAsideFooterComponent {
   #private;
   protected readonly buttons: Signal<readonly RtButtonDirective[]>;
   protected readonly hosts: Signal<readonly ElementRef<HTMLElement>[]>;
+  /**
+   * На телефоне кнопка слота `[asideDismiss]` читается «Закрыть»: так она названа у всех панелей.
+   * `false` оставляет подпись потребителя — у панели фильтров эта кнопка «Сбросить», а не выход.
+   */
+  readonly phoneCloseLabel: InputSignalWithTransform<boolean, boolean | string>;
   constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<RtAsideFooterComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideFooterComponent, "rt-aside-footer", never, {}, {}, ["buttons", "hosts"], ["[asideDismiss]", "[asidePrimary]"], true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideFooterComponent, "rt-aside-footer", never, {
+    "phoneCloseLabel": {
+      "alias": "phoneCloseLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["buttons", "hosts"], ["[asideDismiss]", "[asidePrimary]"], true, never>;
 }
 /**
  * Блок ошибки запроса боковой панели: надпись и кнопка, которая кладёт в буфер обмена время и

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

@@ -670,6 +670,7 @@ export declare const RT_KIT_LABELS_EN: {
   readonly uiFilterStartsWith: "Starts with";
   readonly uiFilterValue: "Filter value";
   readonly uiFilters: "Filters";
+  readonly uiFiltersActive: "Filters, applied";
   readonly uiForward: "Forward";
   readonly uiHide: "Hide";
   readonly uiHideColumn: "Hide column";

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

@@ -26,7 +26,8 @@ export declare namespace IRtPopover {
  * Триггеры:
  * - `click` (default) — toggle по клику на host; outside-click закрывает.
  * - `hover` — открытие на `mouseenter`, закрытие с grace-периодом на `mouseleave`
- *   (наведение на панель удерживает её открытой).
+ *   (наведение на панель удерживает её открытой). Наведение судится только мышиное:
+ *   касание и перо открывают панель нажатием.
  * - `manual` — авто-listener'ы не вешаются; host сам зовёт `open()/close()`.
  *   Используется form-control'ами с собственным жестом (autocomplete — открытие
  *   по набору текста).
@@ -80,6 +81,7 @@ export declare class RtPopoverDirective implements OnDestroy {
   close(): void;
   toggle(): void;
   protected onHostClick(): void;
+  protected onHostPointerEnter(event: PointerEvent): void;
   protected onHostMouseEnter(): void;
   protected onHostMouseLeave(event: MouseEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtPopoverDirective, never>;

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

@@ -2,6 +2,7 @@ import { BooleanInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
 import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from "@angular/core";
 import { IRtIcon, TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
+import * as i1 from "@angular/cdk/scrolling";
 /**
  * Модель `<rt-profile-menu>`: один корневой неймспейс с префиксом `I`.
  */
@@ -99,5 +100,9 @@ export declare class RtProfileMenuComponent {
     "changePassword": "changePassword";
     "localeChange": "localeChange";
     "signOut": "signOut";
-  }, never, never, true, never>;
+  }, never, never, true, [{
+    directive: typeof i1.CdkScrollable;
+    inputs: {};
+    outputs: {};
+  }]>;
 }

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

@@ -1,5 +1,19 @@
 import * as i0 from "@angular/core";
-import { InputSignalWithTransform, Signal, TemplateRef } from "@angular/core";
+import { InputSignalWithTransform, OutputEmitterRef, Signal, TemplateRef } from "@angular/core";
+export declare namespace IRtToolbar {
+  /** Где нарисован слот отборов: в полосе широкого экрана или в панели узкого. */
+  type TFiltersPlace = 'bar' | 'panel';
+  /** Контекст шаблона `rtToolbarFilters`: полю в панели нужна подпись над ним, полю в полосе — нет. */
+  interface IFiltersContext {
+    $implicit: TFiltersPlace;
+  }
+  /** Данные панели отборов: шаблон слота и два нажатия подвала. */
+  interface IFiltersPanelData {
+    template: TemplateRef<IFiltersContext>;
+    reset: () => void;
+    apply: () => void;
+  }
+}
 /**
  * Маркер-директива для контента в левой секции тулбара.
  *
@@ -48,7 +62,35 @@ export declare class RtToolbarRightDirective {
   static ɵfac: i0.ɵɵFactoryDeclaration<RtToolbarRightDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<RtToolbarRightDirective, "[rtToolbarRight]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Маркер-директива для отборов списка. На широком экране они стоят в левой секции после её
+ * содержимого, на узком — за кнопкой фильтров, которая открывает панель отборов. Контекст шаблона
+ * — место, где он нарисован: `bar` или `panel`.
+ *
+ * @example
+ * ```html
+ * <rt-toolbar [filtersActive]="hasFilter()" (filtersReset)="reset()">
+ *     <ng-template rtToolbarFilters let-place>
+ *         <rt-select [label]="place === 'panel' ? 'Статус' : null" … />
+ *     </ng-template>
+ * </rt-toolbar>
+ * ```
+ */
+export declare class RtToolbarFiltersDirective {
+  static ngTemplateContextGuard(_directive: RtToolbarFiltersDirective, context: unknown): context is IRtToolbar.IFiltersContext;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtToolbarFiltersDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<RtToolbarFiltersDirective, "[rtToolbarFilters]", never, {}, {}, never, never, true, never>;
+}
 export declare class RtToolbarComponent {
+  #private;
+  protected readonly filtersLabel: Signal<string>;
+  /** Имя кнопки для скринридера: точку в углу он не видит, и включённый отбор назван словами. */
+  protected readonly filtersAriaLabel: Signal<string>;
+  protected readonly filtersTpl: Signal<TemplateRef<IRtToolbar.IFiltersContext> | undefined>;
+  /** Отборы ушли за кнопку: они объявлены, а место узкое. */
+  protected readonly collapsed: Signal<boolean>;
+  /** Отборы стоят в левой секции: они объявлены, а место широкое. */
+  protected readonly filtersInBar: Signal<boolean>;
   protected readonly leftTpl: Signal<TemplateRef<unknown> | undefined>;
   protected readonly centerTpl: Signal<TemplateRef<unknown> | undefined>;
   protected readonly rightTpl: Signal<TemplateRef<unknown> | undefined>;
@@ -58,6 +100,14 @@ export declare class RtToolbarComponent {
    * ≤768px, что для узкой шапки (напр. rt-chat) неверно.
    */
   readonly dense: InputSignalWithTransform<boolean, boolean | string>;
+  /** Включён хотя бы один отбор: кнопка фильтров узкого экрана несёт точку в углу значка. */
+  readonly filtersActive: InputSignalWithTransform<boolean, boolean | string>;
+  /** Нажата «Применить» панели отборов; панель после этого закрыта. */
+  readonly filtersApply: OutputEmitterRef<void>;
+  /** Нажата «Сбросить» панели отборов; панель остаётся открытой. */
+  readonly filtersReset: OutputEmitterRef<void>;
+  constructor();
+  protected openFilters(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtToolbarComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<RtToolbarComponent, "rt-toolbar", never, {
     "dense": {
@@ -65,5 +115,32 @@ export declare class RtToolbarComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, ["leftTpl", "centerTpl", "rightTpl"], never, true, never>;
+    "filtersActive": {
+      "alias": "filtersActive";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "filtersApply": "filtersApply";
+    "filtersReset": "filtersReset";
+  }, ["filtersTpl", "leftTpl", "centerTpl", "rightTpl"], never, true, never>;
+}
+/**
+ * Панель отборов полосы `rt-toolbar` на узком экране.
+ *
+ * Её поднимает кнопка фильтров полосы службой боковых панелей кита. В теле — слот
+ * `rtToolbarFilters` с контекстом `panel`; шапка — заголовок «Фильтры» и стрелка возврата, без
+ * надзаголовка и действий; подвал — «Сбросить» и «Применить» по краям. «Сбросить» сообщает о себе
+ * и оставляет панель открытой, «Применить» сообщает и закрывает, стрелка закрывает молча.
+ */
+export declare class RtToolbarFiltersAsideComponent {
+  #private;
+  protected readonly data: IRtToolbar.IFiltersPanelData;
+  protected readonly title: Signal<string>;
+  protected readonly resetLabel: Signal<string>;
+  protected readonly applyLabel: Signal<string>;
+  protected onReset(): void;
+  protected onApply(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtToolbarFiltersAsideComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtToolbarFiltersAsideComponent, "rt-toolbar-filters-aside", never, {}, {}, never, never, true, never>;
 }