@theseam/ui-common 0.4.29 → 0.4.30

package/framework/top-bar/top-bar.module.d.ts

@@ -5,15 +5,17 @@ import * as i3 from "./top-bar-menu-button/top-bar-menu-button.component";
 import * as i4 from "./top-bar-menu.directive";
 import * as i5 from "./top-bar-item.directive";
 import * as i6 from "./top-bar-menu-btn-detail.directive";
-import * as i7 from "@angular/common";
-import * as i8 from "@theseam/ui-common/layout";
-import * as i9 from "@theseam/ui-common/buttons";
-import * as i10 from "@theseam/ui-common/icon";
-import * as i11 from "@theseam/ui-common/menu";
-import * as i12 from "../base-layout/base-layout.module";
-import * as i13 from "@angular/router";
+import * as i7 from "./top-bar-compact-menu-btn-detail.directive";
+import * as i8 from "./top-bar-nav-toggle-btn-detail.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "@theseam/ui-common/layout";
+import * as i11 from "@theseam/ui-common/buttons";
+import * as i12 from "@theseam/ui-common/icon";
+import * as i13 from "@theseam/ui-common/menu";
+import * as i14 from "../base-layout/base-layout.module";
+import * as i15 from "@angular/router";
 export declare class TheSeamTopBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTopBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamTopBarModule, [typeof i1.TheSeamTopBarComponent, typeof i2.TopBarTitleComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective], [typeof i7.CommonModule, typeof i8.TheSeamLayoutModule, typeof i9.TheSeamButtonsModule, typeof i10.TheSeamIconModule, typeof i11.TheSeamMenuModule, typeof i12.TheSeamBaseLayoutModule, typeof i13.RouterModule], [typeof i1.TheSeamTopBarComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i11.TheSeamMenuModule, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamTopBarModule, [typeof i1.TheSeamTopBarComponent, typeof i2.TopBarTitleComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective, typeof i7.TopBarCompactMenuBtnDetailDirective, typeof i8.TopBarNavToggleBtnDetailDirective], [typeof i9.CommonModule, typeof i10.TheSeamLayoutModule, typeof i11.TheSeamButtonsModule, typeof i12.TheSeamIconModule, typeof i13.TheSeamMenuModule, typeof i14.TheSeamBaseLayoutModule, typeof i15.RouterModule], [typeof i1.TheSeamTopBarComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i13.TheSeamMenuModule, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective, typeof i7.TopBarCompactMenuBtnDetailDirective, typeof i8.TopBarNavToggleBtnDetailDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamTopBarModule>;
 }

package/graphql/datatable/datatable-graphql.service.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  * rest should be common options shared by all our app's datatables. This may
  * change if it is determined to be too restrictive.
  */
-export type DatatableQueryOptions<TVariables = OperationVariables, TData = any> = Pick<WatchQueryOptions<TVariables, TData>, 'query'> & Pick<WatchQueryOptions<TVariables, TData>, 'variables'> & Pick<WatchQueryOptions<TVariables, TData>, 'context'>;
+export type DatatableQueryOptions<TVariables extends OperationVariables = OperationVariables, TData = any> = Pick<WatchQueryOptions<TVariables, TData>, 'query'> & Pick<WatchQueryOptions<TVariables, TData>, 'variables'> & Pick<WatchQueryOptions<TVariables, TData>, 'context'>;
 export interface DatatableGraphqlServiceConfig {
     /**
      * Polling interval time in milliseconds.

package/graphql/datatable/index.d.ts

@@ -4,3 +4,6 @@ export * from './datatable-graphql-query-ref';
 export * from './map-filter-states';
 export * from './mapper-context';
 export * from './get-page-info';
+export * from './map-search-date-columns-data-filter-state-to-gql';
+export * from './map-search-numeric-columns-data-filter-state-to-gql';
+export * from './map-search-text-columns-data-filter-state-to-gql';

package/graphql/datatable/map-filter-states.d.ts

@@ -8,8 +8,8 @@ export interface FilterStateMapperFilter {
     [name: string]: any;
 }
 export type FilterStateMapperResult = {
-    filter?: FilterStateMapperFilter | undefined | null;
-    variables?: FilterStateMapperVariables | undefined | null;
+    filter: FilterStateMapperFilter;
+    variables: FilterStateMapperVariables;
 } | null;
 export type FilterStateMapper = (filterState: DataFilterState, context: MapperContext) => (FilterStateMapperResult | Promise<FilterStateMapperResult> | Observable<FilterStateMapperResult>);
 export interface FilterStateMappers {

package/graphql/datatable/map-search-date-columns-data-filter-state-to-gql.d.ts

@@ -0,0 +1,4 @@
+import { ColumnsDataFilterState, TheSeamColumnsDataFilterDateSearchFormState, TheSeamColumnsDataFilterDateSearchOptions } from "@theseam/ui-common/datatable";
+import { FilterStateMapperResult } from "./map-filter-states";
+import { MapperContext } from "./mapper-context";
+export declare const mapSearchDateColumnsDataFilterStateToGql: (filterState: ColumnsDataFilterState<TheSeamColumnsDataFilterDateSearchFormState, TheSeamColumnsDataFilterDateSearchOptions>, context: MapperContext<any>) => FilterStateMapperResult;

package/graphql/datatable/map-search-numeric-columns-data-filter-state-to-gql.d.ts

@@ -0,0 +1,4 @@
+import { ColumnsDataFilterState, TheSeamColumnsDataFilterNumericSearchFormState } from "@theseam/ui-common/datatable";
+import { FilterStateMapperResult } from "./map-filter-states";
+import { MapperContext } from "./mapper-context";
+export declare const mapSearchNumericColumnsDataFilterStateToGql: (filterState: ColumnsDataFilterState<TheSeamColumnsDataFilterNumericSearchFormState>, context: MapperContext<any>) => FilterStateMapperResult;

package/graphql/datatable/map-search-text-columns-data-filter-state-to-gql.d.ts

@@ -0,0 +1,4 @@
+import { ColumnsDataFilterState, TheSeamColumnsDataFilterTextSearchFormState } from "@theseam/ui-common/datatable";
+import { FilterStateMapperResult } from "./map-filter-states";
+import { MapperContext } from "./mapper-context";
+export declare const mapSearchTextColumnsDataFilterStateToGql: (filterState: ColumnsDataFilterState<TheSeamColumnsDataFilterTextSearchFormState>, context: MapperContext<any>) => FilterStateMapperResult;

package/layout/layout.service.d.ts

@@ -5,11 +5,19 @@ import * as i0 from "@angular/core";
 export declare class TheSeamLayoutService {
     private _media;
     /**
-     * Is app a mobile-like size.
+     * Observes if app is a mobile-like size.
+     * Default mobile breakpoint is <= 599px,
+     * use setMobileBreakpoint() to change size.
      */
     isMobile$: Observable<boolean>;
+    private _mobileBreakpoint;
+    mobileBreakpoint$: Observable<MediaQueryAliases>;
     constructor(_media: MediaObserver);
     observe(alias: MediaQueryAliases): Observable<boolean>;
+    /**
+     * Update breakpoint observed by isMobile$
+     */
+    setMobileBreakpoint(alias: MediaQueryAliases): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamLayoutService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<TheSeamLayoutService>;
 }

package/menu/menu-toggle.directive.d.ts

@@ -30,6 +30,7 @@ export declare class MenuToggleDirective implements OnDestroy, AfterContentInit
     set positions(val: ConnectionPositionPair[]);
     get positions(): ConnectionPositionPair[];
     private _positions;
+    readonly menuToggle: EventEmitter<boolean>;
     seamMenuTogglePositionsOffsetY: number;
     /** Event emitted when the associated menu is opened. */
     readonly menuOpened: EventEmitter<void>;
@@ -78,5 +79,5 @@ export declare class MenuToggleDirective implements OnDestroy, AfterContentInit
     /** Handles the cases where the user hovers over the trigger. */
     private _handleHover;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuToggleDirective, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuToggleDirective, "[seamMenuToggle]", ["seamMenuToggle"], { "menu": "seamMenuToggle"; "positions": "positions"; "seamMenuTogglePositionsOffsetY": "seamMenuTogglePositionsOffsetY"; }, { "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuToggleDirective, "[seamMenuToggle]", ["seamMenuToggle"], { "menu": "seamMenuToggle"; "positions": "positions"; "seamMenuTogglePositionsOffsetY": "seamMenuTogglePositionsOffsetY"; }, { "menuToggle": "menuToggle"; "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theseam/ui-common",
-  "version": "0.4.29",
+  "version": "0.4.30",
   "peerDependencies": {
     "@angular/cdk": "^15.0.0",
     "@angular/common": "^15.0.0",
@@ -18,11 +18,11 @@
   "dependencies": {
     "@fortawesome/angular-fontawesome": "~0.9.0",
     "@marklb/file-type": "~10.6.5",
-    "@marklb/ngx-datatable": "18.0.3",
+    "@marklb/ngx-datatable": "~18.0.5",
     "@marklb/ngx-loading": "^10.0.0",
     "@ng-select/ng-select": "~6.1.0",
     "@ng-bootstrap/ng-bootstrap": "~9.1.1",
-    "apollo-angular": "^2.6.0",
+    "apollo-angular": "^4.2.1",
     "overlayscrollbars": "~1.7.3",
     "@types/overlayscrollbars": "~1.7.0",
     "bootstrap": "~4.6.0",

package/popover/popover/popover.component.d.ts

@@ -1,6 +1,7 @@
 import { AnimationEvent } from '@angular/animations';
 import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
+import { TheSeamPopoverDirective } from '../popover.directive';
 import * as i0 from "@angular/core";
 export declare class PopoverComponent implements OnInit, OnDestroy {
     private _changeDetectorRef;
@@ -25,6 +26,8 @@ export declare class PopoverComponent implements OnInit, OnDestroy {
     get _tabindex(): number;
     template: TemplateRef<any> | undefined | null;
     popoverClass: string | undefined | null;
+    popover: TheSeamPopoverDirective | undefined | null;
+    popoverContext: any;
     /**
      * Defines a width for a popover that will scale down if the window innerWidth is
      * smaller than the value.
@@ -43,5 +46,5 @@ export declare class PopoverComponent implements OnInit, OnDestroy {
     /** Handle a keyboard event from the menu, delegating to the appropriate action. */
     _handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "seam-popover", never, { "template": "template"; "popoverClass": "popoverClass"; "baseWidth": "baseWidth"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "seam-popover", never, { "template": "template"; "popoverClass": "popoverClass"; "popover": "popover"; "popoverContext": "popoverContext"; "baseWidth": "baseWidth"; }, {}, never, never, false, never>;
 }

package/popover/popover.directive.d.ts

@@ -9,6 +9,7 @@ export declare class TheSeamPopoverDirective implements OnDestroy {
     private _focusMonitor;
     private readonly _ngUnsubscribe;
     seamPopover?: TemplateRef<any> | null;
+    seamPopoverContext?: any;
     /**
      * Defines a width for a popover that will scale down if the window innerWidth is
      * smaller than the value.
@@ -56,5 +57,5 @@ export declare class TheSeamPopoverDirective implements OnDestroy {
     /** Returns a stream that emits whenever an action that should close the popover occurs. */
     private _popoverClosingActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamPopoverDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TheSeamPopoverDirective, "[seamPopover]", ["seamPopover"], { "seamPopover": "seamPopover"; "seamPopoverBaseWidth": "seamPopoverBaseWidth"; "seamPopoverDisabled": "seamPopoverDisabled"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TheSeamPopoverDirective, "[seamPopover]", ["seamPopover"], { "seamPopover": "seamPopover"; "seamPopoverContext": "seamPopoverContext"; "seamPopoverBaseWidth": "seamPopoverBaseWidth"; "seamPopoverDisabled": "seamPopoverDisabled"; }, {}, never, never, false, never>;
 }

package/styles/vendor/ngx-datatable/_ngx-datatable.scss

@@ -142,17 +142,19 @@
   .datatable-header,
   .datatable-body {
     .datatable-row-left {
-      background-color: $datatable-background;
-      background-position: 100% 0;
-      background-repeat: repeat-y;
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==);
+      background-color: $datatable-left-background;
+    }
+
+    .datatable-row-even .datatable-row-left {
+      background-color: $datatable-left-row-even-background;
     }
 
     .datatable-row-right {
-      background-position: 0 0;
-      background-color: $datatable-background;
-      background-repeat: repeat-y;
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==);
+      background-color: $datatable-right-background;
+    }
+
+    .datatable-row-even .datatable-row-right {
+      background-color: $datatable-right-row-even-background;
     }
   }
 
@@ -175,6 +177,11 @@
       font-size: $datatable-header-cell-font-size;
       font-weight: $datatable-header-cell-font-weight;
 
+      .datatable-header-cell-template-wrap {
+        display: flex;
+        align-items: center;
+      }
+
       .datatable-header-cell-wrapper {
         position: relative;
       }
@@ -217,6 +224,27 @@
           border-right: none;
         }
       }
+
+      .datatable-column-header-filter-button {
+        position: relative;
+        color: $datatable-column-header-filter-button-color;
+        &.datatable-column-header-filter-button-active {
+          color: $datatable-column-header-filter-button-active-color;
+          &::before {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: -3px;
+            width: 6px;
+            height: 6px;
+            border-radius: 100%;
+            background: $datatable-column-header-filter-button-active-badge-color;
+          }
+          seam-icon {
+            clip-path: path('M6,0C6,5 12,6 16,3L16,16L0,16L0,0L6,0Z');
+          }
+        }
+      }
     }
 
     .datatable-column-header-separator {
@@ -268,6 +296,9 @@
         color: $datatable-body-cell-color;
         font-size: $datatable-body-cell-font-size;
         font-weight: $datatable-body-cell-font-weight;
+        .datatable-body-cell-label {
+          height: 100%;
+        }
       }
       .datatable-body-group-cell {
         vertical-align: top;
@@ -476,13 +507,51 @@
 // }
 
 .datatable-action-button {
-  color: $datatable-action-button-color;
-  background-color: $datatable-action-button-background;
-  box-shadow: $datatable-action-button-box-shadow;
-  &:hover {
-    color: $datatable-action-button-hover-color;
-    background-color: $datatable-action-button-hover-background;
+  flex: 0 0 auto;
+
+  @if $datatable-action-button-outline {
+    @include button-outline-variant(
+      $color: $datatable-action-button-outline-color,
+      $color-hover: $datatable-action-button-outline-color-hover,
+      $active-background: $datatable-action-button-outline-active-background,
+      $active-border: $datatable-action-button-outline-active-border
+    );
+
+    // allow variable override for outline button bg
+    background: $datatable-action-button-outline-background;
+
+  } @else {
+    @include button-variant(
+      $background: $datatable-action-button-background,
+      $border: $datatable-action-button-border,
+      $hover-background: $datatable-action-button-hover-background,
+      $hover-border: $datatable-action-button-hover-border,
+      $active-background: $datatable-action-button-active-background,
+      $active-border: $datatable-action-button-active-border
+    );
+
+    // allow variable override for solid button color
+    color: $datatable-action-button-color;
+
+    &:hover {
+      color: $datatable-action-button-hover-color;
+    }
+
+    &:not(:disabled):not(.disabled):active {
+      color: $datatable-action-button-active-color;
+    }
   }
+
+  box-shadow: $datatable-action-button-box-shadow;
+  font-size: $datatable-action-button-font-size;
+  line-height: $datatable-action-button-line-height;
+
+  width: $datatable-action-button-width;
+  height: $datatable-action-button-height;
+
+  padding: $datatable-action-button-padding;
+  border-radius: $datatable-action-button-border-radius;
+  text-align: $datatable-action-button-text-align;
 }
 
 /**

package/styles/vendor/ngx-datatable/_themes/bootstrap/_variables.scss

@@ -10,8 +10,12 @@ $datatable-color: $body-color !default;
 
 // common datatable colors
 $datatable-background: $white !default;
-$datatable-box-shadow: none !default;
 $datatable-row-even-background: rgba(0, 0, 0, 0.05) !default;
+$datatable-left-background: transparent !default;
+$datatable-left-row-even-background: $datatable-left-background !default;
+$datatable-right-background: transparent !default;
+$datatable-right-row-even-background: $datatable-right-background !default;
+$datatable-box-shadow: none !default;
 
 // default row and cell background colors
 $datatable-default-background: $white !default;
@@ -167,8 +171,39 @@ $datatable-summary-row-background: #ddd !default;
 $datatable-summary-row-background-hover: #ddd !default;
 $datatable-summary-row-font-weight: bold !default;
 
-$datatable-action-button-color: $body-color !default;
-$datatable-action-button-background: transparent !default;
+// Action Menu Button Styles
+$datatable-action-button-background: $primary !default;
+$datatable-action-button-border: $datatable-action-button-background !default;
+$datatable-action-button-hover-background: darken($datatable-action-button-background, 7.5%) !default;
+$datatable-action-button-hover-border: darken($datatable-action-button-border, 10%) !default;
+$datatable-action-button-active-background: darken($datatable-action-button-background, 10%) !default;
+$datatable-action-button-active-border: darken($datatable-action-button-border, 12.5%) !default;
+
+$datatable-action-button-color: color-yiq($datatable-action-button-background) !default;
+$datatable-action-button-hover-color: color-yiq($datatable-action-button-hover-background) !default;
+$datatable-action-button-active-color: color-yiq($datatable-action-button-active-background) !default;
+
+$datatable-action-button-outline: false !default;
+$datatable-action-button-outline-color: $datatable-action-button-background !default;
+$datatable-action-button-outline-color-hover: color-yiq($datatable-action-button-outline-color) !default;
+$datatable-action-button-outline-active-background: $datatable-action-button-outline-color !default;
+$datatable-action-button-outline-active-border: $datatable-action-button-outline-color !default;
+
+$datatable-action-button-outline-background: transparent !default;
+
 $datatable-action-button-box-shadow: none !default;
+$datatable-action-button-font-size: 20px !default;
+$datatable-action-button-line-height: 1 !default;
+$datatable-action-button-size: 30px !default;
+$datatable-action-button-width: $datatable-action-button-size !default;
+$datatable-action-button-height: $datatable-action-button-size !default;
+$datatable-action-button-padding: 0 !default;
+$datatable-action-button-border-radius: 100% !default;
+$datatable-action-button-text-align: center !default;
 $datatable-action-button-hover-color: $primary !default;
 $datatable-action-button-hover-background: $gray-300 !default;
+
+// colors for column header filter button
+$datatable-column-header-filter-button-color: inherit !default;
+$datatable-column-header-filter-button-active-color: $datatable-column-header-filter-button-color !default;
+$datatable-column-header-filter-button-active-badge-color: $primary !default;

package/table/public-api.d.ts

@@ -1,2 +1,5 @@
 export * from './table/table.component';
+export * from './table-column.component';
+export * from './table-cell-tpl.directive';
+export * from './table-column-header-tpl.directive';
 export * from './table.module';

package/table/table/table.component.d.ts

@@ -1,6 +1,7 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { EventEmitter } from '@angular/core';
+import { AfterContentChecked, EventEmitter, OnChanges, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { TheSeamTableColumnComponent } from '../table-column.component';
 import * as i0 from "@angular/core";
 /**
  * An optional function passed into the `NgForOf` directive that defines how to track
@@ -16,10 +17,15 @@ export type TrackByFunction<T> = (index: number, item: T) => any;
 export interface ITableColumn {
     prop: string;
     name?: string;
+    cellTemplate?: TemplateRef<any>;
+    headerTemplate?: TemplateRef<any>;
+    cellClass?: string;
+    headerClass?: string;
 }
-export declare class TableComponent<T = any> {
+export declare class TableComponent<T = any> implements OnInit, OnChanges, AfterContentChecked {
     private readonly _sanitizer;
     static ngAcceptInputType_hasHeader: BooleanInput;
+    private readonly _ngUnsubscribe;
     get columns(): (string | ITableColumn)[] | undefined | null;
     set columns(value: (string | ITableColumn)[] | undefined | null);
     private _columns;
@@ -33,13 +39,25 @@ export declare class TableComponent<T = any> {
     trackBy: TrackByFunction<T> | undefined | null;
     size: 'sm' | 'md' | undefined | null;
     hasHeader: boolean;
+    private _pendingColumns?;
     displayedRecords?: ITableColumn[];
     displayedColumns?: string[];
+    readonly columnsChange: EventEmitter<{
+        previous: ITableColumn[] | undefined;
+        current: ITableColumn[];
+    }>;
     readonly actionRefreshRequest: EventEmitter<void>;
+    set columnComponents(value: QueryList<TheSeamTableColumnComponent> | undefined);
+    private _columnComponents;
+    private _columnComponentChange;
     constructor(_sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    ngAfterContentChecked(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private _updateColumns;
     private _setColumns;
     triggerActionRefreshRequest(): void;
     _trackByRecords(r: any): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "seam-table", never, { "columns": "columns"; "rows": "rows"; "trackBy": "trackBy"; "size": "size"; "hasHeader": "hasHeader"; }, { "actionRefreshRequest": "actionRefreshRequest"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "seam-table", never, { "columns": "columns"; "rows": "rows"; "trackBy": "trackBy"; "size": "size"; "hasHeader": "hasHeader"; }, { "columnsChange": "columnsChange"; "actionRefreshRequest": "actionRefreshRequest"; }, ["columnComponents"], never, false, never>;
 }

package/table/table-cell-tpl.directive.d.ts

@@ -0,0 +1,7 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TheSeamTableCellTplDirective {
+    template: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTableCellTplDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TheSeamTableCellTplDirective, "[seamTableCellTpl]", never, {}, {}, never, never, true, never>;
+}

package/table/table-column-header-tpl.directive.d.ts

@@ -0,0 +1,7 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TheSeamTableColumnHeaderTplDirective {
+    template: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTableColumnHeaderTplDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TheSeamTableColumnHeaderTplDirective, "[seamTableColumnHeaderTpl]", never, {}, {}, never, never, true, never>;
+}

package/table/table-column.component.d.ts

@@ -0,0 +1,24 @@
+import { OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { TableColumnProp } from '@marklb/ngx-datatable';
+import { TheSeamTableCellTplDirective } from './table-cell-tpl.directive';
+import * as i0 from "@angular/core";
+export declare class TheSeamTableColumnComponent implements OnChanges {
+    name?: string | null;
+    prop?: TableColumnProp | null;
+    flexGrow?: number | null;
+    headerClass?: string | null;
+    cellClass?: string | null;
+    private _isFirstChange;
+    cellTplDirective?: TheSeamTableCellTplDirective;
+    _cellTemplateInput?: TemplateRef<any> | null;
+    _cellTemplateQuery?: TemplateRef<any>;
+    get cellTemplate(): TemplateRef<any> | undefined | null;
+    _headerTemplateInput?: TemplateRef<any> | null;
+    _headerTemplateQuery?: TemplateRef<any>;
+    get headerTemplate(): TemplateRef<any> | undefined | null;
+    private readonly _columnChange;
+    columnChange$: import("rxjs").Observable<void>;
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTableColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TheSeamTableColumnComponent, "seam-table-column", never, { "name": "name"; "prop": "prop"; "flexGrow": "flexGrow"; "headerClass": "headerClass"; "cellClass": "cellClass"; "_cellTemplateInput": "cellTemplate"; "_headerTemplateInput": "headerTemplate"; }, {}, ["cellTplDirective", "_cellTemplateQuery", "_headerTemplateQuery"], never, true, never>;
+}

package/table/table.module.d.ts

@@ -3,8 +3,11 @@ import * as i1 from "./table/table.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/cdk/table";
 import * as i4 from "@theseam/ui-common/table-cell-type";
+import * as i5 from "./table-column.component";
+import * as i6 from "./table-cell-tpl.directive";
+import * as i7 from "./table-column-header-tpl.directive";
 export declare class TheSeamTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamTableModule, [typeof i1.TableComponent], [typeof i2.CommonModule, typeof i3.CdkTableModule, typeof i4.TheSeamTableCellTypeModule], [typeof i1.TableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamTableModule, [typeof i1.TableComponent], [typeof i2.CommonModule, typeof i3.CdkTableModule, typeof i4.TheSeamTableCellTypeModule, typeof i5.TheSeamTableColumnComponent, typeof i6.TheSeamTableCellTplDirective, typeof i7.TheSeamTableColumnHeaderTplDirective], [typeof i1.TableComponent, typeof i5.TheSeamTableColumnComponent, typeof i6.TheSeamTableCellTplDirective, typeof i7.TheSeamTableColumnHeaderTplDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamTableModule>;
 }