ngx-tethys 19.1.0-next.0 → 19.1.0-next.1

package/fesm2022/ngx-tethys-resizable.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, NgZone, Injectable, ElementRef, Renderer2, ChangeDetectorRef, EventEmitter, DestroyRef, numberAttribute, Output, Input, Directive, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { inject, NgZone, Injectable, ElementRef, Renderer2, input, numberAttribute, output, signal, DestroyRef, afterNextRender, Directive, ChangeDetectionStrategy, Component, computed, NgModule } from '@angular/core';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { isTouchEvent, coerceBooleanProperty } from 'ngx-tethys/util';
 import { Subject, fromEvent, merge } from 'rxjs';
@@ -95,109 +95,113 @@ class ThyResizableDirective {
         this.platform = inject(Platform);
         this.ngZone = inject(NgZone);
         this.thyResizableService = inject(ThyResizableService);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
         /**
          * 调整尺寸的边界
          * @default parent
          * @type 'window' | 'parent' | ElementRef<HTMLElement>
          */
-        this.thyBounds = 'parent';
+        this.thyBounds = input('parent');
+        /**
+         * 最大高度(超过边界部分忽略)
+         */
+        this.thyMaxHeight = input(undefined, { transform: numberAttribute });
+        /**
+         * 最大宽度(超过边界部分忽略)
+         */
+        this.thyMaxWidth = input(undefined, { transform: numberAttribute });
         /**
          * 最小高度
          */
-        this.thyMinHeight = 40;
+        this.thyMinHeight = input(40, { transform: numberAttribute });
         /**
          * 最小宽度
          */
-        this.thyMinWidth = 40;
+        this.thyMinWidth = input(40, { transform: numberAttribute });
         /**
          * 栅格列数(-1 为不栅格)
          */
-        this.thyGridColumnCount = -1;
+        this.thyGridColumnCount = input(-1, { transform: numberAttribute });
         /**
          * 栅格最大列数
          */
-        this.thyMaxColumn = -1;
+        this.thyMaxColumn = input(-1, { transform: numberAttribute });
         /**
          * 栅格最小列数
          */
-        this.thyMinColumn = -1;
+        this.thyMinColumn = input(-1, { transform: numberAttribute });
         /**
          * 锁定宽高比
          */
-        this.thyLockAspectRatio = false;
+        this.thyLockAspectRatio = input(false, { transform: coerceBooleanProperty });
         /**
          * 是否预览模式
          */
-        this.thyPreview = false;
+        this.thyPreview = input(false, { transform: coerceBooleanProperty });
         /**
          * 是否禁用调整大小
          */
-        this.thyDisabled = false;
+        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
         /**
          * 调整尺寸时的事件
          */
-        this.thyResize = new EventEmitter();
+        this.thyResize = output();
         /**
          * 开始调整尺寸时的事件
          */
-        this.thyResizeStart = new EventEmitter();
+        this.thyResizeStart = output();
         /**
          * 结束调整尺寸时的事件
          */
-        this.thyResizeEnd = new EventEmitter();
-        this.resizing = false;
+        this.thyResizeEnd = output();
+        this.resizing = signal(false);
         this.sizeCache = null;
         this.ghostElement = null;
         this.currentHandleEvent = null;
         this.destroyRef = inject(DestroyRef);
         this.thyResizableService.handleMouseDownOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
-            if (this.thyDisabled) {
+            if (this.thyDisabled()) {
                 return;
             }
-            this.resizing = true;
+            this.resizing.set(true);
             const { mouseEvent } = event;
             this.thyResizableService.startResizing(mouseEvent);
             this.currentHandleEvent = event;
             this.setCursor();
             // Re-enter the Angular zone and run the change detection only if there're any `thyResizeStart` listeners,
             // e.g.: `<div thyResizable (thyResizeStart)="..."></div>`.
-            if (this.thyResizeStart.observers.length) {
-                this.ngZone.run(() => this.thyResizeStart.emit({ mouseEvent }));
-            }
+            this.ngZone.run(() => this.thyResizeStart.emit({ mouseEvent }));
             this.nativeElementRect = this.nativeElement.getBoundingClientRect();
         });
         this.thyResizableService.documentMouseUpOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
