ngx-easy-table/bundles/ngx-easy-table.umd.js

Angular easy table

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/cdk/drag-drop'), require('ngx-pagination'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/scrolling')) :
    typeof define === 'function' && define.amd ? define('ngx-easy-table', ['exports', '@angular/common', '@angular/core', '@angular/cdk/drag-drop', 'ngx-pagination', 'rxjs', 'rxjs/operators', '@angular/cdk/scrolling'], factory) :
    (global = global || self, factory(global['ngx-easy-table'] = {}, global.ng.common, global.ng.core, global.ng.cdk['drag-drop'], global.ngxPagination, global.rxjs, global.rxjs.operators, global.ng.cdk.scrolling));
}(this, function (exports, common, core, dragDrop, ngxPagination, rxjs, operators, scrolling) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    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

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    var extendStatics = function(d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    var __assign = function() {
        __assign = Object.assign || function __assign(t) {
            for (var s, i = 1, n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
            }
            return t;
        };
        return __assign.apply(this, arguments);
    };

    function __rest(s, e) {
        var t = {};
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
            t[p] = s[p];
        if (s != null && typeof Object.getOwnPropertySymbols === "function")
            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                    t[p[i]] = s[p[i]];
            }
        return t;
    }

    function __decorate(decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    }

    function __param(paramIndex, decorator) {
        return function (target, key) { decorator(target, key, paramIndex); }
    }

    function __metadata(metadataKey, metadataValue) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
    }

    function __awaiter(thisArg, _arguments, P, generator) {
        return new (P || (P = Promise))(function (resolve, reject) {
            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
            step((generator = generator.apply(thisArg, _arguments || [])).next());
        });
    }

    function __generator(thisArg, body) {
        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
        function verb(n) { return function (v) { return step([n, v]); }; }
        function step(op) {
            if (f) throw new TypeError("Generator is already executing.");
            while (_) try {
                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
                if (y = 0, t) op = [op[0] & 2, t.value];
                switch (op[0]) {
                    case 0: case 1: t = op; break;
                    case 4: _.label++; return { value: op[1], done: false };
                    case 5: _.label++; y = op[1]; op = [0]; continue;
                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
                    default:
                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                        if (t[2]) _.ops.pop();
                        _.trys.pop(); continue;
                }
                op = body.call(thisArg, _);
            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
        }
    }

    function __exportStar(m, exports) {
        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
    }

    function __values(o) {
        var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
        if (m) return m.call(o);
        return {
            next: function () {
                if (o && i >= o.length) o = void 0;
                return { value: o && o[i++], done: !o };
            }
        };
    }

    function __read(o, n) {
        var m = typeof Symbol === "function" && o[Symbol.iterator];
        if (!m) return o;
        var i = m.call(o), r, ar = [], e;
        try {
            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
        }
        catch (error) { e = { error: error }; }
        finally {
            try {
                if (r && !r.done && (m = i["return"])) m.call(i);
            }
            finally { if (e) throw e.error; }
        }
        return ar;
    }

    function __spread() {
        for (var ar = [], i = 0; i < arguments.length; i++)
            ar = ar.concat(__read(arguments[i]));
        return ar;
    }

    function __spreadArrays() {
        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
        for (var r = Array(s), k = 0, i = 0; i < il; i++)
            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                r[k] = a[j];
        return r;
    };

    function __await(v) {
        return this instanceof __await ? (this.v = v, this) : new __await(v);
    }

    function __asyncGenerator(thisArg, _arguments, generator) {
        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
        var g = generator.apply(thisArg, _arguments || []), i, q = [];
        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
        function fulfill(value) { resume("next", value); }
        function reject(value) { resume("throw", value); }
        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
    }

    function __asyncDelegator(o) {
        var i, p;
        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
    }

    function __asyncValues(o) {
        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
        var m = o[Symbol.asyncIterator], i;
        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
    }

    function __makeTemplateObject(cooked, raw) {
        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
        return cooked;
    };

    function __importStar(mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
        result.default = mod;
        return result;
    }

    function __importDefault(mod) {
        return (mod && mod.__esModule) ? mod : { default: mod };
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /**
     * @record
     */
    function Columns() { }
    if (false) {
        /** @type {?} */
        Columns.prototype.key;
        /** @type {?} */
        Columns.prototype.title;
        /** @type {?|undefined} */
        Columns.prototype.placeholder;
        /** @type {?|undefined} */
        Columns.prototype.width;
        /** @type {?|undefined} */
        Columns.prototype.cellTemplate;
        /** @type {?|undefined} */
        Columns.prototype.orderEnabled;
        /** @type {?|undefined} */
        Columns.prototype.orderEventOnly;
        /** @type {?|undefined} */
        Columns.prototype.searchEnabled;
        /** @type {?|undefined} */
        Columns.prototype.orderBy;
        /** @type {?|undefined} */
        Columns.prototype.cssClass;
        /** @type {?|undefined} */
        Columns.prototype.pinned;
        /** @type {?|undefined} */
        Columns.prototype.headerActionTemplate;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /**
     * @record
     */
    function Config() { }
    if (false) {
        /** @type {?} */
        Config.prototype.searchEnabled;
        /** @type {?} */
        Config.prototype.headerEnabled;
        /** @type {?} */
        Config.prototype.orderEnabled;
        /** @type {?|undefined} */
        Config.prototype.orderEventOnly;
        /** @type {?} */
        Config.prototype.paginationEnabled;
        /** @type {?|undefined} */
        Config.prototype.exportEnabled;
        /** @type {?} */
        Config.prototype.clickEvent;
        /** @type {?} */
        Config.prototype.selectRow;
        /** @type {?} */
        Config.prototype.selectCol;
        /** @type {?} */
        Config.prototype.selectCell;
        /** @type {?} */
        Config.prototype.rows;
        /** @type {?} */
        Config.prototype.additionalActions;
        /** @type {?} */
        Config.prototype.serverPagination;
        /** @type {?} */
        Config.prototype.isLoading;
        /** @type {?} */
        Config.prototype.detailsTemplate;
        /** @type {?} */
        Config.prototype.groupRows;
        /** @type {?} */
        Config.prototype.paginationRangeEnabled;
        /** @type {?} */
        Config.prototype.collapseAllRows;
        /** @type {?} */
        Config.prototype.checkboxes;
        /** @type {?|undefined} */
        Config.prototype.radio;
        /** @type {?} */
        Config.prototype.resizeColumn;
        /** @type {?} */
        Config.prototype.fixedColumnWidth;
        /** @type {?} */
        Config.prototype.horizontalScroll;
        /** @type {?} */
        Config.prototype.draggable;
        /** @type {?} */
        Config.prototype.logger;
        /** @type {?|undefined} */
        Config.prototype.showDetailsArrow;
        /** @type {?|undefined} */
        Config.prototype.showContextMenu;
        /** @type {?|undefined} */
        Config.prototype.persistState;
        /** @type {?|undefined} */
        Config.prototype.paginationMaxSize;
        /** @type {?|undefined} */
        Config.prototype.threeWaySort;
        /** @type {?|undefined} */
        Config.prototype.columnReorder;
        /** @type {?|undefined} */
        Config.prototype.rowReorder;
        /** @type {?|undefined} */
        Config.prototype.infiniteScroll;
        /** @type {?|undefined} */
        Config.prototype.infiniteScrollThrottleTime;
        /** @type {?} */
        Config.prototype.tableLayout;
    }
    /** @enum {string} */
    var STYLE = {
        TINY: 'tiny',
        BIG: 'big',
        NORMAL: 'normal',
    };
    /** @enum {string} */
    var THEME = {
        LIGHT: 'light',
        DARK: 'dark',
    };

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /** @enum {string} */
    var Event = {
        onPagination: 'onPagination',
        onOrder: 'onOrder',
        onGlobalSearch: 'onGlobalSearch',
        onSearch: 'onSearch',
        onClick: 'onClick',
        onDoubleClick: 'onDoubleClick',
        onCheckboxSelect: 'onCheckboxSelect',
        onRadioSelect: 'onRadioSelect',
        onCheckboxToggle: 'onCheckboxToggle',
        onSelectAll: 'onSelectAll',
        onInfiniteScrollEnd: 'onInfiniteScrollEnd',
        onColumnResizeMouseDown: 'onColumnResizeMouseDown',
        onColumnResizeMouseUp: 'onColumnResizeMouseUp',
        onRowDrop: 'onRowDrop',
        onRowCollapsedShow: 'onRowCollapsedShow',
        onRowCollapsedHide: 'onRowCollapsedHide',
        onRowContextMenu: 'onRowContextMenu',
    };

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /**
     * @record
     */
    function Pagination() { }
    if (false) {
        /** @type {?} */
        Pagination.prototype.limit;
        /** @type {?} */
        Pagination.prototype.offset;
        /** @type {?} */
        Pagination.prototype.count;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /** @enum {string} */
    var API = {
        rowContextMenuClicked: 'rowContextMenuClicked',
        setInputValue: 'setInputValue',
        toolPanelClicked: 'toolPanelClicked',
        toggleRowIndex: 'toggleRowIndex',
        toggleCheckbox: 'toggleCheckbox',
        onGlobalSearch: 'onGlobalSearch',
        setPaginationCurrentPage: 'setPaginationCurrentPage',
        getPaginationCurrentPage: 'getPaginationCurrentPage',
        getPaginationTotalItems: 'getPaginationTotalItems',
        getNumberOfRowsPerPage: 'getNumberOfRowsPerPage',
        getPaginationLastPage: 'getPaginationLastPage',
        setPaginationRange: 'setPaginationRange',
        setPaginationPreviousLabel: 'setPaginationPreviousLabel',
        setPaginationNextLabel: 'setPaginationNextLabel',
        setPaginationDisplayLimit: 'setPaginationDisplayLimit',
        setTableClass: 'setTableClass',
        setRowClass: 'setRowClass',
        setCellClass: 'setCellClass',
        setRowStyle: 'setRowStyle',
        setCellStyle: 'setCellStyle',
        sortBy: 'sortBy',
    };
    /**
     * @record
     */
    function RowClass() { }
    if (false) {
        /** @type {?} */
        RowClass.prototype.row;
        /** @type {?} */
        RowClass.prototype.className;
    }
    /**
     * @record
     */
    function CellClass() { }
    if (false) {
        /** @type {?} */
        CellClass.prototype.row;
        /** @type {?} */
        CellClass.prototype.cell;
        /** @type {?} */
        CellClass.prototype.className;
    }
    /**
     * @record
     */
    function RowStyle() { }
    if (false) {
        /** @type {?} */
        RowStyle.prototype.row;
        /** @type {?} */
        RowStyle.prototype.attr;
        /** @type {?} */
        RowStyle.prototype.value;
    }
    /**
     * @record
     */
    function CellStyle() { }
    if (false) {
        /** @type {?} */
        CellStyle.prototype.row;
        /** @type {?} */
        CellStyle.prototype.cell;
        /** @type {?} */
        CellStyle.prototype.attr;
        /** @type {?} */
        CellStyle.prototype.value;
    }
    /**
     * @record
     */
    function APIDefinition() { }
    if (false) {
        /**
         * @template B
         * @param {?} event
         * @return {?}
         */
        APIDefinition.prototype.apiEvent = function (event) { };
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /** @type {?} */
    var DefaultConfig = {
        searchEnabled: false,
        headerEnabled: true,
        orderEnabled: true,
        orderEventOnly: false,
        paginationEnabled: true,
        exportEnabled: false,
        clickEvent: true,
        selectRow: false,
        selectCol: false,
        selectCell: false,
        rows: 10,
        additionalActions: false,
        serverPagination: false,
        isLoading: false,
        detailsTemplate: false,
        groupRows: false,
        paginationRangeEnabled: true,
        collapseAllRows: false,
        checkboxes: false,
        radio: false,
        resizeColumn: false,
        fixedColumnWidth: true,
        horizontalScroll: false,
        draggable: false,
        logger: false,
        showDetailsArrow: false,
        showContextMenu: false,
        persistState: false,
        paginationMaxSize: 5,
        threeWaySort: false,
        tableLayout: {
            style: STYLE.NORMAL,
            theme: THEME.LIGHT,
            borderless: false,
            hover: true,
            striped: false,
        },
    };
    var DefaultConfigService = /** @class */ (function () {
        function DefaultConfigService() {
        }
        DefaultConfigService.config = DefaultConfig;
        DefaultConfigService.decorators = [
            { type: core.Injectable }
        ];
        return DefaultConfigService;
    }());
    if (false) {
        /** @type {?} */
        DefaultConfigService.config;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /**
     * @record
     */
    function PaginationRange() { }
    if (false) {
        /** @type {?} */
        PaginationRange.prototype.page;
        /** @type {?} */
        PaginationRange.prototype.limit;
    }
    var PaginationComponent = /** @class */ (function () {
        function PaginationComponent() {
            this.updateRange = new core.EventEmitter();
            this.ranges = [5, 10, 25, 50, 100];
            this.showRange = false;
            this.screenReaderPaginationLabel = 'Pagination';
            this.screenReaderPageLabel = 'page';
            this.screenReaderCurrentLabel = 'You are on page';
            this.previousLabel = '';
            this.nextLabel = '';
            this.directionLinks = true;
        }
        /**
         * @param {?} targetElement
         * @return {?}
         */
        PaginationComponent.prototype.onClick = /**
         * @param {?} targetElement
         * @return {?}
         */
        function (targetElement) {
            if (this.paginationRange && !this.paginationRange.nativeElement.contains(targetElement)) {
                this.showRange = false;
            }
        };
        /**
         * @param {?} changes
         * @return {?}
         */
        PaginationComponent.prototype.ngOnChanges = /**
         * @param {?} changes
         * @return {?}
         */
        function (changes) {
            var config = changes.config;
            if (config && config.currentValue) {
                this.selectedLimit = this.config.rows;
            }
        };
        /**
         * @param {?} page
         * @return {?}
         */
        PaginationComponent.prototype.onPageChange = /**
         * @param {?} page
         * @return {?}
         */
        function (page) {
            this.updateRange.emit({
                page: page,
                limit: this.selectedLimit,
            });
        };
        /**
         * @param {?} limit
         * @param {?} callFromAPI
         * @return {?}
         */
        PaginationComponent.prototype.changeLimit = /**
         * @param {?} limit
         * @param {?} callFromAPI
         * @return {?}
         */
        function (limit, callFromAPI) {
            if (!callFromAPI) {
                this.showRange = !this.showRange;
            }
            this.selectedLimit = limit;
            this.updateRange.emit({
                page: 1,
                limit: limit,
            });
        };
        PaginationComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'pagination',
                        template: "<div class=\"ngx-pagination-wrapper\"\n     [style.display]=\"config.paginationEnabled ? '' : 'none'\"\n     [class.ngx-table__table--dark-pagination-wrapper]=\"config.tableLayout.theme === 'dark'\">\n  <div class=\"ngx-pagination-steps\">\n    <pagination-template\n      #paginationDirective=\"paginationApi\"\n      id=\"pagination-controls\"\n      [id]=\"id\"\n      [class.ngx-table__table--dark-pagination]=\"config.tableLayout.theme === 'dark'\"\n      [maxSize]=\"config.paginationMaxSize || 5\"\n      (pageChange)=\"onPageChange($event)\">\n      <ul class=\"ngx-pagination\"\n          role=\"navigation\"\n          [attr.aria-label]=\"screenReaderPaginationLabel\"\n          [class.responsive]=\"true\">\n        <li class=\"pagination-previous\" [class.disabled]=\"paginationDirective.isFirstPage()\" *ngIf=\"directionLinks\">\n          <a tabindex=\"0\" *ngIf=\"1 < paginationDirective.getCurrent()\" (keyup.enter)=\"paginationDirective.previous()\"\n             (click)=\"paginationDirective.previous()\"\n             [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n            {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n          </a>\n          <span *ngIf=\"paginationDirective.isFirstPage()\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n        <li class=\"small-screen\">\n          {{ paginationDirective.getCurrent() }} / {{ paginationDirective.getLastPage() }}\n        </li>\n        <li [class.current]=\"paginationDirective.getCurrent() === page.value\"\n            [class.ellipsis]=\"page.label === '...'\"\n            *ngFor=\"let page of paginationDirective.pages\">\n          <a tabindex=\"0\" (keyup.enter)=\"paginationDirective.setCurrent(page.value)\"\n             (click)=\"paginationDirective.setCurrent(page.value)\"\n             *ngIf=\"paginationDirective.getCurrent() !== page.value\">\n            <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n            <span>{{ page.label }}</span>\n          </a>\n          <ng-container *ngIf=\"paginationDirective.getCurrent() === page.value\">\n            <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n            <span>{{ page.label }}</span>\n          </ng-container>\n        </li>\n        <li class=\"pagination-next\" [class.disabled]=\"paginationDirective.isLastPage()\" *ngIf=\"directionLinks\">\n          <a tabindex=\"0\" *ngIf=\"!paginationDirective.isLastPage()\" (keyup.enter)=\"paginationDirective.next()\"\n             (click)=\"paginationDirective.next()\"\n             [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n            {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n          </a>\n          <span *ngIf=\"paginationDirective.isLastPage()\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n      </ul>\n    </pagination-template>\n  </div>\n  <div class=\"ngx-pagination-range\"\n       #paginationRange\n       [class.ngx-table__table--dark-pagination-range]=\"config.tableLayout.theme === 'dark'\"\n       *ngIf=\"config.paginationRangeEnabled\">\n    <div class=\"ngx-dropdown ngx-pagination-range-dropdown\"\n         id=\"rowAmount\">\n      <div class=\"ngx-btn-group\">\n        <div class=\"ngx-pagination-range-dropdown-button\"\n             (click)=\"showRange = !showRange\">\n          {{selectedLimit}} <i class=\"ngx-icon ngx-icon-arrow-down\"></i>\n        </div>\n        <ul class=\"ngx-menu\" *ngIf=\"showRange\">\n          <li class=\"ngx-pagination-range-dropdown-button-item\"\n              [class.ngx-pagination-range--selected]=\"limit === selectedLimit\"\n              (click)=\"changeLimit(limit, false)\"\n              *ngFor=\"let limit of ranges\">\n            <span>{{limit}}</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</div>\n",
                        changeDetection: core.ChangeDetectionStrategy.OnPush
                    }] }
        ];
        PaginationComponent.propDecorators = {
            paginationDirective: [{ type: core.ViewChild, args: ['paginationDirective', { static: true },] }],
            paginationRange: [{ type: core.ViewChild, args: ['paginationRange', { static: false },] }],
            pagination: [{ type: core.Input }],
            config: [{ type: core.Input }],
            id: [{ type: core.Input }],
            updateRange: [{ type: core.Output }],
            onClick: [{ type: core.HostListener, args: ['document:click', ['$event.target'],] }]
        };
        return PaginationComponent;
    }());
    if (false) {
        /** @type {?} */
        PaginationComponent.prototype.paginationDirective;
        /** @type {?} */
        PaginationComponent.prototype.paginationRange;
        /** @type {?} */
        PaginationComponent.prototype.pagination;
        /** @type {?} */
        PaginationComponent.prototype.config;
        /** @type {?} */
        PaginationComponent.prototype.id;
        /** @type {?} */
        PaginationComponent.prototype.updateRange;
        /** @type {?} */
        PaginationComponent.prototype.ranges;
        /** @type {?} */
        PaginationComponent.prototype.selectedLimit;
        /** @type {?} */
        PaginationComponent.prototype.showRange;
        /** @type {?} */
        PaginationComponent.prototype.screenReaderPaginationLabel;
        /** @type {?} */
        PaginationComponent.prototype.screenReaderPageLabel;
        /** @type {?} */
        PaginationComponent.prototype.screenReaderCurrentLabel;
        /** @type {?} */
        PaginationComponent.prototype.previousLabel;
        /** @type {?} */
        PaginationComponent.prototype.nextLabel;
        /** @type {?} */
        PaginationComponent.prototype.directionLinks;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var GroupRowsService = /** @class */ (function () {
        function GroupRowsService() {
        }
        /**
         * @template T
         * @param {?} data
         * @param {?} groupRowsBy
         * @return {?}
         */
        GroupRowsService.doGroupRows = /**
         * @template T
         * @param {?} data
         * @param {?} groupRowsBy
         * @return {?}
         */
        function (data, groupRowsBy) {
            /** @type {?} */
            var grouped = [];
            rxjs.from(data).pipe(operators.groupBy((/**
             * @param {?} row
             * @return {?}
             */
            function (row) { return row[groupRowsBy]; })), operators.flatMap((/**
             * @param {?} group
             * @return {?}
             */
            function (group) { return group.pipe(operators.reduce((/**
             * @param {?} acc
             * @param {?} curr
             * @return {?}
             */
            function (acc, curr) { return __spread(acc, [curr]); }), [])); }))).subscribe((/**
             * @param {?} row
             * @return {?}
             */
            function (row) { return grouped.push(row); }));
            return grouped;
        };
        GroupRowsService.decorators = [
            { type: core.Injectable }
        ];
        return GroupRowsService;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /* tslint:disable:no-useless-cast */
    var StyleService = /** @class */ (function () {
        function StyleService() {
        }
        /**
         * @param {?} val
         * @return {?}
         */
        StyleService.prototype.setRowClass = /**
         * @param {?} val
         * @return {?}
         */
        function (val) {
            /** @type {?} */
            var selector = "#table > tbody > tr:nth-child(" + val.row + ")";
            /** @type {?} */
            var row = (/** @type {?} */ (document.querySelector(selector)));
            if (row) {
                row.classList.add(val.className);
            }
        };
        /**
         * @param {?} val
         * @return {?}
         */
        StyleService.prototype.setCellClass = /**
         * @param {?} val
         * @return {?}
         */
        function (val) {
            /** @type {?} */
            var selector = "#table > tbody > tr:nth-child(" + val.row + ") > td:nth-child(" + val.cell + ")";
            /** @type {?} */
            var cell = (/** @type {?} */ (document.querySelector(selector)));
            if (cell) {
                cell.classList.add(val.className);
            }
        };
        /**
         * @param {?} val
         * @return {?}
         */
        StyleService.prototype.setRowStyle = /**
         * @param {?} val
         * @return {?}
         */
        function (val) {
            /** @type {?} */
            var selector = "#table > tbody > tr:nth-child(" + val.row + ")";
            /** @type {?} */
            var row = (/** @type {?} */ (document.querySelector(selector)));
            if (row) {
                // tslint:disable-next-line:no-string-literal
                row.style[val.attr] = val.value;
            }
        };
        /**
         * @param {?} val
         * @return {?}
         */
        StyleService.prototype.setCellStyle = /**
         * @param {?} val
         * @return {?}
         */
        function (val) {
            /** @type {?} */
            var selector = "#table > tbody > tr:nth-child(" + val.row + ") > td:nth-child(" + val.cell + ")";
            /** @type {?} */
            var cell = (/** @type {?} */ (document.querySelector(selector)));
            if (cell) {
                // tslint:disable-next-line:no-string-literal
                cell.style[val.attr] = val.value;
            }
        };
        /**
         * @param {?} pinned
         * @param {?} column
         * @return {?}
         */
        StyleService.prototype.pinnedWidth = /**
         * @param {?} pinned
         * @param {?} column
         * @return {?}
         */
        function (pinned, column) {
            if (pinned) {
                return 150 * column + 'px';
            }
        };
        StyleService.decorators = [
            { type: core.Injectable }
        ];
        return StyleService;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /**
     * @record
     */
    function RowContextMenuPosition() { }
    if (false) {
        /** @type {?} */
        RowContextMenuPosition.prototype.top;
        /** @type {?} */
        RowContextMenuPosition.prototype.left;
        /** @type {?} */
        RowContextMenuPosition.prototype.value;
    }
    var BaseComponent = /** @class */ (function () {
        function BaseComponent(cdr, scrollDispatcher, styleService) {
            var _this = this;
            this.cdr = cdr;
            this.scrollDispatcher = scrollDispatcher;
            this.styleService = styleService;
            this.unsubscribe = new rxjs.Subject();
            this.filterCount = -1;
            this.filteredCountSubject = new rxjs.Subject();
            this.tableClass = null;
            this.grouped = [];
            this.isSelected = false;
            this.page = 1;
            this.count = 0;
            this.sortState = new Map();
            this.sortKey = null;
            this.rowContextMenuPosition = {
                top: null,
                left: null,
                value: null,
            };
            this.sortBy = {
                key: '',
                order: 'asc',
            };
            this.selectedDetailsTemplateRowId = new Set();
            this.selectedCheckboxes = new Set();
            this.loadingHeight = '30px';
            this.id = 'table';
            this.event = new core.EventEmitter();
            this.subscription = this.filteredCountSubject
                .pipe(operators.takeUntil(this.unsubscribe))
                .subscribe((/**
             * @param {?} count
             * @return {?}
             */
            function (count) {
                _this.filterCount = count;
                _this.cdr.detectChanges();
            }));
        }
        /**
         * @param {?} targetElement
         * @return {?}
         */
        BaseComponent.prototype.onContextMenuClick = /**
         * @param {?} targetElement
         * @return {?}
         */
        function (targetElement) {
            if (this.contextMenu && !this.contextMenu.nativeElement.contains(targetElement)) {
                this.rowContextMenuPosition = {
                    top: null,
                    left: null,
                    value: null,
                };
            }
        };
        /**
         * @return {?}
         */
        BaseComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            if (!this.columns) {
                console.error('[columns] property required!');
            }
            if (this.configuration) {
                this.config = this.configuration;
            }
            else {
                this.config = DefaultConfigService.config;
            }
            this.limit = this.config.rows;
            if (this.groupRowsBy) {
                this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
            }
            this.doDecodePersistedState();
        };
        /**
         * @return {?}
         */
        BaseComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            this.unsubscribe.next();
            this.unsubscribe.complete();
        };
        /**
         * @return {?}
         */
        BaseComponent.prototype.ngAfterViewInit = /**
         * @return {?}
         */
        function () {
            var _this = this;
            /** @type {?} */
            var throttleValue = this.config.infiniteScrollThrottleTime ?
                this.config.infiniteScrollThrottleTime :
                200;
            this.scrollDispatcher.scrolled()
                .pipe(operators.takeUntil(this.unsubscribe), operators.throttleTime(throttleValue), operators.filter((/**
             * @param {?} event
             * @return {?}
             */
            function (event) {
                return !!event && _this.viewPort && _this.viewPort.getRenderedRange().end === _this.viewPort.getDataLength();
            })))
                .subscribe((/**
             * @return {?}
             */
            function () {
                _this.emitEvent(Event.onInfiniteScrollEnd, null);
            }));
        };
        /**
         * @param {?} changes
         * @return {?}
         */
        BaseComponent.prototype.ngOnChanges = /**
         * @param {?} changes
         * @return {?}
         */
        function (changes) {
            var configuration = changes.configuration, data = changes.data, pagination = changes.pagination, groupRowsBy = changes.groupRowsBy;
            this.toggleRowIndex = changes.toggleRowIndex;
            if (configuration && configuration.currentValue) {
                this.config = configuration.currentValue;
            }
            if (data && data.currentValue) {
                this.doApplyData(data);
            }
            if (pagination && pagination.currentValue) {
                var _a = (/** @type {?} */ (pagination.currentValue)), count = _a.count, limit = _a.limit, offset = _a.offset;
                this.count = count;
                this.limit = limit;
                this.page = offset;
            }
            if (groupRowsBy && groupRowsBy.currentValue) {
                this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
            }
            if (this.toggleRowIndex && this.toggleRowIndex.currentValue) {
                /** @type {?} */
                var row = this.toggleRowIndex.currentValue;
                this.collapseRow(row.index);
            }
        };
        /**
         * @param {?} column
         * @return {?}
         */
        BaseComponent.prototype.orderBy = /**
         * @param {?} column
         * @return {?}
         */
        function (column) {
            if (typeof column.orderEnabled !== 'undefined' && !column.orderEnabled) {
                return;
            }
            this.sortKey = column.key;
            if (!this.config.orderEnabled || this.sortKey === '') {
                return;
            }
            this.setColumnOrder(this.sortKey);
            if (!this.config.orderEventOnly && !column.orderEventOnly) {
                this.sortBy.key = this.sortKey;
                this.sortBy.order = this.sortState.get(this.sortKey);
            }
            else {
                this.sortBy.key = '';
                this.sortBy.order = '';
            }
            if (!this.config.serverPagination) {
                this.data = __spread(this.data);
                this.sortBy = __assign({}, this.sortBy);
            }
            /** @type {?} */
            var value = {
                key: this.sortKey,
                order: this.sortState.get(this.sortKey),
            };
            this.emitEvent(Event.onOrder, value);
        };
        /**
         * @param {?} $event
         * @param {?} row
         * @param {?} key
         * @param {?} colIndex
         * @param {?} rowIndex
         * @return {?}
         */
        BaseComponent.prototype.onClick = /**
         * @param {?} $event
         * @param {?} row
         * @param {?} key
         * @param {?} colIndex
         * @param {?} rowIndex
         * @return {?}
         */
        function ($event, row, key, colIndex, rowIndex) {
            if (this.config.selectRow) {
                this.selectedRow = rowIndex;
            }
            if (this.config.selectCol && colIndex) {
                this.selectedCol = colIndex;
            }
            if (this.config.selectCell && colIndex) {
                this.selectedRow = rowIndex;
                this.selectedCol = colIndex;
            }
            if (this.config.clickEvent) {
                /** @type {?} */
                var value = {
                    event: $event,
                    row: row,
                    key: key,
                    rowId: rowIndex,
                    colId: colIndex,
                };
                this.emitEvent(Event.onClick, value);
            }
        };
        /**
         * @param {?} $event
         * @param {?} row
         * @param {?} key
         * @param {?} colIndex
         * @param {?} rowIndex
         * @return {?}
         */
        BaseComponent.prototype.onDoubleClick = /**
         * @param {?} $event
         * @param {?} row
         * @param {?} key
         * @param {?} colIndex
         * @param {?} rowIndex
         * @return {?}
         */
        function ($event, row, key, colIndex, rowIndex) {
            /** @type {?} */
            var value = {
                event: $event,
                row: row,
                key: key,
                rowId: rowIndex,
                colId: colIndex,
            };
            this.emitEvent(Event.onDoubleClick, value);
        };
        /**
         * @param {?} $event
         * @param {?} row
         * @param {?} rowIndex
         * @return {?}
         */
        BaseComponent.prototype.onCheckboxSelect = /**
         * @param {?} $event
         * @param {?} row
         * @param {?} rowIndex
         * @return {?}
         */
        function ($event, row, rowIndex) {
            /** @type {?} */
            var value = {
                event: $event,
                row: row,
                rowId: rowIndex,
            };
            this.emitEvent(Event.onCheckboxSelect, value);
        };
        /**
         * @param {?} $event
         * @param {?} row
         * @param {?} rowIndex
         * @return {?}
         */
        BaseComponent.prototype.onRadioSelect = /**
         * @param {?} $event
         * @param {?} row
         * @param {?} rowIndex
         * @return {?}
         */
        function ($event, row, rowIndex) {
            /** @type {?} */
            var value = {
                event: $event,
                row: row,
                rowId: rowIndex,
            };
            this.emitEvent(Event.onRadioSelect, value);
        };
        /**
         * @return {?}
         */
        BaseComponent.prototype.onSelectAll = /**
         * @return {?}
         */
        function () {
            this.isSelected = !this.isSelected;
            this.emitEvent(Event.onSelectAll, this.isSelected);
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        BaseComponent.prototype.onSearch = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            if (!this.config.serverPagination) {
                this.term = $event;
            }
            this.emitEvent(Event.onSearch, $event);
        };
        /**
         * @param {?} value
         * @return {?}
         */
        BaseComponent.prototype.onGlobalSearch = /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            if (!this.config.serverPagination) {
                this.globalSearchTerm = value;
            }
            this.emitEvent(Event.onGlobalSearch, value);
        };
        /**
         * @param {?} pagination
         * @return {?}
         */
        BaseComponent.prototype.onPagination = /**
         * @param {?} pagination
         * @return {?}
         */
        function (pagination) {
            this.page = pagination.page;
            this.limit = pagination.limit;
            this.emitEvent(Event.onPagination, pagination);
        };
        /**
         * @param {?} rowIndex
         * @return {?}
         */
        BaseComponent.prototype.toggleCheckbox = /**
         * @param {?} rowIndex
         * @return {?}
         */
        function (rowIndex) {
            this.selectedCheckboxes.has(rowIndex) ?
                this.selectedCheckboxes.delete(rowIndex) :
                this.selectedCheckboxes.add(rowIndex);
        };
        /**
         * @param {?} rowIndex
         * @return {?}
         */
        BaseComponent.prototype.collapseRow = /**
         * @param {?} rowIndex
         * @return {?}
         */
        function (rowIndex) {
            if (this.selectedDetailsTemplateRowId.has(rowIndex)) {
                this.selectedDetailsTemplateRowId.delete(rowIndex);
                this.emitEvent(Event.onRowCollapsedHide, rowIndex);
            }
            else {
                this.selectedDetailsTemplateRowId.add(rowIndex);
                this.emitEvent(Event.onRowCollapsedShow, rowIndex);
            }
        };
        /**
         * @private
         * @return {?}
         */
        BaseComponent.prototype.doDecodePersistedState = /**
         * @private
         * @return {?}
         */
        function () {
            if (!this.config.persistState) {
                return;
            }
            /** @type {?} */
            var pagination = localStorage.getItem(Event.onPagination);
            /** @type {?} */
            var sort = localStorage.getItem(Event.onOrder);
            /** @type {?} */
            var search = localStorage.getItem(Event.onSearch);
            if (pagination) {
                this.onPagination(JSON.parse(pagination));
            }
            if (sort) {
                var _a = JSON.parse(sort), key = _a.key, order = _a.order;
                this.bindApi({
                    type: API.sortBy,
                    value: { column: key, order: order },
                });
            }
            if (search) {
                this.bindApi({
                    type: API.setInputValue,
                    value: JSON.parse(search),
                });
            }
        };
        /**
         * @param {?} rowIndex
         * @return {?}
         */
        BaseComponent.prototype.isRowCollapsed = /**
         * @param {?} rowIndex
         * @return {?}
         */
        function (rowIndex) {
            if (this.config.collapseAllRows) {
                return true;
            }
            return this.selectedDetailsTemplateRowId.has(rowIndex);
        };
        Object.defineProperty(BaseComponent.prototype, "isLoading", {
            get: /**
             * @return {?}
             */
            function () {
                /** @type {?} */
                var table = (/** @type {?} */ (document.getElementById(this.id)));
                if (table && table.rows && table.rows.length > 3) {
                    this.getLoadingHeight(table.rows);
                }
                return this.config.isLoading;
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @param {?} rows
         * @return {?}
         */
        BaseComponent.prototype.getLoadingHeight = /**
         * @param {?} rows
         * @return {?}
         */
        function (rows) {
            /** @type {?} */
            var searchEnabled = this.config.searchEnabled ? 1 : 0;
            /** @type {?} */
            var headerEnabled = this.config.headerEnabled ? 1 : 0;
            /** @type {?} */
            var borderTrHeight = 1;
            /** @type {?} */
            var borderDivHeight = 2;
            this.loadingHeight = (rows.length - searchEnabled - headerEnabled) * (rows[3].offsetHeight - borderTrHeight) - borderDivHeight + 'px';
        };
        Object.defineProperty(BaseComponent.prototype, "arrowDefinition", {
            get: /**
             * @return {?}
             */
            function () {
                return this.config.showDetailsArrow || typeof this.config.showDetailsArrow === 'undefined';
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @param {?} $event
         * @param {?} row
         * @param {?} key
         * @param {?} colIndex
         * @param {?} rowIndex
         * @return {?}
         */
        BaseComponent.prototype.onRowContextMenu = /**
         * @param {?} $event
         * @param {?} row
         * @param {?} key
         * @param {?} colIndex
         * @param {?} rowIndex
         * @return {?}
         */
        function ($event, row, key, colIndex, rowIndex) {
            if (!this.config.showContextMenu) {
                return;
            }
            $event.preventDefault();
            /** @type {?} */
            var value = {
                event: $event,
                row: row,
                key: key,
                rowId: rowIndex,
                colId: colIndex,
            };
            this.rowContextMenuPosition = {
                top: $event.y - 10 + "px",
                left: $event.x - 10 + "px",
                value: value,
            };
            this.emitEvent(Event.onRowContextMenu, value);
        };
        /**
         * @private
         * @param {?} data
         * @return {?}
         */
        BaseComponent.prototype.doApplyData = /**
         * @private
         * @param {?} data
         * @return {?}
         */
        function (data) {
            /** @type {?} */
            var order = this.columns.find((/**
             * @param {?} c
             * @return {?}
             */
            function (c) { return !!c.orderBy; }));
            if (order) {
                this.sortState.set(this.sortKey, (order.orderBy === 'asc') ? 'desc' : 'asc');
                this.orderBy(order);
            }
            else {
                this.data = __spread(data.currentValue);
            }
        };
        /**
         * @param {?} event
         * @return {?}
         */
        BaseComponent.prototype.onDrop = /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            this.emitEvent(Event.onRowDrop, event);
            dragDrop.moveItemInArray(this.data, event.previousIndex, event.currentIndex);
        };
        // DO NOT REMOVE. It is called from parent component. See src/app/demo/api-doc/api-doc.component.ts
        // DO NOT REMOVE. It is called from parent component. See src/app/demo/api-doc/api-doc.component.ts
        /**
         * @param {?} event
         * @return {?}
         */
        BaseComponent.prototype.apiEvent = 
        // DO NOT REMOVE. It is called from parent component. See src/app/demo/api-doc/api-doc.component.ts
        /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            return this.bindApi(event);
        };
        // tslint:disable:no-big-function cognitive-complexity
        // tslint:disable:no-big-function cognitive-complexity
        /**
         * @private
         * @param {?} event
         * @return {?}
         */
        BaseComponent.prototype.bindApi = 
        // tslint:disable:no-big-function cognitive-complexity
        /**
         * @private
         * @param {?} event
         * @return {?}
         */
        function (event) {
            var _this = this;
            switch (event.type) {
                case API.rowContextMenuClicked:
                    this.rowContextMenuPosition = {
                        top: null,
                        left: null,
                        value: null,
                    };
                    break;
                case API.toolPanelClicked:
                    // TODO
                    break;
                case API.toggleRowIndex:
                    this.collapseRow(event.value);
                    break;
                case API.toggleCheckbox:
                    this.toggleCheckbox(event.value);
                    break;
                case API.setInputValue:
                    if (this.config.searchEnabled) {
                        event.value.forEach((/**
                         * @param {?} input
                         * @return {?}
                         */
                        function (input) {
                            /** @type {?} */
                            var element = ((/** @type {?} */ (document.getElementById("search_" + input.key))));
                            if (!element) {
                                console.error("Column '" + input.key + "' not available in the DOM. Have you misspelled a name?");
                            }
                            else {
                                element.value = input.value;
                            }
                        }));
                    }
                    this.onSearch(event.value);
                    this.cdr.detectChanges();
                    break;
                case API.onGlobalSearch:
                    this.onGlobalSearch(event.value);
                    this.cdr.detectChanges();
                    break;
                case API.setRowClass:
                    if (Array.isArray(event.value)) {
                        event.value.forEach((/**
                         * @param {?} val
                         * @return {?}
                         */
                        function (val) { return _this.styleService.setRowClass(val); }));
                        break;
                    }
                    this.styleService.setRowClass(event.value);
                    this.cdr.detectChanges();
                    break;
                case API.setCellClass:
                    if (Array.isArray(event.value)) {
                        event.value.forEach((/**
                         * @param {?} val
                         * @return {?}
                         */
                        function (val) { return _this.styleService.setCellClass(val); }));
                        break;
                    }
                    this.styleService.setCellClass(event.value);
                    break;
                case API.setRowStyle:
                    if (Array.isArray(event.value)) {
                        event.value.forEach((/**
                         * @param {?} val
                         * @return {?}
                         */
                        function (val) { return _this.styleService.setRowStyle(val); }));
                        break;
                    }
                    this.styleService.setRowStyle(event.value);
                    break;
                case API.setCellStyle:
                    if (Array.isArray(event.value)) {
                        event.value.forEach((/**
                         * @param {?} val
                         * @return {?}
                         */
                        function (val) { return _this.styleService.setCellStyle(val); }));
                        break;
                    }
                    this.styleService.setCellStyle(event.value);
                    break;
                case API.setTableClass:
                    this.tableClass = event.value;
                    this.cdr.detectChanges();
                    break;
                case API.getPaginationTotalItems:
                    return this.paginationComponent.paginationDirective.getTotalItems();
                case API.getPaginationCurrentPage:
                    return this.paginationComponent.paginationDirective.getCurrent();
                case API.getPaginationLastPage:
                    return this.paginationComponent.paginationDirective.getLastPage();
                case API.getNumberOfRowsPerPage:
                    return this.paginationComponent.paginationDirective.isLastPage() ?
                        (this.paginationComponent.paginationDirective.getTotalItems() % this.limit) :
                        this.limit;
                case API.setPaginationCurrentPage:
                    this.paginationComponent.paginationDirective.setCurrent(event.value);
                    break;
                case API.setPaginationRange:
                    this.paginationComponent.ranges = event.value;
                    break;
                case API.setPaginationPreviousLabel:
                    this.paginationComponent.previousLabel = event.value;
                    break;
                case API.setPaginationNextLabel:
                    this.paginationComponent.nextLabel = event.value;
                    break;
                case API.setPaginationDisplayLimit:
                    this.paginationComponent.changeLimit(event.value, true);
                    break;
                case API.sortBy:
                    /** @type {?} */
                    var column = { title: '', key: event.value.column, orderBy: event.value.order };
                    this.orderBy(column);
                    this.cdr.detectChanges();
                    break;
                default:
                    break;
            }
        };
        /**
         * @private
         * @param {?} key
         * @return {?}
         */
        BaseComponent.prototype.setColumnOrder = /**
         * @private
         * @param {?} key
         * @return {?}
         */
        function (key) {
            switch (this.sortState.get(key)) {
                case '':
                case undefined:
                    this.sortState.set(key, 'desc');
                    break;
                case 'asc':
                    this.config.threeWaySort ?
                        this.sortState.set(key, '') :
                        this.sortState.set(key, 'desc');
                    break;
                case 'desc':
                    this.sortState.set(key, 'asc');
                    break;
            }
            if (this.sortState.size > 1) {
                /** @type {?} */
                var temp = this.sortState.get(key);
                this.sortState.clear();
                this.sortState.set(key, temp);
            }
        };
        /**
         * @param {?} event
         * @param {?} value
         * @return {?}
         */
        BaseComponent.prototype.emitEvent = /**
         * @param {?} event
         * @param {?} value
         * @return {?}
         */
        function (event, value) {
            this.event.emit({ event: event, value: value });
            if (this.config.persistState) {
                localStorage.setItem(event, JSON.stringify(value));
            }
            if (this.config.logger) {
                // tslint:disable-next-line:no-console
                console.log({ event: event, value: value });
            }
        };
        BaseComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'ngx-table',
                        providers: [
                            DefaultConfigService,
                            GroupRowsService,
                            StyleService,
                        ],
                        template: "<div class=\"ngx-container\">\n  <table [id]=\"id\"\n         [ngClass]=\"(tableClass === null || tableClass === '') ? 'ngx-table' : tableClass\"\n         [class.ngx-table__table--tiny]=\"config.tableLayout.style === 'tiny'\"\n         [class.ngx-table__table--normal]=\"config.tableLayout.style === 'normal'\"\n         [class.ngx-table__table--big]=\"config.tableLayout.style === 'big'\"\n         [class.ngx-table__table--borderless]=\"config.tableLayout.borderless\"\n         [class.ngx-table__table--dark]=\"config.tableLayout.theme === 'dark'\"\n         [class.ngx-table__table--hoverable]=\"config.tableLayout.hover\"\n         [class.ngx-table__table--striped]=\"config.tableLayout.striped\"\n         [class.ngx-table__horizontal-scroll]=\"config.horizontalScroll && !isLoading\">\n    <thead\n      [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n      table-thead\n      [config]=\"config\"\n      [sortKey]=\"sortKey\"\n      [sortState]=\"sortState\"\n      [selectAllTemplate]=\"selectAllTemplate\"\n      [filtersTemplate]=\"filtersTemplate\"\n      [additionalActionsTemplate]=\"additionalActionsTemplate\"\n      [columns]=\"columns\"\n      (selectAll)=\"onSelectAll()\"\n      (filter)=\"onSearch($event)\"\n      (order)=\"orderBy($event)\"\n      (event)=\"emitEvent($event.event, $event.value)\"\n    >\n    </thead>\n    <tbody *ngIf=\"data && !isLoading && !config.rowReorder\">\n    <ng-container *ngIf=\"rowTemplate\">\n      <ul class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{'position': 'absolute', 'top': rowContextMenuPosition.top, 'left': rowContextMenuPosition.left }\"\n          *ngIf=\"rowContextMenuPosition.top\">\n        <ng-container\n          [ngTemplateOutlet]=\"rowContextMenu\"\n          [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value}\">\n        </ng-container>\n      </ul>\n      <ng-container *ngIf=\"!config.infiniteScroll\">\n        <ng-container *ngFor=\"let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n              let rowIndex = index\">\n          <tr\n            (click)=\"onClick($event, row, '', null, rowIndex)\"\n            #contextMenu\n            (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n            (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n            [class.ngx-table__table-row--selected]=\"rowIndex === selectedRow && !config.selectCell\">\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\">\n            </ng-container>\n            <td *ngIf=\"config.detailsTemplate\">\n            <span class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\"\n                  (click)=\"collapseRow(rowIndex)\">\n            </span>\n            </td>\n          </tr>\n          <tr\n            *ngIf=\"(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows\">\n            <td [attr.colspan]=\"columns.length + 1\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailsTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex  }\">\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n      <cdk-virtual-scroll-viewport\n        itemSize=\"50\"\n        *ngIf=\"config.infiniteScroll\"\n        class=\"ngx-infinite-scroll-viewport\">\n        <ng-container *cdkVirtualFor=\"let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject;\n              let rowIndex = index\">\n          <tr\n            (click)=\"onClick($event, row, '', null, rowIndex)\"\n            #contextMenu\n            (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n            (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n            [class.ngx-table__table-row--selected]=\"rowIndex === selectedRow && !config.selectCell\">\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\">\n            </ng-container>\n            <td *ngIf=\"config.detailsTemplate\">\n            <span class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\"\n                  (click)=\"collapseRow(rowIndex)\">\n            </span>\n            </td>\n          </tr>\n          <tr\n            *ngIf=\"(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows\">\n            <td [attr.colspan]=\"columns.length + 1\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailsTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex  }\">\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    </ng-container>\n    <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n      <ul class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{'position': 'absolute', 'top': rowContextMenuPosition.top, 'left': rowContextMenuPosition.left }\"\n          *ngIf=\"rowContextMenuPosition.top\">\n        <ng-container\n          [ngTemplateOutlet]=\"rowContextMenu\"\n          [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value}\">\n        </ng-container>\n      </ul>\n      <ng-container *ngIf=\"!config.infiniteScroll\">\n        <ng-container\n          *ngFor=\"let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n                  let rowIndex = index\">\n          <tr [class.ngx-table__table-row--selected]=\"rowIndex === selectedRow && !config.selectCell\">\n            <td *ngIf=\"config.checkboxes\">\n              <label class=\"ngx-form-checkbox\">\n                <input type=\"checkbox\"\n                       id=\"checkbox-{{rowIndex}}\"\n                       [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n                       (change)=\"onCheckboxSelect($event, row, rowIndex)\">\n                <em class=\"ngx-form-icon\"></em>\n              </label>\n            </td>\n            <td *ngIf=\"config.radio\">\n              <label>\n                <input type=\"radio\"\n                       id=\"radio-{{rowIndex}}\"\n                       name=\"radio\"\n                       (change)=\"onRadioSelect($event, row, rowIndex)\">\n              </label>\n            </td>\n            <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n              <td (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n                  #contextMenu\n                  (contextmenu)=\"onRowContextMenu($event, row, column.key, colIndex, rowIndex)\"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"colIndex === selectedCol && !config.selectCell\"\n                  [class.ngx-table__table-cell--selected]=\"colIndex === selectedCol && rowIndex === selectedRow && !config.selectCol && !config.selectRow\"\n              >\n                <div *ngIf=\"!column.cellTemplate\">{{ row | render:column.key }}</div>\n                <ng-container\n                  *ngIf=\"column.cellTemplate\"\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\">\n                </ng-container>\n              </td>\n            </ng-container>\n            <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n            <span class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\"\n                  (click)=\"collapseRow(rowIndex)\">\n            </span>\n            </td>\n          </tr>\n          <tr\n            *ngIf=\"(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows\">\n            <td *ngIf=\"config.checkboxes || config.radio\"></td>\n            <td [attr.colspan]=\"columns.length + 1\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailsTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\">\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n      <!-- infinite scroll -->\n      <cdk-virtual-scroll-viewport\n        itemSize=\"50\"\n        *ngIf=\"config.infiniteScroll\"\n        class=\"ngx-infinite-scroll-viewport\">\n        <ng-container\n          *cdkVirtualFor=\"let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject;\n                  let rowIndex = index\">\n          <tr [class.ngx-table__table-row--selected]=\"rowIndex === selectedRow && !config.selectCell\">\n            <td *ngIf=\"config.checkboxes\">\n              <label class=\"ngx-form-checkbox\">\n                <input type=\"checkbox\"\n                       id=\"checkbox-infinite-scroll-{{rowIndex}}\"\n                       [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n                       (change)=\"onCheckboxSelect($event, row, rowIndex)\">\n                <em class=\"ngx-form-icon\"></em>\n              </label>\n            </td>\n            <td *ngIf=\"config.radio\">\n              <label>\n                <input type=\"radio\"\n                       id=\"radio-infinite-scroll-{{rowIndex}}\"\n                       name=\"radio\"\n                       (change)=\"onRadioSelect($event, row, rowIndex)\">\n              </label>\n            </td>\n            <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n              <td (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n                  #contextMenu\n                  (contextmenu)=\"onRowContextMenu($event, row, column.key, colIndex, rowIndex)\"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"colIndex === selectedCol && !config.selectCell\"\n                  [class.ngx-table__table-cell--selected]=\"colIndex === selectedCol && rowIndex === selectedRow && !config.selectCol && !config.selectRow\"\n              >\n                <div *ngIf=\"!column.cellTemplate\">{{ row | render:column.key }}</div>\n                <ng-container\n                  *ngIf=\"column.cellTemplate\"\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\">\n                </ng-container>\n              </td>\n            </ng-container>\n            <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n            <span class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\"\n                  (click)=\"collapseRow(rowIndex)\">\n            </span>\n            </td>\n          </tr>\n          <tr\n            *ngIf=\"(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows\">\n            <td *ngIf=\"config.checkboxes || config.radio\"></td>\n            <td [attr.colspan]=\"columns.length + 1\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailsTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\">\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    </ng-container>\n    <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n      <ng-container\n        *ngFor=\"let group of grouped | sort:sortBy:config | search:term:filteredCountSubject:config | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n        let rowIndex = index\">\n        <tr>\n          <ng-container *ngIf=\"!groupRowsHeaderTemplate\">\n            <td [attr.colspan]=\"columns.length\">\n              <div>{{group[0][groupRowsBy]}} ({{group.length}})</div>\n            </td>\n          </ng-container>\n          <ng-container\n            *ngIf=\"groupRowsHeaderTemplate\"\n            [ngTemplateOutlet]=\"groupRowsHeaderTemplate\"\n            [ngTemplateOutletContext]=\"{\n              total: group.length,\n              key: groupRowsBy,\n              value: group[0] ? group[0][groupRowsBy] : '',\n              group: group,\n              index: rowIndex\n            }\">\n          </ng-container>\n          <td>\n            <span class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\"\n                  (click)=\"collapseRow(rowIndex)\">\n            </span>\n          </td>\n        </tr>\n        <ng-container *ngIf=\"selectedDetailsTemplateRowId.has(rowIndex)\">\n          <tr *ngFor=\"let row of group\">\n            <td *ngFor=\"let column of columns\">\n              {{ row | render:column.key }}\n              <!-- TODO allow users to add groupRowsTemplateRef -->\n            </td>\n            <td></td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n    </tbody>\n    <tbody *ngIf=\"data && !config.isLoading && config.rowReorder\"\n           class=\"ngx-draggable-row-area\"\n           cdkDropList\n           (cdkDropListDropped)=\"onDrop($event)\">\n    <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n      <ng-container\n        *ngFor=\"let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n                  let rowIndex = index\">\n        <tr class=\"ngx-draggable-row\" cdkDrag cdkDragLockAxis=\"y\">\n          <td *ngIf=\"config.checkboxes\">\n            <label class=\"ngx-form-checkbox\">\n              <input type=\"checkbox\"\n                     id=\"checkbox-draggable-{{rowIndex}}\"\n                     [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n                     (change)=\"onCheckboxSelect($event, row, rowIndex)\">\n              <em class=\"ngx-form-icon\"></em>\n            </label>\n          </td>\n          <td *ngIf=\"config.radio\">\n            <label>\n              <input type=\"radio\"\n                     id=\"radio-draggable-{{rowIndex}}\"\n                     name=\"radio\"\n                     (change)=\"onRadioSelect($event, row, rowIndex)\">\n            </label>\n          </td>\n          <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n            <td (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n                (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n                [class.ngx-table__table-col--selected]=\"colIndex === selectedCol && !config.selectCell\"\n                [class.ngx-table__table-cell--selected]=\"colIndex === selectedCol && rowIndex === selectedRow && !config.selectCol && !config.selectRow\"\n            >\n              <div>{{ row | render:column.key }}</div>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n    </ng-container>\n    </tbody>\n    <tbody *ngIf=\"filterCount === 0\">\n    <tr class=\"ngx-table__body-empty\">\n      <ng-container\n        *ngIf=\"noResultsTemplate\"\n        [ngTemplateOutlet]=\"noResultsTemplate\">\n      </ng-container>\n      <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n        <div class=\"ngx-table__table-no-results\">\n          No results\n        </div>\n      </td>\n    </tr>\n    </tbody>\n    <tbody *ngIf=\"isLoading\">\n    <tr class=\"ngx-table__body-loading\">\n      <ng-container\n        *ngIf=\"loadingTemplate\"\n        [ngTemplateOutlet]=\"loadingTemplate\">\n      </ng-container>\n      <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!loadingTemplate\">\n        <div [style.height]=\"loadingHeight\"\n             class=\"ngx-table__table-loader-wrapper\">\n          <div class=\"ngx-table__table-loader\"></div>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n    <tfoot *ngIf=\"summaryTemplate\">\n    <tr>\n      <ng-container\n        [ngTemplateOutlet]=\"summaryTemplate\"\n        [ngTemplateOutletContext]=\"{ total: data.length, limit: limit, page: page  }\">\n      </ng-container>\n    </tr>\n    </tfoot>\n  </table>\n  <pagination\n    [attr.id]=\"'pagination' + id\"\n    [id]=\"id\"\n    #paginationComponent\n    [config]=\"config\"\n    [pagination]=\"pagination\"\n    (updateRange)=\"onPagination($event)\">\n  </pagination>\n</div>\n",
                        changeDetection: core.ChangeDetectionStrategy.OnPush
                    }] }
        ];
        /** @nocollapse */
        BaseComponent.ctorParameters = function () { return [
            { type: core.ChangeDetectorRef },
            { type: scrolling.ScrollDispatcher },
            { type: StyleService }
        ]; };
        BaseComponent.propDecorators = {
            configuration: [{ type: core.Input }],
            data: [{ type: core.Input }],
            pagination: [{ type: core.Input }],
            groupRowsBy: [{ type: core.Input }],
            id: [{ type: core.Input }],
            toggleRowIndex: [{ type: core.Input }],
            detailsTemplate: [{ type: core.Input }],
            summaryTemplate: [{ type: core.Input }],
            groupRowsHeaderTemplate: [{ type: core.Input }],
            filtersTemplate: [{ type: core.Input }],
            selectAllTemplate: [{ type: core.Input }],
            noResultsTemplate: [{ type: core.Input }],
            loadingTemplate: [{ type: core.Input }],
            additionalActionsTemplate: [{ type: core.Input }],
            rowContextMenu: [{ type: core.Input }],
            columns: [{ type: core.Input }],
            event: [{ type: core.Output }],
            rowTemplate: [{ type: core.ContentChild, args: [core.TemplateRef, { static: true },] }],
            paginationComponent: [{ type: core.ViewChild, args: ['paginationComponent', { static: false },] }],
            contextMenu: [{ type: core.ViewChild, args: ['contextMenu', { static: false },] }],
            viewPort: [{ type: core.ViewChild, args: [scrolling.CdkVirtualScrollViewport, { static: false },] }],
            onContextMenuClick: [{ type: core.HostListener, args: ['document:click', ['$event.target'],] }]
        };
        return BaseComponent;
    }());
    if (false) {
        /**
         * @type {?}
         * @private
         */
        BaseComponent.prototype.unsubscribe;
        /** @type {?} */
        BaseComponent.prototype.selectedRow;
        /** @type {?} */
        BaseComponent.prototype.selectedCol;
        /** @type {?} */
        BaseComponent.prototype.term;
        /** @type {?} */
        BaseComponent.prototype.filterCount;
        /** @type {?} */
        BaseComponent.prototype.filteredCountSubject;
        /** @type {?} */
        BaseComponent.prototype.subscription;
        /** @type {?} */
        BaseComponent.prototype.tableClass;
        /** @type {?} */
        BaseComponent.prototype.globalSearchTerm;
        /** @type {?} */
        BaseComponent.prototype.grouped;
        /** @type {?} */
        BaseComponent.prototype.isSelected;
        /** @type {?} */
        BaseComponent.prototype.page;
        /** @type {?} */
        BaseComponent.prototype.count;
        /** @type {?} */
        BaseComponent.prototype.sortState;
        /** @type {?} */
        BaseComponent.prototype.sortKey;
        /** @type {?} */
        BaseComponent.prototype.rowContextMenuPosition;
        /** @type {?} */
        BaseComponent.prototype.limit;
        /** @type {?} */
        BaseComponent.prototype.sortBy;
        /** @type {?} */
        BaseComponent.prototype.selectedDetailsTemplateRowId;
        /** @type {?} */
        BaseComponent.prototype.selectedCheckboxes;
        /** @type {?} */
        BaseComponent.prototype.loadingHeight;
        /** @type {?} */
        BaseComponent.prototype.config;
        /** @type {?} */
        BaseComponent.prototype.configuration;
        /** @type {?} */
        BaseComponent.prototype.data;
        /** @type {?} */
        BaseComponent.prototype.pagination;
        /** @type {?} */
        BaseComponent.prototype.groupRowsBy;
        /** @type {?} */
        BaseComponent.prototype.id;
        /** @type {?} */
        BaseComponent.prototype.toggleRowIndex;
        /** @type {?} */
        BaseComponent.prototype.detailsTemplate;
        /** @type {?} */
        BaseComponent.prototype.summaryTemplate;
        /** @type {?} */
        BaseComponent.prototype.groupRowsHeaderTemplate;
        /** @type {?} */
        BaseComponent.prototype.filtersTemplate;
        /** @type {?} */
        BaseComponent.prototype.selectAllTemplate;
        /** @type {?} */
        BaseComponent.prototype.noResultsTemplate;
        /** @type {?} */
        BaseComponent.prototype.loadingTemplate;
        /** @type {?} */
        BaseComponent.prototype.additionalActionsTemplate;
        /** @type {?} */
        BaseComponent.prototype.rowContextMenu;
        /** @type {?} */
        BaseComponent.prototype.columns;
        /** @type {?} */
        BaseComponent.prototype.event;
        /** @type {?} */
        BaseComponent.prototype.rowTemplate;
        /**
         * @type {?}
         * @private
         */
        BaseComponent.prototype.paginationComponent;
        /** @type {?} */
        BaseComponent.prototype.contextMenu;
        /** @type {?} */
        BaseComponent.prototype.viewPort;
        /**
         * @type {?}
         * @private
         */
        BaseComponent.prototype.cdr;
        /**
         * @type {?}
         * @private
         */
        BaseComponent.prototype.scrollDispatcher;
        /** @type {?} */
        BaseComponent.prototype.styleService;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var HeaderComponent = /** @class */ (function () {
        function HeaderComponent() {
            this.update = new core.EventEmitter();
        }
        /**
         * @param {?} key
         * @return {?}
         */
        HeaderComponent.prototype.unifyKey = /**
         * @param {?} key
         * @return {?}
         */
        function (key) {
            return key.replace('.', '_');
        };
        /**
         * @param {?} input
         * @return {?}
         */
        HeaderComponent.prototype.onSearch = /**
         * @param {?} input
         * @return {?}
         */
        function (input) {
            this.update.emit([
                { value: input.value, key: this.column.key },
            ]);
        };
        HeaderComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'table-header',
                        template: "<label for=\"search_{{ unifyKey(column.key) }}\">\n  <input type=\"text\"\n         id=\"search_{{ unifyKey(column.key) }}\"\n         aria-label=\"Search\"\n         placeholder=\"{{ column.placeholder ? column.placeholder : column.title }}\"\n         class=\"ngx-table__header-search\"\n         #input\n         (input)=\"onSearch(input)\"\n  >\n</label>\n"
                    }] }
        ];
        HeaderComponent.propDecorators = {
            column: [{ type: core.Input }],
            update: [{ type: core.Output }]
        };
        return HeaderComponent;
    }());
    if (false) {
        /** @type {?} */
        HeaderComponent.prototype.column;
        /** @type {?} */
        HeaderComponent.prototype.update;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var GlobalSearchPipe = /** @class */ (function () {
        function GlobalSearchPipe() {
        }
        /**
         * @param {?} array
         * @param {?} filter
         * @param {?} filteredCountSubject
         * @return {?}
         */
        GlobalSearchPipe.prototype.transform = /**
         * @param {?} array
         * @param {?} filter
         * @param {?} filteredCountSubject
         * @return {?}
         */
        function (array, filter, filteredCountSubject) {
            filteredCountSubject.next(0);
            if (typeof array === 'undefined') {
                return;
            }
            if (typeof filter === 'undefined' || Object.keys(filter).length === 0 || filter === '') {
                filteredCountSubject.next(array.length);
                return array;
            }
            /** @type {?} */
            var arr = array.filter((/**
             * @param {?} row
             * @return {?}
             */
            function (row) {
                /** @type {?} */
                var element = JSON.stringify(Object.values(row));
                /** @type {?} */
                var strings = filter.split(',');
                return strings.some((/**
                 * @param {?} string
                 * @return {?}
                 */
                function (string) { return element.toLocaleLowerCase().indexOf(string.trim().toLocaleLowerCase()) > -1; }));
            }));
            filteredCountSubject.next(arr.length);
            return arr;
        };
        GlobalSearchPipe.decorators = [
            { type: core.Pipe, args: [{
                        name: 'global',
                    },] }
        ];
        return GlobalSearchPipe;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var FiltersService = /** @class */ (function () {
        function FiltersService() {
        }
        /**
         * @param {?} p
         * @param {?} o
         * @return {?}
         */
        FiltersService.getPath = /**
         * @param {?} p
         * @param {?} o
         * @return {?}
         */
        function (p, o) {
            // https://github.com/dherges/ng-packagr/issues/696
            /* tslint:disable-next-line */
            /** @type {?} */
            var result = p.reduce((/**
             * @param {?} xs
             * @param {?} x
             * @return {?}
             */
            function (xs, x) { return (xs && typeof xs[x] !== 'undefined') ? xs[x] : null; }), o);
            return result;
        };
        FiltersService.decorators = [
            { type: core.Injectable }
        ];
        return FiltersService;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var RenderPipe = /** @class */ (function () {
        function RenderPipe() {
        }
        /**
         * @param {?} row
         * @param {?} key
         * @return {?}
         */
        RenderPipe.prototype.transform = /**
         * @param {?} row
         * @param {?} key
         * @return {?}
         */
        function (row, key) {
            /** @type {?} */
            var split = key.split('.');
            return FiltersService.getPath(split, row);
        };
        RenderPipe.decorators = [
            { type: core.Pipe, args: [{
                        name: 'render',
                    },] }
        ];
        return RenderPipe;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var SearchPipe = /** @class */ (function () {
        function SearchPipe() {
            this.filters = {};
        }
        /**
         * @param {?} array
         * @param {?} filter
         * @param {?} filteredCountSubject
         * @param {?=} config
         * @return {?}
         */
        SearchPipe.prototype.transform = /**
         * @param {?} array
         * @param {?} filter
         * @param {?} filteredCountSubject
         * @param {?=} config
         * @return {?}
         */
        function (array, filter, filteredCountSubject, config) {
            var _this = this;
            filteredCountSubject.next(0);
            if (typeof array === 'undefined') {
                return;
            }
            if (typeof filter === 'undefined') {
                filteredCountSubject.next(array.length);
                return array;
            }
            filter.forEach((/**
             * @param {?} f
             * @return {?}
             */
            function (f) {
                _this.filters[f.key] = f.value.toString().toLocaleLowerCase();
                if (Object.keys(f).length === 0 || f.value === '') {
                    delete _this.filters[f.key];
                }
            }));
            if (config && config.groupRows) {
                return array.map((/**
                 * @param {?} arr
                 * @return {?}
                 */
                function (arr) { return _this.filterGroup(arr, filteredCountSubject); }));
            }
            return this.filterGroup(array, filteredCountSubject);
        };
        /**
         * @private
         * @param {?} array
         * @param {?} filteredCountSubject
         * @return {?}
         */
        SearchPipe.prototype.filterGroup = /**
         * @private
         * @param {?} array
         * @param {?} filteredCountSubject
         * @return {?}
         */
        function (array, filteredCountSubject) {
            var _this = this;
            /** @type {?} */
            var arr = array.filter((/**
             * @param {?} obj
             * @return {?}
             */
            function (obj) {
                return Object.keys(_this.filters).every((/**
                 * @param {?} c
                 * @return {?}
                 */
                function (c) {
                    /** @type {?} */
                    var split = c.split('.');
                    /** @type {?} */
                    var val = FiltersService.getPath(split, obj);
                    /** @type {?} */
                    var element = (typeof val === 'object') ? JSON.stringify(val) : val.toString().toLocaleLowerCase();
                    /** @type {?} */
                    var strings = _this.filters[c].split(',');
                    return strings.some((/**
                     * @param {?} string
                     * @return {?}
                     */
                    function (string) { return element.indexOf(string.trim()) > -1; }));
                }));
            }));
            filteredCountSubject.next(arr.length);
            return arr;
        };
        SearchPipe.decorators = [
            { type: core.Pipe, args: [{
                        name: 'search',
                    },] }
        ];
        return SearchPipe;
    }());
    if (false) {
        /**
         * @type {?}
         * @private
         */
        SearchPipe.prototype.filters;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var SortPipe = /** @class */ (function () {
        function SortPipe() {
            this.defaultArray = [];
        }
        /**
         * @private
         * @param {?} aV
         * @param {?} bV
         * @return {?}
         */
        SortPipe.isNaN = /**
         * @private
         * @param {?} aV
         * @param {?} bV
         * @return {?}
         */
        function (aV, bV) {
            return (isNaN(parseFloat(aV)) || !isFinite(aV)) || (isNaN(parseFloat(bV)) || !isFinite(bV));
        };
        /**
         * @private
         * @param {?} a
         * @param {?} b
         * @param {?} key
         * @return {?}
         */
        SortPipe.compare = /**
         * @private
         * @param {?} a
         * @param {?} b
         * @param {?} key
         * @return {?}
         */
        function (a, b, key) {
            /** @type {?} */
            var split = key.split('.');
            /** @type {?} */
            var aPath = FiltersService.getPath(split, a);
            /** @type {?} */
            var bPath = FiltersService.getPath(split, b);
            /** @type {?} */
            var aValue = (aPath + '').toLowerCase();
            /** @type {?} */
            var bValue = (bPath + '').toLowerCase();
            if (SortPipe.isNaN(aPath, bPath)) {
                return aValue.localeCompare(bValue);
            }
            else {
                if (parseFloat(aPath) < parseFloat(bPath)) {
                    return -1;
                }
                if (parseFloat(aPath) > parseFloat(bPath)) {
                    return 1;
                }
            }
            return 0;
        };
        /**
         * @param {?} array
         * @param {?} filter
         * @param {?=} config
         * @return {?}
         */
        SortPipe.prototype.transform = /**
         * @param {?} array
         * @param {?} filter
         * @param {?=} config
         * @return {?}
         */
        function (array, filter, config) {
            if (this.defaultArray.length === 0) {
                this.defaultArray = array;
            }
            if (!filter.key || filter.key === '') {
                return array;
            }
            if (filter.order === '') {
                return this.defaultArray;
            }
            if (filter.order === 'asc') {
                return this.sortAsc(array, filter, config);
            }
            else {
                return this.sortDesc(array, filter, config);
            }
        };
        /**
         * @private
         * @param {?} array
         * @param {?} filter
         * @param {?=} config
         * @return {?}
         */
        SortPipe.prototype.sortAsc = /**
         * @private
         * @param {?} array
         * @param {?} filter
         * @param {?=} config
         * @return {?}
         */
        function (array, filter, config) {
            if (config && config.groupRows) {
                return array.map((/**
                 * @param {?} arr
                 * @return {?}
                 */
                function (arr) { return arr.sort((/**
                 * @param {?} a
                 * @param {?} b
                 * @return {?}
                 */
                function (a, b) { return SortPipe.compare(a, b, filter.key); })); }));
            }
            return array.sort((/**
             * @param {?} a
             * @param {?} b
             * @return {?}
             */
            function (a, b) { return SortPipe.compare(a, b, filter.key); }));
        };
        /**
         * @private
         * @param {?} array
         * @param {?} filter
         * @param {?=} config
         * @return {?}
         */
        SortPipe.prototype.sortDesc = /**
         * @private
         * @param {?} array
         * @param {?} filter
         * @param {?=} config
         * @return {?}
         */
        function (array, filter, config) {
            if (config && config.groupRows) {
                return array.map((/**
                 * @param {?} arr
                 * @return {?}
                 */
                function (arr) { return arr.sort((/**
                 * @param {?} a
                 * @param {?} b
                 * @return {?}
                 */
                function (a, b) { return SortPipe.compare(b, a, filter.key); })); }));
            }
            return array.sort((/**
             * @param {?} a
             * @param {?} b
             * @return {?}
             */
            function (a, b) { return SortPipe.compare(b, a, filter.key); }));
        };
        SortPipe.decorators = [
            { type: core.Pipe, args: [{
                        name: 'sort',
                    },] }
        ];
        return SortPipe;
    }());
    if (false) {
        /**
         * @type {?}
         * @private
         */
        SortPipe.prototype.defaultArray;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var TableTHeadComponent = /** @class */ (function () {
        function TableTHeadComponent(styleService) {
            this.styleService = styleService;
            this.menuActive = false;
            this.openedHeaderActionTemplate = null;
            this.onSelectAllBinded = this.onSelectAll.bind(this);
            this.filter = new core.EventEmitter();
            this.order = new core.EventEmitter();
            this.selectAll = new core.EventEmitter();
            this.event = new core.EventEmitter();
        }
        /**
         * @param {?} targetElement
         * @return {?}
         */
        TableTHeadComponent.prototype.onClick = /**
         * @param {?} targetElement
         * @return {?}
         */
        function (targetElement) {
            if (this.additionalActionMenu && !this.additionalActionMenu.nativeElement.contains(targetElement)) {
                this.menuActive = false;
            }
        };
        /**
         * @param {?} column
         * @return {?}
         */
        TableTHeadComponent.prototype.getColumnDefinition = /**
         * @param {?} column
         * @return {?}
         */
        function (column) {
            return column.searchEnabled || typeof column.searchEnabled === 'undefined';
        };
        /**
         * @param {?} column
         * @return {?}
         */
        TableTHeadComponent.prototype.orderBy = /**
         * @param {?} column
         * @return {?}
         */
        function (column) {
            this.order.emit(column);
        };
        /**
         * @param {?} column
         * @return {?}
         */
        TableTHeadComponent.prototype.isOrderEnabled = /**
         * @param {?} column
         * @return {?}
         */
        function (column) {
            /** @type {?} */
            var columnOrderEnabled = column.orderEnabled === undefined ? true : !!column.orderEnabled;
            return this.config.orderEnabled && columnOrderEnabled;
        };
        /**
         * @param {?} event
         * @return {?}
         */
        TableTHeadComponent.prototype.columnDrop = /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            dragDrop.moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        TableTHeadComponent.prototype.onSearch = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            this.filter.emit($event);
        };
        /**
         * @param {?} column
         * @return {?}
         */
        TableTHeadComponent.prototype.getColumnWidth = /**
         * @param {?} column
         * @return {?}
         */
        function (column) {
            if (column.width) {
                return column.width;
            }
            return this.config.fixedColumnWidth ? 100 / this.columns.length + '%' : null;
        };
        /**
         * @return {?}
         */
        TableTHeadComponent.prototype.onSelectAll = /**
         * @return {?}
         */
        function () {
            this.selectAll.emit();
        };
        /**
         * @param {?} event
         * @param {?} th
         * @return {?}
         */
        TableTHeadComponent.prototype.onMouseDown = /**
         * @param {?} event
         * @param {?} th
         * @return {?}
         */
        function (event, th) {
            if (!this.config.resizeColumn) {
                return;
            }
            this.th = th;
            this.startOffset = th.offsetWidth - event.pageX;
            this.event.emit({
                event: Event.onColumnResizeMouseDown,
                value: event,
            });
        };
        /**
         * @param {?} event
         * @return {?}
         */
        TableTHeadComponent.prototype.onMouseMove = /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            if (!this.config.resizeColumn) {
                return;
            }
            if (this.th && this.th.style) {
                this.th.style.width = this.startOffset + event.pageX + 'px';
                this.th.style.cursor = 'col-resize';
                this.th.style['user-select'] = 'none';
            }
        };
        /**
         * @param {?} event
         * @return {?}
         */
        TableTHeadComponent.prototype.onMouseUp = /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            if (!this.config.resizeColumn) {
                return;
            }
            this.event.emit({
                event: Event.onColumnResizeMouseUp,
                value: event,
            });
            this.th.style.cursor = 'default';
            this.th = undefined;
        };
        /**
         * @param {?} column
         * @return {?}
         */
        TableTHeadComponent.prototype.showHeaderActionTemplateMenu = /**
         * @param {?} column
         * @return {?}
         */
        function (column) {
            if (!column.headerActionTemplate) {
                console.error('Column [headerActionTemplate] property not defined');
            }
            if (this.openedHeaderActionTemplate === column.key) {
                this.openedHeaderActionTemplate = null;
                return;
            }
            this.openedHeaderActionTemplate = column.key;
        };
        /**
         * @return {?}
         */
        TableTHeadComponent.prototype.showMenu = /**
         * @return {?}
         */
        function () {
            if (!this.additionalActionsTemplate) {
                console.error('[additionalActionsTemplate] property not defined');
            }
            this.menuActive = !this.menuActive;
        };
        TableTHeadComponent.decorators = [
            { type: core.Component, args: [{
                        selector: '[table-thead]',
                        template: "<tr class=\"ngx-table__header\" *ngIf=\"config.headerEnabled && !config.columnReorder\">\n  <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\n    <ng-container\n      *ngIf=\"selectAllTemplate && config.checkboxes\"\n      [ngTemplateOutlet]=\"selectAllTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\">\n    </ng-container>\n    <label class=\"ngx-form-checkbox\"\n           for=\"selectAllCheckboxes\"\n           *ngIf=\"!selectAllTemplate && config.checkboxes\">\n      <input type=\"checkbox\" id=\"selectAllCheckboxes\" (change)=\"onSelectAll()\">\n      <em class=\"ngx-form-icon\" id=\"selectAllCheckbox\"></em>\n    </label>\n  </th>\n  <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\n    <th class=\"ngx-table__header-cell\"\n        [class.pinned-left]=\"column.pinned\"\n        [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n        [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n        #th\n        [style.width]=\"getColumnWidth(column)\"\n        (mousedown)=\"onMouseDown($event, th)\"\n        (mouseup)=\"onMouseUp($event)\"\n        (mousemove)=\"onMouseMove($event)\">\n      <div (click)=\"orderBy(column)\" style=\"display: inline\" [class.pointer]=\"isOrderEnabled(column)\">\n        <div class=\"ngx-table__header-title\">{{ column.title }}<span>&nbsp;</span>\n          <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\n          <div [style.display]=\"config.orderEnabled ? 'inline' : 'none' \">\n            <em *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\n               class=\"ngx-icon ngx-icon-arrow-up\">\n            </em>\n            <em *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\n               class=\"ngx-icon ngx-icon-arrow-down\">\n            </em>\n          </div>\n        </div>\n      </div>\n      <div class=\"ngx-dropdown\"\n           *ngIf=\"!!column.headerActionTemplate\">\n        <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\n          <span class=\"ngx-icon ngx-icon-more\"></span>\n        </a>\n        <div class=\"ngx-menu ngx-table__table-menu\"\n            *ngIf=\"column.key === openedHeaderActionTemplate\">\n          <ng-container\n            [ngTemplateOutlet]=\"column.headerActionTemplate\">\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\n    </th>\n  </ng-container>\n  <th *ngIf=\"config.additionalActions || config.detailsTemplate || config.collapseAllRows || config.groupRows\"\n      class=\"ngx-table__header-cell-additional-actions\">\n    <div class=\"ngx-dropdown\"\n         #additionalActionMenu\n         *ngIf=\"config.additionalActions\">\n      <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\n        <span class=\"ngx-icon ngx-icon-menu\"></span>\n      </a>\n      <ul class=\"ngx-menu ngx-table__table-menu\"\n          *ngIf=\"menuActive\">\n        <ng-container\n          *ngIf=\"additionalActionsTemplate\"\n          [ngTemplateOutlet]=\"additionalActionsTemplate\">\n        </ng-container>\n      </ul>\n    </div>\n  </th>\n</tr>\n<tr class=\"ngx-table__header ngx-table__header--draggable\"\n    *ngIf=\"config.headerEnabled && config.columnReorder\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    (cdkDropListDropped)=\"columnDrop($event)\"\n>\n  <th [style.width]=\"'3%'\">\n    <ng-container\n      *ngIf=\"selectAllTemplate && config.checkboxes\"\n      [ngTemplateOutlet]=\"selectAllTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\">\n    </ng-container>\n    <label class=\"ngx-form-checkbox\"\n           for=\"selectAllCheckboxes\"\n           *ngIf=\"!selectAllTemplate && config.checkboxes\">\n      <input type=\"checkbox\" id=\"selectAllCheckboxesDrag\" (change)=\"onSelectAll()\">\n      <em class=\"ngx-form-icon\" id=\"selectAllCheckboxDrag\"></em>\n    </label>\n  </th>\n  <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\n    <th class=\"ngx-table__header-cell ngx-table__header-cell--draggable\"\n        cdkDragLockAxis=\"x\"\n        cdkDrag\n        [class.pinned-left]=\"column.pinned\"\n        [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n        [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n        #th\n        [style.width]=\"getColumnWidth(column)\"\n        (mousedown)=\"onMouseDown($event, th)\"\n        (mouseup)=\"onMouseUp($event)\"\n        (mousemove)=\"onMouseMove($event)\">\n      <div (click)=\"orderBy(column)\" style=\"display: inline\"\n           cdkDragHandle\n           [class.pointer]=\"isOrderEnabled(column)\">\n        <div class=\"ngx-table__header-title\">{{ column.title }}<span>&nbsp;</span>\n          <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\n          <div [style.display]=\"config.orderEnabled ? 'inline' : 'none' \">\n            <em *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\n                class=\"ngx-icon ngx-icon-arrow-up\">\n            </em>\n            <em *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\n                class=\"ngx-icon ngx-icon-arrow-down\">\n            </em>\n          </div>\n        </div>\n      </div>\n      <div class=\"ngx-dropdown\"\n           *ngIf=\"!!column.headerActionTemplate\">\n        <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\n          <span class=\"ngx-icon ngx-icon-more\"></span>\n        </a>\n        <div class=\"ngx-menu ngx-table__table-menu\"\n             *ngIf=\"column.key === openedHeaderActionTemplate\">\n          <ng-container\n            [ngTemplateOutlet]=\"column.headerActionTemplate\">\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\n    </th>\n  </ng-container>\n  <th *ngIf=\"config.additionalActions || config.detailsTemplate || config.collapseAllRows || config.groupRows\"\n      class=\"ngx-table__header-cell-additional-actions\">\n    <div class=\"ngx-dropdown\"\n         #additionalActionMenu\n         *ngIf=\"config.additionalActions\">\n      <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\n        <span class=\"ngx-icon ngx-icon-menu\"></span>\n      </a>\n      <ul class=\"ngx-menu ngx-table__table-menu\"\n          *ngIf=\"menuActive\">\n        <ng-container\n          *ngIf=\"additionalActionsTemplate\"\n          [ngTemplateOutlet]=\"additionalActionsTemplate\">\n        </ng-container>\n      </ul>\n    </div>\n  </th>\n</tr>\n<tr *ngIf=\"config.searchEnabled && !filtersTemplate\"\n    class=\"ngx-table__sort-header\">\n  <th *ngIf=\"config.checkboxes || config.radio\"></th>\n  <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n    <th\n      [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n      [class.pinned-left]=\"column.pinned\"\n      [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\">\n      <table-header\n        *ngIf=\"getColumnDefinition(column)\"\n        (update)=\"onSearch($event)\"\n        [column]=\"column\">\n      </table-header>\n    </th>\n  </ng-container>\n  <th *ngIf=\"config.additionalActions || config.detailsTemplate\"></th>\n</tr>\n<ng-container *ngIf=\"filtersTemplate\">\n  <tr>\n    <ng-container [ngTemplateOutlet]=\"filtersTemplate\">\n    </ng-container>\n  </tr>\n</ng-container>\n",
                        providers: [StyleService],
                        styles: ["\n    .cdk-drag-preview {\n      text-align: left;\n      padding-top: 9px;\n      padding-left: 4px;\n      color: #50596c;\n      border: 1px solid #e7e9ed;\n    }\n  "]
                    }] }
        ];
        /** @nocollapse */
        TableTHeadComponent.ctorParameters = function () { return [
            { type: StyleService }
        ]; };
        TableTHeadComponent.propDecorators = {
            config: [{ type: core.Input }],
            columns: [{ type: core.Input }],
            sortKey: [{ type: core.Input }],
            sortState: [{ type: core.Input }],
            selectAllTemplate: [{ type: core.Input }],
            filtersTemplate: [{ type: core.Input }],
            additionalActionsTemplate: [{ type: core.Input }],
            filter: [{ type: core.Output }],
            order: [{ type: core.Output }],
            selectAll: [{ type: core.Output }],
            event: [{ type: core.Output }],
            th: [{ type: core.ViewChild, args: ['th', { static: false },] }],
            additionalActionMenu: [{ type: core.ViewChild, args: ['additionalActionMenu', { static: false },] }],
            onClick: [{ type: core.HostListener, args: ['document:click', ['$event.target'],] }]
        };
        return TableTHeadComponent;
    }());
    if (false) {
        /** @type {?} */
        TableTHeadComponent.prototype.menuActive;
        /** @type {?} */
        TableTHeadComponent.prototype.openedHeaderActionTemplate;
        /** @type {?} */
        TableTHeadComponent.prototype.startOffset;
        /** @type {?} */
        TableTHeadComponent.prototype.onSelectAllBinded;
        /** @type {?} */
        TableTHeadComponent.prototype.config;
        /** @type {?} */
        TableTHeadComponent.prototype.columns;
        /** @type {?} */
        TableTHeadComponent.prototype.sortKey;
        /** @type {?} */
        TableTHeadComponent.prototype.sortState;
        /** @type {?} */
        TableTHeadComponent.prototype.selectAllTemplate;
        /** @type {?} */
        TableTHeadComponent.prototype.filtersTemplate;
        /** @type {?} */
        TableTHeadComponent.prototype.additionalActionsTemplate;
        /** @type {?} */
        TableTHeadComponent.prototype.filter;
        /** @type {?} */
        TableTHeadComponent.prototype.order;
        /** @type {?} */
        TableTHeadComponent.prototype.selectAll;
        /** @type {?} */
        TableTHeadComponent.prototype.event;
        /**
         * @type {?}
         * @private
         */
        TableTHeadComponent.prototype.th;
        /** @type {?} */
        TableTHeadComponent.prototype.additionalActionMenu;
        /** @type {?} */
        TableTHeadComponent.prototype.styleService;
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var BaseModule = /** @class */ (function () {
        function BaseModule() {
        }
        BaseModule.decorators = [
            { type: core.NgModule, args: [{
                        declarations: [
                            BaseComponent,
                            HeaderComponent,
                            PaginationComponent,
                            TableTHeadComponent,
                            // Pipes
                            SearchPipe,
                            RenderPipe,
                            GlobalSearchPipe,
                            SortPipe,
                        ],
                        imports: [
                            common.CommonModule,
                            ngxPagination.NgxPaginationModule,
                            dragDrop.DragDropModule,
                            scrolling.ScrollingModule,
                        ],
                        exports: [BaseComponent],
                    },] }
        ];
        return BaseModule;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var TableModule = /** @class */ (function () {
        function TableModule() {
        }
        TableModule.decorators = [
            { type: core.NgModule, args: [{
                        imports: [
                            common.CommonModule,
                            BaseModule,
                        ],
                        bootstrap: [BaseComponent],
                        exports: [BaseComponent],
                        providers: [],
                    },] }
        ];
        return TableModule;
    }());

    exports.API = API;
    exports.DefaultConfig = DefaultConfig;
    exports.Event = Event;
    exports.STYLE = STYLE;
    exports.THEME = THEME;
    exports.TableModule = TableModule;
    exports.ɵa = DefaultConfigService;
    exports.ɵb = BaseModule;
    exports.ɵc = BaseComponent;
    exports.ɵd = GroupRowsService;
    exports.ɵe = StyleService;
    exports.ɵf = HeaderComponent;
    exports.ɵg = PaginationComponent;
    exports.ɵh = TableTHeadComponent;
    exports.ɵi = SearchPipe;
    exports.ɵj = RenderPipe;
    exports.ɵk = GlobalSearchPipe;
    exports.ɵl = SortPipe;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=ngx-easy-table.umd.js.map