igniteui-angular 18.1.0 → 18.1.2
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/esm2022/lib/combo/combo-dropdown.component.mjs +2 -1
- package/esm2022/lib/combo/combo.common.mjs +3 -3
- package/esm2022/lib/combo/combo.component.mjs +3 -3
- package/esm2022/lib/directives/divider/divider.directive.mjs +4 -5
- package/esm2022/lib/drop-down/drop-down.base.mjs +5 -2
- package/esm2022/lib/grids/common/grid.interface.mjs +1 -1
- package/esm2022/lib/grids/grid-base.directive.mjs +2 -2
- package/esm2022/lib/grids/hierarchical-grid/hierarchical-grid.component.mjs +4 -1
- package/esm2022/lib/grids/pivot-grid/pivot-grid.interface.mjs +1 -1
- package/esm2022/lib/query-builder/query-builder.component.mjs +17 -17
- package/esm2022/lib/simple-combo/simple-combo.component.mjs +15 -7
- package/fesm2022/igniteui-angular.mjs +46 -32
- package/fesm2022/igniteui-angular.mjs.map +1 -1
- package/lib/directives/divider/divider.directive.d.ts +1 -1
- package/lib/grids/common/grid.interface.d.ts +1 -0
- package/lib/grids/hierarchical-grid/hierarchical-grid.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -7460,7 +7460,7 @@ class IgxDropDownBaseDirective {
|
|
|
7460
7460
|
}
|
|
7461
7461
|
}
|
|
7462
7462
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxDropDownBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7463
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: IgxDropDownBaseDirective, inputs: { width: "width", height: "height", id: "id", maxHeight: "maxHeight" }, outputs: { selectionChanging: "selectionChanging" }, host: { properties: { "style.maxHeight": "this.maxHeight", "class.igx-drop-down": "this.cssClass" } }, ngImport: i0 }); }
|
|
7463
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: IgxDropDownBaseDirective, inputs: { width: "width", height: "height", id: "id", maxHeight: "maxHeight" }, outputs: { selectionChanging: "selectionChanging" }, host: { properties: { "attr.id": "this.id", "style.maxHeight": "this.maxHeight", "class.igx-drop-down": "this.cssClass" } }, ngImport: i0 }); }
|
|
7464
7464
|
}
|
|
7465
7465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxDropDownBaseDirective, decorators: [{
|
|
7466
7466
|
type: Directive
|
|
@@ -7474,6 +7474,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
7474
7474
|
}], height: [{
|
|
7475
7475
|
type: Input
|
|
7476
7476
|
}], id: [{
|
|
7477
|
+
type: HostBinding,
|
|
7478
|
+
args: ['attr.id']
|
|
7479
|
+
}, {
|
|
7477
7480
|
type: Input
|
|
7478
7481
|
}], maxHeight: [{
|
|
7479
7482
|
type: Input
|
|
@@ -10000,7 +10003,7 @@ class IgxDividerDirective {
|
|
|
10000
10003
|
return this.type === IgxDividerType.SOLID;
|
|
10001
10004
|
}
|
|
10002
10005
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10003
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.5", type: IgxDividerDirective, isStandalone: true, selector: "igx-divider", inputs: { id: "id", role: "role", type: "type", middle: ["middle", "middle", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute],
|
|
10006
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.5", type: IgxDividerDirective, isStandalone: true, selector: "igx-divider", inputs: { id: "id", role: "role", type: "type", middle: ["middle", "middle", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], inset: "inset" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-divider": "this.type", "class.igx-divider--dashed": "this.isDashed", "class.igx-divider--inset": "this.middle", "class.igx-divider--vertical": "this.vertical", "style.--inset": "this.inset" } }, ngImport: i0 }); }
|
|
10004
10007
|
}
|
|
10005
10008
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxDividerDirective, decorators: [{
|
|
10006
10009
|
type: Directive,
|
|
@@ -10042,9 +10045,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
10042
10045
|
}], inset: [{
|
|
10043
10046
|
type: HostBinding,
|
|
10044
10047
|
args: ['style.--inset']
|
|
10045
|
-
}
|
|
10046
|
-
type: Input
|
|
10047
|
-
args: ['inset']
|
|
10048
|
+
}, {
|
|
10049
|
+
type: Input
|
|
10048
10050
|
}] } });
|
|
10049
10051
|
|
|
10050
10052
|
// @dynamic
|
|
@@ -36558,7 +36560,7 @@ class IgxComboBaseDirective {
|
|
|
36558
36560
|
}))
|
|
36559
36561
|
},
|
|
36560
36562
|
{
|
|
36561
|
-
name: '
|
|
36563
|
+
name: 'input_clear',
|
|
36562
36564
|
family: 'default',
|
|
36563
36565
|
ref: new Map(Object.entries({
|
|
36564
36566
|
'material': {
|
|
@@ -36572,7 +36574,7 @@ class IgxComboBaseDirective {
|
|
|
36572
36574
|
}))
|
|
36573
36575
|
},
|
|
36574
36576
|
{
|
|
36575
|
-
name: '
|
|
36577
|
+
name: 'case_sensitive',
|
|
36576
36578
|
family: 'default',
|
|
36577
36579
|
ref: new Map(Object.entries({
|
|
36578
36580
|
'material': {
|
|
@@ -37207,6 +37209,7 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
|
|
|
37207
37209
|
navigatePrev() {
|
|
37208
37210
|
if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
|
|
37209
37211
|
this.combo.focusSearchInput(false);
|
|
37212
|
+
this.focusedItem = null;
|
|
37210
37213
|
}
|
|
37211
37214
|
else {
|
|
37212
37215
|
super.navigatePrev();
|
|
@@ -37769,7 +37772,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
|
|
|
37769
37772
|
IgxComboAPIService,
|
|
37770
37773
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
|
|
37771
37774
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
|
|
37772
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\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 <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"
|
|
37775
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\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 <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></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 *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n <div class=\"igx-combo__search\">\n <igx-input-group *ngIf=\"displaySearchInput\" theme=\"material\" >\n <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n <igx-icon\n family=\"default\"\n name=\"case_sensitive\"\n [active]=\"filteringOptions.caseSensitive\">\n </igx-icon>\n </span>\n </igx-suffix>\n </igx-input-group>\n </div>\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"activeDescendant\">\n <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\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 <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 [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<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 type=\"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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
|
|
37773
37776
|
}
|
|
37774
37777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxComboComponent, decorators: [{
|
|
37775
37778
|
type: Component,
|
|
@@ -37795,7 +37798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
37795
37798
|
IgxRippleDirective,
|
|
37796
37799
|
IgxComboFilteringPipe,
|
|
37797
37800
|
IgxComboGroupingPipe
|
|
37798
|
-
], template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\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 <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"
|
|
37801
|
+
], template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\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 <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></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 *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n <div class=\"igx-combo__search\">\n <igx-input-group *ngIf=\"displaySearchInput\" theme=\"material\" >\n <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n <igx-icon\n family=\"default\"\n name=\"case_sensitive\"\n [active]=\"filteringOptions.caseSensitive\">\n </igx-icon>\n </span>\n </igx-suffix>\n </igx-input-group>\n </div>\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"activeDescendant\">\n <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\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 <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 [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<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 type=\"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" }]
|
|
37799
37802
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: undefined, decorators: [{
|
|
37800
37803
|
type: Inject,
|
|
37801
37804
|
args: [DOCUMENT]
|
|
@@ -38096,10 +38099,18 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
|
|
|
38096
38099
|
return;
|
|
38097
38100
|
}
|
|
38098
38101
|
if (!this.dropdown.collapsed) {
|
|
38099
|
-
this.
|
|
38100
|
-
|
|
38101
|
-
|
|
38102
|
-
|
|
38102
|
+
const focusedItem = this.dropdown.focusedItem;
|
|
38103
|
+
if (focusedItem && !focusedItem.isHeader) {
|
|
38104
|
+
this.select(focusedItem.itemID);
|
|
38105
|
+
event.preventDefault();
|
|
38106
|
+
event.stopPropagation();
|
|
38107
|
+
this.close();
|
|
38108
|
+
}
|
|
38109
|
+
else {
|
|
38110
|
+
event.preventDefault();
|
|
38111
|
+
event.stopPropagation();
|
|
38112
|
+
this.comboInput.focus();
|
|
38113
|
+
}
|
|
38103
38114
|
}
|
|
38104
38115
|
// manually trigger text selection as it will not be triggered during editing
|
|
38105
38116
|
this.textSelection.trigger();
|
|
@@ -38330,7 +38341,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
|
|
|
38330
38341
|
IgxComboAPIService,
|
|
38331
38342
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38332
38343
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38333
|
-
], 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 [type]=\"type\">\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n\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]=\"displayValue\" 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 (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"hasSelectedItem\" 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\" family=\"default\" name=\"
|
|
38344
|
+
], 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 [type]=\"type\">\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n\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]=\"displayValue\" 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 (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"hasSelectedItem\" 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\" family=\"default\" name=\"input_clear\"></igx-icon>\n </igx-suffix>\n\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n\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\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\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.rem]=\"itemsMaxHeightInRem\" [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:compareCollator;\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 type=\"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: 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: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
|
|
38334
38345
|
}
|
|
38335
38346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
|
|
38336
38347
|
type: Component,
|
|
@@ -38338,7 +38349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
38338
38349
|
IgxComboAPIService,
|
|
38339
38350
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38340
38351
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38341
|
-
], standalone: true, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, NgIf, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe], template: "<igx-input-group #inputGroup [type]=\"type\">\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n\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]=\"displayValue\" 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 (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"hasSelectedItem\" 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\" family=\"default\" name=\"
|
|
38352
|
+
], standalone: true, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, NgIf, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe], template: "<igx-input-group #inputGroup [type]=\"type\">\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n\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]=\"displayValue\" 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 (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"hasSelectedItem\" 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\" family=\"default\" name=\"input_clear\"></igx-icon>\n </igx-suffix>\n\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n\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\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\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.rem]=\"itemsMaxHeightInRem\" [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:compareCollator;\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 type=\"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" }]
|
|
38342
38353
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: PlatformUtil }, { type: undefined, decorators: [{
|
|
38343
38354
|
type: Inject,
|
|
38344
38355
|
args: [DOCUMENT]
|
|
@@ -47774,29 +47785,29 @@ class IgxQueryBuilderComponent {
|
|
|
47774
47785
|
this.currentGroup = groupItem;
|
|
47775
47786
|
}
|
|
47776
47787
|
createExpressionGroupItem(expressionTree, parent) {
|
|
47777
|
-
|
|
47778
|
-
|
|
47779
|
-
|
|
47780
|
-
|
|
47781
|
-
|
|
47782
|
-
|
|
47788
|
+
if (!expressionTree) {
|
|
47789
|
+
return null;
|
|
47790
|
+
}
|
|
47791
|
+
const groupItem = new ExpressionGroupItem(expressionTree.operator, parent);
|
|
47792
|
+
for (const expr of expressionTree.filteringOperands) {
|
|
47793
|
+
if (expr instanceof FilteringExpressionsTree) {
|
|
47794
|
+
const childGroup = this.createExpressionGroupItem(expr, groupItem);
|
|
47795
|
+
if (childGroup) {
|
|
47796
|
+
groupItem.children.push(childGroup);
|
|
47783
47797
|
}
|
|
47784
|
-
|
|
47785
|
-
|
|
47786
|
-
|
|
47787
|
-
|
|
47788
|
-
|
|
47789
|
-
|
|
47790
|
-
ignoreCase: filteringExpr.ignoreCase
|
|
47791
|
-
};
|
|
47798
|
+
}
|
|
47799
|
+
else {
|
|
47800
|
+
const filteringExpr = expr;
|
|
47801
|
+
const field = this.fields.find(el => el.field === filteringExpr.fieldName);
|
|
47802
|
+
if (field) {
|
|
47803
|
+
const exprCopy = { ...filteringExpr };
|
|
47792
47804
|
const operandItem = new ExpressionOperandItem(exprCopy, groupItem);
|
|
47793
|
-
const field = this.fields.find(el => el.field === filteringExpr.fieldName);
|
|
47794
47805
|
operandItem.fieldLabel = field.label || field.header || field.field;
|
|
47795
47806
|
groupItem.children.push(operandItem);
|
|
47796
47807
|
}
|
|
47797
47808
|
}
|
|
47798
47809
|
}
|
|
47799
|
-
return groupItem;
|
|
47810
|
+
return groupItem.children.length > 0 ? groupItem : null;
|
|
47800
47811
|
}
|
|
47801
47812
|
createExpressionTreeFromGroupItem(groupItem) {
|
|
47802
47813
|
if (!groupItem) {
|
|
@@ -62794,7 +62805,7 @@ class IgxGridBaseDirective {
|
|
|
62794
62805
|
* ```
|
|
62795
62806
|
*/
|
|
62796
62807
|
this.dataChanged = new EventEmitter();
|
|
62797
|
-
/*
|
|
62808
|
+
/* reactContentChildren */
|
|
62798
62809
|
/* blazorInclude */
|
|
62799
62810
|
/* blazorTreatAsCollection */
|
|
62800
62811
|
/* blazorCollectionName: ColumnCollection */
|
|
@@ -83326,6 +83337,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
83326
83337
|
}] } });
|
|
83327
83338
|
|
|
83328
83339
|
let NEXT_ID$5 = 0;
|
|
83340
|
+
/**
|
|
83341
|
+
* @hidden @internal
|
|
83342
|
+
*/
|
|
83329
83343
|
class IgxChildGridRowComponent {
|
|
83330
83344
|
/**
|
|
83331
83345
|
* @hidden
|