igniteui-angular 14.2.7 → 14.2.9
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/filtering/base/grid-filtering-row.component.mjs +3 -3
- 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 +31 -20
- package/fesm2015/igniteui-angular.mjs.map +1 -1
- package/fesm2020/igniteui-angular.mjs +30 -20
- 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
|
}, {
|
|
@@ -58315,10 +58324,10 @@ class IgxGridFilteringRowComponent {
|
|
|
58315
58324
|
}
|
|
58316
58325
|
}
|
|
58317
58326
|
IgxGridFilteringRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [{ token: IgxFilteringService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
|
|
58318
|
-
IgxGridFilteringRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass", "class.igx-grid__filtering-row--compact": "this.compactCSSClass", "class.igx-grid__filtering-row--cosy": "this.cosyCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n <igx-drop-down-item *ngFor=\"let condition of conditions\"\n [value]=\"condition\"\n [selected]=\"isConditionSelected(condition)\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n </div>\n </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n </igx-prefix>\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"placeholder\"\n autocomplete=\"off\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n [type]=\"type\"\n [readonly]=\"isUnaryCondition\"\n (click)=\"onInputClick()\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (keydown)=\"onInputKeyDown($event)\"\n (keyup)=\"onInputKeyUp()\"/>\n <igx-suffix *ngIf=\"value || value === 0\" >\n <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n </igx-suffix>\n </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n <igx-date-picker #picker\n [(value)]=\"value\"\n [readOnly]=\"true\"\n [outlet]=\"filteringService.grid.outlet\"\n [locale]=\"filteringService.grid.locale\"\n (click)=\"expression.condition.isUnary ? null : picker.open()\"\n type=\"box\"\n [displayFormat]=\"column.pipeArgs.format\"\n [formatter]=\"column.formatter\"\n [placeholder]=\"placeholder\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [displayDensity]=\"displayDensity\"\n (keydown)=\"onInputKeyDown($event)\"\n (focusout)=\"onInputGroupFocusout()\"\n (closed)=\"focusEditElement()\">\n <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n </igx-prefix>\n <igx-suffix *ngIf=\"value\">\n <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n </igx-suffix>\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n <igx-time-picker #picker\n [(value)]=\"value\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [locale]=\"filteringService.grid.locale\"\n [formatter]=\"column.formatter\"\n [outlet]=\"filteringService.grid.outlet\"\n [displayDensity]=\"displayDensity\"\n type=\"box\"\n [readOnly]=\"true\"\n [placeholder]=\"placeholder\"\n (closed)=\"focusEditElement()\"\n (focusout)=\"onInputGroupFocusout()\"\n (keydown)=\"onInputKeyDown($event)\"\n (click)=\"expression.condition.isUnary ? null : picker.open()\">\n <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n </igx-prefix>\n <igx-suffix *ngIf=\"value\">\n <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n </igx-suffix>\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n </igx-prefix>\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"placeholder\"\n [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n [value]=\"value\"\n (valueChange)=\"onInput($event)\"\n [readonly]=\"isUnaryCondition\"\n (click)=\"onInputClick()\"\n (keydown)=\"onInputKeyDown($event)\"\n (keyup)=\"onInputKeyUp()\"/>\n <igx-suffix *ngIf=\"value || value === 0\" >\n <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n </igx-suffix>\n </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n <div>\n <igx-chips-area #chipsArea>\n <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n <igx-chip #chip id='chip'\n (pointerdown)=\"onChipPointerdown($event, chip)\"\n (click)=\"onChipClick($event, item)\"\n (keydown)=\"onChipKeyDown($event, item)\"\n (remove)=\"onChipRemoved($event, item)\"\n [selectable]=\"false\"\n [selected]=\"item.isSelected\"\n [displayDensity]=\"displayDensity\"\n [removable]=\"true\">\n <igx-icon\n igxPrefix\n family=\"imx-icons\"\n [name]=\"item.expression.condition.iconName\">\n </igx-icon>\n <span>{{filteringService.getChipLabel(item.expression)}}</span>\n </igx-chip>\n\n <span id='operand' *ngIf=\"!last\">\n <button igxButton (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"displayDensity\">\n <igx-icon>expand_more</igx-icon>\n <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n </button>\n <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n </igx-drop-down>\n </span>\n </ng-container>\n </igx-chips-area>\n </div>\n</div>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n <button [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n <igx-icon>refresh</igx-icon>\n <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n </button>\n <button #closeButton [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" igxRipple (click)=\"close()\">\n <igx-icon>close</igx-icon>\n <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { 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: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
58327
|
+
IgxGridFilteringRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass", "class.igx-grid__filtering-row--compact": "this.compactCSSClass", "class.igx-grid__filtering-row--cosy": "this.cosyCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n <igx-drop-down-item *ngFor=\"let condition of conditions\"\n [value]=\"condition\"\n [selected]=\"isConditionSelected(condition)\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n </div>\n </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n </igx-prefix>\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"placeholder\"\n autocomplete=\"off\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n [type]=\"type\"\n [readonly]=\"isUnaryCondition\"\n (click)=\"onInputClick()\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (keydown)=\"onInputKeyDown($event)\"\n (keyup)=\"onInputKeyUp()\"/>\n <igx-suffix *ngIf=\"value || value === 0\" >\n <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n </igx-suffix>\n </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n <igx-date-picker #picker\n [(value)]=\"value\"\n [readOnly]=\"true\"\n [outlet]=\"filteringService.grid.outlet\"\n [locale]=\"filteringService.grid.locale\"\n (click)=\"expression.condition.isUnary ? null : picker.open()\"\n type=\"box\"\n [displayFormat]=\"column.pipeArgs.format\"\n [formatter]=\"column.formatter\"\n [placeholder]=\"placeholder\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [displayDensity]=\"displayDensity\"\n (keydown)=\"onInputKeyDown($event)\"\n (focusout)=\"onInputGroupFocusout()\"\n (closed)=\"focusEditElement()\">\n <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n </igx-prefix>\n <igx-suffix *ngIf=\"value\">\n <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n </igx-suffix>\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n <igx-time-picker #picker\n [(value)]=\"value\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [locale]=\"filteringService.grid.locale\"\n [formatter]=\"column.formatter\"\n [outlet]=\"filteringService.grid.outlet\"\n [displayDensity]=\"displayDensity\"\n type=\"box\"\n [readOnly]=\"true\"\n [placeholder]=\"placeholder\"\n (closed)=\"focusEditElement()\"\n (focusout)=\"onInputGroupFocusout()\"\n (keydown)=\"onInputKeyDown($event)\"\n (click)=\"expression.condition.isUnary ? null : picker.open()\">\n <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n </igx-prefix>\n <igx-suffix *ngIf=\"value\">\n <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n </igx-suffix>\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n </igx-prefix>\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"placeholder\"\n [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n [value]=\"value\"\n (valueChange)=\"onInput($event)\"\n [readonly]=\"isUnaryCondition\"\n (click)=\"onInputClick()\"\n (keydown)=\"onInputKeyDown($event)\"\n (keyup)=\"onInputKeyUp()\"/>\n <igx-suffix *ngIf=\"value || value === 0\" >\n <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n </igx-suffix>\n </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n <div>\n <igx-chips-area #chipsArea>\n <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n <igx-chip #chip id='chip'\n (pointerdown)=\"onChipPointerdown($event, chip)\"\n (click)=\"onChipClick($event, item)\"\n (keydown)=\"onChipKeyDown($event, item)\"\n (remove)=\"onChipRemoved($event, item)\"\n [selectable]=\"false\"\n [selected]=\"item.isSelected\"\n [displayDensity]=\"displayDensity\"\n [removable]=\"true\">\n <igx-icon\n igxPrefix\n family=\"imx-icons\"\n [name]=\"item.expression.condition.iconName\">\n </igx-icon>\n <span>{{filteringService.getChipLabel(item.expression)}}</span>\n </igx-chip>\n\n <span id='operand' *ngIf=\"!last\">\n <button igxButton type=\"button\" (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"displayDensity\">\n <igx-icon>expand_more</igx-icon>\n <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n </button>\n <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n </igx-drop-down>\n </span>\n </ng-container>\n </igx-chips-area>\n </div>\n</div>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n <button [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n <igx-icon>refresh</igx-icon>\n <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n </button>\n <button #closeButton [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"close()\">\n <igx-icon>close</igx-icon>\n <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { 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: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
58319
58328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
|
|
58320
58329
|
type: Component,
|
|
58321
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n <igx-drop-down-item *ngFor=\"let condition of conditions\"\n [value]=\"condition\"\n [selected]=\"isConditionSelected(condition)\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n </div>\n </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n </igx-prefix>\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"placeholder\"\n autocomplete=\"off\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n [type]=\"type\"\n [readonly]=\"isUnaryCondition\"\n (click)=\"onInputClick()\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (keydown)=\"onInputKeyDown($event)\"\n (keyup)=\"onInputKeyUp()\"/>\n <igx-suffix *ngIf=\"value || value === 0\" >\n <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n </igx-suffix>\n </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n <igx-date-picker #picker\n [(value)]=\"value\"\n [readOnly]=\"true\"\n [outlet]=\"filteringService.grid.outlet\"\n [locale]=\"filteringService.grid.locale\"\n (click)=\"expression.condition.isUnary ? null : picker.open()\"\n type=\"box\"\n [displayFormat]=\"column.pipeArgs.format\"\n [formatter]=\"column.formatter\"\n [placeholder]=\"placeholder\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [displayDensity]=\"displayDensity\"\n (keydown)=\"onInputKeyDown($event)\"\n (focusout)=\"onInputGroupFocusout()\"\n (closed)=\"focusEditElement()\">\n <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n </igx-prefix>\n <igx-suffix *ngIf=\"value\">\n <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n </igx-suffix>\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n <igx-time-picker #picker\n [(value)]=\"value\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [locale]=\"filteringService.grid.locale\"\n [formatter]=\"column.formatter\"\n [outlet]=\"filteringService.grid.outlet\"\n [displayDensity]=\"displayDensity\"\n type=\"box\"\n [readOnly]=\"true\"\n [placeholder]=\"placeholder\"\n (closed)=\"focusEditElement()\"\n (focusout)=\"onInputGroupFocusout()\"\n (keydown)=\"onInputKeyDown($event)\"\n (click)=\"expression.condition.isUnary ? null : picker.open()\">\n <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n </igx-prefix>\n <igx-suffix *ngIf=\"value\">\n <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n </igx-suffix>\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n </igx-prefix>\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"placeholder\"\n [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n [value]=\"value\"\n (valueChange)=\"onInput($event)\"\n [readonly]=\"isUnaryCondition\"\n (click)=\"onInputClick()\"\n (keydown)=\"onInputKeyDown($event)\"\n (keyup)=\"onInputKeyUp()\"/>\n <igx-suffix *ngIf=\"value || value === 0\" >\n <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n </igx-suffix>\n </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n <div>\n <igx-chips-area #chipsArea>\n <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n <igx-chip #chip id='chip'\n (pointerdown)=\"onChipPointerdown($event, chip)\"\n (click)=\"onChipClick($event, item)\"\n (keydown)=\"onChipKeyDown($event, item)\"\n (remove)=\"onChipRemoved($event, item)\"\n [selectable]=\"false\"\n [selected]=\"item.isSelected\"\n [displayDensity]=\"displayDensity\"\n [removable]=\"true\">\n <igx-icon\n igxPrefix\n family=\"imx-icons\"\n [name]=\"item.expression.condition.iconName\">\n </igx-icon>\n <span>{{filteringService.getChipLabel(item.expression)}}</span>\n </igx-chip>\n\n <span id='operand' *ngIf=\"!last\">\n <button igxButton (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"displayDensity\">\n <igx-icon>expand_more</igx-icon>\n <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n </button>\n <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n </igx-drop-down>\n </span>\n </ng-container>\n </igx-chips-area>\n </div>\n</div>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n <button [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n <igx-icon>refresh</igx-icon>\n <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n </button>\n <button #closeButton [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" igxRipple (click)=\"close()\">\n <igx-icon>close</igx-icon>\n <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n </button>\n</div>\n" }]
|
|
58330
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n <igx-drop-down-item *ngFor=\"let condition of conditions\"\n [value]=\"condition\"\n [selected]=\"isConditionSelected(condition)\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n </div>\n </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n </igx-prefix>\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"placeholder\"\n autocomplete=\"off\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n [type]=\"type\"\n [readonly]=\"isUnaryCondition\"\n (click)=\"onInputClick()\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (keydown)=\"onInputKeyDown($event)\"\n (keyup)=\"onInputKeyUp()\"/>\n <igx-suffix *ngIf=\"value || value === 0\" >\n <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n </igx-suffix>\n </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n <igx-date-picker #picker\n [(value)]=\"value\"\n [readOnly]=\"true\"\n [outlet]=\"filteringService.grid.outlet\"\n [locale]=\"filteringService.grid.locale\"\n (click)=\"expression.condition.isUnary ? null : picker.open()\"\n type=\"box\"\n [displayFormat]=\"column.pipeArgs.format\"\n [formatter]=\"column.formatter\"\n [placeholder]=\"placeholder\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [displayDensity]=\"displayDensity\"\n (keydown)=\"onInputKeyDown($event)\"\n (focusout)=\"onInputGroupFocusout()\"\n (closed)=\"focusEditElement()\">\n <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n </igx-prefix>\n <igx-suffix *ngIf=\"value\">\n <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n </igx-suffix>\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n <igx-time-picker #picker\n [(value)]=\"value\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [locale]=\"filteringService.grid.locale\"\n [formatter]=\"column.formatter\"\n [outlet]=\"filteringService.grid.outlet\"\n [displayDensity]=\"displayDensity\"\n type=\"box\"\n [readOnly]=\"true\"\n [placeholder]=\"placeholder\"\n (closed)=\"focusEditElement()\"\n (focusout)=\"onInputGroupFocusout()\"\n (keydown)=\"onInputKeyDown($event)\"\n (click)=\"expression.condition.isUnary ? null : picker.open()\">\n <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n </igx-prefix>\n <igx-suffix *ngIf=\"value\">\n <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n </igx-suffix>\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n </igx-prefix>\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"placeholder\"\n [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n [value]=\"value\"\n (valueChange)=\"onInput($event)\"\n [readonly]=\"isUnaryCondition\"\n (click)=\"onInputClick()\"\n (keydown)=\"onInputKeyDown($event)\"\n (keyup)=\"onInputKeyUp()\"/>\n <igx-suffix *ngIf=\"value || value === 0\" >\n <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n </igx-suffix>\n </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n <div>\n <igx-chips-area #chipsArea>\n <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n <igx-chip #chip id='chip'\n (pointerdown)=\"onChipPointerdown($event, chip)\"\n (click)=\"onChipClick($event, item)\"\n (keydown)=\"onChipKeyDown($event, item)\"\n (remove)=\"onChipRemoved($event, item)\"\n [selectable]=\"false\"\n [selected]=\"item.isSelected\"\n [displayDensity]=\"displayDensity\"\n [removable]=\"true\">\n <igx-icon\n igxPrefix\n family=\"imx-icons\"\n [name]=\"item.expression.condition.iconName\">\n </igx-icon>\n <span>{{filteringService.getChipLabel(item.expression)}}</span>\n </igx-chip>\n\n <span id='operand' *ngIf=\"!last\">\n <button igxButton type=\"button\" (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"displayDensity\">\n <igx-icon>expand_more</igx-icon>\n <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n </button>\n <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n </igx-drop-down>\n </span>\n </ng-container>\n </igx-chips-area>\n </div>\n</div>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n <button [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n <igx-icon>refresh</igx-icon>\n <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n </button>\n <button #closeButton [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"close()\">\n <igx-icon>close</igx-icon>\n <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n </button>\n</div>\n" }]
|
|
58322
58331
|
}], ctorParameters: function () { return [{ type: IgxFilteringService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }]; }, propDecorators: { column: [{
|
|
58323
58332
|
type: Input
|
|
58324
58333
|
}], value: [{
|
|
@@ -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);
|