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

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

Критически важно:
- Оверлеи (cui-dialogs, cui-alerts, cui-select, cui-context-menu) требуют наличия cui-root в DOM.
- open() у CuiAlertService и CuiDialogService выполняется только после подписки на Observable.

- Компоненты (Core)
- Директивы (Core)
- Сервисы (Core)
- Интерфейсы и типы (Core)
- Утилиты (Core)
- Темы и стили
- Рецепты (How-to)
- Анти-паттерны
- FAQ / типовые ошибки
- Структура репозитория
- Линт и форматирование
- Версии и совместимость

Компоненты (Core)

$3

Описание: контейнер для набора cui-accordion-item, управляет только разметкой.
Публичный API:
- Модуль: CuiAccordionModule
- Inputs: нет
- Outputs: нет
Пример:
``

html

  Заголовок
    Контент


$3

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

CuiAccordionModule


- Inputs:

isOpen: boolean (по умолчанию true

)
- Outputs:

isOpenChange: EventEmitter


- Контент: тело передается через

cuiAccordionItemContent


Пример:

html

  Заголовок
  Тело


$3

Описание: сервис для показа алертов поверх UI, построен на

CuiPopoverService

.
Публичный API:
- Методы:

open(content: string, options?: Partial), closeAll()


- Опции:

label, needAutoClose, isCloseable, position, resizing, status, mode


- Типы:

CuiAlertOptions, CuiAlertPosition, CuiAlertResizing


- Константы/токены:

CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ALERTS, CUI_ALERT_CONTEXT


Пример:

ts
const alerts = inject(CuiAlertService);

alerts.open('Задача создана', { status: 'success', label: 'Готово', position: 'right', }).subscribe();`Пример (переопределение дефолтов):`ts providers: [ { provide: CUI_ALERT_OPTIONS, useValue: { position: 'center', needAutoClose: false } } ]`

`$3`


Описание: контейнер для отрисовки списка алертов. Обычно не нужен напрямую, используется в

cui-root

.
Публичный API:
- Модуль:

CuiAlertModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: рендер одного алерта, требует

CUI_ALERT_CONTEXT

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

CuiAlertModule


- Inputs/Outputs: нет
Пример:

ts
providers: [{ provide: CUI_ALERT_CONTEXT, useValue: alertContext }]


$3

Описание: бейдж с цветом, размером и опциональной точкой.
Публичный API:
- Модуль:

CuiBadgeModule


- Inputs:

color, size, isWithDot

size: sm | md


Пример:

html
Online


$3

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

CuiBannerModule


- Inputs:

status, isCloseable, label, actionButtonText


- Outputs:

actionButtonClicked, closed


- Типы:

CuiBannerOptions, CuiBannerIconOptions


- Константы/токены:

CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS


Пример:

html
  label="Сохранено"
  status="success"
  actionButtonText="Отменить"
  (actionButtonClicked)="onUndo()"
  (closed)="onDismiss()"
>
  Запись обновлена


$3

Описание: контейнер хлебных крошек, использует

*cuiItem

.
Публичный API:
- Модуль:

CuiBreadcrumbsModule


- Inputs/Outputs: нет
Пример:

html

  Главная
  Каталог
  Товар


$3

Описание: элемент хлебных крошек (обычно

), стиль задается директивой.
Публичный API:
- Модуль:

CuiBreadcrumbsModule


- Inputs:

isLast: boolean

 (если нужно вручную пометить последний)
Пример:

html
Текущая


$3

Описание: кнопка с набором appearance/size/shape и иконками.
Публичный API:
- Модуль:

CuiButtonModule


- Inputs:

appearance, size, shape, disabled, isLoaderShown, icon, iconRight

size: xxs | xs | sm | md


- Типы:

CuiButtonOptions


- Константы/токены:

CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS


Пример:

html
  cuiButton
  appearance="secondary"
  size="sm"
  icon="cuiIconPlus"
  [isLoaderShown]="isSaving"
>
  Создать


$3

Описание: группировка кнопок

cuiButton

 в одну линию.
Публичный API:
- Модуль:

CuiButtonGroupModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: стилизованный checkbox, логика остается нативной.
Публичный API:
- Модуль:

CuiCheckboxModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: контекстное меню, привязанное к

target, рендерится в cui-root

.
Публичный API:
- Модуль:

CuiContextMenuModule


- Inputs:

items: CuiContextMenuItem[], target: HTMLElement


Пример:

html


$3

Описание: сервис модальных диалогов. Контент может быть компонентом, шаблоном или строкой.
Публичный API:
- Методы:

open(content, options?), closeAll()


- Опции:

size: 'xl' | 'auto', data, dismissible, injector


- Типы:

CuiDialogOptions, CuiDialogContext, CuiDialogSize


- Константы/токены:

CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_DIALOGS, CUI_DIALOG_CONTEXT


Пример:

ts
const dialogs = inject(CuiDialogService);

dialogs.open(ModalComponent, { size: 'xl', data: { id: 123 } }) .subscribe(result => console.log(result));`

