igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
831 lines (825 loc) • 491 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, inject, ElementRef, ChangeDetectorRef, TemplateRef, HostBinding, HostListener, ViewChild, Input, ChangeDetectionStrategy, Component, Pipe, DOCUMENT, forwardRef, QueryList, NgZone, IterableDiffers, ViewContainerRef, Injector, EnvironmentInjector, LOCALE_ID, EventEmitter, createComponent, booleanAttribute, ViewChildren, ContentChildren, ContentChild, Output, Directive, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { getLocaleCurrencyCode, NgTemplateOutlet, DecimalPipe, DatePipe, PercentPipe, CurrencyPipe, NgClass, NgStyle, getLocaleNumberFormat, NumberFormatStyle, formatNumber } from '@angular/common';
import { GridBaseAPIService, IGX_GRID_BASE, IgxGridSelectionService, IgxFilteringService, GridSelectionMode, IgxColumnFormatterPipe, GridSummaryPosition, RowPinningPosition, IgxGridCellComponent, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxRowDirective, IgxRowDragDirective, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, FilterMode, GridCellMergeMode, IgxGridValidationService, IgxColumnResizingService, IGX_GRID_SERVICE_BASE, IgxGridNavigationService, IgxGridSummaryService, IgxGridTransaction, RowEditPositionStrategy, getUUID, IgxGridExcelStyleFilteringComponent, DropPosition, IgxCell, IgxEditRow, IgxColumnComponent, CharSeparatedValueData, IgxAdvancedFilteringDialogComponent, IgxColumnGroupComponent, IgxGridColumnResizerComponent, IgxGridHeaderRowComponent, IgxGridGroupByAreaComponent, IgxGridBodyDirective, IgxRowEditTabStopDirective, IgxSummaryRowComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxRowAddTextDirective, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxGridLoadingTemplateDirective, IgxGridEmptyTemplateDirective, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxRowDragGhostDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxDragIndicatorIconDirective, IgxToolbarToken, WatchChanges, IgxGridRow, IgxGridCell, IgxGroupByRow, IgxSummaryRow, IgxGridMRLNavigationService, IgxGridDragSelectDirective, IgxColumnMovingDropDirective, IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxSummaryDataPipe, IgxGridDetailTemplateDirective, IgxGroupByRowTemplateDirective, IgxGroupByRowSelectorDirective, IgxGridCRUDService, IgxGridFooterComponent, IgxGridStateDirective, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxGridActionsBaseDirective, IgxGridActionButtonComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxFilterCellTemplateDirective, IgxSummaryTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxCellEditorTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnLayoutComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxCSVTextDirective, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleMovingComponent, IgxExcelStyleSearchComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMaxLengthValidatorDirective, IgxColumnPatternValidatorDirective } from 'igniteui-angular/grids/core';
import { cloneArray, DataUtil, GridColumnDataType, GridSummaryCalculationMode, FilteringExpressionsTree, FilterUtil, HammerGesturesManager, isTree, FilteringLogic, FilteringExpressionsTreeType, isObject, TransactionType, IgxFlatTransactionFactory, IgxOverlayService, PlatformUtil, DefaultMergeStrategy, FilteringStrategy, getCurrentResourceStrings, GridResourceStringsEN, ColumnPinningPosition, VerticalAlignment, HorizontalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, DefaultDataCloneStrategy, ɵSize as _Size, areEqualArrays, resizeObservable, compareMaps, TransactionEventOrigin, mergeObjects, ContainerPositionStrategy, resolveNestedPath, columnFieldPath, formatDate, recreateTree, recreateTreeFromFields, IgxOverlayOutletDirective, IgxActionStripToken } from 'igniteui-angular/core';
import { takeUntil, shareReplay, filter, throttleTime, takeWhile, map, first, take } from 'rxjs/operators';
import { Subject, fromEvent, animationFrameScheduler, pipe, merge } from 'rxjs';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxBadgeComponent } from 'igniteui-angular/badge';
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
import * as i1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IgxChipComponent } from 'igniteui-angular/chips';
import { IgxTextHighlightDirective, IgxFocusDirective, IgxDateTimeEditorDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridForOfDirective, IgxTextHighlightService, IgxToggleDirective, IgxTemplateOutletDirective, IgxButtonDirective, IgxRippleDirective, IgxScrollInertiaDirective, IgxForOfSyncService, IgxForOfScrollSyncService } from 'igniteui-angular/directives';
import { IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
import { __decorate } from 'tslib';
import { IgcTrialWatermark } from 'igniteui-trial-watermark';
import { IgxPaginatorToken, IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective } from 'igniteui-angular/paginator';
class IgxGridAPIService extends GridBaseAPIService {
groupBy(expression) {
const groupingState = cloneArray(this.grid.groupingExpressions);
this.prepare_grouping_expression([groupingState], expression);
this.grid.groupingExpressions = groupingState;
this.arrange_sorting_expressions();
}
groupBy_multiple(expressions) {
const groupingState = cloneArray(this.grid.groupingExpressions);
for (const each of expressions) {
this.prepare_grouping_expression([groupingState], each);
}
this.grid.groupingExpressions = groupingState;
this.arrange_sorting_expressions();
}
clear_groupby(name) {
const groupingState = cloneArray(this.grid.groupingExpressions);
if (name) {
const names = typeof name === 'string' ? [name] : name;
const groupedCols = groupingState.filter((state) => names.indexOf(state.fieldName) < 0);
this.grid.groupingExpressions = groupedCols;
names.forEach((colName) => {
const grExprIndex = groupingState.findIndex((exp) => exp.fieldName === colName);
const grpExpandState = this.grid.groupingExpansionState;
/* remove expansion states related to the cleared group
and all with deeper hierarchy than the cleared group */
const newExpandState = grpExpandState.filter((val) => val.hierarchy && val.hierarchy.length <= grExprIndex);
/* Do not set the new instance produced by filter
when there are no differences between expansion states */
if (newExpandState.length !== grpExpandState.length) {
this.grid.groupingExpansionState = newExpandState;
}
});
}
else {
// clear all
this.grid.groupingExpressions = [];
this.grid.groupingExpansionState = [];
}
}
groupBy_get_expanded_for_group(groupRow) {
const grState = this.grid.groupingExpansionState;
const hierarchy = DataUtil.getHierarchy(groupRow);
return grState.find((state) => DataUtil.isHierarchyMatch(state.hierarchy || [{ fieldName: groupRow.expression.fieldName, value: groupRow.value }], hierarchy, this.grid.groupingExpressions));
}
groupBy_is_row_in_group(groupRow, rowID) {
const grid = this.grid;
let rowInGroup = false;
groupRow.records.forEach(row => {
if (grid.primaryKey ? row[grid.primaryKey] === rowID : row === rowID) {
rowInGroup = true;
}
});
return rowInGroup;
}
groupBy_toggle_group(groupRow) {
const grid = this.grid;
if (grid.gridAPI.crudService.cellInEditMode) {
this.crudService.endEdit(false);
}
const expansionState = grid.groupingExpansionState;
const state = this.groupBy_get_expanded_for_group(groupRow);
if (state) {
state.expanded = !state.expanded;
}
else {
expansionState.push({
expanded: !grid.groupsExpanded,
hierarchy: DataUtil.getHierarchy(groupRow)
});
}
this.grid.groupingExpansionState = [...expansionState];
if (grid.rowEditable) {
grid.repositionRowEditingOverlay(grid.gridAPI.crudService.rowInEditMode);
}
}
set_grouprow_expansion_state(groupRow, value) {
if (this.grid.isExpandedGroup(groupRow) !== value) {
this.groupBy_toggle_group(groupRow);
}
}
groupBy_fully_expand_group(groupRow) {
const state = this.groupBy_get_expanded_for_group(groupRow);
const expanded = state ? state.expanded : this.grid.groupsExpanded;
if (!expanded) {
this.groupBy_toggle_group(groupRow);
}
if (groupRow.groupParent) {
this.groupBy_fully_expand_group(groupRow.groupParent);
}
}
groupBy_select_all_rows_in_group(groupRow, clearPrevSelection) {
this.grid.selectionService.selectRowsWithNoEvent(this.grid.primaryKey ?
groupRow.records.map(x => x[this.grid.primaryKey]) : groupRow.records, clearPrevSelection);
}
groupBy_deselect_all_rows_in_group(groupRow) {
this.grid.selectionService.deselectRowsWithNoEvent(this.grid.primaryKey ?
groupRow.records.map(x => x[this.grid.primaryKey]) : groupRow.records);
}
arrange_sorting_expressions() {
const groupingState = this.grid.groupingExpressions;
const sortingState = cloneArray(this.grid.sortingExpressions);
for (const grExpr of groupingState) {
const sortExprIndex = sortingState.findIndex((exp) => exp.fieldName === grExpr.fieldName);
if (sortExprIndex > -1) {
sortingState.splice(sortExprIndex, 1);
}
}
this.grid.sortingExpressions = sortingState;
}
get_groupBy_record_id(gRow) {
let recordId = '{ ';
const hierrarchy = DataUtil.getHierarchy(gRow);
for (let i = 0; i < hierrarchy.length; i++) {
const groupByKey = hierrarchy[i];
recordId += `'${groupByKey.fieldName}': '${groupByKey.value}'`;
if (i < hierrarchy.length - 1) {
recordId += ', ';
}
}
recordId += ' }';
return recordId;
}
remove_grouping_expression(fieldName) {
const groupingExpressions = this.grid.groupingExpressions;
const index = groupingExpressions.findIndex((expr) => expr.fieldName === fieldName);
if (index !== -1) {
groupingExpressions.splice(index, 1);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridAPIService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridAPIService, decorators: [{
type: Injectable
}] });
class IgxGridGroupByRowComponent {
/**
* Returns whether the row is focused.
* ```
* let gridRowFocused = this.grid1.rowList.first.focused;
* ```
*/
get focused() {
return this.isActive();
}
/** @hidden @internal */
get currencyCode() {
return this.groupRow.column.pipeArgs.currencyCode ?
this.groupRow.column.pipeArgs.currencyCode : getLocaleCurrencyCode(this.grid.locale);
}
constructor() {
this.grid = inject(IGX_GRID_BASE);
this.gridSelection = inject(IgxGridSelectionService);
this.element = inject(ElementRef);
this.cdr = inject(ChangeDetectorRef);
this.filteringService = inject(IgxFilteringService);
/**
* @hidden
*/
this.isFocused = false;
/**
* @hidden
*/
this.destroy$ = new Subject();
/**
* @hidden
*/
this.defaultCssClass = 'igx-grid__group-row';
/**
* @hidden
*/
this.paddingIndentationCssClass = 'igx-grid__group-row--padding-level';
this.gridSelection.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
this.cdr.markForCheck();
});
}
activate() {
this.grid.navigation.setActiveNode({ row: this.index });
}
onClick(event) {
this.grid.rowClick.emit({
row: this.grid.createRow(this.index),
event
});
}
/**
* @hidden
* @internal
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
/**
* Returns whether the group row is expanded.
* ```typescript
* const groupRowExpanded = this.grid1.rowList.first.expanded;
* ```
*/
get expanded() {
return this.grid.isExpandedGroup(this.groupRow);
}
/**
* @hidden
*/
get describedBy() {
const grRowExpr = this.groupRow.expression !== undefined ? this.groupRow.expression.fieldName : '';
return this.gridID + '_' + grRowExpr;
}
get dataRowIndex() {
return this.index;
}
/**
* Returns a reference to the underlying HTML element.
* ```typescript
* const groupRowElement = this.nativeElement;
* ```
*/
get nativeElement() {
return this.element.nativeElement;
}
get attrCellID() {
return `${this.gridID}_${this.index}`;
}
/**
* Returns the style classes applied to the group rows.
* ```typescript
* const groupCssStyles = this.grid1.rowList.first.styleClasses;
* ```
*/
get styleClasses() {
return `${this.defaultCssClass} ` + `${this.paddingIndentationCssClass}-` + this.groupRow.level +
(this.isActive() ? ` ${this.defaultCssClass}--active` : '');
}
isActive() {
return this.grid.navigation.activeNode ? this.grid.navigation.activeNode.row === this.index : false;
}
/**
* @hidden @internal
*/
getRowID(rowData) {
return this.grid.primaryKey ? rowData[this.grid.primaryKey] : rowData;
}
/**
* @hidden @internal
*/
onGroupSelectorClick(event) {
if (!this.grid.isMultiRowSelectionEnabled) {
return;
}
event.stopPropagation();
if (this.areAllRowsInTheGroupSelected) {
this.gridSelection.deselectRows(this.groupRow.records.map(x => this.getRowID(x)));
}
else {
this.gridSelection.selectRows(this.groupRow.records.map(x => this.getRowID(x)));
}
}
/**
* Toggles the group row.
* ```typescript
* this.grid1.rowList.first.toggle()
* ```
*/
toggle() {
this.grid.toggleGroup(this.groupRow);
}
get iconTemplate() {
if (this.expanded) {
return this.grid.rowExpandedIndicatorTemplate || this.defaultGroupByExpandedTemplate;
}
else {
return this.grid.rowCollapsedIndicatorTemplate || this.defaultGroupByCollapsedTemplate;
}
}
get selectionNode() {
return {
row: this.index,
column: this.gridSelection.activeElement ? this.gridSelection.activeElement.column : 0
};
}
/**
* @hidden @internal
*/
get dataType() {
const column = this.groupRow.column;
return (column && column.dataType) || GridColumnDataType.String;
}
/**
* @hidden @internal
*/
get formatter() {
const column = this.groupRow.column;
return (column && column.formatter) || null;
}
/**
* @hidden @internal
*/
get areAllRowsInTheGroupSelected() {
return this.groupRow.records.every(x => this.gridSelection.isRowSelected(this.getRowID(x)));
}
/**
* @hidden @internal
*/
get selectedRowsInTheGroup() {
const selectedIds = new Set(this.gridSelection.filteredSelectedRowIds);
return this.groupRow.records.filter(rowID => selectedIds.has(this.getRowID(rowID)));
}
/**
* @hidden @internal
*/
get groupByRowCheckboxIndeterminateState() {
if (this.selectedRowsInTheGroup.length > 0) {
return !this.areAllRowsInTheGroupSelected;
}
return false;
}
/**
* @hidden @internal
*/
get groupByRowSelectorBaseAriaLabel() {
const ariaLabel = this.areAllRowsInTheGroupSelected ?
this.grid.resourceStrings.igx_grid_groupByArea_deselect_message : this.grid.resourceStrings.igx_grid_groupByArea_select_message;
return ariaLabel.replace('{0}', this.groupRow.expression.fieldName).replace('{1}', this.groupRow.value);
}
/**
* @hidden @internal
*/
get showRowSelectors() {
return this.grid.rowSelection !== GridSelectionMode.none && !this.hideGroupRowSelectors;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridGroupByRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridGroupByRowComponent, isStandalone: true, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()", "click": "onClick($event)" }, properties: { "attr.aria-expanded": "this.expanded", "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n @if (rowDraggable) {\n <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n </div>\n }\n\n @if (showRowSelectors) {\n <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\"\n (click)=\"onGroupSelectorClick($event)\">\n <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n context: { $implicit: {\n selectedCount: selectedRowsInTheGroup.length,\n totalCount: this.groupRow.records.length,\n groupRow: this.groupRow }}\">\n </ng-template>\n </div>\n }\n\n <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n </ng-container>\n </div>\n\n <div class=\"igx-grid__group-content\" #groupContent>\n <ng-container\n *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n </ng-container>\n </div>\n\n <ng-template #defaultGroupByExpandedTemplate>\n <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n </ng-template>\n\n <ng-template #defaultGroupByCollapsedTemplate>\n <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n </ng-template>\n\n\n <ng-template #defaultGroupByTemplate>\n <div class=\"igx-group-label\">\n <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n <span class=\"igx-group-label__column-name\">\n {{ groupRow.column && groupRow.column.header ?\n groupRow.column.header :\n (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n </span>\n\n <span class=\"igx-group-label__text\">{{\n formatter\n ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n : dataType === \"number\"\n ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)\n : dataType === 'currency'\n ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n : dataType === 'percent'\n ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n : groupRow.value\n }}</span>\n\n <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n </igx-badge>\n </div>\n </ng-template>\n <ng-template #groupByRowSelectorBaseTemplate let-context>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n #groupByRowCheckbox>\n </igx-checkbox>\n </div>\n </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-groupby-row', imports: [
NgTemplateOutlet,
DecimalPipe,
DatePipe,
PercentPipe,
CurrencyPipe,
IgxIconComponent,
IgxBadgeComponent,
IgxCheckboxComponent,
IgxColumnFormatterPipe
], template: "<ng-container #defaultGroupRow>\n\n @if (rowDraggable) {\n <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n </div>\n }\n\n @if (showRowSelectors) {\n <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\"\n (click)=\"onGroupSelectorClick($event)\">\n <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n context: { $implicit: {\n selectedCount: selectedRowsInTheGroup.length,\n totalCount: this.groupRow.records.length,\n groupRow: this.groupRow }}\">\n </ng-template>\n </div>\n }\n\n <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n </ng-container>\n </div>\n\n <div class=\"igx-grid__group-content\" #groupContent>\n <ng-container\n *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n </ng-container>\n </div>\n\n <ng-template #defaultGroupByExpandedTemplate>\n <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n </ng-template>\n\n <ng-template #defaultGroupByCollapsedTemplate>\n <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n </ng-template>\n\n\n <ng-template #defaultGroupByTemplate>\n <div class=\"igx-group-label\">\n <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n <span class=\"igx-group-label__column-name\">\n {{ groupRow.column && groupRow.column.header ?\n groupRow.column.header :\n (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n </span>\n\n <span class=\"igx-group-label__text\">{{\n formatter\n ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n : dataType === \"number\"\n ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)\n : dataType === 'currency'\n ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n : dataType === 'percent'\n ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n : groupRow.value\n }}</span>\n\n <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n </igx-badge>\n </div>\n </ng-template>\n <ng-template #groupByRowSelectorBaseTemplate let-context>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n #groupByRowCheckbox>\n </igx-checkbox>\n </div>\n </ng-template>\n</ng-container>\n" }]
}], ctorParameters: () => [], propDecorators: { hideGroupRowSelectors: [{
type: Input
}], rowDraggable: [{
type: Input
}], index: [{
type: Input
}], gridID: [{
type: Input
}], groupRow: [{
type: Input
}], groupContent: [{
type: ViewChild,
args: ['groupContent', { static: true }]
}], isFocused: [{
type: Input
}], defaultGroupByExpandedTemplate: [{
type: ViewChild,
args: ['defaultGroupByExpandedTemplate', { read: TemplateRef, static: true }]
}], defaultGroupByCollapsedTemplate: [{
type: ViewChild,
args: ['defaultGroupByCollapsedTemplate', { read: TemplateRef, static: true }]
}], activate: [{
type: HostListener,
args: ['pointerdown']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], expanded: [{
type: HostBinding,
args: ['attr.aria-expanded']
}], describedBy: [{
type: HostBinding,
args: ['attr.aria-describedby']
}], dataRowIndex: [{
type: HostBinding,
args: ['attr.data-rowIndex']
}], attrCellID: [{
type: HostBinding,
args: ['attr.id']
}], styleClasses: [{
type: HostBinding,
args: ['class']
}] } });
/** @hidden */
class IgxGridDetailsPipe {
constructor() {
this.grid = inject(IGX_GRID_BASE);
}
transform(collection, hasDetails, expansionStates, _pipeTrigger) {
if (!hasDetails) {
return collection;
}
const res = this.addDetailRows(collection, expansionStates);
return res;
}
addDetailRows(collection, _expansionStates) {
const result = [];
collection.forEach((v) => {
result.push(v);
if (!this.grid.isGroupByRecord(v) && !this.grid.isSummaryRow(v) &&
this.grid.gridAPI.get_row_expansion_state(v)) {
const detailsObj = { detailsData: v };
result.push(detailsObj);
}
});
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDetailsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDetailsPipe, isStandalone: true, name: "gridDetails" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDetailsPipe, decorators: [{
type: Pipe,
args: [{
name: 'gridDetails',
standalone: true
}]
}] });
/** @hidden */
class IgxGridSummaryPipe {
constructor() {
this.grid = inject(IGX_GRID_BASE);
}
transform(collection, hasSummary, summaryCalculationMode, summaryPosition, id, showSummary, _, __) {
if (!collection.data || !hasSummary || summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly) {
return collection.data;
}
return this.addSummaryRows(id, collection, summaryPosition, showSummary);
}
addSummaryRows(gridId, collection, summaryPosition, showSummary) {
const recordsWithSummary = [];
const lastChildMap = new Map();
const maxSummaryHeight = this.grid.summaryService.calcMaxSummaryHeight();
if (collection.metadata.length && !this.grid.isGroupByRecord(collection.data[0]) &&
this.grid.isGroupByRecord(collection.metadata[0]) && summaryPosition === GridSummaryPosition.bottom) {
const groups = [];
groups.push(collection.metadata[0]);
while (groups[groups.length - 1].groupParent) {
groups.push(groups[groups.length - 1].groupParent);
}
groups.reverse();
groups.forEach(g => g.skip = true);
collection.data.splice(0, 0, ...groups);
}
for (const record of collection.data) {
let skipAdd = false;
let recordId;
let groupByRecord = null;
if (this.grid.isGroupByRecord(record)) {
skipAdd = !!record.skip;
record.skip = null;
groupByRecord = record;
recordId = this.grid.gridAPI.get_groupBy_record_id(groupByRecord);
}
else {
recordId = this.grid.gridAPI.get_row_id(record);
}
if (!skipAdd) {
recordsWithSummary.push(record);
}
if (summaryPosition === GridSummaryPosition.bottom && showSummary &&
(groupByRecord && !this.grid.isExpandedGroup(groupByRecord))) {
const records = this.removeDeletedRecord(this.grid, groupByRecord.records.slice());
const summaries = this.grid.summaryService.calculateSummaries(recordId, records);
const summaryRecord = {
summaries,
max: maxSummaryHeight
};
recordsWithSummary.push(summaryRecord);
}
if (summaryPosition === GridSummaryPosition.bottom && lastChildMap.has(recordId)) {
const groupRecords = lastChildMap.get(recordId);
for (const groupRecord of groupRecords) {
const groupRecordId = this.grid.gridAPI.get_groupBy_record_id(groupRecord);
const records = this.removeDeletedRecord(this.grid, groupRecord.records.slice());
const summaries = this.grid.summaryService.calculateSummaries(groupRecordId, records, groupRecord);
const summaryRecord = {
summaries,
max: maxSummaryHeight
};
recordsWithSummary.push(summaryRecord);
}
}
const showSummaries = showSummary ? false : (groupByRecord && !this.grid.isExpandedGroup(groupByRecord));
if (groupByRecord === null || showSummaries) {
continue;
}
if (summaryPosition === GridSummaryPosition.top) {
const records = this.removeDeletedRecord(this.grid, groupByRecord.records.slice());
const summaries = this.grid.summaryService.calculateSummaries(recordId, records, groupByRecord);
const summaryRecord = {
summaries,
max: maxSummaryHeight
};
recordsWithSummary.push(summaryRecord);
}
else if (summaryPosition === GridSummaryPosition.bottom) {
let lastChild = groupByRecord;
while (lastChild.groups && lastChild.groups.length > 0 && this.grid.isExpandedGroup(lastChild)) {
lastChild = lastChild.groups[lastChild.groups.length - 1];
}
let lastChildId;
if (this.grid.isExpandedGroup(lastChild)) {
lastChildId = this.grid.gridAPI.get_row_id(lastChild.records[lastChild.records.length - 1]);
}
else {
lastChildId = this.grid.gridAPI.get_groupBy_record_id(lastChild);
}
let groupRecords = lastChildMap.get(lastChildId);
if (!groupRecords) {
groupRecords = [];
lastChildMap.set(lastChildId, groupRecords);
}
groupRecords.unshift(groupByRecord);
}
}
return recordsWithSummary;
}
removeDeletedRecord(grid, data) {
if (!grid.transactions.enabled) {
return data;
}
const deletedRows = grid.transactions.getTransactionLog().filter(t => t.type === 'delete').map(t => t.id);
deletedRows.forEach(rowID => {
const tempData = grid.primaryKey ? data.map(rec => rec[grid.primaryKey]) : data;
const index = tempData.indexOf(rowID);
if (index !== -1) {
data.splice(index, 1);
}
});
return data;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSummaryPipe, isStandalone: true, name: "gridSummary" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSummaryPipe, decorators: [{
type: Pipe,
args: [{
name: 'gridSummary',
standalone: true
}]
}] });
/**
* @hidden
*/
class IgxGridSortingPipe {
constructor() {
this.grid = inject(IGX_GRID_BASE);
}
transform(collection, sortExpressions, groupExpressions, sorting, id, pipeTrigger, pinned) {
let result;
const expressions = groupExpressions.concat(sortExpressions);
if (!expressions.length) {
result = collection;
}
else {
result = DataUtil.sort(cloneArray(collection), expressions, sorting, this.grid);
}
this.grid.setFilteredSortedData(result, pinned);
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSortingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSortingPipe, isStandalone: true, name: "gridSort" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSortingPipe, decorators: [{
type: Pipe,
args: [{
name: 'gridSort',
standalone: true
}]
}] });
/**
* @hidden
*/
class IgxGridGroupingPipe {
constructor() {
this.grid = inject(IGX_GRID_BASE);
}
transform(collection, expression, expansion, groupingStrategy, defaultExpanded, id, groupsRecords, _pipeTrigger) {
const state = { expressions: [], expansion: [], defaultExpanded };
state.expressions = this.grid.groupingExpressions;
let result;
const fullResult = { data: [], metadata: [] };
if (!state.expressions.length) {
// empty the array without changing reference
groupsRecords.splice(0, groupsRecords.length);
result = {
data: collection,
metadata: collection
};
}
else {
state.expansion = this.grid.groupingExpansionState;
state.defaultExpanded = this.grid.groupsExpanded;
result = DataUtil.group(cloneArray(collection), state, groupingStrategy, this.grid, groupsRecords, fullResult);
}
this.grid.groupingFlatResult = result.data;
this.grid.groupingResult = fullResult.data;
this.grid.groupingMetadata = fullResult.metadata;
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridGroupingPipe, isStandalone: true, name: "gridGroupBy" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridGroupingPipe, decorators: [{
type: Pipe,
args: [{
name: 'gridGroupBy',
standalone: true
}]
}] });
class IgxGridCellMergePipe {
constructor() {
this.grid = inject(IGX_GRID_BASE);
}
transform(collection, colsToMerge, mergeMode, mergeStrategy, _pipeTrigger) {
if (colsToMerge.length === 0) {
return collection;
}
const result = DataUtil.merge(collection, colsToMerge, mergeStrategy, [], this.grid);
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellMergePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellMergePipe, isStandalone: true, name: "gridCellMerge" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellMergePipe, decorators: [{
type: Pipe,
args: [{
name: 'gridCellMerge',
standalone: true
}]
}] });
class IgxGridUnmergeActivePipe {
constructor() {
this.grid = inject(IGX_GRID_BASE);
}
transform(collection, colsToMerge, activeRowIndexes, pinned, _pipeTrigger) {
if (colsToMerge.length === 0) {
return collection;
}
if (this.grid.hasPinnedRecords && !pinned && this.grid.pinning.rows !== RowPinningPosition.Bottom) {
activeRowIndexes = activeRowIndexes.map(x => x - this.grid.pinnedRecordsCount);
}
activeRowIndexes = Array.from(new Set(activeRowIndexes)).filter(x => !isNaN(x));
const rootsToUpdate = [];
activeRowIndexes.forEach(index => {
const target = collection[index];
if (target && target.cellMergeMeta) {
colsToMerge.forEach(col => {
const colMeta = target.cellMergeMeta.get(col.field);
const root = colMeta.root || (colMeta.rowSpan > 1 ? target : null);
if (root) {
rootsToUpdate.push(root);
}
});
}
});
const uniqueRoots = Array.from(new Set(rootsToUpdate));
if (uniqueRoots.length === 0) {
// if nothing to update, return
return collection;
}
let result = cloneArray(collection);
uniqueRoots.forEach(x => {
const index = collection.indexOf(x);
const colKeys = [...x.cellMergeMeta.keys()];
const cols = colsToMerge.filter(col => colKeys.indexOf(col.field) !== -1);
for (const col of cols) {
const childData = x.cellMergeMeta.get(col.field).childRecords;
const childRecs = childData.map(rec => rec.recordRef);
if (childRecs.length === 0) {
// nothing to unmerge
continue;
}
const unmergedData = DataUtil.merge([x.recordRef, ...childRecs], [col], this.grid.mergeStrategy, activeRowIndexes.map(ri => ri - index), this.grid);
for (let i = 0; i < unmergedData.length; i++) {
const unmergedRec = unmergedData[i];
const origRecord = result[index + i];
if (unmergedRec.cellMergeMeta?.get(col.field)) {
// clone of object, since we don't want to pollute the original fully merged collection.
const objCopy = {
recordRef: origRecord.recordRef,
ghostRecord: origRecord.ghostRecord,
cellMergeMeta: new Map(origRecord.cellMergeMeta.entries())
};
// update copy with new meta from unmerged data record, but just for this column
objCopy.cellMergeMeta?.set(col.field, unmergedRec.cellMergeMeta.get(col.field));
result[index + i] = objCopy;
}
else {
// this is the unmerged record, with no merge metadata
result[index + i] = unmergedRec;
}
}
}
});
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridUnmergeActivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridUnmergeActivePipe, isStandalone: true, name: "gridUnmergeActive" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridUnmergeActivePipe, decorators: [{
type: Pipe,
args: [{
name: 'gridUnmergeActive',
standalone: true
}]
}] });
/**
* @hidden
*/
class IgxGridPagingPipe {
constructor() {
this.grid = inject(IGX_GRID_BASE);
}
transform(collection, enabled, page = 0, perPage = 15, _) {
if (!enabled || this.grid.pagingMode !== 'local') {
return collection;
}
const state = {
index: page,
recordsPerPage: perPage
};
const total = this.grid._totalRecords >= 0 ? this.grid._totalRecords : collection.data?.length;
DataUtil.correctPagingState(state, total);
const result = {
data: DataUtil.page(cloneArray(collection.data), state, total),
metadata: DataUtil.page(cloneArray(collection.metadata), state, total)
};
if (this.grid.page !== state.index) {
this.grid.page = state.index;
}
this.grid.pagingState = state;
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridPagingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridPagingPipe, isStandalone: true, name: "gridPaging" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridPagingPipe, decorators: [{
type: Pipe,
args: [{
name: 'gridPaging',
standalone: true
}]
}] });
/**
* @hidden
*/
class IgxGridFilteringPipe {
constructor() {
this.grid = inject(IGX_GRID_BASE);
}
transform(collection, expressionsTree, filterStrategy, advancedExpressionsTree, id, pipeTrigger, filteringPipeTrigger, pinned) {
const state = {
expressionsTree,
strategy: filterStrategy,
advancedExpressionsTree
};
if (FilteringExpressionsTree.empty(state.expressionsTree) && FilteringExpressionsTree.empty(state.advancedExpressionsTree)) {
return collection;
}
const result = FilterUtil.filter(cloneArray(collection), state, this.grid);
this.grid.setFilteredData(result, pinned);
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilteringPipe, isStandalone: true, name: "gridFiltering" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilteringPipe, decorators: [{
type: Pipe,
args: [{
name: 'gridFiltering',
standalone: true
}]
}] });
class IgxGridExpandableCellComponent extends IgxGridCellComponent {
constructor() {
super(...arguments);
this.document = inject(DOCUMENT);
/**
* @hidden
*/
this.expanded = false;
}
/**
* @hidden
*/
toggle(event) {
event.stopPropagation();
const expansionState = this.grid.gridAPI.get_row_expansion_state(this.intRow.data);
this.grid.gridAPI.set_row_expansion_state(this.intRow.key, !expansionState, event);
}
/**
* @hidden
*/
onIndicatorFocus(