angular-gridster2 - npm Package Compare versions

Comparing version 2.7.7 to 2.8.0

dist/gridster.component.d.ts

@@ -1,5 +0,5 @@
-import { OnInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { OnInit, ElementRef, OnDestroy, Renderer2, DoCheck } from '@angular/core';
 import { GridsterConfig } from './gridsterConfig.interface';
-import { GridsterItem } from './gridsterItem.interface';
-export declare class GridsterComponent implements OnInit, OnDestroy {
+import { GridsterItemComponent } from './gridsterItem.component';
+export declare class GridsterComponent implements OnInit, OnDestroy, DoCheck {
     renderer: Renderer2;
@@ -9,17 +9,15 @@ options: GridsterConfig;
     onResizeFunction: (event: any) => void;
-    movingItem: GridsterItem;
+    movingItem: GridsterItemComponent;
     previewStyle: Function;
     el: any;
-    state: {
-        mobile: boolean;
-        curWidth: number;
-        curHeight: number;
-        options: GridsterConfig;
-        scrollBarPresent: boolean;
-        grid: Array<GridsterItem>;
-        columns: number;
-        rows: number;
-        curColWidth: number;
-        curRowHeight: number;
-    };
+    $options: GridsterConfig;
+    mobile: boolean;
+    curWidth: number;
+    curHeight: number;
+    scrollBarPresent: boolean;
+    grid: Array<GridsterItemComponent>;
+    columns: number;
+    rows: number;
+    curColWidth: number;
+    curRowHeight: number;
     windowResize: Function;
@@ -37,14 +35,14 @@ private cleanCallback;
     calculateLayout(): void;
-    addItem(item: GridsterItem): void;
-    removeItem(item: GridsterItem): void;
-    checkCollision(item: GridsterItem): GridsterItem | boolean;
-    findItemWithItem(item: GridsterItem): GridsterItem;
-    autoPositionItem(item: GridsterItem): void;
+    addItem(itemComponent: GridsterItemComponent): void;
+    removeItem(itemComponent: GridsterItemComponent): void;
+    checkCollision(itemComponent: GridsterItemComponent, ignoreItem?: GridsterItemComponent): GridsterItemComponent | boolean;
+    findItemWithItem(itemComponent: GridsterItemComponent, ignoreItem?: GridsterItemComponent): GridsterItemComponent;
+    autoPositionItem(itemComponent: GridsterItemComponent): void;
     pixelsToPosition(x: number, y: number, roundingMethod: Function): [number, number];
     positionXToPixels(x: number): number;
     positionYToPixels(y: number): number;
-    checkCompactUp(): Boolean;
-    moveUpTillCollision(item: GridsterItem): Boolean;
-    checkCompactLeft(): Boolean;
-    moveLeftTillCollision(item: GridsterItem): Boolean;
+    checkCompactUp(): boolean;
+    moveUpTillCollision(itemComponent: GridsterItemComponent): boolean;
+    checkCompactLeft(): boolean;
+    moveLeftTillCollision(itemComponent: GridsterItemComponent): boolean;
 }

dist/gridster.component.js

@@ -10,23 +10,20 @@ "use strict";
         this.el = el.nativeElement;
-        this.state = {
-            mobile: false,
-            curWidth: 0,
-            curHeight: 0,
-            options: JSON.parse(JSON.stringify(gridsterConfig_constant_1.GridsterConfigService)),
-            scrollBarPresent: false,
-            grid: [],
-            columns: gridsterConfig_constant_1.GridsterConfigService.minCols,
-            rows: gridsterConfig_constant_1.GridsterConfigService.minRows,
-            curColWidth: 0,
-            curRowHeight: 0
-        };
-        this.state.options.draggable.stop = undefined;
-        this.state.options.resizable.stop = undefined;
-        this.state.options.itemChangeCallback = undefined;
-        this.state.options.itemResizeCallback = undefined;
+        this.$options = JSON.parse(JSON.stringify(gridsterConfig_constant_1.GridsterConfigService));
+        this.mobile = false;
+        this.curWidth = 0;
+        this.curHeight = 0;
+        this.scrollBarPresent = false;
+        this.grid = [];
+        this.curColWidth = 0;
+        this.curRowHeight = 0;
+        this.$options.draggable.stop = undefined;
+        this.$options.resizable.stop = undefined;
+        this.$options.itemChangeCallback = undefined;
+        this.$options.itemResizeCallback = undefined;
     }
-    ;
     GridsterComponent.prototype.ngOnInit = function () {
         this.options.optionsChanged = this.optionsChanged.bind(this);
-        this.state.options = gridsterUtils_service_1.GridsterUtils.merge(this.state.options, this.options, this.state.options);
+        this.$options = gridsterUtils_service_1.GridsterUtils.merge(this.$options, this.options, this.$options);
+        this.columns = gridsterConfig_constant_1.GridsterConfigService.minCols;
+        this.rows = gridsterConfig_constant_1.GridsterConfigService.minRows;
         this.setGridSize();
@@ -38,7 +35,6 @@ this.calculateLayoutDebounce = gridsterUtils_service_1.GridsterUtils.debounce(this.calculateLayout.bind(this), 5);
     };
-    ;
     GridsterComponent.prototype.ngDoCheck = function () {
         var height;
         var width;
-        if (this.state.options.gridType === 'fit' && !this.state.mobile) {
+        if (this.$options.gridType === 'fit' && !this.mobile) {
             width = this.el.offsetWidth;
@@ -51,3 +47,3 @@ height = this.el.offsetHeight;
         }
-        if ((width !== this.state.curWidth || height !== this.state.curHeight) && this.checkIfToResize()) {
+        if ((width !== this.curWidth || height !== this.curHeight) && this.checkIfToResize()) {
             this.onResize();
@@ -57,3 +53,3 @@ }
     GridsterComponent.prototype.optionsChanged = function () {
-        this.state.options = gridsterUtils_service_1.GridsterUtils.merge(this.state.options, this.options, this.state.options);
+        this.$options = gridsterUtils_service_1.GridsterUtils.merge(this.$options, this.options, this.$options);
         this.calculateLayout();
@@ -67,3 +63,2 @@ };
     };
-    ;
     GridsterComponent.prototype.onResize = function () {
@@ -73,3 +68,2 @@ this.setGridSize();
     };
-    ;
     GridsterComponent.prototype.checkIfToResize = function () {
@@ -82,4 +76,6 @@ var clientWidth = this.el.clientWidth;
         var scrollHeight = this.el.scrollHeight;
-        var verticalScrollPresent = clientWidth < offsetWidth && scrollHeight > offsetHeight && scrollHeight - offsetHeight < offsetWidth - clientWidth;
-        var horizontalScrollPresent = clientHeight < offsetHeight && scrollWidth > offsetWidth && scrollWidth - offsetWidth < offsetHeight - clientHeight;
+        var verticalScrollPresent = clientWidth < offsetWidth && scrollHeight > offsetHeight
+            && scrollHeight - offsetHeight < offsetWidth - clientWidth;
+        var horizontalScrollPresent = clientHeight < offsetHeight
+            && scrollWidth > offsetWidth && scrollWidth - offsetWidth < offsetHeight - clientHeight;
         if (verticalScrollPresent) {
@@ -90,7 +86,6 @@ return false;
     };
-    ;
     GridsterComponent.prototype.setGridSize = function () {
         var width = this.el.clientWidth;
         var height = this.el.clientHeight;
-        if (this.state.options.gridType === 'fit' && !this.state.mobile) {
+        if (this.$options.gridType === 'fit' && !this.mobile) {
             width = this.el.offsetWidth;
@@ -103,17 +98,15 @@ height = this.el.offsetHeight;
         }
-        this.state.curWidth = width;
-        this.state.curHeight = height;
+        this.curWidth = width;
+        this.curHeight = height;
     };
-    ;
     GridsterComponent.prototype.setGridDimensions = function () {
-        var rows = this.state.options.minRows, columns = this.state.options.minCols;
-        var widgetsIndex = this.state.grid.length - 1;
+        var rows = this.$options.minRows, columns = this.$options.minCols;
+        var widgetsIndex = this.grid.length - 1;
         for (; widgetsIndex >= 0; widgetsIndex--) {
-            rows = Math.max(rows, this.state.grid[widgetsIndex].y + this.state.grid[widgetsIndex].rows);
-            columns = Math.max(columns, this.state.grid[widgetsIndex].x + this.state.grid[widgetsIndex].cols);
+            rows = Math.max(rows, this.grid[widgetsIndex].$item.y + this.grid[widgetsIndex].$item.rows);
+            columns = Math.max(columns, this.grid[widgetsIndex].$item.x + this.grid[widgetsIndex].$item.cols);
         }
-        this.state.columns = columns;
-        this.state.rows = rows;
+        this.columns = columns;
+        this.rows = rows;
     };
-    ;
     GridsterComponent.prototype.calculateLayout = function () {
@@ -125,9 +118,9 @@ // check to compact up
         this.setGridDimensions();
-        if (this.state.options.outerMargin) {
-            this.state.curColWidth = Math.floor((this.state.curWidth - this.state.options.margin) / this.state.columns);
-            this.state.curRowHeight = Math.floor((this.state.curHeight - this.state.options.margin) / this.state.rows);
+        if (this.$options.outerMargin) {
+            this.curColWidth = Math.floor((this.curWidth - this.$options.margin) / this.columns);
+            this.curRowHeight = Math.floor((this.curHeight - this.$options.margin) / this.rows);
         }
         else {
-            this.state.curColWidth = Math.floor((this.state.curWidth + this.state.options.margin) / this.state.columns);
-            this.state.curRowHeight = Math.floor((this.state.curHeight + this.state.options.margin) / this.state.rows);
+            this.curColWidth = Math.floor((this.curWidth + this.$options.margin) / this.columns);
+            this.curRowHeight = Math.floor((this.curHeight + this.$options.margin) / this.rows);
         }
@@ -138,3 +131,3 @@ var addClass;
         var removeClass3;
-        if (this.state.options.gridType === 'fit') {
+        if (this.$options.gridType === 'fit') {
             addClass = 'fit';
@@ -145,4 +138,4 @@ removeClass1 = 'scrollVertical';
         }
-        else if (this.state.options.gridType === 'scrollVertical') {
-            this.state.curRowHeight = this.state.curColWidth;
+        else if (this.$options.gridType === 'scrollVertical') {
+            this.curRowHeight = this.curColWidth;
             addClass = 'scrollVertical';
@@ -153,4 +146,4 @@ removeClass1 = 'fit';
         }
-        else if (this.state.options.gridType === 'scrollHorizontal') {
-            this.state.curColWidth = this.state.curRowHeight;
+        else if (this.$options.gridType === 'scrollHorizontal') {
+            this.curColWidth = this.curRowHeight;
             addClass = 'scrollHorizontal';
@@ -161,5 +154,5 @@ removeClass1 = 'fit';
         }
-        else if (this.state.options.gridType === 'fixed') {
-            this.state.curColWidth = this.state.options.fixedColWidth;
-            this.state.curRowHeight = this.state.options.fixedRowHeight;
+        else if (this.$options.gridType === 'fixed') {
+            this.curColWidth = this.$options.fixedColWidth;
+            this.curRowHeight = this.$options.fixedRowHeight;
             addClass = 'fixed';
@@ -174,67 +167,74 @@ removeClass1 = 'fit';
         this.renderer.removeClass(this.el, removeClass3);
-        if (!this.state.mobile && this.state.options.mobileBreakpoint > this.state.curWidth) {
-            this.state.mobile = !this.state.mobile;
+        if (!this.mobile && this.$options.mobileBreakpoint > this.curWidth) {
+            this.mobile = !this.mobile;
             this.renderer.addClass(this.el, 'mobile');
         }
-        else if (this.state.mobile && this.state.options.mobileBreakpoint < this.state.curWidth) {
-            this.state.mobile = !this.state.mobile;
+        else if (this.mobile && this.$options.mobileBreakpoint < this.curWidth) {
+            this.mobile = !this.mobile;
             this.renderer.removeClass(this.el, 'mobile');
         }
-        var widgetsIndex = this.state.grid.length - 1;
+        var widgetsIndex = this.grid.length - 1, widget;
         for (; widgetsIndex >= 0; widgetsIndex--) {
-            this.state.grid[widgetsIndex].setSize();
-            this.state.grid[widgetsIndex].drag.toggle(this.state.options.draggable.enabled);
-            this.state.grid[widgetsIndex].resize.toggle(this.state.options.resizable.enabled);
+            widget = this.grid[widgetsIndex];
+            widget.setSize(false);
+            widget.drag.toggle(this.$options.draggable.enabled);
+            widget.resize.toggle(this.$options.resizable.enabled);
         }
         setTimeout(this.ngDoCheck.bind(this), 100);
     };
-    ;
-    GridsterComponent.prototype.addItem = function (item) {
-        if (item.cols === undefined) {
-            item.cols = this.state.options.defaultItemCols;
+    GridsterComponent.prototype.addItem = function (itemComponent) {
+        if (itemComponent.$item.cols === undefined) {
+            itemComponent.$item.cols = this.$options.defaultItemCols;
+            itemComponent.item.cols = itemComponent.$item.cols;
+            itemComponent.itemChanged();
         }
-        if (item.rows === undefined) {
-            item.rows = this.state.options.defaultItemRows;
+        if (itemComponent.$item.rows === undefined) {
+            itemComponent.$item.rows = this.$options.defaultItemRows;
+            itemComponent.item.rows = itemComponent.$item.rows;
+            itemComponent.itemChanged();
         }
-        if (item.x === undefined || item.y === undefined) {
-            this.autoPositionItem(item);
+        if (itemComponent.$item.x === undefined || itemComponent.$item.y === undefined) {
+            this.autoPositionItem(itemComponent);
         }
-        else if (this.checkCollision(item)) {
+        else if (this.checkCollision(itemComponent)) {
             console.warn('Can\'t be placed in the bounds of the dashboard, trying to auto position!/n' +
-                JSON.stringify(item, ['cols', 'rows', 'x', 'y']));
-            item.x = undefined;
-            item.y = undefined;
-            this.autoPositionItem(item);
+                JSON.stringify(itemComponent.item, ['cols', 'rows', 'x', 'y']));
+            itemComponent.$item.x = undefined;
+            itemComponent.$item.y = undefined;
+            this.autoPositionItem(itemComponent);
         }
-        this.state.grid.push(item);
+        this.grid.push(itemComponent);
         this.calculateLayoutDebounce();
-        if (item.initCallback) {
-            item.initCallback(item);
+        if (itemComponent.$item.initCallback) {
+            itemComponent.$item.initCallback(itemComponent);
         }
     };
-    GridsterComponent.prototype.removeItem = function (item) {
-        this.state.grid.splice(this.state.grid.indexOf(item), 1);
+    GridsterComponent.prototype.removeItem = function (itemComponent) {
+        this.grid.splice(this.grid.indexOf(itemComponent), 1);
         this.calculateLayoutDebounce();
     };
-    GridsterComponent.prototype.checkCollision = function (item) {
-        var noNegativePosition = item.y > -1 && item.x > -1;
-        var maxGridCols = item.cols + item.x <= this.state.options.maxCols;
-        var maxGridRows = item.rows + item.y <= this.state.options.maxRows;
-        var maxItemCols = item.maxItemCols === undefined ? this.state.options.maxItemCols : item.maxItemCols;
-        var minItemCols = item.minItemCols === undefined ? this.state.options.minItemCols : item.minItemCols;
-        var maxItemRows = item.maxItemRows === undefined ? this.state.options.maxItemRows : item.maxItemRows;
-        var minItemRows = item.minItemRows === undefined ? this.state.options.minItemRows : item.minItemRows;
-        var inColsLimits = item.cols <= maxItemCols && item.cols >= minItemCols;
-        var inRowsLimits = item.rows <= maxItemRows && item.rows >= minItemRows;
+    GridsterComponent.prototype.checkCollision = function (itemComponent, ignoreItem) {
+        var noNegativePosition = itemComponent.$item.y > -1 && itemComponent.$item.x > -1;
+        var maxGridCols = itemComponent.$item.cols + itemComponent.$item.x <= this.$options.maxCols;
+        var maxGridRows = itemComponent.$item.rows + itemComponent.$item.y <= this.$options.maxRows;
+        var maxItemCols = itemComponent.$item.maxItemCols === undefined ? this.$options.maxItemCols : itemComponent.$item.maxItemCols;
+        var minItemCols = itemComponent.$item.minItemCols === undefined ? this.$options.minItemCols : itemComponent.$item.minItemCols;
+        var maxItemRows = itemComponent.$item.maxItemRows === undefined ? this.$options.maxItemRows : itemComponent.$item.maxItemRows;
+        var minItemRows = itemComponent.$item.minItemRows === undefined ? this.$options.minItemRows : itemComponent.$item.minItemRows;
+        var inColsLimits = itemComponent.$item.cols <= maxItemCols && itemComponent.$item.cols >= minItemCols;
+        var inRowsLimits = itemComponent.$item.rows <= maxItemRows && itemComponent.$item.rows >= minItemRows;
         if (!(noNegativePosition && maxGridCols && maxGridRows && inColsLimits && inRowsLimits)) {
             return true;
         }
-        return this.findItemWithItem(item);
+        return this.findItemWithItem(itemComponent, ignoreItem);
     };
-    GridsterComponent.prototype.findItemWithItem = function (item) {
-        var widgetsIndex = this.state.grid.length - 1, widget;
+    GridsterComponent.prototype.findItemWithItem = function (itemComponent, ignoreItem) {
+        var widgetsIndex = this.grid.length - 1, widget;
         for (; widgetsIndex >= 0; widgetsIndex--) {
-            widget = this.state.grid[widgetsIndex];
-            if (widget !== item && widget.x < item.x + item.cols && widget.x + widget.cols > item.x &&
-                widget.y < item.y + item.rows && widget.y + widget.rows > item.y) {
+            widget = this.grid[widgetsIndex];
+            if (widget !== itemComponent && widget !== ignoreItem
+                && widget.$item.x < itemComponent.$item.x + itemComponent.$item.cols
+                && widget.$item.x + widget.$item.cols > itemComponent.$item.x
+                && widget.$item.y < itemComponent.$item.y + itemComponent.$item.rows
+                && widget.$item.y + widget.$item.rows > itemComponent.$item.y) {
                 return widget;
@@ -244,12 +244,14 @@ }
     };
-    ;
-    GridsterComponent.prototype.autoPositionItem = function (item) {
+    GridsterComponent.prototype.autoPositionItem = function (itemComponent) {
         this.setGridDimensions();
         var rowsIndex = 0, colsIndex;
-        for (; rowsIndex < this.state.rows; rowsIndex++) {
-            item.y = rowsIndex;
+        for (; rowsIndex < this.rows; rowsIndex++) {
+            itemComponent.$item.y = rowsIndex;
             colsIndex = 0;
-            for (; colsIndex < this.state.columns; colsIndex++) {
-                item.x = colsIndex;
-                if (!this.checkCollision(item)) {
+            for (; colsIndex < this.columns; colsIndex++) {
+                itemComponent.$item.x = colsIndex;
+                if (!this.checkCollision(itemComponent)) {
+                    itemComponent.item.x = itemComponent.$item.x;
+                    itemComponent.item.y = itemComponent.$item.y;
+                    itemComponent.itemChanged();
                     return;
@@ -259,31 +261,36 @@ }
         }
-        if (this.state.rows >= this.state.columns && this.state.options.maxCols > this.state.columns) {
-            item.x = this.state.columns;
-            item.y = 0;
+        if (this.rows >= this.columns && this.$options.maxCols > this.columns) {
+            itemComponent.$item.x = this.columns;
+            itemComponent.$item.y = 0;
+            itemComponent.item.x = itemComponent.$item.x;
+            itemComponent.item.y = itemComponent.$item.y;
+            itemComponent.itemChanged();
         }
-        else if (this.state.options.maxRows > this.state.rows) {
-            item.y = this.state.rows;
-            item.x = 0;
+        else if (this.$options.maxRows > this.rows) {
+            itemComponent.$item.y = this.rows;
+            itemComponent.$item.x = 0;
+            itemComponent.item.x = itemComponent.$item.x;
+            itemComponent.item.y = itemComponent.$item.y;
+            itemComponent.itemChanged();
         }
         else {
             console.warn('Can\'t be placed in the bounds of the dashboard!/n' +
-                JSON.stringify(item, ['cols', 'rows', 'x', 'y']));
+                JSON.stringify(itemComponent.item, ['cols', 'rows', 'x', 'y']));
         }
     };
     GridsterComponent.prototype.pixelsToPosition = function (x, y, roundingMethod) {
-        return [roundingMethod(Math.abs(x) / this.state.curColWidth), roundingMethod(Math.abs(y) / this.state.curRowHeight)];
+        return [roundingMethod(Math.abs(x) / this.curColWidth), roundingMethod(Math.abs(y) / this.curRowHeight)];
     };
-    ;
     GridsterComponent.prototype.positionXToPixels = function (x) {
-        return x * this.state.curColWidth;
+        return x * this.curColWidth;
     };
     GridsterComponent.prototype.positionYToPixels = function (y) {
-        return y * this.state.curRowHeight;
+        return y * this.curRowHeight;
     };
     GridsterComponent.prototype.checkCompactUp = function () {
-        if (this.state.options.compactUp) {
+        if (this.$options.compactUp) {
             var widgetMovedUp = false, widget = void 0, moved = void 0;
-            var l = this.state.grid.length;
+            var l = this.grid.length;
             for (var i = 0; i < l; i++) {
-                widget = this.state.grid[i];
+                widget = this.grid[i];
                 moved = this.moveUpTillCollision(widget);
@@ -301,10 +308,10 @@ if (moved) {
     };
-    GridsterComponent.prototype.moveUpTillCollision = function (item) {
-        item.y -= 1;
-        if (this.checkCollision(item)) {
-            item.y += 1;
+    GridsterComponent.prototype.moveUpTillCollision = function (itemComponent) {
+        itemComponent.$item.y -= 1;
+        if (this.checkCollision(itemComponent)) {
+            itemComponent.$item.y += 1;
             return false;
         }
         else {
-            this.moveUpTillCollision(item);
+            this.moveUpTillCollision(itemComponent);
             return true;
@@ -314,7 +321,7 @@ }
     GridsterComponent.prototype.checkCompactLeft = function () {
-        if (this.state.options.compactLeft) {
+        if (this.$options.compactLeft) {
             var widgetMovedUp = false, widget = void 0, moved = void 0;
-            var l = this.state.grid.length;
+            var l = this.grid.length;
             for (var i = 0; i < l; i++) {
-                widget = this.state.grid[i];
+                widget = this.grid[i];
                 moved = this.moveLeftTillCollision(widget);
@@ -332,10 +339,10 @@ if (moved) {
     };
-    GridsterComponent.prototype.moveLeftTillCollision = function (item) {
-        item.x -= 1;
-        if (this.checkCollision(item)) {
-            item.x += 1;
+    GridsterComponent.prototype.moveLeftTillCollision = function (itemComponent) {
+        itemComponent.$item.x -= 1;
+        if (this.checkCollision(itemComponent)) {
+            itemComponent.$item.x += 1;
             return false;
         }
         else {
-            this.moveUpTillCollision(item);
+            this.moveUpTillCollision(itemComponent);
             return true;
@@ -342,0 +349,0 @@ }

dist/gridsterConfig.constant.js

@@ -50,4 +50,5 @@ "use strict";
     },
-    swap: true // allow items to switch position if drop on top of another
+    swap: true,
+    pushItems: false // push items when resizing and dragging
 };
 //# sourceMappingURL=gridsterConfig.constant.js.map

dist/gridsterConfig.constant.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"compactUp":false,"compactLeft":false,"mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","stop":{"__symbolic":"reference","name":"undefined"}},"resizable":{"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"}},"swap":true}}},{"__symbolic":"module","version":1,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"compactUp":false,"compactLeft":false,"mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","stop":{"__symbolic":"reference","name":"undefined"}},"resizable":{"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"}},"swap":true}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"compactUp":false,"compactLeft":false,"mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","stop":{"__symbolic":"reference","name":"undefined"}},"resizable":{"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false}}},{"__symbolic":"module","version":1,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"compactUp":false,"compactLeft":false,"mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","stop":{"__symbolic":"reference","name":"undefined"}},"resizable":{"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false}}}]

dist/gridsterConfig.interface.d.ts

@@ -29,2 +29,3 @@ export declare type GridType = 'fit' | 'scrollVertical' | 'scrollHorizontal' | 'fixed';
     swap?: boolean;
+    pushItems?: boolean;
     [propName: string]: any;
@@ -31,0 +32,0 @@ }

dist/gridsterDraggable.service.d.ts

 import { GridsterItemComponent } from './gridsterItem.component';
 import { GridsterItem } from './gridsterItem.interface';
+import { GridsterComponent } from './gridster.component';
+import { GridsterPush } from './gridsterPush.service';
 export declare class GridsterDraggable {
     gridsterItem: GridsterItemComponent;
+    gridster: GridsterComponent;
     itemCopy: GridsterItem;
@@ -24,5 +27,6 @@ lastMouse: {
     touchstart: Function;
+    push: GridsterPush;
     static touchEvent(e: any): void;
-    constructor(gridsterItem: GridsterItemComponent);
-    checkContentClass(target: any, current: any, contentClass: any): any;
+    constructor(gridsterItem: GridsterItemComponent, gridster: GridsterComponent);
+    checkContentClass(target: any, current: any, contentClass: any): boolean;
     dragStart(e: any): void;
@@ -29,0 +33,0 @@ dragMove(e: any): void;

dist/gridsterDraggable.service.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
-var gridsterItem_component_1 = require("./gridsterItem.component");
 var gridsterSwap_service_1 = require("./gridsterSwap.service");
 var gridsterScroll_service_1 = require("./gridsterScroll.service");
+var gridsterItem_component_1 = require("./gridsterItem.component");
+var gridster_component_1 = require("./gridster.component");
+var gridsterPush_service_1 = require("./gridsterPush.service");
 var GridsterDraggable = (function () {
-    function GridsterDraggable(gridsterItem) {
+    function GridsterDraggable(gridsterItem, gridster) {
         this.gridsterItem = gridsterItem;
+        this.gridster = gridster;
         this.lastMouse = {
@@ -43,3 +46,3 @@ pageX: 0,
         }
-        var contentClass = this.gridsterItem.gridster.state.options.draggable.ignoreContentClass;
+        var contentClass = this.gridster.$options.draggable.ignoreContentClass;
         if (this.checkContentClass(e.target, e.currentTarget, contentClass)) {
@@ -67,5 +70,6 @@ return;
         this.elemPosition[3] = this.gridsterItem.height;
-        this.itemCopy = JSON.parse(JSON.stringify(this.gridsterItem.state.item, ['rows', 'cols', 'x', 'y']));
-        this.gridsterItem.gridster.movingItem = this.gridsterItem.state.item;
-        this.gridsterItem.gridster.previewStyle();
+        this.itemCopy = JSON.parse(JSON.stringify(this.gridsterItem.$item, ['rows', 'cols', 'x', 'y']));
+        this.gridster.movingItem = this.gridsterItem;
+        this.gridster.previewStyle();
+        this.push = new gridsterPush_service_1.GridsterPush(this.gridsterItem, this.gridster);
     };
@@ -95,6 +99,6 @@ GridsterDraggable.prototype.dragMove = function (e) {
         this.gridsterItem.renderer.removeClass(this.gridsterItem.el, 'gridster-item-moving');
-        this.gridsterItem.gridster.movingItem = null;
-        this.gridsterItem.gridster.previewStyle();
-        if (this.gridsterItem.gridster.state.options.draggable.stop) {
-            Promise.resolve(this.gridsterItem.gridster.state.options.draggable.stop(this.gridsterItem.state.item, this.gridsterItem, e))
+        this.gridster.movingItem = null;
+        this.gridster.previewStyle();
+        if (this.gridster.$options.draggable.stop) {
+            Promise.resolve(this.gridster.$options.draggable.stop(this.gridsterItem.item, this.gridsterItem, e))
                 .then(this.makeDrag.bind(this), this.cancelDrag.bind(this));
@@ -107,12 +111,16 @@ }
     GridsterDraggable.prototype.cancelDrag = function () {
-        this.gridsterItem.state.item.x = this.itemCopy.x;
-        this.gridsterItem.state.item.y = this.itemCopy.y;
-        this.gridsterItem.state.item.setSize(true);
+        this.gridsterItem.$item.x = this.itemCopy.x;
+        this.gridsterItem.$item.y = this.itemCopy.y;
+        this.gridsterItem.setSize(true);
+        this.push.restoreItems();
+        this.push = undefined;
     };
     GridsterDraggable.prototype.makeDrag = function () {
-        if (this.gridsterItem.gridster.state.options.swap) {
+        if (this.gridster.$options.swap) {
             gridsterSwap_service_1.GridsterSwap.GridsterSwap(this.gridsterItem, this.elemPosition);
         }
-        this.gridsterItem.state.item.setSize(true);
-        this.gridsterItem.checkItemChanges(this.gridsterItem.state.item, this.itemCopy);
+        this.gridsterItem.setSize(true);
+        this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.itemCopy);
+        this.push.setPushedItems();
+        this.push = undefined;
     };
@@ -122,14 +130,15 @@ GridsterDraggable.prototype.calculateItemPosition = function () {
         this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'top', this.elemPosition[1] + 'px');
-        this.position = this.gridsterItem.gridster.pixelsToPosition(this.elemPosition[0], this.elemPosition[1], Math.round);
-        if (this.position[0] !== this.gridsterItem.state.item.x || this.position[1] !== this.gridsterItem.state.item.y) {
-            this.positionBackup[0] = this.gridsterItem.state.item.x;
-            this.positionBackup[1] = this.gridsterItem.state.item.y;
-            this.gridsterItem.state.item.x = this.position[0];
-            this.gridsterItem.state.item.y = this.position[1];
-            if (this.gridsterItem.gridster.checkCollision(this.gridsterItem.state.item)) {
-                this.gridsterItem.state.item.x = this.positionBackup[0];
-                this.gridsterItem.state.item.y = this.positionBackup[1];
+        this.position = this.gridster.pixelsToPosition(this.elemPosition[0], this.elemPosition[1], Math.round);
+        if (this.position[0] !== this.gridsterItem.$item.x || this.position[1] !== this.gridsterItem.$item.y) {
+            this.positionBackup[0] = this.gridsterItem.$item.x;
+            this.positionBackup[1] = this.gridsterItem.$item.y;
+            this.gridsterItem.$item.x = this.position[0];
+            this.gridsterItem.$item.y = this.position[1];
+            this.push.pushItems();
+            if (this.gridster.checkCollision(this.gridsterItem)) {
+                this.gridsterItem.$item.x = this.positionBackup[0];
+                this.gridsterItem.$item.y = this.positionBackup[1];
             }
             else {
-                this.gridsterItem.gridster.previewStyle();
+                this.gridster.previewStyle();
             }
@@ -139,4 +148,4 @@ }
     GridsterDraggable.prototype.toggle = function (enable) {
-        var enableDrag = !this.gridsterItem.gridster.state.mobile &&
-            (this.gridsterItem.state.item.dragEnabled === undefined ? enable : this.gridsterItem.state.item.dragEnabled);
+        var enableDrag = !this.gridster.mobile &&
+            (this.gridsterItem.$item.dragEnabled === undefined ? enable : this.gridsterItem.$item.dragEnabled);
         if (!this.enabled && enableDrag) {
@@ -162,4 +171,5 @@ this.enabled = !this.enabled;
     { type: gridsterItem_component_1.GridsterItemComponent, },
+    { type: gridster_component_1.GridsterComponent, },
 ]; };
 exports.GridsterDraggable = GridsterDraggable;
 //# sourceMappingURL=gridsterDraggable.service.js.map

dist/gridsterDraggable.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterDraggable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}]}],"checkContentClass":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelDrag":[{"__symbolic":"method"}],"makeDrag":[{"__symbolic":"method"}],"calculateItemPosition":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterDraggable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}]}],"checkContentClass":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelDrag":[{"__symbolic":"method"}],"makeDrag":[{"__symbolic":"method"}],"calculateItemPosition":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterDraggable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"checkContentClass":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelDrag":[{"__symbolic":"method"}],"makeDrag":[{"__symbolic":"method"}],"calculateItemPosition":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterDraggable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"checkContentClass":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelDrag":[{"__symbolic":"method"}],"makeDrag":[{"__symbolic":"method"}],"calculateItemPosition":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}}]

dist/gridsterItem.component.d.ts

 import { OnInit, ElementRef, OnDestroy, EventEmitter, Renderer2 } from '@angular/core';
 import { GridsterItem } from './gridsterItem.interface';
 import { GridsterComponent } from './gridster.component';
+import { GridsterDraggable } from './gridsterDraggable.service';
+import { GridsterResizable } from './gridsterResizable.service';
 export declare class GridsterItemComponent implements OnInit, OnDestroy {
@@ -9,5 +11,3 @@ renderer: Renderer2;
     itemResize: EventEmitter<GridsterItem>;
-    state: {
-        item: GridsterItem;
-    };
+    $item: GridsterItem;
     el: any;
@@ -24,2 +24,4 @@ gridster: GridsterComponent;
     itemMargin: number;
+    drag: GridsterDraggable;
+    resize: GridsterResizable;
     constructor(el: ElementRef, gridster: GridsterComponent, renderer: Renderer2);
@@ -30,3 +32,3 @@ ngOnInit(): void;
     itemChanged(): void;
-    checkItemChanges(newValue: any, oldValue: any): void;
+    checkItemChanges(newValue: GridsterItem, oldValue: GridsterItem): void;
 }

dist/gridsterItem.component.js

@@ -14,43 +14,38 @@ "use strict";
         this.el = el.nativeElement;
-        this.state = {
-            item: {
-                cols: undefined,
-                rows: undefined,
-                x: undefined,
-                y: undefined,
-                initCallback: undefined,
-                dragEnabled: undefined,
-                resizeEnabled: undefined,
-                maxItemRows: undefined,
-                minItemRows: undefined,
-                maxItemCols: undefined,
-                minItemCols: undefined,
-                setSize: this.setSize.bind(this),
-                itemChanged: this.itemChanged.bind(this),
-                checkItemChanges: this.checkItemChanges.bind(this),
-                drag: new gridsterDraggable_service_1.GridsterDraggable(this),
-                resize: new gridsterResizable_service_1.GridsterResizable(this)
-            }
+        this.$item = {
+            cols: undefined,
+            rows: undefined,
+            x: undefined,
+            y: undefined,
+            initCallback: undefined,
+            dragEnabled: undefined,
+            resizeEnabled: undefined,
+            maxItemRows: undefined,
+            minItemRows: undefined,
+            maxItemCols: undefined,
+            minItemCols: undefined
         };
         this.gridster = gridster;
+        this.drag = new gridsterDraggable_service_1.GridsterDraggable(this, gridster);
+        this.resize = new gridsterResizable_service_1.GridsterResizable(this, gridster);
     }
     GridsterItemComponent.prototype.ngOnInit = function () {
-        this.state.item = gridsterUtils_service_1.GridsterUtils.merge(this.state.item, this.item, this.state.item);
-        this.gridster.addItem(this.state.item);
+        this.$item = gridsterUtils_service_1.GridsterUtils.merge(this.$item, this.item, this.$item);
+        this.gridster.addItem(this);
     };
     GridsterItemComponent.prototype.ngOnDestroy = function () {
-        this.gridster.removeItem(this.state.item);
+        this.gridster.removeItem(this);
     };
     GridsterItemComponent.prototype.setSize = function (noCheck) {
-        if (this.gridster.state.mobile) {
+        if (this.gridster.mobile) {
             this.top = 0;
             this.left = 0;
-            this.width = this.gridster.state.curWidth - (this.gridster.state.options.outerMargin ? 2 * this.gridster.state.options.margin : 0);
+            this.width = this.gridster.curWidth - (this.gridster.$options.outerMargin ? 2 * this.gridster.$options.margin : 0);
             this.height = this.width / 2;
         }
         else {
-            this.top = this.state.item.y * this.gridster.state.curRowHeight;
-            this.left = this.state.item.x * this.gridster.state.curColWidth;
-            this.width = this.state.item.cols * this.gridster.state.curColWidth - this.gridster.state.options.margin;
-            this.height = this.state.item.rows * this.gridster.state.curRowHeight - this.gridster.state.options.margin;
+            this.top = this.$item.y * this.gridster.curRowHeight;
+            this.left = this.$item.x * this.gridster.curColWidth;
+            this.width = this.$item.cols * this.gridster.curColWidth - this.gridster.$options.margin;
+            this.height = this.$item.rows * this.gridster.curRowHeight - this.gridster.$options.margin;
         }
@@ -61,4 +56,4 @@ if (!noCheck && this.top === this.itemTop && this.left === this.itemLeft &&
         }
-        if (this.gridster.state.options.outerMargin) {
-            this.itemMargin = this.gridster.state.options.margin;
+        if (this.gridster.$options.outerMargin) {
+            this.itemMargin = this.gridster.$options.margin;
         }
@@ -75,5 +70,5 @@ else {
         if (this.width !== this.itemWidth || this.height !== this.itemHeight) {
-            this.itemResize.emit(this.state.item);
-            if (this.gridster.state.options.itemResizeCallback) {
-                this.gridster.state.options.itemResizeCallback(this.state.item, this);
+            this.itemResize.emit(this.$item);
+            if (this.gridster.$options.itemResizeCallback) {
+                this.gridster.$options.itemResizeCallback(this.item, this);
             }
@@ -87,5 +82,5 @@ }
     GridsterItemComponent.prototype.itemChanged = function () {
-        this.itemChange.emit(this.state.item);
-        if (this.gridster.state.options.itemChangeCallback) {
-            this.gridster.state.options.itemChangeCallback(this.state.item, this);
+        this.itemChange.emit(this.item);
+        if (this.gridster.$options.itemChangeCallback) {
+            this.gridster.$options.itemChangeCallback(this.item, this);
         }
@@ -97,13 +92,13 @@ };
         }
-        if (this.gridster.checkCollision(this.state.item)) {
-            this.state.item.x = oldValue.x;
-            this.state.item.y = oldValue.y;
-            this.state.item.cols = oldValue.cols;
-            this.state.item.rows = oldValue.rows;
+        if (this.gridster.checkCollision(this)) {
+            this.$item.x = oldValue.x;
+            this.$item.y = oldValue.y;
+            this.$item.cols = oldValue.cols;
+            this.$item.rows = oldValue.rows;
         }
         else {
-            this.item.cols = this.state.item.cols;
-            this.item.rows = this.state.item.rows;
-            this.item.x = this.state.item.x;
-            this.item.y = this.state.item.y;
+            this.item.cols = this.$item.cols;
+            this.item.rows = this.$item.rows;
+            this.item.x = this.$item.x;
+            this.item.y = this.$item.y;
             this.gridster.calculateLayout();
@@ -118,3 +113,3 @@ this.itemChanged();
                 selector: 'gridster-item',
-                template: "<ng-content></ng-content> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.s || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.e || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.n || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.w || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.se || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.ne || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.sw || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.nw || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>",
+                template: "<ng-content></ng-content> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>",
                 styles: [":host {   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none;   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 /deep/ .gridster-item-content {   -webkit-user-select: auto;   -moz-user-select: auto;   -ms-user-select: auto;   user-select: auto; }  :host(:hover) .gridster-item-resizable-handler.handle-se {   border-color: transparent transparent #ccc }"]
@@ -121,0 +116,0 @@ },] },

dist/gridsterItem.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster-item","template":"<ng-content></ng-content> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.s || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.e || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.n || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.w || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.se || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.ne || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.sw || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.nw || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>","styles":[":host {   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none;   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 /deep/ .gridster-item-content {   -webkit-user-select: auto;   -moz-user-select: auto;   -ms-user-select: auto;   user-select: auto; }  :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"}}]}],"itemChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"itemChanged":[{"__symbolic":"method"}],"checkItemChanges":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster-item","template":"<ng-content></ng-content> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.s || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.e || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.n || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.w || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.se || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.ne || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.sw || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"state.item.resize.dragStart($event)\" (touchstart)=\"state.item.resize.dragStart($event)\"      [hidden]=\"!gridster.state.options.resizable.handles.nw || !state.item.resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>","styles":[":host {   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none;   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 /deep/ .gridster-item-content {   -webkit-user-select: auto;   -moz-user-select: auto;   -ms-user-select: auto;   user-select: auto; }  :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"}}]}],"itemChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"itemChanged":[{"__symbolic":"method"}],"checkItemChanges":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster-item","template":"<ng-content></ng-content> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>","styles":[":host {   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none;   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 /deep/ .gridster-item-content {   -webkit-user-select: auto;   -moz-user-select: auto;   -ms-user-select: auto;   user-select: auto; }  :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"}}]}],"itemChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"itemChanged":[{"__symbolic":"method"}],"checkItemChanges":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster-item","template":"<ng-content></ng-content> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"resize.dragStart($event)\" (touchstart)=\"resize.dragStart($event)\"      [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>","styles":[":host {   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none;   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 /deep/ .gridster-item-content {   -webkit-user-select: auto;   -moz-user-select: auto;   -ms-user-select: auto;   user-select: auto; }  :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"}}]}],"itemChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"itemChanged":[{"__symbolic":"method"}],"checkItemChanges":[{"__symbolic":"method"}]}}}}]

dist/gridsterItem.interface.d.ts

@@ -1,3 +0,1 @@
-import { GridsterResizable } from './gridsterResizable.service';
-import { GridsterDraggable } from './gridsterDraggable.service';
 export interface GridsterItem {
@@ -11,5 +9,2 @@ x?: number;
     resizeEnabled?: boolean;
-    setSize?: Function;
-    checkItemChanges?: Function;
-    itemChanged?: Function;
     maxItemRows?: number;
@@ -19,5 +14,3 @@ minItemRows?: number;
     minItemCols?: number;
-    drag?: GridsterDraggable;
-    resize?: GridsterResizable;
     [propName: string]: any;
 }

dist/gridsterPreview.component.js

@@ -18,12 +18,12 @@ "use strict";
             var margin = 0;
-            var curRowHeight = this.gridster.state.curRowHeight;
-            var curColWidth = this.gridster.state.curColWidth;
-            if (this.gridster.options.outerMargin) {
-                margin = this.gridster.state.options.margin;
+            var curRowHeight = this.gridster.curRowHeight;
+            var curColWidth = this.gridster.curColWidth;
+            if (this.gridster.$options.outerMargin) {
+                margin = this.gridster.$options.margin;
             }
             this.renderer.setStyle(this.el, 'display', 'block');
-            this.renderer.setStyle(this.el, 'height', (this.gridster.movingItem.rows * curRowHeight - margin) + 'px');
-            this.renderer.setStyle(this.el, 'width', (this.gridster.movingItem.cols * curColWidth - margin) + 'px');
-            this.renderer.setStyle(this.el, 'top', (this.gridster.movingItem.y * curRowHeight + margin) + 'px');
-            this.renderer.setStyle(this.el, 'left', (this.gridster.movingItem.x * curColWidth + margin) + 'px');
+            this.renderer.setStyle(this.el, 'height', (this.gridster.movingItem.$item.rows * curRowHeight - margin) + 'px');
+            this.renderer.setStyle(this.el, 'width', (this.gridster.movingItem.$item.cols * curColWidth - margin) + 'px');
+            this.renderer.setStyle(this.el, 'top', (this.gridster.movingItem.$item.y * curRowHeight + margin) + 'px');
+            this.renderer.setStyle(this.el, 'left', (this.gridster.movingItem.$item.x * curColWidth + margin) + 'px');
             this.renderer.setStyle(this.el, 'marginBottom', margin + 'px');
@@ -30,0 +30,0 @@ }

dist/gridsterResizable.service.d.ts

 import { GridsterItemComponent } from './gridsterItem.component';
 import { GridsterItem } from './gridsterItem.interface';
 import { GridsterResizeEventType } from './gridsterResizeEventType.interface';
+import { GridsterPush } from './gridsterPush.service';
+import { GridsterComponent } from './gridster.component';
 export declare class GridsterResizable {
     gridsterItem: GridsterItemComponent;
+    gridster: GridsterComponent;
     itemCopy: GridsterItem;
@@ -27,4 +30,5 @@ lastMouse: {
     touchstart: Function;
+    push: GridsterPush;
     static touchEvent(e: any): void;
-    constructor(gridsterItem: GridsterItemComponent);
+    constructor(gridsterItem: GridsterItemComponent, gridster: GridsterComponent);
     dragStart(e: any): void;
@@ -31,0 +35,0 @@ dragMove(e: any): void;

dist/gridsterResizable.service.js

@@ -6,5 +6,8 @@ "use strict";
 var gridsterScroll_service_1 = require("./gridsterScroll.service");
+var gridsterPush_service_1 = require("./gridsterPush.service");
+var gridster_component_1 = require("./gridster.component");
 var GridsterResizable = (function () {
-    function GridsterResizable(gridsterItem) {
+    function GridsterResizable(gridsterItem, gridster) {
         this.gridsterItem = gridsterItem;
+        this.gridster = gridster;
         this.lastMouse = {
@@ -52,5 +55,6 @@ pageX: 0,
         this.elemPosition[3] = this.gridsterItem.height;
-        this.itemCopy = JSON.parse(JSON.stringify(this.gridsterItem.state.item, ['rows', 'cols', 'x', 'y']));
-        this.gridsterItem.gridster.movingItem = this.gridsterItem.state.item;
-        this.gridsterItem.gridster.previewStyle();
+        this.itemCopy = JSON.parse(JSON.stringify(this.gridsterItem.$item, ['rows', 'cols', 'x', 'y']));
+        this.gridster.movingItem = this.gridsterItem;
+        this.gridster.previewStyle();
+        this.push = new gridsterPush_service_1.GridsterPush(this.gridsterItem, this.gridster);
         if (e.currentTarget.classList.contains('handle-n')) {
@@ -114,6 +118,6 @@ this.resizeEventScrollType.n = true;
         this.gridsterItem.renderer.removeClass(this.gridsterItem.el, 'gridster-item-resizing');
-        this.gridsterItem.gridster.movingItem = null;
-        this.gridsterItem.gridster.previewStyle();
-        if (this.gridsterItem.gridster.state.options.resizable.stop) {
-            Promise.resolve(this.gridsterItem.gridster.state.options.resizable.stop(this.gridsterItem.state.item, this.gridsterItem, e))
+        this.gridster.movingItem = null;
+        this.gridster.previewStyle();
+        if (this.gridster.$options.resizable.stop) {
+            Promise.resolve(this.gridster.$options.resizable.stop(this.gridsterItem.item, this.gridsterItem, e))
                 .then(this.makeResize.bind(this), this.cancelResize.bind(this));
@@ -126,11 +130,15 @@ }
     GridsterResizable.prototype.cancelResize = function () {
-        this.gridsterItem.state.item.cols = this.itemCopy.cols;
-        this.gridsterItem.state.item.rows = this.itemCopy.rows;
-        this.gridsterItem.state.item.x = this.itemCopy.x;
-        this.gridsterItem.state.item.y = this.itemCopy.y;
-        this.gridsterItem.state.item.setSize(true);
+        this.gridsterItem.$item.cols = this.itemCopy.cols;
+        this.gridsterItem.$item.rows = this.itemCopy.rows;
+        this.gridsterItem.$item.x = this.itemCopy.x;
+        this.gridsterItem.$item.y = this.itemCopy.y;
+        this.gridsterItem.setSize(true);
+        this.push.restoreItems();
+        this.push = undefined;
     };
     GridsterResizable.prototype.makeResize = function () {
-        this.gridsterItem.state.item.setSize(true);
-        this.gridsterItem.state.item.checkItemChanges(this.gridsterItem.state.item, this.itemCopy);
+        this.gridsterItem.setSize(true);
+        this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.itemCopy);
+        this.push.setPushedItems();
+        this.push = undefined;
     };
@@ -140,19 +148,20 @@ GridsterResizable.prototype.handleN = function (e) {
         this.elemPosition[3] += this.lastMouse.pageY - e.pageY;
-        this.position = this.gridsterItem.gridster.pixelsToPosition(this.elemPosition[0], this.elemPosition[1], Math.floor);
-        if (this.gridsterItem.state.item.y !== this.position[1]) {
-            this.itemBackup[1] = this.gridsterItem.state.item.y;
-            this.itemBackup[3] = this.gridsterItem.state.item.rows;
-            this.gridsterItem.state.item.rows += this.gridsterItem.state.item.y - this.position[1];
-            this.gridsterItem.state.item.y = this.position[1];
-            if (this.gridsterItem.state.item.y < 0 || this.gridsterItem.state.item.rows < 1 ||
-                this.gridsterItem.gridster.checkCollision(this.gridsterItem.state.item)) {
-                this.gridsterItem.state.item.y = this.itemBackup[1];
-                this.gridsterItem.state.item.rows = this.itemBackup[3];
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'top', this.gridsterItem.gridster.positionYToPixels(this.gridsterItem.state.item.y) + 'px');
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.gridsterItem.gridster.positionYToPixels(this.gridsterItem.state.item.rows)
-                    - this.gridsterItem.gridster.state.options.margin + 'px');
+        this.position = this.gridster.pixelsToPosition(this.elemPosition[0], this.elemPosition[1], Math.floor);
+        if (this.gridsterItem.$item.y !== this.position[1]) {
+            this.itemBackup[1] = this.gridsterItem.$item.y;
+            this.itemBackup[3] = this.gridsterItem.$item.rows;
+            this.gridsterItem.$item.rows += this.gridsterItem.$item.y - this.position[1];
+            this.gridsterItem.$item.y = this.position[1];
+            this.push.pushItems();
+            if (this.gridsterItem.$item.y < 0 || this.gridsterItem.$item.rows < 1 ||
+                this.gridster.checkCollision(this.gridsterItem)) {
+                this.gridsterItem.$item.y = this.itemBackup[1];
+                this.gridsterItem.$item.rows = this.itemBackup[3];
+                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'top', this.gridster.positionYToPixels(this.gridsterItem.$item.y) + 'px');
+                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.gridster.positionYToPixels(this.gridsterItem.$item.rows)
+                    - this.gridster.$options.margin + 'px');
                 return;
             }
             else {
-                this.gridsterItem.gridster.previewStyle();
+                this.gridster.previewStyle();
             }
@@ -166,19 +175,20 @@ }
         this.elemPosition[2] += this.lastMouse.pageX - e.pageX;
-        this.position = this.gridsterItem.gridster.pixelsToPosition(this.elemPosition[0], this.elemPosition[1], Math.floor);
-        if (this.gridsterItem.state.item.x !== this.position[0]) {
-            this.itemBackup[0] = this.gridsterItem.state.item.x;
-            this.itemBackup[2] = this.gridsterItem.state.item.cols;
-            this.gridsterItem.state.item.cols += this.gridsterItem.state.item.x - this.position[0];
-            this.gridsterItem.state.item.x = this.position[0];
-            if (this.gridsterItem.state.item.x < 0 || this.gridsterItem.state.item.cols < 1 ||
-                this.gridsterItem.gridster.checkCollision(this.gridsterItem.state.item)) {
-                this.gridsterItem.state.item.x = this.itemBackup[0];
-                this.gridsterItem.state.item.cols = this.itemBackup[2];
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'left', this.gridsterItem.gridster.positionXToPixels(this.gridsterItem.state.item.x) + 'px');
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.gridsterItem.gridster.positionXToPixels(this.gridsterItem.state.item.cols)
-                    - this.gridsterItem.gridster.state.options.margin + 'px');
+        this.position = this.gridster.pixelsToPosition(this.elemPosition[0], this.elemPosition[1], Math.floor);
+        if (this.gridsterItem.$item.x !== this.position[0]) {
+            this.itemBackup[0] = this.gridsterItem.$item.x;
+            this.itemBackup[2] = this.gridsterItem.$item.cols;
+            this.gridsterItem.$item.cols += this.gridsterItem.$item.x - this.position[0];
+            this.gridsterItem.$item.x = this.position[0];
+            this.push.pushItems();
+            if (this.gridsterItem.$item.x < 0 || this.gridsterItem.$item.cols < 1 ||
+                this.gridster.checkCollision(this.gridsterItem)) {
+                this.gridsterItem.$item.x = this.itemBackup[0];
+                this.gridsterItem.$item.cols = this.itemBackup[2];
+                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'left', this.gridster.positionXToPixels(this.gridsterItem.$item.x) + 'px');
+                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.gridster.positionXToPixels(this.gridsterItem.$item.cols)
+                    - this.gridster.$options.margin + 'px');
                 return;
             }
             else {
-                this.gridsterItem.gridster.previewStyle();
+                this.gridster.previewStyle();
             }
@@ -191,14 +201,15 @@ }
         this.elemPosition[3] += e.pageY - this.lastMouse.pageY;
-        this.position = this.gridsterItem.gridster.pixelsToPosition(this.elemPosition[0], this.elemPosition[1] + this.elemPosition[3], Math.ceil);
-        if ((this.gridsterItem.state.item.y + this.gridsterItem.state.item.rows) !== this.position[1]) {
-            this.itemBackup[3] = this.gridsterItem.state.item.rows;
-            this.gridsterItem.state.item.rows = this.position[1] - this.gridsterItem.state.item.y;
-            if (this.gridsterItem.state.item.rows < 1 || this.gridsterItem.gridster.checkCollision(this.gridsterItem.state.item)) {
-                this.gridsterItem.state.item.rows = this.itemBackup[3];
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.gridsterItem.gridster.positionYToPixels(this.gridsterItem.state.item.rows)
-                    - this.gridsterItem.gridster.state.options.margin + 'px');
+        this.position = this.gridster.pixelsToPosition(this.elemPosition[0], this.elemPosition[1] + this.elemPosition[3], Math.ceil);
+        if ((this.gridsterItem.$item.y + this.gridsterItem.$item.rows) !== this.position[1]) {
+            this.itemBackup[3] = this.gridsterItem.$item.rows;
+            this.gridsterItem.$item.rows = this.position[1] - this.gridsterItem.$item.y;
+            this.push.pushItems();
+            if (this.gridsterItem.$item.rows < 1 || this.gridster.checkCollision(this.gridsterItem)) {
+                this.gridsterItem.$item.rows = this.itemBackup[3];
+                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.gridster.positionYToPixels(this.gridsterItem.$item.rows)
+                    - this.gridster.$options.margin + 'px');
                 return;
             }
             else {
-                this.gridsterItem.gridster.previewStyle();
+                this.gridster.previewStyle();
             }
@@ -210,14 +221,15 @@ }
         this.elemPosition[2] += e.pageX - this.lastMouse.pageX;
-        this.position = this.gridsterItem.gridster.pixelsToPosition(this.elemPosition[0] + this.elemPosition[2], this.elemPosition[1], Math.ceil);
-        if ((this.gridsterItem.state.item.x + this.gridsterItem.state.item.cols) !== this.position[0]) {
-            this.itemBackup[2] = this.gridsterItem.state.item.cols;
-            this.gridsterItem.state.item.cols = this.position[0] - this.gridsterItem.state.item.x;
-            if (this.gridsterItem.state.item.cols < 1 || this.gridsterItem.gridster.checkCollision(this.gridsterItem.state.item)) {
-                this.gridsterItem.state.item.cols = this.itemBackup[2];
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.gridsterItem.gridster.positionXToPixels(this.gridsterItem.state.item.cols)
-                    - this.gridsterItem.gridster.state.options.margin + 'px');
+        this.position = this.gridster.pixelsToPosition(this.elemPosition[0] + this.elemPosition[2], this.elemPosition[1], Math.ceil);
+        if ((this.gridsterItem.$item.x + this.gridsterItem.$item.cols) !== this.position[0]) {
+            this.itemBackup[2] = this.gridsterItem.$item.cols;
+            this.gridsterItem.$item.cols = this.position[0] - this.gridsterItem.$item.x;
+            this.push.pushItems();
+            if (this.gridsterItem.$item.cols < 1 || this.gridster.checkCollision(this.gridsterItem)) {
+                this.gridsterItem.$item.cols = this.itemBackup[2];
+                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.gridster.positionXToPixels(this.gridsterItem.$item.cols)
+                    - this.gridster.$options.margin + 'px');
                 return;
             }
             else {
-                this.gridsterItem.gridster.previewStyle();
+                this.gridster.previewStyle();
             }
@@ -244,4 +256,4 @@ }
     GridsterResizable.prototype.toggle = function (enabled) {
-        this.resizeEnabled = !this.gridsterItem.gridster.state.mobile &&
-            (this.gridsterItem.state.item.resizeEnabled === undefined ? enabled : this.gridsterItem.state.item.resizeEnabled);
+        this.resizeEnabled = !this.gridster.mobile &&
+            (this.gridsterItem.$item.resizeEnabled === undefined ? enabled : this.gridsterItem.$item.resizeEnabled);
     };
@@ -256,4 +268,5 @@ return GridsterResizable;
     { type: gridsterItem_component_1.GridsterItemComponent, },
+    { type: gridster_component_1.GridsterComponent, },
 ]; };
 exports.GridsterResizable = GridsterResizable;
 //# sourceMappingURL=gridsterResizable.service.js.map

dist/gridsterResizable.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}}]

dist/gridsterScroll.service.js

@@ -16,4 +16,4 @@ "use strict";
 function scroll(elemPosition, gridsterItem, e, lastMouse, calculateItemPosition, resize, resizeEventScrollType) {
-    scrollSensitivity = gridsterItem.gridster.state.options.scrollSensitivity;
-    scrollSpeed = gridsterItem.gridster.state.options.scrollSpeed;
+    scrollSensitivity = gridsterItem.gridster.$options.scrollSensitivity;
+    scrollSpeed = gridsterItem.gridster.$options.scrollSpeed;
     gridsterElement = gridsterItem.gridster.el;
@@ -20,0 +20,0 @@ resizeEvent = resize;

dist/gridsterSwap.service.js

@@ -9,27 +9,27 @@ "use strict";
         var position = gridsterItem.gridster.pixelsToPosition(elemPosition[0], elemPosition[1], Math.round);
-        var x = gridsterItem.state.item.x;
-        var y = gridsterItem.state.item.y;
-        gridsterItem.state.item.x = position[0];
-        gridsterItem.state.item.y = position[1];
-        var swapItem = gridsterItem.gridster.findItemWithItem(gridsterItem.state.item);
-        gridsterItem.state.item.x = x;
-        gridsterItem.state.item.y = y;
+        var x = gridsterItem.$item.x;
+        var y = gridsterItem.$item.y;
+        gridsterItem.$item.x = position[0];
+        gridsterItem.$item.y = position[1];
+        var swapItem = gridsterItem.gridster.findItemWithItem(gridsterItem);
+        gridsterItem.$item.x = x;
+        gridsterItem.$item.y = y;
         if (!swapItem) {
             return;
         }
-        x = swapItem.x;
-        y = swapItem.y;
-        swapItem.x = gridsterItem.state.item.x;
-        swapItem.y = gridsterItem.state.item.y;
-        gridsterItem.state.item.x = position[0];
-        gridsterItem.state.item.y = position[1];
-        if (gridsterItem.gridster.checkCollision(swapItem) || gridsterItem.gridster.checkCollision(gridsterItem.state.item)) {
-            gridsterItem.state.item.x = swapItem.x;
-            gridsterItem.state.item.y = swapItem.y;
-            swapItem.x = x;
-            swapItem.y = y;
+        x = swapItem.$item.x;
+        y = swapItem.$item.y;
+        swapItem.$item.x = gridsterItem.$item.x;
+        swapItem.$item.y = gridsterItem.$item.y;
+        gridsterItem.$item.x = position[0];
+        gridsterItem.$item.y = position[1];
+        if (gridsterItem.gridster.checkCollision(swapItem) || gridsterItem.gridster.checkCollision(gridsterItem)) {
+            gridsterItem.$item.x = swapItem.$item.x;
+            gridsterItem.$item.y = swapItem.$item.y;
+            swapItem.$item.x = x;
+            swapItem.$item.y = y;
         }
         else {
             swapItem.setSize(true);
-            swapItem.checkItemChanges(swapItem, { x: x, y: y, cols: swapItem.cols, rows: swapItem.rows });
+            swapItem.checkItemChanges(swapItem, { x: x, y: y, cols: swapItem.$item.cols, rows: swapItem.$item.rows });
         }
@@ -36,0 +36,0 @@ };

dist/gridsterUtils.service.js

@@ -32,3 +32,2 @@ "use strict";
     };
-    ;
     return GridsterUtils;
@@ -35,0 +34,0 @@ }());

package.json

 {
   "name": "angular-gridster2",
-  "version": "2.7.7",
+  "version": "2.8.0",
   "license": "MIT",
@@ -50,19 +50,19 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@angular/animations": "4.0.2",
+    "@angular/animations": "4.0.3",
     "@angular/cli": "1.0.0",
-    "@angular/common": "4.0.2",
-    "@angular/compiler": "4.0.2",
-    "@angular/compiler-cli": "4.0.2",
-    "@angular/core": "4.0.2",
-    "@angular/forms": "4.0.2",
-    "@angular/http": "4.0.2",
-    "@angular/language-service": "4.0.2",
+    "@angular/common": "4.0.3",
+    "@angular/compiler": "4.0.3",
+    "@angular/compiler-cli": "4.0.3",
+    "@angular/core": "4.0.3",
+    "@angular/forms": "4.0.3",
+    "@angular/http": "4.0.3",
+    "@angular/language-service": "4.0.3",
     "@angular/material": "2.0.0-beta.3",
-    "@angular/platform-browser": "4.0.2",
-    "@angular/platform-browser-dynamic": "4.0.2",
-    "@angular/platform-server": "4.0.2",
-    "@angular/router": "4.0.2",
+    "@angular/platform-browser": "4.0.3",
+    "@angular/platform-browser-dynamic": "4.0.3",
+    "@angular/platform-server": "4.0.3",
+    "@angular/router": "4.0.3",
     "@types/jasmine": "2.5.47",
     "@types/node": "7.0.13",
-    "codelyzer": "2.1.1",
+    "codelyzer": "3.0.0",
     "core-js": "2.4.1",
@@ -69,0 +69,0 @@ "gulp": "3.9.1",

README.md

@@ -7,2 +7,3 @@ angular-gridster2
 [![downloads](https://img.shields.io/npm/dm/angular-gridster2.svg)](https://www.npmjs.com/package/angular-gridster2)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=AARLN6N6WY85E&lc=RO&item_name=Angular%2dgridster2&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted)
 
@@ -115,6 +116,7 @@ ### Angular2 implementation of angular-gridster [Demo](http://tiberiuzuld.github.io/angular-gridster2/angular)
 
-Default Options:
+##### Default Grid Options:
 ```typescript
 import {GridsterConfig} from './gridsterConfig.interface';
-const GridsterConfigService: GridsterConfig = {
+
+export const GridsterConfigService: GridsterConfig = {
   gridType: 'fit', // 'fit' will fit the items in the container without scroll;
@@ -143,7 +145,7 @@ // 'scrollVertical' will fit on width and height of the items will be the same as the width
   scrollSpeed: 20,  // how much to scroll each mouse move when in the scrollSensitivity zone
-  itemChangeCallback: undefined,  // callback to call for each item when is changes x, y, rows, cols. Arguments:gridsterItem
-  itemResizeCallback: undefined,  // callback to call for each item when width/height changes. Arguments:gridsterItem
+  itemChangeCallback: undefined,  // callback to call for each item when is changes x, y, rows, cols. Arguments: gridsterItem
+  itemResizeCallback: undefined,  // callback to call for each item when width/height changes. Arguments: gridsterItem
   draggable: {
     enabled: false, // enable/disable draggable items
-    ignoreContentClass: 'gridster-item-content', // default content class to ignore the drag event from Warning: the class should have user-select: auto;
+    ignoreContentClass: 'gridster-item-content', // default content class to ignore the drag event from
     stop: undefined // callback when dragging an item stops.  Accepts Promise return to cancel/approve drag.
@@ -167,6 +169,24 @@ // Arguments: item, gridsterItem, event
   },
-  swap: true // allow items to switch position if drop on top of another
+  swap: true, // allow items to switch position if drop on top of another
+  pushItems: false // push items when resizing and dragging
 };
 ```
 
+##### Gridster item options:
+```typescript
+export interface GridsterItem {
+  x?: number; // x position if missing will auto position
+  y?: number; // y position if missing will auto position
+  rows?: number; // number of rows if missing will use grid option defaultItemRows
+  cols?: number; // number of columns if missing will use grid option defaultItemCols
+  initCallback?: Function; // initialization callback
+  dragEnabled?: boolean; // override grid option draggable.enabled
+  resizeEnabled?: boolean; // override grid option resizable.enabled
+  maxItemRows?: number; // override grid option maxItemRows
+  minItemRows?: number; // override grid option minItemRows
+  maxItemCols?: number; // override grid option maxItemCols
+  minItemCols?: number; // override grid option minItemCols
+}
+```
+
 ### Events 
@@ -173,0 +193,0 @@

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

182501

increased by11.71%

Number of package files

63

increased by6.78%

Lines of code

1763

increased by16.37%

Number of lines in readme file

244

increased by8.93%

No dependency changes