`$3`


Описание: контейнер для всех открытых диалогов. Обычно используется через

cui-root

.
Публичный API:
- Модуль:

CuiDialogModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: базовый компонент диалога, получает контекст из

CUI_DIALOG_CONTEXT

.
Публичный API:
- Модуль:

CuiDialogModule


- Inputs/Outputs: нет
Пример:

ts
const context = inject>(CUI_DIALOG_CONTEXT);
context.completeWith({ ok: true });


$3

Описание: шапка диалога с заголовком (Polymorpheus) и кнопкой закрытия.
Публичный API:
- Модуль:

CuiDialogModule


- Inputs:

heading, headingContext, subheading


- Outputs:

closed


Пример:

html
  cuiDialogHeader
  [heading]="'Редактирование'"
  [subheading]="'Поля обязательны'"
  (closed)="context.completeWith()"
>


$3

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

CuiDialogModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: обертка для поля формы, собирает

cuiLabel, поле и cui-hint

.
Публичный API:
- Модуль:

CuiFormFieldModule


- Inputs/Outputs: нет
Пример:

html

  Имя
  
  Введите полное имя


$3

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

CuiHintModule


- Inputs:

hintType: 'info' | 'error'


Пример:

html
Поле обязательно


$3

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

CuiIconButtonModule


- Inputs:

icon, color, hoverColor


Пример:

html
  cuiIconButton
  icon="cuiIconTrash"
  color="var(--cui-danger)"
  hoverColor="var(--cui-red-600)"
>


$3

Описание: числовой инпут с маской (maskito), поддерживает min/max/precision.
Публичный API:
- Модуль:

CuiInputNumberModule


- Inputs:

precision, min, max


- Значение:

number | null

 через ControlValueAccessor
Пример:

html
  [formControl]="priceControl"
  [precision]="2"
  [min]="0"
  [max]="9999"
  cuiTextFieldPlaceholder="Цена"
  cuiTextFieldIconLeft="cuiIconSearch"
>


$3

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

CuiInputPasswordModule


- Inputs: нет (используются

cuiTextField*

 директивы)
Пример:

html
  [formControl]="passwordControl"
  cuiTextFieldId="password"
  cuiTextFieldPlaceholder="Пароль"
>


$3

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

CuiInputModule

 (важно: имя модуля именно такое)
- Inputs: нет (используются

cuiTextField*

 директивы)
Пример:

html
  [formControl]="searchControl"
  cuiTextFieldId="search"
  cuiTextFieldPlaceholder="Поиск"
  cuiTextFieldIconLeft="cuiIconSearch"
>


$3

Описание: ввод времени с маской, значение -

CuiTime

.
Публичный API:
- Модуль:

CuiInputTimeModule


- Inputs:

mode: CuiTimeMode (по умолчанию HH:MM

)
- Типы:

CuiInputTimeOptions


- Константы/токены:

CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS


Пример:

html
  [formControl]="timeControl"
  mode="HH:MM:SS"
  cuiTextFieldPlaceholder="Время"
>


$3

Описание: стилизованный label с возможностью показать звездочку.
Публичный API:
- Модуль:

CuiLabelModule


- Inputs:

isRequired: boolean


Пример:

html
Email


$3

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

CuiNotificationModule


- Inputs:

status, mode, isCloseable


- Outputs:

closed


- Типы:

CuiNotificationOptions, CuiNotificationIcons, CuiNotificationIconOptions


- Константы/токены:

CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE


Пример:

html

  Успешно сохранено


$3

Описание: стилизованный radio, логика остается нативной.
Публичный API:
- Модуль:

CuiRadioModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: корневой контейнер UI, включает

cui-dialogs и cui-alerts, устанавливает атрибут cuiTheme

.
Публичный API:
- Модуль:

CuiRootModule


- Inputs/Outputs: нет
- Константа:

CUI_ROOT_SELECTOR


Пример:

html


$3

Описание: селект с выпадающим списком, использует

cui-root

 для оверлея.
Публичный API:
- Модуль:

CuiSelectModule


- Inputs:

options: CuiOption[], defaultOptionText?: string


- Значение:

unknown

 через ControlValueAccessor
Пример:

html
  [options]="statusOptions"
  [formControl]="statusControl"
  cuiTextFieldId="status"
  cuiTextFieldPlaceholder="Статус"
>


$3

Описание: рендер SVG по имени иконки или по сырому SVG string.
Публичный API:
- Модуль:

CuiSvgModule


- Inputs:

icon, width, height, strokeWidth, color


Пример:

html


$3

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

CuiTabsModule


- Inputs:

activeItemIndex: number


- Outputs:

activeItemIndexChange


Пример:

html


$3

Описание: кнопка таба, эмитит событие активации.
Публичный API:
- Модуль:

CuiTabsModule


- Inputs/Outputs: нет
Пример:

html


$3

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

CuiTextareaModule


- Inputs:

rows, noBordersAndPaddings


Пример:

html
  cuiTextarea
  [rows]="3"
  [noBordersAndPaddings]="false"
  [cuiTextFieldIsError]="true"
>


$3

Описание: стилизованный toggle на базе checkbox.
Публичный API:
- Модуль:

CuiToggleModule


- Inputs/Outputs: нет
Пример:

html


Директивы (Core)
$3

Описание: модуль с директивами управления полями (

cuiTextField*

). Экспортируется входными компонентами.
Публичный API:
- Экспортирует:

CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective


Пример:

ts
imports: [CuiTextFieldControllerModule]


$3

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

cuiTextFieldIconLeft: CuiIcon | string


Пример:

html


$3

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

 внутрь поля.
Публичный API:
- Input:

cuiTextFieldId: string


Пример:

html


$3

Описание: задает состояние ошибки для поля.
Публичный API:
- Input:

cuiTextFieldIsError: boolean


Пример:

html


$3

Описание: задает placeholder для поля.
Публичный API:
- Input:

cuiTextFieldPlaceholder: string


Пример:

html


$3

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

cuiTextFieldSize: 'sm' | 'md'


Пример:

html


$3

Описание: класс, агрегирующий параметры из

cuiTextField*

 директив.
Пример:

ts
const controller = inject(CUI_TEXT_FIELD_CONTROLLER);
console.log(controller.size);


$3

Описание: DI токен и провайдер, собирающие параметры из

cuiTextField*

 директив в единый контроллер.
Публичный API:
- Токен:

CUI_TEXT_FIELD_CONTROLLER


- Провайдер:

CUI_TEXT_FILED_CONTROLLER_PROVIDER


- Токены директив:

CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE


Пример:

ts
const controller = inject(CUI_TEXT_FIELD_CONTROLLER);
console.log(controller.placeholder);


Сервисы (Core)
$3

Описание: сервис темы, хранит состояние в localStorage и выставляет

cuiTheme через CuiRootComponent

.
Публичный API:
- Методы:

next(theme: 'light' | 'dark'), switch()


- Токены/константы:

CUI_THEME, CUI_THEME_STORAGE_KEY, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_DEFAULT_THEME


Пример:

ts
const theme = inject(CuiThemeService);
theme.switch();


Пример (дефолтная тема и ключ хранения):

ts
providers: [
  { provide: CUI_THEME, useValue: 'dark' },
  { provide: CUI_THEME_STORAGE_KEY, useValue: 'myThemeKey' }
]


Интерфейсы и типы (Core)
$3

Описание: модель опции для

cui-select

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

label: string, value: unknown, isDisabled?: boolean


Пример:

ts
const options: CuiOption[] = [
  { label: 'Active', value: 'active' },
  { label: 'Archived', value: 'archived', isDisabled: true }
];


