@colijnit/corecomponents_v12 255.1.1 → 255.1.2

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

@@ -1,257 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,18 +0,0 @@
-// 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

@@ -1,160 +0,0 @@
-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;
-  }
-}