igniteui-angular 17.0.13 → 17.0.15

package/esm2022/lib/calendar/months-view/months-view.component.mjs

@@ -315,10 +315,10 @@ export class IgxMonthsViewComponent {
     initMonthFormatter() {
         this._formatterMonth = new Intl.DateTimeFormat(this._locale, { month: this.monthFormat });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxMonthsViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxMonthsViewComponent, isStandalone: true, selector: "igx-months-view", inputs: { id: "id", date: "date", monthFormat: "monthFormat", locale: "locale", formatView: ["formatView", "formatView", booleanAttribute] }, outputs: { selected: "selected" }, host: { listeners: { "keydown.arrowup": "onKeydownArrowUp($event)", "keydown.arrowdown": "onKeydownArrowDown($event)", "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "keydown.enter": "onKeydownEnter($event)", "focusout": "resetActiveMonth()" }, properties: { "attr.id": "this.id", "class.igx-calendar": "this.styleClass" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMonthsViewComponent, multi: true }], viewQueries: [{ propertyName: "monthsRef", predicate: IgxCalendarMonthDirective, descendants: true, read: IgxCalendarMonthDirective }], ngImport: i0, template: "<div class=\"igx-calendar__body\">\n    <div class=\"igx-calendar__body-row igx-calendar__body-row--wrap\">\n        <span\n            class=\"igx-calendar__month\"\n            role=\"button\"\n            [attr.aria-label]=\"month | date: 'LLLL'\"\n            [igxCalendarMonth]=\"month\"\n            [date]=\"date\"\n            [attr.tabindex]=\"activeMonth === month.getMonth() ? 0 : -1\"\n            (monthSelection)=\"selectMonth($event)\" [index]=\"i\"\n            *ngFor=\"let month of months; index as i; trackBy: monthTracker\">\n            {{ formattedMonth(month) | titlecase }}\n        </span>\n    </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarMonthDirective, selector: "[igxCalendarMonth]", inputs: ["igxCalendarMonth", "date", "index"], outputs: ["monthSelection"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxMonthsViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxMonthsViewComponent, isStandalone: true, selector: "igx-months-view", inputs: { id: "id", date: "date", monthFormat: "monthFormat", locale: "locale", formatView: ["formatView", "formatView", booleanAttribute] }, outputs: { selected: "selected" }, host: { listeners: { "keydown.arrowup": "onKeydownArrowUp($event)", "keydown.arrowdown": "onKeydownArrowDown($event)", "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "keydown.enter": "onKeydownEnter($event)", "focusout": "resetActiveMonth()" }, properties: { "attr.id": "this.id", "class.igx-calendar": "this.styleClass" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMonthsViewComponent, multi: true }], viewQueries: [{ propertyName: "monthsRef", predicate: IgxCalendarMonthDirective, descendants: true, read: IgxCalendarMonthDirective }], ngImport: i0, template: "<div class=\"igx-calendar__body\">\n    <div class=\"igx-calendar__body-row igx-calendar__body-row--wrap\">\n        <span\n            class=\"igx-calendar__month\"\n            role=\"button\"\n            [attr.aria-label]=\"month | date: 'LLLL'\"\n            [igxCalendarMonth]=\"month\"\n            [date]=\"date\"\n            [attr.tabindex]=\"activeMonth === month.getMonth() ? 0 : -1\"\n            (monthSelection)=\"selectMonth($event)\" [index]=\"i\"\n            *ngFor=\"let month of months; index as i; trackBy: monthTracker\">\n            {{ formattedMonth(month) | titlecase }}\n        </span>\n    </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarMonthDirective, selector: "[igxCalendarMonth]", inputs: ["igxCalendarMonth", "date", "index"], outputs: ["monthSelection"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
             type: Component,
             args: [{ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMonthsViewComponent, multi: true }], selector: 'igx-months-view', standalone: true, imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe, DatePipe], template: "<div class=\"igx-calendar__body\">\n    <div class=\"igx-calendar__body-row igx-calendar__body-row--wrap\">\n        <span\n            class=\"igx-calendar__month\"\n            role=\"button\"\n            [attr.aria-label]=\"month | date: 'LLLL'\"\n            [igxCalendarMonth]=\"month\"\n            [date]=\"date\"\n            [attr.tabindex]=\"activeMonth === month.getMonth() ? 0 : -1\"\n            (monthSelection)=\"selectMonth($event)\" [index]=\"i\"\n            *ngFor=\"let month of months; index as i; trackBy: monthTracker\">\n            {{ formattedMonth(month) | titlecase }}\n        </span>\n    </div>\n</div>\n\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{

package/esm2022/lib/calendar/months-view.pipe.mjs

@@ -8,10 +8,10 @@ export class IgxMonthViewSlotsCalendar {
     transform(monthViews) {
         return new Array(monthViews);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxMonthViewSlotsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxMonthViewSlotsCalendar, isStandalone: true, name: "IgxMonthViewSlots" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxMonthViewSlotsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgxMonthViewSlotsCalendar, isStandalone: true, name: "IgxMonthViewSlots" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxMonthViewSlotsCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxMonthViewSlotsCalendar, decorators: [{
             type: Pipe,
             args: [{
                     name: 'IgxMonthViewSlots',
@@ -29,10 +29,10 @@ export class IgxGetViewDateCalendar {
         const date = this.calendar.timedelta(viewDate, 'month', index);
         return wholeDate ? date : date.getMonth();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGetViewDateCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxGetViewDateCalendar, isStandalone: true, name: "IgxGetViewDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxGetViewDateCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgxGetViewDateCalendar, isStandalone: true, name: "IgxGetViewDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGetViewDateCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxGetViewDateCalendar, decorators: [{
             type: Pipe,
             args: [{
                     name: 'IgxGetViewDate',

package/esm2022/lib/calendar/years-view/years-view.component.mjs

@@ -13,10 +13,10 @@ export class CalendarHammerConfig extends HammerGestureConfig {
             pan: { direction: Hammer.DIRECTION_VERTICAL, threshold: 1 }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: CalendarHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: CalendarHammerConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CalendarHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CalendarHammerConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: CalendarHammerConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CalendarHammerConfig, decorators: [{
             type: Injectable
         }] });
 export class IgxYearsViewComponent {
@@ -249,8 +249,8 @@ export class IgxYearsViewComponent {
         }
         this.date = this._calendarModel.timedelta(this.date, 'year', delta);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxYearsViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxYearsViewComponent, isStandalone: true, selector: "igx-years-view", inputs: { formatView: ["formatView", "formatView", booleanAttribute], date: "date", yearFormat: "yearFormat", locale: "locale" }, outputs: { selected: "selected" }, host: { listeners: { "keydown.arrowdown": "onKeydownArrowDown($event)", "keydown.arrowup": "onKeydownArrowUp($event)", "keydown.enter": "onKeydownEnter()" }, properties: { "class.igx-calendar": "this.styleClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxYearsViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxYearsViewComponent, isStandalone: true, selector: "igx-years-view", inputs: { formatView: ["formatView", "formatView", booleanAttribute], date: "date", yearFormat: "yearFormat", locale: "locale" }, outputs: { selected: "selected" }, host: { listeners: { "keydown.arrowdown": "onKeydownArrowDown($event)", "keydown.arrowup": "onKeydownArrowUp($event)", "keydown.enter": "onKeydownEnter()" }, properties: { "class.igx-calendar": "this.styleClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: IgxYearsViewComponent,
@@ -262,7 +262,7 @@ export class IgxYearsViewComponent {
             }
         ], viewQueries: [{ propertyName: "calendarDir", predicate: IgxCalendarYearDirective, descendants: true, read: IgxCalendarYearDirective }], ngImport: i0, template: "<div class=\"igx-calendar__body\">\n    <div class=\"igx-calendar__body-column\" (wheel)=\"scroll($event)\" (pan)=\"pan($event)\">\n        <span class=\"igx-calendar__year\"\n            [igxCalendarYear]=\"year\"\n            [date]=\"date\"\n            (yearSelection)=\"selectYear($event)\"\n            *ngFor=\"let year of decade; trackBy: yearTracker\">\n\n            {{ formattedYear(year) }}\n        </span>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarYearDirective, selector: "[igxCalendarYear]", inputs: ["igxCalendarYear", "date"], outputs: ["yearSelection"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {

package/esm2022/lib/card/card.component.mjs

@@ -35,10 +35,10 @@ export class IgxCardMediaDirective {
          */
         this.role = 'img';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCardMediaDirective, isStandalone: true, selector: "igx-card-media", inputs: { width: "width", height: "height", role: "role" }, host: { properties: { "class.igx-card__media": "this.cssClass", "style.width": "this.width", "style.min-width": "this.width", "style.height": "this.height", "attr.role": "this.role" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCardMediaDirective, isStandalone: true, selector: "igx-card-media", inputs: { width: "width", height: "height", role: "role" }, host: { properties: { "class.igx-card__media": "this.cssClass", "style.width": "this.width", "style.min-width": "this.width", "style.height": "this.height", "attr.role": "this.role" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardMediaDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -85,10 +85,10 @@ export class IgxCardHeaderComponent {
          */
         this.vertical = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxCardHeaderComponent, isStandalone: true, selector: "igx-card-header", inputs: { vertical: ["vertical", "vertical", booleanAttribute] }, host: { properties: { "class.igx-card-header": "this.cssClass", "class.igx-card-header--vertical": "this.vertical" } }, ngImport: i0, template: "<div class=\"igx-card-header__thumbnail\">\n    <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n    <ng-content select=\"\n        [igxCardHeaderTitle],\n        [igxCardHeaderSubtitle],\n        .igx-card-header__title,\n        .igx-card-header__subtitle\">\n    </ng-content>\n</div>\n\n<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxCardHeaderComponent, isStandalone: true, selector: "igx-card-header", inputs: { vertical: ["vertical", "vertical", booleanAttribute] }, host: { properties: { "class.igx-card-header": "this.cssClass", "class.igx-card-header--vertical": "this.vertical" } }, ngImport: i0, template: "<div class=\"igx-card-header__thumbnail\">\n    <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n    <ng-content select=\"\n        [igxCardHeaderTitle],\n        [igxCardHeaderSubtitle],\n        .igx-card-header__title,\n        .igx-card-header__subtitle\">\n    </ng-content>\n</div>\n\n<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-card-header', standalone: true, template: "<div class=\"igx-card-header__thumbnail\">\n    <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n    <ng-content select=\"\n        [igxCardHeaderTitle],\n        [igxCardHeaderSubtitle],\n        .igx-card-header__title,\n        .igx-card-header__subtitle\">\n    </ng-content>\n</div>\n\n<ng-content></ng-content>\n" }]
         }], propDecorators: { cssClass: [{
@@ -106,10 +106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
  * Use it to wrap anything you want to be used as a thumbnail.
  */
 export class IgxCardThumbnailDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCardThumbnailDirective, isStandalone: true, selector: "[igxCardThumbnail]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCardThumbnailDirective, isStandalone: true, selector: "[igxCardThumbnail]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardThumbnailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCardThumbnail]',
@@ -125,10 +125,10 @@ export class IgxCardHeaderTitleDirective {
         /** @hidden @internal */
         this.cssClass = 'igx-card__header__title';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCardHeaderTitleDirective, isStandalone: true, selector: "[igxCardHeaderTitle]", host: { properties: { "class.igx-card-header__title": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCardHeaderTitleDirective, isStandalone: true, selector: "[igxCardHeaderTitle]", host: { properties: { "class.igx-card-header__title": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardHeaderTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardHeaderTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCardHeaderTitle]',
@@ -147,10 +147,10 @@ export class IgxCardHeaderSubtitleDirective {
         /** @hidden @internal */
         this.cssClass = 'igx-card-header__subtitle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardHeaderSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCardHeaderSubtitleDirective, isStandalone: true, selector: "[igxCardHeaderSubtitle]", host: { properties: { "class.igx-card-header__subtitle": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardHeaderSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCardHeaderSubtitleDirective, isStandalone: true, selector: "[igxCardHeaderSubtitle]", host: { properties: { "class.igx-card-header__subtitle": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardHeaderSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardHeaderSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCardHeaderSubtitle]',
@@ -168,10 +168,10 @@ export class IgxCardContentDirective {
         /** @hidden @internal */
         this.cssClass = 'igx-card-content';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCardContentDirective, isStandalone: true, selector: "igx-card-content", host: { properties: { "class.igx-card-content": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCardContentDirective, isStandalone: true, selector: "igx-card-content", host: { properties: { "class.igx-card-content": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardContentDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -198,10 +198,10 @@ export class IgxCardFooterDirective {
          */
         this.role = 'footer';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCardFooterDirective, isStandalone: true, selector: "igx-card-footer", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCardFooterDirective, isStandalone: true, selector: "igx-card-footer", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -344,10 +344,10 @@ export class IgxCardComponent {
         this._elevated = (value === '') || value;
         this.type = IgxCardType.ELEVATED;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxCardComponent, isStandalone: true, selector: "igx-card", inputs: { id: "id", role: "role", type: "type", elevated: "elevated", horizontal: ["horizontal", "horizontal", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "class.igx-card": "this.cssClass", "attr.role": "this.role", "class.igx-card--outlined": "this.isOutlinedCard", "class.igx-card--elevated": "this.isElevatedCard", "class.igx-card--horizontal": "this.horizontal" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxCardComponent, isStandalone: true, selector: "igx-card", inputs: { id: "id", role: "role", type: "type", elevated: "elevated", horizontal: ["horizontal", "horizontal", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "class.igx-card": "this.cssClass", "attr.role": "this.role", "class.igx-card--outlined": "this.isOutlinedCard", "class.igx-card--elevated": "this.isElevatedCard", "class.igx-card--horizontal": "this.horizontal" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-card', standalone: true, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { id: [{
@@ -447,10 +447,10 @@ export class IgxCardActionsComponent {
             this.vertical = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardActionsComponent, deps: [{ token: IgxCardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxCardActionsComponent, isStandalone: true, selector: "igx-card-actions", inputs: { layout: "layout", vertical: ["vertical", "vertical", booleanAttribute], reverse: ["reverse", "reverse", booleanAttribute] }, host: { properties: { "class.igx-card-actions": "this.layout", "class.igx-card-actions--vertical": "this.vertical", "class.igx-card-actions--justify": "this.isJustifyLayout", "class.igx-card-actions--reverse": "this.reverse" } }, usesOnChanges: true, ngImport: i0, template: "<div #buttons class=\"igx-card-actions__start\">\n    <ng-content select=\"[igxStart], [igxButton]:not([igxButton='icon']):not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n    <ng-content select=\"[igxEnd], [igxButton='icon']:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardActionsComponent, deps: [{ token: IgxCardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxCardActionsComponent, isStandalone: true, selector: "igx-card-actions", inputs: { layout: "layout", vertical: ["vertical", "vertical", booleanAttribute], reverse: ["reverse", "reverse", booleanAttribute] }, host: { properties: { "class.igx-card-actions": "this.layout", "class.igx-card-actions--vertical": "this.vertical", "class.igx-card-actions--justify": "this.isJustifyLayout", "class.igx-card-actions--reverse": "this.reverse" } }, usesOnChanges: true, ngImport: i0, template: "<div #buttons class=\"igx-card-actions__start\">\n    <ng-content select=\"[igxStart], [igxButton]:not([igxButton='icon']):not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n    <ng-content select=\"[igxEnd], [igxButton='icon']:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-card-actions', standalone: true, template: "<div #buttons class=\"igx-card-actions__start\">\n    <ng-content select=\"[igxStart], [igxButton]:not([igxButton='icon']):not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n    <ng-content select=\"[igxEnd], [igxButton='icon']:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: IgxCardComponent, decorators: [{

package/esm2022/lib/card/card.module.mjs

@@ -7,11 +7,11 @@ import * as i1 from "./card.component";
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 export class IgxCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxCardModule, imports: [i1.IgxCardComponent, i1.IgxCardHeaderComponent, i1.IgxCardMediaDirective, i1.IgxCardContentDirective, i1.IgxCardActionsComponent, i1.IgxCardFooterDirective, i1.IgxCardHeaderTitleDirective, i1.IgxCardHeaderSubtitleDirective, i1.IgxCardThumbnailDirective], exports: [i1.IgxCardComponent, i1.IgxCardHeaderComponent, i1.IgxCardMediaDirective, i1.IgxCardContentDirective, i1.IgxCardActionsComponent, i1.IgxCardFooterDirective, i1.IgxCardHeaderTitleDirective, i1.IgxCardHeaderSubtitleDirective, i1.IgxCardThumbnailDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgxCardModule, imports: [i1.IgxCardComponent, i1.IgxCardHeaderComponent, i1.IgxCardMediaDirective, i1.IgxCardContentDirective, i1.IgxCardActionsComponent, i1.IgxCardFooterDirective, i1.IgxCardHeaderTitleDirective, i1.IgxCardHeaderSubtitleDirective, i1.IgxCardThumbnailDirective], exports: [i1.IgxCardComponent, i1.IgxCardHeaderComponent, i1.IgxCardMediaDirective, i1.IgxCardContentDirective, i1.IgxCardActionsComponent, i1.IgxCardFooterDirective, i1.IgxCardHeaderTitleDirective, i1.IgxCardHeaderSubtitleDirective, i1.IgxCardThumbnailDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/carousel/carousel.component.mjs

@@ -25,10 +25,10 @@ export class CarouselHammerConfig extends HammerGestureConfig {
             pan: { direction: Hammer.DIRECTION_HORIZONTAL }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: CarouselHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: CarouselHammerConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CarouselHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CarouselHammerConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: CarouselHammerConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CarouselHammerConfig, decorators: [{
             type: Injectable
         }] });
 /**
@@ -843,15 +843,15 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase {
             requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: IgxAngularAnimationService }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxCarouselComponent, isStandalone: true, selector: "igx-carousel", inputs: { id: "id", loop: ["loop", "loop", booleanAttribute], pause: ["pause", "pause", booleanAttribute], navigation: ["navigation", "navigation", booleanAttribute], keyboardSupport: ["keyboardSupport", "keyboardSupport", booleanAttribute], gesturesSupport: ["gesturesSupport", "gesturesSupport", booleanAttribute], maximumIndicatorsCount: "maximumIndicatorsCount", indicatorsOrientation: "indicatorsOrientation", animationType: "animationType", resourceStrings: "resourceStrings", interval: "interval" }, outputs: { slideChanged: "slideChanged", slideAdded: "slideAdded", slideRemoved: "slideRemoved", carouselPaused: "carouselPaused", carouselPlaying: "carouselPlaying" }, host: { listeners: { "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "tap": "onTap($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "panleft": "onPanLeft($event)", "panright": "onPanRight($event)", "panend": "onPanEnd($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.aria-roledescription": "this.roleDescription", "attr.aria-labelledby": "this.labelId", "class.igx-carousel": "this.cssClass", "style.touch-action": "this.touchAction" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: IgxAngularAnimationService }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxCarouselComponent, isStandalone: true, selector: "igx-carousel", inputs: { id: "id", loop: ["loop", "loop", booleanAttribute], pause: ["pause", "pause", booleanAttribute], navigation: ["navigation", "navigation", booleanAttribute], keyboardSupport: ["keyboardSupport", "keyboardSupport", booleanAttribute], gesturesSupport: ["gesturesSupport", "gesturesSupport", booleanAttribute], maximumIndicatorsCount: "maximumIndicatorsCount", indicatorsOrientation: "indicatorsOrientation", animationType: "animationType", resourceStrings: "resourceStrings", interval: "interval" }, outputs: { slideChanged: "slideChanged", slideAdded: "slideAdded", slideRemoved: "slideRemoved", carouselPaused: "carouselPaused", carouselPlaying: "carouselPlaying" }, host: { listeners: { "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "tap": "onTap($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "panleft": "onPanLeft($event)", "panright": "onPanRight($event)", "panend": "onPanEnd($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.aria-roledescription": "this.roleDescription", "attr.aria-labelledby": "this.labelId", "class.igx-carousel": "this.cssClass", "style.touch-action": "this.touchAction" } }, providers: [
             {
                 provide: HAMMER_GESTURE_CONFIG,
                 useClass: CarouselHammerConfig
             }
         ], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: IgxCarouselIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "nextButtonTemplate", first: true, predicate: IgxCarouselNextButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "prevButtonTemplate", first: true, predicate: IgxCarouselPrevButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "slides", predicate: IgxSlideComponent }], viewQueries: [{ propertyName: "defaultIndicator", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultNextButton", first: true, predicate: ["defaultNextButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPrevButton", first: true, predicate: ["defaultPrevButton"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultIndicator let-slide>\n    <div class=\"igx-nav-dot\"\n        [class.igx-nav-dot--active]=\"slide.active\">\n    </div>\n</ng-template>\n\n<ng-template #defaultNextButton let-disabled>\n    <span class=\"igx-nav-arrow\"\n          [class.igx-nav-arrow--disabled]=\"disabled\">\n        <igx-icon>arrow_forward</igx-icon>\n    </span>\n</ng-template>\n\n<ng-template #defaultPrevButton let-disabled>\n    <span class=\"igx-nav-arrow\"\n          [class.igx-nav-arrow--disabled]=\"disabled\">\n        <igx-icon>arrow_back</igx-icon>\n    </span>\n</ng-template>\n\n<div *ngIf=\"showIndicators\" [ngClass]=\"indicatorsOrientationClass\" [attr.role]=\"'tablist'\">\n    <div *ngFor=\"let slide of slides\"\n        class=\"igx-carousel-indicators__indicator\"\n        (click)=\"select(slide)\"\n        [id]=\"'tab-'+ slide.index + '-' + total\"\n        [attr.role]=\"'tab'\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total\"\n        [attr.aria-controls]=\"'panel-' + slide.index\"\n        [attr.aria-selected]=\"slide.active\">\n        <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n    </div>\n</div>\n\n<div *ngIf=\"showIndicatorsLabel\" [ngClass]=\"indicatorsOrientationClass\">\n    <span [id]=\"labelId\" class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n</div>\n\n<div class=\"igx-carousel__inner\" [attr.aria-live]=\"!interval || stoppedByInteraction ? 'polite' : 'off'\">\n    <ng-content></ng-content>\n</div>\n\n<div *ngIf=\"navigation && slides.length\" role=\"button\" tabindex=\"0\" class=\"igx-carousel__arrow--prev\" [attr.aria-label]=\"resourceStrings.igx_carousel_previous_slide\" (keydown.enter)=\"prev()\" (click)=\"prev()\">\n    <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n</div>\n\n<div *ngIf=\"navigation && slides.length\" role=\"button\" tabindex=\"0\" class=\"igx-carousel__arrow--next\" [attr.aria-label]=\"resourceStrings.igx_carousel_next_slide\" (keydown.enter)=\"next()\" (click)=\"next()\">\n    <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n</div>\n\n\n\n", styles: [":host{display:block;outline-style:none}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {

package/esm2022/lib/carousel/carousel.directives.mjs

@@ -1,10 +1,10 @@
 import { Directive } from '@angular/core';
 import * as i0 from "@angular/core";
 export class IgxCarouselIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCarouselIndicatorDirective, isStandalone: true, selector: "[igxCarouselIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCarouselIndicatorDirective, isStandalone: true, selector: "[igxCarouselIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCarouselIndicator]',
@@ -12,10 +12,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
                 }]
         }] });
 export class IgxCarouselNextButtonDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselNextButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCarouselNextButtonDirective, isStandalone: true, selector: "[igxCarouselNextButton]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselNextButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCarouselNextButtonDirective, isStandalone: true, selector: "[igxCarouselNextButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselNextButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselNextButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCarouselNextButton]',
@@ -23,10 +23,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
                 }]
         }] });
 export class IgxCarouselPrevButtonDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselPrevButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxCarouselPrevButtonDirective, isStandalone: true, selector: "[igxCarouselPrevButton]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselPrevButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxCarouselPrevButtonDirective, isStandalone: true, selector: "[igxCarouselPrevButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselPrevButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselPrevButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCarouselPrevButton]',

package/esm2022/lib/carousel/carousel.module.mjs

@@ -9,11 +9,11 @@ import * as i3 from "./carousel.directives";
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 export class IgxCarouselModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselModule, imports: [i1.IgxCarouselComponent, i2.IgxSlideComponent, i3.IgxCarouselIndicatorDirective, i3.IgxCarouselNextButtonDirective, i3.IgxCarouselPrevButtonDirective], exports: [i1.IgxCarouselComponent, i2.IgxSlideComponent, i3.IgxCarouselIndicatorDirective, i3.IgxCarouselNextButtonDirective, i3.IgxCarouselPrevButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselModule, imports: [i1.IgxCarouselComponent, i2.IgxSlideComponent, i3.IgxCarouselIndicatorDirective, i3.IgxCarouselNextButtonDirective, i3.IgxCarouselPrevButtonDirective], exports: [i1.IgxCarouselComponent, i2.IgxSlideComponent, i3.IgxCarouselIndicatorDirective, i3.IgxCarouselNextButtonDirective, i3.IgxCarouselPrevButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/carousel/slide.component.mjs

@@ -103,10 +103,10 @@ export class IgxSlideComponent {
         this._destroy$.next(true);
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxSlideComponent, isStandalone: true, selector: "igx-slide", inputs: { index: "index", direction: "direction", total: "total", active: ["active", "active", booleanAttribute], previous: ["previous", "previous", booleanAttribute] }, outputs: { activeChange: "activeChange" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.id": "this.id", "attr.role": "this.tab", "attr.aria-labelledby": "this.ariaLabelledBy", "class.igx-slide": "this.cssClass", "class.igx-slide--current": "this.active", "class.igx-slide--previous": "this.previous" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxSlideComponent, isStandalone: true, selector: "igx-slide", inputs: { index: "index", direction: "direction", total: "total", active: ["active", "active", booleanAttribute], previous: ["previous", "previous", booleanAttribute] }, outputs: { activeChange: "activeChange" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.id": "this.id", "attr.role": "this.tab", "attr.aria-labelledby": "this.ariaLabelledBy", "class.igx-slide": "this.cssClass", "class.igx-slide--current": "this.active", "class.igx-slide--previous": "this.previous" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxSlideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxSlideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-slide', standalone: true, template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { index: [{

package/esm2022/lib/checkbox/checkbox.component.mjs

@@ -435,14 +435,14 @@ export class IgxCheckboxComponent {
             this.invalid = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], required: ["required", "required", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id", "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], required: ["required", "required", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id", "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [{
                 provide: EDITOR_PROVIDER,
                 useExisting: IgxCheckboxComponent,
                 multi: true
             }], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["checkbox"], descendants: true, static: true }, { propertyName: "nativeLabel", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "placeholderLabel", first: true, predicate: ["placeholderLabel"], descendants: true, static: true }], ngImport: i0, template: "<input #checkbox class=\"igx-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"ariaChecked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (change)=\"_onCheckboxChange($event)\"\n    (blur)=\"onBlur()\" />\n\n<div\n    igxRipple\n    igxRippleTarget=\".igx-checkbox__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\"\n    class=\"igx-checkbox__composite-wrapper\"\n>\n    <span #label class=\"igx-checkbox__composite\">\n        <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path d=\"M4.1,12.7 9,17.6 20.3,6.3\" />\n        </svg>\n    </span>\n\n    <div class=\"igx-checkbox__ripple\"></div>\n</div>\n\n<span #placeholderLabel\n    [class]=\"labelClass\"\n    [id]=\"labelId\">\n    <ng-content></ng-content>\n</span>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-checkbox', providers: [{
                             provide: EDITOR_PROVIDER,

package/esm2022/lib/checkbox/checkbox.module.mjs

@@ -6,11 +6,11 @@ import * as i0 from "@angular/core";
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 export class IgxCheckboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxCheckboxModule, imports: [IgxCheckboxComponent], exports: [IgxCheckboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCheckboxModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgxCheckboxModule, imports: [IgxCheckboxComponent], exports: [IgxCheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCheckboxModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxCheckboxComponent],

package/esm2022/lib/chips/chip.component.mjs

@@ -685,10 +685,10 @@ export class IgxChipComponent extends DisplayDensityBase {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger", "style.--component-size": "this.componentSize" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        <div *ngIf=\"selected\" [ngClass]=\"selectClass(selected)\">\n            <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n        </div>\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        <div class=\"igx-chip__remove\" *ngIf=\"removable\"\n            [attr.tabIndex]=\"tabIndex\"\n            (keydown)=\"onRemoveBtnKeyDown($event)\"\n            (pointerdown)=\"onRemoveMouseDown($event)\"\n            (mousedown)=\"onRemoveMouseDown($event)\"\n            (click)=\"onRemoveClick($event)\"\n            (touchmove)=\"onRemoveTouchMove()\"\n            (touchend)=\"onRemoveTouchEnd($event)\">\n            <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon [attr.aria-label]=\"resourceStrings.igx_chip_select\">done</igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon [attr.aria-label]=\"resourceStrings.igx_chip_remove\">cancel</igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger", "style.--component-size": "this.componentSize" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        <div *ngIf=\"selected\" [ngClass]=\"selectClass(selected)\">\n            <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n        </div>\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        <div class=\"igx-chip__remove\" *ngIf=\"removable\"\n            [attr.tabIndex]=\"tabIndex\"\n            (keydown)=\"onRemoveBtnKeyDown($event)\"\n            (pointerdown)=\"onRemoveMouseDown($event)\"\n            (mousedown)=\"onRemoveMouseDown($event)\"\n            (click)=\"onRemoveClick($event)\"\n            (touchmove)=\"onRemoveTouchMove()\"\n            (touchend)=\"onRemoveTouchEnd($event)\">\n            <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon [attr.aria-label]=\"resourceStrings.igx_chip_select\">done</igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon [attr.aria-label]=\"resourceStrings.igx_chip_remove\">cancel</igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-chip', standalone: true, imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, NgIf, IgxIconComponent], template: "<div #chipArea class=\"igx-chip__item\"\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        <div *ngIf=\"selected\" [ngClass]=\"selectClass(selected)\">\n            <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n        </div>\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        <div class=\"igx-chip__remove\" *ngIf=\"removable\"\n            [attr.tabIndex]=\"tabIndex\"\n            (keydown)=\"onRemoveBtnKeyDown($event)\"\n            (pointerdown)=\"onRemoveMouseDown($event)\"\n            (mousedown)=\"onRemoveMouseDown($event)\"\n            (click)=\"onRemoveClick($event)\"\n            (touchmove)=\"onRemoveTouchMove()\"\n            (touchend)=\"onRemoveTouchEnd($event)\">\n            <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon [attr.aria-label]=\"resourceStrings.igx_chip_select\">done</igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon [attr.aria-label]=\"resourceStrings.igx_chip_remove\">cancel</igx-icon>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{

package/esm2022/lib/chips/chips-area.component.mjs

@@ -286,10 +286,10 @@ export class IgxChipsAreaComponent {
             owner: this
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxChipsAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxChipsAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-chips-area', standalone: true, template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.IterableDiffers }], propDecorators: { role: [{

package/esm2022/lib/chips/chips.module.mjs

@@ -10,11 +10,11 @@ import * as i4 from "../directives/suffix/suffix.directive";
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 export class IgxChipsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxChipsModule, imports: [i1.IgxChipsAreaComponent, i2.IgxChipComponent, i3.IgxPrefixDirective, i4.IgxSuffixDirective], exports: [i1.IgxChipsAreaComponent, i2.IgxChipComponent, i3.IgxPrefixDirective, i4.IgxSuffixDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxChipsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: IgxChipsModule, imports: [i1.IgxChipsAreaComponent, i2.IgxChipComponent, i3.IgxPrefixDirective, i4.IgxSuffixDirective], exports: [i1.IgxChipsAreaComponent, i2.IgxChipComponent, i3.IgxPrefixDirective, i4.IgxSuffixDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxChipsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [

package/esm2022/lib/combo/combo-add-item.component.mjs

@@ -14,10 +14,10 @@ export class IgxComboAddItemComponent extends IgxComboItemComponent {
         this.comboAPI.disableTransitions = false;
         this.comboAPI.add_custom_item();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-combo-add-item',