@rt-tools/ui-kit-v2 0.34.4 → 0.34.5

package/package.json

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

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

@@ -11,9 +11,11 @@
         margin: var(--rt-aside-footer-margin, var(--rt-aside-inset));
         border-block-start: var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle);
 
+        /* Кнопки стоят в одну строку на любой ширине: на телефоне первая подписана коротко и
+           строка помещается без переноса. */
         &__content {
             display: flex;
-            flex-wrap: wrap;
+            flex-wrap: nowrap;
             justify-content: var(--rt-aside-footer-justify, space-between);
             gap: var(--rt-aside-footer-gap, var(--rt-space-sm));
         }

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

@@ -1,3 +1,5 @@
+@use '../../../../styles/breakpoints' as bp;
+
 @layer rt-kit.components {
     /* rt-aside-unsaved-dialog — окно о несохранённых правках при закрытии панели.
        ViewEncapsulation.None — селекторы префиксованы `.rt-aside-unsaved-dialog`.
@@ -29,13 +31,18 @@
             font-size: var(--rt-text-sm);
         }
 
-        /* Три кнопки идут в одну строку, а когда она их не вмещает — переносятся и
-           выравниваются по правому краю, сохраняя порядок. */
+        /* Три кнопки стоят в одну строку по правому краю: окну средней ширины их хватает. На
+           телефоне строка их не вмещает, и они встают столбиком во всю ширину в том же порядке. */
         &__footer {
             display: flex;
-            flex-wrap: wrap;
+            flex-wrap: nowrap;
             justify-content: flex-end;
             gap: var(--rt-space-sm);
+
+            @media (width <= #{bp.$rt-bp-sm}) {
+                flex-direction: column;
+                align-items: stretch;
+            }
         }
     }
 }

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

@@ -5,6 +5,7 @@ import { ComponentType, OverlayRef } from "@angular/cdk/overlay";
 import { Observable, Subject } from "rxjs";
 import { IRtIcon, TRtKitLabelMap, TRtRadius } from "@rt-tools/ui-kit-v2/core";
 import { IRtTag } from "@rt-tools/ui-kit-v2/tag";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
 /**
  * Варианты ширины side-sheet:
  * - `sm` — 400px (`--rt-aside-width-sm`)
@@ -400,12 +401,17 @@ export declare class RtAsideHeaderComponent {
 }
 /**
  * Footer-слот для композиции внутри `<rt-aside>`. Две зоны через именованные
- * слоты: `[asideDismiss]` (слева — «Закрыть», `appearance="text"`, всегда) и
- * `[asidePrimary]` (справа — единственный позитивный глагол: Сохранить /
- * Отправить / Опубликовать, если есть). Раскладка `justify-content:
- * space-between`. Доменные/деструктивные действия в футер не кладём — они
+ * слоты: `[asideDismiss]` (слева — «Закрыть») и `[asidePrimary]` (справа —
+ * единственный позитивный глагол: Сохранить / Отправить / Опубликовать, если
+ * есть). Раскладка `justify-content: space-between`, кнопки стоят в одну строку
+ * на любой ширине. Доменные/деструктивные действия в футер не кладём — они
  * проецируются иконками в `<rt-aside-header>` слот `[asideActions]`.
  *
+ * Вид кнопок задаёт подвал, а не разметка потребителя: «Закрыть» в рамке темы
+ * secondary, позитивный глагол залитый и без значка. На телефоне первая кнопка
+ * подписана коротко — «Закрыть» из подписей кита. Кнопка может стоять в слоте
+ * не сама, а внутри обёртки с атрибутом слота: так ставят подсказку на кнопку.
+ *
  * Только две именованные зоны — безатрибутный контент НЕ проецируется (контент
  * без `asideDismiss`/`asidePrimary` не отрендерится).
  *
@@ -414,14 +420,18 @@ export declare class RtAsideHeaderComponent {
  * @example
  * \`\`\`html
  * <rt-aside-footer>
- *   <button rtButton asideDismiss appearance="text" (click)="onClose()">Закрыть</button>
- *   <button rtButton asidePrimary theme="primary" (click)="save()">Сохранить</button>
+ *   <button rtButton asideDismiss label="Закрыть и не сохранять" (click)="onClose()"></button>
+ *   <button rtButton asidePrimary label="Сохранить" (click)="save()"></button>
  * </rt-aside-footer>
  * \`\`\`
  */
 export declare class RtAsideFooterComponent {
+  #private;
+  protected readonly buttons: Signal<readonly RtButtonDirective[]>;
+  protected readonly hosts: Signal<readonly ElementRef<HTMLElement>[]>;
+  constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<RtAsideFooterComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideFooterComponent, "rt-aside-footer", never, {}, {}, never, ["[asideDismiss]", "[asidePrimary]"], true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideFooterComponent, "rt-aside-footer", never, {}, {}, ["buttons", "hosts"], ["[asideDismiss]", "[asidePrimary]"], true, never>;
 }
 /**
  * Блок ошибки запроса боковой панели: надпись и кнопка, которая кладёт в буфер обмена время и

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

@@ -1,6 +1,6 @@
 import { BooleanInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import { InputSignal, InputSignalWithTransform, Signal } from "@angular/core";
+import { InputSignal, InputSignalWithTransform, Signal, WritableSignal } from "@angular/core";
 import { IButton } from "@rt-tools/ui-kit-v2/core";
 import * as i1 from "@rt-tools/ui-kit-v2/ripple";
 import * as i2 from "@rt-tools/ui-kit-v2/radius";
@@ -24,6 +24,11 @@ import * as i2 from "@rt-tools/ui-kit-v2/radius";
 export declare class RtButtonDirective {
   #private;
   protected readonly isIconOnly: Signal<boolean>;
+  /**
+   * Вид, который задаёт место кнопки: слот подвала панели. Пишет его хозяин места, а не
+   * приложение, — входы кнопки при этом не трогаются и вернутся, когда место вид снимет.
+   */
+  readonly placeLook: WritableSignal<IButton.PlaceLook | null>;
   /** Текстовый лейбл кнопки. Если null — кнопка только с иконкой. */
   readonly label: InputSignal<string | null>;
   /**

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

@@ -23,6 +23,17 @@ export declare namespace IButton {
    * невидимы, но держат ширину кнопки, а спиннер стоит по центру.
    */
   type LoadingLabel = 'keep' | 'hide';
