angular-gridster2 - npm Package Compare versions

Comparing version 4.5.0 to 4.6.0

dist/gridster.component.js

@@ -163,4 +163,30 @@ "use strict";
         if (this.$options.outerMargin) {
-            this.curColWidth = (this.curWidth - this.$options.margin) / this.columns;
-            this.curRowHeight = (this.curHeight - this.$options.margin) / this.rows;
+            var marginWidth = -this.$options.margin;
+            if (this.$options.outerMarginLeft !== null) {
+                marginWidth += this.$options.outerMarginLeft;
+            }
+            else {
+                marginWidth += this.$options.margin;
+            }
+            if (this.$options.outerMarginRight !== null) {
+                marginWidth += this.$options.outerMarginRight;
+            }
+            else {
+                marginWidth += this.$options.margin;
+            }
+            this.curColWidth = (this.curWidth - marginWidth) / this.columns;
+            var marginHeight = -this.$options.margin;
+            if (this.$options.outerMarginTop !== null) {
+                marginHeight += this.$options.outerMarginTop;
+            }
+            else {
+                marginHeight += this.$options.margin;
+            }
+            if (this.$options.outerMarginBottom !== null) {
+                marginHeight += this.$options.outerMarginBottom;
+            }
+            else {
+                marginHeight += this.$options.margin;
+            }
+            this.curRowHeight = (this.curHeight - marginHeight) / this.rows;
         }
@@ -167,0 +193,0 @@ else {

dist/gridster.component.metadata.json

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

dist/gridsterConfig.constant.js

@@ -51,2 +51,10 @@ "use strict";
     // if margins will apply to the sides of the container
+    outerMarginTop: null,
+    // override outer margin for grid
+    outerMarginRight: null,
+    // override outer margin for grid
+    outerMarginBottom: null,
+    // override outer margin for grid
+    outerMarginLeft: null,
+    // override outer margin for grid
     scrollSensitivity: 10,
@@ -53,0 +61,0 @@ // margin of the dashboard where to start scrolling

dist/gridsterConfig.constant.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":false,"keepFixedWidthInMobile":false,"compactType":"none","mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"minItemArea":1,"maxItemArea":2500,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"destroyCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"itemRemovedCallback":{"__symbolic":"reference","name":"undefined"},"enableEmptyCellClick":false,"enableEmptyCellContextMenu":false,"enableEmptyCellDrop":false,"enableEmptyCellDrag":false,"emptyCellClickCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellContextMenuCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDropCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragMaxCols":50,"emptyCellDragMaxRows":50,"ignoreMarginInRow":false,"draggable":{"delayStart":0,"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"delayStart":0,"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false,"disablePushOnDrag":false,"disablePushOnResize":false,"pushDirections":{"north":true,"east":true,"south":true,"west":true},"pushResizeItems":false,"displayGrid":"onDrag&Resize","disableWindowResize":false,"disableWarnings":false,"scrollToNewItems":false}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":false,"keepFixedWidthInMobile":false,"compactType":"none","mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"minItemArea":1,"maxItemArea":2500,"margin":10,"outerMargin":true,"outerMarginTop":null,"outerMarginRight":null,"outerMarginBottom":null,"outerMarginLeft":null,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"destroyCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"itemRemovedCallback":{"__symbolic":"reference","name":"undefined"},"enableEmptyCellClick":false,"enableEmptyCellContextMenu":false,"enableEmptyCellDrop":false,"enableEmptyCellDrag":false,"emptyCellClickCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellContextMenuCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDropCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragMaxCols":50,"emptyCellDragMaxRows":50,"ignoreMarginInRow":false,"draggable":{"delayStart":0,"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"delayStart":0,"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false,"disablePushOnDrag":false,"disablePushOnResize":false,"pushDirections":{"north":true,"east":true,"south":true,"west":true},"pushResizeItems":false,"displayGrid":"onDrag&Resize","disableWindowResize":false,"disableWarnings":false,"scrollToNewItems":false}}}]

dist/gridsterConfig.interface.d.ts

@@ -49,3 +49,7 @@ import { GridsterItem } from './gridsterItem.interface';
     outerMargin?: boolean;
-    scrollSensitivity?: number;
+    outerMarginTop?: number | null;
+    outerMarginRight?: number | null;
+    outerMarginBottom?: number | null;
+    outerMarginLeft?: number | null;
+    scrollSensitivity?: number | null;
     scrollSpeed?: number;
