@libs-ui/components-drag-drop 0.2.305 → 0.2.306-10

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

@@ -6,53 +6,55 @@ import { CommonModule } from '@angular/common';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 
 const styleContainer = (config, viewEncapsulation, groupID) => {
-    const defaultConfig = [{
+    const defaultConfig = [
+        {
             className: 'libs-ui-drag-drop-container',
-            styles: `display:block;`
+            styles: `display:block;`,
         },
         {
             className: 'libs-ui-drag-drop-item',
             styles: `
-    cursor:move;`
+    cursor:move;`,
         },
         {
             className: 'libs-ui-drag-drop-item-placeholder',
-            styles: `visibility: hidden;`
+            styles: `visibility: hidden;`,
         },
         {
             className: 'libs-ui-drag-drop-item-origin-placeholder',
-            styles: `visibility: hidden;`
+            styles: `visibility: hidden;`,
         },
         {
             className: 'libs-ui-drag-drop-item-drop-placeholder',
-            styles: `visibility: hidden;`
+            styles: `visibility: hidden;`,
         },
         {
             className: 'libs-ui-drag-drop-item-dragging',
-            styles: `cursor:move;  user-select: none; `
+            styles: `cursor:move;  user-select: none; `,
         },
         {
             className: 'libs-ui-drag-drop-item-disable',
-            styles: ` cursor:not-allowed;`
+            styles: ` cursor:not-allowed;`,
         },
         {
             className: 'libs-ui-drag-drop-item-translate-bottom',
-            styles: `position:relative;animation: translateBottom 0.35s 1 ease;`
+            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;`
+            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;`
+            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);
+            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;
@@ -181,7 +183,11 @@ class MoLibsSharedDragDropService {
         if (groupNameOfContainer !== groupNameOfElementDrag && !groupNameOfDropTo) {
             return false;
         }
-        if (groupNameOfDropTo !== null && !groupNameOfDropTo.toString().split(';').includes(groupNameOfContainer || 'undefinedName')) {
+        if (groupNameOfDropTo !== null &&
+            !groupNameOfDropTo
+                .toString()
+                .split(';')
+                .includes(groupNameOfContainer || 'undefinedName')) {
             return false;
         }
         return true;
@@ -192,10 +198,11 @@ class MoLibsSharedDragDropService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MoLibsSharedDragDropService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'any'
+                    providedIn: 'any',
                 }]
         }] });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsDragScrollDirective {
     // #region PROPERTY
     stopScroll = signal(false);
@@ -204,8 +211,8 @@ class LibsUiComponentsDragScrollDirective {
     onDestroy = new Subject();
     // #region INPUT
     ignoreAutoScroll = input();
-    widthZoneDetect = input(16, { transform: value => value ?? 16 });
-    movementLength = input(6, { transform: value => value ?? 6 });
+    widthZoneDetect = input(16, { transform: (value) => value ?? 16 });
+    movementLength = input(6, { transform: (value) => value ?? 6 });
     rootElementScroll = input();
     virtualScrollerComponent = input();
     // #region INJECT
@@ -236,7 +243,9 @@ class LibsUiComponentsDragScrollDirective {
         if (!this.virtualScrollerComponent) {
             return;
         }
-        this.virtualScrollerComponent()?.vsChange.pipe(takeUntil(this.onDestroy)).subscribe(pageInfo => {
+        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);
@@ -277,7 +286,7 @@ class LibsUiComponentsDragScrollDirective {
             return;
         }
         this.intervalScrollToElement.set(setInterval(() => {
-            elementSetScroll = (this.rootElementScroll() || this.elementRef.nativeElement);
+            elementSetScroll = this.rootElementScroll() || this.elementRef.nativeElement;
             let directionTop = 0;
             let directionLeft = 0;
             if (top <= clientY && clientY <= top + this.widthZoneDetect()) {
@@ -291,7 +300,7 @@ class LibsUiComponentsDragScrollDirective {
                 elementSetScroll.scrollTop += this.movementLength();
                 directionTop = 1;
             }
-            if ((limitLeft - this.widthZoneDetect() <= clientX) && (clientX <= limitLeft)) {
+            if (limitLeft - this.widthZoneDetect() <= clientX && clientX <= limitLeft) {
                 if (this.stopScroll()) {
                     return;
                 }
@@ -302,13 +311,16 @@ class LibsUiComponentsDragScrollDirective {
                 elementSetScroll.scrollLeft -= this.movementLength();
                 directionLeft = -1;
             }
-            if (elementSetScroll.scrollLeft && (elementSetScroll.scrollLeft + elementSetScroll.offsetWidth >= elementSetScroll.scrollWidth)) {
+            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)) {
+            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)) {
+            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));
@@ -324,8 +336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: "[LibsUiComponentsDragScrollDirective]",
-                    standalone: true
+                    selector: '[LibsUiComponentsDragScrollDirective]',
+                    standalone: true,
                 }]
         }] });
 
@@ -336,12 +348,12 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
     cdr = inject(ChangeDetectorRef);
     // #region INPUT
     disableDragContainer = input();
-    mode = input('move', { transform: value => value ?? 'move' });
+    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
+    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();
@@ -359,11 +371,12 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
         const container = { element };
         this.dragDropService.Container().set(this.groupID(), container);
         effect(() => {
-            if (!this.rootElementScroll()) {
+            const elementScroll = this.rootElementScroll();
+            if (!elementScroll) {
                 return;
             }
             untracked(() => {
-                set(container, 'elementScroll', this.rootElementScroll());
+                set(container, 'elementScroll', elementScroll);
             });
         });
         effect(() => {
@@ -378,13 +391,13 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
         });
     }
     ngAfterViewInit() {
-        this.outFunctionControl.emit({ setAttributeElementAndItemDrag: () => this.setAttributeElementAndItemDrag(this.elementRef.nativeElement) });
-        this.outDroppedContainer.subscribe(eventDropped => {
+        this.outFunctionControl.emit(this.FunctionsControl);
+        this.outDroppedContainer.subscribe((eventDropped) => {
             this.dragDropService.OnDropContainer.next(eventDropped);
         });
         this.onDestroy.subscribe(() => {
             if (indexSpliceListTo > -1) {
-                this.items.update(items => {
+                this.items.update((items) => {
                     items.splice(indexSpliceListTo, 1);
                     return [...items];
                 });
@@ -393,9 +406,9 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
         });
         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());
+        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) => {
@@ -415,10 +428,11 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             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 (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 => {
+                    this.items.update((items) => {
                         if (indexSpliceListTo >= 0) {
                             items.splice(indexSpliceListTo, 1);
                         }
@@ -431,7 +445,13 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                 }
                 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)) {
+            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
@@ -439,7 +459,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             this.setAnimationElementDragOver(indexDrag, indexDragOver, elementDragOver);
             storeIndex.indexDrag = indexDrag;
             storeIndex.indexDragOver = indexDragOver;
-            this.items.update(items => {
+            this.items.update((items) => {
                 items.splice(indexDrag, 1);
                 items.splice(indexDragOver, 0, itemDrag);
                 return [...items];
@@ -453,10 +473,10 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             storeIndex.indexDrag = -1;
             storeIndex.indexDragOver = -1;
             const childrenElement = elementContainer.getElementsByClassName(this.dragDropService.ClassItemDefine);
-            if (!checkMouseOverInContainer(eventDrag.mousePosition, (this.rootElementScroll() || elementContainer))) {
+            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 => {
+                    this.items.update((items) => {
                         items.splice(childElementIndex, 1);
                         return [...items];
                     });
@@ -467,7 +487,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                 return;
             }
             if (indexSpliceListTo >= 0) {
-                this.items.update(items => {
+                this.items.update((items) => {
                     items.splice(indexSpliceListTo, 1);
                     return [...items];
                 });
@@ -479,14 +499,14 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             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)) {
+            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());
+                    styleTag.textContent = styleContainer(this.stylesOverride() || [], this.viewEncapsulation(), this.groupID());
                     elementContainer.appendChild(styleTag);
                     this.setAttributeElementAndItemDrag(elementContainer, true);
                 }
@@ -498,7 +518,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                 this.checkAndScrollElementToPosition(eventDragging, this.ignoreAutoScroll() || !this.acceptDragSameGroup());
                 return;
             }
-            if (!checkMouseOverInContainer(eventDragging.mousePosition, (this.rootElementScroll() || elementContainer))) {
+            if (!checkMouseOverInContainer(eventDragging.mousePosition, this.rootElementScroll() || elementContainer)) {
                 if (this.isDragOver()) {
                     this.isDragOver.set(false);
                     this.outDragLeaveContainer.emit({ ...eventDragging, elementDragLeave: elementContainer });
@@ -523,14 +543,15 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                             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
+            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();
@@ -578,7 +599,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                         return null;
                     }
                     return childrenElement.length;
-                }
+                },
             };
             this.dragDropService.OnDrop.next(eventDrop);
         };
@@ -613,7 +634,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             if (!this.items().length) {
                 this.outDroppedContainerEmpty.emit(eventDrop);
             }
-            this.items.update(items => {
+            this.items.update((items) => {
                 items.splice(indexDragOver, 0, item);
                 return [...items];
             });
@@ -625,28 +646,38 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
             this.removeAttributes(elementContainer);
             this.setIndexElement(elementContainer);
         };
-        [{
+        [
+            {
                 name: 'OnDragStart',
                 event: this.dragDropService.OnDragStart,
-                functionCall: handlerDragStart
-            }, {
+                functionCall: handlerDragStart,
+            },
+            {
                 name: 'OnDragOver',
                 event: this.dragDropService.OnDragOver,
                 functionCall: handlerDragOver,
-            }, {
+            },
+            {
                 name: 'OnDragging',
                 event: this.dragDropService.OnDragging,
-                functionCall: handlerDragging
-            }, {
+                functionCall: handlerDragging,
+            },
+            {
                 name: 'OnDragEnd',
                 event: this.dragDropService.OnDragEnd,
-                functionCall: handlerDragEnd
-            }, {
+                functionCall: handlerDragEnd,
+            },
+            {
                 name: 'OnDrop',
                 event: this.dragDropService.OnDrop,
-                functionCall: handlerDrop
-            }
-        ].forEach((item) => (item.event.pipe(takeUntil(this.onDestroy)).subscribe(item.functionCall)));
+                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) {
@@ -701,7 +732,7 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
                 }
                 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 => {
+                    this.dragDropService.ItemDragInfo.itemsMove?.update((items) => {
                         items.splice(index, 1);
                         return [...items];
                     });
@@ -716,7 +747,6 @@ class LibsUiComponentsDragContainerDirective extends LibsUiComponentsDragScrollD
         }
         this.setIndexElement(elementContainer);
     }
-    ;
     setAnimationElementDragOver(indexDrag, indexDragOver, elementDragOver) {
         if (!this.directionDrag() || !elementDragOver) {
             return;
@@ -782,7 +812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: "[LibsUiComponentsDragContainerDirective]",
+                    selector: '[LibsUiComponentsDragContainerDirective]',
                     standalone: true,
                 }]
         }], ctorParameters: () => [] });
@@ -803,10 +833,10 @@ class LibsUiDragItemInContainerVirtualScrollDirective {
             document.body.classList.add('!select-none');
             document.body.classList.add('!cursor-move');
         };
-        this.dragDropService.OnDragEnd.pipe(takeUntil(this.onDestroy)).subscribe(e => {
+        this.dragDropService.OnDragEnd.pipe(takeUntil(this.onDestroy)).subscribe((e) => {
             this.outDragEndContainer.emit(e);
         });
-        this.dragDropService.OnDragItemInContainerVirtualScroll.pipe(takeUntil(this.onDestroy)).subscribe(dragItemInContainerVirtualScrollEvent => {
+        this.dragDropService.OnDragItemInContainerVirtualScroll.pipe(takeUntil(this.onDestroy)).subscribe((dragItemInContainerVirtualScrollEvent) => {
             addClass();
             const stopEventMouse = (mouseEvent) => {
                 if (!dragItemInContainerVirtualScrollEvent.ignoreStopEvent) {
@@ -814,8 +844,7 @@ class LibsUiDragItemInContainerVirtualScrollDirective {
                     mouseEvent.stopPropagation();
                 }
             };
-            const documentMouseUp = fromEvent(document, 'mouseup')
-                .pipe(tap((eventMouseUp) => {
+            const documentMouseUp = fromEvent(document, 'mouseup').pipe(tap((eventMouseUp) => {
                 this.updateMouseEventsWhenMoveOverIframe('auto');
                 stopEventMouse(eventMouseUp);
                 const mousePosition = { clientX: eventMouseUp.clientX, clientY: eventMouseUp.clientY };
@@ -830,7 +859,8 @@ class LibsUiDragItemInContainerVirtualScrollDirective {
                 dragItemInContainerVirtualScrollEvent.elementDrag.remove();
                 removeClass();
             }));
-            fromEvent(document, 'mousemove').pipe(tap((eventMousemove) => {
+            fromEvent(document, 'mousemove')
+                .pipe(tap((eventMousemove) => {
                 stopEventMouse(eventMousemove);
                 const { clientX, clientY } = eventMousemove;
                 const mousePosition = { clientX, clientY };
@@ -855,7 +885,8 @@ class LibsUiDragItemInContainerVirtualScrollDirective {
                 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();
+            }), takeUntil(documentMouseUp), takeUntil(this.onDestroy))
+                .subscribe();
         });
     }
     /* FUNCTIONS */
@@ -873,25 +904,25 @@ class LibsUiDragItemInContainerVirtualScrollDirective {
             viewport.width = viewport.left + viewport.width;
         }
         let elementKeepContainer = false;
-        if (clientX > viewport.width && clientY > viewport.height || clientX < viewport.left && clientY < viewport.top) {
+        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 (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 (clientY + (rectElement.height - distanceStartElementAndMouseTop) > viewport.height) {
+            clientY -= clientY + (rectElement.height - distanceStartElementAndMouseTop) - viewport.height;
         }
-        if ((clientX - distanceStartElementAndMouseLeft) < (dragBoundary && containerItem ? viewport.left : 0)) {
+        if (clientX - distanceStartElementAndMouseLeft < (dragBoundary && containerItem ? viewport.left : 0)) {
             clientX = (dragBoundary && containerItem ? viewport.left : 0) + distanceStartElementAndMouseLeft;
         }
-        if ((clientY - distanceStartElementAndMouseTop) < (dragBoundary && containerItem ? viewport.top : 0)) {
+        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");
+        const frames = document.getElementsByTagName('iframe');
         if (!frames?.length) {
             return;
         }
@@ -910,7 +941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: "[LibsUiDragItemInContainerVirtualScrollDirective]",
+                    selector: '[LibsUiDragItemInContainerVirtualScrollDirective]',
                     standalone: true,
                 }]
         }] });
@@ -921,19 +952,19 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
     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 
+    //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 });
+    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 });
+    zIndex = input(1300, { transform: (value) => value ?? 1300 });
     disable = input();
     // #region OUTPUT
     outDragStart = output();
@@ -971,7 +1002,8 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
             }
             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'))) {
+                if (eventDragging.elementKeepContainer ||
+                    !this.dragDropService.checkElementOverAcceptElementDrag(containerById.element.getAttribute('groupName'), eventDragging.elementDrag.getAttribute('groupName'), eventDragging.elementDrag.getAttribute('dropToGroupName'))) {
                     return;
                 }
             }
@@ -999,7 +1031,7 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
             const dropEvent = { elementDrag: eventDrop.elementDrag, elementDrop: element, itemDragInfo: eventDrop.itemDragInfo };
             this.outDropped.emit(dropEvent);
         });
-        const styleTag = document.createElement("style");
+        const styleTag = document.createElement('style');
         styleTag.textContent = `.libs-ui-drag-drop-item-dragging{cursor:move}`;
         let nodeClone = element;
         let distanceStartElementAndMouseLeft = -1;
@@ -1017,21 +1049,23 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
                 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';
+                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(() => {
+        fromEvent(document, 'contextmenu')
+            .pipe(tap(() => {
             if (this.isDragging()) {
                 updatePositionElementRootAndRemoveNodeClone();
             }
             contextMenu = true;
-        }), takeUntil(this.onDestroy)).subscribe();
+        }), takeUntil(this.onDestroy))
+            .subscribe();
         let ignoreMousedown = false;
         getDragEventByElement({
             elementMouseDown: element,
@@ -1075,8 +1109,9 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
                 styleTag.remove();
                 updatePositionElementRootAndRemoveNodeClone();
             },
-            onDestroy: this.onDestroy
-        }).pipe(tap((dragMouseEvent) => {
+            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)) {
@@ -1089,8 +1124,9 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
             if (distanceStartElementAndMouseTop === -1) {
                 distanceStartElementAndMouseTop = clientY - rectElement.top;
             }
-        })).subscribe(dragMouseEvent => {
-            if (this.dragDropService.ItemClick.filter(item => item !== element).some(item => element.contains(item))) {
+        }))
+            .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())) {
@@ -1131,7 +1167,7 @@ class LibsUiDragItemDirective extends LibsUiDragItemInContainerVirtualScrollDire
                         elementContainer: this.elementContainer(),
                         dragBoundary: this.dragBoundary(),
                         dragBoundaryAcceptMouseLeaveContainer: this.dragBoundaryAcceptMouseLeaveContainer(),
-                        ignoreStopEvent: this.ignoreStopEvent()
+                        ignoreStopEvent: this.ignoreStopEvent(),
                     });
                     return;
                 }
@@ -1167,20 +1203,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: "[LibsUiDragItemDirective]",
-                    standalone: true
+                    selector: '[LibsUiDragItemDirective]',
+                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 
 class LibsUiDragDropDemoComponent {
     // Basic List Items
-    basicItems = [
-        'Task 1',
-        'Task 2',
-        'Task 3',
-        'Task 4',
-        'Task 5'
-    ];
+    basicItems = ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'];
     // Kanban Board Columns
     columnsIds = ['todo', 'in-progress', 'done'];
     columns = [
@@ -1192,15 +1222,15 @@ class LibsUiDragDropDemoComponent {
                     id: 1,
                     title: 'Implement drag and drop',
                     description: 'Add drag and drop functionality to the component',
-                    status: 'todo'
+                    status: 'todo',
                 },
                 {
                     id: 2,
                     title: 'Add animations',
                     description: 'Implement smooth animations for drag and drop',
-                    status: 'todo'
-                }
-            ]
+                    status: 'todo',
+                },
+            ],
         },
         {
             id: 'in-progress',
@@ -1210,9 +1240,9 @@ class LibsUiDragDropDemoComponent {
                     id: 3,
                     title: 'Fix styling issues',
                     description: 'Resolve CSS conflicts in the component',
-                    status: 'in-progress'
-                }
-            ]
+                    status: 'in-progress',
+                },
+            ],
         },
         {
             id: 'done',
@@ -1222,28 +1252,28 @@ class LibsUiDragDropDemoComponent {
                     id: 4,
                     title: 'Setup project structure',
                     description: 'Initialize the project with necessary configurations',
-                    status: 'done'
-                }
-            ]
-        }
+                    status: 'done',
+                },
+            ],
+        },
     ];
     // Nested Items
     nestedItems = [
         {
             id: 1,
             title: 'Project A',
-            subItems: ['Task 1', 'Task 2', 'Task 3']
+            subItems: ['Task 1', 'Task 2', 'Task 3'],
         },
         {
             id: 2,
             title: 'Project B',
-            subItems: ['Task 4', 'Task 5']
+            subItems: ['Task 4', 'Task 5'],
         },
         {
             id: 3,
             title: 'Project C',
-            subItems: ['Task 6', 'Task 7', 'Task 8']
-        }
+            subItems: ['Task 6', 'Task 7', 'Task 8'],
+        },
     ];
     // API Documentation
     inputsDoc = [
@@ -1251,99 +1281,99 @@ class LibsUiDragDropDemoComponent {
             name: 'items',
             type: 'Array<unknown>',
             default: '[]',
-            description: 'Array of items to be displayed in the container'
+            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'
+            description: 'Mode for drag and drop operations',
         },
         {
             name: 'directionDrag',
             type: "'horizontal' | 'vertical'",
             default: 'undefined',
-            description: 'Direction of drag movement'
+            description: 'Direction of drag movement',
         },
         {
             name: 'viewEncapsulation',
             type: "'emulated' | 'none'",
             default: "'emulated'",
-            description: 'View encapsulation mode for styling'
+            description: 'View encapsulation mode for styling',
         },
         {
             name: 'disableDragContainer',
             type: 'boolean',
             default: 'undefined',
-            description: 'Whether to disable drag operations for the container'
+            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'
+            description: 'Whether to accept drag operations within the same group',
         },
         {
             name: 'placeholder',
             type: 'boolean',
             default: 'true',
-            description: 'Whether to show placeholder during drag'
+            description: 'Whether to show placeholder during drag',
         },
         {
             name: 'groupName',
             type: 'string',
             default: "'groupDragAndDropDefault'",
-            description: 'Name of the group for drag and drop operations'
+            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'
+            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'
-        }
+            description: 'Custom styles to override default drag-drop styling',
+        },
     ];
     outputsDoc = [
         {
             name: 'outDragStartContainer',
             type: 'IDragStart',
-            description: 'Event emitted when dragging starts in the container'
+            description: 'Event emitted when dragging starts in the container',
         },
         {
             name: 'outDragOverContainer',
             type: 'IDragOver',
-            description: 'Event emitted when dragging over the container'
+            description: 'Event emitted when dragging over the container',
         },
         {
             name: 'outDragLeaveContainer',
             type: 'IDragLeave',
-            description: 'Event emitted when dragging leaves the container'
+            description: 'Event emitted when dragging leaves the container',
         },
         {
             name: 'outDragEndContainer',
             type: 'IDragEnd',
-            description: 'Event emitted when dragging ends in the container'
+            description: 'Event emitted when dragging ends in the container',
         },
         {
             name: 'outDroppedContainer',
             type: 'IDrop',
-            description: 'Event emitted when an item is dropped in the container'
+            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'
+            description: 'Event emitted when an item is dropped in an empty container',
         },
         {
             name: 'outFunctionControl',
             type: 'IDragDropFunctionControlEvent',
-            description: 'Event emitted to control drag-drop functionality'
-        }
+            description: 'Event emitted to control drag-drop functionality',
+        },
     ];
     // Interface Documentation
     interfacesDoc = [
@@ -1355,7 +1385,7 @@ class LibsUiDragDropDemoComponent {
   elementKeepContainer?: boolean;
   itemDragInfo?: IItemDragInfo;
 }`,
-            description: 'Interface for drag operation events, containing information about the dragged element and mouse position'
+            description: 'Interface for drag operation events, containing information about the dragged element and mouse position',
         },
         {
             name: 'IDragStart',
@@ -1364,7 +1394,7 @@ class LibsUiDragDropDemoComponent {
   elementDrag: HTMLElement;
   itemDragInfo?: IItemDragInfo;
 }`,
-            description: 'Interface for drag start events, triggered when dragging begins'
+            description: 'Interface for drag start events, triggered when dragging begins',
         },
         {
             name: 'IDragOver',
@@ -1374,7 +1404,7 @@ class LibsUiDragDropDemoComponent {
   elementDragOver: HTMLElement;
   itemDragInfo?: IItemDragInfo;
 }`,
-            description: 'Interface for drag over events, triggered when an element is dragged over another element'
+            description: 'Interface for drag over events, triggered when an element is dragged over another element',
         },
         {
             name: 'IDragLeave',
@@ -1383,7 +1413,7 @@ class LibsUiDragDropDemoComponent {
   elementDragLeave: HTMLElement;
   itemDragInfo?: IItemDragInfo;
 }`,
-            description: 'Interface for drag leave events, triggered when a dragged element leaves another element'
+            description: 'Interface for drag leave events, triggered when a dragged element leaves another element',
         },
         {
             name: 'IDragEnd',
@@ -1392,7 +1422,7 @@ class LibsUiDragDropDemoComponent {
   elementDrag: HTMLElement;
   itemDragInfo?: IItemDragInfo;
 }`,
-            description: 'Interface for drag end events, triggered when dragging ends'
+            description: 'Interface for drag end events, triggered when dragging ends',
         },
         {
             name: 'IDrop',
@@ -1401,7 +1431,7 @@ class LibsUiDragDropDemoComponent {
   elementDrop: HTMLElement;
   itemDragInfo?: IItemDragInfo;
 }`,
-            description: 'Interface for drop events, triggered when an element is dropped'
+            description: 'Interface for drop events, triggered when an element is dropped',
         },
         {
             name: 'IItemDragInfo',
@@ -1415,7 +1445,7 @@ class LibsUiDragDropDemoComponent {
   containerDrag?: HTMLElement;
   containerDrop?: HTMLElement;
 }`,
-            description: 'Interface containing information about the dragged item and its containers'
+            description: 'Interface containing information about the dragged item and its containers',
         },
         {
             name: 'IDragItemInContainerVirtualScroll',
@@ -1429,7 +1459,7 @@ class LibsUiDragDropDemoComponent {
   dragBoundaryAcceptMouseLeaveContainer?: boolean;
   ignoreStopEvent?: boolean;
 }`,
-            description: 'Interface for virtual scrolling drag operations, containing information about drag boundaries and container elements'
+            description: 'Interface for virtual scrolling drag operations, containing information about drag boundaries and container elements',
         },
         {
             name: 'IMousePosition',
@@ -1437,15 +1467,15 @@ class LibsUiDragDropDemoComponent {
   clientX: number;
   clientY: number;
 }`,
-            description: 'Interface representing mouse position coordinates'
+            description: 'Interface representing mouse position coordinates',
         },
         {
             name: 'IDragDropFunctionControlEvent',
             code: `interface IDragDropFunctionControlEvent {
   setAttributeElementAndItemDrag: () => Promise<void>;
 }`,
-            description: 'Interface for drag and drop control functions'
-        }
+            description: 'Interface for drag and drop control functions',
+        },
     ];
     // Features
     features = [
@@ -1453,26 +1483,26 @@ class LibsUiDragDropDemoComponent {
             id: 1,
             icon: '🔄',
             title: 'Flexible Drag and Drop',
-            description: 'Support for container-to-container dragging with customizable group names and drop zones'
+            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'
+            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'
+            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'
-        }
+            description: 'Customizable styles for drag items and containers',
+        },
     ];
     // Code Examples
     codeExamples = [
@@ -1488,7 +1518,7 @@ class LibsUiDragDropDemoComponent {
       {{ item }}
     &lt;/div&gt;
   }
-&lt;/div&gt;`
+&lt;/div&gt;`,
         },
         {
             id: 2,
@@ -1512,8 +1542,8 @@ class LibsUiDragDropDemoComponent {
       {{ item }}
     &lt;/div&gt;
   }
-&lt;/div&gt;`
-        }
+&lt;/div&gt;`,
+        },
     ];
     /**
      * Copy text to clipboard
@@ -1537,14 +1567,15 @@ class LibsUiDragDropDemoComponent {
         <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.
+            <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>
@@ -1553,9 +1584,9 @@ class LibsUiDragDropDemoComponent {
                 (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>
@@ -1573,12 +1604,14 @@ class LibsUiDragDropDemoComponent {
             <div class="demo-example">
               <h3>Basic List</h3>
               <div class="list-container">
-                <div LibsUiComponentsDragContainerDirective 
-                     [(items)]="basicItems"
-                     [acceptDragSameGroup]="true">
+                <div
+                  LibsUiComponentsDragContainerDirective
+                  [(items)]="basicItems"
+                  [acceptDragSameGroup]="true">
                   @for (item of basicItems; track item) {
-                    <div class="list-item"
-                         LibsUiDragItemDirective>
+                    <div
+                      class="list-item"
+                      LibsUiDragItemDirective>
                       <span class="item-icon">📋</span>
                       <span class="item-text">{{ item }}</span>
                     </div>
@@ -1592,19 +1625,23 @@ class LibsUiDragDropDemoComponent {
               <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">
+                  <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"
+                        LibsUiDragItemDirective>
                         <div class="kanban-item-header">
                           <span class="item-title">{{ item.title }}</span>
-                          <span class="item-status" [class]="'status-' + item.status">
+                          <span
+                            class="item-status"
+                            [class]="'status-' + item.status">
                             {{ item.status }}
                           </span>
                         </div>
@@ -1620,25 +1657,29 @@ class LibsUiDragDropDemoComponent {
             <div class="demo-example">
               <h3>Nested Containers copy</h3>
               <div class="nested-container">
-                <div LibsUiComponentsDragContainerDirective 
-                     [(items)]="nestedItems"
-                     [groupName]="'parent'"
-                     [mode]="'copy'"
-                     [acceptDragSameGroup]="true">
+                <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"
+                      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">
+                        <div
+                          LibsUiComponentsDragContainerDirective
+                          [(items)]="item.subItems"
+                          [groupName]="'child'"
+                          [acceptDragSameGroup]="true">
                           @for (subItem of item.subItems; track subItem) {
-                            <div class="sub-item"
-                                 LibsUiDragItemDirective>
+                            <div
+                              class="sub-item"
+                              LibsUiDragItemDirective>
                               {{ subItem }}
                             </div>
                           }
@@ -1654,7 +1695,7 @@ class LibsUiDragDropDemoComponent {
 
         <section class="api-doc-section">
           <h2>API Documentation</h2>
-          
+
           <h3>Inputs</h3>
           <div class="table-container">
             <table class="api-table">
@@ -1669,10 +1710,14 @@ class LibsUiDragDropDemoComponent {
               <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>
+                    <td>
+                      <code>{{ input.name }}</code>
+                    </td>
+                    <td>
+                      <code>{{ input.type }}</code>
+                    </td>
+                    <td>{{ input.default }}</td>
+                    <td>{{ input.description }}</td>
                   </tr>
                 }
               </tbody>
@@ -1692,9 +1737,13 @@ class LibsUiDragDropDemoComponent {
               <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>
+                    <td>
+                      <code>{{ output.name }}</code>
+                    </td>
+                    <td>
+                      <code>{{ output.type }}</code>
+                    </td>
+                    <td>{{ output.description }}</td>
                   </tr>
                 }
               </tbody>
@@ -1707,9 +1756,9 @@ class LibsUiDragDropDemoComponent {
           <div class="interface-docs">
             @for (interfaceItem of interfacesDoc; track interfaceItem.name) {
               <div class="interface-item">
-                <h3>{{interfaceItem.name}}</h3>
+                <h3>{{ interfaceItem.name }}</h3>
                 <pre><code>{{interfaceItem.code}}</code></pre>
-                <p>{{interfaceItem.description}}</p>
+                <p>{{ interfaceItem.description }}</p>
               </div>
             }
           </div>
@@ -1720,10 +1769,10 @@ class LibsUiDragDropDemoComponent {
           <ul>
             @for (feature of features; track feature.id) {
               <li>
-                <span class="feature-icon">{{feature.icon}}</span>
+                <span class="feature-icon">{{ feature.icon }}</span>
                 <div class="feature-info">
-                  <h3>{{feature.title}}</h3>
-                  <p>{{feature.description}}</p>
+                  <h3>{{ feature.title }}</h3>
+                  <p>{{ feature.description }}</p>
                 </div>
               </li>
             }
@@ -1735,7 +1784,7 @@ class LibsUiDragDropDemoComponent {
           <div class="code-examples">
             @for (example of codeExamples; track example.id) {
               <div class="code-example">
-                <h3>{{example.title}}</h3>
+                <h3>{{ example.title }}</h3>
                 <pre><code [innerHTML]="example.code"></code></pre>
               </div>
             }
@@ -1747,12 +1796,7 @@ class LibsUiDragDropDemoComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiDragDropDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-drag-drop-demo', standalone: true, imports: [
-                        CommonModule,
-                        LibsUiComponentsDragContainerDirective,
-                        LibsUiDragItemDirective,
-                        LibsUiComponentsButtonsButtonComponent
-                    ], template: `
+            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>
@@ -1763,14 +1807,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         <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.
+            <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>
@@ -1779,9 +1824,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 (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>
@@ -1799,12 +1844,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             <div class="demo-example">
               <h3>Basic List</h3>
               <div class="list-container">
-                <div LibsUiComponentsDragContainerDirective 
-                     [(items)]="basicItems"
-                     [acceptDragSameGroup]="true">
+                <div
+                  LibsUiComponentsDragContainerDirective
+                  [(items)]="basicItems"
+                  [acceptDragSameGroup]="true">
                   @for (item of basicItems; track item) {
-                    <div class="list-item"
-                         LibsUiDragItemDirective>
+                    <div
+                      class="list-item"
+                      LibsUiDragItemDirective>
                       <span class="item-icon">📋</span>
                       <span class="item-text">{{ item }}</span>
                     </div>
@@ -1818,19 +1865,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
               <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">
+                  <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"
+                        LibsUiDragItemDirective>
                         <div class="kanban-item-header">
                           <span class="item-title">{{ item.title }}</span>
-                          <span class="item-status" [class]="'status-' + item.status">
+                          <span
+                            class="item-status"
+                            [class]="'status-' + item.status">
                             {{ item.status }}
                           </span>
                         </div>
@@ -1846,25 +1897,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             <div class="demo-example">
               <h3>Nested Containers copy</h3>
               <div class="nested-container">
-                <div LibsUiComponentsDragContainerDirective 
-                     [(items)]="nestedItems"
-                     [groupName]="'parent'"
-                     [mode]="'copy'"
-                     [acceptDragSameGroup]="true">
+                <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"
+                      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">
+                        <div
+                          LibsUiComponentsDragContainerDirective
+                          [(items)]="item.subItems"
+                          [groupName]="'child'"
+                          [acceptDragSameGroup]="true">
                           @for (subItem of item.subItems; track subItem) {
-                            <div class="sub-item"
-                                 LibsUiDragItemDirective>
+                            <div
+                              class="sub-item"
+                              LibsUiDragItemDirective>
                               {{ subItem }}
                             </div>
                           }
@@ -1880,7 +1935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
         <section class="api-doc-section">
           <h2>API Documentation</h2>
-          
+
           <h3>Inputs</h3>
           <div class="table-container">
             <table class="api-table">
@@ -1895,10 +1950,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
               <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>
+                    <td>
+                      <code>{{ input.name }}</code>
+                    </td>
+                    <td>
+                      <code>{{ input.type }}</code>
+                    </td>
+                    <td>{{ input.default }}</td>
+                    <td>{{ input.description }}</td>
                   </tr>
                 }
               </tbody>
@@ -1918,9 +1977,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
               <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>
+                    <td>
+                      <code>{{ output.name }}</code>
+                    </td>
+                    <td>
+                      <code>{{ output.type }}</code>
+                    </td>
+                    <td>{{ output.description }}</td>
                   </tr>
                 }
               </tbody>
@@ -1933,9 +1996,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
           <div class="interface-docs">
             @for (interfaceItem of interfacesDoc; track interfaceItem.name) {
               <div class="interface-item">
-                <h3>{{interfaceItem.name}}</h3>
+                <h3>{{ interfaceItem.name }}</h3>
                 <pre><code>{{interfaceItem.code}}</code></pre>
-                <p>{{interfaceItem.description}}</p>
+                <p>{{ interfaceItem.description }}</p>
               </div>
             }
           </div>
@@ -1946,10 +2009,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
           <ul>
             @for (feature of features; track feature.id) {
               <li>
-                <span class="feature-icon">{{feature.icon}}</span>
+                <span class="feature-icon">{{ feature.icon }}</span>
                 <div class="feature-info">
-                  <h3>{{feature.title}}</h3>
-                  <p>{{feature.description}}</p>
+                  <h3>{{ feature.title }}</h3>
+                  <p>{{ feature.description }}</p>
                 </div>
               </li>
             }
@@ -1961,7 +2024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
           <div class="code-examples">
             @for (example of codeExamples; track example.id) {
               <div class="code-example">
-                <h3>{{example.title}}</h3>
+                <h3>{{ example.title }}</h3>
                 <pre><code [innerHTML]="example.code"></code></pre>
               </div>
             }