angular-gridster2 - npm Package Compare versions

Comparing version 4.3.3 to 4.4.0

dist/gridster.component.d.ts

 import { ChangeDetectorRef, ElementRef, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
 import { GridsterConfig } from './gridsterConfig.interface';
-import { GridsterItemComponent } from './gridsterItem.component';
 import { GridsterGridComponent } from './gridsterGrid.component';
@@ -10,2 +9,3 @@ import { GridsterEmptyCell } from './gridsterEmptyCell.service';
 import { GridsterComponentInterface } from './gridster.interface';
+import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
 export declare class GridsterComponent implements OnInit, OnChanges, OnDestroy, GridsterComponentInterface {
@@ -15,5 +15,5 @@ renderer: Renderer2;
     options: GridsterConfig;
-    calculateLayoutDebounce: Function;
-    movingItem: GridsterItemS;
-    previewStyle: Function;
+    calculateLayoutDebounce: () => void;
+    movingItem: GridsterItemS | null;
+    previewStyle: () => void;
     el: any;
@@ -24,3 +24,3 @@ $options: GridsterConfigS;
     curHeight: number;
-    grid: Array<GridsterItemComponent>;
+    grid: Array<GridsterItemComponentInterface>;
     columns: number;
@@ -30,3 +30,3 @@ rows: number;
     curRowHeight: number;
-    windowResize: Function | null;
+    windowResize: (() => void) | null;
     gridLines: GridsterGridComponent;
@@ -49,11 +49,10 @@ dragInProgress: boolean;
     calculateLayout(): void;
-    addItem(itemComponent: GridsterItemComponent): void;
-    removeItem(itemComponent: GridsterItemComponent): void;
-    checkCollision(item: GridsterItemS): GridsterItemComponent | boolean;
+    addItem(itemComponent: GridsterItemComponentInterface): void;
+    removeItem(itemComponent: GridsterItemComponentInterface): void;
+    checkCollision(item: GridsterItemS): GridsterItemComponentInterface | boolean;
     checkGridCollision(item: GridsterItemS): boolean;
-    findItemWithItem(item: GridsterItemS): GridsterItemComponent | boolean;
-    findItemsWithItem(item: GridsterItemS): Array<GridsterItemComponent>;
-    autoPositionItem(itemComponent: GridsterItemComponent): void;
+    findItemWithItem(item: GridsterItemS): GridsterItemComponentInterface | boolean;
+    findItemsWithItem(item: GridsterItemS): Array<GridsterItemComponentInterface>;
+    autoPositionItem(itemComponent: GridsterItemComponentInterface): void;
     getNextPossiblePosition(newItem: GridsterItemS): boolean;
-    pixelsToPosition(x: number, y: number, roundingMethod: Function): [number, number];
     pixelsToPositionX(x: number, roundingMethod: Function): number;
@@ -60,0 +59,0 @@ pixelsToPositionY(y: number, roundingMethod: Function): number;

dist/gridster.component.js

@@ -8,3 +8,3 @@ "use strict";
 var gridsterCompact_service_1 = require("./gridsterCompact.service");
-var GridsterComponent = (function () {
+var GridsterComponent = /** @class */ (function () {
     function GridsterComponent(el, renderer, cdRef) {
@@ -15,2 +15,3 @@ this.renderer = renderer;
         this.$options = JSON.parse(JSON.stringify(gridsterConfig_constant_1.GridsterConfigService));
+        this.calculateLayoutDebounce = gridsterUtils_service_1.GridsterUtils.debounce(this.calculateLayout.bind(this), 5);
         this.mobile = false;
@@ -48,3 +49,2 @@ this.curWidth = 0;
             this.setGridSize();
-            this.calculateLayoutDebounce = gridsterUtils_service_1.GridsterUtils.debounce(this.calculateLayout.bind(this), 5);
             this.calculateLayoutDebounce();
@@ -355,5 +355,2 @@ }
     };
-    GridsterComponent.prototype.pixelsToPosition = function (x, y, roundingMethod) {
-        return [this.pixelsToPositionX(x, roundingMethod), this.pixelsToPositionY(y, roundingMethod)];
-    };
     GridsterComponent.prototype.pixelsToPositionX = function (x, roundingMethod) {
@@ -375,3 +372,4 @@ return Math.max(roundingMethod(x / this.curColWidth), 0);
                     template: "<gridster-grid class=\"gridster-grid\"></gridster-grid> <ng-content></ng-content> <gridster-preview class=\"gridster-preview\"></gridster-preview>",
-                    styles: [":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) ::ng-deep gridster-item {   position: relative; }"]
+                    styles: ["gridster {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%;   user-select: none; }  gridster.fit {   overflow-x: hidden;   overflow-y: hidden; }  gridster.scrollVertical {   overflow-x: hidden;   overflow-y: auto; }  gridster.scrollHorizontal {   overflow-x: auto;   overflow-y: hidden; }  gridster.fixed {   overflow: auto; }  gridster.mobile {   overflow-x: hidden;   overflow-y: auto;   display: block; }  gridster.mobile gridster-item {   position: relative; }"],
+                    encapsulation: core_1.ViewEncapsulation.None
                 },] },
@@ -378,0 +376,0 @@ ];

dist/gridster.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"gridster","template":"<gridster-grid class=\"gridster-grid\"></gridster-grid> <ng-content></ng-content> <gridster-preview class=\"gridster-preview\"></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) ::ng-deep gridster-item {   position: relative; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":39,"character":47},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":39,"character":72}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"setOptions":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"checkIfToResize":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"checkGridCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"findItemsWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"getNextPossiblePosition":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"pixelsToPositionX":[{"__symbolic":"method"}],"pixelsToPositionY":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}]},"statics":{"checkCollisionTwoItems":{"__symbolic":"function","parameters":["item","item2"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"<","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"x"},"right":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"x"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"cols"}}},"right":{"__symbolic":"binop","operator":">","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"x"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"cols"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"x"}}},"right":{"__symbolic":"binop","operator":"<","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"y"},"right":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"y"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"rows"}}}},"right":{"__symbolic":"binop","operator":">","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"y"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"rows"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"y"}}}}}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"gridster","template":"<gridster-grid class=\"gridster-grid\"></gridster-grid> <ng-content></ng-content> <gridster-preview class=\"gridster-preview\"></gridster-preview>","styles":["gridster {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%;   user-select: none; }  gridster.fit {   overflow-x: hidden;   overflow-y: hidden; }  gridster.scrollVertical {   overflow-x: hidden;   overflow-y: auto; }  gridster.scrollHorizontal {   overflow-x: auto;   overflow-y: hidden; }  gridster.fixed {   overflow: auto; }  gridster.mobile {   overflow-x: hidden;   overflow-y: auto;   display: block; }  gridster.mobile gridster-item {   position: relative; }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":20,"character":17},"member":"None"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":43,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":43,"character":47},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":43,"character":72}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"setOptions":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"checkIfToResize":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"checkGridCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"findItemsWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"getNextPossiblePosition":[{"__symbolic":"method"}],"pixelsToPositionX":[{"__symbolic":"method"}],"pixelsToPositionY":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}]},"statics":{"checkCollisionTwoItems":{"__symbolic":"function","parameters":["item","item2"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"<","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"x"},"right":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"x"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"cols"}}},"right":{"__symbolic":"binop","operator":">","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"x"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"cols"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"x"}}},"right":{"__symbolic":"binop","operator":"<","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"y"},"right":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"y"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"rows"}}}},"right":{"__symbolic":"binop","operator":">","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"y"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"rows"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"y"}}}}}}}}]

dist/gridster.interface.d.ts

 import { GridsterConfigS } from './gridsterConfigS.interface';
-import { GridsterItemComponent } from './gridsterItem.component';
 import { ChangeDetectorRef, Renderer2 } from '@angular/core';
@@ -9,13 +8,14 @@ import { GridsterEmptyCell } from './gridsterEmptyCell.service';
 import { GridsterItemS } from './gridsterItemS.interface';
+import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
 export declare abstract class GridsterComponentInterface {
     $options: GridsterConfigS;
-    grid: Array<GridsterItemComponent>;
-    checkCollision: Function;
-    positionXToPixels: Function;
-    pixelsToPositionX: Function;
-    positionYToPixels: Function;
-    pixelsToPositionY: Function;
-    findItemWithItem: Function;
-    findItemsWithItem: Function;
-    checkGridCollision: Function;
+    grid: Array<GridsterItemComponentInterface>;
+    checkCollision: (item: GridsterItemS) => GridsterItemComponentInterface | boolean;
+    positionXToPixels: (x: number) => number;
+    pixelsToPositionX: (x: number, roundingMethod: (x: number) => number) => number;
+    positionYToPixels: (y: number) => number;
+    pixelsToPositionY: (y: number, roundingMethod: (x: number) => number) => number;
+    findItemWithItem: (item: GridsterItemS) => GridsterItemComponentInterface | boolean;
+    findItemsWithItem: (item: GridsterItemS) => Array<GridsterItemComponentInterface>;
+    checkGridCollision: (item: GridsterItemS) => boolean;
     el: any;
@@ -25,5 +25,5 @@ renderer: Renderer2;
     options: GridsterConfig;
-    calculateLayoutDebounce: Function;
-    movingItem: GridsterItemS;
-    previewStyle: Function;
+    calculateLayoutDebounce: () => void;
+    movingItem: GridsterItemS | null;
+    previewStyle: () => void;
     mobile: boolean;
@@ -36,3 +36,3 @@ curWidth: number;
     curRowHeight: number;
-    windowResize: Function | null;
+    windowResize: (() => void) | null;
     gridLines: GridsterGridComponent;
@@ -39,0 +39,0 @@ dragInProgress: boolean;

dist/gridster.interface.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var GridsterComponentInterface = (function () {
+var GridsterComponentInterface = /** @class */ (function () {
     function GridsterComponentInterface() {
@@ -5,0 +5,0 @@ }

dist/gridster.module.js

@@ -9,3 +9,3 @@ "use strict";
 var gridsterGrid_component_1 = require("./gridsterGrid.component");
-var GridsterModule = (function () {
+var GridsterModule = /** @class */ (function () {
     function GridsterModule() {
@@ -12,0 +12,0 @@ }

dist/gridsterCompact.service.d.ts

@@ -1,3 +0,3 @@
-import { GridsterItemComponent } from './gridsterItem.component';
 import { GridsterComponentInterface } from './gridster.interface';
+import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
 export declare class GridsterCompact {
@@ -9,5 +9,5 @@ private gridster;
     checkCompactUp(): void;
-    moveUpTillCollision(itemComponent: GridsterItemComponent): boolean;
+    moveUpTillCollision(itemComponent: GridsterItemComponentInterface): boolean;
     checkCompactLeft(): void;
-    moveLeftTillCollision(itemComponent: GridsterItemComponent): boolean;
+    moveLeftTillCollision(itemComponent: GridsterItemComponentInterface): boolean;
 }

dist/gridsterCompact.service.js

@@ -5,3 +5,3 @@ "use strict";
 var gridster_interface_1 = require("./gridster.interface");
-var GridsterCompact = (function () {
+var GridsterCompact = /** @class */ (function () {
     function GridsterCompact(gridster) {
@@ -8,0 +8,0 @@ this.gridster = gridster;

dist/gridsterConfig.interface.d.ts

@@ -1,6 +0,29 @@
-export declare type GridType = 'fit' | 'scrollVertical' | 'scrollHorizontal' | 'fixed' | 'verticalFixed' | 'horizontalFixed';
-export declare type displayGrid = 'always' | 'onDrag&Resize' | 'none';
-export declare type compactType = 'none' | 'compactUp' | 'compactLeft' | 'compactUp&Left' | 'compactLeft&Up';
+import { GridsterItem } from './gridsterItem.interface';
+import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
+import { GridsterComponentInterface } from './gridster.interface';
+export declare type gridTypes = 'fit' | 'scrollVertical' | 'scrollHorizontal' | 'fixed' | 'verticalFixed' | 'horizontalFixed';
+export declare type displayGrids = 'always' | 'onDrag&Resize' | 'none';
+export declare type compactTypes = 'none' | 'compactUp' | 'compactLeft' | 'compactUp&Left' | 'compactLeft&Up';
+export declare enum GridType {
+    Fit = "fit",
+    ScrollVertical = "scrollVertical",
+    ScrollHorizontal = "scrollHorizontal",
+    Fixed = "fixed",
+    VerticalFixed = "verticalFixed",
+    HorizontalFixed = "horizontalFixed",
+}
+export declare enum DisplayGrid {
+    Always = "always",
+    OnDragAndResize = "onDrag&Resize",
+    None = "none",
+}
+export declare enum CompactType {
+    None = "none",
+    CompactUp = "compactUp",
+    CompactLeft = "compactLeft",
+    CompactUpAndLeft = "compactUp&Left",
+    CompactLeftAndUp = "compactLeft&Up",
+}
 export interface GridsterConfig {
-    gridType?: GridType;
+    gridType?: gridTypes;
     fixedColWidth?: number;
@@ -10,3 +33,3 @@ fixedRowHeight?: number;
     keepFixedWidthInMobile?: boolean;
-    compactType?: compactType;
+    compactType?: compactTypes;
     mobileBreakpoint?: number;
@@ -29,8 +52,8 @@ minCols?: number;
     scrollSpeed?: number;
-    initCallback?: Function;
-    destroyCallback?: Function;
-    itemChangeCallback?: Function;
-    itemResizeCallback?: Function;
-    itemInitCallback?: Function;
-    itemRemovedCallback?: Function;
+    initCallback?: (gridster: GridsterComponentInterface) => void;
+    destroyCallback?: (gridster: GridsterComponentInterface) => void;
+    itemChangeCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
+    itemResizeCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
+    itemInitCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
+    itemRemovedCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
     draggable?: Draggable;
@@ -44,3 +67,3 @@ resizable?: Resizable;
     pushResizeItems?: boolean;
-    displayGrid?: displayGrid;
+    displayGrid?: displayGrids;
     disableWindowResize?: boolean;
@@ -53,15 +76,21 @@ disableWarnings?: boolean;
     enableEmptyCellDrag?: boolean;
-    emptyCellClickCallback?: Function;
-    emptyCellContextMenuCallback?: Function;
-    emptyCellDropCallback?: Function;
-    emptyCellDragCallback?: Function;
+    emptyCellClickCallback?: (event: MouseEvent, item: GridsterItem) => void;
+    emptyCellContextMenuCallback?: (event: MouseEvent, item: GridsterItem) => void;
+    emptyCellDropCallback?: (event: MouseEvent, item: GridsterItem) => void;
+    emptyCellDragCallback?: (event: MouseEvent, item: GridsterItem) => void;
     emptyCellDragMaxCols?: number;
     emptyCellDragMaxRows?: number;
     api?: {
-        resize?: Function;
-        optionsChanged?: Function;
-        getNextPossiblePosition?: Function;
+        resize?: () => void;
+        optionsChanged?: () => void;
+        getNextPossiblePosition?: (newItem: GridsterItem) => boolean;
     };
     [propName: string]: any;
 }
+export interface DragBase {
+    enabled?: boolean;
+    stop?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface, event: MouseEvent) => Promise<any> | void;
+    start?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface, event: MouseEvent) => void;
+    delayStart?: number;
+}
 export interface Draggable extends DragBase {
@@ -84,8 +113,2 @@ ignoreContentClass?: string;
 }
-export interface DragBase {
-    enabled?: boolean;
-    stop?: Function;
-    start?: Function;
-    delayStart?: number;
-}
 export interface PushDirections {
@@ -92,0 +115,0 @@ north: boolean;

dist/gridsterConfig.interface.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var GridType;
+(function (GridType) {
+    GridType["Fit"] = "fit";
+    GridType["ScrollVertical"] = "scrollVertical";
+    GridType["ScrollHorizontal"] = "scrollHorizontal";
+    GridType["Fixed"] = "fixed";
+    GridType["VerticalFixed"] = "verticalFixed";
+    GridType["HorizontalFixed"] = "horizontalFixed";
+})(GridType = exports.GridType || (exports.GridType = {}));
+var DisplayGrid;
+(function (DisplayGrid) {
+    DisplayGrid["Always"] = "always";
+    DisplayGrid["OnDragAndResize"] = "onDrag&Resize";
+    DisplayGrid["None"] = "none";
+})(DisplayGrid = exports.DisplayGrid || (exports.DisplayGrid = {}));
+var CompactType;
+(function (CompactType) {
+    CompactType["None"] = "none";
+    CompactType["CompactUp"] = "compactUp";
+    CompactType["CompactLeft"] = "compactLeft";
+    CompactType["CompactUpAndLeft"] = "compactUp&Left";
+    CompactType["CompactLeftAndUp"] = "compactLeft&Up";
+})(CompactType = exports.CompactType || (exports.CompactType = {}));

dist/gridsterConfig.interface.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridType":{"__symbolic":"interface"},"displayGrid":{"__symbolic":"interface"},"compactType":{"__symbolic":"interface"},"GridsterConfig":{"__symbolic":"interface"},"Draggable":{"__symbolic":"interface"},"Resizable":{"__symbolic":"interface"},"DragBase":{"__symbolic":"interface"},"PushDirections":{"__symbolic":"interface"}}}]
+[{"__symbolic":"module","version":4,"metadata":{"gridTypes":{"__symbolic":"interface"},"displayGrids":{"__symbolic":"interface"},"compactTypes":{"__symbolic":"interface"},"GridType":{"Fit":"fit","ScrollVertical":"scrollVertical","ScrollHorizontal":"scrollHorizontal","Fixed":"fixed","VerticalFixed":"verticalFixed","HorizontalFixed":"horizontalFixed"},"DisplayGrid":{"Always":"always","OnDragAndResize":"onDrag&Resize","None":"none"},"CompactType":{"None":"none","CompactUp":"compactUp","CompactLeft":"compactLeft","CompactUpAndLeft":"compactUp&Left","CompactLeftAndUp":"compactLeft&Up"},"GridsterConfig":{"__symbolic":"interface"},"DragBase":{"__symbolic":"interface"},"Draggable":{"__symbolic":"interface"},"Resizable":{"__symbolic":"interface"},"PushDirections":{"__symbolic":"interface"}}}]

dist/gridsterConfigS.interface.d.ts

@@ -1,4 +0,5 @@
-import { compactType, displayGrid, GridType } from './gridsterConfig.interface';
+import { compactTypes, displayGrids, gridTypes } from './gridsterConfig.interface';
+import { GridsterItem } from './gridsterItem.interface';
 export interface GridsterConfigS {
-    gridType: GridType;
+    gridType: gridTypes;
     fixedColWidth: number;
@@ -8,3 +9,3 @@ fixedRowHeight: number;
     keepFixedWidthInMobile: boolean;
-    compactType: compactType;
+    compactType: compactTypes;
     mobileBreakpoint: number;
@@ -35,3 +36,3 @@ minCols: number;
     pushResizeItems: boolean;
-    displayGrid: displayGrid;
+    displayGrid: displayGrids;
     disableWindowResize: boolean;
@@ -47,8 +48,13 @@ disableWarnings: boolean;
     api: {
-        resize: Function;
-        optionsChanged: Function;
-        getNextPossiblePosition: Function;
+        resize: () => void;
+        optionsChanged: () => void;
+        getNextPossiblePosition: (newItem: GridsterItem) => boolean;
     };
     [propName: string]: any;
 }
+export interface DragBase {
+    enabled: boolean;
+    delayStart: number;
+    [propName: string]: any;
+}
 export interface Draggable extends DragBase {
@@ -71,7 +77,2 @@ ignoreContentClass: string;
 }
-export interface DragBase {
-    enabled: boolean;
-    delayStart: number;
-    [propName: string]: any;
-}
 export interface PushDirections {
@@ -78,0 +79,0 @@ north: boolean;

dist/gridsterConfigS.interface.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterConfigS":{"__symbolic":"interface"},"Draggable":{"__symbolic":"interface"},"Resizable":{"__symbolic":"interface"},"DragBase":{"__symbolic":"interface"},"PushDirections":{"__symbolic":"interface"}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterConfigS":{"__symbolic":"interface"},"DragBase":{"__symbolic":"interface"},"Draggable":{"__symbolic":"interface"},"Resizable":{"__symbolic":"interface"},"PushDirections":{"__symbolic":"interface"}}}]

dist/gridsterDraggable.service.js

@@ -10,3 +10,3 @@ "use strict";
 var gridster_interface_1 = require("./gridster.interface");
-var GridsterDraggable = (function () {
+var GridsterDraggable = /** @class */ (function () {
     function GridsterDraggable(gridsterItem, gridster) {
@@ -90,2 +90,3 @@ this.gridsterItem = gridsterItem;
     GridsterDraggable.prototype.dragStop = function (e) {
+        var _this = this;
         e.stopPropagation();
@@ -112,7 +113,7 @@ e.preventDefault();
         setTimeout(function () {
-            if (this.gridster) {
-                this.gridster.movingItem = null;
-                this.gridster.previewStyle();
+            if (_this.gridster) {
+                _this.gridster.movingItem = null;
+                _this.gridster.previewStyle();
             }
-        }.bind(this));
+        });
     };
@@ -119,0 +120,0 @@ GridsterDraggable.prototype.cancelDrag = function () {

dist/gridsterEmptyCell.service.d.ts

@@ -5,3 +5,3 @@ import { GridsterItemS } from './gridsterItemS.interface';
     private gridster;
-    initialItem: GridsterItemS;
+    initialItem: GridsterItemS | null;
     emptyCellClick: Function | null;
@@ -28,3 +28,3 @@ emptyCellClickTouch: Function | null;
     emptyCellMouseUp(e: any): void;
-    getValidItemFromEvent(e: any, oldItem?: GridsterItemS): GridsterItemS | undefined;
+    getValidItemFromEvent(e: any, oldItem?: GridsterItemS | null): GridsterItemS | undefined;
 }

dist/gridsterEmptyCell.service.js

@@ -6,3 +6,3 @@ "use strict";
 var gridster_interface_1 = require("./gridster.interface");
-var GridsterEmptyCell = (function () {
+var GridsterEmptyCell = /** @class */ (function () {
     function GridsterEmptyCell(gridster) {
@@ -136,2 +136,3 @@ this.gridster = gridster;
     GridsterEmptyCell.prototype.emptyCellMouseUp = function (e) {
+        var _this = this;
         this.emptyCellMMove();
@@ -145,12 +146,12 @@ this.emptyCellMMoveTouch();
         }
-        if (this.gridster.options.emptyCellDragCallback) {
+        if (this.gridster.options.emptyCellDragCallback && this.gridster.movingItem) {
             this.gridster.options.emptyCellDragCallback(e, this.gridster.movingItem);
         }
         setTimeout(function () {
-            this.initialItem = null;
-            if (this.gridster) {
-                this.gridster.movingItem = null;
-                this.gridster.previewStyle();
+            _this.initialItem = null;
+            if (_this.gridster) {
+                _this.gridster.movingItem = null;
+                _this.gridster.previewStyle();
             }
-        }.bind(this));
+        });
         this.gridster.cdRef.markForCheck();
@@ -178,3 +179,3 @@ };
             else if (oldItem.x - item.x > this.gridster.$options.emptyCellDragMaxCols - 1) {
-                item.x = this.gridster.movingItem.x;
+                item.x = this.gridster.movingItem ? this.gridster.movingItem.x : 0;
             }
@@ -185,3 +186,3 @@ if (oldItem.y < item.y) {
             else if (oldItem.y - item.y > this.gridster.$options.emptyCellDragMaxRows - 1) {
-                item.y = this.gridster.movingItem.y;
+                item.y = this.gridster.movingItem ? this.gridster.movingItem.y : 0;
             }
@@ -188,0 +189,0 @@ }

dist/gridsterGrid.component.js

@@ -5,3 +5,3 @@ "use strict";
 var gridster_component_1 = require("./gridster.component");
-var GridsterGridComponent = (function () {
+var GridsterGridComponent = /** @class */ (function () {
     function GridsterGridComponent(el, gridster, renderer, cdRef) {
@@ -49,4 +49,5 @@ this.renderer = renderer;
                     template: "<div class=\"columns\" [style.height.px]=\"columnsHeight\">   <div class=\"column\" *ngFor=\"let column of columns; let isFirst = first;\" [style.min-width.px]=\"width\"        [style.margin-left.px]=\"isFirst && !gridster.$options.outerMargin ? 0 : margin\"></div> </div> <div class=\"rows\" [style.width.px]=\"rowsWidth\">   <div class=\"row\" *ngFor=\"let row of rows; let isFirst = first;\" [style.height.px]=\"height\"        [style.margin-top.px]=\"isFirst && !gridster.$options.outerMargin ? 0 : margin\"></div> </div>",
-                    styles: [":host {   display: none;   position: absolute; }  .rows, .columns {   position: absolute; }  .columns {   display: flex;   flex-direction: row; }  .column, .row {   transition: .3s;   box-sizing: border-box; }  .column {   height: 100%;   border-left: 1px solid white;   border-right: 1px solid white; }  .row {   width: 100%;   border-top: 1px solid white;   border-bottom: 1px solid white; }"],
-                    changeDetection: core_1.ChangeDetectionStrategy.OnPush
+                    styles: ["gridster-grid {   display: none;   position: absolute; }  .rows, .columns {   position: absolute; }  .columns {   display: flex;   flex-direction: row; }  .column, .row {   transition: .3s;   box-sizing: border-box; }  .column {   height: 100%;   border-left: 1px solid white;   border-right: 1px solid white; }  .row {   width: 100%;   border-top: 1px solid white;   border-bottom: 1px solid white; }"],
+                    changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+                    encapsulation: core_1.ViewEncapsulation.None
                 },] },
@@ -53,0 +54,0 @@ ];

dist/gridsterGrid.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterGridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"gridster-grid","template":"<div class=\"columns\" [style.height.px]=\"columnsHeight\">   <div class=\"column\" *ngFor=\"let column of columns; let isFirst = first;\" [style.min-width.px]=\"width\"        [style.margin-left.px]=\"isFirst && !gridster.$options.outerMargin ? 0 : margin\"></div> </div> <div class=\"rows\" [style.width.px]=\"rowsWidth\">   <div class=\"row\" *ngFor=\"let row of rows; let isFirst = first;\" [style.height.px]=\"height\"        [style.margin-top.px]=\"isFirst && !gridster.$options.outerMargin ? 0 : margin\"></div> </div>","styles":[":host {   display: none;   position: absolute; }  .rows, .columns {   position: absolute; }  .columns {   display: flex;   flex-direction: row; }  .column, .row {   transition: .3s;   box-sizing: border-box; }  .column {   height: 100%;   border-left: 1px solid white;   border-right: 1px solid white; }  .row {   width: 100%;   border-top: 1px solid white;   border-bottom: 1px solid white; }"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":8,"character":19},"member":"OnPush"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":22,"character":31}}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":22,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":22,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":22,"character":84},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":23,"character":29}]}],"ngOnDestroy":[{"__symbolic":"method"}],"updateGrid":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterGridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"gridster-grid","template":"<div class=\"columns\" [style.height.px]=\"columnsHeight\">   <div class=\"column\" *ngFor=\"let column of columns; let isFirst = first;\" [style.min-width.px]=\"width\"        [style.margin-left.px]=\"isFirst && !gridster.$options.outerMargin ? 0 : margin\"></div> </div> <div class=\"rows\" [style.width.px]=\"rowsWidth\">   <div class=\"row\" *ngFor=\"let row of rows; let isFirst = first;\" [style.height.px]=\"height\"        [style.margin-top.px]=\"isFirst && !gridster.$options.outerMargin ? 0 : margin\"></div> </div>","styles":["gridster-grid {   display: none;   position: absolute; }  .rows, .columns {   position: absolute; }  .columns {   display: flex;   flex-direction: row; }  .column, .row {   transition: .3s;   box-sizing: border-box; }  .column {   height: 100%;   border-left: 1px solid white;   border-right: 1px solid white; }  .row {   width: 100%;   border-top: 1px solid white;   border-bottom: 1px solid white; }"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":12,"character":17},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":26,"character":31}}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":26,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":26,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":26,"character":84},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":27,"character":29}]}],"ngOnDestroy":[{"__symbolic":"method"}],"updateGrid":[{"__symbolic":"method"}]}}}}]

dist/gridsterItem.component.js

@@ -8,3 +8,3 @@ "use strict";
 var gridsterUtils_service_1 = require("./gridsterUtils.service");
-var GridsterItemComponent = (function () {
+var GridsterItemComponent = /** @class */ (function () {
     function GridsterItemComponent(el, gridster, renderer) {
@@ -149,3 +149,4 @@ this.renderer = renderer;
                     template: "<ng-content></ng-content> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>",
-                    styles: [":host {   box-sizing: border-box;   z-index: 1;   position: absolute;   overflow: hidden;   transition: .3s;   display: none;   background: white; }  :host(.gridster-item-moving) {   cursor: move; }  :host(.gridster-item-resizing), :host(.gridster-item-moving) {   transition: 0s;   z-index: 2;   box-shadow: 0 0 5px 5px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); }  .gridster-item-resizable-handler {   position: absolute;   z-index: 2; }  .gridster-item-resizable-handler.handle-n {   cursor: n-resize;   height: 10px;   right: 0;   top: 0;   left: 0; }  .gridster-item-resizable-handler.handle-e {   cursor: e-resize;   width: 10px;   bottom: 0;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-s {   cursor: s-resize;   height: 10px;   right: 0;   bottom: 0;   left: 0; }  .gridster-item-resizable-handler.handle-w {   cursor: w-resize;   width: 10px;   left: 0;   top: 0;   bottom: 0; }  .gridster-item-resizable-handler.handle-ne {   cursor: ne-resize;   width: 10px;   height: 10px;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-nw {   cursor: nw-resize;   width: 10px;   height: 10px;   left: 0;   top: 0; }  .gridster-item-resizable-handler.handle-se {   cursor: se-resize;   width: 0;   height: 0;   right: 0;   bottom: 0;   border-style: solid;   border-width: 0 0 10px 10px;   border-color: transparent; }  .gridster-item-resizable-handler.handle-sw {   cursor: sw-resize;   width: 10px;   height: 10px;   left: 0;   bottom: 0; }  :host(:hover) .gridster-item-resizable-handler.handle-se {   border-color: transparent transparent #ccc }"]
+                    styles: ["gridster-item {   box-sizing: border-box;   z-index: 1;   position: absolute;   overflow: hidden;   transition: .3s;   display: none;   background: white;   user-select: text; }  gridster-item.gridster-item-moving {   cursor: move; }  gridster-item.gridster-item-resizing, gridster-item.gridster-item-moving {   transition: 0s;   z-index: 2;   box-shadow: 0 0 5px 5px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); }  .gridster-item-resizable-handler {   position: absolute;   z-index: 2; }  .gridster-item-resizable-handler.handle-n {   cursor: n-resize;   height: 10px;   right: 0;   top: 0;   left: 0; }  .gridster-item-resizable-handler.handle-e {   cursor: e-resize;   width: 10px;   bottom: 0;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-s {   cursor: s-resize;   height: 10px;   right: 0;   bottom: 0;   left: 0; }  .gridster-item-resizable-handler.handle-w {   cursor: w-resize;   width: 10px;   left: 0;   top: 0;   bottom: 0; }  .gridster-item-resizable-handler.handle-ne {   cursor: ne-resize;   width: 10px;   height: 10px;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-nw {   cursor: nw-resize;   width: 10px;   height: 10px;   left: 0;   top: 0; }  .gridster-item-resizable-handler.handle-se {   cursor: se-resize;   width: 0;   height: 0;   right: 0;   bottom: 0;   border-style: solid;   border-width: 0 0 10px 10px;   border-color: transparent; }  .gridster-item-resizable-handler.handle-sw {   cursor: sw-resize;   width: 10px;   height: 10px;   left: 0;   bottom: 0; }  gridster-item:hover .gridster-item-resizable-handler.handle-se {   border-color: transparent transparent #ccc }"],
+                    encapsulation: core_1.ViewEncapsulation.None
                 },] },
@@ -152,0 +153,0 @@ ];

dist/gridsterItem.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"gridster-item","template":"<ng-content></ng-content> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>","styles":[":host {   box-sizing: border-box;   z-index: 1;   position: absolute;   overflow: hidden;   transition: .3s;   display: none;   background: white; }  :host(.gridster-item-moving) {   cursor: move; }  :host(.gridster-item-resizing), :host(.gridster-item-moving) {   transition: 0s;   z-index: 2;   box-shadow: 0 0 5px 5px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); }  .gridster-item-resizable-handler {   position: absolute;   z-index: 2; }  .gridster-item-resizable-handler.handle-n {   cursor: n-resize;   height: 10px;   right: 0;   top: 0;   left: 0; }  .gridster-item-resizable-handler.handle-e {   cursor: e-resize;   width: 10px;   bottom: 0;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-s {   cursor: s-resize;   height: 10px;   right: 0;   bottom: 0;   left: 0; }  .gridster-item-resizable-handler.handle-w {   cursor: w-resize;   width: 10px;   left: 0;   top: 0;   bottom: 0; }  .gridster-item-resizable-handler.handle-ne {   cursor: ne-resize;   width: 10px;   height: 10px;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-nw {   cursor: nw-resize;   width: 10px;   height: 10px;   left: 0;   top: 0; }  .gridster-item-resizable-handler.handle-se {   cursor: se-resize;   width: 0;   height: 0;   right: 0;   bottom: 0;   border-style: solid;   border-width: 0 0 10px 10px;   border-color: transparent; }  .gridster-item-resizable-handler.handle-sw {   cursor: sw-resize;   width: 10px;   height: 10px;   left: 0;   bottom: 0; }  :host(:hover) .gridster-item-resizable-handler.handle-se {   border-color: transparent transparent #ccc }"]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":34,"character":31}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":34,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":34,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":34,"character":84}]}],"ngOnInit":[{"__symbolic":"method"}],"updateOptions":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"itemChanged":[{"__symbolic":"method"}],"checkItemChanges":[{"__symbolic":"method"}],"canBeDragged":[{"__symbolic":"method"}],"canBeResized":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"gridster-item","template":"<ng-content></ng-content> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>","styles":["gridster-item {   box-sizing: border-box;   z-index: 1;   position: absolute;   overflow: hidden;   transition: .3s;   display: none;   background: white;   user-select: text; }  gridster-item.gridster-item-moving {   cursor: move; }  gridster-item.gridster-item-resizing, gridster-item.gridster-item-moving {   transition: 0s;   z-index: 2;   box-shadow: 0 0 5px 5px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); }  .gridster-item-resizable-handler {   position: absolute;   z-index: 2; }  .gridster-item-resizable-handler.handle-n {   cursor: n-resize;   height: 10px;   right: 0;   top: 0;   left: 0; }  .gridster-item-resizable-handler.handle-e {   cursor: e-resize;   width: 10px;   bottom: 0;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-s {   cursor: s-resize;   height: 10px;   right: 0;   bottom: 0;   left: 0; }  .gridster-item-resizable-handler.handle-w {   cursor: w-resize;   width: 10px;   left: 0;   top: 0;   bottom: 0; }  .gridster-item-resizable-handler.handle-ne {   cursor: ne-resize;   width: 10px;   height: 10px;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-nw {   cursor: nw-resize;   width: 10px;   height: 10px;   left: 0;   top: 0; }  .gridster-item-resizable-handler.handle-se {   cursor: se-resize;   width: 0;   height: 0;   right: 0;   bottom: 0;   border-style: solid;   border-width: 0 0 10px 10px;   border-color: transparent; }  .gridster-item-resizable-handler.handle-sw {   cursor: sw-resize;   width: 10px;   height: 10px;   left: 0;   bottom: 0; }  gridster-item:hover .gridster-item-resizable-handler.handle-se {   border-color: transparent transparent #ccc }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":14,"character":17},"member":"None"}}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":35,"character":31}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":35,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":35,"character":84}]}],"ngOnInit":[{"__symbolic":"method"}],"updateOptions":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"itemChanged":[{"__symbolic":"method"}],"checkItemChanges":[{"__symbolic":"method"}],"canBeDragged":[{"__symbolic":"method"}],"canBeResized":[{"__symbolic":"method"}]}}}}]

dist/gridsterItem.interface.d.ts

@@ -0,1 +1,2 @@
+import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
 export interface GridsterItem {
@@ -6,3 +7,3 @@ x?: number;
     cols?: number;
-    initCallback?: Function;
+    initCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
     dragEnabled?: boolean;
@@ -9,0 +10,0 @@ resizeEnabled?: boolean;

dist/gridsterItemComponent.interface.d.ts

@@ -22,6 +22,8 @@ import { GridsterItem } from './gridsterItem.interface';
     notPlaced: boolean;
-    setSize: Function;
-    checkItemChanges: Function;
-    canBeDragged: Function;
-    canBeResized: Function;
+    updateOptions: () => void;
+    itemChanged: () => void;
+    setSize: (noCheck: Boolean) => void;
+    checkItemChanges: (newValue: GridsterItem, oldValue: GridsterItem) => void;
+    canBeDragged: () => boolean;
+    canBeResized: () => boolean;
     el: any;
@@ -28,0 +30,0 @@ gridster: GridsterComponentInterface;

dist/gridsterItemComponent.interface.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var GridsterItemComponentInterface = (function () {
+var GridsterItemComponentInterface = /** @class */ (function () {
     function GridsterItemComponentInterface() {
@@ -5,0 +5,0 @@ }

dist/gridsterPreview.component.js

@@ -5,3 +5,3 @@ "use strict";
 var gridster_component_1 = require("./gridster.component");
-var GridsterPreviewComponent = (function () {
+var GridsterPreviewComponent = /** @class */ (function () {
     function GridsterPreviewComponent(el, gridster, renderer) {
@@ -41,3 +41,4 @@ this.renderer = renderer;
                     template: '',
-                    styles: [":host {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]
+                    styles: ["gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"],
+                    encapsulation: core_1.ViewEncapsulation.None
                 },] },
@@ -44,0 +45,0 @@ ];

dist/gridsterPreview.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterPreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"gridster-preview","template":"","styles":[":host {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":13,"character":31}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":13,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":13,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":13,"character":84}]}],"ngOnDestroy":[{"__symbolic":"method"}],"previewStyle":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterPreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"gridster-preview","template":"","styles":["gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":17},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":14,"character":31}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":14,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":14,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":14,"character":84}]}],"ngOnDestroy":[{"__symbolic":"method"}],"previewStyle":[{"__symbolic":"method"}]}}}}]

dist/gridsterPush.service.d.ts

@@ -15,2 +15,3 @@ import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
     private tryPattern;
+    private count;
     constructor(gridsterItem: GridsterItemComponentInterface);
@@ -17,0 +18,0 @@ destroy(): void;

dist/gridsterPush.service.js

@@ -5,4 +5,5 @@ "use strict";
 var gridsterItemComponent_interface_1 = require("./gridsterItemComponent.interface");
-var GridsterPush = (function () {
+var GridsterPush = /** @class */ (function () {
     function GridsterPush(gridsterItem) {
+        this.count = 0;
         this.pushedItems = [];
@@ -30,2 +31,3 @@ this.pushedItemsTemp = [];
     GridsterPush.prototype.pushItems = function (direction, disable) {
+        this.count = 0;
         if (this.gridster.$options.pushItems && !disable) {
@@ -84,2 +86,8 @@ this.pushedItemsOrder = [];
     GridsterPush.prototype.push = function (gridsterItem, direction) {
+        if (this.count > 50000) {
+            return false;
+        }
+        else {
+            this.count++;
+        }
         if (this.gridster.checkGridCollision(gridsterItem.$item)) {
@@ -86,0 +94,0 @@ return false;

dist/gridsterPush.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterPush":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItemComponent.interface","name":"GridsterItemComponentInterface","line":26,"character":28}]}],"destroy":[{"__symbolic":"method"}],"pushItems":[{"__symbolic":"method"}],"restoreTempItems":[{"__symbolic":"method"}],"restoreItems":[{"__symbolic":"method"}],"setPushedItems":[{"__symbolic":"method"}],"checkPushBack":[{"__symbolic":"method"}],"push":[{"__symbolic":"method"}],"trySouth":[{"__symbolic":"method"}],"tryNorth":[{"__symbolic":"method"}],"tryEast":[{"__symbolic":"method"}],"tryWest":[{"__symbolic":"method"}],"addToTempPushed":[{"__symbolic":"method"}],"removeFromTempPushed":[{"__symbolic":"method"}],"addToPushed":[{"__symbolic":"method"}],"removeFromPushed":[{"__symbolic":"method"}],"removeFromPushedItem":[{"__symbolic":"method"}],"checkPushedItem":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterPush":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItemComponent.interface","name":"GridsterItemComponentInterface","line":27,"character":28}]}],"destroy":[{"__symbolic":"method"}],"pushItems":[{"__symbolic":"method"}],"restoreTempItems":[{"__symbolic":"method"}],"restoreItems":[{"__symbolic":"method"}],"setPushedItems":[{"__symbolic":"method"}],"checkPushBack":[{"__symbolic":"method"}],"push":[{"__symbolic":"method"}],"trySouth":[{"__symbolic":"method"}],"tryNorth":[{"__symbolic":"method"}],"tryEast":[{"__symbolic":"method"}],"tryWest":[{"__symbolic":"method"}],"addToTempPushed":[{"__symbolic":"method"}],"removeFromTempPushed":[{"__symbolic":"method"}],"addToPushed":[{"__symbolic":"method"}],"removeFromPushed":[{"__symbolic":"method"}],"removeFromPushedItem":[{"__symbolic":"method"}],"checkPushedItem":[{"__symbolic":"method"}]}}}}]

dist/gridsterPushResize.service.js

@@ -6,3 +6,3 @@ "use strict";
 var gridster_component_1 = require("./gridster.component");
-var GridsterPushResize = (function () {
+var GridsterPushResize = /** @class */ (function () {
     function GridsterPushResize(gridsterItem) {
@@ -9,0 +9,0 @@ this.pushedItems = [];

dist/gridsterResizable.service.js

@@ -10,3 +10,3 @@ "use strict";
 var gridster_interface_1 = require("./gridster.interface");
-var GridsterResizable = (function () {
+var GridsterResizable = /** @class */ (function () {
     function GridsterResizable(gridsterItem, gridster) {
@@ -127,2 +127,3 @@ this.gridsterItem = gridsterItem;
     GridsterResizable.prototype.dragStop = function (e) {
+        var _this = this;
         e.stopPropagation();
@@ -148,7 +149,7 @@ e.preventDefault();
         setTimeout(function () {
-            if (this.gridster) {
-                this.gridster.movingItem = null;
-                this.gridster.previewStyle();
+            if (_this.gridster) {
+                _this.gridster.movingItem = null;
+                _this.gridster.previewStyle();
             }
-        }.bind(this));
+        });
     };
@@ -155,0 +156,0 @@ GridsterResizable.prototype.cancelResize = function () {

dist/gridsterScroll.service.js

@@ -72,3 +72,3 @@ "use strict";
         calculateItemPosition({ clientX: lastMouse.clientX, clientY: clientY });
-    }.bind(this), intervalDuration);
+    }, intervalDuration);
 }
@@ -84,3 +84,3 @@ function startHorizontal(sign, calculateItemPosition, lastMouse) {
         calculateItemPosition({ clientX: clientX, clientY: lastMouse.clientY });
-    }.bind(this), intervalDuration);
+    }, intervalDuration);
 }
@@ -87,0 +87,0 @@ function cancelScroll() {

dist/gridsterSwap.service.js

@@ -5,3 +5,3 @@ "use strict";
 var gridsterItemComponent_interface_1 = require("./gridsterItemComponent.interface");
-var GridsterSwap = (function () {
+var GridsterSwap = /** @class */ (function () {
     function GridsterSwap(gridsterItem) {
@@ -8,0 +8,0 @@ this.gridsterItem = gridsterItem;

dist/gridsterUtils.service.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
-var GridsterUtils = (function () {
+var GridsterUtils = /** @class */ (function () {
     function GridsterUtils() {
@@ -6,0 +6,0 @@ }

dist/index.d.ts

 export { GridsterComponent } from './gridster.component';
 export { GridsterItemComponent } from './gridsterItem.component';
 export { GridsterItem } from './gridsterItem.interface';
-export { GridsterConfig, GridType, Draggable } from './gridsterConfig.interface';
+export { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
+export { GridsterComponentInterface } from './gridster.interface';
+export { GridsterConfig, GridType, DisplayGrid, CompactType, Draggable, Resizable, PushDirections } from './gridsterConfig.interface';
 export { GridsterModule } from './gridster.module';
@@ -6,0 +8,0 @@ export { GridsterPush } from './gridsterPush.service';

dist/index.js

@@ -7,2 +7,10 @@ "use strict";
 exports.GridsterItemComponent = gridsterItem_component_1.GridsterItemComponent;
+var gridsterItemComponent_interface_1 = require("./gridsterItemComponent.interface");
+exports.GridsterItemComponentInterface = gridsterItemComponent_interface_1.GridsterItemComponentInterface;
+var gridster_interface_1 = require("./gridster.interface");
+exports.GridsterComponentInterface = gridster_interface_1.GridsterComponentInterface;
+var gridsterConfig_interface_1 = require("./gridsterConfig.interface");
+exports.GridType = gridsterConfig_interface_1.GridType;
+exports.DisplayGrid = gridsterConfig_interface_1.DisplayGrid;
+exports.CompactType = gridsterConfig_interface_1.CompactType;
 var gridster_module_1 = require("./gridster.module");
@@ -9,0 +17,0 @@ exports.GridsterModule = gridster_module_1.GridsterModule;

dist/index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./gridster.component","export":["GridsterComponent"]},{"from":"./gridsterItem.component","export":["GridsterItemComponent"]},{"from":"./gridsterItem.interface","export":["GridsterItem"]},{"from":"./gridsterConfig.interface","export":["GridsterConfig","GridType","Draggable"]},{"from":"./gridster.module","export":["GridsterModule"]},{"from":"./gridsterPush.service","export":["GridsterPush"]},{"from":"./gridsterPushResize.service","export":["GridsterPushResize"]},{"from":"./gridsterSwap.service","export":["GridsterSwap"]}]}]
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./gridster.component","export":["GridsterComponent"]},{"from":"./gridsterItem.component","export":["GridsterItemComponent"]},{"from":"./gridsterItem.interface","export":["GridsterItem"]},{"from":"./gridsterItemComponent.interface","export":["GridsterItemComponentInterface"]},{"from":"./gridster.interface","export":["GridsterComponentInterface"]},{"from":"./gridsterConfig.interface","export":["GridsterConfig","GridType","DisplayGrid","CompactType","Draggable","Resizable","PushDirections"]},{"from":"./gridster.module","export":["GridsterModule"]},{"from":"./gridsterPush.service","export":["GridsterPush"]},{"from":"./gridsterPushResize.service","export":["GridsterPushResize"]},{"from":"./gridsterSwap.service","export":["GridsterSwap"]}]}]

package.json

 {
   "name": "angular-gridster2",
-  "version": "4.3.3",
+  "version": "4.4.0",
   "license": "MIT",
@@ -19,3 +19,3 @@ "main": "dist/index.js",
     "build-demo": "ng build --prod --base-href=./",
-    "build-npm": "gulp inline-templates && ngc -p tsconfig-lib.json"
+    "build-npm": "gulp build && ngc -p tsconfig-lib.json"
   },
@@ -50,23 +50,23 @@ "homepage": "https://tiberiuzuld.github.io/angular-gridster2/angular",
   "devDependencies": {
-    "@angular/animations": "5.1.2",
-    "@angular/cdk": "5.0.2",
-    "@angular/cli": "1.6.2",
-    "@angular/common": "5.1.2",
-    "@angular/compiler": "5.1.2",
-    "@angular/compiler-cli": "5.1.2",
-    "@angular/core": "5.1.2",
-    "@angular/forms": "5.1.2",
-    "@angular/http": "5.1.2",
-    "@angular/language-service": "5.1.2",
-    "@angular/material": "5.0.2",
-    "@angular/platform-browser": "5.1.2",
-    "@angular/platform-browser-dynamic": "5.1.2",
-    "@angular/platform-server": "5.1.2",
-    "@angular/router": "5.1.2",
-    "@types/jasmine": "2.8.2",
-    "@types/node": "8.5.2",
+    "@angular/animations": "5.2.0",
+    "@angular/cdk": "5.0.4",
+    "@angular/cli": "1.6.4",
+    "@angular/common": "5.2.0",
+    "@angular/compiler": "5.2.0",
+    "@angular/compiler-cli": "5.2.0",
+    "@angular/core": "5.2.0",
+    "@angular/forms": "5.2.0",
+    "@angular/http": "5.2.0",
+    "@angular/language-service": "5.2.0",
+    "@angular/material": "5.0.4",
+    "@angular/platform-browser": "5.2.0",
+    "@angular/platform-browser-dynamic": "5.2.0",
+    "@angular/platform-server": "5.2.0",
+    "@angular/router": "5.2.0",
+    "@types/jasmine": "2.8.4",
+    "@types/node": "9.3.0",
     "codelyzer": "4.0.2",
     "core-js": "2.5.3",
-    "gulp": "3.9.1",
-    "gulp-clean": "0.3.2",
+    "del": "3.0.0",
+    "gulp": "4.0.0",
     "gulp-inline-ng2-template": "4.1.0",
@@ -76,18 +76,18 @@ "hammerjs": "2.0.8",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "1.7.1",
+    "karma": "2.0.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-coverage-istanbul-reporter": "1.3.3",
     "karma-jasmine": "1.1.1",
     "karma-jasmine-html-reporter": "0.2.2",
     "protractor": "5.2.2",
-    "rxjs": "5.5.5",
+    "rxjs": "5.5.6",
     "systemjs": "0.20.19",
     "ts-helpers": "1.1.2",
-    "ts-node": "4.0.2",
+    "ts-node": "4.1.0",
     "tslib": "1.8.1",
-    "tslint": "5.8.0",
+    "tslint": "5.9.1",
     "typescript": "2.5.3",
-    "zone.js": "0.8.18"
+    "zone.js": "0.8.20"
   }
 }

README.md

@@ -218,14 +218,2 @@ angular-gridster2
 
-### Events 
-
-##### Gridster Item
-```typescript
-  @Output() itemChange: EventEmitter<GridsterItem> = new EventEmitter();
-  @Output() itemResize: EventEmitter<GridsterItem> = new EventEmitter();
-  ....
-  this.itemChange.emit(this.state.item); // triggered when a item cols, rows, x, y changed
-  this.itemResize.emit(this.state.item); // triggered when a item width/height changed
-```
-Note: When a item changes cols/rows both events get triggered
-
 ### Load dynamic components inside the `gridster-item`
@@ -277,2 +265,2 @@
  
- Copyright (c) 2017 Tiberiu Zuld
+ Copyright (c) 2018 Tiberiu Zuld

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

188695

increased by3.1%

Lines of code

3296

increased by2.23%

Worsened metrics

Number of lines in readme file

265

decreased by-4.33%

No dependency changes