feat(grid): grid scrollSpeed Input can be binded without the need of a variable

Author: llorenspujol

projects/angular-grid-layout/src/lib/coercion/number-property.ts

@@ -1,4 +1,6 @@
 // tslint:disable
+export type NumberInput = string | number | null | undefined;
+
 /** Coerces a data-bound value (typically a string) to a number. */
 export function coerceNumberProperty(value: any): number;
 export function coerceNumberProperty<D>(value: any, fallback: D): number | D;

projects/angular-grid-layout/src/lib/grid.component.ts

@@ -2,7 +2,7 @@ import {
     AfterContentChecked, AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgZone, OnChanges,
     OnDestroy, Output, QueryList, Renderer2, SimpleChanges, ViewEncapsulation
 } from '@angular/core';
-import { coerceNumberProperty } from './coercion/number-property';
+import { coerceNumberProperty, NumberInput } from './coercion/number-property';
 import { KtdGridItemComponent } from './grid-item/grid-item.component';
 import { combineLatest, merge, NEVER, Observable, Observer, of, Subscription } from 'rxjs';
 import { exhaustMap, map, startWith, switchMap, takeUntil } from 'rxjs/operators';
@@ -117,17 +117,24 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
     /** Emits when resize ends */
     @Output() resizeEnded: EventEmitter<KtdResizeEnd> = new EventEmitter<KtdResizeEnd>();
 
+    /** Whether or not to update the internal layout when some dependent property change. */
+    @Input() compactOnPropsChange = true;
+
     /**
      * Parent element that contains the scroll. If an string is provided it would search that element by id on the dom.
      * If no data provided or null autoscroll is not performed.
      */
     @Input() scrollableParent: HTMLElement | Document | string | null = null;
 
     /** Number of CSS pixels that would be scrolled on each 'tick' when auto scroll is performed. */
-    @Input() scrollSpeed: number = 2;
+    @Input()
+    get scrollSpeed(): number { return this._scrollSpeed; }
 
-    /** Whether or not to update the internal layout when some dependent property change. */
-    @Input() compactOnPropsChange = true;
+    set scrollSpeed(value: number) {
+        this._scrollSpeed = coerceNumberProperty(value, 2);
+    }
+
+    private _scrollSpeed: number = 2;
 
     /** Prevent collision, consider setting it to true if in no compaction */
     @Input() preventCollision: boolean = false;
@@ -462,5 +469,9 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             };
         });
     }
+
+
+    // tslint:disable-next-line
+    static ngAcceptInputType_scrollSpeed: NumberInput;
 }
 

projects/angular-grid-layout/src/lib/grid.module.ts

@@ -4,7 +4,7 @@ import { KtdGridComponent } from './grid.component';
 import { KtdGridItemComponent } from './grid-item/grid-item.component';
 import { KtdGridDragHandle } from './directives/drag-handle';
 import { KtdGridResizeHandle } from './directives/resize-handle';
-
+import { KtdGridService } from './grid.service';
 
 @NgModule({
     declarations: [
@@ -19,6 +19,9 @@ import { KtdGridResizeHandle } from './directives/resize-handle';
         KtdGridDragHandle,
         KtdGridResizeHandle
     ],
+    providers: [
+        KtdGridService
+    ],
     imports: [
         CommonModule
     ]

projects/demo-app/src/app/playground/playground.component.html

@@ -74,6 +74,7 @@ <h1>Angular Grid Layout - Playground</h1>
                   [compactType]="compactType"
                   [preventCollision]="preventCollision"
                   [scrollableParent]="autoScroll ? document : null"
+                  scrollSpeed="4"
                   (dragStarted)="onDragStarted($event)"
                   (resizeStarted)="onResizeStarted($event)"
                   (dragEnded)="onDragEnded($event)"