New packages org (#2639)

New packages org

lib/core/pagination/index.ts

@@ -0,0 +1,18 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './public-api';

lib/core/pagination/infinite-pagination.component.html

@@ -0,0 +1,14 @@
+<div *ngIf="pagination.hasMoreItems" class="adf-infinite-pagination">
+    <button mat-button
+        *ngIf="!isLoading"
+        class="adf-infinite-pagination-load-more"
+        (click)="onLoadMore($event)"
+        data-automation-id="adf-infinite-pagination-button">
+            <ng-content></ng-content>
+    </button>
+
+    <mat-progress-bar *ngIf="isLoading"
+        mode="indeterminate"
+        class="adf-infinite-pagination-spinner"
+        data-automation-id="adf-infinite-pagination-spinner"></mat-progress-bar>
+</div>

lib/core/pagination/infinite-pagination.component.scss

@@ -0,0 +1,10 @@
+.adf-infinite-pagination {
+    display: flex;
+    justify-content: space-around;
+    min-height: 56px;
+
+    &-load-more {
+        margin-bottom: 10px;
+        margin-top: 10px;
+    }
+}

lib/core/pagination/infinite-pagination.component.spec.ts

@@ -0,0 +1,116 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Pagination } from 'alfresco-js-api';
+import { MaterialModule } from '../material.module';
+import { InfinitePaginationComponent } from './infinite-pagination.component';
+
+describe('InfinitePaginationComponent', () => {
+
+    let fixture: ComponentFixture<InfinitePaginationComponent>;
+    let component: InfinitePaginationComponent;
+    let pagination: Pagination;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NoopAnimationsModule,
+                MaterialModule
+            ],
+            declarations: [
+                InfinitePaginationComponent
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(InfinitePaginationComponent);
+        component = fixture.componentInstance;
+
+        pagination = {
+            skipCount: 0,
+            hasMoreItems: false
+        };
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    it('should show the loading spinner if loading', () => {
+        pagination.hasMoreItems = true;
+        component.pagination = pagination;
+        component.isLoading = true;
+        fixture.detectChanges();
+
+        let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
+        expect(loadingSpinner).not.toBeNull();
+    });
+
+    it('should NOT show the loading spinner if NOT loading', () => {
+        pagination.hasMoreItems = true;
+        component.pagination = pagination;
+        component.isLoading = false;
+        fixture.detectChanges();
+
+        let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
+        expect(loadingSpinner).toBeNull();
+    });
+
+    it('should show the load more button if NOT loading and has more items', () => {
+        pagination.hasMoreItems = true;
+        component.pagination = pagination;
+        component.isLoading = false;
+        fixture.detectChanges();
+
+        let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
+        expect(loadMoreButton).not.toBeNull();
+    });
+
+    it('should NOT show anything if pagination has NO more items', () => {
+        pagination.hasMoreItems = false;
+        component.pagination = pagination;
+        fixture.detectChanges();
+
+        let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
+        expect(loadMoreButton).toBeNull();
+        let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
+        expect(loadingSpinner).toBeNull();
+    });
+
+    it('should trigger the loadMore event with the proper pagination object', (done) => {
+        pagination.hasMoreItems = true;
+        pagination.skipCount = 5;
+        component.pagination = pagination;
+        component.isLoading = false;
+        component.pageSize = 5;
+        fixture.detectChanges();
+
+        component.loadMore.subscribe((newPagination: Pagination) => {
+            expect(newPagination.skipCount).toBe(10);
+            done();
+        });
+
+        let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
+        loadMoreButton.triggerEventHandler('click', {});
+    });
+
+});

lib/core/pagination/infinite-pagination.component.ts

