angular-gridster2 - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

dist/gridster.component.d.ts

@@ -1,14 +0,14 @@
-import { OnInit, ElementRef, OnDestroy } from '@angular/core';
+import { OnInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 import { GridsterConfig } from './gridsterConfig.interface';
 import { GridsterItem } from './gridsterItem.interface';
 export declare class GridsterComponent implements OnInit, OnDestroy {
-    private el;
+    renderer: Renderer2;
     options: GridsterConfig;
     detectScrollBarLayout: () => void;
     calculateLayoutDebounce: Function;
-    onResizeFunction: EventListenerObject;
+    onResizeFunction: (event: any) => void;
     movingItem: GridsterItem;
     previewStyle: Function;
+    el: any;
     state: {
-        element: HTMLElement;
         mobile: boolean;
@@ -25,5 +25,8 @@ curWidth: number;
     };
+    transitionend: Function;
+    windowResize: Function;
     private cleanCallback;
-    constructor(el: ElementRef);
+    constructor(el: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
+    ngDoCheck(): void;
     optionsChanged(): void;
@@ -30,0 +33,0 @@ ngOnDestroy(): void;

dist/gridster.component.js

@@ -6,8 +6,7 @@ "use strict";
 var gridsterUtils_service_1 = require("./gridsterUtils.service");
-var detectElementResize_1 = require("./detectElementResize");
 var GridsterComponent = (function () {
-    function GridsterComponent(el) {
-        this.el = el;
+    function GridsterComponent(el, renderer) {
+        this.renderer = renderer;
+        this.el = el.nativeElement;
         this.state = {
-            element: el.nativeElement,
             mobile: false,
@@ -32,8 +31,15 @@ curWidth: 0,
         this.calculateLayoutDebounce = gridsterUtils_service_1.GridsterUtils.debounce(this.calculateLayout.bind(this), 5);
-        this.state.element.addEventListener('transitionend', this.detectScrollBarLayout);
+        this.transitionend = this.renderer.listen(this.el, 'transitionend', this.detectScrollBarLayout);
         this.calculateLayoutDebounce();
         this.onResizeFunction = this.onResize.bind(this);
-        detectElementResize_1.addResizeListener(this.state.element, this.onResizeFunction);
+        this.windowResize = this.renderer.listen('window', 'resize', this.onResizeFunction);
     };
     ;
+    GridsterComponent.prototype.ngDoCheck = function () {
+        var clientWidth = this.el.clientWidth;
+        var clientHeight = this.el.clientHeight;
+        if (clientWidth !== this.state.curWidth || clientHeight !== this.state.curHeight) {
+            this.onResize();
+        }
+    };
     GridsterComponent.prototype.optionsChanged = function () {
@@ -44,3 +50,4 @@ this.state.options = gridsterUtils_service_1.GridsterUtils.merge(this.state.options, this.options);
     GridsterComponent.prototype.ngOnDestroy = function () {
-        detectElementResize_1.removeResizeListener(this.state.element, this.onResizeFunction);
+        this.windowResize();
+        this.transitionend();
         if (typeof this.cleanCallback === 'function') {
@@ -57,8 +64,14 @@ this.cleanCallback();
     GridsterComponent.prototype.detectScrollBar = function () {
-        var verticalScrollPresent = this.state.element.clientWidth < this.state.element.offsetWidth &&
-            this.state.element.offsetHeight - this.state.element.clientHeight <
-                this.state.element.scrollWidth - this.state.element.offsetWidth;
-        var horizontalScrollPresent = this.state.element.clientHeight < this.state.element.offsetHeight &&
-            this.state.element.offsetWidth - this.state.element.clientWidth <
-                this.state.element.scrollHeight - this.state.element.offsetHeight;
+        var clientWidth = this.el.clientWidth;
+        var offsetWidth = this.el.offsetWidth;
+        var scrollWidth = this.el.scrollWidth;
+        var clientHeight = this.el.clientHeight;
+        var offsetHeight = this.el.offsetHeight;
+        var scrollHeight = this.el.scrollHeight;
+        var verticalScrollPresent = clientWidth < offsetWidth &&
+            offsetHeight - clientHeight <
+                scrollWidth - offsetWidth;
+        var horizontalScrollPresent = clientHeight < offsetHeight &&
+            offsetWidth - clientWidth <
+                scrollHeight - offsetHeight;
         if (this.state.scrollBarPresent && !verticalScrollPresent && !horizontalScrollPresent) {
@@ -75,10 +88,6 @@ this.state.scrollBarPresent = !this.state.scrollBarPresent;
     GridsterComponent.prototype.setGridSize = function () {
-        if (this.state.options.gridType === 'fit' && !this.state.mobile) {
-            this.state.curWidth = this.state.element.offsetWidth;
-            this.state.curHeight = this.state.element.offsetHeight;
-        }
-        else {
-            this.state.curWidth = this.state.element.clientWidth;
-            this.state.curHeight = this.state.element.clientHeight;
-        }
+        var clientWidth = this.el.clientWidth;
+        var clientHeight = this.el.clientHeight;
+        this.state.curWidth = clientWidth;
+        this.state.curHeight = clientHeight;
     };
@@ -111,21 +120,25 @@ ;
         }
+        var addClass;
+        var removeClass1;
+        var removeClass2;
+        var removeClass3;
         if (this.state.options.gridType === 'fit') {
-            this.state.element.classList.add('fit');
-            this.state.element.classList.remove('scrollVertical');
-            this.state.element.classList.remove('scrollHorizontal');
-            this.state.element.classList.remove('fixed');
+            addClass = 'fit';
+            removeClass1 = 'scrollVertical';
+            removeClass2 = 'scrollHorizontal';
+            removeClass3 = 'fixed';
         }
         else if (this.state.options.gridType === 'scrollVertical') {
             this.state.curRowHeight = this.state.curColWidth;
-            this.state.element.classList.add('scrollVertical');
-            this.state.element.classList.remove('fit');
-            this.state.element.classList.remove('scrollHorizontal');
-            this.state.element.classList.remove('fixed');
+            addClass = 'scrollVertical';
+            removeClass1 = 'fit';
+            removeClass2 = 'scrollHorizontal';
+            removeClass3 = 'fixed';
         }
         else if (this.state.options.gridType === 'scrollHorizontal') {
             this.state.curColWidth = this.state.curRowHeight;
-            this.state.element.classList.add('scrollHorizontal');
-            this.state.element.classList.remove('fit');
-            this.state.element.classList.remove('scrollVertical');
-            this.state.element.classList.remove('fixed');
+            addClass = 'scrollHorizontal';
+            removeClass1 = 'fit';
+            removeClass2 = 'scrollVertical';
+            removeClass3 = 'fixed';
         }
@@ -135,14 +148,18 @@ else if (this.state.options.gridType === 'fixed') {
             this.state.curRowHeight = this.state.options.fixedRowHeight;
-            this.state.element.classList.add('fixed');
-            this.state.element.classList.remove('fit');
-            this.state.element.classList.remove('scrollVertical');
-            this.state.element.classList.remove('scrollHorizontal');
+            addClass = 'fixed';
+            removeClass1 = 'fit';
+            removeClass2 = 'scrollVertical';
+            removeClass3 = 'scrollHorizontal';
         }
+        this.renderer.addClass(this.el, addClass);
+        this.renderer.removeClass(this.el, removeClass1);
+        this.renderer.removeClass(this.el, removeClass2);
+        this.renderer.removeClass(this.el, removeClass3);
         if (!this.state.mobile && this.state.options.mobileBreakpoint > this.state.curWidth) {
             this.state.mobile = !this.state.mobile;
-            this.state.element.classList.add('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;
-            this.state.element.classList.remove('mobile');
+            this.renderer.removeClass(this.el, 'mobile');
         }
@@ -317,2 +334,3 @@ var widgetsIndex = this.state.grid.length - 1;
     { type: core_1.ElementRef, },
+    { type: core_1.Renderer2, },
 ]; };
@@ -319,0 +337,0 @@ GridsterComponent.propDecorators = {

dist/gridster.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster","template":"<ng-content></ng-content><gridster-preview></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   -webkit-user-select: none;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) /deep/ gridster-item {   position: relative; }  :host gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"detectScrollBar":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}],"checkCompactUp":[{"__symbolic":"method"}],"moveUpTillCollision":[{"__symbolic":"method"}],"checkCompactLeft":[{"__symbolic":"method"}],"moveLeftTillCollision":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster","template":"<ng-content></ng-content><gridster-preview></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   -webkit-user-select: none;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) /deep/ gridster-item {   position: relative; }  :host gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"detectScrollBar":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}],"checkCompactUp":[{"__symbolic":"method"}],"moveUpTillCollision":[{"__symbolic":"method"}],"checkCompactLeft":[{"__symbolic":"method"}],"moveLeftTillCollision":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster","template":"<ng-content></ng-content><gridster-preview></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   -webkit-user-select: none;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) /deep/ gridster-item {   position: relative; }  :host gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"detectScrollBar":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}],"checkCompactUp":[{"__symbolic":"method"}],"moveUpTillCollision":[{"__symbolic":"method"}],"checkCompactLeft":[{"__symbolic":"method"}],"moveLeftTillCollision":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster","template":"<ng-content></ng-content><gridster-preview></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   -webkit-user-select: none;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) /deep/ gridster-item {   position: relative; }  :host gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"detectScrollBar":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}],"checkCompactUp":[{"__symbolic":"method"}],"moveUpTillCollision":[{"__symbolic":"method"}],"checkCompactLeft":[{"__symbolic":"method"}],"moveLeftTillCollision":[{"__symbolic":"method"}]}}}}]

