@rt-tools/ui-kit-v2 0.33.0 → 0.34.1

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

@@ -1,6 +1,7 @@
 import { BooleanInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from "@angular/core";
+import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal, TemplateRef } from "@angular/core";
+import { ControlValueAccessor } from "@angular/forms";
 import { IRtIcon } from "@rt-tools/ui-kit-v2/core";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
 /**
@@ -46,7 +47,48 @@ export declare namespace IRtToggleButtonGroup {
     readonly option: Option<T>;
     readonly active: boolean;
     readonly disabled: boolean;
+    readonly context: OptionContext<T>;
   }
+  /** Обстановка шаблона сегмента: опция приходит как `$implicit`. */
+  interface OptionContext<T = string> {
+    readonly $implicit: Option<T>;
+    /** Нажат ли сегмент. */
+    readonly active: boolean;
+  }
+  /**
+   * Раскладка сегментов. `row` — одна строка, как прежде; `wrap` — сегменты, не влезшие в строку,
+   * уходят на следующую; `column` — сегменты стоят один под другим.
+   */
+  type Layout = 'row' | 'wrap' | 'column';
+  /**
+   * Вид группы. `segmented` — дорожка с сегментами, выбранный светлее дорожки; `chips` — отдельные
+   * пункты с обводкой и просветом между ними, выбранный залит. Поведение у обоих одно: выбор,
+   * множественный выбор, раскладка и связь с формой от вида не зависят.
+   */
+  type Appearance = 'segmented' | 'chips';
+  /** Значение, которое группа пишет в форму: одно при одиночном выборе, набор — при множественном. */
+  type FormValue<T = string> = T | ReadonlyArray<T> | null | undefined;
+}
+/**
+ * Маркер своей разметки сегмента — того, что рисуется внутри кнопки на месте значка и подписи.
+ *
+ * Кнопка остаётся киту: нажатие, подсветка, недоступность, фокус и связь с формой. Потребитель даёт
+ * только содержимое — например картинку-превью раскладки — и получает опцию и признак, нажат ли
+ * сегмент.
+ *
+ * @example
+ * ```html
+ * <rt-toggle-button-group [options]="layouts" formControlName="layout">
+ *     <ng-template rtToggleButtonOption let-option let-active="active">
+ *         <img [src]="option.value + '.svg'" [alt]="option.label" />
+ *     </ng-template>
+ * </rt-toggle-button-group>
+ * ```
+ */
+export declare class RtToggleButtonOptionDirective<T = string> {
+  readonly templateRef: TemplateRef<IRtToggleButtonGroup.OptionContext<T>>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtToggleButtonOptionDirective<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<RtToggleButtonOptionDirective<any>, "[rtToggleButtonOption]", never, {}, {}, never, never, true, never>;
 }
 /**
  * Generic segmented control кита.
@@ -66,7 +108,11 @@ export declare namespace IRtToggleButtonGroup {
  * union'ы, enum'ы). Дефолт `string` нужен, чтобы шаблон-инстанцирование
  * без явного параметра компилировалось.
  */
