@theseam/ui-common 0.4.26 → 0.4.28-beta.0

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

@@ -4,56 +4,59 @@ import { coerceArray } from '@angular/cdk/coercion';
 import { DataSource, isDataSource } from '@angular/cdk/collections';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChildren, Directive, Injectable, TemplateRef, ContentChild, Self, Inject, forwardRef, InjectionToken, isDevMode, Optional, ElementRef, HostListener, HostBinding, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, of, defer, combineLatest, EMPTY, Subscription, from, isObservable } from 'rxjs';
+import { Subject, BehaviorSubject, of, defer, combineLatest, EMPTY, startWith as startWith$1, map as map$1, switchMap as switchMap$1, 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, faColumns, faFileDownload } from '@fortawesome/free-solid-svg-icons';
-import * as i5$1 from '@marklb/ngx-datatable';
+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 } from '@theseam/ui-common/data-filters';
-import { notNullOrUndefined, hasProperty, arrayMoveMutable, waitOnConditionAsync, observeControlValue } from '@theseam/ui-common/utils';
-import * as i4$1 from '@theseam/ui-common/menu';
+import { THESEAM_DATA_FILTER, THESEAM_DATA_FILTER_CONTAINER, composeDataFilterStates, composeDataFilters, TheSeamDataFiltersModule } from '@theseam/ui-common/data-filters';
+import { notNullOrUndefined, hasProperty, arrayMoveMutable, isNullOrUndefined, isNullOrUndefinedOrEmpty, notNullOrUndefinedOrEmpty, 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 i4 from '@angular/common';
+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, ControlContainer, FormGroupDirective, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@theseam/ui-common/services';
-import * as i6 from '@fortawesome/angular-fontawesome';
+import * as i7 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i7 from '@theseam/ui-common/shared';
+import * as i2$2 from '@theseam/ui-common/shared';
 import { TheSeamSharedModule } from '@theseam/ui-common/shared';
-import * as i8 from '@theseam/ui-common/table-cell-type';
+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 i7$1 from '@angular/forms';
-import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+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 i1$2 from '@theseam/ui-common/scrollbar';
 import * as i5$2 from '@theseam/ui-common/checkbox';
 import { TheSeamCheckboxComponent } from '@theseam/ui-common/checkbox';
-import * as i6$1 from '@theseam/ui-common/form-field';
-import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
-import * as i4$2 from '@theseam/ui-common/popover';
-import { TheSeamPopoverModule } from '@theseam/ui-common/popover';
-import * as i3 from '@theseam/ui-common/dynamic';
+import * as i3$2 from '@theseam/ui-common/dynamic';
 import { THESEAM_DYNAMIC_DATA } from '@theseam/ui-common/dynamic';
 import * as i1$3 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
-import * as i2$1 from '@theseam/ui-common/loading';
+import * as i2$3 from '@theseam/ui-common/loading';
 import { TheSeamLoadingModule } from '@theseam/ui-common/loading';
-import * as i7$2 from '@theseam/ui-common/buttons';
-import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
 import * as i1$4 from '@theseam/ui-common/modal';
-import * as i2$2 from '@theseam/ui-common/dynamic-component-loader';
-import * as i3$1 from '@angular/common/http';
+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$5 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { A11yModule } from '@angular/cdk/a11y';
+import { TheSeamToggleGroupModule } from '@theseam/ui-common/toggle-group';
 
 class DatatableActionMenuItemComponent {
     constructor() {
@@ -186,13 +189,13 @@ class DatatableActionMenuComponent {
     }
 }
 DatatableActionMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuComponent, deps: [{ token: i1.SeamConfirmDialogService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-DatatableActionMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableActionMenuComponent, 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{display:block;position:relative}.datatable-action-button{font-size:20px;line-height:20px;width:30px;height:30px;padding:0;border-radius:15px;text-align:center}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4$1.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4$1.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"] }] });
+DatatableActionMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableActionMenuComponent, 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", "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: "15.2.7", ngImport: i0, type: DatatableActionMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-datatable-action-menu', exportAs: 'seamDatatableActionMenu', 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{display:block;position:relative}.datatable-action-button{font-size:20px;line-height:20px;width:30px;height:30px;padding:0;border-radius:15px;text-align:center}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
+            args: [{ selector: 'seam-datatable-action-menu', exportAs: 'seamDatatableActionMenu', 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: function () { return [{ type: i1.SeamConfirmDialogService }, { type: i2.Router }]; }, propDecorators: { menu: [{
                 type: ViewChild,
                 args: [MenuComponent, { static: true }]
@@ -584,7 +587,7 @@ class DatatableDataSource extends DataSource {
 }
 
 const ACTION_MENU_COLUMN_PROP = '$$__actionMenu__';
-function createActionMenuColumn(cellTemplate, headerTemplate) {
+function createActionMenuColumn(cellTemplate, headerTemplate, frozenLeft, frozenRight) {
     return {
         prop: ACTION_MENU_COLUMN_PROP,
         name: '',
@@ -595,7 +598,8 @@ function createActionMenuColumn(cellTemplate, headerTemplate) {
         sortable: false,
         draggable: false,
         // TODO: Fix column auto sizing with fixed column and cell overlay before enabling.
-        // frozenRight: true,
+        frozenLeft: frozenLeft,
+        frozenRight: frozenRight,
         cellTemplate,
         headerTemplate,
     };
@@ -710,6 +714,13 @@ class ColumnsManagerService {
             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;
@@ -783,7 +794,13 @@ class ColumnsManagerService {
             cols.push(_col);
         }
         if (this._shouldAddRowActionColumn()) {
-            cols.push(createActionMenuColumn(this._actionMenuCellTpl, this._blankHeaderTpl));
+            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
@@ -869,6 +886,18 @@ class ColumnsManagerService {
     _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));
@@ -1294,6 +1323,549 @@ function mapColumnsAlterationsStates(states) {
     return alterations;
 }
 
+const ActionItemColumnPosition = ['frozenLeft', 'frozenRight', 'staticLeft', 'staticRight'];
+function isActionItemColumnPosition(input) {
+    return ActionItemColumnPosition.indexOf(input) != -1;
+}
+
+class ColumnsDataFilter {
+    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 {
+    constructor(prop, initialValue, column) {
+        var _a;
+        super(prop, initialValue, column);
+        this.name = THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_NAME;
+        this._updateFilterValue = new Subject;
+        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: ((_a = this.column.filterOptions) === null || _a === void 0 ? void 0 : _a.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) {
+        var _a;
+        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 = ((_a = this.column.filterOptions) === null || _a === void 0 ? void 0 : _a.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 {
+    constructor(prop, initialValue, column) {
+        super(prop, initialValue, column);
+        this.name = THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_NAME;
+        this._updateFilterValue = new Subject;
+        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 {
+    constructor(prop, initialValue, column) {
+        super(prop, initialValue, column);
+        this.name = THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME;
+        this._updateFilterValue = new Subject;
+        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 {
+    constructor(_customColumnsDataFilters) {
+        this._customColumnsDataFilters = _customColumnsDataFilters;
+        this._columnFilterTemplates = new BehaviorSubject([]);
+        this.columnFilterTemplates$ = this._columnFilterTemplates.asObservable();
+        this._columnsFilters = new BehaviorSubject([]);
+        this.columnsFilters$ = this._columnsFilters.asObservable();
+        this.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)));
+    }
+    registerColumnFilters(columns) {
+        this._columnsFilters.next([]);
+        const filters = columns
+            .filter(col => col.filterable)
+            .map(col => this.createColumnDataFilter(col, null));
+        this._columnsFilters.next(filters.filter(notNullOrUndefined));
+    }
+    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)) {
+            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) {
+        var _a;
+        if (isNullOrUndefined(column)) {
+            return null;
+        }
+        const prop = ((_a = column.filterOptions) === null || _a === void 0 ? void 0 : _a.filterProp) || column.prop || (notNullOrUndefined(column.name) ? camelCase(column.name) : undefined);
+        if (isNullOrUndefined(prop)) {
+            return null;
+        }
+        return `${prop}`;
+    }
+    getColumnFilter(prop) {
+        if (isNullOrUndefined(prop)) {
+            return undefined;
+        }
+        return this._columnsFilters.value.find(f => f.prop === prop);
+    }
+    filters() {
+        return this._columnsFilters.value;
+    }
+    addFilter(filter) {
+        this._columnsFilters.next([...this._columnsFilters.value, filter]);
+    }
+    removeFilter(filter) {
+        this._columnsFilters.next([...this._columnsFilters.value.filter(c => c.name !== filter.name)]);
+    }
+}
+ColumnsFiltersService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ColumnsFiltersService, deps: [{ token: THESEAM_COLUMNS_DATA_FILTER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnsFiltersService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ColumnsFiltersService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ColumnsFiltersService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [THESEAM_COLUMNS_DATA_FILTER]
+                    }] }];
+    } });
+
+const THESEAM_DATATABLE_CONFIG = new InjectionToken('TheSeamDatatableConfig');
+
+class DatatableColumnFilterTplDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+DatatableColumnFilterTplDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnFilterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DatatableColumnFilterTplDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnFilterTplDirective, selector: "[seamDatatableColumnFilterTpl]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnFilterTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDatatableColumnFilterTpl]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class TheSeamDatatableColumnFilterDirective {
+    get template() {
+        return this._templateInput || this._templateQuery;
+    }
+}
+TheSeamDatatableColumnFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamDatatableColumnFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TheSeamDatatableColumnFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamDatatableColumnFilterDirective, 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: "15.2.7", ngImport: i0, type: TheSeamDatatableColumnFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'seam-datatable-column-filter'
+                }]
+        }], 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,
@@ -1388,6 +1960,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     }] }];
     } });
 