-            if (this.resizing) {
+            if (this.resizing()) {
                 this.ngZone.run(() => {
-                    this.resizing = false;
-                    this.changeDetectorRef.markForCheck();
+                    this.resizing.set(false);
                 });
                 this.thyResizableService.documentMouseUpOutsideAngular$.next(event);
                 this.endResize(event);
             }
         });
         this.thyResizableService.documentMouseMoveOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
-            if (this.resizing) {
+            if (this.resizing()) {
                 this.resize(event);
             }
         });
-    }
-    ngAfterViewInit() {
-        if (!this.platform.isBrowser) {
-            return;
-        }
-        this.nativeElement = this.elementRef.nativeElement;
-        this.ngZone.runOutsideAngular(() => {
-            fromEvent(this.nativeElement, 'mouseenter')
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => {
-                this.thyResizableService.mouseEnteredOutsideAngular$.next(true);
-            });
-            fromEvent(this.nativeElement, 'mouseleave')
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => {
-                this.thyResizableService.mouseEnteredOutsideAngular$.next(false);
+        afterNextRender(() => {
+            if (!this.platform.isBrowser) {
+                return;
+            }
+            this.nativeElement = this.elementRef.nativeElement;
+            this.ngZone.runOutsideAngular(() => {
+                fromEvent(this.nativeElement, 'mouseenter')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => {
+                    this.thyResizableService.mouseEnteredOutsideAngular$.next(true);
+                });
+                fromEvent(this.nativeElement, 'mouseleave')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => {
+                    this.thyResizableService.mouseEnteredOutsideAngular$.next(false);
+                });
             });
         });
     }
@@ -234,14 +238,12 @@ class ThyResizableDirective {
             };
         // Re-enter the Angular zone and run the change detection only if there're any `thyResizeEnd` listeners,
         // e.g.: `<div thyResizable (thyResizeEnd)="..."></div>`.
