Pagination style guide

.gitignore

@@ -7,4 +7,6 @@ app/app.css
 
 # folders
 bower_components
-node_modules
+node_modules
+
+.idea

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Change Log
 
+#### Version 1.0.2
+
 #### Version 0.10.10
 ###### December 14, 2016
 
@@ -126,4 +128,4 @@
 
 * Changes to the pagination label will now take effect without needing to reload the page.
 
-* Pagination and reorder callbacks are now deferred until the next digest cycle using Angular Material's `$mdUtil.nextTick` function to allow 2-way data binding to complete and to avoid confusion. This means your local scope variables will have the same value as the parameters passed to the `md-on-reorder` and `md-on-paginate` callbacks.
+* Pagination and reorder callbacks are now deferred until the next digest cycle using Angular Material's `$mdUtil.nextTick` function to allow 2-way data binding to complete and to avoid confusion. This means your local scope variables will have the same value as the parameters passed to the `md-on-reorder` and `md-on-paginate` callbacks.

Gruntfile.js

@@ -187,7 +187,7 @@ module.exports = function (grunt) {
   });
 
   grunt.registerTask('build', [
-    'jshint:build',
+
     'less:build',
     'autoprefixer:build',
     'cssmin:build',

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-material-data-table",
-  "version": "0.10.10",
+  "version": "1.0.2",
   "description": "Material Design data table.",
   "main": [
     "dist/md-data-table.js",

dist/md-data-table.css

@@ -2,12 +2,10 @@ md-backdrop.md-edit-dialog-backdrop {
   z-index: 80;
 }
 md-edit-dialog {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+      flex-direction: column;
   position: fixed;
   z-index: 81;
   background-color: #f9f9f9;
@@ -50,57 +48,46 @@ md-edit-dialog > .md-actions .md-button + .md-button {
   margin-left: 8px;
 }
 .md-table-pagination {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-  -webkit-flex-wrap: wrap-reverse;
-      -ms-flex-wrap: wrap-reverse;
-          flex-wrap: wrap-reverse;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+  -ms-flex-wrap: wrap-reverse;
+      flex-wrap: wrap-reverse;
   box-sizing: border-box;
   padding: 0 24px;
   font-size: 12px;
   color: rgba(0, 0, 0, 0.54);
   border-top: 1px rgba(0, 0, 0, 0.12) solid;
 }
 .md-table-pagination md-select {
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
   min-width: 64px;
 }
 .md-table-pagination md-select:not([disabled]):focus .md-select-value {
   color: rgba(0, 0, 0, 0.54);
 }
 .md-table-pagination md-select .md-select-value {
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
 }
 .md-table-pagination md-select .md-select-value span.md-select-icon {
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+      justify-content: center;
   text-align: center;
   margin-right: -6px !important;
 }
 .md-table-pagination md-select .md-select-value span.md-select-icon:after {
   top: initial;
-  -webkit-transform: scaleY(0.5) scaleX(1);
-          transform: scaleY(0.5) scaleX(1);
 }
 .md-table-pagination > * {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
   height: 56px;
 }
 .md-table-pagination > .buttons:not(:first-child),
@@ -128,22 +115,18 @@ md-select.md-table-select > .md-select-value {
 md-select.md-table-select > .md-select-value > span {
   display: block;
   height: auto;
-  -webkit-transform: none !important;
-          transform: none !important;
+  transform: none !important;
 }
 md-select.md-table-select > .md-select-value > span > .md-text {
   display: inherit;
   height: inherit;
-  -webkit-transform: inherit;
-          transform: inherit;
+  transform: inherit;
 }
 md-select.md-table-select > .md-select-value > span.md-select-icon {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
   height: 24px;
   margin: 0;
 }
@@ -271,16 +254,13 @@ table.md-table th.md-column md-icon {
 table.md-table th.md-column md-icon.md-sort-icon {
   color: rgba(0, 0, 0, 0.26);
   opacity: 0;
-  transition: -webkit-transform 0.25s, opacity 0.25s;
   transition: transform 0.25s, opacity 0.25s;
 }
 table.md-table th.md-column md-icon.md-sort-icon.md-asc {
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
+  transform: rotate(0deg);
 }
 table.md-table th.md-column md-icon.md-sort-icon.md-desc {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 table.md-table th.md-column md-icon:not(:first-child) {
   margin-left: 8px;
@@ -368,27 +348,23 @@ table.md-table td.md-cell {
   border-top: 1px rgba(0, 0, 0, 0.12) solid;
 }
 table.md-table td.md-cell.md-numeric md-select {
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
 }
 table.md-table td.md-cell.md-numeric md-select .md-select-value {
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
 }
 table.md-table td.md-cell.md-placeholder {
   color: rgba(0, 0, 0, 0.26);
 }
 table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon {
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
   color: rgba(0, 0, 0, 0.54);
   width: 18px;
   text-align: right;
 }
 table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon:after {
-  -webkit-transform: scaleY(0.4) scaleX(0.8);
-          transform: scaleY(0.4) scaleX(0.8);
+  transform: scaleY(0.4) scaleX(0.8);
 }

dist/md-data-table.js

@@ -2,55 +2,60 @@
  * Angular Material Data Table
  * https://github.com/daniel-nagy/md-data-table
  * @license MIT
- * v0.10.9
+ * v1.0.2
  */
 (function (window, angular, undefined) {
 'use strict';
 
 angular.module('md.table.templates', ['md-table-pagination.html', 'md-table-progress.html', 'arrow-up.svg', 'navigate-before.svg', 'navigate-first.svg', 'navigate-last.svg', 'navigate-next.svg']);
 
-angular.module('md-table-pagination.html', []).run(['$templateCache', function($templateCache) {
+angular.module('md-table-pagination.html', []).run(['$templateCache', function ($templateCache) {
   $templateCache.put('md-table-pagination.html',
-    '<div class="page-select" ng-if="$pagination.showPageSelect()">\n' +
-    '  <div class="label">{{$pagination.label.page}}</div>\n' +
+    '<div class="page-select syn-pagination__select" ng-if="$pagination.showPageSelect()">\n' +
+    '  <div class="label syn-pagination__select--label">{{$pagination.label.page}}</div>\n' +
     '\n' +
-    '  <md-select virtual-page-select total="{{$pagination.pages()}}" class="md-table-select" ng-model="$pagination.page" md-container-class="md-pagination-select" ng-change="$pagination.onPaginationChange()" ng-disabled="$pagination.disabled" aria-label="Page">\n' +
-    '    <md-content>\n' +
-    '      <md-option ng-repeat="page in $pageSelect.pages" ng-value="page">{{page}}</md-option>\n' +
-    '    </md-content>\n' +
-    '  </md-select>\n' +
+    '  <md-input-container md-no-float class="syn-pagination__select__select-input syn-input">\n' +
+    '    <md-select virtual-page-select total="{{$pagination.pages()}}" class="md-table-select syn-input__select" ng-model="$pagination.page" md-container-class="md-pagination-select" ng-change="$pagination.onPaginationChange()" ng-disabled="$pagination.disabled" aria-label="Page">\n' +
+    '      <md-content>\n' +
+    '        <md-option ng-repeat="page in $pageSelect.pages" ng-value="page">{{page}}</md-option>\n' +
+    '      </md-content>\n' +
+    '    </md-select>\n' +
+    '  </md-input-container>\n' +
     '</div>\n' +
     '\n' +
-    '<div class="limit-select" ng-if="$pagination.limitOptions">\n' +
-    '  <div class="label">{{$pagination.label.rowsPerPage}}</div>\n' +
+    '<div class="limit-select syn-pagination__select" ng-if="$pagination.limitOptions">\n' +
+    '  <div class="label syn-pagination__select--label">{{$pagination.label.rowsPerPage}}</div>\n' +
     '\n' +
-    '  <md-select class="md-table-select" ng-model="$pagination.limit" md-container-class="md-pagination-select" ng-disabled="$pagination.disabled" aria-label="Rows" placeholder="{{ $pagination.limitOptions[0] }}">\n' +
-    '    <md-option ng-repeat="option in $pagination.limitOptions" ng-value="option.value ? $pagination.eval(option.value) : option">{{::option.label ? option.label : option}}</md-option>\n' +
-    '  </md-select>\n' +
+    '  <md-input-container md-no-float class="syn-pagination__select__select-input syn-input">\n' +
+    '    <md-select class="md-table-select syn-input__select" ng-model="$pagination.limit" md-container-class="md-pagination-select" ng-disabled="$pagination.disabled" aria-label="Rows" placeholder="{{ $pagination.limitOptions[0] }}">\n' +
+    '      <md-option ng-repeat="option in $pagination.limitOptions" ng-value="option.value ? $pagination.eval(option.value) : option">{{::option.label ? option.label : option}}</md-option>\n' +
+    '    </md-select>\n' +
+    '  </md-input-container>\n' +
     '</div>\n' +
     '\n' +
-    '<div class="buttons">\n' +
-    '  <div class="label">{{$pagination.min()}} - {{$pagination.max()}} {{$pagination.label.of}} {{$pagination.total}}</div>\n' +
+    '<div class="buttons syn-pagination__buttons">\n' +
+    '  <div class="label syn-pagination__buttons--label">{{$pagination.min()}} - {{$pagination.max()}} {{$pagination.label.of}} {{$pagination.total}}</div>\n' +
     '\n' +
-    '  <md-button class="md-icon-button" type="button" ng-if="$pagination.showBoundaryLinks()" ng-click="$pagination.first()" ng-disabled="$pagination.disabled || !$pagination.hasPrevious()" aria-label="First">\n' +
-    '    <md-icon md-svg-icon="navigate-first.svg"></md-icon>\n' +
+    '  <md-button md-no-ink class="md-icon-button syn-pagination__buttons--button" type="button" ng-if="$pagination.showBoundaryLinks()" ng-click="$pagination.first()" ng-disabled="$pagination.disabled || !$pagination.hasPrevious()" aria-label="First">\n' +
+    '    <md-icon><i class="fa-regular fa-arrow-left-to-line"></i></md-icon>\n' +
     '  </md-button>\n' +
     '\n' +
-    '  <md-button class="md-icon-button" type="button" ng-click="$pagination.previous()" ng-disabled="$pagination.disabled || !$pagination.hasPrevious()" aria-label="Previous">\n' +
-    '    <md-icon md-svg-icon="navigate-before.svg"></md-icon>\n' +
+    '  <md-button md-no-ink class="md-icon-button syn-pagination__buttons--button" type="button" ng-click="$pagination.previous()" ng-disabled="$pagination.disabled || !$pagination.hasPrevious()" aria-label="Previous">\n' +
+    '    <md-icon><i class="fa-regular fa-angle-left"></i></md-icon>\n' +
     '  </md-button>\n' +
     '\n' +
-    '  <md-button class="md-icon-button" type="button" ng-click="$pagination.next()" ng-disabled="$pagination.disabled || !$pagination.hasNext()" aria-label="Next">\n' +
-    '    <md-icon md-svg-icon="navigate-next.svg"></md-icon>\n' +
+    '  <md-button md-no-ink class="md-icon-button syn-pagination__buttons--button" type="button" ng-click="$pagination.next()" ng-disabled="$pagination.disabled || !$pagination.hasNext()" aria-label="Next">\n' +
+    '    <md-icon><i class="fa-regular fa-angle-right"></i></md-icon>\n' +
     '  </md-button>\n' +
     '\n' +
-    '  <md-button class="md-icon-button" type="button" ng-if="$pagination.showBoundaryLinks()" ng-click="$pagination.last()" ng-disabled="$pagination.disabled || !$pagination.hasNext()" aria-label="Last">\n' +
-    '    <md-icon md-svg-icon="navigate-last.svg"></md-icon>\n' +
+    '  <md-button md-no-ink class="md-icon-button syn-pagination__buttons--button" type="button" ng-if="$pagination.showBoundaryLinks()" ng-click="$pagination.last()" ng-disabled="$pagination.disabled || !$pagination.hasNext()" aria-label="Last">\n' +
+    '    <md-icon><i class="fa-regular fa-arrow-right-to-line"></i></md-icon>\n' +
     '  </md-button>\n' +
-    '</div>');
+    '</div>\n' +
+    '');
 }]);
 
-angular.module('md-table-progress.html', []).run(['$templateCache', function($templateCache) {
+angular.module('md-table-progress.html', []).run(['$templateCache', function ($templateCache) {
   $templateCache.put('md-table-progress.html',
     '<tr>\n' +
     '  <th colspan="{{columnCount()}}">\n' +
@@ -59,27 +64,27 @@ angular.module('md-table-progress.html', []).run(['$templateCache', function($te
     '</tr>');
 }]);
 
-angular.module('arrow-up.svg', []).run(['$templateCache', function($templateCache) {
+angular.module('arrow-up.svg', []).run(['$templateCache', function ($templateCache) {
   $templateCache.put('arrow-up.svg',
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>');
 }]);
 
-angular.module('navigate-before.svg', []).run(['$templateCache', function($templateCache) {
+angular.module('navigate-before.svg', []).run(['$templateCache', function ($templateCache) {
   $templateCache.put('navigate-before.svg',
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
 }]);
 
-angular.module('navigate-first.svg', []).run(['$templateCache', function($templateCache) {
+angular.module('navigate-first.svg', []).run(['$templateCache', function ($templateCache) {
   $templateCache.put('navigate-first.svg',
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 6 v12 h2 v-12 h-2z M17.41 7.41L16 6l-6 6 6 6 1.41-1.41L12.83 12z"/></svg>');
 }]);
 
-angular.module('navigate-last.svg', []).run(['$templateCache', function($templateCache) {
+angular.module('navigate-last.svg', []).run(['$templateCache', function ($templateCache) {
   $templateCache.put('navigate-last.svg',
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 6 v12 h2 v-12 h-2z M8 6L6.59 7.41 11.17 12l-4.58 4.59L8 18l6-6z"/></svg>');
 }]);
 
-angular.module('navigate-next.svg', []).run(['$templateCache', function($templateCache) {
+angular.module('navigate-next.svg', []).run(['$templateCache', function ($templateCache) {
   $templateCache.put('navigate-next.svg',
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
 }]);
@@ -191,7 +196,7 @@ function mdColumn($compile, $mdUtil) {
 
       $compile(sortIcon.addClass('md-sort-icon').attr('ng-class', 'getDirection()'))(scope);
 
-      if(element.hasClass('md-numeric')) {
+      if(element.hasClass('md-numeric') || element.hasClass('nn-col')) {
         element.prepend(sortIcon);
       } else {
         element.append(sortIcon);
@@ -783,6 +788,7 @@ function mdHead($compile) {
     };
 
     scope.toggleAll = function () {
+      scope.$emit('mdTableOnHeaderSelect', scope.allSelected());
       return scope.allSelected() ? scope.unSelectAll() : scope.selectAll();
     };