@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

package/lib/core/es6/grid/VirtualizedLayoutGrid.d.ts

@@ -5,13 +5,22 @@ import Reverter from "./util/Reverter.js";
 import ILayoutGrid from "./ILayoutGrid.js";
 import LayoutGrid from "./LayoutGrid.js";
 import ElementWrapper from "./components/ElementWrapper.js";
+import HScrollbar from "./components/HScrollbar.js";
 
 declare class VirtualizedLayoutGrid extends ElementWrapper {
 
-    constructor(opt_initializer?: Element|null, opt_className?: string);
+    constructor(options?: any);
 
     public getContextRow(rowIndex: number): any;
 
+    public selectColumn(colIndex: number, selected?: boolean): void;
+
+    public isSelectedColumn(colIndex: number): boolean;
+
+    public selectCell(colIndex: number, rowIndex: number, selected?: boolean): void;
+
+    public setCellBounds(colIndex: number, rowIndex: number, width: number, height: number): void;
+
 }
 
 export default VirtualizedLayoutGrid;

package/lib/core/es6/grid/VirtualizedLayoutGrid.js

@@ -6,23 +6,47 @@ import Reverter from "./util/Reverter.js";
 import ILayoutGrid from "./ILayoutGrid.js";
 import LayoutGrid from "./LayoutGrid.js";
 import ElementWrapper from "./components/ElementWrapper.js";
+import HScrollbar from "./components/HScrollbar.js";
 /* eslint-enable */
 
+
+/** @private
+* @function
+* @param {number} idx
+* @param {number} limit
+* @return {number}
+*/
+var _validateIndex = function(idx, limit) {
+	if(idx > limit) {
+		return limit;
+	} else if(idx < 0) {
+		return 0;
+	}
+	return idx;
+};
+
 /** @constructor
  * @ignore
- * @param {Element|null=} opt_initializer this can be either element id (string) or DOM element.
- * @param {string=} opt_className
+ * @param {Object=} options
  * @extends {ElementWrapper}
 */
