Allow columns to be center aligned

app/modules/main/directives/header/mdtColumnDirective.js

@@ -16,6 +16,7 @@
      *  Assignable values:
      *    - 'left'
      *    - 'right'
+     *    - 'center'
      *
      * @param {boolean=|object=} columnSort sort data and display a sorted state in the header. Clicking on a column
      *      which is already sorted will reverse the sort order and rotate the sort icon.

app/modules/main/helpers/ColumnAlignmentHelper.js

@@ -6,10 +6,14 @@
         service.getColumnAlignClass = getColumnAlignClass;
 
         function getColumnAlignClass(alignRule) {
-            if (alignRule === ColumnOptionProvider.ALIGN_RULE.ALIGN_RIGHT) {
-                return 'rightAlignedColumn';
-            } else {
-                return 'leftAlignedColumn';
+            switch (alignRule) {
+                case ColumnOptionProvider.ALIGN_RULE.ALIGN_RIGHT:
+                    return 'rightAlignedColumn';
+                case ColumnOptionProvider.ALIGN_RULE.ALIGN_CENTER:
+                    return 'centerAlignedColumn';
+                case ColumnOptionProvider.ALIGN_RULE.ALIGN_LEFT:
+                default:
+                    return 'leftAlignedColumn';
             }
         }
     }

app/modules/main/providers/ColumnOptionsProvider.js

@@ -10,7 +10,8 @@
     var ColumnOptionProvider = {
         ALIGN_RULE : {
             ALIGN_LEFT: 'left',
-            ALIGN_RIGHT: 'right'
+            ALIGN_RIGHT: 'right',
+            ALIGN_CENTER: 'center'
         }
     };
 

app/scss/main.scss

@@ -221,6 +221,10 @@ $grey: #757575;
         text-align: right;
     }
 
