@theseam/ui-common 0.4.30 → 1.0.0-beta.0

package/fesm2022/theseam-ui-common-datatable.mjs

@@ -0,0 +1,4263 @@
+import { __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, Output, Input, ChangeDetectionStrategy, Component, ContentChildren, ViewChild, Directive, Injectable, TemplateRef, ContentChild, Self, Inject, forwardRef, InjectionToken, Optional, isDevMode, inject, ChangeDetectorRef, ElementRef, HostListener, HostBinding, NgModule } from '@angular/core';
+import { Subject, BehaviorSubject, of, startWith as startWith$1, map as map$1, switchMap as switchMap$1, combineLatest, defer, EMPTY, debounceTime, tap as tap$1, Subscription, from, isObservable } from 'rxjs';
+import { switchMap, map, startWith, auditTime, shareReplay, take, tap, distinctUntilChanged, takeUntil, concatMap, catchError } from 'rxjs/operators';
+import { faEllipsisH, faChevronDown, faChevronRight, faSpinner, faFilter, faColumns, faFileDownload } from '@fortawesome/free-solid-svg-icons';
+import * as i6 from '@marklb/ngx-datatable';
+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, TheSeamDataFiltersModule } from '@theseam/ui-common/data-filters';
+import { notNullOrUndefined, isNullOrUndefined, isNullOrUndefinedOrEmpty, notNullOrUndefinedOrEmpty, hasProperty, arrayMoveMutable, waitOnConditionAsync, observeControlValue } from '@theseam/ui-common/utils';
+import * as i4 from '@theseam/ui-common/menu';
+import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
+import * as i1 from '@theseam/ui-common/confirm-dialog';
+import { TheSeamConfirmDialogModule } from '@theseam/ui-common/confirm-dialog';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@theseam/ui-common/icon';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import * as i4$1 from '@angular/forms';
+import { FormGroup, FormControl, FormGroupDirective, ControlContainer, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@theseam/ui-common/services';
+import * as i7 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import * as i2$2 from '@theseam/ui-common/shared';
+import { TheSeamSharedModule } from '@theseam/ui-common/shared';
+import * as i3$1 from '@theseam/ui-common/buttons';
+import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
+import * as i11 from '@theseam/ui-common/popover';
+import { TheSeamPopoverModule } from '@theseam/ui-common/popover';
+import * as i12 from '@theseam/ui-common/table-cell-type';
+import { TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
+import * as i3 from '@theseam/ui-common/form-field';
+import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import * as i5$1 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import * as i4$2 from '@theseam/ui-common/checkbox';
+import { TheSeamCheckboxComponent } from '@theseam/ui-common/checkbox';
+import * as i3$2 from '@theseam/ui-common/dynamic';
+import { THESEAM_DYNAMIC_DATA } from '@theseam/ui-common/dynamic';
+import * as i1$2 from 'ngx-toastr';
+import { ToastrModule } from 'ngx-toastr';
+import * as i2$3 from '@theseam/ui-common/loading';
+import { TheSeamLoadingModule } from '@theseam/ui-common/loading';
+import * as i1$3 from '@theseam/ui-common/modal';
+import * as i2$4 from '@theseam/ui-common/dynamic-component-loader';
+import * as i3$3 from '@angular/common/http';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import * as i1$4 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i1$5 from '@theseam/ui-common/scrollbar';
+import { A11yModule } from '@angular/cdk/a11y';
+import { TheSeamToggleGroupModule } from '@theseam/ui-common/toggle-group';
+
+class DatatableActionMenuItemComponent {
+    label;
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    href;
+    target;
+    // Allow routerLink inputs on menu item
+    queryParams;
+    fragment;
+    queryParamsHandling;
+    preserveFragment;
+    skipLocationChange;
+    replaceUrl;
+    state;
+    routerLink;
+    confirmDialog;
+    disabled;
+    subMenu;
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    click = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableActionMenuItemComponent, isStandalone: false, selector: "seam-datatable-action-menu-item", inputs: { label: "label", href: ["attr.href", "href"], target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", routerLink: "routerLink", confirmDialog: "confirmDialog", disabled: "disabled", subMenu: "subMenu" }, outputs: { click: "click" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'seam-datatable-action-menu-item',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false
+                }]
+        }], 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
+            }], subMenu: [{
+                type: Input
+            }], click: [{
+                type: Output
+            }] } });
+
+class DatatableActionMenuComponent {
+    _confirmDialog;
+    _router;
+    static ngAcceptInputType_isSubMenu;
+    faEllipsisH = faEllipsisH;
+    menu;
+    items;
+    /** @ignore */
+    _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',
+        },
+    ];
+    isSubMenu = false;
+    constructor(_confirmDialog, _router) {
+        this._confirmDialog = _confirmDialog;
+        this._router = _router;
+    }
+    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);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuComponent, deps: [{ token: i1.SeamConfirmDialogService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableActionMenuComponent, isStandalone: false, selector: "seam-datatable-action-menu", inputs: { isSubMenu: "isSubMenu" }, queries: [{ propertyName: "items", predicate: DatatableActionMenuItemComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true, static: true }], exportAs: ["seamDatatableActionMenu"], ngImport: i0, 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      <ng-container *ngIf=\"!!item.subMenu; else noSubMenu\">\n        <button seamMenuItem\n          type=\"button\"\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [seamMenuToggle]=\"item.subMenu.menu\"\n          [seamMenuTogglePositionsOffsetY]=\"-3\">\n          {{ item.label }}\n        </button>\n      </ng-container>\n      <ng-template  #noSubMenu>\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-template>\n  </ng-container>\n</seam-menu>\n\n<ng-container *ngIf=\"!isSubMenu && items?.length\">\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</ng-container>\n", styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i5.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }] });
+}
+__decorate([
+    InputBoolean()
+], DatatableActionMenuComponent.prototype, "isSubMenu", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-action-menu', exportAs: 'seamDatatableActionMenu', standalone: false, 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      <ng-container *ngIf=\"!!item.subMenu; else noSubMenu\">\n        <button seamMenuItem\n          type=\"button\"\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [seamMenuToggle]=\"item.subMenu.menu\"\n          [seamMenuTogglePositionsOffsetY]=\"-3\">\n          {{ item.label }}\n        </button>\n      </ng-container>\n      <ng-template  #noSubMenu>\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-template>\n  </ng-container>\n</seam-menu>\n\n<ng-container *ngIf=\"!isSubMenu && items?.length\">\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</ng-container>\n", styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
+        }], ctorParameters: () => [{ type: i1.SeamConfirmDialogService }, { type: i2.Router }], propDecorators: { menu: [{
+                type: ViewChild,
+                args: [MenuComponent, { static: true }]
+            }], items: [{
+                type: ContentChildren,
+                args: [DatatableActionMenuItemComponent]
+            }], isSubMenu: [{
+                type: Input
+            }] } });
+
+class DatatableCellTplDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableCellTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableCellTplDirective, isStandalone: false, selector: "[seamDatatableCellTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableCellTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableCellTpl]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class DatatableColumnChangesService {
+    columnInputChanges = new Subject();
+    get columnInputChanges$() {
+        return this.columnInputChanges.asObservable();
+    }
+    onInputChange() {
+        this.columnInputChanges.next(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnChangesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: 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 {
+    _columnChangesService;
+    name;
+    prop;
+    flexGrow;
+    minWidth;
+    maxWidth;
+    width;
+    resizeable;
+    sortable;
+    draggable;
+    canAutoResize;
+    comparator;
+    headerTemplate;
+    checkboxable;
+    headerCheckboxable;
+    headerClass;
+    cellClass;
+    frozenLeft;
+    frozenRight;
+    pipe;
+    isTreeColumn;
+    treeLevelIndent;
+    summaryFunc;
+    summaryTemplate;
+    hidden;
+    _isFirstChange = true;
+    cellTplDirective;
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    _cellTemplateInput;
+    _cellTemplateQuery;
+    get cellTemplate() {
+        return this._cellTemplateInput || this._cellTemplateQuery;
+    }
+    // @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;
+    }
+    ngOnChanges(changes) {
+        if (this._isFirstChange) {
+            this._isFirstChange = false;
+        }
+        else {
+            this._columnChangesService.onInputChange();
+        }
+    }
+    getCellDirective() {
+        if (this.cellTplDirective) {
+            return this.cellTplDirective;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnComponent, deps: [{ token: DatatableColumnChangesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnComponent, isStandalone: false, selector: "seam-datatable-column", inputs: { name: "name", prop: "prop", flexGrow: "flexGrow", minWidth: "minWidth", maxWidth: "maxWidth", width: "width", resizeable: "resizeable", sortable: "sortable", draggable: "draggable", canAutoResize: "canAutoResize", comparator: "comparator", headerTemplate: "headerTemplate", checkboxable: "checkboxable", headerCheckboxable: "headerCheckboxable", headerClass: "headerClass", cellClass: "cellClass", frozenLeft: "frozenLeft", frozenRight: "frozenRight", pipe: "pipe", isTreeColumn: "isTreeColumn", treeLevelIndent: "treeLevelIndent", summaryFunc: "summaryFunc", summaryTemplate: "summaryTemplate", hidden: "hidden", _cellTemplateInput: ["cellTemplate", "_cellTemplateInput"] }, queries: [{ propertyName: "cellTplDirective", first: true, predicate: DatatableCellTplDirective, descendants: true, static: true }, { propertyName: "_cellTemplateQuery", first: true, predicate: DatatableCellTplDirective, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<p>\n  datatable-column works!\n</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column', standalone: false, template: "<p>\n  datatable-column works!\n</p>\n" }]
+        }], ctorParameters: () => [{ type: DatatableColumnChangesService }], 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 {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableFooterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableFooterTplDirective, isStandalone: false, selector: "[seamDatatableFooterTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableFooterTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableFooterTpl]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TheSeamDatatableFooterDirective {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    _templateInput;
+    _templateQuery;
+    get template() {
+        return this._templateInput || this._templateQuery;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamDatatableFooterDirective, isStandalone: false, selector: "seam-datatable-footer", inputs: { _templateInput: ["template", "_templateInput"] }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableFooterTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'seam-datatable-footer',
+                    standalone: false
+                }]
+        }], propDecorators: { _templateInput: [{
+                type: Input,
+                args: ['template']
+            }], _templateQuery: [{
+                type: ContentChild,
+                args: [DatatableFooterTplDirective, { read: TemplateRef, static: true }]
+            }] } });
+
+class DatatableFilterDirective {
+    _filter;
+    constructor(dataFilters) {
+        if (dataFilters && dataFilters.length > 0) {
+            this._filter = dataFilters[0];
+        }
+    }
+    get filter() {
+        return this._filter;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableFilterDirective, deps: [{ token: THESEAM_DATA_FILTER, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableFilterDirective, isStandalone: false, selector: "[seamDatatableFilter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableFilter]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: undefined, 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 {
+    get filterDirectives() {
+        return this._filterDirectives;
+    }
+    set filterDirectives(value) {
+        this._filterDirectives = value;
+        this.filtersChanged.emit(this.filters());
+    }
+    _filterDirectives;
+    _filtersArr = [];
+    filtersChanged = new EventEmitter();
+    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());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarComponent, isStandalone: false, selector: "seam-datatable-menu-bar", providers: [_THESEAM_DATA_FILTER_CONTAINER], queries: [{ propertyName: "filterDirectives", predicate: DatatableFilterDirective }], ngImport: i0, template: "<div class=\"bg-light border rounded p-2\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-menu-bar', providers: [_THESEAM_DATA_FILTER_CONTAINER], standalone: false, template: "<div class=\"bg-light border rounded p-2\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { filterDirectives: [{
+                type: ContentChildren,
+                args: [DatatableFilterDirective]
+            }] } });
+
+class DatatableRowDetailTplDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableRowDetailTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableRowDetailTplDirective, isStandalone: false, selector: "[seamDatatableRowDetailTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableRowDetailTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableRowDetailTpl]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TheSeamDatatableRowDetailDirective {
+    /**
+     * The detail row height is required especially
+     * when virtual scroll is enabled.
+     */
+    rowHeight = 0;
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    _templateInput;
+    _templateQuery;
+    get template() {
+        return this._templateInput || this._templateQuery;
+    }
+    /**
+     * Row detail row visbility was toggled.
+     */
+    // NOTE: This will trigger from the internal ngx-datatable toggle event.
+    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
+     */
+    _toggle = new EventEmitter();
+    /**
+     * 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
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableRowDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamDatatableRowDetailDirective, isStandalone: false, selector: "seam-datatable-row-detail", inputs: { rowHeight: "rowHeight", _templateInput: ["template", "_templateInput"] }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableRowDetailTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableRowDetailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'seam-datatable-row-detail',
+                    standalone: false
+                }]
+        }], propDecorators: { rowHeight: [{
+                type: Input
+            }], _templateInput: [{
+                type: Input,
+                args: ['template']
+            }], _templateQuery: [{
+                type: ContentChild,
+                args: [DatatableRowDetailTplDirective, { read: TemplateRef, static: true }]
+            }], toggle: [{
+                type: Output
+            }] } });
+
+class DatatableRowActionItemDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableRowActionItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableRowActionItemDirective, isStandalone: false, selector: "[seamDatatableRowActionItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableRowActionItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableRowActionItem]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class DatatableDataSource extends DataSource {
+    _datatableSubject = new BehaviorSubject(undefined);
+    sorts$;
+    filterStates$;
+    page$;
+    constructor() {
+        super();
+        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 (!Object.prototype.hasOwnProperty.call(column, '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;
+}
+
+class ColumnsDataFilter {
+    prop;
+    initialValue;
+    column;
+    constructor(prop, initialValue, column) {
+        this.prop = prop;
+        this.initialValue = initialValue;
+        this.column = column;
+    }
+}
+const THESEAM_COLUMNS_DATA_FILTER = new InjectionToken('ColumnsDataFilter');
+
+const THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_NAME = 'search-date';
+const THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_TYPES = [
+    'lt',
+    'lte',
+    'gt',
+    'gte',
+    'eq',
+    'blank',
+    'not-blank',
+    'between',
+    'not-between'
+];
+const THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES = [
+    'lt',
+    'lte',
+    'gt',
+    'gte',
+    'eq',
+];
+const THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES = [
+    'between',
+    'not-between'
+];
+const THESEAM_COLUMNS_DATA_FILTER_DATE_SELECT_SEARCH_TYPES = [
+    'blank',
+    'not-blank',
+];
+const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_NAME = 'search-numeric';
+const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_TYPES = [
+    'gt',
+    'lt',
+    'eq',
+    'gte',
+    'lte',
+    'blank',
+    'not-blank',
+    'between',
+    'not-between'
+];
+const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES = [
+    'gt',
+    'lt',
+    'eq',
+    'gte',
+    'lte',
+];
+const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES = [
+    'between',
+    'not-between'
+];
+const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SELECT_SEARCH_TYPES = [
+    'blank',
+    'not-blank',
+];
+const THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME = 'search-text';
+const THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_TYPES = [
+    'contains',
+    'ncontains',
+    'eq',
+    'neq',
+    'blank',
+    'not-blank'
+];
+const THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES = [
+    'contains',
+    'ncontains',
+    'eq',
+    'neq',
+];
+const THESEAM_COLUMNS_DATA_FILTER_TEXT_SELECT_SEARCH_TYPES = [
+    'blank',
+    'not-blank'
+];
+
+class SearchDateColumnsDataFilter extends ColumnsDataFilter {
+    name = THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_NAME;
+    uid;
+    form;
+    filterStateChanges;
+    options;
+    _updateFilterValue = new Subject;
+    constructor(prop, initialValue, column) {
+        super(prop, initialValue, column);
+        this.form = new FormGroup({
+            searchType: new FormControl(notNullOrUndefined(initialValue) ? initialValue.searchType : 'eq'),
+            searchText: new FormControl(notNullOrUndefined(initialValue) ? initialValue.searchText : null),
+            fromText: new FormControl(notNullOrUndefined(initialValue) ? initialValue.fromText : null),
+            toText: new FormControl(notNullOrUndefined(initialValue) ? initialValue.toText : null),
+        });
+        this.uid = `${this.name}--${prop}`;
+        this.filterStateChanges = this._updateFilterValue.pipe(startWith$1(undefined), map$1(() => this.filterState()));
+        this.options = {
+            dateType: this.column.filterOptions?.dateType || 'date'
+        };
+    }
+    dataFilter(data, filterValue, options) {
+        if (isNullOrUndefined(filterValue) || this.isDefault()) {
+            return data;
+        }
+        return this._dateSearchDataFilter(this.prop, data, filterValue.searchText, filterValue.fromText, filterValue.toText, filterValue.searchType || null);
+    }
+    _isInvalidDate(dateString) {
+        return isNullOrUndefinedOrEmpty(dateString) || isNaN(new Date(dateString).valueOf());
+    }
+    _isInvalidSearchTerm(searchText, fromText, toText, comparator) {
+        if (THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES.includes(comparator) && this._isInvalidDate(searchText)) {
+            return true;
+        }
+        else if (THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES.includes(comparator) && (this._isInvalidDate(fromText) || this._isInvalidDate(toText))) {
+            return true;
+        }
+        return false;
+    }
+    _dateSearchDataFilter(prop, data, text, fromText, toText, comparator) {
+        if (!data || data.length <= 0 || isNullOrUndefined(comparator)) {
+            console.warn('No filter applied - invalid options.');
+            return data;
+        }
+        if (this._isInvalidSearchTerm(text, fromText, toText, comparator)) {
+            console.warn('No filter applied - invalid search terms.');
+            return data;
+        }
+        const useLocalTime = this.column.filterOptions?.useLocalTime === true;
+        const textDate = getFormattedDateForComparison(text, this.options.dateType, true);
+        const fromTextDate = getFormattedDateForComparison(fromText, this.options.dateType, true);
+        const toTextDate = getFormattedDateForComparison(toText, this.options.dateType, true);
+        return data.filter(item => {
+            let propDate = getFormattedDateForComparison(item[prop], this.options.dateType, useLocalTime);
+            if ((comparator === 'blank' && (isNullOrUndefined(item[prop]) || isNullOrUndefinedOrEmpty(`${item[prop]}`))) ||
+                (comparator === 'not-blank' && notNullOrUndefined(item[prop]) && notNullOrUndefinedOrEmpty(`${item[prop]}`)) ||
+                (comparator === 'lt' && propDate.valueOf() < textDate.valueOf()) ||
+                (comparator === 'lte' && propDate.valueOf() <= textDate.valueOf()) ||
+                (comparator === 'gt' && propDate.valueOf() > textDate.valueOf()) ||
+                (comparator === 'gte' && propDate.valueOf() >= textDate.valueOf()) ||
+                (comparator === 'eq' && propDate.valueOf() === textDate.valueOf()) ||
+                (comparator === 'between' && propDate.valueOf() >= fromTextDate.valueOf() && propDate.valueOf() <= toTextDate.valueOf()) ||
+                (comparator === 'not-between' && !(propDate.valueOf() >= fromTextDate.valueOf() && propDate.valueOf() <= toTextDate.valueOf()))) {
+                return true;
+            }
+            return false;
+        });
+    }
+    filter(data) {
+        return this._updateFilterValue.pipe(startWith$1(undefined), map$1(() => this.dataFilter(data, this.form.value, undefined)));
+    }
+    filterState() {
+        return {
+            name: this.name,
+            state: {
+                prop: this.prop,
+                formValue: this.form.value,
+                options: this.options
+            }
+        };
+    }
+    applyFilter() {
+        this._updateFilterValue.next();
+    }
+    clearFilter() {
+        this.form.setValue({
+            searchType: 'eq',
+            searchText: null,
+            fromText: null,
+            toText: null
+        });
+        this._updateFilterValue.next();
+    }
+    isDefault() {
+        const formValue = this.form.value;
+        if (isNullOrUndefinedOrEmpty(formValue.searchType)) {
+            return true;
+        }
+        if (THESEAM_COLUMNS_DATA_FILTER_DATE_SELECT_SEARCH_TYPES.includes(formValue.searchType)) {
+            return false;
+        }
+        else if (THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES.includes(formValue.searchType) && notNullOrUndefinedOrEmpty(formValue.searchText)) {
+            return false;
+        }
+        else if (THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES.includes(formValue.searchType) && notNullOrUndefinedOrEmpty(formValue.fromText) && notNullOrUndefinedOrEmpty(formValue.toText)) {
+            return false;
+        }
+        return true;
+    }
+}
+
+class SearchNumericColumnsDataFilter extends ColumnsDataFilter {
+    name = THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_NAME;
+    uid;
+    form;
+    filterStateChanges;
+    options;
+    _updateFilterValue = new Subject;
+    constructor(prop, initialValue, column) {
+        super(prop, initialValue, column);
+        this.form = new FormGroup({
+            searchType: new FormControl(notNullOrUndefined(initialValue) ? initialValue.searchType : 'eq'),
+            searchText: new FormControl(notNullOrUndefined(initialValue) ? initialValue.searchText : null),
+            fromText: new FormControl(notNullOrUndefined(initialValue) ? initialValue.fromText : null),
+            toText: new FormControl(notNullOrUndefined(initialValue) ? initialValue.toText : null),
+        });
+        this.uid = `${this.name}--${prop}`;
+        this.filterStateChanges = this._updateFilterValue.pipe(startWith$1(undefined), map$1(() => this.filterState()));
+    }
+    dataFilter(data, filterValue, options) {
+        if (isNullOrUndefined(filterValue) || this.isDefault()) {
+            return data;
+        }
+        return this.numberSearchDataFilter(this.prop, data, filterValue.searchText, filterValue.fromText, filterValue.toText, filterValue.searchType || null);
+    }
+    _isInvalidSearchTerm(searchText, fromText, toText, comparator) {
+        if (isNaN(searchText) && THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES.includes(comparator)) {
+            return true;
+        }
+        else if ((isNaN(fromText) || isNaN(toText)) && THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES.includes(comparator)) {
+            return true;
+        }
+        return false;
+    }
+    numberSearchDataFilter(prop, data, text, fromText, toText, comparator) {
+        if (!data || data.length <= 0 || isNullOrUndefined(comparator)) {
+            console.warn('No filter applied - invalid options.');
+            return data;
+        }
+        const textNumeric = notNullOrUndefinedOrEmpty(text) ? parseFloat(text) : NaN;
+        const toTextNumeric = notNullOrUndefinedOrEmpty(toText) ? parseFloat(toText) : NaN;
+        const fromTextNumeric = notNullOrUndefinedOrEmpty(fromText) ? parseFloat(fromText) : NaN;
+        if (this._isInvalidSearchTerm(textNumeric, fromTextNumeric, toTextNumeric, comparator)) {
+            console.warn('No filter applied - invalid search terms.');
+            return data;
+        }
+        return data.filter(item => {
+            let propNumeric = parseFloat(item[prop]);
+            if ((comparator === 'blank' && (isNullOrUndefined(item[prop]) || isNullOrUndefinedOrEmpty(`${item[prop]}`))) ||
+                (comparator === 'not-blank' && notNullOrUndefined(item[prop]) && notNullOrUndefinedOrEmpty(`${item[prop]}`)) ||
+                (comparator === 'lt' && propNumeric < textNumeric) ||
+                (comparator === 'lte' && propNumeric <= textNumeric) ||
+                (comparator === 'gt' && propNumeric > textNumeric) ||
+                (comparator === 'gte' && propNumeric >= textNumeric) ||
+                (comparator === 'eq' && propNumeric === textNumeric) ||
+                (comparator === 'between' && propNumeric >= fromTextNumeric && propNumeric <= toTextNumeric) ||
+                (comparator === 'not-between' && !(propNumeric >= fromTextNumeric && propNumeric <= toTextNumeric))) {
+                return true;
+            }
+            return false;
+        });
+    }
+    filter(data) {
+        return this._updateFilterValue.pipe(startWith$1(undefined), map$1(() => this.dataFilter(data, this.form.value, undefined)));
+    }
+    filterState() {
+        return {
+            name: this.name,
+            state: {
+                prop: this.prop,
+                formValue: this.form.value
+            }
+        };
+    }
+    applyFilter() {
+        this._updateFilterValue.next();
+    }
+    clearFilter() {
+        this.form.setValue({
+            searchType: 'eq',
+            searchText: null,
+            fromText: null,
+            toText: null
+        });
+        this._updateFilterValue.next();
+    }
+    isDefault() {
+        const formValue = this.form.value;
+        if (isNullOrUndefinedOrEmpty(formValue.searchType)) {
+            return true;
+        }
+        else if (THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SELECT_SEARCH_TYPES.includes(formValue.searchType)) {
+            return false;
+        }
+        else if (THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES.includes(formValue.searchType) && notNullOrUndefinedOrEmpty(formValue.searchText)) {
+            return false;
+        }
+        else if (THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES.includes(formValue.searchType) && notNullOrUndefinedOrEmpty(formValue.fromText) && notNullOrUndefinedOrEmpty(formValue.toText)) {
+            return false;
+        }
+        return true;
+    }
+}
+
+class SearchTextColumnsDataFilter extends ColumnsDataFilter {
+    name = THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME;
+    uid;
+    form;
+    filterStateChanges;
+    options;
+    _updateFilterValue = new Subject;
+    constructor(prop, initialValue, column) {
+        super(prop, initialValue, column);
+        this.form = new FormGroup({
+            searchType: new FormControl(notNullOrUndefined(initialValue) ? initialValue.searchType : 'contains'),
+            searchText: new FormControl(notNullOrUndefined(initialValue) ? initialValue.searchText : null),
+            // caseSensitive: new FormControl<boolean | null>(notNullOrUndefined(initialValue) ? initialValue.caseSensitive : null),
+        });
+        this.uid = `${this.name}--${prop}`;
+        this.filterStateChanges = this._updateFilterValue.pipe(startWith$1(undefined), map$1(() => this.filterState()));
+    }
+    dataFilter(data, filterValue, options) {
+        if (isNullOrUndefined(filterValue) || this.isDefault()) {
+            return data;
+        }
+        return this._textSearchDataFilter(this.prop, data, filterValue.searchText, filterValue.searchType || null);
+    }
+    _textSearchDataFilter(prop, data, text, comparator) {
+        if (!data || data.length < 0 || isNullOrUndefined(comparator)) {
+            return data;
+        }
+        return data.filter(item => {
+            let value1 = `${notNullOrUndefined(item[prop]) ? item[prop] : ''}`;
+            let value2 = text || '';
+            // if (!options.caseSensitive) {
+            //   value1 = value1.toLowerCase()
+            //   value2 = value2.toLowerCase()
+            // }
+            value1 = value1.toLowerCase();
+            value2 = value2.toLowerCase();
+            if ((comparator === 'eq' && value1 === value2) ||
+                (comparator === 'neq' && value1 !== value2) ||
+                (comparator === 'contains' && value1.indexOf(value2) !== -1) ||
+                (comparator === 'ncontains' && value1.indexOf(value2) === -1) ||
+                (comparator === 'blank' && isNullOrUndefinedOrEmpty(value1)) ||
+                (comparator === 'not-blank' && notNullOrUndefinedOrEmpty(value1))) {
+                return true;
+            }
+            return false;
+        });
+    }
+    filter(data) {
+        return this._updateFilterValue.pipe(startWith$1(undefined), map$1(() => this.dataFilter(data, this.form.value, undefined)));
+    }
+    filterState() {
+        return {
+            name: this.name,
+            state: {
+                prop: this.prop,
+                formValue: this.form.value,
+            }
+        };
+    }
+    applyFilter() {
+        this._updateFilterValue.next();
+    }
+    clearFilter() {
+        this.form.setValue({
+            searchType: 'contains',
+            searchText: null,
+            // caseSensitive: null
+        });
+        this._updateFilterValue.next();
+    }
+    isDefault() {
+        const formValue = this.form.value;
+        if (isNullOrUndefinedOrEmpty(formValue.searchType)) {
+            return true;
+        }
+        else if (THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES.includes(formValue.searchType) && notNullOrUndefinedOrEmpty(formValue.searchText)) {
+            return false;
+        }
+        else if (THESEAM_COLUMNS_DATA_FILTER_TEXT_SELECT_SEARCH_TYPES.includes(formValue.searchType)) {
+            return false;
+        }
+        return true;
+    }
+}
+
+const THESEAM_COLUMNS_DATA_FILTERS_DEFAULT = [
+    { name: THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME, class: SearchTextColumnsDataFilter },
+    { name: THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_NAME, class: SearchNumericColumnsDataFilter },
+    { name: THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_NAME, class: SearchDateColumnsDataFilter },
+];
+const getFormattedDateForComparison = (date, dateType, setToLocalTime = false) => {
+    const dateObj = new Date(notNullOrUndefined(date) ? date : '');
+    if (dateType === 'datetime-local') {
+        // reset seconds and ms, since they can't be specified from the search input
+        dateObj.setSeconds(0);
+        dateObj.setMilliseconds(0);
+    }
+    else if (dateType === 'date') {
+        if (setToLocalTime) {
+            // set date from input type="date" to current timezone, to match expected behavior
+            dateObj.setMinutes(dateObj.getMinutes() + dateObj.getTimezoneOffset());
+        }
+        // reset hours/minutes/seconds/ms, since they can't be specified from the search input
+        dateObj.setHours(0, 0, 0, 0);
+    }
+    return dateObj;
+};
+
+class ColumnsFiltersService {
+    _customColumnsDataFilters;
+    _columnFilterTemplates = new BehaviorSubject([]);
+    columnFilterTemplates$ = this._columnFilterTemplates.asObservable();
+    _columns = new BehaviorSubject([]);
+    columnsFilters$ = this._columns.pipe(map$1(columns => columns
+        .map(col => col.$$filter)
+        .filter(notNullOrUndefined)));
+    columnActiveFilterProps$ = this.columnsFilters$.pipe(switchMap$1(filters => {
+        if (!filters.length) {
+            return of([]);
+        }
+        return combineLatest(filters.map(f => f.filterStateChanges.pipe(map$1((filterState) => !f.isDefault() ? filterState.state.prop : null))));
+    }), map$1(props => props.filter(notNullOrUndefined)));
+    constructor(_customColumnsDataFilters) {
+        this._customColumnsDataFilters = _customColumnsDataFilters;
+    }
+    setFilterTemplates(tpls) {
+        this._columnFilterTemplates.next(tpls);
+    }
+    createColumnDataFilter(column, initialValue) {
+        const prop = this.getColumnFilterProp(column);
+        if (isNullOrUndefined(prop)) {
+            return null;
+        }
+        return this._getColumnsDataFilter(prop, column, initialValue);
+    }
+    _getColumnsDataFilter(prop, column, initialValue) {
+        const filterClass = this._getColumnsDataFilterType(column);
+        let filter;
+        if (notNullOrUndefined(this._customColumnsDataFilters)) {
+            filter = this._customColumnsDataFilters.find(x => x.name === filterClass);
+        }
+        if (isNullOrUndefined(filter)) {
+            filter = THESEAM_COLUMNS_DATA_FILTERS_DEFAULT.find(x => x.name === filterClass);
+        }
+        if (notNullOrUndefined(filter)) {
+            // eslint-disable-next-line new-cap
+            return new filter.class(prop, initialValue, column);
+        }
+        return null;
+    }
+    _getColumnsDataFilterType(column) {
+        if (notNullOrUndefined(column.filterOptions) && notNullOrUndefined(column.filterOptions.filterType)) {
+            return column.filterOptions.filterType;
+        }
+        else if (notNullOrUndefined(column.cellType)) {
+            switch (column.cellType) {
+                case 'string':
+                case 'phone':
+                    return THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME;
+                case 'currency':
+                case 'decimal':
+                case 'integer':
+                    return THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_NAME;
+                case 'date':
+                    return THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_NAME;
+            }
+        }
+        return THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME;
+    }
+    getColumnFilterProp(column) {
+        if (isNullOrUndefined(column)) {
+            return null;
+        }
+        const prop = column.filterOptions?.filterProp || column.prop || (notNullOrUndefined(column.name) ? camelCase(column.name) : undefined);
+        if (isNullOrUndefined(prop)) {
+            return null;
+        }
+        return `${prop}`;
+    }
+    setColumns(columns) {
+        this._columns.next(columns);
+    }
+    getColumnFilter(prop) {
+        if (isNullOrUndefined(prop)) {
+            return undefined;
+        }
+        const columns = this._columns.value;
+        const column = columns.find(col => this.getColumnFilterProp(col) === prop);
+        return column ? column.$$filter : undefined;
+    }
+    filters() {
+        return this._columns.value
+            .map(col => col.$$filter)
+            .filter(notNullOrUndefined);
+    }
+    addFilter(filter) {
+        // Filters are now managed through columns, so this method is deprecated
+        console.warn('ColumnsFiltersService.addFilter is deprecated - filters are now managed through columns');
+    }
+    removeFilter(filter) {
+        // Filters are now managed through columns, so this method is deprecated
+        console.warn('ColumnsFiltersService.removeFilter is deprecated - filters are now managed through columns');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsFiltersService, deps: [{ token: THESEAM_COLUMNS_DATA_FILTER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsFiltersService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsFiltersService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_COLUMNS_DATA_FILTER]
+                }] }] });
+
+var ColumnsTypes;
+(function (ColumnsTypes) {
+    ColumnsTypes[ColumnsTypes["Input"] = 0] = "Input";
+    ColumnsTypes[ColumnsTypes["Template"] = 1] = "Template";
+    ColumnsTypes[ColumnsTypes["Result"] = 2] = "Result";
+})(ColumnsTypes || (ColumnsTypes = {}));
+class ColumnsManagerService {
+    _differs;
+    _columnChangesService;
+    _columnsFilters;
+    _updateColumns = new Subject();
+    _inputColumns = new BehaviorSubject([]);
+    _templateColumns = new BehaviorSubject([]);
+    _inpColDiffersMap = new Map();
+    _tplColDiffersMap = new Map();
+    _resultColDiffersMap = new Map();
+    _colPropsDiffer;
+    _internalColumnsGetter;
+    _selectionType;
+    _rowActionItem;
+    _actionMenuCellTpl;
+    _actionItemColumnPosition;
+    _blankHeaderTpl;
+    _treeToggleTpl;
+    _headerTpl;
+    _cellTypeSelectorTpl;
+    // TODO: Consider making this a columns changed obervable, to make changes more predictable.
+    columns$;
+    constructor(_differs, _columnChangesService, _columnsFilters) {
+        this._differs = _differs;
+        this._columnChangesService = _columnChangesService;
+        this._columnsFilters = _columnsFilters;
+        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;
+                    // Update the filters service with the new columns
+                    this._columnsFilters.setColumns(cols);
+                    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);
+                }
+            }
+            // Preserve or create filter for this column
+            const existingFilter = this._getExistingFilter(internalCol, inpCol);
+            const _col = {
+                ...(internalCol || {}),
+                ...inpCol,
+                // TODO: Rethink this, because I don't know if this is correct.
+                ...(tplCol || {}),
+                // Store filter directly on column object
+                $$filter: existingFilter || this._createColumnFilter(inpCol)
+            };
+            if (this._shouldAddTreeToggleColumn(_col)) {
+                _col.treeToggleTemplate = this._treeToggleTpl;
+            }
+            if (this._shouldAddHeaderTemplate(_col)) {
+                _col.headerTemplate = this._headerTpl; // TODO: Fix type
+            }
+            if (this._shouldAddCellTypeSelectorTpl(_col)) {
+                _col.cellTemplate = this._cellTypeSelectorTpl; // TODO: Fix type
+            }
+            cols.push(_col);
+        }
+        if (this._shouldAddRowActionColumn()) {
+            const actionMenuColumn = createActionMenuColumn(this._actionMenuCellTpl, this._blankHeaderTpl, this._rowActionColumnIsFrozenLeft(), this._rowActionColumnIsFrozenRight());
+            if (this._rowActionColumnIsStaticLeft()) {
+                cols.unshift(actionMenuColumn);
+            }
+            else {
+                cols.push(actionMenuColumn);
+            }
+        }
+        // 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 && Object.prototype.hasOwnProperty.call(internalColumn, 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';
+    }
+    _rowActionColumnIsStaticLeft() {
+        return this._actionItemColumnPosition === 'staticLeft';
+    }
+    _rowActionColumnIsStaticRight() {
+        return this._actionItemColumnPosition === 'staticRight';
+    }
+    _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');
+    }
+    _getExistingFilter(internalCol, inputCol) {
+        // Check if internal column has existing filter (from NgxDatatable)
+        if (internalCol && internalCol.$$filter) {
+            return internalCol.$$filter;
+        }
+        // Check if input column has existing filter (from previous merge)
+        if (inputCol.$$filter) {
+            return inputCol.$$filter;
+        }
+        return undefined;
+    }
+    _createColumnFilter(column) {
+        if (!column.filterable) {
+            return undefined;
+        }
+        return this._columnsFilters.createColumnDataFilter(column, null) || undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsManagerService, deps: [{ token: i0.KeyValueDiffers }, { token: DatatableColumnChangesService }, { token: ColumnsFiltersService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsManagerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsManagerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: DatatableColumnChangesService }, { type: ColumnsFiltersService }] });
+
+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 {
+    state;
+    persistent;
+    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 {
+    id;
+    type = 'hide-column';
+    constructor(state, persistent) {
+        super(state, persistent);
+        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;
+            }
+        }
+    }
+    toDisplayItem() {
+        const summary = this._createHideSummary();
+        const details = this._createHideDetails();
+        return {
+            id: this.id,
+            type: this.type,
+            summary,
+            details,
+            sortOrder: this._getColumnSortOrder()
+        };
+    }
+    getDisplaySortOrder() {
+        return this._getColumnSortOrder();
+    }
+    _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;
+    }
+    _createHideSummary() {
+        const action = this.state.hidden ? 'Hidden' : 'Shown';
+        return `${action}: ${this.state.columnProp}`;
+    }
+    _createHideDetails() {
+        const action = this.state.hidden ? 'hidden' : 'visible';
+        return [`Column: ${this.state.columnProp}`, `Status: ${action}`];
+    }
+    _getColumnSortOrder() {
+        // Sort by column name for consistent ordering
+        return String(this.state.columnProp).charCodeAt(0);
+    }
+}
+
+class SortColumnsAlteration extends ColumnsAlteration {
+    id;
+    type = 'sort';
+    constructor(state, persistent) {
+        super(state, persistent);
+        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;
+        }
+    }
+    toDisplayItem() {
+        const summary = this._createSortSummary();
+        const details = this._createSortDetails();
+        return {
+            id: this.id,
+            type: this.type,
+            summary,
+            details,
+            sortOrder: 0
+        };
+    }
+    getDisplaySortOrder() {
+        return 0; // Only one sort alteration per table
+    }
+    _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;
+    }
+    _createSortSummary() {
+        if (this.state.sorts.length === 0) {
+            return 'No sorting';
+        }
+        const sortDescriptions = this.state.sorts.map(sort => {
+            const direction = sort.dir === 'asc' ? '↑' : '↓';
+            return `${sort.prop} ${direction}`;
+        });
+        return sortDescriptions.join(', ');
+    }
+    _createSortDetails() {
+        if (this.state.sorts.length === 0) {
+            return ['No columns are currently sorted'];
+        }
+        return this.state.sorts.map((sort, index) => {
+            const direction = sort.dir === 'asc' ? 'Ascending' : 'Descending';
+            const priority = this.state.sorts.length > 1 ? ` (Priority: ${index + 1})` : '';
+            return `${sort.prop}: ${direction}${priority}`;
+        });
+    }
+}
+
+class WidthColumnsAlteration extends ColumnsAlteration {
+    id;
+    type = 'width';
+    constructor(state, persistent) {
+        super(state, persistent);
+        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;
+                }
+            }
+        }
+    }
+    toDisplayItem() {
+        const summary = this._createWidthSummary();
+        const details = this._createWidthDetails();
+        return {
+            id: this.id,
+            type: this.type,
+            summary,
+            details,
+            sortOrder: this._getColumnSortOrder()
+        };
+    }
+    getDisplaySortOrder() {
+        return this._getColumnSortOrder();
+    }
+    _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;
+    }
+    _createWidthSummary() {
+        const widthText = notNullOrUndefined(this.state.width) ? `${this.state.width}px` : 'auto';
+        return `${this.state.columnProp}: ${widthText}`;
+    }
+    _createWidthDetails() {
+        const details = [`Column: ${this.state.columnProp}`];
+        if (notNullOrUndefined(this.state.width)) {
+            details.push(`Width: ${this.state.width}px`);
+        }
+        details.push(`Auto-resize: ${this.state.canAutoResize ? 'enabled' : 'disabled'}`);
+        return details;
+    }
+    _getColumnSortOrder() {
+        // Sort by column name for consistent ordering
+        return String(this.state.columnProp).charCodeAt(0);
+    }
+}
+
+class ColumnsAlterationsManagerService {
+    _changesSubject = new Subject();
+    _alterations = [];
+    changes;
+    constructor() {
+        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?.emitEvent) && !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?.emitEvent) && !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?.emitEvent) && !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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsAlterationsManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsAlterationsManagerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsAlterationsManagerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class FilterColumnsAlteration extends ColumnsAlteration {
+    id;
+    type = 'filter';
+    constructor(state, persistent) {
+        super(state, persistent);
+        if (!this._isValidState(state)) {
+            throw Error(`Invalid filter alteration state: ${JSON.stringify(state)}`);
+        }
+        this.id = `${this.type}--${state.columnProp}`;
+    }
+    apply(columns, datatable) {
+        // Get the columns filters service from the datatable
+        const columnsFiltersService = datatable._columnsFilters;
+        if (!columnsFiltersService) {
+            throw new Error('ColumnsFiltersService not found on datatable');
+        }
+        // Find the filter for this column
+        const filter = columnsFiltersService.getColumnFilter(this.state.columnProp);
+        if (!filter) {
+            throw new Error(`Filter not found for column: ${this.state.columnProp}`);
+        }
+        // Apply the filter based on the filter type
+        this._applyFilterValues(filter);
+    }
+    _applyFilterValues(filter) {
+        const { operation, value, fromValue, toValue } = this.state;
+        // Create the form values based on the operation type
+        const formValues = {
+            searchType: operation,
+            searchText: null,
+            fromText: null,
+            toText: null
+        };
+        // Set values based on operation type
+        if (this._isRangeOperation(operation)) {
+            if (!notNullOrUndefined(fromValue) || !notNullOrUndefined(toValue)) {
+                throw new Error(`Range operation '${operation}' requires both fromValue and toValue`);
+            }
+            formValues.fromText = String(fromValue);
+            formValues.toText = String(toValue);
+        }
+        else if (this._isValueOperation(operation)) {
+            if (!notNullOrUndefined(value)) {
+                throw new Error(`Operation '${operation}' requires a value`);
+            }
+            formValues.searchText = String(value);
+        }
+        // For 'blank' and 'not-blank' operations, no additional values are needed
+        // Apply the values to the filter form
+        filter.form.patchValue(formValues);
+    }
+    toDisplayItem() {
+        const summary = this._createFilterSummary();
+        const details = this._createFilterDetails();
+        return {
+            id: this.id,
+            type: this.type,
+            summary,
+            details,
+            sortOrder: this._getColumnSortOrder()
+        };
+    }
+    getDisplaySortOrder() {
+        return this._getColumnSortOrder();
+    }
+    _isRangeOperation(operation) {
+        return operation === 'between' || operation === 'not-between';
+    }
+    _isValueOperation(operation) {
+        const valueOperations = [
+            'contains', 'ncontains', 'eq', 'neq', // text
+            'gt', 'lt', 'gte', 'lte' // numeric/date
+        ];
+        return valueOperations.includes(operation);
+    }
+    _isValidState(state) {
+        // Check required fields
+        if (!notNullOrUndefined(state.columnProp)) {
+            return false;
+        }
+        if (!notNullOrUndefined(state.filterType)) {
+            return false;
+        }
+        if (!notNullOrUndefined(state.operation)) {
+            return false;
+        }
+        // Validate operation is valid for filter type
+        if (!this._isValidOperationForFilterType(state.operation, state.filterType)) {
+            throw new Error(`Operation '${state.operation}' is not valid for filter type '${state.filterType}'`);
+        }
+        // Validate required values for operations
+        if (this._isRangeOperation(state.operation)) {
+            if (!notNullOrUndefined(state.fromValue) || !notNullOrUndefined(state.toValue)) {
+                throw new Error(`Range operation '${state.operation}' requires both fromValue and toValue`);
+            }
+        }
+        else if (this._isValueOperation(state.operation)) {
+            if (!notNullOrUndefined(state.value)) {
+                throw new Error(`Operation '${state.operation}' requires a value`);
+            }
+        }
+        return true;
+    }
+    _isValidOperationForFilterType(operation, filterType) {
+        const textOperations = ['contains', 'ncontains', 'eq', 'neq', 'blank', 'not-blank'];
+        const numericOperations = ['gt', 'lt', 'eq', 'gte', 'lte', 'blank', 'not-blank', 'between', 'not-between'];
+        const dateOperations = ['lt', 'lte', 'gt', 'gte', 'eq', 'blank', 'not-blank', 'between', 'not-between'];
+        switch (filterType) {
+            case 'text':
+                return textOperations.includes(operation);
+            case 'numeric':
+                return numericOperations.includes(operation);
+            case 'date':
+                return dateOperations.includes(operation);
+            default:
+                return false;
+        }
+    }
+    _createFilterSummary() {
+        const { columnProp, operation, value, fromValue, toValue } = this.state;
+        if (this._isRangeOperation(operation)) {
+            return `${columnProp}: ${fromValue} to ${toValue}`;
+        }
+        else if (this._isValueOperation(operation)) {
+            return `${columnProp} ${this._getOperationSymbol(operation)} ${value}`;
+        }
+        else {
+            // blank or not-blank operations
+            const operationText = operation === 'blank' ? 'is empty' : 'is not empty';
+            return `${columnProp} ${operationText}`;
+        }
+    }
+    _createFilterDetails() {
+        const { columnProp, filterType, operation, value, fromValue, toValue } = this.state;
+        const details = [
+            `Column: ${columnProp}`,
+            `Type: ${filterType}`,
+            `Operation: ${this._getOperationDisplayName(operation)}`
+        ];
+        if (this._isRangeOperation(operation)) {
+            details.push(`From: ${fromValue}`);
+            details.push(`To: ${toValue}`);
+        }
+        else if (this._isValueOperation(operation)) {
+            details.push(`Value: ${value}`);
+        }
+        return details;
+    }
+    _getOperationSymbol(operation) {
+        const symbols = {
+            'contains': 'contains',
+            'ncontains': 'does not contain',
+            'eq': '=',
+            'neq': '≠',
+            'gt': '>',
+            'lt': '<',
+            'gte': '≥',
+            'lte': '≤'
+        };
+        return symbols[operation] || operation;
+    }
+    _getOperationDisplayName(operation) {
+        const names = {
+            'contains': 'Contains',
+            'ncontains': 'Does not contain',
+            'eq': 'Equals',
+            'neq': 'Not equals',
+            'gt': 'Greater than',
+            'lt': 'Less than',
+            'gte': 'Greater than or equal',
+            'lte': 'Less than or equal',
+            'blank': 'Is blank',
+            'not-blank': 'Is not blank',
+            'between': 'Between',
+            'not-between': 'Not between'
+        };
+        return names[operation] || operation;
+    }
+    _getColumnSortOrder() {
+        // Sort by column name for consistent ordering
+        return String(this.state.columnProp).charCodeAt(0);
+    }
+}
+
+/**
+ * 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 {
+    id;
+    type = 'order';
+    constructor(state, persistent) {
+        super(state, persistent);
+        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()) {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Internal column could not be found after sorting. Was it lost during the sorting?`);
+                }
+            }
+        }
+    }
+    toDisplayItem() {
+        const summary = this._createOrderSummary();
+        const details = this._createOrderDetails();
+        return {
+            id: this.id,
+            type: this.type,
+            summary,
+            details,
+            sortOrder: 0
+        };
+    }
+    getDisplaySortOrder() {
+        return 0; // Only one order alteration per table
+    }
+    _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()) {
+                    // eslint-disable-next-line no-console
+                    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);
+    }
+    _createOrderSummary() {
+        if (this.state.columns.length === 0) {
+            return 'Default column order';
+        }
+        const reorderedCount = this.state.columns.length;
+        return `${reorderedCount} column${reorderedCount === 1 ? '' : 's'} reordered`;
+    }
+    _createOrderDetails() {
+        if (this.state.columns.length === 0) {
+            return ['Columns are in their default order'];
+        }
+        const sortedColumns = this._stateColumns();
+        return sortedColumns.map(col => `${col.columnProp}: Position ${col.index + 1}`);
+    }
+}
+
+function mapColumnsAlterationsStates(states) {
+    const alterations = [];
+    for (const state of states) {
+        try {
+            switch (state.type) {
+                case 'filter':
+                    alterations.push(new FilterColumnsAlteration(state.state, true));
+                    break;
+                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()) {
+                        // eslint-disable-next-line no-console
+                        console.warn('Unrecognized ColumnsAlteration state', state);
+                    }
+                }
+            }
+        }
+        catch (e) {
+            if (isDevMode()) {
+                // eslint-disable-next-line no-console
+                console.warn('Unable to map ColumnsAlteration state', state);
+                // eslint-disable-next-line no-console
+                console.warn(e);
+            }
+        }
+    }
+    return alterations;
+}
+
+const ActionItemColumnPosition = ['frozenLeft', 'frozenRight', 'staticLeft', 'staticRight'];
+function isActionItemColumnPosition(input) {
+    return ActionItemColumnPosition.indexOf(input) != -1;
+}
+
+const THESEAM_DATATABLE_CONFIG = new InjectionToken('TheSeamDatatableConfig');
+
+class DatatableColumnFilterTplDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterTplDirective, isStandalone: false, selector: "[seamDatatableColumnFilterTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableColumnFilterTpl]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TheSeamDatatableColumnFilterDirective {
+    filterName;
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    _templateInput;
+    _templateQuery;
+    get template() {
+        return this._templateInput || this._templateQuery;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableColumnFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamDatatableColumnFilterDirective, isStandalone: false, selector: "seam-datatable-column-filter", inputs: { filterName: "filterName", _templateInput: ["template", "_templateInput"] }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableColumnFilterTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableColumnFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'seam-datatable-column-filter',
+                    standalone: false
+                }]
+        }], propDecorators: { filterName: [{
+                type: Input
+            }], _templateInput: [{
+                type: Input,
+                args: ['template']
+            }], _templateQuery: [{
+                type: ContentChild,
+                args: [DatatableColumnFilterTplDirective, { read: TemplateRef, static: true }]
+            }] } });
+
+const CURRENT_DATATABLE_PREFERENCES_VERSION = 2;
+const EMPTY_DATATABLE_PREFERENCES = {
+    version: 2,
+    alterations: []
+};
+
+const THESEAM_DATATABLE_PREFERENCES_ACCESSOR = new InjectionToken('TheSeamDatatablePreferencesAccessor');
+
+class DatatablePreferencesService {
+    _preferencesManager;
+    _prefsAccessor;
+    // TODO: Remove the need for this internal pending flag. I only kept it for
+    // backwards compatibility, until better tests are added to make sure if isn't
+    // neccessary anymore.
+    /**
+     * Used to prevent multiple updates from happening at the same time, but it is not per key.
+     */
+    _pending = false;
+    constructor(_preferencesManager, _prefsAccessor) {
+        this._preferencesManager = _preferencesManager;
+        this._prefsAccessor = _prefsAccessor;
+    }
+    isPending(preferenceKey) {
+        return this._pending || this._preferencesManager.isPending(preferenceKey);
+    }
+    isLoaded(preferenceKey) {
+        if (this._pending) {
+            return false;
+        }
+        return this._preferencesManager.isLoaded(preferenceKey);
+    }
+    preferences(preferenceKey) {
+        if (!this._prefsAccessor) {
+            return of(JSON.parse(JSON.stringify(EMPTY_DATATABLE_PREFERENCES)));
+        }
+        return this._preferencesManager.preferences(preferenceKey, this._prefsAccessor, EMPTY_DATATABLE_PREFERENCES).pipe(map(prefs => {
+            if (this._isValidDatatablePreferences(prefs)) {
+                return prefs;
+            }
+            throw Error(`Preferences for key '${preferenceKey}' is not a valid datatable preferences.`);
+        }));
+    }
+    refresh(preferenceKey) {
+        this._preferencesManager.refresh(preferenceKey);
+    }
+    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 = {
+                ...EMPTY_DATATABLE_PREFERENCES,
+                alterations
+            };
+            this._pending = false;
+            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();
+    }
+    _isValidDatatablePreferences(prefs) {
+        return prefs.version === CURRENT_DATATABLE_PREFERENCES_VERSION;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatablePreferencesService, deps: [{ token: i1$1.TheSeamPreferencesManagerService }, { token: THESEAM_DATATABLE_PREFERENCES_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatablePreferencesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatablePreferencesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.TheSeamPreferencesManagerService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_DATATABLE_PREFERENCES_ACCESSOR]
+                }] }] });
+
+class DatatableColumnFilterSearchTextComponent {
+    searchTypes = [
+        { label: 'Contains', value: 'contains' },
+        { label: 'Does not contain', value: 'ncontains' },
+        { label: 'Matches exactly', value: 'eq' },
+        { label: 'Does not match exactly', value: 'neq' },
+        { label: 'Is blank', value: 'blank' },
+        { label: 'Is not blank', value: 'not-blank' },
+    ];
+    filterForm;
+    showTextbox$;
+    ngOnInit() {
+        this.showTextbox$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(value => THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES.includes(value || '')));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterSearchTextComponent, isStandalone: false, selector: "seam-datatable-column-filter-search-text", inputs: { filterForm: "filterForm" }, ngImport: i0, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      seamAutoFocus\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n  <ng-container *ngIf=\"showTextbox$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n    <!-- TODO: implement this? Does not work with current Seam GraphQL/SQL Server implementation. -->\n    <!-- <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <seam-checkbox seamInput formControlName=\"caseSensitive\">Case Sensitive</seam-checkbox>\n    </seam-form-field> -->\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "component", type: i3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
+            {
+                provide: ControlContainer,
+                useExisting: FormGroupDirective
+            }
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-filter-search-text', viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useExisting: FormGroupDirective
+                        }
+                    ], standalone: false, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      seamAutoFocus\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n  <ng-container *ngIf=\"showTextbox$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n    <!-- TODO: implement this? Does not work with current Seam GraphQL/SQL Server implementation. -->\n    <!-- <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <seam-checkbox seamInput formControlName=\"caseSensitive\">Case Sensitive</seam-checkbox>\n    </seam-form-field> -->\n  </ng-container>\n</ng-container>\n" }]
+        }], propDecorators: { filterForm: [{
+                type: Input
+            }] } });
+
+class DatatableColumnFilterSearchNumericComponent {
+    searchTypes = [
+        { label: 'Less than (<)', value: 'lt' },
+        { label: 'Less than or equal to (<=)', value: 'lte' },
+        { label: 'Equal to (=)', value: 'eq' },
+        { label: 'Greater than (>)', value: 'gt' },
+        { label: 'Greater than or equal to (>=)', value: 'gte' },
+        { label: 'Between', value: 'between' },
+        { label: 'Not between', value: 'not-between' },
+        { label: 'Blank', value: 'blank' },
+        { label: 'Not blank', value: 'not-blank' },
+    ];
+    filterForm;
+    showSearchInput$;
+    showRangeInputs$;
+    ngOnInit() {
+        this.showSearchInput$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES.includes(searchType || '')));
+        this.showRangeInputs$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES.includes(searchType || '')));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchNumericComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterSearchNumericComponent, isStandalone: false, selector: "seam-datatable-column-filter-search-numeric", inputs: { filterForm: "filterForm" }, ngImport: i0, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"showRangeInputs$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"fromText\" placeholder=\"Range Start\" seamAutoFocus>\n    </seam-form-field>\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"toText\" placeholder=\"Range End\">\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "component", type: i3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
+            {
+                provide: ControlContainer,
+                useExisting: FormGroupDirective
+            }
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchNumericComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-filter-search-numeric', viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useExisting: FormGroupDirective
+                        }
+                    ], standalone: false, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"showRangeInputs$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"fromText\" placeholder=\"Range Start\" seamAutoFocus>\n    </seam-form-field>\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"toText\" placeholder=\"Range End\">\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n" }]
+        }], propDecorators: { filterForm: [{
+                type: Input
+            }] } });
+
+class DatatableColumnFilterSearchDateComponent {
+    searchTypes = [
+        { label: 'Before', value: 'lt' },
+        { label: 'Before or on', value: 'lte' },
+        { label: 'On', value: 'eq' },
+        { label: 'After', value: 'gt' },
+        { label: 'After or on', value: 'gte' },
+        { label: 'Between', value: 'between' },
+        { label: 'Not between', value: 'not-between' },
+        { label: 'Blank', value: 'blank' },
+        { label: 'Not blank', value: 'not-blank' },
+    ];
+    options;
+    filterForm;
+    dateFormat;
+    showSearchInput$;
+    showRangeInputs$;
+    ngOnInit() {
+        if (notNullOrUndefined(this.options?.dateType)) {
+            this.dateFormat = this.options?.dateType;
+        }
+        this.showSearchInput$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES.includes(searchType || '')));
+        this.showRangeInputs$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES.includes(searchType || '')));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterSearchDateComponent, isStandalone: false, selector: "seam-datatable-column-filter-search-date", inputs: { options: "options", filterForm: "filterForm" }, ngImport: i0, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"showRangeInputs$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"fromText\" placeholder=\"Range Start\" seamAutoFocus>\n    </seam-form-field>\n\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"toText\" placeholder=\"Range End\">\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "component", type: i3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
+            {
+                provide: ControlContainer,
+                useExisting: FormGroupDirective
+            }
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-filter-search-date', viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useExisting: FormGroupDirective
+                        }
+                    ], standalone: false, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"showRangeInputs$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"fromText\" placeholder=\"Range Start\" seamAutoFocus>\n    </seam-form-field>\n\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"toText\" placeholder=\"Range End\">\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n" }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], filterForm: [{
+                type: Input
+            }] } });
+
+class DatatableColumnFilterMenuComponent {
+    _columnsFilters;
+    _filterForm;
+    column;
+    updateMethod;
+    debounce;
+    columnFilterProp;
+    columnFilter;
+    customFilterTemplate$;
+    closePopover = new EventEmitter();
+    constructor(_columnsFilters) {
+        this._columnsFilters = _columnsFilters;
+    }
+    ngOnInit() {
+        this.columnFilterProp = this._columnsFilters.getColumnFilterProp(this.column);
+        this.columnFilter = this._columnsFilters.getColumnFilter(this.columnFilterProp);
+        if (notNullOrUndefined(this.columnFilter)) {
+            this._filterForm = this.columnFilter.form;
+        }
+        this.customFilterTemplate$ = this._columnsFilters.columnFilterTemplates$.pipe(map$1(templates => templates.find(t => t.filterName === this.columnFilter?.name)));
+        if (this.updateMethod === 'valueChanges' && notNullOrUndefined(this._filterForm)) {
+            this._filterForm.valueChanges.pipe(debounceTime(this.debounce || 0), tap$1(() => this.columnFilter?.applyFilter())).subscribe();
+        }
+    }
+    submit() {
+        this.columnFilter?.applyFilter();
+        this.closePopover.emit();
+    }
+    clearFilter() {
+        this.columnFilter?.clearFilter();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterMenuComponent, deps: [{ token: ColumnsFiltersService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterMenuComponent, isStandalone: false, selector: "seam-datatable-column-filter-menu", inputs: { column: "column", updateMethod: "updateMethod", debounce: "debounce" }, outputs: { closePopover: "closePopover" }, ngImport: i0, template: "<ng-container *ngIf=\"_filterForm && columnFilter\">\n  <form [formGroup]=\"_filterForm\" (ngSubmit)=\"submit()\">\n    <ng-container [ngSwitch]=\"columnFilter.name\">\n      <div *ngSwitchCase=\"'search-text'\">\n        <seam-datatable-column-filter-search-text [filterForm]=\"_filterForm\"></seam-datatable-column-filter-search-text>\n      </div>\n      <div *ngSwitchCase=\"'search-numeric'\">\n        <seam-datatable-column-filter-search-numeric [filterForm]=\"_filterForm\"></seam-datatable-column-filter-search-numeric>\n      </div>\n      <div *ngSwitchCase=\"'search-date'\">\n        <seam-datatable-column-filter-search-date [filterForm]=\"_filterForm\" [options]=\"columnFilter.options\"></seam-datatable-column-filter-search-date>\n      </div>\n      <div *ngSwitchDefault>\n        <ng-container *ngIf=\"customFilterTemplate$ | async as filterTpl\">\n          <ng-container *ngIf=\"filterTpl.template\">\n            <ng-container\n              [ngTemplateOutlet]=\"filterTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: _filterForm, filterForm: _filterForm, options: columnFilter.options, column: column, columnFilter: columnFilter }\">\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <hr class=\"mb-1\">\n    <div class=\"d-flex align-items-center\" [class.justify-content-between]=\"updateMethod === 'submit'\" [class.text-right]=\"updateMethod === 'valueChanges'\">\n      <button seamButton size=\"sm\" class=\"text-primary p-0\" (click)=\"clearFilter()\" [disabled]=\"columnFilter?.isDefault() === true\">Clear</button>\n      <button\n        *ngIf=\"updateMethod === 'submit'\"\n        seamButton\n        size=\"sm\"\n        class=\"text-primary p-0\"\n        type=\"submit\"\n        [disabled]=\"columnFilter?.isDefault() === true\">\n        Apply\n      </button>\n    </div>\n  </form>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatatableColumnFilterSearchTextComponent, selector: "seam-datatable-column-filter-search-text", inputs: ["filterForm"] }, { kind: "component", type: DatatableColumnFilterSearchNumericComponent, selector: "seam-datatable-column-filter-search-numeric", inputs: ["filterForm"] }, { kind: "component", type: DatatableColumnFilterSearchDateComponent, selector: "seam-datatable-column-filter-search-date", inputs: ["options", "filterForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
+}
+__decorate([
+    InputNumber()
+], DatatableColumnFilterMenuComponent.prototype, "debounce", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-filter-menu', standalone: false, template: "<ng-container *ngIf=\"_filterForm && columnFilter\">\n  <form [formGroup]=\"_filterForm\" (ngSubmit)=\"submit()\">\n    <ng-container [ngSwitch]=\"columnFilter.name\">\n      <div *ngSwitchCase=\"'search-text'\">\n        <seam-datatable-column-filter-search-text [filterForm]=\"_filterForm\"></seam-datatable-column-filter-search-text>\n      </div>\n      <div *ngSwitchCase=\"'search-numeric'\">\n        <seam-datatable-column-filter-search-numeric [filterForm]=\"_filterForm\"></seam-datatable-column-filter-search-numeric>\n      </div>\n      <div *ngSwitchCase=\"'search-date'\">\n        <seam-datatable-column-filter-search-date [filterForm]=\"_filterForm\" [options]=\"columnFilter.options\"></seam-datatable-column-filter-search-date>\n      </div>\n      <div *ngSwitchDefault>\n        <ng-container *ngIf=\"customFilterTemplate$ | async as filterTpl\">\n          <ng-container *ngIf=\"filterTpl.template\">\n            <ng-container\n              [ngTemplateOutlet]=\"filterTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: _filterForm, filterForm: _filterForm, options: columnFilter.options, column: column, columnFilter: columnFilter }\">\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <hr class=\"mb-1\">\n    <div class=\"d-flex align-items-center\" [class.justify-content-between]=\"updateMethod === 'submit'\" [class.text-right]=\"updateMethod === 'valueChanges'\">\n      <button seamButton size=\"sm\" class=\"text-primary p-0\" (click)=\"clearFilter()\" [disabled]=\"columnFilter?.isDefault() === true\">Clear</button>\n      <button\n        *ngIf=\"updateMethod === 'submit'\"\n        seamButton\n        size=\"sm\"\n        class=\"text-primary p-0\"\n        type=\"submit\"\n        [disabled]=\"columnFilter?.isDefault() === true\">\n        Apply\n      </button>\n    </div>\n  </form>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: ColumnsFiltersService }], propDecorators: { column: [{
+                type: Input
+            }], updateMethod: [{
+                type: Input
+            }], debounce: [{
+                type: Input
+            }], closePopover: [{
+                type: Output
+            }] } });
+
+/**
+ * Intended for internal classes declared by the `TheSeamDatatableModule`.
+ */
+const THESEAM_DATATABLE = new InjectionToken('LibDatatable');
+const _THESEAM_DATATABLE = {
+    provide: THESEAM_DATATABLE,
+    useExisting: forwardRef(() => DatatableComponent)
+};
+const _THESEAM_DATATABLE_ACCESSOR = {
+    provide: THESEAM_DATATABLE_ACCESSOR,
+    // tslint:disable-next-line:no-use-before-declare
+    useExisting: forwardRef(() => DatatableComponent)
+};
+class DatatableComponent {
+    _preferences;
+    _columnsManager;
+    _columnsAlterationsManager;
+    _columnsFilters;
+    _config;
+    static ngAcceptInputType_externalPaging;
+    static ngAcceptInputType_externalSorting;
+    static ngAcceptInputType_externalFiltering;
+    static ngAcceptInputType_loadingIndicator;
+    static ngAcceptInputType_reorderable;
+    static ngAcceptInputType_swapColumns;
+    static ngAcceptInputType_groupExpansionDefault;
+    static ngAcceptInputType_selectAllRowsOnPage;
+    static ngAcceptInputType_summaryRow;
+    static ngAcceptInputType_virtualization;
+    static ngAcceptInputType_scrollbarV;
+    static ngAcceptInputType_scrollbarH;
+    static ngAcceptInputType_limit;
+    static ngAcceptInputType_count;
+    static ngAcceptInputType_offset;
+    static ngAcceptInputType_headerHeight;
+    static ngAcceptInputType_rowHeight;
+    static ngAcceptInputType_footerHeight;
+    static ngAcceptInputType_summaryHeight;
+    static ngAcceptInputType_columns;
+    static ngAcceptInputType_sorts;
+    _faChevronDown = faChevronDown;
+    _faChevronRight = faChevronRight;
+    _faSpinner = faSpinner;
+    _cdr = inject(ChangeDetectorRef);
+    _ngUnsubscribe = new Subject();
+    _menuBarsFiltersSubject = new BehaviorSubject([]);
+    _dataSourceSubject = new BehaviorSubject(undefined);
+    _resizing = {};
+    filterStates;
+    get filters() {
+        return [
+            ...this._menuBarsFiltersSubject.value,
+            ...this._columnsFilters.filters()
+        ];
+    }
+    filters$;
+    get preferencesKey() { return this._preferencesKey.value; }
+    set preferencesKey(value) { this._preferencesKey.next(value || undefined); }
+    _preferencesKey = new BehaviorSubject(undefined);
+    targetMarkerTemplate;
+    set columns(value) {
+        this._columnsManager.setInputColumns(Array.isArray(value) ? value : []);
+    }
+    get rows() { return this._rows.value; }
+    set rows(value) {
+        this._rows.next(value || []);
+    }
+    _rows = new BehaviorSubject([]);
+    rows$;
+    columnMode = ColumnMode.force;
+    groupRowsBy;
+    groupedRows;
+    selected = [];
+    externalPaging = false;
+    externalSorting = false;
+    externalFiltering = false;
+    limit;
+    count = 0;
+    offset = 0;
+    loadingIndicator = false;
+    get selectionType() { return this._columnsManager.getSelectionType(); }
+    set selectionType(value) {
+        this._columnsManager.setSelectionType(notNullOrUndefined(value) ? value : undefined);
+    }
+    reorderable = true;
+    swapColumns = false;
+    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;
+        }
+    }
+    _sortType = SortType.single;
+    get sorts() {
+        return this.ngxDatatable ? this.ngxDatatable.sorts : this._sorts;
+    }
+    set sorts(value) {
+        this._sorts = notNullOrUndefined(value) ? coerceArray(value) : [];
+    }
+    _sorts = [];
+    get cssClasses() {
+        return this._cssClasses;
+    }
+    set cssClasses(value) {
+        if (notNullOrUndefined(value)) {
+            this._cssClasses = value;
+        }
+        else if (notNullOrUndefined(this._config?.cssClasses)) {
+            this._cssClasses = this._config?.cssClasses;
+        }
+        else {
+            this._cssClasses = this._cssClassesDefault;
+        }
+    }
+    _cssClassesDefault = {
+        sortAscending: 'datatable-icon-up',
+        sortDescending: 'datatable-icon-down',
+        pagerLeftArrow: 'datatable-icon-left',
+        pagerRightArrow: 'datatable-icon-right',
+        pagerPrevious: 'datatable-icon-prev',
+        pagerNext: 'datatable-icon-skip'
+    };
+    _cssClasses;
+    get messages() {
+        return this._messages;
+    }
+    set messages(value) {
+        if (notNullOrUndefined(value)) {
+            this._messages = value;
+        }
+        else if (notNullOrUndefined(this._config?.messages)) {
+            this._messages = {
+                ...this._messagesDefault,
+                ...this._config?.messages
+            };
+        }
+        else {
+            this._messages = this._messagesDefault;
+        }
+    }
+    _messagesDefault = {
+        // 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'
+    };
+    _messages;
+    rowIdentity = (x) => x;
+    rowClass;
+    selectCheck;
+    displayCheck;
+    groupExpansionDefault = false;
+    trackByProp;
+    selectAllRowsOnPage = false;
+    treeFromRelation;
+    treeToRelation;
+    summaryRow = false;
+    summaryHeight = 30;
+    summaryPosition = 'top';
+    virtualization = true;
+    get headerHeight() {
+        return this._headerHeight;
+    }
+    set headerHeight(value) {
+        if (notNullOrUndefined(value)) {
+            this._headerHeight = value;
+        }
+        else if (notNullOrUndefined(this._config?.headerHeight)) {
+            this._headerHeight = this._config?.headerHeight;
+        }
+        else {
+            this._headerHeight = this._headerHeightDefault;
+        }
+    }
+    _headerHeightDefault = 50;
+    _headerHeight;
+    get rowHeight() {
+        return this._rowHeight;
+    }
+    set rowHeight(value) {
+        if (notNullOrUndefined(value)) {
+            this._rowHeight = value;
+        }
+        else if (notNullOrUndefined(this._config?.rowHeight)) {
+            this._rowHeight = this._config?.rowHeight;
+        }
+        else {
+            this._rowHeight = this._rowHeightDefault;
+        }
+    }
+    _rowHeightDefault = 50;
+    _rowHeight;
+    get footerHeight() {
+        return this._footerHeight;
+    }
+    set footerHeight(value) {
+        if (notNullOrUndefined(value)) {
+            this._footerHeight = value;
+        }
+        else if (notNullOrUndefined(this._config?.footerHeight)) {
+            this._footerHeight = this._config?.footerHeight;
+        }
+        else {
+            this._footerHeight = this._footerHeightDefault;
+        }
+    }
+    _footerHeightDefault = 40;
+    _footerHeight;
+    scrollbarV = true;
+    scrollbarH = true;
+    set dataSource(value) {
+        if (value instanceof DatatableDataSource) {
+            value.setDatatableAccessor(this);
+        }
+        this._dataSourceSubject.next(value || undefined);
+    }
+    /**
+     * Sets position behavior for optional Action Menu Button column.
+     *
+     * Defaults to `frozenRight`.
+     */
+    get actionItemColumnPosition() { return this._actionItemColumnPosition; }
+    set actionItemColumnPosition(value) {
+        if (notNullOrUndefined(value) && isActionItemColumnPosition(value)) {
+            this._actionItemColumnPosition = value;
+        }
+        else if (notNullOrUndefined(this._config?.actionItemColumnPosition) && isActionItemColumnPosition(this._config?.actionItemColumnPosition)) {
+            this._actionItemColumnPosition = this._config?.actionItemColumnPosition;
+        }
+        else {
+            this._actionItemColumnPosition = this._actionItemColumnPositionDefault;
+        }
+        this._columnsManager.setActionItemColumnPosition(this._actionItemColumnPosition);
+    }
+    _actionItemColumnPositionDefault = 'frozenRight';
+    _actionItemColumnPosition;
+    get columnFilterIcon() {
+        return this._columnFilterIcon;
+    }
+    set columnFilterIcon(value) {
+        if (notNullOrUndefined(value)) {
+            this._columnFilterIcon = value;
+        }
+        else if (notNullOrUndefined(this._config?.columnFilterIcon)) {
+            this._columnFilterIcon = this._config?.columnFilterIcon;
+        }
+        else {
+            this._columnFilterIcon = this._columnFilterIconDefault;
+        }
+    }
+    _columnFilterIconDefault = faFilter;
+    _columnFilterIcon;
+    get columnFilterUpdateMethod() {
+        return this._columnFilterUpdateMethod;
+    }
+    set columnFilterUpdateMethod(value) {
+        if (notNullOrUndefined(value)) {
+            this._columnFilterUpdateMethod = value;
+        }
+        else if (notNullOrUndefined(this._config?.columnFilterUpdateMethod)) {
+            this._columnFilterUpdateMethod = this._config?.columnFilterUpdateMethod;
+        }
+        else {
+            this._columnFilterUpdateMethod = this._columnFilterUpdateMethodDefault;
+        }
+    }
+    _columnFilterUpdateMethodDefault = 'valueChanges';
+    _columnFilterUpdateMethod;
+    get columnFilterUpdateDebounce() {
+        return this._columnFilterUpdateDebounce;
+    }
+    set columnFilterUpdateDebounce(value) {
+        if (notNullOrUndefined(value)) {
+            this._columnFilterUpdateDebounce = value;
+        }
+        else if (notNullOrUndefined(this._config?.columnFilterUpdateDebounce)) {
+            this._columnFilterUpdateDebounce = this._config?.columnFilterUpdateDebounce;
+        }
+        else {
+            this._columnFilterUpdateDebounce = this._columnFilterUpdateDebounceDefault;
+        }
+    }
+    _columnFilterUpdateDebounceDefault = 400;
+    _columnFilterUpdateDebounce;
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    scroll = new EventEmitter();
+    activate = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    select = new EventEmitter();
+    sort = new EventEmitter();
+    page = new EventEmitter();
+    reorder = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    resize = new EventEmitter();
+    tableContextmenu = new EventEmitter(false);
+    treeAction = new EventEmitter();
+    actionRefreshRequest = new EventEmitter();
+    hiddenColumnsChange = new EventEmitter();
+    set columnComponents(value) {
+        this._columnsManager.setTemplateColumns(translateTemplateColumns(value?.toArray() ?? []));
+    }
+    actionMenu;
+    get rowActionItem() { return this._rowActionItem; }
+    set rowActionItem(value) {
+        this._rowActionItem = value;
+        this._columnsManager.setRowActionItem(notNullOrUndefined(value) ? value : undefined);
+    }
+    _rowActionItem;
+    rowDetail;
+    footer;
+    get menuBarComponent() { return this._menuBarComponent; }
+    set menuBarComponent(value) {
+        this._menuBarComponent = value;
+        if (this._menuBarSub) {
+            this._menuBarSub.unsubscribe();
+        }
+        if (value) {
+            this._setMenuBarFilters(value.filters());
+            this._menuBarSub = this._menuBarComponent?.filtersChanged
+                .subscribe(() => { this._setMenuBarFilters(value.filters()); });
+        }
+    }
+    _menuBarComponent;
+    _menuBarSub;
+    set columnFilterTemplates(value) {
+        this._columnsFilters.setFilterTemplates(value?.toArray() ?? []);
+    }
+    ngxDatatable;
+    ngxDatatableElement;
+    ngxRowDetail;
+    get actionMenuCellTpl() { return this._actionMenuCellTpl; }
+    set actionMenuCellTpl(value) {
+        this._actionMenuCellTpl = value;
+        this._columnsManager.setActionMenuCellTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    _actionMenuCellTpl;
+    get treeToggleTpl() { return this._treeToggleTpl; }
+    set treeToggleTpl(value) {
+        this._treeToggleTpl = value;
+        this._columnsManager.setTreeToggleTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    _treeToggleTpl;
+    get headerTpl() { return this._headerTpl; }
+    set headerTpl(value) {
+        this._headerTpl = value;
+        this._columnsManager.setHeaderTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    _headerTpl;
+    get blankHeaderTpl() { return this._blankHeaderTpl; }
+    set blankHeaderTpl(value) {
+        this._blankHeaderTpl = value;
+        this._columnsManager.setBlankHeaderTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    _blankHeaderTpl;
+    get cellTypeSelectorTpl() { return this._cellTypeSelectorTpl; }
+    set cellTypeSelectorTpl(value) {
+        this._cellTypeSelectorTpl = value;
+        this._columnsManager.setCellTypeSelectorTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    _cellTypeSelectorTpl;
+    columnComponents$;
+    _colDiffersInp = {};
+    _colDiffersTpl = {};
+    columns$;
+    displayColumns$;
+    viewChange;
+    _rowDetailToggleSubscription = Subscription.EMPTY;
+    // TODO: Remove this DOM-dependent code when a way to property listen for
+    // dblclick on the header reasize handles.
+    _dblClick(event) {
+        const isHandle = event.target.classList.contains('resize-handle');
+        if (isHandle) {
+            const isResizeable = event.target.parentElement?.classList.contains('resizeable');
+            if (isResizeable) {
+                event.stopPropagation();
+                const id = event.target.parentElement
+                    ?.querySelector('.datatable-column-header-separator')
+                    ?.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]);
+                        }
+                    }
+                });
+            }
+        }
+    }
+    constructor(_preferences, _columnsManager, _columnsAlterationsManager, _columnsFilters, _config) {
+        this._preferences = _preferences;
+        this._columnsManager = _columnsManager;
+        this._columnsAlterationsManager = _columnsAlterationsManager;
+        this._columnsFilters = _columnsFilters;
+        this._config = _config;
+        this._preferencesKey.pipe(distinctUntilChanged(), switchMap(key => {
+            if (!notNullOrUndefined(key) || key.length === 0) {
+                return of(undefined);
+            }
+            return from(waitOnConditionAsync(() => this._preferences.isLoaded(key))).pipe(switchMap(() => this._columnsAlterationsManager.changes.pipe(startWith(undefined), tap(() => {
+                console.log('%cSaving columns alterations to preferences', 'color: blue', this._columnsAlterationsManager.get());
+                this._preferences.setAlterations(key, this._columnsAlterationsManager.get());
+            }))));
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+        const applyPrefs = (cols) => this._columnsAlterationsManager.changes.pipe(startWith(undefined), map(() => {
+            console.log('%cApplying columns alterations', 'color: blue', cols);
+            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(async (preferences) => {
+                await waitOnConditionAsync(() => this._preferences.isLoaded(prefsKey));
+                return preferences;
+            }), take(1), map(preferences => {
+                let alterations = [];
+                try {
+                    alterations = mapColumnsAlterationsStates(preferences.alterations);
+                }
+                catch (e) {
+                    if (isDevMode()) {
+                        // eslint-disable-next-line no-console
+                        console.warn('Unable to map columns alterations states');
+                        // eslint-disable-next-line no-console
+                        console.warn(e);
+                    }
+                }
+                console.log('%cSetting columns alterations from preferences', 'color: blue', alterations);
+                this._columnsAlterationsManager.add(alterations);
+            }));
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+        this.columns$ = combineLatest([this._columnsManager.columns$, this._columnsFilters.columnActiveFilterProps$]).pipe(map(([columns, columnActiveFilterProps]) => columns.map(col => ({
+            ...col,
+            filterActive: columnActiveFilterProps.includes(this._columnsFilters.getColumnFilterProp(col) || '')
+        }))));
+        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$ = combineLatest([this._menuBarsFiltersSubject.asObservable(), this._columnsFilters.columnsFilters$]).pipe(map(([menuFilters, columnsFilters]) => [...menuFilters, ...columnsFilters]));
+        this.filterStates = this.filters$.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.filters$.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 })));
+    }
+    ngOnInit() {
+        if (this.rowDetail) {
+            this._rowDetailToggleSubscription = this.rowDetail._toggle.subscribe(event => {
+                if (this.ngxRowDetail) {
+                    this.ngxRowDetail.toggle.emit(event);
+                }
+            });
+        }
+        this._setDatatableConfigOrDefault();
+    }
+    /** Sets missing inputs from config */
+    _setDatatableConfigOrDefault() {
+        if (isNullOrUndefined(this.messages)) {
+            this.messages = undefined;
+        }
+        if (isNullOrUndefined(this.headerHeight)) {
+            this.headerHeight = undefined;
+        }
+        if (isNullOrUndefined(this.rowHeight)) {
+            this.rowHeight = undefined;
+        }
+        if (isNullOrUndefined(this.footerHeight)) {
+            this.footerHeight = undefined;
+        }
+        if (isNullOrUndefined(this.cssClasses)) {
+            this.cssClasses = undefined;
+        }
+        if (isNullOrUndefined(this.columnFilterIcon)) {
+            this.columnFilterIcon = undefined;
+        }
+        if (isNullOrUndefined(this.columnFilterUpdateMethod)) {
+            this.columnFilterUpdateMethod = undefined;
+        }
+        if (isNullOrUndefined(this.columnFilterUpdateDebounce)) {
+            this.columnFilterUpdateDebounce = undefined;
+        }
+        if (isNullOrUndefined(this.actionItemColumnPosition)) {
+            this.actionItemColumnPosition = undefined;
+        }
+    }
+    ngOnDestroy() {
+        this._rowDetailToggleSubscription.unsubscribe();
+    }
+    _setMenuBarFilters(filters) {
+        this._menuBarsFiltersSubject.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?.state.columns || []).filter((x) => x.columnProp !== columnProp),
+                    { 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() {
+        return {
+            offset: this.ngxDatatable?.offset ?? 0,
+            pageSize: this.ngxDatatable?.pageSize ?? 0,
+            limit: this.ngxDatatable?.limit,
+            count: this.ngxDatatable?.count ?? 0
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableComponent, deps: [{ token: DatatablePreferencesService }, { token: ColumnsManagerService }, { token: ColumnsAlterationsManagerService }, { token: ColumnsFiltersService }, { token: THESEAM_DATATABLE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableComponent, isStandalone: false, selector: "seam-datatable", inputs: { preferencesKey: "preferencesKey", targetMarkerTemplate: "targetMarkerTemplate", columns: "columns", rows: "rows", columnMode: "columnMode", groupRowsBy: "groupRowsBy", groupedRows: "groupedRows", selected: "selected", externalPaging: "externalPaging", externalSorting: "externalSorting", externalFiltering: "externalFiltering", limit: "limit", count: "count", offset: "offset", loadingIndicator: "loadingIndicator", selectionType: "selectionType", reorderable: "reorderable", swapColumns: "swapColumns", sortType: "sortType", sorts: "sorts", cssClasses: "cssClasses", messages: "messages", rowIdentity: "rowIdentity", rowClass: "rowClass", selectCheck: "selectCheck", displayCheck: "displayCheck", groupExpansionDefault: "groupExpansionDefault", trackByProp: "trackByProp", selectAllRowsOnPage: "selectAllRowsOnPage", treeFromRelation: "treeFromRelation", treeToRelation: "treeToRelation", summaryRow: "summaryRow", summaryHeight: "summaryHeight", summaryPosition: "summaryPosition", virtualization: "virtualization", headerHeight: "headerHeight", rowHeight: "rowHeight", footerHeight: "footerHeight", scrollbarV: "scrollbarV", scrollbarH: "scrollbarH", dataSource: "dataSource", actionItemColumnPosition: "actionItemColumnPosition", columnFilterIcon: "columnFilterIcon", columnFilterUpdateMethod: "columnFilterUpdateMethod", columnFilterUpdateDebounce: "columnFilterUpdateDebounce" }, outputs: { scroll: "scroll", activate: "activate", select: "select", sort: "sort", page: "page", reorder: "reorder", resize: "resize", tableContextmenu: "tableContextmenu", treeAction: "treeAction", actionRefreshRequest: "actionRefreshRequest", hiddenColumnsChange: "hiddenColumnsChange" }, host: { listeners: { "dblclick": "_dblClick($event)" } }, providers: [
+            _THESEAM_DATATABLE,
+            DatatableColumnChangesService,
+            _THESEAM_DATATABLE_ACCESSOR,
+            ColumnsManagerService,
+            ColumnsAlterationsManagerService,
+            ColumnsFiltersService
+        ], queries: [{ propertyName: "actionMenu", first: true, predicate: DatatableActionMenuComponent, descendants: true, static: true }, { propertyName: "rowActionItem", first: true, predicate: DatatableRowActionItemDirective, descendants: true }, { propertyName: "rowDetail", first: true, predicate: TheSeamDatatableRowDetailDirective, descendants: true, static: true }, { propertyName: "footer", first: true, predicate: TheSeamDatatableFooterDirective, descendants: true, static: true }, { propertyName: "menuBarComponent", first: true, predicate: DatatableMenuBarComponent, descendants: true }, { propertyName: "columnComponents", predicate: DatatableColumnComponent }, { propertyName: "columnFilterTemplates", predicate: TheSeamDatatableColumnFilterDirective }], viewQueries: [{ propertyName: "ngxDatatable", first: true, predicate: DatatableComponent$1, descendants: true }, { propertyName: "ngxDatatableElement", first: true, predicate: DatatableComponent$1, descendants: true, read: ElementRef }, { propertyName: "ngxRowDetail", first: true, predicate: DatatableRowDetailDirective, descendants: true }, { propertyName: "actionMenuCellTpl", first: true, predicate: ["actionMenuCellTpl"], descendants: true, static: true }, { propertyName: "treeToggleTpl", first: true, predicate: ["treeToggleTpl"], descendants: true, static: true }, { propertyName: "headerTpl", first: true, predicate: ["headerTpl"], descendants: true, static: true }, { propertyName: "blankHeaderTpl", first: true, predicate: ["blankHeaderTpl"], descendants: true, static: true }, { propertyName: "cellTypeSelectorTpl", first: true, predicate: ["cellTypeSelectorTpl"], descendants: true, static: true }], ngImport: i0, 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]=\"$any(cssClasses)\"\n        [messages]=\"$any(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\n  #headerTpl\n  ngx-datatable-header-template\n  let-column=\"column\"\n  let-sortFn=\"sortFn\"\n>\n  <div class=\"d-inline-flex align-items-center\">\n    <ng-container *ngIf=\"$any(column).filterable\">\n      <button\n        seamIconBtn\n        [icon]=\"columnFilterIcon\"\n        size=\"sm\"\n        [seamPopover]=\"filterMenu\"\n        [seamPopoverBaseWidth]=\"300\"\n        class=\"datatable-column-header-filter-button d-flex align-items-center mr-2\"\n        [class.datatable-column-header-filter-button-active]=\"$any(column).filterActive\"\n        style=\"width: 1rem;\"\n        title=\"Click to see filter options\"></button>\n    </ng-container>\n    <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n    <button\n      seamButton\n      *ngIf=\"column.sortable\"\n      class=\"datatable-sort-target p-0\"\n      (click)=\"sortFn()\"\n      title=\"Click to sort\">\n      <strong class=\"draggable\">{{column.name}}</strong>\n    </button>\n    <div class=\"datatable-column-header-separator\" [attr.data-column-id]=\"column.$$id\"></div>\n  </div>\n  <ng-template #filterMenu let-popover=\"popover\">\n    <seam-datatable-column-filter-menu\n      [column]=\"column\"\n      [updateMethod]=\"columnFilterUpdateMethod\"\n      [debounce]=\"columnFilterUpdateDebounce\"\n      (closePopover)=\"popover?.closePopover()\"></seam-datatable-column-filter-menu>\n  </ng-template>\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]=\"$any(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", 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;inset: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}::ng-deep .ngx-datatable .datatable-body-row{position:relative}::ng-deep .ngx-datatable .datatable-row-right{position:absolute!important;top:0}::ng-deep .ngx-datatable .datatable-row-right{right:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "displayPageCount", "displayPager", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i6.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i6.DatatableGroupHeaderDirective, selector: "ngx-datatable-group-header", inputs: ["rowHeight", "checkboxable", "template"], outputs: ["toggle"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i6.DataTableColumnCellTreeToggle, selector: "[ngx-datatable-tree-toggle]" }, { kind: "directive", type: i6.DatatableFooterDirective, selector: "ngx-datatable-footer", inputs: ["footerHeight", "totalMessage", "selectedMessage", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "template"] }, { kind: "directive", type: i6.DatatableGroupHeaderTemplateDirective, selector: "[ngx-datatable-group-header-template]" }, { kind: "component", type: i7.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2$2.TheSeamElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"], exportAs: ["seamElemResized"] }, { kind: "component", type: i5.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "component", type: i3$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: i11.TheSeamPopoverDirective, selector: "[seamPopover]", inputs: ["seamPopover", "seamPopoverContext", "seamPopoverBaseWidth", "seamPopoverDisabled"], exportAs: ["seamPopover"] }, { kind: "component", type: i12.TableCellTypeSelectorComponent, selector: "seam-table-cell-type-selector", inputs: ["type", "value", "rowIndex", "row", "colData"] }, { kind: "component", type: DatatableColumnFilterMenuComponent, selector: "seam-datatable-column-filter-menu", inputs: ["column", "updateMethod", "debounce"], outputs: ["closePopover"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], 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' })),
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+__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", null);
+__decorate([
+    InputNumber()
+], DatatableComponent.prototype, "rowHeight", null);
+__decorate([
+    InputNumber()
+], DatatableComponent.prototype, "footerHeight", null);
+__decorate([
+    InputBoolean()
+], DatatableComponent.prototype, "scrollbarV", void 0);
+__decorate([
+    InputBoolean()
+], DatatableComponent.prototype, "scrollbarH", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable', 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,
+                        ColumnsFiltersService
+                    ], standalone: false, 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]=\"$any(cssClasses)\"\n        [messages]=\"$any(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\n  #headerTpl\n  ngx-datatable-header-template\n  let-column=\"column\"\n  let-sortFn=\"sortFn\"\n>\n  <div class=\"d-inline-flex align-items-center\">\n    <ng-container *ngIf=\"$any(column).filterable\">\n      <button\n        seamIconBtn\n        [icon]=\"columnFilterIcon\"\n        size=\"sm\"\n        [seamPopover]=\"filterMenu\"\n        [seamPopoverBaseWidth]=\"300\"\n        class=\"datatable-column-header-filter-button d-flex align-items-center mr-2\"\n        [class.datatable-column-header-filter-button-active]=\"$any(column).filterActive\"\n        style=\"width: 1rem;\"\n        title=\"Click to see filter options\"></button>\n    </ng-container>\n    <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n    <button\n      seamButton\n      *ngIf=\"column.sortable\"\n      class=\"datatable-sort-target p-0\"\n      (click)=\"sortFn()\"\n      title=\"Click to sort\">\n      <strong class=\"draggable\">{{column.name}}</strong>\n    </button>\n    <div class=\"datatable-column-header-separator\" [attr.data-column-id]=\"column.$$id\"></div>\n  </div>\n  <ng-template #filterMenu let-popover=\"popover\">\n    <seam-datatable-column-filter-menu\n      [column]=\"column\"\n      [updateMethod]=\"columnFilterUpdateMethod\"\n      [debounce]=\"columnFilterUpdateDebounce\"\n      (closePopover)=\"popover?.closePopover()\"></seam-datatable-column-filter-menu>\n  </ng-template>\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]=\"$any(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", 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;inset: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}::ng-deep .ngx-datatable .datatable-body-row{position:relative}::ng-deep .ngx-datatable .datatable-row-right{position:absolute!important;top:0}::ng-deep .ngx-datatable .datatable-row-right{right:0}\n"] }]
+        }], ctorParameters: () => [{ type: DatatablePreferencesService }, { type: ColumnsManagerService }, { type: ColumnsAlterationsManagerService }, { type: ColumnsFiltersService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_DATATABLE_CONFIG]
+                }] }], 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
+            }], columnFilterIcon: [{
+                type: Input
+            }], columnFilterUpdateMethod: [{
+                type: Input
+            }], columnFilterUpdateDebounce: [{
+                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]
+            }], rowDetail: [{
+                type: ContentChild,
+                args: [TheSeamDatatableRowDetailDirective, { static: true }]
+            }], footer: [{
+                type: ContentChild,
+                args: [TheSeamDatatableFooterDirective, { static: true }]
+            }], menuBarComponent: [{
+                type: ContentChild,
+                args: [DatatableMenuBarComponent]
+            }], columnFilterTemplates: [{
+                type: ContentChildren,
+                args: [TheSeamDatatableColumnFilterDirective]
+            }], 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']]
+            }] } });
+
+class DatatableColumnPreferencesComponent {
+    _datatable;
+    _columnsAlterationsManager;
+    _columns$;
+    _filterControl = new UntypedFormControl();
+    constructor(_datatable, _columnsAlterationsManager) {
+        this._datatable = _datatable;
+        this._columnsAlterationsManager = _columnsAlterationsManager;
+        this._columns$ = combineLatest([
+            this._datatable.columns$ ?? 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]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnPreferencesComponent, deps: [{ token: THESEAM_DATATABLE }, { token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnPreferencesComponent, isStandalone: false, selector: "seam-datatable-column-preferences", ngImport: i0, 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", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "component", type: i4$2.TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }, { kind: "component", type: i3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnPreferencesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-preferences', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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", styles: [":host{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [{ type: DatatableComponent, decorators: [{
+                    type: Inject,
+                    args: [THESEAM_DATATABLE]
+                }] }, { type: ColumnsAlterationsManagerService }] });
+
+class DatatableColumnPreferencesButtonComponent {
+    _columnsAlterationsManager;
+    icon = faColumns;
+    /** @ignore */
+    _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',
+        },
+    ];
+    constructor(_columnsAlterationsManager) {
+        this._columnsAlterationsManager = _columnsAlterationsManager;
+    }
+    _resetColumns(event) {
+        this._columnsAlterationsManager.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnPreferencesButtonComponent, deps: [{ token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnPreferencesButtonComponent, isStandalone: false, selector: "seam-datatable-column-preferences-button", ngImport: i0, 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", styles: [""], dependencies: [{ kind: "component", type: i4.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i5.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i11.TheSeamPopoverDirective, selector: "[seamPopover]", inputs: ["seamPopover", "seamPopoverContext", "seamPopoverBaseWidth", "seamPopoverDisabled"], exportAs: ["seamPopover"] }, { kind: "component", type: DatatableColumnPreferencesComponent, selector: "seam-datatable-column-preferences" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnPreferencesButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-preferences-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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" }]
+        }], ctorParameters: () => [{ type: ColumnsAlterationsManagerService }] });
+
+class DatatableExportButtonComponent {
+    _datatable;
+    _toastr;
+    _loading;
+    _valueHelper;
+    _data;
+    icon = faFileDownload;
+    exporters;
+    get disabled() {
+        return !(this.exporters && this.exporters.length > 0);
+    }
+    constructor(_datatable, _toastr, _loading, _valueHelper, _data) {
+        this._datatable = _datatable;
+        this._toastr = _toastr;
+        this._loading = _loading;
+        this._valueHelper = _valueHelper;
+        this._data = _data;
+        if (this._data && this._data.exporters) {
+            this.exporters = this._data.exporters;
+        }
+    }
+    _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 => {
+            // eslint-disable-next-line no-console
+            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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableExportButtonComponent, deps: [{ token: THESEAM_DATATABLE }, { token: i1$2.ToastrService }, { token: i2$3.TheSeamLoadingOverlayService }, { token: i3$2.DynamicValueHelperService }, { token: THESEAM_DYNAMIC_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableExportButtonComponent, isStandalone: false, selector: "seam-datatable-export-button", inputs: { exporters: "exporters" }, ngImport: i0, 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", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i5.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "component", type: i3$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableExportButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-export-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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", styles: [":host{display:inline-block}\n"] }]
+        }], ctorParameters: () => [{ type: DatatableComponent, decorators: [{
+                    type: Inject,
+                    args: [THESEAM_DATATABLE]
+                }] }, { type: i1$2.ToastrService }, { type: i2$3.TheSeamLoadingOverlayService }, { type: i3$2.DynamicValueHelperService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_DYNAMIC_DATA]
+                }] }], propDecorators: { exporters: [{
+                type: Input
+            }] } });
+
+class DatatableMenuBarColumnCenterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarColumnCenterComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-center", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 auto;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnCenterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-menu-bar-column-center', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 auto;justify-content:center}\n"] }]
+        }] });
+
+class DatatableMenuBarColumnLeftComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarColumnLeftComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-left", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnLeftComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-menu-bar-column-left', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-start}\n"] }]
+        }] });
+
+class DatatableMenuBarColumnRightComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarColumnRightComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-right", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnRightComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-menu-bar-column-right', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-end}\n"] }]
+        }] });
+
+class DatatableMenuBarRowComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarRowComponent, isStandalone: false, selector: "seam-datatable-menu-bar-row", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-menu-bar-row', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}\n"] }]
+        }] });
+
+const THESEAM_MENUBAR_ITEM_DATA = new InjectionToken('MenubarItemData');
+
+class DatatableMenuBarTextComponent {
+    _menuBar;
+    _data;
+    value;
+    constructor(_menuBar, _data) {
+        this._menuBar = _menuBar;
+        this._data = _data;
+        if (notNullOrUndefined(this._data)) {
+            if (hasProperty(this._data, 'value')) {
+                this.value = this._data.value;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarTextComponent, deps: [{ token: DatatableMenuBarComponent }, { token: THESEAM_MENUBAR_ITEM_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarTextComponent, isStandalone: false, selector: "seam-datatable-menu-bar-text", inputs: { value: "value" }, ngImport: i0, template: "{{ value }}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-menu-bar-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "{{ value }}\n" }]
+        }], ctorParameters: () => [{ type: DatatableMenuBarComponent }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_MENUBAR_ITEM_DATA]
+                }] }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class DatatableActionMenuItemDirective {
+    _modal;
+    _dynamicComponentLoader;
+    _http;
+    _listGroupItem = true;
+    _listGroupItemAction = true;
+    label;
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    href;
+    target;
+    // Allow routerLink inputs on menu item
+    queryParams;
+    fragment;
+    // @Input() queryParamsHandling: QueryParamsHandling
+    queryParamsHandling;
+    preserveFragment;
+    skipLocationChange;
+    replaceUrl;
+    state;
+    routerLink;
+    confirmDialog;
+    // @Input()
+    // get endpointConfig(): IActionMenuItemEndpointConfig { return this._endpointConfig }
+    // set endpointConfig(value: IActionMenuItemEndpointConfig) {
+    //   this._endpointConfig = value
+    //   if (value) {
+    //     // TODO: Handle this in a way that can be canceled.
+    //     this._endpointConfigSub = this.click
+    //       .pipe(untilDestroyed(this))
+    //       .subscribe(e => this._handleEndpointAction())
+    //   } else {
+    //     if (this._endpointConfigSub) {
+    //       this._endpointConfigSub.unsubscribe()
+    //     }
+    //   }
+    // }
+    // private _endpointConfig: IActionMenuItemEndpointConfig
+    // private _endpointConfigSub: Subscription
+    // @Input()
+    // get modalConfig(): IActionMenuItemModalConfig { return this._modalConfig }
+    // set modalConfig(value: IActionMenuItemModalConfig) {
+    //   this._modalConfig = value
+    //   if (value) {
+    //     // TODO: Handle this in a way that can be canceled.
+    //     this._modalConfigSub = this.click
+    //       .pipe(untilDestroyed(this))
+    //       .subscribe(e => this._handleModalAction())
+    //   } else {
+    //     if (this._modalConfigSub) {
+    //       this._modalConfigSub.unsubscribe()
+    //     }
+    //   }
+    // }
+    // private _modalConfig: IActionMenuItemModalConfig
+    // private _modalConfigSub: Subscription
+    row;
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    click = new EventEmitter();
+    constructor(_modal, _dynamicComponentLoader, _http) {
+        this._modal = _modal;
+        this._dynamicComponentLoader = _dynamicComponentLoader;
+        this._http = _http;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuItemDirective, deps: [{ token: i1$3.Modal }, { token: i2$4.TheSeamDynamicComponentLoader }, { token: i3$3.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableActionMenuItemDirective, isStandalone: false, selector: "[seamDatatableActionMenuItem]", inputs: { label: "label", href: ["attr.href", "href"], target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", routerLink: "routerLink", confirmDialog: "confirmDialog", row: "row" }, outputs: { click: "click" }, host: { properties: { "class.list-group-item": "this._listGroupItem", "class.list-group-item-action": "this._listGroupItemAction" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableActionMenuItem]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i1$3.Modal }, { type: i2$4.TheSeamDynamicComponentLoader }, { type: i3$3.HttpClient, decorators: [{
+                    type: Optional
+                }] }], 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 {
+    _elementRef;
+    _viewContainerRef;
+    _overlay;
+    seamDatatableActionMenuToggle;
+    _active = false;
+    _overlayRef;
+    _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); }
+    constructor(_elementRef, _viewContainerRef, _overlay) {
+        this._elementRef = _elementRef;
+        this._viewContainerRef = _viewContainerRef;
+        this._overlay = _overlay;
+    }
+    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() {
+        if (!this.active) {
+            return;
+        }
+        if (this._overlayRef?.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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableActionMenuToggleDirective, isStandalone: false, selector: "[seamDatatableActionMenuToggle]", inputs: { seamDatatableActionMenuToggle: "seamDatatableActionMenuToggle" }, host: { listeners: { "document:keydown": "_onKeydown($event)", "click": "_onClick($event)", "mousedown": "_mouseDown($event)", "pointerdown": "_pointerDown($event)", "mouseup": "_mouseUp($event)", "pointerup": "_pointerUp($event)" } }, exportAs: ["seamDatatableActionMenuToggle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableActionMenuToggle]',
+                    exportAs: 'seamDatatableActionMenuToggle',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$4.Overlay }], 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 {
+    _ngZone;
+    _scrollbars;
+    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.
+     */
+    animatedScrolling = false;
+    animatedScrollingTime = 250;
+    constructor(_ngZone, _scrollbars) {
+        this._ngZone = _ngZone;
+        this._scrollbars = _scrollbars;
+    }
+    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 });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, deps: [{ token: i0.NgZone }, { token: i1$5.TheSeamOverlayScrollbarsService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableScrollbarHelperService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$5.TheSeamOverlayScrollbarsService }] });
+
+function withStoredColumnInfo(columns, preferenceColumns) {
+    const _columns = [];
+    for (const col of columns) {
+        const storedCol = preferenceColumns.find(v => v.prop === col.prop);
+        if (storedCol) {
+            const _col = { ...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 {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableModule, declarations: [DatatableComponent,
+            DatatableCellTplDirective,
+            DatatableColumnComponent,
+            DatatableActionMenuComponent,
+            DatatableActionMenuToggleDirective,
+            DatatableActionMenuItemComponent,
+            DatatableMenuBarComponent,
+            DatatableFilterDirective,
+            DatatableRowActionItemDirective,
+            DatatableExportButtonComponent,
+            TheSeamDatatableRowDetailDirective,
+            DatatableRowDetailTplDirective,
+            TheSeamDatatableFooterDirective,
+            DatatableFooterTplDirective,
+            DatatableColumnPreferencesComponent,
+            DatatableColumnPreferencesButtonComponent,
+            DatatableActionMenuItemDirective,
+            DatatableMenuBarRowComponent,
+            DatatableMenuBarColumnLeftComponent,
+            DatatableMenuBarColumnCenterComponent,
+            DatatableMenuBarColumnRightComponent,
+            DatatableMenuBarTextComponent,
+            DatatableColumnFilterMenuComponent,
+            DatatableColumnFilterSearchTextComponent,
+            DatatableColumnFilterSearchNumericComponent,
+            DatatableColumnFilterSearchDateComponent,
+            DatatableColumnFilterTplDirective,
+            TheSeamDatatableColumnFilterDirective], imports: [CommonModule,
+            NgxDatatableModule,
+            FontAwesomeModule,
+            OverlayModule,
+            A11yModule,
+            TheSeamSharedModule,
+            RouterModule,
+            TheSeamMenuModule,
+            TheSeamButtonsModule,
+            TheSeamIconModule,
+            ToastrModule,
+            TheSeamLoadingModule,
+            PortalModule,
+            TheSeamConfirmDialogModule,
+            TheSeamPopoverModule,
+            TheSeamCheckboxComponent,
+            TheSeamFormFieldModule,
+            ReactiveFormsModule,
+            TheSeamTableCellTypeModule,
+            TheSeamDataFiltersModule,
+            NgSelectModule,
+            TheSeamToggleGroupModule], exports: [DatatableComponent,
+            DatatableCellTplDirective,
+            DatatableColumnComponent,
+            DatatableActionMenuComponent,
+            DatatableActionMenuItemComponent,
+            DatatableMenuBarComponent,
+            DatatableFilterDirective,
+            DatatableRowActionItemDirective,
+            DatatableExportButtonComponent,
+            TheSeamDatatableRowDetailDirective,
+            DatatableRowDetailTplDirective,
+            TheSeamDatatableFooterDirective,
+            DatatableFooterTplDirective,
+            DatatableColumnPreferencesComponent,
+            DatatableColumnPreferencesButtonComponent,
+            DatatableActionMenuItemDirective,
+            DatatableMenuBarRowComponent,
+            DatatableMenuBarColumnLeftComponent,
+            DatatableMenuBarColumnCenterComponent,
+            DatatableMenuBarColumnRightComponent,
+            DatatableMenuBarTextComponent,
+            DatatableColumnFilterMenuComponent,
+            DatatableColumnFilterSearchTextComponent,
+            DatatableColumnFilterSearchNumericComponent,
+            DatatableColumnFilterSearchDateComponent,
+            DatatableColumnFilterTplDirective,
+            TheSeamDatatableColumnFilterDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableModule, providers: [
+            { provide: ScrollbarHelper, useClass: TheSeamDatatableScrollbarHelperService },
+        ], imports: [CommonModule,
+            NgxDatatableModule,
+            FontAwesomeModule,
+            OverlayModule,
+            A11yModule,
+            TheSeamSharedModule,
+            RouterModule,
+            TheSeamMenuModule,
+            TheSeamButtonsModule,
+            TheSeamIconModule,
+            ToastrModule,
+            TheSeamLoadingModule,
+            PortalModule,
+            TheSeamConfirmDialogModule,
+            TheSeamPopoverModule,
+            TheSeamCheckboxComponent,
+            TheSeamFormFieldModule,
+            ReactiveFormsModule,
+            TheSeamTableCellTypeModule,
+            TheSeamDataFiltersModule,
+            NgSelectModule,
+            TheSeamToggleGroupModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: 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,
+                        DatatableColumnFilterMenuComponent,
+                        DatatableColumnFilterSearchTextComponent,
+                        DatatableColumnFilterSearchNumericComponent,
+                        DatatableColumnFilterSearchDateComponent,
+                        DatatableColumnFilterTplDirective,
+                        TheSeamDatatableColumnFilterDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                        NgxDatatableModule,
+                        FontAwesomeModule,
+                        OverlayModule,
+                        A11yModule,
+                        TheSeamSharedModule,
+                        RouterModule,
+                        TheSeamMenuModule,
+                        TheSeamButtonsModule,
+                        TheSeamIconModule,
+                        ToastrModule,
+                        TheSeamLoadingModule,
+                        PortalModule,
+                        TheSeamConfirmDialogModule,
+                        TheSeamPopoverModule,
+                        TheSeamCheckboxComponent,
+                        TheSeamFormFieldModule,
+                        ReactiveFormsModule,
+                        TheSeamTableCellTypeModule,
+                        TheSeamDataFiltersModule,
+                        NgSelectModule,
+                        TheSeamToggleGroupModule,
+                    ],
+                    exports: [
+                        DatatableComponent,
+                        DatatableCellTplDirective,
+                        DatatableColumnComponent,
+                        DatatableActionMenuComponent,
+                        DatatableActionMenuItemComponent,
+                        DatatableMenuBarComponent,
+                        DatatableFilterDirective,
+                        DatatableRowActionItemDirective,
+                        DatatableExportButtonComponent,
+                        TheSeamDatatableRowDetailDirective,
+                        DatatableRowDetailTplDirective,
+                        TheSeamDatatableFooterDirective,
+                        DatatableFooterTplDirective,
+                        DatatableColumnPreferencesComponent,
+                        DatatableColumnPreferencesButtonComponent,
+                        DatatableActionMenuItemDirective,
+                        DatatableMenuBarRowComponent,
+                        DatatableMenuBarColumnLeftComponent,
+                        DatatableMenuBarColumnCenterComponent,
+                        DatatableMenuBarColumnRightComponent,
+                        DatatableMenuBarTextComponent,
+                        DatatableColumnFilterMenuComponent,
+                        DatatableColumnFilterSearchTextComponent,
+                        DatatableColumnFilterSearchNumericComponent,
+                        DatatableColumnFilterSearchDateComponent,
+                        DatatableColumnFilterTplDirective,
+                        TheSeamDatatableColumnFilterDirective,
+                    ],
+                    providers: [
+                        { provide: ScrollbarHelper, useClass: TheSeamDatatableScrollbarHelperService },
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CURRENT_DATATABLE_PREFERENCES_VERSION, ColumnsAlteration, ColumnsDataFilter, ColumnsFiltersService, DatatableActionMenuComponent, DatatableActionMenuItemComponent, DatatableActionMenuItemDirective, DatatableActionMenuToggleDirective, DatatableCellTplDirective, DatatableColumnChangesService, DatatableColumnComponent, DatatableColumnFilterMenuComponent, DatatableColumnFilterSearchDateComponent, DatatableColumnFilterSearchNumericComponent, DatatableColumnFilterSearchTextComponent, DatatableColumnFilterTplDirective, DatatableColumnPreferencesButtonComponent, DatatableColumnPreferencesComponent, DatatableComponent, DatatableDataSource, DatatableExportButtonComponent, DatatableFilterDirective, DatatableFooterTplDirective, DatatableGqlDataSource, DatatableMenuBarColumnCenterComponent, DatatableMenuBarColumnLeftComponent, DatatableMenuBarColumnRightComponent, DatatableMenuBarComponent, DatatableMenuBarRowComponent, DatatableMenuBarTextComponent, DatatablePreferencesService, DatatableRowActionItemDirective, DatatableRowDetailTplDirective, EMPTY_DATATABLE_PREFERENCES, SearchDateColumnsDataFilter, SearchNumericColumnsDataFilter, SearchTextColumnsDataFilter, THESEAM_COLUMNS_DATA_FILTER, THESEAM_COLUMNS_DATA_FILTERS_DEFAULT, THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES, THESEAM_DATATABLE, THESEAM_DATATABLE_CONFIG, THESEAM_DATATABLE_PREFERENCES_ACCESSOR, THESEAM_MENUBAR_ITEM_DATA, TheSeamDatatableColumnFilterDirective, TheSeamDatatableFooterDirective, TheSeamDatatableModule, TheSeamDatatableRowDetailDirective, TheSeamDatatableScrollbarHelperService, _THESEAM_DATATABLE, _THESEAM_DATATABLE_ACCESSOR, _THESEAM_DATA_FILTER_CONTAINER, getFormattedDateForComparison, mapColumnsAlterationsStates, withStoredColumnInfo };
+//# sourceMappingURL=theseam-ui-common-datatable.mjs.map