igniteui-angular 13.2.23 → 13.2.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/core/utils.mjs +3 -2
- package/esm2020/lib/directives/mask/mask-parsing.service.mjs +7 -3
- package/esm2020/lib/directives/mask/mask.directive.mjs +12 -10
- package/esm2020/lib/radio/radio.component.mjs +1 -2
- package/esm2020/lib/simple-combo/simple-combo.component.mjs +3 -3
- package/fesm2015/igniteui-angular.mjs +22 -15
- package/fesm2015/igniteui-angular.mjs.map +1 -1
- package/fesm2020/igniteui-angular.mjs +21 -15
- package/fesm2020/igniteui-angular.mjs.map +1 -1
- package/lib/directives/mask/mask-parsing.service.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1668,7 +1668,8 @@ class PlatformUtil {
|
|
|
1668
1668
|
style.flexBasis = '';
|
|
1669
1669
|
}
|
|
1670
1670
|
range.selectNodeContents(node);
|
|
1671
|
-
const
|
|
1671
|
+
const scale = node.getBoundingClientRect().width / node.offsetWidth;
|
|
1672
|
+
const width = range.getBoundingClientRect().width / scale;
|
|
1672
1673
|
if (!this.isFirefox) {
|
|
1673
1674
|
// we need that hack - otherwise content won't be measured correctly in IE/Edge
|
|
1674
1675
|
node.style.overflow = overflow;
|
|
@@ -17204,7 +17205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
17204
17205
|
const MASK_FLAGS = ['C', '&', 'a', 'A', '?', 'L', '9', '0', '#'];
|
|
17205
17206
|
/** @hidden */
|
|
17206
17207
|
class MaskParsingService {
|
|
17207
|
-
applyMask(inputVal, maskOptions) {
|
|
17208
|
+
applyMask(inputVal, maskOptions, pos = 0) {
|
|
17208
17209
|
let outputVal = '';
|
|
17209
17210
|
let value = '';
|
|
17210
17211
|
const mask = maskOptions.format;
|
|
@@ -17235,7 +17236,6 @@ class MaskParsingService {
|
|
|
17235
17236
|
if (nonLiteralValues.length > nonLiteralIndices.length) {
|
|
17236
17237
|
nonLiteralValues.splice(nonLiteralIndices.length);
|
|
17237
17238
|
}
|
|
17238
|
-
let pos = 0;
|
|
17239
17239
|
for (const nonLiteralValue of nonLiteralValues) {
|
|
17240
17240
|
const char = nonLiteralValue;
|
|
17241
17241
|
outputVal = this.replaceCharAt(outputVal, nonLiteralIndices[pos++], char);
|
|
@@ -17282,6 +17282,11 @@ class MaskParsingService {
|
|
|
17282
17282
|
}
|
|
17283
17283
|
maskedValue = this.replaceCharAt(maskedValue, i, char);
|
|
17284
17284
|
}
|
|
17285
|
+
if (Math.abs(end - start) >= 1) {
|
|
17286
|
+
// set cursor to be max between last cursor pos and the calculated `end`
|
|
17287
|
+
// since on `delete` the cursor should move forward
|
|
17288
|
+
cursor = Math.max(cursor, end);
|
|
17289
|
+
}
|
|
17285
17290
|
return { value: maskedValue, end: cursor };
|
|
17286
17291
|
}
|
|
17287
17292
|
replaceCharAt(strValue, index, char) {
|
|
@@ -17531,14 +17536,16 @@ class IgxMaskDirective {
|
|
|
17531
17536
|
}
|
|
17532
17537
|
this.inputValue = isInputComplete ?
|
|
17533
17538
|
this.inputValue.substring(0, this.selectionEnd - numberOfMaskLiterals) + this.inputValue.substring(this.selectionEnd)
|
|
17534
|
-
: this._compositionValue
|
|
17535
|
-
this.
|
|
17536
|
-
|
|
17537
|
-
|
|
17538
|
-
|
|
17539
|
-
|
|
17540
|
-
|
|
17541
|
-
|
|
17539
|
+
: this._compositionValue?.substring(0, this._compositionStartIndex) || this.inputValue;
|
|
17540
|
+
if (this._compositionValue) {
|
|
17541
|
+
this._start = this.selectionStart;
|
|
17542
|
+
this._end = this.selectionEnd;
|
|
17543
|
+
this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
|
|
17544
|
+
this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
|
|
17545
|
+
this.nativeElement.selectionEnd = this._end;
|
|
17546
|
+
this._start = this.selectionStart;
|
|
17547
|
+
this._end = this.selectionEnd;
|
|
17548
|
+
}
|
|
17542
17549
|
}
|
|
17543
17550
|
if (this._hasDropAction) {
|
|
17544
17551
|
this._start = this.selectionStart;
|
|
@@ -17578,7 +17585,7 @@ class IgxMaskDirective {
|
|
|
17578
17585
|
}
|
|
17579
17586
|
/** @hidden */
|
|
17580
17587
|
onDragEnter() {
|
|
17581
|
-
if (!this._focused) {
|
|
17588
|
+
if (!this._focused && !this._dataValue) {
|
|
17582
17589
|
this.showMask(this._dataValue);
|
|
17583
17590
|
}
|
|
17584
17591
|
}
|
|
@@ -18167,7 +18174,6 @@ class IgxRadioComponent {
|
|
|
18167
18174
|
* @memberof IgxRadioComponent
|
|
18168
18175
|
*/
|
|
18169
18176
|
select() {
|
|
18170
|
-
this.nativeRadio.nativeElement.focus();
|
|
18171
18177
|
if (!this.checked) {
|
|
18172
18178
|
this.checked = true;
|
|
18173
18179
|
this.change.emit({ value: this.value, radio: this });
|
|
@@ -37993,14 +37999,14 @@ IgxSimpleComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
|
|
|
37993
37999
|
IgxComboAPIService,
|
|
37994
38000
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
37995
38001
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
37996
|
-
], 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\" (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n [igxTextSelection]=\"!composing\" />\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
|
|
38002
|
+
], 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\" (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n [igxTextSelection]=\"!composing\" />\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClear($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\">\n clear\n </igx-icon>\n </igx-suffix>\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\">\n {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n </igx-icon>\n </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n [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\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n (keydown)=\"handleItemKeyDown($event)\">\n <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:true\n | comboGrouping:groupKey:valueKey:groupSortingDirection;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n", components: [{ type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "singleMode"] }, { type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }], directives: [{ type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], pipes: { "comboGrouping": IgxComboGroupingPipe, "comboFiltering": IgxComboFilteringPipe } });
|
|
37997
38003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
|
|
37998
38004
|
type: Component,
|
|
37999
38005
|
args: [{ selector: 'igx-simple-combo', providers: [
|
|
38000
38006
|
IgxComboAPIService,
|
|
38001
38007
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
38002
38008
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
38003
|
-
], 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\" (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n [igxTextSelection]=\"!composing\" />\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
|
|
38009
|
+
], 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\" (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n [igxTextSelection]=\"!composing\" />\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClear($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\">\n clear\n </igx-icon>\n </igx-suffix>\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\">\n {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n </igx-icon>\n </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n [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\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n (keydown)=\"handleItemKeyDown($event)\">\n <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:true\n | comboGrouping:groupKey:valueKey:groupSortingDirection;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n" }]
|
|
38004
38010
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
|
|
38005
38011
|
type: Optional
|
|
38006
38012
|
}, {
|