@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
181 lines (180 loc) • 9.13 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ColumnInfoService } from './../../common/column-info.service';
import { Component, Input, HostBinding } from '@angular/core';
import { DetailTemplateDirective } from '../details/detail-template.directive';
import { columnsToRender } from '../../columns/column-common';
import { isPresent } from '../../utils';
import { ColumnsContainer } from '../../columns/columns-container';
import { isColumnGroupComponent } from '../../columns/column-group.component';
import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
import { LogicalRowDirective } from '../../navigation/logical-row.directive';
import { TemplateContextDirective } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "./../../common/column-info.service";
/**
* @hidden
*/
export class FooterComponent {
columnInfoService;
columns = [];
groups = [];
detailTemplate;
scrollable;
lockedColumnsCount = 0;
logicalRowIndex = 0;
totalColumns;
get footerClass() {
return !this.scrollable;
}
hostClass = true;
hostRole = 'rowgroup';
constructor(columnInfoService) {
this.columnInfoService = columnInfoService;
}
get columnsToRender() {
return columnsToRender(this.columns || []);
}
trackByIndex(index) {
return index;
}
logicalColumnIndex(column) {
const index = column.leafIndex;
if (isPresent(index)) {
return index + (isPresent(this.detailTemplate) ? 1 : 0);
}
return -1;
}
addStickyStyles(column) {
const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
return { ...column.footerStyle, ...stickyStyles };
}
isColumnGroupComponent(column) {
return isColumnGroupComponent(column);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
<ng-container>
<tr
[class.k-footer-template]="true"
kendoGridLogicalRow
[logicalRowIndex]="logicalRowIndex"
[logicalSlaveRow]="lockedColumnsCount > 0"
[logicalCellsCount]="columns.length"
[logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
[totalColumns]="totalColumns"
>
<td
class="k-table-td k-group-cell k-table-group-td"
role="presentation"
*ngFor="let g of groups">
</td>
<td
role="presentation"
class="k-table-td k-hierarchy-cell"
*ngIf="detailTemplate?.templateRef">
</td>
<ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
<td *ngIf="!isColumnGroupComponent(column)"
kendoGridLogicalCell
class="k-table-td"
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="logicalColumnIndex(column)"
role="gridcell"
aria-selected="false"
[class.k-grid-footer-sticky]="column.sticky"
[ngClass]="column.footerClass"
[ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
<ng-template
[templateContext]="{
templateRef: column.footerTemplateRef,
columnIndex: column.leafIndex,
column: column,
$implicit: column
}">
</ng-template>
</td>
</ng-container>
</tr>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, decorators: [{
type: Component,
args: [{
selector: '[kendoGridFooter]',
template: `
<ng-container>
<tr
[class.k-footer-template]="true"
kendoGridLogicalRow
[logicalRowIndex]="logicalRowIndex"
[logicalSlaveRow]="lockedColumnsCount > 0"
[logicalCellsCount]="columns.length"
[logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
[totalColumns]="totalColumns"
>
<td
class="k-table-td k-group-cell k-table-group-td"
role="presentation"
*ngFor="let g of groups">
</td>
<td
role="presentation"
class="k-table-td k-hierarchy-cell"
*ngIf="detailTemplate?.templateRef">
</td>
<ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
<td *ngIf="!isColumnGroupComponent(column)"
kendoGridLogicalCell
class="k-table-td"
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="logicalColumnIndex(column)"
role="gridcell"
aria-selected="false"
[class.k-grid-footer-sticky]="column.sticky"
[ngClass]="column.footerClass"
[ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
<ng-template
[templateContext]="{
templateRef: column.footerTemplateRef,
columnIndex: column.leafIndex,
column: column,
$implicit: column
}">
</ng-template>
</td>
</ng-container>
</tr>
</ng-container>
`,
standalone: true,
imports: [LogicalRowDirective, NgFor, NgIf, LogicalCellDirective, NgClass, NgStyle, TemplateContextDirective]
}]
}], ctorParameters: function () { return [{ type: i1.ColumnInfoService }]; }, propDecorators: { columns: [{
type: Input
}], groups: [{
type: Input
}], detailTemplate: [{
type: Input
}], scrollable: [{
type: Input
}], lockedColumnsCount: [{
type: Input
}], logicalRowIndex: [{
type: Input
}], totalColumns: [{
type: Input
}], footerClass: [{
type: HostBinding,
args: ['class.k-grid-footer']
}], hostClass: [{
type: HostBinding,
args: ['class.k-table-tfoot']
}], hostRole: [{
type: HostBinding,
args: ['attr.role']
}] } });