@acorex/cdk 22.1.0-next.31 → 22.1.0-next.33

package/fesm2022/acorex-cdk-resizable.mjs

@@ -12,39 +12,45 @@ class AXResizableDirective {
         this.zone = inject(NgZone);
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
+        this.resizeHandles = new Map();
         this.isResizing = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
+        this.activeHandle = null;
         this.initialElementWidth = 0;
-        this.startMoveWidth = 0;
+        this.initialElementHeight = 0;
+        this.startX = 0;
+        this.startY = 0;
+        this.startWidth = 0;
+        this.startHeight = 0;
+        this.startRatio = 1;
         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.boundPointerDown = this.onPointerDown.bind(this);
+        this.boundPointerMove = this.onPointerMove.bind(this);
+        this.boundPointerUp = this.onPointerUp.bind(this);
+        this.boundPointerEnter = this.onPointerEnter.bind(this);
+        this.boundPointerLeave = this.onPointerLeave.bind(this);
         this.boundDoubleClick = this.onDoubleClick.bind(this);
-        this.resizeObserver = new ResizeObserver((entries) => {
-            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;
-                }
-            }
-        });
+        this.isRTL = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRTL" }] : /* istanbul ignore next */ []));
         /** Define if directive is active or not */
         this.axResizable = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "axResizable" }] : /* istanbul ignore next */ []));
