@theseam/ui-common 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -3,7 +3,7 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import { coerceArray } from '@angular/cdk/coercion';
 import { DataSource, isDataSource } from '@angular/cdk/collections';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ContentChildren, ViewChild, Directive, Injectable, TemplateRef, ContentChild, Self, Inject, forwardRef, InjectionToken, Optional, isDevMode, inject, ChangeDetectorRef, ElementRef, HostListener, HostBinding, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ContentChildren, ViewChild, Directive, Injectable, TemplateRef, ContentChild, Self, Inject, forwardRef, InjectionToken, Optional, isDevMode, input, inject, ChangeDetectorRef, ElementRef, HostListener, HostBinding, NgModule } from '@angular/core';
 import { Subject, BehaviorSubject, of, startWith as startWith$1, map as map$1, switchMap as switchMap$1, combineLatest, defer, EMPTY, debounceTime, tap as tap$1, Subscription, from, isObservable } from 'rxjs';
 import { switchMap, map, startWith, auditTime, shareReplay, take, tap, distinctUntilChanged, takeUntil, concatMap, catchError } from 'rxjs/operators';
 import { faEllipsisH, faChevronDown, faChevronRight, faSpinner, faFilter, faColumns, faFileDownload } from '@fortawesome/free-solid-svg-icons';