+  /**
+   * Вид, который кнопке задаёт место, где она стоит, — например слот подвала панели. Названное
+   * здесь сильнее входов кнопки, неназванное берётся из входов. `icon: null` снимает значок,
+   * `label` подменяет подпись.
+   */
+  interface PlaceLook {
+    readonly theme?: Theme;
+    readonly appearance?: Appearance;
+    readonly icon?: null;
+    readonly label?: string;
+  }
 }
 /** Вид колонки: решает, чем рисуется значение ячейки. */
 export declare enum ERtDataTableColumnType {
@@ -1044,6 +1055,8 @@ export declare function rtSearchWords(query: string): string[];
 export declare function rtSearchMatches(text: string, query: string): boolean;
 /** Порог узкого вида — тот же, что у `$rt-bp-lg` в стилях кита. */
 export declare const RT_NARROW_WIDTH: number;
+/** Порог телефона — тот же, что у `$rt-bp-sm` в стилях кита. */
+export declare const RT_PHONE_WIDTH: number;
 /**
  * Узок ли вид. Ширина места страницы решает, когда место объявлено; без него решает окно.
  */
@@ -1067,6 +1080,11 @@ export declare class BreakpointsService {
    * `initialValue: false` — на SSR/CSR до первого matchMedia рендерим desktop-вариант.
    */
   readonly viewportNarrow: Signal<boolean>;
+  /**
+   * Окно телефона (≤480px). На нём то, что на экране шире стоит в строку, встаёт короче или
+   * столбиком: подпись первой кнопки подвала панели. `initialValue: false` — как у узкого окна.
+   */
+  readonly phone: Signal<boolean>;
   /**
    * Узкий вид (≤1080px) — единый порог для компонентов, которые на узком месте подменяют
    * развёрнутый контрол на компактный (напр. `rt-filter-control`: сегменты → `rt-select`).