@@ -0,0 +1,69 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewEncapsulation
+} from '@angular/core';
+
+import { Pagination } from 'alfresco-js-api';
+
+@Component({
+    selector: 'adf-infinite-pagination',
+    host: { 'class': 'infinite-adf-pagination' },
+    templateUrl: './infinite-pagination.component.html',
+    styleUrls: [ './infinite-pagination.component.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class InfinitePaginationComponent implements OnInit {
+
+    static DEFAULT_PAGE_SIZE: number = 25;
+
+    static DEFAULT_PAGINATION: Pagination = {
+        skipCount: 0,
+        hasMoreItems: false
+    };
+
+    @Input()
+    pagination: Pagination;
+
+    @Input()
+    pageSize: number = InfinitePaginationComponent.DEFAULT_PAGE_SIZE;
+
+    @Input('loading')
+    isLoading: boolean = false;
+
+    @Output()
+    loadMore: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    ngOnInit() {
+        if (!this.pagination) {
+            this.pagination = InfinitePaginationComponent.DEFAULT_PAGINATION;
+        }
+    }
+
+    onLoadMore() {
+        this.pagination.skipCount += this.pageSize;
+        this.loadMore.next(this.pagination);
+    }
+}

lib/core/pagination/pagination-query-params.interface.ts

@@ -0,0 +1,31 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * PaginationQueryParams object is used to emit events regarding pagination having two
+ * properties from the Pagination interface found in AlfrescoJS API
+ *
+ * The two properties are "skipCount" and "maxItems" that are sent as query parameters
+ * to server to paginate results
+ *
+ * @TODO Contribute this to AlfrescoJS API
+ */
+
+export interface PaginationQueryParams {
+    skipCount: number;
+    maxItems: number;
+}

lib/core/pagination/pagination.component.html

@@ -0,0 +1,77 @@
+<div class="adf-pagination__block adf-pagination__range-block">
+    <span class="adf-pagination__range">
+        {{
+            'CORE.PAGINATION.ITEMS_RANGE' | translate: {
+                range: range.join('-'),
+                total: pagination.totalItems
+            }
+        }}
+    </span>
+</div>
+
+<div class="adf-pagination__block adf-pagination__perpage-block">
+    <span>
+        {{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }}
+    </span>
+
+    <span class="adf-pagination__max-items">
+        {{ pagination.maxItems }}
+    </span>
+
+    <button mat-icon-button [matMenuTriggerFor]="pageSizeMenu">
+        <mat-icon>arrow_drop_down</mat-icon>
+    </button>
+
+    <mat-menu #pageSizeMenu="matMenu">
+        <button
+            mat-menu-item
+            *ngFor="let pageSize of supportedPageSizes"
+            (click)="onChangePageSize(pageSize)">
+            {{ pageSize }}
+        </button>
+    </mat-menu>
+</div>
+
+<div class="adf-pagination__block adf-pagination__actualinfo-block">
+    <span class="adf-pagination__current-page">
+        {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate: { number: current } }}
+    </span>
+
+    <button
+        mat-icon-button
+        [matMenuTriggerFor]="pagesMenu"
+        *ngIf="pages.length > 1">
+        <mat-icon>arrow_drop_down</mat-icon>
+    </button>
+
+    <span class="adf-pagination__total-pages">
+        {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }}
+    </span>
+
+    <mat-menu #pagesMenu="matMenu" class="adf-pagination__page-selector">
+        <button
+            mat-menu-item
+            *ngFor="let pageNumber of pages"
+            (click)="onChangePageNumber(pageNumber)">
+            {{ pageNumber }}
+        </button>
+    </mat-menu>
+</div>
+
+<div class="adf-pagination__block adf-pagination__controls-block">
+    <button
+        class="adf-pagination__previous-button"
+        mat-icon-button
+        [disabled]="isFirstPage"
+        (click)="goPrevious()">
+        <mat-icon>keyboard_arrow_left</mat-icon>
+    </button>
+
+    <button
+        class="adf-pagination__next-button"
+        mat-icon-button
+        [disabled]="isLastPage"
+        (click)="goNext()">
+        <mat-icon>keyboard_arrow_right</mat-icon>
+    </button>
+</div>

lib/core/pagination/pagination.component.scss

