@one-paragon/angular-utilities 2.8.5 → 2.8.7
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.
|
@@ -2589,7 +2589,7 @@ function buildInAllValuesFilter(config, previousMeta, currentMeta, data, metaTim
|
|
|
2589
2589
|
const blankValueFilter = '__tb_sp_blank';
|
|
2590
2590
|
const blankValueAndEmptyStringFilter = '__tb_sp_BLANK';
|
|
2591
2591
|
function buildFilter(data, metaData, config) {
|
|
2592
|
-
const map = metaData.fieldType == FieldType.Currency ? (v => v == null ? v : getFactory
|
|
2592
|
+
const map = metaData.fieldType == FieldType.Currency ? (v => v == null ? v : getFactory(metaData.key)(v))
|
|
2593
2593
|
: typeof metaData.filterLogic?.filterBy === 'function' && !metaData.additional?.filterOptions?.filterableValues?.doNotIncludeBlanks ? metaData.filterLogic?.filterBy
|
|
2594
2594
|
: createTransformer(metaData, config, true, false);
|
|
2595
2595
|
const mapped = data.map(v => {
|
|
@@ -4761,7 +4761,7 @@ class GenericTableComponent {
|
|
|
4761
4761
|
this.$displayData = input.required({ ...(ngDevMode ? { debugName: "$displayData" } : {}), alias: 'displayData' });
|
|
4762
4762
|
this.$displayDataLength = computed(() => this.$displayData().length, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
4763
4763
|
this.$data = input.required({ ...(ngDevMode ? { debugName: "$data" } : {}), alias: 'data' });
|
|
4764
|
-
this.$
|
|
4764
|
+
this.$customRows = input([], { ...(ngDevMode ? { debugName: "$customRows" } : {}), alias: 'customRows' });
|
|
4765
4765
|
this.$columnInfos = input.required({ ...(ngDevMode ? { debugName: "$columnInfos" } : {}), alias: 'columnInfos' });
|
|
4766
4766
|
this.$dataSource = input.required({ ...(ngDevMode ? { debugName: "$dataSource" } : {}), alias: 'dataSource' });
|
|
4767
4767
|
this.$keys = computed(() => {
|
|
@@ -4835,9 +4835,9 @@ class GenericTableComponent {
|
|
|
4835
4835
|
columnInfos.forEach(ci => this.buildColumn(ci));
|
|
4836
4836
|
});
|
|
4837
4837
|
}, ...(ngDevMode ? [{ debugName: "#buildColumnsEffect" }] : []));
|
|
4838
|
-
this.#
|
|
4838
|
+
this.#buildCustomRowsEffect = effect(() => {
|
|
4839
4839
|
const table = this.$table();
|
|
4840
|
-
const rows = this.$
|
|
4840
|
+
const rows = this.$customRows();
|
|
4841
4841
|
const keys = this.$keys();
|
|
4842
4842
|
if (!table)
|
|
4843
4843
|
return;
|
|
@@ -4848,7 +4848,7 @@ class GenericTableComponent {
|
|
|
4848
4848
|
table.addRowDef(row);
|
|
4849
4849
|
});
|
|
4850
4850
|
});
|
|
4851
|
-
}, ...(ngDevMode ? [{ debugName: "#
|
|
4851
|
+
}, ...(ngDevMode ? [{ debugName: "#buildCustomRowsEffect" }] : []));
|
|
4852
4852
|
this.#buildHeaderRowEffect = effect(() => {
|
|
4853
4853
|
const headerRow = this.$headerRow();
|
|
4854
4854
|
const showHeader = this.$showHeader();
|
|
@@ -5129,7 +5129,7 @@ class GenericTableComponent {
|
|
|
5129
5129
|
this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
|
|
5130
5130
|
}
|
|
5131
5131
|
#buildColumnsEffect;
|
|
5132
|
-
#
|
|
5132
|
+
#buildCustomRowsEffect;
|
|
5133
5133
|
#buildHeaderRowEffect;
|
|
5134
5134
|
#buildFooterEffect;
|
|
5135
5135
|
rowClicked(t, event) {
|
|
@@ -5216,7 +5216,7 @@ class GenericTableComponent {
|
|
|
5216
5216
|
});
|
|
5217
5217
|
}
|
|
5218
5218
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5219
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n #table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"table-drag-list\"\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\"\r\n [matTooltip]=\"$selectAllMessage()\"\r\n (change)=\"$event ? masterToggle() : null\" />\r\n <button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" >\r\n <button mat-menu-item>\r\n <mat-slide-toggle [checked]=\"$hasSelectFilter()\" (change)=\"addSelectFilter($event.checked)\">\r\n Show Only Selected\r\n </mat-slide-toggle>\r\n </button>\r\n @if(this.$selection().selected.length)\r\n {\r\n <button mat-menu-item (click)=\"$selection().clear()\">\r\n Clear Selection\r\n </button>\r\n }\r\n <button mat-menu-item (click)=\"selectTop(+i.value)\">\r\n Select top \r\n <input #i class=\"input\" stop-propagation type=\"number\" \r\n placeholder=\"Set Size\"\r\n [value]=\"10\"\r\n [min]=\"1\"\r\n [max]=\"dataStore.state().sortedFilteredDataLength\" />\r\n </button>\r\n </mat-menu>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n <mat-checkbox\r\n [checked]=\"selection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell index-column\" [style]=\"$indexColumnWidth()\">\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\" [style]=\"$indexColumnWidth()\">\r\n {{ 1 + i + $offsetIndex() }}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\" [style]=\"$indexColumnWidth()\"/>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();\r\n\r\n <!-- Default group row template -->\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n @if($hasSelectColumn())\r\n {\r\n @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n }\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n @if (!expanded())\r\n {\r\n <mat-icon>chevron_right</mat-icon>\r\n }\r\n @else\r\n {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n </div>\r\n @if(customTemplate)\r\n {\r\n <ng-container *ngTemplateOutlet=\"customTemplate; context: { \r\n $implicit: row, \r\n element: row, \r\n expanded: expanded(), \r\n level: row.level, \r\n key: row.key, \r\n uniqueName: row.uniqueName, \r\n groupHeaderDisplay: row.groupHeaderDisplay, \r\n length: row.length, \r\n padding: row.padding \r\n }\" />\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n }\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n [style.height]=\"$rowHeight()\"\r\n [style.min-height]=\"$rowHeight()\"\r\n [styler]=\"$rowStyles()\"\r\n [element]=\"row\"\r\n [conditionalClasses]=\"$rowClasses()\"\r\n (click)=\"rowClicked(row, $event)\"\r\n />\r\n\r\n <!-- group row -->\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n style=\"background-color: unset;\"\r\n [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: false \" [style.height]=\"$footerHeight()\" [class.sticky-footer]=\"$stickyFooter()\"\r\n [style.min-height]=\"$footerHeight()\"\r\n [style.bottom.px]=\"$stickyFooter() ? ($footerOffset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center;width:var(--tb-group-cell-width);min-width:var(--tb-group-cell-min-width);max-width:var(--tb-group-cell-max-width)}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.sticky-footer{position:sticky;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5219
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $customRows: { classPropertyName: "$customRows", publicName: "customRows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n #table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"table-drag-list\"\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\"\r\n [matTooltip]=\"$selectAllMessage()\"\r\n (change)=\"$event ? masterToggle() : null\" />\r\n <button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" >\r\n <button mat-menu-item>\r\n <mat-slide-toggle [checked]=\"$hasSelectFilter()\" (change)=\"addSelectFilter($event.checked)\">\r\n Show Only Selected\r\n </mat-slide-toggle>\r\n </button>\r\n @if(this.$selection().selected.length)\r\n {\r\n <button mat-menu-item (click)=\"$selection().clear()\">\r\n Clear Selection\r\n </button>\r\n }\r\n <button mat-menu-item (click)=\"selectTop(+i.value)\">\r\n Select top \r\n <input #i class=\"input\" stop-propagation type=\"number\" \r\n placeholder=\"Set Size\"\r\n [value]=\"10\"\r\n [min]=\"1\"\r\n [max]=\"dataStore.state().sortedFilteredDataLength\" />\r\n </button>\r\n </mat-menu>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n <mat-checkbox\r\n [checked]=\"selection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell index-column\" [style]=\"$indexColumnWidth()\">\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\" [style]=\"$indexColumnWidth()\">\r\n {{ 1 + i + $offsetIndex() }}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\" [style]=\"$indexColumnWidth()\"/>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();\r\n\r\n <!-- Default group row template -->\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n @if($hasSelectColumn())\r\n {\r\n @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n }\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n @if (!expanded())\r\n {\r\n <mat-icon>chevron_right</mat-icon>\r\n }\r\n @else\r\n {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n </div>\r\n @if(customTemplate)\r\n {\r\n <ng-container *ngTemplateOutlet=\"customTemplate; context: { \r\n $implicit: row, \r\n element: row, \r\n expanded: expanded(), \r\n level: row.level, \r\n key: row.key, \r\n uniqueName: row.uniqueName, \r\n groupHeaderDisplay: row.groupHeaderDisplay, \r\n length: row.length, \r\n padding: row.padding \r\n }\" />\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n }\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n [style.height]=\"$rowHeight()\"\r\n [style.min-height]=\"$rowHeight()\"\r\n [styler]=\"$rowStyles()\"\r\n [element]=\"row\"\r\n [conditionalClasses]=\"$rowClasses()\"\r\n (click)=\"rowClicked(row, $event)\"\r\n />\r\n\r\n <!-- group row -->\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n style=\"background-color: unset;\"\r\n [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: false \" [style.height]=\"$footerHeight()\" [class.sticky-footer]=\"$stickyFooter()\"\r\n [style.min-height]=\"$footerHeight()\"\r\n [style.bottom.px]=\"$stickyFooter() ? ($footerOffset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center;width:var(--tb-group-cell-width);min-width:var(--tb-group-cell-min-width);max-width:var(--tb-group-cell-max-width)}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.sticky-footer{position:sticky;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5220
5220
|
}
|
|
5221
5221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
5222
5222
|
type: Component,
|
|
@@ -5225,7 +5225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
5225
5225
|
MatTooltipModule, FunctionPipe, StylerDirective, ConditionalClassesDirective, MatMenuModule, MatSlideToggle,
|
|
5226
5226
|
StopPropagationDirective
|
|
5227
5227
|
], template: "<mat-table\r\n #table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"table-drag-list\"\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\"\r\n [matTooltip]=\"$selectAllMessage()\"\r\n (change)=\"$event ? masterToggle() : null\" />\r\n <button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" >\r\n <button mat-menu-item>\r\n <mat-slide-toggle [checked]=\"$hasSelectFilter()\" (change)=\"addSelectFilter($event.checked)\">\r\n Show Only Selected\r\n </mat-slide-toggle>\r\n </button>\r\n @if(this.$selection().selected.length)\r\n {\r\n <button mat-menu-item (click)=\"$selection().clear()\">\r\n Clear Selection\r\n </button>\r\n }\r\n <button mat-menu-item (click)=\"selectTop(+i.value)\">\r\n Select top \r\n <input #i class=\"input\" stop-propagation type=\"number\" \r\n placeholder=\"Set Size\"\r\n [value]=\"10\"\r\n [min]=\"1\"\r\n [max]=\"dataStore.state().sortedFilteredDataLength\" />\r\n </button>\r\n </mat-menu>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n <mat-checkbox\r\n [checked]=\"selection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\" [style]=\"$selectionColumnWidth()\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell index-column\" [style]=\"$indexColumnWidth()\">\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\" [style]=\"$indexColumnWidth()\">\r\n {{ 1 + i + $offsetIndex() }}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\" [style]=\"$indexColumnWidth()\"/>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();\r\n\r\n <!-- Default group row template -->\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n @if($hasSelectColumn())\r\n {\r\n @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n }\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n @if (!expanded())\r\n {\r\n <mat-icon>chevron_right</mat-icon>\r\n }\r\n @else\r\n {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n </div>\r\n @if(customTemplate)\r\n {\r\n <ng-container *ngTemplateOutlet=\"customTemplate; context: { \r\n $implicit: row, \r\n element: row, \r\n expanded: expanded(), \r\n level: row.level, \r\n key: row.key, \r\n uniqueName: row.uniqueName, \r\n groupHeaderDisplay: row.groupHeaderDisplay, \r\n length: row.length, \r\n padding: row.padding \r\n }\" />\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n }\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n [style.height]=\"$rowHeight()\"\r\n [style.min-height]=\"$rowHeight()\"\r\n [styler]=\"$rowStyles()\"\r\n [element]=\"row\"\r\n [conditionalClasses]=\"$rowClasses()\"\r\n (click)=\"rowClicked(row, $event)\"\r\n />\r\n\r\n <!-- group row -->\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n style=\"background-color: unset;\"\r\n [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: false \" [style.height]=\"$footerHeight()\" [class.sticky-footer]=\"$stickyFooter()\"\r\n [style.min-height]=\"$footerHeight()\"\r\n [style.bottom.px]=\"$stickyFooter() ? ($footerOffset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center;width:var(--tb-group-cell-width);min-width:var(--tb-group-cell-min-width);max-width:var(--tb-group-cell-max-width)}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.sticky-footer{position:sticky;z-index:10}\n"] }]
|
|
5228
|
-
}], propDecorators: { $headerRow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatHeaderRowDef), { isSignal: true }] }], $footerRow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatFooterRowDef), { isSignal: true }] }], $table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], $dropList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkDropList), { isSignal: true }] }], selection$: [{ type: i0.Output, args: ["selection"] }], $displayData: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayData", required: true }] }], $data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], $
|
|
5228
|
+
}], propDecorators: { $headerRow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatHeaderRowDef), { isSignal: true }] }], $footerRow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatFooterRowDef), { isSignal: true }] }], $table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], $dropList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkDropList), { isSignal: true }] }], selection$: [{ type: i0.Output, args: ["selection"] }], $displayData: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayData", required: true }] }], $data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], $customRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRows", required: false }] }], $columnInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnInfos", required: true }] }], $dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], $trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }] } });
|
|
5229
5229
|
|
|
5230
5230
|
function downloadData(data, filename, mimeType) {
|
|
5231
5231
|
const url = URL.createObjectURL(new Blob([data], { type: mimeType }));
|
|
@@ -6568,6 +6568,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6568
6568
|
}]
|
|
6569
6569
|
}], ctorParameters: () => [], propDecorators: { viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], genericTable: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GenericTableComponent), { isSignal: true }] }] } });
|
|
6570
6570
|
|
|
6571
|
+
/**
|
|
6572
|
+
* This component is the main container for the table builder. It is responsible for managing the state of the table, including filters, sorting, grouping, and pagination. It also handles the communication between the different components of the table builder, such as the column builder and the filter builder.
|
|
6573
|
+
*
|
|
6574
|
+
* You can drop in custom cells, headers, and group rows by using the corresponding directives. These will be automatically picked up and used in the table.
|
|
6575
|
+
*
|
|
6576
|
+
* You can add to the table header by adding a component with the selector '.tb-header-title' inside the table container (this is in addition to what you can add through the table settings).
|
|
6577
|
+
*
|
|
6578
|
+
* You can also add to the table footer by adding a component with the selector '.tb-paginator-row' inside the table container.
|
|
6579
|
+
*/
|
|
6571
6580
|
class TableContainerComponent {
|
|
6572
6581
|
constructor() {
|
|
6573
6582
|
this.state = inject(TableStore);
|
|
@@ -6931,7 +6940,7 @@ class TableContainerComponent {
|
|
|
6931
6940
|
#setUpAllValuesFilters;
|
|
6932
6941
|
static { this.headerId = 'tb-header-wrapper'; }
|
|
6933
6942
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data", sortedAndFilteredAndGroupedData$: "sortedAndFilteredAndGroupedData" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "$customHeaders", predicate: CustomHeaderDirective, isSignal: true }, { propertyName: "$customGroupRows", predicate: CustomGroupRowDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$paginatorWrapper", first: true, predicate: ["paginatorWrapper"], descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n <div class=\"title\">\r\n @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n {\r\n <ng-content select=\".tb-header-title\"/>\r\n @if (tableSettings.title)\r\n {\r\n @switch (tableSettings.title.level)\r\n {\r\n @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n }\r\n }\r\n }\r\n </div>\r\n @if(state.$groupByData().length)\r\n {\r\n <group-by-list />\r\n }\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader)\r\n {\r\n @if (!$collapsedHeader())\r\n {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n <lib-table-header-menu #l/>\r\n </mat-menu>\r\n\r\n }\r\n @else\r\n {\r\n <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"collapsed-head-row\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n </div>\r\n <lib-table-header-menu />\r\n </mat-menu>\r\n }\r\n <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div #paginatorWrapper class=\"paginator tb-paginator-wrapper\">\r\n <ng-content select=\".tb-paginator-row\" />\r\n <tb-paginator #tbPaginator />\r\n\r\n <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayData", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6943
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data", sortedAndFilteredAndGroupedData$: "sortedAndFilteredAndGroupedData" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "$customHeaders", predicate: CustomHeaderDirective, isSignal: true }, { propertyName: "$customGroupRows", predicate: CustomGroupRowDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$paginatorWrapper", first: true, predicate: ["paginatorWrapper"], descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n <div class=\"title\">\r\n @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n {\r\n <ng-content select=\".tb-header-title\"/>\r\n @if (tableSettings.title)\r\n {\r\n @switch (tableSettings.title.level)\r\n {\r\n @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n }\r\n }\r\n }\r\n </div>\r\n @if(state.$groupByData().length)\r\n {\r\n <group-by-list />\r\n }\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader)\r\n {\r\n @if (!$collapsedHeader())\r\n {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n <lib-table-header-menu #l/>\r\n </mat-menu>\r\n\r\n }\r\n @else\r\n {\r\n <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"collapsed-head-row\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n </div>\r\n <lib-table-header-menu />\r\n </mat-menu>\r\n }\r\n <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [customRows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [customRows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div #paginatorWrapper class=\"paginator tb-paginator-wrapper\">\r\n <ng-content select=\".tb-paginator-row\" />\r\n <tb-paginator #tbPaginator />\r\n\r\n <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep :where(tb-generic-table) .mat-mdc-row:nth-child(odd):where(:not(.no-stripe)){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayData", "data", "customRows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6935
6944
|
}
|
|
6936
6945
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
6937
6946
|
type: Component,
|
|
@@ -6941,7 +6950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6941
6950
|
MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
|
|
6942
6951
|
SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
|
|
6943
6952
|
MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer,
|
|
6944
|
-
], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n <div class=\"title\">\r\n @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n {\r\n <ng-content select=\".tb-header-title\"/>\r\n @if (tableSettings.title)\r\n {\r\n @switch (tableSettings.title.level)\r\n {\r\n @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n }\r\n }\r\n }\r\n </div>\r\n @if(state.$groupByData().length)\r\n {\r\n <group-by-list />\r\n }\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader)\r\n {\r\n @if (!$collapsedHeader())\r\n {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n <lib-table-header-menu #l/>\r\n </mat-menu>\r\n\r\n }\r\n @else\r\n {\r\n <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"collapsed-head-row\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n </div>\r\n <lib-table-header-menu />\r\n </mat-menu>\r\n }\r\n <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [
|
|
6953
|
+
], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n <div class=\"title\">\r\n @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n {\r\n <ng-content select=\".tb-header-title\"/>\r\n @if (tableSettings.title)\r\n {\r\n @switch (tableSettings.title.level)\r\n {\r\n @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n }\r\n }\r\n }\r\n </div>\r\n @if(state.$groupByData().length)\r\n {\r\n <group-by-list />\r\n }\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader)\r\n {\r\n @if (!$collapsedHeader())\r\n {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n <lib-table-header-menu #l/>\r\n </mat-menu>\r\n\r\n }\r\n @else\r\n {\r\n <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"collapsed-head-row\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n </div>\r\n <lib-table-header-menu />\r\n </mat-menu>\r\n }\r\n <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [customRows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [customRows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div #paginatorWrapper class=\"paginator tb-paginator-wrapper\">\r\n <ng-content select=\".tb-paginator-row\" />\r\n <tb-paginator #tbPaginator />\r\n\r\n <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep :where(tb-generic-table) .mat-mdc-row:nth-child(odd):where(:not(.no-stripe)){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
|
|
6945
6954
|
}], propDecorators: { $filterDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableFilterDirective), { ...{ descendants: true }, isSignal: true }] }], $customFilterDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableCustomFilterDirective), { ...{ descendants: true }, isSignal: true }] }], $paginatorComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PaginatorComponent), { isSignal: true }] }], $paginatorWrapper: [{ type: i0.ViewChild, args: ['paginatorWrapper', { isSignal: true }] }], $genericTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GenericTableComponent), { isSignal: true }] }], _$customRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatRowDef), { isSignal: true }] }], $customCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CustomCellDirective), { isSignal: true }] }], $customHeaders: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CustomHeaderDirective), { isSignal: true }] }], $customGroupRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CustomGroupRowDirective), { isSignal: true }] }], $menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }], $tableBuilder: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableBuilder", required: true }] }], $tableIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableId", required: false }] }], $trackByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], $inputFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputFilters", required: false }] }], $indexColumnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "indexColumn", required: false }] }], $selectionColumnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColumn", required: false }] }], $stickyHeaderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], $stickyFooterInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }], $groupHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeaderTemplate", required: false }] }], $groupHeaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeaderHeight", required: false }] }], $pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selection$: [{ type: i0.Output, args: ["selection"] }], onStateReset$: [{ type: i0.Output, args: ["onStateReset"] }], onSaveState$: [{ type: i0.Output, args: ["onSaveState"] }], state$: [{ type: i0.Output, args: ["state"] }], data$: [{ type: i0.Output, args: ["data"] }], sortedAndFilteredAndGroupedData$: [{ type: i0.Output, args: ["sortedAndFilteredAndGroupedData"] }] } });
|
|
6946
6955
|
function isFunction(a) {
|
|
6947
6956
|
return typeof a === 'function';
|
|
@@ -7117,9 +7126,12 @@ class TableBuilder {
|
|
|
7117
7126
|
}));
|
|
7118
7127
|
}
|
|
7119
7128
|
}
|
|
7120
|
-
const CreateTableBuilder = (reportDef
|
|
7121
|
-
|
|
7122
|
-
|
|
7129
|
+
const CreateTableBuilder = (reportDef, settings) => {
|
|
7130
|
+
if (isSignal(reportDef)) {
|
|
7131
|
+
return new TableBuilder(computed(() => reportDef().data), computed(() => reportDef().metaData), settings);
|
|
7132
|
+
}
|
|
7133
|
+
const reportDef$ = reportDef.pipe(defaultShareReplay());
|
|
7134
|
+
return new TableBuilder(reportDef$.pipe(map(r => r.data)), reportDef$.pipe(map(r => r.metaData)), settings);
|
|
7123
7135
|
};
|
|
7124
7136
|
|
|
7125
7137
|
// State
|