ngx-kit 7.1.0 → 7.2.0

package/fesm2022/ngx-kit-drag-resize.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, EventEmitter, Injectable, InjectionToken, Directive, inject, Output, Input, HostListener } from '@angular/core';
+import { signal, EventEmitter, Injectable, InjectionToken, Directive, inject, Output, Input, model, input, output, HostListener } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 /**
@@ -970,26 +970,34 @@ const DEFAULT_KEYBOARD_STEP = 8;
 class NgxDraggable {
     host;
     renderer;
-    disabled = false;
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Element whose rect constrains the drag. Now actually enforced. */
-    boundary;
-    dragRootElement = '';
+    boundary = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "boundary" }] : /* istanbul ignore next */ []));
+    dragRootElement = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragRootElement" }] : /* istanbul ignore next */ []));
     /** CSS selector for a drag handle. When set, only pointerdowns inside it start a drag. */
-    dragHandle = '';
+    dragHandle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
     /** Restrict movement to a single axis. */
-    lockAxis;
+    lockAxis = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "lockAxis" }] : /* istanbul ignore next */ []));
     /** Minimum pointer travel (px) before a drag starts, so clicks still register normally. */
-    dragThreshold = 3;
+    dragThreshold = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
     /** Pixel step used when dragging via the keyboard (arrow keys, focus required). */
-    keyboardStep = DEFAULT_KEYBOARD_STEP;
+    keyboardStep = input(DEFAULT_KEYBOARD_STEP, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardStep" }] : /* istanbul ignore next */ []));
     /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
-    autoScroll = true;
+    autoScroll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoScroll" }] : /* istanbul ignore next */ []));
     set data(v) {
         this._ref.data = v;
     }
-    dragStart = new EventEmitter();
-    dragMove = new EventEmitter();
-    dragEnd = new EventEmitter();
+    dragStart = output();
+    dragMove = output();
+    dragEnd = output();
     _ref = new DragRef();
     dragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
@@ -1011,11 +1019,11 @@ class NgxDraggable {
         this.renderer = renderer;
     }
     ngOnInit() {
-        this._ref.el = this.dragRootElement
-            ? (this.host.nativeElement.closest(this.dragRootElement) ?? this.host.nativeElement)
+        this._ref.el = this.dragRootElement()
+            ? (this.host.nativeElement.closest(this.dragRootElement()) ?? this.host.nativeElement)
             : this.host.nativeElement;
-        this._ref.boundary = this.boundary;
-        this._ref.lockAxis = this.lockAxis;
+        this._ref.boundary = this.boundary();
+        this._ref.lockAxis = this.lockAxis();
         this._ref.dropListGroup = this.group?._ref;
         this._ref.init();
         this._ref.withDropList(this.list?._ref ?? null);
@@ -1034,7 +1042,7 @@ class NgxDraggable {
         this._ref.dropList?.removeItem(this._ref);
     }
     pointerDown(e) {
-        if (this.disabled ||
+        if (this.disabled() ||
             e.button !== 0 ||
             // this.isInteractive(e.target) ||
             !this.isOnHandle(e.target))
@@ -1043,8 +1051,8 @@ class NgxDraggable {
         this.down = true;
         this.pointerId = e.pointerId;
         this.start = { x: e.clientX, y: e.clientY };
-        this._ref.boundary = this.boundary;
-        this._ref.lockAxis = this.lockAxis;
+        this._ref.boundary = this.boundary();
+        this._ref.lockAxis = this.lockAxis();
         this._ref.pointerDown(this.start);
         this.removeMove = this.renderer.listen(this.doc, 'pointermove', (ev) => this.pointerMove(ev));
         this.removeUp = this.renderer.listen(this.doc, 'pointerup', (ev) => this.pointerUp(ev));
@@ -1057,13 +1065,14 @@ class NgxDraggable {
         if (!this.down || e.pointerId !== this.pointerId)
             return;
         const p = { x: e.clientX, y: e.clientY };
-        if (!this.dragging() && Math.hypot(p.x - this.start.x, p.y - this.start.y) < this.dragThreshold)
+        if (!this.dragging() &&
+            Math.hypot(p.x - this.start.x, p.y - this.start.y) < this.dragThreshold())
             return;
         if (!this.dragging()) {
             this._ref.startDrag(p);
             this.dragging.set(true);
             this.service.begin(this._ref);
-            if (this.autoScroll)
+            if (this.autoScroll())
                 this.scroller.start(this._ref.el);
             this.dragStart.emit(p);
         }
@@ -1075,19 +1084,19 @@ class NgxDraggable {
             if (target) {
                 this._ref.withDropList(target);
                 target.createPlaceholder(this._ref);
-                if (this.autoScroll) {
+                if (this.autoScroll()) {
                     this.scroller.stop();
                     this.scroller.start(target.el);
                 }
             }
-            else if (this.autoScroll) {
+            else if (this.autoScroll()) {
                 this.scroller.stop();
             }
         }
         // Sorting uses the pointer against the currently active list. Its geometry
         // is read live, so the placeholder and auto-scroll are both reflected.
         this._ref.dropList?.sortItem(this._ref, p);
-        if (this.autoScroll)
+        if (this.autoScroll())
             this.scroller.update(p.x, p.y);
         this.dragMove.emit(p);
     }
@@ -1119,9 +1128,9 @@ class NgxDraggable {
     }
     /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
     keyDown(e) {
-        if (this.disabled)
+        if (this.disabled())
             return;
-        const step = this.keyboardStep * (e.shiftKey ? 4 : 1);
+        const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
         const deltas = {
             ArrowLeft: { x: -step, y: 0 },
             ArrowRight: { x: step, y: 0 },
@@ -1133,8 +1142,8 @@ class NgxDraggable {
             e.preventDefault();
             if (!this.dragging()) {
                 this._ref.pointerDown({ x: 0, y: 0 });
-                this._ref.boundary = this.boundary;
-                this._ref.lockAxis = this.lockAxis;
+                this._ref.boundary = this.boundary();
+                this._ref.lockAxis = this.lockAxis();
                 this._ref.startDrag({ x: 0, y: 0 });
                 this.dragging.set(true);
                 this.service.begin(this._ref);
@@ -1159,16 +1168,16 @@ class NgxDraggable {
         }
     }
     isOnHandle(target) {
-        if (!this.dragHandle)
+        if (!this.dragHandle())
             return true;
-        return target instanceof HTMLElement && !!target.closest(this.dragHandle);
+        return target instanceof HTMLElement && !!target.closest(this.dragHandle());
     }
     isInteractive(target) {
         return (target instanceof HTMLElement &&
             !!target.closest('button,a,input,textarea,select,[data-no-drag]'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: "disabled", boundary: "boundary", dragRootElement: "dragRootElement", dragHandle: "dragHandle", lockAxis: "lockAxis", dragThreshold: "dragThreshold", keyboardStep: "keyboardStep", autoScroll: "autoScroll", data: "data" }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled ? null : 0", "attr.aria-grabbed": "dragging()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, decorators: [{
             type: Directive,
@@ -1177,56 +1186,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }],
                     host: {
                         '[style.touch-action]': '"none"',
-                        '[attr.tabindex]': 'disabled ? null : 0',
+                        '[attr.tabindex]': 'disabled() ? null : 0',
                         '[attr.aria-grabbed]': 'dragging()',
                         class: 'ngx-draggable',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{
-                type: Input
-            }], boundary: [{
-                type: Input
-            }], dragRootElement: [{
-                type: Input
-            }], dragHandle: [{
-                type: Input
-            }], lockAxis: [{
-                type: Input
-            }], dragThreshold: [{
-                type: Input
-            }], keyboardStep: [{
-                type: Input
-            }], autoScroll: [{
-                type: Input
-            }], data: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], data: [{
                 type: Input,
                 args: ['data']
-            }], dragStart: [{
-                type: Output
-            }], dragMove: [{
-                type: Output
-            }], dragEnd: [{
-                type: Output
-            }] } });
+            }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
 
 const ALL_DIRECTIONS = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
 const KEYBOARD_STEP = 8;
 class NgxResizable {
     el;
-    disabled = false;
-    minWidth = 20;
-    minHeight = 20;
-    maxWidth = Infinity;
-    maxHeight = Infinity;
-    directions = [...ALL_DIRECTIONS];
-    grid;
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    minWidth = model(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    minHeight = model(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    maxWidth = model(Infinity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    maxHeight = model(Infinity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    directions = input([...ALL_DIRECTIONS], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directions" }] : /* istanbul ignore next */ []));
+    grid = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "grid" }] : /* istanbul ignore next */ []));
     /** Element whose rect constrains the resize. Previously accepted nowhere on this directive. */
-    boundary;
+    boundary = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "boundary" }] : /* istanbul ignore next */ []));
     /** Pixel step used when resizing via the keyboard (arrow keys, focus required). */
-    keyboardStep = KEYBOARD_STEP;
-    resizeStart = new EventEmitter();
-    resizeMove = new EventEmitter();
-    resizeEnd = new EventEmitter();
+    keyboardStep = input(KEYBOARD_STEP, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardStep" }] : /* istanbul ignore next */ []));
+    resizeStart = output();
+    resizeMove = output();
+    resizeEnd = output();
     resizing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
     direction = 'se';
@@ -1244,7 +1240,7 @@ class NgxResizable {
         this.el = el;
     }
     onPointerDown(e) {
-        if (this.disabled || e.button !== 0) {
+        if (this.disabled() || e.button !== 0) {
             return;
         }
         const dir = this.hitDirection(e);
@@ -1313,11 +1309,11 @@ class NgxResizable {
         this.finish();
     }
     onHandleKeyDown(e) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         const rtl = isRtl(this.el.nativeElement);
-        const step = this.keyboardStep * (e.shiftKey ? 4 : 1);
+        const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
         let dw = 0;
         let dh = 0;
         if (e.key === 'ArrowRight') {
@@ -1337,8 +1333,8 @@ class NgxResizable {
         }
         e.preventDefault();
         const rect = this.el.nativeElement.getBoundingClientRect();
-        const width = this.clampGrid(Math.max(this.minWidth, Math.min(this.maxWidth, rect.width + dw)), 'x');
-        const height = this.clampGrid(Math.max(this.minHeight, Math.min(this.maxHeight, rect.height + dh)), 'y');
+        const width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), rect.width + dw)), 'x');
+        const height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), rect.height + dh)), 'y');
         this.el.nativeElement.style.width = `${width}px`;
         this.el.nativeElement.style.height = `${height}px`;
         const out = {
@@ -1382,8 +1378,8 @@ class NgxResizable {
         if (this.direction.includes('n')) {
             height -= dy;
         }
-        width = this.clampGrid(Math.max(this.minWidth, Math.min(this.maxWidth, width)), 'x');
-        height = this.clampGrid(Math.max(this.minHeight, Math.min(this.maxHeight, height)), 'y');
+        width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), width)), 'x');
+        height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), height)), 'y');
         /**
          * Calculate the intended visual position.
          *
@@ -1404,7 +1400,7 @@ class NgxResizable {
          * Boundary constraint.
          */
         if (this.boundary) {
-            const clamped = clampResizeWithinBoundary(this.boundary.getBoundingClientRect(), this.start, width, height, moveLeft, moveTop);
+            const clamped = clampResizeWithinBoundary(this.boundary()?.getBoundingClientRect(), this.start, width, height, moveLeft, moveTop);
             width = clamped.width;
             height = clamped.height;
             moveLeft = clamped.left;
@@ -1473,7 +1469,7 @@ class NgxResizable {
             `${baseTransform}translate3d(` + `${correctionX}px, ` + `${correctionY}px, 0)`;
     }
     clampGrid(value, axis) {
-        const grid = typeof this.grid === 'number' ? this.grid : this.grid?.[axis];
+        const grid = typeof this.grid() === 'number' ? this.grid : this.grid()?.[axis];
         if (!grid || grid <= 0) {
             return value;
         }
@@ -1488,7 +1484,7 @@ class NgxResizable {
     resolvedDirections() {
         const rtl = isRtl(this.el.nativeElement);
         const set = new Set();
-        for (const direction of this.directions) {
+        for (const direction of this.directions()) {
             set.add(resolveLogicalDirection(direction, rtl));
         }
         return [...set];
@@ -1547,7 +1543,7 @@ class NgxResizable {
         return this.resolvedDirections().includes(direction) ? direction : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: "disabled", minWidth: "minWidth", minHeight: "minHeight", maxWidth: "maxWidth", maxHeight: "maxHeight", directions: "directions", grid: "grid", boundary: "boundary", keyboardStep: "keyboardStep" }, outputs: { resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp($event)", "document:keydown": "onDocumentKeyDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, directions: { classPropertyName: "directions", publicName: "directions", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", minWidth: "minWidthChange", minHeight: "minHeightChange", maxWidth: "maxWidthChange", maxHeight: "maxHeightChange", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp($event)", "document:keydown": "onDocumentKeyDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, decorators: [{
             type: Directive,
@@ -1558,31 +1554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         class: 'ngx-resizable',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{
-                type: Input
-            }], minWidth: [{
-                type: Input
-            }], minHeight: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], maxHeight: [{
-                type: Input
-            }], directions: [{
-                type: Input
-            }], grid: [{
-                type: Input
-            }], boundary: [{
-                type: Input
-            }], keyboardStep: [{
-                type: Input
-            }], resizeStart: [{
-                type: Output
-            }], resizeMove: [{
-                type: Output
-            }], resizeEnd: [{
-                type: Output
-            }], onPointerDown: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }, { type: i0.Output, args: ["minWidthChange"] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }, { type: i0.Output, args: ["minHeightChange"] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }, { type: i0.Output, args: ["maxWidthChange"] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }, { type: i0.Output, args: ["maxHeightChange"] }], directions: [{ type: i0.Input, args: [{ isSignal: true, alias: "directions", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], onPointerDown: [{
                 type: HostListener,
                 args: ['pointerdown', ['$event']]
             }], onPointerMove: [{