feat(grid): number and Boolean input properties can be binded as string value in template

Grid Input properties cols, rowHeight, compactOnPropsChange & preventCollision can be passed as a
string without the need of a variable. Also with GridItem properties draggable, resizable &
dragStartThreshold

Author: llorenspujol

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

@@ -0,0 +1,11 @@
+// tslint:disable
+/**
+ * Type describing the allowed values for a boolean input.
+ * @docs-private
+ */
+export type BooleanInput = string | boolean | null | undefined;
+
+/** Coerces a data-bound value (typically a string) to a boolean. */
+export function coerceBooleanProperty(value: any): boolean {
+  return value != null && `${value}` !== 'false';
+}

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

@@ -10,6 +10,8 @@ import { KTD_GRID_DRAG_HANDLE, KtdGridDragHandle } from '../directives/drag-hand
 import { KTD_GRID_RESIZE_HANDLE, KtdGridResizeHandle } from '../directives/resize-handle';
 import { KtdGridService } from '../grid.service';
 import { ktdOutsideZone } from '../utils/operators';
+import { BooleanInput, coerceBooleanProperty } from '../coercion/boolean-property';
+import { coerceNumberProperty, NumberInput } from '../coercion/number-property';
 
 @Component({
     selector: 'ktd-grid-item',
@@ -26,9 +28,6 @@ export class KtdGridItemComponent implements OnInit, OnDestroy, AfterContentInit
     /** CSS transition style. Note that for more performance is preferable only make transition on transform property. */
     @Input() transition: string = 'transform 500ms ease, width 500ms ease, height 500ms ease';
 
-    /** Minimum amount of pixels that the user should move before it starts the drag sequence. */
-    @Input() dragStartThreshold: number = 0;
-
     dragStart$: Observable<MouseEvent | TouchEvent>;
     resizeStart$: Observable<MouseEvent | TouchEvent>;
 
@@ -44,15 +43,26 @@ export class KtdGridItemComponent implements OnInit, OnDestroy, AfterContentInit
 
     private _id: string;
 
+    /** Minimum amount of pixels that the user should move before it starts the drag sequence. */
+    @Input()
+    get dragStartThreshold(): number { return this._dragStartThreshold; }
+
+    set dragStartThreshold(val: number) {
+        this._dragStartThreshold = coerceNumberProperty(val);
+    }
+
+    private _dragStartThreshold: number = 0;
+
+
     /** Whether the item is draggable or not. Defaults to true. */
     @Input()
     get draggable(): boolean {
         return this._draggable;
     }
 
     set draggable(val: boolean) {
-        this._draggable = val;
-        this._draggable$.next(val);
+        this._draggable = coerceBooleanProperty(val);
+        this._draggable$.next(this._draggable);
     }
 
     private _draggable: boolean = true;
@@ -65,8 +75,8 @@ export class KtdGridItemComponent implements OnInit, OnDestroy, AfterContentInit
     }
 
     set resizable(val: boolean) {
-        this._resizable = val;
-        this._resizable$.next(val);
+        this._resizable = coerceBooleanProperty(val);
+        this._resizable$.next(this._resizable);
     }
 
     private _resizable: boolean = true;
@@ -187,4 +197,12 @@ export class KtdGridItemComponent implements OnInit, OnDestroy, AfterContentInit
         );
     }
 
+
+    // tslint:disable-next-line
+    static ngAcceptInputType_draggable: BooleanInput;
+    // tslint:disable-next-line
+    static ngAcceptInputType_resizable: BooleanInput;
+    // tslint:disable-next-line
+    static ngAcceptInputType_dragStartThreshold: NumberInput;
+
 }

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

@@ -17,6 +17,7 @@ import { KtdDictionary } from '../types';
 import { KtdGridService } from './grid.service';
 import { getMutableClientRect } from './utils/client-rect';
 import { ktdGetScrollTotalRelativeDifference$, ktdScrollIfNearElementClientRect$ } from './utils/scroll';
+import { BooleanInput, coerceBooleanProperty } from './coercion/boolean-property';
 
 interface KtdDragResizeEvent {
     layout: KtdGridLayout;
@@ -117,15 +118,32 @@ 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;
 
+    /** Whether or not to update the internal layout when some dependent property change. */
+    @Input()
+    get compactOnPropsChange(): boolean { return this._compactOnPropsChange; }
+
+    set compactOnPropsChange(value: boolean) {
+        this._compactOnPropsChange = coerceBooleanProperty(value);
+    }
+
+    private _compactOnPropsChange: boolean = true;
+
+    /** Prevent collision, consider setting it to true if in no compaction */
+    @Input()
+    get preventCollision(): boolean { return this._preventCollision; }
+
+    set preventCollision(value: boolean) {
+        this._preventCollision = coerceBooleanProperty(value);
+    }
+
+    private _preventCollision: boolean = false;
+
     /** Number of CSS pixels that would be scrolled on each 'tick' when auto scroll is performed. */
     @Input()
     get scrollSpeed(): number { return this._scrollSpeed; }
@@ -136,9 +154,6 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
 
     private _scrollSpeed: number = 2;
 
-    /** Prevent collision, consider setting it to true if in no compaction */
-    @Input() preventCollision: boolean = false;
-
     /** Type of compaction that will be applied to the layout (vertical, horizontal or free). Defaults to 'vertical' */
     @Input()
     get compactType(): KtdGridCompactType {
@@ -471,7 +486,15 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
     }
 
 
+    // tslint:disable-next-line
+    static ngAcceptInputType_cols: NumberInput;
+    // tslint:disable-next-line
+    static ngAcceptInputType_rowHeight: NumberInput;
     // tslint:disable-next-line
     static ngAcceptInputType_scrollSpeed: NumberInput;
+    // tslint:disable-next-line
+    static ngAcceptInputType_compactOnPropsChange: BooleanInput;
+    // tslint:disable-next-line
+    static ngAcceptInputType_preventCollision: BooleanInput;
 }
 

projects/demo-app/src/app/custom-handles/custom-handles.component.html

@@ -1,12 +1,17 @@
 <h1>Angular Grid Layout - Custom handles</h1>
 <div class="grid-container">
-    <ktd-grid [cols]="cols"
-              [rowHeight]="rowHeight"
+    <ktd-grid cols="12"
+              rowHeight="50"
+              compactType="vertical"
+              compactOnPropsChange="true"
+              preventCollision="false"
               [layout]="layout"
               [scrollableParent]="document"
-              [compactType]="compactType"
               (layoutUpdated)="onLayoutUpdated($event)">
         <ktd-grid-item *ngFor="let item of layout; trackBy:trackById"
+                       draggable="true"
+                       resizable="true"
+                       dragStartThreshold="0"
                        [id]="item.id">
             <div ktdGridDragHandle class="handle-1">Handle 1</div>
             <div class="grid-item-content">

projects/demo-app/src/app/custom-handles/custom-handles.component.ts

@@ -12,9 +12,6 @@ import { DOCUMENT } from '@angular/common';
 export class KtdCustomHandlesComponent implements OnInit, OnDestroy {
     @ViewChild(KtdGridComponent, {static: true}) grid: KtdGridComponent;
     trackById = ktdTrackById;
-    cols = 12;
-    rowHeight = 50;
-    compactType: 'vertical' | 'horizontal' | null = 'vertical';
     layout: KtdGridLayout = [
         {id: '0', x: 0, y: 0, w: 3, h: 3},
         {id: '1', x: 3, y: 0, w: 3, h: 4},