fix(panel): allow numbers in offset methods

Allows for numbers to be pass to the `withOffsetX` and `withOffsetY` methods, assuming that the units are pixels.

Fixes #9604.

Author: crisbeto

src/components/panel/panel.js

@@ -576,7 +576,7 @@ angular
  * @description
  * Sets the value of the offset in the x-direction.
  *
- * @param {string} offsetX
+ * @param {string|number} offsetX
  * @returns {!MdPanelPosition}
  */
 
@@ -586,7 +586,7 @@ angular
  * @description
  * Sets the value of the offset in the y-direction.
  *
- * @param {string} offsetY
+ * @param {string|number} offsetY
  * @returns {!MdPanelPosition}
  */
 
@@ -2003,23 +2003,23 @@ MdPanelPosition.prototype._validateXPosition = function(xPosition) {
 /**
  * Sets the value of the offset in the x-direction. This will add to any
  * previously set offsets.
- * @param {string} offsetX
+ * @param {string|number} offsetX
  * @returns {!MdPanelPosition}
  */
 MdPanelPosition.prototype.withOffsetX = function(offsetX) {
-  this._translateX.push(offsetX);
+  this._translateX.push(addUnits(offsetX));
   return this;
 };
 
 
 /**
  * Sets the value of the offset in the y-direction. This will add to any
  * previously set offsets.
- * @param {string} offsetY
+ * @param {string|number} offsetY
  * @returns {!MdPanelPosition}
  */
 MdPanelPosition.prototype.withOffsetY = function(offsetY) {
-  this._translateY.push(offsetY);
+  this._translateY.push(addUnits(offsetY));
   return this;
 };
 
@@ -2553,3 +2553,12 @@ function getElement(el) {
       document.querySelector(el) : el;
   return angular.element(queryResult);
 }
+
+/**
+ * Adds units to a number value.
+ * @param {number|string} value
+ * @return {string}
+ */
+function addUnits(value) {
+  return angular.isNumber(value) ? value + 'px' : value;
+}

src/components/panel/panel.spec.js

@@ -1394,6 +1394,26 @@ describe('$mdPanel', function() {
             .toBeApproximately(middleOfPage + parseInt(offset));
       });
 
+      it('horizontally with an integer value', function() {
+        var left = '50px';
+        var offset = -15;
+
+        var position = mdPanelPosition
+            .absolute()
+            .left(left)
+            .withOffsetX(offset);
+
+        config['position'] = position;
+
+        openPanel(config);
+
+        var panelRect = document.querySelector(PANEL_EL)
+            .getBoundingClientRect();
+
+        expect(panelRect.left)
+            .toBeApproximately(parseInt(left) + offset);
+      });
+
       it('vertically', function() {
         var top = '50px';
         var offset = '-15px';
@@ -1435,6 +1455,26 @@ describe('$mdPanel', function() {
         expect(middleOfPanel)
             .toBeApproximately(middleOfPage + parseInt(offset));
       });
+
+      it('vertically with an integer value', function() {
+        var top = '50px';
+        var offset = -15;
+
+        var position = mdPanelPosition
+            .absolute()
+            .top(top)
+            .withOffsetY(offset);
+
+        config['position'] = position;
+
+        openPanel(config);
+
+        var panelRect = document.querySelector(PANEL_EL)
+            .getBoundingClientRect();
+
+        expect(panelRect.top)
+            .toBeApproximately(parseInt(top) + offset);
+      });
     });
 
     describe('should absolutely position the panel at', function() {