@rt-tools/ui-kit-v2 0.41.0 → 0.42.0

package/package.json

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

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

@@ -31,8 +31,10 @@
 
 **Календарь ничего не считает.** Раскладку месяца готовит потребитель: сколько пустых клеток в
 начале (`leadingBlanks`), какие дни заняты (`state`), что писать под числом (`sublabel`), какие
-дни недоступны (`disabled`). Компонент только показывает готовое — поэтому он одинаково годится
-и для выбора дат, и для витрины занятости.
+дни недоступны (`disabled`). Вместо пустых клеток месяц может нести дни соседних месяцев
+(`leadingDays` и `trailingDays`). Они бледные и не нажимаются, а с `crossed` ещё и зачёркнуты.
+Компонент только показывает готовое — поэтому он одинаково годится и для выбора дат, и для витрины
+занятости.
 
 **Это не поле ввода.** Значение он не хранит и в форму не пишет; для ввода даты есть
 [`rt-date-picker`](../date-picker/CONTEXT.md), для периода — [`rt-date-range`](../date-range/CONTEXT.md).

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

@@ -140,6 +140,11 @@
                 box-shadow: var(--rt-calendar-today-ring);
             }
 
+            /* Число сегодняшнего дня — цвета действия и полужирное, пока день не залит выбором. */
+            &[data-today]:not([data-state='start'], [data-state='end'], [data-state='chosen'], [data-state='in-range']) {
+                color: var(--rt-color-action-primary);
+            }
+
             &:focus-visible {
                 outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
                 outline-offset: var(--rt-focus-ring-offset);
@@ -175,6 +180,27 @@
             font-weight: var(--rt-font-weight-medium);
         }
 