-var VirtualizedLayoutGrid = function (opt_initializer, opt_className) {
+var VirtualizedLayoutGrid = function (options) {
 	var _t = this;
 	_t._onRestingPosition = _t._onRestingPosition.bind(_t);
+	_t._updateRowBounds = _t._updateRowBounds.bind(_t);
 
-	_t._element = opt_initializer ? opt_initializer : document.createElement("div");
-	_t._element.className = "tr-vlg";
-	if(opt_className) { _t.enableClass(/** @type{string} */(opt_className), true); }
+	_t._element = document.createElement("div");
+	_t._element.className = "tr-vlg section";
 
-	_t._grid = new LayoutGrid(null, {"owner": this});
+	if(!options) {
+		options = {};
+	}
+	if(options["horizontalScrollbar"]) {
+		_t._hscrollbar = options["horizontalScrollbar"];
+	}
+	options["owner"] = this;
+
+	_t._grid = new LayoutGrid(options);
 	_t._grid.setParent(_t._element);
 
 	_t._layoutY = new TrackLayout();
@@ -37,19 +61,18 @@ var VirtualizedLayoutGrid = function (opt_initializer, opt_className) {
 Ext.inherits(VirtualizedLayoutGrid, ElementWrapper);
 
 
-/** For virtualization in Y-Axis
+/**
  * @private
  * @type {number}
  */
 VirtualizedLayoutGrid.prototype._index = -1;
 
-/**
+/** Number of rows offsetting from the first section
  * @private
  * @type {number}
  */
-VirtualizedLayoutGrid.prototype._indexOffset = 0;
-
-/**
+VirtualizedLayoutGrid.prototype._rowOffset = 0;
+/** For virtualization in Y-Axis
  * @private
  * @type {number}
  */
@@ -71,9 +94,53 @@ VirtualizedLayoutGrid.prototype._layoutY;
 VirtualizedLayoutGrid.prototype._selectionList = null;
 
 /** @type {Reverter}
- * @private
- */
+* @private
+*/
 VirtualizedLayoutGrid.prototype._reverter = null;
+/** @type {Element}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBound = null;
+/** @type {Element}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cellBound = null;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cbLftIdx = 0;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cbRgtIdx = 0;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cbTopIdx = 0;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cbBtmIdx = 0;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBoundTimer = 0;
+/** @type {Element}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._boundLayer = null;
+/** @type {HScrollbar}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._hscrollbar = null;
+/** @type {string}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._session = "A";
+/** @type {Array<boolean>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._tempRowHeights = null;
 
 //#region ====== Override ElementWrapper ======//
 /** @override */
@@ -95,9 +162,14 @@ VirtualizedLayoutGrid.prototype.dispose = function () {
 	this.setRowCount(0); // Fire rowCountChanged
 	this.unlistenAll();
 
+	this._hscrollbar = null;
 	this._grid.dispose();
 	this._dispose();
 	this._reverter.dispose();
+	if(this._rowBoundTimer) {
+		clearTimeout(this._rowBoundTimer);
+		this._rowBoundTimer = 0;
+	}
 };
 /** @override */
 VirtualizedLayoutGrid.prototype.setWidth = function (px) {
@@ -180,16 +252,72 @@ VirtualizedLayoutGrid.prototype._setColumnWidth = function (indexX, val) {
 VirtualizedLayoutGrid.prototype._updateColumnLayout = function () {
 	this._grid._updateColumnLayout();
 };
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ */
+VirtualizedLayoutGrid.prototype._startBindingSession = function (enabled) {
+	this._isBinding = enabled;
+	if(!enabled){
+		// Clear old session
+		if(this._tempRowHeights){
+			var defaultRowHeight = this.getDefaultRowHeight();
+			var hasSession = true;
+			var removedIndices = [];
+
+			for(var key in this._tempRowHeights){
+				var index = +key;
+				var rowSession = this._layoutY.getLaneProperty(index, "sizeSession");
+				if(rowSession) {
+					if(rowSession != this._session){
+						this.setRowHeight(index, defaultRowHeight);
+						this._layoutY.setLaneProperty(index, "sizeSession", null);
+						removedIndices.push(index);
+					}
+				}
+			}
+			var removedCount = removedIndices.length;
+			for(var i = 0; i < removedCount; i++){
+				delete this._tempRowHeights[removedIndices[i]];
+			}
+			if(removedCount){
+				for(var remainingKey in this._tempRowHeights){
+					hasSession = remainingKey != null;
+					break;
+				}
+			}
+			if(!hasSession){
+				this._tempRowHeights = null;
+			}
 
+		}
+		this._session = this._session === "A" ? "B" : "A";
+	}
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+VirtualizedLayoutGrid.prototype._getTempRowHeights = function () {
+	return this._tempRowHeights;
+};
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.getRowHeight = function (index) {
 	return this._layoutY.getLaneSize(index);
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.setRowHeight = function (index, val) {
+	if(this._isBinding && val != this.getDefaultRowHeight()){
+		this._layoutY.setLaneProperty(index, "sizeSession", this._session);
+		if(!this._tempRowHeights){
+			this._tempRowHeights = [];
+		}
+		this._tempRowHeights[index] = true; // Store row index that set temporary row height
+	}
 	if(this._layoutY.setLaneSize(index, val)) {
 		this._grid.setRowHeight(index - this._firstIndex, val);
 		this._element.style.height = this._layoutY.getTrackSize() + "px";
+		this._requestUpdatingRowBounds();
 		return this._dispatchRowHeightChangedEvent(index, index + 1);
 	}
 	return false;
@@ -339,7 +467,11 @@ VirtualizedLayoutGrid.prototype.setRowCount = function (val, noBinding) {
 	var prevCount = this._layoutY.getLaneCount();
 	if(prevCount !== val){
 		this._layoutY.setLaneCount(val);
+		if(this._tempRowHeights){
+			this._tempRowHeights.length = val;
+		}
 		this._element.style.height = this._layoutY.getTrackSize() + "px";
+		this._requestUpdatingRowBounds();
 		//After rowCountChanged fires, virtualizer will update virtual row count if
 		//the range of virtual layout changed.
 		this._dispatch("rowCountChanged", { "rowCount": val, "prevCount": prevCount, "noBinding": noBinding });
@@ -481,24 +613,33 @@ VirtualizedLayoutGrid.prototype.isSelectedRow = function (at) {
 VirtualizedLayoutGrid.prototype.setSelectedRow = function (rowIndex, opt_selected) {
 	this._selectionList.setSelection(rowIndex, opt_selected);
 
-	var adjustedIndex = rowIndex - this._firstIndex;
-	this._grid.setSelectedRow(adjustedIndex, this._selectionList.getSelection(rowIndex));
+	var selected = this._selectionList.getSelection(rowIndex);
+	this._grid.setSelectedRow(rowIndex - this._firstIndex, selected);
+
+	if(selected) {
+		this._initRowBounds();
+	}
+	this._updateRowBounds();
 };
 
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.selectSingleRow = function (rowIndex) {
-	this.clearSelectedRows();
+	this._selectionList.clearAllSelections();
+	this._grid.clearSelectedRows();
 	this.setSelectedRow(rowIndex);
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.selectRowRange = function (rowIndex, length) {
 	this._selectionList.selectRange(rowIndex, length);
 	this._updateRowSelection();
+	this._initRowBounds();
+	this._updateRowBounds();
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.clearSelectedRows = function () {
 	var count = this._selectionList.clearAllSelections();
 	this._grid.clearSelectedRows();
+	this._updateRowBounds();
 	return count;
 };
 /** @inheritDoc */
@@ -698,8 +839,12 @@ VirtualizedLayoutGrid.prototype.getRowOffset = function(){
 	return this._rowOffset;
 };
 
-/** @inheritDoc */
-VirtualizedLayoutGrid.prototype.updateLayout = function () {};
+/** @public
+* @ignore
+*/
+VirtualizedLayoutGrid.prototype.updateLayout = function () {
+	this._grid.updateLayout();
+};
 
 /** {@link ILayoutGrid#stretchCell}
 * @inheritDoc */
@@ -722,8 +867,8 @@ VirtualizedLayoutGrid.prototype.unstretchCell = function (cellRef, rowIndex) {
 };
 /** {@link ILayoutGrid#unstretchAllCells}
 * @inheritDoc */
-VirtualizedLayoutGrid.prototype.unstretchAllCells = function (cellRef, rowIndex) {
-	return this._grid.unstretchAllCells();
+VirtualizedLayoutGrid.prototype.unstretchAllCells = function () {
+	this._grid.unstretchAllCells();
 };
 
 /** {@link ILayoutGrid#getStretchedCell}
@@ -803,6 +948,220 @@ VirtualizedLayoutGrid.prototype.setRowAttributes = function (rowIndex, func) {
 VirtualizedLayoutGrid.prototype.getContextRow = function (rowIndex) {
 	return this._grid.getContextRow(rowIndex - this._firstIndex);
 };
+
+/** @public
+* @param {number} colIndex
+* @param {boolean=} selected
+*/
+VirtualizedLayoutGrid.prototype.selectColumn = function (colIndex, selected) {
+	this._grid.selectColumn(colIndex, selected);
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+VirtualizedLayoutGrid.prototype.isSelectedColumn = function (colIndex) {
+	return this._grid.isSelectedColumn(colIndex);
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {boolean=} selected
+*/
+VirtualizedLayoutGrid.prototype.selectCell = function (colIndex, rowIndex, selected) {
+	this._grid.selectCell(colIndex, rowIndex - this._firstIndex, selected);
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} width
+* @param {number} height
+*/
+VirtualizedLayoutGrid.prototype.setCellBounds = function (colIndex, rowIndex, width, height) {
+	var cellBound = this._cellBound;
+	if(!cellBound) {
+		cellBound = this._cellBound = document.createElement("div");
+		cellBound.className = "selection-bound";
+	}
+	this._initBoundLayer();
+
+	// Validate inputs
+	var rgtIndex = colIndex + width; // Exclusive
+	var btmIndex = rowIndex + height; // Exclusive
+
+	var colCount = this.getColumnCount();
+	var rowCount = this._layoutY.getLaneCount();
+
+	this._cbLftIdx = _validateIndex(colIndex, colCount);
+	this._cbRgtIdx = _validateIndex(rgtIndex, colCount);
+	this._cbTopIdx = _validateIndex(rowIndex, rowCount);
+	this._cbBtmIdx = _validateIndex(btmIndex, rowCount);
+
+	this._updateCellBounds();
+};
+/** @public
+* @ignore
+* @return {!TrackLayout}
+*/
+VirtualizedLayoutGrid.prototype.getHorizontalLayout = function () {
+	return this._grid.getHorizontalLayout();
+};
+/** @public
+* @ignore
+* @param {number} lftIdx
+* @param {number} rgtIdx Inclusive index
+* @param {!Array.<number>} outPositions
+* @param {!Array.<boolean>} outNoBorders
+*/
+VirtualizedLayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositions, outNoBorders) {
+	this._grid.calculateColumnBounds(lftIdx, rgtIdx, outPositions, outNoBorders);
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._updateCellBounds = function () {
+	var cellBound = this._cellBound;
+	if(!cellBound) {
+		return;
+	}
+
+	var layoutX = this.getHorizontalLayout();
+	var layoutY = this._layoutY;
+	var lftIdx = this._cbLftIdx;
+	var rgtIdx = this._cbRgtIdx; // Exclusive
+	var topIdx = this._cbTopIdx;
+	var btmIdx = this._cbBtmIdx; // Exclusive
+	var lftPx, rgtPx, topPx, btmPx;
+	lftPx = rgtPx = topPx = btmPx = 0;
+	if(lftIdx < rgtIdx && topIdx < btmIdx) {
+		lftPx = layoutX.getLaneStart(lftIdx);
+		rgtPx = layoutX.getLaneEnd(rgtIdx - 1);
+		topPx = layoutY.getLaneStart(topIdx);
+		btmPx = layoutY.getLaneEnd(btmIdx - 1);
+	}
+
+	var width = rgtPx - lftPx;
+	var height = btmPx - topPx;
+	var noBorders = [false, false];
+	if(width > 0 && height > 0 && this._hscrollbar) {
+		var positions = [0, 0];
+		this.calculateColumnBounds(lftIdx, rgtIdx - 1, positions, noBorders);
+		lftPx = positions[0];
+		rgtPx = positions[1];
+		width = rgtPx - lftPx;
+	}
+
+	if(width > 0) {
+		cellBound.style.left = lftPx + "px";
+		cellBound.style.top = topPx + "px";
+		cellBound.style.width = width + "px";
+		cellBound.style.height = height + "px";
+
+		cellBound.classList.toggle("no-left-bound", noBorders[0]);
+		cellBound.classList.toggle("no-right-bound", noBorders[1]);
+
+		if(this._boundLayer) {
+			this._boundLayer.appendChild(cellBound);
+		}
+	} else {
+		var pn = cellBound.parentNode;
+		if(pn) {
+			pn.removeChild(cellBound);
+		}
+	}
+};
+/** @public
+* @ignore
+* @param {!Array.<number>} positions Left and right bound positions in pixel
+* @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+*/
+VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
+	this._grid.updateColumnBounds(positions, noBorders);
+	this._updateRowBounds();
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._initBoundLayer = function () {
+	var boundLayer = this._boundLayer;
+	if(!boundLayer) {
+		boundLayer = this._boundLayer = document.createElement("div");
+		boundLayer.className = "cover-layer";
+		this._element.appendChild(boundLayer);
+	}
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._initRowBounds = function () {
+	var rowBound = this._rowBound;
+	if(!rowBound) {
+		rowBound = this._rowBound = document.createElement("div");
+		rowBound.className = "selection-bound";
+	}
+	this._initBoundLayer();
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._requestUpdatingRowBounds = function () {
+	if(!this._rowBoundTimer) {
+		this._rowBoundTimer = setTimeout(this._updateRowBounds, 10);
+	}
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._updateRowBounds = function () {
+	this._rowBoundTimer = 0;
+	this._updateCellBounds();
+
+	var rowBound = this._rowBound;
+	if(!rowBound) {
+		return;
+	}
+	var topIdx = this.getFirstSelectedRow();
+	var btmIdx = -1; // Inclusive
+	var topPx = 0;
+	var btmPx = 0;
+	var rowCount = this._layoutY.getLaneCount();
+	if(topIdx >= rowCount) {
+		topIdx = rowCount - 1;
+	}
+	if(topIdx >= 0) {
+		btmIdx = this.getLastSelectedRow();
+		if(btmIdx >= rowCount) {
+			btmIdx = rowCount - 1;
+		}
+		topPx = this._layoutY.getLaneStart(topIdx);
+		btmPx = this._layoutY.getLaneEnd(btmIdx);
+	}
+
+	if(topPx >= btmPx) {
+		var pn = rowBound.parentNode;
+		if(pn) {
+			pn.removeChild(rowBound);
+		}
+	} else {
+		rowBound.style.top = topPx + "px";
+		rowBound.style.height = (btmPx - topPx) + "px";
+
+		var boundWidth = this._grid._getViewSize();
+		rowBound.style.width = boundWidth + "px";
+
+		var scrollLeft = 0;
+		var pinnedLftCount = 0;
+		var pinnedRgtCount = 0;
+		var endOfScroll = false;
+		if(this._hscrollbar) {
+			scrollLeft = this._hscrollbar.getScrollLeft();
+			pinnedLftCount = this._hscrollbar.getPinnedLeftColumnCount();
+			pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
+			endOfScroll = this._hscrollbar.isEndOfHorizontalScroll();
+		}
+		rowBound.classList.toggle("no-left-bound", !pinnedLftCount && scrollLeft > 0);
+		rowBound.classList.toggle("no-right-bound", !pinnedRgtCount && !endOfScroll);
+
+		if(this._boundLayer) {
+			this._boundLayer.appendChild(rowBound);
+		}
+	}
+};
 //#endregion public methods
 
 //#region ====== Private methods ======//
@@ -873,10 +1232,9 @@ VirtualizedLayoutGrid.prototype._onRestingPosition = function () {
 };
 /** @public
 * @ignore
-* @param {boolean} absolutePos if true, the right space element will be positioned absolutely
 */
-VirtualizedLayoutGrid.prototype._updateRightSpaceStyle = function(absolutePos) {
-	this._grid._updateRightSpaceStyle(absolutePos);
+VirtualizedLayoutGrid.prototype._updateRightSpaceStyle = function() {
+	this._grid._updateRightSpaceStyle();
 };
 /** @public
 * @ignore

package/lib/core/es6/grid/components/Cell.d.ts

@@ -10,11 +10,11 @@ declare class Cell extends ElementWrapper {
 
     public setTextContent(str: string): void;
 
-    public getTextElement(): Element;
+    public getTextElement(): Element|null;
 
     public hasElement(): boolean;
 
-    public getSection(): ILayoutGrid;
+    public getSection(): ILayoutGrid|null;
 
     public initialize(): Element;
 
@@ -34,11 +34,11 @@ declare class Cell extends ElementWrapper {
 
     public insertFloatingIcon(elem: Element, opt_order?: number): void;
 
-    public removeFloatingIcon(elemRef: Element|string): Element|null;
+    public removeFloatingIcon(elemRef: Element|string): Element|null|null;
 
     public insertFrontIcon(elem: Element, opt_order?: number): void;
 
-    public removeFrontIcon(elemRef: Element|string): Element|null;
+    public removeFrontIcon(elemRef: Element|string): Element|null|null;
 
     public updatePadding(): void;
 

package/lib/core/es6/grid/components/CellFloatingPanel.d.ts

@@ -9,7 +9,7 @@ declare class CellFloatingPanel extends ElementWrapper {
 
     public insertItem(item: Element, opt_order?: number): void;
 
-    public removeItem(elemRef?: (Element|string)): Element|null;
+    public removeItem(elemRef?: (Element|string)): Element|null|null;
 
     public clearItems(): void;
 

package/lib/core/es6/grid/components/CellSpans.d.ts

@@ -8,19 +8,19 @@ declare class CellSpans {
 
     public shiftColumn(from: number, amount: number): boolean;
 
-    public removeSpan(indexX: number, indexY: number): CellSpan;
+    public removeSpan(indexX: number, indexY: number): CellSpan|null;
 
-    public removeSpanByColIndex(at: number, opt_ary?: (CellSpan)[]): (CellSpan)[];
+    public removeSpanByColIndex(at: number, opt_ary?: (CellSpan)[]): (CellSpan)[]|null;
 
-    public removeSpanStartedFromRowIndex(at: number, opt_ary?: (CellSpan)[]): (CellSpan)[];
+    public removeSpanStartedFromRowIndex(at: number, opt_ary?: (CellSpan)[]): (CellSpan)[]|null;
 
-    public clearAllSpans(): (CellSpan)[];
+    public clearAllSpans(): (CellSpan)[]|null;
 
     public hasSpan(): boolean;
 
-    public getSpan(indexX: number, indexY: number): CellSpan|null;
+    public getSpan(indexX: number, indexY: number): CellSpan|null|null;
 
-    public getOccupyingSpan(indexX: number, indexY: number): CellSpan|null;
+    public getOccupyingSpan(indexX: number, indexY: number): CellSpan|null|null;
 
     public getAllSpans(): (CellSpan)[];
 
@@ -28,9 +28,9 @@ declare class CellSpans {
 
     public getRowSpan(indexX: number, indexY: number): number;
 
-    public setColSpan(indexX: number, indexY: number, spanVal: number): CellSpan;
+    public setColSpan(indexX: number, indexY: number, spanVal: number): CellSpan|null;
 
-    public setRowSpan(indexX: number, indexY: number, spanVal: number): CellSpan;
+    public setRowSpan(indexX: number, indexY: number, spanVal: number): CellSpan|null;
 
 }
 

package/lib/core/es6/grid/components/Column.d.ts

@@ -14,7 +14,7 @@ declare class Column extends ElementWrapper {
 
     public isActive(): boolean;
 
-    public getSection(): ILayoutGrid;
+    public getSection(): ILayoutGrid|null;
 
 }
 

package/lib/core/es6/grid/components/Column.js

@@ -178,10 +178,16 @@ Column.prototype.show = function (opt_shown) {
 */
 Column.prototype.setWidth = function (val) {
 	this._element.style.width = val + "px";
-	var magnitude = (val > 0 && val <= 60) ? 3 - Math.floor((val - 0.01) / 20) : 0;
-	if(magnitude < 0 || magnitude > 3) {
+	var magnitude = 0;
+	if(val > 0 && val <= 24){
 		magnitude = 3;
 	}
+	else if(val > 24 && val <= 40){
+		magnitude = 2;
+	}
+	else if(val > 40 && val < 60){
+		magnitude = 1;
+	}
 
 	var i;
 	var sc = this._sizeClasses;

package/lib/core/es6/grid/components/ElementWrapper.d.ts

@@ -7,11 +7,11 @@ declare class ElementWrapper extends EventDispatcher {
 
     constructor(opt_element?: Element);
 
-    public getContent(opt_allContent?: boolean): Element|Node|NodeList;
+    public getContent(opt_allContent?: boolean): Element|Node|NodeList|null;
 
-    public setContent(content: string|Element|ElementWrapper|any, opt_tooltip?: string): Element;
+    public setContent(content: string|Element|ElementWrapper|any, opt_tooltip?: string): Element|null;
 
-    public addContent(content: Element|Node|ElementWrapper): Element;
+    public addContent(content: Element|Node|ElementWrapper): Element|null;
 
     public removeContent(content: Element|Node|ElementWrapper): boolean;
 
@@ -23,11 +23,11 @@ declare class ElementWrapper extends EventDispatcher {
 
     public dispose(): void;
 
-    public getElement(): Element;
+    public getElement(): Element|null;
 
-    public getNextSibling(): Element|Node;
+    public getNextSibling(): Element|Node|null;
 
-    public getParent(): Element|Node;
+    public getParent(): Element|Node|null;
 
     public setParent(parent: ElementWrapper|Element|Node, opt_prepend?: boolean): void;
 

package/lib/core/es6/grid/components/HScrollbar.d.ts

@@ -8,6 +8,10 @@ declare class HScrollbar extends Scrollbar {
 
     public setScrollLeft(px: number): void;
 
+    public getPinnedLeftColumnCount(): number;
+
+    public getPinnedRightColumnCount(): number;
+
     public isEndOfHorizontalScroll(): boolean;
 
     public getContentWidth(): number;