@colijnit/corecomponents_v12 12.0.46 → 12.0.49

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4900,7 +4900,7 @@
                     break;
                 }
                 else if (node.children.length > 0) {
-                    this._findInputNode(node.children);
+                    return this._findInputNode(node.children);
                 }
             }
         };
@@ -5394,6 +5394,7 @@
              * Where 'text' is showing in the dropdown and 'id' used for the model binding
              */
             _this.fields = {};
+            _this.allowFiltering = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -5410,7 +5411,7 @@
     DropDownListComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-drop-down-list",
-                    template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n      (valueChange)=\"handleValueChanged($event)\"\n      showClearButton=\"true\"\n      floatLabelType=\"Auto\"\n    >\n    </ejs-dropdownlist>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [allowFiltering]=\"allowFiltering\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [filterBarPlaceholder]=\"filterBarPlaceholder\"\n      [filterType]=\"filterType\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n      (valueChange)=\"handleValueChanged($event)\"\n      showClearButton=\"true\"\n      floatLabelType=\"Auto\"\n    >\n    </ejs-dropdownlist>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [
                         ej2AngularDropdowns.CheckBoxSelectionService,
                         {
@@ -5436,6 +5437,9 @@
         collection: [{ type: core.Input }],
         fields: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
+        allowFiltering: [{ type: core.Input }],
+        filterBarPlaceholder: [{ type: core.Input }],
+        filterType: [{ type: core.Input }],
         itemTemplate: [{ type: core.Input }],
         headerTemplate: [{ type: core.Input }],
         valueTemplate: [{ type: core.Input }],
@@ -6430,7 +6434,7 @@
     InputDateRangePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-date-range",
-                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"rangeChange()\"\n      (close)=\"close.next($event)\"\n      (select)=\"select.next($event)\"\n      (cleared)=\"cleared.next($event)\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-daterangepicker\n      floatLabelType=\"Auto\"\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"rangeChange()\"\n      (close)=\"close.next($event)\"\n      (select)=\"select.next($event)\"\n      (cleared)=\"cleared.next($event)\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -7261,7 +7265,7 @@
     InputTextComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-text",
-                    template: "\n    <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\" [textContent]=\"placeholder\"></label>\n    <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\"></co-icon>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [min]=\"type === 'number' && this.min ? this.min : undefined\"\n           [max]=\"type === 'number' && this.max ? this.max : undefined\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"></co-icon>\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n      [committing]=\"committing\"\n      [commitFinished]=\"commitFinished\"\n      (commitClick)=\"commitClick($event)\"\n      (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\" [textContent]=\"placeholder\"></label>\n    <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\"></co-icon>\n    <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"></co-icon>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [min]=\"type === 'number' && this.min ? this.min : undefined\"\n           [max]=\"type === 'number' && this.max ? this.max : undefined\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n      [committing]=\"committing\"\n      [commitFinished]=\"commitFinished\"\n      (commitClick)=\"commitClick($event)\"\n      (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextComponent; })
@@ -7547,9 +7551,9 @@
         function InputSearchComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.searchIcon = exports.CoreComponentsIcon.Magnifier;
-            _this.iconRight = false;
-            _this.noIcon = false;
             _this.search = new core.EventEmitter();
+            _this.useLeftIcon = false;
+            _this.useRightIcon = false;
             return _this;
         }
         InputSearchComponent.prototype.showClass = function () {
@@ -7568,18 +7572,24 @@
     InputSearchComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-input-search',
-                    template: "\n    <co-input-text\n      [model]=\"model\"\n      [leftIcon]=\"!iconRight && !noIcon ? searchIcon : undefined\"\n      [rightIcon]=\"iconRight && !noIcon ? searchIcon : undefined\"\n      [placeholder]=\"placeholder\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n    ></co-input-text>\n  ",
+                    template: "\n    <co-input-text\n      [model]=\"model\"\n      [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n      [rightIcon]=\"useRightIcon ? searchIcon : null\"\n      [placeholder]=\"placeholder\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n    ></co-input-text>\n  ",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     InputSearchComponent.propDecorators = {
         placeholder: [{ type: core.Input }],
-        iconRight: [{ type: core.Input }],
-        noIcon: [{ type: core.HostBinding, args: ['class.no-icon',] }, { type: core.Input }],
         search: [{ type: core.Output }],
+        useLeftIcon: [{ type: core.Input }],
+        useRightIcon: [{ type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ['class.co-input-search',] }]
-    };
+    };
+    __decorate([
+        InputBoolean()
+    ], InputSearchComponent.prototype, "useLeftIcon", void 0);
+    __decorate([
+        InputBoolean()
+    ], InputSearchComponent.prototype, "useRightIcon", void 0);
 
     var InputSearchModule = /** @class */ (function () {
         function InputSearchModule() {
@@ -9848,9 +9858,6 @@
                 this.cellClick.next();
             }
         };
-        SimpleGridCellComponent.prototype.ngOnChanges = function (changes) {
-            console.log(changes);
-        };
         SimpleGridCellComponent.prototype._setFocusComponent = function () {
             if (this.editMode && this.fieldEditMode) {
                 var element = this._getElement();
@@ -10518,6 +10525,403 @@
                 },] }
     ];
 
