igniteui-angular 18.2.0-rc.1 → 18.2.1

package/fesm2022/igniteui-angular.mjs

@@ -32178,7 +32178,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: IgxDaysViewComponent
             },
-        ], viewQueries: [{ propertyName: "dates", predicate: IgxDayItemComponent, descendants: true, read: IgxDayItemComponent }], usesInheritance: true, ngImport: i0, template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    <div\n        role=\"columnheader\"\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__label igx-days-view__label--week-number\"\n    >\n        <span>\n            <i>{{ weekNumberHeader.short | titlecase }}</i>\n        </span>\n    </div>\n    <span\n        role=\"columnheader\"\n        [attr.aria-label]=\"dayName.long\"\n        *ngFor=\"let dayName of weekHeaderLabels\"\n        class=\"igx-days-view__label\"\n    >\n        <span class=\"igx-days-view__label-inner\">\n            {{ dayName.formatted | titlecase }}\n        </span>\n    </span>\n</div>\n\n<div\n    *ngFor=\"\n        let week of monthWeeks;\n        last as isLast;\n        index as i;\n        trackBy: rowTracker\n    \"\n    class=\"igx-days-view__row\"\n    role=\"row\"\n>\n    <div\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__date igx-days-view__date--week-number\"\n    >\n        <span\n            role=\"rowheader\"\n            class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n        >\n            {{ getWeekNumber(week[0]) }}\n        </span>\n    </div>\n\n    <igx-day-item\n        #item\n        *ngFor=\"let day of week; trackBy: dateTracker\"\n        class=\"igx-days-view__date\"\n        role=\"gridcell\"\n        [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n        [attr.aria-selected]=\"isSelected(day)\"\n        [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n        [attr.aria-label]=\"\n            isFirstInRange(day)\n                ? day.native.toDateString() +\n                  ', ' +\n                  resourceStrings.igx_calendar_range_start\n                : isLastInRange(day)\n                  ? day.native.toDateString() +\n                    ', ' +\n                    resourceStrings.igx_calendar_range_end\n                  : day.native.toDateString()\n        \"\n        [date]=\"day\"\n        [viewDate]=\"viewDate\"\n        [selection]=\"selection\"\n        [selected]=\"isSelected(day)\"\n        [isActive]=\"isActiveDate(day)\"\n        [isLastInRange]=\"isLastInRange(day)\"\n        [isFirstInRange]=\"isFirstInRange(day)\"\n        [isWithinRange]=\"isWithinRange(day.native, true)\"\n        [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n        [disabledDates]=\"disabledDates\"\n        [specialDates]=\"specialDates\"\n        [hideLeadingDays]=\"hideLeadingDays\"\n        [hideTrailingDays]=\"hideTrailingDays\"\n        [attr.tabindex]=\"-1\"\n        (mouseDown)=\"handleDateClick(item)\"\n        (mouseEnter)=\"changePreviewRange(day.native)\"\n        (mouseLeave)=\"clearPreviewRange()\"\n    >\n        {{ formattedDate(day.native) }}\n    </igx-day-item>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxDayItemComponent, selector: "igx-day-item", inputs: ["date", "viewDate", "selection", "selected", "disabledDates", "specialDates", "hideOutsideDays", "isLastInRange", "isFirstInRange", "isWithinRange", "isWithinPreviewRange", "hideLeadingDays", "hideTrailingDays", "isActive"], outputs: ["dateSelection", "mouseEnter", "mouseLeave", "mouseDown"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dates", predicate: IgxDayItemComponent, descendants: true, read: IgxDayItemComponent }], usesInheritance: true, ngImport: i0, template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    <div\n        role=\"columnheader\"\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__label igx-days-view__label--week-number\"\n    >\n        <span>\n            <i>{{ weekNumberHeader.short | titlecase }}</i>\n        </span>\n    </div>\n    <span\n        role=\"columnheader\"\n        [attr.aria-label]=\"dayName.long\"\n        *ngFor=\"let dayName of weekHeaderLabels\"\n        class=\"igx-days-view__label\"\n    >\n        <span class=\"igx-days-view__label-inner\">\n            {{ dayName.formatted | titlecase }}\n        </span>\n    </span>\n</div>\n\n<div\n    *ngFor=\"\n        let week of monthWeeks;\n        last as isLast;\n        index as i;\n        trackBy: rowTracker\n    \"\n    class=\"igx-days-view__row\"\n    role=\"row\"\n>\n    <div\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__date igx-days-view__date--week-number\"\n    >\n        <span\n            role=\"rowheader\"\n            class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n        >\n            {{ getWeekNumber(week[0]) }}\n        </span>\n    </div>\n\n    <igx-day-item\n        #item\n        *ngFor=\"let day of week; trackBy: dateTracker\"\n        class=\"igx-days-view__date\"\n        role=\"gridcell\"\n        [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n        [attr.aria-selected]=\"isSelected(day)\"\n        [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n        [attr.aria-label]=\"\n            isFirstInRange(day)\n                ? day.native.toDateString() +\n                  ', ' +\n                  resourceStrings.igx_calendar_range_start\n                : isLastInRange(day)\n                  ? day.native.toDateString() +\n                    ', ' +\n                    resourceStrings.igx_calendar_range_end\n                  : day.native.toDateString()\n        \"\n        [date]=\"day\"\n        [viewDate]=\"viewDate\"\n        [selection]=\"selection\"\n        [selected]=\"isSelected(day)\"\n        [isActive]=\"isActiveDate(day)\"\n        [isLastInRange]=\"isLastInRange(day)\"\n        [isFirstInRange]=\"isFirstInRange(day)\"\n        [isWithinRange]=\"isWithinRange(day.native, true)\"\n        [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n        [disabledDates]=\"disabledDates\"\n        [specialDates]=\"specialDates\"\n        [hideLeadingDays]=\"hideLeadingDays\"\n        [hideTrailingDays]=\"hideTrailingDays\"\n        [attr.tabindex]=\"-1\"\n        (click)=\"handleDateClick(item)\"\n        (mouseEnter)=\"changePreviewRange(day.native)\"\n        (mouseLeave)=\"clearPreviewRange()\"\n    >\n        {{ formattedDate(day.native) }}\n    </igx-day-item>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxDayItemComponent, selector: "igx-day-item", inputs: ["date", "viewDate", "selection", "selected", "disabledDates", "specialDates", "hideOutsideDays", "isLastInRange", "isFirstInRange", "isWithinRange", "isWithinPreviewRange", "hideLeadingDays", "hideTrailingDays", "isActive"], outputs: ["dateSelection", "mouseEnter", "mouseLeave", "mouseDown"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxDaysViewComponent, decorators: [{
             type: Component,