@@ -52,0 +56,0 @@ initCallback?: (gridster: GridsterComponentInterface) => void;

dist/gridsterConfigS.interface.d.ts

@@ -25,2 +25,6 @@ import { compactTypes, displayGrids, gridTypes } from './gridsterConfig.interface';
     outerMargin: boolean;
+    outerMarginTop: number | null;
+    outerMarginRight: number | null;
+    outerMarginBottom: number | null;
+    outerMarginLeft: number | null;
     scrollSensitivity: number;
@@ -27,0 +31,0 @@ scrollSpeed: number;

dist/gridsterGrid.component.d.ts

@@ -12,3 +12,2 @@ import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
     width: number;
-    margin: number;
     columnsHeight: number;
@@ -19,2 +18,4 @@ rowsWidth: number;
     updateGrid(): void;
+    getMarginTop(isFirst: boolean): number;
+    getMarginLeft(isFirst: boolean): number;
 }

dist/gridsterGrid.component.js

@@ -35,15 +35,36 @@ "use strict";
         this.gridster.setGridDimensions();
-        this.margin = this.gridster.$options.margin;
-        this.height = this.gridster.curRowHeight - this.margin;
-        this.width = this.gridster.curColWidth - this.margin;
+        this.height = this.gridster.curRowHeight - this.gridster.$options.margin;
+        this.width = this.gridster.curColWidth - this.gridster.$options.margin;
         this.columns.length = Math.max(this.gridster.columns, Math.floor(this.gridster.curWidth / this.gridster.curColWidth)) || 0;
         this.rows.length = Math.max(this.gridster.rows, Math.floor(this.gridster.curHeight / this.gridster.curRowHeight)) || 0;
-        this.columnsHeight = this.gridster.curRowHeight * this.rows.length;
-        this.rowsWidth = this.gridster.curColWidth * this.columns.length;
+        this.columnsHeight = this.gridster.curRowHeight * this.rows.length + this.getMarginTop(true) - this.gridster.$options.margin;
+        this.rowsWidth = this.gridster.curColWidth * this.columns.length + this.getMarginLeft(true) - this.gridster.$options.margin;
         this.cdRef.markForCheck();
     };
