feat(stark-ui): implement Pagination component. Integrate pagination …

…in Table component

ISSUES CLOSED: #539, #514

packages/stark-ui/src/modules.ts

@@ -1,15 +1,15 @@
 export * from "./modules/action-bar";
 export * from "./modules/app-logo";
 export * from "./modules/app-logout";
+export * from "./modules/app-sidebar";
 export * from "./modules/breadcrumb";
 export * from "./modules/collapsible";
-export * from "./modules/app-sidebar";
-export * from "./modules/keyboard-directives";
 export * from "./modules/date-picker";
 export * from "./modules/date-range-picker";
 export * from "./modules/dropdown";
 export * from "./modules/keyboard-directives";
 export * from "./modules/language-selector";
+export * from "./modules/pagination";
 export * from "./modules/pretty-print";
 export * from "./modules/session-ui";
 export * from "./modules/slider";

packages/stark-ui/src/modules/pagination.ts

@@ -0,0 +1,2 @@
+export * from "./pagination/pagination.module";
+export * from "./pagination/components";

packages/stark-ui/src/modules/pagination/components.ts

@@ -0,0 +1,3 @@
+export * from "./components/pagination.component";
+export * from "./components/paginate-event.intf";
+export * from "./components/pagination-config.intf";

packages/stark-ui/src/modules/pagination/components/_pagination-theme.scss

