Cuby UI - агентская документация (RU)

Документ для кодовых агентов. Описывает публичный API пакета @cuby-ui/cdk, а также примеры использования.

CDK: директивы

$3

Описание: автоматический ресайз textarea по контенту.
Публичный API:
- Standalone: да
Пример:
``

html


$3

Описание: эмитит событие при клике вне элемента.
Публичный API:
- Standalone: да
- Output:

cuiClickOutside: EventEmitter


Пример:

html

  ...


$3

Описание: связывает contenteditable с Angular формами.
Публичный API:
- Standalone: да
- Селектор:

[contenteditable][formControlName|formControl|ngModel]


Пример:

html


$3

Описание: отдаёт размеры элемента при изменениях.
Публичный API:
- Standalone: да
- Output:

cuiResizeObserver: EventEmitter


Пример:

html


$3

Описание: экспортирует

ElementRef как elementRef

 в шаблоне.
Публичный API:
- Standalone: да
- exportAs:

elementRef


Пример:

html


$3

Описание: запирает фокус внутри контейнера.
Публичный API:
- Standalone: да
Пример:

html


$3

Описание: метка элемента коллекции, используется в

cui-breadcrumbs

.
Публичный API:
- Standalone: да
Пример:

html
Раздел


$3

Описание: структурная директива для удобного alias значения.
Публичный API:
- Standalone: да
Пример:

html

  {{ user?.name }}


$3

Описание: контекст для

cuiLet

, полезен для типизации.
Публичный API:
- Класс:

CuiLetContext


Пример:

ts
type Ctx = CuiLetContext;


$3

Описание: слушает клики на внешнем DOM-элементе.
Публичный API:
- Standalone: да
- Input:

ccTarget: HTMLElement


- Output:

clicked: EventEmitter


Пример:

html


CDK: пайпы
$3

Описание: фильтрация массива по matcher функции.
Публичный API:
- Standalone: да
Пример:

html

  {{ item.label }}


CDK: сервисы
$3

Описание: Subject, который автоматически завершает подписки в

ngOnDestroy

.
Публичный API:
- Использование:

takeUntil(destroy$)


Пример:

ts
@Component({ providers: [CuiDestroyService] })
export class ExampleComponent {
  private destroy$ = inject(CuiDestroyService);

ngOnInit() { this.stream$.pipe(takeUntil(this.destroy$)).subscribe(); } }`

`$3`


Описание: генератор уникальных id.
Публичный API:
- Метод:

generate(): string


Пример:

ts
const id = inject(CuiIdService).generate();


$3

Описание: абстрактный сервис для поповеров/оверлеев.
Публичный API:
- Метод:

open(content, options?) -> Observable


- Типы:

CuiPopoverContext, CuiPopover


Пример:

ts
class MyPopoverService extends CuiPopoverService {
  constructor() {
    super(MY_ITEMS_TOKEN, MyPopoverComponent, MY_DEFAULT_OPTIONS);
  }
}


$3

Описание: контекст поповера (

id, component, content, completeWith

).
Публичный API:
- Поля:

$implicit, id, component, content, completeWith


Пример:

ts
const ctx: CuiPopoverContext = {
  $implicit: observer,
  id: 'id',
  component: MyComponent,
  content: 'text',
  completeWith: () => {}
};


$3

Описание: тип поповера (опции + контекст).
Пример:

ts
type AlertPopover = CuiPopover;


CDK: токены
$3

Описание: DI токен для

window

.
Пример:

ts
const win = inject(CUI_WINDOW);


$3

Описание: DI токен для

localStorage

.
Пример:

ts
const storage = inject(CUI_LOCAL_STORAGE);


$3

Описание: DI токен для

sessionStorage

.
Пример:

ts
const storage = inject(CUI_SESSION_STORAGE);


$3

Описание: DI токен для

history

.
Пример:

ts
const history = inject(CUI_HISTORY);


CDK: интерфейсы и типы
$3

Описание: размеры элемента.
Публичный API:
- Поля:

width, height


Пример:

ts
function onResize(dim: CuiDimensions) { console.log(dim.width); }


$3

Описание: сигнатура функции onChange для ControlValueAccessor.
Пример:

ts
const onChange: CuiOnChange = (value) => console.log(value);


$3

Описание: сигнатура функции onTouched.
Пример:

ts
const onTouched: CuiOnTouched = () => console.log('touched');


$3

Описание: формат времени для

CuiTime

.
Публичный API:
- Значения:

HH:MM, HH:MM:SS, HH:MM:SS.MSS


Пример:

ts
const mode: CuiTimeMode = 'HH:MM:SS';


$3

Описание: типы инпутов, используемые в core.
Публичный API:
- Значения:

text | password


Пример:

ts
const type: CuiInputType = 'password';


$3

Описание: тип функции-отображения.
Пример:

ts
const map: Mapper<[number, number], number> = (a, b) => a + b;


$3

Описание: тип функции-предиката для фильтрации.
Пример:

ts
const matcher: CuiMatcher<[number, number]> = (item, min) => item > min;


$3

Описание:

T | null | undefined

.
Пример:

ts
const value: CuiNullable = null;


$3

Описание: значение union по ключам объекта.
Пример:

ts
type Modes = CuiValueOf<{ a: 'x'; b: 'y' }>;


$3

Описание: класс времени с парсингом и форматированием.
Публичный API:
- Методы:

fromString, fromPT, toString, toPT


Пример:

ts
const time = CuiTime.fromString('12:30');
time.toString('HH:MM'); // "12:30"


CDK: утилиты и константы
$3

Описание: фильтр узлов для TreeWalker, исключает SVG.
Пример:

ts
document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, svgNodeFilter);


$3

Описание: проверка, что узел внутри или после другого.
Пример:

ts
cuiContainsOrAfter(container, node);


$3

Описание: type guard для HTMLElement.
Пример:

ts
if (cuiIsHTMLElement(node)) node.focus();


$3

Описание: blur активного элемента.
Пример:

ts
cuiBlurNativeFocused(document);


$3

Описание: поиск ближайшего фокусируемого элемента.
Пример:

ts
const next = cuiGetClosestFocusable({ initial, root });


$3

Описание: получение активного элемента с учетом shadow DOM.
Пример:

ts
const active = cuiGetNativeFocused(document);


$3

Описание: проверка фокуса по клавиатуре.
Пример:

ts
cuiIsNativeKeyboardFocusable(element);


$3

Описание: проверка фокуса по клику мыши.
Пример:

ts
cuiIsNativeMouseFocusable(element);


$3

Описание: хелперы для создания

InjectionToken

.
Пример:

ts
export const MY_TOKEN = cuiCreateToken({ enabled: true });


$3

Описание: хелпер для

ExistingProvider

.
Пример:

ts
providers: [cuiProvide(NG_VALUE_ACCESSOR, MyComponent, true)]


Анти-паттерны

- Анти-паттерн: передавать строку вместо

CuiTime в cui-input-time. Описание: компонент ожидает CuiTime

.
Линт и форматирование

- Явных конфигураций ESLint/Prettier в репозитории нет. Ориентируйтесь на текущий стиль файлов и типичные правила Angular/TypeScript.
Версии и совместимость

- Angular:

>=18.0.0


- RxJS:

>=7.0.0

@maskito/*: ^2.5.0

 (input number/time)
-

@tinkoff/ng-polymorpheus: ^4.3.0

 (dialog header)
- Пакеты

@cuby-ui/: версия 0.0.177 (см. projects//package.json`)

CDK: директивы

html

$3

Описание: эмитит событие при клике вне элемента.
Публичный API:
- Standalone: да
- Output:


Пример:

html

  ...


$3