@@ -32188,7 +32188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: IgxDaysViewComponent
                         },
-                    ], selector: 'igx-days-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgFor, IgxDayItemComponent, TitleCasePipe], template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    <div\n        role=\"columnheader\"\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__label igx-days-view__label--week-number\"\n    >\n        <span>\n            <i>{{ weekNumberHeader.short | titlecase }}</i>\n        </span>\n    </div>\n    <span\n        role=\"columnheader\"\n        [attr.aria-label]=\"dayName.long\"\n        *ngFor=\"let dayName of weekHeaderLabels\"\n        class=\"igx-days-view__label\"\n    >\n        <span class=\"igx-days-view__label-inner\">\n            {{ dayName.formatted | titlecase }}\n        </span>\n    </span>\n</div>\n\n<div\n    *ngFor=\"\n        let week of monthWeeks;\n        last as isLast;\n        index as i;\n        trackBy: rowTracker\n    \"\n    class=\"igx-days-view__row\"\n    role=\"row\"\n>\n    <div\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__date igx-days-view__date--week-number\"\n    >\n        <span\n            role=\"rowheader\"\n            class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n        >\n            {{ getWeekNumber(week[0]) }}\n        </span>\n    </div>\n\n    <igx-day-item\n        #item\n        *ngFor=\"let day of week; trackBy: dateTracker\"\n        class=\"igx-days-view__date\"\n        role=\"gridcell\"\n        [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n        [attr.aria-selected]=\"isSelected(day)\"\n        [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n        [attr.aria-label]=\"\n            isFirstInRange(day)\n                ? day.native.toDateString() +\n                  ', ' +\n                  resourceStrings.igx_calendar_range_start\n                : isLastInRange(day)\n                  ? day.native.toDateString() +\n                    ', ' +\n                    resourceStrings.igx_calendar_range_end\n                  : day.native.toDateString()\n        \"\n        [date]=\"day\"\n        [viewDate]=\"viewDate\"\n        [selection]=\"selection\"\n        [selected]=\"isSelected(day)\"\n        [isActive]=\"isActiveDate(day)\"\n        [isLastInRange]=\"isLastInRange(day)\"\n        [isFirstInRange]=\"isFirstInRange(day)\"\n        [isWithinRange]=\"isWithinRange(day.native, true)\"\n        [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n        [disabledDates]=\"disabledDates\"\n        [specialDates]=\"specialDates\"\n        [hideLeadingDays]=\"hideLeadingDays\"\n        [hideTrailingDays]=\"hideTrailingDays\"\n        [attr.tabindex]=\"-1\"\n        (mouseDown)=\"handleDateClick(item)\"\n        (mouseEnter)=\"changePreviewRange(day.native)\"\n        (mouseLeave)=\"clearPreviewRange()\"\n    >\n        {{ formattedDate(day.native) }}\n    </igx-day-item>\n</div>\n" }]
+                    ], selector: 'igx-days-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgFor, IgxDayItemComponent, TitleCasePipe], template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    <div\n        role=\"columnheader\"\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__label igx-days-view__label--week-number\"\n    >\n        <span>\n            <i>{{ weekNumberHeader.short | titlecase }}</i>\n        </span>\n    </div>\n    <span\n        role=\"columnheader\"\n        [attr.aria-label]=\"dayName.long\"\n        *ngFor=\"let dayName of weekHeaderLabels\"\n        class=\"igx-days-view__label\"\n    >\n        <span class=\"igx-days-view__label-inner\">\n            {{ dayName.formatted | titlecase }}\n        </span>\n    </span>\n</div>\n\n<div\n    *ngFor=\"\n        let week of monthWeeks;\n        last as isLast;\n        index as i;\n        trackBy: rowTracker\n    \"\n    class=\"igx-days-view__row\"\n    role=\"row\"\n>\n    <div\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__date igx-days-view__date--week-number\"\n    >\n        <span\n            role=\"rowheader\"\n            class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n        >\n            {{ getWeekNumber(week[0]) }}\n        </span>\n    </div>\n\n    <igx-day-item\n        #item\n        *ngFor=\"let day of week; trackBy: dateTracker\"\n        class=\"igx-days-view__date\"\n        role=\"gridcell\"\n        [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n        [attr.aria-selected]=\"isSelected(day)\"\n        [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n        [attr.aria-label]=\"\n            isFirstInRange(day)\n                ? day.native.toDateString() +\n                  ', ' +\n                  resourceStrings.igx_calendar_range_start\n                : isLastInRange(day)\n                  ? day.native.toDateString() +\n                    ', ' +\n                    resourceStrings.igx_calendar_range_end\n                  : day.native.toDateString()\n        \"\n        [date]=\"day\"\n        [viewDate]=\"viewDate\"\n        [selection]=\"selection\"\n        [selected]=\"isSelected(day)\"\n        [isActive]=\"isActiveDate(day)\"\n        [isLastInRange]=\"isLastInRange(day)\"\n        [isFirstInRange]=\"isFirstInRange(day)\"\n        [isWithinRange]=\"isWithinRange(day.native, true)\"\n        [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n        [disabledDates]=\"disabledDates\"\n        [specialDates]=\"specialDates\"\n        [hideLeadingDays]=\"hideLeadingDays\"\n        [hideTrailingDays]=\"hideTrailingDays\"\n        [attr.tabindex]=\"-1\"\n        (click)=\"handleDateClick(item)\"\n        (mouseEnter)=\"changePreviewRange(day.native)\"\n        (mouseLeave)=\"clearPreviewRange()\"\n    >\n        {{ formattedDate(day.native) }}\n    </igx-day-item>\n</div>\n" }]
         }], ctorParameters: () => [{ type: PlatformUtil }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -32655,20 +32655,17 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
             });
         });
     }
