@acorex/cdk 21.0.0-next.9 → 21.0.0-next51

package/fesm2022/acorex-cdk-resizable.mjs

@@ -3,6 +3,7 @@ import { AXHtmlUtil } from '@acorex/core/utils';
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, NgZone, DOCUMENT, PLATFORM_ID, signal, model, output, Directive } from '@angular/core';
+import { Subscription } from 'rxjs';
 
 class AXResizableDirective {
     constructor() {
@@ -12,12 +13,26 @@ class AXResizableDirective {
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
         this.isResizing = signal(false, ...(ngDevMode ? [{ debugName: "isResizing" }] : []));
+        this.initialElementWidth = 0;
+        this.startMoveWidth = 0;
+        this.subscriptions = new Subscription();
+        // Bound event handlers to maintain reference for cleanup
+        this.boundMouseDown = this.onMouseDown.bind(this);
+        this.boundMouseMove = this.onMouseMove.bind(this);
+        this.boundMouseUp = this.onMouseUp.bind(this);
+        this.boundMouseEnter = this.onMouseEnter.bind(this);
+        this.boundMouseLeave = this.onMouseLeave.bind(this);
+        this.boundDoubleClick = this.onDoubleClick.bind(this);
         this.resizeObserver = new ResizeObserver((entries) => {
-            entries
-                .filter((e) => e.target === this.el.nativeElement.parentElement)
-                .forEach((i) => {
-                this.maxWidth.set(i.contentRect.width);
-            });
+            const parentElement = this.hostElement.parentElement;
+            if (!parentElement)
+                return;
+            for (const entry of entries) {
+                if (entry.target === parentElement && this.maxWidth() === Infinity) {
+                    this.maxWidth.set(entry.contentRect.width);
+                    break;
+                }
+            }
         });
         /** Define if directive is active or not */
         this.axResizable = model(true, ...(ngDevMode ? [{ debugName: "axResizable" }] : []));
@@ -38,57 +53,70 @@ class AXResizableDirective {
         /** Event emitted on double-click. */
         this.onResizingDblClick = output();
         this.isRTL = signal(AXHtmlUtil.isRtl(this.document.documentElement), ...(ngDevMode ? [{ debugName: "isRTL" }] : []));
-        this.platformService.directionChange.subscribe((i) => {
+        this.isBrowser = isPlatformBrowser(this.platformID);
+        this.hostElement = this.el.nativeElement;
+        this.subscriptions.add(this.platformService.directionChange.subscribe((i) => {
             this.isRTL.set(i.data === 'rtl');
-        });
+            if (this.resizeHandle) {
+                this.updateHandlePosition();
+            }
+        }));
     }
     ngAfterViewInit() {
-        this.initialElementWidth = this.el.nativeElement.offsetWidth; // Store the initial width
-        if (this.width() !== null) {
-            this.el.nativeElement.style.width = `${this.width()}px`;
+        if (!this.isBrowser)
+            return;
+        this.initialElementWidth = this.hostElement.offsetWidth;
+        const initialWidth = this.width();
+        if (initialWidth !== null) {
+            this.hostElement.style.width = `${initialWidth}px`;
         }
         if (this.maxWidth() === Infinity) {
-            const parentWidth = this.el.nativeElement.parentElement?.offsetWidth;
+            const parentWidth = this.hostElement.parentElement?.offsetWidth;
             if (parentWidth) {
                 this.maxWidth.set(parentWidth);
             }
         }
-        this.resizeObserver.observe(this.el.nativeElement.parentElement);
+        const parentElement = this.hostElement.parentElement;
+        if (parentElement) {
+            this.resizeObserver.observe(parentElement);
+        }
         this.createResizeHandle();
         this.setupResizableState();
     }
     ngOnDestroy() {
+        this.subscriptions.unsubscribe();
         this.resizeObserver.disconnect();
         this.cleanupEventListeners();
     }
-    // ngDoCheck(): void {
-    //   console.log('check');
-    // }
     setupResizableState() {
-        this.axResizable.subscribe((isActive) => {
+        this.subscriptions.add(this.axResizable.subscribe((isActive) => {
             if (!isActive) {
-                this.resetToInitialWidth(); // Reset width when disabled
-                this.cleanupEventListeners(); // Remove event listeners
+                this.resetToInitialWidth();
+                this.cleanupEventListeners();
             }
             else {
-                this.createResizeHandle(); // Re-enable functionality
+                this.createResizeHandle();
             }
-        });
+        }));
     }
     createResizeHandle() {
-        if (!this.axResizable())
-            return; // Do nothing if directive is disabled
-        this.el.nativeElement.style.position = 'relative';
+        if (!this.axResizable() || this.resizeHandle)
+            return;
+        this.hostElement.style.position = 'relative';
         this.resizeHandle = this.document.createElement('div');
         this.resizeHandle.classList.add('ax-resizable-handler');
-        this.el.nativeElement.appendChild(this.resizeHandle);
-        const isRTL = this.isRTL();
+        this.hostElement.appendChild(this.resizeHandle);
+        this.applyHandleStyles();
+        this.attachEventListeners();
+    }
+    applyHandleStyles() {
+        if (!this.resizeHandle)
+            return;
         Object.assign(this.resizeHandle.style, {
             width: STYLES.handlerWidth,
             backgroundColor: STYLES.backgroundColor,
             position: 'absolute',
             top: '0',
-            [isRTL ? 'left' : 'right']: '0',
             bottom: '0',
             cursor: STYLES.cursor,
             zIndex: STYLES.zIndex,
@@ -96,145 +124,165 @@ class AXResizableDirective {
             borderRadius: STYLES.borderRadius,
             userSelect: 'none',
         });
+        this.updateHandlePosition();
+    }
+    updateHandlePosition() {
+        if (!this.resizeHandle)
+            return;
+        const isRTL = this.isRTL();
+        if (isRTL) {
+            this.resizeHandle.style.left = '0';
+            this.resizeHandle.style.right = '';
+        }
+        else {
+            this.resizeHandle.style.right = '0';
+            this.resizeHandle.style.left = '';
+        }
+    }
+    attachEventListeners() {
+        if (!this.resizeHandle)
+            return;
+        const handle = this.resizeHandle;
         this.zone.runOutsideAngular(() => {
-            this.resizeHandle.addEventListener('mousedown', this.onMouseDown.bind(this));
-            this.document.addEventListener('mousemove', this.onMouseMove.bind(this));
-            this.document.addEventListener('mouseup', this.onMouseUp.bind(this));
-            this.resizeHandle.addEventListener('mouseenter', this.onMouseEnter.bind(this));
-            this.resizeHandle.addEventListener('mouseleave', this.onMouseLeave.bind(this));
-            this.resizeHandle.addEventListener('dblclick', this.onDoubleClick.bind(this));
+            handle.addEventListener('mousedown', this.boundMouseDown);
+            handle.addEventListener('mouseenter', this.boundMouseEnter);
+            handle.addEventListener('mouseleave', this.boundMouseLeave);
+            handle.addEventListener('dblclick', this.boundDoubleClick);
+            this.document.addEventListener('mousemove', this.boundMouseMove);
+            this.document.addEventListener('mouseup', this.boundMouseUp);
         });
     }
     cleanupEventListeners() {
         if (this.resizeHandle) {
-            this.resizeHandle.removeEventListener('mousedown', this.onMouseDown.bind(this));
-            this.resizeHandle.removeEventListener('mouseenter', this.onMouseEnter.bind(this));
-            this.resizeHandle.removeEventListener('mouseleave', this.onMouseLeave.bind(this));
-            this.resizeHandle.removeEventListener('dblclick', this.onDoubleClick.bind(this));
-            if (this.resizeHandle.parentElement) {
-                this.resizeHandle.parentElement.removeChild(this.resizeHandle);
-            }
+            this.resizeHandle.removeEventListener('mousedown', this.boundMouseDown);
+            this.resizeHandle.removeEventListener('mouseenter', this.boundMouseEnter);
+            this.resizeHandle.removeEventListener('mouseleave', this.boundMouseLeave);
+            this.resizeHandle.removeEventListener('dblclick', this.boundDoubleClick);
+            this.resizeHandle.remove();
+            this.resizeHandle = undefined;
         }
-        this.document.removeEventListener('mousemove', this.onMouseMove.bind(this));
-        this.document.removeEventListener('mouseup', this.onMouseUp.bind(this));
+        this.document.removeEventListener('mousemove', this.boundMouseMove);
+        this.document.removeEventListener('mouseup', this.boundMouseUp);
         this.document.body.style.cursor = '';
     }
     onMouseDown(event) {
-        if (isPlatformBrowser(this.platformID)) {
-            const handleRect = this.resizeHandle.getBoundingClientRect();
-            if (event.clientX >= handleRect.left && event.clientX <= handleRect.right) {
-                this.isResizing.set(true);
-                this.document.body.style.cursor = STYLES.cursorActive;
-                this.resizeHandle.style.backgroundColor = STYLES.backgroundColorActive;
-                event.preventDefault();
-                this.startMoveWidth = this.el.nativeElement.offsetWidth;
-                this.onResizingStarted.emit({
-                    component: this,
-                    htmlElement: this.el.nativeElement,
-                    isUserInteraction: true,
-                    name: 'resizingStarted',
-                    value: this.el.nativeElement.offsetWidth,
-                    oldValue: this.el.nativeElement.offsetWidth,
-                });
-            }
-        }
+        if (!this.resizeHandle)
+            return;
+        const handleRect = this.resizeHandle.getBoundingClientRect();
+        if (event.clientX < handleRect.left || event.clientX > handleRect.right)
+            return;
+        event.preventDefault();
+        this.isResizing.set(true);
+        this.document.body.style.cursor = STYLES.cursorActive;
+        this.resizeHandle.style.backgroundColor = STYLES.backgroundColorActive;
+        this.startMoveWidth = this.hostElement.offsetWidth;
+        this.zone.run(() => {
+            this.onResizingStarted.emit({
+                component: this,
+                htmlElement: this.hostElement,
+                isUserInteraction: true,
+                name: 'resizingStarted',
+                value: this.startMoveWidth,
+                oldValue: this.startMoveWidth,
+            });
+        });
     }
     onMouseMove(event) {
-        if (this.isResizing() && isPlatformBrowser(this.platformID)) {
-            const rect = this.el.nativeElement.getBoundingClientRect();
-            const isRTL = this.isRTL();
-            let newWidth;
-            if (isRTL) {
-                newWidth = rect.right - event.clientX;
-            }
-            else {
-                newWidth = event.clientX - rect.left;
-            }
-            // Clamp the width to minWidth and maxWidth
-            newWidth = Math.max(this.minWidth(), Math.min(newWidth, this.maxWidth()));
-            // Update the width only if it has changed
-            if (newWidth !== this.el.nativeElement.offsetWidth) {
-                this.el.nativeElement.style.width = `${newWidth}px`;
-            }
+        if (!this.isResizing())
+            return;
+        const rect = this.hostElement.getBoundingClientRect();
+        const isRTL = this.isRTL();
+        let newWidth = isRTL ? rect.right - event.clientX : event.clientX - rect.left;
+        newWidth = Math.max(this.minWidth(), Math.min(newWidth, this.maxWidth()));
+        if (newWidth !== this.hostElement.offsetWidth) {
+            this.hostElement.style.width = `${newWidth}px`;
         }
     }
     onMouseUp() {
-        if (this.isResizing() && isPlatformBrowser(this.platformID)) {
-            this.isResizing.set(false);
-            this.document.body.style.cursor = '';
-            this.resizeHandle.style.backgroundColor = STYLES.backgroundColor;
+        if (!this.isResizing() || !this.resizeHandle)
+            return;
+        this.isResizing.set(false);
+        this.document.body.style.cursor = '';
+        this.resizeHandle.style.backgroundColor = STYLES.backgroundColor;
+        const currentWidth = this.hostElement.offsetWidth;
+        this.zone.run(() => {
             this.onResizingEnded.emit({
                 component: this,
-                htmlElement: this.el.nativeElement,
+                htmlElement: this.hostElement,
                 isUserInteraction: true,
                 name: 'resizingEnded',
-                value: this.el.nativeElement.offsetWidth,
+                value: currentWidth,
                 oldValue: this.startMoveWidth,
             });
-        }
+        });
     }
     onMouseEnter() {
-        if (!this.isResizing()) {
+        if (!this.isResizing() && this.resizeHandle) {
             this.resizeHandle.style.backgroundColor = STYLES.backgroundColorHover;
         }
     }
     onMouseLeave() {
-        if (!this.isResizing()) {
+        if (!this.isResizing() && this.resizeHandle) {
             this.resizeHandle.style.backgroundColor = STYLES.backgroundColor;
         }
     }
     onDoubleClick() {
-        const elementWidth = this.el.nativeElement.offsetWidth;
-        // const maxWidth = this.maxWidth();
-        // const initialWidth = this.initialWidth() !== null ? this.initialWidth() : this.initialElementWidth;
+        const elementWidth = this.hostElement.offsetWidth;
+        const action = this.dblClickAction();
         let newWidth;
-        if (this.dblClickAction() === 'reset') {
-            newWidth = this.resetToInitialWidth();
-        }
-        else if (this.dblClickAction() === 'maximize') {
-            newWidth = this.maximizeToMaxWidth();
+        switch (action) {
+            case 'reset':
+                newWidth = this.resetToInitialWidth();
+                break;
+            case 'maximize':
+                newWidth = this.maximizeToMaxWidth();
+                break;
+            case 'fit':
+                newWidth = this.fitToContent();
+                break;
+            default:
+                newWidth = elementWidth;
         }
-        else {
-            newWidth = this.fitToContent();
-        }
-        this.onResizingDblClick.emit({
-            component: this,
-            htmlElement: this.el.nativeElement,
-            isUserInteraction: true,
-            name: 'onResizingDblClick',
-            oldValue: elementWidth,
-            value: newWidth,
+        this.zone.run(() => {
+            this.onResizingDblClick.emit({
+                component: this,
+                htmlElement: this.hostElement,
+                isUserInteraction: true,
+                name: 'onResizingDblClick',
+                oldValue: elementWidth,
+                value: newWidth,
+            });
         });
     }
     resetToInitialWidth() {
-        if (this.defaultWidth() !== null) {
-            this.el.nativeElement.style.width = `${this.defaultWidth()}px`;
-            return this.defaultWidth();
+        const defaultWidth = this.defaultWidth();
+        if (defaultWidth !== null) {
+            this.hostElement.style.width = `${defaultWidth}px`;
+            return defaultWidth;
         }
-        else if (this.width() !== null) {
-            this.el.nativeElement.style.width = `${this.width()}px`;
-            return this.width();
-        }
-        else {
-            this.el.nativeElement.style.width = `${this.initialElementWidth}px`;
-            return this.initialElementWidth;
+        const initialWidth = this.width();
+        if (initialWidth !== null) {
+            this.hostElement.style.width = `${initialWidth}px`;
+            return initialWidth;
         }
+        this.hostElement.style.width = `${this.initialElementWidth}px`;
+        return this.initialElementWidth;
     }
     maximizeToMaxWidth() {
         const maxWidth = this.maxWidth();
         if (maxWidth !== Infinity) {
-            this.el.nativeElement.style.width = `${maxWidth}px`;
+            this.hostElement.style.width = `${maxWidth}px`;
         }
         return maxWidth;
     }
     fitToContent() {
-        this.el.nativeElement.style.width = 'fit-content';
-        return this.el.nativeElement.clientWidth;
+        this.hostElement.style.width = 'fit-content';
+        return this.hostElement.clientWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: AXResizableDirective, isStandalone: true, selector: "[axResizable]", inputs: { axResizable: { classPropertyName: "axResizable", publicName: "axResizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, dblClickAction: { classPropertyName: "dblClickAction", publicName: "dblClickAction", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { axResizable: "axResizableChange", minWidth: "minWidthChange", maxWidth: "maxWidthChange", dblClickAction: "dblClickActionChange", width: "widthChange", defaultWidth: "defaultWidthChange", onResizingStarted: "onResizingStarted", onResizingEnded: "onResizingEnded", onResizingDblClick: "onResizingDblClick" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: AXResizableDirective, isStandalone: true, selector: "[axResizable]", inputs: { axResizable: { classPropertyName: "axResizable", publicName: "axResizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, dblClickAction: { classPropertyName: "dblClickAction", publicName: "dblClickAction", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { axResizable: "axResizableChange", minWidth: "minWidthChange", maxWidth: "maxWidthChange", dblClickAction: "dblClickActionChange", width: "widthChange", defaultWidth: "defaultWidthChange", onResizingStarted: "onResizingStarted", onResizingEnded: "onResizingEnded", onResizingDblClick: "onResizingDblClick" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXResizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axResizable]',