igniteui-angular 17.2.9 → 17.2.11
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/esm2022/lib/buttonGroup/buttonGroup.component.mjs +3 -6
- package/esm2022/lib/data-operations/filtering-expressions-tree.mjs +3 -3
- package/esm2022/lib/directives/drag-drop/drag-drop.directive.mjs +5 -1
- package/esm2022/lib/directives/for-of/for_of.directive.mjs +3 -3
- package/esm2022/lib/drop-down/drop-down-item.base.mjs +3 -3
- package/esm2022/lib/drop-down/drop-down.base.mjs +2 -2
- package/esm2022/lib/drop-down/drop-down.common.mjs +1 -1
- package/esm2022/lib/drop-down/drop-down.component.mjs +26 -11
- package/esm2022/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.mjs +17 -4
- package/esm2022/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.mjs +14 -9
- package/esm2022/lib/grids/headers/grid-header-group.component.mjs +8 -5
- package/esm2022/lib/grids/headers/grid-header.component.mjs +8 -2
- package/esm2022/lib/grids/selection/selection.service.mjs +6 -4
- package/esm2022/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.mjs +27 -3
- package/esm2022/lib/services/excel/excel-strings.mjs +2 -2
- package/fesm2022/igniteui-angular.mjs +110 -43
- package/fesm2022/igniteui-angular.mjs.map +1 -1
- package/lib/core/styles/components/grid/_excel-filtering-component.scss +5 -0
- package/lib/core/styles/components/grid/_excel-filtering-theme.scss +5 -0
- package/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss +0 -4
- package/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +0 -15
- package/lib/drop-down/drop-down-item.base.d.ts +1 -1
- package/lib/drop-down/drop-down.base.d.ts +1 -1
- package/lib/drop-down/drop-down.common.d.ts +1 -1
- package/lib/drop-down/drop-down.component.d.ts +13 -8
- package/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.d.ts +5 -0
- package/lib/grids/headers/grid-header.component.d.ts +1 -0
- package/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.d.ts +12 -1
- package/package.json +1 -1
- package/styles/igniteui-angular-dark.css +1 -1
- package/styles/igniteui-angular.css +1 -1
- package/styles/igniteui-bootstrap-dark.css +1 -1
- package/styles/igniteui-bootstrap-light.css +1 -1
- package/styles/igniteui-dark-green.css +1 -1
- package/styles/igniteui-fluent-dark-excel.css +1 -1
- package/styles/igniteui-fluent-dark-word.css +1 -1
- package/styles/igniteui-fluent-dark.css +1 -1
- package/styles/igniteui-fluent-light-excel.css +1 -1
- package/styles/igniteui-fluent-light-word.css +1 -1
- package/styles/igniteui-fluent-light.css +1 -1
- package/styles/igniteui-indigo-dark.css +1 -1
- package/styles/igniteui-indigo-light.css +1 -1
- package/styles/maps/igniteui-angular-dark.css.map +1 -1
- package/styles/maps/igniteui-angular.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
- package/styles/maps/igniteui-dark-green.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-light.css.map +1 -1
- package/styles/maps/igniteui-indigo-dark.css.map +1 -1
- package/styles/maps/igniteui-indigo-light.css.map +1 -1
|
@@ -1420,8 +1420,8 @@ class FilteringExpressionsTree {
|
|
|
1420
1420
|
if ((expr instanceof FilteringExpressionsTree)) {
|
|
1421
1421
|
return this.isFilteringExpressionsTreeForColumn(expr, fieldName);
|
|
1422
1422
|
}
|
|
1423
|
-
else {
|
|
1424
|
-
return
|
|
1423
|
+
else if (expr.fieldName === fieldName) {
|
|
1424
|
+
return true;
|
|
1425
1425
|
}
|
|
1426
1426
|
}
|
|
1427
1427
|
return false;
|
|
@@ -3361,7 +3361,7 @@ class ExcelStrings {
|
|
|
3361
3361
|
}
|
|
3362
3362
|
static getStyles() {
|
|
3363
3363
|
return ExcelStrings.XML_STRING +
|
|
3364
|
-
'<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac x16r2" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:x16r2="http://schemas.microsoft.com/office/spreadsheetml/2015/02/main"><numFmts count="5"><numFmt numFmtId="164" formatCode=""$"#,##0.00"/><numFmt numFmtId="165" formatCode="[$£-809]#,##0.00"/><numFmt numFmtId="166" formatCode="[$¥-804]#,##0.00"/><numFmt numFmtId="167" formatCode="#,##0.00\ [$€-1]"/><numFmt numFmtId="168" formatCode="[$¥-411]#,##0.00"/></numFmts><fonts count="2" x14ac:knownFonts="1"><font><sz val="11"/><color theme="1"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font><font><sz val="11"/><color
|
|
3364
|
+
'<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac x16r2" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:x16r2="http://schemas.microsoft.com/office/spreadsheetml/2015/02/main"><numFmts count="5"><numFmt numFmtId="164" formatCode=""$"#,##0.00"/><numFmt numFmtId="165" formatCode="[$£-809]#,##0.00"/><numFmt numFmtId="166" formatCode="[$¥-804]#,##0.00"/><numFmt numFmtId="167" formatCode="#,##0.00\ [$€-1]"/><numFmt numFmtId="168" formatCode="[$¥-411]#,##0.00"/></numFmts><fonts count="2" x14ac:knownFonts="1"><font><sz val="11"/><color theme="1"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font><font><b/><sz val="11"/><color theme="0"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font></fonts><fills count="3"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill><fill><patternFill patternType="solid"><fgColor theme="4"/><bgColor indexed="64"/></patternFill></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="13"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="14" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="0" fontId="1" fillId="2" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyAlignment="1"><alignment horizontal="center" vertical="center"/></xf><xf numFmtId="164" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="165" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="166" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="167" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="168" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="21" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="22" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="10" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/></cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles><dxfs count="0"/><tableStyles count="0" defaultTableStyle="TableStyleMedium2" defaultPivotStyle="PivotStyleLight16"/><extLst><ext uri="{EB79DEF2-80B8-43e5-95BD-54CBDDF9020C}" xmlns:x14="http://schemas.microsoft.com/office/spreadsheetml/2009/9/main"><x14:slicerStyles defaultSlicerStyle="SlicerStyleLight1"/></ext><ext uri="{9260A510-F301-46a8-8635-F512D64BE5F5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><x15:timelineStyles defaultTimelineStyle="TimeSlicerStyleLight1"/></ext></extLst></styleSheet>';
|
|
3365
3365
|
}
|
|
3366
3366
|
static getWorkbook(worksheetName) {
|
|
3367
3367
|
return ExcelStrings.XML_STRING + `<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x15" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><fileVersion appName="xl" lastEdited="6" lowestEdited="6" rupBuild="14420"/><workbookPr filterPrivacy="1" defaultThemeVersion="164011"/><bookViews><workbookView xWindow="0" yWindow="0" windowWidth="22260" windowHeight="12645"/></bookViews><sheets><sheet name="${worksheetName}" sheetId="1" r:id="rId1"/></sheets><calcPr calcId="162913"/><extLst><ext uri="{140A7094-0E35-4892-8432-C4D2E57EDEB5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><x15:workbookPr chartTrackingRefBase="1"/></ext></extLst></workbook>`;
|
|
@@ -7415,7 +7415,7 @@ class IgxDropDownBaseDirective extends DisplayDensityBase {
|
|
|
7415
7415
|
* @param newSelection the item selected
|
|
7416
7416
|
* @param event the event that triggered the call
|
|
7417
7417
|
*/
|
|
7418
|
-
selectItem(newSelection, event) {
|
|
7418
|
+
selectItem(newSelection, event, emit = true) {
|
|
7419
7419
|
this.selectionChanging.emit({
|
|
7420
7420
|
newSelection,
|
|
7421
7421
|
oldSelection: null,
|
|
@@ -11235,6 +11235,10 @@ class IgxDragDirective {
|
|
|
11235
11235
|
}
|
|
11236
11236
|
/** Method setting transformation to the base draggable element. */
|
|
11237
11237
|
setTransformXY(x, y) {
|
|
11238
|
+
if (x === 0 && y === 0) {
|
|
11239
|
+
this.element.nativeElement.style.transform = '';
|
|
11240
|
+
return;
|
|
11241
|
+
}
|
|
11238
11242
|
this.element.nativeElement.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px)';
|
|
11239
11243
|
}
|
|
11240
11244
|
/**
|
|
@@ -13448,13 +13452,13 @@ class IgxForOfDirective extends IgxForOfToken {
|
|
|
13448
13452
|
const currDiff = newVal - oldVal;
|
|
13449
13453
|
diffs.push(currDiff);
|
|
13450
13454
|
totalDiff += currDiff;
|
|
13451
|
-
this.sizesCache[index + 1]
|
|
13455
|
+
this.sizesCache[index + 1] = (this.sizesCache[index] || 0) + newVal;
|
|
13452
13456
|
}
|
|
13453
13457
|
}
|
|
13454
13458
|
// update cache
|
|
13455
13459
|
if (Math.abs(totalDiff) > 0) {
|
|
13456
13460
|
for (let j = this.state.startIndex + this.state.chunkSize + 1; j < this.sizesCache.length; j++) {
|
|
13457
|
-
this.sizesCache[j]
|
|
13461
|
+
this.sizesCache[j] = (this.sizesCache[j] || 0) + totalDiff;
|
|
13458
13462
|
}
|
|
13459
13463
|
// update scrBar heights/widths
|
|
13460
13464
|
const reducer = (acc, val) => acc + val;
|
|
@@ -22450,12 +22454,12 @@ class IgxDropDownItemBaseDirective {
|
|
|
22450
22454
|
if (this._selected) {
|
|
22451
22455
|
const dropDownSelectedItem = this.dropDown.selectedItem;
|
|
22452
22456
|
if (!dropDownSelectedItem) {
|
|
22453
|
-
this.dropDown.selectItem(this);
|
|
22457
|
+
this.dropDown.selectItem(this, undefined, false);
|
|
22454
22458
|
}
|
|
22455
22459
|
else if (this.hasIndex
|
|
22456
22460
|
? this._index !== dropDownSelectedItem.index || this.value !== dropDownSelectedItem.value :
|
|
22457
22461
|
this !== dropDownSelectedItem) {
|
|
22458
|
-
this.dropDown.selectItem(this);
|
|
22462
|
+
this.dropDown.selectItem(this, undefined, false);
|
|
22459
22463
|
}
|
|
22460
22464
|
}
|
|
22461
22465
|
}
|
|
@@ -22802,9 +22806,20 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
|
|
|
22802
22806
|
* ```
|
|
22803
22807
|
*/
|
|
22804
22808
|
open(overlaySettings) {
|
|
22805
|
-
this.
|
|
22809
|
+
const settings = overlaySettings || this.getDefaultOverlaySettings();
|
|
22810
|
+
this.toggleDirective.open(settings);
|
|
22806
22811
|
this.updateScrollPosition();
|
|
22807
22812
|
}
|
|
22813
|
+
/**
|
|
22814
|
+
* @hidden @internal
|
|
22815
|
+
*/
|
|
22816
|
+
getDefaultOverlaySettings() {
|
|
22817
|
+
return {
|
|
22818
|
+
closeOnOutsideClick: true,
|
|
22819
|
+
modal: false,
|
|
22820
|
+
positionStrategy: new ConnectedPositioningStrategy()
|
|
22821
|
+
};
|
|
22822
|
+
}
|
|
22808
22823
|
/**
|
|
22809
22824
|
* Closes the dropdown
|
|
22810
22825
|
*
|
|
@@ -23044,14 +23059,15 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
|
|
|
23044
23059
|
}
|
|
23045
23060
|
}
|
|
23046
23061
|
/**
|
|
23047
|
-
|
|
23048
|
-
|
|
23049
|
-
|
|
23050
|
-
|
|
23051
|
-
|
|
23052
|
-
|
|
23053
|
-
|
|
23054
|
-
|
|
23062
|
+
* Handles the `selectionChanging` emit and the drop down toggle when selection changes
|
|
23063
|
+
*
|
|
23064
|
+
* @hidden
|
|
23065
|
+
* @internal
|
|
23066
|
+
* @param newSelection
|
|
23067
|
+
* @param event
|
|
23068
|
+
* @param emit
|
|
23069
|
+
*/
|
|
23070
|
+
selectItem(newSelection, event, emit = true) {
|
|
23055
23071
|
const oldSelection = this.selectedItem;
|
|
23056
23072
|
if (!newSelection) {
|
|
23057
23073
|
newSelection = this.focusedItem;
|
|
@@ -23069,7 +23085,9 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
|
|
|
23069
23085
|
};
|
|
23070
23086
|
}
|
|
23071
23087
|
const args = { oldSelection, newSelection, cancel: false, owner: this };
|
|
23072
|
-
|
|
23088
|
+
if (emit) {
|
|
23089
|
+
this.selectionChanging.emit(args);
|
|
23090
|
+
}
|
|
23073
23091
|
if (!args.cancel) {
|
|
23074
23092
|
if (this.isSelectionValid(args.newSelection)) {
|
|
23075
23093
|
this.selection.set(this.id, new Set([args.newSelection]));
|
|
@@ -25156,8 +25174,10 @@ class IgxGridSelectionService {
|
|
|
25156
25174
|
return Array.from(this.rowSelection);
|
|
25157
25175
|
}
|
|
25158
25176
|
const selection = [];
|
|
25177
|
+
const gridDataMap = {};
|
|
25178
|
+
this.grid.gridAPI.get_all_data(true).forEach(row => gridDataMap[this.getRecordKey(row)] = row);
|
|
25159
25179
|
this.rowSelection.forEach(rID => {
|
|
25160
|
-
const rData =
|
|
25180
|
+
const rData = gridDataMap[rID];
|
|
25161
25181
|
const partialRowData = {};
|
|
25162
25182
|
partialRowData[this.grid.primaryKey] = rID;
|
|
25163
25183
|
selection.push(rData ? rData : partialRowData);
|
|
@@ -25343,9 +25363,9 @@ class IgxGridSelectionService {
|
|
|
25343
25363
|
if (this.allRowsSelected !== undefined && !newSelection) {
|
|
25344
25364
|
return this.allRowsSelected;
|
|
25345
25365
|
}
|
|
25346
|
-
const selectedData = newSelection ? newSelection : [...this.rowSelection];
|
|
25366
|
+
const selectedData = new Set(newSelection ? newSelection : [...this.rowSelection]);
|
|
25347
25367
|
const allData = this.getRowIDs(this.allData);
|
|
25348
|
-
const unSelectedRows = allData.filter(row => !selectedData.
|
|
25368
|
+
const unSelectedRows = allData.filter(row => !selectedData.has(row));
|
|
25349
25369
|
return this.allRowsSelected = this.allData.length > 0 && unSelectedRows.length === 0;
|
|
25350
25370
|
}
|
|
25351
25371
|
hasSomeRowSelected() {
|
|
@@ -27880,8 +27900,7 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
|
|
|
27880
27900
|
if (updatedButtons.length > 0) {
|
|
27881
27901
|
updatedButtons.forEach((button) => {
|
|
27882
27902
|
const index = this.buttons.map((b) => b.nativeElement).indexOf(button);
|
|
27883
|
-
|
|
27884
|
-
this.updateButtonSelectionState(index, args);
|
|
27903
|
+
this.updateButtonSelectionState(index);
|
|
27885
27904
|
});
|
|
27886
27905
|
}
|
|
27887
27906
|
// Watch for changes again
|
|
@@ -27899,14 +27918,12 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
|
|
|
27899
27918
|
}, updated);
|
|
27900
27919
|
return updated;
|
|
27901
27920
|
}
|
|
27902
|
-
updateButtonSelectionState(index
|
|
27921
|
+
updateButtonSelectionState(index) {
|
|
27903
27922
|
if (this.buttons[index].selected) {
|
|
27904
27923
|
this.updateSelected(index);
|
|
27905
|
-
this.selected.emit(args);
|
|
27906
27924
|
}
|
|
27907
27925
|
else {
|
|
27908
27926
|
this.updateDeselected(index);
|
|
27909
|
-
this.deselected.emit(args);
|
|
27910
27927
|
}
|
|
27911
27928
|
}
|
|
27912
27929
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -48398,14 +48415,19 @@ class IgxExcelStyleCustomDialogComponent {
|
|
|
48398
48415
|
this.expressionDateComponents.forEach(x => x.cdr.markForCheck());
|
|
48399
48416
|
}
|
|
48400
48417
|
createInitialExpressionUIElement() {
|
|
48401
|
-
|
|
48402
|
-
|
|
48403
|
-
|
|
48404
|
-
|
|
48405
|
-
|
|
48406
|
-
|
|
48407
|
-
|
|
48408
|
-
|
|
48418
|
+
let firstExprUI = new ExpressionUI();
|
|
48419
|
+
if (this.expressionsList.length == 1 && this.expressionsList[0].expression.condition.name === this.selectedOperator) {
|
|
48420
|
+
firstExprUI = this.expressionsList.pop();
|
|
48421
|
+
}
|
|
48422
|
+
else {
|
|
48423
|
+
this.expressionsList = [];
|
|
48424
|
+
firstExprUI.expression = {
|
|
48425
|
+
condition: this.createCondition(this.selectedOperator),
|
|
48426
|
+
fieldName: this.column.field,
|
|
48427
|
+
ignoreCase: this.column.filteringIgnoreCase,
|
|
48428
|
+
searchVal: null
|
|
48429
|
+
};
|
|
48430
|
+
}
|
|
48409
48431
|
firstExprUI.afterOperator = FilteringLogic.And;
|
|
48410
48432
|
this.expressionsList.push(firstExprUI);
|
|
48411
48433
|
const secondExprUI = new ExpressionUI();
|
|
@@ -48465,6 +48487,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
48465
48487
|
* A component used for presenting Excel style conditional filter UI.
|
|
48466
48488
|
*/
|
|
48467
48489
|
class IgxExcelStyleConditionalFilterComponent {
|
|
48490
|
+
get filterNumber() {
|
|
48491
|
+
return this.esf.expressionsList.length;
|
|
48492
|
+
}
|
|
48468
48493
|
constructor(esf, platform) {
|
|
48469
48494
|
this.esf = esf;
|
|
48470
48495
|
this.platform = platform;
|
|
@@ -48534,6 +48559,16 @@ class IgxExcelStyleConditionalFilterComponent {
|
|
|
48534
48559
|
getCondition(value) {
|
|
48535
48560
|
return this.esf.column.filters.condition(value);
|
|
48536
48561
|
}
|
|
48562
|
+
/**
|
|
48563
|
+
* @hidden @internal
|
|
48564
|
+
*/
|
|
48565
|
+
getSelectedCondition(condition) {
|
|
48566
|
+
const expressions = this.esf.expressionsList;
|
|
48567
|
+
if (expressions.length < 1) {
|
|
48568
|
+
return false;
|
|
48569
|
+
}
|
|
48570
|
+
return expressions.length === 1 ? expressions[0].expression.condition.name === condition : condition === 'custom';
|
|
48571
|
+
}
|
|
48537
48572
|
/**
|
|
48538
48573
|
* @hidden @internal
|
|
48539
48574
|
*/
|
|
@@ -48600,11 +48635,11 @@ class IgxExcelStyleConditionalFilterComponent {
|
|
|
48600
48635
|
return this.esf.column.filters.conditionList();
|
|
48601
48636
|
}
|
|
48602
48637
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [{ token: BaseFilteringComponent }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
48603
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: IgxExcelStyleConditionalFilterComponent, isStandalone: true, 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.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.displayDensity\">\n </igx-excel-style-custom-dialog>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId", "displayDensity"] }] }); }
|
|
48638
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: IgxExcelStyleConditionalFilterComponent, isStandalone: true, 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 [ngClass]=\"filterNumber > 0 ? 'igx-excel-filter__actions-filter--active' : ''\"\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 class=\"igx-excel-filter__filter-number\">{{ subMenuText }} <ng-container *ngIf=\"filterNumber > 0\">({{filterNumber}})</ng-container></span>\n <igx-icon>keyboard_arrow_right</igx-icon>\n </div>\n\n <igx-drop-down\n #subMenu\n [maxHeight]=\"'397px'\"\n [displayDensity]=\"esf.displayDensity\"\n (selectionChanging)=\"onSubMenuSelection($event)\"\n (closed)=\"onSubMenuClosed()\">\n <div>\n <igx-drop-down-item\n *ngFor=\"let condition of conditions\"\n [selected]=\"getSelectedCondition(condition)\"\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 [selected]=\"getSelectedCondition('custom')\" >\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.displayDensity\">\n </igx-excel-style-custom-dialog>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId", "displayDensity"] }] }); }
|
|
48604
48639
|
}
|
|
48605
48640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
|
|
48606
48641
|
type: Component,
|
|
48607
|
-
args: [{ selector: 'igx-excel-style-conditional-filter', standalone: true, imports: [NgIf, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent], 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.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.displayDensity\">\n </igx-excel-style-custom-dialog>\n</ng-container>\n" }]
|
|
48642
|
+
args: [{ selector: 'igx-excel-style-conditional-filter', standalone: true, imports: [NgIf, NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent], template: "<ng-container *ngIf=\"esf.column\">\n <div tabindex=\"0\"\n class=\"igx-excel-filter__actions-filter\"\n [ngClass]=\"filterNumber > 0 ? 'igx-excel-filter__actions-filter--active' : ''\"\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 class=\"igx-excel-filter__filter-number\">{{ subMenuText }} <ng-container *ngIf=\"filterNumber > 0\">({{filterNumber}})</ng-container></span>\n <igx-icon>keyboard_arrow_right</igx-icon>\n </div>\n\n <igx-drop-down\n #subMenu\n [maxHeight]=\"'397px'\"\n [displayDensity]=\"esf.displayDensity\"\n (selectionChanging)=\"onSubMenuSelection($event)\"\n (closed)=\"onSubMenuClosed()\">\n <div>\n <igx-drop-down-item\n *ngFor=\"let condition of conditions\"\n [selected]=\"getSelectedCondition(condition)\"\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 [selected]=\"getSelectedCondition('custom')\" >\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.displayDensity\">\n </igx-excel-style-custom-dialog>\n</ng-container>\n" }]
|
|
48608
48643
|
}], ctorParameters: () => [{ type: BaseFilteringComponent }, { type: PlatformUtil }], propDecorators: { customDialog: [{
|
|
48609
48644
|
type: ViewChild,
|
|
48610
48645
|
args: ['customDialog', { read: IgxExcelStyleCustomDialogComponent }]
|
|
@@ -54522,7 +54557,7 @@ class IgxGridHeaderComponent {
|
|
|
54522
54557
|
return this.sortDirection !== SortingDirection.None;
|
|
54523
54558
|
}
|
|
54524
54559
|
get filterIconClassName() {
|
|
54525
|
-
return this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
|
|
54560
|
+
return this.column.filteringExpressionsTree || this.isAdvancedFilterApplied() ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
|
|
54526
54561
|
}
|
|
54527
54562
|
get selectable() {
|
|
54528
54563
|
return this.grid.columnSelection !== GridSelectionMode.none &&
|
|
@@ -54624,6 +54659,12 @@ class IgxGridHeaderComponent {
|
|
|
54624
54659
|
const expr = this.grid.sortingExpressions.find((x) => x.fieldName === this.column.field);
|
|
54625
54660
|
this.sortDirection = expr ? expr.dir : SortingDirection.None;
|
|
54626
54661
|
}
|
|
54662
|
+
isAdvancedFilterApplied() {
|
|
54663
|
+
if (!this.grid.advancedFilteringExpressionsTree) {
|
|
54664
|
+
return false;
|
|
54665
|
+
}
|
|
54666
|
+
return !!this.grid.advancedFilteringExpressionsTree.find(this.column.field);
|
|
54667
|
+
}
|
|
54627
54668
|
triggerSort() {
|
|
54628
54669
|
const groupingExpr = this.grid.groupingExpressions ?
|
|
54629
54670
|
this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) :
|
|
@@ -55815,8 +55856,11 @@ class IgxGridHeaderGroupComponent {
|
|
|
55815
55856
|
* @hidden
|
|
55816
55857
|
*/
|
|
55817
55858
|
onMouseDown(event) {
|
|
55818
|
-
|
|
55819
|
-
|
|
55859
|
+
if (!this.grid.allowFiltering ||
|
|
55860
|
+
(event.composedPath().findIndex(el => el.tagName?.toLowerCase() === 'igx-grid-filtering-cell') < 1)) {
|
|
55861
|
+
// Hack for preventing text selection in IE and Edge while dragging the resize element
|
|
55862
|
+
event.preventDefault();
|
|
55863
|
+
}
|
|
55820
55864
|
}
|
|
55821
55865
|
/**
|
|
55822
55866
|
* @hidden
|
|
@@ -55901,11 +55945,11 @@ class IgxGridHeaderGroupComponent {
|
|
|
55901
55945
|
};
|
|
55902
55946
|
}
|
|
55903
55947
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: IgxColumnResizingService }, { token: IgxFilteringService }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
55904
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: IgxGridHeaderGroupComponent, isStandalone: true, selector: "igx-grid-header-group", inputs: { column: "column" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "style.grid-row-end": "this.rowEnd", "style.grid-column-end": "this.colEnd", "style.grid-row-start": "this.rowStart", "style.grid-column-start": "this.colStart", "attr.id": "this.headerID", "class.igx-grid-th--active": "this.active", "class.igx-grid-thead__item": "this.defaultCss", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "class.igx-grid__drag-col-header": "this.headerDragCss", "class.igx-grid-th--filtering": "this.filteringCss", "style.z-index": "this.zIndex", "style.display": "this.groupDisplayStyle" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxGridHeaderComponent, descendants: true }, { propertyName: "filter", first: true, predicate: IgxGridFilteringCellComponent, descendants: true }, { propertyName: "children", predicate: i0.forwardRef(() => IgxGridHeaderGroupComponent), descendants: true, read: IgxGridHeaderGroupComponent }], ngImport: i0, template: "<ng-container *ngIf=\"grid.hasColumnLayouts && column.columnGroup\">\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n [ngClass]=\"{\n 'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n 'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n }\"\n [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n 'grid-template-columns':column.getGridTemplate(false)}\">\n <ng-container *ngFor=\"let child of column.children\" >\n <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n [ngClass]=\"child.headerGroupClasses\"\n [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n [column]=\"child\"
|
|
55948
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: IgxGridHeaderGroupComponent, isStandalone: true, selector: "igx-grid-header-group", inputs: { column: "column" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "style.grid-row-end": "this.rowEnd", "style.grid-column-end": "this.colEnd", "style.grid-row-start": "this.rowStart", "style.grid-column-start": "this.colStart", "attr.id": "this.headerID", "class.igx-grid-th--active": "this.active", "class.igx-grid-thead__item": "this.defaultCss", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "class.igx-grid__drag-col-header": "this.headerDragCss", "class.igx-grid-th--filtering": "this.filteringCss", "style.z-index": "this.zIndex", "style.display": "this.groupDisplayStyle" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxGridHeaderComponent, descendants: true }, { propertyName: "filter", first: true, predicate: IgxGridFilteringCellComponent, descendants: true }, { propertyName: "children", predicate: i0.forwardRef(() => IgxGridHeaderGroupComponent), descendants: true, read: IgxGridHeaderGroupComponent }], ngImport: i0, template: "<ng-container *ngIf=\"grid.hasColumnLayouts && column.columnGroup\">\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n [ngClass]=\"{\n 'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n 'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n }\"\n [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n 'grid-template-columns':column.getGridTemplate(false)}\">\n <ng-container *ngFor=\"let child of column.children\" >\n <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n [ngClass]=\"child.headerGroupClasses\"\n [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n [column]=\"child\">\n </igx-grid-header-group>\n </ng-container>\n </div>\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n\n\n<ng-template #defaultColumn>\n <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n <igx-icon>{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!grid.hasColumnLayouts && column.columnGroup\">\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <div class=\"igx-grid-thead__title\"\n role=\"columnheader\"\n [attr.aria-label]=\"column.header || column.field\"\n [attr.aria-expanded]=\"column.expanded\"\n [attr.aria-selected]=\"column.selected\"\n [ngClass]=\"{\n 'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n 'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n 'igx-grid-th--collapsible': column.collapsible,\n 'igx-grid-th--selectable': selectable,\n 'igx-grid-th--selected': selected,\n 'igx-grid-th--active': activeGroup}\"\n [igxColumnMovingDrag]=\"column\"\n [ghostHost]=\"grid.outlet.nativeElement\"\n [attr.droppable]=\"true\"\n [igxColumnMovingDrop]=\"column\"\n (pointerdown)=\"pointerdown($event)\"\n (click)=\"groupClicked($event)\"\n (pointerenter)=\"onPinterEnter()\"\n (pointerleave)=\"onPointerLeave()\"\n >\n <ng-container *ngIf=\"column.collapsible\">\n <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n <ng-container\n *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n </ng-container>\n </div>\n <div class=\"igx-grid-thead__group\" *ngIf='!grid.isPivot'>\n <ng-container *ngFor=\"let child of column.children\">\n <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n [ngClass]=\"child.headerGroupClasses\"\n [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n [column]=\"child\"\n [style.min-width]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n [style.flex-basis]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n </igx-grid-header-group>\n </ng-container>\n </div>\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <igx-grid-header\n role=\"columnheader\"\n class=\"igx-grid-th--fw\"\n [id]=\"grid.id + '_' + column.field\"\n [ngClass]=\"column.headerClasses\"\n [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [igxColumnMovingDrag]=\"column\"\n [ghostHost]=\"grid.outlet.nativeElement\"\n [attr.droppable]=\"true\"\n (pointerdown)=\"activate()\"\n [igxColumnMovingDrop]=\"column\"\n [column]=\"column\"\n [density]=\"grid.displayDensity\"\n >\n </igx-grid-header>\n <igx-grid-filtering-cell *ngIf=\"grid.allowFiltering && grid.filterMode === 'quickFilter'\" [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n [igxResizeHandle]=\"column\"\n [attr.draggable]=\"false\"\n [style.cursor]=\"colResizingService.resizeCursor\">\n </span>\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n", dependencies: [{ kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxColumnMovingDragDirective, selector: "[igxColumnMovingDrag]", inputs: ["igxColumnMovingDrag"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderComponent, selector: "igx-grid-header", inputs: ["column", "density"] }, { kind: "component", type: IgxGridFilteringCellComponent, selector: "igx-grid-filtering-cell", inputs: ["column"] }, { kind: "directive", type: IgxResizeHandleDirective, selector: "[igxResizeHandle]", inputs: ["igxResizeHandle"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
55905
55949
|
}
|
|
55906
55950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxGridHeaderGroupComponent, decorators: [{
|
|
55907
55951
|
type: Component,
|
|
55908
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-group', standalone: true, imports: [NgIf, NgClass, NgStyle, NgFor, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<ng-container *ngIf=\"grid.hasColumnLayouts && column.columnGroup\">\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n [ngClass]=\"{\n 'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n 'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n }\"\n [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n 'grid-template-columns':column.getGridTemplate(false)}\">\n <ng-container *ngFor=\"let child of column.children\" >\n <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n [ngClass]=\"child.headerGroupClasses\"\n [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n [column]=\"child\"
|
|
55952
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-group', standalone: true, imports: [NgIf, NgClass, NgStyle, NgFor, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<ng-container *ngIf=\"grid.hasColumnLayouts && column.columnGroup\">\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n [ngClass]=\"{\n 'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n 'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n }\"\n [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n 'grid-template-columns':column.getGridTemplate(false)}\">\n <ng-container *ngFor=\"let child of column.children\" >\n <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n [ngClass]=\"child.headerGroupClasses\"\n [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n [column]=\"child\">\n </igx-grid-header-group>\n </ng-container>\n </div>\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n\n\n<ng-template #defaultColumn>\n <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n <igx-icon>{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!grid.hasColumnLayouts && column.columnGroup\">\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <div class=\"igx-grid-thead__title\"\n role=\"columnheader\"\n [attr.aria-label]=\"column.header || column.field\"\n [attr.aria-expanded]=\"column.expanded\"\n [attr.aria-selected]=\"column.selected\"\n [ngClass]=\"{\n 'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n 'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n 'igx-grid-th--collapsible': column.collapsible,\n 'igx-grid-th--selectable': selectable,\n 'igx-grid-th--selected': selected,\n 'igx-grid-th--active': activeGroup}\"\n [igxColumnMovingDrag]=\"column\"\n [ghostHost]=\"grid.outlet.nativeElement\"\n [attr.droppable]=\"true\"\n [igxColumnMovingDrop]=\"column\"\n (pointerdown)=\"pointerdown($event)\"\n (click)=\"groupClicked($event)\"\n (pointerenter)=\"onPinterEnter()\"\n (pointerleave)=\"onPointerLeave()\"\n >\n <ng-container *ngIf=\"column.collapsible\">\n <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n <ng-container\n *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n </ng-container>\n </div>\n <div class=\"igx-grid-thead__group\" *ngIf='!grid.isPivot'>\n <ng-container *ngFor=\"let child of column.children\">\n <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n [ngClass]=\"child.headerGroupClasses\"\n [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n [column]=\"child\"\n [style.min-width]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n [style.flex-basis]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n </igx-grid-header-group>\n </ng-container>\n </div>\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <igx-grid-header\n role=\"columnheader\"\n class=\"igx-grid-th--fw\"\n [id]=\"grid.id + '_' + column.field\"\n [ngClass]=\"column.headerClasses\"\n [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [igxColumnMovingDrag]=\"column\"\n [ghostHost]=\"grid.outlet.nativeElement\"\n [attr.droppable]=\"true\"\n (pointerdown)=\"activate()\"\n [igxColumnMovingDrop]=\"column\"\n [column]=\"column\"\n [density]=\"grid.displayDensity\"\n >\n </igx-grid-header>\n <igx-grid-filtering-cell *ngIf=\"grid.allowFiltering && grid.filterMode === 'quickFilter'\" [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n [igxResizeHandle]=\"column\"\n [attr.draggable]=\"false\"\n [style.cursor]=\"colResizingService.resizeCursor\">\n </span>\n <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n" }]
|
|
55909
55953
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
55910
55954
|
type: Inject,
|
|
55911
55955
|
args: [IGX_GRID_BASE]
|
|
@@ -75679,13 +75723,36 @@ class IgxGridToolbarAdvancedFilteringComponent {
|
|
|
75679
75723
|
}
|
|
75680
75724
|
constructor(toolbar) {
|
|
75681
75725
|
this.toolbar = toolbar;
|
|
75726
|
+
this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => {
|
|
75727
|
+
this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length;
|
|
75728
|
+
});
|
|
75729
|
+
}
|
|
75730
|
+
/**
|
|
75731
|
+
* @hidden
|
|
75732
|
+
*/
|
|
75733
|
+
ngAfterViewInit() {
|
|
75734
|
+
this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0;
|
|
75735
|
+
}
|
|
75736
|
+
extractUniqueFieldNamesFromFilterTree(filteringTree) {
|
|
75737
|
+
const columnNames = [];
|
|
75738
|
+
if (!filteringTree)
|
|
75739
|
+
return columnNames;
|
|
75740
|
+
filteringTree.filteringOperands.forEach((expr) => {
|
|
75741
|
+
if (expr instanceof FilteringExpressionsTree) {
|
|
75742
|
+
columnNames.push(...this.extractUniqueFieldNamesFromFilterTree(expr));
|
|
75743
|
+
}
|
|
75744
|
+
else {
|
|
75745
|
+
columnNames.push(expr.fieldName);
|
|
75746
|
+
}
|
|
75747
|
+
});
|
|
75748
|
+
return [...new Set(columnNames)];
|
|
75682
75749
|
}
|
|
75683
75750
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [{ token: IgxToolbarToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
75684
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: IgxGridToolbarAdvancedFilteringComponent, isStandalone: true, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n
|
|
75751
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: IgxGridToolbarAdvancedFilteringComponent, isStandalone: true, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n class=\"igx-grid-toolbar__adv-filter\">\n <igx-icon>filter_list</igx-icon>\n <span #ref>\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n <span class=\"igx-adv-filter--column-number\" *ngIf=\"grid?.advancedFilteringExpressionsTree\"> ({{ numberOfColumns }}) </span>\n</button>\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
75685
75752
|
}
|
|
75686
75753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
|
|
75687
75754
|
type: Component,
|
|
75688
|
-
args: [{ selector: 'igx-grid-toolbar-advanced-filtering', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, NgClass, IgxIconComponent, NgIf], template: "<button igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n
|
|
75755
|
+
args: [{ selector: 'igx-grid-toolbar-advanced-filtering', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, NgClass, IgxIconComponent, NgIf], template: "<button igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n class=\"igx-grid-toolbar__adv-filter\">\n <igx-icon>filter_list</igx-icon>\n <span #ref>\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n <span class=\"igx-adv-filter--column-number\" *ngIf=\"grid?.advancedFilteringExpressionsTree\"> ({{ numberOfColumns }}) </span>\n</button>\n" }]
|
|
75689
75756
|
}], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
|
|
75690
75757
|
type: Inject,
|
|
75691
75758
|
args: [IgxToolbarToken]
|