igniteui-angular 14.1.0-beta.0 → 14.1.0-rc.0
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/combo/combo.common.mjs +20 -2
- package/esm2020/lib/combo/combo.component.mjs +3 -3
- package/esm2020/lib/core/i18n/combo-resources.mjs +4 -0
- package/esm2020/lib/core/i18n/resources.mjs +4 -1
- package/esm2020/lib/grids/api.service.mjs +1 -1
- package/esm2020/lib/grids/columns/column.component.mjs +2 -2
- package/esm2020/lib/grids/common/grid.interface.mjs +1 -1
- package/esm2020/lib/grids/grid/grid-validation.service.mjs +15 -16
- package/esm2020/lib/grids/grid-base.directive.mjs +1 -1
- package/esm2020/lib/grids/grid-public-cell.mjs +6 -5
- package/esm2020/lib/grids/grid-public-row.mjs +6 -5
- package/esm2020/lib/grids/public_api.mjs +1 -1
- package/esm2020/lib/simple-combo/simple-combo.component.mjs +3 -3
- package/esm2020/public_api.mjs +1 -1
- package/fesm2015/igniteui-angular.mjs +53 -30
- package/fesm2015/igniteui-angular.mjs.map +1 -1
- package/fesm2020/igniteui-angular.mjs +53 -29
- package/fesm2020/igniteui-angular.mjs.map +1 -1
- package/lib/combo/combo.common.d.ts +11 -1
- package/lib/core/i18n/combo-resources.d.ts +4 -0
- package/lib/core/i18n/resources.d.ts +3 -1
- package/lib/grids/columns/column.component.d.ts +1 -1
- package/lib/grids/common/grid.interface.d.ts +13 -13
- package/lib/grids/grid/grid-validation.service.d.ts +8 -9
- package/lib/grids/grid-base.directive.d.ts +2 -2
- package/lib/grids/grid-public-cell.d.ts +5 -5
- package/lib/grids/grid-public-row.d.ts +5 -5
- package/lib/grids/public_api.d.ts +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +1 -0
|
@@ -12416,6 +12416,10 @@ const ActionStripResourceStringsEN = {
|
|
|
12416
12416
|
igx_action_strip_button_more_title: 'More'
|
|
12417
12417
|
};
|
|
12418
12418
|
|
|
12419
|
+
const ComboResourceStringsEN = {
|
|
12420
|
+
igx_combo_empty_message: 'The list is empty'
|
|
12421
|
+
};
|
|
12422
|
+
|
|
12419
12423
|
/**
|
|
12420
12424
|
* @hidden
|
|
12421
12425
|
* IF YOU EDIT THIS OBJECT, DO NOT FORGET TO UPDATE
|
|
@@ -12434,6 +12438,7 @@ const CurrentResourceStrings = {
|
|
|
12434
12438
|
TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
|
|
12435
12439
|
CalendarResStrings: cloneValue(CalendarResourceStringsEN),
|
|
12436
12440
|
ChipResStrings: cloneValue(ChipResourceStringsEN),
|
|
12441
|
+
ComboResStrings: cloneValue(ComboResourceStringsEN),
|
|
12437
12442
|
DatePickerResourceStrings: cloneValue(DatePickerResourceStringsEN),
|
|
12438
12443
|
DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
|
|
12439
12444
|
CarouselResStrings: cloneValue(CarouselResourceStringsEN),
|
|
@@ -12466,6 +12471,7 @@ const getCurrentResourceStrings = () => ({
|
|
|
12466
12471
|
...CurrentResourceStrings.CalendarResStrings,
|
|
12467
12472
|
...CurrentResourceStrings.CarouselResStrings,
|
|
12468
12473
|
...CurrentResourceStrings.ChipResStrings,
|
|
12474
|
+
...CurrentResourceStrings.ComboResStrings,
|
|
12469
12475
|
...CurrentResourceStrings.DatePickerResourceStrings,
|
|
12470
12476
|
...CurrentResourceStrings.DateRangePickerResStrings,
|
|
12471
12477
|
...CurrentResourceStrings.GridResStrings,
|
|
@@ -36338,6 +36344,21 @@ class IgxComboBaseDirective extends DisplayDensityBase {
|
|
|
36338
36344
|
set type(val) {
|
|
36339
36345
|
this._type = val;
|
|
36340
36346
|
}
|
|
36347
|
+
/**
|
|
36348
|
+
* Gets/Sets the resource strings.
|
|
36349
|
+
*
|
|
36350
|
+
* @remarks
|
|
36351
|
+
* By default it uses EN resources.
|
|
36352
|
+
*/
|
|
36353
|
+
get resourceStrings() {
|
|
36354
|
+
if (!this._resourceStrings) {
|
|
36355
|
+
this._resourceStrings = CurrentResourceStrings.ComboResStrings;
|
|
36356
|
+
}
|
|
36357
|
+
return this._resourceStrings;
|
|
36358
|
+
}
|
|
36359
|
+
set resourceStrings(value) {
|
|
36360
|
+
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
|
|
36361
|
+
}
|
|
36341
36362
|
/** @hidden @internal */
|
|
36342
36363
|
get searchValue() {
|
|
36343
36364
|
return this._searchValue;
|
|
@@ -36777,7 +36798,7 @@ class IgxComboBaseDirective extends DisplayDensityBase {
|
|
|
36777
36798
|
}
|
|
36778
36799
|
}
|
|
36779
36800
|
IgxComboBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxComboBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IgxComboAPIService }, { token: IgxIconService }, { token: DisplayDensityToken, optional: true }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: i0.Injector, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
36780
|
-
IgxComboBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxComboBaseDirective, inputs: { showSearchCaseIcon: "showSearchCaseIcon", overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: "allowCustomValues", itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", filterFunction: "filterFunction", ariaLabelledBy: "ariaLabelledBy", disabled: "disabled", type: "type", filteringOptions: "filteringOptions" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)" }, properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }, { propertyName: "label", first: true, predicate: i0.forwardRef(function () { return IgxLabelDirective; }), descendants: true, static: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0 });
|
|
36801
|
+
IgxComboBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxComboBaseDirective, inputs: { showSearchCaseIcon: "showSearchCaseIcon", overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: "allowCustomValues", itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", filterFunction: "filterFunction", ariaLabelledBy: "ariaLabelledBy", disabled: "disabled", type: "type", resourceStrings: "resourceStrings", filteringOptions: "filteringOptions" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)" }, properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }, { propertyName: "label", first: true, predicate: i0.forwardRef(function () { return IgxLabelDirective; }), descendants: true, static: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0 });
|
|
36781
36802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
|
|
36782
36803
|
type: Directive
|
|
36783
36804
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: undefined, decorators: [{
|
|
@@ -36837,6 +36858,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
|
|
|
36837
36858
|
type: Input
|
|
36838
36859
|
}], type: [{
|
|
36839
36860
|
type: Input
|
|
36861
|
+
}], resourceStrings: [{
|
|
36862
|
+
type: Input
|
|
36840
36863
|
}], opening: [{
|
|
36841
36864
|
type: Output
|
|
36842
36865
|
}], opened: [{
|
|
@@ -37538,14 +37561,14 @@ IgxComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
37538
37561
|
IgxComboAPIService,
|
|
37539
37562
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
|
|
37540
37563
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
|
|
37541
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [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]=\"value\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\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 (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"value.length\" 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\">\n clear\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: this.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<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()\">\n <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n <input class=\"igx-combo-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\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n </igx-input-group>\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\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"this.activeDescendant\">\n <igx-combo-item [itemHeight]='itemHeight' *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\" [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 <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>
|
|
37564
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [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]=\"value\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\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 (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"value.length\" 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\">\n clear\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: this.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<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()\">\n <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n <input class=\"igx-combo-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\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n </igx-input-group>\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\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"this.activeDescendant\">\n <igx-combo-item [itemHeight]='itemHeight' *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\" [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 <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 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: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.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: i0.forwardRef(function () { return i5.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxDropDownItemNavigationDirective; }), selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxForOfDirective; }), selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: i0.forwardRef(function () { return IgxComboAddItemComponent; }), selector: "igx-combo-add-item" }, { kind: "component", type: i0.forwardRef(function () { return IgxComboDropDownComponent; }), selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "component", type: i0.forwardRef(function () { return IgxComboItemComponent; }), selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "pipe", type: i0.forwardRef(function () { return IgxComboFilteringPipe; }), name: "comboFiltering" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxComboGroupingPipe; }), name: "comboGrouping" }] });
|
|
37542
37565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxComboComponent, decorators: [{
|
|
37543
37566
|
type: Component,
|
|
37544
37567
|
args: [{ selector: 'igx-combo', providers: [
|
|
37545
37568
|
IgxComboAPIService,
|
|
37546
37569
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
|
|
37547
37570
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
|
|
37548
|
-
], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [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]=\"value\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\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 (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"value.length\" 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\">\n clear\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: this.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<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()\">\n <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n <input class=\"igx-combo-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\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n </igx-input-group>\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\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"this.activeDescendant\">\n <igx-combo-item [itemHeight]='itemHeight' *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\" [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 <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>
|
|
37571
|
+
], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [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]=\"value\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\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 (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"value.length\" 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\">\n clear\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: this.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<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()\">\n <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n <input class=\"igx-combo-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\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n </igx-input-group>\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\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"this.activeDescendant\">\n <igx-combo-item [itemHeight]='itemHeight' *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\" [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 <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 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" }]
|
|
37549
37572
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: undefined, decorators: [{
|
|
37550
37573
|
type: Optional
|
|
37551
37574
|
}, {
|
|
@@ -38066,14 +38089,14 @@ IgxSimpleComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
38066
38089
|
IgxComboAPIService,
|
|
38067
38090
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38068
38091
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38069
|
-
], 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 (click)=\"onClick($event)\" *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 <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>
|
|
38092
|
+
], 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 (click)=\"onClick($event)\" *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 <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" }] });
|
|
38070
38093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
|
|
38071
38094
|
type: Component,
|
|
38072
38095
|
args: [{ selector: 'igx-simple-combo', providers: [
|
|
38073
38096
|
IgxComboAPIService,
|
|
38074
38097
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38075
38098
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38076
|
-
], 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 (click)=\"onClick($event)\" *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 <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>
|
|
38099
|
+
], 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 (click)=\"onClick($event)\" *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 <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" }]
|
|
38077
38100
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
|
|
38078
38101
|
type: Optional
|
|
38079
38102
|
}, {
|
|
@@ -49159,14 +49182,15 @@ class IgxGridCell {
|
|
|
49159
49182
|
}
|
|
49160
49183
|
}
|
|
49161
49184
|
/**
|
|
49162
|
-
* Gets the validation errors if any.
|
|
49185
|
+
* Gets the validation status and errors, if any.
|
|
49163
49186
|
* ```typescript
|
|
49164
|
-
* let
|
|
49187
|
+
* let validation = this.cell.validation;
|
|
49188
|
+
* let errors = validation.errors;
|
|
49165
49189
|
* ```
|
|
49166
49190
|
*/
|
|
49167
|
-
get
|
|
49191
|
+
get validation() {
|
|
49168
49192
|
const form = this.grid.validation.getFormControl(this.row.key, this.column.field);
|
|
49169
|
-
return form?.errors;
|
|
49193
|
+
return { status: form?.status || 'VALID', errors: form?.errors };
|
|
49170
49194
|
}
|
|
49171
49195
|
/**
|
|
49172
49196
|
* Sets the current edit value while a cell is in edit mode.
|
|
@@ -50329,7 +50353,7 @@ class IgxColumnComponent {
|
|
|
50329
50353
|
* Sets the error template.
|
|
50330
50354
|
* ```html
|
|
50331
50355
|
* <ng-template igxCellValidationError let-cell="cell" #errorTemplate >
|
|
50332
|
-
* <div *ngIf="cell.errors?.['forbiddenName']">
|
|
50356
|
+
* <div *ngIf="cell.validation.errors?.['forbiddenName']">
|
|
50333
50357
|
* This name is forbidden.
|
|
50334
50358
|
* </div>
|
|
50335
50359
|
* </ng-template>
|
|
@@ -52607,14 +52631,15 @@ class BaseRow {
|
|
|
52607
52631
|
this.grid.crudService.row.getClassName() === IgxAddRow.name &&
|
|
52608
52632
|
this.grid.crudService.row.id === this.key;
|
|
52609
52633
|
}
|
|
52610
|
-
/** Gets the validation errors if any.
|
|
52634
|
+
/** Gets the validation status and errors, if any.
|
|
52611
52635
|
* ```typescript
|
|
52612
|
-
* let
|
|
52636
|
+
* let validation = row.validation;
|
|
52637
|
+
* let errors = validation.errors;
|
|
52613
52638
|
* ```
|
|
52614
52639
|
*/
|
|
52615
|
-
get
|
|
52640
|
+
get validation() {
|
|
52616
52641
|
const formGroup = this.grid.validation.getFormGroup(this.key);
|
|
52617
|
-
return formGroup?.errors;
|
|
52642
|
+
return { status: formGroup?.status || 'VALID', errors: formGroup?.errors };
|
|
52618
52643
|
}
|
|
52619
52644
|
/**
|
|
52620
52645
|
* The data record that populates the row.
|
|
@@ -58967,19 +58992,19 @@ class IgxGridValidationService {
|
|
|
58967
58992
|
const colKey = this.getFieldKey(col.field);
|
|
58968
58993
|
const control = formGroup.get(colKey);
|
|
58969
58994
|
if (control) {
|
|
58970
|
-
state.push({ field: colKey,
|
|
58995
|
+
state.push({ field: colKey, status: control.status, errors: control.errors });
|
|
58971
58996
|
}
|
|
58972
58997
|
}
|
|
58973
|
-
states.push({ key: key,
|
|
58998
|
+
states.push({ key: key, status: formGroup.status, fields: state, errors: formGroup.errors });
|
|
58974
58999
|
});
|
|
58975
59000
|
return states;
|
|
58976
59001
|
}
|
|
58977
|
-
/**
|
|
58978
|
-
|
|
58979
|
-
|
|
59002
|
+
/**
|
|
59003
|
+
* Returns all invalid record states.
|
|
59004
|
+
*/
|
|
58980
59005
|
getInvalid() {
|
|
58981
59006
|
const validity = this.getValidity();
|
|
58982
|
-
return validity.filter(x =>
|
|
59007
|
+
return validity.filter(x => x.status === 'INVALID');
|
|
58983
59008
|
}
|
|
58984
59009
|
/**
|
|
58985
59010
|
* @hidden
|
|
@@ -59000,11 +59025,11 @@ class IgxGridValidationService {
|
|
|
59000
59025
|
this.updateStatus();
|
|
59001
59026
|
}
|
|
59002
59027
|
/** Marks the associated record or field as touched.
|
|
59003
|
-
* @param
|
|
59028
|
+
* @param key The id of the record that will be marked as touched.
|
|
59004
59029
|
* @param field Optional. The field from the record that will be marked as touched. If not provided all fields will be touched.
|
|
59005
59030
|
*/
|
|
59006
|
-
markAsTouched(
|
|
59007
|
-
const rowGroup = this.getFormGroup(
|
|
59031
|
+
markAsTouched(key, field) {
|
|
59032
|
+
const rowGroup = this.getFormGroup(key);
|
|
59008
59033
|
if (!rowGroup)
|
|
59009
59034
|
return;
|
|
59010
59035
|
rowGroup.markAsTouched();
|
|
@@ -59025,13 +59050,12 @@ class IgxGridValidationService {
|
|
|
59025
59050
|
this.grid.validationStatusChange.emit({ status: this.valid ? 'VALID' : 'INVALID', owner: this.grid });
|
|
59026
59051
|
}
|
|
59027
59052
|
}
|
|
59028
|
-
/** Clears
|
|
59029
|
-
* @param
|
|
59030
|
-
* @returns Array of IRecordValidationState.
|
|
59053
|
+
/** Clears validation state by key or all states if none is provided.
|
|
59054
|
+
* @param key Optional. The key of the record for which to clear state.
|
|
59031
59055
|
*/
|
|
59032
|
-
clear(
|
|
59033
|
-
if (
|
|
59034
|
-
this._validityStates.delete(
|
|
59056
|
+
clear(key) {
|
|
59057
|
+
if (key !== undefined) {
|
|
59058
|
+
this._validityStates.delete(key);
|
|
59035
59059
|
}
|
|
59036
59060
|
else {
|
|
59037
59061
|
this._validityStates.clear();
|