$3

Описание: модель элемента контекстного меню.
Публичный API:
- Поля:

label, icon?, color?, command?


Пример:

ts
const items: CuiContextMenuItem[] = [
  { label: 'Edit', icon: 'cuiIconEdit', command: () => onEdit() },
  { label: 'Delete', icon: 'cuiIconTrash', color: 'var(--cui-danger)' }
];


$3

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


Пример:

ts
const appearance: CuiAppearanceAction = 'action';


$3

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

cui-hint

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

info | error


Пример:

ts
const hintType: CuiHintType = 'error';


$3

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

center | right


Пример:

ts
const position: CuiPositionCenter = 'center';


$3

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

hug | fixed


Пример:

ts
const resizing: CuiResizingFixed = 'fixed';


$3

Описание: shape тип для кнопок.
Публичный API:
- Значение:

rounded


Пример:

ts
const shape: CuiShapeRounded = 'rounded';


$3

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

xxs | xs | sm | md


Пример:

ts
const size: CuiSizeSm = 'sm';


$3

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

success | info | alert | error


Пример:

ts
const status: CuiStatus = 'success';


Утилиты (Core)
$3

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

(value: string) => string


Пример:

ts
cuiRemoveSpaces('a b  c'); // "abc"


$3

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

(value: string, search: string, replace: string) => string


Пример:

ts
cuiReplace('a.b.c', '.', '-'); // "a-b-c"


Темы и стили
$3

Описание: базовые и темные токены описаны в

projects/core/styles/theme.scss. Темная тема задается через атрибут cuiTheme="dark"

.
Пример:

scss
:root {
  --cui-main-font: 'Inter', sans-serif;
}
[cuiTheme='dark'] {
  --cui-base-0: var(--cui-slate-900);
}


$3

Описание:

projects/core/styles/global.scss форвардит миксины и переменные (mixins/, variables/

).
Пример:

scss
@use '@cuby-ui/core/styles/global' as cui;

