igniteui-angular 22.2.0 → 22.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +18 -41
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +13 -15
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs +43 -34
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-tree.mjs +2 -2
- package/fesm2022/igniteui-angular-tree.mjs.map +1 -1
- package/package.json +1 -1
- package/skills/igniteui-angular-grids/references/types.md +1 -1
- package/types/igniteui-angular-grids-hierarchical-grid.d.ts +7 -6
- package/types/igniteui-angular-grids-pivot-grid.d.ts +2 -4
- package/types/igniteui-angular-grids-tree-grid.d.ts +32 -14
|
@@ -1127,6 +1127,8 @@ class IgxPivotGridNavigationService extends IgxGridNavigationService {
|
|
|
1127
1127
|
error: (err) => resolve(err)
|
|
1128
1128
|
});
|
|
1129
1129
|
});
|
|
1130
|
+
// Large scroll jumps only reassign the row contexts, so update the row dimension rows before looking them up.
|
|
1131
|
+
this.grid.cdr.detectChanges();
|
|
1130
1132
|
}
|
|
1131
1133
|
}
|
|
1132
1134
|
getNextVerticalColumnIndex(nextRow, newRowStart, newColStart) {
|
|
@@ -1468,7 +1470,7 @@ class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
|
|
|
1468
1470
|
ref.instance.header = header;
|
|
1469
1471
|
ref.instance.width = this.grid.rowDimensionWidthToPixels(this.rootDimension) + 'px';
|
|
1470
1472
|
ref.instance.resizable = this.grid.rowDimensionResizing;
|
|
1471
|
-
ref.instance._vIndex = this.grid.columns.length + this.rowIndex + this.rowIndex * this.grid.pivotConfiguration.rows
|
|
1473
|
+
ref.instance._vIndex = this.grid.columns.length + this.rowIndex + this.rowIndex * (this.grid.pivotConfiguration.rows?.length ?? 0);
|
|
1472
1474
|
if (header && dim.childLevel && (!this.rowData.totalRecordDimensionName || this.rowData.totalRecordDimensionName !== dim.memberName)) {
|
|
1473
1475
|
ref.instance.headerTemplate = this.headerTemplate;
|
|
1474
1476
|
}
|
|
@@ -2715,6 +2717,8 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
|
|
|
2715
2717
|
*/
|
|
2716
2718
|
set pivotConfiguration(value) {
|
|
2717
2719
|
this._pivotConfiguration = value;
|
|
2720
|
+
// The visible row dimensions of the previous configuration are no longer valid.
|
|
2721
|
+
this._visibleRowDimensions = null;
|
|
2718
2722
|
this.emitInitEvents(this._pivotConfiguration);
|
|
2719
2723
|
this.filteringExpressionsTree = PivotUtil.buildExpressionTree(value);
|
|
2720
2724
|
this.setDateDimensionsLocaleData();
|
|
@@ -3126,7 +3130,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
|
|
|
3126
3130
|
const config = this._pivotConfiguration;
|
|
3127
3131
|
if (!config)
|
|
3128
3132
|
return [];
|
|
3129
|
-
const uniqueVisibleRowDims = this.visibleRowDimensions.filter(dim => !config.rows
|
|
3133
|
+
const uniqueVisibleRowDims = this.visibleRowDimensions.filter(dim => !config.rows?.find(configRow => configRow.memberName === dim.memberName));
|
|
3130
3134
|
const rows = (config.rows || []).concat(...uniqueVisibleRowDims);
|
|
3131
3135
|
return rows.concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined);
|
|
3132
3136
|
}
|
|
@@ -4358,12 +4362,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
|
|
|
4358
4362
|
ref.changeDetectorRef.detectChanges();
|
|
4359
4363
|
return ref.instance;
|
|
4360
4364
|
}
|
|
4361
|
-
resolveColumnDimensionWidth(dim) {
|
|
4362
|
-
if (dim.width) {
|
|
4363
|
-
return dim.width;
|
|
4364
|
-
}
|
|
4365
|
-
return this.minColumnWidth + 'px';
|
|
4366
|
-
}
|
|
4367
4365
|
getMeasureChildren(data, parent, hidden, parentWidth) {
|
|
4368
4366
|
const cols = [];
|
|
4369
4367
|
const count = this.values.length;
|
|
@@ -4408,9 +4406,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
|
|
|
4408
4406
|
this.valueInit.emit(val);
|
|
4409
4407
|
});
|
|
4410
4408
|
}
|
|
4411
|
-
rowDimensionByName(memberName) {
|
|
4412
|
-
return this.visibleRowDimensions.find((rowDim) => rowDim.memberName === memberName);
|
|
4413
|
-
}
|
|
4414
4409
|
calculateResizerTop() {
|
|
4415
4410
|
return this.pivotUI.showRowHeaders ?
|
|
4416
4411
|
(this.theadRow.pivotFilterContainer?.nativeElement.offsetHeight || 0) + (this.theadRow.pivotRowContainer?.nativeElement.offsetHeight || 0) :
|
|
@@ -5108,11 +5103,11 @@ class IgxPivotDataSelectorComponent {
|
|
|
5108
5103
|
this.updateDropDown(value, dropdown);
|
|
5109
5104
|
}
|
|
5110
5105
|
else {
|
|
5111
|
-
// close for previous chip
|
|
5112
|
-
dropdown.close();
|
|
5106
|
+
// close for previous chip. Subscribe first, since closing without animation emits `closed` synchronously.
|
|
5113
5107
|
dropdown.closed.pipe(first()).subscribe(() => {
|
|
5114
5108
|
this.updateDropDown(value, dropdown);
|
|
5115
5109
|
});
|
|
5110
|
+
dropdown.close();
|
|
5116
5111
|
}
|
|
5117
5112
|
}
|
|
5118
5113
|
/**
|
|
@@ -5239,11 +5234,11 @@ class IgxPivotDataSelectorComponent {
|
|
|
5239
5234
|
}
|
|
5240
5235
|
}
|
|
5241
5236
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5242
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxPivotDataSelectorComponent, isStandalone: true, selector: "igx-pivot-data-selector", inputs: { columnsExpanded: ["columnsExpanded", "columnsExpanded", booleanAttribute], rowsExpanded: ["rowsExpanded", "rowsExpanded", booleanAttribute], filtersExpanded: ["filtersExpanded", "filtersExpanded", booleanAttribute], valuesExpanded: ["valuesExpanded", "valuesExpanded", booleanAttribute], grid: "grid" }, outputs: { columnsExpandedChange: "columnsExpandedChange", rowsExpandedChange: "rowsExpandedChange", filtersExpandedChange: "filtersExpandedChange", valuesExpandedChange: "valuesExpandedChange" }, host: { properties: { "class.igx-pivot-data-selector": "this.cssClass", "style.--ig-size": "this.size" } }, ngImport: i0, template: "<div class=\"igx-pivot-data-selector__filter\">\n <igx-input-group type=\"box\">\n <igx-icon family=\"default\" name=\"search\" igxPrefix></igx-icon>\n <input\n #input\n igxInput\n tabindex=\"0\"\n placeholder=\"Search\"\n autocomplete=\"off\"\n />\n </igx-input-group>\n <igx-list>\n @for (\n item of dims\n | filterPivotItems\n : input.value\n : pipeRetrigger;\n track item.memberName\n ) {\n <igx-list-item [id]=\"item.memberName\">\n <igx-checkbox\n [aria-labelledby]=\"item.memberName\"\n [disableRipple]=\"true\"\n [checked]=\"item.enabled\"\n (click)=\"toggleItem(item)\"\n ></igx-checkbox>\n <span>{{ item.displayName || item.memberName }}</span>\n </igx-list-item>\n }\n @for (\n item of values\n | filterPivotItems\n : input.value\n : pipeRetrigger;\n track item\n ) {\n <igx-list-item [id]=\"item.member\">\n <igx-checkbox\n [aria-labelledby]=\"item.member\"\n [disableRipple]=\"true\"\n [checked]=\"item.enabled\"\n (click)=\"toggleItem(item)\"\n ></igx-checkbox>\n <span>{{ item.displayName || item.member }}</span>\n </igx-list-item>\n }\n </igx-list>\n</div>\n\n<igx-accordion>\n @for (panel of _panels; track panel) {\n <igx-expansion-panel\n [animationSettings]=\"animationSettings\"\n [collapsed]=\"getPanelCollapsed(panel.type!)\"\n (collapsedChange)=\"onCollapseChange($event, panel.type!)\"\n >\n <igx-expansion-panel-header\n iconPosition=\"left\"\n [disabled]=\"false\"\n igxDrop\n (enter)=\"onPanelEntry($event, panel.name)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n >\n <igx-expansion-panel-title class=\"igx-pivot-data-selector__header\">\n <h6 class=\"igx-pivot-data-selector__header-title\">\n {{ $any(grid?.resourceStrings)[panel.i18n] }}\n </h6>\n <div class=\"igx-pivot-data-selector__header-extra\">\n <igx-icon family=\"default\" [name]=\"panel.icon\"></igx-icon>\n <igx-chip>{{\n this.grid ? this.grid[panel.dataKey].length : 0\n }}</igx-chip>\n </div>\n </igx-expansion-panel-title>\n </igx-expansion-panel-header>\n <igx-expansion-panel-body\n igxDrop\n (enter)=\"onPanelEntry($event, panel.name)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n >\n @if (this.grid && this.grid[panel.dataKey].length > 0) {\n <igx-list>\n @for (\n item of this.grid[panel.dataKey];\n track item.memberName || item.member\n ) {\n <igx-list-item\n igxDrop\n [igxDrag]=\"{\n gridID: grid.id,\n selectorChannels: panel.dragChannels,\n }\"\n [ghostTemplate]=\"itemGhost\"\n (ghostCreate)=\"ghostCreated($event, item[panel.itemKey])\"\n (over)=\"onItemDragOver($event)\"\n (leave)=\"onItemDragLeave($event)\"\n (dragMove)=\"onItemDragMove($event)\"\n (dragEnd)=\"onItemDragEnd($event)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n [id]=\"item[panel.itemKey]\"\n >\n <div class=\"igx-pivot-data-selector__item\">\n <div\n class=\"igx-pivot-data-selector__item-start\"\n (click)=\"onItemSort($event, item, panel.type!)\"\n [class.igx-pivot-data-selector__action-sort]=\"\n panel.sortable\n \"\n >\n <div class=\"igx-pivot-data-selector__item-text\">\n @if (panel.type === null) {\n <span>{{ item.aggregate.key }}</span>\n }\n @if (panel.type === null) {\n <span>(</span>\n }\n <span>{{\n item[panel.displayKey!] || item[panel.itemKey]\n }}</span>\n @if (panel.type === null) {\n <span>)</span>\n }\n </div>\n @if (panel.sortable && item.sortDirection) {\n <igx-icon\n family=\"default\"\n [name]=\"\n item.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\n \"\n class=\"igx-pivot-data-selector__action-sort\"\n >\n </igx-icon>\n }\n </div>\n <div class=\"igx-pivot-data-selector__item-end\">\n @if (panel.type !== null) {\n <igx-icon\n family=\"default\"\n name=\"filter_list\"\n class=\"igx-pivot-data-selector__action-filter\"\n (pointerdown)=\"onFilteringIconPointerDown($event)\"\n (click)=\"onFilteringIconClick($event, item)\"\n >\n </igx-icon>\n }\n @if (panel.type === null) {\n <igx-icon\n family=\"default\"\n name=\"functions\"\n class=\"igx-pivot-data-selector__action-summary\"\n (click)=\"onSummaryClick($event, item, dropdown)\"\n [igxDropDownItemNavigation]=\"dropdown\"\n >\n </igx-icon>\n }\n @if (panel.dragChannels.length > 0) {\n <igx-icon\n family=\"default\"\n name=\"drag_indicator\"\n igxDragHandle\n class=\"igx-pivot-data-selector__action-move\"\n >\n </igx-icon>\n }\n </div>\n </div>\n </igx-list-item>\n }\n </igx-list>\n }\n @if (this.grid && this.grid[panel.dataKey].length === 0) {\n <div class=\"igx-pivot-data-selector__empty\">\n {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n </div>\n }\n </igx-expansion-panel-body>\n </igx-expansion-panel>\n }\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n @for (item of aggregateList; track item) {\n <igx-drop-down-item [selected]=\"isSelected(item)\" [value]=\"item\">\n {{ item.label }}\n </igx-drop-down-item>\n }\n</igx-drop-down>\n\n<ng-template #itemGhost>\n <div\n class=\"igx-pivot-data-selector__item-ghost\"\n [style.width.px]=\"ghostWidth\"\n [class.igx-pivot-data-selector__item-ghost--no-drop]=\"!dropAllowed\"\n >\n <div class=\"igx-pivot-data-selector__item-ghost-text\">\n <igx-icon family=\"default\" name=\"import_export\"></igx-icon>\n <span>{{ ghostText }}</span>\n </div>\n <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-pivot-data-selector__action-summary,.igx-pivot-data-selector__action-filter,.igx-pivot-data-selector__action-sort{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.igx-pivot-data-selector{display:flex;flex-direction:column;max-width:17.5rem;background:var(--background);z-index:0}.igx-pivot-data-selector igx-input-group input{transform:none}.igx-pivot-data-selector igx-input-group [igxPrefix]{box-sizing:content-box}.igx-pivot-data-selector igx-input-group .igx-input-group__bundle-main{padding-top:0!important}.igx-pivot-data-selector>igx-list igx-display-container{padding:.25rem}.igx-pivot-data-selector>igx-list igx-list-item{display:flex;min-height:1.75rem}.igx-pivot-data-selector .igx-expansion-panel__body{position:relative;height:8rem;font-size:.875rem;padding:.25rem;overflow-y:auto}.igx-pivot-data-selector .igx-expansion-panel__body igx-list{height:auto}.igx-pivot-data-selector .igx-expansion-panel__header-icon--start{margin-inline-end:.5rem}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title{display:flex}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title>h6{font-size:.75rem;margin-block:0}.igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--header-color);padding:.25rem}.dragOver .igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--ig-gray-300);box-shadow:inset 0 0 0 .0625rem var(--ig-gray-400)}.igx-pivot-data-selector igx-icon{--size: var(--ig-icon-size, 1.125rem)}.igx-pivot-data-selector__header,.igx-pivot-data-selector__header-extra{display:flex;align-items:center}.igx-pivot-data-selector__header-extra igx-icon{padding:0 .5rem;box-sizing:content-box!important}.igx-pivot-data-selector__header-extra .igx-chip__item{height:max(var(--is-large, 1)*max(1.375rem,-1 * 1.375rem),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem),var(--is-small, 1)*max(1.125rem,-1 * 1.125rem))}.igx-pivot-data-selector__header-extra .igx-chip__content{padding:0 .125rem}.igx-pivot-data-selector__filter{display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.igx-pivot-data-selector__filter igx-list{display:flex;flex-direction:column;flex-shrink:0;padding:.5rem .25rem;min-height:11.625rem;max-height:13rem;overflow-y:auto}.igx-pivot-data-selector__filter igx-list-item{display:flex}.igx-pivot-data-selector__filter igx-checkbox+span{margin-inline-start:.5rem;line-height:1.75rem}.igx-pivot-data-selector__item{display:flex;align-items:center;justify-content:space-between;min-height:2rem;width:100%}.igx-drag--push .igx-pivot-data-selector__item{padding-top:2rem}.igx-pivot-data-selector__item-ghost{--ig-icon-size: 1.125rem;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background:var(--ig-surface-500);min-height:2rem;height:auto;padding:0 .125rem 0 .25rem;cursor:grabbing;box-shadow:elevation(24);border:.0625rem solid var(--ig-gray-100);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .125rem),.125rem);z-index:10}.igx-pivot-data-selector__item-ghost--no-drop{cursor:no-drop}.igx-pivot-data-selector__item-ghost-text{display:flex;align-items:center}.igx-pivot-data-selector__item-ghost-text igx-icon{margin-inline-end:.5rem}.igx-pivot-data-selector__item-start{display:flex;justify-content:space-between;align-items:center;flex:0 1 100%;margin-inline-end:.5rem;overflow:hidden}.igx-pivot-data-selector__item-end{display:flex}.igx-pivot-data-selector__item-end igx-icon+igx-icon{margin-inline-start:.5rem}.igx-pivot-data-selector__item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:calc(100% - .625rem);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-pivot-data-selector__action-move{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:grab}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-pivot-data-selector__filter igx-input-group{flex-shrink:0;padding:.25rem}}}@layer ig.material{@container style(--ig-theme: material){.igx-pivot-data-selector .igx-checkbox__composite-wrapper{padding:0}.igx-pivot-data-selector igx-input-group [igxPrefix]{padding-inline-end:1rem!important}}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role", "selected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxAccordionComponent, selector: "igx-accordion", inputs: ["id", "animationSettings", "singleBranchExpand"], outputs: ["panelExpanding", "panelExpanded", "panelCollapsing", "panelCollapsed"] }, { kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelHeaderComponent, selector: "igx-expansion-panel-header", inputs: ["lv", "role", "iconPosition", "disabled"], outputs: ["interaction"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxExpansionPanelTitleDirective, selector: "igx-expansion-panel-title" }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "pipe", type: IgxFilterPivotItemsPipe, name: "filterPivotItems" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxPivotDataSelectorComponent, isStandalone: true, selector: "igx-pivot-data-selector", inputs: { columnsExpanded: ["columnsExpanded", "columnsExpanded", booleanAttribute], rowsExpanded: ["rowsExpanded", "rowsExpanded", booleanAttribute], filtersExpanded: ["filtersExpanded", "filtersExpanded", booleanAttribute], valuesExpanded: ["valuesExpanded", "valuesExpanded", booleanAttribute], grid: "grid" }, outputs: { columnsExpandedChange: "columnsExpandedChange", rowsExpandedChange: "rowsExpandedChange", filtersExpandedChange: "filtersExpandedChange", valuesExpandedChange: "valuesExpandedChange" }, host: { properties: { "class.igx-pivot-data-selector": "this.cssClass", "style.--ig-size": "this.size" } }, ngImport: i0, template: "<div class=\"igx-pivot-data-selector__filter\">\n <igx-input-group type=\"box\">\n <igx-icon family=\"default\" name=\"search\" igxPrefix></igx-icon>\n <input\n #input\n igxInput\n tabindex=\"0\"\n placeholder=\"Search\"\n autocomplete=\"off\"\n />\n </igx-input-group>\n <igx-list>\n @for (\n item of dims\n | filterPivotItems\n : input.value\n : pipeRetrigger;\n track item.memberName\n ) {\n <igx-list-item [id]=\"item.memberName\">\n <igx-checkbox\n [aria-labelledby]=\"item.memberName\"\n [disableRipple]=\"true\"\n [checked]=\"item.enabled\"\n (click)=\"toggleItem(item)\"\n ></igx-checkbox>\n <span>{{ item.displayName || item.memberName }}</span>\n </igx-list-item>\n }\n @for (\n item of values\n | filterPivotItems\n : input.value\n : pipeRetrigger;\n track item\n ) {\n <igx-list-item [id]=\"item.member\">\n <igx-checkbox\n [aria-labelledby]=\"item.member\"\n [disableRipple]=\"true\"\n [checked]=\"item.enabled\"\n (click)=\"toggleItem(item)\"\n ></igx-checkbox>\n <span>{{ item.displayName || item.member }}</span>\n </igx-list-item>\n }\n </igx-list>\n</div>\n\n<igx-accordion>\n @for (panel of _panels; track panel) {\n <igx-expansion-panel\n [animationSettings]=\"animationSettings\"\n [collapsed]=\"getPanelCollapsed(panel.type!)\"\n (collapsedChange)=\"onCollapseChange($event, panel.type!)\"\n >\n <igx-expansion-panel-header\n iconPosition=\"left\"\n [disabled]=\"false\"\n igxDrop\n (enter)=\"onPanelEntry($event, panel.name)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n >\n <igx-expansion-panel-title class=\"igx-pivot-data-selector__header\">\n <h6 class=\"igx-pivot-data-selector__header-title\">\n {{ $any(grid?.resourceStrings)[panel.i18n] }}\n </h6>\n <div class=\"igx-pivot-data-selector__header-extra\">\n <igx-icon family=\"default\" [name]=\"panel.icon\"></igx-icon>\n <igx-chip>{{\n this.grid ? this.grid[panel.dataKey].length : 0\n }}</igx-chip>\n </div>\n </igx-expansion-panel-title>\n </igx-expansion-panel-header>\n <igx-expansion-panel-body\n igxDrop\n (enter)=\"onPanelEntry($event, panel.name)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n >\n @if (this.grid && this.grid[panel.dataKey].length > 0) {\n <igx-list>\n @for (\n item of this.grid[panel.dataKey];\n track item.memberName || item.member\n ) {\n <igx-list-item\n igxDrop\n [igxDrag]=\"{\n gridID: grid.id,\n selectorChannels: panel.dragChannels,\n }\"\n [ghostTemplate]=\"itemGhost\"\n (ghostCreate)=\"ghostCreated($event, item[panel.itemKey])\"\n (over)=\"onItemDragOver($event)\"\n (leave)=\"onItemDragLeave($event)\"\n (dragMove)=\"onItemDragMove($event)\"\n (dragEnd)=\"onItemDragEnd($event)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n [id]=\"item[panel.itemKey]\"\n >\n <div class=\"igx-pivot-data-selector__item\">\n <div\n class=\"igx-pivot-data-selector__item-start\"\n (click)=\"onItemSort($event, item, panel.type!)\"\n [class.igx-pivot-data-selector__action-sort]=\"\n panel.sortable\n \"\n >\n <div class=\"igx-pivot-data-selector__item-text\">\n @if (panel.type === null) {\n <span>{{ item.aggregate.key }}</span>\n }\n @if (panel.type === null) {\n <span>(</span>\n }\n <span>{{\n item[panel.displayKey!] || item[panel.itemKey]\n }}</span>\n @if (panel.type === null) {\n <span>)</span>\n }\n </div>\n @if (panel.sortable && item.sortDirection) {\n <igx-icon\n family=\"default\"\n [name]=\"\n item.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\n \"\n class=\"igx-pivot-data-selector__action-sort\"\n >\n </igx-icon>\n }\n </div>\n <div class=\"igx-pivot-data-selector__item-end\">\n @if (panel.type !== null) {\n <igx-icon\n family=\"default\"\n name=\"filter_list\"\n class=\"igx-pivot-data-selector__action-filter\"\n (pointerdown)=\"onFilteringIconPointerDown($event)\"\n (click)=\"onFilteringIconClick($event, item)\"\n >\n </igx-icon>\n }\n @if (panel.type === null) {\n <igx-icon\n family=\"default\"\n name=\"functions\"\n class=\"igx-pivot-data-selector__action-summary\"\n (click)=\"onSummaryClick($event, item, dropdown)\"\n [igxDropDownItemNavigation]=\"dropdown\"\n >\n </igx-icon>\n }\n @if (panel.dragChannels.length > 0) {\n <igx-icon\n family=\"default\"\n name=\"drag_indicator\"\n igxDragHandle\n class=\"igx-pivot-data-selector__action-move\"\n >\n </igx-icon>\n }\n </div>\n </div>\n </igx-list-item>\n }\n </igx-list>\n }\n @if (this.grid && this.grid[panel.dataKey].length === 0) {\n <div class=\"igx-pivot-data-selector__empty\">\n {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n </div>\n }\n </igx-expansion-panel-body>\n </igx-expansion-panel>\n }\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n @for (item of aggregateList; track item.key) {\n <igx-drop-down-item [selected]=\"isSelected(item)\" [value]=\"item\">\n {{ item.label }}\n </igx-drop-down-item>\n }\n</igx-drop-down>\n\n<ng-template #itemGhost>\n <div\n class=\"igx-pivot-data-selector__item-ghost\"\n [style.width.px]=\"ghostWidth\"\n [class.igx-pivot-data-selector__item-ghost--no-drop]=\"!dropAllowed\"\n >\n <div class=\"igx-pivot-data-selector__item-ghost-text\">\n <igx-icon family=\"default\" name=\"import_export\"></igx-icon>\n <span>{{ ghostText }}</span>\n </div>\n <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-pivot-data-selector__action-summary,.igx-pivot-data-selector__action-filter,.igx-pivot-data-selector__action-sort{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.igx-pivot-data-selector{display:flex;flex-direction:column;max-width:17.5rem;background:var(--background);z-index:0}.igx-pivot-data-selector igx-input-group input{transform:none}.igx-pivot-data-selector igx-input-group [igxPrefix]{box-sizing:content-box}.igx-pivot-data-selector igx-input-group .igx-input-group__bundle-main{padding-top:0!important}.igx-pivot-data-selector>igx-list igx-display-container{padding:.25rem}.igx-pivot-data-selector>igx-list igx-list-item{display:flex;min-height:1.75rem}.igx-pivot-data-selector .igx-expansion-panel__body{position:relative;height:8rem;font-size:.875rem;padding:.25rem;overflow-y:auto}.igx-pivot-data-selector .igx-expansion-panel__body igx-list{height:auto}.igx-pivot-data-selector .igx-expansion-panel__header-icon--start{margin-inline-end:.5rem}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title{display:flex}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title>h6{font-size:.75rem;margin-block:0}.igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--header-color);padding:.25rem}.dragOver .igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--ig-gray-300);box-shadow:inset 0 0 0 .0625rem var(--ig-gray-400)}.igx-pivot-data-selector igx-icon{--size: var(--ig-icon-size, 1.125rem)}.igx-pivot-data-selector__header,.igx-pivot-data-selector__header-extra{display:flex;align-items:center}.igx-pivot-data-selector__header-extra igx-icon{padding:0 .5rem;box-sizing:content-box!important}.igx-pivot-data-selector__header-extra .igx-chip__item{height:max(var(--is-large, 1)*max(1.375rem,-1 * 1.375rem),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem),var(--is-small, 1)*max(1.125rem,-1 * 1.125rem))}.igx-pivot-data-selector__header-extra .igx-chip__content{padding:0 .125rem}.igx-pivot-data-selector__filter{display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.igx-pivot-data-selector__filter igx-list{display:flex;flex-direction:column;flex-shrink:0;padding:.5rem .25rem;min-height:11.625rem;max-height:13rem;overflow-y:auto}.igx-pivot-data-selector__filter igx-list-item{display:flex}.igx-pivot-data-selector__filter igx-checkbox+span{margin-inline-start:.5rem;line-height:1.75rem}.igx-pivot-data-selector__item{display:flex;align-items:center;justify-content:space-between;min-height:2rem;width:100%}.igx-drag--push .igx-pivot-data-selector__item{padding-top:2rem}.igx-pivot-data-selector__item-ghost{--ig-icon-size: 1.125rem;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background:var(--ig-surface-500);min-height:2rem;height:auto;padding:0 .125rem 0 .25rem;cursor:grabbing;box-shadow:elevation(24);border:.0625rem solid var(--ig-gray-100);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .125rem),.125rem);z-index:10}.igx-pivot-data-selector__item-ghost--no-drop{cursor:no-drop}.igx-pivot-data-selector__item-ghost-text{display:flex;align-items:center}.igx-pivot-data-selector__item-ghost-text igx-icon{margin-inline-end:.5rem}.igx-pivot-data-selector__item-start{display:flex;justify-content:space-between;align-items:center;flex:0 1 100%;margin-inline-end:.5rem;overflow:hidden}.igx-pivot-data-selector__item-end{display:flex}.igx-pivot-data-selector__item-end igx-icon+igx-icon{margin-inline-start:.5rem}.igx-pivot-data-selector__item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:calc(100% - .625rem);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-pivot-data-selector__action-move{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:grab}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-pivot-data-selector__filter igx-input-group{flex-shrink:0;padding:.25rem}}}@layer ig.material{@container style(--ig-theme: material){.igx-pivot-data-selector .igx-checkbox__composite-wrapper{padding:0}.igx-pivot-data-selector igx-input-group [igxPrefix]{padding-inline-end:1rem!important}}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role", "selected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxAccordionComponent, selector: "igx-accordion", inputs: ["id", "animationSettings", "singleBranchExpand"], outputs: ["panelExpanding", "panelExpanded", "panelCollapsing", "panelCollapsed"] }, { kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelHeaderComponent, selector: "igx-expansion-panel-header", inputs: ["lv", "role", "iconPosition", "disabled"], outputs: ["interaction"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxExpansionPanelTitleDirective, selector: "igx-expansion-panel-title" }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "pipe", type: IgxFilterPivotItemsPipe, name: "filterPivotItems" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5243
5238
|
}
|
|
5244
5239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotDataSelectorComponent, decorators: [{
|
|
5245
5240
|
type: Component,
|
|
5246
|
-
args: [{ selector: "igx-pivot-data-selector", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe], template: "<div class=\"igx-pivot-data-selector__filter\">\n <igx-input-group type=\"box\">\n <igx-icon family=\"default\" name=\"search\" igxPrefix></igx-icon>\n <input\n #input\n igxInput\n tabindex=\"0\"\n placeholder=\"Search\"\n autocomplete=\"off\"\n />\n </igx-input-group>\n <igx-list>\n @for (\n item of dims\n | filterPivotItems\n : input.value\n : pipeRetrigger;\n track item.memberName\n ) {\n <igx-list-item [id]=\"item.memberName\">\n <igx-checkbox\n [aria-labelledby]=\"item.memberName\"\n [disableRipple]=\"true\"\n [checked]=\"item.enabled\"\n (click)=\"toggleItem(item)\"\n ></igx-checkbox>\n <span>{{ item.displayName || item.memberName }}</span>\n </igx-list-item>\n }\n @for (\n item of values\n | filterPivotItems\n : input.value\n : pipeRetrigger;\n track item\n ) {\n <igx-list-item [id]=\"item.member\">\n <igx-checkbox\n [aria-labelledby]=\"item.member\"\n [disableRipple]=\"true\"\n [checked]=\"item.enabled\"\n (click)=\"toggleItem(item)\"\n ></igx-checkbox>\n <span>{{ item.displayName || item.member }}</span>\n </igx-list-item>\n }\n </igx-list>\n</div>\n\n<igx-accordion>\n @for (panel of _panels; track panel) {\n <igx-expansion-panel\n [animationSettings]=\"animationSettings\"\n [collapsed]=\"getPanelCollapsed(panel.type!)\"\n (collapsedChange)=\"onCollapseChange($event, panel.type!)\"\n >\n <igx-expansion-panel-header\n iconPosition=\"left\"\n [disabled]=\"false\"\n igxDrop\n (enter)=\"onPanelEntry($event, panel.name)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n >\n <igx-expansion-panel-title class=\"igx-pivot-data-selector__header\">\n <h6 class=\"igx-pivot-data-selector__header-title\">\n {{ $any(grid?.resourceStrings)[panel.i18n] }}\n </h6>\n <div class=\"igx-pivot-data-selector__header-extra\">\n <igx-icon family=\"default\" [name]=\"panel.icon\"></igx-icon>\n <igx-chip>{{\n this.grid ? this.grid[panel.dataKey].length : 0\n }}</igx-chip>\n </div>\n </igx-expansion-panel-title>\n </igx-expansion-panel-header>\n <igx-expansion-panel-body\n igxDrop\n (enter)=\"onPanelEntry($event, panel.name)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n >\n @if (this.grid && this.grid[panel.dataKey].length > 0) {\n <igx-list>\n @for (\n item of this.grid[panel.dataKey];\n track item.memberName || item.member\n ) {\n <igx-list-item\n igxDrop\n [igxDrag]=\"{\n gridID: grid.id,\n selectorChannels: panel.dragChannels,\n }\"\n [ghostTemplate]=\"itemGhost\"\n (ghostCreate)=\"ghostCreated($event, item[panel.itemKey])\"\n (over)=\"onItemDragOver($event)\"\n (leave)=\"onItemDragLeave($event)\"\n (dragMove)=\"onItemDragMove($event)\"\n (dragEnd)=\"onItemDragEnd($event)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n [id]=\"item[panel.itemKey]\"\n >\n <div class=\"igx-pivot-data-selector__item\">\n <div\n class=\"igx-pivot-data-selector__item-start\"\n (click)=\"onItemSort($event, item, panel.type!)\"\n [class.igx-pivot-data-selector__action-sort]=\"\n panel.sortable\n \"\n >\n <div class=\"igx-pivot-data-selector__item-text\">\n @if (panel.type === null) {\n <span>{{ item.aggregate.key }}</span>\n }\n @if (panel.type === null) {\n <span>(</span>\n }\n <span>{{\n item[panel.displayKey!] || item[panel.itemKey]\n }}</span>\n @if (panel.type === null) {\n <span>)</span>\n }\n </div>\n @if (panel.sortable && item.sortDirection) {\n <igx-icon\n family=\"default\"\n [name]=\"\n item.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\n \"\n class=\"igx-pivot-data-selector__action-sort\"\n >\n </igx-icon>\n }\n </div>\n <div class=\"igx-pivot-data-selector__item-end\">\n @if (panel.type !== null) {\n <igx-icon\n family=\"default\"\n name=\"filter_list\"\n class=\"igx-pivot-data-selector__action-filter\"\n (pointerdown)=\"onFilteringIconPointerDown($event)\"\n (click)=\"onFilteringIconClick($event, item)\"\n >\n </igx-icon>\n }\n @if (panel.type === null) {\n <igx-icon\n family=\"default\"\n name=\"functions\"\n class=\"igx-pivot-data-selector__action-summary\"\n (click)=\"onSummaryClick($event, item, dropdown)\"\n [igxDropDownItemNavigation]=\"dropdown\"\n >\n </igx-icon>\n }\n @if (panel.dragChannels.length > 0) {\n <igx-icon\n family=\"default\"\n name=\"drag_indicator\"\n igxDragHandle\n class=\"igx-pivot-data-selector__action-move\"\n >\n </igx-icon>\n }\n </div>\n </div>\n </igx-list-item>\n }\n </igx-list>\n }\n @if (this.grid && this.grid[panel.dataKey].length === 0) {\n <div class=\"igx-pivot-data-selector__empty\">\n {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n </div>\n }\n </igx-expansion-panel-body>\n </igx-expansion-panel>\n }\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n @for (item of aggregateList; track item) {\n <igx-drop-down-item [selected]=\"isSelected(item)\" [value]=\"item\">\n {{ item.label }}\n </igx-drop-down-item>\n }\n</igx-drop-down>\n\n<ng-template #itemGhost>\n <div\n class=\"igx-pivot-data-selector__item-ghost\"\n [style.width.px]=\"ghostWidth\"\n [class.igx-pivot-data-selector__item-ghost--no-drop]=\"!dropAllowed\"\n >\n <div class=\"igx-pivot-data-selector__item-ghost-text\">\n <igx-icon family=\"default\" name=\"import_export\"></igx-icon>\n <span>{{ ghostText }}</span>\n </div>\n <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-pivot-data-selector__action-summary,.igx-pivot-data-selector__action-filter,.igx-pivot-data-selector__action-sort{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.igx-pivot-data-selector{display:flex;flex-direction:column;max-width:17.5rem;background:var(--background);z-index:0}.igx-pivot-data-selector igx-input-group input{transform:none}.igx-pivot-data-selector igx-input-group [igxPrefix]{box-sizing:content-box}.igx-pivot-data-selector igx-input-group .igx-input-group__bundle-main{padding-top:0!important}.igx-pivot-data-selector>igx-list igx-display-container{padding:.25rem}.igx-pivot-data-selector>igx-list igx-list-item{display:flex;min-height:1.75rem}.igx-pivot-data-selector .igx-expansion-panel__body{position:relative;height:8rem;font-size:.875rem;padding:.25rem;overflow-y:auto}.igx-pivot-data-selector .igx-expansion-panel__body igx-list{height:auto}.igx-pivot-data-selector .igx-expansion-panel__header-icon--start{margin-inline-end:.5rem}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title{display:flex}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title>h6{font-size:.75rem;margin-block:0}.igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--header-color);padding:.25rem}.dragOver .igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--ig-gray-300);box-shadow:inset 0 0 0 .0625rem var(--ig-gray-400)}.igx-pivot-data-selector igx-icon{--size: var(--ig-icon-size, 1.125rem)}.igx-pivot-data-selector__header,.igx-pivot-data-selector__header-extra{display:flex;align-items:center}.igx-pivot-data-selector__header-extra igx-icon{padding:0 .5rem;box-sizing:content-box!important}.igx-pivot-data-selector__header-extra .igx-chip__item{height:max(var(--is-large, 1)*max(1.375rem,-1 * 1.375rem),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem),var(--is-small, 1)*max(1.125rem,-1 * 1.125rem))}.igx-pivot-data-selector__header-extra .igx-chip__content{padding:0 .125rem}.igx-pivot-data-selector__filter{display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.igx-pivot-data-selector__filter igx-list{display:flex;flex-direction:column;flex-shrink:0;padding:.5rem .25rem;min-height:11.625rem;max-height:13rem;overflow-y:auto}.igx-pivot-data-selector__filter igx-list-item{display:flex}.igx-pivot-data-selector__filter igx-checkbox+span{margin-inline-start:.5rem;line-height:1.75rem}.igx-pivot-data-selector__item{display:flex;align-items:center;justify-content:space-between;min-height:2rem;width:100%}.igx-drag--push .igx-pivot-data-selector__item{padding-top:2rem}.igx-pivot-data-selector__item-ghost{--ig-icon-size: 1.125rem;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background:var(--ig-surface-500);min-height:2rem;height:auto;padding:0 .125rem 0 .25rem;cursor:grabbing;box-shadow:elevation(24);border:.0625rem solid var(--ig-gray-100);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .125rem),.125rem);z-index:10}.igx-pivot-data-selector__item-ghost--no-drop{cursor:no-drop}.igx-pivot-data-selector__item-ghost-text{display:flex;align-items:center}.igx-pivot-data-selector__item-ghost-text igx-icon{margin-inline-end:.5rem}.igx-pivot-data-selector__item-start{display:flex;justify-content:space-between;align-items:center;flex:0 1 100%;margin-inline-end:.5rem;overflow:hidden}.igx-pivot-data-selector__item-end{display:flex}.igx-pivot-data-selector__item-end igx-icon+igx-icon{margin-inline-start:.5rem}.igx-pivot-data-selector__item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:calc(100% - .625rem);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-pivot-data-selector__action-move{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:grab}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-pivot-data-selector__filter igx-input-group{flex-shrink:0;padding:.25rem}}}@layer ig.material{@container style(--ig-theme: material){.igx-pivot-data-selector .igx-checkbox__composite-wrapper{padding:0}.igx-pivot-data-selector igx-input-group [igxPrefix]{padding-inline-end:1rem!important}}}\n"] }]
|
|
5241
|
+
args: [{ selector: "igx-pivot-data-selector", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe], template: "<div class=\"igx-pivot-data-selector__filter\">\n <igx-input-group type=\"box\">\n <igx-icon family=\"default\" name=\"search\" igxPrefix></igx-icon>\n <input\n #input\n igxInput\n tabindex=\"0\"\n placeholder=\"Search\"\n autocomplete=\"off\"\n />\n </igx-input-group>\n <igx-list>\n @for (\n item of dims\n | filterPivotItems\n : input.value\n : pipeRetrigger;\n track item.memberName\n ) {\n <igx-list-item [id]=\"item.memberName\">\n <igx-checkbox\n [aria-labelledby]=\"item.memberName\"\n [disableRipple]=\"true\"\n [checked]=\"item.enabled\"\n (click)=\"toggleItem(item)\"\n ></igx-checkbox>\n <span>{{ item.displayName || item.memberName }}</span>\n </igx-list-item>\n }\n @for (\n item of values\n | filterPivotItems\n : input.value\n : pipeRetrigger;\n track item\n ) {\n <igx-list-item [id]=\"item.member\">\n <igx-checkbox\n [aria-labelledby]=\"item.member\"\n [disableRipple]=\"true\"\n [checked]=\"item.enabled\"\n (click)=\"toggleItem(item)\"\n ></igx-checkbox>\n <span>{{ item.displayName || item.member }}</span>\n </igx-list-item>\n }\n </igx-list>\n</div>\n\n<igx-accordion>\n @for (panel of _panels; track panel) {\n <igx-expansion-panel\n [animationSettings]=\"animationSettings\"\n [collapsed]=\"getPanelCollapsed(panel.type!)\"\n (collapsedChange)=\"onCollapseChange($event, panel.type!)\"\n >\n <igx-expansion-panel-header\n iconPosition=\"left\"\n [disabled]=\"false\"\n igxDrop\n (enter)=\"onPanelEntry($event, panel.name)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n >\n <igx-expansion-panel-title class=\"igx-pivot-data-selector__header\">\n <h6 class=\"igx-pivot-data-selector__header-title\">\n {{ $any(grid?.resourceStrings)[panel.i18n] }}\n </h6>\n <div class=\"igx-pivot-data-selector__header-extra\">\n <igx-icon family=\"default\" [name]=\"panel.icon\"></igx-icon>\n <igx-chip>{{\n this.grid ? this.grid[panel.dataKey].length : 0\n }}</igx-chip>\n </div>\n </igx-expansion-panel-title>\n </igx-expansion-panel-header>\n <igx-expansion-panel-body\n igxDrop\n (enter)=\"onPanelEntry($event, panel.name)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n >\n @if (this.grid && this.grid[panel.dataKey].length > 0) {\n <igx-list>\n @for (\n item of this.grid[panel.dataKey];\n track item.memberName || item.member\n ) {\n <igx-list-item\n igxDrop\n [igxDrag]=\"{\n gridID: grid.id,\n selectorChannels: panel.dragChannels,\n }\"\n [ghostTemplate]=\"itemGhost\"\n (ghostCreate)=\"ghostCreated($event, item[panel.itemKey])\"\n (over)=\"onItemDragOver($event)\"\n (leave)=\"onItemDragLeave($event)\"\n (dragMove)=\"onItemDragMove($event)\"\n (dragEnd)=\"onItemDragEnd($event)\"\n (dropped)=\"onItemDropped($event, panel.type!)\"\n [id]=\"item[panel.itemKey]\"\n >\n <div class=\"igx-pivot-data-selector__item\">\n <div\n class=\"igx-pivot-data-selector__item-start\"\n (click)=\"onItemSort($event, item, panel.type!)\"\n [class.igx-pivot-data-selector__action-sort]=\"\n panel.sortable\n \"\n >\n <div class=\"igx-pivot-data-selector__item-text\">\n @if (panel.type === null) {\n <span>{{ item.aggregate.key }}</span>\n }\n @if (panel.type === null) {\n <span>(</span>\n }\n <span>{{\n item[panel.displayKey!] || item[panel.itemKey]\n }}</span>\n @if (panel.type === null) {\n <span>)</span>\n }\n </div>\n @if (panel.sortable && item.sortDirection) {\n <igx-icon\n family=\"default\"\n [name]=\"\n item.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\n \"\n class=\"igx-pivot-data-selector__action-sort\"\n >\n </igx-icon>\n }\n </div>\n <div class=\"igx-pivot-data-selector__item-end\">\n @if (panel.type !== null) {\n <igx-icon\n family=\"default\"\n name=\"filter_list\"\n class=\"igx-pivot-data-selector__action-filter\"\n (pointerdown)=\"onFilteringIconPointerDown($event)\"\n (click)=\"onFilteringIconClick($event, item)\"\n >\n </igx-icon>\n }\n @if (panel.type === null) {\n <igx-icon\n family=\"default\"\n name=\"functions\"\n class=\"igx-pivot-data-selector__action-summary\"\n (click)=\"onSummaryClick($event, item, dropdown)\"\n [igxDropDownItemNavigation]=\"dropdown\"\n >\n </igx-icon>\n }\n @if (panel.dragChannels.length > 0) {\n <igx-icon\n family=\"default\"\n name=\"drag_indicator\"\n igxDragHandle\n class=\"igx-pivot-data-selector__action-move\"\n >\n </igx-icon>\n }\n </div>\n </div>\n </igx-list-item>\n }\n </igx-list>\n }\n @if (this.grid && this.grid[panel.dataKey].length === 0) {\n <div class=\"igx-pivot-data-selector__empty\">\n {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n </div>\n }\n </igx-expansion-panel-body>\n </igx-expansion-panel>\n }\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n @for (item of aggregateList; track item.key) {\n <igx-drop-down-item [selected]=\"isSelected(item)\" [value]=\"item\">\n {{ item.label }}\n </igx-drop-down-item>\n }\n</igx-drop-down>\n\n<ng-template #itemGhost>\n <div\n class=\"igx-pivot-data-selector__item-ghost\"\n [style.width.px]=\"ghostWidth\"\n [class.igx-pivot-data-selector__item-ghost--no-drop]=\"!dropAllowed\"\n >\n <div class=\"igx-pivot-data-selector__item-ghost-text\">\n <igx-icon family=\"default\" name=\"import_export\"></igx-icon>\n <span>{{ ghostText }}</span>\n </div>\n <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-pivot-data-selector__action-summary,.igx-pivot-data-selector__action-filter,.igx-pivot-data-selector__action-sort{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.igx-pivot-data-selector{display:flex;flex-direction:column;max-width:17.5rem;background:var(--background);z-index:0}.igx-pivot-data-selector igx-input-group input{transform:none}.igx-pivot-data-selector igx-input-group [igxPrefix]{box-sizing:content-box}.igx-pivot-data-selector igx-input-group .igx-input-group__bundle-main{padding-top:0!important}.igx-pivot-data-selector>igx-list igx-display-container{padding:.25rem}.igx-pivot-data-selector>igx-list igx-list-item{display:flex;min-height:1.75rem}.igx-pivot-data-selector .igx-expansion-panel__body{position:relative;height:8rem;font-size:.875rem;padding:.25rem;overflow-y:auto}.igx-pivot-data-selector .igx-expansion-panel__body igx-list{height:auto}.igx-pivot-data-selector .igx-expansion-panel__header-icon--start{margin-inline-end:.5rem}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title{display:flex}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title>h6{font-size:.75rem;margin-block:0}.igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--header-color);padding:.25rem}.dragOver .igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--ig-gray-300);box-shadow:inset 0 0 0 .0625rem var(--ig-gray-400)}.igx-pivot-data-selector igx-icon{--size: var(--ig-icon-size, 1.125rem)}.igx-pivot-data-selector__header,.igx-pivot-data-selector__header-extra{display:flex;align-items:center}.igx-pivot-data-selector__header-extra igx-icon{padding:0 .5rem;box-sizing:content-box!important}.igx-pivot-data-selector__header-extra .igx-chip__item{height:max(var(--is-large, 1)*max(1.375rem,-1 * 1.375rem),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem),var(--is-small, 1)*max(1.125rem,-1 * 1.125rem))}.igx-pivot-data-selector__header-extra .igx-chip__content{padding:0 .125rem}.igx-pivot-data-selector__filter{display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.igx-pivot-data-selector__filter igx-list{display:flex;flex-direction:column;flex-shrink:0;padding:.5rem .25rem;min-height:11.625rem;max-height:13rem;overflow-y:auto}.igx-pivot-data-selector__filter igx-list-item{display:flex}.igx-pivot-data-selector__filter igx-checkbox+span{margin-inline-start:.5rem;line-height:1.75rem}.igx-pivot-data-selector__item{display:flex;align-items:center;justify-content:space-between;min-height:2rem;width:100%}.igx-drag--push .igx-pivot-data-selector__item{padding-top:2rem}.igx-pivot-data-selector__item-ghost{--ig-icon-size: 1.125rem;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background:var(--ig-surface-500);min-height:2rem;height:auto;padding:0 .125rem 0 .25rem;cursor:grabbing;box-shadow:elevation(24);border:.0625rem solid var(--ig-gray-100);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .125rem),.125rem);z-index:10}.igx-pivot-data-selector__item-ghost--no-drop{cursor:no-drop}.igx-pivot-data-selector__item-ghost-text{display:flex;align-items:center}.igx-pivot-data-selector__item-ghost-text igx-icon{margin-inline-end:.5rem}.igx-pivot-data-selector__item-start{display:flex;justify-content:space-between;align-items:center;flex:0 1 100%;margin-inline-end:.5rem;overflow:hidden}.igx-pivot-data-selector__item-end{display:flex}.igx-pivot-data-selector__item-end igx-icon+igx-icon{margin-inline-start:.5rem}.igx-pivot-data-selector__item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:calc(100% - .625rem);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-pivot-data-selector__action-move{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:grab}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-pivot-data-selector__filter igx-input-group{flex-shrink:0;padding:.25rem}}}@layer ig.material{@container style(--ig-theme: material){.igx-pivot-data-selector .igx-checkbox__composite-wrapper{padding:0}.igx-pivot-data-selector igx-input-group [igxPrefix]{padding-inline-end:1rem!important}}}\n"] }]
|
|
5247
5242
|
}], propDecorators: { columnsExpanded: [{
|
|
5248
5243
|
type: Input,
|
|
5249
5244
|
args: [{ transform: booleanAttribute }]
|
|
@@ -5279,6 +5274,7 @@ const IGX_PIVOT_GRID_DIRECTIVES = [
|
|
|
5279
5274
|
IgxPivotGridComponent,
|
|
5280
5275
|
IgxPivotDataSelectorComponent,
|
|
5281
5276
|
IgxPivotValueChipTemplateDirective,
|
|
5277
|
+
IgxPivotRowDimensionHeaderTemplateDirective,
|
|
5282
5278
|
// IGX_GRID_COMMON_DIRECTIVES:
|
|
5283
5279
|
IgxRowDirective,
|
|
5284
5280
|
IgxGridFooterComponent,
|
|
@@ -5358,6 +5354,7 @@ class IgxPivotGridModule {
|
|
|
5358
5354
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotGridModule, imports: [IgxPivotGridComponent,
|
|
5359
5355
|
IgxPivotDataSelectorComponent,
|
|
5360
5356
|
IgxPivotValueChipTemplateDirective,
|
|
5357
|
+
IgxPivotRowDimensionHeaderTemplateDirective,
|
|
5361
5358
|
// IGX_GRID_COMMON_DIRECTIVES:
|
|
5362
5359
|
IgxRowDirective,
|
|
5363
5360
|
IgxGridFooterComponent,
|
|
@@ -5429,6 +5426,7 @@ class IgxPivotGridModule {
|
|
|
5429
5426
|
IgxExcelStyleLoadingValuesTemplateDirective], exports: [IgxPivotGridComponent,
|
|
5430
5427
|
IgxPivotDataSelectorComponent,
|
|
5431
5428
|
IgxPivotValueChipTemplateDirective,
|
|
5429
|
+
IgxPivotRowDimensionHeaderTemplateDirective,
|
|
5432
5430
|
// IGX_GRID_COMMON_DIRECTIVES:
|
|
5433
5431
|
IgxRowDirective,
|
|
5434
5432
|
IgxGridFooterComponent,
|