@@ -0,0 +1,101 @@
+
+@mixin adf-pagination-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    $adf-pagination--height: 48px;
+    $adf-pagination--icon-button-size: 32px;
+    $adf-pagination--border: 1px solid  mat-color($foreground, text, .07);
+
+    .adf-pagination {
+        display: flex;
+        border-top: $adf-pagination--border;
+        height: $adf-pagination--height;
+        line-height: 20px;
+        color: mat-color($foreground, text);
+
+        &__block {
+            display: flex;
+            align-items: center;
+            padding: 0 8px;
+            border-right: $adf-pagination--border;
+
+            &:first-child {
+                flex: 1 1 auto;
+                padding-left: 24px;
+            }
+
+            &:last-child {
+                border-right-width: 0;
+            }
+        }
+
+        @media (max-width: 500px) {
+
+            & {
+                flex-wrap: wrap;
+                padding-bottom: 24px;
+                padding-top: 8px;
+                justify-content: space-between;
+            }
+
+            &__range-block.adf-pagination__block:first-child {
+                order: 1;
+                flex: 0 0 auto;
+                box-sizing: border-box;
+                padding-left: 16px;
+                justify-content: flex-start;
+            }
+
+            &__perpage-block {
+                order: 3;
+                box-sizing: border-box;
+                padding-left: 16px;
+                justify-content: flex-start;
+            }
+
+            &__actualinfo-block {
+                order: 2;
+                box-sizing: border-box;
+                padding-right: 16px;
+                justify-content: flex-end;
+            }
+
+            &__controls-block {
+                order: 4;
+                box-sizing: border-box;
+                padding-right: 16px;
+                justify-content: flex-end;
+            }
+        }
+
+        &__max-items {
+            margin-left: 10px;
+        }
+
+        &__max-items, &__current-page {
+            margin-right: 5px;
+
+            &, & + button {
+                color: mat-color($foreground, text);
+            }
+
+            & + button {
+                margin-left: -10px;
+            }
+        }
+
+        &__previous-button, &__next-button {
+            margin: 0 5px;
+        }
+
+        &__page-selector {
+            max-height: 250px !important;
+        }
+
+        button[mat-icon-button] {
+            width: $adf-pagination--icon-button-size;
+            height: $adf-pagination--icon-button-size;
+            line-height: $adf-pagination--icon-button-size;
+        }
+    }
+}

lib/core/pagination/pagination.component.spec.ts

@@ -0,0 +1,285 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HttpClientModule } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MaterialModule } from '../material.module';
+import { AppConfigService } from '../app-config/app-config.service';
+import { LogService } from '../services/log.service';
+import { TranslateLoaderService } from '../services/translate-loader.service';
+import { TranslationService } from '../services/translation.service';
+import { PaginationComponent } from './pagination.component';
+
+declare let jasmine: any;
+
+class FakePaginationInput {
+    count: string = 'Not applicable / not used';
+    hasMoreItems: string = 'Not applicable / not used';
+    totalItems: number = null;
+    skipCount: number = null;
+    maxItems: number = 25;
+
+    constructor(pagesCount, currentPage, lastPageItems) {
+        this.totalItems = ((pagesCount - 1) * this.maxItems) + lastPageItems;
+        this.skipCount = (currentPage - 1) * this.maxItems;
+    }
+}
+
+describe('PaginationComponent', () => {
+
+    let fixture: ComponentFixture<PaginationComponent>;
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+    });
+
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                HttpClientModule,
+                MaterialModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: TranslateLoaderService
+                    }
+                })
+            ],
+            declarations: [
+                PaginationComponent
+            ],
+            providers: [
+                TranslationService,
+                LogService,
+                AppConfigService
+            ],
+            schemas: [ NO_ERRORS_SCHEMA ]
+        }).compileComponents()
+            .then(() => {
+                fixture = TestBed.createComponent(PaginationComponent);
+                const component: PaginationComponent = fixture.componentInstance;
+
+                (<any> component).ngAfterViewInit = jasmine
+                    .createSpy('ngAfterViewInit').and
+                    .callThrough();
+
+                spyOn(component.changePageNumber, 'emit');
+                spyOn(component.changePageSize, 'emit');
+                spyOn(component.nextPage, 'emit');
+                spyOn(component.prevPage, 'emit');
+
+                this.fixture = fixture;
+                this.component = component;
+
+                fixture.detectChanges();
+            });
+    }));
+
+    describe('Single page', () => {
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(1, 1, 10);
+        });
+
+        it('has a single page', () => {
+            expect(this.component.pages.length).toBe(1);
+        });
+
+        it('has current page 1', () => {
+            expect(this.component.current).toBe(1);
+        });
+
+        it('is first and last page', () => {
+            expect(this.component.isFirstPage).toBe(true);
+            expect(this.component.isLastPage).toBe(true);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 1, 10 ]);
+        });
+    });
+
+    describe('Single full page', () => {
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(1, 1, 25);
+        });
+
+        it('has a single page', () => {
+            expect(this.component.pages.length).toBe(1);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 1, 25 ]);
+        });
+    });
+
+    describe('Middle page', () => {
+
+        // This test describes 6 pages being on the third page
+        // and last page has 5 items
+
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(6, 3, 5);
+        });
+
+        it('has more pages', () => {
+            expect(this.component.pages.length).toBe(6);
+        });
+
+        it('has the last page', () => {
+            expect(this.component.lastPage).toBe(6);
+        });
+
+        it('is on the 3rd page', () => {
+            expect(this.component.current).toBe(3);
+        });
+
+        it('has previous and next page', () => {
+            expect(this.component.previous).toBe(2);
+            expect(this.component.next).toBe(4);
+        });
+
+        it('is not first, nor last', () => {
+            expect(this.component.isFirstPage).toBe(false);
+            expect(this.component.isLastPage).toBe(false);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 51, 75 ]);
+        });
+
+        it('goes next', () => {
+            const { component } = this;
+
+            component.goNext();
+
+            const { emit: { calls } } = component.nextPage;
+            const { skipCount } = calls.mostRecent().args[0];
+
+            expect(skipCount).toBe(75);
+        });
+
+        it('goes previous', () => {
+            const { component } = this;
+
+            component.goPrevious();
+
+            const { emit: { calls } } = component.prevPage;
+            const { skipCount } = calls.mostRecent().args[0];
+
+            expect(skipCount).toBe(25);
+        });
+
+        it('changes page size', () => {
+            const { component } = this;
+            component.onChangePageSize(50);
+
+            const { emit: { calls } } = component.changePageSize;
+            const { maxItems } = calls.mostRecent().args[0];
+
+            expect(maxItems).toBe(50);
+        });
+
+        it('changes page number', () => {
+            const { component } = this;
+
+            component.onChangePageNumber(5);
+
+            const { emit: { calls } } = component.changePageNumber;
+            const { skipCount } = calls.mostRecent().args[0];
+
+            expect(skipCount).toBe(100);
+        });
+    });
+
+    describe('First page', () => {
+
+        // This test describes 10 pages being on the first page
+
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(10, 1, 5);
+        });
+
+        it('is on the first page', () => {
+            expect(this.component.current).toBe(1);
+            expect(this.component.isFirstPage).toBe(true);
+        });
+
+        it('has the same, previous page', () => {
+            expect(this.component.previous).toBe(1);
+        });
+
+        it('has next page', () => {
+            expect(this.component.next).toBe(2);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 1, 25 ]);
+        });
+    });
+
+    describe('Last page', () => {
+
+        // This test describes 10 pages being on the last page
+
+        beforeEach(() => {
+            this.component.pagination = new FakePaginationInput(10, 10, 5);
+        });
+
+        it('is on the last page', () => {
+            expect(this.component.current).toBe(10);
+            expect(this.component.isLastPage).toBe(true);
+        });
+
+        it('has the same, next page', () => {
+            expect(this.component.next).toBe(10);
+        });
+
+        it('has previous page', () => {
+            expect(this.component.previous).toBe(9);
+        });
+
+        it('has range', () => {
+            expect(this.component.range).toEqual([ 226, 230 ]);
+        });
+    });
+
+    describe('Without pagination input', () => {
+        it('has defaults', () => {
+            const {
+                current, lastPage, isFirstPage, isLastPage,
+                next, previous, range, pages
+            } = this.component;
+
+            expect(lastPage).toBe(1, 'lastPage');
+            expect(previous).toBe(1, 'previous');
+            expect(current).toBe(1, 'current');
+            expect(next).toBe(1, 'next');
+
+            expect(isFirstPage).toBe(true, 'isFirstPage');
+            expect(isLastPage).toBe(true, 'isLastPage');
+
+            expect(range).toEqual([ 0, 0 ], 'range');
+            expect(pages).toEqual([ 1 ], 'pages');
+        });
+    });
+});

