igniteui-angular 18.2.0-rc.0 → 18.2.0

package/fesm2022/igniteui-angular.mjs

@@ -26781,13 +26781,13 @@ class IgxGridSelectionService {
         }
         rowIDs.forEach(rowID => this.rowSelection.add(rowID));
         this.clearHeaderCBState();
-        this.selectedRowsChange.next();
+        this.selectedRowsChange.next(rowIDs);
     }
     /** Deselect specified rows. No event is emitted. */
     deselectRowsWithNoEvent(rowIDs) {
         this.clearHeaderCBState();
         rowIDs.forEach(rowID => this.rowSelection.delete(rowID));
-        this.selectedRowsChange.next();
+        this.selectedRowsChange.next(this.getSelectedRows());
     }
     isRowSelected(rowID) {
         return this.rowSelection.size > 0 && this.rowSelection.has(rowID);
@@ -26892,7 +26892,7 @@ class IgxGridSelectionService {
         this.rowSelection.clear();
         this.indeterminateRows.clear();
         this.clearHeaderCBState();
-        this.selectedRowsChange.next();
+        this.selectedRowsChange.next([]);
     }
     /** Returns all data in the grid, with applied filtering and sorting and without deleted rows. */
     get allData() {
@@ -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;
@@ -62661,7 +62681,7 @@ class IgxGridBaseDirective {
     }
     /* blazorByValueArray */
     /* blazorAlwaysWriteback */
-    /* @tsTwoWayProperty (true, "RowSelectionChanging", "Detail.NewSelection", false) */
+    /* @tsTwoWayProperty (true, "SelectedRowsChange", "Detail", false) */
     /* blazorPrimitiveValue */
     /**
      * Gets/Sets the current selection state.
@@ -63771,6 +63791,9 @@ class IgxGridBaseDirective {
          * @hidden @internal
          */
         this.expansionStatesChange = new EventEmitter();
+        /* blazorInclude */
+        /** @hidden @internal */
+        this.selectedRowsChange = new EventEmitter();
         /**
          * Emitted when the expanded state of a row gets changed.
          *
@@ -64146,6 +64169,9 @@ class IgxGridBaseDirective {
         this._transactions = this.transactionFactory.create("None" /* TRANSACTION_TYPE.None */);
         this._transactions.cloneStrategy = this.dataCloneStrategy;
         this.cdr.detach();
+        this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+            this.selectedRowsChange.emit(args);
+        });
         IgcTrialWatermark.register();
     }
     /**
@@ -68157,7 +68183,7 @@ class IgxGridBaseDirective {
         return Object.keys(oldData[0]).join() !== Object.keys(newData[0]).join();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridBaseDirective, deps: [{ token: IgxGridValidationService }, { token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: IgxGridNavigationService }, { token: IgxFilteringService }, { token: IgxTextHighlightService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: IgxGridBaseDirective, inputs: { snackbarDisplayTime: "snackbarDisplayTime", autoGenerate: ["autoGenerate", "autoGenerate", booleanAttribute], autoGenerateExclude: "autoGenerateExclude", moving: ["moving", "moving", booleanAttribute], emptyGridTemplate: "emptyGridTemplate", addRowEmptyTemplate: "addRowEmptyTemplate", loadingGridTemplate: "loadingGridTemplate", summaryRowHeight: "summaryRowHeight", dataCloneStrategy: "dataCloneStrategy", clipboardOptions: "clipboardOptions", rowClasses: "rowClasses", rowStyles: "rowStyles", primaryKey: "primaryKey", uniqueColumnValuesStrategy: "uniqueColumnValuesStrategy", dragGhostCustomTemplate: "dragGhostCustomTemplate", rowEditTextTemplate: "rowEditTextTemplate", rowAddTextTemplate: "rowAddTextTemplate", rowEditActionsTemplate: "rowEditActionsTemplate", rowExpandedIndicatorTemplate: "rowExpandedIndicatorTemplate", rowCollapsedIndicatorTemplate: "rowCollapsedIndicatorTemplate", headerExpandedIndicatorTemplate: "headerExpandedIndicatorTemplate", headerCollapsedIndicatorTemplate: "headerCollapsedIndicatorTemplate", excelStyleHeaderIconTemplate: "excelStyleHeaderIconTemplate", sortAscendingHeaderIconTemplate: "sortAscendingHeaderIconTemplate", sortDescendingHeaderIconTemplate: "sortDescendingHeaderIconTemplate", sortHeaderIconTemplate: "sortHeaderIconTemplate", resourceStrings: "resourceStrings", filteringLogic: "filteringLogic", filteringExpressionsTree: "filteringExpressionsTree", advancedFilteringExpressionsTree: "advancedFilteringExpressionsTree", locale: "locale", pagingMode: "pagingMode", hideRowSelectors: ["hideRowSelectors", "hideRowSelectors", booleanAttribute], rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], validationTrigger: "validationTrigger", rowEditable: ["rowEditable", "rowEditable", booleanAttribute], height: "height", width: "width", rowHeight: "rowHeight", columnWidth: "columnWidth", emptyGridMessage: "emptyGridMessage", isLoading: ["isLoading", "isLoading", booleanAttribute], emptyFilteredGridMessage: "emptyFilteredGridMessage", pinning: "pinning", allowFiltering: ["allowFiltering", "allowFiltering", booleanAttribute], allowAdvancedFiltering: ["allowAdvancedFiltering", "allowAdvancedFiltering", booleanAttribute], filterMode: "filterMode", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: ["showSummaryOnCollapse", "showSummaryOnCollapse", booleanAttribute], filterStrategy: "filterStrategy", sortStrategy: "sortStrategy", sortingOptions: "sortingOptions", selectedRows: "selectedRows", headSelectorTemplate: "headSelectorTemplate", rowSelectorTemplate: "rowSelectorTemplate", dragIndicatorIconTemplate: "dragIndicatorIconTemplate", sortingExpressions: "sortingExpressions", batchEditing: ["batchEditing", "batchEditing", booleanAttribute], cellSelection: "cellSelection", rowSelection: "rowSelection", columnSelection: "columnSelection", expansionStates: "expansionStates", outlet: "outlet", totalRecords: "totalRecords", selectRowOnClick: ["selectRowOnClick", "selectRowOnClick", booleanAttribute] }, outputs: { filteringExpressionsTreeChange: "filteringExpressionsTreeChange", advancedFilteringExpressionsTreeChange: "advancedFilteringExpressionsTreeChange", gridScroll: "gridScroll", cellClick: "cellClick", rowClick: "rowClick", formGroupCreated: "formGroupCreated", validationStatusChange: "validationStatusChange", selected: "selected", rowSelectionChanging: "rowSelectionChanging", columnSelectionChanging: "columnSelectionChanging", columnPin: "columnPin", columnPinned: "columnPinned", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", cellEdit: "cellEdit", cellEditDone: "cellEditDone", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", columnInit: "columnInit", columnsAutogenerated: "columnsAutogenerated", sorting: "sorting", sortingDone: "sortingDone", filtering: "filtering", filteringDone: "filteringDone", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowAdd: "rowAdd", columnResized: "columnResized", contextMenu: "contextMenu", doubleClick: "doubleClick", columnVisibilityChanging: "columnVisibilityChanging", columnVisibilityChanged: "columnVisibilityChanged", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", gridKeydown: "gridKeydown", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", gridCopy: "gridCopy", expansionStatesChange: "expansionStatesChange", rowToggle: "rowToggle", rowPinning: "rowPinning", rowPinned: "rowPinned", activeNodeChange: "activeNodeChange", sortingExpressionsChange: "sortingExpressionsChange", toolbarExporting: "toolbarExporting", rangeSelected: "rangeSelected", rendered: "rendered", localeChange: "localeChange", dataChanging: "dataChanging", dataChanged: "dataChanged" }, host: { listeners: { "mouseleave": "hideActionStrip()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.hostRole", "class.igx-grid": "this.baseClass", "style.height": "this.height", "style.width": "this.hostWidth" } }, queries: [{ propertyName: "excelStyleLoadingValuesTemplateDirective", first: true, predicate: IgxExcelStyleLoadingValuesTemplateDirective, descendants: true, read: IgxExcelStyleLoadingValuesTemplateDirective, static: true }, { propertyName: "rowAddText", first: true, predicate: IgxRowAddTextDirective, descendants: true, read: TemplateRef }, { propertyName: "rowExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxRowExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxRowCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleHeaderIconDirectiveTemplate", first: true, predicate: IgxExcelStyleHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortAscendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortAscendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortDescendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortDescendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortHeaderIconDirectiveTemplate", first: true, predicate: IgxSortHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "columnList", predicate: IgxColumnComponent, descendants: true, read: IgxColumnComponent }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken }, { propertyName: "headSelectorsTemplates", predicate: IgxHeadSelectorDirective, read: TemplateRef }, { propertyName: "rowSelectorsTemplates", predicate: IgxRowSelectorDirective, read: TemplateRef }, { propertyName: "dragGhostCustomTemplates", predicate: IgxRowDragGhostDirective, read: TemplateRef }, { propertyName: "rowEditCustomDirectives", predicate: IgxRowEditTemplateDirective, read: TemplateRef }, { propertyName: "rowEditTextDirectives", predicate: IgxRowEditTextDirective, read: TemplateRef }, { propertyName: "rowEditActionsDirectives", predicate: IgxRowEditActionsDirective, read: TemplateRef }, { propertyName: "dragIndicatorIconTemplates", predicate: IgxDragIndicatorIconDirective, read: TemplateRef }, { propertyName: "rowEditTabsCUSTOM", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "toolbar", predicate: IgxToolbarToken }, { propertyName: "paginationComponents", predicate: IgxPaginatorToken }], viewQueries: [{ propertyName: "addRowSnackbar", first: true, predicate: IgxSnackbarComponent, descendants: true }, { propertyName: "resizeLine", first: true, predicate: IgxGridColumnResizerComponent, descendants: true }, { propertyName: "loadingOverlay", first: true, predicate: ["loadingOverlay"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "loadingOutlet", first: true, predicate: ["igxLoadingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "emptyFilteredGridTemplate", first: true, predicate: ["emptyFilteredGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyGridDefaultTemplate", first: true, predicate: ["defaultEmptyGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "loadingGridDefaultTemplate", first: true, predicate: ["defaultLoadingGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "parentVirtDir", first: true, predicate: ["scrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScrollContainer", first: true, predicate: ["verticalScrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScroll", first: true, predicate: ["verticalScrollHolder"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "scr", first: true, predicate: ["scr"], descendants: true, read: ElementRef, static: true }, { propertyName: "headerSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, read: ElementRef }, { propertyName: "theadRow", first: true, predicate: IgxGridHeaderRowComponent, descendants: true, static: true }, { propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, static: true }, { propertyName: "tbodyContainer", first: true, predicate: IgxGridBodyDirective, descendants: true, read: ElementRef, static: true }, { propertyName: "pinContainer", first: true, predicate: ["pinContainer"], descendants: true, read: ElementRef }, { propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, static: true }, { propertyName: "rowEditingOutletDirective", first: true, predicate: ["igxRowEditingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "rowEditingOverlay", first: true, predicate: ["rowEditingOverlay"], descendants: true, read: IgxToggleDirective }, { propertyName: "_outletDirective", first: true, predicate: ["igxFilteringOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "anchor", first: true, predicate: ["sink"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultRowEditTemplate", first: true, predicate: ["defaultRowEditTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tmpOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "rowEditTabsDEFAULT", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "_summaryRowList", predicate: ["summaryRow"], descendants: true, read: IgxSummaryRowComponent }, { propertyName: "_rowList", predicate: ["row"], descendants: true }, { propertyName: "_pinnedRowList", predicate: ["pinnedRow"], descendants: true }, { propertyName: "_dataRowList", predicate: IgxRowDirective, descendants: true, read: IgxRowDirective }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: IgxGridBaseDirective, inputs: { snackbarDisplayTime: "snackbarDisplayTime", autoGenerate: ["autoGenerate", "autoGenerate", booleanAttribute], autoGenerateExclude: "autoGenerateExclude", moving: ["moving", "moving", booleanAttribute], emptyGridTemplate: "emptyGridTemplate", addRowEmptyTemplate: "addRowEmptyTemplate", loadingGridTemplate: "loadingGridTemplate", summaryRowHeight: "summaryRowHeight", dataCloneStrategy: "dataCloneStrategy", clipboardOptions: "clipboardOptions", rowClasses: "rowClasses", rowStyles: "rowStyles", primaryKey: "primaryKey", uniqueColumnValuesStrategy: "uniqueColumnValuesStrategy", dragGhostCustomTemplate: "dragGhostCustomTemplate", rowEditTextTemplate: "rowEditTextTemplate", rowAddTextTemplate: "rowAddTextTemplate", rowEditActionsTemplate: "rowEditActionsTemplate", rowExpandedIndicatorTemplate: "rowExpandedIndicatorTemplate", rowCollapsedIndicatorTemplate: "rowCollapsedIndicatorTemplate", headerExpandedIndicatorTemplate: "headerExpandedIndicatorTemplate", headerCollapsedIndicatorTemplate: "headerCollapsedIndicatorTemplate", excelStyleHeaderIconTemplate: "excelStyleHeaderIconTemplate", sortAscendingHeaderIconTemplate: "sortAscendingHeaderIconTemplate", sortDescendingHeaderIconTemplate: "sortDescendingHeaderIconTemplate", sortHeaderIconTemplate: "sortHeaderIconTemplate", resourceStrings: "resourceStrings", filteringLogic: "filteringLogic", filteringExpressionsTree: "filteringExpressionsTree", advancedFilteringExpressionsTree: "advancedFilteringExpressionsTree", locale: "locale", pagingMode: "pagingMode", hideRowSelectors: ["hideRowSelectors", "hideRowSelectors", booleanAttribute], rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], validationTrigger: "validationTrigger", rowEditable: ["rowEditable", "rowEditable", booleanAttribute], height: "height", width: "width", rowHeight: "rowHeight", columnWidth: "columnWidth", emptyGridMessage: "emptyGridMessage", isLoading: ["isLoading", "isLoading", booleanAttribute], emptyFilteredGridMessage: "emptyFilteredGridMessage", pinning: "pinning", allowFiltering: ["allowFiltering", "allowFiltering", booleanAttribute], allowAdvancedFiltering: ["allowAdvancedFiltering", "allowAdvancedFiltering", booleanAttribute], filterMode: "filterMode", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: ["showSummaryOnCollapse", "showSummaryOnCollapse", booleanAttribute], filterStrategy: "filterStrategy", sortStrategy: "sortStrategy", sortingOptions: "sortingOptions", selectedRows: "selectedRows", headSelectorTemplate: "headSelectorTemplate", rowSelectorTemplate: "rowSelectorTemplate", dragIndicatorIconTemplate: "dragIndicatorIconTemplate", sortingExpressions: "sortingExpressions", batchEditing: ["batchEditing", "batchEditing", booleanAttribute], cellSelection: "cellSelection", rowSelection: "rowSelection", columnSelection: "columnSelection", expansionStates: "expansionStates", outlet: "outlet", totalRecords: "totalRecords", selectRowOnClick: ["selectRowOnClick", "selectRowOnClick", booleanAttribute] }, outputs: { filteringExpressionsTreeChange: "filteringExpressionsTreeChange", advancedFilteringExpressionsTreeChange: "advancedFilteringExpressionsTreeChange", gridScroll: "gridScroll", cellClick: "cellClick", rowClick: "rowClick", formGroupCreated: "formGroupCreated", validationStatusChange: "validationStatusChange", selected: "selected", rowSelectionChanging: "rowSelectionChanging", columnSelectionChanging: "columnSelectionChanging", columnPin: "columnPin", columnPinned: "columnPinned", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", cellEdit: "cellEdit", cellEditDone: "cellEditDone", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", columnInit: "columnInit", columnsAutogenerated: "columnsAutogenerated", sorting: "sorting", sortingDone: "sortingDone", filtering: "filtering", filteringDone: "filteringDone", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowAdd: "rowAdd", columnResized: "columnResized", contextMenu: "contextMenu", doubleClick: "doubleClick", columnVisibilityChanging: "columnVisibilityChanging", columnVisibilityChanged: "columnVisibilityChanged", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", gridKeydown: "gridKeydown", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", gridCopy: "gridCopy", expansionStatesChange: "expansionStatesChange", selectedRowsChange: "selectedRowsChange", rowToggle: "rowToggle", rowPinning: "rowPinning", rowPinned: "rowPinned", activeNodeChange: "activeNodeChange", sortingExpressionsChange: "sortingExpressionsChange", toolbarExporting: "toolbarExporting", rangeSelected: "rangeSelected", rendered: "rendered", localeChange: "localeChange", dataChanging: "dataChanging", dataChanged: "dataChanged" }, host: { listeners: { "mouseleave": "hideActionStrip()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.hostRole", "class.igx-grid": "this.baseClass", "style.height": "this.height", "style.width": "this.hostWidth" } }, queries: [{ propertyName: "excelStyleLoadingValuesTemplateDirective", first: true, predicate: IgxExcelStyleLoadingValuesTemplateDirective, descendants: true, read: IgxExcelStyleLoadingValuesTemplateDirective, static: true }, { propertyName: "rowAddText", first: true, predicate: IgxRowAddTextDirective, descendants: true, read: TemplateRef }, { propertyName: "rowExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxRowExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxRowCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleHeaderIconDirectiveTemplate", first: true, predicate: IgxExcelStyleHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortAscendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortAscendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortDescendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortDescendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortHeaderIconDirectiveTemplate", first: true, predicate: IgxSortHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "columnList", predicate: IgxColumnComponent, descendants: true, read: IgxColumnComponent }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken }, { propertyName: "headSelectorsTemplates", predicate: IgxHeadSelectorDirective, read: TemplateRef }, { propertyName: "rowSelectorsTemplates", predicate: IgxRowSelectorDirective, read: TemplateRef }, { propertyName: "dragGhostCustomTemplates", predicate: IgxRowDragGhostDirective, read: TemplateRef }, { propertyName: "rowEditCustomDirectives", predicate: IgxRowEditTemplateDirective, read: TemplateRef }, { propertyName: "rowEditTextDirectives", predicate: IgxRowEditTextDirective, read: TemplateRef }, { propertyName: "rowEditActionsDirectives", predicate: IgxRowEditActionsDirective, read: TemplateRef }, { propertyName: "dragIndicatorIconTemplates", predicate: IgxDragIndicatorIconDirective, read: TemplateRef }, { propertyName: "rowEditTabsCUSTOM", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "toolbar", predicate: IgxToolbarToken }, { propertyName: "paginationComponents", predicate: IgxPaginatorToken }], viewQueries: [{ propertyName: "addRowSnackbar", first: true, predicate: IgxSnackbarComponent, descendants: true }, { propertyName: "resizeLine", first: true, predicate: IgxGridColumnResizerComponent, descendants: true }, { propertyName: "loadingOverlay", first: true, predicate: ["loadingOverlay"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "loadingOutlet", first: true, predicate: ["igxLoadingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "emptyFilteredGridTemplate", first: true, predicate: ["emptyFilteredGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyGridDefaultTemplate", first: true, predicate: ["defaultEmptyGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "loadingGridDefaultTemplate", first: true, predicate: ["defaultLoadingGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "parentVirtDir", first: true, predicate: ["scrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScrollContainer", first: true, predicate: ["verticalScrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScroll", first: true, predicate: ["verticalScrollHolder"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "scr", first: true, predicate: ["scr"], descendants: true, read: ElementRef, static: true }, { propertyName: "headerSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, read: ElementRef }, { propertyName: "theadRow", first: true, predicate: IgxGridHeaderRowComponent, descendants: true, static: true }, { propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, static: true }, { propertyName: "tbodyContainer", first: true, predicate: IgxGridBodyDirective, descendants: true, read: ElementRef, static: true }, { propertyName: "pinContainer", first: true, predicate: ["pinContainer"], descendants: true, read: ElementRef }, { propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, static: true }, { propertyName: "rowEditingOutletDirective", first: true, predicate: ["igxRowEditingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "rowEditingOverlay", first: true, predicate: ["rowEditingOverlay"], descendants: true, read: IgxToggleDirective }, { propertyName: "_outletDirective", first: true, predicate: ["igxFilteringOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "anchor", first: true, predicate: ["sink"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultRowEditTemplate", first: true, predicate: ["defaultRowEditTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tmpOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "rowEditTabsDEFAULT", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "_summaryRowList", predicate: ["summaryRow"], descendants: true, read: IgxSummaryRowComponent }, { propertyName: "_rowList", predicate: ["row"], descendants: true }, { propertyName: "_pinnedRowList", predicate: ["pinnedRow"], descendants: true }, { propertyName: "_dataRowList", predicate: IgxRowDirective, descendants: true, read: IgxRowDirective }], ngImport: i0 }); }
 }
 __decorate([
     WatchChanges()
@@ -68345,6 +68371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 type: Output
             }], expansionStatesChange: [{
                 type: Output
+            }], selectedRowsChange: [{
+                type: Output
             }], rowToggle: [{
                 type: Output
             }], rowPinning: [{
@@ -77769,6 +77797,11 @@ class IgxGridStateBaseDirective {
                         key: c.columnGroup ? this.getColumnGroupKey(c) : c.field,
                         parentKey: c.parent ? this.getColumnGroupKey(c.parent) : undefined,
                         columnGroup: c.columnGroup,
+                        columnLayout: c.columnLayout || undefined,
+                        rowStart: c.parent?.columnLayout ? c.rowStart : undefined,
+                        rowEnd: c.parent?.columnLayout ? c.rowEnd : undefined,
+                        colStart: c.parent?.columnLayout ? c.colStart : undefined,
+                        colEnd: c.parent?.columnLayout ? c.colEnd : undefined,
                         disableHiding: c.disableHiding,
                         disablePinning: c.disablePinning,
                         collapsible: c.columnGroup ? c.collapsible : undefined,
@@ -77781,11 +77814,15 @@ class IgxGridStateBaseDirective {
                     const newColumns = [];
                     state.forEach((colState) => {
                         const hasColumnGroup = colState.columnGroup;
+                        const hasColumnLayouts = colState.columnLayout;
                         delete colState.columnGroup;
+                        delete colState.columnLayout;
                         if (hasColumnGroup) {
                             let ref1 = context.currGrid.columns.find(x => x.columnGroup && (colState.key ? this.getColumnGroupKey(x) === colState.key : x.header === colState.header));
                             if (!ref1) {
-                                const component = createComponent(IgxColumnGroupComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
+                                const component = hasColumnLayouts ?
+                                    createComponent(IgxColumnLayoutComponent, { environmentInjector: this.envInjector, elementInjector: this.injector }) :
+                                    createComponent(IgxColumnGroupComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
                                 ref1 = component.instance;
                                 component.changeDetectorRef.detectChanges();
                             }
@@ -80518,7 +80555,7 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
             this.indeterminateRows = new Set(this.rowsToBeIndeterminate);
             // TODO: emit selectionChangeD event, calculate its args through the handleAddedAndRemovedArgs method
             this.clearHeaderCBState();
-            this.selectedRowsChange.next();
+            this.selectedRowsChange.next(this.getSelectedRows());
             return;
         }
         const newParents = new Set();
@@ -80547,7 +80584,7 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
         this.rowSelection = new Set(this.rowsToBeSelected);
         this.indeterminateRows = new Set(this.rowsToBeIndeterminate);
         this.clearHeaderCBState();
-        this.selectedRowsChange.next();
+        this.selectedRowsChange.next(this.getSelectedRows());
     }
     cascadeDeselectRowsWithNoEvent(rowIDs) {
         const args = { added: [], removed: rowIDs };
@@ -80555,7 +80592,7 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
         this.rowSelection = new Set(this.rowsToBeSelected);
         this.indeterminateRows = new Set(this.rowsToBeIndeterminate);
         this.clearHeaderCBState();
-        this.selectedRowsChange.next();
+        this.selectedRowsChange.next(this.getSelectedRows());
     }
     get selectionService() {
         return this.grid.selectionService;
@@ -80583,7 +80620,7 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
             this.rowSelection = new Set(this.rowsToBeSelected);
             this.indeterminateRows = new Set(this.rowsToBeIndeterminate);
             this.clearHeaderCBState();
-            this.selectedRowsChange.next();
+            this.selectedRowsChange.next(this.getSelectedRows());
         }
         else {
             // select the rows within the modified args.newSelection with no event
@@ -86527,6 +86564,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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;
     }
@@ -86576,6 +86634,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;
@@ -86679,7 +86739,7 @@ class IgxSliderThumbComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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: "18.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: "18.2.4", ngImport: i0, type: IgxSliderThumbComponent, decorators: [{
             type: Component,
@@ -86709,6 +86769,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], deactiveState: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], labels: [{
+                type: Input
             }], thumbValueChange: [{
                 type: Output
             }], thumbChange: [{
@@ -86720,6 +86786,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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']
@@ -86967,24 +87057,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
      */
@@ -87400,10 +87472,6 @@ class IgxSliderComponent {
         this._cdr = _cdr;
         this._ngZone = _ngZone;
         this._dir = _dir;
-        /**
-         * @hidden
-         */
-        this.role = 'slider';
         /**
          * @hidden
          */
@@ -88024,7 +88092,7 @@ class IgxSliderComponent {
         this.hideSliderIndicators();
     }
     changeThumbFocusableState(state) {
-        const value = state ? -1 : 1;
+        const value = state ? -1 : 0;
         if (this.isRange) {
             this.thumbFrom.tabindex = value;
         }
@@ -88097,11 +88165,11 @@ class IgxSliderComponent {
         this.valueChange.emit({ oldValue, value: this.value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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: "18.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: "18.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 }]
@@ -88114,9 +88182,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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']
@@ -88127,15 +88192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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']
@@ -92180,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({});
@@ -92513,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();
         }
@@ -92540,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) => {
@@ -92553,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 });
         });
     }