igniteui-angular 15.1.31 → 15.1.33
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/esm2020/lib/buttonGroup/buttonGroup.component.mjs +5 -9
- package/esm2020/lib/directives/for-of/for_of.directive.mjs +4 -1
- package/esm2020/lib/grids/common/strategy.mjs +2 -1
- package/esm2020/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.mjs +6 -3
- package/esm2020/lib/grids/grid/grid.component.mjs +15 -3
- package/esm2020/lib/grids/headers/grid-header-row.component.mjs +9 -3
- package/esm2020/lib/services/overlay/overlay.mjs +2 -2
- package/fesm2015/igniteui-angular.mjs +34 -14
- package/fesm2015/igniteui-angular.mjs.map +1 -1
- package/fesm2020/igniteui-angular.mjs +34 -14
- package/fesm2020/igniteui-angular.mjs.map +1 -1
- package/lib/buttonGroup/buttonGroup.component.d.ts +2 -2
- package/lib/grids/grid/grid.component.d.ts +9 -0
- package/lib/grids/headers/grid-header-row.component.d.ts +4 -0
- package/migrations/common/tsUtils.js +1 -1
- package/package.json +1 -1
|
@@ -2389,6 +2389,7 @@ class IgxGrouping extends IgxSorting {
|
|
|
2389
2389
|
groupBy(data, state, grid, groupsRecords, fullResult = { data: [], metadata: [] }) {
|
|
2390
2390
|
const metadata = [];
|
|
2391
2391
|
const grouping = this.groupDataRecursive(data, state, 0, null, metadata, grid, groupsRecords, fullResult);
|
|
2392
|
+
grid?.groupingPerformedSubject.next();
|
|
2392
2393
|
return {
|
|
2393
2394
|
data: grouping,
|
|
2394
2395
|
metadata
|
|
@@ -7017,7 +7018,7 @@ class IgxOverlayService {
|
|
|
7017
7018
|
// TODO: update attach
|
|
7018
7019
|
}
|
|
7019
7020
|
this.updateSize(info);
|
|
7020
|
-
info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height },
|
|
7021
|
+
info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, this._document, true, info.settings.target);
|
|
7021
7022
|
this.addModalClasses(info);
|
|
7022
7023
|
if (info.settings.positionStrategy.settings.openAnimation) {
|
|
7023
7024
|
// TODO: should we build players again. This was already done in attach!!!
|
|
@@ -11508,6 +11509,9 @@ class IgxForOfDirective {
|
|
|
11508
11509
|
* Clears focus inside the virtualized container on small scroll swaps.
|
|
11509
11510
|
*/
|
|
11510
11511
|
scrollFocus(node) {
|
|
11512
|
+
if (!node) {
|
|
11513
|
+
return;
|
|
11514
|
+
}
|
|
11511
11515
|
const document = node.getRootNode();
|
|
11512
11516
|
const activeElement = document.activeElement;
|
|
11513
11517
|
// Remove focus in case the the active element is inside the view container.
|
|
@@ -30221,25 +30225,21 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
|
|
|
30221
30225
|
*/
|
|
30222
30226
|
_clickHandler(index) {
|
|
30223
30227
|
const button = this.buttons[index];
|
|
30224
|
-
const args = {
|
|
30228
|
+
const args = { button, index };
|
|
30225
30229
|
if (!this.multiSelection) {
|
|
30226
30230
|
this.buttons.forEach((b, i) => {
|
|
30227
30231
|
if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
|
|
30228
|
-
this.deselected.emit({
|
|
30232
|
+
this.deselected.emit({ button: b, index: i });
|
|
30229
30233
|
}
|
|
30230
30234
|
});
|
|
30231
30235
|
}
|
|
30232
30236
|
if (this.selectedIndexes.indexOf(index) === -1) {
|
|
30237
|
+
this.selectButton(index);
|
|
30233
30238
|
this.selected.emit(args);
|
|
30234
|
-
if (!args.cancel) {
|
|
30235
|
-
this.selectButton(index);
|
|
30236
|
-
}
|
|
30237
30239
|
}
|
|
30238
30240
|
else {
|
|
30241
|
+
this.deselectButton(index);
|
|
30239
30242
|
this.deselected.emit(args);
|
|
30240
|
-
if (!args.cancel) {
|
|
30241
|
-
this.deselectButton(index);
|
|
30242
|
-
}
|
|
30243
30243
|
}
|
|
30244
30244
|
}
|
|
30245
30245
|
}
|
|
@@ -45310,6 +45310,9 @@ class IgxExcelStyleConditionalFilterComponent {
|
|
|
45310
45310
|
if (eventArgs.key === this.platform.KEYMAP.ENTER) {
|
|
45311
45311
|
this.onTextFilterClick(eventArgs);
|
|
45312
45312
|
}
|
|
45313
|
+
else if (eventArgs.key === this.platform.KEYMAP.TAB) {
|
|
45314
|
+
this.subMenu.close();
|
|
45315
|
+
}
|
|
45313
45316
|
}
|
|
45314
45317
|
/**
|
|
45315
45318
|
* @hidden @internal
|
|
@@ -45408,10 +45411,10 @@ class IgxExcelStyleConditionalFilterComponent {
|
|
|
45408
45411
|
}
|
|
45409
45412
|
}
|
|
45410
45413
|
IgxExcelStyleConditionalFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [{ token: BaseFilteringComponent }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
|
|
45411
|
-
IgxExcelStyleConditionalFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter", viewQueries: [{ propertyName: "customDialog", first: true, predicate: ["customDialog"], descendants: true, read: IgxExcelStyleCustomDialogComponent }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n <div tabindex=\"0\"\n class=\"igx-excel-filter__actions-filter\"\n (keydown)=\"onTextFilterKeyDown($event)\"\n (click)=\"onTextFilterClick($event)\"\n [igxDropDownItemNavigation]=\"subMenu\"\n role=\"menuitem\"\n aria-haspopup=\"true\">\n <span>{{ subMenuText }}</span>\n <igx-icon>keyboard_arrow_right</igx-icon>\n </div>\n\n <igx-drop-down\n #subMenu\n [maxHeight]=\"'397px'\"\n [displayDensity]=\"esf.grid.displayDensity\"\n (selectionChanging)=\"onSubMenuSelection($event)\"\n (closed)=\"onSubMenuClosed()\"
|
|
45414
|
+
IgxExcelStyleConditionalFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter", viewQueries: [{ propertyName: "customDialog", first: true, predicate: ["customDialog"], descendants: true, read: IgxExcelStyleCustomDialogComponent }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n <div tabindex=\"0\"\n class=\"igx-excel-filter__actions-filter\"\n (keydown)=\"onTextFilterKeyDown($event)\"\n (click)=\"onTextFilterClick($event)\"\n [igxDropDownItemNavigation]=\"subMenu\"\n role=\"menuitem\"\n aria-haspopup=\"true\"\n [attr.aria-controls]=\"this.subMenu.listId\"\n [attr.aria-activedescendant]=\"!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null\">\n <span>{{ subMenuText }}</span>\n <igx-icon>keyboard_arrow_right</igx-icon>\n </div>\n\n <igx-drop-down\n #subMenu\n [maxHeight]=\"'397px'\"\n [displayDensity]=\"esf.grid.displayDensity\"\n (selectionChanging)=\"onSubMenuSelection($event)\"\n (closed)=\"onSubMenuClosed()\">\n <div>\n <igx-drop-down-item\n *ngFor=\"let condition of conditions\"\n [value]=\"condition\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n </div>\n </igx-drop-down-item>\n <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon>filter_list</igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n </div>\n </igx-drop-down-item>\n </div>\n </igx-drop-down>\n\n <igx-excel-style-custom-dialog\n #customDialog\n [column]=\"esf.column\"\n [filteringService]=\"esf.grid.filteringService\"\n [overlayComponentId]=\"esf.overlayComponentId\"\n [displayDensity]=\"esf.grid.displayDensity\">\n </igx-excel-style-custom-dialog>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId", "displayDensity"] }] });
|
|
45412
45415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
|
|
45413
45416
|
type: Component,
|
|
45414
|
-
args: [{ selector: 'igx-excel-style-conditional-filter', template: "<ng-container *ngIf=\"esf.column\">\n <div tabindex=\"0\"\n class=\"igx-excel-filter__actions-filter\"\n (keydown)=\"onTextFilterKeyDown($event)\"\n (click)=\"onTextFilterClick($event)\"\n [igxDropDownItemNavigation]=\"subMenu\"\n role=\"menuitem\"\n aria-haspopup=\"true\">\n <span>{{ subMenuText }}</span>\n <igx-icon>keyboard_arrow_right</igx-icon>\n </div>\n\n <igx-drop-down\n #subMenu\n [maxHeight]=\"'397px'\"\n [displayDensity]=\"esf.grid.displayDensity\"\n (selectionChanging)=\"onSubMenuSelection($event)\"\n (closed)=\"onSubMenuClosed()\"
|
|
45417
|
+
args: [{ selector: 'igx-excel-style-conditional-filter', template: "<ng-container *ngIf=\"esf.column\">\n <div tabindex=\"0\"\n class=\"igx-excel-filter__actions-filter\"\n (keydown)=\"onTextFilterKeyDown($event)\"\n (click)=\"onTextFilterClick($event)\"\n [igxDropDownItemNavigation]=\"subMenu\"\n role=\"menuitem\"\n aria-haspopup=\"true\"\n [attr.aria-controls]=\"this.subMenu.listId\"\n [attr.aria-activedescendant]=\"!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null\">\n <span>{{ subMenuText }}</span>\n <igx-icon>keyboard_arrow_right</igx-icon>\n </div>\n\n <igx-drop-down\n #subMenu\n [maxHeight]=\"'397px'\"\n [displayDensity]=\"esf.grid.displayDensity\"\n (selectionChanging)=\"onSubMenuSelection($event)\"\n (closed)=\"onSubMenuClosed()\">\n <div>\n <igx-drop-down-item\n *ngFor=\"let condition of conditions\"\n [value]=\"condition\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n </div>\n </igx-drop-down-item>\n <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon>filter_list</igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n </div>\n </igx-drop-down-item>\n </div>\n </igx-drop-down>\n\n <igx-excel-style-custom-dialog\n #customDialog\n [column]=\"esf.column\"\n [filteringService]=\"esf.grid.filteringService\"\n [overlayComponentId]=\"esf.overlayComponentId\"\n [displayDensity]=\"esf.grid.displayDensity\">\n </igx-excel-style-custom-dialog>\n</ng-container>\n" }]
|
|
45415
45418
|
}], ctorParameters: function () { return [{ type: BaseFilteringComponent }, { type: PlatformUtil }]; }, propDecorators: { customDialog: [{
|
|
45416
45419
|
type: ViewChild,
|
|
45417
45420
|
args: ['customDialog', { read: IgxExcelStyleCustomDialogComponent }]
|
|
@@ -61208,6 +61211,12 @@ class IgxGridHeaderRowComponent {
|
|
|
61208
61211
|
ngDoCheck() {
|
|
61209
61212
|
this.cdr.markForCheck();
|
|
61210
61213
|
}
|
|
61214
|
+
/**
|
|
61215
|
+
* @hidden @internal
|
|
61216
|
+
*/
|
|
61217
|
+
scroll(event) {
|
|
61218
|
+
this.grid.preventHeaderScroll(event);
|
|
61219
|
+
}
|
|
61211
61220
|
headerRowSelection(event) {
|
|
61212
61221
|
if (!this.grid.isMultiRowSelectionEnabled) {
|
|
61213
61222
|
return;
|
|
@@ -61221,10 +61230,10 @@ class IgxGridHeaderRowComponent {
|
|
|
61221
61230
|
}
|
|
61222
61231
|
}
|
|
61223
61232
|
IgxGridHeaderRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
61224
|
-
IgxGridHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n <!-- Column headers area -->\n <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n <!-- Left column moving area -->\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n\n <!-- Row dragging area -->\n <ng-container *ngIf=\"grid.rowDraggable\">\n <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n <div style=\"visibility: hidden;\">\n <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Row selectors area -->\n <ng-container *ngIf=\"grid.showRowSelectors\">\n <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n (click)=\"headerRowSelection($event)\"\n (pointerdown)=\"$event.preventDefault()\">\n <ng-container #headSelector\n *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Hierarchical grids expand all area -->\n <ng-container *ngIf=\"isHierarchicalGrid\">\n <div #headerHierarchyExpander\n (click)=\"grid.toggleAll()\"\n (pointerdown)=\"$event.preventDefault()\"\n [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n [ngClass]=\"{\n 'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n 'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n 'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n }\">\n <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n </div>\n </ng-container>\n\n\n <!-- Grouping icon toggle area -->\n <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n (click)=\"grid.toggleAllGroupRows()\"\n (pointerdown)=\"$event.preventDefault()\">\n <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Pinned columns collection from the start -->\n <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n </igx-grid-header-group>\n </ng-container>\n </ng-container>\n\n <!-- Unpinned columns collection -->\n <ng-template igxGridFor #headerVirtualContainer let-column\n [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n [igxForScrollContainer]=\"grid.parentVirtDir\"\n [igxForContainerSize]=\"grid.unpinnedWidth\"\n [igxForTrackBy]=\"grid.trackColumnChanges\"\n [igxForSizePropName]=\"'calcPixelWidth'\"\n [igxForScrollOrientation]=\"'horizontal'\"\n >\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n </igx-grid-header-group>\n </ng-template>\n\n <!-- Pinned columns collection at the end -->\n <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.left]=\"column.rightPinnedOffset\">\n </igx-grid-header-group>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Filter row area -->\n <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n <igx-grid-filtering-row #filteringRow\n [column]=\"grid.filteringService.filteredColumn\"\n [style.width.px]=\"width\">\n </igx-grid-filtering-row>\n </ng-container>\n\n <!-- Right column moving area -->\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox\n [tabindex]=\"-1\"\n [readonly]=\"true\"\n [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n [disableRipple]=\"true\"\n [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n #headerCheckbox>\n </igx-checkbox>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
61233
|
+
IgxGridHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n <!-- Column headers area -->\n <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n <!-- Left column moving area -->\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n\n <!-- Row dragging area -->\n <ng-container *ngIf=\"grid.rowDraggable\">\n <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n <div style=\"visibility: hidden;\">\n <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Row selectors area -->\n <ng-container *ngIf=\"grid.showRowSelectors\">\n <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n (click)=\"headerRowSelection($event)\"\n (pointerdown)=\"$event.preventDefault()\">\n <ng-container #headSelector\n *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Hierarchical grids expand all area -->\n <ng-container *ngIf=\"isHierarchicalGrid\">\n <div #headerHierarchyExpander\n (click)=\"grid.toggleAll()\"\n (pointerdown)=\"$event.preventDefault()\"\n [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n [ngClass]=\"{\n 'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n 'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n 'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n }\">\n <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n </div>\n </ng-container>\n\n\n <!-- Grouping icon toggle area -->\n <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n (click)=\"grid.toggleAllGroupRows()\"\n (pointerdown)=\"$event.preventDefault()\">\n <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Pinned columns collection from the start -->\n <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n </igx-grid-header-group>\n </ng-container>\n </ng-container>\n\n <!-- Unpinned columns collection -->\n <ng-template igxGridFor #headerVirtualContainer let-column\n [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n [igxForScrollContainer]=\"grid.parentVirtDir\"\n [igxForContainerSize]=\"grid.unpinnedWidth\"\n [igxForTrackBy]=\"grid.trackColumnChanges\"\n [igxForSizePropName]=\"'calcPixelWidth'\"\n [igxForScrollOrientation]=\"'horizontal'\"\n >\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n </igx-grid-header-group>\n </ng-template>\n\n <!-- Pinned columns collection at the end -->\n <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.left]=\"column.rightPinnedOffset\">\n </igx-grid-header-group>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Filter row area -->\n <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n <igx-grid-filtering-row #filteringRow\n [column]=\"grid.filteringService.filteredColumn\"\n [style.width.px]=\"width\">\n </igx-grid-filtering-row>\n </ng-container>\n\n <!-- Right column moving area -->\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox\n [tabindex]=\"-1\"\n [readonly]=\"true\"\n [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n [disableRipple]=\"true\"\n [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n #headerCheckbox>\n </igx-checkbox>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
61225
61234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
|
|
61226
61235
|
type: Component,
|
|
61227
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n <!-- Column headers area -->\n <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n <!-- Left column moving area -->\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n\n <!-- Row dragging area -->\n <ng-container *ngIf=\"grid.rowDraggable\">\n <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n <div style=\"visibility: hidden;\">\n <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Row selectors area -->\n <ng-container *ngIf=\"grid.showRowSelectors\">\n <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n (click)=\"headerRowSelection($event)\"\n (pointerdown)=\"$event.preventDefault()\">\n <ng-container #headSelector\n *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Hierarchical grids expand all area -->\n <ng-container *ngIf=\"isHierarchicalGrid\">\n <div #headerHierarchyExpander\n (click)=\"grid.toggleAll()\"\n (pointerdown)=\"$event.preventDefault()\"\n [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n [ngClass]=\"{\n 'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n 'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n 'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n }\">\n <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n </div>\n </ng-container>\n\n\n <!-- Grouping icon toggle area -->\n <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n (click)=\"grid.toggleAllGroupRows()\"\n (pointerdown)=\"$event.preventDefault()\">\n <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Pinned columns collection from the start -->\n <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n </igx-grid-header-group>\n </ng-container>\n </ng-container>\n\n <!-- Unpinned columns collection -->\n <ng-template igxGridFor #headerVirtualContainer let-column\n [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n [igxForScrollContainer]=\"grid.parentVirtDir\"\n [igxForContainerSize]=\"grid.unpinnedWidth\"\n [igxForTrackBy]=\"grid.trackColumnChanges\"\n [igxForSizePropName]=\"'calcPixelWidth'\"\n [igxForScrollOrientation]=\"'horizontal'\"\n >\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n </igx-grid-header-group>\n </ng-template>\n\n <!-- Pinned columns collection at the end -->\n <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.left]=\"column.rightPinnedOffset\">\n </igx-grid-header-group>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Filter row area -->\n <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n <igx-grid-filtering-row #filteringRow\n [column]=\"grid.filteringService.filteredColumn\"\n [style.width.px]=\"width\">\n </igx-grid-filtering-row>\n </ng-container>\n\n <!-- Right column moving area -->\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox\n [tabindex]=\"-1\"\n [readonly]=\"true\"\n [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n [disableRipple]=\"true\"\n [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n #headerCheckbox>\n </igx-checkbox>\n </div>\n</ng-template>\n" }]
|
|
61236
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n <!-- Column headers area -->\n <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n <!-- Left column moving area -->\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n\n <!-- Row dragging area -->\n <ng-container *ngIf=\"grid.rowDraggable\">\n <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n <div style=\"visibility: hidden;\">\n <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Row selectors area -->\n <ng-container *ngIf=\"grid.showRowSelectors\">\n <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n (click)=\"headerRowSelection($event)\"\n (pointerdown)=\"$event.preventDefault()\">\n <ng-container #headSelector\n *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Hierarchical grids expand all area -->\n <ng-container *ngIf=\"isHierarchicalGrid\">\n <div #headerHierarchyExpander\n (click)=\"grid.toggleAll()\"\n (pointerdown)=\"$event.preventDefault()\"\n [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n [ngClass]=\"{\n 'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n 'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n 'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n }\">\n <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n </div>\n </ng-container>\n\n\n <!-- Grouping icon toggle area -->\n <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n (click)=\"grid.toggleAllGroupRows()\"\n (pointerdown)=\"$event.preventDefault()\">\n <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n </div>\n </ng-container>\n\n <!-- Pinned columns collection from the start -->\n <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n </igx-grid-header-group>\n </ng-container>\n </ng-container>\n\n <!-- Unpinned columns collection -->\n <ng-template igxGridFor #headerVirtualContainer let-column\n [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n [igxForScrollContainer]=\"grid.parentVirtDir\"\n [igxForContainerSize]=\"grid.unpinnedWidth\"\n [igxForTrackBy]=\"grid.trackColumnChanges\"\n [igxForSizePropName]=\"'calcPixelWidth'\"\n [igxForScrollOrientation]=\"'horizontal'\"\n >\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n </igx-grid-header-group>\n </ng-template>\n\n <!-- Pinned columns collection at the end -->\n <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n <igx-grid-header-group\n [ngClass]=\"column.headerGroupClasses\"\n [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [column]=\"column\"\n [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n [style.left]=\"column.rightPinnedOffset\">\n </igx-grid-header-group>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Filter row area -->\n <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n <igx-grid-filtering-row #filteringRow\n [column]=\"grid.filteringService.filteredColumn\"\n [style.width.px]=\"width\">\n </igx-grid-filtering-row>\n </ng-container>\n\n <!-- Right column moving area -->\n <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n <div class=\"igx-grid__cbx-padding\">\n <igx-checkbox\n [tabindex]=\"-1\"\n [readonly]=\"true\"\n [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n [disableRipple]=\"true\"\n [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n #headerCheckbox>\n </igx-checkbox>\n </div>\n</ng-template>\n" }]
|
|
61228
61237
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { grid: [{
|
|
61229
61238
|
type: Input
|
|
61230
61239
|
}], pinnedColumnCollection: [{
|
|
@@ -71867,6 +71876,14 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
71867
71876
|
this._dropAreaMessage = null;
|
|
71868
71877
|
this._showGroupArea = true;
|
|
71869
71878
|
this.childDetailTemplates = new Map();
|
|
71879
|
+
/**
|
|
71880
|
+
* @hidden @internal
|
|
71881
|
+
*/
|
|
71882
|
+
this.groupingPerformedSubject = new Subject();
|
|
71883
|
+
/**
|
|
71884
|
+
* @hidden @internal
|
|
71885
|
+
*/
|
|
71886
|
+
this.groupingPerformed$ = this.groupingPerformedSubject.asObservable();
|
|
71870
71887
|
}
|
|
71871
71888
|
/**
|
|
71872
71889
|
* Returns a reference to the master-detail template.
|
|
@@ -72013,7 +72030,9 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
72013
72030
|
groupedColumns: groupedCols,
|
|
72014
72031
|
ungroupedColumns: ungroupedCols
|
|
72015
72032
|
};
|
|
72016
|
-
this.
|
|
72033
|
+
this.groupingPerformed$.pipe(take(1)).subscribe(() => {
|
|
72034
|
+
this.groupingDone.emit(groupingDoneArgs);
|
|
72035
|
+
});
|
|
72017
72036
|
}
|
|
72018
72037
|
}
|
|
72019
72038
|
/**
|
|
@@ -72288,6 +72307,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
72288
72307
|
this._gridAPI.clear_groupby(name);
|
|
72289
72308
|
this.calculateGridSizes();
|
|
72290
72309
|
this.notifyChanges(true);
|
|
72310
|
+
this.groupingPerformedSubject.next();
|
|
72291
72311
|
}
|
|
72292
72312
|
/**
|
|
72293
72313
|
* Returns if a group is expanded or not.
|