-    onWrapperFocus(event) {
-        event.stopPropagation();
+    onWrapperFocus(_event) {
         this.showActiveDay = true;
         this.monthViews.forEach(view => view.changePreviewRange(this.activeDate));
     }
-    onWrapperBlur(event) {
-        event.stopPropagation();
+    onWrapperBlur(_event) {
         this.showActiveDay = false;
         this.monthViews.forEach(view => view.clearPreviewRange());
         this._onTouchedCallback();
     }
     handleArrowKeydown(event, delta) {
         event.preventDefault();
-        event.stopPropagation();
         const date = getClosestActiveDate(CalendarDay.from(this.activeDate), delta, this.disabledDates);
         this.activeDate = date.native;
         const dates = this.viewDates;
@@ -32680,7 +32677,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
     }
     handlePageUpDown(event, delta) {
         event.preventDefault();
-        event.stopPropagation();
         const dir = delta > 0 ? "next" /* ScrollDirection.NEXT */ : "prev" /* ScrollDirection.PREV */;
         if (this.activeView === IgxCalendarView.Month && event.shiftKey) {
             this.viewDate = CalendarDay.from(this.viewDate).add('year', delta).native;
@@ -32746,7 +32742,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
         }
     }
     onEnter(event) {
-        event.stopPropagation();
         if (this.activeView === IgxCalendarView.Month) {
             this.handleDateSelection(this.activeDate);
             this.cdr.detectChanges();
@@ -32760,7 +32755,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
         this.monthViews.forEach(view => view.clearPreviewRange());
     }
     onHome(event) {
-        event.stopPropagation();
         if (this.activeView === IgxCalendarView.Month) {
             const dates = this.monthViews.toArray()
                 .flatMap((view) => view.dates.toArray())
@@ -32776,7 +32770,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
         }
     }
     onEnd(event) {
-        event.stopPropagation();
         if (this.activeView === IgxCalendarView.Month) {
             const dates = this.monthViews.toArray()
                 .flatMap((view) => view.dates.toArray())
@@ -38087,6 +38080,9 @@ class IgxComboBaseDirective {
     /** @hidden @internal */
     handleClosed() {
         this.closed.emit({ owner: this });
+        if (this.comboInput.nativeElement !== this.document.activeElement) {
+            this.validateComboState();
+        }
     }
     /** @hidden @internal */
     handleKeyDown(event) {
@@ -38120,15 +38116,14 @@ class IgxComboBaseDirective {
     onBlur() {
         if (this.collapsed) {
             this._onTouchedCallback();
-            if (this.ngControl && this.ngControl.invalid) {
-                this.valid = IgxInputState.INVALID;
-            }
-            else {
-                this.valid = IgxInputState.INITIAL;
-            }
+            this.validateComboState();
         }
     }
     /** @hidden @internal */
+    onFocus() {
+        this._onTouchedCallback();
+    }
+    /** @hidden @internal */
     setActiveDescendant() {
         this.activeDescendant = this.dropdown.focusedItem?.id || '';
     }
@@ -38136,6 +38131,14 @@ class IgxComboBaseDirective {
     toggleCaseSensitive() {
         this.filteringOptions = Object.assign({}, this.filteringOptions, { caseSensitive: !this.filteringOptions.caseSensitive });
     }
+    validateComboState() {
+        if (this.ngControl && this.ngControl.invalid) {
+            this.valid = IgxInputState.INVALID;
+        }
+        else {
+            this.valid = IgxInputState.INITIAL;
+        }
+    }
     get isTouchedOrDirty() {
         return (this.ngControl.control.touched || this.ngControl.control.dirty);
     }
@@ -39012,7 +39015,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
-        ], 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\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" 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\">\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]=\"getSearchPlaceholderText()\"\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:disableFiltering\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            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [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>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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" }] }); }
+        ], 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            (focus)=\"onFocus()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" 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\">\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]=\"getSearchPlaceholderText()\"\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:disableFiltering\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            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [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>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
@@ -39038,7 +39041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         IgxRippleDirective,
                         IgxComboFilteringPipe,
                         IgxComboGroupingPipe
-                    ], 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\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" 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\">\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]=\"getSearchPlaceholderText()\"\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:disableFiltering\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            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [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>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
+                    ], 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            (focus)=\"onFocus()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" 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\">\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]=\"getSearchPlaceholderText()\"\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:disableFiltering\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            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [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>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -39894,6 +39897,17 @@ class PickerBaseDirective {
     get isDropdown() {
         return this.mode === PickerInteractionMode.DropDown;
     }
