@rt-tools/ui-kit-v2 0.16.0 → 0.18.0

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

@@ -0,0 +1,113 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { Signal, InputSignal, InputSignalWithTransform, OutputEmitterRef } from '@angular/core';
+import { IRtIcon } from '@rt-tools/ui-kit-v2/core';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+
+/**
+ * Модель `<rt-icon-button>`: один корневой неймспейс с префиксом `I`.
+ * Внутри — литеральные union-типы для variant / size / type, чтобы:
+ *  - использовать как контракт `input()` сигналов компонента;
+ *  - переиспользовать в `argTypes` Storybook.
+ */
+declare namespace IRtIconButton {
+    /** Семантическая палитра кнопки. */
+    type Variant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'warning';
+    /**
+     * Размер квадрата кнопки. Шаги — в SCSS; `xs` — 22px и `2xs` — 20px, оба со значком 16px.
+     * Свой размер задаёт `--rt-icon-button-size` на теге или выше.
+     */
+    type Size = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** HTML-тип нативного `<button>`. */
+    type Type = 'button' | 'submit';
+}
+
+/**
+ * Универсальная icon-only кнопка кита.
+ *
+ * Рендерит свой собственный `<button type="...">` внутри template (НЕ host-button).
+ * Все цвета и размеры — через семантические `--rt-*` токены; геометрия квадрата
+ * берётся из `--rt-icon-button-size`, а без него — из шага `size`. Свойство, заданное на теге
+ * `<rt-icon-button>` или выше, доходит до кнопки; так же и `--rt-icon-button-bg`.
+ *
+ * Loading state — заменяет иконку на `<rt-icon name="spinner">` и блокирует
+ * клики (`button[disabled]`). Active state управляет `aria-pressed` (для toggle-кнопок).
+ * Indicator — небольшой dot top-right через BEM-элемент `__indicator`.
+ *
+ * BEM-разметка — через `rtBlock="rt-icon-button"` + `[rtMod]` объект; камелкейс
+ * модификаторов автоматически конвертируется директивой в kebab-case
+ * (`hasIndicator` → `rt-icon-button--has-indicator`).
+ */
+declare class RtIconButtonComponent {
+    /**
+     * Размер дочерней `<rt-icon>`. По умолчанию маппится 1-к-1 от размера кнопки,
+     * но потребитель может задать свой: у крупной кнопки-действия (плавающая
+     * кнопка чата) иконка во весь диаметр выглядит тяжеловесно, а сама кнопка
+     * должна остаться большой — в неё целятся пальцем.
+     */
+    protected readonly resolvedIconSize: Signal<IRtIcon.Size>;
+    /** Кнопка отключена, если установлен disabled ИЛИ loading. */
+    protected readonly isDisabled: Signal<boolean>;
+    /**
+     * BEM-модификаторы для `[rtMod]`. Собираем в .ts (а не в шаблоне), потому что
+     * Angular template-parser не поддерживает computed property keys в inline-объектах.
+     * camelCase ключи `hasIndicator` директива автоматически конвертирует в `has-indicator`.
+     */
+    protected readonly bemMods: Signal<Record<string, boolean>>;
+    /**
+     * Имя иконки в наборе кита. Нужно оно или `glyph`; когда переданы оба, побеждает имя. Нет ни
+     * того ни другого — значок кит не рисует, и кнопка показывает вложенное содержимое: свой
+     * рисунок приложения встаёт в кнопку с её размером, формой и состояниями.
+     */
+    readonly icon: InputSignal<IRtIcon.Name | null>;
+    /** Имя Material вместо имени кита — рисуется так же, как вход `glyph` у `rt-icon`. */
+    readonly glyph: InputSignal<string | null>;
+    /** Доступное имя для screen-reader'ов — обязательно (icon-only кнопка). */
+    readonly ariaLabel: InputSignal<string>;
+    /** Семантическая палитра. */
+    readonly variant: InputSignal<IRtIconButton.Variant>;
+    /**
+     * Цвет самой иконки. Default `current` — иконка наследует цвет текста кнопки
+     * (поведение по умолчанию). Явное значение нужно, когда иконка должна
+     * отличаться от текста кнопки — например крестик-очистка внутри поля,
+     * который должен совпадать по цвету с иконками-аффордансами самого поля.
+     */
+    readonly iconColor: InputSignal<IRtIcon.Color>;
+    /**
+     * Залитый рисунок значка вместо контурного — как `fill` у `rt-icon`. Рисует его материальный
+     * набор; значок своего набора один и от признака не меняется.
+     */
+    readonly iconFill: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Размер квадрата. */
+    readonly size: InputSignal<IRtIconButton.Size>;
+    /** Размер иконки; пусто — берётся от размера кнопки. */
+    readonly iconSize: InputSignal<IRtIcon.Size | null>;
+    /** HTML-type для нативного `<button>`. */
+    readonly type: InputSignal<IRtIconButton.Type>;
+    /**
+     * Текст styled-tooltip'а (`rtTooltip`), показывается на hover/focus. Пустая
+     * строка → tooltip выключен. Для icon-only кнопок обычно дублирует `ariaLabel`.
+     */
+    readonly tooltip: InputSignal<string>;
+    /**
+     * Tabindex внутренней `<button>`. Default `0` (в обычном таб-порядке).
+     * Значение `-1` исключает кнопку из таб-навигации, оставляя клик мышью —
+     * нужно для вспомогательных аффордансов вроде крестика-очистки внутри поля.
+     */
+    readonly tabIndex: InputSignalWithTransform<number, NumberInput>;
+    /** Состояние загрузки: показывает spinner вместо иконки + disabled. */
+    readonly loading: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Нативное отключение кнопки. */
+    readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Toggle-состояние — превращается в `aria-pressed="true"`. */
+    readonly active: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Бейдж-индикатор (dot top-right через BEM-модификатор). */
+    readonly indicator: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Эмиттит MouseEvent при клике (только когда не disabled и не loading). */
+    readonly clicked: OutputEmitterRef<MouseEvent>;
+    protected onClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtIconButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtIconButtonComponent, "rt-icon-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "glyph": { "alias": "glyph"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "iconFill": { "alias": "iconFill"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "indicator": { "alias": "indicator"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, [{ directive: typeof i1.RtRadiusDirective; inputs: { "radius": "radius"; }; outputs: {}; }]>;
+}
+
+export { IRtIconButton, RtIconButtonComponent };

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