-export declare class RtToggleButtonGroupComponent<T = string> {
+export declare class RtToggleButtonGroupComponent<T = string> implements ControlValueAccessor {
+  #private;
+  protected readonly isDisabled: Signal<boolean>;
+  /** Своя разметка сегмента; без неё кнопка рисует значок и подпись. */
+  protected readonly optionTpl: Signal<RtToggleButtonOptionDirective<T> | undefined>;
   protected readonly iconSize: Signal<IRtIcon.Size>;
   /**
    * Сегменты, готовые к отрисовке: подсветка и недоступность посчитаны здесь, а не в шаблоне.
@@ -93,12 +139,31 @@ export declare class RtToggleButtonGroupComponent<T = string> {
   readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
   /** Растягивает группу на всю ширину контейнера; опции делят ширину поровну. */
   readonly fullWidth: InputSignalWithTransform<boolean, BooleanInput>;
+  /**
+   * Раскладка сегментов: одна строка, перенос на следующую или столбик. Перенос нужен длинным
+   * спискам во всплывающих окнах, столбик — спискам вроде дней недели.
+   */
+  readonly layout: InputSignal<IRtToggleButtonGroup.Layout>;
+  /**
+   * Вид группы: дорожка с сегментами или отдельные чипы. Вид — входом, а не классом потребителя:
+   * у чипов своя коробка пункта, свой просвет и своя подсветка, и класс снаружи до неё не достаёт.
+   */
+  readonly appearance: InputSignal<IRtToggleButtonGroup.Appearance>;
+  /**
+   * Галочка перед подписью выбранного пункта, как у фильтр-чипа Material. Выключена по умолчанию:
+   * в сегментах выбор и так виден подложкой, а место под галочку раздвигает пункт.
+   */
+  readonly checkmark: InputSignalWithTransform<boolean, BooleanInput>;
   readonly valueChange: OutputEmitterRef<T>;
   /**
    * Весь набор выбранного после нажатия, а не разница с прежним: разницу вызывающий сводит со
    * своим состоянием сам, и каждый сводит по-своему.
    */
   readonly valuesChange: OutputEmitterRef<ReadonlyArray<T>>;
+  writeValue(value: IRtToggleButtonGroup.FormValue<T>): void;
+  registerOnChange(fn: (value: IRtToggleButtonGroup.FormValue<T>) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(disabled: boolean): void;
   protected onOptionClick(item: IRtToggleButtonGroup.Rendered<T>): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtToggleButtonGroupComponent<any>, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<RtToggleButtonGroupComponent<any>, "rt-toggle-button-group", never, {
@@ -142,10 +207,25 @@ export declare class RtToggleButtonGroupComponent<T = string> {
       "required": false;
       "isSignal": true;
     };
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+    "appearance": {
+      "alias": "appearance";
+      "required": false;
+      "isSignal": true;
+    };
+    "checkmark": {
+      "alias": "checkmark";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "valueChange": "valueChange";
     "valuesChange": "valuesChange";
-  }, never, never, true, [{
+  }, ["optionTpl"], never, true, [{
     directive: typeof i1.RtRadiusDirective;
     inputs: {
       "radius": "radius";

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

@@ -1,5 +1,6 @@
 import * as i0 from "@angular/core";
 import { InputSignal, InputSignalWithTransform, OnDestroy, WritableSignal } from "@angular/core";
+import { NumberInput } from "@angular/cdk/coercion";
 /**
  * Презентационная панель tooltip'а. Рендерится директивой `[rtTooltip]` через
  * CDK `ComponentPortal` в overlay; текст выставляется императивно
@@ -52,8 +53,16 @@ export declare class RtTooltipDirective implements OnDestroy {
    * строка → no-op (директива выключена).
    */
   readonly text: InputSignalWithTransform<string, string | null | undefined>;
-  /** Сторона подсказки. Не задана — сверху, а под материальным набором снизу, как у первого кита. */
+  /**
+   * Сторона подсказки. `null` — сторона из настроек кита `components.tooltip.placement`, без них
+   * сверху, а под материальным набором снизу, как у первого кита.
+   */
   readonly placement: InputSignal<IRtTooltip.Placement | null>;
+  /**
+   * Задержка показа этой подсказки в миллисекундах. `null` — общая задержка из настроек кита, без
+   * них 300.
+   */
+  readonly showDelay: InputSignalWithTransform<number | null, NumberInput>;
   /**
    * Подсказка только у обрезанного текста: хост меряется в момент показа, и подсказка не
    * появляется, пока его содержимое помещается целиком. Мерить заранее не нужно — показ идёт
@@ -61,7 +70,8 @@ export declare class RtTooltipDirective implements OnDestroy {
    */
   readonly whenTruncated: InputSignalWithTransform<boolean, unknown>;
   /**
-   * Клик прячет открытую подсказку — по умолчанию, как раньше. `false` оставляет её открытой:
+   * Клик прячет открытую подсказку — по умолчанию, как раньше; умолчание на всё приложение —
+   * `components.tooltip.hideOnClick` в настройках кита. `false` оставляет её открытой:
    * кнопка-переключатель показывает в ней новое состояние сразу после нажатия. Отложенный показ
    * клик снимает при любом значении — касание на тач-экране (mouseenter + click) подсказку не
    * показывает.
@@ -84,6 +94,11 @@ export declare class RtTooltipDirective implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "showDelay": {
+      "alias": "rtTooltipShowDelay";
+      "required": false;
+      "isSignal": true;
+    };
     "whenTruncated": {
       "alias": "rtTooltipWhenTruncated";
       "required": false;

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

@@ -5,6 +5,7 @@ export * from "@rt-tools/ui-kit-v2/action-bar";
 export * from "@rt-tools/ui-kit-v2/aside-section";
 export * from "@rt-tools/ui-kit-v2/aside";
 export * from "@rt-tools/ui-kit-v2/autocomplete";
+export * from "@rt-tools/ui-kit-v2/badge";
 export * from "@rt-tools/ui-kit-v2/bar-list";
 export * from "@rt-tools/ui-kit-v2/bottom-sheet";
 export * from "@rt-tools/ui-kit-v2/breadcrumbs";
@@ -26,6 +27,8 @@ export * from "@rt-tools/ui-kit-v2/date-picker";
 export * from "@rt-tools/ui-kit-v2/date-range";
 export * from "@rt-tools/ui-kit-v2/delta-view";
 export * from "@rt-tools/ui-kit-v2/detail-list";
+export * from "@rt-tools/ui-kit-v2/divider";
+export * from "@rt-tools/ui-kit-v2/drawer";
 export * from "@rt-tools/ui-kit-v2/dialog";
 export * from "@rt-tools/ui-kit-v2/dot-field";
 export * from "@rt-tools/ui-kit-v2/draggable-tree";
@@ -67,6 +70,7 @@ export * from "@rt-tools/ui-kit-v2/pagination";
 export * from "@rt-tools/ui-kit-v2/photo-viewer";
 export * from "@rt-tools/ui-kit-v2/popover";
 export * from "@rt-tools/ui-kit-v2/prompt-suggestion";
+export * from "@rt-tools/ui-kit-v2/progress-bar";
 export * from "@rt-tools/ui-kit-v2/radio-button";
 export * from "@rt-tools/ui-kit-v2/radius";
 export * from "@rt-tools/ui-kit-v2/ripple";

package/src/lib/components/dynamic-selector/stories/component/test-dynamic-selector-popup-frame.component.scss

@@ -1,6 +0,0 @@
-@layer rt-kit.components {
-    // Рамка не рисует своего: окно внутри стоит так же, как без неё.
-    app-dynamic-selector-popup-frame {
-        display: contents;
-    }
-}