@@ -19,36 +19,36 @@ import { TheSeamConfirmDialogModule } from '@theseam/ui-common/confirm-dialog';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i5 from '@theseam/ui-common/icon';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i3 from '@theseam/ui-common/icon';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
-import * as i4$1 from '@angular/forms';
-import { FormGroup, FormControl, FormGroupDirective, ControlContainer, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i9 from '@theseam/ui-common/table-cell-type';
+import { setColumnAlignDefaults, TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
+import * as i2$2 from '@angular/forms';
+import { FormGroup, FormControl, FormGroupDirective, ControlContainer, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import * as i1$1 from '@theseam/ui-common/services';
 import * as i7 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i2$2 from '@theseam/ui-common/shared';
-import { TheSeamSharedModule } from '@theseam/ui-common/shared';
-import * as i3$1 from '@theseam/ui-common/buttons';
+import * as i8 from '@theseam/ui-common/shared';
+import { TheSeamNgSelectExtraDirective, TheSeamAutoFocusDirective, TheSeamSharedModule } from '@theseam/ui-common/shared';
+import * as i4$2 from '@theseam/ui-common/buttons';
 import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
-import * as i11 from '@theseam/ui-common/popover';
+import * as i2$3 from '@theseam/ui-common/popover';
 import { TheSeamPopoverModule } from '@theseam/ui-common/popover';
-import * as i12 from '@theseam/ui-common/table-cell-type';
-import { TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
-import * as i3 from '@theseam/ui-common/form-field';
-import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
-import * as i5$1 from '@ng-select/ng-select';
+import * as i3$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i4$2 from '@theseam/ui-common/checkbox';
+import * as i4$1 from '@theseam/ui-common/form-field';
+import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import * as i4$3 from '@theseam/ui-common/checkbox';
 import { TheSeamCheckboxComponent } from '@theseam/ui-common/checkbox';
 import * as i3$2 from '@theseam/ui-common/dynamic';
 import { THESEAM_DYNAMIC_DATA } from '@theseam/ui-common/dynamic';
 import * as i1$2 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
-import * as i2$3 from '@theseam/ui-common/loading';
+import * as i2$4 from '@theseam/ui-common/loading';
 import { TheSeamLoadingModule } from '@theseam/ui-common/loading';
 import * as i1$3 from '@theseam/ui-common/modal';
-import * as i2$4 from '@theseam/ui-common/dynamic-component-loader';
+import * as i2$5 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';
@@ -77,16 +77,16 @@ class DatatableActionMenuItemComponent {
     subMenu;
     // eslint-disable-next-line @angular-eslint/no-output-native
     click = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableActionMenuItemComponent, isStandalone: false, selector: "seam-datatable-action-menu-item", inputs: { label: "label", href: ["attr.href", "href"], target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", routerLink: "routerLink", confirmDialog: "confirmDialog", disabled: "disabled", subMenu: "subMenu" }, outputs: { click: "click" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableActionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableActionMenuItemComponent, isStandalone: false, selector: "seam-datatable-action-menu-item", inputs: { label: "label", href: ["attr.href", "href"], target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", routerLink: "routerLink", confirmDialog: "confirmDialog", disabled: "disabled", subMenu: "subMenu" }, outputs: { click: "click" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableActionMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'seam-datatable-action-menu-item',
                     template: ``,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { label: [{
                 type: Input
@@ -162,9 +162,10 @@ class DatatableActionMenuComponent {
     }
     activateItem(event, item) {
         if (item.confirmDialog) {
-            this._confirmDialog.open(item.confirmDialog.message, item.confirmDialog.alert)
+            this._confirmDialog
+                .open(item.confirmDialog.message, item.confirmDialog.alert)
                 .afterClosed()
-                .subscribe(v => {
+                .subscribe((v) => {
                 if (v === 'confirm') {
                     item.click.emit(event);
                     if (item.href) {
@@ -197,7 +198,9 @@ class DatatableActionMenuComponent {
                         if (item.state) {
                             extras.state = item.state;
                         }
-                        const commands = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];
+                        const commands = Array.isArray(item.routerLink)
+                            ? item.routerLink
+                            : [item.routerLink];
                         this._router.navigate(commands, extras);
                     }
                 }
@@ -207,15 +210,15 @@ class DatatableActionMenuComponent {
             item.click.emit(event);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuComponent, deps: [{ token: i1.SeamConfirmDialogService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableActionMenuComponent, isStandalone: false, selector: "seam-datatable-action-menu", inputs: { isSubMenu: "isSubMenu" }, queries: [{ propertyName: "items", predicate: DatatableActionMenuItemComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true, static: true }], exportAs: ["seamDatatableActionMenu"], ngImport: i0, template: "<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n\n  <ng-container *ngFor=\"let item of items\">\n    <ng-container *ngIf=\"(item.routerLink || item.href) && !item.confirmDialog; else noRouterLink\">\n      <a *ngIf=\"item.href; else noHref\"\n        seamMenuItem\n        class=\"list-group-item list-group-item-action py-1\"\n        [disabled]=\"item.disabled\"\n        [attr.href]=\"item.href\"\n        [target]=\"item.target\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a seamMenuItem\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [queryParams]=\"item.queryParams\"\n          [fragment]=\"$any(item.fragment)\"\n          [queryParamsHandling]=\"item.queryParamsHandling\"\n          [preserveFragment]=\"$any(item.preserveFragment)\"\n          [skipLocationChange]=\"$any(item.skipLocationChange)\"\n          [replaceUrl]=\"$any(item.replaceUrl)\"\n          [state]=\"$any(item.state)\"\n          [routerLink]=\"item.routerLink\"\n          [target]=\"$any(item.target)\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </a>\n      </ng-template>\n    </ng-container>\n    <ng-template #noRouterLink>\n      <ng-container *ngIf=\"!!item.subMenu; else noSubMenu\">\n        <button seamMenuItem\n          type=\"button\"\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [seamMenuToggle]=\"item.subMenu.menu\"\n          [seamMenuTogglePositionsOffsetY]=\"-3\">\n          {{ item.label }}\n        </button>\n      </ng-container>\n      <ng-template  #noSubMenu>\n        <button seamMenuItem\n          type=\"button\"\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </button>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n</seam-menu>\n\n<ng-container *ngIf=\"!isSubMenu && items?.length\">\n  <button type=\"button\" class=\"datatable-action-button btn\"\n    [seamMenuToggle]=\"menu\"\n    [positions]=\"_actionMenuPositions || []\"\n    title=\"Row Actions\">\n    <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n  </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i5.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableActionMenuComponent, deps: [{ token: i1.SeamConfirmDialogService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableActionMenuComponent, isStandalone: false, selector: "seam-datatable-action-menu", inputs: { isSubMenu: "isSubMenu" }, queries: [{ propertyName: "items", predicate: DatatableActionMenuItemComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true, static: true }], exportAs: ["seamDatatableActionMenu"], ngImport: i0, template: "<seam-menu\n  #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\n      *ngIf=\"\n        (item.routerLink || item.href) && !item.confirmDialog;\n        else noRouterLink\n      \"\n    >\n      <a\n        *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      >\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a\n          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        >\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\n          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        >\n          {{ item.label }}\n        </button>\n      </ng-container>\n      <ng-template #noSubMenu>\n        <button\n          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        >\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\n    type=\"button\"\n    class=\"datatable-action-button btn\"\n    [seamMenuToggle]=\"menu\"\n    [positions]=\"_actionMenuPositions || []\"\n    title=\"Row Actions\"\n  >\n    <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n  </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }] });
 }
 __decorate([
     InputBoolean()
 ], DatatableActionMenuComponent.prototype, "isSubMenu", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableActionMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-datatable-action-menu', exportAs: 'seamDatatableActionMenu', standalone: false, template: "<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n\n  <ng-container *ngFor=\"let item of items\">\n    <ng-container *ngIf=\"(item.routerLink || item.href) && !item.confirmDialog; else noRouterLink\">\n      <a *ngIf=\"item.href; else noHref\"\n        seamMenuItem\n        class=\"list-group-item list-group-item-action py-1\"\n        [disabled]=\"item.disabled\"\n        [attr.href]=\"item.href\"\n        [target]=\"item.target\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a seamMenuItem\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [queryParams]=\"item.queryParams\"\n          [fragment]=\"$any(item.fragment)\"\n          [queryParamsHandling]=\"item.queryParamsHandling\"\n          [preserveFragment]=\"$any(item.preserveFragment)\"\n          [skipLocationChange]=\"$any(item.skipLocationChange)\"\n          [replaceUrl]=\"$any(item.replaceUrl)\"\n          [state]=\"$any(item.state)\"\n          [routerLink]=\"item.routerLink\"\n          [target]=\"$any(item.target)\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </a>\n      </ng-template>\n    </ng-container>\n    <ng-template #noRouterLink>\n      <ng-container *ngIf=\"!!item.subMenu; else noSubMenu\">\n        <button seamMenuItem\n          type=\"button\"\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [seamMenuToggle]=\"item.subMenu.menu\"\n          [seamMenuTogglePositionsOffsetY]=\"-3\">\n          {{ item.label }}\n        </button>\n      </ng-container>\n      <ng-template  #noSubMenu>\n        <button seamMenuItem\n          type=\"button\"\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </button>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n</seam-menu>\n\n<ng-container *ngIf=\"!isSubMenu && items?.length\">\n  <button type=\"button\" class=\"datatable-action-button btn\"\n    [seamMenuToggle]=\"menu\"\n    [positions]=\"_actionMenuPositions || []\"\n    title=\"Row Actions\">\n    <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n  </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
+            args: [{ selector: 'seam-datatable-action-menu', exportAs: 'seamDatatableActionMenu', standalone: false, template: "<seam-menu\n  #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\n      *ngIf=\"\n        (item.routerLink || item.href) && !item.confirmDialog;\n        else noRouterLink\n      \"\n    >\n      <a\n        *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      >\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a\n          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        >\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\n          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        >\n          {{ item.label }}\n        </button>\n      </ng-container>\n      <ng-template #noSubMenu>\n        <button\n          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        >\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\n    type=\"button\"\n    class=\"datatable-action-button btn\"\n    [seamMenuToggle]=\"menu\"\n    [positions]=\"_actionMenuPositions || []\"\n    title=\"Row Actions\"\n  >\n    <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n  </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
         }], ctorParameters: () => [{ type: i1.SeamConfirmDialogService }, { type: i2.Router }], propDecorators: { menu: [{
                 type: ViewChild,
                 args: [MenuComponent, { static: true }]
@@ -231,14 +234,14 @@ class DatatableCellTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableCellTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableCellTplDirective, isStandalone: false, selector: "[seamDatatableCellTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableCellTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: DatatableCellTplDirective, isStandalone: false, selector: "[seamDatatableCellTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableCellTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableCellTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDatatableCellTpl]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -250,10 +253,10 @@ class DatatableColumnChangesService {
     onInputChange() {
         this.columnInputChanges.next(undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnChangesService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnChangesService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnChangesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnChangesService, decorators: [{
             type: Injectable
         }] });
 
@@ -285,6 +288,9 @@ class DatatableColumnComponent {
     summaryFunc;
     summaryTemplate;
     hidden;
+    align;
+    alignHeader;
+    alignCell;
     _isFirstChange = true;
     cellTplDirective;
     // eslint-disable-next-line @angular-eslint/no-input-rename
@@ -307,6 +313,7 @@ class DatatableColumnComponent {
     // get treeToggleTemplate(): TemplateRef<any> {
     //   return this._treeToggleTemplateInput || this._treeToggleTemplateQuery;
     // }
+    __propsChanged = [];
     constructor(_columnChangesService) {
         this._columnChangesService = _columnChangesService;
     }
@@ -317,6 +324,13 @@ class DatatableColumnComponent {
         else {
             this._columnChangesService.onInputChange();
         }
+        for (const propName in changes) {
+            if (Object.prototype.hasOwnProperty.call(changes, propName)) {
+                if (!this.__propsChanged.includes(propName)) {
+                    this.__propsChanged.push(propName);
+                }
+            }
+        }
     }
     getCellDirective() {
         if (this.cellTplDirective) {
@@ -324,12 +338,12 @@ class DatatableColumnComponent {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnComponent, deps: [{ token: DatatableColumnChangesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnComponent, isStandalone: false, selector: "seam-datatable-column", inputs: { name: "name", prop: "prop", flexGrow: "flexGrow", minWidth: "minWidth", maxWidth: "maxWidth", width: "width", resizeable: "resizeable", sortable: "sortable", draggable: "draggable", canAutoResize: "canAutoResize", comparator: "comparator", headerTemplate: "headerTemplate", checkboxable: "checkboxable", headerCheckboxable: "headerCheckboxable", headerClass: "headerClass", cellClass: "cellClass", frozenLeft: "frozenLeft", frozenRight: "frozenRight", pipe: "pipe", isTreeColumn: "isTreeColumn", treeLevelIndent: "treeLevelIndent", summaryFunc: "summaryFunc", summaryTemplate: "summaryTemplate", hidden: "hidden", _cellTemplateInput: ["cellTemplate", "_cellTemplateInput"] }, queries: [{ propertyName: "cellTplDirective", first: true, predicate: DatatableCellTplDirective, descendants: true, static: true }, { propertyName: "_cellTemplateQuery", first: true, predicate: DatatableCellTplDirective, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<p>\n  datatable-column works!\n</p>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnComponent, deps: [{ token: DatatableColumnChangesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableColumnComponent, isStandalone: false, selector: "seam-datatable-column", inputs: { name: "name", prop: "prop", flexGrow: "flexGrow", minWidth: "minWidth", maxWidth: "maxWidth", width: "width", resizeable: "resizeable", sortable: "sortable", draggable: "draggable", canAutoResize: "canAutoResize", comparator: "comparator", headerTemplate: "headerTemplate", checkboxable: "checkboxable", headerCheckboxable: "headerCheckboxable", headerClass: "headerClass", cellClass: "cellClass", frozenLeft: "frozenLeft", frozenRight: "frozenRight", pipe: "pipe", isTreeColumn: "isTreeColumn", treeLevelIndent: "treeLevelIndent", summaryFunc: "summaryFunc", summaryTemplate: "summaryTemplate", hidden: "hidden", align: "align", alignHeader: "alignHeader", alignCell: "alignCell", _cellTemplateInput: ["cellTemplate", "_cellTemplateInput"] }, queries: [{ propertyName: "cellTplDirective", first: true, predicate: DatatableCellTplDirective, descendants: true, static: true }, { propertyName: "_cellTemplateQuery", first: true, predicate: DatatableCellTplDirective, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<p>datatable-column works!</p>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-datatable-column', standalone: false, template: "<p>\n  datatable-column works!\n</p>\n" }]
+            args: [{ selector: 'seam-datatable-column', standalone: false, template: "<p>datatable-column works!</p>\n" }]
         }], ctorParameters: () => [{ type: DatatableColumnChangesService }], propDecorators: { name: [{
                 type: Input
             }], prop: [{
@@ -378,6 +392,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], hidden: [{
                 type: Input
+            }], align: [{
+                type: Input
+            }], alignHeader: [{
+                type: Input
+            }], alignCell: [{
+                type: Input
             }], cellTplDirective: [{
                 type: ContentChild,
                 args: [DatatableCellTplDirective, { static: true }]
@@ -388,20 +408,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: ContentChild,
                 args: [DatatableCellTplDirective, { read: TemplateRef, static: true }]
             }] } });
+/**
+ * Check if a column is bound to a property.
+ *
+ * This is not guaranteed to be 100% accurate in all cases, but Angular seems
+ * to now define properties on the instance for all inputs. So, just relying
+ * on defined properties determine if bound will not work. The workaround is
+ * to track changes in `ngOnChanges` and use that to determine if a property
+ * is bound.
+ *
+ * NOTE: This is not an instance method, because the way we are handling the
+ * instance was causing the method to not be available where needed.
+ *
+ * @param column the column to check
+ * @param propName name of an input property
+ * @returns true if the property is bound, false otherwise
+ */
+function isColumnBoundToProp(column, propName) {
+    return column.__propsChanged.includes(propName);
+}
 
 class DatatableFooterTplDirective {
     template;
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableFooterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableFooterTplDirective, isStandalone: false, selector: "[seamDatatableFooterTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableFooterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: DatatableFooterTplDirective, isStandalone: false, selector: "[seamDatatableFooterTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableFooterTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableFooterTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDatatableFooterTpl]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -412,22 +451,25 @@ class TheSeamDatatableFooterDirective {
     get template() {
         return this._templateInput || this._templateQuery;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamDatatableFooterDirective, isStandalone: false, selector: "seam-datatable-footer", inputs: { _templateInput: ["template", "_templateInput"] }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableFooterTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamDatatableFooterDirective, isStandalone: false, selector: "seam-datatable-footer", inputs: { _templateInput: ["template", "_templateInput"] }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableFooterTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'seam-datatable-footer',
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { _templateInput: [{
                 type: Input,
                 args: ['template']
             }], _templateQuery: [{
                 type: ContentChild,
-                args: [DatatableFooterTplDirective, { read: TemplateRef, static: true }]
+                args: [DatatableFooterTplDirective, {
+                        read: TemplateRef,
+                        static: true,
+                    }]
             }] } });
 
 class DatatableFilterDirective {
@@ -440,14 +482,14 @@ class DatatableFilterDirective {
     get filter() {
         return this._filter;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableFilterDirective, deps: [{ token: THESEAM_DATA_FILTER, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableFilterDirective, isStandalone: false, selector: "[seamDatatableFilter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableFilterDirective, deps: [{ token: THESEAM_DATA_FILTER, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: DatatableFilterDirective, isStandalone: false, selector: "[seamDatatableFilter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDatatableFilter]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Self
@@ -458,8 +500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 const _THESEAM_DATA_FILTER_CONTAINER = {
     provide: THESEAM_DATA_FILTER_CONTAINER,
-    // tslint:disable-next-line:no-use-before-declare
-    useExisting: forwardRef(() => DatatableMenuBarComponent)
+    useExisting: forwardRef(() => DatatableMenuBarComponent),
 };
 class DatatableMenuBarComponent {
     get filterDirectives() {
@@ -474,10 +515,9 @@ class DatatableMenuBarComponent {
     filtersChanged = new EventEmitter();
     filters() {
         const fDirectives = this._filterDirectives
-            ? this._filterDirectives.map(f => f.filter).filter(notNullOrUndefined)
+            ? this._filterDirectives.map((f) => f.filter).filter(notNullOrUndefined)
             : [];
-        const fArr = this._filtersArr
-            .filter(f => fDirectives.findIndex(fd => fd.uid === f.uid) === -1);
+        const fArr = this._filtersArr.filter((f) => fDirectives.findIndex((fd) => fd.uid === f.uid) === -1);
         return [...fArr, ...fDirectives];
     }
     addFilter(dataFilter) {
@@ -485,13 +525,13 @@ class DatatableMenuBarComponent {
         this.filtersChanged.emit(this.filters());
     }
     removeFilter(dataFilter) {
-        this._filtersArr = this._filtersArr.filter(f => f !== dataFilter);
+        this._filtersArr = this._filtersArr.filter((f) => f !== dataFilter);
         this.filtersChanged.emit(this.filters());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarComponent, isStandalone: false, selector: "seam-datatable-menu-bar", providers: [_THESEAM_DATA_FILTER_CONTAINER], queries: [{ propertyName: "filterDirectives", predicate: DatatableFilterDirective }], ngImport: i0, template: "<div class=\"bg-light border rounded p-2\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableMenuBarComponent, isStandalone: false, selector: "seam-datatable-menu-bar", providers: [_THESEAM_DATA_FILTER_CONTAINER], queries: [{ propertyName: "filterDirectives", predicate: DatatableFilterDirective }], ngImport: i0, template: "<div class=\"bg-light border rounded p-2\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-menu-bar', providers: [_THESEAM_DATA_FILTER_CONTAINER], standalone: false, template: "<div class=\"bg-light border rounded p-2\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { filterDirectives: [{
@@ -504,14 +544,14 @@ class DatatableRowDetailTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableRowDetailTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableRowDetailTplDirective, isStandalone: false, selector: "[seamDatatableRowDetailTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableRowDetailTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: DatatableRowDetailTplDirective, isStandalone: false, selector: "[seamDatatableRowDetailTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableRowDetailTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableRowDetailTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDatatableRowDetailTpl]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -531,6 +571,7 @@ class TheSeamDatatableRowDetailDirective {
      * Row detail row visbility was toggled.
      */
     // NOTE: This will trigger from the internal ngx-datatable toggle event.
+    // eslint-disable-next-line @angular-eslint/no-output-native
     toggle = new EventEmitter();
     /**
      * Internal use for wrapper only.
@@ -548,7 +589,7 @@ class TheSeamDatatableRowDetailDirective {
     toggleExpandRow(row) {
         this._toggle.emit({
             type: 'row',
-            value: row
+            value: row,
         });
     }
     /**
@@ -557,7 +598,7 @@ class TheSeamDatatableRowDetailDirective {
     expandAllRows() {
         this._toggle.emit({
             type: 'all',
-            value: true
+            value: true,
         });
     }
     /**
@@ -566,18 +607,18 @@ class TheSeamDatatableRowDetailDirective {
     collapseAllRows() {
         this._toggle.emit({
             type: 'all',
-            value: false
+            value: false,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableRowDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamDatatableRowDetailDirective, isStandalone: false, selector: "seam-datatable-row-detail", inputs: { rowHeight: "rowHeight", _templateInput: ["template", "_templateInput"] }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableRowDetailTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableRowDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamDatatableRowDetailDirective, isStandalone: false, selector: "seam-datatable-row-detail", inputs: { rowHeight: "rowHeight", _templateInput: ["template", "_templateInput"] }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableRowDetailTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableRowDetailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableRowDetailDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'seam-datatable-row-detail',
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { rowHeight: [{
                 type: Input
@@ -586,7 +627,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['template']
             }], _templateQuery: [{
                 type: ContentChild,
-                args: [DatatableRowDetailTplDirective, { read: TemplateRef, static: true }]
+                args: [DatatableRowDetailTplDirective, {
+                        read: TemplateRef,
+                        static: true,
+                    }]
             }], toggle: [{
                 type: Output
             }] } });
@@ -596,14 +640,14 @@ class DatatableRowActionItemDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableRowActionItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableRowActionItemDirective, isStandalone: false, selector: "[seamDatatableRowActionItem]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableRowActionItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: DatatableRowActionItemDirective, isStandalone: false, selector: "[seamDatatableRowActionItem]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableRowActionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableRowActionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDatatableRowActionItem]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -614,25 +658,25 @@ class DatatableDataSource extends DataSource {
     page$;
     constructor() {
         super();
-        this.sorts$ = this._datatableSubject.pipe(switchMap(_datatable => {
+        this.sorts$ = this._datatableSubject.pipe(switchMap((_datatable) => {
             if (!_datatable) {
                 return of([]);
             }
-            return _datatable.sort.pipe(map(v => v.sorts), startWith(_datatable.sorts));
+            return _datatable.sort.pipe(map((v) => v.sorts), startWith(_datatable.sorts));
         }));
-        this.filterStates$ = this._datatableSubject.pipe(switchMap(_datatable => {
+        this.filterStates$ = this._datatableSubject.pipe(switchMap((_datatable) => {
             if (!_datatable) {
                 return of([]);
             }
             return _datatable.filterStates;
         }));
-        this.page$ = this._datatableSubject.pipe(switchMap(_datatable => {
+        this.page$ = this._datatableSubject.pipe(switchMap((_datatable) => {
             if (!_datatable) {
                 return of({
                     offset: 0,
                     pageSize: 0,
                     limit: undefined,
-                    count: 0
+                    count: 0,
                 });
             }
             return _datatable.page.pipe(startWith(_datatable.pageInfo));
@@ -695,6 +739,7 @@ function setColumnDefaults(columns) {
         if (!Object.prototype.hasOwnProperty.call(column, 'hidden')) {
             column.hidden = false;
         }
+        setColumnAlignDefaults(column);
     }
     setColumnDefaults$1(columns);
 }
@@ -731,7 +776,7 @@ const THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_TYPES = [
     'blank',
     'not-blank',
     'between',
-    'not-between'
+    'not-between',
 ];
 const THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES = [
     'lt',
@@ -742,7 +787,7 @@ const THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES = [
 ];
 const THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES = [
     'between',
-    'not-between'
+    'not-between',
 ];
 const THESEAM_COLUMNS_DATA_FILTER_DATE_SELECT_SEARCH_TYPES = [
     'blank',
@@ -758,7 +803,7 @@ const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_TYPES = [
     'blank',
     'not-blank',
     'between',
-    'not-between'
+    'not-between',
 ];
 const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES = [
     'gt',
@@ -769,7 +814,7 @@ const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES = [
 ];
 const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES = [
     'between',
-    'not-between'
+    'not-between',
 ];
 const THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SELECT_SEARCH_TYPES = [
     'blank',
@@ -782,7 +827,7 @@ const THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_TYPES = [
     'eq',
     'neq',
     'blank',
-    'not-blank'
+    'not-blank',
 ];
 const THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES = [
     'contains',
@@ -792,7 +837,7 @@ const THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES = [
 ];
 const THESEAM_COLUMNS_DATA_FILTER_TEXT_SELECT_SEARCH_TYPES = [
     'blank',
-    'not-blank'
+    'not-blank',
 ];
 
 class SearchDateColumnsDataFilter extends ColumnsDataFilter {
@@ -801,7 +846,7 @@ class SearchDateColumnsDataFilter extends ColumnsDataFilter {
     form;
     filterStateChanges;
     options;
-    _updateFilterValue = new Subject;
+    _updateFilterValue = new Subject();
     constructor(prop, initialValue, column) {
         super(prop, initialValue, column);
         this.form = new FormGroup({
@@ -813,7 +858,7 @@ class SearchDateColumnsDataFilter extends ColumnsDataFilter {
         this.uid = `${this.name}--${prop}`;
         this.filterStateChanges = this._updateFilterValue.pipe(startWith$1(undefined), map$1(() => this.filterState()));
         this.options = {
-            dateType: this.column.filterOptions?.dateType || 'date'
+            dateType: this.column.filterOptions?.dateType || 'date',
         };
     }
     dataFilter(data, filterValue, options) {
@@ -823,23 +868,28 @@ class SearchDateColumnsDataFilter extends ColumnsDataFilter {
         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());
+        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)) {
+        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))) {
+        else if (THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES.includes(comparator) &&
+            (this._isInvalidDate(fromText) || this._isInvalidDate(toText))) {
             return true;
         }
         return false;
     }
     _dateSearchDataFilter(prop, data, text, fromText, toText, comparator) {
         if (!data || data.length <= 0 || isNullOrUndefined(comparator)) {
+            // eslint-disable-next-line no-console
             console.warn('No filter applied - invalid options.');
             return data;
         }
         if (this._isInvalidSearchTerm(text, fromText, toText, comparator)) {
+            // eslint-disable-next-line no-console
             console.warn('No filter applied - invalid search terms.');
             return data;
         }
@@ -847,17 +897,25 @@ class SearchDateColumnsDataFilter extends ColumnsDataFilter {
         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]}`)) ||
+        return data.filter((item) => {
+            const 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()))) {
+                (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;
@@ -872,8 +930,8 @@ class SearchDateColumnsDataFilter extends ColumnsDataFilter {
             state: {
                 prop: this.prop,
                 formValue: this.form.value,
-                options: this.options
-            }
+                options: this.options,
+            },
         };
     }
     applyFilter() {
@@ -884,7 +942,7 @@ class SearchDateColumnsDataFilter extends ColumnsDataFilter {
             searchType: 'eq',
             searchText: null,
             fromText: null,
-            toText: null
+            toText: null,
         });
         this._updateFilterValue.next();
     }
@@ -896,10 +954,13 @@ class SearchDateColumnsDataFilter extends ColumnsDataFilter {
         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)) {
+        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)) {
+        else if (THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES.includes(formValue.searchType) &&
+            notNullOrUndefinedOrEmpty(formValue.fromText) &&
+            notNullOrUndefinedOrEmpty(formValue.toText)) {
             return false;
         }
         return true;
@@ -912,7 +973,7 @@ class SearchNumericColumnsDataFilter extends ColumnsDataFilter {
     form;
     filterStateChanges;
     options;
-    _updateFilterValue = new Subject;
+    _updateFilterValue = new Subject();
     constructor(prop, initialValue, column) {
         super(prop, initialValue, column);
         this.form = new FormGroup({
@@ -931,37 +992,52 @@ class SearchNumericColumnsDataFilter extends ColumnsDataFilter {
         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)) {
+        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)) {
+        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)) {
+            // eslint-disable-next-line no-console
             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;
+        const toTextNumeric = notNullOrUndefinedOrEmpty(toText)
+            ? parseFloat(toText)
+            : NaN;
+        const fromTextNumeric = notNullOrUndefinedOrEmpty(fromText)
+            ? parseFloat(fromText)
+            : NaN;
         if (this._isInvalidSearchTerm(textNumeric, fromTextNumeric, toTextNumeric, comparator)) {
+            // eslint-disable-next-line no-console
             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]}`)) ||
+        return data.filter((item) => {
+            const 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))) {
+                (comparator === 'between' &&
+                    propNumeric >= fromTextNumeric &&
+                    propNumeric <= toTextNumeric) ||
+                (comparator === 'not-between' &&
+                    !(propNumeric >= fromTextNumeric && propNumeric <= toTextNumeric))) {
                 return true;
             }
             return false;
@@ -975,8 +1051,8 @@ class SearchNumericColumnsDataFilter extends ColumnsDataFilter {
             name: this.name,
             state: {
                 prop: this.prop,
-                formValue: this.form.value
-            }
+                formValue: this.form.value,
+            },
         };
     }
     applyFilter() {
@@ -987,7 +1063,7 @@ class SearchNumericColumnsDataFilter extends ColumnsDataFilter {
             searchType: 'eq',
             searchText: null,
             fromText: null,
-            toText: null
+            toText: null,
         });
         this._updateFilterValue.next();
     }
@@ -999,10 +1075,13 @@ class SearchNumericColumnsDataFilter extends ColumnsDataFilter {
         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)) {
+        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)) {
+        else if (THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES.includes(formValue.searchType) &&
+            notNullOrUndefinedOrEmpty(formValue.fromText) &&
+            notNullOrUndefinedOrEmpty(formValue.toText)) {
             return false;
         }
         return true;
@@ -1015,11 +1094,13 @@ class SearchTextColumnsDataFilter extends ColumnsDataFilter {
     form;
     filterStateChanges;
     options;
-    _updateFilterValue = new Subject;
+    _updateFilterValue = new Subject();
     constructor(prop, initialValue, column) {
         super(prop, initialValue, column);
         this.form = new FormGroup({
-            searchType: new FormControl(notNullOrUndefined(initialValue) ? initialValue.searchType : 'contains'),
+            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),
         });
@@ -1036,7 +1117,7 @@ class SearchTextColumnsDataFilter extends ColumnsDataFilter {
         if (!data || data.length < 0 || isNullOrUndefined(comparator)) {
             return data;
         }
-        return data.filter(item => {
+        return data.filter((item) => {
             let value1 = `${notNullOrUndefined(item[prop]) ? item[prop] : ''}`;
             let value2 = text || '';
             // if (!options.caseSensitive) {
@@ -1065,7 +1146,7 @@ class SearchTextColumnsDataFilter extends ColumnsDataFilter {
             state: {
                 prop: this.prop,
                 formValue: this.form.value,
-            }
+            },
         };
     }
     applyFilter() {
@@ -1084,7 +1165,8 @@ class SearchTextColumnsDataFilter extends ColumnsDataFilter {
         if (isNullOrUndefinedOrEmpty(formValue.searchType)) {
             return true;
         }
-        else if (THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES.includes(formValue.searchType) && notNullOrUndefinedOrEmpty(formValue.searchText)) {
+        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)) {
@@ -1095,9 +1177,18 @@ class SearchTextColumnsDataFilter extends ColumnsDataFilter {
 }
 
 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 },
+    {
+        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 : '');
@@ -1122,15 +1213,13 @@ class ColumnsFiltersService {
     _columnFilterTemplates = new BehaviorSubject([]);
     columnFilterTemplates$ = this._columnFilterTemplates.asObservable();
     _columns = new BehaviorSubject([]);
-    columnsFilters$ = this._columns.pipe(map$1(columns => columns
-        .map(col => col.$$filter)
-        .filter(notNullOrUndefined)));
-    columnActiveFilterProps$ = this.columnsFilters$.pipe(switchMap$1(filters => {
+    columnsFilters$ = this._columns.pipe(map$1((columns) => columns.map((col) => col.$$filter).filter(notNullOrUndefined)));
+    columnActiveFilterProps$ = this.columnsFilters$.pipe(switchMap$1((filters) => {
         if (!filters.length) {
             return of([]);
         }
-        return combineLatest(filters.map(f => f.filterStateChanges.pipe(map$1((filterState) => !f.isDefault() ? filterState.state.prop : null))));
-    }), map$1(props => props.filter(notNullOrUndefined)));
+        return combineLatest(filters.map((f) => f.filterStateChanges.pipe(map$1((filterState) => !f.isDefault() ? filterState.state.prop : null))));
+    }), map$1((props) => props.filter(notNullOrUndefined)));
     constructor(_customColumnsDataFilters) {
         this._customColumnsDataFilters = _customColumnsDataFilters;
     }
@@ -1148,19 +1237,19 @@ class ColumnsFiltersService {
         const filterClass = this._getColumnsDataFilterType(column);
         let filter;
         if (notNullOrUndefined(this._customColumnsDataFilters)) {
-            filter = this._customColumnsDataFilters.find(x => x.name === filterClass);
+            filter = this._customColumnsDataFilters.find((x) => x.name === filterClass);
         }
         if (isNullOrUndefined(filter)) {
-            filter = THESEAM_COLUMNS_DATA_FILTERS_DEFAULT.find(x => x.name === filterClass);
+            filter = THESEAM_COLUMNS_DATA_FILTERS_DEFAULT.find((x) => x.name === filterClass);
         }
         if (notNullOrUndefined(filter)) {
-            // eslint-disable-next-line new-cap
             return new filter.class(prop, initialValue, column);
         }
         return null;
     }
     _getColumnsDataFilterType(column) {
-        if (notNullOrUndefined(column.filterOptions) && notNullOrUndefined(column.filterOptions.filterType)) {
+        if (notNullOrUndefined(column.filterOptions) &&
+            notNullOrUndefined(column.filterOptions.filterType)) {
             return column.filterOptions.filterType;
         }
         else if (notNullOrUndefined(column.cellType)) {
@@ -1182,7 +1271,11 @@ class ColumnsFiltersService {
         if (isNullOrUndefined(column)) {
             return null;
         }
-        const prop = column.filterOptions?.filterProp || column.prop || (notNullOrUndefined(column.name) ? camelCase(column.name) : undefined);
+        const prop = column.filterOptions?.filterProp ||
+            column.prop ||
+            (notNullOrUndefined(column.name)
+                ? camelCase(column.name)
+                : undefined);
         if (isNullOrUndefined(prop)) {
             return null;
         }
@@ -1196,26 +1289,28 @@ class ColumnsFiltersService {
             return undefined;
         }
         const columns = this._columns.value;
-        const column = columns.find(col => this.getColumnFilterProp(col) === prop);
+        const column = columns.find((col) => this.getColumnFilterProp(col) === prop);
         return column ? column.$$filter : undefined;
     }
     filters() {
         return this._columns.value
-            .map(col => col.$$filter)
+            .map((col) => col.$$filter)
             .filter(notNullOrUndefined);
     }
     addFilter(filter) {
         // Filters are now managed through columns, so this method is deprecated
+        // eslint-disable-next-line no-console
         console.warn('ColumnsFiltersService.addFilter is deprecated - filters are now managed through columns');
     }
     removeFilter(filter) {
         // Filters are now managed through columns, so this method is deprecated
+        // eslint-disable-next-line no-console
         console.warn('ColumnsFiltersService.removeFilter is deprecated - filters are now managed through columns');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsFiltersService, deps: [{ token: THESEAM_COLUMNS_DATA_FILTER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsFiltersService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsFiltersService, deps: [{ token: THESEAM_COLUMNS_DATA_FILTER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsFiltersService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsFiltersService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsFiltersService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -1257,14 +1352,18 @@ class ColumnsManagerService {
         this._columnChangesService = _columnChangesService;
         this._columnsFilters = _columnsFilters;
         const templateColumns$ = this._columnChangesService.columnInputChanges$.pipe(startWith(undefined), switchMap(() => {
-            return this._templateColumns.asObservable().pipe(map(translateTemplateColumns));
+            return this._templateColumns
+                .asObservable()
+                .pipe(map(translateTemplateColumns));
         }));
         this.columns$ = defer(() => {
             let isFirst = true;
             return combineLatest([
                 this._inputColumns.asObservable(),
                 templateColumns$,
-                this._updateColumns.asObservable().pipe(auditTime(0), startWith(undefined))
+                this._updateColumns
+                    .asObservable()
+                    .pipe(auditTime(0), startWith(undefined)),
             ]).pipe(switchMap(([inputColumns, templateColumns]) => {
                 const cols = this._mergeColumns(inputColumns, templateColumns);
                 const hasColumnsChanged = this._hasColumnsChanged(cols);
@@ -1370,7 +1469,7 @@ class ColumnsManagerService {
             if (notNullOrUndefined(inpColDif)) {
                 this._updateColDif(inpColDif, internalCol, inpCol);
             }
-            const tplCol = this._findColumnByProp(prop, templateColumns);
+            const tplCol = this._getTemplateColumnByProp(prop, templateColumns);
             if (tplCol !== undefined) {
                 const tplColDif = this._getColDif(tplCol, ColumnsTypes.Template);
                 if (notNullOrUndefined(tplColDif)) {
@@ -1385,7 +1484,7 @@ class ColumnsManagerService {
                 // TODO: Rethink this, because I don't know if this is correct.
                 ...(tplCol || {}),
                 // Store filter directly on column object
-                $$filter: existingFilter || this._createColumnFilter(inpCol)
+                $$filter: existingFilter || this._createColumnFilter(inpCol),
             };
             if (this._shouldAddTreeToggleColumn(_col)) {
                 _col.treeToggleTemplate = this._treeToggleTpl;
@@ -1424,16 +1523,33 @@ class ColumnsManagerService {
         if (internalCols === undefined) {
             return undefined;
         }
-        return internalCols.find(c => getColumnProp(c) === prop);
+        return internalCols.find((c) => getColumnProp(c) === prop);
     }
     _findColumnByProp(prop, columns) {
-        return columns.find(c => getColumnProp(c) === prop);
+        return columns.find((c) => getColumnProp(c) === prop);
+    }
+    _getTemplateColumnByProp(prop, columns) {
+        const tplCol = this._findColumnByProp(prop, columns);
+        if (tplCol === undefined) {
+            return undefined;
+        }
+        const _tplCol = {};
+        for (const key in tplCol) {
+            if (Object.prototype.hasOwnProperty.call(tplCol, key) &&
+                isColumnBoundToProp(tplCol, key)) {
+                _tplCol[key] = tplCol[key];
+            }
+        }
+        return _tplCol;
     }
     _getDifMapForColumnsType(columnsType) {
         switch (columnsType) {
-            case ColumnsTypes.Input: return this._inpColDiffersMap;
-            case ColumnsTypes.Template: return this._tplColDiffersMap;
-            case ColumnsTypes.Result: return this._resultColDiffersMap;
+            case ColumnsTypes.Input:
+                return this._inpColDiffersMap;
+            case ColumnsTypes.Template:
+                return this._tplColDiffersMap;
+            case ColumnsTypes.Result:
+                return this._resultColDiffersMap;
         }
     }
     _getColumnDiffer(prop, colsType) {
@@ -1458,20 +1574,21 @@ class ColumnsManagerService {
         return this._getColumnDiffer(prop, colsType).diff(col);
     }
     _updateColDif(colDif, internalColumn, col) {
-        colDif.forEachRemovedItem(r => {
-            if (internalColumn && Object.prototype.hasOwnProperty.call(internalColumn, r.key)) {
+        colDif.forEachRemovedItem((r) => {
+            if (internalColumn &&
+                Object.prototype.hasOwnProperty.call(internalColumn, r.key)) {
                 const k = r.key;
                 delete internalColumn[k];
             }
         });
-        colDif.forEachAddedItem(r => col[r.key] = r.currentValue);
-        colDif.forEachChangedItem(r => col[r.key] = r.currentValue);
+        colDif.forEachAddedItem((r) => (col[r.key] = r.currentValue));
+        colDif.forEachChangedItem((r) => (col[r.key] = r.currentValue));
     }
     _hasAddedOrRemovedColumns(columns) {
         if (!this._colPropsDiffer) {
             this._colPropsDiffer = this._differs.find([]).create();
         }
-        const props = columns.map(c => getColumnProp(c));
+        const props = columns.map((c) => getColumnProp(c));
         return this._colPropsDiffer.diff(props) !== null;
     }
     _hasColumnsChanged(columns) {
@@ -1504,8 +1621,10 @@ class ColumnsManagerService {
         return this._actionItemColumnPosition === 'staticRight';
     }
     _shouldAddTreeToggleColumn(column) {
-        return column.isTreeColumn !== undefined && column.isTreeColumn &&
-            (!hasProperty(column, 'treeToggleTemplate') || !notNullOrUndefined(column.treeToggleTemplate));
+        return (column.isTreeColumn !== undefined &&
+            column.isTreeColumn &&
+            (!hasProperty(column, 'treeToggleTemplate') ||
+                !notNullOrUndefined(column.treeToggleTemplate)));
     }
     _shouldAddHeaderTemplate(column) {
         return !hasProperty(column, 'headerTemplate');
@@ -1528,12 +1647,12 @@ class ColumnsManagerService {
         if (!column.filterable) {
             return undefined;
         }
-        return this._columnsFilters.createColumnDataFilter(column, null) || undefined;
+        return (this._columnsFilters.createColumnDataFilter(column, null) || undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsManagerService, deps: [{ token: i0.KeyValueDiffers }, { token: DatatableColumnChangesService }, { token: ColumnsFiltersService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsManagerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsManagerService, deps: [{ token: i0.KeyValueDiffers }, { token: DatatableColumnChangesService }, { token: ColumnsFiltersService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsManagerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: DatatableColumnChangesService }, { type: ColumnsFiltersService }] });
 
@@ -1541,11 +1660,17 @@ const THESEAM_DATATABLE_ACCESSOR = new InjectionToken('TheSeamDatatableAccessor'
 
 function removeUnusedDiffs(cols, colDiffersInp, colDiffersTpl) {
     const inpKeys = Object.keys(colDiffersInp);
-    inpKeys.filter(k => cols.findIndex(c => c.prop === k) === -1)
-        .forEach(k => { delete colDiffersInp[k]; });
+    inpKeys
+        .filter((k) => cols.findIndex((c) => c.prop === k) === -1)
+        .forEach((k) => {
+        delete colDiffersInp[k];
+    });
     const tplKeys = Object.keys(colDiffersTpl);
-    tplKeys.filter(k => cols.findIndex(c => c.prop === k) === -1)
-        .forEach(k => { delete colDiffersTpl[k]; });
+    tplKeys
+        .filter((k) => cols.findIndex((c) => c.prop === k) === -1)
+        .forEach((k) => {
+        delete colDiffersTpl[k];
+    });
 }
 
 /**
@@ -1583,7 +1708,7 @@ class ColumnsAlteration {
         return {
             id: this.id,
             type: this.type,
-            state: this.state
+            state: this.state,
         };
     }
 }
@@ -1614,7 +1739,7 @@ class HideColumnColumnsAlteration extends ColumnsAlteration {
             type: this.type,
             summary,
             details,
-            sortOrder: this._getColumnSortOrder()
+            sortOrder: this._getColumnSortOrder(),
         };
     }
     getDisplaySortOrder() {
@@ -1676,7 +1801,7 @@ class SortColumnsAlteration extends ColumnsAlteration {
             type: this.type,
             summary,
             details,
-            sortOrder: 0
+            sortOrder: 0,
         };
     }
     getDisplaySortOrder() {
@@ -1697,7 +1822,7 @@ class SortColumnsAlteration extends ColumnsAlteration {
         if (this.state.sorts.length === 0) {
             return 'No sorting';
         }
-        const sortDescriptions = this.state.sorts.map(sort => {
+        const sortDescriptions = this.state.sorts.map((sort) => {
             const direction = sort.dir === 'asc' ? '↑' : '↓';
             return `${sort.prop} ${direction}`;
         });
@@ -1744,7 +1869,7 @@ class WidthColumnsAlteration extends ColumnsAlteration {
             type: this.type,
             summary,
             details,
-            sortOrder: this._getColumnSortOrder()
+            sortOrder: this._getColumnSortOrder(),
         };
     }
     getDisplaySortOrder() {
@@ -1767,7 +1892,9 @@ class WidthColumnsAlteration extends ColumnsAlteration {
         return true;
     }
     _createWidthSummary() {
-        const widthText = notNullOrUndefined(this.state.width) ? `${this.state.width}px` : 'auto';
+        const widthText = notNullOrUndefined(this.state.width)
+            ? `${this.state.width}px`
+            : 'auto';
         return `${this.state.columnProp}: ${widthText}`;
     }
     _createWidthDetails() {
@@ -1809,13 +1936,13 @@ class ColumnsAlterationsManagerService {
         this._alterations = [...this._alterations, ...alterations];
         const changes = [
             ...removed,
-            ...alterations.map(a => {
+            ...alterations.map((a) => {
                 const record = {
                     type: 'added',
-                    alteration: a
+                    alteration: a,
                 };
                 return record;
-            })
+            }),
         ];
         if (notNullOrUndefined(options?.emitEvent) && !options?.emitEvent) {
             return changes;
@@ -1826,12 +1953,12 @@ class ColumnsAlterationsManagerService {
     remove(alterations, options) {
         // console.log('remove', alterations)
         const removed = [];
-        this._alterations = this._alterations.filter(x => {
-            const found = alterations.findIndex(y => y.id === x.id) !== -1;
+        this._alterations = this._alterations.filter((x) => {
+            const found = alterations.findIndex((y) => y.id === x.id) !== -1;
             if (found) {
                 const eventRecord = {
                     type: 'removed',
-                    alteration: x
+                    alteration: x,
                 };
                 removed.push(eventRecord);
             }
@@ -1895,7 +2022,7 @@ class ColumnsAlterationsManagerService {
         return changes;
     }
     _removeNonPersistant() {
-        const nonPersistent = this._alterations.filter(x => !x.persistent);
+        const nonPersistent = this._alterations.filter((x) => !x.persistent);
         this.remove(nonPersistent, { emitEvent: false });
     }
     _emitChanges(changes) {
@@ -1903,14 +2030,14 @@ class ColumnsAlterationsManagerService {
             return;
         }
         const event = {
-            changes
+            changes,
         };
         this._changesSubject.next(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsAlterationsManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsAlterationsManagerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsAlterationsManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsAlterationsManagerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnsAlterationsManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnsAlterationsManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1945,7 +2072,7 @@ class FilterColumnsAlteration extends ColumnsAlteration {
             searchType: operation,
             searchText: null,
             fromText: null,
-            toText: null
+            toText: null,
         };
         // Set values based on operation type
         if (this._isRangeOperation(operation)) {
@@ -1973,7 +2100,7 @@ class FilterColumnsAlteration extends ColumnsAlteration {
             type: this.type,
             summary,
             details,
-            sortOrder: this._getColumnSortOrder()
+            sortOrder: this._getColumnSortOrder(),
         };
     }
     getDisplaySortOrder() {
@@ -1984,8 +2111,14 @@ class FilterColumnsAlteration extends ColumnsAlteration {
     }
     _isValueOperation(operation) {
         const valueOperations = [
-            'contains', 'ncontains', 'eq', 'neq', // text
-            'gt', 'lt', 'gte', 'lte' // numeric/date
+            'contains',
+            'ncontains',
+            'eq',
+            'neq', // text
+            'gt',
+            'lt',
+            'gte',
+            'lte', // numeric/date
         ];
         return valueOperations.includes(operation);
     }
@@ -2006,7 +2139,8 @@ class FilterColumnsAlteration extends ColumnsAlteration {
         }
         // Validate required values for operations
         if (this._isRangeOperation(state.operation)) {
-            if (!notNullOrUndefined(state.fromValue) || !notNullOrUndefined(state.toValue)) {
+            if (!notNullOrUndefined(state.fromValue) ||
+                !notNullOrUndefined(state.toValue)) {
                 throw new Error(`Range operation '${state.operation}' requires both fromValue and toValue`);
             }
         }
@@ -2018,9 +2152,36 @@ class FilterColumnsAlteration extends ColumnsAlteration {
         return true;
     }
     _isValidOperationForFilterType(operation, filterType) {
-        const textOperations = ['contains', 'ncontains', 'eq', 'neq', 'blank', 'not-blank'];
-        const numericOperations = ['gt', 'lt', 'eq', 'gte', 'lte', 'blank', 'not-blank', 'between', 'not-between'];
-        const dateOperations = ['lt', 'lte', 'gt', 'gte', 'eq', 'blank', 'not-blank', 'between', 'not-between'];
+        const textOperations = [
+            'contains',
+            'ncontains',
+            'eq',
+            'neq',
+            'blank',
+            'not-blank',
+        ];
+        const numericOperations = [
+            'gt',
+            'lt',
+            'eq',
+            'gte',
+            'lte',
+            'blank',
+            'not-blank',
+            'between',
+            'not-between',
+        ];
+        const dateOperations = [
+            'lt',
+            'lte',
+            'gt',
+            'gte',
+            'eq',
+            'blank',
+            'not-blank',
+            'between',
+            'not-between',
+        ];
         switch (filterType) {
             case 'text':
                 return textOperations.includes(operation);
@@ -2051,7 +2212,7 @@ class FilterColumnsAlteration extends ColumnsAlteration {
         const details = [
             `Column: ${columnProp}`,
             `Type: ${filterType}`,
-            `Operation: ${this._getOperationDisplayName(operation)}`
+            `Operation: ${this._getOperationDisplayName(operation)}`,
         ];
         if (this._isRangeOperation(operation)) {
             details.push(`From: ${fromValue}`);
@@ -2064,31 +2225,31 @@ class FilterColumnsAlteration extends ColumnsAlteration {
     }
     _getOperationSymbol(operation) {
         const symbols = {
-            'contains': 'contains',
-            'ncontains': 'does not contain',
-            'eq': '=',
-            'neq': '≠',
-            'gt': '>',
-            'lt': '<',
-            'gte': '≥',
-            'lte': '≤'
+            contains: 'contains',
+            ncontains: 'does not contain',
+            eq: '=',
+            neq: '≠',
+            gt: '>',
+            lt: '<',
+            gte: '≥',
+            lte: '≤',
         };
         return symbols[operation] || operation;
     }
     _getOperationDisplayName(operation) {
         const names = {
-            'contains': 'Contains',
-            'ncontains': 'Does not contain',
-            'eq': 'Equals',
-            'neq': 'Not equals',
-            'gt': 'Greater than',
-            'lt': 'Less than',
-            'gte': 'Greater than or equal',
-            'lte': 'Less than or equal',
-            'blank': 'Is blank',
+            contains: 'Contains',
+            ncontains: 'Does not contain',
+            eq: 'Equals',
+            neq: 'Not equals',
+            gt: 'Greater than',
+            lt: 'Less than',
+            gte: 'Greater than or equal',
+            lte: 'Less than or equal',
+            blank: 'Is blank',
             'not-blank': 'Is not blank',
-            'between': 'Between',
-            'not-between': 'Not between'
+            between: 'Between',
+            'not-between': 'Not between',
         };
         return names[operation] || operation;
     }
@@ -2104,10 +2265,10 @@ class FilterColumnsAlteration extends ColumnsAlteration {
  */
 const INTERNAL_COLUMN_PROPS = [
     ACTION_MENU_COLUMN_PROP,
-    CHECKBOX_COLUMN_PROP
+    CHECKBOX_COLUMN_PROP,
 ];
 function isInternalColumn(column) {
-    return INTERNAL_COLUMN_PROPS.findIndex(p => getColumnProp(column) === p) !== -1;
+    return (INTERNAL_COLUMN_PROPS.findIndex((p) => getColumnProp(column) === p) !== -1);
 }
 
 class OrderColumnsAlteration extends ColumnsAlteration {
@@ -2134,9 +2295,9 @@ class OrderColumnsAlteration extends ColumnsAlteration {
         // to be changed.
         const internalColumns = columns
             .map((column, index) => ({ column, index }))
-            .filter(x => isInternalColumn(x.column));
+            .filter((x) => isInternalColumn(x.column));
         for (const c of stateColumns) {
-            const currentIndex = columns.findIndex(x => getColumnProp(x) === c.columnProp);
+            const currentIndex = columns.findIndex((x) => getColumnProp(x) === c.columnProp);
             if (currentIndex === c.index || currentIndex === -1) {
                 // Skip if already at correct index.
                 // Skip columns not found. It may be a column that was removed from the
@@ -2146,7 +2307,7 @@ class OrderColumnsAlteration extends ColumnsAlteration {
             arrayMoveMutable(columns, currentIndex, c.index);
         }
         for (const c of internalColumns) {
-            const currentIndex = columns.findIndex(col => col === c.column);
+            const currentIndex = columns.findIndex((col) => col === c.column);
             if (currentIndex !== -1) {
                 arrayMoveMutable(columns, currentIndex, c.index);
             }
@@ -2166,7 +2327,7 @@ class OrderColumnsAlteration extends ColumnsAlteration {
             type: this.type,
             summary,
             details,
-            sortOrder: 0
+            sortOrder: 0,
         };
     }
     getDisplaySortOrder() {
@@ -2187,10 +2348,12 @@ class OrderColumnsAlteration extends ColumnsAlteration {
         return true;
     }
     _isColumnOrderRecordValid(columnOrder) {
-        return notNullOrUndefined(columnOrder.columnProp) && notNullOrUndefined(columnOrder.index);
+        return (notNullOrUndefined(columnOrder.columnProp) &&
+            notNullOrUndefined(columnOrder.index));
     }
     _stateColumns() {
-        return this.state.columns.filter(c => {
+        return this.state.columns
+            .filter((c) => {
             if (!this._isColumnOrderRecordValid(c)) {
                 if (isDevMode()) {
                     // eslint-disable-next-line no-console
@@ -2199,7 +2362,8 @@ class OrderColumnsAlteration extends ColumnsAlteration {
                 return false;
             }
             return true;
-        }).sort((a, b) => a.index === b.index ? 0 : a.index > b.index ? 1 : -1);
+        })
+            .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1));
     }
     _createOrderSummary() {
         if (this.state.columns.length === 0) {
@@ -2213,7 +2377,7 @@ class OrderColumnsAlteration extends ColumnsAlteration {
             return ['Columns are in their default order'];
         }
         const sortedColumns = this._stateColumns();
-        return sortedColumns.map(col => `${col.columnProp}: Position ${col.index + 1}`);
+        return sortedColumns.map((col) => `${col.columnProp}: Position ${col.index + 1}`);
     }
 }
 
@@ -2257,9 +2421,14 @@ function mapColumnsAlterationsStates(states) {
     return alterations;
 }
 
-const ActionItemColumnPosition = ['frozenLeft', 'frozenRight', 'staticLeft', 'staticRight'];
+const ActionItemColumnPosition = [
+    'frozenLeft',
+    'frozenRight',
+    'staticLeft',
+    'staticRight',
+];
 function isActionItemColumnPosition(input) {
-    return ActionItemColumnPosition.indexOf(input) != -1;
+    return (ActionItemColumnPosition.indexOf(input) !== -1);
 }
 
 const THESEAM_DATATABLE_CONFIG = new InjectionToken('TheSeamDatatableConfig');
@@ -2269,14 +2438,14 @@ class DatatableColumnFilterTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterTplDirective, isStandalone: false, selector: "[seamDatatableColumnFilterTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: DatatableColumnFilterTplDirective, isStandalone: false, selector: "[seamDatatableColumnFilterTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDatatableColumnFilterTpl]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -2288,15 +2457,15 @@ class TheSeamDatatableColumnFilterDirective {
     get template() {
         return this._templateInput || this._templateQuery;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableColumnFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamDatatableColumnFilterDirective, isStandalone: false, selector: "seam-datatable-column-filter", inputs: { filterName: "filterName", _templateInput: ["template", "_templateInput"] }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableColumnFilterTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableColumnFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamDatatableColumnFilterDirective, isStandalone: false, selector: "seam-datatable-column-filter", inputs: { filterName: "filterName", _templateInput: ["template", "_templateInput"] }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableColumnFilterTplDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableColumnFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableColumnFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'seam-datatable-column-filter',
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { filterName: [{
                 type: Input
@@ -2305,13 +2474,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['template']
             }], _templateQuery: [{
                 type: ContentChild,
-                args: [DatatableColumnFilterTplDirective, { read: TemplateRef, static: true }]
+                args: [DatatableColumnFilterTplDirective, {
+                        read: TemplateRef,
+                        static: true,
+                    }]
             }] } });
 
 const CURRENT_DATATABLE_PREFERENCES_VERSION = 2;
 const EMPTY_DATATABLE_PREFERENCES = {
     version: 2,
-    alterations: []
+    alterations: [],
 };
 
 const THESEAM_DATATABLE_PREFERENCES_ACCESSOR = new InjectionToken('TheSeamDatatablePreferencesAccessor');
@@ -2343,7 +2515,9 @@ class DatatablePreferencesService {
         if (!this._prefsAccessor) {
             return of(JSON.parse(JSON.stringify(EMPTY_DATATABLE_PREFERENCES)));
         }
-        return this._preferencesManager.preferences(preferenceKey, this._prefsAccessor, EMPTY_DATATABLE_PREFERENCES).pipe(map(prefs => {
+        return this._preferencesManager
+            .preferences(preferenceKey, this._prefsAccessor, EMPTY_DATATABLE_PREFERENCES)
+            .pipe(map((prefs) => {
             if (this._isValidDatatablePreferences(prefs)) {
                 return prefs;
             }
@@ -2358,7 +2532,8 @@ class DatatablePreferencesService {
             return;
         }
         this._pending = true;
-        this.preferences(preferenceKey).pipe(map(prefs => {
+        this.preferences(preferenceKey)
+            .pipe(map((prefs) => {
             // Making the preferences immutable may not be necessary, but for now
             // this obj->str->obj will work as a naive clone.
             // const columns = JSON.parse(JSON.stringify(prefs.columns || []))
@@ -2376,13 +2551,13 @@ class DatatablePreferencesService {
             // return newPrefs
             const newPrefs = {
                 ...EMPTY_DATATABLE_PREFERENCES,
-                alterations
+                alterations,
             };
             this._pending = false;
             return newPrefs;
         }), 
         // tap(v => console.log('newPrefs', v)),
-        take(1), switchMap(newPrefs => this._prefsAccessor
+        take(1), switchMap((newPrefs) => this._prefsAccessor
             ? this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
             : of(newPrefs)), tap(() => this.refresh(preferenceKey)))
             .subscribe();
@@ -2390,13 +2565,13 @@ class DatatablePreferencesService {
     _isValidDatatablePreferences(prefs) {
         return prefs.version === CURRENT_DATATABLE_PREFERENCES_VERSION;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatablePreferencesService, deps: [{ token: i1$1.TheSeamPreferencesManagerService }, { token: THESEAM_DATATABLE_PREFERENCES_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatablePreferencesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatablePreferencesService, deps: [{ token: i1$1.TheSeamPreferencesManagerService }, { token: THESEAM_DATATABLE_PREFERENCES_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatablePreferencesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatablePreferencesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatablePreferencesService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1$1.TheSeamPreferencesManagerService }, { type: undefined, decorators: [{
                     type: Optional
@@ -2417,24 +2592,31 @@ class DatatableColumnFilterSearchTextComponent {
     filterForm;
     showTextbox$;
     ngOnInit() {
-        this.showTextbox$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(value => THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES.includes(value || '')));
+        this.showTextbox$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1((value) => THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES.includes(value || '')));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterSearchTextComponent, isStandalone: false, selector: "seam-datatable-column-filter-search-text", inputs: { filterForm: "filterForm" }, ngImport: i0, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      seamAutoFocus\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n  <ng-container *ngIf=\"showTextbox$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n    <!-- TODO: implement this? Does not work with current Seam GraphQL/SQL Server implementation. -->\n    <!-- <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <seam-checkbox seamInput formControlName=\"caseSensitive\">Case Sensitive</seam-checkbox>\n    </seam-form-field> -->\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "component", type: i3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterSearchTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableColumnFilterSearchTextComponent, isStandalone: true, 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\"\n    ></ng-select>\n  </seam-form-field>\n  <ng-container *ngIf=\"showTextbox$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input\n        seamInput\n        formControlName=\"searchText\"\n        placeholder=\"Type to search\"\n        seamAutoFocus\n      />\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "directive", type: TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
             {
                 provide: ControlContainer,
-                useExisting: FormGroupDirective
-            }
+                useExisting: FormGroupDirective,
+            },
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterSearchTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-column-filter-search-text', viewProviders: [
                         {
                             provide: ControlContainer,
-                            useExisting: FormGroupDirective
-                        }
-                    ], standalone: false, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      seamAutoFocus\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n  <ng-container *ngIf=\"showTextbox$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n    <!-- TODO: implement this? Does not work with current Seam GraphQL/SQL Server implementation. -->\n    <!-- <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <seam-checkbox seamInput formControlName=\"caseSensitive\">Case Sensitive</seam-checkbox>\n    </seam-form-field> -->\n  </ng-container>\n</ng-container>\n" }]
+                            useExisting: FormGroupDirective,
+                        },
+                    ], imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        NgSelectModule,
+                        TheSeamFormFieldModule,
+                        TheSeamNgSelectExtraDirective,
+                        TheSeamAutoFocusDirective,
+                    ], 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\"\n    ></ng-select>\n  </seam-form-field>\n  <ng-container *ngIf=\"showTextbox$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input\n        seamInput\n        formControlName=\"searchText\"\n        placeholder=\"Type to search\"\n        seamAutoFocus\n      />\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
             }] } });
@@ -2455,25 +2637,34 @@ class DatatableColumnFilterSearchNumericComponent {
     showSearchInput$;
     showRangeInputs$;
     ngOnInit() {
-        this.showSearchInput$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES.includes(searchType || '')));
-        this.showRangeInputs$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES.includes(searchType || '')));
+        this.showSearchInput$ =
+            this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1((searchType) => THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES.includes(searchType || '')));
+        this.showRangeInputs$ =
+            this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1((searchType) => THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES.includes(searchType || '')));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchNumericComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterSearchNumericComponent, isStandalone: false, selector: "seam-datatable-column-filter-search-numeric", inputs: { filterForm: "filterForm" }, ngImport: i0, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"showRangeInputs$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"fromText\" placeholder=\"Range Start\" seamAutoFocus>\n    </seam-form-field>\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"toText\" placeholder=\"Range End\">\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "component", type: i3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterSearchNumericComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableColumnFilterSearchNumericComponent, isStandalone: true, 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\"\n    ></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input\n        seamInput\n        formControlName=\"searchText\"\n        placeholder=\"Type to search\"\n        seamAutoFocus\n      />\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\n        seamInput\n        formControlName=\"fromText\"\n        placeholder=\"Range Start\"\n        seamAutoFocus\n      />\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "directive", type: TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
             {
                 provide: ControlContainer,
-                useExisting: FormGroupDirective
-            }
+                useExisting: FormGroupDirective,
+            },
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchNumericComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterSearchNumericComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-column-filter-search-numeric', viewProviders: [
                         {
                             provide: ControlContainer,
-                            useExisting: FormGroupDirective
-                        }
-                    ], standalone: false, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"showRangeInputs$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"fromText\" placeholder=\"Range Start\" seamAutoFocus>\n    </seam-form-field>\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput formControlName=\"toText\" placeholder=\"Range End\">\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n" }]
+                            useExisting: FormGroupDirective,
+                        },
+                    ], imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        NgSelectModule,
+                        TheSeamFormFieldModule,
+                        TheSeamNgSelectExtraDirective,
+                        TheSeamAutoFocusDirective,
+                    ], 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\"\n    ></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input\n        seamInput\n        formControlName=\"searchText\"\n        placeholder=\"Type to search\"\n        seamAutoFocus\n      />\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\n        seamInput\n        formControlName=\"fromText\"\n        placeholder=\"Range Start\"\n        seamAutoFocus\n      />\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
             }] } });
@@ -2499,25 +2690,34 @@ class DatatableColumnFilterSearchDateComponent {
         if (notNullOrUndefined(this.options?.dateType)) {
             this.dateFormat = this.options?.dateType;
         }
-        this.showSearchInput$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES.includes(searchType || '')));
-        this.showRangeInputs$ = this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1(searchType => THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES.includes(searchType || '')));
+        this.showSearchInput$ =
+            this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1((searchType) => THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES.includes(searchType || '')));
+        this.showRangeInputs$ =
+            this.filterForm?.controls.searchType.valueChanges.pipe(startWith$1(this.filterForm?.controls.searchType.value), map$1((searchType) => THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES.includes(searchType || '')));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterSearchDateComponent, isStandalone: false, selector: "seam-datatable-column-filter-search-date", inputs: { options: "options", filterForm: "filterForm" }, ngImport: i0, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"showRangeInputs$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"fromText\" placeholder=\"Range Start\" seamAutoFocus>\n    </seam-form-field>\n\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"toText\" placeholder=\"Range End\">\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: i2$2.TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "component", type: i3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterSearchDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableColumnFilterSearchDateComponent, isStandalone: true, 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\"\n    ></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input\n        seamInput\n        [type]=\"dateFormat\"\n        formControlName=\"searchText\"\n        placeholder=\"Type to search\"\n        seamAutoFocus\n      />\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\n        seamInput\n        [type]=\"dateFormat\"\n        formControlName=\"fromText\"\n        placeholder=\"Range Start\"\n        seamAutoFocus\n      />\n    </seam-form-field>\n\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input\n        seamInput\n        [type]=\"dateFormat\"\n        formControlName=\"toText\"\n        placeholder=\"Range End\"\n      />\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: TheSeamNgSelectExtraDirective, selector: "ng-select", exportAs: ["seamNgSelectExtra"] }, { kind: "directive", type: TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], viewProviders: [
             {
                 provide: ControlContainer,
-                useExisting: FormGroupDirective
-            }
+                useExisting: FormGroupDirective,
+            },
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterSearchDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterSearchDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-column-filter-search-date', viewProviders: [
                         {
                             provide: ControlContainer,
-                            useExisting: FormGroupDirective
-                        }
-                    ], standalone: false, template: "<ng-container *ngIf=\"filterForm\">\n  <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n    <ng-select\n      seamInput\n      formControlName=\"searchType\"\n      [clearable]=\"false\"\n      placeholder=\"Select search type\"\n      bindValue=\"value\"\n      [items]=\"searchTypes\"></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"searchText\" placeholder=\"Type to search\" seamAutoFocus>\n    </seam-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"showRangeInputs$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"fromText\" placeholder=\"Range Start\" seamAutoFocus>\n    </seam-form-field>\n\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input seamInput [type]=\"dateFormat\" formControlName=\"toText\" placeholder=\"Range End\">\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n" }]
+                            useExisting: FormGroupDirective,
+                        },
+                    ], imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        NgSelectModule,
+                        TheSeamFormFieldModule,
+                        TheSeamNgSelectExtraDirective,
+                        TheSeamAutoFocusDirective,
+                    ], 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\"\n    ></ng-select>\n  </seam-form-field>\n\n  <ng-container *ngIf=\"showSearchInput$ | async\">\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input\n        seamInput\n        [type]=\"dateFormat\"\n        formControlName=\"searchText\"\n        placeholder=\"Type to search\"\n        seamAutoFocus\n      />\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\n        seamInput\n        [type]=\"dateFormat\"\n        formControlName=\"fromText\"\n        placeholder=\"Range Start\"\n        seamAutoFocus\n      />\n    </seam-form-field>\n\n    <seam-form-field [numPaddingErrors]=\"0\" class=\"mb-2\">\n      <input\n        seamInput\n        [type]=\"dateFormat\"\n        formControlName=\"toText\"\n        placeholder=\"Range End\"\n      />\n    </seam-form-field>\n  </ng-container>\n</ng-container>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], filterForm: [{
@@ -2543,9 +2743,13 @@ class DatatableColumnFilterMenuComponent {
         if (notNullOrUndefined(this.columnFilter)) {
             this._filterForm = this.columnFilter.form;
         }
-        this.customFilterTemplate$ = this._columnsFilters.columnFilterTemplates$.pipe(map$1(templates => templates.find(t => t.filterName === this.columnFilter?.name)));
-        if (this.updateMethod === 'valueChanges' && notNullOrUndefined(this._filterForm)) {
-            this._filterForm.valueChanges.pipe(debounceTime(this.debounce || 0), tap$1(() => this.columnFilter?.applyFilter())).subscribe();
+        this.customFilterTemplate$ =
+            this._columnsFilters.columnFilterTemplates$.pipe(map$1((templates) => templates.find((t) => t.filterName === this.columnFilter?.name)));
+        if (this.updateMethod === 'valueChanges' &&
+            notNullOrUndefined(this._filterForm)) {
+            this._filterForm.valueChanges
+                .pipe(debounceTime(this.debounce || 0), tap$1(() => this.columnFilter?.applyFilter()))
+                .subscribe();
         }
     }
     submit() {
@@ -2555,15 +2759,23 @@ class DatatableColumnFilterMenuComponent {
     clearFilter() {
         this.columnFilter?.clearFilter();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterMenuComponent, deps: [{ token: ColumnsFiltersService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnFilterMenuComponent, isStandalone: false, selector: "seam-datatable-column-filter-menu", inputs: { column: "column", updateMethod: "updateMethod", debounce: "debounce" }, outputs: { closePopover: "closePopover" }, ngImport: i0, template: "<ng-container *ngIf=\"_filterForm && columnFilter\">\n  <form [formGroup]=\"_filterForm\" (ngSubmit)=\"submit()\">\n    <ng-container [ngSwitch]=\"columnFilter.name\">\n      <div *ngSwitchCase=\"'search-text'\">\n        <seam-datatable-column-filter-search-text [filterForm]=\"_filterForm\"></seam-datatable-column-filter-search-text>\n      </div>\n      <div *ngSwitchCase=\"'search-numeric'\">\n        <seam-datatable-column-filter-search-numeric [filterForm]=\"_filterForm\"></seam-datatable-column-filter-search-numeric>\n      </div>\n      <div *ngSwitchCase=\"'search-date'\">\n        <seam-datatable-column-filter-search-date [filterForm]=\"_filterForm\" [options]=\"columnFilter.options\"></seam-datatable-column-filter-search-date>\n      </div>\n      <div *ngSwitchDefault>\n        <ng-container *ngIf=\"customFilterTemplate$ | async as filterTpl\">\n          <ng-container *ngIf=\"filterTpl.template\">\n            <ng-container\n              [ngTemplateOutlet]=\"filterTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: _filterForm, filterForm: _filterForm, options: columnFilter.options, column: column, columnFilter: columnFilter }\">\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <hr class=\"mb-1\">\n    <div class=\"d-flex align-items-center\" [class.justify-content-between]=\"updateMethod === 'submit'\" [class.text-right]=\"updateMethod === 'valueChanges'\">\n      <button seamButton size=\"sm\" class=\"text-primary p-0\" (click)=\"clearFilter()\" [disabled]=\"columnFilter?.isDefault() === true\">Clear</button>\n      <button\n        *ngIf=\"updateMethod === 'submit'\"\n        seamButton\n        size=\"sm\"\n        class=\"text-primary p-0\"\n        type=\"submit\"\n        [disabled]=\"columnFilter?.isDefault() === true\">\n        Apply\n      </button>\n    </div>\n  </form>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatatableColumnFilterSearchTextComponent, selector: "seam-datatable-column-filter-search-text", inputs: ["filterForm"] }, { kind: "component", type: DatatableColumnFilterSearchNumericComponent, selector: "seam-datatable-column-filter-search-numeric", inputs: ["filterForm"] }, { kind: "component", type: DatatableColumnFilterSearchDateComponent, selector: "seam-datatable-column-filter-search-date", inputs: ["options", "filterForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterMenuComponent, deps: [{ token: ColumnsFiltersService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableColumnFilterMenuComponent, isStandalone: true, 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\n          [filterForm]=\"_filterForm\"\n        ></seam-datatable-column-filter-search-text>\n      </div>\n      <div *ngSwitchCase=\"'search-numeric'\">\n        <seam-datatable-column-filter-search-numeric\n          [filterForm]=\"_filterForm\"\n        ></seam-datatable-column-filter-search-numeric>\n      </div>\n      <div *ngSwitchCase=\"'search-date'\">\n        <seam-datatable-column-filter-search-date\n          [filterForm]=\"_filterForm\"\n          [options]=\"columnFilter.options\"\n        ></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]=\"{\n                $implicit: _filterForm,\n                filterForm: _filterForm,\n                options: columnFilter.options,\n                column: column,\n                columnFilter: columnFilter,\n              }\"\n            >\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <hr class=\"mb-1\" />\n    <div\n      class=\"d-flex align-items-center\"\n      [class.justify-content-between]=\"updateMethod === 'submit'\"\n      [class.text-right]=\"updateMethod === 'valueChanges'\"\n    >\n      <button\n        seamButton\n        size=\"sm\"\n        class=\"text-primary p-0\"\n        (click)=\"clearFilter()\"\n        [disabled]=\"columnFilter?.isDefault() === true\"\n      >\n        Clear\n      </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      >\n        Apply\n      </button>\n    </div>\n  </form>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i4$2.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: DatatableColumnFilterSearchTextComponent, selector: "seam-datatable-column-filter-search-text", inputs: ["filterForm"] }, { kind: "component", type: DatatableColumnFilterSearchNumericComponent, selector: "seam-datatable-column-filter-search-numeric", inputs: ["filterForm"] }, { kind: "component", type: DatatableColumnFilterSearchDateComponent, selector: "seam-datatable-column-filter-search-date", inputs: ["options", "filterForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
 }
 __decorate([
     InputNumber()
 ], DatatableColumnFilterMenuComponent.prototype, "debounce", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnFilterMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnFilterMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-datatable-column-filter-menu', standalone: false, template: "<ng-container *ngIf=\"_filterForm && columnFilter\">\n  <form [formGroup]=\"_filterForm\" (ngSubmit)=\"submit()\">\n    <ng-container [ngSwitch]=\"columnFilter.name\">\n      <div *ngSwitchCase=\"'search-text'\">\n        <seam-datatable-column-filter-search-text [filterForm]=\"_filterForm\"></seam-datatable-column-filter-search-text>\n      </div>\n      <div *ngSwitchCase=\"'search-numeric'\">\n        <seam-datatable-column-filter-search-numeric [filterForm]=\"_filterForm\"></seam-datatable-column-filter-search-numeric>\n      </div>\n      <div *ngSwitchCase=\"'search-date'\">\n        <seam-datatable-column-filter-search-date [filterForm]=\"_filterForm\" [options]=\"columnFilter.options\"></seam-datatable-column-filter-search-date>\n      </div>\n      <div *ngSwitchDefault>\n        <ng-container *ngIf=\"customFilterTemplate$ | async as filterTpl\">\n          <ng-container *ngIf=\"filterTpl.template\">\n            <ng-container\n              [ngTemplateOutlet]=\"filterTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: _filterForm, filterForm: _filterForm, options: columnFilter.options, column: column, columnFilter: columnFilter }\">\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <hr class=\"mb-1\">\n    <div class=\"d-flex align-items-center\" [class.justify-content-between]=\"updateMethod === 'submit'\" [class.text-right]=\"updateMethod === 'valueChanges'\">\n      <button seamButton size=\"sm\" class=\"text-primary p-0\" (click)=\"clearFilter()\" [disabled]=\"columnFilter?.isDefault() === true\">Clear</button>\n      <button\n        *ngIf=\"updateMethod === 'submit'\"\n        seamButton\n        size=\"sm\"\n        class=\"text-primary p-0\"\n        type=\"submit\"\n        [disabled]=\"columnFilter?.isDefault() === true\">\n        Apply\n      </button>\n    </div>\n  </form>\n</ng-container>\n" }]
+            args: [{ selector: 'seam-datatable-column-filter-menu', imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        ReactiveFormsModule,
+                        TheSeamButtonsModule,
+                        DatatableColumnFilterSearchTextComponent,
+                        DatatableColumnFilterSearchNumericComponent,
+                        DatatableColumnFilterSearchDateComponent,
+                    ], 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\n          [filterForm]=\"_filterForm\"\n        ></seam-datatable-column-filter-search-text>\n      </div>\n      <div *ngSwitchCase=\"'search-numeric'\">\n        <seam-datatable-column-filter-search-numeric\n          [filterForm]=\"_filterForm\"\n        ></seam-datatable-column-filter-search-numeric>\n      </div>\n      <div *ngSwitchCase=\"'search-date'\">\n        <seam-datatable-column-filter-search-date\n          [filterForm]=\"_filterForm\"\n          [options]=\"columnFilter.options\"\n        ></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]=\"{\n                $implicit: _filterForm,\n                filterForm: _filterForm,\n                options: columnFilter.options,\n                column: column,\n                columnFilter: columnFilter,\n              }\"\n            >\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <hr class=\"mb-1\" />\n    <div\n      class=\"d-flex align-items-center\"\n      [class.justify-content-between]=\"updateMethod === 'submit'\"\n      [class.text-right]=\"updateMethod === 'valueChanges'\"\n    >\n      <button\n        seamButton\n        size=\"sm\"\n        class=\"text-primary p-0\"\n        (click)=\"clearFilter()\"\n        [disabled]=\"columnFilter?.isDefault() === true\"\n      >\n        Clear\n      </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      >\n        Apply\n      </button>\n    </div>\n  </form>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: ColumnsFiltersService }], propDecorators: { column: [{
                 type: Input
             }], updateMethod: [{
@@ -2574,18 +2786,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Output
             }] } });
 
+class DatatableColumnHeaderComponent {
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    sortFn = input.required(...(ngDevMode ? [{ debugName: "sortFn" }] : []));
+    columnFilterIcon = input(...(ngDevMode ? [undefined, { debugName: "columnFilterIcon" }] : []));
+    columnFilterUpdateMethod = input(...(ngDevMode ? [undefined, { debugName: "columnFilterUpdateMethod" }] : []));
+    columnFilterUpdateDebounce = input(...(ngDevMode ? [undefined, { debugName: "columnFilterUpdateDebounce" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: DatatableColumnHeaderComponent, isStandalone: true, selector: "seam-datatable-column-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: true, transformFunction: null }, columnFilterIcon: { classPropertyName: "columnFilterIcon", publicName: "columnFilterIcon", isSignal: true, isRequired: false, transformFunction: null }, columnFilterUpdateMethod: { classPropertyName: "columnFilterUpdateMethod", publicName: "columnFilterUpdateMethod", isSignal: true, isRequired: false, transformFunction: null }, columnFilterUpdateDebounce: { classPropertyName: "columnFilterUpdateDebounce", publicName: "columnFilterUpdateDebounce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.flex-fill": "column().alignHeader !== \"left\"", "class.justify-content-center": "column().alignHeader === \"center\"", "class.justify-content-end": "column().alignHeader === \"right\"" }, classAttribute: "d-inline-flex align-items-center" }, ngImport: i0, template: "@if (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\"\n  ></button>\n}\n@if (column().sortable) {\n  <button\n    seamButton\n    class=\"datatable-sort-target p-0\"\n    (click)=\"sortFn()()\"\n    title=\"Click to sort\"\n  >\n    <strong class=\"draggable\">{{ column().name }}</strong>\n  </button>\n} @else {\n  <strong class=\"draggable\">{{ column().name }}</strong>\n}\n<div\n  class=\"datatable-column-header-separator\"\n  [attr.data-column-id]=\"column().$$id\"\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()\"\n  ></seam-datatable-column-filter-menu>\n</ng-template>\n", styles: [".datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i4$2.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "ngmodule", type: TheSeamPopoverModule }, { kind: "directive", type: i2$3.TheSeamPopoverDirective, selector: "[seamPopover]", inputs: ["seamPopover", "seamPopoverContext", "seamPopoverBaseWidth", "seamPopoverDisabled"], exportAs: ["seamPopover"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i3.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "component", type: DatatableColumnFilterMenuComponent, selector: "seam-datatable-column-filter-menu", inputs: ["column", "updateMethod", "debounce"], outputs: ["closePopover"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-column-header', imports: [
+                        CommonModule,
+                        TheSeamButtonsModule,
+                        TheSeamPopoverModule,
+                        TheSeamIconModule,
+                        DatatableColumnFilterMenuComponent,
+                    ], host: {
+                        class: 'd-inline-flex align-items-center',
+                        '[class.flex-fill]': 'column().alignHeader !== "left"',
+                        // TODO: fix 'center' alignment. This solution leaves the sort icon on the
+                        // far right, away from the text.
+                        '[class.justify-content-center]': 'column().alignHeader === "center"',
+                        '[class.justify-content-end]': 'column().alignHeader === "right"',
+                    }, template: "@if (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\"\n  ></button>\n}\n@if (column().sortable) {\n  <button\n    seamButton\n    class=\"datatable-sort-target p-0\"\n    (click)=\"sortFn()()\"\n    title=\"Click to sort\"\n  >\n    <strong class=\"draggable\">{{ column().name }}</strong>\n  </button>\n} @else {\n  <strong class=\"draggable\">{{ column().name }}</strong>\n}\n<div\n  class=\"datatable-column-header-separator\"\n  [attr.data-column-id]=\"column().$$id\"\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()\"\n  ></seam-datatable-column-filter-menu>\n</ng-template>\n", styles: [".datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}\n"] }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: true }] }], columnFilterIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilterIcon", required: false }] }], columnFilterUpdateMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilterUpdateMethod", required: false }] }], columnFilterUpdateDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilterUpdateDebounce", required: false }] }] } });
+
 /**
  * Intended for internal classes declared by the `TheSeamDatatableModule`.
  */
 const THESEAM_DATATABLE = new InjectionToken('LibDatatable');
 const _THESEAM_DATATABLE = {
     provide: THESEAM_DATATABLE,
-    useExisting: forwardRef(() => DatatableComponent)
+    useExisting: forwardRef(() => DatatableComponent),
 };
 const _THESEAM_DATATABLE_ACCESSOR = {
     provide: THESEAM_DATATABLE_ACCESSOR,
-    // tslint:disable-next-line:no-use-before-declare
-    useExisting: forwardRef(() => DatatableComponent)
+    useExisting: forwardRef(() => DatatableComponent),
 };
 class DatatableComponent {
     _preferences;
@@ -2626,18 +2864,24 @@ class DatatableComponent {
     get filters() {
         return [
             ...this._menuBarsFiltersSubject.value,
-            ...this._columnsFilters.filters()
+            ...this._columnsFilters.filters(),
         ];
     }
     filters$;
-    get preferencesKey() { return this._preferencesKey.value; }
-    set preferencesKey(value) { this._preferencesKey.next(value || undefined); }
+    get preferencesKey() {
+        return this._preferencesKey.value;
+    }
+    set preferencesKey(value) {
+        this._preferencesKey.next(value || undefined);
+    }
     _preferencesKey = new BehaviorSubject(undefined);
     targetMarkerTemplate;
     set columns(value) {
         this._columnsManager.setInputColumns(Array.isArray(value) ? value : []);
     }
-    get rows() { return this._rows.value; }
+    get rows() {
+        return this._rows.value;
+    }
     set rows(value) {
         this._rows.next(value || []);
     }
@@ -2654,15 +2898,20 @@ class DatatableComponent {
     count = 0;
     offset = 0;
     loadingIndicator = false;
-    get selectionType() { return this._columnsManager.getSelectionType(); }
+    get selectionType() {
+        return this._columnsManager.getSelectionType();
+    }
     set selectionType(value) {
         this._columnsManager.setSelectionType(notNullOrUndefined(value) ? value : undefined);
     }
     reorderable = true;
     swapColumns = false;
-    get sortType() { return this._sortType; }
+    get sortType() {
+        return this._sortType;
+    }
     set sortType(value) {
-        if (notNullOrUndefined(value) && (value === SortType.single || value === SortType.multi)) {
+        if (notNullOrUndefined(value) &&
+            (value === SortType.single || value === SortType.multi)) {
             this._sortType = value;
         }
         else {
@@ -2697,7 +2946,7 @@ class DatatableComponent {
         pagerLeftArrow: 'datatable-icon-left',
         pagerRightArrow: 'datatable-icon-right',
         pagerPrevious: 'datatable-icon-prev',
-        pagerNext: 'datatable-icon-skip'
+        pagerNext: 'datatable-icon-skip',
     };
     _cssClasses;
     get messages() {
@@ -2710,7 +2959,7 @@ class DatatableComponent {
         else if (notNullOrUndefined(this._config?.messages)) {
             this._messages = {
                 ...this._messagesDefault,
-                ...this._config?.messages
+                ...this._config?.messages,
             };
         }
         else {
@@ -2724,7 +2973,7 @@ class DatatableComponent {
         // Footer total message
         totalMessage: 'total',
         // Footer selected message
-        selectedMessage: 'selected'
+        selectedMessage: 'selected',
     };
     _messages;
     rowIdentity = (x) => x;
@@ -2801,12 +3050,15 @@ class DatatableComponent {
      *
      * Defaults to `frozenRight`.
      */
-    get actionItemColumnPosition() { return this._actionItemColumnPosition; }
+    get actionItemColumnPosition() {
+        return this._actionItemColumnPosition;
+    }
     set actionItemColumnPosition(value) {
         if (notNullOrUndefined(value) && isActionItemColumnPosition(value)) {
             this._actionItemColumnPosition = value;
         }
-        else if (notNullOrUndefined(this._config?.actionItemColumnPosition) && isActionItemColumnPosition(this._config?.actionItemColumnPosition)) {
+        else if (notNullOrUndefined(this._config?.actionItemColumnPosition) &&
+            isActionItemColumnPosition(this._config?.actionItemColumnPosition)) {
             this._actionItemColumnPosition = this._config?.actionItemColumnPosition;
         }
         else {
@@ -2846,8 +3098,8 @@ class DatatableComponent {
             this._columnFilterUpdateMethod = this._columnFilterUpdateMethodDefault;
         }
     }
-    _columnFilterUpdateMethodDefault = 'valueChanges';
     _columnFilterUpdateMethod;
+    _columnFilterUpdateMethodDefault = 'valueChanges';
     get columnFilterUpdateDebounce() {
         return this._columnFilterUpdateDebounce;
     }
@@ -2856,7 +3108,8 @@ class DatatableComponent {
             this._columnFilterUpdateDebounce = value;
         }
         else if (notNullOrUndefined(this._config?.columnFilterUpdateDebounce)) {
-            this._columnFilterUpdateDebounce = this._config?.columnFilterUpdateDebounce;
+            this._columnFilterUpdateDebounce =
+                this._config?.columnFilterUpdateDebounce;
         }
         else {
             this._columnFilterUpdateDebounce = this._columnFilterUpdateDebounceDefault;
@@ -2882,7 +3135,9 @@ class DatatableComponent {
         this._columnsManager.setTemplateColumns(translateTemplateColumns(value?.toArray() ?? []));
     }
     actionMenu;
-    get rowActionItem() { return this._rowActionItem; }
+    get rowActionItem() {
+        return this._rowActionItem;
+    }
     set rowActionItem(value) {
         this._rowActionItem = value;
         this._columnsManager.setRowActionItem(notNullOrUndefined(value) ? value : undefined);
@@ -2890,7 +3145,9 @@ class DatatableComponent {
     _rowActionItem;
     rowDetail;
     footer;
-    get menuBarComponent() { return this._menuBarComponent; }
+    get menuBarComponent() {
+        return this._menuBarComponent;
+    }
     set menuBarComponent(value) {
         this._menuBarComponent = value;
         if (this._menuBarSub) {
@@ -2898,8 +3155,9 @@ class DatatableComponent {
         }
         if (value) {
             this._setMenuBarFilters(value.filters());
-            this._menuBarSub = this._menuBarComponent?.filtersChanged
-                .subscribe(() => { this._setMenuBarFilters(value.filters()); });
+            this._menuBarSub = this._menuBarComponent?.filtersChanged.subscribe(() => {
+                this._setMenuBarFilters(value.filters());
+            });
         }
     }
     _menuBarComponent;
@@ -2910,31 +3168,41 @@ class DatatableComponent {
     ngxDatatable;
     ngxDatatableElement;
     ngxRowDetail;
-    get actionMenuCellTpl() { return this._actionMenuCellTpl; }
+    get actionMenuCellTpl() {
+        return this._actionMenuCellTpl;
+    }
     set actionMenuCellTpl(value) {
         this._actionMenuCellTpl = value;
         this._columnsManager.setActionMenuCellTpl(notNullOrUndefined(value) ? value : undefined);
     }
     _actionMenuCellTpl;
-    get treeToggleTpl() { return this._treeToggleTpl; }
+    get treeToggleTpl() {
+        return this._treeToggleTpl;
+    }
     set treeToggleTpl(value) {
         this._treeToggleTpl = value;
         this._columnsManager.setTreeToggleTpl(notNullOrUndefined(value) ? value : undefined);
     }
     _treeToggleTpl;
-    get headerTpl() { return this._headerTpl; }
+    get headerTpl() {
+        return this._headerTpl;
+    }
     set headerTpl(value) {
         this._headerTpl = value;
         this._columnsManager.setHeaderTpl(notNullOrUndefined(value) ? value : undefined);
     }
     _headerTpl;
-    get blankHeaderTpl() { return this._blankHeaderTpl; }
+    get blankHeaderTpl() {
+        return this._blankHeaderTpl;
+    }
     set blankHeaderTpl(value) {
         this._blankHeaderTpl = value;
         this._columnsManager.setBlankHeaderTpl(notNullOrUndefined(value) ? value : undefined);
     }
     _blankHeaderTpl;
-    get cellTypeSelectorTpl() { return this._cellTypeSelectorTpl; }
+    get cellTypeSelectorTpl() {
+        return this._cellTypeSelectorTpl;
+    }
     set cellTypeSelectorTpl(value) {
         this._cellTypeSelectorTpl = value;
         this._columnsManager.setCellTypeSelectorTpl(notNullOrUndefined(value) ? value : undefined);
@@ -2958,8 +3226,8 @@ class DatatableComponent {
                 const id = event.target.parentElement
                     ?.querySelector('.datatable-column-header-separator')
                     ?.getAttribute('data-column-id');
-                this._columnsManager.columns$.pipe(take(1)).subscribe(columns => {
-                    const column = columns.find(c => c.$$id === id);
+                this._columnsManager.columns$.pipe(take(1)).subscribe((columns) => {
+                    const column = columns.find((c) => c.$$id === id);
                     if (column) {
                         const columnProp = getColumnProp(column);
                         if (columnProp) {
@@ -2977,28 +3245,31 @@ class DatatableComponent {
         this._columnsAlterationsManager = _columnsAlterationsManager;
         this._columnsFilters = _columnsFilters;
         this._config = _config;
-        this._preferencesKey.pipe(distinctUntilChanged(), switchMap(key => {
+        this._preferencesKey
+            .pipe(distinctUntilChanged(), switchMap((key) => {
             if (!notNullOrUndefined(key) || key.length === 0) {
                 return of(undefined);
             }
             return from(waitOnConditionAsync(() => this._preferences.isLoaded(key))).pipe(switchMap(() => this._columnsAlterationsManager.changes.pipe(startWith(undefined), tap(() => {
-                console.log('%cSaving columns alterations to preferences', 'color: blue', this._columnsAlterationsManager.get());
+                // console.log('%cSaving columns alterations to preferences', 'color: blue', this._columnsAlterationsManager.get())
                 this._preferences.setAlterations(key, this._columnsAlterationsManager.get());
             }))));
-        }), takeUntil(this._ngUnsubscribe)).subscribe();
+        }), takeUntil(this._ngUnsubscribe))
+            .subscribe();
         const applyPrefs = (cols) => this._columnsAlterationsManager.changes.pipe(startWith(undefined), map(() => {
-            console.log('%cApplying columns alterations', 'color: blue', cols);
+            // console.log('%cApplying columns alterations', 'color: blue', cols)
             this._columnsAlterationsManager.apply(cols, this);
             return cols;
         }));
-        this._preferencesKey.pipe(distinctUntilChanged(), switchMap(prefsKey => {
+        this._preferencesKey
+            .pipe(distinctUntilChanged(), switchMap((prefsKey) => {
             if (!notNullOrUndefined(prefsKey)) {
                 return of(undefined);
             }
             return this._preferences.preferences(prefsKey).pipe(switchMap(async (preferences) => {
                 await waitOnConditionAsync(() => this._preferences.isLoaded(prefsKey));
                 return preferences;
-            }), take(1), map(preferences => {
+            }), take(1), map((preferences) => {
                 let alterations = [];
                 try {
                     alterations = mapColumnsAlterationsStates(preferences.alterations);
@@ -3011,18 +3282,28 @@ class DatatableComponent {
                         console.warn(e);
                     }
                 }
-                console.log('%cSetting columns alterations from preferences', 'color: blue', alterations);
+                // console.log('%cSetting columns alterations from preferences', 'color: blue', alterations)
                 this._columnsAlterationsManager.add(alterations);
             }));
-        }), takeUntil(this._ngUnsubscribe)).subscribe();
-        this.columns$ = combineLatest([this._columnsManager.columns$, this._columnsFilters.columnActiveFilterProps$]).pipe(map(([columns, columnActiveFilterProps]) => columns.map(col => ({
+        }), takeUntil(this._ngUnsubscribe))
+            .subscribe();
+        this.columns$ = combineLatest([
+            this._columnsManager.columns$,
+            this._columnsFilters.columnActiveFilterProps$,
+        ]).pipe(map(([columns, columnActiveFilterProps]) => columns.map((col) => ({
             ...col,
-            filterActive: columnActiveFilterProps.includes(this._columnsFilters.getColumnFilterProp(col) || '')
+            filterActive: columnActiveFilterProps.includes(this._columnsFilters.getColumnFilterProp(col) || ''),
         }))));
-        this.displayColumns$ = this.columns$.pipe(switchMap(cols => applyPrefs(cols)), map(cols => cols.filter(c => !c.hidden)), tap(v => removeUnusedDiffs(v, this._colDiffersInp, this._colDiffersTpl)));
-        this.filters$ = combineLatest([this._menuBarsFiltersSubject.asObservable(), this._columnsFilters.columnsFilters$]).pipe(map(([menuFilters, columnsFilters]) => [...menuFilters, ...columnsFilters]));
-        this.filterStates = this.filters$.pipe(switchMap(filters => composeDataFilterStates(filters)));
-        this.rows$ = this._dataSourceSubject.pipe(switchMap(dataSource => {
+        this.displayColumns$ = this.columns$.pipe(switchMap((cols) => applyPrefs(cols)), map((cols) => cols.filter((c) => !c.hidden)), tap((v) => removeUnusedDiffs(v, this._colDiffersInp, this._colDiffersTpl)));
+        this.filters$ = combineLatest([
+            this._menuBarsFiltersSubject.asObservable(),
+            this._columnsFilters.columnsFilters$,
+        ]).pipe(map(([menuFilters, columnsFilters]) => [
+            ...menuFilters,
+            ...columnsFilters,
+        ]));
+        this.filterStates = this.filters$.pipe(switchMap((filters) => composeDataFilterStates(filters)));
+        this.rows$ = this._dataSourceSubject.pipe(switchMap((dataSource) => {
             // console.log('dataSource', dataSource)
             let dataStream;
             if (isDataSource(dataSource)) {
@@ -3044,9 +3325,9 @@ class DatatableComponent {
             }
             if (!this.externalFiltering) {
                 // console.log('not using externalFiltering')
-                dataStream = dataStream.pipe(switchMap(rows => this.filters$.pipe(
+                dataStream = dataStream.pipe(switchMap((rows) => this.filters$.pipe(
                 // tap(v => console.log('filters', v)),
-                concatMap(filters => of(rows).pipe(composeDataFilters(filters))))));
+                concatMap((filters) => of(rows).pipe(composeDataFilters(filters))))));
                 // dataStream = this._filtersSubject.pipe(
                 //   tap(v => console.log('filters', v)),
                 //   concatMap(filters => dataStream.pipe(composeDataFilters(filters))),
@@ -3058,11 +3339,11 @@ class DatatableComponent {
             takeUntil(this._ngUnsubscribe));
         }));
         // TODO: Implement viewChange for CollectionViewer.
-        this.viewChange = this.page.pipe(map(p => ({ start: 0, end: p.count })));
+        this.viewChange = this.page.pipe(map((p) => ({ start: 0, end: p.count })));
     }
     ngOnInit() {
         if (this.rowDetail) {
-            this._rowDetailToggleSubscription = this.rowDetail._toggle.subscribe(event => {
+            this._rowDetailToggleSubscription = this.rowDetail._toggle.subscribe((event) => {
                 if (this.ngxRowDetail) {
                     this.ngxRowDetail.toggle.emit(event);
                 }
@@ -3110,7 +3391,7 @@ class DatatableComponent {
         if (!this.columnComponents || this.columnComponents.length === 0) {
             return null;
         }
-        const tpl = this.columnComponents.find(t => t.prop === propName);
+        const tpl = this.columnComponents.find((t) => t.prop === propName);
         if (tpl) {
             return tpl;
         }
@@ -3130,7 +3411,9 @@ class DatatableComponent {
         return item.prop;
     }
     onDatatableResize(event) {
-        if (this.ngxDatatable && this.ngxDatatableElement && this.ngxDatatableElement.nativeElement) {
+        if (this.ngxDatatable &&
+            this.ngxDatatableElement &&
+            this.ngxDatatableElement.nativeElement) {
             // TODO: Consider integrating this into the ngx-datatable library to avoid
             // multiple resize calls when the table resizes itself.
             this.ngxDatatable.recalculate();
@@ -3156,7 +3439,7 @@ class DatatableComponent {
                 const alteration = new WidthColumnsAlteration({
                     columnProp,
                     width: event.column.width,
-                    canAutoResize: false
+                    canAutoResize: false,
                 }, true);
                 this._columnsAlterationsManager.add([alteration]);
             }
@@ -3166,12 +3449,14 @@ class DatatableComponent {
         this.reorder.emit(event);
         const columnProp = getColumnProp(event.column);
         if (columnProp) {
-            const currentOrderAlteration = this._columnsAlterationsManager.get().find(x => x.type === 'order');
+            const currentOrderAlteration = this._columnsAlterationsManager
+                .get()
+                .find((x) => x.type === 'order');
             const state = {
                 columns: [
                     ...(currentOrderAlteration?.state.columns || []).filter((x) => x.columnProp !== columnProp),
-                    { columnProp, index: event.newValue }
-                ]
+                    { columnProp, index: event.newValue },
+                ],
             };
             const alteration = new OrderColumnsAlteration(state, true);
             this._columnsAlterationsManager.add([alteration]);
@@ -3204,18 +3489,18 @@ class DatatableComponent {
             offset: this.ngxDatatable?.offset ?? 0,
             pageSize: this.ngxDatatable?.pageSize ?? 0,
             limit: this.ngxDatatable?.limit,
-            count: this.ngxDatatable?.count ?? 0
+            count: this.ngxDatatable?.count ?? 0,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableComponent, deps: [{ token: DatatablePreferencesService }, { token: ColumnsManagerService }, { token: ColumnsAlterationsManagerService }, { token: ColumnsFiltersService }, { token: THESEAM_DATATABLE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableComponent, isStandalone: false, selector: "seam-datatable", inputs: { preferencesKey: "preferencesKey", targetMarkerTemplate: "targetMarkerTemplate", columns: "columns", rows: "rows", columnMode: "columnMode", groupRowsBy: "groupRowsBy", groupedRows: "groupedRows", selected: "selected", externalPaging: "externalPaging", externalSorting: "externalSorting", externalFiltering: "externalFiltering", limit: "limit", count: "count", offset: "offset", loadingIndicator: "loadingIndicator", selectionType: "selectionType", reorderable: "reorderable", swapColumns: "swapColumns", sortType: "sortType", sorts: "sorts", cssClasses: "cssClasses", messages: "messages", rowIdentity: "rowIdentity", rowClass: "rowClass", selectCheck: "selectCheck", displayCheck: "displayCheck", groupExpansionDefault: "groupExpansionDefault", trackByProp: "trackByProp", selectAllRowsOnPage: "selectAllRowsOnPage", treeFromRelation: "treeFromRelation", treeToRelation: "treeToRelation", summaryRow: "summaryRow", summaryHeight: "summaryHeight", summaryPosition: "summaryPosition", virtualization: "virtualization", headerHeight: "headerHeight", rowHeight: "rowHeight", footerHeight: "footerHeight", scrollbarV: "scrollbarV", scrollbarH: "scrollbarH", dataSource: "dataSource", actionItemColumnPosition: "actionItemColumnPosition", columnFilterIcon: "columnFilterIcon", columnFilterUpdateMethod: "columnFilterUpdateMethod", columnFilterUpdateDebounce: "columnFilterUpdateDebounce" }, outputs: { scroll: "scroll", activate: "activate", select: "select", sort: "sort", page: "page", reorder: "reorder", resize: "resize", tableContextmenu: "tableContextmenu", treeAction: "treeAction", actionRefreshRequest: "actionRefreshRequest", hiddenColumnsChange: "hiddenColumnsChange" }, host: { listeners: { "dblclick": "_dblClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableComponent, deps: [{ token: DatatablePreferencesService }, { token: ColumnsManagerService }, { token: ColumnsAlterationsManagerService }, { token: ColumnsFiltersService }, { token: THESEAM_DATATABLE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableComponent, isStandalone: false, selector: "seam-datatable", inputs: { preferencesKey: "preferencesKey", targetMarkerTemplate: "targetMarkerTemplate", columns: "columns", rows: "rows", columnMode: "columnMode", groupRowsBy: "groupRowsBy", groupedRows: "groupedRows", selected: "selected", externalPaging: "externalPaging", externalSorting: "externalSorting", externalFiltering: "externalFiltering", limit: "limit", count: "count", offset: "offset", loadingIndicator: "loadingIndicator", selectionType: "selectionType", reorderable: "reorderable", swapColumns: "swapColumns", sortType: "sortType", sorts: "sorts", cssClasses: "cssClasses", messages: "messages", rowIdentity: "rowIdentity", rowClass: "rowClass", selectCheck: "selectCheck", displayCheck: "displayCheck", groupExpansionDefault: "groupExpansionDefault", trackByProp: "trackByProp", selectAllRowsOnPage: "selectAllRowsOnPage", treeFromRelation: "treeFromRelation", treeToRelation: "treeToRelation", summaryRow: "summaryRow", summaryHeight: "summaryHeight", summaryPosition: "summaryPosition", virtualization: "virtualization", headerHeight: "headerHeight", rowHeight: "rowHeight", footerHeight: "footerHeight", scrollbarV: "scrollbarV", scrollbarH: "scrollbarH", dataSource: "dataSource", actionItemColumnPosition: "actionItemColumnPosition", columnFilterIcon: "columnFilterIcon", columnFilterUpdateMethod: "columnFilterUpdateMethod", columnFilterUpdateDebounce: "columnFilterUpdateDebounce" }, outputs: { scroll: "scroll", activate: "activate", select: "select", sort: "sort", page: "page", reorder: "reorder", resize: "resize", tableContextmenu: "tableContextmenu", treeAction: "treeAction", actionRefreshRequest: "actionRefreshRequest", hiddenColumnsChange: "hiddenColumnsChange" }, host: { listeners: { "dblclick": "_dblClick($event)" } }, providers: [
             _THESEAM_DATATABLE,
             DatatableColumnChangesService,
             _THESEAM_DATATABLE_ACCESSOR,
             ColumnsManagerService,
             ColumnsAlterationsManagerService,
-            ColumnsFiltersService
-        ], queries: [{ propertyName: "actionMenu", first: true, predicate: DatatableActionMenuComponent, descendants: true, static: true }, { propertyName: "rowActionItem", first: true, predicate: DatatableRowActionItemDirective, descendants: true }, { propertyName: "rowDetail", first: true, predicate: TheSeamDatatableRowDetailDirective, descendants: true, static: true }, { propertyName: "footer", first: true, predicate: TheSeamDatatableFooterDirective, descendants: true, static: true }, { propertyName: "menuBarComponent", first: true, predicate: DatatableMenuBarComponent, descendants: true }, { propertyName: "columnComponents", predicate: DatatableColumnComponent }, { propertyName: "columnFilterTemplates", predicate: TheSeamDatatableColumnFilterDirective }], viewQueries: [{ propertyName: "ngxDatatable", first: true, predicate: DatatableComponent$1, descendants: true }, { propertyName: "ngxDatatableElement", first: true, predicate: DatatableComponent$1, descendants: true, read: ElementRef }, { propertyName: "ngxRowDetail", first: true, predicate: DatatableRowDetailDirective, descendants: true }, { propertyName: "actionMenuCellTpl", first: true, predicate: ["actionMenuCellTpl"], descendants: true, static: true }, { propertyName: "treeToggleTpl", first: true, predicate: ["treeToggleTpl"], descendants: true, static: true }, { propertyName: "headerTpl", first: true, predicate: ["headerTpl"], descendants: true, static: true }, { propertyName: "blankHeaderTpl", first: true, predicate: ["blankHeaderTpl"], descendants: true, static: true }, { propertyName: "cellTypeSelectorTpl", first: true, predicate: ["cellTypeSelectorTpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"$any(cssClasses)\"\n        [messages]=\"$any(messages)\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <!-- <b>Age: {{ group.age }}</b> -->\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template\n  #headerTpl\n  ngx-datatable-header-template\n  let-column=\"column\"\n  let-sortFn=\"sortFn\"\n>\n  <div class=\"d-inline-flex align-items-center\">\n    <ng-container *ngIf=\"$any(column).filterable\">\n      <button\n        seamIconBtn\n        [icon]=\"columnFilterIcon\"\n        size=\"sm\"\n        [seamPopover]=\"filterMenu\"\n        [seamPopoverBaseWidth]=\"300\"\n        class=\"datatable-column-header-filter-button d-flex align-items-center mr-2\"\n        [class.datatable-column-header-filter-button-active]=\"$any(column).filterActive\"\n        style=\"width: 1rem;\"\n        title=\"Click to see filter options\"></button>\n    </ng-container>\n    <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n    <button\n      seamButton\n      *ngIf=\"column.sortable\"\n      class=\"datatable-sort-target p-0\"\n      (click)=\"sortFn()\"\n      title=\"Click to sort\">\n      <strong class=\"draggable\">{{column.name}}</strong>\n    </button>\n    <div class=\"datatable-column-header-separator\" [attr.data-column-id]=\"column.$$id\"></div>\n  </div>\n  <ng-template #filterMenu let-popover=\"popover\">\n    <seam-datatable-column-filter-menu\n      [column]=\"column\"\n      [updateMethod]=\"columnFilterUpdateMethod\"\n      [debounce]=\"columnFilterUpdateDebounce\"\n      (closePopover)=\"popover?.closePopover()\"></seam-datatable-column-filter-menu>\n  </ng-template>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"$any(column).cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"_faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"_faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n", styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute!important;inset:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}::ng-deep .ngx-datatable .datatable-body-row{position:relative}::ng-deep .ngx-datatable .datatable-row-right{position:absolute!important;top:0}::ng-deep .ngx-datatable .datatable-row-right{right:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "displayPageCount", "displayPager", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i6.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i6.DatatableGroupHeaderDirective, selector: "ngx-datatable-group-header", inputs: ["rowHeight", "checkboxable", "template"], outputs: ["toggle"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i6.DataTableColumnCellTreeToggle, selector: "[ngx-datatable-tree-toggle]" }, { kind: "directive", type: i6.DatatableFooterDirective, selector: "ngx-datatable-footer", inputs: ["footerHeight", "totalMessage", "selectedMessage", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "template"] }, { kind: "directive", type: i6.DatatableGroupHeaderTemplateDirective, selector: "[ngx-datatable-group-header-template]" }, { kind: "component", type: i7.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2$2.TheSeamElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"], exportAs: ["seamElemResized"] }, { kind: "component", type: i5.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "component", type: i3$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: i11.TheSeamPopoverDirective, selector: "[seamPopover]", inputs: ["seamPopover", "seamPopoverContext", "seamPopoverBaseWidth", "seamPopoverDisabled"], exportAs: ["seamPopover"] }, { kind: "component", type: i12.TableCellTypeSelectorComponent, selector: "seam-table-cell-type-selector", inputs: ["type", "value", "rowIndex", "row", "colData"] }, { kind: "component", type: DatatableColumnFilterMenuComponent, selector: "seam-datatable-column-filter-menu", inputs: ["column", "updateMethod", "debounce"], outputs: ["closePopover"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], animations: [
+            ColumnsFiltersService,
+        ], queries: [{ propertyName: "actionMenu", first: true, predicate: DatatableActionMenuComponent, descendants: true, static: true }, { propertyName: "rowActionItem", first: true, predicate: DatatableRowActionItemDirective, descendants: true }, { propertyName: "rowDetail", first: true, predicate: TheSeamDatatableRowDetailDirective, descendants: true, static: true }, { propertyName: "footer", first: true, predicate: TheSeamDatatableFooterDirective, descendants: true, static: true }, { propertyName: "menuBarComponent", first: true, predicate: DatatableMenuBarComponent, descendants: true }, { propertyName: "columnComponents", predicate: DatatableColumnComponent }, { propertyName: "columnFilterTemplates", predicate: TheSeamDatatableColumnFilterDirective }], viewQueries: [{ propertyName: "ngxDatatable", first: true, predicate: DatatableComponent$1, descendants: true }, { propertyName: "ngxDatatableElement", first: true, predicate: DatatableComponent$1, descendants: true, read: ElementRef }, { propertyName: "ngxRowDetail", first: true, predicate: DatatableRowDetailDirective, descendants: true }, { propertyName: "actionMenuCellTpl", first: true, predicate: ["actionMenuCellTpl"], descendants: true, static: true }, { propertyName: "treeToggleTpl", first: true, predicate: ["treeToggleTpl"], descendants: true, static: true }, { propertyName: "headerTpl", first: true, predicate: ["headerTpl"], descendants: true, static: true }, { propertyName: "blankHeaderTpl", first: true, predicate: ["blankHeaderTpl"], descendants: true, static: true }, { propertyName: "cellTypeSelectorTpl", first: true, predicate: ["cellTypeSelectorTpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"$any(cssClasses)\"\n        [messages]=\"$any(messages)\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\"\n      >\n        <ngx-datatable-group-header\n          [rowHeight]=\"50\"\n          #myGroupHeader\n          *ngIf=\"groupRowsBy\"\n        >\n          <ng-template\n            let-group=\"group\"\n            let-expanded=\"expanded\"\n            ngx-datatable-group-header-template\n          >\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            >\n              <!-- <b>Age: {{ group.age }}</b> -->\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail\n          *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\"\n        >\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer\n          *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\"\n        >\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  <seam-datatable-column-header\n    [column]=\"column\"\n    [sortFn]=\"sortFn\"\n    [columnFilterIcon]=\"columnFilterIcon\"\n    [columnFilterUpdateMethod]=\"columnFilterUpdateMethod\"\n    [columnFilterUpdateDebounce]=\"columnFilterUpdateDebounce\"\n  ></seam-datatable-column-header>\n</ng-template>\n\n<ng-template\n  #cellTypeSelectorTpl\n  ngx-datatable-cell-template\n  let-value=\"value\"\n  let-rowIndex=\"rowIndex\"\n  let-row=\"row\"\n  let-column=\"column\"\n>\n  <seam-table-cell-type-selector\n    *ngIf=\"row\"\n    [type]=\"$any(column).cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\"\n  >\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template\n  #actionMenuCellTpl\n  ngx-datatable-cell-template\n  let-value=\"value\"\n  let-rowIndex=\"rowIndex\"\n  let-row=\"row\"\n>\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: row,\n        row: row,\n        rowIndex: rowIndex,\n      }\"\n    >\n    </ng-template>\n  </ng-container>\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  >\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%}::ng-deep .ngx-datatable .datatable-body-row{position:relative}::ng-deep .ngx-datatable .datatable-row-right{position:absolute!important;top:0}::ng-deep .ngx-datatable .datatable-row-right{right:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "displayPageCount", "displayPager", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i6.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i6.DatatableGroupHeaderDirective, selector: "ngx-datatable-group-header", inputs: ["rowHeight", "checkboxable", "template"], outputs: ["toggle"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i6.DataTableColumnCellTreeToggle, selector: "[ngx-datatable-tree-toggle]" }, { kind: "directive", type: i6.DatatableFooterDirective, selector: "ngx-datatable-footer", inputs: ["footerHeight", "totalMessage", "selectedMessage", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "template"] }, { kind: "directive", type: i6.DatatableGroupHeaderTemplateDirective, selector: "[ngx-datatable-group-header-template]" }, { kind: "component", type: i7.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i8.TheSeamElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"], exportAs: ["seamElemResized"] }, { kind: "component", type: i9.TableCellTypeSelectorComponent, selector: "seam-table-cell-type-selector", inputs: ["type", "value", "rowIndex", "row", "colData"] }, { kind: "component", type: DatatableColumnHeaderComponent, selector: "seam-datatable-column-header", inputs: ["column", "sortFn", "columnFilterIcon", "columnFilterUpdateMethod", "columnFilterUpdateDebounce"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], animations: [
             trigger('slideDown', [
                 transition(':enter', [
                     style({ transform: 'translateY(-20%)', opacity: '0' }),
@@ -3224,8 +3509,8 @@ class DatatableComponent {
                 transition(':leave', [
                     style({ transform: 'translateY(0)', opacity: '1' }),
                     animate('250ms', style({ transform: 'translateY(-20%)', opacity: '0' })),
-                ])
-            ])
+                ]),
+            ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
@@ -3285,7 +3570,7 @@ __decorate([
 __decorate([
     InputBoolean()
 ], DatatableComponent.prototype, "scrollbarH", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('slideDown', [
@@ -3296,16 +3581,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             transition(':leave', [
                                 style({ transform: 'translateY(0)', opacity: '1' }),
                                 animate('250ms', style({ transform: 'translateY(-20%)', opacity: '0' })),
-                            ])
-                        ])
+                            ]),
+                        ]),
                     ], providers: [
                         _THESEAM_DATATABLE,
                         DatatableColumnChangesService,
                         _THESEAM_DATATABLE_ACCESSOR,
                         ColumnsManagerService,
                         ColumnsAlterationsManagerService,
-                        ColumnsFiltersService
-                    ], standalone: false, template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"$any(cssClasses)\"\n        [messages]=\"$any(messages)\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <!-- <b>Age: {{ group.age }}</b> -->\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template\n  #headerTpl\n  ngx-datatable-header-template\n  let-column=\"column\"\n  let-sortFn=\"sortFn\"\n>\n  <div class=\"d-inline-flex align-items-center\">\n    <ng-container *ngIf=\"$any(column).filterable\">\n      <button\n        seamIconBtn\n        [icon]=\"columnFilterIcon\"\n        size=\"sm\"\n        [seamPopover]=\"filterMenu\"\n        [seamPopoverBaseWidth]=\"300\"\n        class=\"datatable-column-header-filter-button d-flex align-items-center mr-2\"\n        [class.datatable-column-header-filter-button-active]=\"$any(column).filterActive\"\n        style=\"width: 1rem;\"\n        title=\"Click to see filter options\"></button>\n    </ng-container>\n    <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n    <button\n      seamButton\n      *ngIf=\"column.sortable\"\n      class=\"datatable-sort-target p-0\"\n      (click)=\"sortFn()\"\n      title=\"Click to sort\">\n      <strong class=\"draggable\">{{column.name}}</strong>\n    </button>\n    <div class=\"datatable-column-header-separator\" [attr.data-column-id]=\"column.$$id\"></div>\n  </div>\n  <ng-template #filterMenu let-popover=\"popover\">\n    <seam-datatable-column-filter-menu\n      [column]=\"column\"\n      [updateMethod]=\"columnFilterUpdateMethod\"\n      [debounce]=\"columnFilterUpdateDebounce\"\n      (closePopover)=\"popover?.closePopover()\"></seam-datatable-column-filter-menu>\n  </ng-template>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"$any(column).cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"_faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"_faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n", styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute!important;inset:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}::ng-deep .ngx-datatable .datatable-body-row{position:relative}::ng-deep .ngx-datatable .datatable-row-right{position:absolute!important;top:0}::ng-deep .ngx-datatable .datatable-row-right{right:0}\n"] }]
+                        ColumnsFiltersService,
+                    ], standalone: false, template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"$any(cssClasses)\"\n        [messages]=\"$any(messages)\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\"\n      >\n        <ngx-datatable-group-header\n          [rowHeight]=\"50\"\n          #myGroupHeader\n          *ngIf=\"groupRowsBy\"\n        >\n          <ng-template\n            let-group=\"group\"\n            let-expanded=\"expanded\"\n            ngx-datatable-group-header-template\n          >\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            >\n              <!-- <b>Age: {{ group.age }}</b> -->\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail\n          *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\"\n        >\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer\n          *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\"\n        >\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  <seam-datatable-column-header\n    [column]=\"column\"\n    [sortFn]=\"sortFn\"\n    [columnFilterIcon]=\"columnFilterIcon\"\n    [columnFilterUpdateMethod]=\"columnFilterUpdateMethod\"\n    [columnFilterUpdateDebounce]=\"columnFilterUpdateDebounce\"\n  ></seam-datatable-column-header>\n</ng-template>\n\n<ng-template\n  #cellTypeSelectorTpl\n  ngx-datatable-cell-template\n  let-value=\"value\"\n  let-rowIndex=\"rowIndex\"\n  let-row=\"row\"\n  let-column=\"column\"\n>\n  <seam-table-cell-type-selector\n    *ngIf=\"row\"\n    [type]=\"$any(column).cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\"\n  >\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template\n  #actionMenuCellTpl\n  ngx-datatable-cell-template\n  let-value=\"value\"\n  let-rowIndex=\"rowIndex\"\n  let-row=\"row\"\n>\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: row,\n        row: row,\n        rowIndex: rowIndex,\n      }\"\n    >\n    </ng-template>\n  </ng-container>\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  >\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%}::ng-deep .ngx-datatable .datatable-body-row{position:relative}::ng-deep .ngx-datatable .datatable-row-right{position:absolute!important;top:0}::ng-deep .ngx-datatable .datatable-row-right{right:0}\n"] }]
         }], ctorParameters: () => [{ type: DatatablePreferencesService }, { type: ColumnsManagerService }, { type: ColumnsAlterationsManagerService }, { type: ColumnsFiltersService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3483,11 +3768,10 @@ class DatatableColumnPreferencesComponent {
         this._columnsAlterationsManager = _columnsAlterationsManager;
         this._columns$ = combineLatest([
             this._datatable.columns$ ?? of([]),
-            observeControlValue(this._filterControl)
+            observeControlValue(this._filterControl),
         ]).pipe(map(([columns, filter]) => {
             const _filter = (filter || '').trim().toLowerCase();
-            return columns
-                .filter(c => this._canToggleColumn(c, _filter));
+            return columns.filter((c) => this._canToggleColumn(c, _filter));
         }));
     }
     _canToggleColumn(column, filter, omitInternalColumns = true) {
@@ -3500,7 +3784,7 @@ class DatatableColumnPreferencesComponent {
         if (filter.length === 0) {
             return true;
         }
-        return `${(getColumnProp(column) || '')}`.toLowerCase().indexOf(filter) !== -1;
+        return `${getColumnProp(column) || ''}`.toLowerCase().indexOf(filter) !== -1;
     }
     _onChange(event, col) {
         const columnProp = getColumnProp(col);
@@ -3510,16 +3794,16 @@ class DatatableColumnPreferencesComponent {
         }
         const alteration = new HideColumnColumnsAlteration({
             columnProp,
-            hidden
+            hidden,
         }, hidden);
         this._columnsAlterationsManager.add([alteration]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnPreferencesComponent, deps: [{ token: THESEAM_DATATABLE }, { token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnPreferencesComponent, isStandalone: false, selector: "seam-datatable-column-preferences", ngImport: i0, template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\" >\n  <input seamInput [formControl]=\"_filterControl\" seamInputSize=\"sm\" placeholder=\"Search\" seamAutoFocus>\n</seam-form-field>\n\n<div seamOverlayScrollbar style=\"min-height: 200px; max-height: 600px; min-width: 250px;\" class=\"flex-grow-1 mb-2\">\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox [checked]=\"!col.hidden\" (change)=\"_onChange($event, col)\">{{ col.name || col.prop }}</seam-checkbox>\n    </ng-container>\n  </div>\n\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "component", type: i4$2.TheSeamCheckboxComponent, selector: "seam-checkbox", inputs: ["tabIndex", "id", "aria-label", "aria-labelledby", "required", "checked", "disabled", "indeterminate", "name", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["seamCheckbox"] }, { kind: "component", type: i3.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnPreferencesComponent, deps: [{ token: THESEAM_DATATABLE }, { token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableColumnPreferencesComponent, isStandalone: false, selector: "seam-datatable-column-preferences", ngImport: i0, template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\">\n  <input\n    seamInput\n    [formControl]=\"_filterControl\"\n    seamInputSize=\"sm\"\n    placeholder=\"Search\"\n    seamAutoFocus\n  />\n</seam-form-field>\n\n<div\n  seamOverlayScrollbar\n  style=\"min-height: 200px; max-height: 600px; min-width: 250px\"\n  class=\"flex-grow-1 mb-2\"\n>\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox\n        [checked]=\"!col.hidden\"\n        (change)=\"_onChange($event, col)\"\n        >{{ col.name || col.prop }}</seam-checkbox\n      >\n    </ng-container>\n  </div>\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: i8.TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "component", type: i4$3.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: i4$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnPreferencesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnPreferencesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-datatable-column-preferences', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\" >\n  <input seamInput [formControl]=\"_filterControl\" seamInputSize=\"sm\" placeholder=\"Search\" seamAutoFocus>\n</seam-form-field>\n\n<div seamOverlayScrollbar style=\"min-height: 200px; max-height: 600px; min-width: 250px;\" class=\"flex-grow-1 mb-2\">\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox [checked]=\"!col.hidden\" (change)=\"_onChange($event, col)\">{{ col.name || col.prop }}</seam-checkbox>\n    </ng-container>\n  </div>\n\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'seam-datatable-column-preferences', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\">\n  <input\n    seamInput\n    [formControl]=\"_filterControl\"\n    seamInputSize=\"sm\"\n    placeholder=\"Search\"\n    seamAutoFocus\n  />\n</seam-form-field>\n\n<div\n  seamOverlayScrollbar\n  style=\"min-height: 200px; max-height: 600px; min-width: 250px\"\n  class=\"flex-grow-1 mb-2\"\n>\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox\n        [checked]=\"!col.hidden\"\n        (change)=\"_onChange($event, col)\"\n        >{{ col.name || col.prop }}</seam-checkbox\n      >\n    </ng-container>\n  </div>\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: DatatableComponent, decorators: [{
                     type: Inject,
                     args: [THESEAM_DATATABLE]
@@ -3561,12 +3845,12 @@ class DatatableColumnPreferencesButtonComponent {
     _resetColumns(event) {
         this._columnsAlterationsManager.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnPreferencesButtonComponent, deps: [{ token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableColumnPreferencesButtonComponent, isStandalone: false, selector: "seam-datatable-column-preferences-button", ngImport: i0, template: "<ng-template #colPrefsTpl>\n  <seam-datatable-column-preferences></seam-datatable-column-preferences>\n</ng-template>\n\n<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n  <button seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    [seamPopover]=\"colPrefsTpl\">\n    Show/Hide Columns\n  </button>\n\n  <button seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    (click)=\"_resetColumns($event)\">\n    Reset Columns\n  </button>\n</seam-menu>\n\n<button type=\"button\" class=\"btn btn-lightgray btn-sm\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"_actionMenuPositions || []\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Column Preferences\">\n  <seam-icon [icon]=\"icon\"></seam-icon>\n  <span class=\"sr-only\">Column Preferences</span>\n</button>\n\n", styles: [""], dependencies: [{ kind: "component", type: i4.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i5.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i11.TheSeamPopoverDirective, selector: "[seamPopover]", inputs: ["seamPopover", "seamPopoverContext", "seamPopoverBaseWidth", "seamPopoverDisabled"], exportAs: ["seamPopover"] }, { kind: "component", type: DatatableColumnPreferencesComponent, selector: "seam-datatable-column-preferences" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnPreferencesButtonComponent, deps: [{ token: ColumnsAlterationsManagerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableColumnPreferencesButtonComponent, isStandalone: false, selector: "seam-datatable-column-preferences-button", ngImport: i0, template: "<ng-template #colPrefsTpl>\n  <seam-datatable-column-preferences></seam-datatable-column-preferences>\n</ng-template>\n\n<seam-menu\n  #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\"\n>\n  <button\n    seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    [seamPopover]=\"colPrefsTpl\"\n  >\n    Show/Hide Columns\n  </button>\n\n  <button\n    seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    (click)=\"_resetColumns($event)\"\n  >\n    Reset Columns\n  </button>\n</seam-menu>\n\n<button\n  type=\"button\"\n  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>\n  <seam-icon [icon]=\"icon\"></seam-icon>\n  <span class=\"sr-only\">Column Preferences</span>\n</button>\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: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i2$3.TheSeamPopoverDirective, selector: "[seamPopover]", inputs: ["seamPopover", "seamPopoverContext", "seamPopoverBaseWidth", "seamPopoverDisabled"], exportAs: ["seamPopover"] }, { kind: "component", type: DatatableColumnPreferencesComponent, selector: "seam-datatable-column-preferences" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableColumnPreferencesButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnPreferencesButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-datatable-column-preferences-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template #colPrefsTpl>\n  <seam-datatable-column-preferences></seam-datatable-column-preferences>\n</ng-template>\n\n<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n  <button seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    [seamPopover]=\"colPrefsTpl\">\n    Show/Hide Columns\n  </button>\n\n  <button seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    (click)=\"_resetColumns($event)\">\n    Reset Columns\n  </button>\n</seam-menu>\n\n<button type=\"button\" class=\"btn btn-lightgray btn-sm\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"_actionMenuPositions || []\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Column Preferences\">\n  <seam-icon [icon]=\"icon\"></seam-icon>\n  <span class=\"sr-only\">Column Preferences</span>\n</button>\n\n" }]
+            args: [{ selector: 'seam-datatable-column-preferences-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template #colPrefsTpl>\n  <seam-datatable-column-preferences></seam-datatable-column-preferences>\n</ng-template>\n\n<seam-menu\n  #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\"\n>\n  <button\n    seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    [seamPopover]=\"colPrefsTpl\"\n  >\n    Show/Hide Columns\n  </button>\n\n  <button\n    seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    (click)=\"_resetColumns($event)\"\n  >\n    Reset Columns\n  </button>\n</seam-menu>\n\n<button\n  type=\"button\"\n  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>\n  <seam-icon [icon]=\"icon\"></seam-icon>\n  <span class=\"sr-only\">Column Preferences</span>\n</button>\n" }]
         }], ctorParameters: () => [{ type: ColumnsAlterationsManagerService }] });
 
 class DatatableExportButtonComponent {
@@ -3599,17 +3883,17 @@ class DatatableExportButtonComponent {
         }
         const export$ = combineLatest([
             this._datatable.rows$,
-            this._datatable.columns$.pipe(map(cols => cols.filter(c => !isInternalColumn(c))))
+            this._datatable.columns$.pipe(map((cols) => cols.filter((c) => !isInternalColumn(c)))),
         ]).pipe(take(1), map(([rows, columns]) => {
             if (exporter.skipDataMapping) {
                 return rows;
             }
             return this._mapExportData(columns || [], rows);
-        }), concatMap(data => exporter.export(data)), catchError(err => {
+        }), concatMap((data) => exporter.export(data)), catchError((err) => {
             // eslint-disable-next-line no-console
             console.error(err);
             return of(false);
-        }), tap(success => {
+        }), tap((success) => {
             if (success) {
                 this._toastr.success(`${exporter.label} export complete.`, 'Data Export');
             }
@@ -3646,16 +3930,16 @@ class DatatableExportButtonComponent {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableExportButtonComponent, deps: [{ token: THESEAM_DATATABLE }, { token: i1$2.ToastrService }, { token: i2$3.TheSeamLoadingOverlayService }, { token: i3$2.DynamicValueHelperService }, { token: THESEAM_DYNAMIC_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableExportButtonComponent, isStandalone: false, selector: "seam-datatable-export-button", inputs: { exporters: "exporters" }, ngImport: i0, template: "<seam-menu #menu>\n  <button *ngFor=\"let exp of exporters\"\n    seamMenuItem\n    [icon]=\"exp?.icon\"\n    (click)=\"_onExporterClicked(exp)\">\n    {{ exp.label }}\n  </button>\n</seam-menu>\n<button\n  [seamMenuToggle]=\"menu\"\n  seamButton\n  theme=\"lightgray\"\n  size=\"sm\"\n  class=\"dropdown-toggle\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Export\"\n  [disabled]=\"disabled\"\n  >\n  <seam-icon [icon]=\"icon\" class=\"mr-2\"></seam-icon>\n</button>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i5.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "component", type: i3$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableExportButtonComponent, deps: [{ token: THESEAM_DATATABLE }, { token: i1$2.ToastrService }, { token: i2$4.TheSeamLoadingOverlayService }, { token: i3$2.DynamicValueHelperService }, { token: THESEAM_DYNAMIC_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableExportButtonComponent, isStandalone: false, selector: "seam-datatable-export-button", inputs: { exporters: "exporters" }, ngImport: i0, template: "<seam-menu #menu>\n  <button\n    *ngFor=\"let exp of exporters\"\n    seamMenuItem\n    [icon]=\"exp?.icon\"\n    (click)=\"_onExporterClicked(exp)\"\n  >\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: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "component", type: i4$2.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableExportButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableExportButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-datatable-export-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<seam-menu #menu>\n  <button *ngFor=\"let exp of exporters\"\n    seamMenuItem\n    [icon]=\"exp?.icon\"\n    (click)=\"_onExporterClicked(exp)\">\n    {{ exp.label }}\n  </button>\n</seam-menu>\n<button\n  [seamMenuToggle]=\"menu\"\n  seamButton\n  theme=\"lightgray\"\n  size=\"sm\"\n  class=\"dropdown-toggle\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Export\"\n  [disabled]=\"disabled\"\n  >\n  <seam-icon [icon]=\"icon\" class=\"mr-2\"></seam-icon>\n</button>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'seam-datatable-export-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<seam-menu #menu>\n  <button\n    *ngFor=\"let exp of exporters\"\n    seamMenuItem\n    [icon]=\"exp?.icon\"\n    (click)=\"_onExporterClicked(exp)\"\n  >\n    {{ exp.label }}\n  </button>\n</seam-menu>\n<button\n  [seamMenuToggle]=\"menu\"\n  seamButton\n  theme=\"lightgray\"\n  size=\"sm\"\n  class=\"dropdown-toggle\"\n  style=\"padding-left: 10px; padding-right: 10px\"\n  title=\"Export\"\n  [disabled]=\"disabled\"\n>\n  <seam-icon [icon]=\"icon\" class=\"mr-2\"></seam-icon>\n</button>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: DatatableComponent, decorators: [{
                     type: Inject,
                     args: [THESEAM_DATATABLE]
-                }] }, { type: i1$2.ToastrService }, { type: i2$3.TheSeamLoadingOverlayService }, { type: i3$2.DynamicValueHelperService }, { type: undefined, decorators: [{
+                }] }, { type: i1$2.ToastrService }, { type: i2$4.TheSeamLoadingOverlayService }, { type: i3$2.DynamicValueHelperService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -3665,37 +3949,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class DatatableMenuBarColumnCenterComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarColumnCenterComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-center", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 auto;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarColumnCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableMenuBarColumnCenterComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-center", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 auto;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnCenterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarColumnCenterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-menu-bar-column-center', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 auto;justify-content:center}\n"] }]
         }] });
 
 class DatatableMenuBarColumnLeftComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarColumnLeftComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-left", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarColumnLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableMenuBarColumnLeftComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-left", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnLeftComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarColumnLeftComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-menu-bar-column-left', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-start}\n"] }]
         }] });
 
 class DatatableMenuBarColumnRightComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarColumnRightComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-right", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarColumnRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableMenuBarColumnRightComponent, isStandalone: false, selector: "seam-datatable-menu-bar-column-right", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarColumnRightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarColumnRightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-menu-bar-column-right', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-end}\n"] }]
         }] });
 
 class DatatableMenuBarRowComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarRowComponent, isStandalone: false, selector: "seam-datatable-menu-bar-row", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableMenuBarRowComponent, isStandalone: false, selector: "seam-datatable-menu-bar-row", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-menu-bar-row', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}\n"] }]
         }] });
@@ -3715,10 +3999,10 @@ class DatatableMenuBarTextComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarTextComponent, deps: [{ token: DatatableMenuBarComponent }, { token: THESEAM_MENUBAR_ITEM_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatatableMenuBarTextComponent, isStandalone: false, selector: "seam-datatable-menu-bar-text", inputs: { value: "value" }, ngImport: i0, template: "{{ value }}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarTextComponent, deps: [{ token: DatatableMenuBarComponent }, { token: THESEAM_MENUBAR_ITEM_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DatatableMenuBarTextComponent, isStandalone: false, selector: "seam-datatable-menu-bar-text", inputs: { value: "value" }, ngImport: i0, template: "{{ value }}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableMenuBarTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableMenuBarTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-menu-bar-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "{{ value }}\n" }]
         }], ctorParameters: () => [{ type: DatatableMenuBarComponent }, { type: undefined, decorators: [{
@@ -3793,16 +4077,16 @@ class DatatableActionMenuItemDirective {
         this._dynamicComponentLoader = _dynamicComponentLoader;
         this._http = _http;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuItemDirective, deps: [{ token: i1$3.Modal }, { token: i2$4.TheSeamDynamicComponentLoader }, { token: i3$3.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableActionMenuItemDirective, isStandalone: false, selector: "[seamDatatableActionMenuItem]", inputs: { label: "label", href: ["attr.href", "href"], target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", routerLink: "routerLink", confirmDialog: "confirmDialog", row: "row" }, outputs: { click: "click" }, host: { properties: { "class.list-group-item": "this._listGroupItem", "class.list-group-item-action": "this._listGroupItemAction" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableActionMenuItemDirective, deps: [{ token: i1$3.Modal }, { token: i2$5.TheSeamDynamicComponentLoader }, { token: i3$3.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: DatatableActionMenuItemDirective, isStandalone: false, selector: "[seamDatatableActionMenuItem]", inputs: { label: "label", href: ["attr.href", "href"], target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", routerLink: "routerLink", confirmDialog: "confirmDialog", row: "row" }, outputs: { click: "click" }, host: { properties: { "class.list-group-item": "this._listGroupItem", "class.list-group-item-action": "this._listGroupItemAction" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableActionMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDatatableActionMenuItem]',
-                    standalone: false
+                    standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i1$3.Modal }, { type: i2$4.TheSeamDynamicComponentLoader }, { type: i3$3.HttpClient, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.Modal }, { type: i2$5.TheSeamDynamicComponentLoader }, { type: i3$3.HttpClient, decorators: [{
                     type: Optional
                 }] }], propDecorators: { _listGroupItem: [{
                 type: HostBinding,
@@ -3857,16 +4141,26 @@ class DatatableActionMenuToggleDirective {
     _onClick(event) {
         this.toggle();
     }
-    _mouseDown(event) { this.onInputDown(event); }
-    _pointerDown(event) { this.onInputDown(event); }
-    _mouseUp(event) { this.onInputUp(event); }
-    _pointerUp(event) { this.onInputUp(event); }
+    _mouseDown(event) {
+        this.onInputDown(event);
+    }
+    _pointerDown(event) {
+        this.onInputDown(event);
+    }
+    _mouseUp(event) {
+        this.onInputUp(event);
+    }
+    _pointerUp(event) {
+        this.onInputUp(event);
+    }
     constructor(_elementRef, _viewContainerRef, _overlay) {
         this._elementRef = _elementRef;
         this._viewContainerRef = _viewContainerRef;
         this._overlay = _overlay;
     }
-    get active() { return this._active; }
+    get active() {
+        return this._active;
+    }
     toggle() {
         if (this._active) {
             this.disable();
@@ -3899,7 +4193,8 @@ class DatatableActionMenuToggleDirective {
         this._active = false;
     }
     getOverlayPosition(origin) {
-        const positionStrategy = this._overlay.position()
+        const positionStrategy = this._overlay
+            .position()
             .flexibleConnectedTo(origin)
             .withPositions(this.getPositions())
             .withFlexibleDimensions(false)
@@ -3947,15 +4242,15 @@ class DatatableActionMenuToggleDirective {
     onInputUp(event) {
         this._actionDown = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DatatableActionMenuToggleDirective, isStandalone: false, selector: "[seamDatatableActionMenuToggle]", inputs: { seamDatatableActionMenuToggle: "seamDatatableActionMenuToggle" }, host: { listeners: { "document:keydown": "_onKeydown($event)", "click": "_onClick($event)", "mousedown": "_mouseDown($event)", "pointerdown": "_pointerDown($event)", "mouseup": "_mouseUp($event)", "pointerup": "_pointerUp($event)" } }, exportAs: ["seamDatatableActionMenuToggle"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableActionMenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: DatatableActionMenuToggleDirective, isStandalone: false, selector: "[seamDatatableActionMenuToggle]", inputs: { seamDatatableActionMenuToggle: "seamDatatableActionMenuToggle" }, host: { listeners: { "document:keydown": "_onKeydown($event)", "click": "_onClick($event)", "mousedown": "_mouseDown($event)", "pointerdown": "_pointerDown($event)", "mouseup": "_mouseUp($event)", "pointerup": "_pointerUp($event)" } }, exportAs: ["seamDatatableActionMenuToggle"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatatableActionMenuToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableActionMenuToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDatatableActionMenuToggle]',
                     exportAs: 'seamDatatableActionMenuToggle',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$4.Overlay }], propDecorators: { seamDatatableActionMenuToggle: [{
                 type: Input
@@ -4012,12 +4307,12 @@ class TheSeamDatatableScrollbarHelperService {
     onInitScroller(scroller) {
         this._scrollbars.initializeInstance(scroller.parentElement, {
             callbacks: {
-                onScroll: e => {
+                onScroll: (e) => {
                     this._ngZone.run(() => {
                         scroller.onScrolled(e);
                     });
-                }
-            }
+                },
+            },
         });
     }
     onDestroyScroller(scroller) {
@@ -4026,26 +4321,28 @@ class TheSeamDatatableScrollbarHelperService {
     setOffset(scroller, offsetY) {
         this._ngZone.runOutsideAngular(() => {
             if (this.animatedScrolling) {
-                this._scrollbars.getInstance(scroller.parentElement)
+                this._scrollbars
+                    .getInstance(scroller.parentElement)
                     .scroll({ y: offsetY }, this.animatedScrollingTime);
             }
             else {
-                this._scrollbars.getInstance(scroller.parentElement)
+                this._scrollbars
+                    .getInstance(scroller.parentElement)
                     .scroll({ y: offsetY });
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, deps: [{ token: i0.NgZone }, { token: i1$5.TheSeamOverlayScrollbarsService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableScrollbarHelperService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, deps: [{ token: i0.NgZone }, { token: i1$5.TheSeamOverlayScrollbarsService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableScrollbarHelperService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableScrollbarHelperService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$5.TheSeamOverlayScrollbarsService }] });
 
 function withStoredColumnInfo(columns, preferenceColumns) {
     const _columns = [];
     for (const col of columns) {
-        const storedCol = preferenceColumns.find(v => v.prop === col.prop);
+        const storedCol = preferenceColumns.find((v) => v.prop === col.prop);
         if (storedCol) {
             const _col = { ...col };
             if (hasProperty(storedCol, 'width')) {
@@ -4062,8 +4359,8 @@ function withStoredColumnInfo(columns, preferenceColumns) {
 }
 
 class TheSeamDatatableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableModule, declarations: [DatatableComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableModule, declarations: [DatatableComponent,
             DatatableCellTplDirective,
             DatatableColumnComponent,
             DatatableActionMenuComponent,
@@ -4085,10 +4382,6 @@ class TheSeamDatatableModule {
             DatatableMenuBarColumnCenterComponent,
             DatatableMenuBarColumnRightComponent,
             DatatableMenuBarTextComponent,
-            DatatableColumnFilterMenuComponent,
-            DatatableColumnFilterSearchTextComponent,
-            DatatableColumnFilterSearchNumericComponent,
-            DatatableColumnFilterSearchDateComponent,
             DatatableColumnFilterTplDirective,
             TheSeamDatatableColumnFilterDirective], imports: [CommonModule,
             NgxDatatableModule,
@@ -4111,7 +4404,12 @@ class TheSeamDatatableModule {
             TheSeamTableCellTypeModule,
             TheSeamDataFiltersModule,
             NgSelectModule,
-            TheSeamToggleGroupModule], exports: [DatatableComponent,
+            TheSeamToggleGroupModule,
+            DatatableColumnHeaderComponent,
+            DatatableColumnFilterMenuComponent,
+            DatatableColumnFilterSearchTextComponent,
+            DatatableColumnFilterSearchNumericComponent,
+            DatatableColumnFilterSearchDateComponent], exports: [DatatableComponent,
             DatatableCellTplDirective,
             DatatableColumnComponent,
             DatatableActionMenuComponent,
@@ -4138,8 +4436,11 @@ class TheSeamDatatableModule {
             DatatableColumnFilterSearchDateComponent,
             DatatableColumnFilterTplDirective,
             TheSeamDatatableColumnFilterDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableModule, providers: [
-            { provide: ScrollbarHelper, useClass: TheSeamDatatableScrollbarHelperService },
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableModule, providers: [
+            {
+                provide: ScrollbarHelper,
+                useClass: TheSeamDatatableScrollbarHelperService,
+            },
         ], imports: [CommonModule,
             NgxDatatableModule,
             FontAwesomeModule,
@@ -4161,9 +4462,14 @@ class TheSeamDatatableModule {
             TheSeamTableCellTypeModule,
             TheSeamDataFiltersModule,
             NgSelectModule,
-            TheSeamToggleGroupModule] });
+            TheSeamToggleGroupModule,
+            DatatableColumnHeaderComponent,
+            DatatableColumnFilterMenuComponent,
+            DatatableColumnFilterSearchTextComponent,
+            DatatableColumnFilterSearchNumericComponent,
+            DatatableColumnFilterSearchDateComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDatatableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDatatableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4189,10 +4495,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         DatatableMenuBarColumnCenterComponent,
                         DatatableMenuBarColumnRightComponent,
                         DatatableMenuBarTextComponent,
-                        DatatableColumnFilterMenuComponent,
-                        DatatableColumnFilterSearchTextComponent,
-                        DatatableColumnFilterSearchNumericComponent,
-                        DatatableColumnFilterSearchDateComponent,
                         DatatableColumnFilterTplDirective,
                         TheSeamDatatableColumnFilterDirective,
                     ],
@@ -4219,6 +4521,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         TheSeamDataFiltersModule,
                         NgSelectModule,
                         TheSeamToggleGroupModule,
+                        DatatableColumnHeaderComponent,
+                        DatatableColumnFilterMenuComponent,
+                        DatatableColumnFilterSearchTextComponent,
+                        DatatableColumnFilterSearchNumericComponent,
+                        DatatableColumnFilterSearchDateComponent,
                     ],
                     exports: [
                         DatatableComponent,
@@ -4250,7 +4557,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         TheSeamDatatableColumnFilterDirective,
                     ],
                     providers: [
-                        { provide: ScrollbarHelper, useClass: TheSeamDatatableScrollbarHelperService },
+                        {
+                            provide: ScrollbarHelper,
+                            useClass: TheSeamDatatableScrollbarHelperService,
+                        },
                     ],
                 }]
         }] });
@@ -4259,5 +4569,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CURRENT_DATATABLE_PREFERENCES_VERSION, ColumnsAlteration, ColumnsDataFilter, ColumnsFiltersService, DatatableActionMenuComponent, DatatableActionMenuItemComponent, DatatableActionMenuItemDirective, DatatableActionMenuToggleDirective, DatatableCellTplDirective, DatatableColumnChangesService, DatatableColumnComponent, DatatableColumnFilterMenuComponent, DatatableColumnFilterSearchDateComponent, DatatableColumnFilterSearchNumericComponent, DatatableColumnFilterSearchTextComponent, DatatableColumnFilterTplDirective, DatatableColumnPreferencesButtonComponent, DatatableColumnPreferencesComponent, DatatableComponent, DatatableDataSource, DatatableExportButtonComponent, DatatableFilterDirective, DatatableFooterTplDirective, DatatableGqlDataSource, DatatableMenuBarColumnCenterComponent, DatatableMenuBarColumnLeftComponent, DatatableMenuBarColumnRightComponent, DatatableMenuBarComponent, DatatableMenuBarRowComponent, DatatableMenuBarTextComponent, DatatablePreferencesService, DatatableRowActionItemDirective, DatatableRowDetailTplDirective, EMPTY_DATATABLE_PREFERENCES, SearchDateColumnsDataFilter, SearchNumericColumnsDataFilter, SearchTextColumnsDataFilter, THESEAM_COLUMNS_DATA_FILTER, THESEAM_COLUMNS_DATA_FILTERS_DEFAULT, THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES, THESEAM_DATATABLE, THESEAM_DATATABLE_CONFIG, THESEAM_DATATABLE_PREFERENCES_ACCESSOR, THESEAM_MENUBAR_ITEM_DATA, TheSeamDatatableColumnFilterDirective, TheSeamDatatableFooterDirective, TheSeamDatatableModule, TheSeamDatatableRowDetailDirective, TheSeamDatatableScrollbarHelperService, _THESEAM_DATATABLE, _THESEAM_DATATABLE_ACCESSOR, _THESEAM_DATA_FILTER_CONTAINER, getFormattedDateForComparison, mapColumnsAlterationsStates, withStoredColumnInfo };
+export { CURRENT_DATATABLE_PREFERENCES_VERSION, ColumnsAlteration, ColumnsDataFilter, ColumnsFiltersService, DatatableActionMenuComponent, DatatableActionMenuItemComponent, DatatableActionMenuItemDirective, DatatableActionMenuToggleDirective, DatatableCellTplDirective, DatatableColumnChangesService, DatatableColumnComponent, DatatableColumnFilterMenuComponent, DatatableColumnFilterSearchDateComponent, DatatableColumnFilterSearchNumericComponent, DatatableColumnFilterSearchTextComponent, DatatableColumnFilterTplDirective, DatatableColumnPreferencesButtonComponent, DatatableColumnPreferencesComponent, DatatableComponent, DatatableDataSource, DatatableExportButtonComponent, DatatableFilterDirective, DatatableFooterTplDirective, DatatableGqlDataSource, DatatableMenuBarColumnCenterComponent, DatatableMenuBarColumnLeftComponent, DatatableMenuBarColumnRightComponent, DatatableMenuBarComponent, DatatableMenuBarRowComponent, DatatableMenuBarTextComponent, DatatablePreferencesService, DatatableRowActionItemDirective, DatatableRowDetailTplDirective, EMPTY_DATATABLE_PREFERENCES, SearchDateColumnsDataFilter, SearchNumericColumnsDataFilter, SearchTextColumnsDataFilter, THESEAM_COLUMNS_DATA_FILTER, THESEAM_COLUMNS_DATA_FILTERS_DEFAULT, THESEAM_COLUMNS_DATA_FILTER_DATE_RANGE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_DATE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_DATE_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_RANGE_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_NUMERIC_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_NAME, THESEAM_COLUMNS_DATA_FILTER_TEXT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_SELECT_SEARCH_TYPES, THESEAM_COLUMNS_DATA_FILTER_TEXT_TEXT_SEARCH_TYPES, THESEAM_DATATABLE, THESEAM_DATATABLE_CONFIG, THESEAM_DATATABLE_PREFERENCES_ACCESSOR, THESEAM_MENUBAR_ITEM_DATA, TheSeamDatatableColumnFilterDirective, TheSeamDatatableFooterDirective, TheSeamDatatableModule, TheSeamDatatableRowDetailDirective, TheSeamDatatableScrollbarHelperService, _THESEAM_DATATABLE, _THESEAM_DATATABLE_ACCESSOR, _THESEAM_DATA_FILTER_CONTAINER, getFormattedDateForComparison, isColumnBoundToProp, mapColumnsAlterationsStates, withStoredColumnInfo };
 //# sourceMappingURL=theseam-ui-common-datatable.mjs.map