@theseam/ui-common 0.2.9 → 0.2.10

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.
Files changed (31) hide show
  1. package/bundles/theseam-ui-common-datatable.umd.js +47 -2
  2. package/bundles/theseam-ui-common-datatable.umd.js.map +1 -1
  3. package/bundles/theseam-ui-common-framework.umd.js +2 -2
  4. package/bundles/theseam-ui-common-framework.umd.js.map +1 -1
  5. package/bundles/theseam-ui-common-utils.umd.js.map +1 -1
  6. package/datatable/datatable/datatable.component.d.ts +2 -0
  7. package/datatable/datatable-footer/datatable-footer-tpl.directive.d.ts +5 -0
  8. package/datatable/datatable-footer/datatable-footer.directive.d.ts +6 -0
  9. package/datatable/public-api.d.ts +2 -0
  10. package/datatable/theseam-ui-common-datatable.metadata.json +1 -1
  11. package/esm2015/datatable/datatable/datatable.component.js +5 -3
  12. package/esm2015/datatable/datatable-footer/datatable-footer-tpl.directive.js +15 -0
  13. package/esm2015/datatable/datatable-footer/datatable-footer.directive.js +18 -0
  14. package/esm2015/datatable/datatable.module.js +7 -1
  15. package/esm2015/datatable/public-api.js +3 -1
  16. package/esm2015/framework/side-nav/side-nav-item/side-nav-item.component.js +3 -3
  17. package/esm2015/utils/router/is-empty-url-route.js +1 -1
  18. package/fesm2015/theseam-ui-common-datatable.js +38 -3
  19. package/fesm2015/theseam-ui-common-datatable.js.map +1 -1
  20. package/fesm2015/theseam-ui-common-framework.js +2 -2
  21. package/fesm2015/theseam-ui-common-framework.js.map +1 -1
  22. package/fesm2015/theseam-ui-common-utils.js.map +1 -1
  23. package/framework/side-nav/side-nav-item/side-nav-item.component.scss +36 -9
  24. package/framework/theseam-ui-common-framework.metadata.json +1 -1
  25. package/package.json +1 -1
  26. package/styles/common/_table.scss +0 -5
  27. package/styles/vendor/ngx-datatable/_ngx-datatable.scss +475 -87
  28. package/styles/vendor/ngx-datatable/_themes/bootstrap/_variables.scss +173 -0
  29. package/styles/vendor/ngx-datatable/_themes/dark/_variables.scss +166 -0
  30. package/styles/vendor/ngx-datatable/_themes/material/_variables.scss +165 -0
  31. package/styles/vendor/ngx-datatable/_variables.scss +3 -0
@@ -634,6 +634,44 @@
634
634
  _cellTemplateQuery: [{ type: i0.ContentChild, args: [DatatableCellTplDirective, { read: i0.TemplateRef, static: true },] }]
635
635
  };
636
636
 
