igniteui-angular 21.2.2 → 21.2.4
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.
- package/fesm2022/igniteui-angular-grids-core.mjs +31 -5
- package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-grid.mjs +18 -12
- package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +4 -4
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-lite.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +2 -2
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs +4 -4
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs.map +1 -1
- package/package.json +1 -1
- package/types/igniteui-angular-grids-core.d.ts +19 -4
- package/types/igniteui-angular-grids-lite.d.ts +1 -1
|
@@ -195,6 +195,10 @@ class IgxGridGroupByRowComponent {
|
|
|
195
195
|
* @hidden
|
|
196
196
|
*/
|
|
197
197
|
this.paddingIndentationCssClass = 'igx-grid__group-row--padding-level';
|
|
198
|
+
/**
|
|
199
|
+
* @hidden @internal
|
|
200
|
+
*/
|
|
201
|
+
this.role = 'row';
|
|
198
202
|
this.gridSelection.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
|
|
199
203
|
this.cdr.markForCheck();
|
|
200
204
|
});
|
|
@@ -355,7 +359,7 @@ class IgxGridGroupByRowComponent {
|
|
|
355
359
|
return this.grid.rowSelection !== GridSelectionMode.none && !this.hideGroupRowSelectors;
|
|
356
360
|
}
|
|
357
361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridGroupByRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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-
|
|
362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses", "attr.role": "this.role" } }, 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\" role=\"gridcell\">\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\" role=\"gridcell\" (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\" role=\"gridcell\" [attr.aria-expanded]=\"expanded\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n </ng-container>\n </div>\n\n <div class=\"igx-grid__group-content\" role=\"gridcell\" #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: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
359
363
|
}
|
|
360
364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
|
|
361
365
|
type: Component,
|
|
@@ -369,7 +373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
369
373
|
IgxBadgeComponent,
|
|
370
374
|
IgxCheckboxComponent,
|
|
371
375
|
IgxColumnFormatterPipe
|
|
372
|
-
], 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" }]
|
|
376
|
+
], template: "<ng-container #defaultGroupRow>\n\n @if (rowDraggable) {\n <div class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"gridcell\">\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\" role=\"gridcell\" (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\" role=\"gridcell\" [attr.aria-expanded]=\"expanded\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n </ng-container>\n </div>\n\n <div class=\"igx-grid__group-content\" role=\"gridcell\" #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" }]
|
|
373
377
|
}], ctorParameters: () => [], propDecorators: { hideGroupRowSelectors: [{
|
|
374
378
|
type: Input
|
|
375
379
|
}], rowDraggable: [{
|
|
@@ -397,9 +401,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
397
401
|
}], onClick: [{
|
|
398
402
|
type: HostListener,
|
|
399
403
|
args: ['click', ['$event']]
|
|
400
|
-
}], expanded: [{
|
|
401
|
-
type: HostBinding,
|
|
402
|
-
args: ['attr.aria-expanded']
|
|
403
404
|
}], describedBy: [{
|
|
404
405
|
type: HostBinding,
|
|
405
406
|
args: ['attr.aria-describedby']
|
|
@@ -412,6 +413,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
412
413
|
}], styleClasses: [{
|
|
413
414
|
type: HostBinding,
|
|
414
415
|
args: ['class']
|
|
416
|
+
}], role: [{
|
|
417
|
+
type: HostBinding,
|
|
418
|
+
args: ['attr.role']
|
|
415
419
|
}] } });
|
|
416
420
|
|
|
417
421
|
/**
|
|
@@ -944,11 +948,11 @@ class IgxGridRowComponent extends IgxRowDirective {
|
|
|
944
948
|
};
|
|
945
949
|
}
|
|
946
950
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
947
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxGridRowComponent, isStandalone: true, selector: "igx-grid-row", providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"></ng-container>\n\n<ng-template #addTemp>\n <div class=\"igx-grid__tr--inner\" [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\" (animationend)=\"animationEndHandler()\">\n <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n </div>\n</ng-template>\n<ng-template #defaultTemp>\n @if (rowDraggable) {\n <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n </div>\n }\n @if (this.showRowSelectors) {\n <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n <ng-template *ngTemplateOutlet=\"\n this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n </ng-template>\n </div>\n }\n @if (grid.groupingExpressions.length > 0) {\n <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n }\n\n\n @if (!grid.hasColumnLayouts) {\n @if (pinnedStartColumns.length > 0) {\n @for (col of pinnedStartColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n }\n }\n <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n\n </ng-template>\n @if (pinnedEndColumns.length > 0) {\n @for (col of pinnedEndColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n }\n }\n }\n\n @if (grid.hasColumnLayouts) {\n @if (pinnedStartColumns.length > 0) {\n <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedStartColumns, this)\"></ng-container>\n }\n <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n 'grid-template-rows':col.getGridTemplate(true),\n 'grid-template-columns':col.getGridTemplate(false)\n }\">\n @for (col of col.children; track trackPinnedColumn(col)) {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n }\n </div>\n </ng-template>\n @if (pinnedEndColumns.length > 0) {\n <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedEndColumns, this)\"></ng-container>\n }\n }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n <div class=\"igx-grid__mrl-block\"\n [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n [ngStyle]=\"{\n 'grid-template-rows':col.getGridTemplate(true),\n 'grid-template-columns':col.getGridTemplate(false),\n 'z-index': col.pinned ? 1 : null\n }\"\n >\n @for (col of col.children; track col) {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox\n [tabindex]=\"-1\"\n [checked]=\"selected\"\n [readonly]=\"true\"\n [disabled]=\"deleted\"\n [disableRipple]=\"true\"\n [disableTransitions]=\"grid.disableTransitions\"\n [aria-label]=\"rowCheckboxAriaLabel\">\n </igx-checkbox>\n </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n <igx-grid-cell\n [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n class=\"igx-grid__td igx-grid__td--fw\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n [class.igx-grid__td--image]=\"col.dataType === 'image'\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n [rowData]=\"data\"\n [style.min-width]=\"col.resolvedWidth\"\n [style.max-width]=\"col.resolvedWidth\"\n [style.flex-basis]=\"col.resolvedWidth\"\n [width]=\"col.getCellWidth()\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n <igx-expandable-grid-cell\n [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n [class.igx-grid__td--pinned]=\"col.pinned\"\n class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [expanded]=\"expanded\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [rowData]=\"data\"\n [style.min-width]=\"col.resolvedWidth\"\n [style.max-width]=\"col.resolvedWidth\"\n [style.flex-basis]=\"col.resolvedWidth\"\n [width]=\"col.getCellWidth()\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n <igx-grid-cell\n class=\"igx-grid__td igx-grid__td--fw\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [style.grid-row-end]=\"col.rowEnd\"\n [style.grid-column-end]=\"col.colEnd\"\n [style.grid-row-start]=\"col.rowStart\"\n [style.grid-column-start]=\"col.colStart\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [rowData]=\"data\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n <igx-expandable-grid-cell\n class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [expanded]=\"expanded\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [style.grid-row-end]=\"col.rowEnd\"\n [style.grid-column-end]=\"col.colEnd\"\n [style.grid-row-start]=\"col.rowStart\"\n [style.grid-column-start]=\"col.colStart\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [rowData]=\"data\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-expandable-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: ["expanded"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxGridRowComponent, isStandalone: true, selector: "igx-grid-row", providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"></ng-container>\n\n<ng-template #addTemp>\n <div class=\"igx-grid__tr--inner\" [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\" (animationend)=\"animationEndHandler()\">\n <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n </div>\n</ng-template>\n<ng-template #defaultTemp>\n @if (rowDraggable) {\n <div [class]=\"resolveDragIndicatorClasses\" role=\"gridcell\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n </div>\n }\n @if (this.showRowSelectors) {\n <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"gridcell\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n <ng-template *ngTemplateOutlet=\"\n this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n </ng-template>\n </div>\n }\n @if (grid.groupingExpressions.length > 0) {\n <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n }\n\n\n @if (!grid.hasColumnLayouts) {\n @if (pinnedStartColumns.length > 0) {\n @for (col of pinnedStartColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n }\n }\n <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n\n </ng-template>\n @if (pinnedEndColumns.length > 0) {\n @for (col of pinnedEndColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n }\n }\n }\n\n @if (grid.hasColumnLayouts) {\n @if (pinnedStartColumns.length > 0) {\n <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedStartColumns, this)\"></ng-container>\n }\n <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n 'grid-template-rows':col.getGridTemplate(true),\n 'grid-template-columns':col.getGridTemplate(false)\n }\">\n @for (col of col.children; track trackPinnedColumn(col)) {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n }\n </div>\n </ng-template>\n @if (pinnedEndColumns.length > 0) {\n <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedEndColumns, this)\"></ng-container>\n }\n }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n <div class=\"igx-grid__mrl-block\"\n [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n [ngStyle]=\"{\n 'grid-template-rows':col.getGridTemplate(true),\n 'grid-template-columns':col.getGridTemplate(false),\n 'z-index': col.pinned ? 1 : null\n }\"\n >\n @for (col of col.children; track col) {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox\n [tabindex]=\"-1\"\n [checked]=\"selected\"\n [readonly]=\"true\"\n [disabled]=\"deleted\"\n [disableRipple]=\"true\"\n [disableTransitions]=\"grid.disableTransitions\"\n [aria-label]=\"rowCheckboxAriaLabel\">\n </igx-checkbox>\n </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n <igx-grid-cell\n [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n class=\"igx-grid__td igx-grid__td--fw\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n [class.igx-grid__td--image]=\"col.dataType === 'image'\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n [rowData]=\"data\"\n [style.min-width]=\"col.resolvedWidth\"\n [style.max-width]=\"col.resolvedWidth\"\n [style.flex-basis]=\"col.resolvedWidth\"\n [width]=\"col.getCellWidth()\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n <igx-expandable-grid-cell\n [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n [class.igx-grid__td--pinned]=\"col.pinned\"\n class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [expanded]=\"expanded\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [rowData]=\"data\"\n [style.min-width]=\"col.resolvedWidth\"\n [style.max-width]=\"col.resolvedWidth\"\n [style.flex-basis]=\"col.resolvedWidth\"\n [width]=\"col.getCellWidth()\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n <igx-grid-cell\n class=\"igx-grid__td igx-grid__td--fw\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [style.grid-row-end]=\"col.rowEnd\"\n [style.grid-column-end]=\"col.colEnd\"\n [style.grid-row-start]=\"col.rowStart\"\n [style.grid-column-start]=\"col.colStart\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [rowData]=\"data\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n <igx-expandable-grid-cell\n class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [expanded]=\"expanded\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [style.grid-row-end]=\"col.rowEnd\"\n [style.grid-column-end]=\"col.colEnd\"\n [style.grid-row-start]=\"col.rowStart\"\n [style.grid-column-start]=\"col.colStart\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [rowData]=\"data\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-expandable-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: ["expanded"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
948
952
|
}
|
|
949
953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridRowComponent, decorators: [{
|
|
950
954
|
type: Component,
|
|
951
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"></ng-container>\n\n<ng-template #addTemp>\n <div class=\"igx-grid__tr--inner\" [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\" (animationend)=\"animationEndHandler()\">\n <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n </div>\n</ng-template>\n<ng-template #defaultTemp>\n @if (rowDraggable) {\n <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n </div>\n }\n @if (this.showRowSelectors) {\n <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n <ng-template *ngTemplateOutlet=\"\n this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n </ng-template>\n </div>\n }\n @if (grid.groupingExpressions.length > 0) {\n <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n }\n\n\n @if (!grid.hasColumnLayouts) {\n @if (pinnedStartColumns.length > 0) {\n @for (col of pinnedStartColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n }\n }\n <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n\n </ng-template>\n @if (pinnedEndColumns.length > 0) {\n @for (col of pinnedEndColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n }\n }\n }\n\n @if (grid.hasColumnLayouts) {\n @if (pinnedStartColumns.length > 0) {\n <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedStartColumns, this)\"></ng-container>\n }\n <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n 'grid-template-rows':col.getGridTemplate(true),\n 'grid-template-columns':col.getGridTemplate(false)\n }\">\n @for (col of col.children; track trackPinnedColumn(col)) {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n }\n </div>\n </ng-template>\n @if (pinnedEndColumns.length > 0) {\n <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedEndColumns, this)\"></ng-container>\n }\n }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n <div class=\"igx-grid__mrl-block\"\n [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n [ngStyle]=\"{\n 'grid-template-rows':col.getGridTemplate(true),\n 'grid-template-columns':col.getGridTemplate(false),\n 'z-index': col.pinned ? 1 : null\n }\"\n >\n @for (col of col.children; track col) {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox\n [tabindex]=\"-1\"\n [checked]=\"selected\"\n [readonly]=\"true\"\n [disabled]=\"deleted\"\n [disableRipple]=\"true\"\n [disableTransitions]=\"grid.disableTransitions\"\n [aria-label]=\"rowCheckboxAriaLabel\">\n </igx-checkbox>\n </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n <igx-grid-cell\n [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n class=\"igx-grid__td igx-grid__td--fw\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n [class.igx-grid__td--image]=\"col.dataType === 'image'\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n [rowData]=\"data\"\n [style.min-width]=\"col.resolvedWidth\"\n [style.max-width]=\"col.resolvedWidth\"\n [style.flex-basis]=\"col.resolvedWidth\"\n [width]=\"col.getCellWidth()\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n <igx-expandable-grid-cell\n [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n [class.igx-grid__td--pinned]=\"col.pinned\"\n class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [expanded]=\"expanded\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [rowData]=\"data\"\n [style.min-width]=\"col.resolvedWidth\"\n [style.max-width]=\"col.resolvedWidth\"\n [style.flex-basis]=\"col.resolvedWidth\"\n [width]=\"col.getCellWidth()\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n <igx-grid-cell\n class=\"igx-grid__td igx-grid__td--fw\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [style.grid-row-end]=\"col.rowEnd\"\n [style.grid-column-end]=\"col.colEnd\"\n [style.grid-row-start]=\"col.rowStart\"\n [style.grid-column-start]=\"col.colStart\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [rowData]=\"data\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n <igx-expandable-grid-cell\n class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [expanded]=\"expanded\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [style.grid-row-end]=\"col.rowEnd\"\n [style.grid-column-end]=\"col.colEnd\"\n [style.grid-row-start]=\"col.rowStart\"\n [style.grid-column-start]=\"col.colStart\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [rowData]=\"data\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-expandable-grid-cell>\n</ng-template>\n" }]
|
|
955
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"></ng-container>\n\n<ng-template #addTemp>\n <div class=\"igx-grid__tr--inner\" [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\" (animationend)=\"animationEndHandler()\">\n <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n </div>\n</ng-template>\n<ng-template #defaultTemp>\n @if (rowDraggable) {\n <div [class]=\"resolveDragIndicatorClasses\" role=\"gridcell\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n </div>\n }\n @if (this.showRowSelectors) {\n <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"gridcell\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n <ng-template *ngTemplateOutlet=\"\n this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n </ng-template>\n </div>\n }\n @if (grid.groupingExpressions.length > 0) {\n <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n }\n\n\n @if (!grid.hasColumnLayouts) {\n @if (pinnedStartColumns.length > 0) {\n @for (col of pinnedStartColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n }\n }\n <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n\n </ng-template>\n @if (pinnedEndColumns.length > 0) {\n @for (col of pinnedEndColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n @if (this.hasMergedCells) {\n <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n class=\"igx-grid__mrl-block\"\n [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n [ngStyle]=\"{\n 'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n }\">\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n </div>\n }\n @else {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n }\n }\n }\n }\n\n @if (grid.hasColumnLayouts) {\n @if (pinnedStartColumns.length > 0) {\n <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedStartColumns, this)\"></ng-container>\n }\n <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n 'grid-template-rows':col.getGridTemplate(true),\n 'grid-template-columns':col.getGridTemplate(false)\n }\">\n @for (col of col.children; track trackPinnedColumn(col)) {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n }\n </div>\n </ng-template>\n @if (pinnedEndColumns.length > 0) {\n <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedEndColumns, this)\"></ng-container>\n }\n }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n <div class=\"igx-grid__mrl-block\"\n [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n [ngStyle]=\"{\n 'grid-template-rows':col.getGridTemplate(true),\n 'grid-template-columns':col.getGridTemplate(false),\n 'z-index': col.pinned ? 1 : null\n }\"\n >\n @for (col of col.children; track col) {\n <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox\n [tabindex]=\"-1\"\n [checked]=\"selected\"\n [readonly]=\"true\"\n [disabled]=\"deleted\"\n [disableRipple]=\"true\"\n [disableTransitions]=\"grid.disableTransitions\"\n [aria-label]=\"rowCheckboxAriaLabel\">\n </igx-checkbox>\n </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n <igx-grid-cell\n [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n class=\"igx-grid__td igx-grid__td--fw\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n [class.igx-grid__td--image]=\"col.dataType === 'image'\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n [rowData]=\"data\"\n [style.min-width]=\"col.resolvedWidth\"\n [style.max-width]=\"col.resolvedWidth\"\n [style.flex-basis]=\"col.resolvedWidth\"\n [width]=\"col.getCellWidth()\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n <igx-expandable-grid-cell\n [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n [class.igx-grid__td--pinned]=\"col.pinned\"\n class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [expanded]=\"expanded\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [rowData]=\"data\"\n [style.min-width]=\"col.resolvedWidth\"\n [style.max-width]=\"col.resolvedWidth\"\n [style.flex-basis]=\"col.resolvedWidth\"\n [width]=\"col.getCellWidth()\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n <igx-grid-cell\n class=\"igx-grid__td igx-grid__td--fw\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [style.grid-row-end]=\"col.rowEnd\"\n [style.grid-column-end]=\"col.colEnd\"\n [style.grid-row-start]=\"col.rowStart\"\n [style.grid-column-start]=\"col.colStart\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [rowData]=\"data\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n <igx-expandable-grid-cell\n class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n [class.igx-grid__td--pinned]=\"col.pinned\"\n [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n [expanded]=\"expanded\"\n [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n [column]=\"col\"\n [style.grid-row-end]=\"col.rowEnd\"\n [style.grid-column-end]=\"col.colEnd\"\n [style.grid-row-start]=\"col.rowStart\"\n [style.grid-column-start]=\"col.colStart\"\n [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n [formatter]=\"col.formatter\"\n [intRow]=\"this\"\n [rowData]=\"data\"\n [visibleColumnIndex]=\"col.visibleIndex\"\n [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n [cellTemplate]=\"col.bodyTemplate\"\n [cellValidationErrorTemplate]=\"col.errorTemplate\"\n [lastSearchInfo]=\"grid.lastSearchInfo\"\n [active]=\"isCellActive(col.visibleIndex)\"\n [cellSelectionMode]=\"grid.cellSelection\"\n [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n #cell>\n </igx-expandable-grid-cell>\n</ng-template>\n" }]
|
|
952
956
|
}] });
|
|
953
957
|
|
|
954
958
|
/**
|
|
@@ -3723,11 +3727,13 @@ class IgxGridBaseDirective {
|
|
|
3723
3727
|
}
|
|
3724
3728
|
return;
|
|
3725
3729
|
}
|
|
3726
|
-
|
|
3727
|
-
if
|
|
3730
|
+
const inRow = overlaySettings?.target?.classList.contains("igx-grid__tr");
|
|
3731
|
+
// do not hide the overlay if it's attached to a row on scroll
|
|
3732
|
+
if (inRow) {
|
|
3728
3733
|
return;
|
|
3729
3734
|
}
|
|
3730
|
-
|
|
3735
|
+
const isInGrid = overlaySettings?.target instanceof Node && this.tbody.nativeElement.contains(overlaySettings?.target);
|
|
3736
|
+
if (isInGrid && this.overlayIDs.indexOf(event.id) === -1) {
|
|
3731
3737
|
this.overlayIDs.push(event.id);
|
|
3732
3738
|
}
|
|
3733
3739
|
});
|
|
@@ -9381,7 +9387,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
9381
9387
|
IgxColumnResizingService,
|
|
9382
9388
|
IgxForOfSyncService,
|
|
9383
9389
|
IgxForOfScrollSyncService,
|
|
9384
|
-
], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n [grid]=\"this\"\n [expressions]=\"groupingExpressions\"\n [sortingExpressions]=\"sortingExpressions\"\n [dropAreaTemplate]=\"dropAreaTemplate\"\n [dropAreaMessage]=\"dropAreaMessage\"\n >\n </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n [grid]=\"this\"\n [hasMRL]=\"hasColumnLayouts\"\n [width]=\"calcWidth\"\n [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n [unpinnedColumnCollection]=\"unpinnedColumns\"\n (keydown.meta.c)=\"copyHandler($event)\"\n (keydown.control.c)=\"copyHandler($event)\"\n (copy)=\"copyHandler($event)\"\n (keydown)=\"navigation.headerNavigation($event)\"\n (scroll)=\"preventHeaderScroll($event)\"\n (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n <span\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-left\"></span>\n }\n @if (moving && columnInDrag && pinnedColumns.length > 0) {\n <span\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n }\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n\n @if (mergedDataInView && mergedDataInView.length > 0) {\n <div igxScrollInertia\n [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n @for (rowData of mergedDataInView; track rowData.record;) {\n <igx-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n </igx-grid-row>\n }\n </div>\n }\n\n <ng-template #pinnedRecordsTemplate>\n @if (data\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridAddRow:true:pipeTrigger\n | gridRowPinning:id:true:pipeTrigger\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n @if (pinnedData.length > 0) {\n <div #pinContainer\n [ngClass]=\"{\n 'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n 'igx-grid__tr--pinned-top': isRowPinningToTop\n }\"\n class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n </ng-container>\n }\n </div>\n }\n }\n </ng-template>\n <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n | gridPaging:!!paginator:page:perPage:pipeTrigger\n | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n | gridDetails:hasDetails:expansionStates:pipeTrigger\n | gridAddRow:false:pipeTrigger\n | gridRowPinning:id:false:pipeTrigger\n | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n [igxForContainerSize]=\"calcHeight\"\n [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n [igxForTrackBy]=\"trackChanges\"\n #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n <div [attr.data-index]=\"rowIndex\">\n <ng-template\n [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n (viewCreated)=\"viewCreatedHandler($event)\"\n (beforeViewDetach)=\"viewDetachHandler($event)\"\n (viewMoved)=\"viewMovedHandler($event)\">\n </ng-template>\n </div>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n </igx-grid-row>\n </ng-template>\n <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n </igx-grid-row>\n </ng-template>\n <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n </igx-grid-groupby-row>\n </ng-template>\n <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n class=\"igx-grid__summaries--body\" #summaryRow>\n </igx-grid-summary-row>\n </ng-template>\n <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n [ngClass]=\"{\n 'igx-grid__tr-container': true,\n 'igx-grid__tr-container--active': isDetailActive(rowIndex)\n }\">\n <div class=\"igx-grid__hierarchical-indent\">\n @if (this.groupingExpressions.length > 0) {\n <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n }\n <ng-template\n [ngTemplateOutlet]=\"detailTemplate\"\n [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n <ng-container #bodyViewContainerRef></ng-container>\n <igc-trial-watermark></igc-trial-watermark>\n </div>\n @if (moving && columnInDrag) {\n <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n }\n <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n </div>\n <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n </div>\n\n <div class=\"igx-grid__addrow-snackbar\">\n <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n </div>\n\n <div class=\"igx-grid__loading-outlet\">\n <div igxToggle #loadingOverlay>\n @if (shouldOverlayLoading) {\n <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n }\n </div>\n </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n @if (hasSummarizedColumns && rootSummariesEnabled) {\n <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n [gridID]=\"id\" role=\"row\"\n [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n class=\"igx-grid__summaries\" #summaryRow>\n </igx-grid-summary-row>\n }\n <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n [style.width.px]=\"scrollSize\"></div>\n </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n </ng-template>\n </div>\n <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyFilteredGridMessage}}</span>\n @if (showAddButton) {\n <span>\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyGridMessage}}</span>\n @if (showAddButton) {\n <span>\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n {{resourceStrings.igx_grid_add_row_label}}\n </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n <div class=\"igx-grid__loading\">\n <igx-circular-bar [indeterminate]=\"true\">\n </igx-circular-bar>\n </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon\n family=\"default\"\n name=\"unfold_less\"\n role=\"button\"\n [ngClass]=\"{\n 'igx-grid__group-expand-btn': true,\n 'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n }\"\n >\n </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n <igx-icon\n family=\"default\"\n name=\"unfold_more\"\n role=\"button\"\n [ngClass]=\"{\n 'igx-grid__group-expand-btn': true,\n 'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n }\"\n ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n <div igxToggle #rowEditingOverlay>\n <div [className]=\"bannerClass\">\n <ng-container\n *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultRowEditText>\n {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n <div class=\"igx-banner__message\">\n <span class=\"igx-banner__text\">\n <ng-container\n *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n </ng-container>\n </span>\n </div>\n <div class=\"igx-banner__actions\">\n <div class=\"igx-banner__row\">\n <ng-container\n *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n <div #sink style=\"display: none;\"></div>\n <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9390
|
+
], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n [grid]=\"this\"\n [expressions]=\"groupingExpressions\"\n [sortingExpressions]=\"sortingExpressions\"\n [dropAreaTemplate]=\"dropAreaTemplate\"\n [dropAreaMessage]=\"dropAreaMessage\"\n >\n </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n [grid]=\"this\"\n [hasMRL]=\"hasColumnLayouts\"\n [width]=\"calcWidth\"\n [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n [unpinnedColumnCollection]=\"unpinnedColumns\"\n (keydown.meta.c)=\"copyHandler($event)\"\n (keydown.control.c)=\"copyHandler($event)\"\n (copy)=\"copyHandler($event)\"\n (keydown)=\"navigation.headerNavigation($event)\"\n (scroll)=\"preventHeaderScroll($event)\"\n (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n <span\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-left\"></span>\n }\n @if (moving && columnInDrag && pinnedColumns.length > 0) {\n <span\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n }\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n\n @if (mergedDataInView && mergedDataInView.length > 0) {\n <div igxScrollInertia\n [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n @for (rowData of mergedDataInView; track rowData.record;) {\n <igx-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n </igx-grid-row>\n }\n </div>\n }\n\n <ng-template #pinnedRecordsTemplate>\n @if (data\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridAddRow:true:pipeTrigger\n | gridRowPinning:id:true:pipeTrigger\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n @if (pinnedData.length > 0) {\n <div #pinContainer\n [ngClass]=\"{\n 'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n 'igx-grid__tr--pinned-top': isRowPinningToTop\n }\"\n class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n </ng-container>\n }\n </div>\n }\n }\n </ng-template>\n <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n | gridPaging:!!paginator:page:perPage:pipeTrigger\n | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n | gridDetails:hasDetails:expansionStates:pipeTrigger\n | gridAddRow:false:pipeTrigger\n | gridRowPinning:id:false:pipeTrigger\n | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n [igxForContainerSize]=\"calcHeight\"\n [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n [igxForTrackBy]=\"trackChanges\"\n #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n <div [attr.data-index]=\"rowIndex\">\n <ng-template\n [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n (viewCreated)=\"viewCreatedHandler($event)\"\n (beforeViewDetach)=\"viewDetachHandler($event)\"\n (viewMoved)=\"viewMovedHandler($event)\">\n </ng-template>\n </div>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n </igx-grid-row>\n </ng-template>\n <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n </igx-grid-row>\n </ng-template>\n <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n </igx-grid-groupby-row>\n </ng-template>\n <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n class=\"igx-grid__summaries--body\" #summaryRow>\n </igx-grid-summary-row>\n </ng-template>\n <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n [ngClass]=\"{\n 'igx-grid__tr-container': true,\n 'igx-grid__tr-container--active': isDetailActive(rowIndex)\n }\">\n <div class=\"igx-grid__hierarchical-indent\">\n @if (this.groupingExpressions.length > 0) {\n <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n }\n <ng-template\n [ngTemplateOutlet]=\"detailTemplate\"\n [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n <ng-container #bodyViewContainerRef></ng-container>\n <igc-trial-watermark></igc-trial-watermark>\n </div>\n @if (moving && columnInDrag) {\n <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n }\n <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n </div>\n <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n </div>\n\n <div class=\"igx-grid__addrow-snackbar\">\n <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n </div>\n\n <div class=\"igx-grid__loading-outlet\">\n <div igxToggle #loadingOverlay>\n @if (shouldOverlayLoading) {\n <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n }\n </div>\n </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n <div tabindex=\"0\" role=\"rowgroup\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n @if (hasSummarizedColumns && rootSummariesEnabled) {\n <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n [gridID]=\"id\" role=\"row\"\n [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n class=\"igx-grid__summaries\" #summaryRow>\n </igx-grid-summary-row>\n }\n <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n [style.width.px]=\"scrollSize\"></div>\n </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n </ng-template>\n </div>\n <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyFilteredGridMessage}}</span>\n @if (showAddButton) {\n <span>\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyGridMessage}}</span>\n @if (showAddButton) {\n <span>\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n {{resourceStrings.igx_grid_add_row_label}}\n </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n <div class=\"igx-grid__loading\">\n <igx-circular-bar [indeterminate]=\"true\">\n </igx-circular-bar>\n </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon\n family=\"default\"\n name=\"unfold_less\"\n role=\"button\"\n [ngClass]=\"{\n 'igx-grid__group-expand-btn': true,\n 'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n }\"\n >\n </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n <igx-icon\n family=\"default\"\n name=\"unfold_more\"\n role=\"button\"\n [ngClass]=\"{\n 'igx-grid__group-expand-btn': true,\n 'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n }\"\n ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n <div igxToggle #rowEditingOverlay>\n <div [className]=\"bannerClass\">\n <ng-container\n *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultRowEditText>\n {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n <div class=\"igx-banner__message\">\n <span class=\"igx-banner__text\">\n <ng-container\n *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n </ng-container>\n </span>\n </div>\n <div class=\"igx-banner__actions\">\n <div class=\"igx-banner__row\">\n <ng-container\n *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n <div #sink style=\"display: none;\"></div>\n <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9385
9391
|
}
|
|
9386
9392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridComponent, decorators: [{
|
|
9387
9393
|
type: Component,
|
|
@@ -9438,7 +9444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
9438
9444
|
IgxGridCellMergePipe,
|
|
9439
9445
|
IgxGridUnmergeActivePipe,
|
|
9440
9446
|
IgxScrollInertiaDirective
|
|
9441
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n [grid]=\"this\"\n [expressions]=\"groupingExpressions\"\n [sortingExpressions]=\"sortingExpressions\"\n [dropAreaTemplate]=\"dropAreaTemplate\"\n [dropAreaMessage]=\"dropAreaMessage\"\n >\n </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n [grid]=\"this\"\n [hasMRL]=\"hasColumnLayouts\"\n [width]=\"calcWidth\"\n [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n [unpinnedColumnCollection]=\"unpinnedColumns\"\n (keydown.meta.c)=\"copyHandler($event)\"\n (keydown.control.c)=\"copyHandler($event)\"\n (copy)=\"copyHandler($event)\"\n (keydown)=\"navigation.headerNavigation($event)\"\n (scroll)=\"preventHeaderScroll($event)\"\n (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n <span\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-left\"></span>\n }\n @if (moving && columnInDrag && pinnedColumns.length > 0) {\n <span\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n }\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n\n @if (mergedDataInView && mergedDataInView.length > 0) {\n <div igxScrollInertia\n [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n @for (rowData of mergedDataInView; track rowData.record;) {\n <igx-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n </igx-grid-row>\n }\n </div>\n }\n\n <ng-template #pinnedRecordsTemplate>\n @if (data\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridAddRow:true:pipeTrigger\n | gridRowPinning:id:true:pipeTrigger\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n @if (pinnedData.length > 0) {\n <div #pinContainer\n [ngClass]=\"{\n 'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n 'igx-grid__tr--pinned-top': isRowPinningToTop\n }\"\n class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n </ng-container>\n }\n </div>\n }\n }\n </ng-template>\n <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n | gridPaging:!!paginator:page:perPage:pipeTrigger\n | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n | gridDetails:hasDetails:expansionStates:pipeTrigger\n | gridAddRow:false:pipeTrigger\n | gridRowPinning:id:false:pipeTrigger\n | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n [igxForContainerSize]=\"calcHeight\"\n [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n [igxForTrackBy]=\"trackChanges\"\n #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n <div [attr.data-index]=\"rowIndex\">\n <ng-template\n [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n (viewCreated)=\"viewCreatedHandler($event)\"\n (beforeViewDetach)=\"viewDetachHandler($event)\"\n (viewMoved)=\"viewMovedHandler($event)\">\n </ng-template>\n </div>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n </igx-grid-row>\n </ng-template>\n <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n </igx-grid-row>\n </ng-template>\n <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n </igx-grid-groupby-row>\n </ng-template>\n <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n class=\"igx-grid__summaries--body\" #summaryRow>\n </igx-grid-summary-row>\n </ng-template>\n <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n [ngClass]=\"{\n 'igx-grid__tr-container': true,\n 'igx-grid__tr-container--active': isDetailActive(rowIndex)\n }\">\n <div class=\"igx-grid__hierarchical-indent\">\n @if (this.groupingExpressions.length > 0) {\n <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n }\n <ng-template\n [ngTemplateOutlet]=\"detailTemplate\"\n [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n <ng-container #bodyViewContainerRef></ng-container>\n <igc-trial-watermark></igc-trial-watermark>\n </div>\n @if (moving && columnInDrag) {\n <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n }\n <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n </div>\n <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n </div>\n\n <div class=\"igx-grid__addrow-snackbar\">\n <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n </div>\n\n <div class=\"igx-grid__loading-outlet\">\n <div igxToggle #loadingOverlay>\n @if (shouldOverlayLoading) {\n <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n }\n </div>\n </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n @if (hasSummarizedColumns && rootSummariesEnabled) {\n <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n [gridID]=\"id\" role=\"row\"\n [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n class=\"igx-grid__summaries\" #summaryRow>\n </igx-grid-summary-row>\n }\n <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n [style.width.px]=\"scrollSize\"></div>\n </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n </ng-template>\n </div>\n <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyFilteredGridMessage}}</span>\n @if (showAddButton) {\n <span>\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyGridMessage}}</span>\n @if (showAddButton) {\n <span>\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n {{resourceStrings.igx_grid_add_row_label}}\n </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n <div class=\"igx-grid__loading\">\n <igx-circular-bar [indeterminate]=\"true\">\n </igx-circular-bar>\n </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon\n family=\"default\"\n name=\"unfold_less\"\n role=\"button\"\n [ngClass]=\"{\n 'igx-grid__group-expand-btn': true,\n 'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n }\"\n >\n </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n <igx-icon\n family=\"default\"\n name=\"unfold_more\"\n role=\"button\"\n [ngClass]=\"{\n 'igx-grid__group-expand-btn': true,\n 'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n }\"\n ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n <div igxToggle #rowEditingOverlay>\n <div [className]=\"bannerClass\">\n <ng-container\n *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultRowEditText>\n {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n <div class=\"igx-banner__message\">\n <span class=\"igx-banner__text\">\n <ng-container\n *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n </ng-container>\n </span>\n </div>\n <div class=\"igx-banner__actions\">\n <div class=\"igx-banner__row\">\n <ng-container\n *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n <div #sink style=\"display: none;\"></div>\n <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
|
|
9447
|
+
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n [grid]=\"this\"\n [expressions]=\"groupingExpressions\"\n [sortingExpressions]=\"sortingExpressions\"\n [dropAreaTemplate]=\"dropAreaTemplate\"\n [dropAreaMessage]=\"dropAreaMessage\"\n >\n </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n [grid]=\"this\"\n [hasMRL]=\"hasColumnLayouts\"\n [width]=\"calcWidth\"\n [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n [unpinnedColumnCollection]=\"unpinnedColumns\"\n (keydown.meta.c)=\"copyHandler($event)\"\n (keydown.control.c)=\"copyHandler($event)\"\n (copy)=\"copyHandler($event)\"\n (keydown)=\"navigation.headerNavigation($event)\"\n (scroll)=\"preventHeaderScroll($event)\"\n (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n <span\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-left\"></span>\n }\n @if (moving && columnInDrag && pinnedColumns.length > 0) {\n <span\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n }\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n\n @if (mergedDataInView && mergedDataInView.length > 0) {\n <div igxScrollInertia\n [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n @for (rowData of mergedDataInView; track rowData.record;) {\n <igx-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n </igx-grid-row>\n }\n </div>\n }\n\n <ng-template #pinnedRecordsTemplate>\n @if (data\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridAddRow:true:pipeTrigger\n | gridRowPinning:id:true:pipeTrigger\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n @if (pinnedData.length > 0) {\n <div #pinContainer\n [ngClass]=\"{\n 'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n 'igx-grid__tr--pinned-top': isRowPinningToTop\n }\"\n class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n </ng-container>\n }\n </div>\n }\n }\n </ng-template>\n <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n | gridPaging:!!paginator:page:perPage:pipeTrigger\n | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n | gridDetails:hasDetails:expansionStates:pipeTrigger\n | gridAddRow:false:pipeTrigger\n | gridRowPinning:id:false:pipeTrigger\n | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n [igxForContainerSize]=\"calcHeight\"\n [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n [igxForTrackBy]=\"trackChanges\"\n #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n <div [attr.data-index]=\"rowIndex\">\n <ng-template\n [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n (viewCreated)=\"viewCreatedHandler($event)\"\n (beforeViewDetach)=\"viewDetachHandler($event)\"\n (viewMoved)=\"viewMovedHandler($event)\">\n </ng-template>\n </div>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n </igx-grid-row>\n </ng-template>\n <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n </igx-grid-row>\n </ng-template>\n <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n </igx-grid-groupby-row>\n </ng-template>\n <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n class=\"igx-grid__summaries--body\" #summaryRow>\n </igx-grid-summary-row>\n </ng-template>\n <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n [ngClass]=\"{\n 'igx-grid__tr-container': true,\n 'igx-grid__tr-container--active': isDetailActive(rowIndex)\n }\">\n <div class=\"igx-grid__hierarchical-indent\">\n @if (this.groupingExpressions.length > 0) {\n <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n }\n <ng-template\n [ngTemplateOutlet]=\"detailTemplate\"\n [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n <ng-container #bodyViewContainerRef></ng-container>\n <igc-trial-watermark></igc-trial-watermark>\n </div>\n @if (moving && columnInDrag) {\n <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n }\n <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n </div>\n <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n </div>\n\n <div class=\"igx-grid__addrow-snackbar\">\n <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n </div>\n\n <div class=\"igx-grid__loading-outlet\">\n <div igxToggle #loadingOverlay>\n @if (shouldOverlayLoading) {\n <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n }\n </div>\n </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n <div tabindex=\"0\" role=\"rowgroup\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n @if (hasSummarizedColumns && rootSummariesEnabled) {\n <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n [gridID]=\"id\" role=\"row\"\n [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n class=\"igx-grid__summaries\" #summaryRow>\n </igx-grid-summary-row>\n }\n <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n [style.width.px]=\"scrollSize\"></div>\n </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n </ng-template>\n </div>\n <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyFilteredGridMessage}}</span>\n @if (showAddButton) {\n <span>\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyGridMessage}}</span>\n @if (showAddButton) {\n <span>\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n {{resourceStrings.igx_grid_add_row_label}}\n </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n <div class=\"igx-grid__loading\">\n <igx-circular-bar [indeterminate]=\"true\">\n </igx-circular-bar>\n </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon\n family=\"default\"\n name=\"unfold_less\"\n role=\"button\"\n [ngClass]=\"{\n 'igx-grid__group-expand-btn': true,\n 'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n }\"\n >\n </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n <igx-icon\n family=\"default\"\n name=\"unfold_more\"\n role=\"button\"\n [ngClass]=\"{\n 'igx-grid__group-expand-btn': true,\n 'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n }\"\n ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n <div igxToggle #rowEditingOverlay>\n <div [className]=\"bannerClass\">\n <ng-container\n *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultRowEditText>\n {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n <div class=\"igx-banner__message\">\n <span class=\"igx-banner__text\">\n <ng-container\n *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n </ng-container>\n </span>\n </div>\n <div class=\"igx-banner__actions\">\n <div class=\"igx-banner__row\">\n <ng-container\n *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n <div #sink style=\"display: none;\"></div>\n <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
|
|
9442
9448
|
}], propDecorators: { dataPreLoad: [{
|
|
9443
9449
|
type: Output
|
|
9444
9450
|
}], groupingExpressionsChange: [{
|