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
|
@@ -1890,6 +1890,7 @@ class IgxGrouping extends IgxSorting {
|
|
|
1890
1890
|
groupBy(data, state, grid, groupsRecords, fullResult = { data: [], metadata: [] }) {
|
|
1891
1891
|
const metadata = [];
|
|
1892
1892
|
const grouping = this.groupDataRecursive(data, state, 0, null, metadata, grid, groupsRecords, fullResult);
|
|
1893
|
+
grid === null || grid === void 0 ? void 0 : grid.groupingPerformedSubject.next();
|
|
1893
1894
|
return {
|
|
1894
1895
|
data: grouping,
|
|
1895
1896
|
metadata
|
|
@@ -6531,7 +6532,7 @@ class IgxOverlayService {
|
|
|
6531
6532
|
// TODO: update attach
|
|
6532
6533
|
}
|
|
6533
6534
|
this.updateSize(info);
|
|
6534
|
-
info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height },
|
|
6535
|
+
info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, this._document, true, info.settings.target);
|
|
6535
6536
|
this.addModalClasses(info);
|
|
6536
6537
|
if (info.settings.positionStrategy.settings.openAnimation) {
|
|
6537
6538
|
// TODO: should we build players again. This was already done in attach!!!
|
|
@@ -11055,6 +11056,9 @@ class IgxForOfDirective {
|
|
|
11055
11056
|
* Clears focus inside the virtualized container on small scroll swaps.
|
|
11056
11057
|
*/
|
|
11057
11058
|
scrollFocus(node) {
|
|
11059
|
+
if (!node) {
|
|
11060
|
+
return;
|
|
11061
|
+
}
|
|
11058
11062
|
const document = node.getRootNode();
|
|
11059
11063
|
const activeElement = document.activeElement;
|
|
11060
11064
|
// Remove focus in case the the active element is inside the view container.
|
|
@@ -29824,25 +29828,21 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
|
|
|
29824
29828
|
*/
|
|
29825
29829
|
_clickHandler(index) {
|
|
29826
29830
|
const button = this.buttons[index];
|
|
29827
|
-
const args = {
|
|
29831
|
+
const args = { button, index };
|
|
29828
29832
|
if (!this.multiSelection) {
|
|
29829
29833
|
this.buttons.forEach((b, i) => {
|
|
29830
29834
|
if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
|
|
29831
|
-
this.deselected.emit({
|
|
29835
|
+
this.deselected.emit({ button: b, index: i });
|
|
29832
29836
|
}
|
|
29833
29837
|
});
|
|
29834
29838
|
}
|
|
29835
29839
|
if (this.selectedIndexes.indexOf(index) === -1) {
|
|
29840
|
+
this.selectButton(index);
|
|
29836
29841
|
this.selected.emit(args);
|
|
29837
|
-
if (!args.cancel) {
|
|
29838
|
-
this.selectButton(index);
|
|
29839
|
-
}
|
|
29840
29842
|
}
|
|
29841
29843
|
else {
|
|
29844
|
+
this.deselectButton(index);
|
|
29842
29845
|
this.deselected.emit(args);
|
|
29843
|
-
if (!args.cancel) {
|
|
29844
|
-
this.deselectButton(index);
|
|
29845
|
-
}
|
|
29846
29846
|
}
|
|
29847
29847
|
}
|
|
29848
29848
|
}
|
|
@@ -44985,6 +44985,9 @@ class IgxExcelStyleConditionalFilterComponent {
|
|
|
44985
44985
|
if (eventArgs.key === this.platform.KEYMAP.ENTER) {
|
|
44986
44986
|
this.onTextFilterClick(eventArgs);
|
|
44987
44987
|
}
|
|
44988
|
+
else if (eventArgs.key === this.platform.KEYMAP.TAB) {
|
|
44989
|
+
this.subMenu.close();
|
|
44990
|
+
}
|
|
44988
44991
|
}
|
|
44989
44992
|
/**
|
|
44990
44993
|
* @hidden @internal
|
|
@@ -45083,10 +45086,10 @@ class IgxExcelStyleConditionalFilterComponent {
|
|
|
45083
45086
|
}
|
|
45084
45087
|
}
|
|
45085
45088
|
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 });
|
|
45086
|
-
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()\"
|
|
45089
|
+
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"] }] });
|
|
45087
45090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
|
|
45088
45091
|
type: Component,
|
|
45089
|
-
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()\"
|
|
45092
|
+
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" }]
|
|
45090
45093
|
}], ctorParameters: function () { return [{ type: BaseFilteringComponent }, { type: PlatformUtil }]; }, propDecorators: { customDialog: [{
|
|
45091
45094
|
type: ViewChild,
|
|
45092
45095
|
args: ['customDialog', { read: IgxExcelStyleCustomDialogComponent }]
|
|
@@ -60972,6 +60975,12 @@ class IgxGridHeaderRowComponent {
|
|
|
60972
60975
|
ngDoCheck() {
|
|
60973
60976
|
this.cdr.markForCheck();
|
|
60974
60977
|
}
|
|
60978
|
+
/**
|
|
60979
|
+
* @hidden @internal
|
|
60980
|
+
*/
|
|
60981
|
+
scroll(event) {
|
|
60982
|
+
this.grid.preventHeaderScroll(event);
|
|
60983
|
+
}
|
|
60975
60984
|
headerRowSelection(event) {
|
|
60976
60985
|
if (!this.grid.isMultiRowSelectionEnabled) {
|
|
60977
60986
|
return;
|
|
@@ -60985,10 +60994,10 @@ class IgxGridHeaderRowComponent {
|
|
|
60985
60994
|
}
|
|
60986
60995
|
}
|
|
60987
60996
|
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 });
|
|
60988
|
-
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 });
|
|
60997
|
+
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 });
|
|
60989
60998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
|
|
60990
60999
|
type: Component,
|
|
60991
|
-
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" }]
|
|
61000
|
+
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" }]
|
|
60992
61001
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { grid: [{
|
|
60993
61002
|
type: Input
|
|
60994
61003
|
}], pinnedColumnCollection: [{
|
|
@@ -71704,6 +71713,14 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
71704
71713
|
this._dropAreaMessage = null;
|
|
71705
71714
|
this._showGroupArea = true;
|
|
71706
71715
|
this.childDetailTemplates = new Map();
|
|
71716
|
+
/**
|
|
71717
|
+
* @hidden @internal
|
|
71718
|
+
*/
|
|
71719
|
+
this.groupingPerformedSubject = new Subject();
|
|
71720
|
+
/**
|
|
71721
|
+
* @hidden @internal
|
|
71722
|
+
*/
|
|
71723
|
+
this.groupingPerformed$ = this.groupingPerformedSubject.asObservable();
|
|
71707
71724
|
}
|
|
71708
71725
|
/**
|
|
71709
71726
|
* Returns a reference to the master-detail template.
|
|
@@ -71850,7 +71867,9 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
71850
71867
|
groupedColumns: groupedCols,
|
|
71851
71868
|
ungroupedColumns: ungroupedCols
|
|
71852
71869
|
};
|
|
71853
|
-
this.
|
|
71870
|
+
this.groupingPerformed$.pipe(take(1)).subscribe(() => {
|
|
71871
|
+
this.groupingDone.emit(groupingDoneArgs);
|
|
71872
|
+
});
|
|
71854
71873
|
}
|
|
71855
71874
|
}
|
|
71856
71875
|
/**
|
|
@@ -72127,6 +72146,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
72127
72146
|
this._gridAPI.clear_groupby(name);
|
|
72128
72147
|
this.calculateGridSizes();
|
|
72129
72148
|
this.notifyChanges(true);
|
|
72149
|
+
this.groupingPerformedSubject.next();
|
|
72130
72150
|
}
|
|
72131
72151
|
/**
|
|
72132
72152
|
* Returns if a group is expanded or not.
|