adding a page size dropdown to the paging control

Author: kedigby

.gitignore

@@ -0,0 +1,2 @@
+bower_components/
+node_modules/

bower.json

@@ -21,7 +21,8 @@
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
     "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.1",
     "paper-input": "PolymerElements/paper-input#^2.0.2",
-    "iron-icons": "PolymerElements/iron-icons#^2.0.1"
+    "iron-icons": "PolymerElements/iron-icons#^2.0.1",
+    "juicy-select": "^1.1.3"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",

pagination-input.html

@@ -4,6 +4,7 @@
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../juicy-select/juicy-select.html">
 
 <!--
   `pagination-input` is a simple pagination control with an paper-input.
@@ -66,6 +67,8 @@
       }
     </style>
 
+    <juicy-select value="{{pageSize}}" options="[[pageSizes]]" text-property="Name" value-property="Value" selected-property="Selected">
+    </juicy-select>
     <paper-icon-button icon="icons:first-page" on-click="_onFirstPageBtnClick" disabled$="[[_shouldDisablePreviousPageBtns(currentPage)]]"></paper-icon-button>
     <paper-icon-button icon="icons:chevron-left" on-click="_onPreviousPageBtnClick" disabled$="[[_shouldDisablePreviousPageBtns(currentPage)]]"></paper-icon-button>
     <paper-input id="input" type="number" on-change="_onInputValueChange" no-label-float="true" min="1" max$="[[pageCount]]" auto-validate allowed-pattern="[0-9]">
@@ -93,17 +96,31 @@
           /**
            * Number of pages
            */
-          pageCount: Number
+          pageCount: Number,
+          pageSize: {
+            type: Number,
+            notify: true
+          },
+          pageSizes: {
+            type: Array
+          },
         }
       }
 
       static get observers() {
         return [
           "_onPageCountChange(pageCount)",
-          "_onCurrentPageChange(currentPage)"
+          "_onCurrentPageChange(currentPage)", 
+          "_onSizeChange(pageSize)",
         ];
       }
 
+      _onSizeChange(e) {
+        if (e) { 
+          this.dispatchEvent(new CustomEvent('sizeChange', { detail: { size: e } }));
+        }
+      }
+
       _shouldDisablePreviousPageBtns(currentPage) {
         return currentPage === 1;
       }