@colijnit/corecomponents_v12 254.1.9 → 255.1.1

package/projects/corecomponents/src/lib/components/list-of-values/list-of-values.component.ts

@@ -0,0 +1,257 @@
+import {Component, ComponentRef, ElementRef, forwardRef, HostBinding, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+import {BaseInputComponent} from '../base/base-input.component';
+import {CoreComponentsIcon} from '../../core/enum/core-components-icon.enum';
+import {OverlayService} from '../../service/overlay.service';
+import {ListOfValuesPopupComponent} from './list-of-values-popup.component';
+import {KeyboardKey} from '../../core/enum/keyboard-key.enum';
+import {SafeHtml} from '@angular/platform-browser';
+import {SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME} from '../../interfaces/screen-config-adapter-component-interface-name';
+
+@Component({
+    selector: 'co-list-of-values',
+    template: `
+        <co-input-text aria-haspopup="listbox" [attr.aria-expanded]="isSelectOpen" aria-controls="lov-popup" role="combobox"
+                       class="no-focus-line"
+                       overlayParent
+                       #parentForOverlay="overlayParent" type="text" [id]="label"
+                       [model]="multiselect ? selectedModels : selectedModel"
+                       [placeholder]="label"
+                       [readonly]="readonly"
+                       [disabled]="disabled"
+                       [required]="required"
+                       [noClickFocus]="false"
+                       [leftIconData]="leftIconData"
+                       [rightIcon]="isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular"
+                       [showClearButton]="true"
+                       [useContent]="multiselect"
+                       [customHeight]="multiselect"
+                       [keepFocussed]="keepFocussed"
+                       (modelChange)="handleInputModelChange($event)"
+                       (click)="openPopup()"
+                       (rightIconClick)="toggleSelect()"
+                       (keydown)="handleInputKeyDown($event)"
+                       (clearIconClick)="clearModel($event)"
+                       (blur)="checkModel()"
+        >
+            <ng-container *ngIf="multiselect">
+                <div class="multiselect-chips-wrapper">
+                    <div class="chips" *ngFor="let chip of model">
+                        <span class="chips-description" [textContent]="chip[displayField]"></span>
+                        <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
+                    </div>
+                </div>
+            </ng-container>
+        </co-input-text>
+    `,
+    providers: [
+        OverlayService,
+        {
+            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+            useExisting: forwardRef(() => ListOfValuesComponent)
+        }
+    ],
+    encapsulation: ViewEncapsulation.None,
+})
+export class ListOfValuesComponent extends BaseInputComponent<any> implements OnInit {
+    public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
+
+    @Input()
+    public set model(value: any) {
+        super.model = value;
+        this._setSelectedModel();
+    }
+
+    public get model(): any {
+        return super.model;
+    }
+
+    @ViewChild('parentForOverlay', {read: ElementRef})
+    public parentForOverlay: ElementRef;
+
+    @HostBinding('class.custom-height')
+    @HostBinding('class.multi-select')
+    @Input()
+    public multiselect: boolean = false;
+
+    @Input()
+    public displayField: string = 'description';
+
+    @Input()
+    public set collection(value: any[]) {
+        this._collection = value || [];
+    }
+
+    public get collection(): any[] {
+        return this._collection;
+    }
+
+    @Input()
+    public leftIconData: SafeHtml | undefined;
+
+    @Input()
+    public searchPlaceholder: string;
+
+    @Input()
+    public label: string;
+
+    @Input()
+    public customCssClass: string;
+
+    @Input()
+    public searchDisabled: boolean = false;
+
+    @HostBinding('class.co-list-of-values')
+    public showClass() {
+        return true;
+    }
+
+    public isSelectOpen: boolean = false;
+    public state: string = 'default';
+    public selectedModel: string;
+    public selectedModels: string[] = [];
+
+    private _collection: any[] = [];
+
+    private _lovPopupComponentRef: ComponentRef<any>;
+
+    ngOnInit() {
+        super.ngOnInit();
+        this._setSelectedModel();
+    }
+
+    public handleInputModelChange(model: string): void {
+        if (this._lovPopupComponentRef) {
+            this._lovPopupComponentRef.instance.searchTerm = model;
+        } else {
+            if (!this.selectedModel && model) {
+                this.openPopup();
+                this._lovPopupComponentRef.instance.searchTerm = model;
+            }
+        }
+        this.selectedModel = model;
+    }
+
+    public handleInputKeyDown(event: KeyboardEvent): boolean {
+        if (event) {
+            if (event.altKey && event.code === KeyboardKey.Down && !this._lovPopupComponentRef) {
+                this.openPopup();
+                return false;
+            }
+            if (this._lovPopupComponentRef) {
+                switch (event.code) {
+                    case KeyboardKey.Down:
+                        this._lovPopupComponentRef.instance.selectNextOption();
+                        return false;
+                    case KeyboardKey.Up:
+                        this._lovPopupComponentRef.instance.selectNextOption(true);
+                        return false;
+                    case KeyboardKey.Enter:
+                        this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
+                        return false;
+                    case KeyboardKey.Tab:
+                        this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
+                }
+            }
+        }
+    }
+
+    public clearModel(event: MouseEvent): void {
+        this.setModel(undefined);
+    }
+
+    public toggleSelect(): void {
+        if (this.readonly) {
+            return;
+        }
+        this.isSelectOpen = !this.isSelectOpen;
+        if (this.isSelectOpen) {
+            this.openPopup();
+        } else {
+            this.closePopup();
+        }
+        this.state = (this.state === 'default' ? 'rotated' : 'default');
+    }
+
+    public openPopup(): void {
+        if (this.readonly) {
+            return;
+        }
+        this.isSelectOpen = true;
+        this._lovPopupComponentRef = this.overlayService.createComponent(ListOfValuesPopupComponent, {
+            parentForOverlay: this.elementRef,
+            customCssClass: this.customCssClass,
+            searchDisabled: this.searchDisabled,
+            searchPlaceholder: this.searchPlaceholder,
+            displayField: this.displayField,
+            multiselect: this.multiselect,
+            model: this.model,
+            collection: this.collection
+        }, {
+            modelChange: (value) => this.optionChosen(value),
+            closePopup: () => this.closePopup(),
+            keyDown: (event: KeyboardEvent) => this.handleInputKeyDown(event)
+        });
+        this.keepFocussed = true;
+    }
+
+    public removeOptionFromModel(chip: any): void {
+        if (this.multiselect) {
+            const idx: number = this.model.findIndex(m => m === chip);
+            this.model.splice(idx, 1);
+            this.modelChange.emit(this.model);
+        }
+    }
+
+    public optionChosen(option: any): void {
+        if (option) {
+            if (this.multiselect) {
+                this.selectedModels = option.map(o => o[this.displayField]);
+            } else {
+                this.selectedModel = option[this.displayField];
+            }
+        }
+        this.model = option;
+        this.modelChange.emit(this.model);
+        this.detectChanges();
+    }
+
+    public closePopup(): void {
+        this.keepFocussed = false;
+        this.isSelectOpen = false;
+        this.overlayService.removeComponent(this._lovPopupComponentRef);
+        this._lovPopupComponentRef = undefined;
+        this.focused = false;
+    }
+
+    public checkModel(): void {
+        if (!this.multiselect && this.selectedModel && this.collection) {
+            const model: any = this.collection.find(c => c[this.displayField] === this.selectedModel);
+            if (model) {
+                this.model = model;
+            } else {
+                this.model = undefined;
+            }
+            this.modelChange.emit(this.model);
+        }
+    }
+
+    private _setSelectedModel(): void {
+        if (this.multiselect) {
+            if (this.model) {
+                this.selectedModels.length = 0;
+                this.model.forEach(m => {
+                    this.selectedModels.push(m[this.displayField]);
+                });
+            } else {
+                this.selectedModels.length = 0;
+            }
+        } else {
+            if (this.model) {
+                this.selectedModel = this.model[this.displayField];
+            } else {
+                this.selectedModel = '';
+            }
+        }
+    }
+
+}

package/projects/corecomponents/src/lib/components/list-of-values/list-of-values.module.ts

@@ -0,0 +1,35 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ListOfValuesComponent} from "./list-of-values.component";
+import {FormsModule} from "@angular/forms";
+import {InputTextModule} from "../input-text/input-text.module";
+import {InputCheckboxModule} from "../input-checkbox/input-checkbox.module";
+import {OverlayModule} from "../../directives/overlay/overlay.module";
+import {ClickoutsideModule} from "../../directives/clickoutside/clickoutside.module";
+import {ListOfValuesPopupComponent} from "./list-of-values-popup.component";
+import {ListOfValuesMultiselectPopupComponent} from "./list-of-values-multiselect-popup.component";
+import {IconModule} from "../icon/icon.module";
+import {InputSearchModule} from '../input-search/input-search.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        InputTextModule,
+        InputCheckboxModule,
+        OverlayModule,
+        ClickoutsideModule,
+        IconModule,
+        InputTextModule,
+        InputSearchModule
+    ],
+  declarations: [
+    ListOfValuesComponent,
+    ListOfValuesPopupComponent,
+    ListOfValuesMultiselectPopupComponent
+  ],
+  exports: [
+    ListOfValuesComponent
+  ]
+})
+export class ListOfValuesModule {}