-        if (this.thyResizeEnd.observers.length) {
-            this.ngZone.run(() => {
-                this.thyResizeEnd.emit({
-                    ...size,
-                    mouseEvent: event
-                });
+        this.ngZone.run(() => {
+            this.thyResizeEnd.emit({
+                ...size,
+                mouseEvent: event
             });
-        }
+        });
         this.sizeCache = null;
         this.currentHandleEvent = null;
     }
@@ -251,7 +253,7 @@ class ThyResizableDirective {
         const handleEvent = getEventWithPoint(this.currentHandleEvent.mouseEvent);
         let width = nativeElementRect.width;
         let height = nativeElementRect.height;
-        const ratio = this.thyLockAspectRatio ? width / height : -1;
+        const ratio = this.thyLockAspectRatio() ? width / height : -1;
         switch (this.currentHandleEvent.direction) {
             case 'bottomRight':
                 width = resizeEvent.clientX - nativeElementRect.left;
@@ -285,15 +287,13 @@ class ThyResizableDirective {
         this.sizeCache = { ...size };
         // Re-enter the Angular zone and run the change detection only if there're any `thyResize` listeners,
         // e.g.: `<div thyResizable (thyResize)="..."></div>`.
-        if (this.thyResize.observers.length) {
-            this.ngZone.run(() => {
-                this.thyResize.emit({
-                    ...size,
-                    mouseEvent: event
-                });
+        this.ngZone.run(() => {
+            this.thyResize.emit({
+                ...size,
+                mouseEvent: event
             });
-        }
-        if (this.thyPreview) {
+        });
+        if (this.thyPreview()) {
             this.previewResize(size);
         }
     }
@@ -304,10 +304,11 @@ class ThyResizableDirective {
         let maxHeight;
         let col = 0;
         let spanWidth = 0;
-        let minWidth = this.thyMinWidth;
+        let minWidth = this.thyMinWidth();
         let boundWidth = Infinity;
         let boundHeight = Infinity;
-        if (this.thyBounds === 'parent') {
+        const bounds = this.thyBounds();
+        if (bounds === 'parent') {
             const parent = this.renderer.parentNode(this.nativeElement);
             if (parent instanceof HTMLElement) {
                 const parentRect = parent.getBoundingClientRect();
@@ -315,45 +316,49 @@ class ThyResizableDirective {
                 boundHeight = parentRect.height;
             }
         }
-        else if (this.thyBounds === 'window') {
+        else if (bounds === 'window') {
             if (typeof window !== 'undefined') {
                 boundWidth = window.innerWidth;
                 boundHeight = window.innerHeight;
             }
         }
-        else if (this.thyBounds && this.thyBounds.nativeElement && this.thyBounds.nativeElement instanceof HTMLElement) {
-            const boundsRect = this.thyBounds.nativeElement.getBoundingClientRect();
+        else if (bounds && bounds.nativeElement && bounds.nativeElement instanceof HTMLElement) {
+            const boundsRect = bounds.nativeElement.getBoundingClientRect();
             boundWidth = boundsRect.width;
             boundHeight = boundsRect.height;
         }
-        maxWidth = ensureInBounds(this.thyMaxWidth, boundWidth);
-        maxHeight = ensureInBounds(this.thyMaxHeight, boundHeight);
-        if (this.thyGridColumnCount !== -1) {
-            spanWidth = maxWidth / this.thyGridColumnCount;
-            minWidth = this.thyMinColumn !== -1 ? spanWidth * this.thyMinColumn : minWidth;
-            maxWidth = this.thyMaxColumn !== -1 ? spanWidth * this.thyMaxColumn : maxWidth;
+        maxWidth = ensureInBounds(this.thyMaxWidth(), boundWidth);
+        maxHeight = ensureInBounds(this.thyMaxHeight(), boundHeight);
+        const gridColumnCount = this.thyGridColumnCount();
+        if (gridColumnCount !== -1) {
+            spanWidth = maxWidth / gridColumnCount;
+            const minColumn = this.thyMinColumn();
+            minWidth = minColumn !== -1 ? spanWidth * minColumn : minWidth;
+            const maxColumn = this.thyMaxColumn();
+            maxWidth = maxColumn !== -1 ? spanWidth * maxColumn : maxWidth;
         }
+        const minHeight = this.thyMinHeight();
         if (ratio !== -1) {
             if (/(left|right)/i.test(this.currentHandleEvent.direction)) {
                 newWidth = Math.min(Math.max(width, minWidth), maxWidth);
-                newHeight = Math.min(Math.max(newWidth / ratio, this.thyMinHeight), maxHeight);
-                if (newHeight >= maxHeight || newHeight <= this.thyMinHeight) {
+                newHeight = Math.min(Math.max(newWidth / ratio, minHeight), maxHeight);
+                if (newHeight >= maxHeight || newHeight <= minHeight) {
                     newWidth = Math.min(Math.max(newHeight * ratio, minWidth), maxWidth);
                 }
             }
             else {
-                newHeight = Math.min(Math.max(height, this.thyMinHeight), maxHeight);
+                newHeight = Math.min(Math.max(height, minHeight), maxHeight);
                 newWidth = Math.min(Math.max(newHeight * ratio, minWidth), maxWidth);
                 if (newWidth >= maxWidth || newWidth <= minWidth) {
-                    newHeight = Math.min(Math.max(newWidth / ratio, this.thyMinHeight), maxHeight);
+                    newHeight = Math.min(Math.max(newWidth / ratio, minHeight), maxHeight);
                 }
             }
         }
         else {
             newWidth = Math.min(Math.max(width, minWidth), maxWidth);
-            newHeight = Math.min(Math.max(height, this.thyMinHeight), maxHeight);
+            newHeight = Math.min(Math.max(height, minHeight), maxHeight);
         }
-        if (this.thyGridColumnCount !== -1) {
+        if (gridColumnCount !== -1) {
             col = Math.round(newWidth / spanWidth);
             newWidth = col * spanWidth;
         }
@@ -385,7 +390,7 @@ class ThyResizableDirective {
         this.sizeCache = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyResizableDirective, isStandalone: true, selector: "[thyResizable]", inputs: { thyBounds: "thyBounds", thyMaxHeight: ["thyMaxHeight", "thyMaxHeight", numberAttribute], thyMaxWidth: ["thyMaxWidth", "thyMaxWidth", numberAttribute], thyMinHeight: ["thyMinHeight", "thyMinHeight", numberAttribute], thyMinWidth: ["thyMinWidth", "thyMinWidth", numberAttribute], thyGridColumnCount: ["thyGridColumnCount", "thyGridColumnCount", numberAttribute], thyMaxColumn: ["thyMaxColumn", "thyMaxColumn", numberAttribute], thyMinColumn: ["thyMinColumn", "thyMinColumn", numberAttribute], thyLockAspectRatio: ["thyLockAspectRatio", "thyLockAspectRatio", coerceBooleanProperty], thyPreview: ["thyPreview", "thyPreview", coerceBooleanProperty], thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, outputs: { thyResize: "thyResize", thyResizeStart: "thyResizeStart", thyResizeEnd: "thyResizeEnd" }, host: { properties: { "class.thy-resizable-resizing": "resizing", "class.thy-resizable-disabled": "thyDisabled" }, classAttribute: "thy-resizable" }, providers: [ThyResizableService], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyResizableDirective, isStandalone: true, selector: "[thyResizable]", inputs: { thyBounds: { classPropertyName: "thyBounds", publicName: "thyBounds", isSignal: true, isRequired: false, transformFunction: null }, thyMaxHeight: { classPropertyName: "thyMaxHeight", publicName: "thyMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, thyMaxWidth: { classPropertyName: "thyMaxWidth", publicName: "thyMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, thyMinHeight: { classPropertyName: "thyMinHeight", publicName: "thyMinHeight", isSignal: true, isRequired: false, transformFunction: null }, thyMinWidth: { classPropertyName: "thyMinWidth", publicName: "thyMinWidth", isSignal: true, isRequired: false, transformFunction: null }, thyGridColumnCount: { classPropertyName: "thyGridColumnCount", publicName: "thyGridColumnCount", isSignal: true, isRequired: false, transformFunction: null }, thyMaxColumn: { classPropertyName: "thyMaxColumn", publicName: "thyMaxColumn", isSignal: true, isRequired: false, transformFunction: null }, thyMinColumn: { classPropertyName: "thyMinColumn", publicName: "thyMinColumn", isSignal: true, isRequired: false, transformFunction: null }, thyLockAspectRatio: { classPropertyName: "thyLockAspectRatio", publicName: "thyLockAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, thyPreview: { classPropertyName: "thyPreview", publicName: "thyPreview", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyResize: "thyResize", thyResizeStart: "thyResizeStart", thyResizeEnd: "thyResizeEnd" }, host: { properties: { "class.thy-resizable-resizing": "resizing()", "class.thy-resizable-disabled": "thyDisabled()" }, classAttribute: "thy-resizable" }, providers: [ThyResizableService], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyResizableDirective, decorators: [{
             type: Directive,
@@ -394,49 +399,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     providers: [ThyResizableService],
                     host: {
                         class: 'thy-resizable',
-                        '[class.thy-resizable-resizing]': 'resizing',
-                        '[class.thy-resizable-disabled]': 'thyDisabled'
+                        '[class.thy-resizable-resizing]': 'resizing()',
+                        '[class.thy-resizable-disabled]': 'thyDisabled()'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyBounds: [{
-                type: Input
-            }], thyMaxHeight: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyMaxWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyMinHeight: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyMinWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyGridColumnCount: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyMaxColumn: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyMinColumn: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyLockAspectRatio: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPreview: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyResize: [{
-                type: Output
-            }], thyResizeStart: [{
-                type: Output
-            }], thyResizeEnd: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 class ThyResizeHandleMouseDownEvent {
     constructor(direction, mouseEvent) {
@@ -459,15 +426,16 @@ class ThyResizeHandle {
          * 调整方向
          * @type top | right | bottom | left | topRight | bottomRight | bottomLeft | topLeft
          */
-        this.thyDirection = 'bottomRight';
+        this.thyDirection = input('bottomRight');
         /**
          * 是否展示拖拽线
+         * @type boolean
          */
-        this.thyLine = false;
+        this.thyLine = input(false, { transform: coerceBooleanProperty });
         /**
          * MouseDown 回调事件
          */
-        this.thyMouseDown = new EventEmitter();
+        this.thyMouseDown = output();
         this.hostRenderer = useHostRenderer();
         this.destroyRef = inject(DestroyRef);
     }
@@ -487,14 +455,14 @@ class ThyResizeHandle {
             merge(fromEvent(this.host.nativeElement, 'mousedown', passiveEventListenerOptions), fromEvent(this.host.nativeElement, 'touchstart', passiveEventListenerOptions))
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((event) => {
-                this.thyResizableService.handleMouseDownOutsideAngular$.next(new ThyResizeHandleMouseDownEvent(this.thyDirection, event));
+                this.thyResizableService.handleMouseDownOutsideAngular$.next(new ThyResizeHandleMouseDownEvent(this.thyDirection(), event));
             });
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyResizeHandle, isStandalone: true, selector: "thy-resize-handle, [thy-resize-handle]", inputs: { thyDirection: "thyDirection", thyLine: ["thyLine", "thyLine", coerceBooleanProperty] }, outputs: { thyMouseDown: "thyMouseDown" }, host: { properties: { "class.thy-resizable-handle-top": "thyDirection === 'top'", "class.thy-resizable-handle-right": "thyDirection === 'right'", "class.thy-resizable-handle-bottom": "thyDirection === 'bottom'", "class.thy-resizable-handle-left": "thyDirection === 'left'", "class.thy-resizable-handle-topRight": "thyDirection === 'topRight'", "class.thy-resizable-handle-bottomRight": "thyDirection === 'bottomRight'", "class.thy-resizable-handle-bottomLeft": "thyDirection === 'bottomLeft'", "class.thy-resizable-handle-topLeft": "thyDirection === 'topLeft'", "class.thy-resizable-handle-box-hover": "entered" }, classAttribute: "thy-resizable-handle" }, exportAs: ["thyResizeHandle"], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyResizeHandle, isStandalone: true, selector: "thy-resize-handle, [thy-resize-handle]", inputs: { thyDirection: { classPropertyName: "thyDirection", publicName: "thyDirection", isSignal: true, isRequired: false, transformFunction: null }, thyLine: { classPropertyName: "thyLine", publicName: "thyLine", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyMouseDown: "thyMouseDown" }, host: { properties: { "class.thy-resizable-handle-top": "thyDirection() === 'top'", "class.thy-resizable-handle-right": "thyDirection() === 'right'", "class.thy-resizable-handle-bottom": "thyDirection() === 'bottom'", "class.thy-resizable-handle-left": "thyDirection() === 'left'", "class.thy-resizable-handle-topRight": "thyDirection() === 'topRight'", "class.thy-resizable-handle-bottomRight": "thyDirection() === 'bottomRight'", "class.thy-resizable-handle-bottomLeft": "thyDirection() === 'bottomLeft'", "class.thy-resizable-handle-topLeft": "thyDirection() === 'topLeft'", "class.thy-resizable-handle-box-hover": "entered" }, classAttribute: "thy-resizable-handle" }, exportAs: ["thyResizeHandle"], ngImport: i0, template: `
         <ng-content></ng-content>
-        @if (thyLine) {
+        @if (thyLine()) {
             <div class="thy-resizable-handle-line"></div>
         }
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -506,33 +474,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     exportAs: 'thyResizeHandle',
                     template: `
         <ng-content></ng-content>
-        @if (thyLine) {
+        @if (thyLine()) {
             <div class="thy-resizable-handle-line"></div>
         }
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'thy-resizable-handle',
-                        '[class.thy-resizable-handle-top]': `thyDirection === 'top'`,
-                        '[class.thy-resizable-handle-right]': `thyDirection === 'right'`,
-                        '[class.thy-resizable-handle-bottom]': `thyDirection === 'bottom'`,
-                        '[class.thy-resizable-handle-left]': `thyDirection === 'left'`,
-                        '[class.thy-resizable-handle-topRight]': `thyDirection === 'topRight'`,
-                        '[class.thy-resizable-handle-bottomRight]': `thyDirection === 'bottomRight'`,
-                        '[class.thy-resizable-handle-bottomLeft]': `thyDirection === 'bottomLeft'`,
-                        '[class.thy-resizable-handle-topLeft]': `thyDirection === 'topLeft'`,
+                        '[class.thy-resizable-handle-top]': `thyDirection() === 'top'`,
+                        '[class.thy-resizable-handle-right]': `thyDirection() === 'right'`,
+                        '[class.thy-resizable-handle-bottom]': `thyDirection() === 'bottom'`,
+                        '[class.thy-resizable-handle-left]': `thyDirection() === 'left'`,
+                        '[class.thy-resizable-handle-topRight]': `thyDirection() === 'topRight'`,
+                        '[class.thy-resizable-handle-bottomRight]': `thyDirection() === 'bottomRight'`,
+                        '[class.thy-resizable-handle-bottomLeft]': `thyDirection() === 'bottomLeft'`,
+                        '[class.thy-resizable-handle-topLeft]': `thyDirection() === 'topLeft'`,
                         '[class.thy-resizable-handle-box-hover]': 'entered'
                     },
                     imports: []
                 }]
-        }], propDecorators: { thyDirection: [{
-                type: Input
-            }], thyLine: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyMouseDown: [{
-                type: Output
-            }] } });
+        }] });
 
 const DEFAULT_RESIZE_DIRECTION = [
     'bottomRight',
@@ -554,22 +515,20 @@ class ThyResizeHandles {
          * 定义调整手柄的方向
          * @type ThyResizeDirection[]
          */
-        this.thyDirections = DEFAULT_RESIZE_DIRECTION;
+        this.thyDirections = input(DEFAULT_RESIZE_DIRECTION);
         /**
          * 是否展示拖拽线
          */
-        this.thyLine = false;
-        this.directions = new Set(this.thyDirections);
-    }
-    ngOnChanges(changes) {
-        if (changes.thyDirections) {
-            this.directions = new Set(changes.thyDirections.currentValue);
-        }
+        this.thyLine = input(false, { transform: coerceBooleanProperty });
+        this.directions = computed(() => {
+            const directions = this.thyDirections();
+            return new Set(directions);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyResizeHandles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyResizeHandles, isStandalone: true, selector: "thy-resize-handles", inputs: { thyDirections: "thyDirections", thyLine: ["thyLine", "thyLine", coerceBooleanProperty] }, exportAs: ["thyResizeHandles"], usesOnChanges: true, ngImport: i0, template: `
-        @for (dir of directions; track $index) {
-            <thy-resize-handle [thyLine]="thyLine" [thyDirection]="dir"></thy-resize-handle>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyResizeHandles, isStandalone: true, selector: "thy-resize-handles", inputs: { thyDirections: { classPropertyName: "thyDirections", publicName: "thyDirections", isSignal: true, isRequired: false, transformFunction: null }, thyLine: { classPropertyName: "thyLine", publicName: "thyLine", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["thyResizeHandles"], ngImport: i0, template: `
+        @for (dir of directions(); track $index) {
+            <thy-resize-handle [thyLine]="thyLine()" [thyDirection]="dir"></thy-resize-handle>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: ThyResizeHandle, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -579,19 +538,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: 'thy-resize-handles',
                     exportAs: 'thyResizeHandles',
                     template: `
-        @for (dir of directions; track $index) {
-            <thy-resize-handle [thyLine]="thyLine" [thyDirection]="dir"></thy-resize-handle>
+        @for (dir of directions(); track $index) {
+            <thy-resize-handle [thyLine]="thyLine()" [thyDirection]="dir"></thy-resize-handle>
         }
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ThyResizeHandle]
                 }]
-        }], propDecorators: { thyDirections: [{
-                type: Input
-            }], thyLine: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }] });
 
 class ThyResizableModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyResizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }