@libs-ui/components-drag-drop 0.2.190 → 0.2.192

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

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, inject, ElementRef, Directive, model, output, effect, untracked } from '@angular/core';
+import { signal, Injectable, input, inject, ElementRef, Directive, model, output, effect, untracked, Component } from '@angular/core';
 import { get, checkMouseOverInContainer, cloneIBoundingClientRect, uuid, set, cloneDeep, getViewport, checkViewInScreen, getDragEventByElement } from '@libs-ui/utils';
 import { Subject, takeUntil, debounceTime, filter, fromEvent, tap, throttleTime } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 
 const styleContainer = (config, viewEncapsulation, groupID) => {
     const defaultConfig = [{
@@ -426,8 +428,8 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                         items.splice(indexDragOver, 0, item);
                         return [...items];
                     });
-                    indexSpliceListTo = indexDragOver;
                     this.setAttributeElementAndItemDrag(elementContainer, false, indexSpliceListTo);
+                    indexSpliceListTo = indexDragOver;
                 }
                 return;
             }
@@ -459,8 +461,8 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                         items.splice(childElementIndex, 1);
                         return [...items];
                     });
+                    indexSpliceListTo = -1;
                 }
-                indexSpliceListTo = -1;
                 this.removeAttributes(elementContainer, isDragging);
                 this.setIndexElement(elementContainer);
                 return;
@@ -470,8 +472,8 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                     items.splice(indexSpliceListTo, 1);
                     return [...items];
                 });
+                indexSpliceListTo = -1;
             }
-            indexSpliceListTo = -1;
         };
         const handlerDragging = (eventDragging) => {
             this.setAttributeElementAndItemDrag(elementContainer);
@@ -602,7 +604,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             if (this.groupID() !== elementDrop.getAttribute('groupID') || elementDrag.getAttribute('groupID') === elementDrop.getAttribute('groupID')) {
                 return;
             }
-            const indexDragOver = Number(elementDrop.getAttribute('index')).valueOf() - (elementDrop.getAttribute('dropContainer') ? 0 : 1);
+            const indexDragOver = this.groupID() !== elementDrag.getAttribute('groupID') ? Number(elementDrop.getAttribute('index')).valueOf() : Number(elementDrop.getAttribute('index')).valueOf() - (elementDrop.getAttribute('dropContainer') ? 0 : 1);
             const item = this.mode() === 'deepCopy' ? cloneDeep(itemDragInfo?.item) : itemDragInfo?.item;
             if (itemDragInfo) {
                 itemDragInfo.indexDrop = indexDragOver;
@@ -618,7 +620,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             });
             if (itemDragInfo && itemDragInfo.itemsMove && itemDragInfo.itemsMove()) {
                 itemDragInfo.itemsDrag.set([...itemDragInfo.itemsMove()]);
-                this.setAttributeElementAndItemDrag(elementContainer);
+                setTimeout(() => this.setAttributeElementAndItemDrag(elementContainer));
             }
             this.outDroppedContainer.emit(eventDrop);
             this.removeAttributes(elementContainer);
@@ -631,7 +633,8 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             }, {
                 name: 'OnDragOver',
                 event: this.dragDropService.OnDragOver,
-                functionCall: handlerDragOver
+                functionCall: handlerDragOver,
+                debounceTime: 5
             }, {
                 name: 'OnDragging',
                 event: this.dragDropService.OnDragging,
@@ -644,7 +647,8 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                 name: 'OnDrop',
                 event: this.dragDropService.OnDrop,
                 functionCall: handlerDrop
-            }].forEach((item) => (item.event.pipe(takeUntil(this.onDestroy)).subscribe(item.functionCall)));
+            }
+        ].forEach((item) => (item.event.pipe(debounceTime(item.debounceTime || 0), takeUntil(this.onDestroy)).subscribe(item.functionCall)));
     }
     /* */
     async setAttributeElementAndItemDrag(elementContainer, setItemDrag, indexInsert) {
@@ -928,7 +932,6 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
     ignoreStopEvent = input();
     onlyMouseDownStopEvent = input();
     dragRootElement = input();
-    groupName = input('groupDragAndDropDefault', { transform: value => value ?? 'groupDragAndDropDefault' });
     dragBoundary = input();
     dragBoundaryAcceptMouseLeaveContainer = input();
     elementContainer = input();
@@ -963,7 +966,6 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
                 element.setAttribute('item_id', get(this.item(), this.fieldId()));
             }
         }