+class DatatableColumnFilterSearchTextComponent {
+    constructor() {
+        this.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' },
+        ];
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.showTextbox$ = (_a = this.filterForm) === null || _a === void 0 ? void 0 : _a.controls.searchType.valueChanges.pipe(startWith$1((_b = this.filterForm) === null || _b === void 0 ? void 0 : _b.controls.searchType.value), map$1(value => THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES.includes(value || '')));
+    }
+}
+DatatableColumnFilterSearchTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnFilterSearchTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatatableColumnFilterSearchTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnFilterSearchTextComponent, 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.AutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.NgSelectExtraDirective, selector: "ng-select" }, { 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-checkbox[seamInput] [ngbRadioGroup], 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: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], 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: "15.2.7", ngImport: i0, type: DatatableColumnFilterSearchTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-filter-search-text', viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useExisting: FormGroupDirective
+                        }
+                    ], 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 {
+    constructor() {
+        this.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' },
+        ];
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d;
+        this.showSearchInput$ = (_a = this.filterForm) === null || _a === void 0 ? void 0 : _a.controls.searchType.valueChanges.pipe(startWith$1((_b = this.filterForm) === null || _b === void 0 ? void 0 : _b.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES.includes(searchType || '')));
+        this.showRangeInputs$ = (_c = this.filterForm) === null || _c === void 0 ? void 0 : _c.controls.searchType.valueChanges.pipe(startWith$1((_d = this.filterForm) === null || _d === void 0 ? void 0 : _d.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES.includes(searchType || '')));
+    }
+}
+DatatableColumnFilterSearchNumericComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnFilterSearchNumericComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatatableColumnFilterSearchNumericComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnFilterSearchNumericComponent, 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.AutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.NgSelectExtraDirective, selector: "ng-select" }, { 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-checkbox[seamInput] [ngbRadioGroup], 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: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], 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: "15.2.7", ngImport: i0, type: DatatableColumnFilterSearchNumericComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-filter-search-numeric', viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useExisting: FormGroupDirective
+                        }
+                    ], 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 {
+    constructor() {
+        this.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' },
+        ];
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d, _e, _f;
+        if (notNullOrUndefined((_a = this.options) === null || _a === void 0 ? void 0 : _a.dateType)) {
+            this.dateFormat = (_b = this.options) === null || _b === void 0 ? void 0 : _b.dateType;
+        }
+        this.showSearchInput$ = (_c = this.filterForm) === null || _c === void 0 ? void 0 : _c.controls.searchType.valueChanges.pipe(startWith$1((_d = this.filterForm) === null || _d === void 0 ? void 0 : _d.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES.includes(searchType || '')));
+        this.showRangeInputs$ = (_e = this.filterForm) === null || _e === void 0 ? void 0 : _e.controls.searchType.valueChanges.pipe(startWith$1((_f = this.filterForm) === null || _f === void 0 ? void 0 : _f.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES.includes(searchType || '')));
+    }
+}
+DatatableColumnFilterSearchDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnFilterSearchDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatatableColumnFilterSearchDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnFilterSearchDateComponent, 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.AutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.NgSelectExtraDirective, selector: "ng-select" }, { 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-checkbox[seamInput] [ngbRadioGroup], 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: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], 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: "15.2.7", ngImport: i0, type: DatatableColumnFilterSearchDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-filter-search-date', viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useExisting: FormGroupDirective
+                        }
+                    ], 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 {
+    constructor(_columnsFilters) {
+        this._columnsFilters = _columnsFilters;
+        this.closePopover = new EventEmitter();
+    }
+    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 => { var _a; return t.filterName === ((_a = this.columnFilter) === null || _a === void 0 ? void 0 : _a.name); })));
+        if (this.updateMethod === 'valueChanges' && notNullOrUndefined(this._filterForm)) {
+            this._filterForm.valueChanges.pipe(debounceTime(this.debounce || 0), tap$1(() => { var _a; return (_a = this.columnFilter) === null || _a === void 0 ? void 0 : _a.applyFilter(); })).subscribe();
+        }
+    }
+    submit() {
+        var _a;
+        (_a = this.columnFilter) === null || _a === void 0 ? void 0 : _a.applyFilter();
+        this.closePopover.emit();
+    }
+    clearFilter() {
+        var _a;
+        (_a = this.columnFilter) === null || _a === void 0 ? void 0 : _a.clearFilter();
+    }
+}
+DatatableColumnFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnFilterMenuComponent, deps: [{ token: ColumnsFiltersService }], target: i0.ɵɵFactoryTarget.Component });
+DatatableColumnFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnFilterMenuComponent, 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: "15.2.7", ngImport: i0, type: DatatableColumnFilterMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-filter-menu', 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: function () { return [{ type: ColumnsFiltersService }]; }, propDecorators: { column: [{
+                type: Input
+            }], updateMethod: [{
+                type: Input
+            }], debounce: [{
+                type: Input
+            }], closePopover: [{
+                type: Output
+            }] } });
+
 /**
  * Intended for internal classes declared by the `TheSeamDatatableModule`.
  */