+    .centerAlignedColumn{
+      text-align: center;
+    }
+
     /* border separation color */
     tr th{
       border-bottom: solid 1px #DDDDDD;

demo/developmentArea.html

@@ -55,7 +55,7 @@
             >Carbs (g)</mdt-column>
             <mdt-column align-rule="right">Protein (g)</mdt-column>
             <mdt-column align-rule="right">Sodium (mg)</mdt-column>
-            <mdt-column align-rule="right">Calcium (%)</mdt-column>
+            <mdt-column align-rule="center">Calcium (%)</mdt-column>
             <mdt-column align-rule="right">Iron (%)</mdt-column>
         </mdt-header-row>
 

docs/js/docs-setup.js

@@ -19,7 +19,7 @@ NG_DOCS={
       "type": "directive",
       "moduleName": "mdtColumn",
       "shortDescription": "Representing a header column cell which should be placed inside mdt-header-row element directive.",
-      "keywords": "activate affect align align-rule alignrule api applied array assignable cell cells checkbox chips clicking column column-definition columndefinition columnfilter columnsort comparator compare compared content ctrl data default defines directive disables display displays don dropdown element excludefromcolumnselector false feature filter filtertype function gross header hover icon inside left mdt-header-row mdtcolumn mdttable ng-repeat object objects optional options order parameters passed placeholder placeholdertext price product products promise properties provided representing required resolves result return reverse rotate row select selected selection settings sort sorted sorting strings text tooltip transforms true type types user values valuesprovidercallback valuestransformercallback visually"
+      "keywords": "activate affect align align-rule alignrule api applied array assignable cell cells center checkbox chips clicking column column-definition columndefinition columnfilter columnsort comparator compare compared content ctrl data default defines directive disables display displays don dropdown element excludefromcolumnselector false feature filter filtertype function gross header hover icon inside left mdt-header-row mdtcolumn mdttable ng-repeat object objects optional options order parameters passed placeholder placeholdertext price product products promise properties provided representing required resolves result return reverse rotate row select selected selection settings sort sorted sorting strings text tooltip transforms true type types user values valuesprovidercallback valuestransformercallback visually"
     },
     {
       "section": "api",

docs/partials/api/mdtColumn.html

@@ -23,6 +23,7 @@ <h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table ta
 <ul>
 <li>&#39;left&#39;</li>
 <li>&#39;right&#39;</li>
+<li>&#39;center&#39;</li>
 </ul>
 </div></td></tr><tr><td>columnSort <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean=</a><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="mdtcolumn-page"><p>sort data and display a sorted state in the header. Clicking on a column
  which is already sorted will reverse the sort order and rotate the sort icon.</p>

test/unit/modules/directives/header/mdDataTableColumnDirectiveTest.js

@@ -8,6 +8,7 @@ xdescribe('mdtColumnDirective', function(){
     var DIRECTIVE_DEFAULT_CASE = 'DIRECTIVE_DEFAULT_CASE';
     var DIRECTIVE_LEFT_ALIGNED = 'DIRECTIVE_LEFT_ALIGNED';
     var DIRECTIVE_RIGHT_ALIGNED = 'DIRECTIVE_RIGHT_ALIGNED';
+    var DIRECTIVE_CENTER_ALIGNED = 'DIRECTIVE_CENTER_ALIGNED';
     var DIRECTIVE_MULTI_COLUMN = 'DIRECTIVE_MULTI_COLUMN';
 
     beforeEach(module('mdtTemplates'));
@@ -33,6 +34,7 @@ xdescribe('mdtColumnDirective', function(){
             expect(elementScope.clickHandler).toBeDefined();
             expect(elementScope.isColumnLeftAligned).toBeDefined();
             expect(elementScope.isColumnRightAligned).toBeDefined();
+            expect(elementScope.isColumnCenterAligned).toBeDefined();
             expect(elementScope.isSortingEnabled).toBeDefined();
             expect(elementScope.columnAlignClass).toBeDefined();
         });
@@ -171,6 +173,10 @@ xdescribe('mdtColumnDirective', function(){
         it('THEN `isColumnRightAligned` should return false', function(){
             expect(elementScope.isColumnRightAligned()).toBe(false);
         });
+
+        it('THEN `isColumnCenterAligned` should return false', function(){
+            expect(elementScope.isColumnCenterAligned()).toBe(false);
+        });
     });
 
     describe('WHEN directive is right aligned', function(){
@@ -185,6 +191,28 @@ xdescribe('mdtColumnDirective', function(){
         it('THEN `isColumnRightAligned` should return true', function(){
             expect(elementScope.isColumnRightAligned()).toBe(true);
         });
+
+        it('THEN `isColumnCenterAligned` should return false', function(){
+            expect(elementScope.isColumnCenterAligned()).toBe(false);
+        });
+    });
+
+    describe('WHEN directive is center aligned', function(){
+        beforeEach(function(){
+            compileDirective(DIRECTIVE_CENTER_ALIGNED);
+        });
+
+        it('THEN `isColumnLeftAligned` should return false', function(){
+            expect(elementScope.isColumnLeftAligned()).toBe(false);
+        });
+
+        it('THEN `isColumnRightAligned` should return false', function(){
+            expect(elementScope.isColumnRightAligned()).toBe(false);
+        });
+
+        it('THEN `isColumnCenterAligned` should return true', function(){
+            expect(elementScope.isColumnCenterAligned()).toBe(true);
+        });
     });
 
     function compileDirective(status){
@@ -209,6 +237,15 @@ xdescribe('mdtColumnDirective', function(){
                     '</mdt-table>')($scope);
                 break;
 
+            case DIRECTIVE_CENTER_ALIGNED:
+                mainElement = $compile('' +
+                    '<mdt-table>' +
+                    '   <mdt-header-row>' +
+                    '       <mdt-column align-rule="center">A Column</mdt-column>' +
+                    '   </mdt-header-row>' +
+                    '</mdt-table>')($scope);
+                break;
+
             case DIRECTIVE_MULTI_COLUMN:
                 mainElement = $compile('' +
                     '<mdt-table>' +