.btn-reset { @include cui.cui-clear-button(); }`

`Рецепты (How-to)`

`$3`


Описание: использовать

CuiAlertService и убедиться, что есть cui-root

.
Пример:

ts
const alerts = inject(CuiAlertService);
alerts.open('Все ок', { status: 'success', label: 'Готово' }).subscribe();


$3

Описание: открыть компонент и прочитать

data через CUI_DIALOG_CONTEXT

.
Пример:

ts
dialogs.open(EditDialogComponent, { size: 'xl', data: { id: 42 } }).subscribe();

ts
const context = inject>(CUI_DIALOG_CONTEXT);
console.log(context.data.id);


$3

Описание: задать опции и состояние ошибки через

cuiTextFieldIsError

.
Пример:

html
  [options]="options"
  [formControl]="control"
  [cuiTextFieldIsError]="hasError"
>


$3

Описание: использовать

CUI_BUTTON_OPTIONS

 в провайдерах.
Пример:

ts
providers: [
  { provide: CUI_BUTTON_OPTIONS, useValue: { appearance: 'secondary', size: 'md', shape: 'rounded' } }
]


$3

Описание: вызвать

switch() у CuiThemeService

.
Пример:

ts
inject(CuiThemeService).switch();


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

- Анти-паттерн: использовать

CuiAlertService.open() без подписки. Описание: Observable ленивый, без subscribe()

 алерт не создается.
- Анти-паттерн: использовать

cui-select или cui-context-menu без cui-root

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

ElementRef вместо HTMLElement в target. Описание: компонент ожидает HTMLElement

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

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

.
FAQ / типовые ошибки

- Вопрос: почему не открывается диалог? Ответ: проверьте, что вы подписались на

open() и в DOM есть cui-root

.
- Вопрос: почему не видно placeholder в

cui-input-text? Ответ: используйте cuiTextFieldPlaceholder, а не нативный placeholder

.
- Вопрос: почему select не закрывается? Ответ: убедитесь, что есть

cui-root

 и не блокируется событие клика снаружи.
Структура репозитория

-

projects/core

 - UI компоненты, стили, темы.
-

projects/cdk

 - утилиты, директивы, сервисы.
-

projects/icons

 - SVG иконки и типы.
-

projects/test

 - sandbox приложение с примерами.
-

angular.json

 - конфигурация Angular workspace.
Линт и форматирование

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

- Angular:

>=15.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 - агентская документация (RU)

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

Компоненты (Core)

$3

html

  Заголовок
    Контент


$3

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

CuiAccordionModule


- Inputs:

isOpen: boolean (по умолчанию true

)
- Outputs:

isOpenChange: EventEmitter


- Контент: тело передается через

cuiAccordionItemContent


Пример:

html

  Заголовок
  Тело


$3

Описание: сервис для показа алертов поверх UI, построен на

CuiPopoverService

.
Публичный API:
- Методы:

open(content: string, options?: Partial), closeAll()


- Опции:

label, needAutoClose, isCloseable, position, resizing, status, mode


- Типы:

CuiAlertOptions, CuiAlertPosition, CuiAlertResizing


- Константы/токены:

CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ALERTS, CUI_ALERT_CONTEXT


Пример:

ts
const alerts = inject(CuiAlertService);

`$3`


Описание: контейнер для отрисовки списка алертов. Обычно не нужен напрямую, используется в

cui-root

.
Публичный API:
- Модуль:

CuiAlertModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: рендер одного алерта, требует

CUI_ALERT_CONTEXT

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

CuiAlertModule


- Inputs/Outputs: нет
Пример:

ts
providers: [{ provide: CUI_ALERT_CONTEXT, useValue: alertContext }]


$3

Описание: бейдж с цветом, размером и опциональной точкой.
Публичный API:
- Модуль:

CuiBadgeModule


- Inputs:

color, size, isWithDot

size: sm | md


Пример:

html
Online


$3

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

CuiBannerModule


- Inputs:

status, isCloseable, label, actionButtonText


- Outputs:

actionButtonClicked, closed


- Типы:

CuiBannerOptions, CuiBannerIconOptions


- Константы/токены:

CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS


Пример:

html
  label="Сохранено"
  status="success"
  actionButtonText="Отменить"
  (actionButtonClicked)="onUndo()"
  (closed)="onDismiss()"
>
  Запись обновлена


$3

Описание: контейнер хлебных крошек, использует

*cuiItem

.
Публичный API:
- Модуль:

CuiBreadcrumbsModule


- Inputs/Outputs: нет
Пример:

html

  Главная
  Каталог
  Товар


$3

Описание: элемент хлебных крошек (обычно

), стиль задается директивой.
Публичный API:
- Модуль:

CuiBreadcrumbsModule


- Inputs:

isLast: boolean

 (если нужно вручную пометить последний)
Пример:

html
Текущая


$3

Описание: кнопка с набором appearance/size/shape и иконками.
Публичный API:
- Модуль:

CuiButtonModule


- Inputs:

appearance, size, shape, disabled, isLoaderShown, icon, iconRight

size: xxs | xs | sm | md


- Типы:

CuiButtonOptions


- Константы/токены:

CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS


Пример:

html
  cuiButton
  appearance="secondary"
  size="sm"
  icon="cuiIconPlus"
  [isLoaderShown]="isSaving"
>
  Создать


$3

Описание: группировка кнопок

cuiButton

 в одну линию.
Публичный API:
- Модуль:

CuiButtonGroupModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: стилизованный checkbox, логика остается нативной.
Публичный API:
- Модуль:

CuiCheckboxModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: контекстное меню, привязанное к

target, рендерится в cui-root

.
Публичный API:
- Модуль:

CuiContextMenuModule


- Inputs:

items: CuiContextMenuItem[], target: HTMLElement


Пример:

html


$3

Описание: сервис модальных диалогов. Контент может быть компонентом, шаблоном или строкой.
Публичный API:
- Методы:

open(content, options?), closeAll()


- Опции:

size: 'xl' | 'auto', data, dismissible, injector


- Типы:

CuiDialogOptions, CuiDialogContext, CuiDialogSize


- Константы/токены:

CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_DIALOGS, CUI_DIALOG_CONTEXT


Пример:

ts
const dialogs = inject(CuiDialogService);

dialogs.open(ModalComponent, { size: 'xl', data: { id: 123 } }) .subscribe(result => console.log(result));`

`$3`


Описание: контейнер для всех открытых диалогов. Обычно используется через

