@libs-ui/components-drag-drop 0.2.10-6.2

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

@@ -0,0 +1,1176 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, input, inject, ElementRef, Directive, model, output, effect, untracked } from '@angular/core';
+import { get, checkMouseOverInContainer, cloneIBoundingClientRect, uuid, set, cloneDeep, getViewport, checkViewInScreen } from '@libs-ui/utils';
+import { Subject, takeUntil, debounceTime, filter, fromEvent, tap, throttleTime, mergeMap, startWith } from 'rxjs';
+
+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.13", ngImport: i0, type: MoLibsSharedDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MoLibsSharedDragDropService, providedIn: 'any' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MoLibsSharedDragDropService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any'
+                }]
+        }] });
+
+class LibsUiComponentsDragScrollDirective {
+    /* PROPERTY */
+    stopScroll = signal(false);
+    virtualScrollPageInfo = signal(undefined);
+    intervalScrollToElement = signal(undefined);
+    onDestroy = new Subject();
+    /* INPUT */
+    ignoreAutoScroll = input();
+    widthZoneDetect = input(16, { transform: value => value ?? 16 });
+    movementLength = input(6, { transform: value => value ?? 6 });
+    rootElementScroll = input();
+    virtualScrollerComponent = input();
+    /* 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.13", ngImport: i0, type: LibsUiComponentsDragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", 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.13", ngImport: i0, type: LibsUiComponentsDragScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: "[LibsUiComponentsDragScrollDirective]",
+                    standalone: true
+                }]
+        }] });
+
+class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollDirective {
+    /* PROPERTY */
+    groupID = signal(uuid());
+    isDragOver = signal(false);
+    /* 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();
+    /* 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.update(data => {
+            data.set(this.groupID(), container);
+            return data;
+        });
+        effect(() => {
+            if (!this.rootElementScroll()) {
+                return;
+            }
+            untracked(() => {
+                set(container, 'elementScroll', this.rootElementScroll());
+                this.dragDropService.Container.update(containerMap => new Map(containerMap));
+            });
+        });
+        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({ setAttributeElementAndItemDrag: () => this.setAttributeElementAndItemDrag(this.elementRef.nativeElement) });
+        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() === 'deepCopy' ? cloneDeep(this.dragDropService.ItemDragInfo?.item) : this.dragDropService.ItemDragInfo?.item;
+                    if (indexSpliceListTo >= 0) {
+                        this.items.update(items => {
+                            items.splice(indexSpliceListTo, 1);
+                            return [...items];
+                        });
+                    }
+                    this.items.update(items => {
+                        items.splice(indexDragOver, 0, item);
+                        return [...items];
+                    });
+                    indexSpliceListTo = indexDragOver;
+                    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);
+                return [...items];
+            });
+            this.items.update(items => {
+                items.splice(indexDragOver, 0, itemDrag);
+                return [...items];
+            });
+            elementDrag.setAttribute('index', indexDragOver.toString());
+            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 = Number(elementDrop.getAttribute('index')).valueOf() - (elementDrop.getAttribute('dropContainer') ? 0 : 1);
+            const item = this.mode() === 'deepCopy' ? cloneDeep(itemDragInfo?.item) : itemDragInfo?.item;
+            if (itemDragInfo) {
+                itemDragInfo.indexDrop = indexDragOver;
+                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)));
+    }
+    /* */
+    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.13", ngImport: i0, type: LibsUiComponentsDragContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", 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.13", ngImport: i0, type: LibsUiComponentsDragContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: "[LibsUiComponentsDragContainerDirective]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+class LibsUiDragItemInContainerVirtualScrollDirective {
+    /* PROPERTY */
+    onDestroy = new Subject();
+    /* OUTPUT */
+    outDragEndContainer = output();
+    /* INJECT */
+    dragDropService = inject(MoLibsSharedDragDropService);
+    ngAfterViewInit() {
+        this.dragDropService.OnDragEnd.pipe(takeUntil(this.onDestroy)).subscribe(e => {
+            this.outDragEndContainer.emit(e);
+        });
+        this.dragDropService.OnDragItemInContainerVirtualScroll.pipe(takeUntil(this.onDestroy)).subscribe(dragItemInContainerVirtualScrollEvent => {
+            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);
+                document.body.classList.remove('select-none');
+                dragItemInContainerVirtualScrollEvent.elementDrag.remove();
+            }), takeUntil(this.onDestroy));
+            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.13", ngImport: i0, type: LibsUiDragItemInContainerVirtualScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LibsUiDragItemInContainerVirtualScrollDirective, isStandalone: true, selector: "[LibsUiDragItemInContainerVirtualScrollDirective]", outputs: { outDragEndContainer: "outDragEndContainer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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 {
+    /* PROPERTY */
+    isDragOver = signal(false);
+    isDragging = signal(false);
+    /* 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();
+    groupName = input('groupDragAndDropDefault', { transform: value => value ?? 'groupDragAndDropDefault' });
+    dragBoundary = input();
+    dragBoundaryAcceptMouseLeaveContainer = input();
+    elementContainer = input();
+    zIndex = input(1300, { transform: value => value ?? 1300 });
+    disable = input();
+    /* OUTPUT */
+    outDragStart = output();
+    outDragOver = output();
+    outDragLeave = output();
+    outDragEnd = output();
+    outDropped = output();
+    /* 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.setAttribute('groupName', this.groupName());
+        element.classList.add(this.dragDropService.ClassItemDefine);
+        this.dragDropService.OnDragging.pipe(throttleTime(this.throttleTimeHandlerDraggingEvent()), takeUntil(this.onDestroy)).subscribe((eventDragging) => {
+            if (this.disable() || element.getAttribute('disableDragContainer') || (this.fieldId() && this.item() && eventDragging.elementDrag.getAttribute('item_id') === get(this.item(), this.fieldId()))) {
+                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+/ig, '')).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();
+        const documentMouseUp = fromEvent(document, 'mouseup')
+            .pipe(tap((eventMouseup) => {
+            this.updateMouseEventsWhenMoveOverIframe('auto');
+            this.dragDropService.resetItemClick();
+            stopEventMouse(eventMouseup);
+            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: eventMouseup.clientX, clientY: eventMouseup.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);
+            document.body.classList.remove('!select-none');
+            nodeClone.classList.remove('libs-ui-drag-drop-item-dragging');
+            styleTag.remove();
+            updatePositionElementRootAndRemoveNodeClone();
+        }), takeUntil(this.onDestroy));
+        const elementMouseDown = fromEvent(element, 'mousedown').pipe(tap(eventMousedown => {
+            this.dragDropService.ItemClick = element;
+            contextMenu = false;
+            this.updateMouseEventsWhenMoveOverIframe('none');
+            if ((this.disable() || element.getAttribute('disableDragContainer') || !this.isDragging() || this.itemInContainerVirtualScroll()) && !this.onlyMouseDownStopEvent()) {
+                return;
+            }
+            stopEventMouse(eventMousedown);
+        }), takeUntil(this.onDestroy));
+        const documentMouseMove = fromEvent(document, 'mousemove').pipe(tap((eventMousemove) => stopEventMouse(eventMousemove)), takeUntil((documentMouseUp)), takeUntil(this.onDestroy));
+        const drag = elementMouseDown.pipe(mergeMap((mouseEvent) => documentMouseMove.pipe(startWith((mouseEvent)))));
+        let ignoreMousedown = false;
+        drag.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;
+            }
+        }), takeUntil(this.onDestroy)).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.classList.add('!select-none');
+                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.13", ngImport: i0, type: LibsUiDragItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiDragItemDirective, isStandalone: true, selector: "[LibsUiDragItemDirective]", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, itemInContainerVirtualScroll: { classPropertyName: "itemInContainerVirtualScroll", publicName: "itemInContainerVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, throttleTimeHandlerDraggingEvent: { classPropertyName: "throttleTimeHandlerDraggingEvent", publicName: "throttleTimeHandlerDraggingEvent", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopEvent: { classPropertyName: "ignoreStopEvent", publicName: "ignoreStopEvent", isSignal: true, isRequired: false, transformFunction: null }, onlyMouseDownStopEvent: { classPropertyName: "onlyMouseDownStopEvent", publicName: "onlyMouseDownStopEvent", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, dragBoundary: { classPropertyName: "dragBoundary", publicName: "dragBoundary", isSignal: true, isRequired: false, transformFunction: null }, dragBoundaryAcceptMouseLeaveContainer: { classPropertyName: "dragBoundaryAcceptMouseLeaveContainer", publicName: "dragBoundaryAcceptMouseLeaveContainer", isSignal: true, isRequired: false, transformFunction: null }, elementContainer: { classPropertyName: "elementContainer", publicName: "elementContainer", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outDragStart: "outDragStart", outDragOver: "outDragOver", outDragLeave: "outDragLeave", outDragEnd: "outDragEnd", outDropped: "outDropped" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiDragItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: "[LibsUiDragItemDirective]",
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsDragContainerDirective, LibsUiComponentsDragScrollDirective, LibsUiDragItemDirective, LibsUiDragItemInContainerVirtualScrollDirective };
+//# sourceMappingURL=libs-ui-components-drag-drop.mjs.map