dist/gridsterDraggable.service.d.ts

 import { GridsterItemComponent } from './gridsterItem.component';
 import { GridsterItem } from './gridsterItem.interface';
 export declare class GridsterDraggable {
-    element: HTMLElement;
     gridsterItem: GridsterItemComponent;
@@ -15,7 +14,14 @@ itemCopy: GridsterItem;
     enabled: boolean;
-    dragStartFunction: EventListenerObject;
-    dragFunction: EventListenerObject;
-    dragStopFunction: EventListenerObject;
+    dragStartFunction: (event: any) => void;
+    dragFunction: (event: any) => void;
+    dragStopFunction: (event: any) => void;
+    mousemove: Function;
+    mouseup: Function;
+    touchmove: Function;
+    touchend: Function;
+    touchcancel: Function;
+    mousedown: Function;
+    touchstart: Function;
     static touchEvent(e: any): void;
-    constructor(element: HTMLElement, gridsterItem: GridsterItemComponent);
+    constructor(gridsterItem: GridsterItemComponent);
     dragStart(e: any): void;
@@ -22,0 +28,0 @@ dragMove(e: any): void;

dist/gridsterDraggable.service.js

@@ -8,4 +8,3 @@ "use strict";
 var GridsterDraggable = (function () {
-    function GridsterDraggable(element, gridsterItem) {
-        this.element = element;
+    function GridsterDraggable(gridsterItem) {
         this.gridsterItem = gridsterItem;
@@ -40,14 +39,14 @@ this.lastMouse = {
         this.dragStopFunction = this.dragStop.bind(this);
-        document.addEventListener('mousemove', this.dragFunction);
-        document.addEventListener('mouseup', this.dragStopFunction);
-        document.addEventListener('touchmove', this.dragFunction);
-        document.addEventListener('touchend', this.dragStopFunction);
-        document.addEventListener('touchcancel', this.dragStopFunction);
-        this.element.classList.add('gridster-item-moving');
+        this.mousemove = this.gridsterItem.renderer.listen('document', 'mousemove', this.dragFunction);
+        this.mouseup = this.gridsterItem.renderer.listen('document', 'mouseup', this.dragStopFunction);
+        this.touchmove = this.gridsterItem.renderer.listen('document', 'touchmove', this.dragFunction);
+        this.touchend = this.gridsterItem.renderer.listen('document', 'touchend', this.dragStopFunction);
+        this.touchcancel = this.gridsterItem.renderer.listen('document', 'touchcancel', this.dragStopFunction);
+        this.gridsterItem.renderer.addClass(this.gridsterItem.el, 'gridster-item-moving');
         this.lastMouse.pageX = e.pageX;
         this.lastMouse.pageY = e.pageY;
-        this.elemPosition[0] = parseInt(this.element.style.left, 10);
-        this.elemPosition[1] = parseInt(this.element.style.top, 10);
-        this.elemPosition[2] = this.element.offsetWidth;
-        this.elemPosition[3] = this.element.offsetHeight;
+        this.elemPosition[0] = this.gridsterItem.left;
+        this.elemPosition[1] = this.gridsterItem.top;
+        this.elemPosition[2] = this.gridsterItem.width;
+        this.elemPosition[3] = this.gridsterItem.height;
         this.itemCopy = JSON.parse(JSON.stringify(this.gridsterItem.state.item, ['rows', 'cols', 'x', 'y']));
@@ -72,8 +71,8 @@ this.gridsterItem.gridster.movingItem = this.gridsterItem.state.item;
         gridsterScroll_service_1.cancelScroll();
-        document.removeEventListener('mousemove', this.dragFunction);
-        document.removeEventListener('mouseup', this.dragStopFunction);
-        document.removeEventListener('touchmove', this.dragFunction);
-        document.removeEventListener('touchend', this.dragStopFunction);
-        document.removeEventListener('touchcancel', this.dragStopFunction);
-        this.element.classList.remove('gridster-item-moving');
+        this.mousemove();
+        this.mouseup();
+        this.touchmove();
+        this.touchend();
+        this.touchcancel();
+        this.gridsterItem.renderer.removeClass(this.gridsterItem.el, 'gridster-item-moving');
         this.gridsterItem.gridster.movingItem = null;
@@ -102,4 +101,4 @@ this.gridsterItem.gridster.previewStyle();
     GridsterDraggable.prototype.calculateItemPosition = function () {
-        this.element.style.left = this.elemPosition[0] + 'px';
-        this.element.style.top = this.elemPosition[1] + 'px';
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'left', this.elemPosition[0] + 'px');
+        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);
@@ -126,9 +125,9 @@ if (this.position[0] !== this.gridsterItem.state.item.x || this.position[1] !== this.gridsterItem.state.item.y) {
             this.dragStartFunction = this.dragStart.bind(this);
-            this.element.addEventListener('mousedown', this.dragStartFunction);
-            this.element.addEventListener('touchstart', this.dragStartFunction);
+            this.mousedown = this.gridsterItem.renderer.listen(this.gridsterItem.el, 'mousedown', this.dragStartFunction);
+            this.touchstart = this.gridsterItem.renderer.listen(this.gridsterItem.el, 'touchstart', this.dragStartFunction);
         }
         else if (this.enabled && !enableDrag) {
             this.enabled = !this.enabled;
-            this.element.removeEventListener('mousedown', this.dragStartFunction);
-            this.element.removeEventListener('touchstart', this.dragStartFunction);
+            this.mousedown();
+            this.touchstart();
         }
@@ -143,3 +142,2 @@ };
 GridsterDraggable.ctorParameters = function () { return [
-    { type: HTMLElement, },
     { type: gridsterItem_component_1.GridsterItemComponent, },
@@ -146,0 +144,0 @@ ]; };

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":"error","message":"Could not resolve type","line":28,"character":23,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}]}],"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":"error","message":"Could not resolve type","line":28,"character":23,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}]}],"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"}]}],"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"}]}],"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

@@ -1,5 +0,6 @@
-import { OnInit, ElementRef, OnDestroy, EventEmitter } from '@angular/core';
+import { OnInit, ElementRef, OnDestroy, EventEmitter, Renderer2 } from '@angular/core';
 import { GridsterItem } from './gridsterItem.interface';
 import { GridsterComponent } from './gridster.component';
 export declare class GridsterItemComponent implements OnInit, OnDestroy {
+    renderer: Renderer2;
     item: GridsterItem;
@@ -9,5 +10,5 @@ itemChange: EventEmitter<GridsterItem>;
     state: {
-        element: HTMLElement;
         item: GridsterItem;
     };
+    el: any;
     gridster: GridsterComponent;
@@ -23,3 +24,3 @@ itemTop: number;
     itemMargin: number;
-    constructor(el: ElementRef, gridster: GridsterComponent);
+    constructor(el: ElementRef, gridster: GridsterComponent, renderer: Renderer2);
     ngOnInit(): void;
@@ -26,0 +27,0 @@ ngOnDestroy(): void;

dist/gridsterItem.component.js

@@ -9,7 +9,8 @@ "use strict";
 var GridsterItemComponent = (function () {
-    function GridsterItemComponent(el, gridster) {
+    function GridsterItemComponent(el, gridster, renderer) {
+        this.renderer = renderer;
         this.itemChange = new core_1.EventEmitter();
         this.itemResize = new core_1.EventEmitter();
+        this.el = el.nativeElement;
         this.state = {
-            element: el.nativeElement,
             item: {
@@ -26,4 +27,4 @@ cols: undefined,
                 checkItemChanges: this.checkItemChanges.bind(this),
-                drag: new gridsterDraggable_service_1.GridsterDraggable(el.nativeElement, this),
-                resize: new gridsterResizable_service_1.GridsterResizable(el.nativeElement, this)
+                drag: new gridsterDraggable_service_1.GridsterDraggable(this),
+                resize: new gridsterResizable_service_1.GridsterResizable(this)
             }
@@ -63,8 +64,8 @@ };
         }
-        this.state.element.style.display = 'block';
-        this.state.element.style.top = this.top + 'px';
-        this.state.element.style.left = this.left + 'px';
-        this.state.element.style.width = this.width + 'px';
-        this.state.element.style.height = this.height + 'px';
-        this.state.element.style.margin = this.itemMargin + 'px';
+        this.renderer.setStyle(this.el, 'display', 'block');
+        this.renderer.setStyle(this.el, 'top', this.top + 'px');
+        this.renderer.setStyle(this.el, 'left', this.left + 'px');
+        this.renderer.setStyle(this.el, 'width', this.width + 'px');
+        this.renderer.setStyle(this.el, 'height', this.height + 'px');
+        this.renderer.setStyle(this.el, 'margin', this.itemMargin + 'px');
         if (this.width !== this.itemWidth || this.height !== this.itemHeight) {
@@ -119,2 +120,3 @@ this.itemResize.emit(this.state.item);
     { type: gridster_component_1.GridsterComponent, decorators: [{ type: core_1.Host },] },
+    { type: core_1.Renderer2, },
 ]; };
@@ -121,0 +123,0 @@ GridsterItemComponent.propDecorators = {

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(: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"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"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(: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"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"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)=\"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(: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(: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/gridsterPreview.component.d.ts

@@ -1,8 +0,9 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, Renderer2 } from '@angular/core';
 import { GridsterComponent } from './gridster.component';
 export declare class GridsterPreviewComponent {
-    element: HTMLElement;
+    renderer: Renderer2;
+    el: any;
     gridster: GridsterComponent;
-    constructor(el: ElementRef, gridster: GridsterComponent);
+    constructor(el: ElementRef, gridster: GridsterComponent, renderer: Renderer2);
     previewStyle(): void;
 }

dist/gridsterPreview.component.js

@@ -6,4 +6,5 @@ "use strict";
 var GridsterPreviewComponent = (function () {
-    function GridsterPreviewComponent(el, gridster) {
-        this.element = el.nativeElement;
+    function GridsterPreviewComponent(el, gridster, renderer) {
+        this.renderer = renderer;
+        this.el = el.nativeElement;
         this.gridster = gridster;
@@ -14,3 +15,3 @@ this.gridster.previewStyle = this.previewStyle.bind(this);
         if (!this.gridster.movingItem) {
-            this.element.style.display = 'none';
+            this.renderer.setStyle(this.el, 'display', 'none');
         }
@@ -24,8 +25,8 @@ else {
             }
-            this.element.style.display = 'block';
-            this.element.style.height = (this.gridster.movingItem.rows * curRowHeight - margin) + 'px';
-            this.element.style.width = (this.gridster.movingItem.cols * curColWidth - margin) + 'px';
-            this.element.style.top = (this.gridster.movingItem.y * curRowHeight + margin) + 'px';
-            this.element.style.left = (this.gridster.movingItem.x * curColWidth + margin) + 'px';
-            this.element.style.marginBottom = margin + 'px';
+            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, 'marginBottom', margin + 'px');
         }
@@ -45,4 +46,5 @@ };
     { type: gridster_component_1.GridsterComponent, decorators: [{ type: core_1.Host },] },
+    { type: core_1.Renderer2, },
 ]; };
 exports.GridsterPreviewComponent = GridsterPreviewComponent;
 //# sourceMappingURL=gridsterPreview.component.js.map

dist/gridsterPreview.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterPreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster-preview","template":""}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"previewStyle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterPreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster-preview","template":""}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"previewStyle":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterPreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster-preview","template":""}]}],"members":{"__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"}]}],"previewStyle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterPreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster-preview","template":""}]}],"members":{"__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"}]}],"previewStyle":[{"__symbolic":"method"}]}}}}]

