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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@ import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome
2
2
  import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
3
3
  import { CollectionViewer, DataSource, ListRange } from '@angular/cdk/collections';
4
4
  import * as i0 from '@angular/core';
5
- import { EventEmitter, QueryList, TemplateRef, OnChanges, PipeTransform, SimpleChanges, InjectionToken, KeyValueDiffers, OnInit, OnDestroy, ChangeDetectorRef, ElementRef, ViewContainerRef, NgZone } from '@angular/core';
5
+ import { EventEmitter, QueryList, OnChanges, TemplateRef, PipeTransform, SimpleChanges, InjectionToken, KeyValueDiffers, OnInit, OnDestroy, ChangeDetectorRef, ElementRef, ViewContainerRef, NgZone } from '@angular/core';
6
6
  import * as rxjs from 'rxjs';
7
7
  import { Observable } from 'rxjs';
8
8
  import * as i26 from '@marklb/ngx-datatable';
@@ -95,24 +95,9 @@ declare class DatatableActionMenuComponent {
95
95
  static ɵcmp: i0.ɵɵComponentDeclaration<DatatableActionMenuComponent, "seam-datatable-action-menu", ["seamDatatableActionMenu"], { "isSubMenu": { "alias": "isSubMenu"; "required": false; }; }, {}, ["items"], never, false, never>;
96
96
  }
97
97
 
98
- declare class DatatableCellTplDirective {
99
- template: TemplateRef<any>;
100
- constructor(template: TemplateRef<any>);
101
- static ɵfac: i0.ɵɵFactoryDeclaration<DatatableCellTplDirective, never>;
102
- static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableCellTplDirective, "[seamDatatableCellTpl]", never, {}, {}, never, never, false, never>;
103
- }
104
-
105
- declare class DatatableColumnChangesService {
106
- private columnInputChanges;
107
- get columnInputChanges$(): Observable<undefined>;
108
- onInputChange(): void;
109
- static ɵfac: i0.ɵɵFactoryDeclaration<DatatableColumnChangesService, never>;
110
- static ɵprov: i0.ɵɵInjectableDeclaration<DatatableColumnChangesService>;
111
- }
112
-
113
98
  type _PipeTransform = PipeTransform | PipeTransform;