+    /**
+     * Returns if there's focus within the picker's element OR popup container
+     * @hidden @internal
+     */
+    get isFocused() {
+        const document = this.element.nativeElement?.getRootNode();
+        if (!document?.activeElement)
+            return false;
+        return this.element.nativeElement.contains(document.activeElement)
+            || !this.collapsed && this.toggleContainer.contains(document.activeElement);
+    }
     constructor(element, _localeId, _inputGroupType) {
         this.element = element;
         this._localeId = _localeId;
@@ -40298,6 +40312,9 @@ class IgxDatePickerComponent extends PickerBaseDirective {
     get pickerResourceStrings() {
         return Object.assign({}, this._resourceStrings, this.resourceStrings);
     }
+    get toggleContainer() {
+        return this._calendarContainer;
+    }
     /** @hidden @internal */
     onKeyDown(event) {
         switch (event.key) {
@@ -40617,15 +40634,12 @@ class IgxDatePickerComponent extends PickerBaseDirective {
                 return;
             }
             this._initializeCalendarContainer(e.componentRef.instance);
+            this._calendarContainer = e.componentRef.location.nativeElement;
             this._collapsed = false;
         });
         this._overlayService.opened.pipe(...this._overlaySubFilter).subscribe(() => {
             this.opened.emit({ owner: this });
-            // INFO: Commented out during the calendar refactoring as I couldn't
-            // determine why this is needed.
-            // if (this._calendar?.daysView?.selectedDates) {
-            //     return;
-            // }
+            this._calendar.wrapper?.nativeElement?.focus();
             if (this._targetViewDate) {
                 this._targetViewDate.setHours(0, 0, 0, 0);
                 // INFO: We need to set the active date to the target view date so there's something to
@@ -40641,7 +40655,8 @@ class IgxDatePickerComponent extends PickerBaseDirective {
                 return;
             }
             // do not focus the input if clicking outside in dropdown mode
-            if (this.getEditElement() && !(args.event && this.isDropdown)) {
+            const outsideEvent = args.event && args.event.key !== this.platform.KEYMAP.ESCAPE;
+            if (this.getEditElement() && !(outsideEvent && this.isDropdown)) {
                 this.inputDirective.focus();
             }
             else {
@@ -40654,6 +40669,8 @@ class IgxDatePickerComponent extends PickerBaseDirective {
             this._overlayService.detach(this._overlayId);
             this._collapsed = true;
             this._overlayId = null;
+            this._calendar = null;
+            this._calendarContainer = undefined;
         });
     }
     getMinMaxDates() {
@@ -47232,6 +47249,9 @@ class IgxTimePickerComponent extends PickerBaseDirective {
     get appliedFormat() {
         return this.inputFormat || this.dateTimeEditor?.inputFormat;
     }
+    get toggleContainer() {
+        return this.toggleRef?.element;
+    }
     get required() {
         if (this._ngControl && this._ngControl.control && this._ngControl.control.validator) {
             // Run the validation with empty object to check if required is enabled.
@@ -57879,10 +57899,10 @@ class IgxGridFilteringRowComponent {
         }
         requestAnimationFrame(() => {
             const focusedElement = document.activeElement;
-            if (focusedElement.classList.contains('igx-chip__remove') || focusedElement.tagName === 'IGX-DAY-ITEM') {
+            if (focusedElement.classList.contains('igx-chip__remove')) {
                 return;
             }
-            if (!(focusedElement && this.editorsContain(focusedElement))
+            if (!(focusedElement && this.editorFocused(focusedElement))
                 && this.dropDownConditions.collapsed) {
                 this.commitInput();
             }
@@ -57962,7 +57982,7 @@ class IgxGridFilteringRowComponent {
     onChipPointerdown(args, chip) {
         const activeElement = document.activeElement;
         this._cancelChipClick = chip.selected
-            && activeElement && this.editorsContain(activeElement);
+            && activeElement && this.editorFocused(activeElement);
     }
     onChipClick(args, item) {
         if (this._cancelChipClick) {
@@ -58179,11 +58199,11 @@ class IgxGridFilteringRowComponent {
     filter() {
         this.filteringService.filterInternal(this.column.field);
     }
-    editorsContain(child) {
+    editorFocused(activeElement) {
         // if the first check is false and the second is undefined this will return undefined
         // make sure it always returns boolean
-        return !!(this.inputGroup && this.inputGroup.nativeElement.contains(child)
-            || this.picker && this.picker.element.nativeElement.contains(child));
+        return !!(this.inputGroup && this.inputGroup.nativeElement.contains(activeElement)
+            || this.picker && this.picker.isFocused);
     }
     get isColumnFiltered() {
         return this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0;
@@ -92216,6 +92236,9 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
     get separatorClass() {
         return 'igx-date-range-picker__label';
     }
+    get toggleContainer() {
+        return this._calendarContainer;
+    }
     get required() {
         if (this._ngControl && this._ngControl.control && this._ngControl.control.validator) {
             const error = this._ngControl.control.validator({});
@@ -92549,7 +92572,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
         if (args.cancel) {
             return;
         }
-        if (this.isDropdown && e?.event && !this.element.nativeElement.contains(e.event.target)) {
+        if (this.isDropdown && e?.event && !this.isFocused) {
             // outside click
             this.updateValidityOnBlur();
         }
@@ -92576,10 +92599,12 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
                 return;
             }
             this._initializeCalendarContainer(e.componentRef.instance);
+            this._calendarContainer = e.componentRef.location.nativeElement;
             this._collapsed = false;
             this.updateCalendar();
         });
         this._overlayService.opened.pipe(...this._overlaySubFilter).subscribe(() => {
+            this.calendar.wrapper.nativeElement.focus();
             this.opened.emit({ owner: this });
         });
         this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e) => {
@@ -92589,6 +92614,8 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
             this._overlayService.detach(this._overlayId);
             this._collapsed = true;
             this._overlayId = null;
+            this._calendar = null;
+            this._calendarContainer = undefined;
             this.closed.emit({ owner: this });
         });
     }