+    GridsterGridComponent.prototype.getMarginTop = function (isFirst) {
+        if (isFirst && !this.gridster.$options.outerMargin) {
+            return 0;
+        }
+        else if (isFirst && this.gridster.$options.outerMargin && this.gridster.$options.outerMarginTop !== null) {
+            return this.gridster.$options.outerMarginTop;
+        }
+        else {
+            return this.gridster.$options.margin;
+        }
+    };
+    GridsterGridComponent.prototype.getMarginLeft = function (isFirst) {
+        if (isFirst && !this.gridster.$options.outerMargin) {
+            return 0;
+        }
+        else if (isFirst && this.gridster.$options.outerMargin && this.gridster.$options.outerMarginLeft !== null) {
+            return this.gridster.$options.outerMarginLeft;
+        }
+        else {
+            return this.gridster.$options.margin;
+        }
+    };
     GridsterGridComponent.decorators = [
         { type: core_1.Component, args: [{
                     selector: 'gridster-grid',
-                    template: "<div class=\"columns\" [style.height.px]=\"columnsHeight\">   <div class=\"column\" *ngFor=\"let column of columns; let isFirst = first;\" [style.min-width.px]=\"width\"        [style.margin-left.px]=\"isFirst && !gridster.$options.outerMargin ? 0 : margin\"></div> </div> <div class=\"rows\" [style.width.px]=\"rowsWidth\">   <div class=\"row\" *ngFor=\"let row of rows; let isFirst = first;\" [style.height.px]=\"height\"        [style.margin-top.px]=\"isFirst && !gridster.$options.outerMargin ? 0 : margin\"></div> </div>",
+                    template: "<div class=\"columns\" [style.height.px]=\"columnsHeight\">   <div class=\"column\" *ngFor=\"let column of columns; let isFirst = first;\" [style.min-width.px]=\"width\"        [style.margin-left.px]=\"getMarginLeft(isFirst)\"></div> </div> <div class=\"rows\" [style.width.px]=\"rowsWidth\">   <div class=\"row\" *ngFor=\"let row of rows; let isFirst = first;\" [style.height.px]=\"height\"        [style.margin-top.px]=\"getMarginTop(isFirst)\"></div> </div>",
                     styles: ["gridster-grid {   display: none;   position: absolute; }  gridster-grid .rows, gridster-grid .columns {   position: absolute; }  gridster-grid .columns {   display: flex;   flex-direction: row; }  gridster-grid .column, gridster-grid .row {   transition: .3s;   box-sizing: border-box; }  gridster-grid .column {   height: 100%;   border-left: 1px solid white;   border-right: 1px solid white; }  gridster-grid .row {   width: 100%;   border-top: 1px solid white;   border-bottom: 1px solid white; }"],
@@ -50,0 +71,0 @@ changeDetection: core_1.ChangeDetectionStrategy.OnPush,

dist/gridsterGrid.component.metadata.json

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

dist/gridsterItem.component.d.ts

@@ -22,3 +22,3 @@ import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
     height: number;
-    itemMargin: number;
+    itemMargin: string;
     drag: GridsterDraggable;
@@ -25,0 +25,0 @@ resize: GridsterResizable;

dist/gridsterItem.component.js

@@ -79,6 +79,29 @@ "use strict";
         if (this.gridster.$options.outerMargin) {
-            this.itemMargin = this.gridster.$options.margin;
+            if (this.gridster.$options.outerMarginTop !== null) {
+                this.itemMargin = this.gridster.$options.outerMarginTop + 'px ';
+            }
+            else {
+                this.itemMargin = this.gridster.$options.margin + 'px ';
+            }
+            if (this.gridster.$options.outerMarginRight !== null) {
+                this.itemMargin += this.gridster.$options.outerMarginRight + 'px ';
+            }
+            else {
+                this.itemMargin += this.gridster.$options.margin + 'px ';
+            }
+            if (this.gridster.$options.outerMarginBottom !== null) {
+                this.itemMargin += this.gridster.$options.outerMarginBottom + 'px ';
+            }
+            else {
+                this.itemMargin += this.gridster.$options.margin + 'px ';
+            }
+            if (this.gridster.$options.outerMarginLeft !== null) {
+                this.itemMargin += this.gridster.$options.outerMarginLeft + 'px';
+            }
+            else {
+                this.itemMargin += this.gridster.$options.margin + 'px';
+            }
         }
         else {
-            this.itemMargin = 0;
+            this.itemMargin = 0 + 'px';
         }
@@ -90,3 +113,3 @@ this.renderer.setStyle(this.el, 'display', this.notPlaced ? 'none' : 'block');
         this.renderer.setStyle(this.el, 'height', this.height + 'px');
-        this.renderer.setStyle(this.el, 'margin', this.itemMargin + 'px');
+        this.renderer.setStyle(this.el, 'margin', this.itemMargin);
         if (!this.init && this.width > 0 && this.height > 0) {
@@ -93,0 +116,0 @@ this.init = true;

dist/gridsterItemComponent.interface.d.ts

@@ -18,3 +18,3 @@ import { GridsterItem } from './gridsterItem.interface';
     height: number;
-    itemMargin: number;
+    itemMargin: string;
     drag: GridsterDraggable;
@@ -21,0 +21,0 @@ resize: GridsterResizable;

dist/gridsterPreview.component.js

@@ -22,14 +22,40 @@ "use strict";
         else {
-            var margin = 0;
+            var margin = void 0;
             var curRowHeight = this.gridster.curRowHeight;
             var curColWidth = this.gridster.curColWidth;
             if (this.gridster.$options.outerMargin) {
-                margin = this.gridster.$options.margin;
+                if (this.gridster.$options.outerMarginTop !== null) {
+                    margin = this.gridster.$options.outerMarginTop + 'px ';
+                }
+                else {
+                    margin = this.gridster.$options.margin + 'px ';
+                }
+                if (this.gridster.$options.outerMarginRight !== null) {
+                    margin += this.gridster.$options.outerMarginRight + 'px ';
+                }
+                else {
+                    margin += this.gridster.$options.margin + 'px ';
+                }
+                if (this.gridster.$options.outerMarginBottom !== null) {
+                    margin += this.gridster.$options.outerMarginBottom + 'px ';
+                }
+                else {
+                    margin += this.gridster.$options.margin + 'px ';
+                }
+                if (this.gridster.$options.outerMarginLeft !== null) {
+                    margin += this.gridster.$options.outerMarginLeft + 'px';
+                }
+                else {
+                    margin += this.gridster.$options.margin + 'px';
+                }
             }
+            else {
+                margin = 0 + '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');
+            this.renderer.setStyle(this.el, 'height', (this.gridster.movingItem.rows * curRowHeight - this.gridster.$options.margin) + 'px');
+            this.renderer.setStyle(this.el, 'width', (this.gridster.movingItem.cols * curColWidth - this.gridster.$options.margin) + 'px');
+            this.renderer.setStyle(this.el, 'top', (this.gridster.movingItem.y * curRowHeight) + 'px');
+            this.renderer.setStyle(this.el, 'left', (this.gridster.movingItem.x * curColWidth) + 'px');
+            this.renderer.setStyle(this.el, 'margin', margin);
         }
@@ -36,0 +62,0 @@ };

dist/gridsterPush.service.d.ts

@@ -18,3 +18,3 @@ import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
     destroy(): void;
-    pushItems(direction: string, disable?: boolean): void;
+    pushItems(direction: string, disable?: boolean): boolean;
     restoreTempItems(): void;
@@ -21,0 +21,0 @@ restoreItems(): void;

dist/gridsterPush.service.js

@@ -33,3 +33,4 @@ "use strict";
             this.pushedItemsOrder = [];
-            if (!this.push(this.gridsterItem, direction)) {
+            var pushed = this.push(this.gridsterItem, direction);
+            if (!pushed) {
                 this.restoreTempItems();
@@ -40,3 +41,7 @@ }
             this.pushedItemsTempPath = [];
+            return pushed;
         }
+        else {
+            return false;
+        }
     };
@@ -43,0 +48,0 @@ GridsterPush.prototype.restoreTempItems = function () {

dist/gridsterPushResize.service.d.ts

@@ -14,3 +14,3 @@ import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
     destroy(): void;
-    pushItems(direction: string): void;
+    pushItems(direction: string): boolean;
     restoreItems(): void;
@@ -17,0 +17,0 @@ setPushedItems(): void;

dist/gridsterPushResize.service.js

@@ -29,4 +29,7 @@ "use strict";
         if (this.gridster.$options.pushResizeItems) {
-            this.push(this.gridsterItem, direction);
+            return this.push(this.gridsterItem, direction);
         }
+        else {
+            return false;
+        }
     };
@@ -33,0 +36,0 @@ GridsterPushResize.prototype.restoreItems = function () {

package.json

 {
   "name": "angular-gridster2",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "license": "MIT",
@@ -77,3 +77,3 @@ "main": "dist/index.js",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.3",
+    "karma-coverage-istanbul-reporter": "1.4.1",
     "karma-jasmine": "1.1.1",
@@ -80,0 +80,0 @@ "karma-jasmine-html-reporter": "0.2.2",

README.md

@@ -114,2 +114,6 @@ angular-gridster2
   outerMargin: true,  // if margins will apply to the sides of the container
+  outerMarginTop: null, // override outer margin for grid
+  outerMarginRight: null, // override outer margin for grid
+  outerMarginBottom: null, // override outer margin for grid
+  outerMarginLeft: null, // override outer margin for grid
   scrollSensitivity: 10,  // margin of the dashboard where to start scrolling
@@ -190,10 +194,15 @@ scrollSpeed: 20,  // how much to scroll each mouse move when in the scrollSensitivity zone
 myMethod(gridsterItemComponent: GridsterItemComponent) {
-  const push = new GridsterPush(gridsterItemComponent); // init the service
-  gridsterItemComponent.$item.rows += 1; // move your item
-  push.pushItems(push.fromEast);  // push items from a direction
-  push.setPushedItems(); // save the items pushed
-  push.restoreItems(); // restore to initial state the pushed items
-  push.checkPushBack(); // check for items restore to original position
-  
-  // same for GridsterPushResize and GridsterSwap
+    const push = new GridsterPush(gridsterItemComponent); // init the service
+    gridsterItemComponent.$item.rows += 1; // move/resize your item
+    if (push.pushItems(push.fromNorth)) { // push items from a direction
+      push.checkPushBack(); // check for items can restore to original position
+      push.setPushedItems(); // save the items pushed
+      gridsterItemComponent.setSize(true);
+      gridsterItemComponent.checkItemChanges(gridsterItemComponent.$item, gridsterItemComponent.item);
+    } else {
+      gridsterItemComponent.$item.rows -= 1;
+      push.restoreItems(); // restore to initial state the pushed items
+    }
+    push.destroy(); // destroy push instance
+  // similar for GridsterPushResize and GridsterSwap
 }
@@ -200,0 +209,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

Total package byte prevSize

195075

increased by2.96%

Lines of code

3423

increased by3.66%

Number of lines in readme file

276

increased by3.37%

No dependency changes