dist/gridsterResizable.service.d.ts

@@ -5,3 +5,2 @@ import { GridsterItemComponent } from './gridsterItem.component';
 export declare class GridsterResizable {
-    element: HTMLElement;
     gridsterItem: GridsterItemComponent;
@@ -19,7 +18,14 @@ itemCopy: GridsterItem;
     directionFunction: Function;
-    dragFunction: EventListenerObject;
-    dragStopFunction: EventListenerObject;
+    dragFunction: (event: any) => void;
+    dragStopFunction: (event: any) => void;
     resizeEnabled: boolean;
+    mousemove: Function;
+    mouseup: Function;
+    touchmove: Function;
+    touchend: Function;
+    touchcancel: Function;
+    mousedown: Function;
+    touchstart: Function;
     static touchEvent(e: any): void;
-    constructor(element: HTMLElement, gridsterItem: GridsterItemComponent);
+    constructor(gridsterItem: GridsterItemComponent);
     dragStart(e: any): void;
@@ -26,0 +32,0 @@ dragMove(e: any): void;

dist/gridsterResizable.service.js

@@ -7,4 +7,3 @@ "use strict";
 var GridsterResizable = (function () {
-    function GridsterResizable(element, gridsterItem) {
-        this.element = element;
+    function GridsterResizable(gridsterItem) {
         this.gridsterItem = gridsterItem;
@@ -40,14 +39,14 @@ this.lastMouse = {
         this.dragStopFunction = this.dragStop.bind(this);
-        document.addEventListener('mousemove', this.dragFunction);
-        document.addEventListener('mouseup', this.dragStopFunction);
-        document.addEventListener('touchmove', this.dragFunction);
-        document.addEventListener('touchend', this.dragStopFunction);
-        document.addEventListener('touchcancel', this.dragStopFunction);
-        this.element.classList.add('gridster-item-resizing');
+        this.mousemove = this.gridsterItem.renderer.listen('document', 'mousemove', this.dragFunction);
+        this.mouseup = this.gridsterItem.renderer.listen('document', 'mouseup', this.dragStopFunction);
+        this.touchmove = this.gridsterItem.renderer.listen('document', 'touchmove', this.dragFunction);
+        this.touchend = this.gridsterItem.renderer.listen('document', 'touchend', this.dragStopFunction);
+        this.touchcancel = this.gridsterItem.renderer.listen('document', 'touchcancel', this.dragStopFunction);
+        this.gridsterItem.renderer.addClass(this.gridsterItem.el, 'gridster-item-resizing');
         this.lastMouse.pageX = e.pageX;
         this.lastMouse.pageY = e.pageY;
-        this.elemPosition[0] = parseInt(this.element.style.left, 10);
-        this.elemPosition[1] = parseInt(this.element.style.top, 10);
-        this.elemPosition[2] = this.element.offsetWidth;
-        this.elemPosition[3] = this.element.offsetHeight;
+        this.elemPosition[0] = this.gridsterItem.left;
+        this.elemPosition[1] = this.gridsterItem.top;
+        this.elemPosition[2] = this.gridsterItem.width;
+        this.elemPosition[3] = this.gridsterItem.height;
         this.itemCopy = JSON.parse(JSON.stringify(this.gridsterItem.state.item, ['rows', 'cols', 'x', 'y']));
@@ -106,8 +105,8 @@ this.gridsterItem.gridster.movingItem = this.gridsterItem.state.item;
         gridsterScroll_service_1.cancelScroll();
-        document.removeEventListener('mousemove', this.dragFunction);
-        document.removeEventListener('mouseup', this.dragStopFunction);
-        document.removeEventListener('touchmove', this.dragFunction);
-        document.removeEventListener('touchend', this.dragStopFunction);
-        document.removeEventListener('touchcancel', this.dragStopFunction);
-        this.element.classList.remove('gridster-item-resizing');
+        this.mousemove();
+        this.mouseup();
+        this.touchmove();
+        this.touchend();
+        this.touchcancel();
+        this.gridsterItem.renderer.removeClass(this.gridsterItem.el, 'gridster-item-resizing');
         this.gridsterItem.gridster.movingItem = null;
@@ -147,5 +146,5 @@ this.gridsterItem.gridster.previewStyle();
                 this.gridsterItem.state.item.rows = this.itemBackup[3];
-                this.element.style.top = this.gridsterItem.gridster.positionYToPixels(this.gridsterItem.state.item.y) + 'px';
-                this.element.style.height = this.gridsterItem.gridster.positionYToPixels(this.gridsterItem.state.item.rows)
-                    - this.gridsterItem.gridster.state.options.margin + 'px';
+                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');
                 return;
@@ -157,4 +156,4 @@ }
         }
-        this.element.style.top = this.elemPosition[1] + 'px';
-        this.element.style.height = this.elemPosition[3] + 'px';
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'top', this.elemPosition[1] + 'px');
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.elemPosition[3] + 'px');
     };
@@ -174,5 +173,5 @@ GridsterResizable.prototype.handleW = function (e) {
                 this.gridsterItem.state.item.cols = this.itemBackup[2];
-                this.element.style.left = this.gridsterItem.gridster.positionXToPixels(this.gridsterItem.state.item.x) + 'px';
-                this.element.style.width = this.gridsterItem.gridster.positionXToPixels(this.gridsterItem.state.item.cols)
-                    - this.gridsterItem.gridster.state.options.margin + 'px';
+                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');
                 return;
@@ -184,4 +183,4 @@ }
         }