-        element.setAttribute('groupName', this.groupName());
         element.classList.add(this.dragDropService.ClassItemDefine);
         this.dragDropService.OnDragging.pipe(throttleTime(this.throttleTimeHandlerDraggingEvent()), takeUntil(this.onDestroy)).subscribe((eventDragging) => {
             if (this.disable() || element.getAttribute('disableDragContainer') || (this.fieldId() && this.item() && eventDragging.elementDrag.getAttribute('item_id') === get(this.item(), this.fieldId()))) {
@@ -1161,7 +1163,7 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiDragItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiDragItemDirective, isStandalone: true, selector: "[LibsUiDragItemDirective]", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, itemInContainerVirtualScroll: { classPropertyName: "itemInContainerVirtualScroll", publicName: "itemInContainerVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, throttleTimeHandlerDraggingEvent: { classPropertyName: "throttleTimeHandlerDraggingEvent", publicName: "throttleTimeHandlerDraggingEvent", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopEvent: { classPropertyName: "ignoreStopEvent", publicName: "ignoreStopEvent", isSignal: true, isRequired: false, transformFunction: null }, onlyMouseDownStopEvent: { classPropertyName: "onlyMouseDownStopEvent", publicName: "onlyMouseDownStopEvent", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, dragBoundary: { classPropertyName: "dragBoundary", publicName: "dragBoundary", isSignal: true, isRequired: false, transformFunction: null }, dragBoundaryAcceptMouseLeaveContainer: { classPropertyName: "dragBoundaryAcceptMouseLeaveContainer", publicName: "dragBoundaryAcceptMouseLeaveContainer", isSignal: true, isRequired: false, transformFunction: null }, elementContainer: { classPropertyName: "elementContainer", publicName: "elementContainer", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outDragStart: "outDragStart", outDragOver: "outDragOver", outDragLeave: "outDragLeave", outDragEnd: "outDragEnd", outDropped: "outDropped" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiDragItemDirective, isStandalone: true, selector: "[LibsUiDragItemDirective]", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, itemInContainerVirtualScroll: { classPropertyName: "itemInContainerVirtualScroll", publicName: "itemInContainerVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, throttleTimeHandlerDraggingEvent: { classPropertyName: "throttleTimeHandlerDraggingEvent", publicName: "throttleTimeHandlerDraggingEvent", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopEvent: { classPropertyName: "ignoreStopEvent", publicName: "ignoreStopEvent", isSignal: true, isRequired: false, transformFunction: null }, onlyMouseDownStopEvent: { classPropertyName: "onlyMouseDownStopEvent", publicName: "onlyMouseDownStopEvent", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragBoundary: { classPropertyName: "dragBoundary", publicName: "dragBoundary", isSignal: true, isRequired: false, transformFunction: null }, dragBoundaryAcceptMouseLeaveContainer: { classPropertyName: "dragBoundaryAcceptMouseLeaveContainer", publicName: "dragBoundaryAcceptMouseLeaveContainer", isSignal: true, isRequired: false, transformFunction: null }, elementContainer: { classPropertyName: "elementContainer", publicName: "elementContainer", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outDragStart: "outDragStart", outDragOver: "outDragOver", outDragLeave: "outDragLeave", outDragEnd: "outDragEnd", outDropped: "outDropped" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiDragItemDirective, decorators: [{
             type: Directive,
@@ -1172,9 +1174,807 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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.13", ngImport: i0, type: LibsUiDragDropDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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</h3>
+              <div class="nested-container">
+                <div LibsUiComponentsDragContainerDirective 
+                     [(items)]="nestedItems"
+                     [groupName]="'parent'"
+                     [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"], 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.13", 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</h3>
+              <div class="nested-container">
+                <div LibsUiComponentsDragContainerDirective 
+                     [(items)]="nestedItems"
+                     [groupName]="'parent'"
+                     [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, LibsUiDragItemDirective, LibsUiDragItemInContainerVirtualScrollDirective };
+export { LibsUiComponentsDragContainerDirective, LibsUiComponentsDragScrollDirective, LibsUiDragDropDemoComponent, LibsUiDragItemDirective, LibsUiDragItemInContainerVirtualScrollDirective };
 //# sourceMappingURL=libs-ui-components-drag-drop.mjs.map