Описание: связывает contenteditable с Angular формами.
Публичный API:
- Standalone: да
- Селектор:

[contenteditable][formControlName|formControl|ngModel]


Пример:

html


$3

Описание: отдаёт размеры элемента при изменениях.
Публичный API:
- Standalone: да
- Output:

cuiResizeObserver: EventEmitter


Пример:

html


$3

Описание: экспортирует

ElementRef как elementRef

 в шаблоне.
Публичный API:
- Standalone: да
- exportAs:

elementRef


Пример:

html


$3

Описание: запирает фокус внутри контейнера.
Публичный API:
- Standalone: да
Пример:

html


$3

Описание: метка элемента коллекции, используется в

cui-breadcrumbs

.
Публичный API:
- Standalone: да
Пример:

html
Раздел


$3

Описание: структурная директива для удобного alias значения.
Публичный API:
- Standalone: да
Пример:

html

  {{ user?.name }}


$3

Описание: контекст для

cuiLet

, полезен для типизации.
Публичный API:
- Класс:

CuiLetContext


Пример:

ts
type Ctx = CuiLetContext;


$3

Описание: слушает клики на внешнем DOM-элементе.
Публичный API:
- Standalone: да
- Input:

ccTarget: HTMLElement


- Output:

clicked: EventEmitter


Пример:

html


CDK: пайпы
$3

Описание: фильтрация массива по matcher функции.
Публичный API:
- Standalone: да
Пример:

html

  {{ item.label }}


CDK: сервисы
$3

Описание: Subject, который автоматически завершает подписки в

ngOnDestroy

.
Публичный API:
- Использование:

takeUntil(destroy$)


Пример:

ts
@Component({ providers: [CuiDestroyService] })
export class ExampleComponent {
  private destroy$ = inject(CuiDestroyService);

ngOnInit() { this.stream$.pipe(takeUntil(this.destroy$)).subscribe(); } }`

`$3`


Описание: генератор уникальных id.
Публичный API:
- Метод:

generate(): string


Пример:

ts
const id = inject(CuiIdService).generate();


$3

Описание: абстрактный сервис для поповеров/оверлеев.
Публичный API:
- Метод:

open(content, options?) -> Observable


- Типы:

CuiPopoverContext, CuiPopover


Пример:

ts
class MyPopoverService extends CuiPopoverService {
  constructor() {
    super(MY_ITEMS_TOKEN, MyPopoverComponent, MY_DEFAULT_OPTIONS);
  }
}


$3

Описание: контекст поповера (

id, component, content, completeWith

).
Публичный API:
- Поля:

$implicit, id, component, content, completeWith


Пример:

ts
const ctx: CuiPopoverContext = {
  $implicit: observer,
  id: 'id',
  component: MyComponent,
  content: 'text',
  completeWith: () => {}
};


$3

Описание: тип поповера (опции + контекст).
Пример:

ts
type AlertPopover = CuiPopover;


CDK: токены
$3

Описание: DI токен для

window

.
Пример:

ts
const win = inject(CUI_WINDOW);


$3

Описание: DI токен для

localStorage

.
Пример:

ts
const storage = inject(CUI_LOCAL_STORAGE);


$3

Описание: DI токен для

sessionStorage

.
Пример:

ts
const storage = inject(CUI_SESSION_STORAGE);


$3

Описание: DI токен для

history

.
Пример:

ts
const history = inject(CUI_HISTORY);


CDK: интерфейсы и типы
$3

Описание: размеры элемента.
Публичный API:
- Поля:

width, height


Пример:

ts
function onResize(dim: CuiDimensions) { console.log(dim.width); }


$3

Описание: сигнатура функции onChange для ControlValueAccessor.
Пример:

ts
const onChange: CuiOnChange = (value) => console.log(value);


$3

Описание: сигнатура функции onTouched.
Пример:

ts
const onTouched: CuiOnTouched = () => console.log('touched');


$3

Описание: формат времени для

CuiTime

.
Публичный API:
- Значения:

HH:MM, HH:MM:SS, HH:MM:SS.MSS


Пример:

ts
const mode: CuiTimeMode = 'HH:MM:SS';


$3

Описание: типы инпутов, используемые в core.
Публичный API:
- Значения:

text | password


Пример:

ts
const type: CuiInputType = 'password';


$3

Описание: тип функции-отображения.
Пример:

ts
const map: Mapper<[number, number], number> = (a, b) => a + b;


$3

Описание: тип функции-предиката для фильтрации.
Пример:

ts
const matcher: CuiMatcher<[number, number]> = (item, min) => item > min;


$3

Описание:

T | null | undefined

.
Пример:

ts
const value: CuiNullable = null;


$3

Описание: значение union по ключам объекта.
Пример:

ts
type Modes = CuiValueOf<{ a: 'x'; b: 'y' }>;


$3

Описание: класс времени с парсингом и форматированием.
Публичный API:
- Методы:

fromString, fromPT, toString, toPT


Пример:

ts
const time = CuiTime.fromString('12:30');
time.toString('HH:MM'); // "12:30"


CDK: утилиты и константы
$3

Описание: фильтр узлов для TreeWalker, исключает SVG.
Пример:

ts
document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, svgNodeFilter);


$3

Описание: проверка, что узел внутри или после другого.
Пример:

ts
cuiContainsOrAfter(container, node);


$3

Описание: type guard для HTMLElement.
Пример:

ts
if (cuiIsHTMLElement(node)) node.focus();


$3

Описание: blur активного элемента.
Пример:

ts
cuiBlurNativeFocused(document);


$3

Описание: поиск ближайшего фокусируемого элемента.
Пример:

ts
const next = cuiGetClosestFocusable({ initial, root });


$3

Описание: получение активного элемента с учетом shadow DOM.
Пример:

ts
const active = cuiGetNativeFocused(document);


$3

Описание: проверка фокуса по клавиатуре.
Пример:

ts
cuiIsNativeKeyboardFocusable(element);


$3

Описание: проверка фокуса по клику мыши.
Пример:

ts
cuiIsNativeMouseFocusable(element);


$3

Описание: хелперы для создания

InjectionToken

.
Пример:

ts
export const MY_TOKEN = cuiCreateToken({ enabled: true });


$3

Описание: хелпер для

ExistingProvider

.
Пример:

ts
providers: [cuiProvide(NG_VALUE_ACCESSOR, MyComponent, true)]


Анти-паттерны

- Анти-паттерн: передавать строку вместо

CuiTime в cui-input-time. Описание: компонент ожидает CuiTime

.
Линт и форматирование

- Явных конфигураций ESLint/Prettier в репозитории нет. Ориентируйтесь на текущий стиль файлов и типичные правила Angular/TypeScript.
Версии и совместимость

- Angular:

>=18.0.0


- RxJS:

>=7.0.0

@maskito/*: ^2.5.0

 (input number/time)
-

@tinkoff/ng-polymorpheus: ^4.3.0

 (dialog header)
- Пакеты

@cuby-ui/: версия 0.0.177 (см. projects//package.json`)

@cuby-ui/cdk

Cuby UI - агентская документация (RU)

Оглавление

CDK: директивы

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

CDK: пайпы

$3

CDK: сервисы

$3

$3

$3

$3

$3

CDK: токены

$3

$3

$3

$3

CDK: интерфейсы и типы

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

CDK: утилиты и константы

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Анти-паттерны

Линт и форматирование

Версии и совместимость

@cuby-ui/cdk

Cuby UI - агентская документация (RU)

Оглавление

CDK: директивы

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

CDK: пайпы

$3

CDK: сервисы

$3

$3

$3

$3

$3

CDK: токены

$3

$3

$3

$3

CDK: интерфейсы и типы

`$3`

`$3`