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
|
@@ -1165,7 +1165,8 @@ class PlatformUtil {
|
|
|
1165
1165
|
style.flexBasis = '';
|
|
1166
1166
|
}
|
|
1167
1167
|
range.selectNodeContents(node);
|
|
1168
|
-
const
|
|
1168
|
+
const scale = node.getBoundingClientRect().width / node.offsetWidth;
|
|
1169
|
+
const width = range.getBoundingClientRect().width / scale;
|
|
1169
1170
|
if (!this.isFirefox) {
|
|
1170
1171
|
// we need that hack - otherwise content won't be measured correctly in IE/Edge
|
|
1171
1172
|
node.style.overflow = overflow;
|
|
@@ -10259,6 +10260,8 @@ class IgxForOfDirective {
|
|
|
10259
10260
|
}
|
|
10260
10261
|
}
|
|
10261
10262
|
updateSizes() {
|
|
10263
|
+
if (!this.scrollComponent.nativeElement.isConnected)
|
|
10264
|
+
return;
|
|
10262
10265
|
const scrollable = this.isScrollable();
|
|
10263
10266
|
this.recalcUpdateSizes();
|
|
10264
10267
|
this._applyChanges();
|
|
@@ -10624,7 +10627,7 @@ class IgxForOfDirective {
|
|
|
10624
10627
|
this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
|
|
10625
10628
|
const scrollable = this.isScrollable();
|
|
10626
10629
|
if (this.igxForScrollOrientation === 'horizontal') {
|
|
10627
|
-
const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
|
|
10630
|
+
const totalWidth = parseInt(this.igxForContainerSize, 10) > 0 ? this.initSizesCache(this.igxForOf) : 0;
|
|
10628
10631
|
this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
|
|
10629
10632
|
this.scrollComponent.size = totalWidth;
|
|
10630
10633
|
if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
|
|
@@ -17041,7 +17044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
|
|
|
17041
17044
|
const MASK_FLAGS = ['C', '&', 'a', 'A', '?', 'L', '9', '0', '#'];
|
|
17042
17045
|
/** @hidden */
|
|
17043
17046
|
class MaskParsingService {
|
|
17044
|
-
applyMask(inputVal, maskOptions) {
|
|
17047
|
+
applyMask(inputVal, maskOptions, pos = 0) {
|
|
17045
17048
|
let outputVal = '';
|
|
17046
17049
|
let value = '';
|
|
17047
17050
|
const mask = maskOptions.format;
|
|
@@ -17072,7 +17075,6 @@ class MaskParsingService {
|
|
|
17072
17075
|
if (nonLiteralValues.length > nonLiteralIndices.length) {
|
|
17073
17076
|
nonLiteralValues.splice(nonLiteralIndices.length);
|
|
17074
17077
|
}
|
|
17075
|
-
let pos = 0;
|
|
17076
17078
|
for (const nonLiteralValue of nonLiteralValues) {
|
|
17077
17079
|
const char = nonLiteralValue;
|
|
17078
17080
|
outputVal = this.replaceCharAt(outputVal, nonLiteralIndices[pos++], char);
|
|
@@ -17119,6 +17121,11 @@ class MaskParsingService {
|
|
|
17119
17121
|
}
|
|
17120
17122
|
maskedValue = this.replaceCharAt(maskedValue, i, char);
|
|
17121
17123
|
}
|
|
17124
|
+
if (Math.abs(end - start) >= 1) {
|
|
17125
|
+
// set cursor to be max between last cursor pos and the calculated `end`
|
|
17126
|
+
// since on `delete` the cursor should move forward
|
|
17127
|
+
cursor = Math.max(cursor, end);
|
|
17128
|
+
}
|
|
17122
17129
|
return { value: maskedValue, end: cursor };
|
|
17123
17130
|
}
|
|
17124
17131
|
replaceCharAt(strValue, index, char) {
|
|
@@ -17340,6 +17347,7 @@ class IgxMaskDirective {
|
|
|
17340
17347
|
}
|
|
17341
17348
|
/** @hidden @internal */
|
|
17342
17349
|
onInputChanged(event) {
|
|
17350
|
+
var _a;
|
|
17343
17351
|
/**
|
|
17344
17352
|
* '!this._focused' is a fix for #8165
|
|
17345
17353
|
* On page load IE triggers input events before focus events and
|
|
@@ -17368,14 +17376,16 @@ class IgxMaskDirective {
|
|
|
17368
17376
|
}
|
|
17369
17377
|
this.inputValue = isInputComplete ?
|
|
17370
17378
|
this.inputValue.substring(0, this.selectionEnd - numberOfMaskLiterals) + this.inputValue.substring(this.selectionEnd)
|
|
17371
|
-
: this._compositionValue.substring(0, this._compositionStartIndex);
|
|
17372
|
-
this.
|
|
17373
|
-
|
|
17374
|
-
|
|
17375
|
-
|
|
17376
|
-
|
|
17377
|
-
|
|
17378
|
-
|
|
17379
|
+
: ((_a = this._compositionValue) === null || _a === void 0 ? void 0 : _a.substring(0, this._compositionStartIndex)) || this.inputValue;
|
|
17380
|
+
if (this._compositionValue) {
|
|
17381
|
+
this._start = this.selectionStart;
|
|
17382
|
+
this._end = this.selectionEnd;
|
|
17383
|
+
this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
|
|
17384
|
+
this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
|
|
17385
|
+
this.nativeElement.selectionEnd = this._end;
|
|
17386
|
+
this._start = this.selectionStart;
|
|
17387
|
+
this._end = this.selectionEnd;
|
|
17388
|
+
}
|
|
17379
17389
|
}
|
|
17380
17390
|
if (this._hasDropAction) {
|
|
17381
17391
|
this._start = this.selectionStart;
|
|
@@ -17415,7 +17425,7 @@ class IgxMaskDirective {
|
|
|
17415
17425
|
}
|
|
17416
17426
|
/** @hidden */
|
|
17417
17427
|
onDragEnter() {
|
|
17418
|
-
if (!this._focused) {
|
|
17428
|
+
if (!this._focused && !this._dataValue) {
|
|
17419
17429
|
this.showMask(this._dataValue);
|
|
17420
17430
|
}
|
|
17421
17431
|
}
|
|
@@ -38086,14 +38096,14 @@ IgxSimpleComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
38086
38096
|
IgxComboAPIService,
|
|
38087
38097
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38088
38098
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38089
|
-
], 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
|
|
38099
|
+
], 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" }] });
|
|
38090
38100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
|
|
38091
38101
|
type: Component,
|
|
38092
38102
|
args: [{ selector: 'igx-simple-combo', providers: [
|
|
38093
38103
|
IgxComboAPIService,
|
|
38094
38104
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38095
38105
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38096
|
-
], 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
|
|
38106
|
+
], 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" }]
|
|
38097
38107
|
}], ctorParameters: function () {
|
|
38098
38108
|
return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
|
|
38099
38109
|
type: Optional
|
|
@@ -58057,10 +58067,10 @@ class IgxGridFilteringRowComponent {
|
|
|
58057
58067
|
}
|
|
58058
58068
|
}
|
|
58059
58069
|
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 });
|
|
58060
|
-
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 });
|
|
58070
|
+
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 });
|
|
58061
58071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
|
|
58062
58072
|
type: Component,
|
|
58063
|
-
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" }]
|
|
58073
|
+
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" }]
|
|
58064
58074
|
}], ctorParameters: function () { return [{ type: IgxFilteringService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }]; }, propDecorators: { column: [{
|
|
58065
58075
|
type: Input
|
|
58066
58076
|
}], value: [{
|
|
@@ -79849,7 +79859,8 @@ class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
|
|
|
79849
79859
|
const gridTop = this._getMaxTop(this.grid);
|
|
79850
79860
|
const diffTop = rowElem.getBoundingClientRect().bottom -
|
|
79851
79861
|
rowElem.offsetHeight - gridTop;
|
|
79852
|
-
|
|
79862
|
+
// Adding Math.Round because Chrome has some inconsistencies when the page is zoomed
|
|
79863
|
+
const isInView = isNext ? Math.round(diffBottom) <= 0 : Math.round(diffTop) >= 0;
|
|
79853
79864
|
const calcOffset = isNext ? diffBottom : diffTop;
|
|
79854
79865
|
return { inView: isInView, offset: calcOffset };
|
|
79855
79866
|
}
|
|
@@ -81892,8 +81903,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
|
|
|
81892
81903
|
const nestedColumns = childLayouts.map((layout) => layout.columnList.toArray());
|
|
81893
81904
|
const colsArray = [].concat.apply([], nestedColumns);
|
|
81894
81905
|
const colLength = this.columnList.length;
|
|
81895
|
-
|
|
81896
|
-
|
|
81906
|
+
const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
|
|
81907
|
+
if (topCols.length > 0) {
|
|
81897
81908
|
this.updateColumns(topCols);
|
|
81898
81909
|
if (recalcColSizes && this.columns.length !== colLength) {
|
|
81899
81910
|
this.calculateGridSizes(false);
|