637
+ var DatatableFooterTplDirective = /** @class */ (function () {
638
+ function DatatableFooterTplDirective(template) {
639
+ this.template = template;
640
+ }
641
+ return DatatableFooterTplDirective;
642
+ }());
643
+ DatatableFooterTplDirective.decorators = [
644
+ { type: i0.Directive, args: [{
645
+ selector: '[seamDatatableFooterTpl]'
646
+ },] }
647
+ ];
648
+ DatatableFooterTplDirective.ctorParameters = function () { return [
649
+ { type: i0.TemplateRef }
650
+ ]; };
651
+
652
+ var TheSeamDatatableFooterDirective = /** @class */ (function () {
653
+ function TheSeamDatatableFooterDirective() {
654
+ }
655
+ Object.defineProperty(TheSeamDatatableFooterDirective.prototype, "template", {
656
+ get: function () {
657
+ return this._templateInput || this._templateQuery;
658
+ },
659
+ enumerable: false,
660
+ configurable: true
661
+ });
662
+ return TheSeamDatatableFooterDirective;
663
+ }());
664
+ TheSeamDatatableFooterDirective.decorators = [
665
+ { type: i0.Directive, args: [{
666
+ // tslint:disable-next-line: directive-selector
667
+ selector: 'seam-datatable-footer'
668
+ },] }
669
+ ];
670
+ TheSeamDatatableFooterDirective.propDecorators = {
671
+ _templateInput: [{ type: i0.Input, args: ['template',] }],
672
+ _templateQuery: [{ type: i0.ContentChild, args: [DatatableFooterTplDirective, { read: i0.TemplateRef, static: true },] }]
673
+ };
674
+
637
675
  var DatatableFilterDirective = /** @class */ (function () {
638
676
  function DatatableFilterDirective(dataFilters) {
639
677
  if (dataFilters && dataFilters.length > 0) {
@@ -1455,7 +1493,7 @@
1455
1493
  DatatableComponent.decorators = [
1456
1494
  { type: i0.Component, args: [{
1457
1495
  selector: 'seam-datatable',
1458
- 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 class=\"bootstrap\"\n [columnMode]=\"$any(columnMode)\"\n [scrollbarV]=\"scrollbarV\"\n [scrollbarH]=\"scrollbarH\"\n [virtualization]=\"virtualization\"\n [targetMarkerTemplate]=\"targetMarkerTemplate\"\n [groupRowsBy]=\"$any(groupRowsBy)\"\n [groupedRows]=\"$any(groupedRows)\"\n [selected]=\"$any(selected)\"\n [externalPaging]=\"externalPaging\"\n [externalSorting]=\"externalSorting\"\n [limit]=\"$any(limit)\"\n [count]=\"$any(count)\"\n [offset]=\"$any(offset)\"\n [loadingIndicator]=\"loadingIndicator\"\n [selectionType]=\"$any(selectionType)\"\n [reorderable]=\"reorderable\"\n [swapColumns]=\"swapColumns\"\n [sortType]=\"$any(sortType)\"\n [sorts]=\"$any(_sorts)\"\n [cssClasses]=\"cssClasses\"\n [messages]=\"messages\"\n [rowIdentity]=\"$any(rowIdentity)\"\n [rowClass]=\"rowClass\"\n [selectCheck]=\"selectCheck\"\n [displayCheck]=\"$any(displayCheck)\"\n [groupExpansionDefault]=\"groupExpansionDefault\"\n [trackByProp]=\"$any(trackByProp)\"\n [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n [treeFromRelation]=\"$any(treeFromRelation)\"\n [treeToRelation]=\"$any(treeToRelation)\"\n [summaryRow]=\"summaryRow\"\n [summaryHeight]=\"$any(summaryHeight)\"\n [summaryPosition]=\"$any(summaryPosition)\"\n [rows]=\"rows$ | async\"\n [columns]=\"$any(displayColumns$ | async)\"\n [headerHeight]=\"$any(headerHeight)\"\n [rowHeight]=\"$any(rowHeight)\"\n [footerHeight]=\"$any(footerHeight)\"\n (scroll)=\"scroll.emit($event)\"\n (activate)=\"activate.emit($event)\"\n (select)=\"select.emit($event)\"\n (sort)=\"sort.emit($event)\"\n (page)=\"page.emit($event)\"\n (reorder)=\"reorder.emit($event)\"\n (resize)=\"_onResize($event)\"\n (tableContextmenu)=\"tableContextmenu.emit($event)\"\n (treeAction)=\"treeAction.emit($event)\"\n (seamElemResized)=\"onDatatableResize($event)\"\n (treeAction)=\"_onTreeAction($event)\">\n\n <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n <div\n class=\"w-100 bg-light p-1\"\n [class.border-bottom]=\"!expanded\"\n [class.datatable-icon-right]=\"!expanded\"\n [class.datatable-icon-down]=\"expanded\"\n title=\"Expand/Collapse Group\"\n (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n <b>Age: {{ group.age }}</b>\n </div>\n </ng-template>\n </ngx-datatable-group-header>\n\n <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n [rowHeight]=\"rowDetail.rowHeight || 0\"\n [template]=\"$any(rowDetail.template)\"\n (toggle)=\"rowDetail.toggle.emit($event)\">\n </ngx-datatable-row-detail>\n\n </ngx-datatable>\n </ng-container>\n </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n let-column=\"column\" let-sortFn=\"sortFn\">\n <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n <div class=\"datatable-column-header-separator\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n <seam-table-cell-type-selector *ngIf=\"row\"\n [type]=\"column.cellType\"\n [value]=\"value\"\n [rowIndex]=\"rowIndex\"\n [row]=\"row\"\n [colData]=\"column\">\n </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n <ng-container *ngIf=\"row && rowActionItem?.template\">\n <ng-template\n [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n </ng-template>\n </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n <button\n class=\"p-0 bg-transparent border-0 btn\"\n [disabled]=\"tree.treeStatus==='disabled'\"\n (click)=\"tree.onTreeAction()\">\n <span *ngIf=\"tree.treeStatus==='loading'\">\n <fa-icon [icon]=\"faSpinner\"></fa-icon>\n </span>\n <span *ngIf=\"tree.treeStatus==='collapsed'\">\n <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n </span>\n <span *ngIf=\"tree.treeStatus==='expanded'\">\n <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n </span>\n <span *ngIf=\"tree.treeStatus==='disabled'\">\n <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n </span>\n </button>\n</ng-template>\n",
1496
+ template: "<div class=\"datatable-wrapper\">\n <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n <div class=\"datatable-table-wrapper\">\n <ng-container>\n <ngx-datatable\n [columnMode]=\"$any(columnMode)\"\n [scrollbarV]=\"scrollbarV\"\n [scrollbarH]=\"scrollbarH\"\n [virtualization]=\"virtualization\"\n [targetMarkerTemplate]=\"targetMarkerTemplate\"\n [groupRowsBy]=\"$any(groupRowsBy)\"\n [groupedRows]=\"$any(groupedRows)\"\n [selected]=\"$any(selected)\"\n [externalPaging]=\"externalPaging\"\n [externalSorting]=\"externalSorting\"\n [limit]=\"$any(limit)\"\n [count]=\"$any(count)\"\n [offset]=\"$any(offset)\"\n [loadingIndicator]=\"loadingIndicator\"\n [selectionType]=\"$any(selectionType)\"\n [reorderable]=\"reorderable\"\n [swapColumns]=\"swapColumns\"\n [sortType]=\"$any(sortType)\"\n [sorts]=\"$any(_sorts)\"\n [cssClasses]=\"cssClasses\"\n [messages]=\"messages\"\n [rowIdentity]=\"$any(rowIdentity)\"\n [rowClass]=\"rowClass\"\n [selectCheck]=\"selectCheck\"\n [displayCheck]=\"$any(displayCheck)\"\n [groupExpansionDefault]=\"groupExpansionDefault\"\n [trackByProp]=\"$any(trackByProp)\"\n [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n [treeFromRelation]=\"$any(treeFromRelation)\"\n [treeToRelation]=\"$any(treeToRelation)\"\n [summaryRow]=\"summaryRow\"\n [summaryHeight]=\"$any(summaryHeight)\"\n [summaryPosition]=\"$any(summaryPosition)\"\n [rows]=\"rows$ | async\"\n [columns]=\"$any(displayColumns$ | async)\"\n [headerHeight]=\"$any(headerHeight)\"\n [rowHeight]=\"$any(rowHeight)\"\n [footerHeight]=\"$any(footerHeight)\"\n (scroll)=\"scroll.emit($event)\"\n (activate)=\"activate.emit($event)\"\n (select)=\"select.emit($event)\"\n (sort)=\"sort.emit($event)\"\n (page)=\"page.emit($event)\"\n (reorder)=\"reorder.emit($event)\"\n (resize)=\"_onResize($event)\"\n (tableContextmenu)=\"tableContextmenu.emit($event)\"\n (treeAction)=\"treeAction.emit($event)\"\n (seamElemResized)=\"onDatatableResize($event)\"\n (treeAction)=\"_onTreeAction($event)\">\n\n <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n <div\n class=\"w-100 bg-light p-1\"\n [class.border-bottom]=\"!expanded\"\n [class.datatable-icon-right]=\"!expanded\"\n [class.datatable-icon-down]=\"expanded\"\n title=\"Expand/Collapse Group\"\n (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n <b>Age: {{ group.age }}</b>\n </div>\n </ng-template>\n </ngx-datatable-group-header>\n\n <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n [rowHeight]=\"rowDetail.rowHeight || 0\"\n [template]=\"$any(rowDetail.template)\"\n (toggle)=\"rowDetail.toggle.emit($event)\">\n </ngx-datatable-row-detail>\n\n <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n [template]=\"$any(footer.template)\">\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n let-column=\"column\" let-sortFn=\"sortFn\">\n <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n <div class=\"datatable-column-header-separator\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n <seam-table-cell-type-selector *ngIf=\"row\"\n [type]=\"column.cellType\"\n [value]=\"value\"\n [rowIndex]=\"rowIndex\"\n [row]=\"row\"\n [colData]=\"column\">\n </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n <ng-container *ngIf=\"row && rowActionItem?.template\">\n <ng-template\n [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n </ng-template>\n </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n <button\n class=\"p-0 bg-transparent border-0 btn\"\n [disabled]=\"tree.treeStatus==='disabled'\"\n (click)=\"tree.onTreeAction()\">\n <span *ngIf=\"tree.treeStatus==='loading'\">\n <fa-icon [icon]=\"faSpinner\"></fa-icon>\n </span>\n <span *ngIf=\"tree.treeStatus==='collapsed'\">\n <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n </span>\n <span *ngIf=\"tree.treeStatus==='expanded'\">\n <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n </span>\n <span *ngIf=\"tree.treeStatus==='disabled'\">\n <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n </span>\n </button>\n</ng-template>\n",
1459
1497
  changeDetection: i0.ChangeDetectionStrategy.OnPush,
1460
1498
  animations: [
1461
1499
  animations.trigger('slideDown', [
@@ -1470,7 +1508,7 @@
1470
1508
  ])
1471
1509
  ],
1472
1510
  providers: [_THESEAM_DATATABLE, DatatableColumnChangesService, _THESEAM_DATATABLE_ACCESSOR],
1473
- styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute;top:0;left:0;right:0;bottom:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute;top:12px;bottom:12px;right:0;width:2px;background-color:#e1e3e6}.datatable-sort-target{cursor:pointer}"]
1511
+ styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute;top:0;left:0;right:0;bottom:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}"]
1474
1512
  },] }
1475
1513
  ];
1476
1514
  DatatableComponent.ctorParameters = function () { return [
@@ -1535,6 +1573,7 @@
1535
1573
  actionMenu: [{ type: i0.ContentChild, args: [DatatableActionMenuComponent, { static: true },] }],
1536
1574
  rowActionItem: [{ type: i0.ContentChild, args: [DatatableRowActionItemDirective, { static: true },] }],
1537
1575
  rowDetail: [{ type: i0.ContentChild, args: [TheSeamDatatableRowDetailDirective, { static: true },] }],
1576
+ footer: [{ type: i0.ContentChild, args: [TheSeamDatatableFooterDirective, { static: true },] }],
1538
1577
  menuBarComponent: [{ type: i0.ContentChild, args: [DatatableMenuBarComponent,] }],
1539
1578
  ngxDatatable: [{ type: i0.ViewChild, args: [ngxDatatable.DatatableComponent,] }],
1540
1579
  ngxDatatableElement: [{ type: i0.ViewChild, args: [ngxDatatable.DatatableComponent, { read: i0.ElementRef },] }],
@@ -2139,6 +2178,8 @@
2139
2178
  DatatableExportButtonComponent,
2140
2179
  TheSeamDatatableRowDetailDirective,
2141
2180
  DatatableRowDetailTplDirective,
2181
+ TheSeamDatatableFooterDirective,
2182
+ DatatableFooterTplDirective,
2142
2183
  DatatableColumnPreferencesComponent,
2143
2184
  DatatableColumnPreferencesButtonComponent,
2144
2185
  DatatableActionMenuItemDirective,
@@ -2181,6 +2222,8 @@
2181
2222
  DatatableExportButtonComponent,
2182
2223
  TheSeamDatatableRowDetailDirective,
2183
2224
  DatatableRowDetailTplDirective,
2225
+ TheSeamDatatableFooterDirective,
2226
+ DatatableFooterTplDirective,
2184
2227
  DatatableColumnPreferencesComponent,
2185
2228
  DatatableColumnPreferencesButtonComponent,
2186
2229
  DatatableActionMenuItemDirective,
@@ -2218,6 +2261,7 @@
2218
2261
  exports.DatatableDataSource = DatatableDataSource;
2219
2262
  exports.DatatableExportButtonComponent = DatatableExportButtonComponent;
2220
2263
  exports.DatatableFilterDirective = DatatableFilterDirective;
2264
+ exports.DatatableFooterTplDirective = DatatableFooterTplDirective;
2221
2265
  exports.DatatableGqlDataSource = DatatableGqlDataSource;
2222
2266
  exports.DatatableMenuBarColumnCenterComponent = DatatableMenuBarColumnCenterComponent;
2223
2267
  exports.DatatableMenuBarColumnLeftComponent = DatatableMenuBarColumnLeftComponent;
@@ -2231,6 +2275,7 @@
2231
2275
  exports.THESEAM_DATATABLE = THESEAM_DATATABLE;
2232
2276
  exports.THESEAM_DATATABLE_PREFERENCES_ACCESSOR = THESEAM_DATATABLE_PREFERENCES_ACCESSOR;
2233
2277
  exports.THESEAM_MENUBAR_ITEM_DATA = THESEAM_MENUBAR_ITEM_DATA;
2278
+ exports.TheSeamDatatableFooterDirective = TheSeamDatatableFooterDirective;
2234
2279
  exports.TheSeamDatatableModule = TheSeamDatatableModule;
2235
2280
  exports.TheSeamDatatableRowDetailDirective = TheSeamDatatableRowDetailDirective;
2236
2281
  exports.TheSeamDatatableScrollbarHelperService = TheSeamDatatableScrollbarHelperService;