@cuby-ui/cdk 0.0.231 → 0.0.233

package/fesm2022/cuby-ui-cdk.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { QueryList, inject, ChangeDetectorRef, NgZone, InjectionToken, ElementRef, Directive, Output, Input, Injectable, HostListener, EventEmitter, HostBinding, ViewContainerRef, TemplateRef, input, effect, Pipe } from '@angular/core';
+import { QueryList, inject, ChangeDetectorRef, NgZone, InjectionToken, ElementRef, Directive, Output, Input, Injectable, Renderer2, signal, input, output, HostListener, EventEmitter, HostBinding, ViewContainerRef, TemplateRef, effect, Pipe } from '@angular/core';
 import { __decorate, __metadata } from 'tslib';
 import { NgControl, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { pipe, switchMap, EMPTY, fromEvent, tap, Observable, asyncScheduler, BehaviorSubject, timer, map, startWith, share, merge, filter, takeUntil, repeat, withLatestFrom, of, take, distinctUntilChanged, skip, Subject } from 'rxjs';
+import { pipe, switchMap, EMPTY, fromEvent, tap, Observable, asyncScheduler, BehaviorSubject, timer, map, startWith, share, merge, filter, takeUntil, repeat, withLatestFrom, of, take, distinctUntilChanged, skip, Subject, interval } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import { ɵAnimationEngine as _AnimationEngine } from '@angular/animations/browser';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -796,6 +796,222 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: undefined }, { type: undefined }, { type: undefined }] });
 
