@libs-ui/components-drag-drop 0.2.356-8 → 0.2.357-0

package/fesm2022/libs-ui-components-drag-drop.mjs

@@ -1,10 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, inject, ElementRef, DestroyRef, Directive, ChangeDetectorRef, model, output, effect, untracked, Component } from '@angular/core';
+import { signal, Injectable, input, inject, ElementRef, DestroyRef, Directive, ChangeDetectorRef, model, output, effect, untracked } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { get, checkMouseOverInContainer, cloneIBoundingClientRect, uuid, set, cloneDeep, getViewport, checkViewInScreen, getDragEventByElement } from '@libs-ui/utils';
-import { Subject, debounceTime, filter, fromEvent, tap, takeUntil, throttleTime } from 'rxjs';
-import { CommonModule } from '@angular/common';
-import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
+import { Subject, auditTime, animationFrameScheduler, debounceTime, filter, observeOn, fromEvent, tap, takeUntil } from 'rxjs';
 
 const styleContainer = (config, viewEncapsulation, groupID) => {
     const defaultConfig = [
@@ -115,6 +113,27 @@ class MoLibsSharedDragDropService {
     onDragItemInContainerVirtualScroll = new Subject();
     itemDragInfo;
     container = signal(new Map());
+    // Rect cache: cache getBoundingClientRect() tại drag start, tái dùng mỗi mousemove.
+    // Gom tất cả reads vào 1 batch/rAF → tránh forced layout thrashing.
+    domRectCache = new Map();
+    cacheElementRect(element) {
+        this.domRectCache.set(element, element.getBoundingClientRect());
+    }
+    getElementRect(element) {
+        return this.domRectCache.get(element);
+    }
+    invalidateElementRect(element) {
+        this.domRectCache.delete(element);
+    }
+    clearElementRects() {
+        this.domRectCache.clear();
+    }
+    // Rebuild rects CHỈ cho items trong container bị ảnh hưởng (items đã shift vị trí).
+    // Được gọi sau cdr.detectChanges() trong handlerDragOver — KHÔNG clear toàn bộ cache.
+    rebuildContainerRects(containerElement, classItemDefine) {
+        const children = containerElement.getElementsByClassName(classItemDefine);
+        Array.from(children).forEach(el => this.domRectCache.set(el, el.getBoundingClientRect()));
+    }
     targetItemDragFlag = 'item-drag-target';
     classContainerDefine = 'libs-ui-drag-drop-container';
     classItemDefine = 'libs-ui-drag-drop-item';
@@ -220,7 +239,8 @@ class LibsUiComponentsDragScrollDirective {
     dragDropService = inject(MoLibsSharedDragDropService);
     destroyRef = inject(DestroyRef);
     ngAfterViewInit() {
-        this.dragDropService.OnDragging.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((eventDragging) => this.checkAndScrollElementToPosition(eventDragging, this.ignoreAutoScroll()));
+        // auditTime(rAF): batch cùng rAF với drag-item subscriptions → không tạo thêm layout flush riêng
+        this.dragDropService.OnDragging.pipe(auditTime(0, animationFrameScheduler), takeUntilDestroyed(this.destroyRef)).subscribe((eventDragging) => this.checkAndScrollElementToPosition(eventDragging, this.ignoreAutoScroll()));
         this.dragDropService.OnDragEnd.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             clearInterval(this.intervalScrollToElement());
             if (this.virtualScrollPageInfo()) {
@@ -439,6 +459,8 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                     indexSpliceListTo = indexDragOver;
                     this.cdr.detectChanges();
                     this.setAttributeElementAndItemDrag(elementContainer, false, indexSpliceListTo);
+                    // Rebuild CHỈ rects của container này (items shifted), giữ nguyên cache các container khác.
+                    this.dragDropService.rebuildContainerRects(elementContainer, this.dragDropService.ClassItemDefine);
                 }
                 return;
             }
@@ -561,6 +583,8 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             if (this.disableDragContainer()) {
                 return;
             }
+            // Clear all remaining rect cache entries on drag end.
+            this.dragDropService.clearElementRects();
             let rect = undefined;
             if (this.rootElementScroll() || elementContainer) {
                 rect = (this.rootElementScroll() || elementContainer)?.getBoundingClientRect();
@@ -621,7 +645,9 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             if (this.groupID() !== elementDrop.getAttribute('groupID') || elementDrag.getAttribute('groupID') === elementDrop.getAttribute('groupID')) {
                 return;
             }
-            const indexDragOver = this.groupID() !== elementDrag.getAttribute('groupID') ? Number(elementDrop.getAttribute('index')).valueOf() : Number(elementDrop.getAttribute('index')).valueOf() - (elementDrop.getAttribute('dropContainer') ? 0 : 1);
+            const dropIndex = Number(elementDrop.getAttribute('index')).valueOf();
+            const dropContainerOffset = elementDrop.getAttribute('dropContainer') ? 0 : 1;
+            const indexDragOver = this.groupID() !== elementDrag.getAttribute('groupID') ? dropIndex : dropIndex - dropContainerOffset;
             const item = this.mode() === 'copy' ? cloneDeep(itemDragInfo?.item) : itemDragInfo?.item;
             if (itemDragInfo) {
                 itemDragInfo.indexDrop = indexDragOver;
@@ -635,7 +661,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                 items.splice(indexDragOver, 0, item);
                 return [...items];
             });
-            if (itemDragInfo && itemDragInfo.itemsMove && itemDragInfo.itemsMove()) {
+            if (itemDragInfo?.itemsMove?.()) {
                 itemDragInfo.itemsDrag.set([...itemDragInfo.itemsMove()]);
                 this.setAttributeElementAndItemDrag(elementContainer);
             }
@@ -644,31 +670,13 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             this.setIndexElement(elementContainer);
         };
         [
-            {
-                name: 'OnDragStart',
-                event: this.dragDropService.OnDragStart,
-                functionCall: handlerDragStart,
-            },
-            {
-                name: 'OnDragOver',
-                event: this.dragDropService.OnDragOver,
-                functionCall: handlerDragOver,
-            },
-            {
-                name: 'OnDragging',
-                event: this.dragDropService.OnDragging,
-                functionCall: handlerDragging,
-            },
-            {
-                name: 'OnDragEnd',
-                event: this.dragDropService.OnDragEnd,
-                functionCall: handlerDragEnd,
-            },
-            {
-                name: 'OnDrop',
-                event: this.dragDropService.OnDrop,
-                functionCall: handlerDrop,
-            },
+            { event: this.dragDropService.OnDragStart, functionCall: handlerDragStart },
+            { event: this.dragDropService.OnDragOver, functionCall: handlerDragOver },
+            // observeOn(rAF): defer container dragging handler vào rAF context, batch cùng item subscriptions.
+            // Không drop event (cần xử lý mọi state change cho placeholder) — khác với auditTime của drag-item.
+            { event: this.dragDropService.OnDragging.pipe(observeOn(animationFrameScheduler)), functionCall: handlerDragging },
+            { event: this.dragDropService.OnDragEnd, functionCall: handlerDragEnd },
+            { event: this.dragDropService.OnDrop, functionCall: handlerDrop },
         ].forEach((item) => item.event.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(item.functionCall));
     }
     get FunctionsControl() {
@@ -787,7 +795,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                 return;
             }
             childElement.removeAttribute('index');
-            if (!this.dropToGroupName() || !this.dropToGroupName()?.length) {
+            if (!this.dropToGroupName()?.length) {
                 childElement.removeAttribute('dropToGroupName');
             }
             if (!this.placeholder()) {
@@ -926,8 +934,8 @@ class LibsUiDragItemInContainerVirtualScrollDirective {
         if (!frames?.length) {
             return;
         }
-        for (let i = 0; i < frames.length; ++i) {
-            frames[i].style.pointerEvents = pointerEvents;
+        for (const frame of Array.from(frames)) {
+            frame.style.pointerEvents = pointerEvents;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDragItemInContainerVirtualScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -993,7 +1001,19 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
             }
         }
         element.classList.add(this.dragDropService.ClassItemDefine);
-        this.dragDropService.OnDragging.pipe(throttleTime(this.throttleTimeHandlerDraggingEvent()), takeUntilDestroyed(this.destroyRef)).subscribe((eventDragging) => {
+        // Tại drag start: cache rect → skip getBoundingClientRect() mỗi mousemove
+        this.dragDropService.OnDragStart.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.dragDropService.cacheElementRect(element);
+        });
+        // Dùng destroyRef.onDestroy() thay OnDragEnd subscription:
+        // Virtual scroll destroy directives khi scroll out → OnDragEnd subscription bị unsubscribe
+        // trước khi drag kết thúc → invalidateElementRect không được gọi → stale rect.
+        // destroyRef.onDestroy() luôn chạy khi directive bị destroy, bất kể drag state.
+        this.destroyRef.onDestroy(() => this.dragDropService.invalidateElementRect(element));
+        // auditTime(0, animationFrameScheduler): gom TẤT CẢ item subscriptions vào 1 rAF callback.
+        // Toàn bộ getBoundingClientRect() reads xảy ra trong 1 batch → browser chỉ flush layout 1 lần/frame.
+        // Trailing behavior (dùng event mới nhất) tốt hơn throttleTime leading (event cũ 16ms trước).
+        this.dragDropService.OnDragging.pipe(auditTime(0, animationFrameScheduler), takeUntilDestroyed(this.destroyRef)).subscribe((eventDragging) => {
             if (this.disable() || element.getAttribute('disableDragContainer') || (this.fieldId() && this.item() && eventDragging.elementDrag.getAttribute('item_id') === get(this.item(), this.fieldId()))) {
                 return;
             }
@@ -1004,7 +1024,9 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
                     return;
                 }
             }
-            if (checkMouseOverInContainer(eventDragging.mousePosition, element) && element !== eventDragging.elementDrag && containerById && checkViewInScreen(containerById.element, element, containerById.elementScroll)) {
+            // Dùng cached rect (không gọi getBoundingClientRect() lại); fallback về fresh nếu cache miss
+            const cachedRect = this.dragDropService.getElementRect(element);
+            if (checkMouseOverInContainer(eventDragging.mousePosition, element, cachedRect) && element !== eventDragging.elementDrag && containerById && checkViewInScreen(containerById.element, element, containerById.elementScroll)) {
                 if (this.isDragOver()) {
                     return;
                 }
@@ -1212,836 +1234,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class LibsUiDragDropDemoComponent {
-    // Basic List Items
-    basicItems = ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'];
-    // Kanban Board Columns
-    columnsIds = ['todo', 'in-progress', 'done'];
-    columns = [
-        {
-            id: 'todo',
-            title: 'To Do',
-            items: [
-                {
-                    id: 1,
-                    title: 'Implement drag and drop',
-                    description: 'Add drag and drop functionality to the component',
-                    status: 'todo',
-                },
-                {
-                    id: 2,
-                    title: 'Add animations',
-                    description: 'Implement smooth animations for drag and drop',
-                    status: 'todo',
-                },
-            ],
-        },
-        {
-            id: 'in-progress',
-            title: 'In Progress',
-            items: [
-                {
-                    id: 3,
-                    title: 'Fix styling issues',
-                    description: 'Resolve CSS conflicts in the component',
-                    status: 'in-progress',
-                },
-            ],
-        },
-        {
-            id: 'done',
-            title: 'Done',
-            items: [
-                {
-                    id: 4,
-                    title: 'Setup project structure',
-                    description: 'Initialize the project with necessary configurations',
-                    status: 'done',
-                },
-            ],
-        },
-    ];
-    // Nested Items
-    nestedItems = [
-        {
-            id: 1,
-            title: 'Project A',
-            subItems: ['Task 1', 'Task 2', 'Task 3'],
-        },
-        {
-            id: 2,
-            title: 'Project B',
-            subItems: ['Task 4', 'Task 5'],
-        },
-        {
-            id: 3,
-            title: 'Project C',
-            subItems: ['Task 6', 'Task 7', 'Task 8'],
-        },
-    ];
-    // API Documentation
-    inputsDoc = [
-        {
-            name: 'items',
-            type: 'Array<unknown>',
-            default: '[]',
-            description: 'Array of items to be displayed in the container',
-        },
-        {
-            name: 'mode',
-            type: "'move' | 'copy' | 'deepCopy'",
-            default: "'move'",
-            description: 'Mode for drag and drop operations',
-        },
-        {
-            name: 'directionDrag',
-            type: "'horizontal' | 'vertical'",
-            default: 'undefined',
-            description: 'Direction of drag movement',
-        },
-        {
-            name: 'viewEncapsulation',
-            type: "'emulated' | 'none'",
-            default: "'emulated'",
-            description: 'View encapsulation mode for styling',
-        },
-        {
-            name: 'disableDragContainer',
-            type: 'boolean',
-            default: 'undefined',
-            description: 'Whether to disable drag operations for the container',
-        },
-        {
-            name: 'acceptDragSameGroup',
-            type: 'boolean',
-            default: 'false',
-            description: 'Whether to accept drag operations within the same group',
-        },
-        {
-            name: 'placeholder',
-            type: 'boolean',
-            default: 'true',
-            description: 'Whether to show placeholder during drag',
-        },
-        {
-            name: 'groupName',
-            type: 'string',
-            default: "'groupDragAndDropDefault'",
-            description: 'Name of the group for drag and drop operations',
-        },
-        {
-            name: 'dropToGroupName',
-            type: 'Array<string> | null',
-            default: 'null',
-            description: 'List of group names that can accept drops from this container',
-        },
-        {
-            name: 'stylesOverride',
-            type: 'Array<{ className: string, styles: string }>',
-            default: 'undefined',
-            description: 'Custom styles to override default drag-drop styling',
-        },
-    ];
-    outputsDoc = [
-        {
-            name: 'outDragStartContainer',
-            type: 'IDragStart',
-            description: 'Event emitted when dragging starts in the container',
-        },
-        {
-            name: 'outDragOverContainer',
-            type: 'IDragOver',
-            description: 'Event emitted when dragging over the container',
-        },
-        {
-            name: 'outDragLeaveContainer',
-            type: 'IDragLeave',
-            description: 'Event emitted when dragging leaves the container',
-        },
-        {
-            name: 'outDragEndContainer',
-            type: 'IDragEnd',
-            description: 'Event emitted when dragging ends in the container',
-        },
-        {
-            name: 'outDroppedContainer',
-            type: 'IDrop',
-            description: 'Event emitted when an item is dropped in the container',
-        },
-        {
-            name: 'outDroppedContainerEmpty',
-            type: 'IDrop',
-            description: 'Event emitted when an item is dropped in an empty container',
-        },
-        {
-            name: 'outFunctionControl',
-            type: 'IDragDropFunctionControlEvent',
-            description: 'Event emitted to control drag-drop functionality',
-        },
-    ];
-    // Interface Documentation
-    interfacesDoc = [
-        {
-            name: 'IDragging',
-            code: `interface IDragging {
-  mousePosition: IMousePosition;
-  elementDrag: HTMLElement;
-  elementKeepContainer?: boolean;
-  itemDragInfo?: IItemDragInfo;
-}`,
-            description: 'Interface for drag operation events, containing information about the dragged element and mouse position',
-        },
-        {
-            name: 'IDragStart',
-            code: `interface IDragStart {
-  mousePosition: IMousePosition;
-  elementDrag: HTMLElement;
-  itemDragInfo?: IItemDragInfo;
-}`,
-            description: 'Interface for drag start events, triggered when dragging begins',
-        },
-        {
-            name: 'IDragOver',
-            code: `interface IDragOver {
-  mousePosition: IMousePosition;
-  elementDrag: HTMLElement;
-  elementDragOver: HTMLElement;
-  itemDragInfo?: IItemDragInfo;
-}`,
-            description: 'Interface for drag over events, triggered when an element is dragged over another element',
-        },
-        {
-            name: 'IDragLeave',
-            code: `interface IDragLeave {
-  elementDrag: HTMLElement;
-  elementDragLeave: HTMLElement;
-  itemDragInfo?: IItemDragInfo;
-}`,
-            description: 'Interface for drag leave events, triggered when a dragged element leaves another element',
-        },
-        {
-            name: 'IDragEnd',
-            code: `interface IDragEnd {
-  mousePosition: IMousePosition;
-  elementDrag: HTMLElement;
-  itemDragInfo?: IItemDragInfo;
-}`,
-            description: 'Interface for drag end events, triggered when dragging ends',
-        },
-        {
-            name: 'IDrop',
-            code: `interface IDrop {
-  elementDrag: HTMLElement;
-  elementDrop: HTMLElement;
-  itemDragInfo?: IItemDragInfo;
-}`,
-            description: 'Interface for drop events, triggered when an element is dropped',
-        },
-        {
-            name: 'IItemDragInfo',
-            code: `interface IItemDragInfo {
-  item: object;
-  itemsMove?: WritableSignal<Array<unknown>>;
-  indexDrag?: number;
-  indexDrop?: number;
-  itemsDrag: WritableSignal<Array<unknown>>;
-  itemsDrop?: WritableSignal<Array<unknown>>;
-  containerDrag?: HTMLElement;
-  containerDrop?: HTMLElement;
-}`,
-            description: 'Interface containing information about the dragged item and its containers',
-        },
-        {
-            name: 'IDragItemInContainerVirtualScroll',
-            code: `interface IDragItemInContainerVirtualScroll {
-  itemDragInfo?: IItemDragInfo;
-  elementDrag: HTMLElement;
-  distanceStartElementAndMouseTop: number;
-  distanceStartElementAndMouseLeft: number;
-  elementContainer?: HTMLElement;
-  dragBoundary?: boolean;
-  dragBoundaryAcceptMouseLeaveContainer?: boolean;
-  ignoreStopEvent?: boolean;
-}`,
-            description: 'Interface for virtual scrolling drag operations, containing information about drag boundaries and container elements',
-        },
-        {
-            name: 'IMousePosition',
-            code: `interface IMousePosition {
-  clientX: number;
-  clientY: number;
-}`,
-            description: 'Interface representing mouse position coordinates',
-        },
-        {
-            name: 'IDragDropFunctionControlEvent',
-            code: `interface IDragDropFunctionControlEvent {
-  setAttributeElementAndItemDrag: () => Promise<void>;
-}`,
-            description: 'Interface for drag and drop control functions',
-        },
-    ];
-    // Features
-    features = [
-        {
-            id: 1,
-            icon: '🔄',
-            title: 'Flexible Drag and Drop',
-            description: 'Support for container-to-container dragging with customizable group names and drop zones',
-        },
-        {
-            id: 2,
-            icon: '📜',
-            title: 'Virtual Scrolling',
-            description: 'Efficient handling of large lists with virtual scrolling support',
-        },
-        {
-            id: 3,
-            icon: '🎯',
-            title: 'Custom Boundaries',
-            description: 'Define custom drag boundaries and drop zones for precise control',
-        },
-        {
-            id: 4,
-            icon: '🎨',
-            title: 'Styling Options',
-            description: 'Customizable styles for drag items and containers',
-        },
-    ];
-    // Code Examples
-    codeExamples = [
-        {
-            id: 1,
-            title: 'Basic Usage',
-            code: `&lt;div LibsUiComponentsDragContainerDirective 
-  [(items)]="items"
-  [groupName]="'myGroup'"
-  [acceptDragSameGroup]="true"&gt;
-  @for (item of items; track item) {
-    &lt;div LibsUiDragItemDirective&gt;
-      {{ item }}
-    &lt;/div&gt;
-  }
-&lt;/div&gt;`,
-        },
-        {
-            id: 2,
-            title: 'Container-to-Container',
-            code: `&lt;div LibsUiComponentsDragContainerDirective 
-  [(items)]="sourceItems"
-  [groupName]="'source'"&gt;
-  @for (item of sourceItems; track item) {
-    &lt;div LibsUiDragItemDirective&gt;
-      {{ item }}
-    &lt;/div&gt;
-  }
-&lt;/div&gt;
-
-&lt;div LibsUiComponentsDragContainerDirective 
-  [(items)]="targetItems"
-  [groupName]="'target'"
-  [dropToGroupName]="['source']"&gt;
-  @for (item of targetItems; track item) {
-    &lt;div LibsUiDragItemDirective&gt;
-      {{ item }}
-    &lt;/div&gt;
-  }
-&lt;/div&gt;`,
-        },
-    ];
-    /**
-     * Copy text to clipboard
-     */
-    copyToClipboard(text) {
-        navigator.clipboard.writeText(text).then(() => {
-            alert('Copied to clipboard');
-        }, (err) => {
-            console.error('Could not copy text: ', err);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDragDropDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiDragDropDemoComponent, isStandalone: true, selector: "lib-drag-drop-demo", ngImport: i0, template: `
-    <div class="page-container">
-      <header>
-        <h1>Demo Drag and Drop Component</h1>
-        <p>Angular component library for drag and drop functionality</p>
-      </header>
-
-      <main>
-        <section class="intro-section">
-          <h2>Introduction</h2>
-          <p>
-            <code>&#64;libs-ui/components-drag-drop</code>
-            is a powerful Angular component that enables drag and drop functionality with features like virtual scrolling, multi-selection, and custom boundaries.
-          </p>
-        </section>
-
-        <section class="installation-section">
-          <h2>Installation</h2>
-          <p>To install the library, use npm or yarn:</p>
-
-          <div class="install-command">
-            <pre>
-              <code>npm install &#64;libs-ui/components-drag-drop</code>
-              <libs_ui-components-buttons-button
-                [label]="'Copy'"
-                (outClick)="copyToClipboard('npm install @libs-ui/components-drag-drop')" />
-            </pre>
-          </div>
-
-          <p>Or with yarn:</p>
-
-          <div class="install-command">
-            <pre>
-              <code>yarn add &#64;libs-ui/components-drag-drop</code>
-              <libs_ui-components-buttons-button
-                [label]="'Copy'"
-                (outClick)="copyToClipboard('yarn add @libs-ui/components-drag-drop')" />
-            </pre>
-          </div>
-        </section>
-
-        <section class="demo-section">
-          <h2>Live Demo</h2>
-          <div class="demo-container">
-            <!-- Basic List Demo -->
-            <div class="demo-example">
-              <h3>Basic List</h3>
-              <div class="list-container">
-                <div
-                  LibsUiComponentsDragContainerDirective
-                  [(items)]="basicItems"
-                  [acceptDragSameGroup]="true">
-                  @for (item of basicItems; track item) {
-                    <div
-                      class="list-item"
-                      LibsUiDragItemDirective>
-                      <span class="item-icon">📋</span>
-                      <span class="item-text">{{ item }}</span>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-
-            <!-- Kanban Board Demo -->
-            <div class="demo-example">
-              <h3>Kanban Board</h3>
-              <div class="kanban-board">
-                @for (column of columns; track column) {
-                  <div
-                    class="kanban-column"
-                    LibsUiComponentsDragContainerDirective
-                    [(items)]="column.items"
-                    [groupName]="column.id"
-                    [dropToGroupName]="columnsIds"
-                    [acceptDragSameGroup]="true">
-                    <h4>{{ column.title }}</h4>
-                    @for (item of column.items; track item) {
-                      <div
-                        class="kanban-item"
-                        LibsUiDragItemDirective>
-                        <div class="kanban-item-header">
-                          <span class="item-title">{{ item.title }}</span>
-                          <span
-                            class="item-status"
-                            [class]="'status-' + item.status">
-                            {{ item.status }}
-                          </span>
-                        </div>
-                        <p class="item-description">{{ item.description }}</p>
-                      </div>
-                    }
-                  </div>
-                }
-              </div>
-            </div>
-
-            <!-- Nested Containers Demo -->
-            <div class="demo-example">
-              <h3>Nested Containers copy</h3>
-              <div class="nested-container">
-                <div
-                  LibsUiComponentsDragContainerDirective
-                  [(items)]="nestedItems"
-                  [groupName]="'parent'"
-                  [mode]="'copy'"
-                  [acceptDragSameGroup]="true">
-                  @for (item of nestedItems; track item) {
-                    <div
-                      class="nested-item"
-                      LibsUiDragItemDirective>
-                      <div class="nested-item-header">
-                        <span class="item-title">{{ item.title }}</span>
-                      </div>
-                      <div class="nested-item-content">
-                        <div
-                          LibsUiComponentsDragContainerDirective
-                          [(items)]="item.subItems"
-                          [groupName]="'child'"
-                          [acceptDragSameGroup]="true">
-                          @for (subItem of item.subItems; track subItem) {
-                            <div
-                              class="sub-item"
-                              LibsUiDragItemDirective>
-                              {{ subItem }}
-                            </div>
-                          }
-                        </div>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section class="api-doc-section">
-          <h2>API Documentation</h2>
-
-          <h3>Inputs</h3>
-          <div class="table-container">
-            <table class="api-table">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Type</th>
-                  <th>Default</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                @for (input of inputsDoc; track input.name) {
-                  <tr>
-                    <td>
-                      <code>{{ input.name }}</code>
-                    </td>
-                    <td>
-                      <code>{{ input.type }}</code>
-                    </td>
-                    <td>{{ input.default }}</td>
-                    <td>{{ input.description }}</td>
-                  </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-
-          <h3>Outputs</h3>
-          <div class="table-container">
-            <table class="api-table">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Type</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                @for (output of outputsDoc; track output.name) {
-                  <tr>
-                    <td>
-                      <code>{{ output.name }}</code>
-                    </td>
-                    <td>
-                      <code>{{ output.type }}</code>
-                    </td>
-                    <td>{{ output.description }}</td>
-                  </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        <section class="interfaces-section">
-          <h2>Interfaces</h2>
-          <div class="interface-docs">
-            @for (interfaceItem of interfacesDoc; track interfaceItem.name) {
-              <div class="interface-item">
-                <h3>{{ interfaceItem.name }}</h3>
-                <pre><code>{{interfaceItem.code}}</code></pre>
-                <p>{{ interfaceItem.description }}</p>
-              </div>
-            }
-          </div>
-        </section>
-
-        <section class="features-section">
-          <h2>Features</h2>
-          <ul>
-            @for (feature of features; track feature.id) {
-              <li>
-                <span class="feature-icon">{{ feature.icon }}</span>
-                <div class="feature-info">
-                  <h3>{{ feature.title }}</h3>
-                  <p>{{ feature.description }}</p>
-                </div>
-              </li>
-            }
-          </ul>
-        </section>
-
-        <section class="usage-section">
-          <h2>Usage</h2>
-          <div class="code-examples">
-            @for (example of codeExamples; track example.id) {
-              <div class="code-example">
-                <h3>{{ example.title }}</h3>
-                <pre><code [innerHTML]="example.code"></code></pre>
-              </div>
-            }
-          </div>
-        </section>
-      </main>
-    </div>
-  `, isInline: true, styles: [".page-container{max-width:1200px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333}header{text-align:center;padding:40px 0;background-color:#fff;border-radius:8px;margin-bottom:30px;box-shadow:0 2px 5px #0000001a}header h1{font-size:2.5rem;color:#2c3e50;margin-bottom:10px}header p{font-size:1.2rem;color:#7f8c8d}section{background-color:#fff;border-radius:8px;padding:30px;margin-bottom:30px;box-shadow:0 2px 5px #0000001a}h2{font-size:1.8rem;color:#2c3e50;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #ecf0f1}h3{font-size:1.4rem;color:#34495e;margin-bottom:15px}h4{font-size:1.2rem;color:#34495e;margin-bottom:10px}p{margin-bottom:15px}code{font-family:Courier New,Courier,monospace;background-color:#f7f7f7;padding:2px 5px;border-radius:3px;font-size:.9em}pre{background-color:#f7f7f7;padding:15px;border-radius:5px;overflow-x:auto;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}pre code{background-color:transparent;padding:0}.installation-section .install-command{position:relative;margin-bottom:20px}.installation-section .copy-button{position:absolute;top:10px;right:10px;background:#3498db;color:#fff;border:none;border-radius:4px;padding:5px 10px;font-size:.9rem;cursor:pointer;transition:background .2s}.installation-section .copy-button:hover{background:#2980b9}.demo-container{display:grid;grid-template-columns:1fr;gap:30px}.demo-example{background:#f7f7f7;padding:20px;border-radius:8px;margin-bottom:20px}.list-container{max-width:400px;margin:20px auto}.list-item{padding:12px;margin:8px 0;background:#fff;border:1px solid #e0e0e0;border-radius:6px;display:flex;align-items:center;transition:transform .2s,box-shadow .2s}.list-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.item-icon{margin-right:12px;font-size:1.2em}.kanban-board{display:flex;gap:20px;padding:20px;overflow-x:auto}.kanban-column{flex:1;min-width:300px;background:#f5f5f5;padding:15px;border-radius:8px}.kanban-item{background:#fff;padding:12px;margin:8px 0;border-radius:6px;box-shadow:0 1px 3px #0000001a}.kanban-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.item-title{font-weight:500}.item-status{padding:4px 8px;border-radius:4px;font-size:.8em}.status-todo{background:#ffebee;color:#c62828}.status-in-progress{background:#fff3e0;color:#ef6c00}.status-done{background:#e8f5e9;color:#2e7d32}.item-description{font-size:.9em;color:#666}.nested-container{max-width:800px;margin:0 auto}.nested-item{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin:12px 0;overflow:hidden}.nested-item-header{padding:12px;background:#f5f5f5;border-bottom:1px solid #e0e0e0}.nested-item-content{padding:12px}.sub-item{padding:8px;margin:4px 0;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:4px}.api-doc-section{margin-bottom:40px}.table-container{overflow-x:auto;margin-bottom:30px}.api-table{width:100%;border-collapse:collapse;margin-bottom:20px}.api-table th,.api-table td{padding:12px 15px;text-align:left;border-bottom:1px solid #e1e1e1}.api-table th{background-color:#f5f5f5;font-weight:700}.api-table tbody tr:hover{background-color:#f9f9f9}.features-section ul{list-style:none}.features-section li{display:flex;margin-bottom:25px;align-items:flex-start}.feature-icon{font-size:2rem;margin-right:20px;min-width:40px;text-align:center}.feature-info{flex:1}.code-examples{display:grid;grid-template-columns:1fr;gap:20px}@media (min-width: 768px){.code-examples{grid-template-columns:repeat(2,1fr)}}@media (min-width: 992px){.code-examples{grid-template-columns:repeat(3,1fr)}}.code-example{border:1px solid #ecf0f1;border-radius:5px;padding:15px}@media (max-width: 768px){header{padding:30px 0}header h1{font-size:2rem}section{padding:20px}.kanban-board{flex-direction:column}.kanban-column{min-width:100%}.feature-icon{font-size:1.5rem;margin-right:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LibsUiComponentsDragContainerDirective, selector: "[LibsUiComponentsDragContainerDirective]", inputs: ["disableDragContainer", "mode", "directionDrag", "viewEncapsulation", "acceptDragSameGroup", "placeholder", "groupName", "dropToGroupName", "items", "stylesOverride"], outputs: ["itemsChange", "outDragStartContainer", "outDragOverContainer", "outDragLeaveContainer", "outDragEndContainer", "outDroppedContainer", "outDroppedContainerEmpty", "outFunctionControl"] }, { kind: "directive", type: LibsUiDragItemDirective, selector: "[LibsUiDragItemDirective]", inputs: ["fieldId", "item", "itemInContainerVirtualScroll", "throttleTimeHandlerDraggingEvent", "ignoreStopEvent", "onlyMouseDownStopEvent", "dragRootElement", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable", "ignoreUserSelectNone"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDragDropDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-drag-drop-demo', standalone: true, imports: [CommonModule, LibsUiComponentsDragContainerDirective, LibsUiDragItemDirective, LibsUiComponentsButtonsButtonComponent], template: `
-    <div class="page-container">
-      <header>
-        <h1>Demo Drag and Drop Component</h1>
-        <p>Angular component library for drag and drop functionality</p>
-      </header>
-
-      <main>
-        <section class="intro-section">
-          <h2>Introduction</h2>
-          <p>
-            <code>&#64;libs-ui/components-drag-drop</code>
-            is a powerful Angular component that enables drag and drop functionality with features like virtual scrolling, multi-selection, and custom boundaries.
-          </p>
-        </section>
-
-        <section class="installation-section">
-          <h2>Installation</h2>
-          <p>To install the library, use npm or yarn:</p>
-
-          <div class="install-command">
-            <pre>
-              <code>npm install &#64;libs-ui/components-drag-drop</code>
-              <libs_ui-components-buttons-button
-                [label]="'Copy'"
-                (outClick)="copyToClipboard('npm install @libs-ui/components-drag-drop')" />
-            </pre>
-          </div>
-
-          <p>Or with yarn:</p>
-
-          <div class="install-command">
-            <pre>
-              <code>yarn add &#64;libs-ui/components-drag-drop</code>
-              <libs_ui-components-buttons-button
-                [label]="'Copy'"
-                (outClick)="copyToClipboard('yarn add @libs-ui/components-drag-drop')" />
-            </pre>
-          </div>
-        </section>
-
-        <section class="demo-section">
-          <h2>Live Demo</h2>
-          <div class="demo-container">
-            <!-- Basic List Demo -->
-            <div class="demo-example">
-              <h3>Basic List</h3>
-              <div class="list-container">
-                <div
-                  LibsUiComponentsDragContainerDirective
-                  [(items)]="basicItems"
-                  [acceptDragSameGroup]="true">
-                  @for (item of basicItems; track item) {
-                    <div
-                      class="list-item"
-                      LibsUiDragItemDirective>
-                      <span class="item-icon">📋</span>
-                      <span class="item-text">{{ item }}</span>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-
-            <!-- Kanban Board Demo -->
-            <div class="demo-example">
-              <h3>Kanban Board</h3>
-              <div class="kanban-board">
-                @for (column of columns; track column) {
-                  <div
-                    class="kanban-column"
-                    LibsUiComponentsDragContainerDirective
-                    [(items)]="column.items"
-                    [groupName]="column.id"
-                    [dropToGroupName]="columnsIds"
-                    [acceptDragSameGroup]="true">
-                    <h4>{{ column.title }}</h4>
-                    @for (item of column.items; track item) {
-                      <div
-                        class="kanban-item"
-                        LibsUiDragItemDirective>
-                        <div class="kanban-item-header">
-                          <span class="item-title">{{ item.title }}</span>
-                          <span
-                            class="item-status"
-                            [class]="'status-' + item.status">
-                            {{ item.status }}
-                          </span>
-                        </div>
-                        <p class="item-description">{{ item.description }}</p>
-                      </div>
-                    }
-                  </div>
-                }
-              </div>
-            </div>
-
-            <!-- Nested Containers Demo -->
-            <div class="demo-example">
-              <h3>Nested Containers copy</h3>
-              <div class="nested-container">
-                <div
-                  LibsUiComponentsDragContainerDirective
-                  [(items)]="nestedItems"
-                  [groupName]="'parent'"
-                  [mode]="'copy'"
-                  [acceptDragSameGroup]="true">
-                  @for (item of nestedItems; track item) {
-                    <div
-                      class="nested-item"
-                      LibsUiDragItemDirective>
-                      <div class="nested-item-header">
-                        <span class="item-title">{{ item.title }}</span>
-                      </div>
-                      <div class="nested-item-content">
-                        <div
-                          LibsUiComponentsDragContainerDirective
-                          [(items)]="item.subItems"
-                          [groupName]="'child'"
-                          [acceptDragSameGroup]="true">
-                          @for (subItem of item.subItems; track subItem) {
-                            <div
-                              class="sub-item"
-                              LibsUiDragItemDirective>
-                              {{ subItem }}
-                            </div>
-                          }
-                        </div>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section class="api-doc-section">
-          <h2>API Documentation</h2>
-
-          <h3>Inputs</h3>
-          <div class="table-container">
-            <table class="api-table">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Type</th>
-                  <th>Default</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                @for (input of inputsDoc; track input.name) {
-                  <tr>
-                    <td>
-                      <code>{{ input.name }}</code>
-                    </td>
-                    <td>
-                      <code>{{ input.type }}</code>
-                    </td>
-                    <td>{{ input.default }}</td>
-                    <td>{{ input.description }}</td>
-                  </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-
-          <h3>Outputs</h3>
-          <div class="table-container">
-            <table class="api-table">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Type</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                @for (output of outputsDoc; track output.name) {
-                  <tr>
-                    <td>
-                      <code>{{ output.name }}</code>
-                    </td>
-                    <td>
-                      <code>{{ output.type }}</code>
-                    </td>
-                    <td>{{ output.description }}</td>
-                  </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        <section class="interfaces-section">
-          <h2>Interfaces</h2>
-          <div class="interface-docs">
-            @for (interfaceItem of interfacesDoc; track interfaceItem.name) {
-              <div class="interface-item">
-                <h3>{{ interfaceItem.name }}</h3>
-                <pre><code>{{interfaceItem.code}}</code></pre>
-                <p>{{ interfaceItem.description }}</p>
-              </div>
-            }
-          </div>
-        </section>
-
-        <section class="features-section">
-          <h2>Features</h2>
-          <ul>
-            @for (feature of features; track feature.id) {
-              <li>
-                <span class="feature-icon">{{ feature.icon }}</span>
-                <div class="feature-info">
-                  <h3>{{ feature.title }}</h3>
-                  <p>{{ feature.description }}</p>
-                </div>
-              </li>
-            }
-          </ul>
-        </section>
-
-        <section class="usage-section">
-          <h2>Usage</h2>
-          <div class="code-examples">
-            @for (example of codeExamples; track example.id) {
-              <div class="code-example">
-                <h3>{{ example.title }}</h3>
-                <pre><code [innerHTML]="example.code"></code></pre>
-              </div>
-            }
-          </div>
-        </section>
-      </main>
-    </div>
-  `, styles: [".page-container{max-width:1200px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333}header{text-align:center;padding:40px 0;background-color:#fff;border-radius:8px;margin-bottom:30px;box-shadow:0 2px 5px #0000001a}header h1{font-size:2.5rem;color:#2c3e50;margin-bottom:10px}header p{font-size:1.2rem;color:#7f8c8d}section{background-color:#fff;border-radius:8px;padding:30px;margin-bottom:30px;box-shadow:0 2px 5px #0000001a}h2{font-size:1.8rem;color:#2c3e50;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #ecf0f1}h3{font-size:1.4rem;color:#34495e;margin-bottom:15px}h4{font-size:1.2rem;color:#34495e;margin-bottom:10px}p{margin-bottom:15px}code{font-family:Courier New,Courier,monospace;background-color:#f7f7f7;padding:2px 5px;border-radius:3px;font-size:.9em}pre{background-color:#f7f7f7;padding:15px;border-radius:5px;overflow-x:auto;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}pre code{background-color:transparent;padding:0}.installation-section .install-command{position:relative;margin-bottom:20px}.installation-section .copy-button{position:absolute;top:10px;right:10px;background:#3498db;color:#fff;border:none;border-radius:4px;padding:5px 10px;font-size:.9rem;cursor:pointer;transition:background .2s}.installation-section .copy-button:hover{background:#2980b9}.demo-container{display:grid;grid-template-columns:1fr;gap:30px}.demo-example{background:#f7f7f7;padding:20px;border-radius:8px;margin-bottom:20px}.list-container{max-width:400px;margin:20px auto}.list-item{padding:12px;margin:8px 0;background:#fff;border:1px solid #e0e0e0;border-radius:6px;display:flex;align-items:center;transition:transform .2s,box-shadow .2s}.list-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.item-icon{margin-right:12px;font-size:1.2em}.kanban-board{display:flex;gap:20px;padding:20px;overflow-x:auto}.kanban-column{flex:1;min-width:300px;background:#f5f5f5;padding:15px;border-radius:8px}.kanban-item{background:#fff;padding:12px;margin:8px 0;border-radius:6px;box-shadow:0 1px 3px #0000001a}.kanban-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.item-title{font-weight:500}.item-status{padding:4px 8px;border-radius:4px;font-size:.8em}.status-todo{background:#ffebee;color:#c62828}.status-in-progress{background:#fff3e0;color:#ef6c00}.status-done{background:#e8f5e9;color:#2e7d32}.item-description{font-size:.9em;color:#666}.nested-container{max-width:800px;margin:0 auto}.nested-item{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin:12px 0;overflow:hidden}.nested-item-header{padding:12px;background:#f5f5f5;border-bottom:1px solid #e0e0e0}.nested-item-content{padding:12px}.sub-item{padding:8px;margin:4px 0;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:4px}.api-doc-section{margin-bottom:40px}.table-container{overflow-x:auto;margin-bottom:30px}.api-table{width:100%;border-collapse:collapse;margin-bottom:20px}.api-table th,.api-table td{padding:12px 15px;text-align:left;border-bottom:1px solid #e1e1e1}.api-table th{background-color:#f5f5f5;font-weight:700}.api-table tbody tr:hover{background-color:#f9f9f9}.features-section ul{list-style:none}.features-section li{display:flex;margin-bottom:25px;align-items:flex-start}.feature-icon{font-size:2rem;margin-right:20px;min-width:40px;text-align:center}.feature-info{flex:1}.code-examples{display:grid;grid-template-columns:1fr;gap:20px}@media (min-width: 768px){.code-examples{grid-template-columns:repeat(2,1fr)}}@media (min-width: 992px){.code-examples{grid-template-columns:repeat(3,1fr)}}.code-example{border:1px solid #ecf0f1;border-radius:5px;padding:15px}@media (max-width: 768px){header{padding:30px 0}header h1{font-size:2rem}section{padding:20px}.kanban-board{flex-direction:column}.kanban-column{min-width:100%}.feature-icon{font-size:1.5rem;margin-right:15px}}\n"] }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LibsUiComponentsDragContainerDirective, LibsUiComponentsDragScrollDirective, LibsUiDragDropDemoComponent, LibsUiDragItemDirective, LibsUiDragItemInContainerVirtualScrollDirective };
+export { LibsUiComponentsDragContainerDirective, LibsUiComponentsDragScrollDirective, LibsUiDragItemDirective, LibsUiDragItemInContainerVirtualScrollDirective };
 //# sourceMappingURL=libs-ui-components-drag-drop.mjs.map