114
99
  declare class DatatableColumnComponent implements OnChanges {
115
- private _columnChangesService;
100
+ private readonly _columnChangesService;
116
101
  name?: string | null;
117
102
  prop?: TableColumnProp | null;
118
103
  flexGrow?: number | null;
@@ -141,16 +126,14 @@ declare class DatatableColumnComponent implements OnChanges {
141
126
  alignHeader?: 'left' | 'center' | 'right' | null;
142
127
  alignCell?: 'left' | 'center' | 'right' | null;
143
128
  private _isFirstChange;
144
- cellTplDirective?: DatatableCellTplDirective;
145
129
  _cellTemplateInput?: TemplateRef<any> | null;
146
- _cellTemplateQuery?: TemplateRef<any>;
130
+ set _setCellTemplateQuery(value: TemplateRef<any> | null);
131
+ _cellTemplateQuery?: TemplateRef<any> | null;
147
132
  get cellTemplate(): TemplateRef<any> | undefined | null;
148
133
  readonly __propsChanged: string[];
149
- constructor(_columnChangesService: DatatableColumnChangesService);
150
134
  ngOnChanges(changes: SimpleChanges): void;
151
- getCellDirective(): DatatableCellTplDirective | null;
152
135
  static ɵfac: i0.ɵɵFactoryDeclaration<DatatableColumnComponent, never>;
153
- 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>;
136
+ 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>;
154
137
  }
155
138
  /**
156
139
  * Check if a column is bound to a property.
@@ -329,6 +312,14 @@ interface TheSeamDatatableAccessor {
329
312
  pageInfo: TheSeamPageInfo;
330
313
  }
331
314
 
315
+ declare class DatatableColumnChangesService {
316
+ private columnInputChanges;
317
+ get columnInputChanges$(): Observable<undefined>;
318
+ onInputChange(): void;
319
+ static ɵfac: i0.ɵɵFactoryDeclaration<DatatableColumnChangesService, never>;
320
+ static ɵprov: i0.ɵɵInjectableDeclaration<DatatableColumnChangesService>;
321
+ }
322
+
332
323
  interface ColumnsDataFilterStateState<T = any, O = any> {
333
324
  prop?: string;
334
325
  formValue?: Partial<T>;
@@ -603,6 +594,7 @@ interface ColumnsAlterationsChangedEvent {
603
594
  declare class ColumnsAlterationsManagerService {
604
595
  private readonly _changesSubject;
605
596
  private _alterations;
597
+ private _defaultSorts;
606
598
  readonly changes: Observable<ColumnsAlterationsChangedEvent>;
607
599
  constructor();
608
600
  get(): ColumnsAlteration[];
@@ -625,6 +617,7 @@ declare class ColumnsAlterationsManagerService {
625
617
  clear(options?: {
626
618
  emitEvent?: boolean;
627
619
  }): ColumnsAlterationsChangedRecord[];
620
+ setDefaultSorts(sorts: SortItem[]): void;
628
621
  private _removeNonPersistant;
629
622
  private _emitChanges;
630
623
  static ɵfac: i0.ɵɵFactoryDeclaration<ColumnsAlterationsManagerService, never>;
@@ -755,7 +748,7 @@ interface ICellContext {
755
748
  declare const THESEAM_DATATABLE: InjectionToken<DataFilter>;
756
749
  declare const _THESEAM_DATATABLE: any;
757
750
  declare const _THESEAM_DATATABLE_ACCESSOR: any;
758
- declare class DatatableComponent<TRow = any> implements OnInit, OnDestroy, TheSeamDatatableAccessor, CollectionViewer {
751
+ declare class DatatableComponent<TRow = any> implements OnInit, OnDestroy, OnChanges, TheSeamDatatableAccessor, CollectionViewer {
759
752
  private readonly _preferences;
760
753
  private readonly _columnsManager;
761
754
  private readonly _columnsAlterationsManager;
@@ -946,6 +939,7 @@ declare class DatatableComponent<TRow = any> implements OnInit, OnDestroy, TheSe
946
939
  ngOnDestroy(): void;
947
940
  private _setMenuBarFilters;
948
941
  getColumnComponent(propName: string): DatatableColumnComponent | null;
942
+ ngOnChanges(changes: SimpleChanges): void;
949
943
  _columnData(col: any): {
950
944
  col: any;
951
945
  comp: DatatableColumnComponent | null;
@@ -1239,6 +1233,13 @@ declare class DatatableActionMenuToggleDirective {
1239
1233
  static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableActionMenuToggleDirective, "[seamDatatableActionMenuToggle]", ["seamDatatableActionMenuToggle"], { "seamDatatableActionMenuToggle": { "alias": "seamDatatableActionMenuToggle"; "required": false; }; }, {}, never, never, false, never>;
1240
1234
  }
1241
1235
 
1236
+ declare class DatatableCellTplDirective {
1237
+ template: TemplateRef<any>;
1238
+ constructor(template: TemplateRef<any>);
1239
+ static ɵfac: i0.ɵɵFactoryDeclaration<DatatableCellTplDirective, never>;
1240
+ static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableCellTplDirective, "[seamDatatableCellTpl]", never, {}, {}, never, never, false, never>;
1241
+ }
1242
+
1242
1243
  declare class DatatableColumnFilterTplDirective {
1243
1244
  template: TemplateRef<any>;
1244
1245
  constructor(template: TemplateRef<any>);
@@ -3,7 +3,7 @@ import { trigger, transition, style, animate } from '@angular/animations';
3
3
  import { coerceArray } from '@angular/cdk/coercion';
4
4
  import { DataSource, isDataSource } from '@angular/cdk/collections';
5
5
  import * as i0 from '@angular/core';
6
- 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';
6
+ 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';
7
7
  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';
8
8
  import { switchMap, map, startWith, auditTime, shareReplay, take, tap, distinctUntilChanged, takeUntil, concatMap, catchError } from 'rxjs/operators';
9
9
  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
260
260
  type: Injectable
261
261
  }] });
262
262
 
263
- // TODO: The column component should implement `ITheSeamDatatableColumn`, since
263
+ // TODO: The column component should implement `TheSeamDatatableColumn`, since
264
264
  // providing some properties by input and some by template could be confusing.
265
265
  class DatatableColumnComponent {
266
- _columnChangesService;
266
+ _columnChangesService = inject(DatatableColumnChangesService);
267
267
  name;
268
268
  prop;
269
269
  flexGrow;
@@ -292,31 +292,19 @@ class DatatableColumnComponent {
292
292
  alignHeader;
293
293
  alignCell;
294
294
  _isFirstChange = true;
295
- cellTplDirective;
296
295
  // eslint-disable-next-line @angular-eslint/no-input-rename
297
296
  _cellTemplateInput;
297
+ set _setCellTemplateQuery(value) {
298
+ this._cellTemplateQuery = value;
299
+ if (!this.__propsChanged.includes('cellTemplate')) {
300
+ this.__propsChanged.push('cellTemplate');
301
+ }
302
+ }
298
303
  _cellTemplateQuery;
299
304
  get cellTemplate() {
300
305
  return this._cellTemplateInput || this._cellTemplateQuery;
301
306
  }
302
- // @Input('headerTemplate')
303
- // _headerTemplateInput: TemplateRef<any>;
304
- // @ContentChild(DataTableColumnHeaderDirective, { read: TemplateRef, static: true })
305
- // _headerTemplateQuery: TemplateRef<any>;
306
- // get headerTemplate(): TemplateRef<any> {
307
- // return this._headerTemplateInput || this._headerTemplateQuery;
308
- // }
309
- // @Input('treeToggleTemplate')
310
- // _treeToggleTemplateInput: TemplateRef<any>;
311
- // @ContentChild(DataTableColumnCellTreeToggle, { read: TemplateRef, static: true })
312
- // _treeToggleTemplateQuery: TemplateRef<any>;
313
- // get treeToggleTemplate(): TemplateRef<any> {
314
- // return this._treeToggleTemplateInput || this._treeToggleTemplateQuery;
315
- // }
316
307
  __propsChanged = [];
317
- constructor(_columnChangesService) {
318
- this._columnChangesService = _columnChangesService;
319
- }
320
308
  ngOnChanges(changes) {
321
309
  if (this._isFirstChange) {
322
310
  this._isFirstChange = false;
@@ -332,19 +320,13 @@ class DatatableColumnComponent {
332
320
  }
333
321
  }
334
322
  }
335
- getCellDirective() {
336
- if (this.cellTplDirective) {
337
- return this.cellTplDirective;
338
- }
339
- return null;
340
- }
341
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnComponent, deps: [{ token: DatatableColumnChangesService }], target: i0.ɵɵFactoryTarget.Component });
342
- 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: [""] });
323
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
324
+ 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: [""] });
343
325
  }
344
326
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DatatableColumnComponent, decorators: [{
345
327
  type: Component,
346
328
  args: [{ selector: 'seam-datatable-column', standalone: false, template: "<p>datatable-column works!</p>\n" }]
347
- }], ctorParameters: () => [{ type: DatatableColumnChangesService }], propDecorators: { name: [{
329
+ }], propDecorators: { name: [{
348
330
  type: Input
349
331
  }], prop: [{
350
332
  type: Input
@@ -398,13 +380,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
398
380
  type: Input
399
381
  }], alignCell: [{
400
382
  type: Input
401
- }], cellTplDirective: [{
402
- type: ContentChild,
403
- args: [DatatableCellTplDirective, { static: true }]
404
383
  }], _cellTemplateInput: [{
405
384
  type: Input,
406
385
  args: ['cellTemplate']
407
- }], _cellTemplateQuery: [{
386
+ }], _setCellTemplateQuery: [{
408
387
  type: ContentChild,
409
388
  args: [DatatableCellTplDirective, { read: TemplateRef, static: true }]
410
389
  }] } });
@@ -1914,6 +1893,7 @@ class WidthColumnsAlteration extends ColumnsAlteration {
1914
1893
  class ColumnsAlterationsManagerService {
1915
1894
  _changesSubject = new Subject();
1916
1895
  _alterations = [];
1896
+ _defaultSorts = [];
1917
1897
  changes;
1918
1898
  constructor() {
1919
1899
  this.changes = this._changesSubject.asObservable();
@@ -2004,7 +1984,7 @@ class ColumnsAlterationsManagerService {
2004
1984
  break;
2005
1985
  }
2006
1986
  case 'sort': {
2007
- const alteration = new SortColumnsAlteration({ sorts: [] }, false);
1987
+ const alteration = new SortColumnsAlteration({ sorts: [...this._defaultSorts] }, false);
2008
1988
  changes.push(...this.add([alteration]));
2009
1989
  break;
2010
1990
  }
@@ -2021,6 +2001,9 @@ class ColumnsAlterationsManagerService {
2021
2001
  this._emitChanges(changes);
2022
2002
  return changes;
2023
2003
  }
2004
+ setDefaultSorts(sorts) {
2005
+ this._defaultSorts = sorts;
2006
+ }
2024
2007
  _removeNonPersistant() {
2025
2008
  const nonPersistent = this._alterations.filter((x) => !x.persistent);
2026
2009
  this.remove(nonPersistent, { emitEvent: false });
@@ -3397,6 +3380,11 @@ class DatatableComponent {
3397
3380
  }
3398
3381
  return null;
3399
3382
  }
3383
+ ngOnChanges(changes) {
3384
+ if (changes['sorts']) {
3385
+ this._columnsAlterationsManager.setDefaultSorts(this._sorts);
3386
+ }
3387
+ }
3400
3388
  _columnData(col) {
3401
3389
  const comp = this.getColumnComponent(col.prop);
3402
3390
  return { col, comp };
@@ -3500,7 +3488,7 @@ class DatatableComponent {
3500
3488
  ColumnsManagerService,
3501
3489
  ColumnsAlterationsManagerService,
3502
3490
  ColumnsFiltersService,
3503
- ], 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: [
3491
+ ], 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 }], usesOnChanges: 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: [
3504
3492
  trigger('slideDown', [
3505
3493
  transition(':enter', [
3506
3494
  style({ transform: 'translateY(-20%)', opacity: '0' }),