Документ для кодовых агентов. Описывает публичный API пакета `@cuby-ui/cdk`, а также примеры использования.
npm install @cuby-ui/cdkДокумент для кодовых агентов. Описывает публичный API пакета @cuby-ui/cdk, а также примеры использования.
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`)