@theseam/ui-common 1.0.0-beta.10 → 1.0.0-beta.12

package/datatable/index.d.ts

@@ -2,7 +2,7 @@ import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { CollectionViewer, DataSource, ListRange } from '@angular/cdk/collections';
 import * as i0 from '@angular/core';
-import { EventEmitter, QueryList, TemplateRef, OnChanges, PipeTransform, SimpleChanges, InjectionToken, KeyValueDiffers, OnInit, OnDestroy, ChangeDetectorRef, ElementRef, ViewContainerRef, NgZone } from '@angular/core';
+import { EventEmitter, QueryList, OnChanges, TemplateRef, PipeTransform, SimpleChanges, InjectionToken, KeyValueDiffers, OnInit, OnDestroy, ChangeDetectorRef, ElementRef, ViewContainerRef, NgZone } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import * as i26 from '@marklb/ngx-datatable';
@@ -95,24 +95,9 @@ declare class DatatableActionMenuComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<DatatableActionMenuComponent, "seam-datatable-action-menu", ["seamDatatableActionMenu"], { "isSubMenu": { "alias": "isSubMenu"; "required": false; }; }, {}, ["items"], never, false, never>;
 }
 
-declare class DatatableCellTplDirective {
-    template: TemplateRef<any>;
-    constructor(template: TemplateRef<any>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableCellTplDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableCellTplDirective, "[seamDatatableCellTpl]", never, {}, {}, never, never, false, never>;
-}
-
-declare class DatatableColumnChangesService {
-    private columnInputChanges;
-    get columnInputChanges$(): Observable<undefined>;
-    onInputChange(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableColumnChangesService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DatatableColumnChangesService>;
-}
-
 type _PipeTransform = PipeTransform | PipeTransform;
 declare class DatatableColumnComponent implements OnChanges {
-    private _columnChangesService;
+    private readonly _columnChangesService;
     name?: string | null;
     prop?: TableColumnProp | null;
     flexGrow?: number | null;
@@ -141,16 +126,14 @@ declare class DatatableColumnComponent implements OnChanges {
     alignHeader?: 'left' | 'center' | 'right' | null;
     alignCell?: 'left' | 'center' | 'right' | null;
     private _isFirstChange;
-    cellTplDirective?: DatatableCellTplDirective;
     _cellTemplateInput?: TemplateRef<any> | null;
-    _cellTemplateQuery?: TemplateRef<any>;
+    set _setCellTemplateQuery(value: TemplateRef<any> | null);
+    _cellTemplateQuery?: TemplateRef<any> | null;
     get cellTemplate(): TemplateRef<any> | undefined | null;
     readonly __propsChanged: string[];
-    constructor(_columnChangesService: DatatableColumnChangesService);
     ngOnChanges(changes: SimpleChanges): void;
-    getCellDirective(): DatatableCellTplDirective | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatatableColumnComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatatableColumnComponent, "seam-datatable-column", never, { "name": { "alias": "name"; "required": false; }; "prop": { "alias": "prop"; "required": false; }; "flexGrow": { "alias": "flexGrow"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "width": { "alias": "width"; "required": false; }; "resizeable": { "alias": "resizeable"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "canAutoResize": { "alias": "canAutoResize"; "required": false; }; "comparator": { "alias": "comparator"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "checkboxable": { "alias": "checkboxable"; "required": false; }; "headerCheckboxable": { "alias": "headerCheckboxable"; "required": false; }; "headerClass": { "alias": "headerClass"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "frozenLeft": { "alias": "frozenLeft"; "required": false; }; "frozenRight": { "alias": "frozenRight"; "required": false; }; "pipe": { "alias": "pipe"; "required": false; }; "isTreeColumn": { "alias": "isTreeColumn"; "required": false; }; "treeLevelIndent": { "alias": "treeLevelIndent"; "required": false; }; "summaryFunc": { "alias": "summaryFunc"; "required": false; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "align": { "alias": "align"; "required": false; }; "alignHeader": { "alias": "alignHeader"; "required": false; }; "alignCell": { "alias": "alignCell"; "required": false; }; "_cellTemplateInput": { "alias": "cellTemplate"; "required": false; }; }, {}, ["cellTplDirective", "_cellTemplateQuery"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatatableColumnComponent, "seam-datatable-column", never, { "name": { "alias": "name"; "required": false; }; "prop": { "alias": "prop"; "required": false; }; "flexGrow": { "alias": "flexGrow"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "width": { "alias": "width"; "required": false; }; "resizeable": { "alias": "resizeable"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "canAutoResize": { "alias": "canAutoResize"; "required": false; }; "comparator": { "alias": "comparator"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "checkboxable": { "alias": "checkboxable"; "required": false; }; "headerCheckboxable": { "alias": "headerCheckboxable"; "required": false; }; "headerClass": { "alias": "headerClass"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "frozenLeft": { "alias": "frozenLeft"; "required": false; }; "frozenRight": { "alias": "frozenRight"; "required": false; }; "pipe": { "alias": "pipe"; "required": false; }; "isTreeColumn": { "alias": "isTreeColumn"; "required": false; }; "treeLevelIndent": { "alias": "treeLevelIndent"; "required": false; }; "summaryFunc": { "alias": "summaryFunc"; "required": false; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "align": { "alias": "align"; "required": false; }; "alignHeader": { "alias": "alignHeader"; "required": false; }; "alignCell": { "alias": "alignCell"; "required": false; }; "_cellTemplateInput": { "alias": "cellTemplate"; "required": false; }; }, {}, ["_setCellTemplateQuery"], never, false, never>;
 }
 /**
  * Check if a column is bound to a property.
@@ -329,6 +312,14 @@ interface TheSeamDatatableAccessor {
     pageInfo: TheSeamPageInfo;
 }
 
+declare class DatatableColumnChangesService {
+    private columnInputChanges;
+    get columnInputChanges$(): Observable<undefined>;
+    onInputChange(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableColumnChangesService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DatatableColumnChangesService>;
+}
+
 interface ColumnsDataFilterStateState<T = any, O = any> {
     prop?: string;
     formValue?: Partial<T>;
@@ -1239,6 +1230,13 @@ declare class DatatableActionMenuToggleDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableActionMenuToggleDirective, "[seamDatatableActionMenuToggle]", ["seamDatatableActionMenuToggle"], { "seamDatatableActionMenuToggle": { "alias": "seamDatatableActionMenuToggle"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+declare class DatatableCellTplDirective {
+    template: TemplateRef<any>;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableCellTplDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableCellTplDirective, "[seamDatatableCellTpl]", never, {}, {}, never, never, false, never>;
+}
+
 declare class DatatableColumnFilterTplDirective {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);

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, input, inject, ChangeDetectorRef, ElementRef, HostListener, HostBinding, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ContentChildren, ViewChild, Directive, Injectable, inject, TemplateRef, ContentChild, Self, Inject, forwardRef, InjectionToken, Optional, isDevMode, input, 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';
@@ -260,10 +260,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             type: Injectable
         }] });
 
-// TODO: The column component should implement `ITheSeamDatatableColumn`, since
+// TODO: The column component should implement `TheSeamDatatableColumn`, since
 // providing some properties by input and some by template could be confusing.
 class DatatableColumnComponent {
-    _columnChangesService;
+    _columnChangesService = inject(DatatableColumnChangesService);
     name;
     prop;
     flexGrow;
@@ -292,31 +292,19 @@ class DatatableColumnComponent {
     alignHeader;
     alignCell;
     _isFirstChange = true;
-    cellTplDirective;
     // eslint-disable-next-line @angular-eslint/no-input-rename
     _cellTemplateInput;
+    set _setCellTemplateQuery(value) {
+        this._cellTemplateQuery = value;
+        if (!this.__propsChanged.includes('cellTemplate')) {
+            this.__propsChanged.push('cellTemplate');
+        }
+    }
     _cellTemplateQuery;
     get cellTemplate() {
         return this._cellTemplateInput || this._cellTemplateQuery;
     }
-    // @Input('headerTemplate')
-    // _headerTemplateInput: TemplateRef<any>;
-    // @ContentChild(DataTableColumnHeaderDirective, { read: TemplateRef, static: true })
-    // _headerTemplateQuery: TemplateRef<any>;
-    // get headerTemplate(): TemplateRef<any> {
-    //   return this._headerTemplateInput || this._headerTemplateQuery;
-    // }
-    // @Input('treeToggleTemplate')
-    // _treeToggleTemplateInput: TemplateRef<any>;
-    // @ContentChild(DataTableColumnCellTreeToggle, { read: TemplateRef, static: true })
-    // _treeToggleTemplateQuery: TemplateRef<any>;
-    // get treeToggleTemplate(): TemplateRef<any> {
-    //   return this._treeToggleTemplateInput || this._treeToggleTemplateQuery;
-    // }
     __propsChanged = [];
-    constructor(_columnChangesService) {
-        this._columnChangesService = _columnChangesService;
-    }
     ngOnChanges(changes) {
         if (this._isFirstChange) {
             this._isFirstChange = false;
@@ -332,19 +320,13 @@ class DatatableColumnComponent {
             }
         }
     }
-    getCellDirective() {
-        if (this.cellTplDirective) {
-            return this.cellTplDirective;
-        }
-        return null;
-    }
-    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: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnComponent, deps: [], 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: "_setCellTemplateQuery", 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.7", ngImport: i0, type: DatatableColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-datatable-column', standalone: false, template: "<p>datatable-column works!</p>\n" }]
-        }], ctorParameters: () => [{ type: DatatableColumnChangesService }], propDecorators: { name: [{
+        }], propDecorators: { name: [{
                 type: Input
             }], prop: [{
                 type: Input
@@ -398,13 +380,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 type: Input
             }], alignCell: [{
                 type: Input
-            }], cellTplDirective: [{
-                type: ContentChild,
-                args: [DatatableCellTplDirective, { static: true }]
             }], _cellTemplateInput: [{
                 type: Input,
                 args: ['cellTemplate']
-            }], _cellTemplateQuery: [{
+            }], _setCellTemplateQuery: [{
                 type: ContentChild,
                 args: [DatatableCellTplDirective, { read: TemplateRef, static: true }]
             }] } });
@@ -2793,7 +2772,7 @@ class DatatableColumnHeaderComponent {
     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.justify-content-center": "column().alignHeader === \"center\"", "class.justify-content-end": "column().alignHeader === \"right\"" }, classAttribute: "d-inline-flex align-items-center flex-fill" }, 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"] }] });
+    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,
@@ -2804,7 +2783,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         TheSeamIconModule,
                         DatatableColumnFilterMenuComponent,
                     ], host: {
-                        class: 'd-inline-flex align-items-center flex-fill',
+                        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"] }]