lib/core/pagination/pagination.component.ts

@@ -0,0 +1,210 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewEncapsulation
+} from '@angular/core';
+
+import { Pagination } from 'alfresco-js-api';
+import { PaginationQueryParams } from './pagination-query-params.interface';
+
+@Component({
+    selector: 'adf-pagination',
+    host: { 'class': 'adf-pagination' },
+    templateUrl: './pagination.component.html',
+    styleUrls: [ './pagination.component.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class PaginationComponent implements OnInit {
+
+    static DEFAULT_PAGE_SIZE: number = 25;
+
+    static DEFAULT_PAGINATION: Pagination = {
+        skipCount: 0,
+        maxItems: PaginationComponent.DEFAULT_PAGE_SIZE,
+        totalItems: 0
+    };
+
+    static ACTIONS = {
+        NEXT_PAGE: 'NEXT_PAGE',
+        PREV_PAGE: 'PREV_PAGE',
+        CHANGE_PAGE_SIZE: 'CHANGE_PAGE_SIZE',
+        CHANGE_PAGE_NUMBER: 'CHANGE_PAGE_NUMBER'
+    };
+
+    @Input()
+    supportedPageSizes: number[] = [ 25, 50, 100 ];
+
+    /** @deprecated */
+    /** "pagination" object already has "maxItems" */
+    @Input()
+    maxItems: number = PaginationComponent.DEFAULT_PAGE_SIZE;
+
+    @Input()
+    pagination: Pagination;
+
+    @Output()
+    change: EventEmitter<PaginationQueryParams> = new EventEmitter<PaginationQueryParams>();
+
+    @Output()
+    changePageNumber: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    @Output()
+    changePageSize: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    @Output()
+    nextPage: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    @Output()
+    prevPage: EventEmitter<Pagination> = new EventEmitter<Pagination>();
+
+    ngOnInit() {
+        if (!this.pagination) {
+            this.pagination = PaginationComponent.DEFAULT_PAGINATION;
+        }
+    }
+
+    get lastPage(): number {
+        const { maxItems, totalItems } = this.pagination;
+
+        return (totalItems && maxItems)
+            ? Math.ceil(totalItems / maxItems)
+            : 1;
+    }
+
+    get current(): number {
+        const { maxItems, skipCount } = this.pagination;
+
+        return (skipCount && maxItems)
+            ? Math.floor(skipCount / maxItems) + 1
+            : 1;
+    }
+
+    get isLastPage(): boolean {
+        const { current, lastPage } = this;
+        return current === lastPage;
+    }
+
+    get isFirstPage(): boolean {
+        return this.current === 1;
+    }
+
+    get next(): number {
+        const { isLastPage, current } = this;
+        return isLastPage ? current : current + 1;
+    }
+
+    get previous(): number {
+        const { isFirstPage, current } = this;
+        return isFirstPage ? 1 : current - 1;
+    }
+
+    get range(): number[] {
+        const { skipCount, maxItems, totalItems } = this.pagination;
+        const { isLastPage } = this;
+
+        const start = totalItems ? skipCount + 1 : 0;
+        const end = isLastPage ? totalItems : skipCount + maxItems;
+
+        return [ start, end ];
+    }
+
+    get pages(): number[] {
+        return Array(this.lastPage)
+            .fill('n')
+            .map((item, index) => (index + 1));
+    }
+
+    goNext() {
+        const { next, pagination: { maxItems } } = this;
+
+        this.handlePaginationEvent(PaginationComponent.ACTIONS.NEXT_PAGE, {
+            skipCount: (next - 1) * maxItems,
+            maxItems
+        });
+    }
+
+    goPrevious() {
+        const { previous, pagination: { maxItems } } = this;
+
+        this.handlePaginationEvent(PaginationComponent.ACTIONS.PREV_PAGE, {
+            skipCount: (previous - 1) * maxItems,
+            maxItems
+        });
+    }
+
+    onChangePageNumber(pageNumber: number) {
+        const { pagination: { maxItems } } = this;
+
+        this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_NUMBER, {
+            skipCount: (pageNumber - 1) * maxItems,
+            maxItems
+        });
+    }
+
+    onChangePageSize(maxItems: number) {
+        this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_SIZE, {
+            skipCount: 0,
+            maxItems
+        });
+    }
+
+    handlePaginationEvent(action: string, params: PaginationQueryParams) {
+        const {
+            NEXT_PAGE,
+            PREV_PAGE,
+            CHANGE_PAGE_NUMBER,
+            CHANGE_PAGE_SIZE
+        } = PaginationComponent.ACTIONS;
+
+        const {
+            change,
+            changePageNumber,
+            changePageSize,
+            nextPage,
+            prevPage,
+            pagination
+        } = this;
+
+        const data = Object.assign({}, pagination, params);
+
+        if (action === NEXT_PAGE) {
+            nextPage.emit(data);
+        }
+
+        if (action === PREV_PAGE) {
+            prevPage.emit(data);
+        }
+
+        if (action === CHANGE_PAGE_NUMBER) {
+            changePageNumber.emit(data);
+        }
+
+        if (action === CHANGE_PAGE_SIZE) {
+            changePageSize.emit(data);
+        }
+
+        change.emit(params);
+    }
+}

lib/core/pagination/pagination.module.ts

@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MaterialModule } from '../material.module';
+import { InfinitePaginationComponent } from './infinite-pagination.component';
+import { PaginationComponent } from './pagination.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MaterialModule,
+        TranslateModule
+    ],
+    declarations: [
+        InfinitePaginationComponent,
+        PaginationComponent
+    ],
+    exports: [
+        InfinitePaginationComponent,
+        PaginationComponent
+    ]
+})
+export class PaginationModule {}

lib/core/pagination/public-api.ts

@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './pagination.component';
+export * from './infinite-pagination.component';
+
+export * from './pagination.module';