cui-root

.
Публичный API:
- Модуль:

CuiDialogModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: базовый компонент диалога, получает контекст из

CUI_DIALOG_CONTEXT

.
Публичный API:
- Модуль:

CuiDialogModule


- Inputs/Outputs: нет
Пример:

ts
const context = inject>(CUI_DIALOG_CONTEXT);
context.completeWith({ ok: true });


$3

Описание: шапка диалога с заголовком (Polymorpheus) и кнопкой закрытия.
Публичный API:
- Модуль:

CuiDialogModule


- Inputs:

heading, headingContext, subheading


- Outputs:

closed


Пример:

html
  cuiDialogHeader
  [heading]="'Редактирование'"
  [subheading]="'Поля обязательны'"
  (closed)="context.completeWith()"
>


$3

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

CuiDialogModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: обертка для поля формы, собирает

cuiLabel, поле и cui-hint

.
Публичный API:
- Модуль:

CuiFormFieldModule


- Inputs/Outputs: нет
Пример:

html

  Имя
  
  Введите полное имя


$3

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

CuiHintModule


- Inputs:

hintType: 'info' | 'error'


Пример:

html
Поле обязательно


$3

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

CuiIconButtonModule


- Inputs:

icon, color, hoverColor


Пример:

html
  cuiIconButton
  icon="cuiIconTrash"
  color="var(--cui-danger)"
  hoverColor="var(--cui-red-600)"
>


$3

Описание: числовой инпут с маской (maskito), поддерживает min/max/precision.
Публичный API:
- Модуль:

CuiInputNumberModule


- Inputs:

precision, min, max


- Значение:

number | null

 через ControlValueAccessor
Пример:

html
  [formControl]="priceControl"
  [precision]="2"
  [min]="0"
  [max]="9999"
  cuiTextFieldPlaceholder="Цена"
  cuiTextFieldIconLeft="cuiIconSearch"
>


$3

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

CuiInputPasswordModule


- Inputs: нет (используются

cuiTextField*

 директивы)
Пример:

html
  [formControl]="passwordControl"
  cuiTextFieldId="password"
  cuiTextFieldPlaceholder="Пароль"
>


$3

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

CuiInputModule

 (важно: имя модуля именно такое)
- Inputs: нет (используются

cuiTextField*

 директивы)
Пример:

html
  [formControl]="searchControl"
  cuiTextFieldId="search"
  cuiTextFieldPlaceholder="Поиск"
  cuiTextFieldIconLeft="cuiIconSearch"
>


$3

Описание: ввод времени с маской, значение -

CuiTime

.
Публичный API:
- Модуль:

CuiInputTimeModule


- Inputs:

mode: CuiTimeMode (по умолчанию HH:MM

)
- Типы:

CuiInputTimeOptions


- Константы/токены:

CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS


Пример:

html
  [formControl]="timeControl"
  mode="HH:MM:SS"
  cuiTextFieldPlaceholder="Время"
>


$3

Описание: стилизованный label с возможностью показать звездочку.
Публичный API:
- Модуль:

CuiLabelModule


- Inputs:

isRequired: boolean


Пример:

html
Email


$3

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

CuiNotificationModule


- Inputs:

status, mode, isCloseable


- Outputs:

closed


- Типы:

CuiNotificationOptions, CuiNotificationIcons, CuiNotificationIconOptions


- Константы/токены:


Пример:

html

  Успешно сохранено


$3

Описание: стилизованный radio, логика остается нативной.
Публичный API:
- Модуль:

CuiRadioModule


- Inputs/Outputs: нет
Пример:

html


$3

Описание: корневой контейнер UI, включает

cui-dialogs и cui-alerts, устанавливает атрибут cuiTheme

.
Публичный API:
- Модуль:

CuiRootModule


- Inputs/Outputs: нет
- Константа:

CUI_ROOT_SELECTOR


Пример:

html


$3

Описание: селект с выпадающим списком, использует

cui-root

 для оверлея.
Публичный API:
- Модуль:

CuiSelectModule


- Inputs:

options: CuiOption[], defaultOptionText?: string


- Значение:

unknown

 через ControlValueAccessor
Пример:

html
  [options]="statusOptions"
  [formControl]="statusControl"
  cuiTextFieldId="status"
  cuiTextFieldPlaceholder="Статус"
>


$3

Описание: рендер SVG по имени иконки или по сырому SVG string.
Публичный API:
- Модуль:

CuiSvgModule


- Inputs:

icon, width, height, strokeWidth, color


Пример:

html


$3

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

CuiTabsModule


- Inputs:

activeItemIndex: number


- Outputs:

activeItemIndexChange


Пример:

html


$3

Описание: кнопка таба, эмитит событие активации.
Публичный API:
- Модуль:

CuiTabsModule


- Inputs/Outputs: нет
Пример:

html


$3

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

CuiTextareaModule


- Inputs:

rows, noBordersAndPaddings


Пример:

html
  cuiTextarea
  [rows]="3"
  [noBordersAndPaddings]="false"
  [cuiTextFieldIsError]="true"
>


$3

Описание: стилизованный toggle на базе checkbox.
Публичный API:
- Модуль:

CuiToggleModule


- Inputs/Outputs: нет
Пример:

html


Директивы (Core)
$3

Описание: модуль с директивами управления полями (

cuiTextField*

). Экспортируется входными компонентами.
Публичный API:
- Экспортирует:

CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective


Пример:

ts
imports: [CuiTextFieldControllerModule]


$3

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

cuiTextFieldIconLeft: CuiIcon | string


Пример:

html


$3

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

 внутрь поля.
Публичный API:
- Input:

cuiTextFieldId: string


Пример:

html


$3

Описание: задает состояние ошибки для поля.
Публичный API:
- Input:

cuiTextFieldIsError: boolean


Пример:

html


$3

Описание: задает placeholder для поля.
Публичный API:
- Input:

cuiTextFieldPlaceholder: string


Пример:

html


$3

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

cuiTextFieldSize: 'sm' | 'md'


Пример:

html


$3

Описание: класс, агрегирующий параметры из

cuiTextField*

 директив.
Пример:

ts
const controller = inject(CUI_TEXT_FIELD_CONTROLLER);
console.log(controller.size);


$3

Описание: DI токен и провайдер, собирающие параметры из

cuiTextField*

 директив в единый контроллер.
Публичный API:
- Токен:

CUI_TEXT_FIELD_CONTROLLER


- Провайдер:

CUI_TEXT_FILED_CONTROLLER_PROVIDER


- Токены директив:

CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE


Пример:

ts
const controller = inject(CUI_TEXT_FIELD_CONTROLLER);
console.log(controller.placeholder);


Сервисы (Core)
$3

Описание: сервис темы, хранит состояние в localStorage и выставляет

cuiTheme через CuiRootComponent

.
Публичный API:
- Методы:

next(theme: 'light' | 'dark'), switch()


- Токены/константы:

CUI_THEME, CUI_THEME_STORAGE_KEY, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_DEFAULT_THEME


Пример:

ts
const theme = inject(CuiThemeService);
theme.switch();


Пример (дефолтная тема и ключ хранения):

ts
providers: [
  { provide: CUI_THEME, useValue: 'dark' },
  { provide: CUI_THEME_STORAGE_KEY, useValue: 'myThemeKey' }
]


Интерфейсы и типы (Core)
$3

Описание: модель опции для

cui-select

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

label: string, value: unknown, isDisabled?: boolean


Пример:

ts
const options: CuiOption[] = [
  { label: 'Active', value: 'active' },
  { label: 'Archived', value: 'archived', isDisabled: true }
];


$3

Описание: модель элемента контекстного меню.
Публичный API:
- Поля:

label, icon?, color?, command?


Пример:

ts
const items: CuiContextMenuItem[] = [
  { label: 'Edit', icon: 'cuiIconEdit', command: () => onEdit() },
  { label: 'Delete', icon: 'cuiIconTrash', color: 'var(--cui-danger)' }
];


$3

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


Пример:

ts
const appearance: CuiAppearanceAction = 'action';


$3

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

cui-hint

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

info | error


Пример:

ts
const hintType: CuiHintType = 'error';


$3

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

center | right


Пример:

ts
const position: CuiPositionCenter = 'center';


$3

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

hug | fixed


Пример:

ts
const resizing: CuiResizingFixed = 'fixed';


$3

