@theseam/ui-common 0.3.14-beta.2 → 0.3.15-beta.1

package/fesm2015/theseam-ui-common-datatable.js

@@ -1,2550 +0,0 @@
-import { __awaiter, __decorate } from 'tslib';
-import { trigger, transition, style, animate } from '@angular/animations';
-import { coerceArray } from '@angular/cdk/coercion';
-import { DataSource, isDataSource } from '@angular/cdk/collections';
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChildren, Directive, TemplateRef, Injectable, ContentChild, Self, Inject, forwardRef, KeyValueDiffers, InjectionToken, isDevMode, Optional, ViewChild, ElementRef, HostListener, HostBinding, ViewContainerRef, NgZone, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, of, defer, combineLatest, EMPTY, Subscription, from, isObservable } from 'rxjs';
-import { switchMap, map, startWith, auditTime, shareReplay, tap, take, distinctUntilChanged, takeUntil, concatMap, catchError } from 'rxjs/operators';
-import { faEllipsisH, faChevronDown, faChevronRight, faSpinner, faColumns, faFileDownload } from '@fortawesome/free-solid-svg-icons';
-import { camelCase, setColumnDefaults as setColumnDefaults$1, translateTemplates, SelectionType, SortType, ColumnMode, DatatableComponent as DatatableComponent$1, DatatableRowDetailDirective, NgxDatatableModule, ScrollbarHelper } from '@marklb/ngx-datatable';
-import { InputBoolean, InputNumber } from '@theseam/ui-common/core';
-import { THESEAM_DATA_FILTER, THESEAM_DATA_FILTER_CONTAINER, composeDataFilterStates, composeDataFilters } from '@theseam/ui-common/data-filters';
-import { notNullOrUndefined, hasProperty, arrayMoveMutable, waitOnConditionAsync, observeControlValue } from '@theseam/ui-common/utils';
-import { Router, RouterModule } from '@angular/router';
-import { SeamConfirmDialogService, TheSeamConfirmDialogModule } from '@theseam/ui-common/confirm-dialog';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { ToastrService, ToastrModule } from 'ngx-toastr';
-import { DynamicValueHelperService, THESEAM_DYNAMIC_DATA } from '@theseam/ui-common/dynamic';
-import { TheSeamLoadingOverlayService, TheSeamLoadingModule } from '@theseam/ui-common/loading';
-import { HttpClient } from '@angular/common/http';
-import { TheSeamDynamicComponentLoader } from '@theseam/ui-common/dynamic-component-loader';
-import { Modal } from '@theseam/ui-common/modal';
-import { ESCAPE } from '@angular/cdk/keycodes';
-import { Overlay, OverlayModule } from '@angular/cdk/overlay';
-import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import { OverlayScrollbarsService } from '@theseam/ui-common/scrollbar';
-import { A11yModule } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
-import { TheSeamCheckboxModule } from '@theseam/ui-common/checkbox';
-import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
-import { TheSeamIconModule } from '@theseam/ui-common/icon';
-import { TheSeamMenuModule } from '@theseam/ui-common/menu';
-import { TheSeamPopoverModule } from '@theseam/ui-common/popover';
-import { TheSeamSharedModule } from '@theseam/ui-common/shared';
-import { TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
-
-class DatatableActionMenuItemComponent {
-    constructor() {
-        this.click = new EventEmitter();
-    }
-}
-DatatableActionMenuItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-action-menu-item',
-                template: ``,
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-DatatableActionMenuItemComponent.propDecorators = {
-    label: [{ type: Input }],
-    href: [{ type: Input, args: ['attr.href',] }],
-    target: [{ type: Input }],
-    queryParams: [{ type: Input }],
-    fragment: [{ type: Input }],
-    queryParamsHandling: [{ type: Input }],
-    preserveFragment: [{ type: Input }],
-    skipLocationChange: [{ type: Input }],
-    replaceUrl: [{ type: Input }],
-    state: [{ type: Input }],
-    routerLink: [{ type: Input }],
-    confirmDialog: [{ type: Input }],
-    disabled: [{ type: Input }],
-    click: [{ type: Output }]
-};
-
-class DatatableActionMenuComponent {
-    constructor(_confirmDialog, _router) {
-        this._confirmDialog = _confirmDialog;
-        this._router = _router;
-        this.faEllipsisH = faEllipsisH;
-        /** @ignore */
-        this._actionMenuPositions = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-            },
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-            },
-        ];
-    }
-    activateItem(event, item) {
-        if (item.confirmDialog) {
-            this._confirmDialog.open(item.confirmDialog.message, item.confirmDialog.alert)
-                .afterClosed()
-                .subscribe(v => {
-                if (v === 'confirm') {
-                    item.click.emit(event);
-                    if (item.href) {
-                        const win = window.open(item.href, item.target || undefined);
-                        // TODO: Consider if always setting opener to null is to restrictive
-                        // if (win && item.target && item.target.toLowerCase() === '_blank') {
-                        //   win.opener = null
-                        // }
-                    }
-                    else {
-                        const extras = {};
-                        if (item.queryParams) {
-                            extras.queryParams = item.queryParams;
-                        }
-                        if (item.fragment) {
-                            extras.fragment = item.fragment;
-                        }
-                        if (item.queryParamsHandling) {
-                            extras.queryParamsHandling = item.queryParamsHandling;
-                        }
-                        if (item.preserveFragment) {
-                            extras.preserveFragment = item.preserveFragment;
-                        }
-                        if (item.skipLocationChange) {
-                            extras.skipLocationChange = item.skipLocationChange;
-                        }
-                        if (item.replaceUrl) {
-                            extras.replaceUrl = item.replaceUrl;
-                        }
-                        if (item.state) {
-                            extras.state = item.state;
-                        }
-                        const commands = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];
-                        this._router.navigate(commands, extras);
-                    }
-                }
-            });
-        }
-        else {
-            item.click.emit(event);
-        }
-    }
-}
-DatatableActionMenuComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-action-menu',
-                template: "<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n\n  <ng-container *ngFor=\"let item of items\">\n    <ng-container *ngIf=\"(item.routerLink || item.href) && !item.confirmDialog; else noRouterLink\">\n      <a *ngIf=\"item.href; else noHref\"\n        seamMenuItem\n        class=\"list-group-item list-group-item-action py-1\"\n        [disabled]=\"item.disabled\"\n        [attr.href]=\"item.href\"\n        [target]=\"item.target\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a seamMenuItem\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [queryParams]=\"item.queryParams\"\n          [fragment]=\"$any(item.fragment)\"\n          [queryParamsHandling]=\"item.queryParamsHandling\"\n          [preserveFragment]=\"$any(item.preserveFragment)\"\n          [skipLocationChange]=\"$any(item.skipLocationChange)\"\n          [replaceUrl]=\"$any(item.replaceUrl)\"\n          [state]=\"$any(item.state)\"\n          [routerLink]=\"item.routerLink\"\n          [target]=\"$any(item.target)\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </a>\n      </ng-template>\n    </ng-container>\n    <ng-template #noRouterLink>\n      <button seamMenuItem\n        type=\"button\"\n        class=\"list-group-item list-group-item-action py-1\"\n        [disabled]=\"item.disabled\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </button>\n    </ng-template>\n  </ng-container>\n</seam-menu>\n\n<button type=\"button\" class=\"datatable-action-button btn\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"_actionMenuPositions || []\"\n  title=\"Row Actions\">\n  <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n</button>\n",
-                styles: [":host{display:block;position:relative}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"]
-            },] }
-];
-DatatableActionMenuComponent.ctorParameters = () => [
-    { type: SeamConfirmDialogService },
-    { type: Router }
-];
-DatatableActionMenuComponent.propDecorators = {
-    items: [{ type: ContentChildren, args: [DatatableActionMenuItemComponent,] }]
-};
-
-class DatatableCellTplDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-DatatableCellTplDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamDatatableCellTpl]'
-            },] }
-];
-DatatableCellTplDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-class DatatableColumnChangesService {
-    constructor() {
-        this.columnInputChanges = new Subject();
-    }
-    get columnInputChanges$() {
-        return this.columnInputChanges.asObservable();
-    }
-    onInputChange() {
-        this.columnInputChanges.next(undefined);
-    }
-}
-DatatableColumnChangesService.decorators = [
-    { type: Injectable }
-];
-
-// TODO: The column component should implement `ITheSeamDatatableColumn`, since
-// providing some properties by input and some by template could be confusing.
-class DatatableColumnComponent {
-    // @Input('headerTemplate')
-    // _headerTemplateInput: TemplateRef<any>;
-    // @ContentChild(DataTableColumnHeaderDirective, { read: TemplateRef, static: true })
-    // _headerTemplateQuery: TemplateRef<any>;
-    // get headerTemplate(): TemplateRef<any> {
-    //   return this._headerTemplateInput || this._headerTemplateQuery;
-    // }
-    // @Input('treeToggleTemplate')
-    // _treeToggleTemplateInput: TemplateRef<any>;
-    // @ContentChild(DataTableColumnCellTreeToggle, { read: TemplateRef, static: true })
-    // _treeToggleTemplateQuery: TemplateRef<any>;
-    // get treeToggleTemplate(): TemplateRef<any> {
-    //   return this._treeToggleTemplateInput || this._treeToggleTemplateQuery;
-    // }
-    constructor(_columnChangesService) {
-        this._columnChangesService = _columnChangesService;
-        this._isFirstChange = true;
-    }
-    get cellTemplate() {
-        return this._cellTemplateInput || this._cellTemplateQuery;
-    }
-    ngOnInit() { }
-    ngOnChanges(changes) {
-        if (this._isFirstChange) {
-            this._isFirstChange = false;
-        }
-        else {
-            this._columnChangesService.onInputChange();
-        }
-    }
-    getCellDirective() {
-        if (this.cellTplDirective) {
-            return this.cellTplDirective;
-        }
-        return null;
-    }
-}
-DatatableColumnComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-column',
-                template: "<p>\n  datatable-column works!\n</p>\n",
-                styles: [""]
-            },] }
-];
-DatatableColumnComponent.ctorParameters = () => [
-    { type: DatatableColumnChangesService }
-];
-DatatableColumnComponent.propDecorators = {
-    name: [{ type: Input }],
-    prop: [{ type: Input }],
-    flexGrow: [{ type: Input }],
-    minWidth: [{ type: Input }],
-    maxWidth: [{ type: Input }],
-    width: [{ type: Input }],
-    resizeable: [{ type: Input }],
-    sortable: [{ type: Input }],
-    draggable: [{ type: Input }],
-    canAutoResize: [{ type: Input }],
-    comparator: [{ type: Input }],
-    headerTemplate: [{ type: Input }],
-    checkboxable: [{ type: Input }],
-    headerCheckboxable: [{ type: Input }],
-    headerClass: [{ type: Input }],
-    cellClass: [{ type: Input }],
-    frozenLeft: [{ type: Input }],
-    frozenRight: [{ type: Input }],
-    pipe: [{ type: Input }],
-    isTreeColumn: [{ type: Input }],
-    treeLevelIndent: [{ type: Input }],
-    summaryFunc: [{ type: Input }],
-    summaryTemplate: [{ type: Input }],
-    hidden: [{ type: Input }],
-    cellTplDirective: [{ type: ContentChild, args: [DatatableCellTplDirective, { static: true },] }],
-    _cellTemplateInput: [{ type: Input, args: ['cellTemplate',] }],
-    _cellTemplateQuery: [{ type: ContentChild, args: [DatatableCellTplDirective, { read: TemplateRef, static: true },] }]
-};
-
-class DatatableFooterTplDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-DatatableFooterTplDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamDatatableFooterTpl]'
-            },] }
-];
-DatatableFooterTplDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-class TheSeamDatatableFooterDirective {
-    get template() {
-        return this._templateInput || this._templateQuery;
-    }
-}
-TheSeamDatatableFooterDirective.decorators = [
-    { type: Directive, args: [{
-                // tslint:disable-next-line: directive-selector
-                selector: 'seam-datatable-footer'
-            },] }
-];
-TheSeamDatatableFooterDirective.propDecorators = {
-    _templateInput: [{ type: Input, args: ['template',] }],
-    _templateQuery: [{ type: ContentChild, args: [DatatableFooterTplDirective, { read: TemplateRef, static: true },] }]
-};
-
-class DatatableFilterDirective {
-    constructor(dataFilters) {
-        if (dataFilters && dataFilters.length > 0) {
-            this._filter = dataFilters[0];
-        }
-    }
-    get filter() {
-        return this._filter;
-    }
-}
-DatatableFilterDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamDatatableFilter]'
-            },] }
-];
-DatatableFilterDirective.ctorParameters = () => [
-    { type: Array, decorators: [{ type: Self }, { type: Inject, args: [THESEAM_DATA_FILTER,] }] }
-];
-
-const _THESEAM_DATA_FILTER_CONTAINER = {
-    provide: THESEAM_DATA_FILTER_CONTAINER,
-    // tslint:disable-next-line:no-use-before-declare
-    useExisting: forwardRef(() => DatatableMenuBarComponent)
-};
-class DatatableMenuBarComponent {
-    constructor() {
-        this._filtersArr = [];
-        this.filtersChanged = new EventEmitter();
-    }
-    get filterDirectives() {
-        return this._filterDirectives;
-    }
-    set filterDirectives(value) {
-        this._filterDirectives = value;
-        this.filtersChanged.emit(this.filters());
-    }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        // console.log('_filterDirectives', this._filterDirectives, this.filters())
-    }
-    filters() {
-        const fDirectives = this._filterDirectives
-            ? this._filterDirectives.map(f => f.filter).filter(notNullOrUndefined)
-            : [];
-        const fArr = this._filtersArr
-            .filter(f => fDirectives.findIndex(fd => fd.uid === f.uid) === -1);
-        return [...fArr, ...fDirectives];
-    }
-    addFilter(dataFilter) {
-        this._filtersArr.push(dataFilter);
-        this.filtersChanged.emit(this.filters());
-    }
-    removeFilter(dataFilter) {
-        this._filtersArr = this._filtersArr.filter(f => f !== dataFilter);
-        this.filtersChanged.emit(this.filters());
-    }
-}
-DatatableMenuBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-menu-bar',
-                template: "<div class=\"bg-light border rounded p-2\">\n  <ng-content></ng-content>\n</div>\n",
-                providers: [_THESEAM_DATA_FILTER_CONTAINER],
-                styles: [":host{display:block}\n"]
-            },] }
-];
-DatatableMenuBarComponent.ctorParameters = () => [];
-DatatableMenuBarComponent.propDecorators = {
-    filterDirectives: [{ type: ContentChildren, args: [DatatableFilterDirective,] }]
-};
-
-class DatatableRowDetailTplDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-DatatableRowDetailTplDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamDatatableRowDetailTpl]'
-            },] }
-];
-DatatableRowDetailTplDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-class TheSeamDatatableRowDetailDirective {
-    constructor() {
-        /**
-         * The detail row height is required especially
-         * when virtual scroll is enabled.
-         */
-        this.rowHeight = 0;
-        /**
-         * Row detail row visbility was toggled.
-         */
-        // NOTE: This will trigger from the internal ngx-datatable toggle event.
-        this.toggle = new EventEmitter();
-        /**
-         * Internal use for wrapper only.
-         *
-         * To avoid confusion with this directives output and the ngx-datatable
-         * directive being wrapped, this directive emits `_toggle` stream to the
-         * `ngx-datatable-row-detail` directive and emits it's `toggle` stream out to
-         * this directives `toggle` stream.
-         * @ignore
-         */
-        this._toggle = new EventEmitter();
-    }
-    get template() {
-        return this._templateInput || this._templateQuery;
-    }
-    /**
-     * Toggle the expansion of the row
-     */
-    toggleExpandRow(row) {
-        this._toggle.emit({
-            type: 'row',
-            value: row
-        });
-    }
-    /**
-     * API method to expand all the rows.
-     */
-    expandAllRows() {
-        this._toggle.emit({
-            type: 'all',
-            value: true
-        });
-    }
-    /**
-     * API method to collapse all the rows.
-     */
-    collapseAllRows() {
-        this._toggle.emit({
-            type: 'all',
-            value: false
-        });
-    }
-}
-TheSeamDatatableRowDetailDirective.decorators = [
-    { type: Directive, args: [{
-                // tslint:disable-next-line: directive-selector
-                selector: 'seam-datatable-row-detail'
-            },] }
-];
-TheSeamDatatableRowDetailDirective.propDecorators = {
-    rowHeight: [{ type: Input }],
-    _templateInput: [{ type: Input, args: ['template',] }],
-    _templateQuery: [{ type: ContentChild, args: [DatatableRowDetailTplDirective, { read: TemplateRef, static: true },] }],
-    toggle: [{ type: Output }]
-};
-
-class DatatableRowActionItemDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-DatatableRowActionItemDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamDatatableRowActionItem]'
-            },] }
-];
-DatatableRowActionItemDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-class DatatableDataSource extends DataSource {
-    constructor() {
-        super();
-        this._datatableSubject = new BehaviorSubject(undefined);
-        this.sorts$ = this._datatableSubject.pipe(switchMap(_datatable => {
-            if (!_datatable) {
-                return of([]);
-            }
-            return _datatable.sort.pipe(map(v => v.sorts), startWith(_datatable.sorts));
-        }));
-        this.filterStates$ = this._datatableSubject.pipe(switchMap(_datatable => {
-            if (!_datatable) {
-                return of([]);
-            }
-            return _datatable.filterStates;
-        }));
-        this.page$ = this._datatableSubject.pipe(switchMap(_datatable => {
-            if (!_datatable) {
-                return of({
-                    offset: 0,
-                    pageSize: 0,
-                    limit: undefined,
-                    count: 0
-                });
-            }
-            return _datatable.page.pipe(startWith(_datatable.pageInfo));
-        }));
-    }
-    // connect(): Observable<readonly TRow[]> {
-    //   return this.
-    // }
-    // disconnect(): void {
-    //   throw new Error('Method not implemented.')
-    // }
-    setDatatableAccessor(accessor) {
-        this._datatableSubject.next(accessor);
-    }
-}
-
-const ACTION_MENU_COLUMN_PROP = '$$__actionMenu__';
-function createActionMenuColumn(cellTemplate, headerTemplate, frozenLeft, frozenRight) {
-    return {
-        prop: ACTION_MENU_COLUMN_PROP,
-        name: '',
-        width: 50,
-        minWidth: 50,
-        maxWidth: 50,
-        resizeable: false,
-        sortable: false,
-        draggable: false,
-        // TODO: Fix column auto sizing with fixed column and cell overlay before enabling.
-        frozenLeft: frozenLeft,
-        frozenRight: frozenRight,
-        cellTemplate,
-        headerTemplate,
-    };
-}
-
-const CHECKBOX_COLUMN_PROP = '$$__checkbox__';
-function createCheckboxColumn() {
-    return {
-        prop: CHECKBOX_COLUMN_PROP,
-        name: '',
-        width: 40,
-        sortable: false,
-        canAutoResize: false,
-        draggable: false,
-        resizeable: false,
-        headerCheckboxable: true,
-        checkboxable: true,
-    };
-}
-
-function getColumnProp(col) {
-    if (!notNullOrUndefined(col.prop) && col.name) {
-        return camelCase(col.name);
-    }
-    return col.prop === null ? undefined : col.prop;
-}
-
-function setColumnDefaults(columns) {
-    for (const column of columns) {
-        if (!column.hasOwnProperty('hidden')) {
-            column.hidden = false;
-        }
-    }
-    setColumnDefaults$1(columns);
-}
-
-// TODO: Replace with a `translateTemplates` function that fits the
-// wrapper component better.
-function translateTemplateColumns(v) {
-    const cols = translateTemplates(v);
-    for (const col of cols) {
-        col.prop = getColumnProp(col);
-    }
-    return cols;
-}
-
-var ColumnsTypes;
-(function (ColumnsTypes) {
-    ColumnsTypes[ColumnsTypes["Input"] = 0] = "Input";
-    ColumnsTypes[ColumnsTypes["Template"] = 1] = "Template";
-    ColumnsTypes[ColumnsTypes["Result"] = 2] = "Result";
-})(ColumnsTypes || (ColumnsTypes = {}));
-class ColumnsManagerService {
-    constructor(_differs, _columnChangesService) {
-        this._differs = _differs;
-        this._columnChangesService = _columnChangesService;
-        this._updateColumns = new Subject();
-        this._inputColumns = new BehaviorSubject([]);
-        this._templateColumns = new BehaviorSubject([]);
-        this._inpColDiffersMap = new Map();
-        this._tplColDiffersMap = new Map();
-        this._resultColDiffersMap = new Map();
-        const templateColumns$ = this._columnChangesService.columnInputChanges$.pipe(startWith(undefined), switchMap(() => {
-            return this._templateColumns.asObservable().pipe(map(translateTemplateColumns));
-        }));
-        this.columns$ = defer(() => {
-            let isFirst = true;
-            return combineLatest([
-                this._inputColumns.asObservable(),
-                templateColumns$,
-                this._updateColumns.asObservable().pipe(auditTime(0), startWith(undefined))
-            ]).pipe(switchMap(([inputColumns, templateColumns]) => {
-                const cols = this._mergeColumns(inputColumns, templateColumns);
-                const hasColumnsChanged = this._hasColumnsChanged(cols);
-                // TODO: Look for columns added/removed and remove the removed columns
-                // differs, not just changes to columns.
-                const hasAddedOrRemovedColumns = this._hasAddedOrRemovedColumns(cols);
-                // NOTE: Both checks need to be run, even though only one needs to be
-                // true, because their differs need to be called.
-                if (hasColumnsChanged || hasAddedOrRemovedColumns || isFirst) {
-                    isFirst = false;
-                    return of(cols);
-                }
-                return EMPTY;
-            }));
-        }).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
-    }
-    setInputColumns(columns) {
-        this._inputColumns.next(columns);
-    }
-    setTemplateColumns(columns) {
-        this._templateColumns.next(columns);
-    }
-    setInternalColumnsGetter(getter) {
-        this._internalColumnsGetter = getter || undefined;
-        this._updateColumns.next(undefined);
-    }
-    setSelectionType(selectionType) {
-        const changed = this._selectionType !== selectionType;
-        this._selectionType = selectionType;
-        if (changed) {
-            this._updateColumns.next(undefined);
-        }
-    }
-    getSelectionType() {
-        return this._selectionType;
-    }
-    setRowActionItem(rowActionItem) {
-        const changed = this._rowActionItem !== rowActionItem;
-        this._rowActionItem = rowActionItem;
-        if (changed) {
-            this._updateColumns.next(undefined);
-        }
-    }
-    setActionItemColumnPosition(actionItemColumnPosition) {
-        const changed = this._actionItemColumnPosition !== actionItemColumnPosition;
-        this._actionItemColumnPosition = actionItemColumnPosition;
-        if (changed) {
-            this._updateColumns.next(undefined);
-        }
-    }
-    setActionMenuCellTpl(actionMenuCellTpl) {
-        const changed = this._actionMenuCellTpl !== actionMenuCellTpl;
-        this._actionMenuCellTpl = actionMenuCellTpl;
-        if (changed) {
-            this._updateColumns.next(undefined);
-        }
-    }
-    setBlankHeaderTpl(blankHeaderTpl) {
-        const changed = this._blankHeaderTpl !== blankHeaderTpl;
-        this._blankHeaderTpl = blankHeaderTpl;
-        if (changed) {
-            this._updateColumns.next(undefined);
-        }
-    }
-    setTreeToggleTpl(treeToggleTpl) {
-        const changed = this._treeToggleTpl !== treeToggleTpl;
-        this._treeToggleTpl = treeToggleTpl;
-        if (changed) {
-            this._updateColumns.next(undefined);
-        }
-    }
-    setHeaderTpl(headerTpl) {
-        const changed = this._headerTpl !== headerTpl;
-        this._headerTpl = headerTpl;
-        if (changed) {
-            this._updateColumns.next(undefined);
-        }
-    }
-    setCellTypeSelectorTpl(cellTypeSelectorTpl) {
-        const changed = this._cellTypeSelectorTpl !== cellTypeSelectorTpl;
-        this._cellTypeSelectorTpl = cellTypeSelectorTpl;
-        if (changed) {
-            this._updateColumns.next(undefined);
-        }
-    }
-    _mergeColumns(inputColumns, templateColumns) {
-        const cols = [];
-        // Add the first column checkbox if 'checkbox' selection is enabled.
-        if (this._shouldAddCheckboxColumn()) {
-            cols.push(createCheckboxColumn());
-        }
-        // Column needs to be provided in the inputColumns, so iterate the
-        // inputColumns.
-        for (const inpCol of inputColumns) {
-            const prop = getColumnProp(inpCol);
-            if (!notNullOrUndefined(prop)) {
-                throw Error(`Column may have 'prop' or 'name' defined.`);
-            }
-            const internalCol = this._getInternalColumn(prop);
-            const inpColDif = this._getColDif(inpCol, ColumnsTypes.Input);
-            if (notNullOrUndefined(inpColDif)) {
-                this._updateColDif(inpColDif, internalCol, inpCol);
-            }
-            const tplCol = this._findColumnByProp(prop, templateColumns);
-            if (tplCol !== undefined) {
-                const tplColDif = this._getColDif(tplCol, ColumnsTypes.Template);
-                if (notNullOrUndefined(tplColDif)) {
-                    this._updateColDif(tplColDif, internalCol, tplCol);
-                }
-            }
-            const _col = Object.assign(Object.assign(Object.assign({}, (internalCol || {})), inpCol), (tplCol || {}));
-            if (this._shouldAddTreeToggleColumn(_col)) {
-                _col.treeToggleTemplate = this._treeToggleTpl;
-            }
-            if (this._shouldAddHeaderTemplate(_col)) {
-                _col.headerTemplate = this._headerTpl;
-            }
-            if (this._shouldAddCellTypeSelectorTpl(_col)) {
-                _col.cellTemplate = this._cellTypeSelectorTpl;
-            }
-            cols.push(_col);
-        }
-        if (this._shouldAddRowActionColumn()) {
-            cols.push(createActionMenuColumn(this._actionMenuCellTpl, this._blankHeaderTpl, this._rowActionColumnIsFrozenLeft(), this._rowActionColumnIsFrozenRight()));
-        }
-        // Make sure the default for any missing props are set.
-        // TODO: Determine if this should be done earlier, because I don't like
-        // how this is done after dif checks.
-        setColumnDefaults(cols);
-        return cols;
-    }
-    _getInternalColumns() {
-        if (this._internalColumnsGetter === undefined) {
-            return undefined;
-        }
-        return this._internalColumnsGetter();
-    }
-    _getInternalColumn(prop) {
-        const internalCols = this._getInternalColumns();
-        if (internalCols === undefined) {
-            return undefined;
-        }
-        return internalCols.find(c => getColumnProp(c) === prop);
-    }
-    _findColumnByProp(prop, columns) {
-        return columns.find(c => getColumnProp(c) === prop);
-    }
-    _getDifMapForColumnsType(columnsType) {
-        switch (columnsType) {
-            case ColumnsTypes.Input: return this._inpColDiffersMap;
-            case ColumnsTypes.Template: return this._tplColDiffersMap;
-            case ColumnsTypes.Result: return this._resultColDiffersMap;
-        }
-    }
-    _getColumnDiffer(prop, colsType) {
-        const difMap = this._getDifMapForColumnsType(colsType);
-        if (difMap === null) {
-            throw Error(`Invalid columns type.`);
-        }
-        if (!difMap.has(prop)) {
-            difMap.set(prop, this._differs.find({}).create());
-        }
-        const differ = difMap.get(prop);
-        if (differ === undefined) {
-            throw Error(`Differ not found. New differ should have been created.`);
-        }
-        return differ;
-    }
-    _getColDif(col, colsType) {
-        const prop = getColumnProp(col);
-        if (prop === undefined) {
-            throw Error(`Column prop not found.`);
-        }
-        return this._getColumnDiffer(prop, colsType).diff(col);
-    }
-    _updateColDif(colDif, internalColumn, col) {
-        colDif.forEachRemovedItem(r => {
-            if (internalColumn && internalColumn.hasOwnProperty(r.key)) {
-                const k = r.key;
-                delete internalColumn[k];
-            }
-        });
-        colDif.forEachAddedItem(r => col[r.key] = r.currentValue);
-        colDif.forEachChangedItem(r => col[r.key] = r.currentValue);
-    }
-    _hasAddedOrRemovedColumns(columns) {
-        if (!this._colPropsDiffer) {
-            this._colPropsDiffer = this._differs.find([]).create();
-        }
-        const props = columns.map(c => getColumnProp(c));
-        return this._colPropsDiffer.diff(props) !== null;
-    }
-    _hasColumnsChanged(columns) {
-        let colChanged = false;
-        for (const col of columns) {
-            const resultDif = this._getColDif(col, ColumnsTypes.Result);
-            if (resultDif) {
-                // NOTE: Can't return early, because the differs need to be updated.
-                colChanged = true;
-            }
-        }
-        return colChanged;
-    }
-    _shouldAddCheckboxColumn() {
-        return this._selectionType === SelectionType.checkbox;
-    }
-    _shouldAddRowActionColumn() {
-        return this._rowActionItem !== undefined;
-    }
-    _rowActionColumnIsFrozenLeft() {
-        return this._actionItemColumnPosition === 'frozenLeft';
-    }
-    _rowActionColumnIsFrozenRight() {
-        return this._actionItemColumnPosition === 'frozenRight';
-    }
-    _shouldAddTreeToggleColumn(column) {
-        return column.isTreeColumn !== undefined && column.isTreeColumn &&
-            (!hasProperty(column, 'treeToggleTemplate') || !notNullOrUndefined(column.treeToggleTemplate));
-    }
-    _shouldAddHeaderTemplate(column) {
-        return !hasProperty(column, 'headerTemplate');
-    }
-    _shouldAddCellTypeSelectorTpl(column) {
-        return hasProperty(column, 'cellType');
-    }
-}
-ColumnsManagerService.decorators = [
-    { type: Injectable }
-];
-ColumnsManagerService.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: DatatableColumnChangesService }
-];
-
-const CURRENT_DATATABLE_PREFERENCES_VERSION = 2;
-const EMPTY_DATATABLE_PREFERENCES = {
-    version: 2,
-    alterations: []
-};
-
-const THESEAM_DATATABLE_PREFERENCES_ACCESSOR = new InjectionToken('TheSeamDatatablePreferencesAccessor');
-
-// TODO: Add per key status
-class DatatablePreferencesService {
-    constructor(_prefsAccessor) {
-        this._prefsAccessor = _prefsAccessor;
-        this._tablePrefsMap = new Map();
-        this._pending = false;
-        this._loaded = false;
-    }
-    get pending() { return this._pending; }
-    get loaded() { return this._loaded; }
-    preferences(preferenceKey) {
-        let prefs = this._tablePrefsMap.get(preferenceKey);
-        if (!prefs) {
-            const refreshSubject = new Subject();
-            prefs = {
-                observable: this._createObservable(refreshSubject, preferenceKey),
-                refresh: refreshSubject
-            };
-            this._tablePrefsMap.set(preferenceKey, prefs);
-        }
-        return prefs.observable;
-    }
-    _createObservable(refreshSubject, prefKey) {
-        if (!this._prefsAccessor) {
-            return of(EMPTY_DATATABLE_PREFERENCES);
-        }
-        const accessor = (key) => this._prefsAccessor ? this._prefsAccessor.get(key) : of(JSON.stringify(EMPTY_DATATABLE_PREFERENCES));
-        return refreshSubject.pipe(startWith(undefined), switchMap(() => accessor(prefKey).pipe(map(v => {
-            if (!v) {
-                return null;
-            }
-            // TODO: Add a schema validator and migration tool to avoid parsing issues.
-            try {
-                // return JSON.parse(v) as TheSeamDatatablePreferences
-                return this._descerializePreferences(v);
-            }
-            catch (error) {
-                if (isDevMode()) {
-                    console.error(error);
-                }
-                return null;
-            }
-        }), map(v => notNullOrUndefined(v) ? v : EMPTY_DATATABLE_PREFERENCES), 
-        // tap(v => console.log('preferences$', v)),
-        tap(() => {
-            this._pending = false;
-            this._loaded = true;
-        }))), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    refresh(preferenceKey) {
-        const prefs = this._tablePrefsMap.get(preferenceKey);
-        if (prefs) {
-            this._pending = true;
-            prefs.refresh.next();
-        }
-    }
-    // TODO: Improve this updating to be more generic, so we can quickly add
-    // edits for different preference schema's.
-    //
-    // TODO: Decide if a send queue/merging of pending queue is needed to avoid
-    // out of order updates. This shouldn't be an issue, with how fast preferences
-    // will most likely be changing, but it could happen in situations, such as
-    // network issues.
-    // public setColumnPreference(preferenceKey: string, column: TheSeamDatatablePreferencesColumn): void {
-    //   if (!this._prefsAccessor) {
-    //     return
-    //   }
-    //   this._pending = true
-    //   this.preferences(preferenceKey).pipe(
-    //     map(prefs => {
-    //       // Making the preferences immutable may not be necessary, but for now
-    //       // this obj->str->obj will work as a naive clone.
-    //       const columns = JSON.parse(JSON.stringify(prefs.columns || []))
-    //       const _colPref = columns.find((c: any) => c.prop === column.prop)
-    //       // console.log('has', _colPref)
-    //       if (_colPref) {
-    //         // console.log('hasProperty(column, "width"))', hasProperty(column, 'width'))
-    //         if (hasProperty(column, 'width')) { _colPref.width = column.width }
-    //         if (hasProperty(column, 'canAutoResize')) { _colPref.canAutoResize = column.canAutoResize }
-    //         if (hasProperty(column, 'hidden')) { _colPref.hidden = column.hidden }
-    //       } else {
-    //         columns.push({ ...column })
-    //       }
-    //       const newPrefs: TheSeamDatatablePreferences = { ...prefs, columns }
-    //       return newPrefs
-    //     }),
-    //     // tap(v => console.log('newPrefs', v)),
-    //     take(1),
-    //     switchMap(newPrefs => this._prefsAccessor
-    //       ? this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
-    //       : of(newPrefs)
-    //     ),
-    //     tap(() => this.refresh(preferenceKey))
-    //   )
-    //   .subscribe()
-    // }
-    setAlterations(preferenceKey, alterations) {
-        if (!this._prefsAccessor) {
-            return;
-        }
-        this._pending = true;
-        this.preferences(preferenceKey).pipe(map(prefs => {
-            // Making the preferences immutable may not be necessary, but for now
-            // this obj->str->obj will work as a naive clone.
-            // const columns = JSON.parse(JSON.stringify(prefs.columns || []))
-            // const _colPref = columns.find((c: any) => c.prop === column.prop)
-            // // console.log('has', _colPref)
-            // if (_colPref) {
-            //   // console.log('hasProperty(column, "width"))', hasProperty(column, 'width'))
-            //   if (hasProperty(column, 'width')) { _colPref.width = column.width }
-            //   if (hasProperty(column, 'canAutoResize')) { _colPref.canAutoResize = column.canAutoResize }
-            //   if (hasProperty(column, 'hidden')) { _colPref.hidden = column.hidden }
-            // } else {
-            //   columns.push({ ...column })
-            // }
-            // const newPrefs: TheSeamDatatablePreferences = { ...prefs, columns }
-            // return newPrefs
-            const newPrefs = Object.assign(Object.assign({}, EMPTY_DATATABLE_PREFERENCES), { alterations });
-            return newPrefs;
-        }), 
-        // tap(v => console.log('newPrefs', v)),
-        take(1), switchMap(newPrefs => this._prefsAccessor
-            ? this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
-            : of(newPrefs)), tap(() => this.refresh(preferenceKey)))
-            .subscribe();
-    }
-    // public withColumnPreferences<T>(preferenceKey: string, columns: T[]): Observable<T[]> {
-    //   return this.preferences(preferenceKey).pipe(
-    //     startWith(EMPTY_DATATABLE_PREFERENCES),
-    //     map(preferences => preferences && preferences.columns
-    //       ? withStoredColumnInfo(columns, preferences.columns) as T[]
-    //       : columns
-    //     )
-    //   )
-    // }
-    _descerializePreferences(serialized) {
-        const prefs = JSON.parse(serialized);
-        // TODO: Implement migration
-        return prefs;
-    }
-}
-DatatablePreferencesService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DatatablePreferencesService_Factory() { return new DatatablePreferencesService(i0.ɵɵinject(THESEAM_DATATABLE_PREFERENCES_ACCESSOR, 8)); }, token: DatatablePreferencesService, providedIn: "root" });
-DatatablePreferencesService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-DatatablePreferencesService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_DATATABLE_PREFERENCES_ACCESSOR,] }] }
-];
-
-const THESEAM_DATATABLE_ACCESSOR = new InjectionToken('TheSeamDatatableAccessor');
-
-function removeUnusedDiffs(cols, colDiffersInp, colDiffersTpl) {
-    const inpKeys = Object.keys(colDiffersInp);
-    inpKeys.filter(k => cols.findIndex(c => c.prop === k) === -1)
-        .forEach(k => { delete colDiffersInp[k]; });
-    const tplKeys = Object.keys(colDiffersTpl);
-    tplKeys.filter(k => cols.findIndex(c => c.prop === k) === -1)
-        .forEach(k => { delete colDiffersTpl[k]; });
-}
-
-/**
- * Alteration applied to a column or columns that can be persisted.
- *
- * Tracking if a column was altered by user or library code can be confusing.
- * This allows us to store a list of replayable alterations on columns. By
- * having a defined way to implement alterations, the datatable should be easier
- * to support external features that want to provide an alteration.
- *
- * NOTE: Current, to unapply an alteration you can create an alteration with
- * `persistent` set to false and the alteration will be removed after `apply()`
- * is called.
- */
-class ColumnsAlteration {
-    constructor(
-    /**
-     * Persistable state.
-     *
-     * Returned value should be JSON stringifyable.
-     */
-    state, 
-    /**
-     * If false, the state will not be persisted to a persistent storage and
-     * will be removed after applied.
-     */
-    persistent) {
-        this.state = state;
-        this.persistent = persistent;
-        this.state = state;
-    }
-    toJSON() {
-        return {
-            id: this.id,
-            type: this.type,
-            state: this.state
-        };
-    }
-}
-
-class HideColumnColumnsAlteration extends ColumnsAlteration {
-    constructor(state, persistent) {
-        super(state, persistent);
-        this.type = 'hide-column';
-        if (!this._isValidState(state)) {
-            throw Error(`Invalid state: ${JSON.stringify(state)}`);
-        }
-        this.id = `${this.type}--${state.columnProp}`;
-    }
-    apply(columns, datatable) {
-        for (const col of columns) {
-            const prop = getColumnProp(col);
-            if (prop === this.state.columnProp) {
-                col.hidden = this.state.hidden;
-            }
-        }
-    }
-    _isValidState(state) {
-        // NOTE: Checking null or undefined, even though the type doesn't allow,
-        // because the state may have been loaded from an invalid persistant
-        // storage.
-        // TODO: Remove when state validation/migration is implemented to happen
-        // when retrieved from storage.
-        if (!notNullOrUndefined(state.columnProp)) {
-            return false;
-        }
-        // TODO: Remove when state validation/migration is implemented to happen
-        // when retrieved from storage.
-        if (!notNullOrUndefined(state.hidden)) {
-            return false;
-        }
-        return true;
-    }
-}
-
-class SortColumnsAlteration extends ColumnsAlteration {
-    constructor(state, persistent) {
-        super(state, persistent);
-        this.type = 'sort';
-        if (!this._isValidState(state)) {
-            throw Error(`Invalid state: ${JSON.stringify(state)}`);
-        }
-        this.id = `${this.type}`;
-    }
-    apply(columns, datatable) {
-        if (datatable.sortType === SortType.single) {
-            datatable.sorts = this.state.sorts.length > 0 ? [this.state.sorts[0]] : [];
-        }
-        else {
-            datatable.sorts = this.state.sorts;
-        }
-    }
-    _isValidState(state) {
-        // NOTE: Checking null or undefined, even though the type doesn't allow,
-        // because the state may have been loaded from an invalid persistant
-        // storage.
-        // TODO: Remove when state validation/migration is implemented to happen
-        // when retrieved from storage.
-        if (!notNullOrUndefined(state.sorts)) {
-            return false;
-        }
-        return true;
-    }
-}
-
-class WidthColumnsAlteration extends ColumnsAlteration {
-    constructor(state, persistent) {
-        super(state, persistent);
-        this.type = 'width';
-        if (!this._isValidState(state)) {
-            throw Error(`Invalid state: ${JSON.stringify(state)}`);
-        }
-        this.id = `${this.type}--${state.columnProp}`;
-    }
-    apply(columns, datatable) {
-        for (const col of columns) {
-            const prop = getColumnProp(col);
-            if (prop === this.state.columnProp) {
-                col.canAutoResize = this.state.canAutoResize;
-                if (notNullOrUndefined(this.state.width)) {
-                    col.width = this.state.width;
-                }
-            }
-        }
-    }
-    _isValidState(state) {
-        // NOTE: Checking null or undefined, even though the type doesn't allow,
-        // because the state may have been loaded from an invalid persistant
-        // storage.
-        // TODO: Remove when state validation/migration is implemented to happen
-        // when retrieved from storage.
-        if (!notNullOrUndefined(state.columnProp)) {
-            return false;
-        }
-        // TODO: Remove when state validation/migration is implemented to happen
-        // when retrieved from storage.
-        if (!notNullOrUndefined(state.canAutoResize)) {
-            return false;
-        }
-        return true;
-    }
-}
-
-class ColumnsAlterationsManagerService {
-    constructor() {
-        this._changesSubject = new Subject();
-        this._alterations = [];
-        this.changes = this._changesSubject.asObservable();
-    }
-    get() {
-        return [...this._alterations];
-    }
-    /**
-     * Adds alterations to be applied to columns.
-     *
-     * If an alteration with the same `id` already exists then the existing
-     * alteration will be removed and the new one added.
-     *
-     * NOTE: When there is a duplicate alteration the old alteration is removed,
-     * instead of updated, to maintain the order alterations are applied.
-     */
-    add(alterations, options) {
-        // console.log('add', alterations)
-        const removed = this.remove(alterations, { emitEvent: false });
-        this._alterations = [...this._alterations, ...alterations];
-        const changes = [
-            ...removed,
-            ...alterations.map(a => {
-                const record = {
-                    type: 'added',
-                    alteration: a
-                };
-                return record;
-            })
-        ];
-        if (notNullOrUndefined(options === null || options === void 0 ? void 0 : options.emitEvent) && !(options === null || options === void 0 ? void 0 : options.emitEvent)) {
-            return changes;
-        }
-        this._emitChanges(changes);
-        return changes;
-    }
-    remove(alterations, options) {
-        // console.log('remove', alterations)
-        const removed = [];
-        this._alterations = this._alterations.filter(x => {
-            const found = alterations.findIndex(y => y.id === x.id) !== -1;
-            if (found) {
-                const eventRecord = {
-                    type: 'removed',
-                    alteration: x
-                };
-                removed.push(eventRecord);
-            }
-            return !found;
-        });
-        // console.log('removed', removed, this._alterations)
-        if (notNullOrUndefined(options === null || options === void 0 ? void 0 : options.emitEvent) && !(options === null || options === void 0 ? void 0 : options.emitEvent)) {
-            return removed;
-        }
-        this._emitChanges(removed);
-        return removed;
-    }
-    apply(columns, datatable) {
-        for (const a of this._alterations) {
-            a.apply(columns, datatable);
-        }
-        this._removeNonPersistant();
-    }
-    // TODO: Make aware of original column order and properties. This is tricky,
-    // because the datatable does not deal with immutable column/row records and
-    // it is hard to know where changes happened. Just serializing the columns
-    // input is not enough, because the columns input is called anytime the user
-    // makes a column change. We can probably come up with a mostly accurate
-    // implementation, such as "reset original columns cache when preferencesKey
-    // changes" or "number of columns change". There are issues with those rules,
-    // but with some testing/experimenting I think there should be a "good enough"
-    // solution.
-    //
-    // TODO: Find a generic way to clear alterations. I would like to add an
-    // `unapply` method to `ColumnsAlteration`, but since the alterations
-    // themselves are not too generic it may be tricky.
-    clear(options) {
-        const changes = [];
-        for (const colAlt of this._alterations) {
-            switch (colAlt.type) {
-                case 'hide-column': {
-                    const alteration = new HideColumnColumnsAlteration({ columnProp: colAlt.state.columnProp, hidden: false }, false);
-                    changes.push(...this.add([alteration]));
-                    break;
-                }
-                case 'order': {
-                    changes.push(...this.remove([colAlt]));
-                    break;
-                }
-                case 'sort': {
-                    const alteration = new SortColumnsAlteration({ sorts: [] }, false);
-                    changes.push(...this.add([alteration]));
-                    break;
-                }
-                case 'width': {
-                    const alteration = new WidthColumnsAlteration({ columnProp: colAlt.state.columnProp, canAutoResize: true }, false);
-                    changes.push(...this.add([alteration]));
-                    break;
-                }
-            }
-        }
-        if (notNullOrUndefined(options === null || options === void 0 ? void 0 : options.emitEvent) && !(options === null || options === void 0 ? void 0 : options.emitEvent)) {
-            return changes;
-        }
-        this._emitChanges(changes);
-        return changes;
-    }
-    _removeNonPersistant() {
-        const nonPersistent = this._alterations.filter(x => !x.persistent);
-        this.remove(nonPersistent, { emitEvent: false });
-    }
-    _emitChanges(changes) {
-        if (changes.length === 0) {
-            return;
-        }
-        const event = {
-            changes
-        };
-        this._changesSubject.next(event);
-    }
-}
-ColumnsAlterationsManagerService.decorators = [
-    { type: Injectable }
-];
-ColumnsAlterationsManagerService.ctorParameters = () => [];
-
-/**
- * Strings used for columns created and managed
- * by the datatable.
- */
-const INTERNAL_COLUMN_PROPS = [
-    ACTION_MENU_COLUMN_PROP,
-    CHECKBOX_COLUMN_PROP
-];
-function isInternalColumn(column) {
-    return INTERNAL_COLUMN_PROPS.findIndex(p => getColumnProp(column) === p) !== -1;
-}
-
-class OrderColumnsAlteration extends ColumnsAlteration {
-    constructor(state, persistent) {
-        super(state, persistent);
-        this.type = 'order';
-        if (!this._isValidState(state)) {
-            throw Error(`Invalid state: ${JSON.stringify(state)}`);
-        }
-        this.id = `${this.type}`;
-    }
-    apply(columns, datatable) {
-        if (this.state.columns.length === 0) {
-            return;
-        }
-        const stateColumns = this._stateColumns();
-        // The internal columns are not intended for a user to be able to move them.
-        // Store the internal columns current index, so it can be moved back ofter
-        // sorting. This may not be the best way to do this, but it is easier than
-        // making a sort that avoids them.
-        //
-        // NOTE: If we add an internal column that can be moved then this will need
-        // to be changed.
-        const internalColumns = columns
-            .map((column, index) => ({ column, index }))
-            .filter(x => isInternalColumn(x.column));
-        for (const c of stateColumns) {
-            const currentIndex = columns.findIndex(x => getColumnProp(x) === c.columnProp);
-            if (currentIndex === c.index || currentIndex === -1) {
-                // Skip if already at correct index.
-                // Skip columns not found. It may be a column that was removed from the
-                // table, but we still want to handle the other columns.
-                continue;
-            }
-            arrayMoveMutable(columns, currentIndex, c.index);
-        }
-        for (const c of internalColumns) {
-            const currentIndex = columns.findIndex(col => col === c.column);
-            if (currentIndex !== -1) {
-                arrayMoveMutable(columns, currentIndex, c.index);
-            }
-            else {
-                if (isDevMode()) {
-                    console.warn(`Internal column could not be found after sorting. Was it lost during the sorting?`);
-                }
-            }
-        }
-    }
-    _isValidState(state) {
-        // NOTE: Checking null or undefined, even though the type doesn't allow,
-        // because the state may have been loaded from an invalid persistant
-        // storage.
-        // TODO: Remove when state validation/migration is implemented to happen
-        // when retrieved from storage.
-        if (!notNullOrUndefined(state.columns)) {
-            return false;
-        }
-        // NOTE: Didn't iterate each column record, because it is probably better to
-        // just skip to invalid column records. It does prevent being able to
-        // validate the whole state though.
-        return true;
-    }
-    _isColumnOrderRecordValid(columnOrder) {
-        return notNullOrUndefined(columnOrder.columnProp) && notNullOrUndefined(columnOrder.index);
-    }
-    _stateColumns() {
-        return this.state.columns.filter(c => {
-            if (!this._isColumnOrderRecordValid(c)) {
-                if (isDevMode()) {
-                    console.warn('Invalid column order record', c);
-                }
-                return false;
-            }
-            return true;
-        }).sort((a, b) => a.index === b.index ? 0 : a.index > b.index ? 1 : -1);
-    }
-}
-
-function mapColumnsAlterationsStates(states) {
-    const alterations = [];
-    for (const state of states) {
-        try {
-            switch (state.type) {
-                case 'hide-column':
-                    alterations.push(new HideColumnColumnsAlteration(state.state, true));
-                    break;
-                case 'width':
-                    alterations.push(new WidthColumnsAlteration(state.state, true));
-                    break;
-                case 'order':
-                    alterations.push(new OrderColumnsAlteration(state.state, true));
-                    break;
-                case 'sort':
-                    alterations.push(new SortColumnsAlteration(state.state, true));
-                    break;
-                default: {
-                    if (isDevMode()) {
-                        console.warn('Unrecognized ColumnsAlteration state', state);
-                    }
-                }
-            }
-        }
-        catch (e) {
-            if (isDevMode()) {
-                console.warn('Unable to map ColumnsAlteration state', state);
-                console.warn(e);
-            }
-        }
-    }
-    return alterations;
-}
-
-/**
- * Intended for internal classes declared by the `TheSeamDatatableModule`.
- */
-const THESEAM_DATATABLE = new InjectionToken('LibDatatable');
-const _THESEAM_DATATABLE = {
-    provide: THESEAM_DATATABLE,
-    // tslint:disable-next-line:no-use-before-declare
-    useExisting: forwardRef(() => DatatableComponent)
-};
-const _THESEAM_DATATABLE_ACCESSOR = {
-    provide: THESEAM_DATATABLE_ACCESSOR,
-    // tslint:disable-next-line:no-use-before-declare
-    useExisting: forwardRef(() => DatatableComponent)
-};
-class DatatableComponent {
-    constructor(_preferences, _columnsManager, _columnsAlterationsManager) {
-        this._preferences = _preferences;
-        this._columnsManager = _columnsManager;
-        this._columnsAlterationsManager = _columnsAlterationsManager;
-        this._faChevronDown = faChevronDown;
-        this._faChevronRight = faChevronRight;
-        this._faSpinner = faSpinner;
-        this._ngUnsubscribe = new Subject();
-        this._filtersSubject = new BehaviorSubject([]);
-        this._dataSourceSubject = new BehaviorSubject(undefined);
-        this._resizing = {};
-        this._preferencesKey = new BehaviorSubject(undefined);
-        this._rows = new BehaviorSubject([]);
-        this.columnMode = ColumnMode.force;
-        this.selected = [];
-        this.externalPaging = false;
-        this.externalSorting = false;
-        this.externalFiltering = false;
-        this.count = 0;
-        this.offset = 0;
-        this.loadingIndicator = false;
-        this.reorderable = true;
-        this.swapColumns = false;
-        this._sortType = SortType.single;
-        this._sorts = [];
-        this.cssClasses = {
-            sortAscending: 'datatable-icon-up',
-            sortDescending: 'datatable-icon-down',
-            pagerLeftArrow: 'datatable-icon-left',
-            pagerRightArrow: 'datatable-icon-right',
-            pagerPrevious: 'datatable-icon-prev',
-            pagerNext: 'datatable-icon-skip'
-        };
-        this.messages = {
-            // Message to show when array is presented
-            // but contains no values
-            emptyMessage: 'No records found',
-            // Footer total message
-            totalMessage: 'total',
-            // Footer selected message
-            selectedMessage: 'selected'
-        };
-        this.rowIdentity = ((x) => x);
-        this.groupExpansionDefault = false;
-        this.selectAllRowsOnPage = false;
-        this.summaryRow = false;
-        this.summaryHeight = 30;
-        this.summaryPosition = 'top';
-        this.virtualization = true;
-        this.headerHeight = 50;
-        this.rowHeight = 50;
-        this.footerHeight = 40;
-        this.scrollbarV = true;
-        this.scrollbarH = true;
-        this.scroll = new EventEmitter();
-        this.activate = new EventEmitter();
-        this.select = new EventEmitter();
-        this.sort = new EventEmitter();
-        this.page = new EventEmitter();
-        this.reorder = new EventEmitter();
-        this.resize = new EventEmitter();
-        this.tableContextmenu = new EventEmitter(false);
-        this.treeAction = new EventEmitter();
-        this.actionRefreshRequest = new EventEmitter();
-        this.hiddenColumnsChange = new EventEmitter();
-        this._colDiffersInp = {};
-        this._colDiffersTpl = {};
-        this._rowDetailToggleSubscription = Subscription.EMPTY;
-        this._preferencesKey.pipe(distinctUntilChanged(), switchMap(key => {
-            if (!notNullOrUndefined(key) || key.length === 0) {
-                return of(undefined);
-            }
-            return from(waitOnConditionAsync(() => this._preferences.loaded)).pipe(switchMap(() => this._columnsAlterationsManager.changes.pipe(startWith(undefined), tap(() => {
-                this._preferences.setAlterations(key, this._columnsAlterationsManager.get());
-            }))));
-        }), takeUntil(this._ngUnsubscribe)).subscribe();
-        const applyPrefs = (cols) => this._columnsAlterationsManager.changes.pipe(startWith(undefined), map(() => {
-            this._columnsAlterationsManager.apply(cols, this);
-            return cols;
-        }));
-        this._preferencesKey.pipe(distinctUntilChanged(), switchMap(prefsKey => {
-            if (!notNullOrUndefined(prefsKey)) {
-                return of(undefined);
-            }
-            return this._preferences.preferences(prefsKey).pipe(switchMap((preferences) => __awaiter(this, void 0, void 0, function* () {
-                yield waitOnConditionAsync(() => this._preferences.loaded);
-                return preferences;
-            })), take(1), map(preferences => {
-                let alterations = [];
-                try {
-                    alterations = mapColumnsAlterationsStates(preferences.alterations);
-                }
-                catch (e) {
-                    if (isDevMode()) {
-                        console.warn('Unable to map columns alterations states');
-                        console.warn(e);
-                    }
-                }
-                this._columnsAlterationsManager.add(alterations);
-            }));
-        }), takeUntil(this._ngUnsubscribe)).subscribe();
-        this.columns$ = this._columnsManager.columns$;
-        this.displayColumns$ = this.columns$.pipe(switchMap(cols => applyPrefs(cols)), map(cols => cols.filter(c => !c.hidden)), tap(v => removeUnusedDiffs(v, this._colDiffersInp, this._colDiffersTpl)));
-        this.filters$ = this._filtersSubject.asObservable();
-        this.filterStates = this._filtersSubject.asObservable().pipe(switchMap(filters => composeDataFilterStates(filters)));
-        this.rows$ = this._dataSourceSubject.pipe(switchMap(dataSource => {
-            // console.log('dataSource', dataSource)
-            let dataStream;
-            if (isDataSource(dataSource)) {
-                // console.log('~datasource')
-                dataStream = dataSource.connect(this);
-            }
-            else if (isObservable(dataSource)) {
-                // console.log('~observable')
-                dataStream = dataSource;
-            }
-            else if (Array.isArray(dataSource)) {
-                // console.log('~array')
-                dataStream = of(dataSource);
-            }
-            else {
-                // console.log('~rows fallback')
-                dataStream = this._rows.asObservable();
-                // .pipe(tap(v => console.log('rows~', v)))
-            }
-            if (!this.externalFiltering) {
-                // console.log('not using externalFiltering')
-                dataStream = dataStream.pipe(switchMap(rows => this._filtersSubject.pipe(
-                // tap(v => console.log('filters', v)),
-                concatMap(filters => of(rows).pipe(composeDataFilters(filters))))));
-                // dataStream = this._filtersSubject.pipe(
-                //   tap(v => console.log('filters', v)),
-                //   concatMap(filters => dataStream.pipe(composeDataFilters(filters))),
-                //   tap(v => console.log('composed filters', v)),
-                // )
-            }
-            return dataStream.pipe(
-            // tap(v => console.log('stream', v)),
-            takeUntil(this._ngUnsubscribe));
-        }));
-        // TODO: Implement viewChange for CollectionViewer.
-        this.viewChange = this.page.pipe(map(p => ({ start: 0, end: p.count })));
-    }
-    get filters() { return this._filtersSubject.value; }
-    get preferencesKey() { return this._preferencesKey.value; }
-    set preferencesKey(value) { this._preferencesKey.next(value || undefined); }
-    set columns(value) {
-        this._columnsManager.setInputColumns(Array.isArray(value) ? value : []);
-    }
-    get rows() { return this._rows.value; }
-    set rows(value) {
-        this._rows.next(value || []);
-    }
-    get selectionType() { return this._columnsManager.getSelectionType(); }
-    set selectionType(value) {
-        this._columnsManager.setSelectionType(notNullOrUndefined(value) ? value : undefined);
-    }
-    get sortType() { return this._sortType; }
-    set sortType(value) {
-        if (notNullOrUndefined(value) && (value === SortType.single || value == SortType.multi)) {
-            this._sortType = value;
-        }
-        else {
-            this._sortType = SortType.single;
-        }
-    }
-    get sorts() {
-        return this.ngxDatatable ? this.ngxDatatable.sorts : this._sorts;
-    }
-    set sorts(value) {
-        this._sorts = notNullOrUndefined(value) ? coerceArray(value) : [];
-    }
-    set dataSource(value) {
-        if (value instanceof DatatableDataSource) {
-            value.setDatatableAccessor(this);
-        }
-        this._dataSourceSubject.next(value || undefined);
-    }
-    get actionItemColumnPosition() { return this._actionItemColumnPosition; }
-    set actionItemColumnPosition(value) {
-        this._actionItemColumnPosition = value;
-        this._columnsManager.setActionItemColumnPosition(this._actionItemColumnPosition);
-    }
-    set columnComponents(value) {
-        var _a;
-        this._columnsManager.setTemplateColumns(translateTemplateColumns((_a = value === null || value === void 0 ? void 0 : value.toArray()) !== null && _a !== void 0 ? _a : []));
-    }
-    get rowActionItem() { return this._rowActionItem; }
-    set rowActionItem(value) {
-        this._rowActionItem = value;
-        this._columnsManager.setRowActionItem(notNullOrUndefined(value) ? value : undefined);
-    }
-    get menuBarComponent() { return this._menuBarComponent; }
-    set menuBarComponent(value) {
-        var _a;
-        this._menuBarComponent = value;
-        if (this._menuBarSub) {
-            this._menuBarSub.unsubscribe();
-        }
-        if (value) {
-            this._setMenuBarFilters(value.filters());
-            this._menuBarSub = (_a = this._menuBarComponent) === null || _a === void 0 ? void 0 : _a.filtersChanged.subscribe(v => { this._setMenuBarFilters(value.filters()); });
-        }
-    }
-    get actionMenuCellTpl() { return this._actionMenuCellTpl; }
-    set actionMenuCellTpl(value) {
-        this._actionMenuCellTpl = value;
-        this._columnsManager.setActionMenuCellTpl(notNullOrUndefined(value) ? value : undefined);
-    }
-    get treeToggleTpl() { return this._treeToggleTpl; }
-    set treeToggleTpl(value) {
-        this._treeToggleTpl = value;
-        this._columnsManager.setTreeToggleTpl(notNullOrUndefined(value) ? value : undefined);
-    }
-    get headerTpl() { return this._headerTpl; }
-    set headerTpl(value) {
-        this._headerTpl = value;
-        this._columnsManager.setHeaderTpl(notNullOrUndefined(value) ? value : undefined);
-    }
-    get blankHeaderTpl() { return this._blankHeaderTpl; }
-    set blankHeaderTpl(value) {
-        this._blankHeaderTpl = value;
-        this._columnsManager.setBlankHeaderTpl(notNullOrUndefined(value) ? value : undefined);
-    }
-    get cellTypeSelectorTpl() { return this._cellTypeSelectorTpl; }
-    set cellTypeSelectorTpl(value) {
-        this._cellTypeSelectorTpl = value;
-        this._columnsManager.setCellTypeSelectorTpl(notNullOrUndefined(value) ? value : undefined);
-    }
-    // TODO: Remove this DOM-dependent code when a way to property listen for
-    // dblclick on the header reasize handles.
-    _dblClick(event) {
-        var _a, _b, _c;
-        const isHandle = event.target.classList.contains('resize-handle');
-        if (isHandle) {
-            const isResizeable = (_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('resizeable');
-            if (isResizeable) {
-                event.stopPropagation();
-                const id = (_c = (_b = event.target.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('.datatable-column-header-separator')) === null || _c === void 0 ? void 0 : _c.getAttribute('data-column-id');
-                this._columnsManager.columns$.pipe(take(1)).subscribe(columns => {
-                    const column = columns.find(c => c.$$id === id);
-                    if (column) {
-                        const columnProp = getColumnProp(column);
-                        if (columnProp) {
-                            const alteration = new WidthColumnsAlteration({ columnProp, canAutoResize: true }, false);
-                            this._columnsAlterationsManager.add([alteration]);
-                        }
-                    }
-                });
-            }
-        }
-    }
-    ngOnInit() {
-        if (this.rowDetail) {
-            this._rowDetailToggleSubscription = this.rowDetail._toggle.subscribe(event => {
-                if (this.ngxRowDetail) {
-                    this.ngxRowDetail.toggle.emit(event);
-                }
-            });
-        }
-    }
-    ngOnDestroy() {
-        this._rowDetailToggleSubscription.unsubscribe();
-    }
-    _setMenuBarFilters(filters) {
-        this._filtersSubject.next(filters || []);
-    }
-    getColumnComponent(propName) {
-        if (!this.columnComponents || this.columnComponents.length === 0) {
-            return null;
-        }
-        const tpl = this.columnComponents.find(t => t.prop === propName);
-        if (tpl) {
-            return tpl;
-        }
-        return null;
-    }
-    _columnData(col) {
-        const comp = this.getColumnComponent(col.prop);
-        return { col, comp };
-    }
-    _getRowExpanded(row) {
-        if (this.ngxDatatable && this.ngxDatatable.bodyComponent) {
-            return this.ngxDatatable.bodyComponent.getRowExpanded(row);
-        }
-        return false;
-    }
-    trackByFnColumn(index, item) {
-        return item.prop;
-    }
-    onDatatableResize(event) {
-        if (this.ngxDatatable && this.ngxDatatableElement && this.ngxDatatableElement.nativeElement) {
-            // TODO: Consider integrating this into the ngx-datatable library to avoid
-            // multiple resize calls when the table resizes itself.
-            this.ngxDatatable.recalculate();
-        }
-    }
-    _onResize(event) {
-        this.resize.emit(event);
-        if (!notNullOrUndefined(event.column)) {
-            return;
-        }
-        const columnProp = getColumnProp(event.column);
-        if (columnProp) {
-            let addAlteration = false;
-            if (!this._resizing[columnProp]) {
-                this._resizing[columnProp] = true;
-                addAlteration = true;
-            }
-            if (event.isDone) {
-                this._resizing[columnProp] = false;
-                addAlteration = true;
-            }
-            if (addAlteration) {
-                const alteration = new WidthColumnsAlteration({
-                    columnProp,
-                    width: event.column.width,
-                    canAutoResize: false
-                }, true);
-                this._columnsAlterationsManager.add([alteration]);
-            }
-        }
-    }
-    _onReorder(event) {
-        this.reorder.emit(event);
-        const columnProp = getColumnProp(event.column);
-        if (columnProp) {
-            const currentOrderAlteration = this._columnsAlterationsManager.get().find(x => x.type === 'order');
-            const state = {
-                columns: [
-                    ...((currentOrderAlteration === null || currentOrderAlteration === void 0 ? void 0 : currentOrderAlteration.state.columns) || []),
-                    { columnProp, index: event.newValue }
-                ]
-            };
-            const alteration = new OrderColumnsAlteration(state, true);
-            this._columnsAlterationsManager.add([alteration]);
-        }
-    }
-    _onSort(event) {
-        this.sort.emit(event);
-        const alteration = new SortColumnsAlteration({ sorts: event.sorts }, true);
-        this._columnsAlterationsManager.add([alteration]);
-    }
-    _onTreeAction(event) {
-        const index = event.rowIndex;
-        const row = event.row;
-        if (row.treeStatus === 'collapsed') {
-            row.treeStatus = 'expanded';
-        }
-        else {
-            row.treeStatus = 'collapsed';
-        }
-        this.rows = [...this.rows];
-    }
-    triggerActionRefreshRequest() {
-        this.actionRefreshRequest.emit(undefined);
-    }
-    /**
-     * Returns the page info from the wrapped NgxDatatable instance or defaults.
-     */
-    get pageInfo() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return {
-            offset: (_b = (_a = this.ngxDatatable) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0,
-            pageSize: (_d = (_c = this.ngxDatatable) === null || _c === void 0 ? void 0 : _c.pageSize) !== null && _d !== void 0 ? _d : 0,
-            limit: (_e = this.ngxDatatable) === null || _e === void 0 ? void 0 : _e.limit,
-            count: (_g = (_f = this.ngxDatatable) === null || _f === void 0 ? void 0 : _f.count) !== null && _g !== void 0 ? _g : 0
-        };
-    }
-}
-DatatableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable',
-                template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n  let-column=\"column\" let-sortFn=\"sortFn\">\n  <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n  <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n  <div class=\"datatable-column-header-separator\" [attr.data-column-id]=\"column.$$id\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"column.cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"_faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"_faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                animations: [
-                    trigger('slideDown', [
-                        transition(':enter', [
-                            style({ transform: 'translateY(-20%)', opacity: '0' }),
-                            animate('250ms', style({ transform: 'translateY(0)', opacity: '1' })),
-                        ]),
-                        transition(':leave', [
-                            style({ transform: 'translateY(0)', opacity: '1' }),
-                            animate('250ms', style({ transform: 'translateY(-20%)', opacity: '0' })),
-                        ])
-                    ])
-                ],
-                providers: [
-                    _THESEAM_DATATABLE,
-                    DatatableColumnChangesService,
-                    _THESEAM_DATATABLE_ACCESSOR,
-                    ColumnsManagerService,
-                    ColumnsAlterationsManagerService,
-                ],
-                styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute!important;top:0;left:0;right:0;bottom:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}\n"]
-            },] }
-];
-DatatableComponent.ctorParameters = () => [
-    { type: DatatablePreferencesService },
-    { type: ColumnsManagerService },
-    { type: ColumnsAlterationsManagerService }
-];
-DatatableComponent.propDecorators = {
-    preferencesKey: [{ type: Input }],
-    targetMarkerTemplate: [{ type: Input }],
-    columns: [{ type: Input }],
-    rows: [{ type: Input }],
-    columnMode: [{ type: Input }],
-    groupRowsBy: [{ type: Input }],
-    groupedRows: [{ type: Input }],
-    selected: [{ type: Input }],
-    externalPaging: [{ type: Input }],
-    externalSorting: [{ type: Input }],
-    externalFiltering: [{ type: Input }],
-    limit: [{ type: Input }],
-    count: [{ type: Input }],
-    offset: [{ type: Input }],
-    loadingIndicator: [{ type: Input }],
-    selectionType: [{ type: Input }],
-    reorderable: [{ type: Input }],
-    swapColumns: [{ type: Input }],
-    sortType: [{ type: Input }],
-    sorts: [{ type: Input }],
-    cssClasses: [{ type: Input }],
-    messages: [{ type: Input }],
-    rowIdentity: [{ type: Input }],
-    rowClass: [{ type: Input }],
-    selectCheck: [{ type: Input }],
-    displayCheck: [{ type: Input }],
-    groupExpansionDefault: [{ type: Input }],
-    trackByProp: [{ type: Input }],
-    selectAllRowsOnPage: [{ type: Input }],
-    treeFromRelation: [{ type: Input }],
-    treeToRelation: [{ type: Input }],
-    summaryRow: [{ type: Input }],
-    summaryHeight: [{ type: Input }],
-    summaryPosition: [{ type: Input }],
-    virtualization: [{ type: Input }],
-    headerHeight: [{ type: Input }],
-    rowHeight: [{ type: Input }],
-    footerHeight: [{ type: Input }],
-    scrollbarV: [{ type: Input }],
-    scrollbarH: [{ type: Input }],
-    dataSource: [{ type: Input }],
-    actionItemColumnPosition: [{ type: Input }],
-    scroll: [{ type: Output }],
-    activate: [{ type: Output }],
-    select: [{ type: Output }],
-    sort: [{ type: Output }],
-    page: [{ type: Output }],
-    reorder: [{ type: Output }],
-    resize: [{ type: Output }],
-    tableContextmenu: [{ type: Output }],
-    treeAction: [{ type: Output }],
-    actionRefreshRequest: [{ type: Output }],
-    hiddenColumnsChange: [{ type: Output }],
-    columnComponents: [{ type: ContentChildren, args: [DatatableColumnComponent,] }],
-    actionMenu: [{ type: ContentChild, args: [DatatableActionMenuComponent, { static: true },] }],
-    rowActionItem: [{ type: ContentChild, args: [DatatableRowActionItemDirective, { static: true },] }],
-    rowDetail: [{ type: ContentChild, args: [TheSeamDatatableRowDetailDirective, { static: true },] }],
-    footer: [{ type: ContentChild, args: [TheSeamDatatableFooterDirective, { static: true },] }],
-    menuBarComponent: [{ type: ContentChild, args: [DatatableMenuBarComponent,] }],
-    ngxDatatable: [{ type: ViewChild, args: [DatatableComponent$1,] }],
-    ngxDatatableElement: [{ type: ViewChild, args: [DatatableComponent$1, { read: ElementRef },] }],
-    ngxRowDetail: [{ type: ViewChild, args: [DatatableRowDetailDirective,] }],
-    actionMenuCellTpl: [{ type: ViewChild, args: ['actionMenuCellTpl', { static: true },] }],
-    treeToggleTpl: [{ type: ViewChild, args: ['treeToggleTpl', { static: true },] }],
-    headerTpl: [{ type: ViewChild, args: ['headerTpl', { static: true },] }],
-    blankHeaderTpl: [{ type: ViewChild, args: ['blankHeaderTpl', { static: true },] }],
-    cellTypeSelectorTpl: [{ type: ViewChild, args: ['cellTypeSelectorTpl', { static: true },] }],
-    _dblClick: [{ type: HostListener, args: ['dblclick', ['$event'],] }]
-};
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "externalPaging", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "externalSorting", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "externalFiltering", void 0);
-__decorate([
-    InputNumber()
-], DatatableComponent.prototype, "limit", void 0);
-__decorate([
-    InputNumber(0)
-], DatatableComponent.prototype, "count", void 0);
-__decorate([
-    InputNumber(0)
-], DatatableComponent.prototype, "offset", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "loadingIndicator", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "reorderable", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "swapColumns", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "groupExpansionDefault", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "selectAllRowsOnPage", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "summaryRow", void 0);
-__decorate([
-    InputNumber()
-], DatatableComponent.prototype, "summaryHeight", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "virtualization", void 0);
-__decorate([
-    InputNumber()
-], DatatableComponent.prototype, "headerHeight", void 0);
-__decorate([
-    InputNumber()
-], DatatableComponent.prototype, "rowHeight", void 0);
-__decorate([
-    InputNumber()
-], DatatableComponent.prototype, "footerHeight", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "scrollbarV", void 0);
-__decorate([
-    InputBoolean()
-], DatatableComponent.prototype, "scrollbarH", void 0);
-
-class DatatableColumnPreferencesComponent {
-    constructor(_datatable, _columnsAlterationsManager) {
-        var _a;
-        this._datatable = _datatable;
-        this._columnsAlterationsManager = _columnsAlterationsManager;
-        this._filterControl = new FormControl();
-        this._columns$ = combineLatest([
-            (_a = this._datatable.columns$) !== null && _a !== void 0 ? _a : of([]),
-            observeControlValue(this._filterControl)
-        ]).pipe(map(([columns, filter]) => {
-            const _filter = (filter || '').trim().toLowerCase();
-            return columns
-                .filter(c => this._canToggleColumn(c, _filter));
-        }));
-    }
-    _canToggleColumn(column, filter, omitInternalColumns = true) {
-        if (omitInternalColumns && isInternalColumn(column)) {
-            return false;
-        }
-        return this._columnMatchesFilter(column, filter);
-    }
-    _columnMatchesFilter(column, filter) {
-        if (filter.length === 0) {
-            return true;
-        }
-        return `${(getColumnProp(column) || '')}`.toLowerCase().indexOf(filter) !== -1;
-    }
-    _onChange(event, col) {
-        const columnProp = getColumnProp(col);
-        const hidden = !event.checked;
-        if (!notNullOrUndefined(columnProp)) {
-            throw Error(`Unable to get column prop.`);
-        }
-        const alteration = new HideColumnColumnsAlteration({
-            columnProp,
-            hidden
-        }, hidden);
-        this._columnsAlterationsManager.add([alteration]);
-    }
-}
-DatatableColumnPreferencesComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-column-preferences',
-                template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\" >\n  <input seamInput [formControl]=\"_filterControl\" seamInputSize=\"sm\" placeholder=\"Search\" seamAutoFocus>\n</seam-form-field>\n\n<div seamOverlayScrollbar style=\"min-height: 200px; max-height: 600px; min-width: 250px;\" class=\"flex-grow-1 mb-2\">\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox [checked]=\"!col.hidden\" (change)=\"_onChange($event, col)\">{{ col.name || col.prop }}</seam-checkbox>\n    </ng-container>\n  </div>\n\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column}\n"]
-            },] }
-];
-DatatableColumnPreferencesComponent.ctorParameters = () => [
-    { type: DatatableComponent, decorators: [{ type: Inject, args: [THESEAM_DATATABLE,] }] },
-    { type: ColumnsAlterationsManagerService }
-];
-
-class DatatableColumnPreferencesButtonComponent {
-    constructor(_columnsAlterationsManager) {
-        this._columnsAlterationsManager = _columnsAlterationsManager;
-        this.icon = faColumns;
-        /** @ignore */
-        this._actionMenuPositions = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-            },
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-            },
-        ];
-    }
-    ngOnInit() { }
-    _resetColumns(event) {
-        this._columnsAlterationsManager.clear();
-    }
-}
-DatatableColumnPreferencesButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-column-preferences-button',
-                template: "<ng-template #colPrefsTpl>\n  <seam-datatable-column-preferences></seam-datatable-column-preferences>\n</ng-template>\n\n<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n  <button seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    [seamPopover]=\"colPrefsTpl\">\n    Show/Hide Columns\n  </button>\n\n  <button seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    (click)=\"_resetColumns($event)\">\n    Reset Columns\n  </button>\n</seam-menu>\n\n<button type=\"button\" class=\"btn btn-lightgray btn-sm\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"_actionMenuPositions || []\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Column Preferences\">\n  <seam-icon [icon]=\"icon\"></seam-icon>\n  <span class=\"sr-only\">Column Preferences</span>\n</button>\n\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-DatatableColumnPreferencesButtonComponent.ctorParameters = () => [
-    { type: ColumnsAlterationsManagerService }
-];
-
-class DatatableExportButtonComponent {
-    constructor(_datatable, _toastr, _loading, _valueHelper, _data) {
-        this._datatable = _datatable;
-        this._toastr = _toastr;
-        this._loading = _loading;
-        this._valueHelper = _valueHelper;
-        this._data = _data;
-        this.icon = faFileDownload;
-        if (this._data && this._data.exporters) {
-            this.exporters = this._data.exporters;
-        }
-    }
-    get disabled() {
-        return !(this.exporters && this.exporters.length > 0);
-    }
-    ngOnInit() { }
-    _onExporterClicked(exporter) {
-        if (!exporter.export) {
-            const msg = isDevMode()
-                ? `Exporter '${exporter.name}' is missing an export method.`
-                : `${exporter.label} export is not available.`;
-            this._toastr.error(msg, 'Data Export');
-        }
-        const export$ = combineLatest([
-            this._datatable.rows$,
-            this._datatable.columns$.pipe(map(cols => cols.filter(c => !isInternalColumn(c))))
-        ]).pipe(take(1), map(([rows, columns]) => {
-            if (exporter.skipDataMapping) {
-                return rows;
-            }
-            return this._mapExportData(columns || [], rows);
-        }), concatMap(data => exporter.export(data)), catchError(err => {
-            console.error(err);
-            return of(false);
-        }), tap(success => {
-            if (success) {
-                this._toastr.success(`${exporter.label} export complete.`, 'Data Export');
-            }
-            else {
-                this._toastr.error(`${exporter.label} export failed.`, 'Data Export');
-            }
-        }));
-        this._loading.while(export$).subscribe();
-    }
-    _mapExportData(columns, rows) {
-        const data = [];
-        for (const row of rows) {
-            const newRow = {};
-            for (const col of columns) {
-                if (!col.exportIgnore) {
-                    const colName = col.exportHeader || col.name || col.prop;
-                    if (colName) {
-                        newRow[colName] = this._rowValue(col, row);
-                    }
-                }
-            }
-            data.push(newRow);
-        }
-        return data;
-    }
-    _rowValue(column, row) {
-        if (hasProperty(column, 'exportValue')) {
-            const context = { value: column.prop ? row[column.prop] : undefined, row };
-            return this._valueHelper.evalSync(column.exportValue, context);
-        }
-        const colProp = column.prop;
-        if (colProp) {
-            return row[colProp];
-        }
-        return undefined;
-    }
-}
-DatatableExportButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-export-button',
-                template: "<seam-menu #menu>\n  <button *ngFor=\"let exp of exporters\"\n    seamMenuItem\n    [icon]=\"exp?.icon\"\n    (click)=\"_onExporterClicked(exp)\">\n    {{ exp.label }}\n  </button>\n</seam-menu>\n<button\n  [seamMenuToggle]=\"menu\"\n  seamButton\n  theme=\"lightgray\"\n  size=\"sm\"\n  class=\"dropdown-toggle\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Export\"\n  [disabled]=\"disabled\"\n  >\n  <seam-icon [icon]=\"icon\" class=\"mr-2\"></seam-icon>\n</button>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:inline-block}\n"]
-            },] }
-];
-DatatableExportButtonComponent.ctorParameters = () => [
-    { type: DatatableComponent, decorators: [{ type: Inject, args: [THESEAM_DATATABLE,] }] },
-    { type: ToastrService },
-    { type: TheSeamLoadingOverlayService },
-    { type: DynamicValueHelperService },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_DYNAMIC_DATA,] }] }
-];
-DatatableExportButtonComponent.propDecorators = {
-    exporters: [{ type: Input }]
-};
-
-class DatatableMenuBarColumnCenterComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-DatatableMenuBarColumnCenterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-menu-bar-column-center',
-                template: "<ng-content></ng-content>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:row;flex:1 1 auto;justify-content:center}\n"]
-            },] }
-];
-DatatableMenuBarColumnCenterComponent.ctorParameters = () => [];
-
-class DatatableMenuBarColumnLeftComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-DatatableMenuBarColumnLeftComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-menu-bar-column-left',
-                template: "<ng-content></ng-content>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-start}\n"]
-            },] }
-];
-DatatableMenuBarColumnLeftComponent.ctorParameters = () => [];
-
-class DatatableMenuBarColumnRightComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-DatatableMenuBarColumnRightComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-menu-bar-column-right',
-                template: "<ng-content></ng-content>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-end}\n"]
-            },] }
-];
-DatatableMenuBarColumnRightComponent.ctorParameters = () => [];
-
-class DatatableMenuBarRowComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-DatatableMenuBarRowComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-menu-bar-row',
-                template: "<ng-content></ng-content>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}\n"]
-            },] }
-];
-DatatableMenuBarRowComponent.ctorParameters = () => [];
-
-const THESEAM_MENUBAR_ITEM_DATA = new InjectionToken('MenubarItemData');
-
-class DatatableMenuBarTextComponent {
-    constructor(_menuBar, _data) {
-        this._menuBar = _menuBar;
-        this._data = _data;
-        if (notNullOrUndefined(this._data)) {
-            if (hasProperty(this._data, 'value')) {
-                this.value = this._data.value;
-            }
-        }
-    }
-    ngOnInit() { }
-}
-DatatableMenuBarTextComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-datatable-menu-bar-text',
-                template: "{{ value }}\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-DatatableMenuBarTextComponent.ctorParameters = () => [
-    { type: DatatableMenuBarComponent },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_MENUBAR_ITEM_DATA,] }] }
-];
-DatatableMenuBarTextComponent.propDecorators = {
-    value: [{ type: Input }]
-};
-
-class DatatableActionMenuItemDirective {
-    constructor(_modal, _dynamicComponentLoader, _http) {
-        this._modal = _modal;
-        this._dynamicComponentLoader = _dynamicComponentLoader;
-        this._http = _http;
-        this._listGroupItem = true;
-        this._listGroupItemAction = true;
-        this.click = new EventEmitter();
-    }
-    ngOnInit() { }
-    ngOnDestroy() { }
-}
-DatatableActionMenuItemDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamDatatableActionMenuItem]'
-            },] }
-];
-DatatableActionMenuItemDirective.ctorParameters = () => [
-    { type: Modal },
-    { type: TheSeamDynamicComponentLoader },
-    { type: HttpClient, decorators: [{ type: Optional }] }
-];
-DatatableActionMenuItemDirective.propDecorators = {
-    _listGroupItem: [{ type: HostBinding, args: ['class.list-group-item',] }],
-    _listGroupItemAction: [{ type: HostBinding, args: ['class.list-group-item-action',] }],
-    label: [{ type: Input }],
-    href: [{ type: Input, args: ['attr.href',] }],
-    target: [{ type: Input }],
-    queryParams: [{ type: Input }],
-    fragment: [{ type: Input }],
-    queryParamsHandling: [{ type: Input }],
-    preserveFragment: [{ type: Input }],
-    skipLocationChange: [{ type: Input }],
-    replaceUrl: [{ type: Input }],
-    state: [{ type: Input }],
-    routerLink: [{ type: Input }],
-    confirmDialog: [{ type: Input }],
-    row: [{ type: Input }],
-    click: [{ type: Output }]
-};
-
-class DatatableActionMenuToggleDirective {
-    constructor(_elementRef, _viewContainerRef, _overlay) {
-        this._elementRef = _elementRef;
-        this._viewContainerRef = _viewContainerRef;
-        this._overlay = _overlay;
-        this._active = false;
-        this._actionDown = false;
-    }
-    _onKeydown(event) {
-        if (event.keyCode === ESCAPE) {
-            this.disable();
-        }
-    }
-    _onClick(event) {
-        this.toggle();
-    }
-    _mouseDown(event) { this.onInputDown(event); }
-    _pointerDown(event) { this.onInputDown(event); }
-    _mouseUp(event) { this.onInputUp(event); }
-    _pointerUp(event) { this.onInputUp(event); }
-    get active() { return this._active; }
-    toggle() {
-        if (this._active) {
-            this.disable();
-        }
-        else {
-            this.enable();
-        }
-    }
-    enable() {
-        if (this.active) {
-            return;
-        }
-        if (!this.seamDatatableActionMenuToggle) {
-            return;
-        }
-        this._overlayRef = this._overlay.create({
-            hasBackdrop: false,
-            positionStrategy: this.getOverlayPosition(this._elementRef.nativeElement),
-        });
-        this._overlayRef.attach(new TemplatePortal(this.seamDatatableActionMenuToggle, this._viewContainerRef));
-        this._active = true;
-    }
-    disable() {
-        var _a;
-        if (!this.active) {
-            return;
-        }
-        if ((_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) {
-            this._overlayRef.detach();
-        }
-        this._active = false;
-    }
-    getOverlayPosition(origin) {
-        const positionStrategy = this._overlay.position()
-            .flexibleConnectedTo(origin)
-            .withPositions(this.getPositions())
-            .withFlexibleDimensions(false)
-            .withPush(false);
-        return positionStrategy;
-    }
-    getPositions() {
-        return [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-            },
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-            },
-        ];
-    }
-    onFocusChangeOverlay(event) {
-        if (event === null) {
-            if (!this._actionDown) {
-                // this.disable()
-            }
-        }
-    }
-    onInputDown(event) {
-        this._actionDown = true;
-    }
-    onInputUp(event) {
-        this._actionDown = false;
-    }
-}
-DatatableActionMenuToggleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamDatatableActionMenuToggle]',
-                exportAs: 'seamDatatableActionMenuToggle'
-            },] }
-];
-DatatableActionMenuToggleDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ViewContainerRef },
-    { type: Overlay }
-];
-DatatableActionMenuToggleDirective.propDecorators = {
-    seamDatatableActionMenuToggle: [{ type: Input }],
-    _onKeydown: [{ type: HostListener, args: ['document:keydown', ['$event'],] }],
-    _onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
-    _mouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
-    _pointerDown: [{ type: HostListener, args: ['pointerdown', ['$event'],] }],
-    _mouseUp: [{ type: HostListener, args: ['mouseup', ['$event'],] }],
-    _pointerUp: [{ type: HostListener, args: ['pointerup', ['$event'],] }]
-};
-
-class DatatableGqlDataSource extends DatatableDataSource {
-    connect(collectionViewer) {
-        throw new Error('Method not implemented.');
-        // return combineLatest([
-        //   this.sorts$,
-        //   this.filterStates$,
-        //   this.page$
-        // ]).pipe()
-    }
-    disconnect(collectionViewer) {
-        throw new Error('Method not implemented.');
-    }
-}
-
-class TheSeamDatatableScrollbarHelperService {
-    constructor(_ngZone, _scrollbars) {
-        this._ngZone = _ngZone;
-        this._scrollbars = _scrollbars;
-        this.width = 0;
-        /**
-         * Animates programmatic scrolling, such as switching pages.
-         *
-         * NOTE: Animating the scrolling works, but the datatable may need changes
-         * before this is enabled, because it seems a little stuttery when it moves.
-         */
-        this.animatedScrolling = false;
-        this.animatedScrollingTime = 250;
-    }
-    onInitScroller(scroller) {
-        this._scrollbars.initializeInstance(scroller.parentElement, {
-            callbacks: {
-                onScroll: (e) => {
-                    this._ngZone.run(() => {
-                        scroller.onScrolled(e);
-                    });
-                }
-            }
-        });
-    }
-    onDestroyScroller(scroller) {
-        this._scrollbars.destroyInstance(scroller.parentElement);
-    }
-    setOffset(scroller, offsetY) {
-        this._ngZone.runOutsideAngular(() => {
-            if (this.animatedScrolling) {
-                this._scrollbars.getInstance(scroller.parentElement)
-                    .scroll({ y: offsetY }, this.animatedScrollingTime);
-            }
-            else {
-                this._scrollbars.getInstance(scroller.parentElement)
-                    .scroll({ y: offsetY });
-            }
-        });
-    }
-}
-TheSeamDatatableScrollbarHelperService.decorators = [
-    { type: Injectable }
-];
-TheSeamDatatableScrollbarHelperService.ctorParameters = () => [
-    { type: NgZone },
-    { type: OverlayScrollbarsService }
-];
-
-function withStoredColumnInfo(columns, preferenceColumns) {
-    const _columns = [];
-    for (const col of columns) {
-        const storedCol = preferenceColumns.find(v => v.prop === col.prop);
-        if (storedCol) {
-            const _col = Object.assign({}, col);
-            if (hasProperty(storedCol, 'width')) {
-                _col.width = Math.max(storedCol.width, 0);
-            }
-            _col.canAutoResize = storedCol.canAutoResize;
-            _columns.push(_col);
-        }
-        else {
-            _columns.push(col);
-        }
-    }
-    return _columns;
-}
-
-class TheSeamDatatableModule {
-}
-TheSeamDatatableModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    DatatableComponent,
-                    DatatableCellTplDirective,
-                    DatatableColumnComponent,
-                    DatatableActionMenuComponent,
-                    DatatableActionMenuToggleDirective,
-                    DatatableActionMenuItemComponent,
-                    DatatableMenuBarComponent,
-                    DatatableFilterDirective,
-                    DatatableRowActionItemDirective,
-                    DatatableExportButtonComponent,
-                    TheSeamDatatableRowDetailDirective,
-                    DatatableRowDetailTplDirective,
-                    TheSeamDatatableFooterDirective,
-                    DatatableFooterTplDirective,
-                    DatatableColumnPreferencesComponent,
-                    DatatableColumnPreferencesButtonComponent,
-                    DatatableActionMenuItemDirective,
-                    DatatableMenuBarRowComponent,
-                    DatatableMenuBarColumnLeftComponent,
-                    DatatableMenuBarColumnCenterComponent,
-                    DatatableMenuBarColumnRightComponent,
-                    DatatableMenuBarTextComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    NgxDatatableModule,
-                    FontAwesomeModule,
-                    OverlayModule,
-                    A11yModule,
-                    TheSeamSharedModule,
-                    RouterModule,
-                    TheSeamMenuModule,
-                    TheSeamButtonsModule,
-                    TheSeamIconModule,
-                    ToastrModule,
-                    TheSeamLoadingModule,
-                    PortalModule,
-                    TheSeamConfirmDialogModule,
-                    TheSeamPopoverModule,
-                    TheSeamCheckboxModule,
-                    TheSeamFormFieldModule,
-                    ReactiveFormsModule,
-                    TheSeamTableCellTypeModule
-                ],
-                exports: [
-                    DatatableComponent,
-                    DatatableCellTplDirective,
-                    DatatableColumnComponent,
-                    DatatableActionMenuComponent,
-                    DatatableActionMenuItemComponent,
-                    DatatableMenuBarComponent,
-                    DatatableFilterDirective,
-                    DatatableRowActionItemDirective,
-                    DatatableExportButtonComponent,
-                    TheSeamDatatableRowDetailDirective,
-                    DatatableRowDetailTplDirective,
-                    TheSeamDatatableFooterDirective,
-                    DatatableFooterTplDirective,
-                    DatatableColumnPreferencesComponent,
-                    DatatableColumnPreferencesButtonComponent,
-                    DatatableActionMenuItemDirective,
-                    DatatableMenuBarRowComponent,
-                    DatatableMenuBarColumnLeftComponent,
-                    DatatableMenuBarColumnCenterComponent,
-                    DatatableMenuBarColumnRightComponent,
-                    DatatableMenuBarTextComponent
-                ],
-                providers: [
-                    { provide: ScrollbarHelper, useClass: TheSeamDatatableScrollbarHelperService }
-                ],
-                entryComponents: [
-                    DatatableColumnPreferencesComponent,
-                    DatatableExportButtonComponent,
-                    DatatableMenuBarTextComponent
-                ]
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { CURRENT_DATATABLE_PREFERENCES_VERSION, DatatableActionMenuComponent, DatatableActionMenuItemComponent, DatatableActionMenuItemDirective, DatatableActionMenuToggleDirective, DatatableCellTplDirective, DatatableColumnChangesService, DatatableColumnComponent, DatatableColumnPreferencesButtonComponent, DatatableColumnPreferencesComponent, DatatableComponent, DatatableDataSource, DatatableExportButtonComponent, DatatableFilterDirective, DatatableFooterTplDirective, DatatableGqlDataSource, DatatableMenuBarColumnCenterComponent, DatatableMenuBarColumnLeftComponent, DatatableMenuBarColumnRightComponent, DatatableMenuBarComponent, DatatableMenuBarRowComponent, DatatableMenuBarTextComponent, DatatablePreferencesService, DatatableRowActionItemDirective, DatatableRowDetailTplDirective, EMPTY_DATATABLE_PREFERENCES, THESEAM_DATATABLE, THESEAM_DATATABLE_PREFERENCES_ACCESSOR, THESEAM_MENUBAR_ITEM_DATA, TheSeamDatatableFooterDirective, TheSeamDatatableModule, TheSeamDatatableRowDetailDirective, TheSeamDatatableScrollbarHelperService, _THESEAM_DATATABLE, _THESEAM_DATATABLE_ACCESSOR, _THESEAM_DATA_FILTER_CONTAINER, withStoredColumnInfo, THESEAM_DATATABLE_ACCESSOR as ɵa, ColumnsManagerService as ɵb, ColumnsAlterationsManagerService as ɵc };
-//# sourceMappingURL=theseam-ui-common-datatable.js.map