+        &__day[data-today] &__day-num {
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        /* День соседнего месяца: стоит в сетке как день, бледный, не нажимается. За границей
+           выбора ещё и зачёркнут, как занятый день. */
+        &__outside {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+            min-block-size: var(--rt-calendar-day-size);
+            opacity: 0.45;
+
+            &[data-crossed] {
+                text-decoration: line-through;
+            }
+        }
+
         &__day-sublabel {
             font-size: var(--rt-text-2xs);
             opacity: 0.75;
@@ -185,8 +211,9 @@
                 grid-template-columns: 1fr;
             }
 
-            /* на мобиле показываем один месяц — навигация листает по одному */
-            &__month:last-child {
+            /* на мобиле показываем один месяц — навигация листает по одному. Прячется только второй
+               из двух: единственный месяц тоже последний, и без `:not(:first-child)` пропадала сетка */
+            &__month:last-child:not(:first-child) {
                 display: none;
             }
         }

package/src/lib/components/date-picker/CONTEXT.md

@@ -24,6 +24,11 @@
 или «Применить». На широком экране панель стоит в поповере, на узком — в нижней шторке. Признак
 узкого экрана даёт `BreakpointsService.narrow`. Договорённость — `docs/specs/ui-kit-v2/date-panel/`.
 
+**Панель выдаётся и отдельно.** `RtDatePanelComponent` идёт из этой же точки входа для выбора без
+текстового поля. Поповер или шторку держит потребитель: он создаёт панель заново на каждое открытие,
+закрывает её по `closed`, а значение получает из `picked`. Своей поверхности у панели нет, в поповере
+фон, рамку и тень даёт потребитель. Вход `sheet` включает вид для шторки.
+
 **Текст в поле — дата в порядке языка интерфейса.** Под `ru` это `01.08.2026`, под `en-US` —
 «08/01/2026», время всегда `HH:mm`. Язык берётся из `RT_KIT_LOCALE`: приложение, меняющее язык на
 ходу, меняет и порядок. Подсказка в пустом поле — та же форма буквами кита (`дд.мм.гггг`). Набранный

package/src/lib/components/date-picker/panel/CONTEXT.md

@@ -0,0 +1,42 @@
+# `rt-date-panel`
+
+```html
+<rt-date-panel type="datetime-local" [value]="value()" (picked)="value.set($event)" (closed)="close()" />
+```
+
+Панель выбора даты и времени. Её открывает [`rt-date-picker`](../CONTEXT.md), а для выбора без
+текстового поля она идёт из той же точки входа `@rt-tools/ui-kit-v2/date-picker`.
+
+| вход                 | тип                                    | умолчание  |
+| -------------------- | -------------------------------------- | ---------- |
+| `type`               | `'date' \| 'time' \| 'datetime-local'` | обязателен |
+| `value`              | `string` (форма значения поля)         | `''`       |
+| `min` / `max`        | `string \| null` (форма значения)      | `null`     |
+| `minuteStep`         | `number`                               | `5`        |
+| `sheet`              | `boolean`                              | `false`    |
+| `now`                | `Date \| null`                         | `null`     |
+| `isTodayButtonShown` | `boolean`                              | `true`     |
+
+`isTodayButtonShown` показывает «Сегодня» у типа `date`. Без кнопки подвала у даты нет, день
+выбирается нажатием и сразу закрывает панель. Подвал других типов этот вход не трогает.
+
+Месяц панели дописан днями соседних месяцев до полных недель, а день за границей зачёркнут. Над
+колонками времени стоят подписи «Часы» и «Минуты». В поповере даты со временем подвал несёт
+«Сейчас» слева, затем «Сбросить» и «Применить». «Сбросить» отдаёт пустое значение и закрывает
+панель. В шторке вместо «Сейчас» и «Сбросить» слева стоит выбранное значение.
+
+| выход    | значение | когда                                                       |
+| -------- | -------- | ----------------------------------------------------------- |
+| `picked` | `string` | готовое значение в форме `value`                            |
+| `closed` | —        | панель просит закрыть себя: после выбора и по Escape в днях |
+
+## Главное, что нужно знать
+
+**Поповер или шторку держит потребитель.** Панель сама не открывается и не закрывается: он создаёт
+её заново на каждое открытие и закрывает по `closed`. Черновик живёт, пока панель открыта.
+
+**Своей поверхности у панели нет.** В поповере фон, рамку и тень даёт потребитель, в
+`rt-bottom-sheet` их даёт шторка. Вход `sheet` включает вид для шторки: дни под палец, а у даты со
+временем переключатель «Дата | Время».
+
+Как это выглядит, показывают истории `DatePanelOpening` в разделе полей формы.

package/src/lib/components/date-picker/panel/rt-date-panel.component.scss

@@ -102,7 +102,46 @@
 
         &__time {
             display: flex;
-            gap: var(--rt-space-1);
+            gap: var(--rt-space-2);
+        }
+
+        /* Колонки времени рядом с месяцем отделены чертой на всю высоту тела. */
+        &__time:not(:first-child) {
+            align-self: stretch;
+            border-inline-start: var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);
+            padding-inline-start: var(--rt-space-4);
+        }
+
+        /* Переключатель «Дата | Время» по ширине своих сегментов, по центру. */
+        &__tabs {
+            align-self: center;
+        }
+
+        /* Колонка времени с подписью над ней: подпись не прокручивается вместе с ячейками. */
+        &__time-group {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-2);
+        }
+
+        &__time-title {
+            padding: var(--rt-space-1) 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            text-align: center;
+        }
+
+        /* Первая кнопка подвала прижата влево, остальные стоят справа. */
+        &__lead {
+            margin-inline-end: auto;
+        }
+
+        /* Выбранное значение в подвале шторки: слева, напротив «Применить». */
+        &__value {
+            align-self: center;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            margin-inline-end: auto;
         }
 
         &__column {
@@ -156,6 +195,20 @@
             }
         }
 
+        /* Ячейка времени — полоса на ширину колонки, число у левого края. Выбранная ячейка залита
+           бледным цветом действия, число тёмное и полужирное. */
+        &__column &__cell {
+            min-inline-size: calc(var(--rt-size-10) * 1.5);
+            padding-inline: var(--rt-space-4) 0;
+            text-align: start;
+
+            &[aria-pressed='true'] {
+                background: var(--rt-color-action-primary-subtle);
+                color: var(--rt-color-text-primary);
+                font-weight: var(--rt-font-weight-semibold);
+            }
+        }
+
         &__footer {
             display: flex;
             justify-content: flex-end;
@@ -197,7 +250,7 @@
             justify-content: center;
         }
 
