From 4192dd4777e9b3476ec548a171f2ce1fb873887e Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Tue, 14 Jul 2026 21:58:47 +0800 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?= =?UTF-8?q?=D1=8C=20=D1=81=D0=BF=D0=B5=D1=86=D0=B8=D1=84=D0=B8=D0=BA=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D1=8E=20=D1=81=D0=BE=D0=BE=D1=82=D0=B2=D0=B5=D1=82?= =?UTF-8?q?=D1=81=D1=82=D0=B2=D0=B8=D1=8F=20API=20Figma=20=E2=86=94=20Angu?= =?UTF-8?q?lar=20=D0=BF=D0=BE=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D1=82=D0=B0=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api-alignment/BACKLOG.md | 86 +++++++ docs/api-alignment/INDEX.md | 60 +++++ docs/api-alignment/api-alignment-_unmapped.md | 131 +++++++++++ docs/api-alignment/api-alignment-accordion.md | 64 ++++++ .../api-alignment-autocomplete.md | 128 +++++++++++ docs/api-alignment/api-alignment-avatar.md | 45 ++++ docs/api-alignment/api-alignment-badge.md | 37 +++ .../api-alignment/api-alignment-breadcrumb.md | 57 +++++ docs/api-alignment/api-alignment-button.md | 217 ++++++++++++++++++ docs/api-alignment/api-alignment-card.md | 48 ++++ docs/api-alignment/api-alignment-carousel.md | 79 +++++++ docs/api-alignment/api-alignment-checkbox.md | 52 +++++ docs/api-alignment/api-alignment-chip.md | 71 ++++++ .../api-alignment-confirm-dialog.md | 44 ++++ .../api-alignment-date-picker.md | 134 +++++++++++ docs/api-alignment/api-alignment-dialog.md | 82 +++++++ docs/api-alignment/api-alignment-divider.md | 42 ++++ docs/api-alignment/api-alignment-drawer.md | 64 ++++++ .../api-alignment/api-alignment-fileupload.md | 95 ++++++++ docs/api-alignment/api-alignment-galleria.md | 179 +++++++++++++++ .../api-alignment/api-alignment-inputgroup.md | 62 +++++ docs/api-alignment/api-alignment-inputmask.md | 56 +++++ .../api-alignment-inputnumber.md | 87 +++++++ docs/api-alignment/api-alignment-inputotp.md | 61 +++++ docs/api-alignment/api-alignment-inputtext.md | 46 ++++ docs/api-alignment/api-alignment-listbox.md | 203 ++++++++++++++++ docs/api-alignment/api-alignment-megamenu.md | 175 ++++++++++++++ docs/api-alignment/api-alignment-menu.md | 124 ++++++++++ docs/api-alignment/api-alignment-menubar.md | 182 +++++++++++++++ docs/api-alignment/api-alignment-message.md | 130 +++++++++++ .../api-alignment/api-alignment-metergroup.md | 77 +++++++ .../api-alignment-multiselect.md | 101 ++++++++ .../api-alignment-p-data-table.md | 208 +++++++++++++++++ docs/api-alignment/api-alignment-paginator.md | 70 ++++++ docs/api-alignment/api-alignment-panelmenu.md | 119 ++++++++++ docs/api-alignment/api-alignment-password.md | 135 +++++++++++ docs/api-alignment/api-alignment-popover.md | 36 +++ .../api-alignment-progressbar.md | 35 +++ .../api-alignment-progressspinner.md | 57 +++++ .../api-alignment-radiobutton.md | 46 ++++ docs/api-alignment/api-alignment-rating.md | 78 +++++++ .../api-alignment-scroll-panel.md | 34 +++ .../api-alignment-select-button.md | 64 ++++++ docs/api-alignment/api-alignment-select.md | 151 ++++++++++++ docs/api-alignment/api-alignment-skeleton.md | 36 +++ docs/api-alignment/api-alignment-slider.md | 39 ++++ docs/api-alignment/api-alignment-stepper.md | 103 +++++++++ docs/api-alignment/api-alignment-tabs.md | 94 ++++++++ docs/api-alignment/api-alignment-tag.md | 40 ++++ docs/api-alignment/api-alignment-textarea.md | 52 +++++ .../api-alignment/api-alignment-tieredmenu.md | 137 +++++++++++ docs/api-alignment/api-alignment-timeline.md | 123 ++++++++++ docs/api-alignment/api-alignment-toast.md | 69 ++++++ .../api-alignment-togglebutton.md | 55 +++++ .../api-alignment-toggleswitch.md | 34 +++ docs/api-alignment/api-alignment-tooltip.md | 30 +++ 56 files changed, 4864 insertions(+) create mode 100644 docs/api-alignment/BACKLOG.md create mode 100644 docs/api-alignment/INDEX.md create mode 100644 docs/api-alignment/api-alignment-_unmapped.md create mode 100644 docs/api-alignment/api-alignment-accordion.md create mode 100644 docs/api-alignment/api-alignment-autocomplete.md create mode 100644 docs/api-alignment/api-alignment-avatar.md create mode 100644 docs/api-alignment/api-alignment-badge.md create mode 100644 docs/api-alignment/api-alignment-breadcrumb.md create mode 100644 docs/api-alignment/api-alignment-button.md create mode 100644 docs/api-alignment/api-alignment-card.md create mode 100644 docs/api-alignment/api-alignment-carousel.md create mode 100644 docs/api-alignment/api-alignment-checkbox.md create mode 100644 docs/api-alignment/api-alignment-chip.md create mode 100644 docs/api-alignment/api-alignment-confirm-dialog.md create mode 100644 docs/api-alignment/api-alignment-date-picker.md create mode 100644 docs/api-alignment/api-alignment-dialog.md create mode 100644 docs/api-alignment/api-alignment-divider.md create mode 100644 docs/api-alignment/api-alignment-drawer.md create mode 100644 docs/api-alignment/api-alignment-fileupload.md create mode 100644 docs/api-alignment/api-alignment-galleria.md create mode 100644 docs/api-alignment/api-alignment-inputgroup.md create mode 100644 docs/api-alignment/api-alignment-inputmask.md create mode 100644 docs/api-alignment/api-alignment-inputnumber.md create mode 100644 docs/api-alignment/api-alignment-inputotp.md create mode 100644 docs/api-alignment/api-alignment-inputtext.md create mode 100644 docs/api-alignment/api-alignment-listbox.md create mode 100644 docs/api-alignment/api-alignment-megamenu.md create mode 100644 docs/api-alignment/api-alignment-menu.md create mode 100644 docs/api-alignment/api-alignment-menubar.md create mode 100644 docs/api-alignment/api-alignment-message.md create mode 100644 docs/api-alignment/api-alignment-metergroup.md create mode 100644 docs/api-alignment/api-alignment-multiselect.md create mode 100644 docs/api-alignment/api-alignment-p-data-table.md create mode 100644 docs/api-alignment/api-alignment-paginator.md create mode 100644 docs/api-alignment/api-alignment-panelmenu.md create mode 100644 docs/api-alignment/api-alignment-password.md create mode 100644 docs/api-alignment/api-alignment-popover.md create mode 100644 docs/api-alignment/api-alignment-progressbar.md create mode 100644 docs/api-alignment/api-alignment-progressspinner.md create mode 100644 docs/api-alignment/api-alignment-radiobutton.md create mode 100644 docs/api-alignment/api-alignment-rating.md create mode 100644 docs/api-alignment/api-alignment-scroll-panel.md create mode 100644 docs/api-alignment/api-alignment-select-button.md create mode 100644 docs/api-alignment/api-alignment-select.md create mode 100644 docs/api-alignment/api-alignment-skeleton.md create mode 100644 docs/api-alignment/api-alignment-slider.md create mode 100644 docs/api-alignment/api-alignment-stepper.md create mode 100644 docs/api-alignment/api-alignment-tabs.md create mode 100644 docs/api-alignment/api-alignment-tag.md create mode 100644 docs/api-alignment/api-alignment-textarea.md create mode 100644 docs/api-alignment/api-alignment-tieredmenu.md create mode 100644 docs/api-alignment/api-alignment-timeline.md create mode 100644 docs/api-alignment/api-alignment-toast.md create mode 100644 docs/api-alignment/api-alignment-togglebutton.md create mode 100644 docs/api-alignment/api-alignment-toggleswitch.md create mode 100644 docs/api-alignment/api-alignment-tooltip.md diff --git a/docs/api-alignment/BACKLOG.md b/docs/api-alignment/BACKLOG.md new file mode 100644 index 00000000..a367e0e8 --- /dev/null +++ b/docs/api-alignment/BACKLOG.md @@ -0,0 +1,86 @@ +# API Alignment — план работ (backlog) + +Сформирован автоматически из `flags` в `figma-angular-api-map.json`. Колонки «Исправление»/«Сторона» — предварительные, решение за владельцами DS/UI Kit. + +> **Что НЕ является ошибкой:** `figmaOnly`/`angularOnly`-свойства — это штатное разнесение дизайнер/разработчик (см. блоки в отчётах), а не расхождения. Расхождения дефолтов (BTN-2/BTN-3) теперь выявляются автоматически (P0) — Figma-дефолты подмешаны из Desktop Bridge (`docs/figma-defaults.json`). Не покрыто пока: сравнение множеств enum-значений (BTN-1, напр. `variant=basic|outlined` vs Angular-тип) — требует разбора Angular-типов-юнионов в генераторе. + +## P0 — расхождения дефолтов (Figma ≠ Angular) + +Выявлено по совпадающим по имени параметрам: **42**. Источник Figma-дефолтов — `docs/figma-defaults.json` (Desktop Bridge). + +> ⚠️ Матчинг по имени: часть строк — совпадение имени при разной семантике/типе (напр. `value`, `line`, `placeholder` — Figma-флаг/токен vs Angular-строка/массив). Проверять перед постановкой в работу. + +| ID | Компонент | Параметр | Figma default | Angular default | +|---|---|---|---|---| +| DEF-1 | Button.Base | `icon-only` ↔ `iconOnly` | `true` | `false` | +| DEF-2 | Button.Base | `size` ↔ `size` | `xlarge` | `base` | +| DEF-3 | Button.Danger | `icon-only` ↔ `iconOnly` | `true` | `false` | +| DEF-4 | Button.Danger | `size` ↔ `size` | `xlarge` | `base` | +| DEF-5 | Button.Danger | `variant` ↔ `variant` | `basic` | `primary` | +| DEF-6 | Button.Info | `icon-only` ↔ `iconOnly` | `true` | `false` | +| DEF-7 | Button.Info | `size` ↔ `size` | `xlarge` | `base` | +| DEF-8 | Button.Info | `variant` ↔ `variant` | `basic` | `primary` | +| DEF-9 | Button.Success | `icon-only` ↔ `iconOnly` | `true` | `false` | +| DEF-10 | Button.Success | `size` ↔ `size` | `xlarge` | `base` | +| DEF-11 | Button.Success | `variant` ↔ `variant` | `basic` | `primary` | +| DEF-12 | Button.Warning | `icon-only` ↔ `iconOnly` | `true` | `false` | +| DEF-13 | Button.Warning | `size` ↔ `size` | `xlarge` | `base` | +| DEF-14 | Button.Warning | `variant` ↔ `variant` | `basic` | `primary` | +| DEF-15 | DatePicker | `show-clear` ↔ `showClear` | `true` | `false` | +| DEF-16 | DatePicker | `↳ show-time` ↔ `showTime` | `true` | `false` | +| DEF-17 | InputMask | `show-clear` ↔ `showClear` | `true` | `false` | +| DEF-18 | InputText | `show-clear` ↔ `showClear` | `true` | `false` | +| DEF-19 | Select | `show-clear` ↔ `showClear` | `true` | `false` | +| DEF-20 | SelectButton.Item | `size` ↔ `size` | `xlarge` | `base` | +| DEF-21 | Textarea | `placeholder` ↔ `placeholder` | `true` | `` | +| DEF-22 | Textarea | `show-clear` ↔ `showClear` | `true` | `false` | +| DEF-23 | ToggleButton | `icon-only` ↔ `iconOnly` | `true` | `false` | +| DEF-24 | ToggleButton | `size` ↔ `size` | `xlarge` | `base` | +| DEF-25 | ConfirmDialog | `severity` ↔ `severity` | `danger` | `default` | +| DEF-26 | Drawer | `position` ↔ `position` | `left` | `right` | +| DEF-27 | Card | `overlay` ↔ `overlay` | `true` | `false` | +| DEF-28 | Divider | `align` ↔ `align` | `left` | `center` | +| DEF-29 | Galleria | `↳ show-indicators` ↔ `showIndicators` | `true` | `false` | +| DEF-30 | Avatar | `size` ↔ `size` | `xlarge` | `base` | +| DEF-31 | MeterGroup.Item | `value` ↔ `value` | `{value}` | `[]` | +| DEF-32 | ProgressBar | `value` ↔ `value` | `{value}%` | `0` | +| DEF-33 | ProgressSpinner | `fill` ↔ `fill` | `primary` | `none` | +| DEF-34 | ProgressSpinner | `size` ↔ `size` | `xlarge` | `base` | +| DEF-35 | Breadcrumb | `home` ↔ `home` | `true` | `undefined` | +| DEF-36 | Timeline | `layout` ↔ `layout` | `horizontal` | `vertical` | +| DEF-37 | Timeline.ItemHorizontal | `align` ↔ `align` | `opposite` | `left` | +| DEF-38 | Timeline.ItemHorizontal | `line` ↔ `line` | `true` | `solid` | +| DEF-39 | Timeline.ItemVertical | `align` ↔ `align` | `opposite` | `left` | +| DEF-40 | Timeline.ItemVertical | `line` ↔ `line` | `true` | `solid` | +| DEF-41 | Timeline.Marker | `icon` ↔ `icon` | `false` | `` | +| DEF-42 | _❌Button.Badge | `size` ↔ `size` | `xlarge` | `base` | + +## P1 — компоненты без Angular-реализации + +| ID | repo.angular | Figma-узлы | Суть | Сторона | +|---|---|---|---|---| +| GAP-1 | `src/lib/components/multiselect` | MultiSelect, MultiSelect.Group, MultiSelect.Option, MultiSelect.Overlay | папки нет в `main` (есть в ветке) | Angular / решение | +| GAP-2 | `src/stories/components/p-data-table` | DataTable.BodyCellBase, DataTable.FooterCellBase, DataTable.HeaderCellBase, DataTable.HeaderCellFilter, DataTable.Constraint, DataTable.ConstraintList, DataTable.OverlayPopover, DataTable.OverlaySelect, DataTable.RowToggleButton | `repo` ведёт на сторис без `@Component` | Angular / решение | +| GAP-3 | `— (нет repo.angular)` | _❌FloatLabel, MenuItem.Base, MenuItem.Group, MenuItem.Node, MenuItem.Template, ActionIcon | нет `repo.angular` — модель/устаревшее/не реализовано | Angular / решение | + +## P2 — ошибки данных Figma + +| ID | Узлы | Суть | Сторона | +|---|---|---|---| +| — | — | нет | — | + +## P3 — слоты без реализации (обзор) + +Помечено `⚠️ отсутствует` слотов: **201** в **96** узлах. + +> ⚠️ **Осторожно, завышено:** матчинг слот↔Input идёт **по имени**. Многие «gap» — ложные (напр. `text-button`→`label`, `↳ change-icon`→`icon` реализованы, но под другим именем). Задача SLOT-1: завести таблицу **ролевых алиасов слотов** или проверить вручную; не считать эти `⚠️` подтверждёнными расхождениями до проверки. + +| ID | Задача | Сторона | +|---|---|---| +| SLOT-1 | Ролевой маппинг слотов (Figma TEXT/INSTANCE_SWAP → Angular Input по роли) вместо матчинга по имени | Документация + генератор | + +## Справочно (не задачи) + +- `figmaOnly` всего: **517** — свойства только во Figma (штатно → блок «Для дизайнеров»). +- `angularOnly` всего: **1123** — свойства только в Angular (штатно → блок «Для разработчиков»). +- Детализация по каждому компоненту — в соответствующем `api-alignment-.md`. diff --git a/docs/api-alignment/INDEX.md b/docs/api-alignment/INDEX.md new file mode 100644 index 00000000..8458d026 --- /dev/null +++ b/docs/api-alignment/INDEX.md @@ -0,0 +1,60 @@ +# API Alignment — индекс (по Angular-компонентам) + +Angular-компонентов: 54. Источник данных: `docs/figma-angular-api-map.json`. + +План работ по расхождениям: [BACKLOG.md](BACKLOG.md). + +- [accordion](api-alignment-accordion.md) — 2 узл.: Accordion, Accordion.Panel +- [autocomplete](api-alignment-autocomplete.md) — 4 узл.: AutoComplete, AutoComplete.Group, AutoComplete.Option, AutoComplete.Overlay +- [avatar](api-alignment-avatar.md) — 1 узл.: Avatar +- [badge](api-alignment-badge.md) — 1 узл.: Badge +- [breadcrumb](api-alignment-breadcrumb.md) — 2 узл.: Breadcrumb, Breadcrumb.Item +- [button](api-alignment-button.md) — 7 узл.: Button.Base, Button.Danger, Button.Info, Button.Success, Button.Warning, _❌Button.Badge, _Button +- [card](api-alignment-card.md) — 1 узл.: Card +- [carousel](api-alignment-carousel.md) — 2 узл.: Carousel, Carousel.Indicator +- [checkbox](api-alignment-checkbox.md) — 1 узл.: Checkbox +- [chip](api-alignment-chip.md) — 2 узл.: Chip, _❌Chips +- [confirm-dialog](api-alignment-confirm-dialog.md) — 1 узл.: ConfirmDialog +- [date-picker](api-alignment-date-picker.md) — 4 узл.: DatePicker.Panel, DatePicker, DatePicker.Date, DatePicker.TimePicker +- [dialog](api-alignment-dialog.md) — 2 узл.: Dialog, Modal window +- [divider](api-alignment-divider.md) — 1 узл.: Divider +- [drawer](api-alignment-drawer.md) — 1 узл.: Drawer +- [fileupload](api-alignment-fileupload.md) — 3 узл.: FileUpload, FileUpload.Drag&Drop, Fileupload.File +- [galleria](api-alignment-galleria.md) — 5 узл.: Galleria, Galleria.Indicator, Galleria.ThumbnailImage, Galleria.NavigatorButton, Galleria.ThumbnailButton +- [inputgroup](api-alignment-inputgroup.md) — 2 узл.: InputGroup, InputGroup.Addon +- [inputmask](api-alignment-inputmask.md) — 1 узл.: InputMask +- [inputnumber](api-alignment-inputnumber.md) — 2 узл.: InputNumber, InputNumber.Buttons +- [inputotp](api-alignment-inputotp.md) — 2 узл.: InputOtp, InputOtp.Item +- [inputtext](api-alignment-inputtext.md) — 1 узл.: InputText +- [listbox](api-alignment-listbox.md) — 7 узл.: Listbox, Listbox.Item, Listbox.ItemCheckbox, Listbox.ItemGroup, Listbox.ItemIcon, Listbox.ItemTemplate, Listbox.Filter +- [megamenu](api-alignment-megamenu.md) — 7 узл.: MegaMenu, MegaMenu.Item.Group, MegaMenu.ItemBase, MegaMenu.ItemTemplate, MegaMenu.MobileButton, MegaMenu.Submenu, _❌MegaMenu +- [menu](api-alignment-menu.md) — 5 узл.: Menu, Menu.ItemBase, Menu.ItemTemplate, Menu.Submenu, _❌Menu +- [menubar](api-alignment-menubar.md) — 8 узл.: Menubar, Menubar.Item.Group, Menubar.ItemBase, Menubar.ItemTemplate, Menubar.MobileButton, Menubar.MobileIndent, Menubar.Submenu, _❌Menubar +- [message](api-alignment-message.md) — 4 узл.: Message, _Message.ButtonClose, _❌Message, _Message.ButtonClose +- [metergroup](api-alignment-metergroup.md) — 3 узл.: MeterGroup, MeterGroup.LabelIcon, MeterGroup.Item +- [multiselect](api-alignment-multiselect.md) ⚠️ — 4 узл.: MultiSelect, MultiSelect.Group, MultiSelect.Option, MultiSelect.Overlay +- [paginator](api-alignment-paginator.md) — 2 узл.: Paginator, Paginator.Item +- [panelmenu](api-alignment-panelmenu.md) — 5 узл.: PanelMenu.ItemBase, PanelMenu.ItemTemplate, PanelMenu.Panel, PanelMenu.Submenu, _❌PanelMenu +- [password](api-alignment-password.md) — 4 узл.: Password.Feedback, Password, Password.TextFeedback, Password.Meter +- [popover](api-alignment-popover.md) — 1 узл.: Popover +- [progressbar](api-alignment-progressbar.md) — 1 узл.: ProgressBar +- [progressspinner](api-alignment-progressspinner.md) — 2 узл.: ProgressSpinner, ProgressSpinner.Item +- [radiobutton](api-alignment-radiobutton.md) — 1 узл.: RadioButton +- [rating](api-alignment-rating.md) — 3 узл.: Rating, Rating.Item, Rating.Clear +- [scroll-panel](api-alignment-scroll-panel.md) — 1 узл.: ScrollPanel +- [select](api-alignment-select.md) — 4 узл.: Select.Overlay, Select, Select.Group, Select.Option +- [select-button](api-alignment-select-button.md) — 2 узл.: SelectButton, SelectButton.Item +- [skeleton](api-alignment-skeleton.md) — 1 узл.: Skeleton +- [slider](api-alignment-slider.md) — 1 узл.: Slider +- [stepper](api-alignment-stepper.md) — 4 узл.: Stepper, Stepper.Item, Stepper.StepPanel, Stepper.Separator +- [tabs](api-alignment-tabs.md) — 4 узл.: Tabs, Tabs.NavButton, Tabs.Tab, Tabs.Tabpanel +- [tag](api-alignment-tag.md) — 1 узл.: Tag +- [textarea](api-alignment-textarea.md) — 1 узл.: Textarea +- [tieredmenu](api-alignment-tieredmenu.md) — 6 узл.: TieredMenu, TieredMenu.ItemBase, TieredMenu.ItemTemplate, TieredMenu.MobileIndent, TieredMenu.Submenu, _❌TieredMenu +- [timeline](api-alignment-timeline.md) — 4 узл.: Timeline, Timeline.ItemHorizontal, Timeline.ItemVertical, Timeline.Marker +- [toast](api-alignment-toast.md) — 2 узл.: Toast, _Toast.ButtonClose +- [togglebutton](api-alignment-togglebutton.md) — 1 узл.: ToggleButton +- [toggleswitch](api-alignment-toggleswitch.md) — 1 узл.: ToggleSwitch +- [tooltip](api-alignment-tooltip.md) — 1 узл.: Tooltip +- [p-data-table](api-alignment-p-data-table.md) ⚠️ — 9 узл.: DataTable.BodyCellBase, DataTable.FooterCellBase, DataTable.HeaderCellBase, DataTable.HeaderCellFilter, DataTable.Constraint, DataTable.ConstraintList, DataTable.OverlayPopover, DataTable.OverlaySelect, DataTable.RowToggleButton +- [_unmapped](api-alignment-_unmapped.md) ⚠️ — 6 узл.: _❌FloatLabel, MenuItem.Base, MenuItem.Group, MenuItem.Node, MenuItem.Template, ActionIcon diff --git a/docs/api-alignment/api-alignment-_unmapped.md b/docs/api-alignment/api-alignment-_unmapped.md new file mode 100644 index 00000000..efa85115 --- /dev/null +++ b/docs/api-alignment/api-alignment-_unmapped.md @@ -0,0 +1,131 @@ +# _unmapped + +Angular: ⚠️ реализация не найдена в коде +Figma-узлов: 6 — [_❌FloatLabel](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=2235-13688), [MenuItem.Base](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-572), [MenuItem.Group](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-853), [MenuItem.Node](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=792-5765), [MenuItem.Template](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=937-6724), [ActionIcon](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=397-1795) + +## Для разработчиков (Angular API) + +⚠️ компонент не найден в коде + +## Соответствие по Figma-узлам + +### _❌FloatLabel · Figma nodeId `2235:13688` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=2235-13688) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `show-clear` (BOOLEAN), default `True` +- `show-text-input` (BOOLEAN), default `True` +- `show-loader` (BOOLEAN), default `True` +- `state` (VARIANT): default | hover | focus | danger | disabled, default `default` +- `label-position` (VARIANT): top | base, default `base` +- `label-placement` (VARIANT): inside | outside, default `inside` +- `textarea` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MenuItem.Base · Figma nodeId `882:572` · 🚧 Mixins · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-572) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | disabled | hover — ⚠️ набор с ошибкой во Figma, дефолты недоступны +- `checked` (VARIANT): false | true — ⚠️ набор с ошибкой во Figma, дефолты недоступны +- `separator` (VARIANT): false | true — ⚠️ набор с ошибкой во Figma, дефолты недоступны + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MenuItem.Group · Figma nodeId `882:853` · 🚧 Mixins · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-853) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menuitem` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-menuitem` (TEXT), default `Menuitem` +- `disabled` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MenuItem.Node · Figma nodeId `792:5765` · 🚧 Mixins · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=792-5765) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-list` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-layout-list` (INSTANCE_SWAP), default `13110:19798` +- `show-list` (BOOLEAN), default `True` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MenuItem.Template · Figma nodeId `937:6724` · 🚧 Mixins · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=937-6724) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `checked` (VARIANT): false | true — ⚠️ набор с ошибкой во Figma, дефолты недоступны +- `separator` (VARIANT): false | true — ⚠️ набор с ошибкой во Figma, дефолты недоступны +- `state` (VARIANT): default | disabled | hover — ⚠️ набор с ошибкой во Figma, дефолты недоступны + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### ActionIcon · Figma nodeId `397:1795` · 🚧 Mixins · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=397-1795) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-icon` (INSTANCE_SWAP), default `428:1981` +- `state` (VARIANT): default | hover | disabled, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-accordion.md b/docs/api-alignment/api-alignment-accordion.md new file mode 100644 index 00000000..2ce1bc52 --- /dev/null +++ b/docs/api-alignment/api-alignment-accordion.md @@ -0,0 +1,64 @@ +# accordion + +Angular: `src/lib/components/accordion` — `ExtraAccordionComponent` +Figma-узлов: 2 — [Accordion](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1153-3084), [Accordion.Panel](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1135-5538) + +## Для разработчиков (Angular API) + +**`ExtraAccordionComponent`** (`extra-accordion`, `src/lib/components/accordion/accordion.component.ts`) + +- Inputs: + - `@Input() items: ExtraAccordionItem[] = []` + - `@Input() multiple = false` + - `@Input() activeValue: string | null = '0'` +- Outputs: + - `@Output() activeValueChange: string | number | string[] | number[] | null | undefined` + +## Соответствие по Figma-узлам + +### Accordion · Figma nodeId `1153:3084` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1153-3084) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:19798` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Accordion.Panel · Figma nodeId `1135:5538` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1135-5538) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `↳ change-layout-extra` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-layout-body` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-accordion` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:2003` +- `show-extra` (BOOLEAN), default `True` +- `↳ change-layout-extra` (INSTANCE_SWAP), default `13110:31679` +- `change-layout-body` (INSTANCE_SWAP), default `18841:12539` +- `text-accordion` (TEXT), default `Accordion` +- `state` (VARIANT): default | hover | disabled, default `default` +- `expanded` (VARIANT): false | true, default `false` +- `first-of-type` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-autocomplete.md b/docs/api-alignment/api-alignment-autocomplete.md new file mode 100644 index 00000000..370c35ae --- /dev/null +++ b/docs/api-alignment/api-alignment-autocomplete.md @@ -0,0 +1,128 @@ +# autocomplete + +Angular: `src/lib/components/autocomplete` — `ExtraAutoCompleteComponent` +Figma-узлов: 4 — [AutoComplete](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=9370-42021), [AutoComplete.Group](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15742-16726), [AutoComplete.Option](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15739-16674), [AutoComplete.Overlay](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15732-84917) + +## Для разработчиков (Angular API) + +**`ExtraAutoCompleteComponent`** (`extra-auto-complete`, `src/lib/components/autocomplete/autocomplete.component.ts`) + +- Inputs: + - `@Input() suggestions: any[] = []` + - `@Input() optionLabel: string | undefined = undefined` + - `@Input() optionValue: string | undefined = undefined` + - `@Input() optionDisabled: string | undefined = undefined` + - `@Input() optionGroupLabel: string | undefined = undefined` + - `@Input() optionGroupChildren: string | undefined = undefined` + - `@Input() group = false` + - `@Input() multiple = false` + - `@Input() dropdown = false` + - `@Input() dropdownMode: 'blank' | 'current' = 'blank'` + - `@Input() showClear = false` + - `@Input() forceSelection = false` + - `@Input() completeOnFocus = false` + - `@Input() placeholder: string | undefined = undefined` + - `@Input() minLength = 1` + - `@Input() delay = 300` + - `@Input() scrollHeight = '200px'` + - `@Input() emptyMessage: string | undefined = undefined` + - `@Input() disabled = false` + - `@Input() readonly = false` + - `@Input() invalid = false` + - `@Input() fluid = false` + - `@Input() unique = false` + - `@Input() dataKey: string | undefined = undefined` + - `@Input() inputStyleClass: string | undefined = undefined` + - `@Input() inputId: string | undefined = undefined` + - `@Input() ariaLabel: string | undefined = undefined` + - `@Input() ariaLabelledBy: string | undefined = undefined` + - `@Input() autofocus = false` + - `@Input() size: ExtraAutoCompleteSize` +- Outputs: + - `@Output() completeMethod: ExtraAutoCompleteCompleteEvent` + - `@Output() onSelect: ExtraAutoCompleteSelectEvent` + - `@Output() onUnselect: ExtraAutoCompleteUnselectEvent` + - `@Output() onDropdownClick: ExtraAutoCompleteDropdownClickEvent` + - `@Output() onFocus: Event` + - `@Output() onBlur: Event` + - `@Output() onClear: void` + +## Соответствие по Figma-узлам + +### AutoComplete · Figma nodeId `9370:42021` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=9370-42021) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `type` (VARIANT): dropdown | group | multi-select, default `dropdown` +- `state` (VARIANT): default | opened, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### AutoComplete.Group · Figma nodeId `15742:16726` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15742-16726) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-group-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-group-option` (TEXT), default `subtitle` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### AutoComplete.Option · Figma nodeId `15739:16674` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15739-16674) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-option` (TEXT), default `Option` +- `state` (VARIANT): default | hover, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### AutoComplete.Overlay · Figma nodeId `15732:84917` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15732-84917) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-avatar.md b/docs/api-alignment/api-alignment-avatar.md new file mode 100644 index 00000000..7e840b01 --- /dev/null +++ b/docs/api-alignment/api-alignment-avatar.md @@ -0,0 +1,45 @@ +# avatar + +Angular: `src/lib/components/avatar` — `ExtraAvatarComponent`, `ExtraAvatarGroupComponent` +Figma-узлов: 1 — [Avatar](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=36-1365) + +## Для разработчиков (Angular API) + +**`ExtraAvatarComponent`** (`extra-avatar`, `src/lib/components/avatar/avatar.component.ts`) + +- Inputs: + - `@Input() label = ''` + - `@Input() icon = ''` + - `@Input() image = ''` + - `@Input() size: ExtraAvatarSize = 'base'` + - `@Input() shape: ExtraAvatarShape = 'square'` + +**`ExtraAvatarGroupComponent`** (`extra-avatar-group`, `src/lib/components/avatar/avatar.component.ts`) + +- Проекция: `` + +## Соответствие по Figma-узлам + +### Avatar · Figma nodeId `36:1365` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=36-1365) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:2003` +- `show-badge` (BOOLEAN), default `True` +- `size` (VARIANT): xlarge | large | base, default `xlarge` +- `shape` (VARIANT): square | circle, default `square` +- `type` (VARIANT): image | icon | label, default `label` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `shape` (Figma) ↔ `shape` (Angular) | enum / `ExtraAvatarShape` | именование совпадает; значения: square \| circle; дефолт совпадает: `square` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraAvatarSize` | именование совпадает; значения: xlarge \| large \| base; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | diff --git a/docs/api-alignment/api-alignment-badge.md b/docs/api-alignment/api-alignment-badge.md new file mode 100644 index 00000000..cc209e74 --- /dev/null +++ b/docs/api-alignment/api-alignment-badge.md @@ -0,0 +1,37 @@ +# badge + +Angular: `src/lib/components/badge` — `ExtraBadgeComponent` +Figma-узлов: 1 — [Badge](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=21-1193) + +## Для разработчиков (Angular API) + +**`ExtraBadgeComponent`** (`extra-badge`, `src/lib/components/badge/badge.component.ts`) + +- Inputs: + - `@Input() value: string | number = ''` + - `@Input() severity: ExtraBadgeSeverity = 'primary'` + - `@Input() size: ExtraBadgeSize = 'base'` + +## Соответствие по Figma-узлам + +### Badge · Figma nodeId `21:1193` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=21-1193) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-badge` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-badge` (TEXT), default `Badge` +- `severity` (VARIANT): primary | info | success | warning | danger, default `primary` +- `dot` (VARIANT): false | true, default `false` +- `size` (VARIANT): base | large | xlarge, default `base` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `severity` (Figma) ↔ `severity` (Angular) | enum / `ExtraBadgeSeverity` | именование совпадает; значения: primary \| info \| success \| warning \| danger; дефолт совпадает: `primary` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraBadgeSize` | именование совпадает; значения: base \| large \| xlarge; дефолт совпадает: `base` | diff --git a/docs/api-alignment/api-alignment-breadcrumb.md b/docs/api-alignment/api-alignment-breadcrumb.md new file mode 100644 index 00000000..9096266e --- /dev/null +++ b/docs/api-alignment/api-alignment-breadcrumb.md @@ -0,0 +1,57 @@ +# breadcrumb + +Angular: `src/lib/components/breadcrumb` — `ExtraBreadcrumbComponent` +Figma-узлов: 2 — [Breadcrumb](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=735-7985), [Breadcrumb.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=734-7859) + +## Для разработчиков (Angular API) + +**`ExtraBreadcrumbComponent`** (`extra-breadcrumb`, `src/lib/components/breadcrumb/breadcrumb.component.ts`) + +- Inputs: + - `@Input() model: ExtraMenuItem[] = []` + - `@Input() home: ExtraMenuItem | undefined = undefined` + +## Соответствие по Figma-узлам + +### Breadcrumb · Figma nodeId `735:7985` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=735-7985) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:34042` +- `home` (VARIANT): true | false, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `home` (Figma) ↔ `home` (Angular) | enum / `ExtraMenuItem \| undefined` | именование совпадает; значения: true \| false; ⚠️ дефолт отличается: Figma `true` ↔ Angular `undefined` | + +### Breadcrumb.Item · Figma nodeId `734:7859` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=734-7859) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-breadcrumb` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-separator` (BOOLEAN), default `True` +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:2003` +- `show-label` (BOOLEAN), default `True` +- `text-breadcrumb` (TEXT), default `Breadcrum` +- `state` (VARIANT): default | hover | disabled, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-button.md b/docs/api-alignment/api-alignment-button.md new file mode 100644 index 00000000..3b5995eb --- /dev/null +++ b/docs/api-alignment/api-alignment-button.md @@ -0,0 +1,217 @@ +# button + +Angular: `src/lib/components/button` — `ExtraButtonComponent` +Figma-узлов: 7 — [Button.Base](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=160-5223), [Button.Danger](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=162-5457), [Button.Info](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=429-9674), [Button.Success](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=429-8209), [Button.Warning](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=429-6741), [_❌Button.Badge](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=205-1453), [_Button](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=14456-3003) + +## Для разработчиков (Angular API) + +**`ExtraButtonComponent`** (`extra-button`, `src/lib/components/button/button.component.ts`) + +- Inputs: + - `@Input() label = 'Button'` + - `@Input() variant: ExtraButtonVariant = 'primary'` + - `@Input() severity: ExtraButtonSeverity = null` + - `@Input() size: ExtraButtonSize = 'base'` + - `@Input() rounded = false` + - `@Input() iconPosition: ExtraButtonIconPosition = null` + - `@Input() iconOnly = false` + - `@Input() icon = ''` + - `@Input() disabled = false` + - `@Input() loading = false` + - `@Input() badge = ''` + - `@Input() badgeSeverity: ExtraBadgeSeverity = null` + - `@Input() showBadge = false` + - `@Input() fluid = false` + - `@Input() ariaLabel: string | undefined = undefined` + - `@Input() autofocus = false` + - `@Input() tabindex: number | undefined = undefined` + - `@Input() text = false` + +## Соответствие по Figma-узлам + +### Button.Base · Figma nodeId `160:5223` · Button · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=160-5223) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-button` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1975` +- `text-button` (TEXT), default `Button` +- `variant` (VARIANT): primary | secondary | tertiary | text | link, default `primary` +- `state` (VARIANT): default | focus | hover | active | disabled | loading, default `default` +- `size` (VARIANT): xlarge | large | base | small, default `xlarge` +- `rounded` (VARIANT): false | true, default `false` +- `icon-position` (VARIANT): null | prefix | postfix, default `null` +- `icon-only` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `icon-only` (Figma) ↔ `iconOnly` (Angular) | enum | именование отличается (Figma `icon-only` — kebab, Angular `iconOnly` — camelCase); значения: false \| true; ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | +| `icon-position` (Figma) ↔ `iconPosition` (Angular) | enum / `ExtraButtonIconPosition` | именование отличается (Figma `icon-position` — kebab, Angular `iconPosition` — camelCase); значения: null \| prefix \| postfix; дефолт совпадает: `null` | +| `rounded` (Figma) ↔ `rounded` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraButtonSize` | именование совпадает; значения: xlarge \| large \| base \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | +| `variant` (Figma) ↔ `variant` (Angular) | enum / `ExtraButtonVariant` | именование совпадает; значения: primary \| secondary \| tertiary \| text \| link; дефолт совпадает: `primary` | + +### Button.Danger · Figma nodeId `162:5457` · Button · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=162-5457) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-button` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1983` +- `text-button` (TEXT), default `Button` +- `variant` (VARIANT): basic | outlined | text, default `basic` +- `state` (VARIANT): default | focus | hover | active | disabled | loading, default `default` +- `size` (VARIANT): xlarge | large | base | small, default `xlarge` +- `rounded` (VARIANT): false | true, default `false` +- `icon-position` (VARIANT): null | prefix | postfix, default `null` +- `icon-only` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `icon-only` (Figma) ↔ `iconOnly` (Angular) | enum | именование отличается (Figma `icon-only` — kebab, Angular `iconOnly` — camelCase); значения: false \| true; ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | +| `icon-position` (Figma) ↔ `iconPosition` (Angular) | enum / `ExtraButtonIconPosition` | именование отличается (Figma `icon-position` — kebab, Angular `iconPosition` — camelCase); значения: null \| prefix \| postfix; дефолт совпадает: `null` | +| `rounded` (Figma) ↔ `rounded` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraButtonSize` | именование совпадает; значения: xlarge \| large \| base \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | +| `variant` (Figma) ↔ `variant` (Angular) | enum / `ExtraButtonVariant` | именование совпадает; значения: basic \| outlined \| text; ⚠️ дефолт отличается: Figma `basic` ↔ Angular `primary` | + +### Button.Info · Figma nodeId `429:9674` · Button · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=429-9674) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-button` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1973` +- `text-button` (TEXT), default `Button` +- `variant` (VARIANT): basic | outlined | text, default `basic` +- `state` (VARIANT): default | focus | hover | active | disabled | loading, default `default` +- `size` (VARIANT): xlarge | large | base | small, default `xlarge` +- `rounded` (VARIANT): false | true, default `false` +- `icon-position` (VARIANT): null | prefix | postfix, default `null` +- `icon-only` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `icon-only` (Figma) ↔ `iconOnly` (Angular) | enum | именование отличается (Figma `icon-only` — kebab, Angular `iconOnly` — camelCase); значения: false \| true; ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | +| `icon-position` (Figma) ↔ `iconPosition` (Angular) | enum / `ExtraButtonIconPosition` | именование отличается (Figma `icon-position` — kebab, Angular `iconPosition` — camelCase); значения: null \| prefix \| postfix; дефолт совпадает: `null` | +| `rounded` (Figma) ↔ `rounded` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraButtonSize` | именование совпадает; значения: xlarge \| large \| base \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | +| `variant` (Figma) ↔ `variant` (Angular) | enum / `ExtraButtonVariant` | именование совпадает; значения: basic \| outlined \| text; ⚠️ дефолт отличается: Figma `basic` ↔ Angular `primary` | + +### Button.Success · Figma nodeId `429:8209` · Button · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=429-8209) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-button` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1987` +- `text-button` (TEXT), default `Button` +- `variant` (VARIANT): basic | outlined | text, default `basic` +- `state` (VARIANT): default | focus | hover | active | disabled | loading, default `default` +- `size` (VARIANT): xlarge | large | base | small, default `xlarge` +- `rounded` (VARIANT): false | true, default `false` +- `icon-position` (VARIANT): null | prefix | postfix, default `null` +- `icon-only` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `icon-only` (Figma) ↔ `iconOnly` (Angular) | enum | именование отличается (Figma `icon-only` — kebab, Angular `iconOnly` — camelCase); значения: false \| true; ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | +| `icon-position` (Figma) ↔ `iconPosition` (Angular) | enum / `ExtraButtonIconPosition` | именование отличается (Figma `icon-position` — kebab, Angular `iconPosition` — camelCase); значения: null \| prefix \| postfix; дефолт совпадает: `null` | +| `rounded` (Figma) ↔ `rounded` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraButtonSize` | именование совпадает; значения: xlarge \| large \| base \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | +| `variant` (Figma) ↔ `variant` (Angular) | enum / `ExtraButtonVariant` | именование совпадает; значения: basic \| outlined \| text; ⚠️ дефолт отличается: Figma `basic` ↔ Angular `primary` | + +### Button.Warning · Figma nodeId `429:6741` · Button · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=429-6741) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-button` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1977` +- `text-button` (TEXT), default `Button` +- `variant` (VARIANT): basic | outlined | text, default `basic` +- `state` (VARIANT): default | focus | hover | active | disabled | loading, default `default` +- `size` (VARIANT): xlarge | large | base | small, default `xlarge` +- `rounded` (VARIANT): false | true, default `false` +- `icon-position` (VARIANT): null | prefix | postfix, default `null` +- `icon-only` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `icon-only` (Figma) ↔ `iconOnly` (Angular) | enum | именование отличается (Figma `icon-only` — kebab, Angular `iconOnly` — camelCase); значения: false \| true; ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | +| `icon-position` (Figma) ↔ `iconPosition` (Angular) | enum / `ExtraButtonIconPosition` | именование отличается (Figma `icon-position` — kebab, Angular `iconPosition` — camelCase); значения: null \| prefix \| postfix; дефолт совпадает: `null` | +| `rounded` (Figma) ↔ `rounded` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraButtonSize` | именование совпадает; значения: xlarge \| large \| base \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | +| `variant` (Figma) ↔ `variant` (Angular) | enum / `ExtraButtonVariant` | именование совпадает; значения: basic \| outlined \| text; ⚠️ дефолт отличается: Figma `basic` ↔ Angular `primary` | + +### _❌Button.Badge · Figma nodeId `205:1453` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=205-1453) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `size` (VARIANT): xlarge | large | base | small, default `xlarge` +- `dot-badge` (VARIANT): false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraButtonSize` | именование совпадает; значения: xlarge \| large \| base \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | + +### _Button · Figma nodeId `14456:3003` · Develop · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=14456-3003) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-card.md b/docs/api-alignment/api-alignment-card.md new file mode 100644 index 00000000..9ee13aa8 --- /dev/null +++ b/docs/api-alignment/api-alignment-card.md @@ -0,0 +1,48 @@ +# card + +Angular: `src/lib/components/card` — `ExtraCardComponent` +Figma-узлов: 1 — [Card](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1213-4134) + +## Для разработчиков (Angular API) + +**`ExtraCardComponent`** (`extra-card`, `src/lib/components/card/card.component.ts`) + +- Inputs: + - `@Input() title = ''` + - `@Input() subtitle = ''` + - `@Input() overlay = false` +- Слоты (ng-template): + - `@ContentChild(PrimeTemplate) templates` + +## Соответствие по Figma-узлам + +### Card · Figma nodeId `1213:4134` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1213-4134) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-footer` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-layout-body` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `↳ change-img` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-title` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-caption` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(PrimeTemplate)` → `templates` | + +#### Для дизайнеров (Figma API) + +- `↳ change-layout-footer` (INSTANCE_SWAP), default `13110:31679` +- `show-footer` (BOOLEAN), default `True` +- `change-layout-body` (INSTANCE_SWAP), default `13110:31679` +- `↳ change-img` (INSTANCE_SWAP), default `13110:31679` +- `show-caption` (BOOLEAN), default `True` +- `show-header` (BOOLEAN), default `True` +- `text-title` (TEXT), default `Title` +- `text-caption` (TEXT), default `Caption` +- `overlay` (VARIANT): true | false, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `overlay` (Figma) ↔ `overlay` (Angular) | enum | именование совпадает; значения: true \| false; ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | diff --git a/docs/api-alignment/api-alignment-carousel.md b/docs/api-alignment/api-alignment-carousel.md new file mode 100644 index 00000000..84462f76 --- /dev/null +++ b/docs/api-alignment/api-alignment-carousel.md @@ -0,0 +1,79 @@ +# carousel + +Angular: `src/lib/components/carousel` — `ExtraCarouselComponent` +Figma-узлов: 2 — [Carousel](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1187-1633), [Carousel.Indicator](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1187-1404) + +## Для разработчиков (Angular API) + +**`ExtraCarouselComponent`** (`extra-carousel`, `src/lib/components/carousel/carousel.component.ts`) + +- Inputs: + - `@Input() value: any[] = []` + - `@Input() numVisible = 1` + - `@Input() numScroll = 1` + - `@Input() circular = false` + - `@Input() orientation: ExtraCarouselOrientation = 'horizontal'` + - `@Input() autoplayInterval = 0` + - `@Input() showIndicators = true` + - `@Input() showNavigators = true` + - `@Input() page = 0` + - `@Input() responsiveOptions: ExtraCarouselResponsiveOptions[] | undefined` + - `@Input() verticalViewPortHeight = '300px'` +- Outputs: + - `@Output() onPage: ExtraCarouselPageEvent` +- Слоты (ng-template): + - `@ContentChild(ExtraCarouselItemDirective, read: TemplateRef) itemTemplate` + - `@ContentChild(ExtraCarouselHeaderDirective, read: TemplateRef) headerTemplate` + - `@ContentChild(ExtraCarouselFooterDirective, read: TemplateRef) footerTemplate` + +- Директивы: + - `ExtraCarouselItemDirective` (`[extraCarouselItem]`) + - `ExtraCarouselHeaderDirective` (`[extraCarouselHeader]`) + - `ExtraCarouselFooterDirective` (`[extraCarouselFooter]`) + +## Соответствие по Figma-узлам + +### Carousel · Figma nodeId `1187:1633` · Media · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1187-1633) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout-content` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `↳ change-layout-indicators` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraCarouselItemDirective)` → `itemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraCarouselHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraCarouselFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout-content` (INSTANCE_SWAP), default `13110:38261` +- `↳ change-layout-indicators` (INSTANCE_SWAP), default `13110:38261` +- `show-button-nav` (BOOLEAN), default `True` +- `show-indicators` (BOOLEAN), default `True` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `show-indicators` (Figma) ↔ `showIndicators` (Angular) | boolean | именование отличается (Figma `show-indicators` — kebab, Angular `showIndicators` — camelCase); дефолт совпадает: `true` | + +### Carousel.Indicator · Figma nodeId `1187:1404` · Media · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1187-1404) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraCarouselItemDirective)` → `itemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraCarouselHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraCarouselFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-checkbox.md b/docs/api-alignment/api-alignment-checkbox.md new file mode 100644 index 00000000..f6a12243 --- /dev/null +++ b/docs/api-alignment/api-alignment-checkbox.md @@ -0,0 +1,52 @@ +# checkbox + +Angular: `src/lib/components/checkbox` — `ExtraCheckboxComponent` +Figma-узлов: 1 — [Checkbox](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16-13529) + +## Для разработчиков (Angular API) + +**`ExtraCheckboxComponent`** (`extra-checkbox`, `src/lib/components/checkbox/checkbox.component.ts`) + +- Inputs: + - `@Input() value: any = null` + - `@Input() binary = false` + - `@Input() disabled = false` + - `@Input() readonly = false` + - `@Input() indeterminate = false` + - `@Input() invalid = false` + - `@Input() size: ExtraCheckboxSize = 'base'` + - `@Input() variant: ExtraCheckboxVariant = 'outlined'` + - `@Input() checkboxIcon: string | undefined = undefined` + - `@Input() ariaLabel: string | undefined = undefined` + - `@Input() ariaLabelledBy: string | undefined = undefined` + - `@Input() tabindex: number | undefined = undefined` + - `@Input() inputId: string | undefined = undefined` + - `@Input() trueValue: any = true` + - `@Input() falseValue: any = false` + - `@Input() autofocus = false` +- Outputs: + - `@Output() onChange: ExtraCheckboxChangeEvent` + - `@Output() onFocus: Event` + - `@Output() onBlur: Event` + +## Соответствие по Figma-узлам + +### Checkbox · Figma nodeId `16:13529` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16-13529) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | focus | hover | danger | disabled, default `default` +- `checked` (VARIANT): false | true, default `false` +- `indeterminate` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `indeterminate` (Figma) ↔ `indeterminate` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | diff --git a/docs/api-alignment/api-alignment-chip.md b/docs/api-alignment/api-alignment-chip.md new file mode 100644 index 00000000..57f2b72a --- /dev/null +++ b/docs/api-alignment/api-alignment-chip.md @@ -0,0 +1,71 @@ +# chip + +Angular: `src/lib/components/chip` — `ExtraChipComponent` +Figma-узлов: 2 — [Chip](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=312-1298), [_❌Chips](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=312-1306) + +## Для разработчиков (Angular API) + +**`ExtraChipComponent`** (`extra-chip`, `src/lib/components/chip/chip.component.ts`) + +- Inputs: + - `@Input() label = ''` + - `@Input() icon = ''` + - `@Input() removable = false` + - `@Input() disabled = false` +- Outputs: + - `@Output() onRemove: MouseEvent` + +## Соответствие по Figma-узлам + +### Chip · Figma nodeId `312:1298` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=312-1298) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-chip` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `show-close` (BOOLEAN), default `True` +- `text-chip` (TEXT), default `Chip` +- `state` (VARIANT): default | focus | disabled, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### _❌Chips · Figma nodeId `312:1306` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=312-1306) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-chips` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-input` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-float-label` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-text-input` (BOOLEAN), default `True` +- `show-chips` (BOOLEAN), default `True` +- `↳ change-layout-chips` (INSTANCE_SWAP), default `13110:31679` +- `text-input` (TEXT), default `Chips` +- `text-placeholder` (TEXT), default `Placeholder` +- `show-clear` (BOOLEAN), default `True` +- `text-float-label` (TEXT), default `FloatLabel` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `has-placeholder` (VARIANT): true | false, default `true` +- `has-floatlabel` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-confirm-dialog.md b/docs/api-alignment/api-alignment-confirm-dialog.md new file mode 100644 index 00000000..f6c9667b --- /dev/null +++ b/docs/api-alignment/api-alignment-confirm-dialog.md @@ -0,0 +1,44 @@ +# confirm-dialog + +Angular: `src/lib/components/confirm-dialog` — `ExtraConfirmDialogComponent` +Figma-узлов: 1 — [ConfirmDialog](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=520-6928) + +## Для разработчиков (Angular API) + +**`ExtraConfirmDialogComponent`** (`extra-confirm-dialog`, `src/lib/components/confirm-dialog/confirm-dialog.component.ts`) + +- Inputs: + - `@Input() key = ''` + - `@Input() size: ExtraConfirmDialogSize = 'default'` + - `@Input() severity: ExtraConfirmDialogSeverity = 'default'` +- Слоты (ng-template): + - `@ContentChild(ExtraConfirmDialogHeaderDirective, read: TemplateRef) headerTemplate` + - `@ContentChild(ExtraConfirmDialogFooterDirective, read: TemplateRef) footerTemplate` + +- Директивы: + - `ExtraConfirmDialogHeaderDirective` (`[extraConfirmDialogHeader]`) + - `ExtraConfirmDialogFooterDirective` (`[extraConfirmDialogFooter]`) + +## Соответствие по Figma-узлам + +### ConfirmDialog · Figma nodeId `520:6928` · Overlay · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=520-6928) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraConfirmDialogHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraConfirmDialogFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `18841:12539` +- `show-header` (BOOLEAN), default `True` +- `severity` (VARIANT): danger | warning | success | info | help, default `danger` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `severity` (Figma) ↔ `severity` (Angular) | enum / `ExtraConfirmDialogSeverity` | именование совпадает; значения: danger \| warning \| success \| info \| help; ⚠️ дефолт отличается: Figma `danger` ↔ Angular `default` | diff --git a/docs/api-alignment/api-alignment-date-picker.md b/docs/api-alignment/api-alignment-date-picker.md new file mode 100644 index 00000000..cd9e7e0d --- /dev/null +++ b/docs/api-alignment/api-alignment-date-picker.md @@ -0,0 +1,134 @@ +# date-picker + +Angular: `src/lib/components/date-picker` — `ExtraDatePickerComponent` +Figma-узлов: 4 — [DatePicker.Panel](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=412-2165), [DatePicker](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=431-3069), [DatePicker.Date](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=398-2226), [DatePicker.TimePicker](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=456-3180) + +## Для разработчиков (Angular API) + +**`ExtraDatePickerComponent`** (`extra-date-picker`, `src/lib/components/date-picker/date-picker.component.ts`) + +- Inputs: + - `@Input() dateFormat = 'dd.mm.yy'` + - `@Input() selectionMode: ExtraDatePickerSelectionMode = 'single'` + - `@Input() size: ExtraDatePickerSize = 'medium'` + - `@Input() showIcon = true` + - `@Input() iconDisplay: ExtraDatePickerIconDisplay = 'input'` + - `@Input() inline = false` + - `@Input() showButtonBar = false` + - `@Input() showTime = false` + - `@Input() hourFormat = '24'` + - `@Input() showClear = false` + - `@Input() placeholder: string | undefined = undefined` + - `@Input() readonly = false` + - `@Input() invalid = false` + - `@Input() minDate: Date | undefined = undefined` + - `@Input() maxDate: Date | undefined = undefined` + - `@Input() view: 'date' | 'month' | 'year' = 'date'` + - `@Input() showOtherMonths = true` + - `@Input() selectOtherMonths = false` +- Outputs: + - `@Output() onSelect: Date` + - `@Output() onMonthChange: any` + - `@Output() onYearChange: any` + - `@Output() onClear: any` + +## Соответствие по Figma-узлам + +### DatePicker.Panel · Figma nodeId `412:2165` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=412-2165) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `show-footer` (BOOLEAN), default `True` +- `show-timepicker` (BOOLEAN), default `True` +- `datepicker` (VARIANT): day | month | year | time, default `day` +- `disabled` (VARIANT): false | true, default `false` +- `overlay` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DatePicker · Figma nodeId `431:3069` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=431-3069) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-day` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-month` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-year` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-hours` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-minutes` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-float-label` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-clear` (BOOLEAN), default `True` +- `show-input-text` (BOOLEAN), default `True` +- `↳ show-date` (BOOLEAN), default `True` +- `↳ show-time` (BOOLEAN), default `True` +- `text-placeholder` (TEXT), default `Calendar` +- `text-day` (TEXT), default `day` +- `text-month` (TEXT), default `month` +- `text-year` (TEXT), default `year` +- `text-hours` (TEXT), default `00` +- `text-minutes` (TEXT), default `00` +- `text-float-label` (TEXT), default `FloatLabel` +- `is-required` (BOOLEAN), default `True` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `has-placeholder` (VARIANT): true | false, default `true` +- `has-floatlabel` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `show-clear` (Figma) ↔ `showClear` (Angular) | boolean | именование отличается (Figma `show-clear` — kebab, Angular `showClear` — camelCase); ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | +| `↳ show-time` (Figma) ↔ `showTime` (Angular) | boolean | именование отличается (Figma `↳ show-time` — kebab, Angular `showTime` — camelCase); ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | + +### DatePicker.Date · Figma nodeId `398:2226` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=398-2226) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-cell` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-cell` (TEXT), default `0` +- `state` (VARIANT): default | hover | disabled, default `default` +- `cell` (VARIANT): default | today | selected, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DatePicker.TimePicker · Figma nodeId `456:3180` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=456-3180) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-dialog.md b/docs/api-alignment/api-alignment-dialog.md new file mode 100644 index 00000000..4d54144b --- /dev/null +++ b/docs/api-alignment/api-alignment-dialog.md @@ -0,0 +1,82 @@ +# dialog + +Angular: `src/lib/components/dialog` — `ExtraDialogComponent` +Figma-узлов: 2 — [Dialog](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=520-6620), [Modal window](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=17604-90243) + +## Для разработчиков (Angular API) + +**`ExtraDialogComponent`** (`extra-dialog`, `src/lib/components/dialog/dialog.component.ts`) + +- Inputs: + - `@Input() header = ''` + - `@Input() visible = false` + - `@Input() modal = true` + - `@Input() size: ExtraDialogSize = 'default'` + - `@Input() dismissableMask = false` + - `@Input() closeOnEscape = true` + - `@Input() showHeader = true` + - `@Input() focusOnShow = false` + - `@Input() appendTo: string = 'body'` +- Outputs: + - `@Output() visibleChange: boolean` +- Слоты (ng-template): + - `@ContentChild(ExtraDialogHeaderDirective, read: TemplateRef) headerTemplate` + - `@ContentChild(ExtraDialogFooterDirective, read: TemplateRef) footerTemplate` +- Проекция: `` + +- Директивы: + - `ExtraDialogHeaderDirective` (`[extraDialogHeader]`) + - `ExtraDialogFooterDirective` (`[extraDialogFooter]`) + +## Соответствие по Figma-узлам + +### Dialog · Figma nodeId `520:6620` · Overlay · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=520-6620) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-extra` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-layout-body` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraDialogHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraDialogFooterDirective)` → `footerTemplate` | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `↳ show-extra` (BOOLEAN), default `True` +- `↳ change-layout-extra` (INSTANCE_SWAP), default `13110:31679` +- `change-layout-body` (INSTANCE_SWAP), default `18841:12539` +- `show-footer` (BOOLEAN), default `True` +- `↳ show-close` (BOOLEAN), default `True` +- `show-maximizable` (BOOLEAN), default `True` +- `show-header` (BOOLEAN), default `True` +- `modal` (VARIANT): true | false, default `true` +- `maximizable` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `modal` (Figma) ↔ `modal` (Angular) | enum | именование совпадает; значения: true \| false; дефолт совпадает: `true` | +| `show-header` (Figma) ↔ `showHeader` (Angular) | boolean | именование отличается (Figma `show-header` — kebab, Angular `showHeader` — camelCase); дефолт совпадает: `true` | + +### Modal window · Figma nodeId `17604:90243` · Develop · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=17604-90243) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraDialogHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraDialogFooterDirective)` → `footerTemplate` | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-divider.md b/docs/api-alignment/api-alignment-divider.md new file mode 100644 index 00000000..d361b2c0 --- /dev/null +++ b/docs/api-alignment/api-alignment-divider.md @@ -0,0 +1,42 @@ +# divider + +Angular: `src/lib/components/divider` — `ExtraDividerComponent` +Figma-узлов: 1 — [Divider](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=33-1543) + +## Для разработчиков (Angular API) + +**`ExtraDividerComponent`** (`extra-divider`, `src/lib/components/divider/divider.component.ts`) + +- Inputs: + - `@Input() layout: ExtraDividerLayout = 'horizontal'` + - `@Input() type: ExtraDividerType = 'solid'` + - `@Input() align: ExtraDividerAlign = 'center'` +- Проекция: `` + +## Соответствие по Figma-узлам + +### Divider · Figma nodeId `33:1543` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=33-1543) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `show-content` (BOOLEAN), default `True` +- `↳ show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1987` +- `layout` (VARIANT): horizontal | vertical, default `horizontal` +- `type` (VARIANT): solid | dash, default `solid` +- `align` (VARIANT): left | right | center | top | bottom, default `left` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `align` (Figma) ↔ `align` (Angular) | enum / `ExtraDividerAlign` | именование совпадает; значения: left \| right \| center \| top \| bottom; ⚠️ дефолт отличается: Figma `left` ↔ Angular `center` | +| `layout` (Figma) ↔ `layout` (Angular) | enum / `ExtraDividerLayout` | именование совпадает; значения: horizontal \| vertical; дефолт совпадает: `horizontal` | +| `type` (Figma) ↔ `type` (Angular) | enum / `ExtraDividerType` | именование совпадает; значения: solid \| dash; дефолт совпадает: `solid` | diff --git a/docs/api-alignment/api-alignment-drawer.md b/docs/api-alignment/api-alignment-drawer.md new file mode 100644 index 00000000..e93354eb --- /dev/null +++ b/docs/api-alignment/api-alignment-drawer.md @@ -0,0 +1,64 @@ +# drawer + +Angular: `src/lib/components/drawer` — `ExtraDrawerComponent` +Figma-узлов: 1 — [Drawer](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=536-340) + +## Для разработчиков (Angular API) + +**`ExtraDrawerComponent`** (`extra-drawer`, `src/lib/components/drawer/drawer.component.ts`) + +- Inputs: + - `@Input() visible = false` + - `@Input() header: string | undefined` + - `@Input() position: 'left' | 'right' | 'top' | 'bottom' = 'right'` + - `@Input() size: 'default' | 'sm' | 'lg' | 'xlg' = 'default'` + - `@Input() modal = true` + - `@Input() fullScreen = false` + - `@Input() dismissible = true` + - `@Input() showCloseIcon = true` + - `@Input() closeOnEscape = true` + - `@Input() blockScroll = true` +- Outputs: + - `@Output() visibleChange: boolean` + - `@Output() onShow: void` + - `@Output() onHide: void` +- Слоты (ng-template): + - `@ContentChild(ExtraDrawerHeaderDirective, read: TemplateRef) headerTemplate` + - `@ContentChild(ExtraDrawerFooterDirective, read: TemplateRef) footerTemplate` +- Проекция: `` + +- Директивы: + - `ExtraDrawerHeaderDirective` (`[extraDrawerHeader]`) + - `ExtraDrawerFooterDirective` (`[extraDrawerFooter]`) + +## Соответствие по Figma-узлам + +### Drawer · Figma nodeId `536:340` · Overlay · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=536-340) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-extra` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-layout-body` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraDrawerHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraDrawerFooterDirective)` → `footerTemplate` | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `↳ show-extra` (BOOLEAN), default `True` +- `↳ change-layout-extra` (INSTANCE_SWAP), default `13110:31679` +- `show-footer` (BOOLEAN), default `True` +- `change-layout-body` (INSTANCE_SWAP), default `18841:12539` +- `↳ show-back` (BOOLEAN), default `True` +- `show-header` (BOOLEAN), default `True` +- `modal` (VARIANT): false | true, default `true` +- `position` (VARIANT): left | right | top | bottom, default `left` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `modal` (Figma) ↔ `modal` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `true` | +| `position` (Figma) ↔ `position` (Angular) | enum / `'left' \| 'right' \| 'top' \| 'bottom'` | именование совпадает; значения: left \| right \| top \| bottom; ⚠️ дефолт отличается: Figma `left` ↔ Angular `right` | diff --git a/docs/api-alignment/api-alignment-fileupload.md b/docs/api-alignment/api-alignment-fileupload.md new file mode 100644 index 00000000..0d7e6ca1 --- /dev/null +++ b/docs/api-alignment/api-alignment-fileupload.md @@ -0,0 +1,95 @@ +# fileupload + +Angular: `src/lib/components/fileupload` — `ExtraFileUploadComponent` +Figma-узлов: 3 — [FileUpload](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1185-283), [FileUpload.Drag&Drop](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1353-2520), [Fileupload.File](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15712-82195) + +## Для разработчиков (Angular API) + +**`ExtraFileUploadComponent`** (`extra-fileupload`, `src/lib/components/fileupload/fileupload.component.ts`) + +- Inputs: + - `@Input() name = 'files[]'` + - `@Input() url = '/api/upload'` + - `@Input() multiple = true` + - `@Input() accept = 'image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'` + - `@Input() maxFileSize = 1000000` + - `@Input() fileLimit: number | undefined = undefined` + - `@Input() disabled = false` + - `@Input() dropzoneTitle = 'Чтобы загрузить файлы кликните или перетащите их в эту область'` + - `@Input() dropzoneCaption = 'Можно загрузить не более 10 файлов размером 1 MB'` + - `@Input() invalidFileSizeMessageSummary = '{0}: Некорректный размер файла'` + - `@Input() invalidFileSizeMessageDetail = 'Максимальный размер — {0}'` + - `@Input() invalidFileTypeMessageSummary = '{0}: Некорректный тип файла'` + - `@Input() invalidFileTypeMessageDetail = 'Допустимые типы: {0}'` + - `@Input() invalidFileLimitMessageSummary = 'Превышен лимит файлов'` + - `@Input() invalidFileLimitMessageDetail = 'Максимум: {0}'` +- Outputs: + - `@Output() onSelectEvent: FileSelectEvent` + - `@Output() onRemoveEvent: FileRemoveEvent` + - `@Output() onClearEvent: void` + - `@Output() onError: FileUploadErrorEvent` + - `@Output() onUpload: FileUploadHandlerEvent` + +## Соответствие по Figma-узлам + +### FileUpload · Figma nodeId `1185:283` · File · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1185-283) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-list` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-body` (BOOLEAN), default `True` +- `↳ show-message` (BOOLEAN), default `True` +- `↳ change-layout-list` (INSTANCE_SWAP), default `13110:19798` +- `↳ show-info` (BOOLEAN), default `True` +- `↳ show-button-send` (BOOLEAN), default `True` +- `show-header` (BOOLEAN), default `True` +- `show-progress-bar` (BOOLEAN), default `True` +- `drag-and-drop` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### FileUpload.Drag&Drop · Figma nodeId `1353:2520` · File · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1353-2520) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-icon` (INSTANCE_SWAP), default `1353:2452` +- `state` (VARIANT): default | hover, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Fileupload.File · Figma nodeId `15712:82195` · File · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15712-82195) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `show-divider` (BOOLEAN), default `True` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-galleria.md b/docs/api-alignment/api-alignment-galleria.md new file mode 100644 index 00000000..d6f3162a --- /dev/null +++ b/docs/api-alignment/api-alignment-galleria.md @@ -0,0 +1,179 @@ +# galleria + +Angular: `src/lib/components/galleria` — `ExtraGalleriaComponent` +Figma-узлов: 5 — [Galleria](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1200-385), [Galleria.Indicator](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1199-190), [Galleria.ThumbnailImage](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1202-1138), [Galleria.NavigatorButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1199-189), [Galleria.ThumbnailButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1202-56) + +## Для разработчиков (Angular API) + +**`ExtraGalleriaComponent`** (`extra-galleria`, `src/lib/components/galleria/galleria.component.ts`) + +- Inputs: + - `@Input() value: ExtraGalleriaItem[] = []` + - `@Input() numVisible = 3` + - `@Input() showItemNavigators = false` + - `@Input() showItemNavigatorsOnHover = false` + - `@Input() showThumbnails = true` + - `@Input() showThumbnailNavigators = true` + - `@Input() showIndicators = false` + - `@Input() showIndicatorsOnItem = false` + - `@Input() circular = false` + - `@Input() autoPlay = false` + - `@Input() transitionInterval = 4000` + - `@Input() fullScreen = false` + - `@Input() visible = false` + - `@Input() containerClass: string | undefined = undefined` + - `@Input() containerStyle: Record | undefined = undefined` + - `@Input() responsiveOptions: any[] | undefined = undefined` +- Outputs: + - `@Output() activeIndexChange: number` + - `@Output() visibleChange: boolean` +- Слоты (ng-template): + - `@ContentChild(ExtraGalleriaItemDirective, read: TemplateRef) itemTemplate` + - `@ContentChild(ExtraGalleriaThumbnailDirective, read: TemplateRef) thumbnailTemplate` + - `@ContentChild(ExtraGalleriaCaptionDirective, read: TemplateRef) captionTemplate` + - `@ContentChild(ExtraGalleriaIndicatorDirective, read: TemplateRef) indicatorTemplate` + - `@ContentChild(ExtraGalleriaHeaderDirective, read: TemplateRef) headerTemplate` + - `@ContentChild(ExtraGalleriaFooterDirective, read: TemplateRef) footerTemplate` + +- Директивы: + - `ExtraGalleriaItemDirective` (`[extraGalleriaItem]`) + - `ExtraGalleriaThumbnailDirective` (`[extraGalleriaThumbnail]`) + - `ExtraGalleriaCaptionDirective` (`[extraGalleriaCaption]`) + - `ExtraGalleriaIndicatorDirective` (`[extraGalleriaIndicator]`) + - `ExtraGalleriaHeaderDirective` (`[extraGalleriaHeader]`) + - `ExtraGalleriaFooterDirective` (`[extraGalleriaFooter]`) + +## Соответствие по Figma-узлам + +### Galleria · Figma nodeId `1200:385` · Media · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1200-385) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-indicators` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `↳ change-layout-thumbnail` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaItemDirective)` → `itemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaThumbnailDirective)` → `thumbnailTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaCaptionDirective)` → `captionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaIndicatorDirective)` → `indicatorTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-button-nav` (BOOLEAN), default `True` +- `↳ show-caption` (BOOLEAN), default `True` +- `↳ change-layout-indicators` (INSTANCE_SWAP), default `13110:38261` +- `show-container-indicator` (BOOLEAN), default `True` +- `↳ show-indicators` (BOOLEAN), default `True` +- `show-container-thumbnail` (BOOLEAN), default `True` +- `↳ show-button-thumbnail` (BOOLEAN), default `True` +- `↳ change-layout-thumbnail` (INSTANCE_SWAP), default `13110:35196` +- `show-title` (BOOLEAN), default `True` +- `mask` (VARIANT): false | true, default `false` +- `orientation-image` (VARIANT): horizontal | vertical, default `horizontal` +- `position` (VARIANT): bottom | left, default `bottom` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `↳ show-indicators` (Figma) ↔ `showIndicators` (Angular) | boolean | именование отличается (Figma `↳ show-indicators` — kebab, Angular `showIndicators` — camelCase); ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | + +### Galleria.Indicator · Figma nodeId `1199:190` · Media · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1199-190) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaItemDirective)` → `itemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaThumbnailDirective)` → `thumbnailTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaCaptionDirective)` → `captionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaIndicatorDirective)` → `indicatorTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): background | active | hover, default `background` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Galleria.ThumbnailImage · Figma nodeId `1202:1138` · Media · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1202-1138) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaItemDirective)` → `itemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaThumbnailDirective)` → `thumbnailTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaCaptionDirective)` → `captionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaIndicatorDirective)` → `indicatorTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): hover | default, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Galleria.NavigatorButton · Figma nodeId `1199:189` · Media · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1199-189) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaItemDirective)` → `itemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaThumbnailDirective)` → `thumbnailTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaCaptionDirective)` → `captionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaIndicatorDirective)` → `indicatorTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-icon` (INSTANCE_SWAP), default `428:1959` +- `state` (VARIANT): default | hover | disabled, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Galleria.ThumbnailButton · Figma nodeId `1202:56` · Media · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1202-56) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaItemDirective)` → `itemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaThumbnailDirective)` → `thumbnailTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaCaptionDirective)` → `captionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaIndicatorDirective)` → `indicatorTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraGalleriaFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-icon` (INSTANCE_SWAP), default `428:1959` +- `state` (VARIANT): default | hover | disabled, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-inputgroup.md b/docs/api-alignment/api-alignment-inputgroup.md new file mode 100644 index 00000000..755e215f --- /dev/null +++ b/docs/api-alignment/api-alignment-inputgroup.md @@ -0,0 +1,62 @@ +# inputgroup + +Angular: `src/lib/components/inputgroup` — `ExtraInputGroupAddonComponent`, `ExtraInputGroupComponent` +Figma-узлов: 2 — [InputGroup](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=437-3505), [InputGroup.Addon](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=436-3089) + +## Для разработчиков (Angular API) + +**`ExtraInputGroupAddonComponent`** (`extra-input-group-addon`, `src/lib/components/inputgroup/input-group-addon.component.ts`) + +- Проекция: `` + +**`ExtraInputGroupComponent`** (`extra-input-group`, `src/lib/components/inputgroup/input-group.component.ts`) + +- Inputs: + - `@Input() size: ExtraInputGroupSize = 'base'` +- Проекция: `` + +## Соответствие по Figma-узлам + +### InputGroup · Figma nodeId `437:3505` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=437-3505) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-field` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `` | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `change-field` (INSTANCE_SWAP), default `15:13443` +- `addon-position` (VARIANT): left | right | left & right, default `left` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### InputGroup.Addon · Figma nodeId `436:3089` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=436-3089) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `` | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `change-icon` (INSTANCE_SWAP), default `428:2003` +- `disabled` (VARIANT): false | true, default `false` +- `position` (VARIANT): left | right, default `left` +- `type` (VARIANT): text | icon, default `icon` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-inputmask.md b/docs/api-alignment/api-alignment-inputmask.md new file mode 100644 index 00000000..b8174351 --- /dev/null +++ b/docs/api-alignment/api-alignment-inputmask.md @@ -0,0 +1,56 @@ +# inputmask + +Angular: `src/lib/components/inputmask` — `ExtraInputMaskComponent` +Figma-узлов: 1 — [InputMask](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=319-1690) + +## Для разработчиков (Angular API) + +**`ExtraInputMaskComponent`** (`extra-input-mask`, `src/lib/components/inputmask/inputmask.component.ts`) + +- Inputs: + - `@Input() mask = ''` + - `@Input() slotChar = '_'` + - `@Input() autoClear = true` + - `@Input() showClear = false` + - `@Input() unmask = false` + - `@Input() placeholder = ''` + - `@Input() size: ExtraInputMaskSize = 'base'` + - `@Input() readonly = false` + - `@Input() fluid = false` + - `@Input() characterPattern = '[A-Za-z]'` + - `@Input() keepBuffer = false` + - `@Input() autocomplete = ''` +- Outputs: + - `@Output() onComplete: void` + - `@Output() onFocusEvent: Event` + - `@Output() onBlurEvent: Event` + - `@Output() onInputEvent: Event` + - `@Output() onKeydownEvent: Event` + - `@Output() onClearEvent: void` + +## Соответствие по Figma-узлам + +### InputMask · Figma nodeId `319:1690` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=319-1690) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-input` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-clear` (BOOLEAN), default `True` +- `show-text-input` (BOOLEAN), default `True` +- `text-input` (TEXT), default `111-111-11-11` +- `text-placeholder` (TEXT), default `999-999-99-99` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `has-placeholder` (VARIANT): true | false, default `true` +- `has-floatlabel` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `show-clear` (Figma) ↔ `showClear` (Angular) | boolean | именование отличается (Figma `show-clear` — kebab, Angular `showClear` — camelCase); ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | diff --git a/docs/api-alignment/api-alignment-inputnumber.md b/docs/api-alignment/api-alignment-inputnumber.md new file mode 100644 index 00000000..e9adac95 --- /dev/null +++ b/docs/api-alignment/api-alignment-inputnumber.md @@ -0,0 +1,87 @@ +# inputnumber + +Angular: `src/lib/components/inputnumber` — `ExtraInputNumberComponent` +Figma-узлов: 2 — [InputNumber](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=320-1754), [InputNumber.Buttons](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=379-1695) + +## Для разработчиков (Angular API) + +**`ExtraInputNumberComponent`** (`extra-input-number`, `src/lib/components/inputnumber/inputnumber.component.ts`) + +- Inputs: + - `@Input() size: ExtraInputNumberSize = 'base'` + - `@Input() showButtons = false` + - `@Input() buttonLayout: ExtraInputNumberButtonLayout = 'stacked'` + - `@Input() mode = 'decimal'` + - `@Input() currency: string | undefined` + - `@Input() locale: string | undefined` + - `@Input() placeholder = ''` + - `@Input() readonly = false` + - `@Input() fluid = false` + - `@Input() min: number | undefined` + - `@Input() max: number | undefined` + - `@Input() step = 1` + - `@Input() prefix: string | undefined` + - `@Input() suffix: string | undefined` + - `@Input() minFractionDigits: number | undefined` + - `@Input() maxFractionDigits: number | undefined` + - `@Input() useGrouping = true` + - `@Input() incrementButtonIcon: string | undefined` + - `@Input() decrementButtonIcon: string | undefined` +- Outputs: + - `@Output() onInput: { value: number | null }` + +## Соответствие по Figma-узлам + +### InputNumber · Figma nodeId `320:1754` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=320-1754) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ text-prefix` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `↳ text-suffix` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-inputnumber` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-float-label` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-clear` (BOOLEAN), default `True` +- `show-text-prefix` (BOOLEAN), default `True` +- `↳ text-prefix` (TEXT), default `₽` +- `show-text-suffix` (BOOLEAN), default `True` +- `↳ text-suffix` (TEXT), default `₽` +- `show-text-input` (BOOLEAN), default `True` +- `text-inputnumber` (TEXT), default `InputNumber` +- `text-placeholder` (TEXT), default `Placeholder` +- `text-float-label` (TEXT), default `FloatLabel` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `buttons` (VARIANT): false | true, default `false` +- `has-floatlabel` (VARIANT): true | false, default `false` +- `has-placeholder` (VARIANT): true | false, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### InputNumber.Buttons · Figma nodeId `379:1695` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=379-1695) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-icon` (INSTANCE_SWAP), default `428:2001` +- `state` (VARIANT): default | hover | disabled, default `default` +- `type` (VARIANT): up | down, default `down` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-inputotp.md b/docs/api-alignment/api-alignment-inputotp.md new file mode 100644 index 00000000..0eaffbb0 --- /dev/null +++ b/docs/api-alignment/api-alignment-inputotp.md @@ -0,0 +1,61 @@ +# inputotp + +Angular: `src/lib/components/inputotp` — `ExtraInputOtpComponent` +Figma-узлов: 2 — [InputOtp](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=318-1373), [InputOtp.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=318-1315) + +## Для разработчиков (Angular API) + +**`ExtraInputOtpComponent`** (`extra-input-otp`, `src/lib/components/inputotp/inputotp.component.ts`) + +- Inputs: + - `@Input() length = 4` + - `@Input() mask = false` + - `@Input() integerOnly = false` + - `@Input() readonly = false` + - `@Input() size: ExtraInputOtpSize = 'base'` + - `@Input() tabindex: number | null = null` + - `@Input() autofocus = false` +- Outputs: + - `@Output() onChange: ExtraInputOtpChangeEvent` + - `@Output() onFocus: Event` + - `@Output() onBlur: Event` + +## Соответствие по Figma-узлам + +### InputOtp · Figma nodeId `318:1373` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=318-1373) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:34105` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### InputOtp.Item · Figma nodeId `318:1315` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=318-1315) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-number` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-text-input` (BOOLEAN), default `True` +- `text-number` (TEXT), default `0` +- `state` (VARIANT): default | hover | focus | danger | disabled, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-inputtext.md b/docs/api-alignment/api-alignment-inputtext.md new file mode 100644 index 00000000..5026ce16 --- /dev/null +++ b/docs/api-alignment/api-alignment-inputtext.md @@ -0,0 +1,46 @@ +# inputtext + +Angular: `src/lib/components/inputtext` — `ExtraInputTextComponent` +Figma-узлов: 1 — [InputText](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15-13444) + +## Для разработчиков (Angular API) + +**`ExtraInputTextComponent`** (`extra-input-text`, `src/lib/components/inputtext/inputtext.component.ts`) + +- Inputs: + - `@Input() placeholder = ''` + - `@Input() size: ExtraInputTextSize = 'base'` + - `@Input() readonly = false` + - `@Input() showClear = false` + - `@Input() fluid = false` +- Outputs: + - `@Output() onClear: void` + +## Соответствие по Figma-узлам + +### InputText · Figma nodeId `15:13444` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15-13444) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-input` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-float-label` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-clear` (BOOLEAN), default `True` +- `show-text-input` (BOOLEAN), default `True` +- `text-input` (TEXT), default `InputText` +- `text-placeholder` (TEXT), default `Placeholder` +- `text-float-label` (TEXT), default `FloatLabel` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `has-placeholder` (VARIANT): true | false, default `true` +- `has-floatlabel` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `show-clear` (Figma) ↔ `showClear` (Angular) | boolean | именование отличается (Figma `show-clear` — kebab, Angular `showClear` — camelCase); ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | diff --git a/docs/api-alignment/api-alignment-listbox.md b/docs/api-alignment/api-alignment-listbox.md new file mode 100644 index 00000000..668f3349 --- /dev/null +++ b/docs/api-alignment/api-alignment-listbox.md @@ -0,0 +1,203 @@ +# listbox + +Angular: `src/lib/components/listbox` — `ExtraListboxComponent` +Figma-узлов: 7 — [Listbox](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=349-2649), [Listbox.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=18170-14940), [Listbox.ItemCheckbox](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=352-3040), [Listbox.ItemGroup](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=349-1454), [Listbox.ItemIcon](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=349-1401), [Listbox.ItemTemplate](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=885-11612), [Listbox.Filter](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=348-1639) + +## Для разработчиков (Angular API) + +**`ExtraListboxComponent`** (`extra-listbox`, `src/lib/components/listbox/listbox.component.ts`) + +- Inputs: + - `@Input() options: any[] = []` + - `@Input() optionLabel = 'label'` + - `@Input() optionValue: string | undefined = undefined` + - `@Input() multiple = false` + - `@Input() filter = false` + - `@Input() filterPlaceHolder: string | undefined = undefined` + - `@Input() checkmark = false` + - `@Input() group = false` + - `@Input() optionGroupLabel: string | undefined = undefined` + - `@Input() optionGroupChildren: string | undefined = undefined` + - `@Input() scrollHeight = '200px'` + - `@Input() emptyMessage: string | undefined = undefined` +- Outputs: + - `@Output() onFocus: FocusEvent` + - `@Output() onBlur: FocusEvent` +- Слоты (ng-template): + - `@ContentChild(ExtraListboxItemDirective, read: TemplateRef) itemTemplate` + +- Директивы: + - `ExtraListboxItemDirective` (`[extraListboxItem]`) + +## Соответствие по Figma-узлам + +### Listbox · Figma nodeId `349:2649` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=349-2649) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraListboxItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:19798` +- `↳ show-checkbox` (BOOLEAN), default `True` +- `↳ show-close` (BOOLEAN), default `True` +- `↳ show-filter` (BOOLEAN), default `True` +- `state` (VARIANT): default | disabled, default `default` +- `empty` (VARIANT): false | true, default `false` +- `overlay` (VARIANT): false | true, default `false` +- `header` (VARIANT): true | false, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Listbox.Item · Figma nodeId `18170:14940` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=18170-14940) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraListboxItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-option` (TEXT), default `Option` +- `state` (VARIANT): default | hover | striped, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Listbox.ItemCheckbox · Figma nodeId `352:3040` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=352-3040) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraListboxItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-option` (TEXT), default `Option` +- `state` (VARIANT): default | hover | striped, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Listbox.ItemGroup · Figma nodeId `349:1454` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=349-1454) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-subtitle` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraListboxItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-subtitle` (TEXT), default `subtitle sm` +- `disabled` (VARIANT): false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Listbox.ItemIcon · Figma nodeId `349:1401` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=349-1401) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraListboxItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-option` (TEXT), default `Option` +- `state` (VARIANT): default | hover | striped, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Listbox.ItemTemplate · Figma nodeId `885:11612` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=885-11612) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-caption` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraListboxItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:2003` +- `show-caption` (BOOLEAN), default `True` +- `text-option` (TEXT), default `Option` +- `text-caption` (TEXT), default `caption` +- `state` (VARIANT): default | hover | striped, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Listbox.Filter · Figma nodeId `348:1639` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=348-1639) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-input` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraListboxItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1967` +- `show-icon` (BOOLEAN), default `True` +- `show-input-text` (BOOLEAN), default `True` +- `text-placeholder` (TEXT), default `Filter` +- `text-input` (TEXT), default `text input` +- `state` (VARIANT): default | hover | focus | danger | disabled, default `default` +- `has-placeholder` (VARIANT): true | false, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-megamenu.md b/docs/api-alignment/api-alignment-megamenu.md new file mode 100644 index 00000000..a5c6793f --- /dev/null +++ b/docs/api-alignment/api-alignment-megamenu.md @@ -0,0 +1,175 @@ +# megamenu + +Angular: `src/lib/components/megamenu` — `ExtraMegaMenuComponent` +Figma-узлов: 7 — [MegaMenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4401), [MegaMenu.Item.Group](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4408), [MegaMenu.ItemBase](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4410), [MegaMenu.ItemTemplate](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4450), [MegaMenu.MobileButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4508), [MegaMenu.Submenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4513), [_❌MegaMenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-5830) + +## Для разработчиков (Angular API) + +**`ExtraMegaMenuComponent`** (`extra-megamenu`, `src/lib/components/megamenu/megamenu.component.ts`) + +- Inputs: + - `@Input() model: ExtraMegaMenuItem[] = []` + - `@Input() orientation: ExtraMegaMenuOrientation = 'horizontal'` + - `@Input() breakpoint: string = '960px'` + - `@Input() scrollHeight: string = ''` + - `@Input() disabled: boolean = false` + - `@Input() ariaLabel: string | undefined = undefined` + - `@Input() ariaLabelledBy: string | undefined = undefined` + - `@Input() tabindex: number = 0` +- Слоты (ng-template): + - `@ContentChild(ExtraMegaMenuItemDirective, read: TemplateRef) itemTemplate` + +- Директивы: + - `ExtraMegaMenuItemDirective` (`[extraMegaMenuItem]`) + +## Соответствие по Figma-узлам + +### MegaMenu · Figma nodeId `16194:4401` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4401) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout-vertical` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-layout-horizontal` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMegaMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout-vertical` (INSTANCE_SWAP), default `13110:19798` +- `change-layout-horizontal` (INSTANCE_SWAP), default `13110:34042` +- `orientation` (VARIANT): horizontal | vertical | none, default `horizontal` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `orientation` (Figma) ↔ `orientation` (Angular) | enum / `ExtraMegaMenuOrientation` | именование совпадает; значения: horizontal \| vertical \| none; дефолт совпадает: `horizontal` | + +### MegaMenu.Item.Group · Figma nodeId `16194:4408` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4408) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMegaMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MegaMenu.ItemBase · Figma nodeId `16194:4410` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4410) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `postfix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMegaMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `postfix-icon-menu` (INSTANCE_SWAP), default `428:1959` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MegaMenu.ItemTemplate · Figma nodeId `16194:4450` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4450) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `prefix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `postfix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMegaMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `prefix-icon-menu` (INSTANCE_SWAP), default `428:1959` +- `postfix-icon-menu` (INSTANCE_SWAP), default `1079:3084` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false | active, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MegaMenu.MobileButton · Figma nodeId `16194:4508` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4508) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMegaMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | hover, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MegaMenu.Submenu · Figma nodeId `16194:4513` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4513) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMegaMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### _❌MegaMenu · Figma nodeId `882:5830` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-5830) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout-vertical` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-layout-horizontal` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMegaMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout-vertical` (INSTANCE_SWAP), default `13110:19798` +- `change-layout-horizontal` (INSTANCE_SWAP), default `13110:34042` +- `orientation` (VARIANT): horizontal | vertical | none, default `horizontal` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `orientation` (Figma) ↔ `orientation` (Angular) | enum / `ExtraMegaMenuOrientation` | именование совпадает; значения: horizontal \| vertical \| none; дефолт совпадает: `horizontal` | diff --git a/docs/api-alignment/api-alignment-menu.md b/docs/api-alignment/api-alignment-menu.md new file mode 100644 index 00000000..03e86f81 --- /dev/null +++ b/docs/api-alignment/api-alignment-menu.md @@ -0,0 +1,124 @@ +# menu + +Angular: `src/lib/components/menu` — `ExtraMenuComponent` +Figma-узлов: 5 — [Menu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16005-21803), [Menu.ItemBase](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16005-24594), [Menu.ItemTemplate](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16005-24612), [Menu.Submenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16005-25381), [_❌Menu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=884-6762) + +## Для разработчиков (Angular API) + +**`ExtraMenuComponent`** (`extra-menu`, `src/lib/components/menu/menu.component.ts`) + +- Inputs: + - `@Input() model: ExtraMenuModel[] = []` + - `@Input() popup = false` +- Слоты (ng-template): + - `@ContentChild(ExtraMenuItemDirective, read: TemplateRef) itemTemplate` + +- Директивы: + - `ExtraMenuItemDirective` (`[extraMenuItem]`) + +## Соответствие по Figma-узлам + +### Menu · Figma nodeId `16005:21803` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16005-21803) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `popup` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `popup` (Figma) ↔ `popup` (Angular) | enum | именование совпадает; значения: true \| false; дефолт совпадает: `false` | + +### Menu.ItemBase · Figma nodeId `16005:24594` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16005-24594) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Menu.ItemTemplate · Figma nodeId `16005:24612` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16005-24612) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `posfix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `posfix-icon-menu-item` (INSTANCE_SWAP), default `13498:25109` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Menu.Submenu · Figma nodeId `16005:25381` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16005-25381) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `Menuitem` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### _❌Menu · Figma nodeId `884:6762` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=884-6762) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenuItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:36319` +- `popup` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `popup` (Figma) ↔ `popup` (Angular) | enum | именование совпадает; значения: true \| false; дефолт совпадает: `false` | diff --git a/docs/api-alignment/api-alignment-menubar.md b/docs/api-alignment/api-alignment-menubar.md new file mode 100644 index 00000000..bd5df007 --- /dev/null +++ b/docs/api-alignment/api-alignment-menubar.md @@ -0,0 +1,182 @@ +# menubar + +Angular: `src/lib/components/menubar` — `ExtraMenubarComponent` +Figma-узлов: 8 — [Menubar](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4260), [Menubar.Item.Group](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4363), [Menubar.ItemBase](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4265), [Menubar.ItemTemplate](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4305), [Menubar.MobileButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4369), [Menubar.MobileIndent](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4367), [Menubar.Submenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4365), [_❌Menubar](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-5234) + +## Для разработчиков (Angular API) + +**`ExtraMenubarComponent`** (`extra-menubar`, `src/lib/components/menubar/menubar.component.ts`) + +- Inputs: + - `@Input() model: ExtraMenuItem[] = []` +- Слоты (ng-template): + - `@ContentChild(ExtraMenubarItemDirective, read: TemplateRef) itemTemplate` + +- Директивы: + - `ExtraMenubarItemDirective` (`[extraMenubarItem]`) + +## Соответствие по Figma-узлам + +### Menubar · Figma nodeId `16194:4260` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4260) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenubarItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:34042` +- `orientation` (VARIANT): horizontal | none, default `horizontal` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Menubar.Item.Group · Figma nodeId `16194:4363` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4363) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenubarItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Menubar.ItemBase · Figma nodeId `16194:4265` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4265) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `postfix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenubarItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `postfix-icon-menu-item` (INSTANCE_SWAP), default `428:1959` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Menubar.ItemTemplate · Figma nodeId `16194:4305` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4305) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `prefix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `postfix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenubarItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `prefix-icon-menu` (INSTANCE_SWAP), default `428:1959` +- `postfix-icon-menu` (INSTANCE_SWAP), default `1079:3084` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false | active, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Menubar.MobileButton · Figma nodeId `16194:4369` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4369) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenubarItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | hover, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Menubar.MobileIndent · Figma nodeId `16194:4367` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4367) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenubarItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Menubar.Submenu · Figma nodeId `16194:4365` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4365) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenubarItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### _❌Menubar · Figma nodeId `882:5234` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-5234) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraMenubarItemDirective)` → `itemTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:34042` +- `orientation` (VARIANT): horizontal | none, default `horizontal` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-message.md b/docs/api-alignment/api-alignment-message.md new file mode 100644 index 00000000..fe308223 --- /dev/null +++ b/docs/api-alignment/api-alignment-message.md @@ -0,0 +1,130 @@ +# message + +Angular: `src/lib/components/message` — `ExtraMessageComponent` +Figma-узлов: 4 — [Message](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15963-3163), [_Message.ButtonClose](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15963-3340), [_❌Message](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=560-490), [_Message.ButtonClose](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15957-3338) + +## Для разработчиков (Angular API) + +**`ExtraMessageComponent`** (`extra-message`, `src/lib/components/message/message.component.ts`) + +- Inputs: + - `@Input() severity: ExtraMessageSeverity = 'info'` + - `@Input() summary = ''` + - `@Input() detail = ''` + - `@Input() icon: string | undefined = undefined` + - `@Input() closable = false` + - `@Input() life: number | undefined = undefined` +- Outputs: + - `@Output() onClose: Event` +- Проекция: `` + +## Соответствие по Figma-узлам + +### Message · Figma nodeId `15963:3163` · Messages · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15963-3163) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-footer` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-info` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-success` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-warning` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-danger` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `↳ change-layout-body` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `show-close` (BOOLEAN), default `True` +- `show-caption` (BOOLEAN), default `True` +- `show-footer` (BOOLEAN), default `True` +- `↳ change-layout-footer` (INSTANCE_SWAP), default `13110:34042` +- `change-icon-info` (INSTANCE_SWAP), default `428:1973` +- `change-icon-success` (INSTANCE_SWAP), default `428:1987` +- `change-icon-warning` (INSTANCE_SWAP), default `428:1977` +- `change-icon-danger` (INSTANCE_SWAP), default `428:1983` +- `show-layout-body` (BOOLEAN), default `True` +- `↳ change-layout-body` (INSTANCE_SWAP), default `18841:12539` +- `severity` (VARIANT): info | success | warning | danger, default `info` +- `timer` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `severity` (Figma) ↔ `severity` (Angular) | enum / `ExtraMessageSeverity` | именование совпадает; значения: info \| success \| warning \| danger; дефолт совпадает: `info` | + +### _Message.ButtonClose · Figma nodeId `15963:3340` · Messages · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15963-3340) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `severity` (VARIANT): success | warn | danger | info, default `info` +- `state` (VARIANT): default | hover, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `severity` (Figma) ↔ `severity` (Angular) | enum / `ExtraMessageSeverity` | именование совпадает; значения: success \| warn \| danger \| info; дефолт совпадает: `info` | + +### _❌Message · Figma nodeId `560:490` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=560-490) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-footer` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-info` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-success` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-warning` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-danger` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `↳ change-layout-body` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `show-close` (BOOLEAN), default `True` +- `show-caption` (BOOLEAN), default `True` +- `show-footer` (BOOLEAN), default `True` +- `↳ change-layout-footer` (INSTANCE_SWAP), default `13110:34042` +- `change-icon-info` (INSTANCE_SWAP), default `428:1973` +- `change-icon-success` (INSTANCE_SWAP), default `428:1987` +- `change-icon-warning` (INSTANCE_SWAP), default `428:1977` +- `change-icon-danger` (INSTANCE_SWAP), default `428:1983` +- `show-layout-body` (BOOLEAN), default `True` +- `↳ change-layout-body` (INSTANCE_SWAP), default `18841:12539` +- `severity` (VARIANT): info | success | warning | danger, default `info` +- `toast` (VARIANT): true | false, default `false` +- `timer` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `severity` (Figma) ↔ `severity` (Angular) | enum / `ExtraMessageSeverity` | именование совпадает; значения: info \| success \| warning \| danger; дефолт совпадает: `info` | + +### _Message.ButtonClose · Figma nodeId `15957:3338` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15957-3338) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `severity` (VARIANT): success | warn | danger | info, default `info` +- `state` (VARIANT): default | hover, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `severity` (Figma) ↔ `severity` (Angular) | enum / `ExtraMessageSeverity` | именование совпадает; значения: success \| warn \| danger \| info; дефолт совпадает: `info` | diff --git a/docs/api-alignment/api-alignment-metergroup.md b/docs/api-alignment/api-alignment-metergroup.md new file mode 100644 index 00000000..27cbc5fa --- /dev/null +++ b/docs/api-alignment/api-alignment-metergroup.md @@ -0,0 +1,77 @@ +# metergroup + +Angular: `src/lib/components/metergroup` — `ExtraMeterGroupComponent` +Figma-узлов: 3 — [MeterGroup](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=222-1489), [MeterGroup.LabelIcon](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15909-10434), [MeterGroup.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=117-965) + +## Для разработчиков (Angular API) + +**`ExtraMeterGroupComponent`** (`extra-metergroup`, `src/lib/components/metergroup/metergroup.component.ts`) + +- Inputs: + - `@Input() value: ExtraMeterItem[] = []` + - `@Input() orientation: ExtraMeterGroupOrientation = 'horizontal'` + - `@Input() labelPosition: ExtraMeterGroupLabelPosition = 'end'` + - `@Input() labelOrientation: ExtraMeterGroupLabelOrientation = 'horizontal'` + +## Соответствие по Figma-узлам + +### MeterGroup · Figma nodeId `222:1489` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=222-1489) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `show-item-3` (BOOLEAN), default `True` +- `show-item-2` (BOOLEAN), default `True` +- `show-item-4` (BOOLEAN), default `True` +- `show-item-1` (BOOLEAN), default `True` +- `label-position` (VARIANT): start | end, default `end` +- `label-orientation` (VARIANT): horizontal | vertical, default `horizontal` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `label-orientation` (Figma) ↔ `labelOrientation` (Angular) | enum / `ExtraMeterGroupLabelOrientation` | именование отличается (Figma `label-orientation` — kebab, Angular `labelOrientation` — camelCase); значения: horizontal \| vertical; дефолт совпадает: `horizontal` | +| `label-position` (Figma) ↔ `labelPosition` (Angular) | enum / `ExtraMeterGroupLabelPosition` | именование отличается (Figma `label-position` — kebab, Angular `labelPosition` — camelCase); значения: start \| end; дефолт совпадает: `end` | + +### MeterGroup.LabelIcon · Figma nodeId `15909:10434` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15909-10434) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `label-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `label-icon` (INSTANCE_SWAP), default `9195:28214` +- `color` (VARIANT): green | blue | yellow | red, default `green` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MeterGroup.Item · Figma nodeId `117:965` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=117-965) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `value` (TEXT) | ограничен (текст) | Input `value` | + +#### Для дизайнеров (Figma API) + +- `value` (TEXT), default `{value}` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `value` (Figma) ↔ `value` (Angular) | string / `ExtraMeterItem[]` | именование совпадает; ⚠️ дефолт отличается: Figma `{value}` ↔ Angular `[]` | diff --git a/docs/api-alignment/api-alignment-multiselect.md b/docs/api-alignment/api-alignment-multiselect.md new file mode 100644 index 00000000..72764057 --- /dev/null +++ b/docs/api-alignment/api-alignment-multiselect.md @@ -0,0 +1,101 @@ +# multiselect + +Angular: ⚠️ реализация не найдена в коде +Figma-узлов: 4 — [MultiSelect](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=369-1548), [MultiSelect.Group](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15892-13621), [MultiSelect.Option](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15892-13549), [MultiSelect.Overlay](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15892-13618) + +## Для разработчиков (Angular API) + +⚠️ компонент не найден в коде + +## Соответствие по Figma-узлам + +### MultiSelect · Figma nodeId `369:1548` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=369-1548) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-chips` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-float-label` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-layout-chips` (INSTANCE_SWAP), default `13110:38261` +- `show-loader` (BOOLEAN), default `True` +- `text-placeholder` (TEXT), default `MultiSelect` +- `text-option` (TEXT), default `Option, Option` +- `show-text-input` (BOOLEAN), default `True` +- `show-chips` (BOOLEAN), default `True` +- `text-float-label` (TEXT), default `FloatLabel` +- `show-close` (BOOLEAN), default `True` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `has-placeholder` (VARIANT): true | false, default `true` +- `chips` (VARIANT): false | true, default `false` +- `has-floatlabel` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MultiSelect.Group · Figma nodeId `15892:13621` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15892-13621) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MultiSelect.Option · Figma nodeId `15892:13549` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15892-13549) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-option` (TEXT), default `Option` +- `state` (VARIANT): default | hover, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### MultiSelect.Overlay · Figma nodeId `15892:13618` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15892-13618) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `show-filter` (BOOLEAN), default `True` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-p-data-table.md b/docs/api-alignment/api-alignment-p-data-table.md new file mode 100644 index 00000000..78dfe99f --- /dev/null +++ b/docs/api-alignment/api-alignment-p-data-table.md @@ -0,0 +1,208 @@ +# p-data-table + +Angular: `src/stories/components/p-data-table` — ⚠️ реализация не найдена (нет `@Component`) +Figma-узлов: 9 — [DataTable.BodyCellBase](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1308-3489), [DataTable.FooterCellBase](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1308-4667), [DataTable.HeaderCellBase](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1292-407), [DataTable.HeaderCellFilter](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1292-1490), [DataTable.Constraint](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15822-18865), [DataTable.ConstraintList](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15822-18926), [DataTable.OverlayPopover](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15824-6992), [DataTable.OverlaySelect](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15824-6953), [DataTable.RowToggleButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15819-10738) + +## Для разработчиков (Angular API) + +⚠️ компонент не найден в коде + +_(`repo.angular` указывает на `src/stories/components/p-data-table`, но там нет `@Component`)_ + +## Соответствие по Figma-узлам + +### DataTable.BodyCellBase · Figma nodeId `1308:3489` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1308-3489) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-layout` (INSTANCE_SWAP), default `13110:31679` +- `state` (VARIANT): default | hover | disabled, default `default` +- `size` (VARIANT): large | small | base, default `large` +- `selection` (VARIANT): false | true, default `false` +- `striped-rows` (VARIANT): false | true, default `false` +- `gridlines` (VARIANT): true | false, default `false` +- `variant` (VARIANT): string | number | link | null | checkbox | expanded | order | edit | layout, default `string` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DataTable.FooterCellBase · Figma nodeId `1308:4667` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1308-4667) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-layout` (INSTANCE_SWAP), default `13110:31679` +- `↳ show-layout` (BOOLEAN), default `True` +- `state` (VARIANT): default | disabled, default `default` +- `size` (VARIANT): large | small | base, default `large` +- `gridlines` (VARIANT): false | true, default `false` +- `variant` (VARIANT): base | layout, default `base` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DataTable.HeaderCellBase · Figma nodeId `1292:407` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1292-407) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon-sort` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `↳ change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-filter` (BOOLEAN), default `True` +- `show-filter-reset` (BOOLEAN), default `True` +- `show-icon-sort` (BOOLEAN), default `True` +- `↳ change-icon-sort` (INSTANCE_SWAP), default `1287:2060` +- `↳ show-layout` (BOOLEAN), default `True` +- `↳ change-layout` (INSTANCE_SWAP), default `13110:31679` +- `state` (VARIANT): default | hover | disabled, default `default` +- `size` (VARIANT): large | base | small, default `large` +- `selection` (VARIANT): false | true, default `false` +- `gridlines` (VARIANT): false | true, default `false` +- `variant` (VARIANT): base | checkbox | layout, default `base` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DataTable.HeaderCellFilter · Figma nodeId `1292:1490` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1292-1490) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-field` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-filter` (BOOLEAN), default `True` +- `show-filter-reset` (BOOLEAN), default `True` +- `change-field` (INSTANCE_SWAP), default `15:13443` +- `state` (VARIANT): default | hover | disabled, default `default` +- `size` (VARIANT): large | small | base, default `large` +- `gridlines` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DataTable.Constraint · Figma nodeId `15822:18865` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15822-18865) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-option` (TEXT), default `Option` +- `state` (VARIANT): default | hover, default `default` +- `checked` (VARIANT): false | true, default `false` +- `separator` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DataTable.ConstraintList · Figma nodeId `15822:18926` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15822-18926) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DataTable.OverlayPopover · Figma nodeId `15824:6992` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15824-6992) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DataTable.OverlaySelect · Figma nodeId `15824:6953` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15824-6953) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### DataTable.RowToggleButton · Figma nodeId `15819:10738` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15819-10738) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | hover, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-paginator.md b/docs/api-alignment/api-alignment-paginator.md new file mode 100644 index 00000000..34986bea --- /dev/null +++ b/docs/api-alignment/api-alignment-paginator.md @@ -0,0 +1,70 @@ +# paginator + +Angular: `src/lib/components/paginator` — `ExtraPaginatorComponent` +Figma-узлов: 2 — [Paginator](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1284-1732), [Paginator.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1284-649) + +## Для разработчиков (Angular API) + +**`ExtraPaginatorComponent`** (`extra-paginator`, `src/lib/components/paginator/paginator.component.ts`) + +- Inputs: + - `@Input() first = 0` + - `@Input() rows = 10` + - `@Input() totalRecords = 0` + - `@Input() rowsPerPageOptions: any[] | undefined` + - `@Input() currentPageReportTemplate = '{currentPage} из {totalPages}'` + - `@Input() showCurrentPageReport = false` + - `@Input() showFirstLastIcon = true` + - `@Input() showJumpToPageDropdown = false` + - `@Input() showJumpToPageInput = false` + - `@Input() showPageLinks = true` + - `@Input() pageLinkSize = 5` + - `@Input() alwaysShow = true` +- Outputs: + - `@Output() onPageChange: ExtraPaginatorState` + +## Соответствие по Figma-узлам + +### Paginator · Figma nodeId `1284:1732` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1284-1732) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-jump` (BOOLEAN), default `True` +- `change-layout` (INSTANCE_SWAP), default `13110:38261` +- `show-dropdown` (BOOLEAN), default `True` +- `template` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Paginator.Item · Figma nodeId `1284:649` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1284-649) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `number` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1981` +- `number` (TEXT), default `0` +- `state` (VARIANT): default | hover | disabled, default `default` +- `checked` (VARIANT): false | true, default `false` +- `icon` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-panelmenu.md b/docs/api-alignment/api-alignment-panelmenu.md new file mode 100644 index 00000000..d066c2a4 --- /dev/null +++ b/docs/api-alignment/api-alignment-panelmenu.md @@ -0,0 +1,119 @@ +# panelmenu + +Angular: `src/lib/components/panelmenu` — `ExtraPanelMenuComponent` +Figma-узлов: 5 — [PanelMenu.ItemBase](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4755), [PanelMenu.ItemTemplate](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4795), [PanelMenu.Panel](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4855), [PanelMenu.Submenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4853), [_❌PanelMenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=884-7089) + +## Для разработчиков (Angular API) + +**`ExtraPanelMenuComponent`** (`extra-panelmenu`, `src/lib/components/panelmenu/panelmenu.component.ts`) + +- Inputs: + - `@Input() model: ExtraMenuItem[] = []` + - `@Input() multiple = false` + - `@Input() tabindex: number | undefined = undefined` + +## Соответствие по Figma-узлам + +### PanelMenu.ItemBase · Figma nodeId `16194:4755` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4755) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `postfix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `postfix-icon-menu` (INSTANCE_SWAP), default `428:1959` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### PanelMenu.ItemTemplate · Figma nodeId `16194:4795` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4795) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `prefix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `postfix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `prefix-icon-menu` (INSTANCE_SWAP), default `428:1959` +- `postfix-icon-menu` (INSTANCE_SWAP), default `1079:3084` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false | active, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### PanelMenu.Panel · Figma nodeId `16194:4855` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4855) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### PanelMenu.Submenu · Figma nodeId `16194:4853` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4853) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### _❌PanelMenu · Figma nodeId `884:7089` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=884-7089) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:19798` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-password.md b/docs/api-alignment/api-alignment-password.md new file mode 100644 index 00000000..5d2cd40a --- /dev/null +++ b/docs/api-alignment/api-alignment-password.md @@ -0,0 +1,135 @@ +# password + +Angular: `src/lib/components/password` — `ExtraPasswordComponent` +Figma-узлов: 4 — [Password.Feedback](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=378-1776), [Password](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=375-1701), [Password.TextFeedback](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=376-2000), [Password.Meter](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=376-1809) + +## Для разработчиков (Angular API) + +**`ExtraPasswordComponent`** (`extra-password`, `src/lib/components/password/password.component.ts`) + +- Inputs: + - `@Input() feedback = true` + - `@Input() toggleMask = false` + - `@Input() disabled = false` + - `@Input() placeholder: string | undefined = undefined` + - `@Input() size: ExtraPasswordSize = 'base'` + - `@Input() variant: 'filled' | 'outlined' = 'outlined'` + - `@Input() fluid = false` + - `@Input() invalid = false` + - `@Input() floatLabel = false` + - `@Input() label = ''` + - `@Input() promptLabel = 'Введите пароль'` + - `@Input() weakLabel = 'Слабый'` + - `@Input() mediumLabel = 'Средний'` + - `@Input() strongLabel = 'Надёжный'` + - `@Input() inputId: string | undefined = undefined` + - `@Input() inputStyleClass: string | undefined = undefined` + - `@Input() ariaLabel: string | undefined = undefined` + - `@Input() ariaLabelledBy: string | undefined = undefined` + - `@Input() appendTo: any = 'body'` + - `@Input() autofocus = false` +- Outputs: + - `@Output() onFocus: Event` + - `@Output() onBlur: Event` +- Слоты (ng-template): + - `@ContentChild(ExtraPasswordHeaderDirective, read: TemplateRef) headerTemplate` + - `@ContentChild(ExtraPasswordFooterDirective, read: TemplateRef) footerTemplate` + +- Директивы: + - `ExtraPasswordHeaderDirective` (`[extraPasswordHeader]`) + - `ExtraPasswordFooterDirective` (`[extraPasswordFooter]`) + +## Соответствие по Figma-узлам + +### Password.Feedback · Figma nodeId `378:1776` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=378-1776) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraPasswordHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraPasswordFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-template` (BOOLEAN), default `True` +- `↳ change-layout` (INSTANCE_SWAP), default `13110:38274` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Password · Figma nodeId `375:1701` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=375-1701) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-eye` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-input` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-float-label` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraPasswordHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraPasswordFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-eye` (BOOLEAN), default `True` +- `↳ change-eye` (INSTANCE_SWAP), default `428:1991` +- `show-text-input` (BOOLEAN), default `True` +- `text-placeholder` (TEXT), default `Password` +- `show-clear` (BOOLEAN), default `False` +- `text-input` (TEXT), default `●●●●●` +- `text-float-label` (TEXT), default `FloatLabel` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `has-placeholder` (VARIANT): false | true, default `true` +- `has-floatlabel` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Password.TextFeedback · Figma nodeId `376:2000` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=376-2000) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-feedback` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraPasswordHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraPasswordFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `text-feedback` (TEXT), default `text feedback` +- `state` (VARIANT): default | success | danger, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Password.Meter · Figma nodeId `376:1809` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=376-1809) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraPasswordHeaderDirective)` → `headerTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraPasswordFooterDirective)` → `footerTemplate` | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): enter | weak | medium | strong, default `enter` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-popover.md b/docs/api-alignment/api-alignment-popover.md new file mode 100644 index 00000000..51c67b5b --- /dev/null +++ b/docs/api-alignment/api-alignment-popover.md @@ -0,0 +1,36 @@ +# popover + +Angular: `src/lib/components/popover` — `ExtraPopoverComponent` +Figma-узлов: 1 — [Popover](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=920-1239) + +## Для разработчиков (Angular API) + +**`ExtraPopoverComponent`** (`extra-popover`, `src/lib/components/popover/popover.component.ts`) + +- Inputs: + - `@Input() dismissable = true` + - `@Input() appendTo: string | HTMLElement = 'body'` +- Проекция: `` + +## Соответствие по Figma-узлам + +### Popover · Figma nodeId `920:1239` · Overlay · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=920-1239) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `18841:12539` +- `position` (VARIANT): top | bottom, default `top` +- `alignment` (VARIANT): left | center | right, default `left` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-progressbar.md b/docs/api-alignment/api-alignment-progressbar.md new file mode 100644 index 00000000..1af0bf23 --- /dev/null +++ b/docs/api-alignment/api-alignment-progressbar.md @@ -0,0 +1,35 @@ +# progressbar + +Angular: `src/lib/components/progressbar` — `ExtraProgressBarComponent` +Figma-узлов: 1 — [ProgressBar](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=113-1004) + +## Для разработчиков (Angular API) + +**`ExtraProgressBarComponent`** (`extra-progressbar`, `src/lib/components/progressbar/progressbar.component.ts`) + +- Inputs: + - `@Input() value = 0` + - `@Input() mode: ExtraProgressBarMode = 'determinate'` + - `@Input() showValue = true` + +## Соответствие по Figma-узлам + +### ProgressBar · Figma nodeId `113:1004` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=113-1004) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `value` (TEXT) | ограничен (текст) | Input `value` | + +#### Для дизайнеров (Figma API) + +- `value` (TEXT), default `{value}%` +- `progress` (VARIANT): 25 | 50 | 85, default `25` +- `hasValue` (VARIANT): true | false, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `value` (Figma) ↔ `value` (Angular) | string | именование совпадает; ⚠️ дефолт отличается: Figma `{value}%` ↔ Angular `0` | diff --git a/docs/api-alignment/api-alignment-progressspinner.md b/docs/api-alignment/api-alignment-progressspinner.md new file mode 100644 index 00000000..b81c6b96 --- /dev/null +++ b/docs/api-alignment/api-alignment-progressspinner.md @@ -0,0 +1,57 @@ +# progressspinner + +Angular: `src/lib/components/progressspinner` — `ExtraProgressSpinnerComponent` +Figma-узлов: 2 — [ProgressSpinner](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1219-3101), [ProgressSpinner.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1219-3111) + +## Для разработчиков (Angular API) + +**`ExtraProgressSpinnerComponent`** (`extra-progressspinner`, `src/lib/components/progressspinner/progressspinner.component.ts`) + +- Inputs: + - `@Input() size: ExtraProgressSpinnerSize = 'base'` + - `@Input() multicolor = true` + - `@Input() strokeWidth = '2'` + - `@Input() fill = 'none'` + - `@Input() animationDuration = '2s'` + - `@Input() ariaLabel: string | undefined = undefined` + +## Соответствие по Figma-узлам + +### ProgressSpinner · Figma nodeId `1219:3101` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1219-3101) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `keyframes` (VARIANT): 1 | 2 | 3, default `1` +- `size` (VARIANT): xlarge | base | large | small, default `xlarge` +- `fill` (VARIANT): primary | white, default `primary` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `fill` (Figma) ↔ `fill` (Angular) | enum | именование совпадает; значения: primary \| white; ⚠️ дефолт отличается: Figma `primary` ↔ Angular `none` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraProgressSpinnerSize` | именование совпадает; значения: xlarge \| base \| large \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | + +### ProgressSpinner.Item · Figma nodeId `1219:3111` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1219-3111) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `keyframes` (VARIANT): waxed | initial | waned, default `initial` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-radiobutton.md b/docs/api-alignment/api-alignment-radiobutton.md new file mode 100644 index 00000000..0027e870 --- /dev/null +++ b/docs/api-alignment/api-alignment-radiobutton.md @@ -0,0 +1,46 @@ +# radiobutton + +Angular: `src/lib/components/radiobutton` — `ExtraRadiobuttonComponent` +Figma-узлов: 1 — [RadioButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=17-13535) + +## Для разработчиков (Angular API) + +**`ExtraRadiobuttonComponent`** (`extra-radiobutton`, `src/lib/components/radiobutton/radiobutton.component.ts`) + +- Inputs: + - `@Input() value: any = null` + - `@Input() name: string | undefined = undefined` + - `@Input() disabled = false` + - `@Input() invalid = false` + - `@Input() variant: ExtraRadiobuttonVariant = 'outlined'` + - `@Input() size: ExtraRadiobuttonSize = 'base'` + - `@Input() inputId: string | undefined = undefined` + - `@Input() tabindex: number | undefined = undefined` + - `@Input() ariaLabel: string | undefined = undefined` + - `@Input() ariaLabelledBy: string | undefined = undefined` + - `@Input() autofocus = false` +- Outputs: + - `@Output() onClick: ExtraRadioButtonClickEvent` + - `@Output() onFocus: Event` + - `@Output() onBlur: Event` + +## Соответствие по Figma-узлам + +### RadioButton · Figma nodeId `17:13535` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=17-13535) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | focus | hover | danger | disabled, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-rating.md b/docs/api-alignment/api-alignment-rating.md new file mode 100644 index 00000000..c5009e97 --- /dev/null +++ b/docs/api-alignment/api-alignment-rating.md @@ -0,0 +1,78 @@ +# rating + +Angular: `src/lib/components/rating` — `ExtraRatingComponent` +Figma-узлов: 3 — [Rating](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=384-1881), [Rating.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=384-1735), [Rating.Clear](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=2119-3782) + +## Для разработчиков (Angular API) + +**`ExtraRatingComponent`** (`extra-rating`, `src/lib/components/rating/rating.component.ts`) + +- Inputs: + - `@Input() stars = 5` + - `@Input() readonly = false` + - `@Input() disabled = false` + - `@Input() autofocus = false` +- Outputs: + - `@Output() onRate: any` + - `@Output() onFocus: FocusEvent` + - `@Output() onBlur: FocusEvent` + +## Соответствие по Figma-узлам + +### Rating · Figma nodeId `384:1881` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=384-1881) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:38250` +- `show-clear` (BOOLEAN), default `True` +- `disabled` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `disabled` (Figma) ↔ `disabled` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | + +### Rating.Item · Figma nodeId `384:1735` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=384-1735) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `checked` (VARIANT): false | true, default `false` +- `hover` (VARIANT): true | false, default `false` +- `paddings` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Rating.Clear · Figma nodeId `2119:3782` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=2119-3782) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `paddings` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-scroll-panel.md b/docs/api-alignment/api-alignment-scroll-panel.md new file mode 100644 index 00000000..a1eb5078 --- /dev/null +++ b/docs/api-alignment/api-alignment-scroll-panel.md @@ -0,0 +1,34 @@ +# scroll-panel + +Angular: `src/lib/components/scroll-panel` — `ExtraScrollPanelComponent` +Figma-узлов: 1 — [ScrollPanel](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=33-1560) + +## Для разработчиков (Angular API) + +**`ExtraScrollPanelComponent`** (`extra-scroll-panel`, `src/lib/components/scroll-panel/scroll-panel.component.ts`) + +- Inputs: + - `@Input() step = 10` + - `@Input() height = '100px'` + - `@Input() width = '100%'` +- Проекция: `` + +## Соответствие по Figma-узлам + +### ScrollPanel · Figma nodeId `33:1560` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=33-1560) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-select-button.md b/docs/api-alignment/api-alignment-select-button.md new file mode 100644 index 00000000..0e722889 --- /dev/null +++ b/docs/api-alignment/api-alignment-select-button.md @@ -0,0 +1,64 @@ +# select-button + +Angular: `src/lib/components/select-button` — `ExtraSelectButtonComponent` +Figma-узлов: 2 — [SelectButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=317-1832), [SelectButton.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=218-1416) + +## Для разработчиков (Angular API) + +**`ExtraSelectButtonComponent`** (`extra-select-button`, `src/lib/components/select-button/select-button.component.ts`) + +- Inputs: + - `@Input() options: unknown[] = []` + - `@Input() optionLabel = 'label'` + - `@Input() optionValue = 'value'` + - `@Input() optionDisabled = 'disabled'` + - `@Input() size: 'base' | 'small' | 'large' | 'xlarge' = 'base'` + - `@Input() multiple = false` + - `@Input() allowEmpty = true` +- Outputs: + - `@Output() valueChange: string | string[]` + +## Соответствие по Figma-узлам + +### SelectButton · Figma nodeId `317:1832` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=317-1832) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:34042` +- `state` (VARIANT): default | disabled, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### SelectButton.Item · Figma nodeId `218:1416` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=218-1416) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-button` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1975` +- `text-button` (TEXT), default `ButtonSelect` +- `state` (VARIANT): default | hover | active | disabled, default `default` +- `size` (VARIANT): xlarge | large | base | small, default `xlarge` +- `checked` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `size` (Figma) ↔ `size` (Angular) | enum / `'base' \| 'small' \| 'large' \| 'xlarge'` | именование совпадает; значения: xlarge \| large \| base \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | diff --git a/docs/api-alignment/api-alignment-select.md b/docs/api-alignment/api-alignment-select.md new file mode 100644 index 00000000..81962620 --- /dev/null +++ b/docs/api-alignment/api-alignment-select.md @@ -0,0 +1,151 @@ +# select + +Angular: `src/lib/components/select` — `ExtraSelectComponent` +Figma-узлов: 4 — [Select.Overlay](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15762-27738), [Select](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=361-1561), [Select.Group](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15762-27737), [Select.Option](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15762-18325) + +## Для разработчиков (Angular API) + +**`ExtraSelectComponent`** (`extra-select`, `src/lib/components/select/select.component.ts`) + +- Inputs: + - `@Input() options: any[] | null | undefined` + - `@Input() optionLabel: string | undefined` + - `@Input() optionValue: string | undefined` + - `@Input() optionDisabled: string | undefined` + - `@Input() optionGroupLabel: string | undefined` + - `@Input() optionGroupChildren = 'items'` + - `@Input() group = false` + - `@Input() placeholder = ''` + - `@Input() size: ExtraSelectSize = 'base'` + - `@Input() filter = false` + - `@Input() showClear = false` + - `@Input() editable = false` + - `@Input() readonly = false` + - `@Input() loading = false` + - `@Input() inputId: string | undefined` + - `@Input() appendTo: any = 'body'` + - `@Input() floatLabel = false` + - `@Input() label = ''` + - `@Input() checkmark = true` + - `@Input() checkmarkIcon = 'ea5e'` + - `@Input() emptyMessage = 'Нет данных'` + - `@Input() emptyFilterMessage = 'Результаты не найдены'` +- Outputs: + - `@Output() onClear: Event` + - `@Output() onFilter: ExtraSelectFilterEvent` + - `@Output() onShow: ExtraAnimationEvent` + - `@Output() onHide: ExtraAnimationEvent` + - `@Output() onFocus: Event` + - `@Output() onBlur: Event` +- Слоты (ng-template): + - `@ContentChild(ExtraSelectOptionDirective, read: TemplateRef) optionTemplate` + - `@ContentChild(ExtraSelectSelectedItemDirective, read: TemplateRef) selectedItemTemplate` + - `@ContentChild(ExtraSelectOptionGroupDirective, read: TemplateRef) optionGroupTemplate` + +- Директивы: + - `ExtraSelectOptionDirective` (`[extraSelectOption]`) + - `ExtraSelectSelectedItemDirective` (`[extraSelectSelectedItem]`) + - `ExtraSelectOptionGroupDirective` (`[extraSelectOptionGroup]`) + +## Соответствие по Figma-узлам + +### Select.Overlay · Figma nodeId `15762:27738` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15762-27738) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectOptionDirective)` → `optionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectSelectedItemDirective)` → `selectedItemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectOptionGroupDirective)` → `optionGroupTemplate` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Select · Figma nodeId `361:1561` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=361-1561) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-float-label` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectOptionDirective)` → `optionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectSelectedItemDirective)` → `selectedItemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectOptionGroupDirective)` → `optionGroupTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-clear` (BOOLEAN), default `True` +- `show-loader` (BOOLEAN), default `True` +- `show-value-input` (BOOLEAN), default `True` +- `↳ show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-placeholder` (TEXT), default `Placeholder` +- `text-option` (TEXT), default `Option` +- `show-text-input` (BOOLEAN), default `True` +- `text-float-label` (TEXT), default `FloatLabel` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `has-placeholder` (VARIANT): true | false, default `true` +- `has-floatlabel` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `show-clear` (Figma) ↔ `showClear` (Angular) | boolean | именование отличается (Figma `show-clear` — kebab, Angular `showClear` — camelCase); ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | + +### Select.Group · Figma nodeId `15762:27737` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15762-27737) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectOptionDirective)` → `optionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectSelectedItemDirective)` → `selectedItemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectOptionGroupDirective)` → `optionGroupTemplate` | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Select.Option · Figma nodeId `15762:18325` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15762-18325) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-option` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectOptionDirective)` → `optionTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectSelectedItemDirective)` → `selectedItemTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraSelectOptionGroupDirective)` → `optionGroupTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-option` (TEXT), default `Option` +- `state` (VARIANT): default | hover | focus, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-skeleton.md b/docs/api-alignment/api-alignment-skeleton.md new file mode 100644 index 00000000..d04df75a --- /dev/null +++ b/docs/api-alignment/api-alignment-skeleton.md @@ -0,0 +1,36 @@ +# skeleton + +Angular: `src/lib/components/skeleton` — `ExtraSkeletonComponent` +Figma-узлов: 1 — [Skeleton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=5221-12465) + +## Для разработчиков (Angular API) + +**`ExtraSkeletonComponent`** (`extra-skeleton`, `src/lib/components/skeleton/skeleton.component.ts`) + +- Inputs: + - `@Input() shape: ExtraSkeletonShape = 'rectangle'` + - `@Input() animation: ExtraSkeletonAnimation = 'wave'` + - `@Input() width = '100%'` + - `@Input() height = '1rem'` + - `@Input() size: string | undefined = undefined` + - `@Input() borderRadius: string | undefined = undefined` + +## Соответствие по Figma-узлам + +### Skeleton · Figma nodeId `5221:12465` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=5221-12465) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `keyframes` (VARIANT): 1 | 2, default `1` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-slider.md b/docs/api-alignment/api-alignment-slider.md new file mode 100644 index 00000000..9264e919 --- /dev/null +++ b/docs/api-alignment/api-alignment-slider.md @@ -0,0 +1,39 @@ +# slider + +Angular: `src/lib/components/slider` — `ExtraSliderComponent` +Figma-узлов: 1 — [Slider](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=383-1844) + +## Для разработчиков (Angular API) + +**`ExtraSliderComponent`** (`extra-slider`, `src/lib/components/slider/slider.component.ts`) + +- Inputs: + - `@Input() min = 0` + - `@Input() max = 100` + - `@Input() step: number | undefined = undefined` + - `@Input() range = false` + - `@Input() orientation: ExtraSliderOrientation = 'horizontal'` + - `@Input() disabled: boolean` +- Outputs: + - `@Output() onSlideEnd: ExtraSliderSlideEndEvent` + +## Соответствие по Figma-узлам + +### Slider · Figma nodeId `383:1844` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=383-1844) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | hover | disabled, default `default` +- `range` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `range` (Figma) ↔ `range` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | diff --git a/docs/api-alignment/api-alignment-stepper.md b/docs/api-alignment/api-alignment-stepper.md new file mode 100644 index 00000000..6fd127ef --- /dev/null +++ b/docs/api-alignment/api-alignment-stepper.md @@ -0,0 +1,103 @@ +# stepper + +Angular: `src/lib/components/stepper` — `ExtraStepperComponent` +Figma-узлов: 4 — [Stepper](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1079-7496), [Stepper.Item](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1079-3244), [Stepper.StepPanel](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15931-6211), [Stepper.Separator](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1082-1671) + +## Для разработчиков (Angular API) + +**`ExtraStepperComponent`** (`extra-stepper`, `src/lib/components/stepper/stepper.component.ts`) + +- Inputs: + - `@Input() value: number | undefined = 1` + - `@Input() steps: ExtraStepperItem[] = []` + - `@Input() linear = false` + - `@Input() orientation: 'horizontal' | 'vertical' = 'horizontal'` + - `@Input() showPanels = true` +- Outputs: + - `@Output() valueChange: number | undefined` + +## Соответствие по Figma-узлам + +### Stepper · Figma nodeId `1079:7496` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1079-7496) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:38261` +- `steps-only` (BOOLEAN), default `False` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Stepper.Item · Figma nodeId `1079:3244` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1079-3244) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-number` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-stepper` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `1079:3084` +- `show-caption` (BOOLEAN), default `True` +- `text-number` (TEXT), default `0` +- `text-stepper` (TEXT), default `Stepper` +- `state` (VARIANT): default | checked | danger, default `default` +- `line` (VARIANT): true | false, default `true` +- `disabled` (VARIANT): true | false, default `false` +- `icon` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Stepper.StepPanel · Figma nodeId `15931:6211` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15931-6211) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `show-prev-button` (BOOLEAN), default `True` +- `show-next-button` (BOOLEAN), default `True` +- `show-nav-buttons` (BOOLEAN), default `True` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Stepper.Separator · Figma nodeId `1082:1671` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1082-1671) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `checked` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-tabs.md b/docs/api-alignment/api-alignment-tabs.md new file mode 100644 index 00000000..95f47eaa --- /dev/null +++ b/docs/api-alignment/api-alignment-tabs.md @@ -0,0 +1,94 @@ +# tabs + +Angular: `src/lib/components/tabs` — `ExtraTabsComponent` +Figma-узлов: 4 — [Tabs](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=884-7324), [Tabs.NavButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15927-59569), [Tabs.Tab](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=884-7248), [Tabs.Tabpanel](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15923-59551) + +## Для разработчиков (Angular API) + +**`ExtraTabsComponent`** (`extra-tabs`, `src/lib/components/tabs/tabs.component.ts`) + +- Inputs: + - `@Input() value: string | number | undefined = '0'` + - `@Input() tabs: ExtraTabItem[] = []` + - `@Input() scrollable = false` + - `@Input() lazy = false` + +## Соответствие по Figma-узлам + +### Tabs · Figma nodeId `884:7324` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=884-7324) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:38261` +- `show-nav-buttons` (BOOLEAN), default `False` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Tabs.NavButton · Figma nodeId `15927:59569` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15927-59569) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | hover, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Tabs.Tab · Figma nodeId `884:7248` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=884-7248) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-tab` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:2003` +- `show-badge` (BOOLEAN), default `True` +- `text-tab` (TEXT), default `Tab` +- `state` (VARIANT): default | hover | active | disabled | focus, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### Tabs.Tabpanel · Figma nodeId `15923:59551` · Panel · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15923-59551) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `focus` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-tag.md b/docs/api-alignment/api-alignment-tag.md new file mode 100644 index 00000000..97fd6757 --- /dev/null +++ b/docs/api-alignment/api-alignment-tag.md @@ -0,0 +1,40 @@ +# tag + +Angular: `src/lib/components/tag` — `ExtraTagComponent` +Figma-узлов: 1 — [Tag](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=21-1238) + +## Для разработчиков (Angular API) + +**`ExtraTagComponent`** (`extra-tag`, `src/lib/components/tag/tag.component.ts`) + +- Inputs: + - `@Input() value = ''` + - `@Input() severity: ExtraTagSeverity = 'primary'` + - `@Input() rounded = false` + - `@Input() icon = ''` + +## Соответствие по Figma-узлам + +### Tag · Figma nodeId `21:1238` · Misc · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=21-1238) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-tag` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-icon` (BOOLEAN), default `True` +- `↳ change-icon` (INSTANCE_SWAP), default `428:1989` +- `text-tag` (TEXT), default `Tag` +- `severity` (VARIANT): info | success | warning | danger | secondary | primary, default `primary` +- `rounded` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `rounded` (Figma) ↔ `rounded` (Angular) | enum | именование совпадает; значения: false \| true; дефолт совпадает: `false` | +| `severity` (Figma) ↔ `severity` (Angular) | enum / `ExtraTagSeverity` | именование совпадает; значения: info \| success \| warning \| danger \| secondary \| primary; дефолт совпадает: `primary` | diff --git a/docs/api-alignment/api-alignment-textarea.md b/docs/api-alignment/api-alignment-textarea.md new file mode 100644 index 00000000..1bc63c95 --- /dev/null +++ b/docs/api-alignment/api-alignment-textarea.md @@ -0,0 +1,52 @@ +# textarea + +Angular: `src/lib/components/textarea` — `ExtraTextareaComponent` +Figma-узлов: 1 — [Textarea](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=309-1582) + +## Для разработчиков (Angular API) + +**`ExtraTextareaComponent`** (`extra-textarea`, `src/lib/components/textarea/textarea.component.ts`) + +- Inputs: + - `@Input() placeholder = ''` + - `@Input() size: ExtraTextareaSize = 'base'` + - `@Input() readonly = false` + - `@Input() showClear = false` + - `@Input() fluid = false` + - `@Input() autoResize = false` + - `@Input() rows = 3` + - `@Input() cols: number` +- Outputs: + - `@Output() onResize: { height: string } | {}` + - `@Output() onClear: void` + +## Соответствие по Figma-узлам + +### Textarea · Figma nodeId `309:1582` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=309-1582) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-inputarea` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-placeholder` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `text-float-label` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-clear` (BOOLEAN), default `True` +- `show-resize` (BOOLEAN), default `True` +- `show-text-input` (BOOLEAN), default `True` +- `text-inputarea` (TEXT), default `InputTextarea` +- `text-placeholder` (TEXT), default `Placeholder` +- `text-float-label` (TEXT), default `FloatLabel` +- `state` (VARIANT): default | hover | focus | danger | disabled | readonly, default `default` +- `placeholder` (VARIANT): true | false, default `true` +- `has-floatlabel` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `placeholder` (Figma) ↔ `placeholder` (Angular) | enum | именование совпадает; значения: true \| false; ⚠️ дефолт отличается: Figma `true` ↔ Angular `` | +| `show-clear` (Figma) ↔ `showClear` (Angular) | boolean | именование отличается (Figma `show-clear` — kebab, Angular `showClear` — camelCase); ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | diff --git a/docs/api-alignment/api-alignment-tieredmenu.md b/docs/api-alignment/api-alignment-tieredmenu.md new file mode 100644 index 00000000..9fc02942 --- /dev/null +++ b/docs/api-alignment/api-alignment-tieredmenu.md @@ -0,0 +1,137 @@ +# tieredmenu + +Angular: `src/lib/components/tieredmenu` — `ExtraTieredMenuComponent` +Figma-узлов: 6 — [TieredMenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=18204-57983), [TieredMenu.ItemBase](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4588), [TieredMenu.ItemTemplate](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4628), [TieredMenu.MobileIndent](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4688), [TieredMenu.Submenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4686), [_❌TieredMenu](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-5971) + +## Для разработчиков (Angular API) + +**`ExtraTieredMenuComponent`** (`extra-tieredmenu`, `src/lib/components/tieredmenu/tieredmenu.component.ts`) + +- Inputs: + - `@Input() model: ExtraMenuItem[] = []` + - `@Input() autoDisplay = true` + - `@Input() tabindex: number | undefined = undefined` + +## Соответствие по Figma-узлам + +### TieredMenu · Figma nodeId `18204:57983` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=18204-57983) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### TieredMenu.ItemBase · Figma nodeId `16194:4588` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4588) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `postfix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `postfix-icon-menu` (INSTANCE_SWAP), default `428:1959` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### TieredMenu.ItemTemplate · Figma nodeId `16194:4628` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4628) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-menu-item` (TEXT) | ограничен (текст) | ⚠️ отсутствует | +| `prefix-icon-menu-item` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `prefix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `postfix-icon-menu` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-menu-item` (TEXT), default `MenuItem` +- `prefix-icon-menu-item` (INSTANCE_SWAP), default `428:2003` +- `prefix-icon-menu` (INSTANCE_SWAP), default `428:1959` +- `postfix-icon-menu` (INSTANCE_SWAP), default `1079:3084` +- `state` (VARIANT): default | hover | selected, default `default` +- `separator` (VARIANT): true | false | active, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### TieredMenu.MobileIndent · Figma nodeId `16194:4688` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4688) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### TieredMenu.Submenu · Figma nodeId `16194:4686` · Menu · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=16194-4686) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- Свойств нет + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### _❌TieredMenu · Figma nodeId `882:5971` · 🔴 Deprecated · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=882-5971) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `change-layout` (INSTANCE_SWAP), default `13110:19798` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-timeline.md b/docs/api-alignment/api-alignment-timeline.md new file mode 100644 index 00000000..ccb17a4a --- /dev/null +++ b/docs/api-alignment/api-alignment-timeline.md @@ -0,0 +1,123 @@ +# timeline + +Angular: `src/lib/components/timeline` — `ExtraTimelineComponent` +Figma-узлов: 4 — [Timeline](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1090-3325), [Timeline.ItemHorizontal](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1090-2017), [Timeline.ItemVertical](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1090-1500), [Timeline.Marker](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1080-771) + +## Для разработчиков (Angular API) + +**`ExtraTimelineComponent`** (`extra-timeline`, `src/lib/components/timeline/timeline.component.ts`) + +- Inputs: + - `@Input() value: any[] = []` + - `@Input() align: 'left' | 'right' | 'alternate' | 'top' | 'bottom' = 'left'` + - `@Input() layout: 'vertical' | 'horizontal' = 'vertical'` + - `@Input() showCaption: boolean = true` + - `@Input() line: ExtraTimelineLine = 'solid'` + - `@Input() icon = ''` + - `@Input() markerColor = ''` +- Слоты (ng-template): + - `@ContentChild(ExtraTimelineContentDirective, read: TemplateRef) contentTemplate` + - `@ContentChild(ExtraTimelineOppositeDirective, read: TemplateRef) oppositeTemplate` + - `@ContentChild(ExtraTimelineMarkerDirective, read: TemplateRef) markerTemplate` + +- Директивы: + - `ExtraTimelineContentDirective` (`[extraTimelineContent]`) + - `ExtraTimelineOppositeDirective` (`[extraTimelineOpposite]`) + - `ExtraTimelineMarkerDirective` (`[extraTimelineMarker]`) + +## Соответствие по Figma-узлам + +### Timeline · Figma nodeId `1090:3325` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1090-3325) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `change-layout-vertical` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-layout-horizontal` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineContentDirective)` → `contentTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineOppositeDirective)` → `oppositeTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineMarkerDirective)` → `markerTemplate` | + +#### Для дизайнеров (Figma API) + +- `change-layout-vertical` (INSTANCE_SWAP), default `13110:36319` +- `change-layout-horizontal` (INSTANCE_SWAP), default `13110:38261` +- `layout` (VARIANT): horizontal | vertical, default `horizontal` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `layout` (Figma) ↔ `layout` (Angular) | enum / `'vertical' \| 'horizontal'` | именование совпадает; значения: horizontal \| vertical; ⚠️ дефолт отличается: Figma `horizontal` ↔ Angular `vertical` | + +### Timeline.ItemHorizontal · Figma nodeId `1090:2017` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1090-2017) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineContentDirective)` → `contentTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineOppositeDirective)` → `oppositeTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineMarkerDirective)` → `markerTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-caption` (BOOLEAN), default `True` +- `align` (VARIANT): opposite | top | bottom, default `opposite` +- `line` (VARIANT): true | false, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `align` (Figma) ↔ `align` (Angular) | enum / `'left' \| 'right' \| 'alternate' \| 'top' \| 'bottom'` | именование совпадает; значения: opposite \| top \| bottom; ⚠️ дефолт отличается: Figma `opposite` ↔ Angular `left` | +| `line` (Figma) ↔ `line` (Angular) | enum / `ExtraTimelineLine` | именование совпадает; значения: true \| false; ⚠️ дефолт отличается: Figma `true` ↔ Angular `solid` | +| `show-caption` (Figma) ↔ `showCaption` (Angular) | boolean / `boolean` | именование отличается (Figma `show-caption` — kebab, Angular `showCaption` — camelCase); дефолт совпадает: `true` | + +### Timeline.ItemVertical · Figma nodeId `1090:1500` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1090-1500) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineContentDirective)` → `contentTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineOppositeDirective)` → `oppositeTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineMarkerDirective)` → `markerTemplate` | + +#### Для дизайнеров (Figma API) + +- `show-caption` (BOOLEAN), default `True` +- `align` (VARIANT): opposite | left | right, default `opposite` +- `line` (VARIANT): true | false, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `align` (Figma) ↔ `align` (Angular) | enum / `'left' \| 'right' \| 'alternate' \| 'top' \| 'bottom'` | именование совпадает; значения: opposite \| left \| right; ⚠️ дефолт отличается: Figma `opposite` ↔ Angular `left` | +| `line` (Figma) ↔ `line` (Angular) | enum / `ExtraTimelineLine` | именование совпадает; значения: true \| false; ⚠️ дефолт отличается: Figma `true` ↔ Angular `solid` | +| `show-caption` (Figma) ↔ `showCaption` (Angular) | boolean / `boolean` | именование отличается (Figma `show-caption` — kebab, Angular `showCaption` — camelCase); дефолт совпадает: `true` | + +### Timeline.Marker · Figma nodeId `1080:771` · Data · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=1080-771) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineContentDirective)` → `contentTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineOppositeDirective)` → `oppositeTemplate` | +| — (нет во Figma) | свободный | `ng-template` через `@ContentChild(ExtraTimelineMarkerDirective)` → `markerTemplate` | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1987` +- `color` (VARIANT): primary | green | orange | red | purple | blue | gray, default `primary` +- `icon` (VARIANT): true | false, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `icon` (Figma) ↔ `icon` (Angular) | enum | именование совпадает; значения: true \| false; ⚠️ дефолт отличается: Figma `false` ↔ Angular `` | diff --git a/docs/api-alignment/api-alignment-toast.md b/docs/api-alignment/api-alignment-toast.md new file mode 100644 index 00000000..44b54fa8 --- /dev/null +++ b/docs/api-alignment/api-alignment-toast.md @@ -0,0 +1,69 @@ +# toast + +Angular: `src/lib/components/toast` — `ExtraToastComponent` +Figma-узлов: 2 — [Toast](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15953-4478), [_Toast.ButtonClose](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15963-7837) + +## Для разработчиков (Angular API) + +**`ExtraToastComponent`** (`extra-toast`, `src/lib/components/toast/toast.component.ts`) + +- Inputs: + - `@Input() position: ExtraToastPosition = 'top-right'` + - `@Input() key: string | undefined = undefined` + - `@Input() life = 5000` + - `@Input() pt: Record | undefined = undefined` + +## Соответствие по Figma-узлам + +### Toast · Figma nodeId `15953:4478` · Messages · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15953-4478) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-layout-footer` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-info` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-success` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-warning` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `change-icon-danger` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `↳ change-layout-body` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `show-close` (BOOLEAN), default `True` +- `show-caption` (BOOLEAN), default `True` +- `show-footer` (BOOLEAN), default `True` +- `↳ change-layout-footer` (INSTANCE_SWAP), default `13110:34042` +- `change-icon-info` (INSTANCE_SWAP), default `428:1973` +- `change-icon-success` (INSTANCE_SWAP), default `428:1987` +- `change-icon-warning` (INSTANCE_SWAP), default `428:1977` +- `change-icon-danger` (INSTANCE_SWAP), default `428:1983` +- `show-layout-body` (BOOLEAN), default `True` +- `↳ change-layout-body` (INSTANCE_SWAP), default `18841:12539` +- `severity` (VARIANT): info | success | warning | danger, default `info` +- `timer` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | + +### _Toast.ButtonClose · Figma nodeId `15963:7837` · Messages · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=15963-7837) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `severity` (VARIANT): success | warn | danger | info, default `info` +- `state` (VARIANT): default | hover, default `default` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-togglebutton.md b/docs/api-alignment/api-alignment-togglebutton.md new file mode 100644 index 00000000..e7a3001c --- /dev/null +++ b/docs/api-alignment/api-alignment-togglebutton.md @@ -0,0 +1,55 @@ +# togglebutton + +Angular: `src/lib/components/togglebutton` — `ExtraToggleButtonComponent` +Figma-узлов: 1 — [ToggleButton](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=174-1363) + +## Для разработчиков (Angular API) + +**`ExtraToggleButtonComponent`** (`extra-toggle-button`, `src/lib/components/togglebutton/togglebutton.component.ts`) + +- Inputs: + - `@Input() onLabel = 'Вкл'` + - `@Input() offLabel = 'Выкл'` + - `@Input() onIcon: string | undefined = undefined` + - `@Input() offIcon: string | undefined = undefined` + - `@Input() iconPos: 'left' | 'right' = 'left'` + - `@Input() size: ExtraToggleButtonSize = 'base'` + - `@Input() disabled = false` + - `@Input() iconOnly = false` + - `@Input() allowEmpty: boolean | undefined = undefined` + - `@Input() fluid = false` + - `@Input() ariaLabel: string | undefined = undefined` + - `@Input() ariaLabelledBy: string | undefined = undefined` + - `@Input() inputId: string | undefined = undefined` + - `@Input() tabindex: number | undefined = undefined` + - `@Input() autofocus: boolean | undefined = undefined` +- Outputs: + - `@Output() onChange: ToggleButtonChangeEvent` + +## Соответствие по Figma-узлам + +### ToggleButton · Figma nodeId `174:1363` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=174-1363) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `↳ change-icon` (INSTANCE_SWAP) | ограничен (компонент) | ⚠️ отсутствует | +| `text-button` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `↳ change-icon` (INSTANCE_SWAP), default `428:1975` +- `text-button` (TEXT), default `ButtonToggle` +- `state` (VARIANT): default | focus | hover | disabled, default `default` +- `size` (VARIANT): xlarge | large | base | small, default `xlarge` +- `checked` (VARIANT): false | true, default `false` +- `icon-position` (VARIANT): null | left | right, default `null` +- `icon-only` (VARIANT): false | true, default `true` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| `icon-only` (Figma) ↔ `iconOnly` (Angular) | enum | именование отличается (Figma `icon-only` — kebab, Angular `iconOnly` — camelCase); значения: false \| true; ⚠️ дефолт отличается: Figma `true` ↔ Angular `false` | +| `size` (Figma) ↔ `size` (Angular) | enum / `ExtraToggleButtonSize` | именование совпадает; значения: xlarge \| large \| base \| small; ⚠️ дефолт отличается: Figma `xlarge` ↔ Angular `base` | diff --git a/docs/api-alignment/api-alignment-toggleswitch.md b/docs/api-alignment/api-alignment-toggleswitch.md new file mode 100644 index 00000000..1533e023 --- /dev/null +++ b/docs/api-alignment/api-alignment-toggleswitch.md @@ -0,0 +1,34 @@ +# toggleswitch + +Angular: `src/lib/components/toggleswitch` — `ExtraToggleSwitchComponent` +Figma-узлов: 1 — [ToggleSwitch](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=19-13673) + +## Для разработчиков (Angular API) + +**`ExtraToggleSwitchComponent`** (`extra-toggleswitch`, `src/lib/components/toggleswitch/toggleswitch.component.ts`) + +- Outputs: + - `@Output() onChange: unknown` + - `@Output() onFocus: Event` + - `@Output() onBlur: Event` + +## Соответствие по Figma-узлам + +### ToggleSwitch · Figma nodeId `19:13673` · Form · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=19-13673) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| — | — | Слотов нет | + +#### Для дизайнеров (Figma API) + +- `state` (VARIANT): default | focus | hover | danger | disabled, default `default` +- `checked` (VARIANT): false | true, default `false` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше | diff --git a/docs/api-alignment/api-alignment-tooltip.md b/docs/api-alignment/api-alignment-tooltip.md new file mode 100644 index 00000000..5bf05def --- /dev/null +++ b/docs/api-alignment/api-alignment-tooltip.md @@ -0,0 +1,30 @@ +# tooltip + +Angular: `src/lib/components/tooltip` — — +Figma-узлов: 1 — [Tooltip](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=24-1369) + +## Для разработчиков (Angular API) + +- Директивы: + - `ExtraTooltipDirective` (`[extra-tooltip]`) + +## Соответствие по Figma-узлам + +### Tooltip · Figma nodeId `24:1369` · Overlay · [🔗 Figma](https://www.figma.com/design/Khh7arsuXss3ncqy1Dz3OZ/UI-Kit--DS--v2.0?node-id=24-1369) + +#### Слоты → Темплейты + +| Слот (Figma) | Тип вложения | Реализация | +|---|---|---| +| `text-tooltip` (TEXT) | ограничен (текст) | ⚠️ отсутствует | + +#### Для дизайнеров (Figma API) + +- `text-tooltip` (TEXT), default `tooltip` +- `position` (VARIANT): top | bottom | left | right, default `left` + +#### Общие API + +| Параметр | Тип | Комментарий | +|---|---|---| +| — | — | Полных совпадений по имени нет — параметры разнесены по разделам выше |