@@ -0,0 +1,238 @@
+import { IRtIcon } from '@rt-tools/ui-kit-v2/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, Signal, InputSignal, InputSignalWithTransform, EnvironmentProviders } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/**
+ * Категории иконок rt-icon. 11 buckets: 8 prefix-based + Social (префикс `social-`) + Custom
+ * (префикс `ico-`) + Misc (fallback).
+ * Порядок фиксирован — соответствует порядку отображения в Catalog story (rt-icon.stories.ts).
+ *
+ * Аннотация типа намеренно не указывается: явный `readonly string[]` потерял бы узкий
+ * литеральный тип, нужный для {@link TIconCategory}. `as const` сохраняет литеральные ключи.
+ */
+declare const CATEGORY_ORDER: readonly ["Navigation", "Alignment & Sorting", "Status", "Time & Calendar", "Communication", "Documents", "People", "Commerce", "Social", "Custom", "Misc"];
+/** Литеральный union из {@link CATEGORY_ORDER}. */
+type TIconCategory = (typeof CATEGORY_ORDER)[number];
+/**
+ * Правило маппинга имени иконки в категорию.
+ * Порядок правил в {@link ICON_CATEGORY_RULES} важен: первое совпавшее правило выигрывает.
+ */
+interface IIconCategoryRule {
+    readonly category: TIconCategory;
+    readonly match: (name: string) => boolean;
+}
+/**
+ * Упорядоченный список правил категоризации.
+ * `Custom` — единственная категория по строгому префиксу `ico-` и проверяется первой,
+ * чтобы исключить конфликты с другими prefix-based категориями.
+ * `Misc` — fallback в {@link categoryOf}, отдельным правилом не описывается.
+ */
+declare const ICON_CATEGORY_RULES: readonly IIconCategoryRule[];
+/**
+ * Возвращает категорию для имени иконки.
+ * Первое совпавшее правило в {@link ICON_CATEGORY_RULES} выигрывает; иначе — `Misc`.
+ */
+declare function categoryOf(name: IRtIcon.Name): TIconCategory;
+
+/**
+ * Как значки приложения рисуют имя Material. Задаётся третьим аргументом `provideRtIcons()`;
+ * по умолчанию `map-first` — пара из перечня кита, а без пары шрифт.
+ */
+declare const RT_ICON_GLYPH_STRATEGY: InjectionToken<IRtIcon.GlyphStrategy>;
+/**
+ * Готовность шрифтов страницы — одна на все значки.
+ *
+ * Лигатура до готовности шрифта рисуется словом в запасном шрифте: значок прячет её, пока страница
+ * не сказала, что шрифты готовы. Кит шрифт не везёт и семью не знает, поэтому ждёт общую готовность,
+ * а не загрузку одной семьи. На сервере шрифтов нет — лигатура там скрыта. Браузер без интерфейса
+ * шрифтов ждать нечем, и лигатура показывается сразу.
+ */
+declare class RtIconFontService {
+    #private;
+    readonly ready: Signal<boolean>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtIconFontService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+
+/** Имя значка кита — то, что рисует спрайт; остальное кит своим рисунком не закрывает. */
+declare function isKitIconName(name: string): name is IRtIcon.Name;
+/** Пара имени Material из перечня кита; `null` — пары нет или имени нет. */
+declare function materialPairOf(glyph: string | null | undefined): IRtIcon.Name | null;
+/**
+ * Чем рисуется значок: своим рисунком кита или лигатурой шрифта Material.
+ *
+ * Имя кита выигрывает у имени Material, если названы оба. Имя Material по способу `map-first`
+ * берёт пару из перечня, а без пары — шрифт; по способу `font` — шрифт сразу. Материальный рисунок
+ * для пары выбирает уже сам значок по признаку набора над собой: это не дело разбора.
+ *
+ * `null` — значку нечего рисовать.
+ */
+declare function resolveIconGlyph(name: IRtIcon.Name | null | undefined, glyph: string | null | undefined, strategy: IRtIcon.GlyphStrategy): IRtIcon.Resolved | null;
+
+declare class RtIconComponent {
+    #private;
+    /** Чем рисуется значок: именем кита или лигатурой шрифта. Ни имени, ни глифа — пустое место. */
+    protected readonly resolved: Signal<IRtIcon.Resolved | null>;
+    protected readonly kitName: Signal<IRtIcon.Name | null>;
+    protected readonly fontGlyph: Signal<string | null>;
+    /** Лигатура прячется, пока шрифты страницы не готовы: до того она рисуется словом. */
+    protected readonly glyphMods: Signal<Record<string, boolean>>;
+    protected readonly href: Signal<string | null>;
+    /**
+     * Набор, которым рисуется этот значок. Материальный закрывает не все имена кита — он слой
+     * переопределений, как набор оформления: имя без материального рисунка рисуется своим, и это
+     * не пробел.
+     */
+    protected readonly preset: Signal<IRtIcon.Preset>;
+    /** Рисунок значка: залитый бывает только у материального набора, свой набор заливки не знает. */
+    protected readonly drawing: Signal<IRtIcon.Drawing>;
+    protected readonly sizePx: Signal<number>;
+    protected readonly colorValue: Signal<string | null>;
+    protected readonly rotateStyle: Signal<string | null>;
+    /** Имя кита. Стоит рядом с глифом и побеждает его, когда переданы оба. */
+    readonly name: InputSignal<IRtIcon.Name | null>;
+    /**
+     * Имя Material вместо имени кита. Как оно рисуется — парой из перечня кита или лигатурой
+     * шрифта Material Symbols — решает настройка `glyphStrategy` у `provideRtIcons()`. Шрифт
+     * приложение подключает само; семья берётся из свойства `--rt-icon-glyph-font`.
+     */
+    readonly glyph: InputSignal<string | null>;
+    /**
+     * Ступень размера или число пикселей — для размеров между ступенями и крупнее последней.
+     * Числовая строка из статического атрибута читается числом, прочая строка вне ступеней — `md`.
+     * Внутри вход хранит пиксели: ступень переводится в них при записи.
+     */
+    readonly size: InputSignalWithTransform<number, IRtIcon.SizeInput | string>;
+    readonly color: InputSignal<IRtIcon.Color>;
+    /**
+     * Залитый рисунок вместо контурного — как `FILL 1` у значка первого кита. Действует в
+     * материальном наборе; свой набор рисует значок одним рисунком. Дефолт `false`.
+     */
+    readonly fill: InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Значок вращается — как индикатор занятости внутри кнопки или строки. Когда система просит
+     * меньше движения, вращение медленнее. Поворот на время вращения уступает ему. Дефолт `false`.
+     */
+    readonly spin: InputSignalWithTransform<boolean, BooleanInput>;
+    readonly rotate: InputSignalWithTransform<number | null, TRotateInput>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtIconComponent, "rt-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "glyph": { "alias": "glyph"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type TRotateInput = number | string | null;
+
+/**
+ * Имена, которыми набор значков виден со стороны страницы.
+ *
+ * Отдельный файл, а не константы реестра: те же имена читает обвязка снимков витрины, а она идёт
+ * под Playwright и ни одного объявления Angular поднять не может. Своя копия там уже стояла —
+ * второе объявление того же значения расходится с первым молча: ожидание набора ищет один узел,
+ * а реестр создаёт другой, и кадр выходит без значков.
+ */
+/** Селектор inline-sprite, создаваемого один раз при первом обращении. */
+declare const RT_ICON_SPRITE_ID: string;
+/** Префикс `id` для inline-sprite символов. Изолирует от внешних `id` на странице. */
+declare const RT_ICON_SYMBOL_ID_PREFIX: string;
+/**
+ * Префикс `id` символов материального набора. Свой, а не общий: наборов на странице бывает два —
+ * признак набора стоит и на корне, и на контейнере, — а один `id` держит один рисунок. С общим
+ * префиксом второй набор молча забирал бы символ первого.
+ */
+declare const RT_ICON_MATERIAL_SYMBOL_ID_PREFIX: string;
+/** Префикс `id` залитых рисунков материального набора: у имени их два, и `id` у каждого свой. */
+declare const RT_ICON_MATERIAL_FILL_SYMBOL_ID_PREFIX: string;
+/** Селекторы, которыми страница объявляет материальный набор. */
+declare const RT_ICON_MATERIAL_PRESET_SELECTOR: string;
+
+/**
+ * Называет адрес, по которому приложение опубликовало набор значков `rt-icon`.
+ *
+ * ```typescript
+ * export function withCoreProviders(): EnvironmentProviders {
+ *     return makeEnvironmentProviders([
+ *         provideHttpClient(...),
+ *         provideRtStorage(),
+ *         provideRtIcons(),
+ *     ]);
+ * }
+ * ```
+ *
+ * Вперёд отсюда не грузится ничего: значок едет тогда, когда его попросила разметка, и платит
+ * за него та страница, которая его нарисовала. Сборка спрайта и загрузка — дело `RtIconRegistry`.
+ *
+ * Сами файлы приложение публикует само — набор лежит в `assets/icons` пакета, и сборка копирует
+ * его в свою статику.
+ *
+ * Наборов значков два: свой и материальный. Второй нужен только приложению, которое объявляет
+ * материальный набор оформления, и адрес у него свой — набор лежит в `assets/icons-material`.
+ *
+ * Третий аргумент — настройки значков. `glyphStrategy` говорит, как рисуется имя Material на входе
+ * `glyph`: `map-first` (по умолчанию) — пара из перечня кита, а без пары шрифт Material Symbols;
+ * `font` — шрифт для любого имени. Шрифт приложение подключает само.
+ *
+ * @param baseUrl Адрес опубликованного набора. По умолчанию `/icons`.
+ * @param materialBaseUrl Адрес материального набора. По умолчанию `/icons-material`.
+ * @param options Настройки значков.
+ */
+declare function provideRtIcons(baseUrl?: string, materialBaseUrl?: string, options?: IRtIconsOptions): EnvironmentProviders;
+/** Настройки значков приложения — третий аргумент `provideRtIcons()`. */
+interface IRtIconsOptions {
+    readonly glyphStrategy?: IRtIcon.GlyphStrategy;
+}
+
+/**
+ * Адрес, по которому приложение публикует набор из `assets/icons` пакета.
+ * Умолчание годится, когда сборка кладёт набор в корень статики; свой адрес
+ * задаётся аргументом `provideRtIcons()`.
+ */
+declare const RT_ICONS_BASE_URL: InjectionToken<string>;
+/**
+ * Адрес материального набора значков. Отдельный от своего: два набора стоят рядом, и приложение
+ * кладёт их двумя папками.
+ */
+declare const RT_ICONS_MATERIAL_BASE_URL: InjectionToken<string>;
+declare class RtIconRegistry {
+    #private;
+    constructor();
+    /**
+     * Имя symbol для `<use href="#X">`. Возвращает строку с ведущим `#`.
+     *
+     * Набор назван явно, а не выведен из страницы: одна и та же страница держит оба набора
+     * рядом — признак стоит и на корне, и на контейнере, — и вывод по странице дал бы обоим
+     * один ответ.
+     */
+    symbolHref(name: IRtIcon.Name, drawing?: IRtIcon.Drawing): string;
+    /**
+     * Просит значок по имени: грузит файл и дописывает `<symbol>` в спрайт страницы.
+     *
+     * Ответа зовущий не ждёт и потока не получает: разметка рисует ссылку на символ сразу, а
+     * браузер дорисовывает её, когда символ приезжает. Подписка живёт здесь и только здесь —
+     * иначе каждая разметка гасила бы её сама, а таких мест у значка два.
+     */
+    request(name: IRtIcon.Name, drawing?: IRtIcon.Drawing): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtIconRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+
+/** Одна запись перечня: имя первого кита и то, чем оно закрывается здесь. */
+interface IRtIconMaterialEntry {
+    /** Имя значка первого кита — так, как оно стоит в его шаблоне. */
+    readonly from: string;
+    /** Имя этого набора либо `null`, если рисунка в наборе нет. */
+    readonly to: IRtIcon.Name | null;
+    /** Довод к паре либо причина, по которой пары нет. Пустым не бывает. */
+    readonly why: string;
+}
+declare const iconMaterialMap: readonly IRtIconMaterialEntry[];
+/**
+ * Имена кита, у которых в материальном наборе лежит свой рисунок.
+ *
+ * Считается из перечня, а не пишется списком: свой список разошёлся бы с перечнем молча — реестр
+ * ходил бы за файлом, которого нет, или не ходил бы за лежащим.
+ */
+declare const iconMaterialDrawn: ReadonlySet<IRtIcon.Name>;
+
+export { CATEGORY_ORDER, ICON_CATEGORY_RULES, RT_ICONS_BASE_URL, RT_ICONS_MATERIAL_BASE_URL, RT_ICON_GLYPH_STRATEGY, RT_ICON_MATERIAL_FILL_SYMBOL_ID_PREFIX, RT_ICON_MATERIAL_PRESET_SELECTOR, RT_ICON_MATERIAL_SYMBOL_ID_PREFIX, RT_ICON_SPRITE_ID, RT_ICON_SYMBOL_ID_PREFIX, RtIconComponent, RtIconFontService, RtIconRegistry, categoryOf, iconMaterialDrawn, iconMaterialMap, isKitIconName, materialPairOf, provideRtIcons, resolveIconGlyph };
+export type { IRtIconMaterialEntry, IRtIconsOptions, TIconCategory };

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

@@ -0,0 +1,168 @@
+import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { Signal, ElementRef, WritableSignal, InputSignal, InputSignalWithTransform, OutputEmitterRef } from '@angular/core';
+import { TRtKitLabelMap, TRtKitLabelKey } from '@rt-tools/ui-kit-v2/core';
+
+/**
+ * Контракты обрезки изображения. Один корневой неймспейс с префиксом `I`.
+ */
+declare namespace IRtImageCropper {
+    /** Прямоугольник в пикселях исходника: рамка, границы картинки */
+    interface Rect {
+        readonly x: number;
+        readonly y: number;
+        readonly width: number;
+        readonly height: number;
+    }
+    /** Размер исходника или поля */
+    interface Size {
+        readonly width: number;
+        readonly height: number;
+    }
+    /**
+     * Как исходник вписан в поле: масштаб — сколько пикселей поля приходится на
+     * пиксель исходника, отступы — где картинка начинается внутри поля.
+     */
+    interface Fit {
+        readonly scale: number;
+        readonly offsetX: number;
+        readonly offsetY: number;
+        readonly width: number;
+        readonly height: number;
+    }
+    /** Сдвиг в пикселях исходника */
+    interface Delta {
+        readonly dx: number;
+        readonly dy: number;
+    }
+    /** Направление ручки по осям: −1 — к началу оси, 1 — к концу, 0 — ось ручкой не тянется */
+    interface Direction {
+        readonly x: number;
+        readonly y: number;
+    }
+    /** Ручка рамки: четыре угла и четыре стороны, по сторонам света */
+    type Handle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+    /** Форматы результата */
+    type Format = 'png' | 'jpeg' | 'webp';
+    /** Результат обрезки: файл и рамка, которой он вырезан */
+    interface Result {
+        readonly file: File;
+        readonly frame: Rect;
+    }
+}
+
+/** Состояние поля: пусто, читается, не прочиталось, готово */
+type TCropperState = 'empty' | 'loading' | 'refusal' | 'ready';
+/**
+ * Обрезка изображения: исходник вписан в поле целиком, поверх — рамка с восемью
+ * ручками. Рамка живёт в пикселях исходника и двигается указателем, пальцем и
+ * стрелками; после прочтения исходника и после каждого законченного изменения
+ * компонент отдаёт файл, вырезанный рамкой, в выбранном формате и качестве.
+ *
+ * Поворот снимка по EXIF делает сам браузер: картинка и холст читают исходник с
+ * `image-orientation: from-image`, и размеры, которые видит логика, уже
+ * повёрнутые.
+ */
+declare class RtImageCropperComponent {
+    #private;
+    protected readonly field: Signal<ElementRef<HTMLElement>>;
+    protected readonly t: Signal<TRtKitLabelMap>;
+    protected readonly handles: readonly IRtImageCropper.Handle[];
+    protected readonly handleLabels: Readonly<Record<IRtImageCropper.Handle, TRtKitLabelKey>>;
+    protected readonly state: WritableSignal<TCropperState>;
+    /** Текст пустого поля: свой, если задан, иначе подпись кита */
+    protected readonly placeholderText: Signal<string>;
+    /** Адрес исходника для картинки в поле */
+    protected readonly url: WritableSignal<string | null>;
+    /** Где картинка лежит в поле, в пикселях поля */
+    protected readonly image: Signal<IRtImageCropper.Rect>;
+    /** Рамка в пикселях поля */
+    protected readonly frameBox: Signal<IRtImageCropper.Rect>;
+    /** Подсказка пустого поля; пусто — подпись кита `uiImageCropperPlaceholder` */
+    readonly placeholder: InputSignal<string>;
+    /** Исходник: файл, который надо обрезать; пусто — поле с подсказкой */
+    readonly file: InputSignal<Blob | null>;
+    /** Пропорция рамки, ширина к высоте; пусто — рамка свободная */
+    readonly ratio: InputSignalWithTransform<number | null, NumberInput>;
+    /** Круглый вид: маска на экране и пропорция один к одному; результат — квадрат */
+    readonly round: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Наименьший размер рамки в пикселях исходника */
+    readonly minSize: InputSignalWithTransform<number, NumberInput>;
+    /** Формат результата; пусто — формат исходника, png, когда он не из трёх */
+    readonly format: InputSignal<IRtImageCropper.Format | null>;
+    /** Качество результата в процентах — для jpeg и webp */
+    readonly quality: InputSignalWithTransform<number, NumberInput>;
+    /** Недоступна: рамка видна, но не меняется ни указателем, ни клавишами */
+    readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Файл, вырезанный рамкой: после прочтения исходника и после каждого законченного изменения */
+    readonly cropped: OutputEmitterRef<IRtImageCropper.Result>;
+    /** Исходник не прочитался */
+    readonly loadFailed: OutputEmitterRef<void>;
+    constructor();
+    protected onPointerDown(event: PointerEvent, handle: IRtImageCropper.Handle | null): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    protected onKeyDown(event: KeyboardEvent, handle: IRtImageCropper.Handle | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtImageCropperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtImageCropperComponent, "rt-image-cropper", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "file": { "alias": "file"; "required": false; "isSignal": true; }; "ratio": { "alias": "ratio"; "required": false; "isSignal": true; }; "round": { "alias": "round"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "quality": { "alias": "quality"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "cropped": "cropped"; "loadFailed": "loadFailed"; }, never, never, true, never>;
+}
+
+/**
+ * Чистая логика обрезки: вписывание исходника в поле, рамка в пикселях
+ * исходника, её движение и растяжение, перевод клавиш и выбор формата.
+ * Компонент только переводит указатель в сдвиги и рисует то, что вернулось.
+ */
+/** Все восемь ручек по часовой стрелке от левого верхнего угла */
+declare const RT_IMAGE_CROPPER_HANDLES: readonly IRtImageCropper.Handle[];
+/** Шаг клавиш в пикселях поля: стрелка и стрелка с Shift */
+declare const RT_IMAGE_CROPPER_KEY_STEP: number;
+declare const RT_IMAGE_CROPPER_KEY_STEP_LARGE: number;
+/** Качество по умолчанию — то же, что у загрузчика первого кита */
+declare const RT_IMAGE_CROPPER_QUALITY: number;
+/**
+ * Вписывает исходник в поле целиком, с его пропорциями, по центру. Ни одна часть
+ * картинки не срезается полем, и ни одна не растянута.
+ */
+declare function fitSource(source: IRtImageCropper.Size, field: IRtImageCropper.Size): IRtImageCropper.Fit;
+/**
+ * Пропорция, которую держит рамка. Круглый вид держит один к одному при любой
+ * заданной; заданная не числом или не больше нуля значит свободную рамку.
+ */
+declare function frameRatio(ratio: number | null | undefined, round: boolean): number | null;
+/**
+ * Начальная рамка — наибольшая, какую позволяет пропорция, по центру исходника.
+ * Свободная начинается как весь исходник.
+ */
+declare function initialFrame(source: IRtImageCropper.Size, ratio: number | null): IRtImageCropper.Rect;
+/** Сдвиг рамки целиком: размер тот же, у края исходника рамка останавливается */
+declare function moveFrame(frame: IRtImageCropper.Rect, delta: IRtImageCropper.Delta, source: IRtImageCropper.Size): IRtImageCropper.Rect;
+/** По каким осям и в какую сторону тянет ручка */
+declare function handleDirection(handle: IRtImageCropper.Handle): IRtImageCropper.Direction;
+/**
+ * Растяжение рамки за ручку. Сторона или угол напротив ручки стоит на месте;
+ * рамка не выходит за исходник и не становится меньше наименьшего размера; рамка
+ * с пропорцией держит её, а боковая ручка тянет её вокруг центра второй оси.
+ */
+declare function resizeFrame(frame: IRtImageCropper.Rect, handle: IRtImageCropper.Handle, delta: IRtImageCropper.Delta, source: IRtImageCropper.Size, ratio: number | null, minSize: number): IRtImageCropper.Rect;
+/**
+ * Сдвиг от стрелки клавиатуры в пикселях исходника. Одно нажатие — пиксель поля,
+ * с Shift десять; не стрелка даёт `null`.
+ */
+declare function keyDelta(key: string, isLarge: boolean, scale: number): IRtImageCropper.Delta | null;
+/** Сдвиг указателя в пикселях поля переводится в пиксели исходника */
+declare function fieldDelta(dx: number, dy: number, scale: number): IRtImageCropper.Delta;
+/** Рамка в пикселях поля — для рисования поверх вписанной картинки */
+declare function frameInField(frame: IRtImageCropper.Rect, fit: IRtImageCropper.Fit): IRtImageCropper.Rect;
+/** Рамка в целых пикселях исходника — то, что вырезает холст; не меньше пикселя */
+declare function cropArea(frame: IRtImageCropper.Rect, source: IRtImageCropper.Size): IRtImageCropper.Rect;
+/**
+ * Тип результата. Без выбранного формата берётся формат исходника, и png, когда
+ * он не из трёх.
+ */
+declare function resultType(format: IRtImageCropper.Format | null | undefined, sourceType: string): string;
+/** Качество холста — доля единицы; вход берёт проценты */
+declare function resultQuality(quality: number): number;
+/** Имя файла результата: основа имени исходника и расширение по типу результата */
+declare function resultFileName(sourceName: string, type: string): string;
+
+export { IRtImageCropper, RT_IMAGE_CROPPER_HANDLES, RT_IMAGE_CROPPER_KEY_STEP, RT_IMAGE_CROPPER_KEY_STEP_LARGE, RT_IMAGE_CROPPER_QUALITY, RtImageCropperComponent, cropArea, fieldDelta, fitSource, frameInField, frameRatio, handleDirection, initialFrame, keyDelta, moveFrame, resizeFrame, resultFileName, resultQuality, resultType };

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

@@ -0,0 +1,102 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { Signal, ElementRef, WritableSignal, InputSignal, InputSignalWithTransform, OutputEmitterRef } from '@angular/core';
+import { TRtKitLabelMap, TRtRadius, IRtIcon, IButton } from '@rt-tools/ui-kit-v2/core';
+import { IRtImageCropper } from '@rt-tools/ui-kit-v2/image-cropper';
+
+declare namespace IRtImageUpload {
+    /** Что стоит в месте загрузчика: одно состояние за раз */
+    type State = 'loading' | 'cropping' | 'image' | 'empty';
+    /** Форма кнопки скачивания: круглая, как у первого кита, или квадратная */
+    type DownloadShape = 'circle' | 'square';
+}
+
+/**
+ * Загрузчик одного изображения: одно место, в котором по очереди стоят зона загрузки, обрезка и
+ * сама картинка. Файл выбирают кнопкой зоны или бросают на неё; выбранный открывает обрезку, а
+ * «Применить» ставит результат на место картинки и отдаёт файл приложению. Нажатие на картинку
+ * выбирает другой файл.
+ *
+ * Картинка — адрес: приложение даёт свой, а адрес применённого файла загрузчик делает сам и
+ * отпускает его, когда картинку сменили или компонент ушёл. Файл приложение получает в
+ * `imageChanged`.
+ */
+declare class RtImageUploadComponent {
+    #private;
+    protected readonly picker: Signal<ElementRef<HTMLInputElement>>;
+    protected readonly t: Signal<TRtKitLabelMap>;
+    /** Выбранный файл, который сейчас режет обрезка */
+    protected readonly source: WritableSignal<File | null>;
+    /** Последний результат обрезки — его берёт «Применить» */
+    protected readonly result: WritableSignal<IRtImageCropper.Result | null>;
+    /** Что сейчас стоит в месте загрузчика */
+    protected readonly state: Signal<IRtImageUpload.State>;
+    /** Подсказка над картинкой: своя приложения или подпись кита */
+    protected readonly hint: Signal<string>;
+    /** Круглая ли кнопка скачивания: подложка под размытием повторяет её скругление */
+    protected readonly downloadRound: Signal<boolean>;
+    /** Шаг скругления кнопки скачивания: круг — полный шаг, квадрат — скругление кнопки по умолчанию */
+    protected readonly downloadRadius: Signal<TRtRadius | null>;
+    /**
+     * Адрес текущей картинки: данный приложением или сделанный под применённый файл. Новый адрес от
+     * приложения снова берёт верх над применённым.
+     */
+    protected readonly image: WritableSignal<string | null>;
+    /** Адрес картинки от приложения */
+    readonly imageUrl: InputSignal<string | null>;
+    /** Имя файла, под которым картинку скачивают и отдают приложению */
+    readonly fileName: InputSignal<string>;
+    /** Подсказка над картинкой; пустая — подпись кита */
+    readonly tooltip: InputSignal<string>;
+    /** Кнопка скачивания рядом с картинкой */
+    readonly downloadable: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Форма кнопки скачивания; она заходит за правый верхний угол картинки при любой форме */
+    readonly downloadShape: InputSignal<IRtImageUpload.DownloadShape>;
+    /** Размер значка кнопки скачивания; пусто — от размера кнопки */
+    readonly downloadIconSize: InputSignal<IRtIcon.Size | null>;
+    /** Вид кнопки выбора файла в пустом загрузчике */
+    readonly chooseAppearance: InputSignal<IButton.Appearance>;
+    /** Значок кнопки выбора файла; пусто — кнопка без значка */
+    readonly chooseIcon: InputSignal<string | null>;
+    /** Без кнопок «Отмена» и «Применить»: каждый результат обрезки применяется сразу */
+    readonly autoApply: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Приложение загружает картинку: на месте стоит индикатор */
+    readonly loading: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Недоступный загрузчик не берёт файлов и не отзывается на нажатие картинки */
+    readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Соотношение рамки обрезки; пусто — свободная рамка */
+    readonly ratio: InputSignalWithTransform<number | null, NumberInput>;
+    /** Круглая маска обрезки для аватара */
+    readonly round: InputSignalWithTransform<boolean, BooleanInput>;
+    /** Формат результата; пусто — формат исходника */
+    readonly format: InputSignal<IRtImageCropper.Format | null>;
+    /** Качество результата, от 0 до 100 */
+    readonly quality: InputSignalWithTransform<number, NumberInput>;
+    /** Применённый файл — его приложение отправляет, куда ему надо */
+    readonly imageChanged: OutputEmitterRef<File>;
+    /** Картинку скачали */
+    readonly downloaded: OutputEmitterRef<void>;
+    constructor();
+    /** Открывает выбор файла, если загрузчик доступен */
+    pick(): void;
+    /** Файл выбран кнопкой или брошен: изображение открывает обрезку, остальное пропускается */
+    choose(file: File | null | undefined): void;
+    protected onPicked(event: Event): void;
+    protected onSpace(event: Event): void;
+    protected onCropped(result: IRtImageCropper.Result): void;
+    protected apply(): void;
+    protected cancel(): void;
+    protected download(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtImageUploadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtImageUploadComponent, "rt-image-upload", never, { "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "fileName": { "alias": "fileName"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "downloadable": { "alias": "downloadable"; "required": false; "isSignal": true; }; "downloadShape": { "alias": "downloadShape"; "required": false; "isSignal": true; }; "downloadIconSize": { "alias": "downloadIconSize"; "required": false; "isSignal": true; }; "chooseAppearance": { "alias": "chooseAppearance"; "required": false; "isSignal": true; }; "chooseIcon": { "alias": "chooseIcon"; "required": false; "isSignal": true; }; "autoApply": { "alias": "autoApply"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ratio": { "alias": "ratio"; "required": false; "isSignal": true; }; "round": { "alias": "round"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "quality": { "alias": "quality"; "required": false; "isSignal": true; }; }, { "imageChanged": "imageChanged"; "downloaded": "downloaded"; }, never, never, true, never>;
+}
+
+/**
+ * Какое состояние занимает место. Загрузка приложения важнее всего, выбранный исходник важнее
+ * картинки, картинка важнее зоны загрузки.
+ */
+declare function uploadState(loading: boolean, hasSource: boolean, image: string | null): IRtImageUpload.State;
+/** Берётся только файл изображения: брошенный файл другого типа загрузчик пропускает */
+declare function isImageFile(file: File | null | undefined): file is File;
+
+export { IRtImageUpload, RtImageUploadComponent, isImageFile, uploadState };