-        &--sheet &__column {
+        &--sheet &__time-group {
             flex: 1 1 0;
         }
     }

package/src/rich-editor/lib/components/chat/CONTEXT.md

@@ -48,7 +48,7 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 ставит курсор в конец. Файлы остаются, сигнала набора нет, закрытое поле текст не принимает.
 Работу метода показывает история `QuickReplies` страницы переписки: кнопка у поля ответа и
 подсказка в боковой панели ставят текст в поле, гостю ничего не уходит. Метод `draftText` читает
-текст поля без разметки и файлы не трогает.
+текст поля без разметки и файлы не трогает, а метод `draftFiles` отдаёт выбранные файлы.
 
 **Подпись на пузыре даёт приложение.** `dateLabel` стоит вместо времени, `dateIcon` на месте значка
 статуса. Значки ошибки отправки и недоставки остаются: они предупреждают. Подписи дней считаются от

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

@@ -38,12 +38,24 @@ export declare namespace IRtCalendar {
     key: string;
     day: Day;
   }
-  /** View-модель месяца: подпись, пустые ячейки до первого дня, дни. */
+  /** День соседнего месяца в начале или в конце сетки: бледный, не нажимается. */
+  interface OutsideDay {
+    key: string;
+    dayOfMonth: number;
+    /** День за границей выбора — ещё и зачёркнут. */
+    crossed: boolean;
+  }
+  /**
+   * View-модель месяца: подпись, пустые ячейки до первого дня, дни. Дни соседних месяцев
+   * необязательны: заданы — встают на место пустых ячеек и дописывают последнюю неделю.
+   */
   interface Month {
     key: string;
     label: string;
     leadingBlanks: readonly number[];
     days: readonly Day[];
+    leadingDays?: readonly OutsideDay[];
+    trailingDays?: readonly OutsideDay[];
   }
 }
 export declare class RtCalendarComponent {

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

@@ -1,11 +1,12 @@
-import { NumberInput } from "@angular/cdk/coercion";
+import { BooleanInput, NumberInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import { ElementRef, InputSignal, InputSignalWithTransform, Signal, WritableSignal } from "@angular/core";
+import { ElementRef, InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal, WritableSignal } from "@angular/core";
 import { IRtIcon, IRtInput, TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
+import { IRtCalendar } from "@rt-tools/ui-kit-v2/calendar";
+import { IRtToggleButtonGroup } from "@rt-tools/ui-kit-v2/toggle-button-group";
 import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
 import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
-import { IRtCalendar } from "@rt-tools/ui-kit-v2/calendar";
 /** Контракт rt-date-picker. */
 export declare namespace IRtDatePicker {
   /** Тип значения: дата, время или дата со временем. */
@@ -70,6 +71,151 @@ export declare namespace IRtDatePicker {
     max: string | null;
   }
 }
+type TView = 'days' | 'months' | 'years';
+type TTab = 'date' | 'time';
+/**
+ * Панель выбора даты и времени: месяц с листанием, сетки месяцев и годов, колонки часов и минут,
+ * подвал с «Сегодня», «Сейчас», «Готово» или «Применить» — по типу значения. Её открывает
+ * rt-date-picker, а без текстового поля она стоит в поповере или в rt-bottom-sheet потребителя.
+ *
+ * Панель не пишет в форму: готовое значение уходит событием `picked`, просьба закрыться —
+ * `closed`. Черновик живёт, пока панель открыта, поэтому её создают заново на каждое открытие.
+ * Поверхности у панели нет: фон, рамку и тень даёт то, во что её положили.
+ * Вся арифметика дат — в `rt-date-panel.logic`.
+ */
+export declare class RtDatePanelComponent {
+  #private;
+  protected readonly t: Signal<TRtKitLabelMap>;
+  protected readonly weekdays: Signal<readonly string[]>;
+  protected readonly timeCells: Signal<readonly ElementRef<HTMLButtonElement>[]>;
+  protected readonly view: WritableSignal<TView>;
+  protected readonly tab: WritableSignal<TTab>;
+  protected readonly activeKey: WritableSignal<string | null>;
+  protected readonly today: Signal<string>;
+  protected readonly draftDay: WritableSignal<string | null>;
+  protected readonly draftTime: WritableSignal<string | null>;
+  protected readonly shownMonth: WritableSignal<string>;
+  protected readonly year: WritableSignal<number>;
+  protected readonly split: Signal<boolean>;
+  protected readonly showDate: Signal<boolean>;
+  protected readonly showTime: Signal<boolean>;
+  protected readonly months: Signal<IRtCalendar.Month[]>;
+  protected readonly canPrev: Signal<boolean>;
+  protected readonly canNext: Signal<boolean>;
+  protected readonly monthCells: Signal<IRtDatePicker.MonthCell[]>;
+  protected readonly canPrevYear: Signal<boolean>;
+  protected readonly canNextYear: Signal<boolean>;
+  /** Первый год блока, который показывает сетка годов. */
+  protected readonly yearStart: WritableSignal<number>;
+  protected readonly yearCells: Signal<IRtDatePicker.YearCell[]>;
+  protected readonly yearSpan: Signal<string>;
+  /** Выбранный год — год значения; текущий — год сегодняшнего дня. */
+  protected readonly chosenYear: Signal<string | null>;
+  protected readonly currentYear: Signal<string>;
+  protected readonly currentMonth: Signal<string>;
+  protected readonly canPrevYears: Signal<boolean>;
+  protected readonly canNextYears: Signal<boolean>;
+  protected readonly draftHour: Signal<number | null>;
+  protected readonly draftMinute: Signal<number | null>;
+  protected readonly columns: Signal<IRtDatePicker.TimeColumns>;
+  protected readonly todayOff: Signal<boolean>;
+  /** У даты в подвале только «Сегодня»: без неё пустая черта не рисуется. */
+  protected readonly hasFooter: Signal<boolean>;
+  /** Черновик собирается в значение и лежит в границах. */
+  protected readonly canApply: Signal<boolean>;
+  /** Черновик даты со временем текстом для подвала шторки: `15.03.2026, 09:30`; не собран — пусто. */
+  protected readonly draftText: Signal<string>;
+  protected readonly tabs: Signal<IRtToggleButtonGroup.Option<TTab>[]>;
+  /** Тип значения: дата, время или дата со временем. */
+  readonly type: InputSignal<IRtDatePicker.Type>;
+  /** Значение в форме нативного input'а: `YYYY-MM-DD`, `HH:mm`, `YYYY-MM-DDTHH:mm`; пустая строка — пусто. */
+  readonly value: InputSignal<string>;
+  /** Нижняя граница в форме значения; `null` — границы нет. */
+  readonly min: InputSignal<string | null>;
+  /** Верхняя граница в форме значения; `null` — границы нет. */
+  readonly max: InputSignal<string | null>;
+  /** Шаг колонки минут. */
+  readonly minuteStep: InputSignalWithTransform<number, NumberInput>;
+  /** Раскладка нижней шторки: дни под палец, у даты со временем — переключатель «Дата | Время». */
+  readonly sheet: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Показывать ли «Сегодня» в подвале у типа `date`. Выключена — подвала у даты нет. */
+  readonly isTodayButtonShown: InputSignalWithTransform<boolean, BooleanInput>;
+  /**
+   * Момент, от которого считаются «сегодня» и «Сейчас». Без него панель читает часы сама; задаёт
+   * его витрина, чтобы кадр не менялся день ото дня.
+   */
+  readonly now: InputSignal<Date | null>;
+  /** Готовое значение в форме `value`: панель просит его записать. */
+  readonly picked: OutputEmitterRef<string>;
+  /** Панель просит закрыть себя: после выбора, а также по Escape в днях. */
+  readonly closed: OutputEmitterRef<void>;
+  constructor();
+  protected pickDay(day: IRtCalendar.Day): void;
+  protected pickToday(): void;
+  protected pickNow(): void;
+  protected pickHour(hour: number): void;
+  protected pickMinute(minute: number): void;
+  protected onGridKey(event: IRtCalendar.GridKey): void;
+  protected page(delta: number): void;
+  protected openMonths(): void;
+  protected pageYear(delta: number): void;
+  protected pickMonth(cell: IRtDatePicker.MonthCell): void;
+  protected openYears(): void;
+  protected pageYears(delta: number): void;
+  protected pickYear(cell: IRtDatePicker.YearCell): void;
+  /** Escape в сетке годов или месяцев возвращает на вид назад; в днях закрывает панель. */
+  protected onEscape(): void;
+  /** «Готово» и «Применить»: черновик уходит значением, панель закрывается. */
+  protected apply(): void;
+  /** «Сбросить»: значение становится пустым, панель закрывается. */
+  protected reset(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtDatePanelComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtDatePanelComponent, "rt-date-panel", never, {
+    "type": {
+      "alias": "type";
+      "required": true;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "min": {
+      "alias": "min";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "minuteStep": {
+      "alias": "minuteStep";
+      "required": false;
+      "isSignal": true;
+    };
+    "sheet": {
+      "alias": "sheet";
+      "required": false;
+      "isSignal": true;
+    };
+    "isTodayButtonShown": {
+      "alias": "isTodayButtonShown";
+      "required": false;
+      "isSignal": true;
+    };
+    "now": {
+      "alias": "now";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "picked": "picked";
+    "closed": "closed";
+  }, never, never, true, never>;
+}
 /**
  * Поле даты, времени или даты со временем со своей панелью кита, визуально и по токенам
  * идентичное rt-input (host — box `--rt-input-*`, input — прозрачный `__field`). Кнопка в конце
@@ -186,7 +332,12 @@ export declare function rtDateAddMonths(month: string, delta: number): string;
 export declare function rtDateCanPage(month: string, delta: number, min: string | null, max: string | null): boolean;
 /** Месяц `YYYY-MM` для календаря: подпись по локали, пустые ячейки до первого дня, дни. */
 export declare function rtDateMonth(month: string, ctx: IRtDatePicker.MonthContext): IRtCalendar.Month;
-/** Короткие имена дней недели по локали, начиная с её первого дня. */
+/**
+ * Месяц панели даты: тот же месяц, что у поля, но сетка дописана днями соседних месяцев до полных
+ * недель, а дни за границей выбора зачёркнуты, как занятые.
+ */
+export declare function rtDatePanelMonth(month: string, ctx: IRtDatePicker.MonthContext): IRtCalendar.Month;
+/** Короткие имена дней недели по локали, начиная с её первого дня, с заглавной буквы: «Пн», «Mon». */
 export declare function rtDateWeekdays(locale: string): string[];
 /** Двенадцать месяцев года для выбора месяца; месяц за границей выключен. */
 export declare function rtDateMonths(year: number, locale: string, min: string | null, max: string | null): IRtDatePicker.MonthCell[];
@@ -218,4 +369,5 @@ export declare function rtDateShape(type: IRtDatePicker.Type, layout: IRtDatePic
  * Читает набранный текст в значение ISO; `null` — текст не значение этого типа. Читается и
  * порядок локали, и сама форма значения: вставленная `2026-08-01` тоже становится значением.
  */
-export declare function rtDateParse(text: string, type: IRtDatePicker.Type, layout: IRtDatePicker.TextLayout): string | null;
+export declare function rtDateParse(text: string, type: IRtDatePicker.Type, layout: IRtDatePicker.TextLayout): string | null;
+export {};

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

@@ -545,6 +545,8 @@ export declare class RtChatComponent {
   setDraft(text: string): void;
   /** Текст поля ответа в виде, который сейчас на экране. Файлы сюда не входят, поля нет — пустая строка. */
   draftText(): string;
+  /** Файлы, выбранные к черновику. Вложений нет или нет поля — пустой список. */
+  draftFiles(): readonly File[];
   protected onSubmit(): void;
   protected onComposerKeydown(event: KeyboardEvent): void;
   /** Релей submit'а от `rt-message-composer` (rich-режим) наружу как `send`. */