+        /** Logical handles to render. Defaults to the inline-end edge. */
+        this.handles = model(['end'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handles" }] : /* istanbul ignore next */ []));
         /** Minimum width for the resizable element. */
         this.minWidth = model(100, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
         /** Maximum width for the resizable element. Defaults to parent width if not provided. */
         this.maxWidth = model(Infinity, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
-        /** Behavior on double-click: 'reset' or 'maximize'. */
+        /** Minimum height for the resizable element. */
+        this.minHeight = model(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+        /** Maximum height for the resizable element. Defaults to parent height if not provided. */
+        this.maxHeight = model(Infinity, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        /** Behavior on double-click: 'reset', 'maximize', or 'fit'. */
         this.dblClickAction = model('reset', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dblClickAction" }] : /* istanbul ignore next */ []));
         /** Define initial width for the element. */
@@ -53,227 +59,365 @@ class AXResizableDirective {
         /** Define reset width for the element. */
         this.defaultWidth = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "defaultWidth" }] : /* istanbul ignore next */ []));
+        /** Define initial height for the element. */
+        this.height = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** Define reset height for the element. */
+        this.defaultHeight = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultHeight" }] : /* istanbul ignore next */ []));
+        /** Lock the element's aspect ratio from the size captured at pointer-down. */
+        this.lockAspectRatio = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lockAspectRatio" }] : /* istanbul ignore next */ []));
         /** Event emitted when resizing starts. */
         this.onResizingStarted = output();
         /** Event emitted when resizing ends. */
         this.onResizingEnded = output();
         /** Event emitted on double-click. */
         this.onResizingDblClick = output();
-        this.isRTL = signal(AXHtmlUtil.isRtl(this.document.documentElement), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRTL" }] : /* istanbul ignore next */ []));
         this.isBrowser = isPlatformBrowser(this.platformID);
         this.hostElement = this.el.nativeElement;
+        this.isRTL.set(AXHtmlUtil.isRtl(this.document.documentElement));
         this.subscriptions.add(this.platformService.directionChange.subscribe((i) => {
             this.isRTL.set(i.data === 'rtl');
-            if (this.resizeHandle) {
-                this.updateHandlePosition();
-            }
         }));
-        if (this.isBrowser) {
-            effect(() => {
-                if (this.isResizing()) {
-                    return;
+        if (!this.isBrowser) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const parentElement = this.hostElement.parentElement;
+            if (!parentElement) {
+                return;
+            }
+            for (const entry of entries) {
+                if (entry.target !== parentElement) {
+                    continue;
                 }
-                const resolvedWidth = this.width() ?? this.defaultWidth();
-                if (resolvedWidth !== null) {
-                    this.applyElementWidth(resolvedWidth);
+                if (this.maxWidth() === Infinity) {
+                    this.maxWidth.set(entry.contentRect.width);
                 }
-            });
-        }
+                if (this.maxHeight() === Infinity) {
+                    this.maxHeight.set(entry.contentRect.height);
+                }
+            }
+        });
+        effect(() => {
+            const isActive = this.axResizable();
+            const handles = this.handles();
+            this.reconcileHandles(isActive, handles);
+        });
+        effect(() => {
+            this.isRTL();
+            this.updateAllHandlePositions();
+        });
+        effect(() => {
+            if (this.isResizing()) {
+                return;
+            }
+            this.applySizeFromModel();
+        });
     }
     ngAfterViewInit() {
-        if (!this.isBrowser)
+        if (!this.isBrowser) {
             return;
+        }
         this.initialElementWidth = this.hostElement.offsetWidth;
-        this.applyWidthFromModel();
+        this.initialElementHeight = this.hostElement.offsetHeight;
+        this.applySizeFromModel();
+        const parentElement = this.hostElement.parentElement;
         if (this.maxWidth() === Infinity) {
-            const parentWidth = this.hostElement.parentElement?.offsetWidth;
+            const parentWidth = parentElement?.offsetWidth;
             if (parentWidth) {
                 this.maxWidth.set(parentWidth);
             }
         }
-        const parentElement = this.hostElement.parentElement;
+        if (this.maxHeight() === Infinity) {
+            const parentHeight = parentElement?.offsetHeight;
+            if (parentHeight) {
+                this.maxHeight.set(parentHeight);
+            }
+        }
         if (parentElement) {
-            this.resizeObserver.observe(parentElement);
+            this.resizeObserver?.observe(parentElement);
         }
-        this.createResizeHandle();
-        this.setupResizableState();
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
-        this.resizeObserver.disconnect();
-        this.cleanupEventListeners();
-    }
-    setupResizableState() {
-        this.subscriptions.add(this.axResizable.subscribe((isActive) => {
-            if (!isActive) {
-                this.applyWidthFromModel();
-                this.cleanupEventListeners();
-            }
-            else {
-                this.applyWidthFromModel();
-                this.createResizeHandle();
-            }
-        }));
+        this.resizeObserver?.disconnect();
+        this.destroyAllHandles();
+        this.document.body.style.cursor = '';
     }
-    applyWidthFromModel() {
-        const width = this.width();
-        if (width !== null) {
-            this.applyElementWidth(width);
+    reconcileHandles(isActive, handles) {
+        if (!this.isBrowser) {
             return;
         }
-        const defaultWidth = this.defaultWidth();
-        if (defaultWidth !== null) {
-            this.applyElementWidth(defaultWidth);
+        if (!isActive) {
+            this.stopResizing();
+            this.destroyAllHandles();
+            this.applySizeFromModel();
+            return;
+        }
+        this.hostElement.style.position = 'relative';
+        const unique = [...new Set(handles)];
+        const desired = new Set(unique);
+        for (const [type, element] of this.resizeHandles) {
+            if (!desired.has(type)) {
+                this.destroyHandle(type, element);
+            }
+        }
+        for (const type of unique) {
+            if (!this.resizeHandles.has(type)) {
+                this.createHandle(type);
+            }
         }
     }
-    applyElementWidth(width) {
-        this.hostElement.style.width = `${width}px`;
+    createHandle(type) {
+        const handle = this.document.createElement('div');
+        handle.classList.add('ax-resizable-handler', `ax-resizable-handler--${type}`);
+        handle.dataset['axResizeHandle'] = type;
+        this.hostElement.appendChild(handle);
+        this.applyHandleStyles(handle, type);
+        this.attachHandleListeners(handle);
+        this.resizeHandles.set(type, handle);
     }
-    createResizeHandle() {
-        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.hostElement.appendChild(this.resizeHandle);
-        this.applyHandleStyles();
-        this.attachEventListeners();
+    attachHandleListeners(handle) {
+        this.zone.runOutsideAngular(() => {
+            handle.addEventListener('pointerdown', this.boundPointerDown);
+            handle.addEventListener('pointermove', this.boundPointerMove);
+            handle.addEventListener('pointerup', this.boundPointerUp);
+            handle.addEventListener('pointercancel', this.boundPointerUp);
+            handle.addEventListener('pointerenter', this.boundPointerEnter);
+            handle.addEventListener('pointerleave', this.boundPointerLeave);
+            handle.addEventListener('dblclick', this.boundDoubleClick);
+        });
     }
-    applyHandleStyles() {
-        if (!this.resizeHandle)
-            return;
-        Object.assign(this.resizeHandle.style, {
-            width: STYLES.handlerWidth,
-            backgroundColor: STYLES.backgroundColor,
+    destroyHandle(type, handle) {
+        handle.removeEventListener('pointerdown', this.boundPointerDown);
+        handle.removeEventListener('pointermove', this.boundPointerMove);
+        handle.removeEventListener('pointerup', this.boundPointerUp);
+        handle.removeEventListener('pointercancel', this.boundPointerUp);
+        handle.removeEventListener('pointerenter', this.boundPointerEnter);
+        handle.removeEventListener('pointerleave', this.boundPointerLeave);
+        handle.removeEventListener('dblclick', this.boundDoubleClick);
+        handle.remove();
+        this.resizeHandles.delete(type);
+    }
+    destroyAllHandles() {
+        for (const [type, handle] of [...this.resizeHandles]) {
+            this.destroyHandle(type, handle);
+        }
+    }
+    applyHandleStyles(handle, type) {
+        const isCorner = type.includes('-');
+        Object.assign(handle.style, {
             position: 'absolute',
-            top: '0',
-            bottom: '0',
-            cursor: STYLES.cursor,
-            zIndex: STYLES.zIndex,
+            backgroundColor: STYLES.backgroundColor,
+            zIndex: isCorner ? STYLES.zIndexCorner : STYLES.zIndex,
             transition: STYLES.transition,
             borderRadius: STYLES.borderRadius,
             userSelect: 'none',
+            touchAction: 'none',
+            cursor: this.getCursorForHandle(type),
+            left: '',
+            right: '',
+            top: '',
+            bottom: '',
+            width: '',
+            height: '',
         });
-        this.updateHandlePosition();
+        this.positionHandle(handle, type);
     }
-    updateHandlePosition() {
-        if (!this.resizeHandle)
-            return;
-        const isRTL = this.isRTL();
-        if (isRTL) {
-            this.resizeHandle.style.left = '0';
-            this.resizeHandle.style.right = '';
+    updateAllHandlePositions() {
+        for (const [type, handle] of this.resizeHandles) {
+            handle.style.cursor = this.getCursorForHandle(type);
+            this.positionHandle(handle, type);
+        }
+    }
+    positionHandle(handle, type) {
+        const rtl = this.isRTL();
+        switch (type) {
+            case 'start':
+            case 'end':
+                handle.style.top = '0';
+                handle.style.bottom = '0';
+                handle.style.width = STYLES.handlerWidth;
+                this.applyInlineSide(handle, type, rtl);
+                break;
+            case 'top':
+            case 'bottom':
+                handle.style.left = '0';
+                handle.style.right = '0';
+                handle.style.height = STYLES.handlerHeight;
+                if (type === 'top') {
+                    handle.style.top = '0';
+                    handle.style.bottom = '';
+                }
+                else {
+                    handle.style.bottom = '0';
+                    handle.style.top = '';
+                }
+                break;
+            default: {
+                const [vertical, horizontal] = type.split('-');
+                handle.style.width = STYLES.cornerSize;
+                handle.style.height = STYLES.cornerSize;
+                if (vertical === 'top') {
+                    handle.style.top = '0';
+                    handle.style.bottom = '';
+                }
+                else {
+                    handle.style.bottom = '0';
+                    handle.style.top = '';
+                }
+                this.applyInlineSide(handle, horizontal, rtl);
+                break;
+            }
+        }
+    }
+    applyInlineSide(element, side, rtl) {
+        const physicalLeft = (side === 'start' && !rtl) || (side === 'end' && rtl);
+        if (physicalLeft) {
+            element.style.left = '0';
+            element.style.right = '';
         }
         else {
-            this.resizeHandle.style.right = '0';
-            this.resizeHandle.style.left = '';
+            element.style.right = '0';
+            element.style.left = '';
         }
     }
-    attachEventListeners() {
-        if (!this.resizeHandle)
-            return;
-        const handle = this.resizeHandle;
-        this.zone.runOutsideAngular(() => {
-            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);
-        });
+    applySizeFromModel() {
+        const width = this.width() ?? this.defaultWidth();
+        const height = this.height() ?? this.defaultHeight();
+        this.applySize(width, height);
     }
-    cleanupEventListeners() {
-        if (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.boundMouseMove);
-        this.document.removeEventListener('mouseup', this.boundMouseUp);
-        this.document.body.style.cursor = '';
+    applySize(width, height) {
+        if (width !== null) {
+            this.hostElement.style.width = `${width}px`;
+        }
+        if (height !== null) {
+            this.hostElement.style.height = `${height}px`;
+        }
     }
-    onMouseDown(event) {
-        if (!this.resizeHandle)
-            return;
-        const handleRect = this.resizeHandle.getBoundingClientRect();
-        if (event.clientX < handleRect.left || event.clientX > handleRect.right)
+    onPointerDown(event) {
+        const handleType = this.getHandleType(event);
+        const handle = event.currentTarget;
+        if (!handleType || !handle) {
             return;
+        }
         event.preventDefault();
+        event.stopPropagation();
+        try {
+            handle.setPointerCapture?.(event.pointerId);
+        }
+        catch {
+            // Pointer capture can throw for synthetic or inactive pointers.
+        }
+        this.activeHandle = handleType;
         this.isResizing.set(true);
-        this.document.body.style.cursor = STYLES.cursorActive;
-        this.resizeHandle.style.backgroundColor = STYLES.backgroundColorActive;
-        this.startMoveWidth = this.hostElement.offsetWidth;
+        this.startX = event.clientX;
+        this.startY = event.clientY;
+        this.startWidth = this.hostElement.offsetWidth;
+        this.startHeight = this.hostElement.offsetHeight;
+        this.startRatio = this.startHeight > 0 ? this.startWidth / this.startHeight : 1;
+        this.document.body.style.cursor = this.getActiveCursor(handleType);
+        handle.style.backgroundColor = STYLES.backgroundColorActive;
+        const size = { width: this.startWidth, height: this.startHeight };
         this.zone.run(() => {
             this.onResizingStarted.emit({
                 component: this,
                 htmlElement: this.hostElement,
                 isUserInteraction: true,
                 name: 'resizingStarted',
-                value: this.startMoveWidth,
-                oldValue: this.startMoveWidth,
+                value: size,
+                oldValue: size,
             });
         });
     }
-    onMouseMove(event) {
-        if (!this.isResizing())
+    onPointerMove(event) {
+        if (!this.isResizing() || !this.activeHandle) {
             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`;
         }
+        const axes = getHandleAxes(this.activeHandle);
+        const lock = this.lockAspectRatio();
+        const next = this.computeSize(event, this.activeHandle);
+        event.preventDefault();
+        this.applySize(axes.horizontal || lock ? next.width : null, axes.vertical || lock ? next.height : null);
     }
-    onMouseUp() {
-        if (!this.isResizing() || !this.resizeHandle)
+    onPointerUp(event) {
+        if (!this.isResizing()) {
             return;
+        }
+        const handle = event.currentTarget;
+        try {
+            handle?.releasePointerCapture?.(event.pointerId);
+        }
+        catch {
+            // Pointer capture may already have been released.
+        }
+        const axes = this.activeHandle ? getHandleAxes(this.activeHandle) : null;
+        const current = this.getCurrentSize();
+        const oldValue = { width: this.startWidth, height: this.startHeight };
         this.document.body.style.cursor = '';
-        this.resizeHandle.style.backgroundColor = STYLES.backgroundColor;
-        const currentWidth = this.hostElement.offsetWidth;
+        if (handle) {
+            handle.style.backgroundColor = STYLES.backgroundColor;
+        }
         this.zone.run(() => {
-            this.width.set(currentWidth);
+            if (axes?.horizontal) {
+                this.width.set(current.width);
+            }
+            if (axes?.vertical) {
+                this.height.set(current.height);
+            }
             this.onResizingEnded.emit({
                 component: this,
                 htmlElement: this.hostElement,
                 isUserInteraction: true,
                 name: 'resizingEnded',
-                value: currentWidth,
-                oldValue: this.startMoveWidth,
+                value: current,
+                oldValue,
             });
         });
-        this.isResizing.set(false);
+        this.stopResizing();
     }
-    onMouseEnter() {
-        if (!this.isResizing() && this.resizeHandle) {
-            this.resizeHandle.style.backgroundColor = STYLES.backgroundColorHover;
+    onPointerEnter(event) {
+        if (this.isResizing()) {
+            return;
+        }
+        const handle = event.currentTarget;
+        if (handle) {
+            handle.style.backgroundColor = STYLES.backgroundColorHover;
         }
     }
-    onMouseLeave() {
-        if (!this.isResizing() && this.resizeHandle) {
-            this.resizeHandle.style.backgroundColor = STYLES.backgroundColor;
+    onPointerLeave(event) {
+        if (this.isResizing()) {
+            return;
+        }
+        const handle = event.currentTarget;
+        if (handle) {
+            handle.style.backgroundColor = STYLES.backgroundColor;
         }
     }
-    onDoubleClick() {
-        const elementWidth = this.hostElement.offsetWidth;
+    onDoubleClick(event) {
+        const handleType = this.getHandleType(event);
+        if (!handleType) {
+            return;
+        }
+        event.preventDefault();
+        const axes = getHandleAxes(handleType);
+        const oldValue = this.getCurrentSize();
         const action = this.dblClickAction();
-        let newWidth;
+        let value;
         switch (action) {
             case 'reset':
-                newWidth = this.resetToInitialWidth();
+                value = this.resetToInitialSize(axes);
                 break;
             case 'maximize':
-                newWidth = this.maximizeToMaxWidth();
+                value = this.maximizeToMaxSize(axes);
                 break;
             case 'fit':
-                newWidth = this.fitToContent();
+                value = this.fitToContent(axes);
                 break;
             default:
-                newWidth = elementWidth;
+                value = oldValue;
         }
         this.zone.run(() => {
             this.onResizingDblClick.emit({
@@ -281,53 +425,201 @@ class AXResizableDirective {
                 htmlElement: this.hostElement,
                 isUserInteraction: true,
                 name: 'onResizingDblClick',
-                oldValue: elementWidth,
-                value: newWidth,
+                oldValue,
+                value,
             });
         });
     }
-    resetToInitialWidth() {
-        const defaultWidth = this.defaultWidth();
-        if (defaultWidth !== null) {
-            this.applyElementWidth(defaultWidth);
-            return defaultWidth;
-        }
-        const initialWidth = this.width();
-        if (initialWidth !== null) {
-            this.applyElementWidth(initialWidth);
-            return initialWidth;
-        }
-        this.applyElementWidth(this.initialElementWidth);
-        return this.initialElementWidth;
+    computeSize(event, handle) {
+        const dx = event.clientX - this.startX;
+        const dy = event.clientY - this.startY;
+        const rtl = this.isRTL();
+        const axes = getHandleAxes(handle);
+        const lock = this.lockAspectRatio();
+        let width = this.startWidth;
+        let height = this.startHeight;
+        if (axes.horizontal === 'end') {
+            width = this.startWidth + (rtl ? -dx : dx);
+        }
+        else if (axes.horizontal === 'start') {
+            width = this.startWidth + (rtl ? dx : -dx);
+        }
+        if (axes.vertical === 'bottom') {
+            height = this.startHeight + dy;
+        }
+        else if (axes.vertical === 'top') {
+            height = this.startHeight - dy;
+        }
+        if (lock) {
+            const ratio = this.startRatio > 0 ? this.startRatio : 1;
+            if (axes.horizontal && axes.vertical) {
+                const widthDelta = Math.abs(width - this.startWidth);
+                const heightDelta = Math.abs(height - this.startHeight);
+                if (widthDelta >= heightDelta) {
+                    height = width / ratio;
+                }
+                else {
+                    width = height * ratio;
+                }
+            }
+            else if (axes.horizontal) {
+                height = width / ratio;
+            }
+            else if (axes.vertical) {
+                width = height * ratio;
+            }
+        }
+        return this.clampSize(width, height, lock);
+    }
+    clampSize(width, height, lock) {
+        const minW = this.minWidth();
+        const maxW = this.maxWidth();
+        const minH = this.minHeight();
+        const maxH = this.maxHeight();
+        if (!lock) {
+            return {
+                width: Math.max(minW, Math.min(width, maxW)),
+                height: Math.max(minH, Math.min(height, maxH)),
+            };
+        }
+        const ratio = this.startRatio > 0 ? this.startRatio : 1;
+        width = Math.max(minW, width);
+        height = width / ratio;
+        if (height < minH) {
+            height = minH;
+            width = height * ratio;
+        }
+        if (width > maxW) {
+            width = maxW;
+            height = width / ratio;
+        }
+        if (height > maxH) {
+            height = maxH;
+            width = height * ratio;
+        }
+        if (width < minW) {
+            width = minW;
+            height = width / ratio;
+        }
+        if (height < minH) {
+            height = minH;
+            width = height * ratio;
+        }
+        return {
+            width: Math.max(minW, Math.min(width, maxW)),
+            height: Math.max(minH, Math.min(height, maxH)),
+        };
+    }
+    resetToInitialSize(axes) {
+        const size = this.getCurrentSize();
+        if (axes.horizontal) {
+            const next = this.defaultWidth() ?? this.width() ?? this.initialElementWidth;
+            this.applySize(next, null);
+            size.width = next;
+        }
+        if (axes.vertical) {
+            const next = this.defaultHeight() ?? this.height() ?? this.initialElementHeight;
+            this.applySize(null, next);
+            size.height = next;
+        }
+        return size;
+    }
+    maximizeToMaxSize(axes) {
+        const size = this.getCurrentSize();
+        if (axes.horizontal && this.maxWidth() !== Infinity) {
+            this.applySize(this.maxWidth(), null);
+            size.width = this.maxWidth();
+        }
+        if (axes.vertical && this.maxHeight() !== Infinity) {
+            this.applySize(null, this.maxHeight());
+            size.height = this.maxHeight();
+        }
+        return size;
+    }
+    fitToContent(axes) {
+        if (axes.horizontal) {
+            this.hostElement.style.width = 'fit-content';
+        }
+        if (axes.vertical) {
+            this.hostElement.style.height = 'fit-content';
+        }
+        return this.getCurrentSize();
     }
-    maximizeToMaxWidth() {
-        const maxWidth = this.maxWidth();
-        if (maxWidth !== Infinity) {
-            this.applyElementWidth(maxWidth);
+    getCurrentSize() {
+        return {
+            width: this.hostElement.offsetWidth,
+            height: this.hostElement.offsetHeight,
+        };
+    }
+    getHandleType(event) {
+        const target = event.currentTarget;
+        const value = target?.dataset['axResizeHandle'];
+        return value ?? null;
+    }
+    getCursorForHandle(type) {
+        if (type === 'start' || type === 'end') {
+            return STYLES.cursorHorizontal;
+        }
+        if (type === 'top' || type === 'bottom') {
+            return STYLES.cursorVertical;
+        }
+        const nwseInLtr = type === 'bottom-end' || type === 'top-start';
+        const useNwse = this.isRTL() ? !nwseInLtr : nwseInLtr;
+        return useNwse ? STYLES.cursorCorner : STYLES.cursorCornerAlt;
+    }
+    getActiveCursor(type) {
+        if (type === 'start' || type === 'end') {
+            return STYLES.cursorActive;
         }
-        return maxWidth;
+        return this.getCursorForHandle(type);
     }
-    fitToContent() {
-        this.hostElement.style.width = 'fit-content';
-        return this.hostElement.clientWidth;
+    stopResizing() {
+        this.activeHandle = null;
+        this.isResizing.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", 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: "22.1.6", ngImport: i0, type: AXResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXResizableDirective, isStandalone: true, selector: "[axResizable]", inputs: { axResizable: { classPropertyName: "axResizable", publicName: "axResizable", isSignal: true, isRequired: false, transformFunction: null }, handles: { classPropertyName: "handles", publicName: "handles", 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 }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", 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 }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, defaultHeight: { classPropertyName: "defaultHeight", publicName: "defaultHeight", isSignal: true, isRequired: false, transformFunction: null }, lockAspectRatio: { classPropertyName: "lockAspectRatio", publicName: "lockAspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { axResizable: "axResizableChange", handles: "handlesChange", minWidth: "minWidthChange", maxWidth: "maxWidthChange", minHeight: "minHeightChange", maxHeight: "maxHeightChange", dblClickAction: "dblClickActionChange", width: "widthChange", defaultWidth: "defaultWidthChange", height: "heightChange", defaultHeight: "defaultHeightChange", lockAspectRatio: "lockAspectRatioChange", onResizingStarted: "onResizingStarted", onResizingEnded: "onResizingEnded", onResizingDblClick: "onResizingDblClick" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXResizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axResizable]',
                 }]
-        }], ctorParameters: () => [], propDecorators: { axResizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "axResizable", required: false }] }, { type: i0.Output, args: ["axResizableChange"] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }, { type: i0.Output, args: ["minWidthChange"] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }, { type: i0.Output, args: ["maxWidthChange"] }], dblClickAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dblClickAction", required: false }] }, { type: i0.Output, args: ["dblClickActionChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], defaultWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultWidth", required: false }] }, { type: i0.Output, args: ["defaultWidthChange"] }], onResizingStarted: [{ type: i0.Output, args: ["onResizingStarted"] }], onResizingEnded: [{ type: i0.Output, args: ["onResizingEnded"] }], onResizingDblClick: [{ type: i0.Output, args: ["onResizingDblClick"] }] } });
+        }], ctorParameters: () => [], propDecorators: { axResizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "axResizable", required: false }] }, { type: i0.Output, args: ["axResizableChange"] }], handles: [{ type: i0.Input, args: [{ isSignal: true, alias: "handles", required: false }] }, { type: i0.Output, args: ["handlesChange"] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }, { type: i0.Output, args: ["minWidthChange"] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }, { type: i0.Output, args: ["maxWidthChange"] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }, { type: i0.Output, args: ["minHeightChange"] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }, { type: i0.Output, args: ["maxHeightChange"] }], dblClickAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dblClickAction", required: false }] }, { type: i0.Output, args: ["dblClickActionChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], defaultWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultWidth", required: false }] }, { type: i0.Output, args: ["defaultWidthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], defaultHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultHeight", required: false }] }, { type: i0.Output, args: ["defaultHeightChange"] }], lockAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAspectRatio", required: false }] }, { type: i0.Output, args: ["lockAspectRatioChange"] }], onResizingStarted: [{ type: i0.Output, args: ["onResizingStarted"] }], onResizingEnded: [{ type: i0.Output, args: ["onResizingEnded"] }], onResizingDblClick: [{ type: i0.Output, args: ["onResizingDblClick"] }] } });
+function getHandleAxes(handle) {
+    switch (handle) {
+        case 'start':
+            return { horizontal: 'start', vertical: null };
+        case 'end':
+            return { horizontal: 'end', vertical: null };
+        case 'top':
+            return { horizontal: null, vertical: 'top' };
+        case 'bottom':
+            return { horizontal: null, vertical: 'bottom' };
+        case 'top-start':
+            return { horizontal: 'start', vertical: 'top' };
+        case 'top-end':
+            return { horizontal: 'end', vertical: 'top' };
+        case 'bottom-start':
+            return { horizontal: 'start', vertical: 'bottom' };
+        case 'bottom-end':
+            return { horizontal: 'end', vertical: 'bottom' };
+    }
+}
 const STYLES = {
     handlerWidth: 'var(--ax-comp-resizable-handler-width, 4px)',
+    handlerHeight: 'var(--ax-comp-resizable-handler-height, 4px)',
+    cornerSize: 'var(--ax-comp-resizable-corner-size, 10px)',
     backgroundColor: 'rgba(var(--ax-comp-resizable-background-color))',
     backgroundColorActive: 'rgba(var(--ax-comp-resizable-background-color-active, var(--ax-sys-color-primary-surface)))',
     backgroundColorHover: 'rgba(var(--ax-comp-resizable-background-color-hover, var(--ax-sys-color-primary-light-surface)))',
-    cursor: 'var(--ax-comp-resizable-cursor, ew-resize)',
+    cursorHorizontal: 'var(--ax-comp-resizable-cursor, ew-resize)',
+    cursorVertical: 'var(--ax-comp-resizable-cursor-vertical, ns-resize)',
+    cursorCorner: 'var(--ax-comp-resizable-cursor-corner, nwse-resize)',
+    cursorCornerAlt: 'var(--ax-comp-resizable-cursor-corner-alt, nesw-resize)',
     cursorActive: 'var(--ax-comp-resizable-cursor-active, ew-resize)',
     zIndex: 'var(--ax-comp-resizable-z-index, 999)',
+    zIndexCorner: 'var(--ax-comp-resizable-z-index-corner, 1000)',
     transition: 'var(--ax-comp-resizable-transition, background-color --ax-sys-transition-duration --ax-sys-transition-timing-function)',
     borderRadius: 'var(--ax-comp-resizable-border-radius, --ax-sys-border-radius)',
 };