@@ -0,0 +1,23 @@
+/********** PAGINATION THEME **********/
+/* stark: src/modules/pagination/components/_pagination-theme.scss */
+
+@media #{$tablet-query} {
+  .stark-pagination > div {
+    .pagination-enter-page {
+      & input {
+        border: solid 1px $divider-color;
+      }
+    }
+
+    .page-numbers {
+      &.active {
+        a {
+          color: mat-color(map-get($base-theme, primary-palette));
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+/* END stark: src/modules/pagination/components/_pagination-theme.scss */

packages/stark-ui/src/modules/pagination/components/_pagination.component.scss

@@ -0,0 +1,68 @@
+/********** PAGINATION **********/
+/* stark: src/modules/pagination/components/_pagination.component.scss */
+.stark-pagination > div {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  ul {
+    align-items: center;
+    display: flex;
+    list-style: none;
+    margin: 0;
+    margin-right: 18px;
+    padding: 0;
+  }
+  .pagination-enter-page {
+    display: none;
+  }
+
+  .pagination-items-per-page {
+    .stark-dropdown .mat-form-field {
+      width: 50px;
+    }
+  }
+
+  .page-numbers {
+    display: none;
+  }
+}
+
+@media #{$tablet-query} {
+  .stark-pagination > div {
+    font-size: mat-font-size($typography-config, caption);
+    font-weight: mat-font-weight($typography-config, caption);
+    line-height: mat-line-height($typography-config, caption);
+
+    .pagination-enter-page {
+      align-items: center;
+      display: flex;
+      margin-right: 40px;
+      & input {
+        margin-right: 4px;
+        width: 26px;
+        height: 24px;
+        padding: 4px;
+        border-radius: 2px;
+        text-align: center;
+      }
+    }
+
+    .page-numbers {
+      cursor: pointer;
+      display: flex;
+      a {
+        color: inherit;
+        padding: 15px;
+        opacity: 0.5;
+      }
+    }
+
+    &.compact {
+      .pagination-enter-page {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+/* END stark: src/modules/pagination/components/_pagination.component.scss */

packages/stark-ui/src/modules/pagination/components/paginate-event.intf.ts

@@ -0,0 +1,14 @@
+/**
+ * Event to be emitted by the Stark Pagination component when the pagination changes
+ */
+export interface StarkPaginateEvent {
+	/**
+	 * Current page after pagination
+	 */
+	page: number;
+
+	/**
+	 * Current number of items displayed per page
+	 */
+	itemsPerPage: number;
+}

packages/stark-ui/src/modules/pagination/components/pagination-config.intf.ts

@@ -0,0 +1,52 @@
+/**
+ * Defines the config object to be used with the Pagination component.
+ */
+export interface StarkPaginationConfig {
+	/**
+	 * If true, the component will be displayed in "extended" mode (an "extended-pagination" class is added to the element).
+	 * Default: false
+	 */
+	isExtended?: boolean;
+
+	/**
+	 * Number of items displayed on each page. The number of available pages for pagination is calculated based on this number.
+	 * Default: itemsPerPageOptions[0]
+	 */
+	itemsPerPage?: number;
+
+	/**
+	 * Available options for items per page dropdown.
+	 * Default : [5,10,15]
+	 */
+	itemsPerPageOptions?: number[];
+
+	/**
+	 * If false, then itemsPerPage dropdown will not be present.
+	 * Default: true
+	 */
+	itemsPerPageIsPresent?: boolean;
+
+	/**
+	 * Current page index.
+	 * Default: 0
+	 */
+	page?: number;
+
+	/**
+	 * If false, then page nav bar will not be present.
+	 * Default: true
+	 */
+	pageNavIsPresent?: boolean;
+
+	/**
+	 * f false, then input box for page selection will not be present.
+	 * Default: true
+	 */
+	pageInputIsPresent?: boolean;
+
+	/**
+	 * Number of items being paged in order to calculate number of pages for pagination.
+	 * Default: 0
+	 */
+	totalItems?: number;
+}

packages/stark-ui/src/modules/pagination/components/pagination.component.html

@@ -0,0 +1,79 @@
+<div *ngIf="mode !== 'compact'">
+	<ul *ngIf="paginationConfig.pageNavIsPresent !== false">
+		<li class="first-page" aria-label="First page" *ngIf="!paginationConfig.isExtended">
+
+			<button mat-icon-button (click)="goToFirst()" [disabled]="!hasPrevious()" aria-label="First page">
+				<mat-icon starkSvgViewBox svgIcon="page-first"></mat-icon>
+			</button>
+		</li>
+		<li class="previous" aria-label="Previous">
+			<button mat-icon-button (click)="goToPrevious()" [disabled]="!hasPrevious()" aria-label="Previous">
+				<mat-icon starkSvgViewBox svgIcon="chevron-left"></mat-icon>
+			</button>
+		</li>
+		<ng-container *ngIf="paginationConfig.isExtended">
+			<!-- workaround to use ngIf together with ngFor -->
+			<li class="page-numbers" *ngFor="let pageNumber of pageNumbers; trackBy: trackPageNumberFn"
+				value="{{ pageNumber }}"
+				[ngClass]="paginationConfig.page === pageNumber ? 'active' : ''">
+				<a *ngIf="pageNumber !== '...'" (click)="goToPage(pageNumber)">{{ pageNumber }}</a>
+				<span *ngIf="pageNumber === '...'">{{ pageNumber }}</span>
+			</li>
+		</ng-container>
+		<li class="next" aria-label="Next">
+			<button mat-icon-button type="button" (click)="goToNext()" [disabled]="!hasNext()">
+				<mat-icon starkSvgViewBox svgIcon="chevron-right"></mat-icon>
+			</button>
+		</li>
+		<li class="last-page" aria-label="Last page" *ngIf="!paginationConfig.isExtended">
+
+			<button mat-icon-button type="button" (click)="goToLast()" [disabled]="!hasNext()" aria-label="Last page">
+				<mat-icon starkSvgViewBox svgIcon="page-last"></mat-icon>
+			</button>
+		</li>
+	</ul>
+	<div class="pagination-enter-page" *ngIf="paginationConfig.pageInputIsPresent !== false">
+		<input [starkOnEnterKey]="changePageOnEnter.bind(this)" starkRestrictInput="\d"
+			   maxlength="{{ getPageInputMaxDigits() }}"
+			   id="current-page-{{ htmlSuffixId }}" [(ngModel)]="paginationInput">
+		<span> /&nbsp;</span><span class="total-pages">{{ getTotalPages() }}</span>
+	</div>
+	<div class="pagination-items-per-page" *ngIf="paginationConfig.itemsPerPageIsPresent !== false">
+		<stark-dropdown [options]="paginationConfig.itemsPerPageOptions" [value]="paginationConfig.itemsPerPage"
+						placeholder=""
+						(dropdownSelectionChanged)="onChangeItemsPerPage($event)"
+						dropdownId="items-per-page-{{ htmlSuffixId }}"
+						dropdownName="items-per-page-{{ htmlSuffixId }}"></stark-dropdown>
+	</div>
+</div>
+
+<div *ngIf="mode === 'compact'" class="compact">
+	<ul *ngIf="paginationConfig.pageNavIsPresent !== false">
+		<li class="first-page" aria-label="First page">
+			<button mat-icon-button (click)="goToFirst()" [disabled]="!hasPrevious()" aria-label="First page">
+				<mat-icon starkSvgViewBox svgIcon="page-first"></mat-icon>
+			</button>
+		</li>
+		<li class="previous" aria-label="Previous">
+			<button mat-icon-button (click)="goToPrevious()" [disabled]="!hasPrevious()" aria-label="Previous">
+				<mat-icon starkSvgViewBox svgIcon="chevron-left"></mat-icon>
+			</button>
+		</li>
+		<div class="pagination-enter-page" *ngIf="paginationConfig.pageInputIsPresent !== false">
+			<input [starkOnEnterKey]="changePageOnEnter.bind(this)" starkRestrictInput="\d"
+				   maxlength="{{ getPageInputMaxDigits() }}"
+				   id="current-page-{{ htmlSuffixId }}" [(ngModel)]="paginationInput">
+			<span> /&nbsp;</span><span class="total-pages">{{ getTotalPages() }}</span>
+		</div>
+		<li class="next" aria-label="Next">
+			<button mat-icon-button (click)="goToNext()" [disabled]="!hasNext()">
+				<mat-icon starkSvgViewBox svgIcon="chevron-right"></mat-icon>
+			</button>
+		</li>
+		<li class="last-page" aria-label="Last page">
+			<button mat-icon-button (click)="goToLast()" [disabled]="!hasNext()" aria-label="Last page">
+				<mat-icon starkSvgViewBox svgIcon="page-last"></mat-icon>
+			</button>
+		</li>
+	</ul>
+</div>