igniteui-angular 14.2.7 → 14.2.8
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/utils.mjs +3 -2
- package/esm2020/lib/directives/for-of/for_of.directive.mjs +4 -2
- package/esm2020/lib/directives/mask/mask-parsing.service.mjs +7 -3
- package/esm2020/lib/directives/mask/mask.directive.mjs +12 -10
- 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/simple-combo/simple-combo.component.mjs +3 -3
- package/fesm2015/igniteui-angular.mjs +29 -18
- package/fesm2015/igniteui-angular.mjs.map +1 -1
- package/fesm2020/igniteui-angular.mjs +28 -18
- package/fesm2020/igniteui-angular.mjs.map +1 -1
- package/lib/directives/mask/mask-parsing.service.d.ts +1 -1
- 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;
|
|
@@ -10714,6 +10715,8 @@ class IgxForOfDirective {
|
|
|
10714
10715
|
}
|
|
10715
10716
|
}
|
|
10716
10717
|
updateSizes() {
|
|
10718
|
+
if (!this.scrollComponent.nativeElement.isConnected)
|
|
10719
|
+
return;
|
|
10717
10720
|
const scrollable = this.isScrollable();
|
|
10718
10721
|
this.recalcUpdateSizes();
|
|
10719
10722
|
this._applyChanges();
|
|
@@ -11079,7 +11082,7 @@ class IgxForOfDirective {
|
|
|
11079
11082
|
this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
|
|
11080
11083
|
const scrollable = this.isScrollable();
|
|
11081
11084
|
if (this.igxForScrollOrientation === 'horizontal') {
|
|
11082
|
-
const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
|
|
11085
|
+
const totalWidth = parseInt(this.igxForContainerSize, 10) > 0 ? this.initSizesCache(this.igxForOf) : 0;
|
|
11083
11086
|
this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
|
|
11084
11087
|
this.scrollComponent.size = totalWidth;
|
|
11085
11088
|
if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
|
|
@@ -17487,7 +17490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
|
|
|
17487
17490
|
const MASK_FLAGS = ['C', '&', 'a', 'A', '?', 'L', '9', '0', '#'];
|
|
17488
17491
|
/** @hidden */
|
|
17489
17492
|
class MaskParsingService {
|
|
17490
|
-
applyMask(inputVal, maskOptions) {
|
|
17493
|
+
applyMask(inputVal, maskOptions, pos = 0) {
|
|
17491
17494
|
let outputVal = '';
|
|
17492
17495
|
let value = '';
|
|
17493
17496
|
const mask = maskOptions.format;
|
|
@@ -17518,7 +17521,6 @@ class MaskParsingService {
|
|
|
17518
17521
|
if (nonLiteralValues.length > nonLiteralIndices.length) {
|
|
17519
17522
|
nonLiteralValues.splice(nonLiteralIndices.length);
|
|
17520
17523
|
}
|
|
17521
|
-
let pos = 0;
|
|
17522
17524
|
for (const nonLiteralValue of nonLiteralValues) {
|
|
17523
17525
|
const char = nonLiteralValue;
|
|
17524
17526
|
outputVal = this.replaceCharAt(outputVal, nonLiteralIndices[pos++], char);
|
|
@@ -17565,6 +17567,11 @@ class MaskParsingService {
|
|
|
17565
17567
|
}
|
|
17566
17568
|
maskedValue = this.replaceCharAt(maskedValue, i, char);
|
|
17567
17569
|
}
|
|
17570
|
+
if (Math.abs(end - start) >= 1) {
|
|
17571
|
+
// set cursor to be max between last cursor pos and the calculated `end`
|
|
17572
|
+
// since on `delete` the cursor should move forward
|
|
17573
|
+
cursor = Math.max(cursor, end);
|
|
17574
|
+
}
|
|
17568
17575
|
return { value: maskedValue, end: cursor };
|
|
17569
17576
|
}
|
|
17570
17577
|
replaceCharAt(strValue, index, char) {
|
|
@@ -17814,14 +17821,16 @@ class IgxMaskDirective {
|
|
|
17814
17821
|
}
|
|
17815
17822
|
this.inputValue = isInputComplete ?
|
|
17816
17823
|
this.inputValue.substring(0, this.selectionEnd - numberOfMaskLiterals) + this.inputValue.substring(this.selectionEnd)
|
|
17817
|
-
: this._compositionValue
|
|
17818
|
-
this.
|
|
17819
|
-
|
|
17820
|
-
|
|
17821
|
-
|
|
17822
|
-
|
|
17823
|
-
|
|
17824
|
-
|
|
17824
|
+
: this._compositionValue?.substring(0, this._compositionStartIndex) || this.inputValue;
|
|
17825
|
+
if (this._compositionValue) {
|
|
17826
|
+
this._start = this.selectionStart;
|
|
17827
|
+
this._end = this.selectionEnd;
|
|
17828
|
+
this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
|
|
17829
|
+
this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
|
|
17830
|
+
this.nativeElement.selectionEnd = this._end;
|
|
17831
|
+
this._start = this.selectionStart;
|
|
17832
|
+
this._end = this.selectionEnd;
|
|
17833
|
+
}
|
|
17825
17834
|
}
|
|
17826
17835
|
if (this._hasDropAction) {
|
|
17827
17836
|
this._start = this.selectionStart;
|
|
@@ -17861,7 +17870,7 @@ class IgxMaskDirective {
|
|
|
17861
17870
|
}
|
|
17862
17871
|
/** @hidden */
|
|
17863
17872
|
onDragEnter() {
|
|
17864
|
-
if (!this._focused) {
|
|
17873
|
+
if (!this._focused && !this._dataValue) {
|
|
17865
17874
|
this.showMask(this._dataValue);
|
|
17866
17875
|
}
|
|
17867
17876
|
}
|
|
@@ -38463,14 +38472,14 @@ IgxSimpleComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
38463
38472
|
IgxComboAPIService,
|
|
38464
38473
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38465
38474
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38466
|
-
], 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
|
|
38475
|
+
], 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" }] });
|
|
38467
38476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
|
|
38468
38477
|
type: Component,
|
|
38469
38478
|
args: [{ selector: 'igx-simple-combo', providers: [
|
|
38470
38479
|
IgxComboAPIService,
|
|
38471
38480
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38472
38481
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38473
|
-
], 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
|
|
38482
|
+
], 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" }]
|
|
38474
38483
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
|
|
38475
38484
|
type: Optional
|
|
38476
38485
|
}, {
|
|
@@ -79952,7 +79961,8 @@ class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
|
|
|
79952
79961
|
const gridTop = this._getMaxTop(this.grid);
|
|
79953
79962
|
const diffTop = rowElem.getBoundingClientRect().bottom -
|
|
79954
79963
|
rowElem.offsetHeight - gridTop;
|
|
79955
|
-
|
|
79964
|
+
// Adding Math.Round because Chrome has some inconsistencies when the page is zoomed
|
|
79965
|
+
const isInView = isNext ? Math.round(diffBottom) <= 0 : Math.round(diffTop) >= 0;
|
|
79956
79966
|
const calcOffset = isNext ? diffBottom : diffTop;
|
|
79957
79967
|
return { inView: isInView, offset: calcOffset };
|
|
79958
79968
|
}
|
|
@@ -81979,8 +81989,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
|
|
|
81979
81989
|
const nestedColumns = childLayouts.map((layout) => layout.columnList.toArray());
|
|
81980
81990
|
const colsArray = [].concat.apply([], nestedColumns);
|
|
81981
81991
|
const colLength = this.columnList.length;
|
|
81982
|
-
|
|
81983
|
-
|
|
81992
|
+
const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
|
|
81993
|
+
if (topCols.length > 0) {
|
|
81984
81994
|
this.updateColumns(topCols);
|
|
81985
81995
|
if (recalcColSizes && this.columns.length !== colLength) {
|
|
81986
81996
|
this.calculateGridSizes(false);
|