igniteui-angular 17.2.22 → 17.2.23

package/fesm2022/igniteui-angular.mjs

@@ -30702,7 +30702,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 role=\"row\" class=\"igx-days-view__row\">\n    <div\n        role=\"columnheader\"\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__label igx-days-view__label--week-number\"\n    >\n        <span>Wk</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 role=\"row\" class=\"igx-days-view__row\">\n    <div\n        role=\"columnheader\"\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__label igx-days-view__label--week-number\"\n    >\n        <span>Wk</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: "17.2.4", ngImport: i0, type: IgxDaysViewComponent, decorators: [{
             type: Component,
@@ -30712,7 +30712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.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 role=\"row\" class=\"igx-days-view__row\">\n    <div\n        role=\"columnheader\"\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__label igx-days-view__label--week-number\"\n    >\n        <span>Wk</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 role=\"row\" class=\"igx-days-view__row\">\n    <div\n        role=\"columnheader\"\n        *ngIf=\"showWeekNumbers\"\n        class=\"igx-days-view__label igx-days-view__label--week-number\"\n    >\n        <span>Wk</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]
@@ -31179,20 +31179,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;
@@ -31204,7 +31201,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;
@@ -31270,7 +31266,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
         }
     }
     onEnter(event) {
-        event.stopPropagation();
         if (this.activeView === IgxCalendarView.Month) {
             this.handleDateSelection(this.activeDate);
             this.cdr.detectChanges();
@@ -31284,7 +31279,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())
@@ -31300,7 +31294,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
         }
     }
     onEnd(event) {
-        event.stopPropagation();
         if (this.activeView === IgxCalendarView.Month) {
             const dates = this.monthViews.toArray()
                 .flatMap((view) => view.dates.toArray())
@@ -36580,6 +36573,9 @@ class IgxComboBaseDirective extends DisplayDensityBase {
     /** @hidden @internal */
     handleClosed() {
         this.closed.emit({ owner: this });
+        if (this.comboInput.nativeElement !== document.activeElement) {
+            this.validateComboState();
+        }
     }
     /** @hidden @internal */
     handleKeyDown(event) {
@@ -36613,15 +36609,14 @@ class IgxComboBaseDirective extends DisplayDensityBase {
     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 || '';
     }
@@ -36629,6 +36624,14 @@ class IgxComboBaseDirective extends DisplayDensityBase {
     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);
     }
@@ -37522,7 +37525,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 [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]=\"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\">\n            {{ clearIcon }}\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 *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\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]=\"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\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            [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", "active", "name"] }, { 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 [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]=\"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\">\n            {{ clearIcon }}\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 *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\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]=\"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\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            [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", "active", "name"] }, { 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: "17.2.4", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
@@ -37548,7 +37551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         IgxRippleDirective,
                         IgxComboFilteringPipe,
                         IgxComboGroupingPipe
-                    ], 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]=\"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\">\n            {{ clearIcon }}\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 *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\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]=\"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\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            [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 [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]=\"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\">\n            {{ clearIcon }}\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 *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\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]=\"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\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            [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: IgxIconService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -38385,6 +38388,17 @@ class PickerBaseDirective extends DisplayDensityBase {
     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, _displayDensityOptions, _inputGroupType) {
         super(_displayDensityOptions || { displayDensity: 'comfortable' }, element);
         this.element = element;
@@ -38796,6 +38810,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) {
@@ -39116,15 +39133,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
@@ -39140,7 +39154,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 {
@@ -39153,6 +39168,8 @@ class IgxDatePickerComponent extends PickerBaseDirective {
             this._overlayService.detach(this._overlayId);
             this._collapsed = true;
             this._overlayId = null;
+            this._calendar = null;
+            this._calendarContainer = undefined;
         });
     }
     getMinMaxDates() {
@@ -45660,6 +45677,9 @@ class IgxTimePickerComponent extends PickerBaseDirective {
         }
         return this._dateMaxValue;
     }
+    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.
@@ -56461,10 +56481,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();
             }
