@libs-ui/components-drag-drop 0.1.1-1

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

@@ -0,0 +1,2043 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, input, inject, ElementRef, Directive, ChangeDetectorRef, 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 = [
+        {
+            className: 'libs-ui-drag-drop-container',
+            styles: `display:block;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item',
+            styles: `
+    cursor:move;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-placeholder',
+            styles: `visibility: hidden;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-origin-placeholder',
+            styles: `visibility: hidden;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-drop-placeholder',
+            styles: `visibility: hidden;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-dragging',
+            styles: `cursor:move;  user-select: none; `,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-disable',
+            styles: ` cursor:not-allowed;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-translate-bottom',
+            styles: `position:relative;animation: translateBottom 0.35s 1 ease;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-translate-top',
+            styles: `position:relative;animation: translateTop 0.35s 1 ease;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-translate-left',
+            styles: `position:relative;animation: translateLeft 0.35s 1 ease;`,
+        },
+        {
+            className: 'libs-ui-drag-drop-item-translate-right',
+            styles: `position:relative;animation: translateRight 0.35s 1 ease;`,
+        },
+    ];
+    config.forEach((item) => {
+        const itemExits = defaultConfig.find((defaultItem) => defaultItem.className === item.className);
+        if (itemExits) {
+            itemExits.styles = item.styles;
+            return;
+        }
+        defaultConfig.push(item);
+    });
+    const groupAttr = viewEncapsulation ? `[groupID~="${groupID}"]` : '';
+    let styles = '';
+    defaultConfig.forEach((item) => {
+        const style = `${groupAttr}.${item.className}{${item.styles}}`;
+        styles = `${styles}${style}\n`;
+    });
+    styles = ` @keyframes translateTop {
+    0% {
+      transform: translateY(30px);
+    }
+  
+    100% {
+      transform: translateX(0);
+    }
+  }
+  
+  @keyframes translateBottom {
+    0% {
+      transform: translateY(-30px);
+    }
+  
+    100% {
+      transform: translateX(0px);
+    }
+  }
+  @keyframes translateLeft {
+    0% {
+      transform: translateX(30px);
+    }
+  
+    100% {
+      transform: translateX(0);
+    }
+  }
+  
+  @keyframes translateRight {
+    0% {
+      transform: translateX(-30px);
+    }
+  
+    100% {
+      transform: translateX(0px);
+    }
+  }
+  ${styles}`.replace(/\n+/g, '');
+    return styles;
+};
+
+class MoLibsSharedDragDropService {
+    itemsClick = new Array();
+    onDragItemInContainerVirtualScroll = new Subject();
+    itemDragInfo;
+    container = signal(new Map());
+    targetItemDragFlag = 'item-drag-target';
+    classContainerDefine = 'libs-ui-drag-drop-container';
+    classItemDefine = 'libs-ui-drag-drop-item';
+    onDragging = new Subject();
+    onDragStart = new Subject();
+    onDragEnd = new Subject();
+    onDragOver = new Subject();
+    onDragLeave = new Subject();
+    onDrop = new Subject();
+    onDropContainer = new Subject();
+    onItemInit = new Subject();
+    get OnDragItemInContainerVirtualScroll() {
+        return this.onDragItemInContainerVirtualScroll;
+    }
+    set ItemDragInfo(data) {
+        this.itemDragInfo = data;
+    }
+    get ItemDragInfo() {
+        return this.itemDragInfo;
+    }
+    get Container() {
+        return this.container;
+    }
+    get TargetItemDragFlag() {
+        return this.targetItemDragFlag;
+    }
+    get ClassContainerDefine() {
+        return this.classContainerDefine;
+    }
+    get ClassItemDefine() {
+        return this.classItemDefine;
+    }
+    get OnDragging() {
+        return this.onDragging;
+    }
+    get OnDragOver() {
+        return this.onDragOver;
+    }
+    get OnDragLeave() {
+        return this.onDragLeave;
+    }
+    get OnDragStart() {
+        return this.onDragStart;
+    }
+    get OnDragEnd() {
+        return this.onDragEnd;
+    }
+    get OnDropContainer() {
+        return this.onDropContainer;
+    }
+    get OnDrop() {
+        return this.onDrop;
+    }
+    get OnItemInit() {
+        return this.onItemInit;
+    }
+    get ItemClick() {
+        return [...this.itemsClick];
+    }
+    set ItemClick(item) {
+        this.itemsClick.push(item);
+    }
+    resetItemClick() {
+        this.itemsClick.length = 0;
+    }
+    checkElementOverAcceptElementDrag(groupNameOfContainer, groupNameOfElementDrag, groupNameOfDropTo) {
+        if (groupNameOfContainer !== groupNameOfElementDrag && !groupNameOfDropTo) {
+            return false;
+        }
+        if (groupNameOfDropTo !== null &&
+            !groupNameOfDropTo
+                .toString()
+                .split(';')
+                .includes(groupNameOfContainer || 'undefinedName')) {
+            return false;
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MoLibsSharedDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MoLibsSharedDragDropService, providedIn: 'any' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MoLibsSharedDragDropService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsDragScrollDirective {
+    // #region PROPERTY
+    stopScroll = signal(false);
+    virtualScrollPageInfo = signal(undefined);
+    intervalScrollToElement = signal(undefined);
+    onDestroy = new Subject();
+    // #region INPUT
+    ignoreAutoScroll = input();
+    widthZoneDetect = input(16, { transform: (value) => value ?? 16 });
+    movementLength = input(6, { transform: (value) => value ?? 6 });
+    rootElementScroll = input();
+    virtualScrollerComponent = input();
+    // #region INJECT
+    elementRef = inject(ElementRef);
+    dragDropService = inject(MoLibsSharedDragDropService);
+    ngAfterViewInit() {
+        this.dragDropService.OnDragging.pipe(takeUntil(this.onDestroy)).subscribe((eventDragging) => this.checkAndScrollElementToPosition(eventDragging, this.ignoreAutoScroll()));
+        this.dragDropService.OnDragEnd.pipe(takeUntil(this.onDestroy)).subscribe(() => {
+            clearInterval(this.intervalScrollToElement());
+            if (this.virtualScrollPageInfo()) {
+                const firstElement = get(this.virtualScrollerComponent(), 'element')?.nativeElement.firstElementChild;
+                const isHorizontal = get(this.virtualScrollerComponent(), '_horizontal');
+                if (isHorizontal) {
+                    firstElement.style.transform = `scaleX(${this.virtualScrollPageInfo()?.scrollEndPosition})`;
+                }
+                if (!isHorizontal) {
+                    firstElement.style.transform = `scaleY(${this.virtualScrollPageInfo()?.scrollEndPosition})`;
+                }
+                this.virtualScrollPageInfo.set(undefined);
+            }
+            this.stopScroll.set(false);
+        });
+        this.dragDropService.OnDragStart.pipe(takeUntil(this.onDestroy)).subscribe(() => {
+            if (this.virtualScrollerComponent) {
+                this.virtualScrollerComponent()?.scrollToIndex(0);
+            }
+        });
+        if (!this.virtualScrollerComponent) {
+            return;
+        }
+        this.virtualScrollerComponent()
+            ?.vsChange.pipe(takeUntil(this.onDestroy))
+            .subscribe((pageInfo) => {
+            const items = get(this.virtualScrollerComponent, '_items');
+            if (items && items.length === pageInfo.endIndex) {
+                this.virtualScrollPageInfo.set(pageInfo);
+                const elementSetScroll = this.rootElementScroll() || this.elementRef.nativeElement;
+                const isHorizontal = get(this.virtualScrollerComponent, '_horizontal');
+                if (isHorizontal && pageInfo.scrollEndPosition < elementSetScroll.offsetWidth + elementSetScroll.scrollLeft + 3) {
+                    this.stopScroll.set(true);
+                    clearInterval(this.intervalScrollToElement());
+                    return;
+                }
+                if (!isHorizontal && pageInfo.scrollEndPosition < elementSetScroll.offsetHeight + elementSetScroll.scrollTop + 3) {
+                    this.stopScroll.set(true);
+                    clearInterval(this.intervalScrollToElement());
+                    return;
+                }
+            }
+            this.stopScroll.set(false);
+        });
+    }
+    /* FUNCTIONS */
+    checkAndScrollElementToPosition(eventDragging, ignoreAutoScroll) {
+        let elementSetScroll = this.rootElementScroll() || this.elementRef.nativeElement;
+        if (ignoreAutoScroll || !checkMouseOverInContainer(eventDragging.mousePosition, elementSetScroll)) {
+            return;
+        }
+        const rectElement = cloneIBoundingClientRect(this.elementRef.nativeElement.getBoundingClientRect());
+        if (this.rootElementScroll()) {
+            const rectElementScroll = this.rootElementScroll()?.getBoundingClientRect();
+            rectElement.left = rectElementScroll.left;
+            rectElement.top = rectElementScroll.top;
+        }
+        const { width, height, top, left } = rectElement;
+        const { clientX, clientY } = eventDragging.mousePosition;
+        const limitLeft = left + elementSetScroll.offsetWidth;
+        const limitTop = top + elementSetScroll.offsetHeight;
+        clearInterval(this.intervalScrollToElement());
+        if ((clientX < left || clientX > left + width) && (clientY < top || clientY > top + height)) {
+            return;
+        }
+        this.intervalScrollToElement.set(setInterval(() => {
+            elementSetScroll = this.rootElementScroll() || this.elementRef.nativeElement;
+            let directionTop = 0;
+            let directionLeft = 0;
+            if (top <= clientY && clientY <= top + this.widthZoneDetect()) {
+                elementSetScroll.scrollTop -= this.movementLength();
+                directionTop = -1;
+            }
+            if (limitTop - this.widthZoneDetect() <= clientY && clientY <= limitTop) {
+                if (this.stopScroll()) {
+                    return;
+                }
+                elementSetScroll.scrollTop += this.movementLength();
+                directionTop = 1;
+            }
+            if (limitLeft - this.widthZoneDetect() <= clientX && clientX <= limitLeft) {
+                if (this.stopScroll()) {
+                    return;
+                }
+                elementSetScroll.scrollLeft += this.movementLength();
+                directionLeft = +1;
+            }
+            if (left <= clientX && clientX <= left + this.widthZoneDetect()) {
+                elementSetScroll.scrollLeft -= this.movementLength();
+                directionLeft = -1;
+            }
+            if (elementSetScroll.scrollLeft && elementSetScroll.scrollLeft + elementSetScroll.offsetWidth >= elementSetScroll.scrollWidth) {
+                elementSetScroll.scrollLeft -= elementSetScroll.scrollLeft + elementSetScroll.offsetWidth - elementSetScroll.scrollWidth;
+            }
+            if (elementSetScroll.scrollTop && elementSetScroll.scrollTop + elementSetScroll.offsetHeight >= elementSetScroll.scrollHeight) {
+                elementSetScroll.scrollTop -= elementSetScroll.scrollTop + elementSetScroll.offsetHeight - elementSetScroll.scrollHeight;
+            }
+            if ((directionTop < 0 && !elementSetScroll.scrollTop) ||
+                (!elementSetScroll.scrollLeft && directionLeft < 0) ||
+                (directionTop && elementSetScroll.scrollHeight <= elementSetScroll.scrollTop + elementSetScroll.offsetHeight + 3) ||
+                (directionLeft && elementSetScroll.scrollWidth <= elementSetScroll.scrollLeft + elementSetScroll.offsetWidth + 3)) {
+                return clearInterval(this.intervalScrollToElement());
+            }
+        }, 10));
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsDragScrollDirective, isStandalone: true, selector: "[LibsUiComponentsDragScrollDirective]", inputs: { ignoreAutoScroll: { classPropertyName: "ignoreAutoScroll", publicName: "ignoreAutoScroll", isSignal: true, isRequired: false, transformFunction: null }, widthZoneDetect: { classPropertyName: "widthZoneDetect", publicName: "widthZoneDetect", isSignal: true, isRequired: false, transformFunction: null }, movementLength: { classPropertyName: "movementLength", publicName: "movementLength", isSignal: true, isRequired: false, transformFunction: null }, rootElementScroll: { classPropertyName: "rootElementScroll", publicName: "rootElementScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollerComponent: { classPropertyName: "virtualScrollerComponent", publicName: "virtualScrollerComponent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDragScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[LibsUiComponentsDragScrollDirective]',
+                    standalone: true,
+                }]
+        }] });
+
+class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollDirective {
+    // #region PROPERTY
+    groupID = signal(uuid());
+    isDragOver = signal(false);
+    cdr = inject(ChangeDetectorRef);
+    // #region INPUT
+    disableDragContainer = input();
+    mode = input('move', { transform: (value) => value ?? 'move' });
+    directionDrag = input();
+    viewEncapsulation = input('emulated', { transform: (value) => value ?? 'emulated' });
+    acceptDragSameGroup = input(false, { transform: (value) => value ?? false });
+    placeholder = input(true, { transform: (value) => value ?? true });
+    groupName = input('groupDragAndDropDefault', { transform: (value) => value ?? 'groupDragAndDropDefault' }); // nếu các group có tên trùng nhau sẽ được drop
+    dropToGroupName = input(null); // nếu item trong các group A được drop vào group B nhưng group B không được drop vào group A
+    items = model.required();
+    stylesOverride = input();
+    // #region OUTPUT
+    outDragStartContainer = output();
+    outDragOverContainer = output();
+    outDragLeaveContainer = output();
+    outDragEndContainer = output();
+    outDroppedContainer = output();
+    outDroppedContainerEmpty = output();
+    outFunctionControl = output();
+    constructor() {
+        super();
+        const element = this.elementRef.nativeElement;
+        const container = { element };
+        this.dragDropService.Container().set(this.groupID(), container);
+        effect(() => {
+            const elementScroll = this.rootElementScroll();
+            if (!elementScroll) {
+                return;
+            }
+            untracked(() => {
+                set(container, 'elementScroll', elementScroll);
+            });
+        });
+        effect(() => {
+            if (this.directionDrag() && this.elementRef.nativeElement) {
+                this.setAttributeElementAndItemDrag(this.elementRef.nativeElement);
+            }
+        });
+        effect(() => {
+            if (this.disableDragContainer() && this.elementRef.nativeElement) {
+                this.setAttributeElementAndItemDrag(this.elementRef.nativeElement);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.outFunctionControl.emit(this.FunctionsControl);
+        this.outDroppedContainer.subscribe((eventDropped) => {
+            this.dragDropService.OnDropContainer.next(eventDropped);
+        });
+        this.onDestroy.subscribe(() => {
+            if (indexSpliceListTo > -1) {
+                this.items.update((items) => {
+                    items.splice(indexSpliceListTo, 1);
+                    return [...items];
+                });
+            }
+            this.dragDropService.Container().delete(this.groupID());
+        });
+        const elementContainer = this.elementRef.nativeElement;
+        this.initStyleAndAttribute(elementContainer, true);
+        this.dragDropService.OnItemInit.pipe(debounceTime(250), filter((groupName) => groupName === this.groupName()), takeUntil(this.onDestroy)).subscribe(() => this.initStyleAndAttribute(elementContainer));
+        const styleTag = document.createElement('style');
+        styleTag.textContent = styleContainer(this.stylesOverride() || [], this.viewEncapsulation(), this.groupID());
+        elementContainer.appendChild(styleTag);
+        elementContainer.classList.add(this.dragDropService.ClassContainerDefine);
+        const handlerDragStart = (eventDragStart) => {
+            this.setAttributeElementAndItemDrag(elementContainer, true);
+            if (this.groupID() === eventDragStart.elementDrag.getAttribute('groupID')) {
+                this.outDragStartContainer.emit({ ...eventDragStart, itemDragInfo: this.dragDropService.ItemDragInfo });
+            }
+        };
+        const storeIndex = { indexDrag: -1, indexDragOver: -1 };
+        let indexSpliceListTo = -1;
+        const handlerDragOver = (eventDragOver) => {
+            const { elementDrag, elementDragOver } = eventDragOver;
+            if (this.disableDragContainer() || !this.dragDropService.checkElementOverAcceptElementDrag(this.groupName(), elementDrag.getAttribute('groupName'), elementDrag.getAttribute('dropToGroupName'))) {
+                return;
+            }
+            const indexDrag = Number(elementDrag.getAttribute('index')).valueOf();
+            const indexDragOver = Number(elementDragOver.getAttribute('index')).valueOf();
+            const idGroupElementDrag = elementDrag.getAttribute('groupID');
+            const idGroupElementDragOver = elementDragOver.getAttribute('groupID');
+            if (this.groupID() !== idGroupElementDrag || idGroupElementDrag !== idGroupElementDragOver) {
+                // xử lý cho item drag over qua 1 item khác container
+                if (idGroupElementDragOver === this.groupID() && this.placeholder()) {
+                    const item = this.mode() === 'copy' ? cloneDeep(this.dragDropService.ItemDragInfo?.item) : this.dragDropService.ItemDragInfo?.item;
+                    this.items.update((items) => {
+                        if (indexSpliceListTo >= 0) {
+                            items.splice(indexSpliceListTo, 1);
+                        }
+                        items.splice(indexDragOver, 0, item);
+                        return [...items];
+                    });
+                    indexSpliceListTo = indexDragOver;
+                    this.cdr.detectChanges();
+                    this.setAttributeElementAndItemDrag(elementContainer, false, indexSpliceListTo);
+                }
+                return;
+            }
+            if (!this.acceptDragSameGroup() ||
+                indexDrag < 0 ||
+                indexDragOver < 0 ||
+                !this.items().length ||
+                indexDrag > this.items().length ||
+                indexDragOver > this.items().length ||
+                (storeIndex.indexDrag === indexDrag && storeIndex.indexDragOver === indexDragOver)) {
+                return;
+            }
+            // xử lý cho item drag over qua 1 item cùng container
+            const itemDrag = this.items()[indexDrag];
+            this.setAnimationElementDragOver(indexDrag, indexDragOver, elementDragOver);
+            storeIndex.indexDrag = indexDrag;
+            storeIndex.indexDragOver = indexDragOver;
+            this.items.update((items) => {
+                items.splice(indexDrag, 1);
+                items.splice(indexDragOver, 0, itemDrag);
+                return [...items];
+            });
+            elementDrag.setAttribute('index', indexDragOver.toString());
+            this.cdr.detectChanges();
+            this.setAttributeElementAndItemDrag(elementContainer);
+        };
+        const removePlaceholderDrag = (eventDrag, isDragging) => {
+            clearInterval(this.intervalScrollToElement());
+            storeIndex.indexDrag = -1;
+            storeIndex.indexDragOver = -1;
+            const childrenElement = elementContainer.getElementsByClassName(this.dragDropService.ClassItemDefine);
+            if (!checkMouseOverInContainer(eventDrag.mousePosition, this.rootElementScroll() || elementContainer)) {
+                const childElementIndex = Array.from(childrenElement).findIndex((child) => child.classList.contains('libs-ui-drag-drop-item-drop-placeholder'));
+                if (childElementIndex >= 0 && this.groupID() !== eventDrag.elementDrag.getAttribute('groupID')) {
+                    this.items.update((items) => {
+                        items.splice(childElementIndex, 1);
+                        return [...items];
+                    });
+                }
+                indexSpliceListTo = -1;
+                this.removeAttributes(elementContainer, isDragging);
+                this.setIndexElement(elementContainer);
+                return;
+            }
+            if (indexSpliceListTo >= 0) {
+                this.items.update((items) => {
+                    items.splice(indexSpliceListTo, 1);
+                    return [...items];
+                });
+            }
+            indexSpliceListTo = -1;
+        };
+        const handlerDragging = (eventDragging) => {
+            this.setAttributeElementAndItemDrag(elementContainer);
+            const { elementDrag } = eventDragging;
+            const fieldIdItem = elementDrag.getAttribute('field_id');
+            const idItemDrag = elementDrag.getAttribute('item_id');
+            if (fieldIdItem && idItemDrag && this.items().find((item) => get(item, fieldIdItem) === idItemDrag)) {
+                const childrenElement = elementContainer.getElementsByClassName(this.dragDropService.ClassItemDefine);
+                const childElement = Array.from(childrenElement).find((child) => child.getAttribute('item_id') === idItemDrag);
+                if (this.items() === eventDragging.itemDragInfo?.itemsDrag() && childElement && !childElement.classList.contains('libs-ui-drag-drop-item-drop-placeholder') && !childElement.getAttribute(this.dragDropService.TargetItemDragFlag)) {
+                    childElement.setAttribute(this.dragDropService.TargetItemDragFlag, 'true');
+                    this.groupID.set(elementDrag.getAttribute('groupID') || '');
+                    styleTag.remove();
+                    styleTag.textContent = styleContainer(this.stylesOverride() || [], this.viewEncapsulation(), this.groupID());
+                    elementContainer.appendChild(styleTag);
+                    this.setAttributeElementAndItemDrag(elementContainer, true);
+                }
+            }
+            if (this.disableDragContainer()) {
+                return;
+            }
+            if (this.groupID() === elementDrag.getAttribute('groupID') && !this.acceptDragSameGroup()) {
+                this.checkAndScrollElementToPosition(eventDragging, this.ignoreAutoScroll() || !this.acceptDragSameGroup());
+                return;
+            }
+            if (!checkMouseOverInContainer(eventDragging.mousePosition, this.rootElementScroll() || elementContainer)) {
+                if (this.isDragOver()) {
+                    this.isDragOver.set(false);
+                    this.outDragLeaveContainer.emit({ ...eventDragging, elementDragLeave: elementContainer });
+                }
+                return removePlaceholderDrag(eventDragging, true);
+            }
+            this.checkAndScrollElementToPosition(eventDragging, this.ignoreAutoScroll());
+            // Đoạn code xử lý cho việc kéo một element vào 1 container nhưng container không có item hoặc item drag không over qua item trong container
+            if (!this.isDragOver()) {
+                elementContainer.classList.add('libs-ui-drag-drop-container-dragover');
+                this.isDragOver.set(true);
+                this.outDragOverContainer.emit({ ...eventDragging, elementDragOver: elementContainer });
+            }
+            const eventDragOver = { ...eventDragging, elementDragOver: elementContainer };
+            if (!this.items().length) {
+                eventDragOver.elementDragOver = {
+                    getAttribute: (name) => {
+                        if (name === 'groupID') {
+                            return this.groupID();
+                        }
+                        if (name !== 'index') {
+                            return null;
+                        }
+                        return 0;
+                    },
+                };
+                this.dragDropService.OnDragOver.next(eventDragOver);
+                return;
+            }
+            const childrenElement = elementContainer.getElementsByClassName(this.dragDropService.ClassItemDefine);
+            let childElement = Array.from(childrenElement).find((child) => checkMouseOverInContainer(eventDragging.mousePosition, child));
+            if (childElement) {
+                // nếu tìm thấy thì sẽ nhận qua sự kiện của drag-item.directive emit
+                return;
+            }
+            childElement = Array.from(childrenElement).pop();
+            if (childElement) {
+                eventDragOver.elementDragOver = childElement;
+                this.dragDropService.OnDragOver.next(eventDragOver);
+            }
+        };
+        const handlerDragEnd = (eventDragEnd) => {
+            if (this.disableDragContainer()) {
+                return;
+            }
+            let rect = undefined;
+            if (this.rootElementScroll() || elementContainer) {
+                rect = (this.rootElementScroll() || elementContainer)?.getBoundingClientRect();
+            }
+            removePlaceholderDrag(eventDragEnd);
+            const { elementDrag, mousePosition, itemDragInfo } = eventDragEnd;
+            if (this.groupID() === elementDrag.getAttribute('groupID')) {
+                this.outDragEndContainer.emit({ ...eventDragEnd });
+            }
+            if (!checkMouseOverInContainer(mousePosition, this.rootElementScroll() || elementContainer, rect)) {
+                return;
+            }
+            const eventDrop = { elementDrag: elementDrag, elementDrop: elementContainer, itemDragInfo: itemDragInfo };
+            if (this.disableDragContainer() || !this.dragDropService.checkElementOverAcceptElementDrag(this.groupName(), elementDrag.getAttribute('groupName'), elementDrag.getAttribute('dropToGroupName'))) {
+                return;
+            }
+            const childrenElement = elementContainer.getElementsByClassName(this.dragDropService.ClassItemDefine);
+            const childElement = Array.from(childrenElement).find((child) => checkMouseOverInContainer(mousePosition, child));
+            if (childElement) {
+                eventDrop.elementDrop = childElement;
+                this.dragDropService.OnDrop.next(eventDrop);
+                return;
+            }
+            eventDrop.elementDrop = {
+                getAttribute: (name) => {
+                    if (name === 'dropContainer') {
+                        return true;
+                    }
+                    if (name === 'groupID') {
+                        return this.groupID();
+                    }
+                    if (name !== 'index') {
+                        return null;
+                    }
+                    return childrenElement.length;
+                },
+            };
+            this.dragDropService.OnDrop.next(eventDrop);
+        };
+        const handlerDrop = (eventDrop) => {
+            if (this.disableDragContainer()) {
+                return;
+            }
+            const { elementDrag, elementDrop, itemDragInfo } = eventDrop;
+            if (this.groupID() === elementDrag.getAttribute('groupID') && this.groupID() === elementDrop.getAttribute('groupID')) {
+                if (itemDragInfo) {
+                    itemDragInfo.indexDrop = Number(elementDrop.getAttribute('index')).valueOf();
+                    itemDragInfo.itemsDrop = this.items;
+                    itemDragInfo.containerDrop = elementContainer;
+                }
+                if (this.acceptDragSameGroup()) {
+                    this.outDroppedContainer.emit(eventDrop);
+                }
+                this.removeAttributes(elementContainer);
+                this.setIndexElement(elementContainer);
+                return;
+            }
+            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 item = this.mode() === 'copy' ? cloneDeep(itemDragInfo?.item) : itemDragInfo?.item;
+            if (itemDragInfo) {
+                itemDragInfo.indexDrop = indexDragOver;
+                itemDragInfo.itemsDrop = this.items;
+                itemDragInfo.containerDrop = elementContainer;
+            }
+            if (!this.items().length) {
+                this.outDroppedContainerEmpty.emit(eventDrop);
+            }
+            this.items.update((items) => {
+                items.splice(indexDragOver, 0, item);
+                return [...items];
+            });
+            if (itemDragInfo && itemDragInfo.itemsMove && itemDragInfo.itemsMove()) {
+                itemDragInfo.itemsDrag.set([...itemDragInfo.itemsMove()]);
+                this.setAttributeElementAndItemDrag(elementContainer);
+            }
+            this.outDroppedContainer.emit(eventDrop);
+            this.removeAttributes(elementContainer);
+            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,
+            },
+        ].forEach((item) => item.event.pipe(takeUntil(this.onDestroy)).subscribe(item.functionCall));
+    }
+    get FunctionsControl() {
+        return {
+            setAttributeElementAndItemDrag: () => this.setAttributeElementAndItemDrag(this.elementRef.nativeElement),
+        };
+    }
+    /* */
+    async setAttributeElementAndItemDrag(elementContainer, setItemDrag, indexInsert) {
+        const childrenElement = elementContainer.getElementsByClassName(this.dragDropService.ClassItemDefine);
+        let index = -1;
+        elementContainer.setAttribute('groupID', this.groupID());
+        elementContainer.removeAttribute('disableDragContainer');
+        if (this.disableDragContainer()) {
+            elementContainer.setAttribute('disableDragContainer', `${this.disableDragContainer()}`);
+        }
+        if (this.groupName()) {
+            elementContainer.setAttribute('groupName', this.groupName() || '');
+        }
+        Array.from(childrenElement).forEach((childElement) => {
+            if (!childElement.hasAttribute('groupName') || childElement.getAttribute('groupName') === this.groupName()) {
+                childElement.setAttribute('groupID', this.groupID());
+            }
+            if (childElement.getAttribute('groupID') !== this.groupID()) {
+                return;
+            }
+            index += 1;
+            childElement.setAttribute('index', `${index}`);
+            childElement.removeAttribute('disableDragContainer');
+            if (this.disableDragContainer()) {
+                childElement.setAttribute('disableDragContainer', `${this.disableDragContainer()}`);
+            }
+            if (this.groupName() && !childElement.hasAttribute('groupName')) {
+                childElement.setAttribute('groupName', this.groupName() || '');
+            }
+            if (this.placeholder()) {
+                childElement.setAttribute('placeholder', `${this.placeholder()}`);
+            }
+            if (this.dropToGroupName()) {
+                childElement.setAttribute('dropToGroupName', `${this.dropToGroupName()?.join(';')}`);
+            }
+            if (indexInsert === index && this.placeholder()) {
+                if (!childElement.classList.contains('libs-ui-drag-drop-item-placeholder')) {
+                    childElement.classList.add('libs-ui-drag-drop-item-placeholder');
+                }
+                if (!childElement.classList.contains('libs-ui-drag-drop-item-drop-placeholder')) {
+                    childElement.classList.add('libs-ui-drag-drop-item-drop-placeholder');
+                }
+            }
+            if (setItemDrag && childElement.getAttribute(this.dragDropService.TargetItemDragFlag) && this.items().length >= index) {
+                if (this.placeholder()) {
+                    if (!childElement.classList.contains('libs-ui-drag-drop-item-placeholder')) {
+                        childElement.classList.add('libs-ui-drag-drop-item-placeholder');
+                    }
+                    if (!childElement.classList.contains('libs-ui-drag-drop-item-origin-placeholder')) {
+                        childElement.classList.add('libs-ui-drag-drop-item-origin-placeholder');
+                    }
+                }
+                this.dragDropService.ItemDragInfo = { item: this.items()[index], indexDrag: index, itemsDrag: this.items, containerDrag: elementContainer, itemsMove: signal([...this.items()]) };
+                if (this.mode() === 'move') {
+                    this.dragDropService.ItemDragInfo.itemsMove?.update((items) => {
+                        items.splice(index, 1);
+                        return [...items];
+                    });
+                }
+            }
+        });
+    }
+    initStyleAndAttribute(elementContainer, hasRemoveAttribute = false) {
+        this.setAttributeElementAndItemDrag(elementContainer);
+        if (hasRemoveAttribute) {
+            this.removeAttributes(elementContainer);
+        }
+        this.setIndexElement(elementContainer);
+    }
+    setAnimationElementDragOver(indexDrag, indexDragOver, elementDragOver) {
+        if (!this.directionDrag() || !elementDragOver) {
+            return;
+        }
+        if (this.directionDrag() === 'vertical') {
+            elementDragOver.classList.remove('libs-ui-drag-drop-item-translate-bottom');
+            elementDragOver.classList.remove('libs-ui-drag-drop-item-translate-top');
+            if (indexDrag > indexDragOver) {
+                elementDragOver.classList.add('libs-ui-drag-drop-item-translate-bottom');
+            }
+            if (indexDrag < indexDragOver) {
+                elementDragOver.classList.add('libs-ui-drag-drop-item-translate-top');
+            }
+            return;
+        }
+        elementDragOver.classList.remove('libs-ui-drag-drop-item-translate-left');
+        elementDragOver.classList.remove('libs-ui-drag-drop-item-translate-right');
+        if (indexDrag > indexDragOver) {
+            elementDragOver.classList.add('libs-ui-drag-drop-item-translate-right');
+        }
+        if (indexDrag < indexDragOver) {
+            elementDragOver.classList.add('libs-ui-drag-drop-item-translate-left');
+        }
+    }
+    setIndexElement(elementContainer) {
+        const childrenElement = elementContainer.getElementsByClassName(this.dragDropService.ClassItemDefine);
+        let index = -1;
+        Array.from(childrenElement).forEach((childElement) => {
+            if (childElement.getAttribute('groupID') !== this.groupID()) {
+                return;
+            }
+            index += 1;
+            childElement.setAttribute('index', `${index}`);
+        });
+    }
+    removeAttributes(elementContainer, ignoreRemoveClassItemOriginPlaceholder) {
+        const childrenElement = elementContainer.getElementsByClassName(this.dragDropService.ClassItemDefine);
+        elementContainer.classList.remove('libs-ui-drag-drop-container-dragover');
+        Array.from(childrenElement).forEach((childElement) => {
+            if (childElement.getAttribute('groupID') !== this.groupID()) {
+                return;
+            }
+            childElement.removeAttribute('index');
+            if (!this.dropToGroupName() || !this.dropToGroupName()?.length) {
+                childElement.removeAttribute('dropToGroupName');
+            }
+            if (!this.placeholder()) {
+                childElement.removeAttribute('placeholder');
+            }
+            if (this.placeholder()) {
+                childElement.classList.remove('libs-ui-drag-drop-item-placeholder');
+                if (!ignoreRemoveClassItemOriginPlaceholder) {
+                    childElement.classList.remove('libs-ui-drag-drop-item-origin-placeholder');
+                }
+                childElement.classList.remove('libs-ui-drag-drop-item-drop-placeholder');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDragContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsDragContainerDirective, isStandalone: true, selector: "[LibsUiComponentsDragContainerDirective]", inputs: { disableDragContainer: { classPropertyName: "disableDragContainer", publicName: "disableDragContainer", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, directionDrag: { classPropertyName: "directionDrag", publicName: "directionDrag", isSignal: true, isRequired: false, transformFunction: null }, viewEncapsulation: { classPropertyName: "viewEncapsulation", publicName: "viewEncapsulation", isSignal: true, isRequired: false, transformFunction: null }, acceptDragSameGroup: { classPropertyName: "acceptDragSameGroup", publicName: "acceptDragSameGroup", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, dropToGroupName: { classPropertyName: "dropToGroupName", publicName: "dropToGroupName", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, stylesOverride: { classPropertyName: "stylesOverride", publicName: "stylesOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", outDragStartContainer: "outDragStartContainer", outDragOverContainer: "outDragOverContainer", outDragLeaveContainer: "outDragLeaveContainer", outDragEndContainer: "outDragEndContainer", outDroppedContainer: "outDroppedContainer", outDroppedContainerEmpty: "outDroppedContainerEmpty", outFunctionControl: "outFunctionControl" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDragContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[LibsUiComponentsDragContainerDirective]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+class LibsUiDragItemInContainerVirtualScrollDirective {
+    // #region PROPERTY
+    onDestroy = new Subject();
+    // #region OUTPUT
+    outDragEndContainer = output();
+    // #region INJECT
+    dragDropService = inject(MoLibsSharedDragDropService);
+    ngAfterViewInit() {
+        const addClass = () => {
+            document.body.classList.remove('!select-none');
+            document.body.classList.remove('!cursor-move');
+        };
+        const removeClass = () => {
+            document.body.classList.add('!select-none');
+            document.body.classList.add('!cursor-move');
+        };
+        this.dragDropService.OnDragEnd.pipe(takeUntil(this.onDestroy)).subscribe((e) => {
+            this.outDragEndContainer.emit(e);
+        });
+        this.dragDropService.OnDragItemInContainerVirtualScroll.pipe(takeUntil(this.onDestroy)).subscribe((dragItemInContainerVirtualScrollEvent) => {
+            addClass();
+            const stopEventMouse = (mouseEvent) => {
+                if (!dragItemInContainerVirtualScrollEvent.ignoreStopEvent) {
+                    mouseEvent.preventDefault();
+                    mouseEvent.stopPropagation();
+                }
+            };
+            const documentMouseUp = fromEvent(document, 'mouseup').pipe(tap((eventMouseUp) => {
+                this.updateMouseEventsWhenMoveOverIframe('auto');
+                stopEventMouse(eventMouseUp);
+                const mousePosition = { clientX: eventMouseUp.clientX, clientY: eventMouseUp.clientY };
+                if (dragItemInContainerVirtualScrollEvent.dragBoundary && dragItemInContainerVirtualScrollEvent.dragBoundaryAcceptMouseLeaveContainer) {
+                    const result = this.getClientPosition(dragItemInContainerVirtualScrollEvent.elementDrag, mousePosition, dragItemInContainerVirtualScrollEvent.distanceStartElementAndMouseLeft, dragItemInContainerVirtualScrollEvent.distanceStartElementAndMouseTop, dragItemInContainerVirtualScrollEvent.dragBoundary, dragItemInContainerVirtualScrollEvent.elementContainer);
+                    mousePosition.clientX = result.clientX;
+                    mousePosition.clientY = result.clientY;
+                }
+                const dragEndEvent = { mousePosition, elementDrag: dragItemInContainerVirtualScrollEvent.elementDrag, itemDragInfo: this.dragDropService.ItemDragInfo };
+                this.dragDropService.ItemDragInfo = undefined;
+                this.dragDropService.OnDragEnd.next(dragEndEvent);
+                dragItemInContainerVirtualScrollEvent.elementDrag.remove();
+                removeClass();
+            }));
+            fromEvent(document, 'mousemove')
+                .pipe(tap((eventMousemove) => {
+                stopEventMouse(eventMousemove);
+                const { clientX, clientY } = eventMousemove;
+                const mousePosition = { clientX, clientY };
+                const result = this.getClientPosition(dragItemInContainerVirtualScrollEvent.elementDrag, mousePosition, dragItemInContainerVirtualScrollEvent.distanceStartElementAndMouseLeft, dragItemInContainerVirtualScrollEvent.distanceStartElementAndMouseTop, dragItemInContainerVirtualScrollEvent.dragBoundary, dragItemInContainerVirtualScrollEvent.elementContainer);
+                const elementKeepContainer = result.elementKeepContainer;
+                const left = result.clientX - dragItemInContainerVirtualScrollEvent.distanceStartElementAndMouseLeft;
+                const top = result.clientY - dragItemInContainerVirtualScrollEvent.distanceStartElementAndMouseTop;
+                if (dragItemInContainerVirtualScrollEvent.dragBoundary && dragItemInContainerVirtualScrollEvent.dragBoundaryAcceptMouseLeaveContainer) {
+                    if (clientX < result.viewport.left) {
+                        mousePosition.clientX = result.viewport.left;
+                    }
+                    if (clientX > result.viewport.width) {
+                        mousePosition.clientX = result.viewport.width;
+                    }
+                    if (clientY < result.viewport.top) {
+                        mousePosition.clientY = result.viewport.top;
+                    }
+                    if (clientY > result.viewport.height) {
+                        mousePosition.clientY = result.viewport.height;
+                    }
+                }
+                dragItemInContainerVirtualScrollEvent.elementDrag.style.left = `${left}px`;
+                dragItemInContainerVirtualScrollEvent.elementDrag.style.top = `${top}px`;
+                this.dragDropService.OnDragging.next({ mousePosition, elementDrag: dragItemInContainerVirtualScrollEvent.elementDrag, elementKeepContainer, itemDragInfo: this.dragDropService.ItemDragInfo });
+            }), takeUntil(documentMouseUp), takeUntil(this.onDestroy))
+                .subscribe();
+        });
+    }
+    /* FUNCTIONS */
+    getClientPosition(element, mousePosition, distanceStartElementAndMouseLeft, distanceStartElementAndMouseTop, dragBoundary, elementContainer) {
+        let viewport = getViewport();
+        const rectElement = element.getBoundingClientRect();
+        const containerById = this.dragDropService.Container().get(element.getAttribute('groupID') || '');
+        const containerItem = elementContainer || containerById?.elementScroll || containerById?.element || document.body;
+        let { clientX, clientY } = mousePosition;
+        viewport.left = 0;
+        viewport.top = 0;
+        if (dragBoundary) {
+            viewport = cloneIBoundingClientRect(containerItem.getBoundingClientRect());
+            viewport.height = viewport.top + viewport.height;
+            viewport.width = viewport.left + viewport.width;
+        }
+        let elementKeepContainer = false;
+        if ((clientX > viewport.width && clientY > viewport.height) || (clientX < viewport.left && clientY < viewport.top)) {
+            elementKeepContainer = true;
+        }
+        if (clientX + (rectElement.width - distanceStartElementAndMouseLeft) > viewport.width) {
+            clientX -= clientX + (rectElement.width - distanceStartElementAndMouseLeft) - viewport.width;
+        }
+        if (clientY + (rectElement.height - distanceStartElementAndMouseTop) > viewport.height) {
+            clientY -= clientY + (rectElement.height - distanceStartElementAndMouseTop) - viewport.height;
+        }
+        if (clientX - distanceStartElementAndMouseLeft < (dragBoundary && containerItem ? viewport.left : 0)) {
+            clientX = (dragBoundary && containerItem ? viewport.left : 0) + distanceStartElementAndMouseLeft;
+        }
+        if (clientY - distanceStartElementAndMouseTop < (dragBoundary && containerItem ? viewport.top : 0)) {
+            clientY = (dragBoundary && containerItem ? viewport.top : 0) + distanceStartElementAndMouseTop;
+        }
+        return { clientX, clientY, elementKeepContainer, viewport };
+    }
+    updateMouseEventsWhenMoveOverIframe(pointerEvents) {
+        const frames = document.getElementsByTagName('iframe');
+        if (!frames?.length) {
+            return;
+        }
+        for (let i = 0; i < frames.length; ++i) {
+            frames[i].style.pointerEvents = pointerEvents;
+        }
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDragItemInContainerVirtualScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LibsUiDragItemInContainerVirtualScrollDirective, isStandalone: true, selector: "[LibsUiDragItemInContainerVirtualScrollDirective]", outputs: { outDragEndContainer: "outDragEndContainer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDragItemInContainerVirtualScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[LibsUiDragItemInContainerVirtualScrollDirective]',
+                    standalone: true,
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDirective {
+    // #region PROPERTY
+    isDragOver = signal(false);
+    isDragging = signal(false);
+    // #region INPUT
+    //setup 3 field phía dưới nếu đang sử dụng item trong virtual-scroll
+    fieldId = input('');
+    item = input(undefined);
+    itemInContainerVirtualScroll = input();
+    //----------------------------------
+    throttleTimeHandlerDraggingEvent = input(0, { transform: (value) => value || 0 });
+    ignoreStopEvent = input();
+    onlyMouseDownStopEvent = input();
+    dragRootElement = input();
+    dragBoundary = input();
+    dragBoundaryAcceptMouseLeaveContainer = input();
+    elementContainer = input();
+    zIndex = input(1300, { transform: (value) => value ?? 1300 });
+    disable = input();
+    // #region OUTPUT
+    outDragStart = output();
+    outDragOver = output();
+    outDragLeave = output();
+    outDragEnd = output();
+    outDropped = output();
+    // #region INJECT
+    elementRef = inject(ElementRef);
+    constructor() {
+        super();
+        effect(() => {
+            if (!this.elementRef?.nativeElement) {
+                return;
+            }
+            const element = this.elementRef.nativeElement;
+            element.classList.remove(`${this.dragDropService.ClassItemDefine}-disable`);
+            if (this.disable() && !element.classList.contains(`${this.dragDropService.ClassItemDefine}-disable`)) {
+                element.classList.add(`${this.dragDropService.ClassItemDefine}-disable`);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        const element = this.elementRef.nativeElement;
+        if (this.fieldId()) {
+            element.setAttribute('field_id', this.fieldId());
+            if (this.item()) {
+                element.setAttribute('item_id', get(this.item(), this.fieldId()));
+            }
+        }
+        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()))) {
+                return;
+            }
+            const containerById = this.dragDropService.Container().get(element.getAttribute('groupID') || '');
+            if (containerById) {
+                if (eventDragging.elementKeepContainer ||
+                    !this.dragDropService.checkElementOverAcceptElementDrag(containerById.element.getAttribute('groupName'), eventDragging.elementDrag.getAttribute('groupName'), eventDragging.elementDrag.getAttribute('dropToGroupName'))) {
+                    return;
+                }
+            }
+            if (checkMouseOverInContainer(eventDragging.mousePosition, element) && element !== eventDragging.elementDrag && containerById && checkViewInScreen(containerById.element, element, containerById.elementScroll)) {
+                if (this.isDragOver()) {
+                    return;
+                }
+                const eventDragOver = { ...eventDragging, elementDragOver: element };
+                this.dragDropService.OnDragOver.next(eventDragOver);
+                this.outDragOver.emit(eventDragOver);
+                this.isDragOver.set(true);
+                return;
+            }
+            if (this.isDragOver()) {
+                const eventDragLeave = { ...eventDragging, elementDragLeave: element };
+                this.isDragOver.set(false);
+                this.dragDropService.OnDragLeave.next(eventDragLeave);
+                this.outDragLeave.emit(eventDragLeave);
+            }
+        });
+        this.dragDropService.OnDropContainer.pipe(takeUntil(this.onDestroy)).subscribe((eventDrop) => {
+            if (eventDrop.elementDrop !== element) {
+                return;
+            }
+            const dropEvent = { elementDrag: eventDrop.elementDrag, elementDrop: element, itemDragInfo: eventDrop.itemDragInfo };
+            this.outDropped.emit(dropEvent);
+        });
+        const styleTag = document.createElement('style');
+        styleTag.textContent = `.libs-ui-drag-drop-item-dragging{cursor:move}`;
+        let nodeClone = element;
+        let distanceStartElementAndMouseLeft = -1;
+        let distanceStartElementAndMouseTop = -1;
+        let contextMenu = false;
+        const stopEventMouse = (mouseEvent) => {
+            if (!this.ignoreStopEvent()) {
+                mouseEvent.preventDefault();
+                mouseEvent.stopPropagation();
+            }
+        };
+        const updatePositionElementRootAndRemoveNodeClone = () => {
+            if (this.dragRootElement()) {
+                const containerById = this.dragDropService.Container().get(element.getAttribute('groupID') || '');
+                const containerItem = this.elementContainer() || containerById?.elementScroll || containerById?.element || document.body;
+                const rectContainer = containerItem.getBoundingClientRect();
+                const rectNodeClone = nodeClone.getBoundingClientRect();
+                const numberSub = Number((getComputedStyle(containerItem).border.match(/\d+px/gi) || ['0'])[0].replace(/\D+/gi, '')).valueOf();
+                element.style.left = rectNodeClone.left - rectContainer.left - numberSub + 'px';
+                element.style.top = rectNodeClone.top - rectContainer.top - numberSub + 'px';
+                element.classList.remove('opacity-0');
+            }
+            distanceStartElementAndMouseLeft = -1;
+            distanceStartElementAndMouseTop = -1;
+            nodeClone.remove();
+        };
+        fromEvent(document, 'contextmenu')
+            .pipe(tap(() => {
+            if (this.isDragging()) {
+                updatePositionElementRootAndRemoveNodeClone();
+            }
+            contextMenu = true;
+        }), takeUntil(this.onDestroy))
+            .subscribe();
+        let ignoreMousedown = false;
+        getDragEventByElement({
+            elementMouseDown: element,
+            functionMouseDown: (event) => {
+                this.dragDropService.ItemClick = element;
+                contextMenu = false;
+                this.updateMouseEventsWhenMoveOverIframe('none');
+                if ((this.disable() || element.getAttribute('disableDragContainer') || !this.isDragging() || this.itemInContainerVirtualScroll()) && !this.onlyMouseDownStopEvent()) {
+                    return;
+                }
+                stopEventMouse(event);
+            },
+            functionMouseMove: (event) => {
+                stopEventMouse(event);
+            },
+            functionMouseUp: (event) => {
+                this.updateMouseEventsWhenMoveOverIframe('auto');
+                this.dragDropService.resetItemClick();
+                stopEventMouse(event);
+                if (this.disable() || element.getAttribute('disableDragContainer') || contextMenu || !this.isDragging()) {
+                    contextMenu = false;
+                    return;
+                }
+                contextMenu = false;
+                this.isDragging.set(false);
+                element.removeAttribute(this.dragDropService.TargetItemDragFlag);
+                if (this.itemInContainerVirtualScroll()) {
+                    return;
+                }
+                const mousePosition = { clientX: event.clientX, clientY: event.clientY };
+                if (this.dragBoundary() && this.dragBoundaryAcceptMouseLeaveContainer()) {
+                    const result = this.getClientPosition(element, mousePosition, distanceStartElementAndMouseLeft, distanceStartElementAndMouseTop, this.dragBoundary(), this.elementContainer());
+                    mousePosition.clientX = result.clientX;
+                    mousePosition.clientY = result.clientY;
+                }
+                const dragEndEvent = { mousePosition, elementDrag: element, itemDragInfo: this.dragDropService.ItemDragInfo };
+                this.dragDropService.ItemDragInfo = undefined;
+                this.dragDropService.OnDragEnd.next(dragEndEvent);
+                this.outDragEnd.emit(dragEndEvent);
+                nodeClone.classList.remove('libs-ui-drag-drop-item-dragging');
+                styleTag.remove();
+                updatePositionElementRootAndRemoveNodeClone();
+            },
+            onDestroy: this.onDestroy,
+        })
+            .pipe(tap((dragMouseEvent) => {
+            const rectElement = element.getBoundingClientRect();
+            const viewport = getViewport();
+            if (this.disable() || element.getAttribute('disableDragContainer') || !dragMouseEvent.clientX || (!ignoreMousedown && dragMouseEvent.type === 'mousedown' && rectElement.height + rectElement.top >= viewport.height)) {
+                return;
+            }
+            const { clientX, clientY } = dragMouseEvent;
+            if (distanceStartElementAndMouseLeft === -1) {
+                distanceStartElementAndMouseLeft = clientX - rectElement.left;
+            }
+            if (distanceStartElementAndMouseTop === -1) {
+                distanceStartElementAndMouseTop = clientY - rectElement.top;
+            }
+        }))
+            .subscribe((dragMouseEvent) => {
+            if (this.dragDropService.ItemClick.filter((item) => item !== element).some((item) => element.contains(item))) {
+                return;
+            }
+            if (this.disable() || element.getAttribute('disableDragContainer') || !dragMouseEvent.clientX || dragMouseEvent.type === 'mousedown' || contextMenu || (this.itemInContainerVirtualScroll() && this.isDragging())) {
+                return;
+            }
+            ignoreMousedown = true;
+            const { clientX, clientY } = dragMouseEvent;
+            const mousePosition = { clientX, clientY };
+            const rectElement = element.getBoundingClientRect();
+            if (!this.isDragging()) {
+                this.isDragging.set(true);
+                const eventDragStart = { mousePosition, elementDrag: element, itemDragInfo: this.dragDropService.ItemDragInfo };
+                element.setAttribute(this.dragDropService.TargetItemDragFlag, 'true');
+                this.dragDropService.OnDragStart.next(eventDragStart);
+                eventDragStart.itemDragInfo = this.dragDropService.ItemDragInfo;
+                this.outDragStart.emit(eventDragStart);
+                nodeClone = element.cloneNode(true);
+                nodeClone.style.zIndex = `${this.zIndex()}`;
+                nodeClone.classList.add('!fixed');
+                nodeClone.classList.remove('libs-ui-drag-drop-item-origin-placeholder');
+                nodeClone.classList.remove('libs-ui-drag-drop-item-placeholder');
+                nodeClone.appendChild(styleTag);
+                nodeClone.classList.add('libs-ui-drag-drop-item-dragging');
+                nodeClone.style.width = `${rectElement.width}px`;
+                nodeClone.style.height = `${rectElement.height}px`;
+                nodeClone.style.left = `${-999}px`;
+                nodeClone.style.top = `${-999}px`;
+                document.body.append(nodeClone);
+                if (this.dragRootElement()) {
+                    element.classList.add('opacity-0');
+                }
+                if (this.itemInContainerVirtualScroll()) {
+                    this.dragDropService.OnDragItemInContainerVirtualScroll.next({
+                        itemDragInfo: this.dragDropService.ItemDragInfo,
+                        elementDrag: nodeClone,
+                        distanceStartElementAndMouseTop,
+                        distanceStartElementAndMouseLeft,
+                        elementContainer: this.elementContainer(),
+                        dragBoundary: this.dragBoundary(),
+                        dragBoundaryAcceptMouseLeaveContainer: this.dragBoundaryAcceptMouseLeaveContainer(),
+                        ignoreStopEvent: this.ignoreStopEvent(),
+                    });
+                    return;
+                }
+            }
+            const result = this.getClientPosition(nodeClone, mousePosition, distanceStartElementAndMouseLeft, distanceStartElementAndMouseTop, this.dragBoundary(), this.elementContainer());
+            const elementKeepContainer = result.elementKeepContainer;
+            const left = result.clientX - distanceStartElementAndMouseLeft;
+            const top = result.clientY - distanceStartElementAndMouseTop;
+            if (this.dragBoundary() && this.dragBoundaryAcceptMouseLeaveContainer()) {
+                if (clientX < result.viewport.left) {
+                    mousePosition.clientX = result.viewport.left;
+                }
+                if (clientX > result.viewport.width) {
+                    mousePosition.clientX = result.viewport.width;
+                }
+                if (clientY < result.viewport.top) {
+                    mousePosition.clientY = result.viewport.top;
+                }
+                if (clientY > result.viewport.height) {
+                    mousePosition.clientY = result.viewport.height;
+                }
+            }
+            nodeClone.style.left = `${left}px`;
+            nodeClone.style.top = `${top}px`;
+            const eventDragging = { mousePosition, elementDrag: nodeClone, elementKeepContainer, itemDragInfo: this.dragDropService.ItemDragInfo };
+            this.dragDropService.OnDragging.next(eventDragging);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDragItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", 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.14", ngImport: i0, type: LibsUiDragItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[LibsUiDragItemDirective]',
+                    standalone: true,
+                }]
+        }], 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"], 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 };
+//# sourceMappingURL=libs-ui-components-drag-drop.mjs.map