+class CuiDragListDirective {
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.element = inject(ElementRef).nativeElement;
+        this.id = inject(CuiIdService).generate();
+        this.listId = `${this.id}-list`;
+        this.renderer.setAttribute(this.element, 'id', this.listId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDragListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CuiDragListDirective, isStandalone: true, selector: "[cuiDragList]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDragListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiDragList]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+class CuiDragDropDirective {
+    constructor() {
+        this.zone = inject(NgZone);
+        this.document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
+        this.element = inject(ElementRef).nativeElement;
+        this.dragListDirective = inject(CuiDragListDirective);
+        this.PLACEHOLDER_CLASS = 'cc-drag-drop-placeholder';
+        this.listId = this.dragListDirective.listId;
+        this.itemAttribute = `${this.listId}-drag-item`;
+        this.abortController = new AbortController();
+        this.hostAbortController = new AbortController();
+        this.draggingElement = signal(null);
+        this.placeholderElement = signal(null);
+        this.dragData = signal({});
+        this.disabled = input(false);
+        this.elementDragged = output();
+        this.initDragItem();
+        this.initPointerEvents(this.element);
+    }
+    ngOnDestroy() {
+        this.destroyEvents();
+    }
+    changePointerEvents(element) {
+        this.hostAbortController.abort();
+        this.hostAbortController = new AbortController();
+        this.initPointerEvents(element);
+    }
+    onDrag(clientX, clientY) {
+        if (!this.draggingElement()) {
+            return;
+        }
+        const elementsFromPoint = this.document.elementsFromPoint(clientX, clientY);
+        const elementFromPoint = elementsFromPoint.find((element) => element.closest(`#${this.listId}`));
+        if (!elementFromPoint) {
+            return;
+        }
+        const targetElement = elementFromPoint.closest(`[${this.itemAttribute}]`);
+        if (!targetElement || targetElement === this.draggingElement()) {
+            return;
+        }
+        this.configurateDragData(targetElement, clientY);
+    }
+    onDragStart(event) {
+        if (this.disabled()) {
+            return;
+        }
+        let isClicked = true;
+        const elementClientRect = this.element.getBoundingClientRect();
+        const shiftX = event.clientX - elementClientRect.left;
+        const shiftY = event.clientY - elementClientRect.top;
+        this.prevIndex = this.calculatePreviousIndex();
+        this.document.addEventListener('pointermove', ({ clientX, clientY }) => {
+            if (isClicked) {
+                this.prepareMoving();
+                isClicked = false;
+            }
+            const draggingElement = this.draggingElement();
+            this.renderer.setStyle(draggingElement, 'left', clientX - shiftX + 'px');
+            this.renderer.setStyle(draggingElement, 'top', clientY - shiftY + 'px');
+            this.onDrag(clientX, clientY);
+        }, { signal: this.abortController.signal });
+    }
+    onDragEnd() {
+        const { targetElement, pointer } = this.dragData();
+        if (targetElement && pointer) {
+            this.elementDragged.emit({
+                index: this.index,
+                prevIndex: this.prevIndex,
+                targetElement,
+                pointer
+            });
+        }
+        // remove document events
+        this.abortController.abort();
+        this.abortController = new AbortController();
+        this.removeDragElement();
+        this.removePlaceholder();
+        this.dragData.set({});
+    }
+    initDragItem() {
+        this.renderer.setAttribute(this.element, this.itemAttribute, 'true');
+    }
+    initPointerEvents(element) {
+        const signal = this.hostAbortController.signal;
+        this.zone.runOutsideAngular(() => {
+            element.addEventListener('pointerup', this.onDragEnd.bind(this), { signal });
+            element.addEventListener('pointerdown', this.onDragStart.bind(this), { signal });
+        });
+    }
+    destroyEvents() {
+        this.hostAbortController.abort();
+        this.abortController.abort();
+    }
+    prepareMoving() {
+        const placeholderElement = this.createPlaceholderElement();
+        const draggingElement = this.createDragElement();
+        this.document.addEventListener('pointerup', this.onDragEnd.bind(this), {
+            signal: this.abortController.signal
+        });
+        this.element.after(placeholderElement);
+        this.draggingElement.set(draggingElement);
+        this.element.remove();
+        this.document.body.append(draggingElement);
+    }
+    configurateDragData(targetElement, clientY) {
+        const placeholderElement = this.placeholderElement();
+        const boundingRect = targetElement.getBoundingClientRect();
+        const middleY = boundingRect.top + boundingRect.height / 2;
+        if (clientY < middleY) {
+            targetElement.before(placeholderElement);
+            this.dragData.set({ targetElement, pointer: 'BEFORE' });
+        }
+        else {
+            targetElement.after(placeholderElement);
+            this.dragData.set({ targetElement, pointer: 'AFTER' });
+        }
+        this.index = this.calculateIndex(placeholderElement);
+    }
+    createDragElement() {
+        const width = this.element.clientWidth;
+        const draggingElement = this.element.cloneNode(true);
+        this.renderer.setStyle(draggingElement, 'position', 'fixed');
+        this.renderer.setStyle(draggingElement, 'display', 'block');
+        this.renderer.setStyle(draggingElement, 'margin', '0');
+        this.renderer.setStyle(draggingElement, 'width', `${width}px`);
+        return draggingElement;
+    }
+    createPlaceholderElement() {
+        const element = this.placeholderElement();
+        if (element) {
+            return element;
+        }
+        const placeholderElement = this.renderer.createElement('div');
+        this.renderer.addClass(placeholderElement, this.PLACEHOLDER_CLASS);
+        this.placeholderElement.set(placeholderElement);
+        return placeholderElement;
+    }
+    removeDragElement() {
+        const draggingElement = this.draggingElement();
+        if (!draggingElement) {
+            return;
+        }
+        draggingElement.remove();
+        this.draggingElement.set(null);
+    }
+    removePlaceholder() {
+        const placeholderElement = this.placeholderElement();
+        if (!placeholderElement) {
+            return;
+        }
+        placeholderElement.after(this.element);
+        placeholderElement.remove();
+        this.placeholderElement.set(null);
+    }
+    calculateIndex(placeholderElement) {
+        const childNodes = placeholderElement.parentElement.childNodes;
+        const elements = Array.from(childNodes).filter((node) => node instanceof HTMLElement);
+        return elements.indexOf(placeholderElement);
+    }
+    calculatePreviousIndex() {
+        let index = 0;
+        let currentElement = this.element;
+        while (currentElement && currentElement.previousElementSibling) {
+            index++;
+            currentElement = currentElement.previousElementSibling;
+        }
+        return index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: CuiDragDropDirective, isStandalone: true, selector: "[cuiDragDrop]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementDragged: "elementDragged" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDragDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiDragDrop]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+class CuiDragPointerDirective {
+    constructor() {
+        this.dragDropDirective = inject(CuiDragDropDirective);
+        this.element = inject(ElementRef).nativeElement;
+        this.dragDropDirective.changePointerEvents(this.element);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDragPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CuiDragPointerDirective, isStandalone: true, selector: "[cuiDragPointer]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDragPointerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiDragPointer]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
 class CuiAutoResizingDirective {
     constructor() {
         this.window = inject(CUI_WINDOW);
@@ -858,6 +1074,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['input']
             }] } });
 
+class CuiHandleScrollDirective {
+    constructor() {
+        this.window = inject(CUI_WINDOW);
+        this.document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.abortController = new AbortController();
+        this.SCROLL_AREA_HEIGHT = 100;
+        this.scrollGapElements = signal(null);
+        this.scrollSpeed = input(100);
+    }
+    ngOnDestroy() {
+        this.removeSubscription();
+    }
+    onTargetMove() {
+        const signal = this.abortController.signal;
+        this.zone.runOutsideAngular(this.initScrollEvent.bind(this, signal));
+    }
+    initScrollEvent(signal) {
+        this.document.addEventListener('pointermove', ({ clientY }) => this.handleScroll(clientY), { signal });
+        this.document.addEventListener('pointerup', () => {
+            this.scrollGapElements()?.forEach((element) => element.remove());
+            this.scrollGapElements.set(null);
+            this.removeSubscription();
+            this.abortController.abort();
+            this.abortController = new AbortController();
+        }, { signal });
+    }
+    handleScroll(clientY) {
+        const windowHeight = this.document.documentElement.clientHeight;
+        const scrollSpeed = this.scrollSpeed();
+        if (!this.scrollGapElements()) {
+            this.setScrollGapElements();
+        }
+        if (clientY <= this.SCROLL_AREA_HEIGHT) {
+            this.startScrolling(-scrollSpeed);
+            return;
+        }
+        if (clientY >= windowHeight - this.SCROLL_AREA_HEIGHT) {
+            this.startScrolling(scrollSpeed);
+            return;
+        }
+        this.removeSubscription();
+    }
+    setScrollGapElements() {
+        const scrollGapElement = this.renderer.createElement('div');
+        this.renderer.setStyle(scrollGapElement, 'position', 'fixed');
+        this.renderer.setStyle(scrollGapElement, 'width', '100%');
+        this.renderer.setStyle(scrollGapElement, 'height', '48px');
+        this.renderer.setStyle(scrollGapElement, 'top', '0');
+        const scrollGapBottomElement = scrollGapElement.cloneNode(true);
+        this.renderer.appendChild(this.document.body, scrollGapElement);
+        this.renderer.appendChild(this.document.body, scrollGapBottomElement);
+        this.scrollGapElements.set([scrollGapElement, scrollGapBottomElement]);
+    }
+    startScrolling(speed) {
+        this.removeSubscription();
+        this.scrollSubscription = interval(this.scrollSpeed()).subscribe(() => this.window.scrollBy({ top: speed, behavior: 'smooth' }));
+    }
+    removeSubscription() {
+        this.scrollSubscription?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiHandleScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: CuiHandleScrollDirective, isStandalone: true, selector: "[cuiHandleScroll]", inputs: { scrollSpeed: { classPropertyName: "scrollSpeed", publicName: "scrollSpeed", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onTargetMove()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiHandleScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiHandleScroll]',
+                    standalone: true,
+                    host: {
+                        '(pointerdown)': 'onTargetMove()'
+                    }
+                }]
+        }] });
+
 class CuiClickOutsideDirective {
     constructor() {
         this.element = inject(ElementRef).nativeElement;
@@ -1158,5 +1450,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CUI_ACTIVE_ELEMENT, CUI_ANIMATION_FRAME, CUI_FALSE_HANDLER, CUI_HISTORY, CUI_IOS_REG_EXP, CUI_IS_ANDROID, CUI_IS_CYPRESS, CUI_IS_E2E, CUI_IS_IOS, CUI_IS_MOBILE, CUI_IS_PLAYWRIGHT, CUI_IS_TOUCH, CUI_IS_WEBKIT, CUI_LOCAL_STORAGE, CUI_NAVIGATOR, CUI_PLATFORM, CUI_REMOVED_ELEMENT, CUI_SAFARI_REG_EXP, CUI_SESSION_STORAGE, CUI_TRUE_HANDLER, CUI_USER_AGENT, CUI_WINDOW, CuiActiveZone, CuiAutoResizingDirective, CuiClickOutsideDirective, CuiContentEditableValueAccessorDirective, CuiDestroyService, CuiDimensionsObserverDirective, CuiElementDirective, CuiFilterPipe, CuiFocusTrapDirective, CuiHovered, CuiHoveredService, CuiIdService, CuiItemDirective, CuiLadderListDirective, CuiLetContext, CuiLetDirective, CuiLetDirectiveImpl, CuiPopoverService, CuiPureException, CuiTargetDirective, CuiTime, EMPTY_ARRAY, EMPTY_CLIENT_RECT, EMPTY_FUNCTION, EMPTY_QUERY, cuiArrayRemove, cuiBlurNativeFocused, cuiClamp, cuiContainsOrAfter, cuiCreateToken, cuiCreateTokenFromFactory, cuiGetActualTarget, cuiGetClosestFocusable, cuiGetDocumentOrShadowRoot, cuiGetElementObscures, cuiGetNativeFocused, cuiHovered, cuiIfMap, cuiInjectElement, cuiIsElement, cuiIsHTMLElement, cuiIsInput, cuiIsIos, cuiIsNativeFocused, cuiIsNativeKeyboardFocusable, cuiIsNativeMouseFocusable, cuiIsPresent, cuiIsTextNode, cuiIsTextarea, cuiIsTextfield, cuiPointToClientRect, cuiProvide, cuiPure, cuiPx, cuiTypedFromEvent, cuiWatch, cuiZoneOptimized, cuiZonefree, cuiZonefreeScheduler, cuiZonefull, cuiZonefullScheduler, svgNodeFilter };
+export { CUI_ACTIVE_ELEMENT, CUI_ANIMATION_FRAME, CUI_FALSE_HANDLER, CUI_HISTORY, CUI_IOS_REG_EXP, CUI_IS_ANDROID, CUI_IS_CYPRESS, CUI_IS_E2E, CUI_IS_IOS, CUI_IS_MOBILE, CUI_IS_PLAYWRIGHT, CUI_IS_TOUCH, CUI_IS_WEBKIT, CUI_LOCAL_STORAGE, CUI_NAVIGATOR, CUI_PLATFORM, CUI_REMOVED_ELEMENT, CUI_SAFARI_REG_EXP, CUI_SESSION_STORAGE, CUI_TRUE_HANDLER, CUI_USER_AGENT, CUI_WINDOW, CuiActiveZone, CuiAutoResizingDirective, CuiClickOutsideDirective, CuiContentEditableValueAccessorDirective, CuiDestroyService, CuiDimensionsObserverDirective, CuiDragDropDirective, CuiDragListDirective, CuiDragPointerDirective, CuiElementDirective, CuiFilterPipe, CuiFocusTrapDirective, CuiHandleScrollDirective, CuiHovered, CuiHoveredService, CuiIdService, CuiItemDirective, CuiLadderListDirective, CuiLetContext, CuiLetDirective, CuiLetDirectiveImpl, CuiPopoverService, CuiPureException, CuiTargetDirective, CuiTime, EMPTY_ARRAY, EMPTY_CLIENT_RECT, EMPTY_FUNCTION, EMPTY_QUERY, cuiArrayRemove, cuiBlurNativeFocused, cuiClamp, cuiContainsOrAfter, cuiCreateToken, cuiCreateTokenFromFactory, cuiGetActualTarget, cuiGetClosestFocusable, cuiGetDocumentOrShadowRoot, cuiGetElementObscures, cuiGetNativeFocused, cuiHovered, cuiIfMap, cuiInjectElement, cuiIsElement, cuiIsHTMLElement, cuiIsInput, cuiIsIos, cuiIsNativeFocused, cuiIsNativeKeyboardFocusable, cuiIsNativeMouseFocusable, cuiIsPresent, cuiIsTextNode, cuiIsTextarea, cuiIsTextfield, cuiPointToClientRect, cuiProvide, cuiPure, cuiPx, cuiTypedFromEvent, cuiWatch, cuiZoneOptimized, cuiZonefree, cuiZonefreeScheduler, cuiZonefull, cuiZonefullScheduler, svgNodeFilter };
 //# sourceMappingURL=cuby-ui-cdk.mjs.map