liferay#1268 - Emit event when item per page change and mock the pagi…

…nation events

packages/clay-pagination-bar/src/ClayPaginationBar.js

@@ -1,7 +1,7 @@
 import 'clay-dropdown';
 import 'clay-pagination';
 import {Config} from 'metal-state';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 
@@ -11,7 +11,39 @@ import templates from './ClayPaginationBar.soy.js';
  * Metal ClayPaginationBar component.
  * @extends Component
  */
-class ClayPaginationBar extends Component {}
+class ClayPaginationBar extends ClayComponent {
+	/**
+	 * Continues the propagation of the page clicked event
+	 * @param {!Event} event
+	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handlePageClick(event) {
+		return !this.emit({
+			data: {
+				page: event.data.page,
+			},
+			name: 'pageClicked',
+			originalEvent: event,
+		});
+	}
+
+	/**
+	 * Continues the propagation of the item per page clicked event
+	 * @param {!Event} event
+	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handleItemsPerPageClicked(event) {
+		return !this.emit({
+			data: {
+				item: event.data.item,
+			},
+			name: 'itemsPerPageClicked',
+			originalEvent: event,
+		});
+	}
+}
 
 /**
  * State definition.

packages/clay-pagination-bar/src/ClayPaginationBar.soy

@@ -4,10 +4,13 @@
  * This renders the component's whole content.
  */
 {template .render}
+	{@param? _handleItemsPerPageClicked: any}
+	{@param? _handlePageClick: any}
 	{@param currentPage: int}
 	{@param entries: list<[
 		href: string,
-		label: int
+		label: int,
+		itemsPerPage: int
 	]>}
 	{@param selectedEntry: int}
 	{@param spritemap: string}
@@ -41,6 +44,7 @@
 
         {call ClayDropdown.render}
             {param elementClasses: 'pagination-items-per-page' /}
+			{param events: ['itemClicked': $_handleItemsPerPageClicked] /}
             {param items: $entries /}
             {param label: $selectedEntryLabel /}
             {param spritemap: $spritemap /}
@@ -52,13 +56,14 @@
 			{let $lastShowingEntry: $currentPage * $selectedEntryItem.label < $totalEntries ? $currentPage * $selectedEntryItem.label : $totalEntries /}
 
 			{msg desc="Says which range of pages of the total are being showed"}
-				showing-{$firstShowingEntry}-to-{$lastShowingEntry}of-{$totalEntries}-entries
+				showing-{$firstShowingEntry}-to-{$lastShowingEntry}-of-{$totalEntries}-entries
 			{/msg}
 		</div>
 
 		{call ClayPagination.render}
 			{param baseHref: $baseHref /}
 			{param currentPage: $currentPage /}
+			{param events: ['pageClicked': $_handlePageClick] /}
 			{param spritemap: $spritemap /}
 			{param totalPages: ceiling($totalEntries / $selectedEntryItem.label) /}
 		{/call}