@@ -56544,7 +56564,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) {
@@ -56761,11 +56781,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;
@@ -83649,6 +83669,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * @hidden
  */
 class IgxSliderThumbComponent {
+    get ariaValueNow() {
+        return this.value;
+    }
+    get ariaValueMin() {
+        return this.min;
+    }
+    get ariaValueMax() {
+        return this.max;
+    }
+    get ariaValueText() {
+        if (this.labels && this.labels[this.value] !== undefined) {
+            return this.labels[this.value];
+        }
+        return this.value;
+    }
+    get ariaLabelAttr() {
+        return `Slider thumb ${this.type}`;
+    }
+    get ariaDisabled() {
+        return this.disabled;
+    }
     get thumbFromClass() {
         return this.type === SliderHandle.FROM;
     }
@@ -83698,6 +83739,8 @@ class IgxSliderThumbComponent {
         this.thumbBlur = new EventEmitter();
         this.hoverChange = new EventEmitter();
         this.tabindex = 0;
+        this.role = 'slider';
+        this.ariaOrientation = 'horizontal';
         this.zIndex = 0;
         this.focused = false;
         this.isActive = false;
@@ -83801,7 +83844,7 @@ class IgxSliderThumbComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxSliderThumbComponent, deps: [{ token: i0.ElementRef }, { token: IgxDirectionality }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.4", type: IgxSliderThumbComponent, isStandalone: true, selector: "igx-thumb", inputs: { value: "value", continuous: ["continuous", "continuous", booleanAttribute], thumbLabelVisibilityDuration: "thumbLabelVisibilityDuration", disabled: ["disabled", "disabled", booleanAttribute], onPan: "onPan", stepDistance: "stepDistance", step: "step", templateRef: "templateRef", context: "context", type: "type", deactiveState: ["deactiveState", "deactiveState", booleanAttribute] }, outputs: { thumbValueChange: "thumbValueChange", thumbChange: "thumbChange", thumbBlur: "thumbBlur", hoverChange: "hoverChange" }, host: { listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()", "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocusListener()" }, properties: { "attr.tabindex": "this.tabindex", "attr.z-index": "this.zIndex", "class.igx-slider-thumb-to--focused": "this.focused", "class.igx-slider-thumb-from": "this.thumbFromClass", "class.igx-slider-thumb-to": "this.thumbToClass", "class.igx-slider-thumb-from--active": "this.thumbFromActiveClass", "class.igx-slider-thumb-to--active": "this.thumbToActiveClass", "class.igx-slider-thumb-from--disabled": "this.thumbFromDisabledClass", "class.igx-slider-thumb-to--disabled": "this.thumbToDisabledClass", "class.igx-slider-thumb-from--pressed": "this.thumbFromPressedClass", "class.igx-slider-thumb-to--pressed": "this.thumbToPressedClass" } }, ngImport: i0, template: "<div [ngClass]=\"getDotClass\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.4", type: IgxSliderThumbComponent, isStandalone: true, selector: "igx-thumb", inputs: { value: "value", continuous: ["continuous", "continuous", booleanAttribute], thumbLabelVisibilityDuration: "thumbLabelVisibilityDuration", disabled: ["disabled", "disabled", booleanAttribute], onPan: "onPan", stepDistance: "stepDistance", step: "step", templateRef: "templateRef", context: "context", type: "type", deactiveState: ["deactiveState", "deactiveState", booleanAttribute], min: "min", max: "max", labels: "labels" }, outputs: { thumbValueChange: "thumbValueChange", thumbChange: "thumbChange", thumbBlur: "thumbBlur", hoverChange: "hoverChange" }, host: { listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()", "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocusListener()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.role", "attr.aria-valuenow": "this.ariaValueNow", "attr.aria-valuemin": "this.ariaValueMin", "attr.aria-valuemax": "this.ariaValueMax", "attr.aria-valuetext": "this.ariaValueText", "attr.aria-label": "this.ariaLabelAttr", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-disabled": "this.ariaDisabled", "attr.z-index": "this.zIndex", "class.igx-slider-thumb-to--focused": "this.focused", "class.igx-slider-thumb-from": "this.thumbFromClass", "class.igx-slider-thumb-to": "this.thumbToClass", "class.igx-slider-thumb-from--active": "this.thumbFromActiveClass", "class.igx-slider-thumb-to--active": "this.thumbToActiveClass", "class.igx-slider-thumb-from--disabled": "this.thumbFromDisabledClass", "class.igx-slider-thumb-to--disabled": "this.thumbToDisabledClass", "class.igx-slider-thumb-from--pressed": "this.thumbFromPressedClass", "class.igx-slider-thumb-to--pressed": "this.thumbToPressedClass" } }, ngImport: i0, template: "<div [ngClass]=\"getDotClass\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxSliderThumbComponent, decorators: [{
             type: Component,
@@ -83831,6 +83874,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }], deactiveState: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], labels: [{
+                type: Input
             }], thumbValueChange: [{
                 type: Output
             }], thumbChange: [{
@@ -83842,6 +83891,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }], tabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], ariaValueNow: [{
+                type: HostBinding,
+                args: ['attr.aria-valuenow']
+            }], ariaValueMin: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemin']
+            }], ariaValueMax: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemax']
+            }], ariaValueText: [{
+                type: HostBinding,
+                args: ['attr.aria-valuetext']
+            }], ariaLabelAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaOrientation: [{
+                type: HostBinding,
+                args: ['attr.aria-orientation']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: [`attr.aria-disabled`]
             }], zIndex: [{
                 type: HostBinding,
                 args: ['attr.z-index']
@@ -84089,24 +84162,6 @@ class IgxSliderComponent {
     get labelTo() {
         return this.labelRefs.find(label => label.type === SliderHandle.TO);
     }
-    /**
-     * @hidden
-     */
-    get valuemin() {
-        return this.minValue;
-    }
-    /**
-     * @hidden
-     */
-    get valuemax() {
-        return this.maxValue;
-    }
-    /**
-     * @hidden
-     */
-    get readonly() {
-        return this.disabled;
-    }
     /**
      * @hidden
      */
@@ -84522,10 +84577,6 @@ class IgxSliderComponent {
         this._cdr = _cdr;
         this._ngZone = _ngZone;
         this._dir = _dir;
-        /**
-         * @hidden
-         */
-        this.role = 'slider';
         /**
          * @hidden
          */
@@ -85146,7 +85197,7 @@ class IgxSliderComponent {
         this.hideSliderIndicators();
     }
     changeThumbFocusableState(state) {
-        const value = state ? -1 : 1;
+        const value = state ? -1 : 0;
         if (this.isRange) {
             this.thumbFrom.tabindex = value;
         }
@@ -85219,11 +85270,11 @@ class IgxSliderComponent {
         this.valueChange.emit({ oldValue, value: this.value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxSliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: IgxDirectionality }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.4", type: IgxSliderComponent, isStandalone: true, selector: "igx-slider", inputs: { id: "id", thumbLabelVisibilityDuration: "thumbLabelVisibilityDuration", type: "type", labels: "labels", step: "step", disabled: ["disabled", "disabled", booleanAttribute], continuous: ["continuous", "continuous", booleanAttribute], minValue: "minValue", maxValue: "maxValue", lowerBound: "lowerBound", upperBound: "upperBound", value: "value", primaryTicks: "primaryTicks", secondaryTicks: "secondaryTicks", showTicks: ["showTicks", "showTicks", booleanAttribute], primaryTickLabels: ["primaryTickLabels", "primaryTickLabels", booleanAttribute], secondaryTickLabels: ["secondaryTickLabels", "secondaryTickLabels", booleanAttribute], ticksOrientation: "ticksOrientation", tickLabelsOrientation: "tickLabelsOrientation", lowerValue: "lowerValue", upperValue: "upperValue" }, outputs: { valueChange: "valueChange", lowerValueChange: "lowerValueChange", upperValueChange: "upperValueChange", dragFinished: "dragFinished" }, host: { listeners: { "focus": "onFocus()", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" }, properties: { "attr.role": "this.role", "class.igx-slider": "this.slierClass", "attr.id": "this.id", "attr.aria-valuemin": "this.valuemin", "attr.aria-valuemax": "this.valuemax", "attr.aria-readonly": "this.readonly", "class.igx-slider--disabled": "this.disabledClass" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }], queries: [{ propertyName: "thumbFromTemplateRef", first: true, predicate: IgxThumbFromTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "thumbToTemplateRef", first: true, predicate: IgxThumbToTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tickLabelTemplateRef", first: true, predicate: IgxTickLabelTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true, static: true }, { propertyName: "thumbs", predicate: IgxSliderThumbComponent, descendants: true }, { propertyName: "labelRefs", predicate: IgxThumbLabelComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<igx-ticks\n    *ngIf=\"showTicks && showTopTicks\"\n    ticksOrientation=\"top\"\n    [primaryTicks]=\"primaryTicks\"\n    [secondaryTicks]=\"secondaryTicks\"\n    [primaryTickLabels]=\"primaryTickLabels\"\n    [secondaryTickLabels]=\"secondaryTickLabels\"\n    [tickLabelsOrientation]=\"tickLabelsOrientation\"\n    [labelsViewEnabled]=\"labelsViewEnabled\"\n    [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n    [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\">\n</igx-ticks>\n<div class=\"igx-slider__track\">\n    <div class=\"igx-slider__track-inactive\"></div>\n    <div #track class=\"igx-slider__track-fill\"></div>\n    <div class=\"igx-slider__track-steps\">\n        <svg width=\"100%\" height=\"100%\">\n          <line #ticks x1=\"0\" y1=\"2\" x2=\"100%\" y2=\"2\"></line>\n        </svg>\n    </div>\n</div>\n<div class=\"igx-slider__thumbs\">\n    <igx-thumb-label\n        *ngIf=\"isRange\"\n        type=\"from\"\n        [value]=\"lowerLabel\"\n        [templateRef]=\"thumbFromTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbFrom\"></igx-thumb-label>\n\n    <igx-thumb\n        *ngIf=\"isRange\"\n        #thumbFrom\n        type=\"from\"\n        [value]=\"lowerLabel\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbFromTemplateRef\"\n        [context]=\"context\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n\n    <igx-thumb-label\n        [value]=\"upperLabel\"\n        type=\"to\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbTo\"></igx-thumb-label>\n\n    <igx-thumb\n        #thumbTo\n        type=\"to\"\n        [value]=\"upperLabel\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [context]=\"context\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n</div>\n<igx-ticks\n    *ngIf=\"showTicks && showBottomTicks\"\n    ticksOrientation=\"bottom\"\n    [primaryTicks]=\"primaryTicks\"\n    [secondaryTicks]=\"secondaryTicks\"\n    [primaryTickLabels]=\"primaryTickLabels\"\n    [secondaryTickLabels]=\"secondaryTickLabels\"\n    [tickLabelsOrientation]=\"tickLabelsOrientation\"\n    [labelsViewEnabled]=\"labelsViewEnabled\"\n    [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n    [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\">\n</igx-ticks>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxTicksComponent, selector: "igx-ticks", inputs: ["primaryTicks", "secondaryTicks", "primaryTickLabels", "secondaryTickLabels", "ticksOrientation", "tickLabelsOrientation", "maxValue", "minValue", "labelsViewEnabled", "labels", "tickLabelTemplateRef"] }, { kind: "component", type: IgxThumbLabelComponent, selector: "igx-thumb-label", inputs: ["value", "templateRef", "context", "type", "continuous", "deactiveState", "thumb"] }, { kind: "component", type: IgxSliderThumbComponent, selector: "igx-thumb", inputs: ["value", "continuous", "thumbLabelVisibilityDuration", "disabled", "onPan", "stepDistance", "step", "templateRef", "context", "type", "deactiveState"], outputs: ["thumbValueChange", "thumbChange", "thumbBlur", "hoverChange"] }, { kind: "pipe", type: IgxTickLabelsPipe, name: "spreadTickLabels" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.4", type: IgxSliderComponent, isStandalone: true, selector: "igx-slider", inputs: { id: "id", thumbLabelVisibilityDuration: "thumbLabelVisibilityDuration", type: "type", labels: "labels", step: "step", disabled: ["disabled", "disabled", booleanAttribute], continuous: ["continuous", "continuous", booleanAttribute], minValue: "minValue", maxValue: "maxValue", lowerBound: "lowerBound", upperBound: "upperBound", value: "value", primaryTicks: "primaryTicks", secondaryTicks: "secondaryTicks", showTicks: ["showTicks", "showTicks", booleanAttribute], primaryTickLabels: ["primaryTickLabels", "primaryTickLabels", booleanAttribute], secondaryTickLabels: ["secondaryTickLabels", "secondaryTickLabels", booleanAttribute], ticksOrientation: "ticksOrientation", tickLabelsOrientation: "tickLabelsOrientation", lowerValue: "lowerValue", upperValue: "upperValue" }, outputs: { valueChange: "valueChange", lowerValueChange: "lowerValueChange", upperValueChange: "upperValueChange", dragFinished: "dragFinished" }, host: { listeners: { "focus": "onFocus()", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" }, properties: { "class.igx-slider": "this.slierClass", "attr.id": "this.id", "class.igx-slider--disabled": "this.disabledClass" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }], queries: [{ propertyName: "thumbFromTemplateRef", first: true, predicate: IgxThumbFromTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "thumbToTemplateRef", first: true, predicate: IgxThumbToTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tickLabelTemplateRef", first: true, predicate: IgxTickLabelTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true, static: true }, { propertyName: "thumbs", predicate: IgxSliderThumbComponent, descendants: true }, { propertyName: "labelRefs", predicate: IgxThumbLabelComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<igx-ticks\n    *ngIf=\"showTicks && showTopTicks\"\n    ticksOrientation=\"top\"\n    [primaryTicks]=\"primaryTicks\"\n    [secondaryTicks]=\"secondaryTicks\"\n    [primaryTickLabels]=\"primaryTickLabels\"\n    [secondaryTickLabels]=\"secondaryTickLabels\"\n    [tickLabelsOrientation]=\"tickLabelsOrientation\"\n    [labelsViewEnabled]=\"labelsViewEnabled\"\n    [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n    [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\">\n</igx-ticks>\n<div class=\"igx-slider__track\">\n    <div class=\"igx-slider__track-inactive\"></div>\n    <div #track class=\"igx-slider__track-fill\"></div>\n    <div class=\"igx-slider__track-steps\">\n        <svg width=\"100%\" height=\"100%\">\n          <line #ticks x1=\"0\" y1=\"2\" x2=\"100%\" y2=\"2\"></line>\n        </svg>\n    </div>\n</div>\n<div class=\"igx-slider__thumbs\">\n    <igx-thumb-label\n        *ngIf=\"isRange\"\n        type=\"from\"\n        [value]=\"lowerLabel\"\n        [templateRef]=\"thumbFromTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbFrom\"></igx-thumb-label>\n\n    <igx-thumb\n        *ngIf=\"isRange\"\n        #thumbFrom\n        type=\"from\"\n        [value]=\"lowerLabel\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbFromTemplateRef\"\n        [context]=\"context\"\n        [labels]=\"labels\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n\n    <igx-thumb-label\n        [value]=\"upperLabel\"\n        type=\"to\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbTo\"></igx-thumb-label>\n\n    <igx-thumb\n        #thumbTo\n        type=\"to\"\n        [value]=\"upperLabel\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [context]=\"context\"\n        [labels]=\"labels\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n</div>\n<igx-ticks\n    *ngIf=\"showTicks && showBottomTicks\"\n    ticksOrientation=\"bottom\"\n    [primaryTicks]=\"primaryTicks\"\n    [secondaryTicks]=\"secondaryTicks\"\n    [primaryTickLabels]=\"primaryTickLabels\"\n    [secondaryTickLabels]=\"secondaryTickLabels\"\n    [tickLabelsOrientation]=\"tickLabelsOrientation\"\n    [labelsViewEnabled]=\"labelsViewEnabled\"\n    [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n    [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\">\n</igx-ticks>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxTicksComponent, selector: "igx-ticks", inputs: ["primaryTicks", "secondaryTicks", "primaryTickLabels", "secondaryTickLabels", "ticksOrientation", "tickLabelsOrientation", "maxValue", "minValue", "labelsViewEnabled", "labels", "tickLabelTemplateRef"] }, { kind: "component", type: IgxThumbLabelComponent, selector: "igx-thumb-label", inputs: ["value", "templateRef", "context", "type", "continuous", "deactiveState", "thumb"] }, { kind: "component", type: IgxSliderThumbComponent, selector: "igx-thumb", inputs: ["value", "continuous", "thumbLabelVisibilityDuration", "disabled", "onPan", "stepDistance", "step", "templateRef", "context", "type", "deactiveState", "min", "max", "labels"], outputs: ["thumbValueChange", "thumbChange", "thumbBlur", "hoverChange"] }, { kind: "pipe", type: IgxTickLabelsPipe, name: "spreadTickLabels" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxSliderComponent, decorators: [{
             type: Component,
-            args: [{ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }], selector: 'igx-slider', standalone: true, imports: [NgIf, IgxTicksComponent, IgxThumbLabelComponent, IgxSliderThumbComponent, IgxTickLabelsPipe], template: "<igx-ticks\n    *ngIf=\"showTicks && showTopTicks\"\n    ticksOrientation=\"top\"\n    [primaryTicks]=\"primaryTicks\"\n    [secondaryTicks]=\"secondaryTicks\"\n    [primaryTickLabels]=\"primaryTickLabels\"\n    [secondaryTickLabels]=\"secondaryTickLabels\"\n    [tickLabelsOrientation]=\"tickLabelsOrientation\"\n    [labelsViewEnabled]=\"labelsViewEnabled\"\n    [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n    [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\">\n</igx-ticks>\n<div class=\"igx-slider__track\">\n    <div class=\"igx-slider__track-inactive\"></div>\n    <div #track class=\"igx-slider__track-fill\"></div>\n    <div class=\"igx-slider__track-steps\">\n        <svg width=\"100%\" height=\"100%\">\n          <line #ticks x1=\"0\" y1=\"2\" x2=\"100%\" y2=\"2\"></line>\n        </svg>\n    </div>\n</div>\n<div class=\"igx-slider__thumbs\">\n    <igx-thumb-label\n        *ngIf=\"isRange\"\n        type=\"from\"\n        [value]=\"lowerLabel\"\n        [templateRef]=\"thumbFromTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbFrom\"></igx-thumb-label>\n\n    <igx-thumb\n        *ngIf=\"isRange\"\n        #thumbFrom\n        type=\"from\"\n        [value]=\"lowerLabel\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbFromTemplateRef\"\n        [context]=\"context\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n\n    <igx-thumb-label\n        [value]=\"upperLabel\"\n        type=\"to\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbTo\"></igx-thumb-label>\n\n    <igx-thumb\n        #thumbTo\n        type=\"to\"\n        [value]=\"upperLabel\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [context]=\"context\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n</div>\n<igx-ticks\n    *ngIf=\"showTicks && showBottomTicks\"\n    ticksOrientation=\"bottom\"\n    [primaryTicks]=\"primaryTicks\"\n    [secondaryTicks]=\"secondaryTicks\"\n    [primaryTickLabels]=\"primaryTickLabels\"\n    [secondaryTickLabels]=\"secondaryTickLabels\"\n    [tickLabelsOrientation]=\"tickLabelsOrientation\"\n    [labelsViewEnabled]=\"labelsViewEnabled\"\n    [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n    [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\">\n</igx-ticks>\n" }]
+            args: [{ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }], selector: 'igx-slider', standalone: true, imports: [NgIf, IgxTicksComponent, IgxThumbLabelComponent, IgxSliderThumbComponent, IgxTickLabelsPipe], template: "<igx-ticks\n    *ngIf=\"showTicks && showTopTicks\"\n    ticksOrientation=\"top\"\n    [primaryTicks]=\"primaryTicks\"\n    [secondaryTicks]=\"secondaryTicks\"\n    [primaryTickLabels]=\"primaryTickLabels\"\n    [secondaryTickLabels]=\"secondaryTickLabels\"\n    [tickLabelsOrientation]=\"tickLabelsOrientation\"\n    [labelsViewEnabled]=\"labelsViewEnabled\"\n    [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n    [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\">\n</igx-ticks>\n<div class=\"igx-slider__track\">\n    <div class=\"igx-slider__track-inactive\"></div>\n    <div #track class=\"igx-slider__track-fill\"></div>\n    <div class=\"igx-slider__track-steps\">\n        <svg width=\"100%\" height=\"100%\">\n          <line #ticks x1=\"0\" y1=\"2\" x2=\"100%\" y2=\"2\"></line>\n        </svg>\n    </div>\n</div>\n<div class=\"igx-slider__thumbs\">\n    <igx-thumb-label\n        *ngIf=\"isRange\"\n        type=\"from\"\n        [value]=\"lowerLabel\"\n        [templateRef]=\"thumbFromTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbFrom\"></igx-thumb-label>\n\n    <igx-thumb\n        *ngIf=\"isRange\"\n        #thumbFrom\n        type=\"from\"\n        [value]=\"lowerLabel\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbFromTemplateRef\"\n        [context]=\"context\"\n        [labels]=\"labels\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n\n    <igx-thumb-label\n        [value]=\"upperLabel\"\n        type=\"to\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbTo\"></igx-thumb-label>\n\n    <igx-thumb\n        #thumbTo\n        type=\"to\"\n        [value]=\"upperLabel\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [context]=\"context\"\n        [labels]=\"labels\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n</div>\n<igx-ticks\n    *ngIf=\"showTicks && showBottomTicks\"\n    ticksOrientation=\"bottom\"\n    [primaryTicks]=\"primaryTicks\"\n    [secondaryTicks]=\"secondaryTicks\"\n    [primaryTickLabels]=\"primaryTickLabels\"\n    [secondaryTickLabels]=\"secondaryTickLabels\"\n    [tickLabelsOrientation]=\"tickLabelsOrientation\"\n    [labelsViewEnabled]=\"labelsViewEnabled\"\n    [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n    [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\">\n</igx-ticks>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: IgxDirectionality }], propDecorators: { trackRef: [{
                 type: ViewChild,
                 args: ['track', { static: true }]
@@ -85236,9 +85287,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }], tickLabelTemplateRef: [{
                 type: ContentChild,
                 args: [IgxTickLabelTemplateDirective, { read: TemplateRef, static: false }]
-            }], role: [{
-                type: HostBinding,
-                args: [`attr.role`]
             }], slierClass: [{
                 type: HostBinding,
                 args: ['class.igx-slider']
@@ -85249,15 +85297,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }], thumbLabelVisibilityDuration: [{
                 type: Input
-            }], valuemin: [{
-                type: HostBinding,
-                args: [`attr.aria-valuemin`]
-            }], valuemax: [{
-                type: HostBinding,
-                args: [`attr.aria-valuemax`]
-            }], readonly: [{
-                type: HostBinding,
-                args: [`attr.aria-readonly`]
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.igx-slider--disabled']
@@ -89264,6 +89303,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({});
@@ -89598,7 +89640,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();
         }
@@ -89625,10 +89667,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) => {
@@ -89638,6 +89682,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 });
         });
     }