package/projects/corecomponents/src/lib/components/loader/loader.component.ts

@@ -0,0 +1,82 @@
+import {Component, HostBinding, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'co-loader',
+  template: `
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+           viewBox="0 0 200 200" xml:space="preserve">
+        <defs>
+          <linearGradient id="gradientFade" x1="20%" x2="50%" y1="60%" y2="100%">
+            <stop offset="0%" class="spinner-gradient-stop" />
+            <stop offset="25%" stop-opacity="75%" class="spinner-gradient-stop" />
+            <stop offset="50%" stop-opacity="50%" class="spinner-gradient-stop" />
+            <stop offset="75%" stop-opacity="25%" class="spinner-gradient-stop" />
+            <stop offset="100%" stop-opacity="5%" class="spinner-gradient-stop" />
+          </linearGradient>
+        </defs>          
+        <g id="mask">
+            <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -41.0887 100.8995)" class="circle" cx="101.25" cy="101.25" rx="77.58"
+                     ry="77.58"/>
+        </g>
+        <g id="ring" fill="none">
+            <circle id="ring-loader" class="ring-color" cx="100" cy="100" r="90" fill="none" />
+        </g>
+        <g id="js">
+          <path class="main-color" d="M87.93,149.17c-0.12-0.17-0.08-0.4,0.09-0.52l0.61-0.45c2.92-2.14,4.34-4.61,4.34-7.56l0-20.64h2.47
+            c0.74,0,1.34,0.6,1.34,1.34v18.32c0,2.97-0.65,5.4-1.93,7.23c-0.61,0.89-1.25,1.66-1.9,2.28c-0.63,0.6-1.41,1.23-2.3,1.87
+            l-0.65,0.47c-0.18,0.12-0.42,0.08-0.54-0.1L87.93,149.17z"/>
+              <path class="main-color" d="M107.12,142.92c-2.24,0-4.18-0.59-5.79-1.75l0,0c-0.47-0.34-0.59-1-0.27-1.48l1.06-1.59
+            c0.12-0.17,0.35-0.22,0.53-0.11l0.58,0.38c1.18,0.77,2.43,1.14,3.84,1.14c1.36,0,2.39-0.25,3.05-0.75
+            c0.59-0.44,0.86-1.04,0.86-1.92c0-0.59-0.22-1.15-0.68-1.71c-0.55-0.67-1.23-1.29-2.02-1.84c-0.85-0.58-1.74-1.22-2.66-1.88
+            c-0.97-0.7-1.81-1.55-2.5-2.53c-0.75-1.06-1.12-2.23-1.12-3.46c0-1.67,0.63-3.02,1.89-4.01c1.17-0.93,2.74-1.4,4.66-1.4
+            c1.83,0,3.55,0.37,5.13,1.11l0.62,0.29c0.19,0.09,0.27,0.31,0.19,0.5l-1.03,2.37c-0.08,0.19-0.31,0.28-0.5,0.2l-0.64-0.27
+            c-1.22-0.52-2.45-0.78-3.64-0.78c-3.01,0-3.01,1.31-3.01,1.94c0,0.63,0.22,1.21,0.68,1.77c0.55,0.67,1.22,1.28,2.01,1.8
+            c0.91,0.61,1.8,1.22,2.66,1.82c0.97,0.68,1.82,1.52,2.5,2.47c0.75,1.04,1.13,2.2,1.13,3.44c0,2.05-0.72,3.64-2.14,4.72
+            C111.17,142.4,109.36,142.92,107.12,142.92z"/>
+        </g>
+        <g id="i">
+          <path class="second-color" d="M38.1,100.24V80.62c0-0.18,0.14-0.32,0.32-0.32h2.53c0.88,0,1.6,0.72,1.6,1.6v18.34
+            c0,0.18-0.14,0.32-0.32,0.32h-3.8C38.25,100.56,38.1,100.42,38.1,100.24z"/>
+        </g>
+        <g id="n">
+          <path class="second-color" d="M126.95,107l-14.97-17.18c-0.19-0.22-0.56-0.09-0.56,0.21v16.62c0,0.18-0.14,0.32-0.32,0.32h-3.8
+            c-0.18,0-0.32-0.14-0.32-0.32V82.12c0-0.88,0.72-1.6,1.6-1.6h1.07c0.09,0,0.18,0.04,0.24,0.11l14.97,17.22
+            c0.19,0.22,0.56,0.09,0.56-0.21V80.99c0-0.18,0.14-0.32,0.32-0.32h3.8c0.18,0,0.32,0.14,0.32,0.32v25.81
+            c0,0.18-0.14,0.32-0.32,0.32h-2.35C127.1,107.11,127.01,107.07,126.95,107z"/>
+        </g>
+        <g id="e">
+          <path class="second-color" d="M150.28,105.37V80.99c0-0.18,0.14-0.32,0.32-0.32h13.12c0.18,0,0.32,0.14,0.32,0.32v3.59
+            c0,0.18-0.14,0.32-0.32,0.32h-8.68c-0.18,0-0.32,0.14-0.32,0.32v5.14c0,0.18,0.14,0.32,0.32,0.32h7.77c0.18,0,0.32,0.14,0.32,0.32
+            v3.55c0,0.18-0.14,0.32-0.32,0.32h-7.77c-0.18,0-0.32,0.14-0.32,0.32v7.17c0,0.18,0.14,0.32,0.32,0.32h9.04
+            c0.18,0,0.32,0.14,0.32,0.32v3.66c0,0.18-0.14,0.32-0.32,0.32h-12.2C151,106.97,150.28,106.25,150.28,105.37z"/>
+        </g>
+        <g id="o">
+        <path class="second-color" d="M67.44,86.2c0.59,0.54,0.68,1.43,0.23,2.09c-0.41,0.6-0.75,1.24-1.01,1.92c-0.42,1.1-0.63,2.31-0.63,3.61
+          c0,1.3,0.21,2.51,0.63,3.61c0.42,1.1,1.04,2.1,1.88,2.98c0.82,0.87,1.75,1.53,2.8,1.97c1.04,0.44,2.19,0.66,3.44,0.66
+          c1.25,0,2.4-0.22,3.43-0.66c1.04-0.44,1.97-1.09,2.78-1.97c0.83-0.88,1.45-1.88,1.86-2.98c0.42-1.1,0.63-2.31,0.63-3.61
+          c0-1.3-0.21-2.51-0.63-3.62c-0.42-1.1-1.04-2.11-1.87-3c-0.81-0.87-1.74-1.53-2.78-1.97c-1.04-0.44-2.18-0.66-3.43-0.66
+          c-0.77,0-1.49,0.08-2.18,0.25c-0.75,0.18-1.53-0.19-1.84-0.9l-1.03-2.32c-0.07-0.17,0-0.36,0.17-0.43
+          c1.49-0.58,3.12-0.87,4.86-0.87c1.87,0,3.59,0.33,5.17,0.99c1.58,0.66,3,1.64,4.27,2.95c1.26,1.3,2.21,2.76,2.84,4.36
+          c0.63,1.6,0.95,3.34,0.95,5.22c0,1.88-0.32,3.62-0.95,5.22c-0.63,1.6-1.58,3.06-2.84,4.36c-1.27,1.31-2.69,2.29-4.27,2.95
+          c-1.58,0.66-3.31,0.99-5.17,0.99c-1.87,0-3.6-0.33-5.17-0.99c-1.58-0.66-3-1.64-4.27-2.95c-1.26-1.3-2.21-2.76-2.84-4.36
+          c-0.63-1.6-0.95-3.34-0.95-5.22c0-1.88,0.32-3.62,0.95-5.22c0.6-1.51,1.47-2.88,2.63-4.13c0.12-0.13,0.32-0.13,0.45-0.02
+          L67.44,86.2z"/>
+        </g>
+        <g id="smile">
+          <path class="main-color" d="M101.26,178.35c-3.73-0.01-7.38-0.28-10.86-0.82c-3.62-0.57-6.94-1.38-9.85-2.4c-3.01-1.05-5.69-2.3-7.94-3.73
+            c-1.09-0.71-2.1-1.76-2.99-2.84c0.98,0.74,2.03,1.44,3.16,2.07c2.38,1.38,5.13,2.58,8.16,3.55c5.99,1.93,13.15,2.99,20.17,2.99
+            h0.31c7.01,0,14.17-1.06,20.16-2.99c3.03-0.97,5.78-2.16,8.17-3.55c1.12-0.64,2.17-1.32,3.15-2.06c-0.89,1.08-1.89,2.13-2.99,2.83
+            c-2.25,1.42-4.92,2.67-7.94,3.72c-2.91,1.02-6.23,1.83-9.85,2.4C108.65,178.07,105,178.35,101.26,178.35z"/>
+        </g>
+    </svg>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class LoaderComponent {
+
+  @HostBinding('class.co-loader')
+  public showClass() {
+    return true;
+  }
+
+} 

package/projects/corecomponents/src/lib/components/loader/loader.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {LoaderComponent} from './loader.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    LoaderComponent
+  ],
+  exports: [
+    LoaderComponent
+  ]
+})
+export class LoaderModule {
+}

package/projects/corecomponents/src/lib/components/pagination/paginate.pipe.ts

@@ -0,0 +1,116 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+import {PaginationService} from "./pagination.service";
+import {IPaginationInstance} from "./pagination-instance";
+
+const LARGE_NUMBER: number = 999999999;
+
+interface IPipeState {
+    collection: any[];
+    size: number;
+    start: number;
+    end: number;
+    slice: any[];
+}
+
+@Pipe({
+    name: 'paginate',
+    pure: false
+})
+export class PaginatePipe implements PipeTransform {
+
+    // store the values from the last time the pipe
+    private state: { [id: string]: IPipeState } = {};
+
+    public transform(collection: any[], args: any): any {
+        // When an observable is passed through the AsyncPipe, it will output
+        // `null` until the subscription resolves. In this case, we want to
+        // use the cached data from the `state` object to prevent the NgFor
+        // from flashing empty until the real values arrive.
+        if (!(collection instanceof Array)) {
+            let _id: any = args.id;
+            if (this.state[_id]) {
+                return this.state[_id].slice;
+            } else {
+                return collection;
+            }
+        }
+
+        let serverSideMode: boolean = args.totalItems !== undefined;
+        let instance: IPaginationInstance = this._createInstance(collection, args);
+        let id: string = instance.id;
+        let start: number;
+        let end: number;
+        let perPage: number = instance.itemsPerPage;
+
+        if (!serverSideMode && collection instanceof Array) {
+            perPage = perPage || LARGE_NUMBER;
+            start = (instance.currentPage - 1) * perPage;
+            end = start + perPage;
+
+            let isIdentical: boolean = this._stateIsIdentical(id, collection, start, end);
+            if (isIdentical) {
+                return this.state[id].slice;
+            } else {
+                let slice: any[] = collection.slice(start, end);
+                this._saveState(id, collection, slice, start, end);
+                return slice;
+            }
+        }
+
+        // save the state for server-side collection to avoid null
+        // flash as new data loads.
+        this._saveState(id, collection, collection, start, end);
+        return collection;
+    }
+
+    // Create an IPaginationInstance object, using defaults for any optional properties not supplied.
+    private _createInstance(collection: any[], args: any): IPaginationInstance {
+        let config: any = args;
+        this._checkConfig(config);
+
+        return {
+            id: config.id,
+            itemsPerPage: config.itemsPerPage || 0,
+            currentPage: config.currentPage || 1,
+            totalItems: config.totalItems || collection.length
+        };
+    }
+
+    // Ensure the argument passed to the filter contains the required properties.
+    private _checkConfig(config: any): void {
+        const required: String[] = ["itemsPerPage", "currentPage"];
+        const missing: String[] = required.filter((prop: any) => !config.hasOwnProperty(prop));
+        if (0 < missing.length) {
+            throw new Error(`PaginatePipe: Argument is missing the following required properties: ${missing.join(", ")}`);
+        }
+    }
+
+    /**
+     * To avoid returning a brand new array each time the pipe is run, we store the state of the sliced
+     * array for a given id. This means that the next time the pipe is run on this collection & id, we just
+     * need to check that the collection, start and end points are all identical, and if so, return the
+     * last sliced array.
+     */
+    private _saveState(id: string, collection: any[], slice: any[], start: number, end: number): void {
+        this.state[id] = {
+            collection,
+            size: collection.length,
+            slice,
+            start,
+            end
+        };
+    }
+
+    // For a given id, returns true if the collection, size, start and end values are identical.
+    private _stateIsIdentical(id: string, collection: any[], start: number, end: number): boolean {
+        let state: any = this.state[id];
+        if (!state) {
+            return false;
+        }
+        return state.collection === collection &&
+            state.size === collection.length &&
+            state.start === start &&
+            state.end === end;
+    }
+}

package/projects/corecomponents/src/lib/components/pagination/pagination-instance.ts

@@ -0,0 +1,18 @@
+// Represents a pagination instance: the configuration object for a single pagination component.
+export interface IPaginationInstance {
+    // An optional ID for the pagination instance. Only useful if you wish to have more than once instance at a time in a given component.
+    id?: string;
+    // The number of items per paginated page.
+    itemsPerPage: number;
+    // The current (active) page.
+    currentPage: number;
+    /**
+     * The total number of items in the collection. Only useful when
+     * doing server-side paging, where the collection size is limited
+     * to a single page returned by the server API.
+     *
+     * For in-memory paging, this property should not be set, as it
+     * will be automatically set to the value of  collection.length.
+     */
+    totalItems?: number;
+}

package/projects/corecomponents/src/lib/components/pagination/pagination.component.ts

@@ -0,0 +1,160 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+import { IPaginationInstance } from './pagination-instance';
+import { PaginationService } from './pagination.service';
+
+@Component({
+  selector: 'co-pagination',
+  template: `
+    <div class="pagination-component-main-wrapper" *ngIf="!shouldBeHidden()">
+      <div>
+        <ng-content></ng-content>
+      </div>
+
+      <co-pagination-bar
+        [currentPage]="getCurrentPage()"
+        [totalItems]="totalItems"
+        [itemsPerPage]="itemsPerPage"
+        [directionLinks]="directionLinks"
+        [previousLabel]="previousLabel"
+        [nextLabel]="nextLabel"
+        (previousClick)="goToPreviousPage()"
+        (nextClick)="goToNextPage()"
+        (pageClick)="setCurrentPage($event)"
+      ></co-pagination-bar>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class PaginationComponent implements OnInit, OnChanges, OnDestroy {
+  @ViewChild('template')
+  public readonly template: ElementRef;
+
+  @Input()
+  public id: string;
+
+  @Input()
+  public maxSize: number = 7;
+
+  @Input()
+  public directionLinks: boolean = true;
+
+  @Input()
+  public previousLabel: string = 'Vorige pagina';
+
+  @Input()
+  public nextLabel: string = 'Volgende pagina';
+
+  @Input()
+  public autoHide: boolean = false;
+
+  // Emits the new page number.
+  @Output()
+  public readonly pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  @HostBinding('class.co-pagination')
+  public showClass: boolean = true;
+
+  public totalItems: number = 1;
+  public itemsPerPage: number = 20;
+
+  private changeSub: Subscription;
+
+
+  constructor(private _paginationService: PaginationService) {
+    this.changeSub = this._paginationService.change.subscribe((id: string) => {
+      if (this.id === id) {
+        this._updatePageLinks();
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    if (!this.id) {
+      this.id = this._paginationService.DEFAULT_ID;
+    }
+    this._updatePageLinks();
+  }
+
+  ngOnChanges(): void {
+    this._updatePageLinks();
+  }
+
+  ngOnDestroy(): void {
+    this.changeSub.unsubscribe();
+  }
+
+  public goToFirstPage(): void {
+      this.setCurrentPage(1);
+  }
+
+  public goToPreviousPage(): void {
+      this.setCurrentPage(this.getCurrentPage() - 1);
+  }
+
+  public goToNextPage(): void {
+      this.setCurrentPage(this.getCurrentPage() + 1);
+  }
+
+  public setCurrentPage(page: number): void {
+    this.pageChange.emit(page);
+  }
+
+  public shouldBeHidden(): boolean {
+    if (!this.autoHide) {
+      return false;
+    } else {
+      let instance: IPaginationInstance = this._paginationService.getInstance();
+      return (instance.totalItems <= instance.itemsPerPage);
+    }
+  }
+
+  /**
+   * Updates the page links and checks that the current page is valid. Should run whenever the
+   * PaginationService.change stream emits a value matching the current ID, or when any of the
+   * input values changes.
+   */
+  private _updatePageLinks(): void {
+    let paginationInstance: IPaginationInstance = this._paginationService.getInstance(this.id);
+
+    const correctedCurrentPage: number = this.outOfBoundCorrection(paginationInstance);
+    if (correctedCurrentPage !== paginationInstance.currentPage) {
+      this.setCurrentPage(correctedCurrentPage);
+    }
+
+    this.totalItems = paginationInstance.totalItems;
+    this.itemsPerPage = paginationInstance.itemsPerPage;
+  }
+
+  public getCurrentPage(): number {
+    return this._paginationService.getCurrentPage(this.id);
+  }
+
+
+  /**
+   * Checks that the instance.currentPage property is within bounds for the current page range.
+   * If not, return a correct value for currentPage, or the current value if OK.
+   */
+  private outOfBoundCorrection(instance: IPaginationInstance): number {
+    const totalPages: number = Math.ceil(instance.totalItems / instance.itemsPerPage);
+    if (totalPages < instance.currentPage && 0 < totalPages) {
+      return totalPages;
+    } else if (instance.currentPage < 1) {
+      return 1;
+    }
+
+    return instance.currentPage;
+  }
+}