-        this.element.style.left = this.elemPosition[0] + 'px';
-        this.element.style.width = this.elemPosition[2] + 'px';
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'left', this.elemPosition[0] + 'px');
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.elemPosition[2] + 'px');
     };
@@ -196,4 +195,4 @@ GridsterResizable.prototype.handleS = function (e) {
                 this.gridsterItem.state.item.rows = this.itemBackup[3];
-                this.element.style.height = this.gridsterItem.gridster.positionYToPixels(this.gridsterItem.state.item.rows)
-                    - this.gridsterItem.gridster.state.options.margin + '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');
                 return;
@@ -205,3 +204,3 @@ }
         }
-        this.element.style.height = this.elemPosition[3] + 'px';
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.elemPosition[3] + 'px');
     };
@@ -216,4 +215,4 @@ GridsterResizable.prototype.handleE = function (e) {
                 this.gridsterItem.state.item.cols = this.itemBackup[2];
-                this.element.style.width = this.gridsterItem.gridster.positionXToPixels(this.gridsterItem.state.item.cols)
-                    - this.gridsterItem.gridster.state.options.margin + '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');
                 return;
@@ -225,3 +224,3 @@ }
         }
-        this.element.style.width = this.elemPosition[2] + 'px';
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.elemPosition[2] + 'px');
     };
