@rt-tools/ui-kit-v2 0.23.2 → 0.23.4

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

@@ -0,0 +1,208 @@
+import { BooleanInput } from "@angular/cdk/coercion";
+import * as i0 from "@angular/core";
+import { ElementRef, InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal, WritableSignal } from "@angular/core";
+import { FormControl } from "@angular/forms";
+import { TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
+import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
+import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
+/**
+ * Модель `<rt-color-palette>`: один корневой неймспейс с префиксом `I`.
+ */
+export declare namespace IRtColorPalette {
+  /** Один образец палитры. */
+  interface Swatch {
+    /** Цвет образца, `#rrggbb` строчными. */
+    hex: string;
+    /** Образец своего цвета: значения, которого нет среди цветов палитры. */
+    custom: boolean;
+  }
+  /** Цвет в оттенке (градусы, 0–360), насыщенности и яркости (доли, 0–1) — так его держит выбор своего цвета. */
+  interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+  }
+  /** Цвет в каналах красного, зелёного и синего, каждый — целое от 0 до 255. */
+  interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+  }
+  /** Канал цвета, который правится своим полем выбора. */
+  type Channel = keyof Rgb;
+}
+/** Поле одного канала и канал, который оно правит. */
+interface IChannelControl {
+  channel: IRtColorPalette.Channel;
+  /** Буква канала над полем: R, G, B одинаковы во всех языках. */
+  name: string;
+  control: FormControl<string>;
+}
+/**
+ * Выбор своего цвета палитры: площадь насыщенности и яркости, полоса оттенка, поле шестнадцатеричной
+ * записи, «Отмена» и «Применить». Рисует его кит сам — сторонний выбор цвета в кит не входит.
+ *
+ * Выбранное живёт здесь до «Применить»: поле палитры меняется только им. Начинается выбор с цвета,
+ * который пришёл входом, и «Применить» недоступно, пока выбранное с ним совпадает.
+ */
+export declare class RtColorPickerComponent {
+  #private;
+  protected readonly t: Signal<TRtKitLabelMap>;
+  /** Цвет в оттенке, насыщенности и яркости: оттенок серого не теряется, пока человек тянет яркость. */
+  protected readonly hsv: WritableSignal<IRtColorPalette.Hsv>;
+  protected readonly picked: Signal<string>;
+  protected readonly changed: Signal<boolean>;
+  /** Чистый оттенок площади: её правый верхний угол. */
+  protected readonly hueColor: Signal<string>;
+  protected readonly area: Signal<string>;
+  protected readonly spectrum: string;
+  protected readonly hueDegrees: Signal<number>;
+  protected readonly saturation: Signal<number>;
+  protected readonly areaText: Signal<string>;
+  protected readonly hexControl: FormControl<string>;
+  /** Поля каналов по порядку строки: красный, зелёный, синий. */
+  protected readonly channelControls: readonly IChannelControl[];
+  /** Доступные имена полей каналов из словаря кита. */
+  protected readonly channelLabels: Signal<Readonly<Record<IRtColorPalette.Channel, string>>>;
+  /** Цвет, с которого начинается выбор, `#rrggbb`. */
+  readonly value: InputSignal<string>;
+  /** Строка полей красного, зелёного и синего под записью hex. Без неё — площадь, полоса и hex. */
+  readonly channels: InputSignalWithTransform<boolean, BooleanInput>;
+  readonly applied: OutputEmitterRef<string>;
+  readonly cancelled: OutputEmitterRef<void>;
+  constructor();
+  protected onAreaPointer(event: PointerEvent): void;
+  protected onHuePointer(event: PointerEvent): void;
+  protected onKey(target: 'area' | 'hue', event: KeyboardEvent): void;
+  protected onApply(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtColorPickerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtColorPickerComponent, "rt-color-picker", never, {
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "channels": {
+      "alias": "channels";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "applied": "applied";
+    "cancelled": "cancelled";
+  }, never, never, true, never>;
+}
+/**
+ * Поле выбора цвета: образцы из набора и свой цвет. Значение — `#rrggbb` строчными или `null`.
+ *
+ * Образцы — группа переключателей: в порядке Tab стоит один образец, стрелки выбирают соседний.
+ * Свой цвет выбирается на панели кита — площадь, полоса оттенка и запись, — и поле меняет только
+ * «Применить». Только для чтения рисуется один образец текущего цвета.
+ *
+ * Договорённость — `docs/specs/ui-kit-v2/color-palette/`.
+ */
+export declare class RtColorPaletteComponent extends RtFormControlBase<string | null> {
+  #private;
+  protected readonly t: Signal<TRtKitLabelMap>;
+  protected readonly hasValue: Signal<boolean>;
+  protected readonly swatches: Signal<IRtColorPalette.Swatch[]>;
+  /** Номер выбранного образца; без выбора — `-1`. */
+  protected readonly checkedIndex: Signal<number>;
+  /** Образец в порядке Tab: выбранный, а без выбора — первый. */
+  protected readonly tabbableIndex: Signal<number>;
+  /** Свой цвет уже выбран: последний образец стоит вне набора. */
+  protected readonly hasCustom: Signal<boolean>;
+  protected readonly isReadonlyView: Signal<boolean>;
+  protected readonly pickerStart: Signal<string>;
+  protected readonly groupLabel: Signal<string>;
+  protected readonly swatchRefs: Signal<readonly ElementRef<HTMLButtonElement>[]>;
+  protected readonly picker: Signal<RtPopoverDirective | undefined>;
+  /** Цвета образцов по порядку; без них — набор кита. Неверные цвета и повторы не рисуются. */
+  readonly colors: InputSignal<readonly string[]>;
+  /** Только для чтения: один образец текущего цвета, нажимать нечего. */
+  readonly readonly: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Кнопка своего цвета и панель выбора. Без неё палитра выбирает только из набора. */
+  readonly customAllowed: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Поля красного, зелёного и синего в панели своего цвета, под записью hex. */
+  readonly channels: InputSignalWithTransform<boolean, BooleanInput>;
+  readonly displayText: Signal<string>;
+  writeValue(value: string | null): void;
+  protected onSwatch(hex: string): void;
+  protected onSwatchKeydown(event: KeyboardEvent): void;
+  protected onCustomApply(hex: string): void;
+  protected onCustomCancel(): void;
+  protected getEmptyValue(): string | null;
+  protected focusAfterClear(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtColorPaletteComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtColorPaletteComponent, "rt-color-palette", never, {
+    "colors": {
+      "alias": "colors";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "customAllowed": {
+      "alias": "customAllowed";
+      "required": false;
+      "isSignal": true;
+    };
+    "channels": {
+      "alias": "channels";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Набор палитры по умолчанию, восемнадцать цветов: шестнадцать оттенков по кругу, затем коричневый и
+ * серо-синий. Набор темы приложение передаёт входом `colors` — он свой у каждого продукта.
+ */
+export declare const RT_COLOR_PALETTE_DEFAULT: readonly string[];
+/**
+ * Цвет поля в его единственном виде: `#rrggbb` строчными. Трёхзначная запись разворачивается, решётка
+ * дописывается. Всё остальное — не цвет: поле рисует его как «цвет не выбран».
+ */
+export declare function colorPaletteHex(value: unknown): string | null;
+/**
+ * Образцы палитры: цвета входа по порядку, без них — набор кита. Значение, которого среди них нет,
+ * встаёт ещё одним образцом в конце: человек видит, что выбран свой цвет, и может вернуться к нему.
+ * Неверные цвета входа и повторы отбрасываются — образцу нужен цвет, а номеру в группе единственность.
+ */
+export declare function colorPaletteSwatches(colors: readonly string[], value: string | null): IRtColorPalette.Swatch[];
+/**
+ * Куда клавиша переводит выбор среди образцов: стрелки идут по кругу, Home и End берут крайние.
+ * Строки образцов зависят от ширины поля, поэтому вверх и вниз значат «назад» и «вперёд», как в
+ * группе переключателей. `null` — клавиша не про выбор.
+ */
+export declare function colorPaletteNextIndex(key: string, current: number, count: number): number | null;
+/** Цвет `#rrggbb` в оттенке, насыщенности и яркости. Оттенок серого — ноль. */
+export declare function colorPaletteToHsv(hex: string): IRtColorPalette.Hsv;
+/** Оттенок, насыщенность и яркость в цвете `#rrggbb`. */
+export declare function colorPaletteFromHsv(hsv: IRtColorPalette.Hsv): string;
+/**
+ * Сдвиг выбранного стрелкой: по площади — насыщенность вправо и влево, яркость вверх и вниз; по полосе —
+ * оттенок по кругу. `null` — клавиша не про сдвиг.
+ */
+export declare function colorPaletteStep(target: 'area' | 'hue', key: string, hsv: IRtColorPalette.Hsv): IRtColorPalette.Hsv | null;
+/** Цвет `#rrggbb` в каналах красного, зелёного и синего. */
+export declare function colorPaletteToRgb(hex: string): IRtColorPalette.Rgb;
+/** Каналы красного, зелёного и синего в цвете `#rrggbb`. */
+export declare function colorPaletteFromRgb(rgb: IRtColorPalette.Rgb): string;
+/**
+ * Значение канала из набранного в поле: целое от 0 до 255 без знаков и дробей. Всё остальное — `null`,
+ * и поле не меняет выбранного, пока ввод не окончен.
+ */
+export declare function colorPaletteChannel(text: string): number | null;
+/** Полоса оттенков слева направо: градиент по вершинам круга в полной насыщенности и яркости. */
+export declare function colorPaletteSpectrum(): string;
+/**
+ * Площадь насыщенности и яркости для оттенка `hue`: внизу чёрный, и вверх цвет ярче; слева белый, и
+ * вправо цвет насыщеннее до чистого оттенка. Это математика цвета, а не оформление: слои — края
+ * пространства цвета.
+ */
+export declare function colorPaletteArea(hue: string): string;
+export {};

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

@@ -1,15 +1,13 @@
-import * as i0 from '@angular/core';
-import { Signal, InputSignal, OutputEmitterRef, OnDestroy, WritableSignal, InputSignalWithTransform } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-
+import * as i0 from "@angular/core";
+import { InputSignal, InputSignalWithTransform, OnDestroy, OutputEmitterRef, Signal, WritableSignal } from "@angular/core";
+import { BooleanInput } from "@angular/cdk/coercion";
 /**
  * Модель confirm-popover: один корневой неймспейс с префиксом `I`.
  */
-declare namespace IRtConfirmPopover {
-    /** Тон подтверждающей кнопки. Подмножество `IButton.Theme`. */
-    type Tone = 'danger' | 'warning' | 'primary';
+export declare namespace IRtConfirmPopover {
+  /** Тон подтверждающей кнопки. Подмножество `IButton.Theme`. */
+  type Tone = 'danger' | 'warning' | 'primary';
 }
-
 /**
  * Презентационная панель подтверждения. Рендерится директивой `[rtConfirm]`
  * через CDK `ComponentPortal` под host-кнопкой. Содержит опциональный заголовок,
@@ -20,24 +18,52 @@ declare namespace IRtConfirmPopover {
  * выставляются директивой через `setInput`; outputs (`confirm`/`cancel`) она
  * слушает и транслирует в `(confirmed)` / закрытие.
  */
-declare class RtConfirmPopoverComponent {
-    #private;
-    protected readonly confirmText: Signal<string>;
-    protected readonly cancelText: Signal<string>;
-    readonly message: InputSignal<string>;
-    readonly title: InputSignal<string | null>;
-    /** Пусто — берётся переведённая подпись по умолчанию */
-    readonly confirmLabel: InputSignal<string>;
-    readonly cancelLabel: InputSignal<string>;
-    readonly tone: InputSignal<IRtConfirmPopover.Tone>;
-    readonly accepted: OutputEmitterRef<void>;
-    readonly cancelled: OutputEmitterRef<void>;
-    protected onConfirm(): void;
-    protected onCancel(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RtConfirmPopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtConfirmPopoverComponent, "rt-confirm-popover", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, { "accepted": "accepted"; "cancelled": "cancelled"; }, never, never, true, never>;
+export declare class RtConfirmPopoverComponent {
+  #private;
+  protected readonly confirmText: Signal<string>;
+  protected readonly cancelText: Signal<string>;
+  readonly message: InputSignal<string>;
+  readonly title: InputSignal<string | null>;
+  /** Пусто — берётся переведённая подпись по умолчанию */
+  readonly confirmLabel: InputSignal<string>;
+  readonly cancelLabel: InputSignal<string>;
+  readonly tone: InputSignal<IRtConfirmPopover.Tone>;
+  readonly accepted: OutputEmitterRef<void>;
+  readonly cancelled: OutputEmitterRef<void>;
+  protected onConfirm(): void;
+  protected onCancel(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtConfirmPopoverComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtConfirmPopoverComponent, "rt-confirm-popover", never, {
+    "message": {
+      "alias": "message";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "confirmLabel": {
+      "alias": "confirmLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "cancelLabel": {
+      "alias": "cancelLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "accepted": "accepted";
+    "cancelled": "cancelled";
+  }, never, never, true, never>;
 }
-
 /**
  * Confirm-popover директива поверх CDK Overlay. Вешается на host-кнопку
  * (обычно `rt-icon-button` деструктивного действия). По клику показывает прямо
@@ -61,25 +87,56 @@ declare class RtConfirmPopoverComponent {
  *     (confirmed)="rejectTour()" />
  * ```
  */
-declare class RtConfirmDirective implements OnDestroy {
-    #private;
-    protected readonly isOpenState: WritableSignal<boolean>;
-    readonly message: InputSignal<string>;
-    readonly title: InputSignal<string | null>;
-    /** Пусто — панель подставит переведённое умолчание */
-    readonly label: InputSignal<string>;
-    readonly cancelLabel: InputSignal<string>;
-    readonly tone: InputSignal<IRtConfirmPopover.Tone>;
-    readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
-    readonly confirmed: OutputEmitterRef<void>;
-    readonly isOpen: Signal<boolean>;
-    constructor();
-    ngOnDestroy(): void;
-    open(): void;
-    close(): void;
-    protected onHostClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RtConfirmDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RtConfirmDirective, "[rtConfirm]", ["rtConfirm"], { "message": { "alias": "rtConfirm"; "required": false; "isSignal": true; }; "title": { "alias": "rtConfirmTitle"; "required": false; "isSignal": true; }; "label": { "alias": "rtConfirmLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "rtConfirmCancelLabel"; "required": false; "isSignal": true; }; "tone": { "alias": "rtConfirmTone"; "required": false; "isSignal": true; }; "disabled": { "alias": "rtConfirmDisabled"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; }, never, never, true, never>;
-}
-
-export { IRtConfirmPopover, RtConfirmDirective, RtConfirmPopoverComponent };
+export declare class RtConfirmDirective implements OnDestroy {
+  #private;
+  protected readonly isOpenState: WritableSignal<boolean>;
+  readonly message: InputSignal<string>;
+  readonly title: InputSignal<string | null>;
+  /** Пусто — панель подставит переведённое умолчание */
+  readonly label: InputSignal<string>;
+  readonly cancelLabel: InputSignal<string>;
+  readonly tone: InputSignal<IRtConfirmPopover.Tone>;
+  readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
+  readonly confirmed: OutputEmitterRef<void>;
+  readonly isOpen: Signal<boolean>;
+  constructor();
+  ngOnDestroy(): void;
+  open(): void;
+  close(): void;
+  protected onHostClick(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtConfirmDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<RtConfirmDirective, "[rtConfirm]", ["rtConfirm"], {
+    "message": {
+      "alias": "rtConfirm";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "rtConfirmTitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "rtConfirmLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "cancelLabel": {
+      "alias": "rtConfirmCancelLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "tone": {
+      "alias": "rtConfirmTone";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "rtConfirmDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "confirmed": "confirmed";
+  }, never, never, true, never>;
+}