igniteui-angular 15.0.0 → 15.0.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/esm2020/lib/core/i18n/grid-resources.mjs +3 -2
- package/esm2020/lib/core/utils.mjs +3 -2
- package/esm2020/lib/directives/for-of/for_of.directive.mjs +4 -2
- package/esm2020/lib/grids/grid/grid.component.mjs +6 -1
- package/esm2020/lib/grids/grid-base.directive.mjs +18 -1
- package/esm2020/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.mjs +3 -2
- package/esm2020/lib/grids/hierarchical-grid/hierarchical-grid.component.mjs +3 -3
- package/esm2020/lib/grids/pivot-grid/pivot-grid-aggregate.mjs +1 -1
- package/esm2020/lib/grids/pivot-grid/pivot-grid.interface.mjs +1 -1
- package/esm2020/lib/grids/pivot-grid/pivot-util.mjs +21 -2
- package/esm2020/lib/simple-combo/simple-combo.component.mjs +3 -3
- package/fesm2015/igniteui-angular.mjs +55 -9
- package/fesm2015/igniteui-angular.mjs.map +1 -1
- package/fesm2020/igniteui-angular.mjs +54 -9
- package/fesm2020/igniteui-angular.mjs.map +1 -1
- package/lib/core/i18n/grid-resources.d.ts +1 -0
- package/lib/grids/grid-base.directive.d.ts +9 -0
- package/lib/grids/pivot-grid/pivot-grid-aggregate.d.ts +1 -5
- package/lib/grids/pivot-grid/pivot-grid.interface.d.ts +7 -1
- package/lib/grids/pivot-grid/pivot-util.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1668,7 +1668,8 @@ class PlatformUtil {
|
|
|
1668
1668
|
style.flexBasis = '';
|
|
1669
1669
|
}
|
|
1670
1670
|
range.selectNodeContents(node);
|
|
1671
|
-
const
|
|
1671
|
+
const scale = node.getBoundingClientRect().width / node.offsetWidth;
|
|
1672
|
+
const width = range.getBoundingClientRect().width / scale;
|
|
1672
1673
|
if (!this.isFirefox) {
|
|
1673
1674
|
// we need that hack - otherwise content won't be measured correctly in IE/Edge
|
|
1674
1675
|
node.style.overflow = overflow;
|
|
@@ -11114,6 +11115,8 @@ class IgxForOfDirective {
|
|
|
11114
11115
|
}
|
|
11115
11116
|
}
|
|
11116
11117
|
updateSizes() {
|
|
11118
|
+
if (!this.scrollComponent.nativeElement.isConnected)
|
|
11119
|
+
return;
|
|
11117
11120
|
const scrollable = this.isScrollable();
|
|
11118
11121
|
this.recalcUpdateSizes();
|
|
11119
11122
|
this._applyChanges();
|
|
@@ -11479,7 +11482,7 @@ class IgxForOfDirective {
|
|
|
11479
11482
|
this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
|
|
11480
11483
|
const scrollable = this.isScrollable();
|
|
11481
11484
|
if (this.igxForScrollOrientation === 'horizontal') {
|
|
11482
|
-
const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
|
|
11485
|
+
const totalWidth = parseInt(this.igxForContainerSize, 10) > 0 ? this.initSizesCache(this.igxForOf) : 0;
|
|
11483
11486
|
this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
|
|
11484
11487
|
this.scrollComponent.size = totalWidth;
|
|
11485
11488
|
if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
|
|
@@ -12947,7 +12950,8 @@ const GridResourceStringsEN = {
|
|
|
12947
12950
|
igx_grid_min_length_validation_error: 'Entry should be at least {0} character(s) long',
|
|
12948
12951
|
igx_grid_max_length_validation_error: 'Entry should be no more than {0} character(s) long',
|
|
12949
12952
|
igx_grid_email_validation_error: 'A valid email address should be entered',
|
|
12950
|
-
igx_grid_pattern_validation_error: 'Entry does not match the required pattern'
|
|
12953
|
+
igx_grid_pattern_validation_error: 'Entry does not match the required pattern',
|
|
12954
|
+
igx_grid_pivot_no_aggregator: 'No valid aggregator found for {0}. Please set either a valid aggregatorName or aggregator.'
|
|
12951
12955
|
};
|
|
12952
12956
|
|
|
12953
12957
|
const TimePickerResourceStringsEN = {
|
|
@@ -23493,10 +23497,28 @@ class PivotUtil {
|
|
|
23493
23497
|
static aggregate(records, values) {
|
|
23494
23498
|
const result = {};
|
|
23495
23499
|
for (const pivotValue of values) {
|
|
23496
|
-
|
|
23500
|
+
const aggregator = PivotUtil.getAggregatorForType(pivotValue.aggregate, pivotValue.dataType);
|
|
23501
|
+
if (!aggregator) {
|
|
23502
|
+
throw CurrentResourceStrings.GridResStrings.igx_grid_pivot_no_aggregator.replace("{0}", pivotValue.member);
|
|
23503
|
+
}
|
|
23504
|
+
result[pivotValue.member] = aggregator(records.map(r => r[pivotValue.member]), records);
|
|
23497
23505
|
}
|
|
23498
23506
|
return result;
|
|
23499
23507
|
}
|
|
23508
|
+
static getAggregatorForType(aggregate, dataType) {
|
|
23509
|
+
let aggregator = aggregate.aggregator;
|
|
23510
|
+
if (aggregate.aggregatorName) {
|
|
23511
|
+
let aggregators = IgxPivotNumericAggregate.aggregators();
|
|
23512
|
+
if (!dataType || dataType === 'date' || dataType === 'dateTime') {
|
|
23513
|
+
aggregators = aggregators.concat(IgxPivotDateAggregate.aggregators());
|
|
23514
|
+
}
|
|
23515
|
+
else if (dataType === 'time') {
|
|
23516
|
+
aggregators = aggregators.concat(IgxPivotTimeAggregate.aggregators());
|
|
23517
|
+
}
|
|
23518
|
+
aggregator = aggregators.find(x => x.key === aggregate.aggregatorName)?.aggregator;
|
|
23519
|
+
}
|
|
23520
|
+
return aggregator;
|
|
23521
|
+
}
|
|
23500
23522
|
static processHierarchy(hierarchies, pivotKeys, level = 0, rootData = false) {
|
|
23501
23523
|
const flatData = [];
|
|
23502
23524
|
hierarchies.forEach((h, key) => {
|
|
@@ -38879,14 +38901,14 @@ IgxSimpleComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
38879
38901
|
IgxComboAPIService,
|
|
38880
38902
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38881
38903
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38882
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n\n <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClear($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\">\n clear\n </igx-icon>\n </igx-suffix>\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon
|
|
38904
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n\n <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClear($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\">\n clear\n </igx-icon>\n </igx-suffix>\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\">\n {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n </igx-icon>\n </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n [attr.aria-activedescendant]=\"this.activeDescendant\"\n (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n | comboGrouping:groupKey:valueKey:groupSortingDirection;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] });
|
|
38883
38905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
|
|
38884
38906
|
type: Component,
|
|
38885
38907
|
args: [{ selector: 'igx-simple-combo', providers: [
|
|
38886
38908
|
IgxComboAPIService,
|
|
38887
38909
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38888
38910
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38889
|
-
], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n\n <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClear($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\">\n clear\n </igx-icon>\n </igx-suffix>\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon
|
|
38911
|
+
], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n\n <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClear($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\">\n clear\n </igx-icon>\n </igx-suffix>\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\">\n {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n </igx-icon>\n </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n [attr.aria-activedescendant]=\"this.activeDescendant\"\n (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n | comboGrouping:groupKey:valueKey:groupSortingDirection;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n" }]
|
|
38890
38912
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
|
|
38891
38913
|
type: Optional
|
|
38892
38914
|
}, {
|
|
@@ -64580,6 +64602,23 @@ class IgxGridBaseDirective extends DisplayDensityBase {
|
|
|
64580
64602
|
return this.visibleColumns.find((col) => !col.columnGroup && !col.columnLayout &&
|
|
64581
64603
|
col.visibleIndex === index);
|
|
64582
64604
|
}
|
|
64605
|
+
/**
|
|
64606
|
+
* Recalculates all widths of columns that have size set to `auto`.
|
|
64607
|
+
*
|
|
64608
|
+
* @example
|
|
64609
|
+
* ```typescript
|
|
64610
|
+
* this.grid1.recalculateAutoSizes();
|
|
64611
|
+
* ```
|
|
64612
|
+
*/
|
|
64613
|
+
recalculateAutoSizes() {
|
|
64614
|
+
// reset auto-size and calculate it again.
|
|
64615
|
+
this._columns.forEach(x => x.autoSize = undefined);
|
|
64616
|
+
this.resetCaches();
|
|
64617
|
+
this.zone.onStable.pipe(first$1()).subscribe(() => {
|
|
64618
|
+
this.cdr.detectChanges();
|
|
64619
|
+
this.autoSizeColumnsInView();
|
|
64620
|
+
});
|
|
64621
|
+
}
|
|
64583
64622
|
/**
|
|
64584
64623
|
* Returns an array of visible `IgxColumnComponent`s.
|
|
64585
64624
|
*
|
|
@@ -70674,6 +70713,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
70674
70713
|
return this._data;
|
|
70675
70714
|
}
|
|
70676
70715
|
set data(value) {
|
|
70716
|
+
const dataLoaded = (!this._data || this._data.length === 0) && value && value.length > 0;
|
|
70677
70717
|
this._data = value || [];
|
|
70678
70718
|
this.summaryService.clearSummaryCache();
|
|
70679
70719
|
if (this.shouldGenerate) {
|
|
@@ -70683,6 +70723,10 @@ class IgxGridComponent extends IgxGridBaseDirective {
|
|
|
70683
70723
|
if (this.isPercentHeight) {
|
|
70684
70724
|
this.notifyChanges(true);
|
|
70685
70725
|
}
|
|
70726
|
+
// check if any columns have width auto and if so recalculate their auto-size on data loaded.
|
|
70727
|
+
if (dataLoaded && this._columns.some(x => x._width === 'auto')) {
|
|
70728
|
+
this.recalculateAutoSizes();
|
|
70729
|
+
}
|
|
70686
70730
|
}
|
|
70687
70731
|
/**
|
|
70688
70732
|
* Gets/Sets an array of objects containing the filtered data.
|
|
@@ -80772,7 +80816,8 @@ class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
|
|
|
80772
80816
|
const gridTop = this._getMaxTop(this.grid);
|
|
80773
80817
|
const diffTop = rowElem.getBoundingClientRect().bottom -
|
|
80774
80818
|
rowElem.offsetHeight - gridTop;
|
|
80775
|
-
|
|
80819
|
+
// Adding Math.Round because Chrome has some inconsistencies when the page is zoomed
|
|
80820
|
+
const isInView = isNext ? Math.round(diffBottom) <= 0 : Math.round(diffTop) >= 0;
|
|
80776
80821
|
const calcOffset = isNext ? diffBottom : diffTop;
|
|
80777
80822
|
return { inView: isInView, offset: calcOffset };
|
|
80778
80823
|
}
|
|
@@ -82800,8 +82845,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
|
|
|
82800
82845
|
const nestedColumns = childLayouts.map((layout) => layout.columnList.toArray());
|
|
82801
82846
|
const colsArray = [].concat.apply([], nestedColumns);
|
|
82802
82847
|
const colLength = this.columnList.length;
|
|
82803
|
-
|
|
82804
|
-
|
|
82848
|
+
const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
|
|
82849
|
+
if (topCols.length > 0) {
|
|
82805
82850
|
this.updateColumns(topCols);
|
|
82806
82851
|
if (recalcColSizes && this.columns.length !== colLength) {
|
|
82807
82852
|
this.calculateGridSizes(false);
|