@@ -1403,11 +2137,17 @@ const _THESEAM_DATATABLE_ACCESSOR = {
     useExisting: forwardRef(() => DatatableComponent)
 };
 class DatatableComponent {
-    get filters() { return this._filtersSubject.value; }
+    get filters() {
+        return [
+            ...this._menuBarsFiltersSubject.value,
+            ...this._columnsFilters.filters()
+        ];
+    }
     get preferencesKey() { return this._preferencesKey.value; }
     set preferencesKey(value) { this._preferencesKey.next(value || undefined); }
     set columns(value) {
         this._columnsManager.setInputColumns(Array.isArray(value) ? value : []);
+        this._columnsFilters.registerColumnFilters(Array.isArray(value) ? value : []);
     }
     get rows() { return this._rows.value; }
     set rows(value) {
@@ -1432,12 +2172,144 @@ class DatatableComponent {
     set sorts(value) {
         this._sorts = notNullOrUndefined(value) ? coerceArray(value) : [];
     }
+    get cssClasses() {
+        return this._cssClasses;
+    }
+    set cssClasses(value) {
+        var _a, _b;
+        if (notNullOrUndefined(value)) {
+            this._cssClasses = value;
+        }
+        else if (notNullOrUndefined((_a = this._config) === null || _a === void 0 ? void 0 : _a.cssClasses)) {
+            this._cssClasses = (_b = this._config) === null || _b === void 0 ? void 0 : _b.cssClasses;
+        }
+        else {
+            this._cssClasses = this._cssClassesDefault;
+        }
+    }
+    get messages() {
+        return this._messages;
+    }
+    set messages(value) {
+        var _a, _b;
+        if (notNullOrUndefined(value)) {
+            this._messages = value;
+        }
+        else if (notNullOrUndefined((_a = this._config) === null || _a === void 0 ? void 0 : _a.messages)) {
+            this._messages = Object.assign(Object.assign({}, this._messagesDefault), (_b = this._config) === null || _b === void 0 ? void 0 : _b.messages);
+        }
+        else {
+            this._messages = this._messagesDefault;
+        }
+    }
+    get headerHeight() {
+        return this._headerHeight;
+    }
+    set headerHeight(value) {
+        var _a, _b;
+        if (notNullOrUndefined(value)) {
+            this._headerHeight = value;
+        }
+        else if (notNullOrUndefined((_a = this._config) === null || _a === void 0 ? void 0 : _a.headerHeight)) {
+            this._headerHeight = (_b = this._config) === null || _b === void 0 ? void 0 : _b.headerHeight;
+        }
+        else {
+            this._headerHeight = this._headerHeightDefault;
+        }
+    }
+    get rowHeight() {
+        return this._rowHeight;
+    }
+    set rowHeight(value) {
+        var _a, _b;
+        if (notNullOrUndefined(value)) {
+            this._rowHeight = value;
+        }
+        else if (notNullOrUndefined((_a = this._config) === null || _a === void 0 ? void 0 : _a.rowHeight)) {
+            this._rowHeight = (_b = this._config) === null || _b === void 0 ? void 0 : _b.rowHeight;
+        }
+        else {
+            this._rowHeight = this._rowHeightDefault;
+        }
+    }
+    get footerHeight() {
+        return this._footerHeight;
+    }
+    set footerHeight(value) {
+        var _a, _b;
+        if (notNullOrUndefined(value)) {
+            this._footerHeight = value;
+        }
+        else if (notNullOrUndefined((_a = this._config) === null || _a === void 0 ? void 0 : _a.footerHeight)) {
+            this._footerHeight = (_b = this._config) === null || _b === void 0 ? void 0 : _b.footerHeight;
+        }
+        else {
+            this._footerHeight = this._footerHeightDefault;
+        }
+    }
     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 (value && isActionItemColumnPosition(value)) {
+            this._actionItemColumnPosition = value;
+        }
+        this._columnsManager.setActionItemColumnPosition(this._actionItemColumnPosition);
+    }
+    get columnFilterIcon() {
+        return this._columnFilterIcon;
+    }
+    set columnFilterIcon(value) {
+        var _a, _b;
+        if (notNullOrUndefined(value)) {
+            this._columnFilterIcon = value;
+        }
+        else if (notNullOrUndefined((_a = this._config) === null || _a === void 0 ? void 0 : _a.columnFilterIcon)) {
+            this._columnFilterIcon = (_b = this._config) === null || _b === void 0 ? void 0 : _b.columnFilterIcon;
+        }
+        else {
+            this._columnFilterIcon = this._columnFilterIconDefault;
+        }
+    }
+    get columnFilterUpdateMethod() {
+        return this._columnFilterUpdateMethod;
+    }
+    set columnFilterUpdateMethod(value) {
+        var _a, _b;
+        if (notNullOrUndefined(value)) {
+            this._columnFilterUpdateMethod = value;
+        }
+        else if (notNullOrUndefined((_a = this._config) === null || _a === void 0 ? void 0 : _a.columnFilterUpdateMethod)) {
+            this._columnFilterUpdateMethod = (_b = this._config) === null || _b === void 0 ? void 0 : _b.columnFilterUpdateMethod;
+        }
+        else {
+            this._columnFilterUpdateMethod = this._columnFilterUpdateMethodDefault;
+        }
+    }
+    get columnFilterUpdateDebounce() {
+        return this._columnFilterUpdateDebounce;
+    }
+    set columnFilterUpdateDebounce(value) {
+        var _a, _b;
+        if (notNullOrUndefined(value)) {
+            this._columnFilterUpdateDebounce = value;
+        }
+        else if (notNullOrUndefined((_a = this._config) === null || _a === void 0 ? void 0 : _a.columnFilterUpdateDebounce)) {
+            this._columnFilterUpdateDebounce = (_b = this._config) === null || _b === void 0 ? void 0 : _b.columnFilterUpdateDebounce;
+        }
+        else {
+            this._columnFilterUpdateDebounce = this._columnFilterUpdateDebounceDefault;
+        }
+    }
     set columnComponents(value) {
         var _a;
         this._columnsManager.setTemplateColumns(translateTemplateColumns((_a = value === null || value === void 0 ? void 0 : value.toArray()) !== null && _a !== void 0 ? _a : []));
@@ -1459,6 +2331,10 @@ class DatatableComponent {
             this._menuBarSub = (_a = this._menuBarComponent) === null || _a === void 0 ? void 0 : _a.filtersChanged.subscribe(v => { this._setMenuBarFilters(value.filters()); });
         }
     }
+    set columnFilterTemplates(value) {
+        var _a;
+        this._columnsFilters.setFilterTemplates((_a = value === null || value === void 0 ? void 0 : value.toArray()) !== null && _a !== void 0 ? _a : []);
+    }
     get actionMenuCellTpl() { return this._actionMenuCellTpl; }
     set actionMenuCellTpl(value) {
         this._actionMenuCellTpl = value;
@@ -1507,15 +2383,17 @@ class DatatableComponent {
             }
         }
     }
-    constructor(_preferences, _columnsManager, _columnsAlterationsManager) {
+    constructor(_preferences, _columnsManager, _columnsAlterationsManager, _columnsFilters, _config) {
         this._preferences = _preferences;
         this._columnsManager = _columnsManager;
         this._columnsAlterationsManager = _columnsAlterationsManager;
+        this._columnsFilters = _columnsFilters;
+        this._config = _config;
         this._faChevronDown = faChevronDown;
         this._faChevronRight = faChevronRight;
         this._faSpinner = faSpinner;
         this._ngUnsubscribe = new Subject();
-        this._filtersSubject = new BehaviorSubject([]);
+        this._menuBarsFiltersSubject = new BehaviorSubject([]);
         this._dataSourceSubject = new BehaviorSubject(undefined);
         this._resizing = {};
         this._preferencesKey = new BehaviorSubject(undefined);
@@ -1532,7 +2410,7 @@ class DatatableComponent {
         this.swapColumns = false;
         this._sortType = SortType.single;
         this._sorts = [];
-        this.cssClasses = {
+        this._cssClassesDefault = {
             sortAscending: 'datatable-icon-up',
             sortDescending: 'datatable-icon-down',
             pagerLeftArrow: 'datatable-icon-left',
@@ -1540,7 +2418,7 @@ class DatatableComponent {
             pagerPrevious: 'datatable-icon-prev',
             pagerNext: 'datatable-icon-skip'
         };
-        this.messages = {
+        this._messagesDefault = {
             // Message to show when array is presented
             // but contains no values
             emptyMessage: 'No records found',
@@ -1556,11 +2434,15 @@ class DatatableComponent {
         this.summaryHeight = 30;
         this.summaryPosition = 'top';
         this.virtualization = true;
-        this.headerHeight = 50;
-        this.rowHeight = 50;
-        this.footerHeight = 40;
+        this._headerHeightDefault = 50;
+        this._rowHeightDefault = 50;
+        this._footerHeightDefault = 40;
         this.scrollbarV = true;
         this.scrollbarH = true;
+        this._actionItemColumnPosition = 'frozenRight';
+        this._columnFilterIconDefault = faFilter;
+        this._columnFilterUpdateMethodDefault = 'valueChanges';
+        this._columnFilterUpdateDebounceDefault = 400;
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.scroll = new EventEmitter();
         this.activate = new EventEmitter();
@@ -1613,10 +2495,10 @@ class DatatableComponent {
                 this._columnsAlterationsManager.add(alterations);
             }));
         }), takeUntil(this._ngUnsubscribe)).subscribe();
-        this.columns$ = this._columnsManager.columns$;
+        this.columns$ = combineLatest([this._columnsManager.columns$, this._columnsFilters.columnActiveFilterProps$]).pipe(map(([columns, columnActiveFilterProps]) => columns.map(col => (Object.assign(Object.assign({}, 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$ = this._filtersSubject.asObservable();
-        this.filterStates = this._filtersSubject.asObservable().pipe(switchMap(filters => composeDataFilterStates(filters)));
+        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;
@@ -1639,7 +2521,7 @@ class DatatableComponent {
             }
             if (!this.externalFiltering) {
                 // console.log('not using externalFiltering')
-                dataStream = dataStream.pipe(switchMap(rows => this._filtersSubject.pipe(
+                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(
@@ -1663,12 +2545,40 @@ class DatatableComponent {
                 }
             });
         }
+        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;
+        }
     }
     ngOnDestroy() {
         this._rowDetailToggleSubscription.unsubscribe();
     }
     _setMenuBarFilters(filters) {
-        this._filtersSubject.next(filters || []);
+        this._menuBarsFiltersSubject.next(filters || []);
     }
     getColumnComponent(propName) {
         if (!this.columnComponents || this.columnComponents.length === 0) {
@@ -1773,14 +2683,15 @@ class DatatableComponent {
         };
     }
 }
-DatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableComponent, deps: [{ token: DatatablePreferencesService }, { token: ColumnsManagerService }, { token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
-DatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableComponent, 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" }, 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: [
+DatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableComponent, deps: [{ token: DatatablePreferencesService }, { token: ColumnsManagerService }, { token: ColumnsAlterationsManagerService }, { token: ColumnsFiltersService }, { token: THESEAM_DATATABLE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableComponent, 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,
-    ], 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 }], 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]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n  let-column=\"column\" let-sortFn=\"sortFn\">\n  <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n  <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n  <div class=\"datatable-column-header-separator\" [attr.data-column-id]=\"column.$$id\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"column.cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"_faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"_faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n", 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}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "displayPageCount", "displayPager", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i5$1.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i5$1.DatatableGroupHeaderDirective, selector: "ngx-datatable-group-header", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i5$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i5$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i5$1.DataTableColumnCellTreeToggle, selector: "[ngx-datatable-tree-toggle]" }, { kind: "directive", type: i5$1.DatatableFooterDirective, selector: "ngx-datatable-footer", inputs: ["footerHeight", "totalMessage", "selectedMessage", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "template"] }, { kind: "directive", type: i5$1.DatatableGroupHeaderTemplateDirective, selector: "[ngx-datatable-group-header-template]" }, { kind: "component", type: i6.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: i7.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"] }, { kind: "component", type: i8.TableCellTypeSelectorComponent, selector: "seam-table-cell-type-selector", inputs: ["type", "value", "rowIndex", "row", "colData"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
+        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]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template\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=\"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]=\"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 draggable p-0\"\n      (click)=\"sortFn()\"\n      title=\"Click to sort\">\n      <strong>{{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]=\"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: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "displayPageCount", "displayPager", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { 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", "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: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: i2$2.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["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' }),
@@ -1836,13 +2747,13 @@ __decorate([
 ], DatatableComponent.prototype, "virtualization", void 0);
 __decorate([
     InputNumber()
-], DatatableComponent.prototype, "headerHeight", void 0);
+], DatatableComponent.prototype, "headerHeight", null);
 __decorate([
     InputNumber()
-], DatatableComponent.prototype, "rowHeight", void 0);
+], DatatableComponent.prototype, "rowHeight", null);
 __decorate([
     InputNumber()
-], DatatableComponent.prototype, "footerHeight", void 0);
+], DatatableComponent.prototype, "footerHeight", null);
 __decorate([
     InputBoolean()
 ], DatatableComponent.prototype, "scrollbarV", void 0);
@@ -1868,8 +2779,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         _THESEAM_DATATABLE_ACCESSOR,
                         ColumnsManagerService,
                         ColumnsAlterationsManagerService,
-                    ], template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n  let-column=\"column\" let-sortFn=\"sortFn\">\n  <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n  <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n  <div class=\"datatable-column-header-separator\" [attr.data-column-id]=\"column.$$id\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"column.cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"_faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"_faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n", 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}\n"] }]
-        }], ctorParameters: function () { return [{ type: DatatablePreferencesService }, { type: ColumnsManagerService }, { type: ColumnsAlterationsManagerService }]; }, propDecorators: { preferencesKey: [{
+                        ColumnsFiltersService
+                    ], template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template\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=\"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]=\"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 draggable p-0\"\n      (click)=\"sortFn()\"\n      title=\"Click to sort\">\n      <strong>{{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]=\"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: function () {
+        return [{ 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
@@ -1951,6 +2870,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], dataSource: [{
                 type: Input
+            }], actionItemColumnPosition: [{
+                type: Input
+            }], columnFilterIcon: [{
+                type: Input
+            }], columnFilterUpdateMethod: [{
+                type: Input
+            }], columnFilterUpdateDebounce: [{
+                type: Input
             }], scroll: [{
                 type: Output
             }], activate: [{
@@ -1991,6 +2918,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }], menuBarComponent: [{
                 type: ContentChild,
                 args: [DatatableMenuBarComponent]
+            }], columnFilterTemplates: [{
+                type: ContentChildren,
+                args: [TheSeamDatatableColumnFilterDirective]
             }], ngxDatatable: [{
                 type: ViewChild,
                 args: [DatatableComponent$1]
@@ -2061,7 +2991,7 @@ class DatatableColumnPreferencesComponent {
     }
 }
 DatatableColumnPreferencesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnPreferencesComponent, deps: [{ token: THESEAM_DATATABLE }, { token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
-DatatableColumnPreferencesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnPreferencesComponent, 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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.AutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i1$2.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "component", type: i5$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: i6$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i6$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], 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: i7$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: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DatatableColumnPreferencesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnPreferencesComponent, 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.AutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i1$2.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "component", type: i5$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-checkbox[seamInput] [ngbRadioGroup], 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: "15.2.7", ngImport: i0, type: DatatableColumnPreferencesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-column-preferences', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
@@ -2109,7 +3039,7 @@ class DatatableColumnPreferencesButtonComponent {
     }
 }
 DatatableColumnPreferencesButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableColumnPreferencesButtonComponent, deps: [{ token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
-DatatableColumnPreferencesButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnPreferencesButtonComponent, 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$1.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4$1.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: i4$2.TheSeamPopoverDirective, selector: "[seamPopover]", inputs: ["seamPopover", "seamPopoverBaseWidth", "seamPopoverDisabled"], exportAs: ["seamPopover"] }, { kind: "component", type: DatatableColumnPreferencesComponent, selector: "seam-datatable-column-preferences" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DatatableColumnPreferencesButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableColumnPreferencesButtonComponent, 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: "15.2.7", ngImport: i0, type: DatatableColumnPreferencesButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-column-preferences-button', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
@@ -2187,8 +3117,8 @@ class DatatableExportButtonComponent {
         return undefined;
     }
 }
-DatatableExportButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableExportButtonComponent, deps: [{ token: THESEAM_DATATABLE }, { token: i1$3.ToastrService }, { token: i2$1.TheSeamLoadingOverlayService }, { token: i3.DynamicValueHelperService }, { token: THESEAM_DYNAMIC_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatatableExportButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableExportButtonComponent, 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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$1.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4$1.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: i7$2.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DatatableExportButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableExportButtonComponent, deps: [{ token: THESEAM_DATATABLE }, { token: i1$3.ToastrService }, { token: i2$3.TheSeamLoadingOverlayService }, { token: i3$2.DynamicValueHelperService }, { token: THESEAM_DYNAMIC_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DatatableExportButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DatatableExportButtonComponent, 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: "15.2.7", ngImport: i0, type: DatatableExportButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-export-button', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
@@ -2196,7 +3126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         return [{ type: DatatableComponent, decorators: [{
                         type: Inject,
                         args: [THESEAM_DATATABLE]
-                    }] }, { type: i1$3.ToastrService }, { type: i2$1.TheSeamLoadingOverlayService }, { type: i3.DynamicValueHelperService }, { type: undefined, decorators: [{
+                    }] }, { type: i1$3.ToastrService }, { type: i2$3.TheSeamLoadingOverlayService }, { type: i3$2.DynamicValueHelperService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -2282,7 +3212,7 @@ class DatatableActionMenuItemDirective {
         this.click = new EventEmitter();
     }
 }
-DatatableActionMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuItemDirective, deps: [{ token: i1$4.Modal }, { token: i2$2.TheSeamDynamicComponentLoader }, { token: i3$1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DatatableActionMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DatatableActionMenuItemDirective, deps: [{ token: i1$4.Modal }, { token: i2$4.TheSeamDynamicComponentLoader }, { token: i3$3.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 DatatableActionMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: DatatableActionMenuItemDirective, 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: "15.2.7", ngImport: i0, type: DatatableActionMenuItemDirective, decorators: [{
             type: Directive,
@@ -2290,7 +3220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     selector: '[seamDatatableActionMenuItem]'
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$4.Modal }, { type: i2$2.TheSeamDynamicComponentLoader }, { type: i3$1.HttpClient, decorators: [{
+        return [{ type: i1$4.Modal }, { type: i2$4.TheSeamDynamicComponentLoader }, { type: i3$3.HttpClient, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { _listGroupItem: [{
@@ -2567,7 +3497,13 @@ TheSeamDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         DatatableMenuBarColumnLeftComponent,
         DatatableMenuBarColumnCenterComponent,
         DatatableMenuBarColumnRightComponent,
-        DatatableMenuBarTextComponent], imports: [CommonModule,
+        DatatableMenuBarTextComponent,
+        DatatableColumnFilterMenuComponent,
+        DatatableColumnFilterSearchTextComponent,
+        DatatableColumnFilterSearchNumericComponent,
+        DatatableColumnFilterSearchDateComponent,
+        DatatableColumnFilterTplDirective,
+        TheSeamDatatableColumnFilterDirective], imports: [CommonModule,
         NgxDatatableModule,
         FontAwesomeModule,
         OverlayModule,
@@ -2585,7 +3521,10 @@ TheSeamDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         TheSeamCheckboxComponent,
         TheSeamFormFieldModule,
         ReactiveFormsModule,
-        TheSeamTableCellTypeModule], exports: [DatatableComponent,
+        TheSeamTableCellTypeModule,
+        TheSeamDataFiltersModule,
+        NgSelectModule,
+        TheSeamToggleGroupModule], exports: [DatatableComponent,
         DatatableCellTplDirective,
         DatatableColumnComponent,
         DatatableActionMenuComponent,
@@ -2605,7 +3544,13 @@ TheSeamDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         DatatableMenuBarColumnLeftComponent,
         DatatableMenuBarColumnCenterComponent,
         DatatableMenuBarColumnRightComponent,
-        DatatableMenuBarTextComponent] });
+        DatatableMenuBarTextComponent,
+        DatatableColumnFilterMenuComponent,
+        DatatableColumnFilterSearchTextComponent,
+        DatatableColumnFilterSearchNumericComponent,
+        DatatableColumnFilterSearchDateComponent,
+        DatatableColumnFilterTplDirective,
+        TheSeamDatatableColumnFilterDirective] });
 TheSeamDatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamDatatableModule, providers: [
         { provide: ScrollbarHelper, useClass: TheSeamDatatableScrollbarHelperService }
     ], imports: [CommonModule,
@@ -2626,7 +3571,10 @@ TheSeamDatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         TheSeamCheckboxComponent,
         TheSeamFormFieldModule,
         ReactiveFormsModule,
-        TheSeamTableCellTypeModule] });
+        TheSeamTableCellTypeModule,
+        TheSeamDataFiltersModule,
+        NgSelectModule,
+        TheSeamToggleGroupModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamDatatableModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2653,6 +3601,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         DatatableMenuBarColumnCenterComponent,
                         DatatableMenuBarColumnRightComponent,
                         DatatableMenuBarTextComponent,
+                        DatatableColumnFilterMenuComponent,
+                        DatatableColumnFilterSearchTextComponent,
+                        DatatableColumnFilterSearchNumericComponent,
+                        DatatableColumnFilterSearchDateComponent,
+                        DatatableColumnFilterTplDirective,
+                        TheSeamDatatableColumnFilterDirective
                     ],
                     imports: [
                         CommonModule,
@@ -2673,7 +3627,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         TheSeamCheckboxComponent,
                         TheSeamFormFieldModule,
                         ReactiveFormsModule,
-                        TheSeamTableCellTypeModule
+                        TheSeamTableCellTypeModule,
+                        TheSeamDataFiltersModule,
+                        NgSelectModule,
+                        TheSeamToggleGroupModule
                     ],
                     exports: [
                         DatatableComponent,
@@ -2696,7 +3653,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         DatatableMenuBarColumnLeftComponent,
                         DatatableMenuBarColumnCenterComponent,
                         DatatableMenuBarColumnRightComponent,
-                        DatatableMenuBarTextComponent
+                        DatatableMenuBarTextComponent,
+                        DatatableColumnFilterMenuComponent,
+                        DatatableColumnFilterSearchTextComponent,
+                        DatatableColumnFilterSearchNumericComponent,
+                        DatatableColumnFilterSearchDateComponent,
+                        DatatableColumnFilterTplDirective,
+                        TheSeamDatatableColumnFilterDirective
                     ],
                     providers: [
                         { provide: ScrollbarHelper, useClass: TheSeamDatatableScrollbarHelperService }
@@ -2708,5 +3671,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CURRENT_DATATABLE_PREFERENCES_VERSION, DatatableActionMenuComponent, DatatableActionMenuItemComponent, DatatableActionMenuItemDirective, DatatableActionMenuToggleDirective, DatatableCellTplDirective, DatatableColumnChangesService, DatatableColumnComponent, DatatableColumnPreferencesButtonComponent, DatatableColumnPreferencesComponent, DatatableComponent, DatatableDataSource, DatatableExportButtonComponent, DatatableFilterDirective, DatatableFooterTplDirective, DatatableGqlDataSource, DatatableMenuBarColumnCenterComponent, DatatableMenuBarColumnLeftComponent, DatatableMenuBarColumnRightComponent, DatatableMenuBarComponent, DatatableMenuBarRowComponent, DatatableMenuBarTextComponent, DatatablePreferencesService, DatatableRowActionItemDirective, DatatableRowDetailTplDirective, EMPTY_DATATABLE_PREFERENCES, THESEAM_DATATABLE, THESEAM_DATATABLE_PREFERENCES_ACCESSOR, THESEAM_MENUBAR_ITEM_DATA, TheSeamDatatableFooterDirective, TheSeamDatatableModule, TheSeamDatatableRowDetailDirective, TheSeamDatatableScrollbarHelperService, _THESEAM_DATATABLE, _THESEAM_DATATABLE_ACCESSOR, _THESEAM_DATA_FILTER_CONTAINER, withStoredColumnInfo };
+export { CURRENT_DATATABLE_PREFERENCES_VERSION, 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, withStoredColumnInfo };
 //# sourceMappingURL=theseam-ui-common-datatable.mjs.map