feat(tags): added drag-and-drop functionality for tag-list (#DS-4093)

[artembelik]

#1029

[github-actions]

Visit the preview URL for this PR (updated for commit 23d36af):

https://koobiq-next--prs-1025-0bvge937.web.app

_{(expires Tue, 07 Oct 2025 14:11:44 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

[Copilot]

Pull Request Overview

This PR adds drag-and-drop functionality to the tag list component, allowing users to reorder tags by dragging them. The implementation leverages Angular CDK's drag-and-drop module and adds new properties to control when dragging is enabled.

• Added draggable property to KbqTagList and corresponding CSS classes for styling
• Integrated CDK drag-drop directives with both KbqTag and KbqTagList components
• Created example components demonstrating the new drag-and-drop functionality

Reviewed Changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tools/public_api_guard/components/tags.api.md	Updated public API to include new drag-drop imports, draggable properties, and event types
packages/components/tags/tag-list.component.ts	Added draggable property, drop list integration, and event handling for tag reordering
packages/components/tags/tag.component.ts	Added drag directive integration and draggable state management
packages/components/tags/*.scss	Added CSS styling for drag states and cursor behavior
packages/docs-examples/	Added example components and documentation demonstrating drag-and-drop functionality
packages/components-dev/tag/module.ts	Updated development module to showcase new drag-and-drop examples

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[rmnturov]

Сейчас непонятно теги перставляются, нужно или сделать по спеке (показывать индикатор-полоску между тегами) или преставлять теги на лету во время перетаскивания

[rmnturov]

после перетаскивания фокус должен оказать на теге, которые перетаскивали. тянули мышкой, поэтому рамки фокуса не нужно

[rmnturov]

порой вот такой внешний вид ловлю → две рамки фокуса. так быть не должно

[rmnturov]

Давай не будет добавлять рамку фокуса в момент перетаскивания, ни на превью, ни на плейсхолдер бледный. Рамка фокуса у нас видна только при управляения с клавы

[rmnturov]

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

[artembelik]

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

добавил

[Copilot]

Pull Request Overview

Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[rmnturov]

Вот я перетаскиваю тег 0. Для меня странно, что выбрался тег 1 после перетатскивания. Рамка фокуса на контроле видна. Контрол в фокусе? Пытаюсь ввести текст, не получается.

Что я ожидаю: тянешь тег, никаких синих тегов не видишь. И уж точно синим не должен становиться тег, который ты не тянул. После перетаскивания мышкой в принципе норм, если фокус будет вставать в область создания нового тега и контрол будет с синей рамкой

taglist-dnd.mp4

[artembelik]

Вот я перетаскиваю тег 0. Для меня странно, что выбрался тег 1 после перетатскивания. Рамка фокуса на контроле видна. Контрол в фокусе? Пытаюсь ввести текст, не получается.

Что я ожидаю: тянешь тег, никаких синих тегов не видишь. И уж точно синим не должен становиться тег, который ты не тянул. После перетаскивания мышкой в принципе норм, если фокус будет вставать в область создания нового тега и контрол будет с синей рамкой

выбор тегов будет исправлен в рамках DS-4161, фокус поправлю