+    var PaginationService = /** @class */ (function () {
+        function PaginationService() {
+            this.change = new rxjs.Subject();
+            this.instances = {};
+        }
+        Object.defineProperty(PaginationService.prototype, "DEFAULT_ID", {
+            get: function () {
+                return PaginationService.DEFAULT_ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PaginationService.prototype.register = function (instance) {
+            if (!instance.id) {
+                instance.id = PaginationService.DEFAULT_ID;
+            }
+            if (!this.instances[instance.id]) {
+                this.instances[instance.id] = instance;
+                this.change.next(instance.id);
+            }
+            else {
+                var changed = this.updateInstance(instance);
+                if (changed) {
+                    this.change.next(instance.id);
+                }
+            }
+        };
+        // Returns the current page number.
+        PaginationService.prototype.getCurrentPage = function (id) {
+            if (this.instances[id]) {
+                return this.instances[id].currentPage;
+            }
+        };
+        // Sets the current page number.
+        PaginationService.prototype.setCurrentPage = function (id, page) {
+            if (this.instances[id]) {
+                var instance = this.instances[id];
+                var maxPage = Math.ceil(instance.totalItems / instance.itemsPerPage);
+                if (page <= maxPage && 1 <= page) {
+                    this.instances[id].currentPage = page;
+                    this.change.next(id);
+                }
+            }
+        };
+        // Sets the value of instance.totalItems
+        PaginationService.prototype.setTotalItems = function (id, totalItems) {
+            if (this.instances[id] && 0 <= totalItems) {
+                this.instances[id].totalItems = totalItems;
+                this.change.next(id);
+            }
+        };
+        // Sets the value of instance.itemsPerPage.
+        PaginationService.prototype.setItemsPerPage = function (id, itemsPerPage) {
+            if (this.instances[id]) {
+                this.instances[id].itemsPerPage = itemsPerPage;
+                this.change.next(id);
+            }
+        };
+        /**
+         * Returns a clone of the pagination instance object matching the id. If no
+         * id specified, returns the instance corresponding to the default id.
+         */
+        PaginationService.prototype.getInstance = function (id) {
+            if (id === void 0) { id = PaginationService.DEFAULT_ID; }
+            if (this.instances[id]) {
+                return ObjectUtils.GetShallowClone(this.instances[id]);
+            }
+            return {};
+        };
+        /**
+         * Check each property of the instance and update any that have changed. Return
+         * true if any changes were made, else return false.
+         */
+        PaginationService.prototype.updateInstance = function (instance) {
+            var changed = false;
+            for (var prop in this.instances[instance.id]) {
+                if (instance[prop] !== this.instances[instance.id][prop]) {
+                    this.instances[instance.id][prop] = instance[prop];
+                    changed = true;
+                }
+            }
+            return changed;
+        };
+        return PaginationService;
+    }());
+    PaginationService.DEFAULT_ID = "DEFAULT_PAGINATION_ID";
+    PaginationService.decorators = [
+        { type: core.Injectable }
+    ];
+    PaginationService.ctorParameters = function () { return []; };
+
+    var PaginationComponent = /** @class */ (function () {
+        function PaginationComponent(_paginationService) {
+            var _this = this;
+            this._paginationService = _paginationService;
+            this.maxSize = 7;
+            this.directionLinks = true;
+            this.previousLabel = 'Vorige pagina';
+            this.nextLabel = 'Volgende pagina';
+            this.autoHide = false;
+            // Emits the new page number.
+            this.pageChange = new core.EventEmitter();
+            this.showClass = true;
+            this.pages = [];
+            this.changeSub = this._paginationService.change.subscribe(function (id) {
+                if (_this.id === id) {
+                    _this._updatePageLinks();
+                }
+            });
+        }
+        PaginationComponent.prototype.ngOnInit = function () {
+            if (!this.id) {
+                this.id = this._paginationService.DEFAULT_ID;
+            }
+            this._updatePageLinks();
+        };
+        PaginationComponent.prototype.ngOnChanges = function () {
+            this._updatePageLinks();
+        };
+        PaginationComponent.prototype.ngOnDestroy = function () {
+            this.changeSub.unsubscribe();
+        };
+        PaginationComponent.prototype.goToFirstPage = function () {
+            if (!this.isOnFirstPage()) {
+                this.setCurrentPage(1);
+            }
+        };
+        PaginationComponent.prototype.goToPreviousPage = function () {
+            if (!this.isOnFirstPage()) {
+                this.setCurrentPage(this.getCurrentPage() - 1);
+            }
+        };
+        PaginationComponent.prototype.goToNextPage = function () {
+            if (!this.isOnLastPage()) {
+                this.setCurrentPage(this.getCurrentPage() + 1);
+            }
+        };
+        PaginationComponent.prototype.setCurrentPage = function (page) {
+            this.pageChange.emit(page);
+        };
+        PaginationComponent.prototype.isOnFirstPage = function () {
+            return this.getCurrentPage() === 1;
+        };
+        PaginationComponent.prototype.isOnLastPage = function () {
+            return this.getLastPage() === this.getCurrentPage();
+        };
+        PaginationComponent.prototype.shouldBeHidden = function () {
+            if (!this.autoHide) {
+                return false;
+            }
+            else {
+                var instance = 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.
+         */
+        PaginationComponent.prototype._updatePageLinks = function () {
+            var paginationInstance = this._paginationService.getInstance(this.id);
+            this.pages = this.createPageArray(paginationInstance.currentPage, paginationInstance.itemsPerPage, paginationInstance.totalItems, this.maxSize);
+            var correctedCurrentPage = this.outOfBoundCorrection(paginationInstance);
+            if (correctedCurrentPage !== paginationInstance.currentPage) {
+                this.setCurrentPage(correctedCurrentPage);
+            }
+        };
+        PaginationComponent.prototype.getCurrentPage = function () {
+            return this._paginationService.getCurrentPage(this.id);
+        };
+        PaginationComponent.prototype.getLastPage = function () {
+            var instance = this._paginationService.getInstance(this.id);
+            return Math.ceil(instance.totalItems / instance.itemsPerPage);
+        };
+        /**
+         * 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.
+         */
+        PaginationComponent.prototype.outOfBoundCorrection = function (instance) {
+            var totalPages = Math.ceil(instance.totalItems / instance.itemsPerPage);
+            if (totalPages < instance.currentPage && 0 < totalPages) {
+                return totalPages;
+            }
+            else if (instance.currentPage < 1) {
+                return 1;
+            }
+            return instance.currentPage;
+        };
+        // Returns an array of IPage objects to use in the pagination controls.
+        PaginationComponent.prototype.createPageArray = function (currentPage, itemsPerPage, totalItems, paginationRange) {
+            // paginationRange could be a string if passed from attribute, so cast to number.
+            paginationRange = +paginationRange;
+            var pages = [];
+            var totalPages = Math.ceil(totalItems / itemsPerPage);
+            var halfWay = Math.ceil(paginationRange / 2);
+            var isStart = currentPage <= halfWay;
+            var isEnd = totalPages - halfWay < currentPage;
+            var isMiddle = !isStart && !isEnd;
+            var ellipsesNeeded = paginationRange < totalPages;
+            var i = 1;
+            while (i <= totalPages && i <= paginationRange) {
+                var label = void 0;
+                var pageNumber = this.calculatePageNumber(i, currentPage, paginationRange, totalPages);
+                var openingEllipsesNeeded = (i === 2 && (isMiddle || isEnd));
+                var closingEllipsesNeeded = (i === paginationRange - 1 && (isMiddle || isStart));
+                if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
+                    label = '...';
+                }
+                else {
+                    label = '' + pageNumber;
+                }
+                pages.push({
+                    label: label,
+                    value: pageNumber
+                });
+                i++;
+            }
+            return pages;
+        };
+        // Given the position in the sequence of pagination links [i], figure out what page number corresponds to that position.
+        PaginationComponent.prototype.calculatePageNumber = function (i, currentPage, paginationRange, totalPages) {
+            var halfWay = Math.ceil(paginationRange / 2);
+            if (i === paginationRange) {
+                return totalPages;
+            }
+            else if (i === 1) {
+                return i;
+            }
+            else if (paginationRange < totalPages) {
+                if (totalPages - halfWay < currentPage) {
+                    return totalPages - paginationRange + i;
+                }
+                else if (halfWay < currentPage) {
+                    return currentPage - halfWay + i;
+                }
+                else {
+                    return i;
+                }
+            }
+            else {
+                return i;
+            }
+        };
+        return PaginationComponent;
+    }());
+    PaginationComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'co-pagination',
+                    template: "\n    <div class=\"pagination-component-main-wrapper\" *ngIf=\"!shouldBeHidden()\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n      <ul class=\"pagination\">\n        <li *ngIf=\"directionLinks\" class=\"pagination-previous\">\n          <a (click)=\"goToPreviousPage()\" [class.disabled]=\"isOnFirstPage()\">{{ previousLabel }}</a>\n        </li>\n        <li *ngFor=\"let page of pages\" [class.current]=\"getCurrentPage() === page.value\" (click)=\"setCurrentPage(page.value)\">\n          <span>{{page.label}}</span>\n        </li>\n        <li *ngIf=\"directionLinks\" class=\"pagination-next\">\n          <a (click)=\"goToNextPage()\" [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n        </li>\n      </ul>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    PaginationComponent.ctorParameters = function () { return [
+        { type: PaginationService }
+    ]; };
+    PaginationComponent.propDecorators = {
+        template: [{ type: core.ViewChild, args: ['template',] }],
+        id: [{ type: core.Input }],
+        maxSize: [{ type: core.Input }],
+        directionLinks: [{ type: core.Input }],
+        previousLabel: [{ type: core.Input }],
+        nextLabel: [{ type: core.Input }],
+        autoHide: [{ type: core.Input }],
+        pageChange: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ['class.co-pagination',] }]
+    };
+
+    var LARGE_NUMBER = 999999999;
+    var PaginatePipe = /** @class */ (function () {
+        function PaginatePipe(paginateService) {
+            this.paginateService = paginateService;
+            // store the values from the last time the pipe
+            this.state = {};
+        }
+        PaginatePipe.prototype.transform = function (collection, args) {
+            // 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)) {
+                var _id = args.id || this.paginateService.DEFAULT_ID;
+                if (this.state[_id]) {
+                    return this.state[_id].slice;
+                }
+                else {
+                    return collection;
+                }
+            }
+            var serverSideMode = args.totalItems !== undefined;
+            var instance = this._createInstance(collection, args);
+            var id = instance.id;
+            var start;
+            var end;
+            var perPage = instance.itemsPerPage;
+            this.paginateService.register(instance);
+            if (!serverSideMode && collection instanceof Array) {
+                perPage = perPage || LARGE_NUMBER;
+                start = (instance.currentPage - 1) * perPage;
+                end = start + perPage;
+                var isIdentical = this._stateIsIdentical(id, collection, start, end);
+                if (isIdentical) {
+                    return this.state[id].slice;
+                }
+                else {
+                    var slice = collection.slice(start, end);
+                    this._saveState(id, collection, slice, start, end);
+                    this.paginateService.change.next(id);
+                    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.
+        PaginatePipe.prototype._createInstance = function (collection, args) {
+            var config = args;
+            this._checkConfig(config);
+            return {
+                id: config.id || this.paginateService.DEFAULT_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.
+        PaginatePipe.prototype._checkConfig = function (config) {
+            var required = ["itemsPerPage", "currentPage"];
+            var missing = required.filter(function (prop) { return !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.
+         */
+        PaginatePipe.prototype._saveState = function (id, collection, slice, start, end) {
+            this.state[id] = {
+                collection: collection,
+                size: collection.length,
+                slice: slice,
+                start: start,
+                end: end
+            };
+        };
+        // For a given id, returns true if the collection, size, start and end values are identical.
+        PaginatePipe.prototype._stateIsIdentical = function (id, collection, start, end) {
+            var state = this.state[id];
+            if (!state) {
+                return false;
+            }
+            return state.collection === collection &&
+                state.size === collection.length &&
+                state.start === start &&
+                state.end === end;
+        };
+        return PaginatePipe;
+    }());
+    PaginatePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'paginate',
+                    pure: false
+                },] }
+    ];
+    PaginatePipe.ctorParameters = function () { return [
+        { type: PaginationService }
+    ]; };
+
+    var PaginationModule = /** @class */ (function () {
+        function PaginationModule() {
+        }
+        return PaginationModule;
+    }());
+    PaginationModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    providers: [
+                        PaginationService
+                    ],
+                    declarations: [
+                        PaginationComponent,
+                        PaginatePipe
+                    ],
+                    exports: [
+                        PaginationComponent,
+                        PaginatePipe
+                    ]
+                },] }
+    ];
+
     /*
      * Public API Surface of corecomponents
      */
@@ -10603,6 +11007,8 @@
     exports.MultiSelectListComponent = MultiSelectListComponent;
     exports.MultiSelectListModule = MultiSelectListModule;
     exports.ObserveVisibilityModule = ObserveVisibilityModule;
+    exports.PaginationComponent = PaginationComponent;
+    exports.PaginationModule = PaginationModule;
     exports.PopupButtonsComponent = PopupButtonsComponent;
     exports.PopupMessageDisplayComponent = PopupMessageDisplayComponent;
     exports.PopupModule = PopupModule;
@@ -10623,6 +11029,8 @@
     exports["ɵbc"] = PrependPipe;
     exports["ɵbd"] = ClickOutsideDirective;
     exports["ɵbe"] = ClickOutsideMasterService;
+    exports["ɵbf"] = PaginationService;
+    exports["ɵbg"] = PaginatePipe;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;