Описание: shape тип для кнопок.
Публичный API:
- Значение:

rounded


Пример:

ts
const shape: CuiShapeRounded = 'rounded';


$3

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

xxs | xs | sm | md


Пример:

ts
const size: CuiSizeSm = 'sm';


$3

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

success | info | alert | error


Пример:

ts
const status: CuiStatus = 'success';


Утилиты (Core)
$3

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

(value: string) => string


Пример:

ts
cuiRemoveSpaces('a b  c'); // "abc"


$3

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

(value: string, search: string, replace: string) => string


Пример:

ts
cuiReplace('a.b.c', '.', '-'); // "a-b-c"


Темы и стили
$3

Описание: базовые и темные токены описаны в

projects/core/styles/theme.scss. Темная тема задается через атрибут cuiTheme="dark"

.
Пример:

scss
:root {
  --cui-main-font: 'Inter', sans-serif;
}
[cuiTheme='dark'] {
  --cui-base-0: var(--cui-slate-900);
}


$3

Описание:

projects/core/styles/global.scss форвардит миксины и переменные (mixins/, variables/

).
Пример:

scss
@use '@cuby-ui/core/styles/global' as cui;

.btn-reset { @include cui.cui-clear-button(); }`

`Рецепты (How-to)`

`$3`


Описание: использовать

CuiAlertService и убедиться, что есть cui-root

.
Пример:

ts
const alerts = inject(CuiAlertService);
alerts.open('Все ок', { status: 'success', label: 'Готово' }).subscribe();


$3

Описание: открыть компонент и прочитать

data через CUI_DIALOG_CONTEXT

.
Пример:

ts
dialogs.open(EditDialogComponent, { size: 'xl', data: { id: 42 } }).subscribe();

ts
const context = inject>(CUI_DIALOG_CONTEXT);
console.log(context.data.id);


$3

Описание: задать опции и состояние ошибки через

cuiTextFieldIsError

.
Пример:

html
  [options]="options"
  [formControl]="control"
  [cuiTextFieldIsError]="hasError"
>


$3

Описание: использовать

CUI_BUTTON_OPTIONS

 в провайдерах.
Пример:

ts
providers: [
  { provide: CUI_BUTTON_OPTIONS, useValue: { appearance: 'secondary', size: 'md', shape: 'rounded' } }
]


$3

Описание: вызвать

switch() у CuiThemeService

.
Пример:

ts
inject(CuiThemeService).switch();


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

- Анти-паттерн: использовать

CuiAlertService.open() без подписки. Описание: Observable ленивый, без subscribe()

 алерт не создается.
- Анти-паттерн: использовать

cui-select или cui-context-menu без cui-root

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

ElementRef вместо HTMLElement в target. Описание: компонент ожидает HTMLElement

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

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

.
FAQ / типовые ошибки

- Вопрос: почему не открывается диалог? Ответ: проверьте, что вы подписались на

open() и в DOM есть cui-root

.
- Вопрос: почему не видно placeholder в

cui-input-text? Ответ: используйте cuiTextFieldPlaceholder, а не нативный placeholder

.
- Вопрос: почему select не закрывается? Ответ: убедитесь, что есть

cui-root

 и не блокируется событие клика снаружи.
Структура репозитория

-

projects/core

 - UI компоненты, стили, темы.
-

projects/cdk

 - утилиты, директивы, сервисы.
-

projects/icons

 - SVG иконки и типы.
-

projects/test

 - sandbox приложение с примерами.
-

angular.json

 - конфигурация Angular workspace.
Линт и форматирование

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

- Angular:

>=15.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/core

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

Оглавление

Компоненты (Core)

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Директивы (Core)

$3

$3

$3

$3

$3

$3

$3

$3

Сервисы (Core)

$3

Интерфейсы и типы (Core)

$3

$3

$3

$3

$3

$3

$3

$3

$3

Утилиты (Core)

$3

$3

Темы и стили

$3

$3

Рецепты (How-to)

$3

$3

$3

$3

$3

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

FAQ / типовые ошибки

Структура репозитория

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

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

@cuby-ui/core

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

Оглавление

`$3`

`$3`

`Рецепты (How-to)`

`$3`

`$3`

`$3`

`Рецепты (How-to)`

`$3`