@@ -255,3 +254,2 @@ GridsterResizable.prototype.handleNW = function (e) {
 GridsterResizable.ctorParameters = function () { return [
-    { type: HTMLElement, },
     { type: gridsterItem_component_1.GridsterItemComponent, },
@@ -258,0 +256,0 @@ ]; };

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":"error","message":"Could not resolve type","line":30,"character":23,"context":{"typeName":"HTMLElement"}},{"__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":"error","message":"Could not resolve type","line":30,"character":23,"context":{"typeName":"HTMLElement"}},{"__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"}]}],"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"}]}}}}]

dist/gridsterScroll.service.js

@@ -7,2 +7,4 @@ "use strict";
 var gridsterElement;
+var scrollTop;
+var scrollLeft;
 var resizeEvent;
@@ -17,7 +19,11 @@ var resizeEventType;
     scrollSpeed = gridsterItem.gridster.state.options.scrollSpeed;
-    gridsterElement = gridsterItem.gridster.state.element;
+    gridsterElement = gridsterItem.gridster.el;
     resizeEvent = resize;
     resizeEventType = resizeEventScrollType;
-    var elemTopOffset = elemPosition[1] - gridsterElement.scrollTop;
-    var elemBottomOffset = gridsterElement.offsetHeight + gridsterElement.scrollTop - elemPosition[1] - elemPosition[3];
+    scrollTop = gridsterElement.scrollTop;
+    scrollLeft = gridsterElement.scrollLeft;
+    var offsetWidth = gridsterElement.offsetWidth;
+    var offsetHeight = gridsterElement.offsetHeight;
+    var elemTopOffset = elemPosition[1] - scrollTop;
+    var elemBottomOffset = offsetHeight + scrollTop - elemPosition[1] - elemPosition[3];
     if (lastMouse.pageY < e.pageY && elemBottomOffset < scrollSensitivity) {
@@ -30,3 +36,3 @@ cancelN();
     }
-    else if (lastMouse.pageY > e.pageY && gridsterElement.scrollTop > 0 && elemTopOffset < scrollSensitivity) {
+    else if (lastMouse.pageY > e.pageY && scrollTop > 0 && elemTopOffset < scrollSensitivity) {
         cancelS();
@@ -41,4 +47,4 @@ if ((resizeEvent && !resizeEventType.n) || intervalN) {
     }
-    var elemRightOffset = gridsterElement.offsetWidth + gridsterElement.scrollLeft - elemPosition[0] - elemPosition[2];
-    var elemLeftOffset = elemPosition[0] - gridsterElement.scrollLeft;
+    var elemRightOffset = offsetWidth + scrollLeft - elemPosition[0] - elemPosition[2];
+    var elemLeftOffset = elemPosition[0] - scrollLeft;
     if (lastMouse.pageX < e.pageX && elemRightOffset < scrollSensitivity) {
@@ -51,3 +57,3 @@ cancelW();
     }
-    else if (lastMouse.pageX > e.pageX && gridsterElement.scrollLeft > 0 && elemLeftOffset < scrollSensitivity) {
+    else if (lastMouse.pageX > e.pageX && scrollLeft > 0 && elemLeftOffset < scrollSensitivity) {
         cancelE();
@@ -66,3 +72,3 @@ if ((resizeEvent && !resizeEventType.w) || intervalW) {
     return setInterval(function () {
-        if (!gridsterElement || sign === -1 && gridsterElement.scrollTop - scrollSpeed < 0) {
+        if (!gridsterElement || sign === -1 && scrollTop - scrollSpeed < 0) {
             cancelVertical();
@@ -88,3 +94,3 @@ }
     return setInterval(function () {
-        if (!gridsterElement || sign === -1 && gridsterElement.scrollLeft - scrollSpeed < 0) {
+        if (!gridsterElement || sign === -1 && scrollLeft - scrollSpeed < 0) {
             cancelHorizontal();
@@ -91,0 +97,0 @@ }

dist/index.d.ts

@@ -1,4 +0,4 @@
-export * from './gridster.component';
-export * from './gridsterItem.component';
-export * from './gridsterConfig.interface';
-export * from './gridster.module';
+export { GridsterComponent } from './gridster.component';
+export { GridsterItemComponent } from './gridsterItem.component';
+export { GridsterConfig, GridType, Draggable } from './gridsterConfig.interface';
+export { GridsterModule } from './gridster.module';

dist/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./gridster.component"));
-__export(require("./gridsterItem.component"));
-__export(require("./gridster.module"));
+var gridster_component_1 = require("./gridster.component");
+exports.GridsterComponent = gridster_component_1.GridsterComponent;
+var gridsterItem_component_1 = require("./gridsterItem.component");
+exports.GridsterItemComponent = gridsterItem_component_1.GridsterItemComponent;
+var gridster_module_1 = require("./gridster.module");
+exports.GridsterModule = gridster_module_1.GridsterModule;
 //# sourceMappingURL=index.js.map

dist/index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./gridster.component"},{"from":"./gridsterItem.component"},{"from":"./gridsterConfig.interface"},{"from":"./gridster.module"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./gridster.component"},{"from":"./gridsterItem.component"},{"from":"./gridsterConfig.interface"},{"from":"./gridster.module"}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./gridster.component","export":["GridsterComponent"]},{"from":"./gridsterItem.component","export":["GridsterItemComponent"]},{"from":"./gridsterConfig.interface","export":["GridsterConfig","GridType","Draggable"]},{"from":"./gridster.module","export":["GridsterModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./gridster.component","export":["GridsterComponent"]},{"from":"./gridsterItem.component","export":["GridsterItemComponent"]},{"from":"./gridsterConfig.interface","export":["GridsterConfig","GridType","Draggable"]},{"from":"./gridster.module","export":["GridsterModule"]}]}]

package.json

 {
   "name": "angular-gridster2",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "license": "MIT",
@@ -17,4 +17,4 @@ "main": "dist/index.js",
     "e2e": "ng e2e",
-    "build-demo": "ng build --prod --aot=false --base-href=./",
-    "build-npm": "gulp inline-templates && ngc -p tsconfig.json"
+    "build-demo": "ng build --prod --base-href=./",
+    "build-npm": "gulp inline-templates && ngc -p tsconfig-lib.json"
   },
@@ -45,4 +45,3 @@ "homepage": "https://github.io/tiberiuzuld/angular-gridster2",
   "files": [
-    "dist/*",
-    "lib/*"
+    "dist/*"
   ],
@@ -69,3 +68,2 @@ "dependencies": {
     "codelyzer": "2.1.1",
-    "copyfiles": "1.2.0",
     "core-js": "2.4.1",
@@ -78,3 +76,3 @@ "gulp": "3.9.1",
     "jasmine-spec-reporter": "3.2.0",
-    "karma": "1.5.0",
+    "karma": "1.6.0",
     "karma-chrome-launcher": "2.0.0",
@@ -86,3 +84,3 @@ "karma-cli": "1.0.1",
     "protractor": "5.1.1",
-    "systemjs": "0.20.11",
+    "systemjs": "0.20.12",
     "rxjs": "5.3.0",
@@ -89,0 +87,0 @@ "ts-helpers": "1.1.2",

README.md

@@ -1,4 +0,8 @@
-
 angular-gridster2
 ==============
+[![npm version](https://badge.fury.io/js/angular-gridster2.svg)](https://badge.fury.io/js/angular-gridster2)
+[![dependencies Status](https://david-dm.org/tiberiuzuld/angular-gridster2/status.svg)](https://david-dm.org/tiberiuzuld/angular-gridster2)
+[![devDependencies Status](https://david-dm.org/tiberiuzuld/angular-gridster2/dev-status.svg)](https://david-dm.org/tiberiuzuld/angular-gridster2?type=dev)
+[![downloads](https://img.shields.io/npm/dt/angular-gridster2.svg)](https://www.npmjs.com/package/angular-gridster2)
+
 ### Angular2 implementation of angular-gridster [Demo](http://tiberiuzuld.github.io/angular-gridster2/angular)
@@ -5,0 +9,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

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

Improved metrics

Dev dependency count

39

decreased by-2.5%

Number of lines in readme file

184

increased by2.22%

Worsened metrics

Total package byte prevSize

158783

decreased by-29.9%

Number of package files

59

decreased by-27.16%

Lines of code

1479

decreased by-51.41%

No dependency changes