+ Content1
+
+
+ Content2
+
+
+ Cascading Style Sheets (CSS) is a style sheet language used for
+ describing the presentation of a document written in a markup language
+ like HTML
+
+
+ Sass is a preprocessor scripting language that is interpreted or
+ compiled into Cascading Style Sheets (CSS).
+
+
+ JavaScript is the world's most popular programming language.
+ JavaScript is the programming language of the Web.
+
+
+
+ @for (item of menuItems; track trackMenuItem(item)) {
+
+
+ }
+
+
diff --git a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts
new file mode 100644
index 00000000000..5f17dcfc137
--- /dev/null
+++ b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts
@@ -0,0 +1,235 @@
+import { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './action-strip.component';
+import { Component, ViewChild, ElementRef, ViewContainerRef } from '@angular/core';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { wait } from '../../../test-utils/ui-interactions.spec';
+
+const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions';
+const DROP_DOWN_LIST = 'igx-drop-down__list';
+
+describe('igxActionStrip', () => {
+ let fixture;
+ let actionStrip: IgxActionStripComponent;
+ let actionStripElement: ElementRef;
+ let parentContainer: ElementRef;
+ let innerContainer: ViewContainerRef;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ NoopAnimationsModule,
+ IgxActionStripComponent,
+ IgxActionStripTestingComponent,
+ IgxActionStripMenuTestingComponent,
+ IgxActionStripCombinedMenuTestingComponent
+ ]
+ }).compileComponents();
+ }));
+
+ describe('Unit tests: ', () => {
+
+ it('should properly show and hide using API', () => {
+ fixture = TestBed.createComponent(IgxActionStripComponent);
+ actionStrip = fixture.componentInstance as IgxActionStripComponent;
+ fixture.detectChanges();
+ expect(actionStrip.hidden).toBeTruthy();
+
+ const el = document.createElement('div');
+ fixture.debugElement.nativeElement.appendChild(el);
+ actionStrip.show(el);
+ expect(actionStrip.hidden).toBeFalsy();
+ expect(actionStrip.context).toBe(el);
+ actionStrip.hide();
+ expect(actionStrip.hidden).toBeTruthy();
+ fixture.debugElement.nativeElement.removeChild(el);
+ });
+
+ });
+
+ describe('Initialization and rendering tests: ', () => {
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(IgxActionStripTestingComponent);
+ fixture.detectChanges();
+ actionStrip = fixture.componentInstance.actionStrip;
+ actionStripElement = fixture.componentInstance.actionStripElement;
+ parentContainer = fixture.componentInstance.parentContainer;
+ innerContainer = fixture.componentInstance.innerContainer;
+ });
+
+ it('should be overlapping its parent container when no context is applied', () => {
+ const parentBoundingRect = parentContainer.nativeElement.getBoundingClientRect();
+ const actionStripBoundingRect = actionStripElement.nativeElement.getBoundingClientRect();
+ expect(parentBoundingRect.top).toBe(actionStripBoundingRect.top);
+ expect(parentBoundingRect.bottom).toBe(actionStripBoundingRect.bottom);
+ expect(parentBoundingRect.left).toBe(actionStripBoundingRect.left);
+ expect(parentBoundingRect.right).toBe(actionStripBoundingRect.right);
+ });
+
+ it('should be overlapping context.element when context is applied', () => {
+ actionStrip.show(innerContainer);
+ fixture.detectChanges();
+ const innerBoundingRect = innerContainer.element.nativeElement.getBoundingClientRect();
+ const actionStripBoundingRect = actionStripElement.nativeElement.getBoundingClientRect();
+ expect(innerBoundingRect.top).toBe(actionStripBoundingRect.top);
+ expect(innerBoundingRect.bottom).toBe(actionStripBoundingRect.bottom);
+ expect(innerBoundingRect.left).toBe(actionStripBoundingRect.left);
+ expect(innerBoundingRect.right).toBe(actionStripBoundingRect.right);
+ });
+
+ it('should allow interacting with the content elements', () => {
+ const asIcon = fixture.debugElement.query(By.css('.asIcon'));
+ asIcon.triggerEventHandler('click', new Event('click'));
+ fixture.detectChanges();
+ expect(fixture.componentInstance.flag).toBeTruthy();
+ });
+
+ it('should not display the action strip when setting it hidden', () => {
+ actionStrip.hidden = true;
+ fixture.detectChanges();
+ const asQuery = fixture.debugElement.query(By.css('igx-action-strip'));
+ expect(asQuery.nativeElement.style.display).toBe('none');
+ });
+ });
+
+ describe('render content as menu', () => {
+
+ it('should render tree-dot button which toggles the content as menu', () => {
+ fixture = TestBed.createComponent(IgxActionStripMenuTestingComponent);
+ fixture.detectChanges();
+ actionStrip = fixture.componentInstance.actionStrip;
+ const actionStripContainer = fixture.debugElement.query(By.css(`.${ACTION_STRIP_CONTAINER_CSS}`));
+ // there should be one rendered child and one hidden dropdown
+ expect(actionStripContainer.nativeElement.children.length).toBe(2);
+ let dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+ expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('true');
+ const icon = fixture.debugElement.query(By.css(`igx-icon`));
+ icon.parent.triggerEventHandler('click', new Event('click'));
+ fixture.detectChanges();
+ dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+ expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('false');
+ const dropDownItems = dropDownList.queryAll(By.css('igx-drop-down-item'));
+ expect(dropDownItems.length).toBe(3);
+ });
+
+ it('should emit onMenuOpen/onMenuOpening when toggling the menu', () => {
+ pending('implementation');
+ });
+
+ it('should allow combining content outside and inside the menu', () => {
+ fixture = TestBed.createComponent(IgxActionStripCombinedMenuTestingComponent);
+ fixture.detectChanges();
+ actionStrip = fixture.componentInstance.actionStrip;
+ const actionStripContainer = fixture.debugElement.query(By.css(`.${ACTION_STRIP_CONTAINER_CSS}`));
+ // there should be one rendered child and one hidden dropdown and one additional icon
+ expect(actionStripContainer.nativeElement.children.length).toBe(3);
+ let dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+ expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('true');
+ const icon = fixture.debugElement.query(By.css(`igx-icon`));
+ icon.parent.triggerEventHandler('click', new Event('click'));
+ fixture.detectChanges();
+ dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+ expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('false');
+ const dropDownItems = dropDownList.queryAll(By.css('igx-drop-down-item'));
+ expect(dropDownItems.length).toBe(2);
+ });
+
+ it('should close the menu when hiding action strip', async () => {
+ fixture = TestBed.createComponent(IgxActionStripCombinedMenuTestingComponent);
+ fixture.detectChanges();
+ actionStrip = fixture.componentInstance.actionStrip;
+ // there should be one rendered child and one hidden dropdown and one additional icon
+ const icon = fixture.debugElement.query(By.css(`igx-icon`));
+ icon.parent.triggerEventHandler('click', new Event('click'));
+ fixture.detectChanges();
+ let dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+ expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('false');
+ actionStrip.hide();
+ await wait();
+ fixture.detectChanges();
+ dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+ expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('true');
+ });
+ });
+});
+
+@Component({
+ template: `
+
+
+
+
+ alarm
+
+
+ `,
+ imports: [IgxActionStripComponent, IgxIconComponent]
+})
+class IgxActionStripTestingComponent {
+ @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+ public actionStrip: IgxActionStripComponent;
+
+ @ViewChild('actionStrip', { read: ElementRef, static: true })
+ public actionStripElement: ElementRef;
+
+ @ViewChild('parent', { static: true })
+ public parentContainer: ElementRef;
+
+ @ViewChild('inner', { read: ViewContainerRef, static: true })
+ public innerContainer: ViewContainerRef;
+
+ public flag = false;
+
+ public onIconClick() {
+ this.flag = true;
+ }
+}
+
+@Component({
+ template: `
+
+
+ + Lorem ipsum dolor sit +
+
+
+ Mark
+ Favorite
+ Download
+
+
+ `,
+ imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective]
+})
+class IgxActionStripMenuTestingComponent {
+ @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+ public actionStrip: IgxActionStripComponent;
+}
+
+@Component({
+ template: `
+
+
+ + Lorem ipsum dolor sit +
+
+
+ Mark
+ Favorite
+ Download
+
+
+ `,
+ imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective]
+})
+class IgxActionStripCombinedMenuTestingComponent {
+ @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+ public actionStrip: IgxActionStripComponent;
+}
diff --git a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts
new file mode 100644
index 00000000000..09ff6f865d5
--- /dev/null
+++ b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts
@@ -0,0 +1,323 @@
+import {
+ Component,
+ Directive,
+ HostBinding,
+ Input,
+ Renderer2,
+ ViewContainerRef,
+ ContentChildren,
+ QueryList,
+ ViewChild,
+ TemplateRef,
+ ChangeDetectorRef,
+ AfterViewInit,
+ ElementRef,
+ booleanAttribute,
+ AfterContentInit,
+ inject
+} from '@angular/core';
+
+
+import { ActionStripResourceStringsEN, CloseScrollStrategy, getCurrentResourceStrings, IActionStripResourceStrings, IgxActionStripActionsToken, IgxActionStripToken, OverlaySettings } from 'igniteui-angular/core';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxToggleActionDirective } from 'igniteui-angular/directives';
+import { IgxRippleDirective } from 'igniteui-angular/directives';
+import { NgTemplateOutlet } from '@angular/common';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { trackByIdentity } from 'igniteui-angular/core';
+import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';
+
+@Directive({
+ selector: '[igxActionStripMenuItem]',
+ standalone: true
+})
+export class IgxActionStripMenuItemDirective {
+ public templateRef = inject
+
+ + Lorem ipsum dolor sit +
+
+
+ SOME PAGE CONTENT
`,
+ imports: [IgxBannerComponent]
+})
+export class IgxBannerEmptyComponent {
+ @ViewChild(IgxBannerComponent, { read: IgxBannerComponent, static: true })
+ public banner: IgxBannerComponent;
+}
+
+@Component({
+ template: `
+
+
+ You have lost connection to the internet.
+
+
+
+
+
+ SOME PAGE CONTENT
+ `,
+ imports: [IgxBannerComponent, IgxBannerActionsDirective]
+})
+export class IgxBannerOneButtonComponent {
+ @ViewChild(IgxBannerComponent, { read: IgxBannerComponent, static: true })
+ public banner: IgxBannerComponent;
+}
+
+@Component({
+ template: `
+
+
+ error
+ Unfortunately, the credit card did not go through, please try again.
+
+
+
+
+
+
+ SOME PAGE CONTENT
+ `,
+ imports: [IgxBannerComponent, IgxBannerActionsDirective, IgxIconComponent]
+})
+export class IgxBannerSampleComponent {
+ @ViewChild(IgxBannerComponent, { read: IgxBannerComponent, static: true })
+ public banner: IgxBannerComponent;
+}
+
+@Component({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Brad Stanley
+Audi AG
+Brad Stanley has requested to follow you.
+ SOME PAGE CONTENT
`,
+ imports: [IgxBannerComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxBannerActionsDirective, IgxAvatarComponent]
+})
+export class IgxBannerCustomTemplateComponent {
+ @ViewChild(IgxBannerComponent, { read: IgxBannerComponent, static: true })
+ public banner: IgxBannerComponent;
+}
+
+@Component({
+ template: `
+
+ Simple message
+
+ SOME PAGE CONTENT
`,
+ imports: [IgxBannerComponent]
+})
+export class SimpleBannerEventsComponent {
+ @ViewChild(IgxBannerComponent, { read: IgxBannerComponent, static: true })
+ public banner: IgxBannerComponent;
+
+ public cancelFlag = false;
+
+ public handleOpening(event: any) {
+ event.cancel = this.cancelFlag;
+ }
+
+ public handleClosing(event: any) {
+ event.cancel = this.cancelFlag;
+ }
+}
+
+@Component({
+ template: `
+
+
+ Banner initialized as open.
+
+
+ `,
+ standalone: true,
+ imports: [IgxBannerComponent]
+})
+export class IgxBannerInitializedOpenComponent {
+ @ViewChild(IgxBannerComponent, { static: true })
+ public banner: IgxBannerComponent;
+}
diff --git a/projects/igniteui-angular/banner/src/banner/banner.component.ts b/projects/igniteui-angular/banner/src/banner/banner.component.ts
new file mode 100644
index 00000000000..14ade6c7f7f
--- /dev/null
+++ b/projects/igniteui-angular/banner/src/banner/banner.component.ts
@@ -0,0 +1,331 @@
+import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, inject } from '@angular/core';
+
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxBannerActionsDirective } from './banner.directives';
+import {
+ CancelableEventArgs,
+ IBaseEventArgs,
+ BannerResourceStringsEN,
+ IBannerResourceStrings,
+ getCurrentResourceStrings,
+ IToggleView
+} from 'igniteui-angular/core';
+import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';
+
+export interface BannerEventArgs extends IBaseEventArgs {
+ event?: Event;
+}
+
+export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventArgs {
+}
+/**
+ * **Ignite UI for Angular Banner** -
+ * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)
+ *
+ * The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application.
+ *
+ * Usage:
+ *
+ * ```html
+ *
+
+
+
+
+
+
+
+ @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (isDefaultView) {
+ @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {
+
+
+
+ @if (isDefaultView) {
+ @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {
+
+
+ }
+ }
+
+ @if (isYearView) {
+
+
+ }
+
+ @if (isDecadeView) {
+
+
+ }
+
+
diff --git a/projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts b/projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts
new file mode 100644
index 00000000000..0ba26e598b4
--- /dev/null
+++ b/projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts
@@ -0,0 +1,3511 @@
+import { Component, DebugElement, LOCALE_ID, ViewChild } from "@angular/core";
+import {
+ TestBed,
+ tick,
+ fakeAsync,
+ flush,
+ waitForAsync,
+ ComponentFixture,
+} from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+
+import { registerLocaleData } from "@angular/common";
+import localeFr from "@angular/common/locales/fr";
+
+import {
+ Calendar,
+ IgxCalendarComponent,
+ IgxCalendarView,
+ isLeap,
+ IViewDateChangeEventArgs,
+ monthRange,
+ weekDay,
+} from "./public_api";
+import { UIInteractions } from "../../../test-utils/ui-interactions.spec";
+import {
+ DateRangeDescriptor,
+ DateRangeType,
+} from "../../../core/src/core/dates/dateRange";
+
+import { IgxDayItemComponent } from "./days-view/day-item.component";
+import { HelperTestFunctions } from "../../../test-utils/calendar-helper-utils";
+import { WEEKDAYS } from "../../../core/src/core/enums";
+
+describe("IgxCalendar - ", () => {
+ registerLocaleData(localeFr);
+
+ it("Should receive correct values from utility functions", () => {
+ const calendar = new Calendar();
+
+ // Leap year
+ expect(isLeap(2017)).toBe(false);
+ expect(isLeap(2016)).toBe(true);
+
+ // monthRange
+ expect(() => monthRange(2017, -1)).toThrow();
+ expect(() => monthRange(2017, 12)).toThrow();
+ expect(monthRange(2017, 5)).toEqual([weekDay(2017, 5, 1), 30]);
+ expect(monthRange(2016, 1)).toEqual([weekDay(2016, 1, 1), 29]); // Leap year
+
+ // Calendar timedelta
+ const startDate = new Date(2017, 0, 1, 0, 0, 0);
+
+ // Year timedelta
+ let newDate = calendar.timedelta(startDate, "year", 1);
+ expect(newDate.getFullYear()).toEqual(2018);
+ newDate = calendar.timedelta(startDate, "year", -1);
+ expect(newDate.getFullYear()).toEqual(2016);
+
+ // Quarter timedelta
+ newDate = calendar.timedelta(startDate, "quarter", 1);
+ expect(newDate.getMonth()).toEqual(3);
+ newDate = calendar.timedelta(startDate, "quarter", -1);
+ expect(newDate.getFullYear()).toEqual(2016);
+ expect(newDate.getMonth()).toEqual(9);
+
+ // Month timedelta
+ newDate = calendar.timedelta(startDate, "month", 1);
+ expect(newDate.getMonth()).toEqual(1);
+ newDate = calendar.timedelta(startDate, "month", -1);
+ expect(newDate.getFullYear()).toEqual(2016);
+ expect(newDate.getMonth()).toEqual(11);
+
+ // Week timedelta
+ newDate = calendar.timedelta(startDate, "week", 1);
+ expect(newDate.getDate()).toEqual(8);
+ newDate = calendar.timedelta(startDate, "week", -1);
+ expect(newDate.getFullYear()).toEqual(2016);
+ expect(newDate.getDate()).toEqual(25);
+
+ // Day timedelta
+ newDate = calendar.timedelta(startDate, "day", 3);
+ expect(newDate.getDate()).toEqual(4);
+ expect(calendar.timedelta(startDate, "day", 7).toDateString()).toEqual(
+ calendar.timedelta(startDate, "week", 1).toDateString(),
+ );
+ newDate = calendar.timedelta(startDate, "day", -3);
+ expect(newDate.getFullYear()).toEqual(2016);
+ expect(newDate.getDate()).toEqual(29);
+
+ // Hour timedelta
+ newDate = calendar.timedelta(startDate, "hour", 1);
+ expect(newDate.getHours()).toEqual(1);
+ newDate = calendar.timedelta(startDate, "hour", 24);
+ expect(newDate.getDate()).toEqual(2);
+ expect(newDate.getHours()).toEqual(0);
+ newDate = calendar.timedelta(startDate, "hour", -1);
+ expect(newDate.getHours()).toEqual(23);
+ expect(newDate.getDate()).toEqual(31);
+ expect(newDate.getFullYear()).toEqual(2016);
+
+ // Minute timedelta
+ newDate = calendar.timedelta(startDate, "minute", 60);
+ expect(newDate.getHours()).toEqual(1);
+ newDate = calendar.timedelta(startDate, "minute", 24 * 60);
+ expect(newDate.getDate()).toEqual(2);
+ expect(newDate.getHours()).toEqual(0);
+ newDate = calendar.timedelta(startDate, "minute", -60);
+ expect(newDate.getHours()).toEqual(23);
+ expect(newDate.getDate()).toEqual(31);
+ expect(newDate.getFullYear()).toEqual(2016);
+
+ // Seconds timedelta
+ newDate = calendar.timedelta(startDate, "second", 3600);
+ expect(newDate.getHours()).toEqual(1);
+ newDate = calendar.timedelta(startDate, "second", 24 * 3600);
+ expect(newDate.getDate()).toEqual(2);
+ expect(newDate.getHours()).toEqual(0);
+ newDate = calendar.timedelta(startDate, "second", -3600);
+ expect(newDate.getHours()).toEqual(23);
+ expect(newDate.getDate()).toEqual(31);
+ expect(newDate.getFullYear()).toEqual(2016);
+
+ // Throws on invalid interval
+ expect(() => calendar.timedelta(startDate, "nope", 1)).toThrow();
+ });
+
+ describe("Basic -", () => {
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ NoopAnimationsModule,
+ IgxCalendarSampleComponent,
+ IgxCalendarRangeComponent,
+ IgxCalendarDisabledSpecialDatesComponent,
+ IgxCalendarValueComponent,
+ ],
+ }).compileComponents();
+ }));
+
+ describe("Calendar - ", () => {
+ let fixture: ComponentFixture
+ @switch (selection) {
+ @case ('multi') {
+ {{ monthsViewNumber && monthsViewNumber > 1 ?
+ resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :
+ resourceStrings.igx_calendar_singular_multi_selection}}
+ }
+ @case ('range') {
+ {{ monthsViewNumber && monthsViewNumber > 1 ?
+ resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :
+ resourceStrings.igx_calendar_singular_range_selection}}
+ }
+ @default {
+ {{ monthsViewNumber && monthsViewNumber > 1 ?
+ resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :
+ resourceStrings.igx_calendar_singular_single_selection}}
+ }
+ }
+
+
+ @if (showWeekNumbers) {
+
+
+@for (
+ week of monthWeeks; track rowTracker(i, week);
+ let isLast = $last; let i = $index
+) {
+
+
+ {{ weekNumberHeader.short | titlecase }}
+
+
+ }
+ @for (dayName of weekHeaderLabels; track dayName.long) {
+
+
+ {{ dayName.formatted | titlecase }}
+
+
+ }
+
+ @if (showWeekNumbers) {
+
+ {{ formattedDate(day.native) }}
+
+ }
+
+}
diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts
new file mode 100644
index 00000000000..cf2fac8ad27
--- /dev/null
+++ b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts
@@ -0,0 +1,411 @@
+import { Component, DebugElement, ViewChild } from "@angular/core";
+import { IgxDaysViewComponent } from "./days-view.component";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { DateRangeDescriptor, DateRangeType } from 'igniteui-webcomponents';
+import { ScrollDirection } from "../calendar";
+import { KeyboardNavigationService } from '../calendar.services';
+import { CalendarDay } from 'igniteui-angular/core';
+import { UIInteractions } from '../../../../test-utils/ui-interactions.spec';
+
+const TODAY = new Date(2024, 6, 12);
+
+describe("Days View Component", () => {
+ const baseClass = "igx-days-view";
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [InitDaysViewComponent],
+ providers: [
+ KeyboardNavigationService
+ ]
+ }).compileComponents();
+ }));
+
+ it("initializes a days-view component with auto-incremented id", () => {
+ const fixture = TestBed.createComponent(InitDaysViewComponent);
+ fixture.detectChanges();
+ const { instance } = fixture.componentInstance;
+ const { nativeElement: hostEl } = fixture.debugElement.query(
+ By.css(baseClass),
+ );
+
+ expect(instance.id).toContain(`${baseClass}-`);
+ expect(hostEl.id).toContain(`${baseClass}-`);
+
+ instance.id = "customDaysView";
+ fixture.detectChanges();
+
+ expect(instance.id).toBe("customDaysView");
+ expect(hostEl.id).toBe("customDaysView");
+ });
+
+ it("should set the showActiveDay property", () => {
+ const fixture = TestBed.createComponent(InitDaysViewComponent);
+ const { instance } = fixture.componentInstance;
+ instance.showActiveDay = true;
+ fixture.detectChanges();
+ });
+
+ it("should automatically set the showActiveDay property to `true` on focus", () => {
+ const fixture = TestBed.createComponent(InitDaysViewComponent);
+ const el = fixture.debugElement.query(By.css("igx-days-view"));
+ const { instance } = fixture.componentInstance;
+ fixture.detectChanges();
+
+ el.nativeElement.focus();
+ fixture.detectChanges();
+
+ expect(instance.showActiveDay).toBe(true);
+ });
+
+ it("should automatically set the showActiveDay property to `false` on blur", () => {
+ const fixture = TestBed.createComponent(InitDaysViewComponent);
+ const el = fixture.debugElement.query(By.css("igx-days-view"));
+ const { instance } = fixture.componentInstance;
+ fixture.detectChanges();
+
+ el.nativeElement.focus();
+ fixture.detectChanges();
+
+ el.nativeElement.blur();
+ fixture.detectChanges();
+
+ expect(instance.showActiveDay).toBe(false);
+ });
+
+ it("should set activeDate to the first day of the current month when no value is provided", () => {
+ const firstMonthDay = new Date(
+ TODAY.getFullYear(),
+ TODAY.getMonth(),
+ 1,
+ );
+ const fixture = TestBed.createComponent(InitDaysViewComponent);
+ const { instance } = fixture.componentInstance;
+ fixture.detectChanges();
+
+ expect(instance.activeDate).toEqual(firstMonthDay);
+ });
+
+ it("should hide leading/trailing inactive days when hideLeadingDays/hideTrailingDays are set", () => {
+ const fixture = TestBed.createComponent(InitDaysViewComponent);
+ const { instance } = fixture.componentInstance;
+ fixture.detectChanges();
+
+ const { leading: initialLeading, trailing: initialTrailing } =
+ getInactiveDays(fixture);
+
+ instance.hideLeadingDays = true;
+ fixture.detectChanges();
+
+ const { leading } = getInactiveDays(fixture);
+
+ if (initialLeading.length > 0) {
+ expect(leading.length).toEqual(0);
+ }
+
+ instance.hideTrailingDays = true;
+ fixture.detectChanges();
+
+ const { trailing } = getInactiveDays(fixture);
+
+ if (initialTrailing.length > 0) {
+ expect(trailing.length).toEqual(0);
+ }
+ });
+
+ describe("Keyboard navigation", () => {
+ let fixture: ComponentFixture
+
+ {{ getWeekNumber(week[0]) }}
+
+
+ }
+ @for (day of week; track dateTracker($index, day)) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ resourceStrings.igx_calendar_singular_single_selection}}
+
+
+
+ @if (isDefaultView) {
+
+
+
+ @if (isDefaultView) {
+
+ >
+
+ }
+
+ @if (isDecadeView) {
+
+
+ }
+
+
diff --git a/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts b/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts
new file mode 100644
index 00000000000..0fdd6733c63
--- /dev/null
+++ b/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts
@@ -0,0 +1,578 @@
+import { Component, ViewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { UIInteractions } from '../../../../test-utils/ui-interactions.spec';
+import { IgxMonthPickerComponent } from './month-picker.component';
+import { IFormattingOptions, IgxCalendarView } from '../calendar';
+
+describe('IgxMonthPicker', () => {
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [NoopAnimationsModule, IgxMonthPickerSampleComponent]
+ }).compileComponents();
+ });
+
+ it('should initialize a month picker component', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance).toBeDefined();
+ });
+
+ it('should initialize a month picker component with `id` property', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+ expect(monthPicker.id).toBe('igx-month-picker-1');
+
+ monthPicker.id = 'custom';
+ fixture.detectChanges();
+
+ expect(monthPicker.id).toBe('custom');
+ });
+
+ it('should properly render month picker DOM structure', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+
+ const months = dom.queryAll(By.css('.igx-calendar-view__item'));
+ const current = dom.query(By.css('.igx-calendar-view__item--selected'));
+
+ expect(months.length).toEqual(12);
+ expect(current.nativeElement.textContent.trim()).toMatch('Feb');
+
+ const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ UIInteractions.simulateMouseDownEvent(yearBtn.nativeElement);
+ fixture.detectChanges();
+
+ const years = dom.queryAll(By.css('.igx-calendar-view__item'));
+ const currentYear = dom.query(By.css('.igx-calendar-view__item--selected'));
+
+ expect(years.length).toEqual(15);
+ expect(currentYear.nativeElement.textContent.trim()).toMatch('2019');
+ });
+
+ it('should properly render month picker rowheader elements', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+ const next = dom.query(By.css('.igx-calendar-picker__next'));
+
+ expect(prev.nativeElement.getAttribute('aria-label')).toEqual('Previous Year');
+ expect(prev.nativeElement.getAttribute('role')).toEqual('button');
+ expect(prev.nativeElement.getAttribute('data-action')).toEqual('prev');
+
+ expect(next.nativeElement.getAttribute('aria-label')).toEqual('Next Year');
+ expect(next.nativeElement.getAttribute('role')).toEqual('button');
+ expect(next.nativeElement.getAttribute('data-action')).toEqual('next');
+ });
+
+ it('should properly set @Input properties and setters', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const instance = fixture.componentInstance;
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+ const format: IFormattingOptions = {
+ day: '2-digit',
+ month: 'long',
+ weekday: 'long',
+ year: '2-digit'
+ };
+
+ expect(monthPicker.value).toBeUndefined();
+ expect(monthPicker.viewDate.getDate()).toEqual(1);
+ expect(monthPicker.locale).toEqual('en');
+
+ const today = new Date(Date.now());
+ monthPicker.viewDate = today;
+ monthPicker.value = today;
+ instance.locale = 'fr';
+ instance.formatOptions = format;
+ fixture.detectChanges();
+
+ expect(monthPicker.locale).toEqual('fr');
+ expect(monthPicker.formatOptions.year).toEqual('2-digit');
+ expect(monthPicker.value.getDate()).toEqual(today.getDate());
+ expect(monthPicker.viewDate.getDate()).toEqual(1);
+ });
+
+ it('should properly set formatOptions and formatViews', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+ const defaultOptions = {
+ day: 'numeric',
+ month: 'short',
+ weekday: 'short',
+ year: 'numeric'
+ };
+ const defaultViews = { day: false, month: true, year: false };
+
+ const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ const month = dom.queryAll(By.css('.igx-calendar-view__item'))[0];
+
+ expect(monthPicker.formatOptions).toEqual(jasmine.objectContaining(defaultOptions));
+ expect(monthPicker.formatViews).toEqual(jasmine.objectContaining(defaultViews));
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+ expect(month.nativeElement.textContent.trim()).toMatch('Jan');
+
+ const formatOptions: any = { month: 'long', year: '2-digit' };
+ const formatViews: any = { month: true, year: true };
+
+ monthPicker.formatViews = formatViews;
+ monthPicker.formatOptions = formatOptions;
+ fixture.detectChanges();
+
+ const march = dom.queryAll(By.css('.igx-calendar-view__item'))[2];
+
+ expect(monthPicker.formatOptions).toEqual(jasmine.objectContaining(Object.assign(defaultOptions, formatOptions)));
+ expect(monthPicker.formatViews).toEqual(jasmine.objectContaining(Object.assign(defaultViews, formatViews)));
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('19');
+ expect(march.nativeElement.textContent.trim()).toMatch('March');
+
+ UIInteractions.simulateMouseDownEvent(yearBtn.nativeElement);
+ fixture.detectChanges();
+ const year = dom.queryAll(By.css('.igx-calendar-view__item'))[0];
+
+ expect(year.nativeElement.textContent.trim()).toMatch('10');
+ });
+
+ it('should properly set locale', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+ const locale = 'de';
+ monthPicker.locale = locale;
+ fixture.detectChanges();
+
+ const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ const month = dom.queryAll(By.css('.igx-calendar-view__item'))[2];
+
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+ expect(month.nativeElement.textContent.trim()).toMatch('Mär');
+ });
+
+ it('should select a month on mousedown', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+ const months = dom.queryAll(By.css('.igx-calendar-view__item'));
+
+ spyOn(monthPicker.selected, 'emit');
+
+ UIInteractions.simulateMouseDownEvent(months[2].nativeElement.firstChild);
+ fixture.detectChanges();
+
+ const currentMonth = dom.query(By.css('.igx-calendar-view__item--selected'));
+
+ expect(monthPicker.selected.emit).toHaveBeenCalled();
+ expect(currentMonth.nativeElement.textContent.trim()).toEqual('Mar');
+
+ const nextDay = new Date(2019, 2, 1);
+ expect(fixture.componentInstance.model.getDate()).toEqual(nextDay.getDate());
+ });
+
+ it('should select a month through API', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+ const nextDay = new Date(2022, 3, 14);
+
+ monthPicker.selectDate(nextDay);
+ fixture.detectChanges();
+
+ const currentMonth = dom.query(By.css('.igx-calendar-view__item--selected'));
+ const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+
+ expect(currentMonth.nativeElement.textContent.trim()).toEqual('Apr');
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2022');
+ });
+
+ it('should navigate to the previous/next year.', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+
+ const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+ const next = dom.query(By.css('.igx-calendar-picker__next'));
+ const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+ UIInteractions.simulateMouseDownEvent(prev.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2018);
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2018');
+
+ for (let i = 0; i < 3; i++) {
+ UIInteractions.simulateMouseDownEvent(next.nativeElement);
+ }
+
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2021);
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
+ });
+
+ it('should navigate to the previous/next years.', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+ const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ UIInteractions.simulateMouseDownEvent(yearBtn.nativeElement);
+ fixture.detectChanges();
+
+ const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+ const next = dom.query(By.css('.igx-calendar-picker__next'));
+ UIInteractions.simulateMouseDownEvent(next.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2034);
+
+ UIInteractions.simulateMouseDownEvent(prev.nativeElement);
+ fixture.detectChanges();
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2019);
+ });
+
+ it('should navigate to the previous/next year via KB.', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+ const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+ const next = dom.query(By.css('.igx-calendar-picker__next'));
+ const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+ prev.nativeElement.focus();
+
+ expect(prev.nativeElement).toBe(document.activeElement);
+
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', prev.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2018);
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2018');
+
+ next.nativeElement.focus();
+
+ expect(next.nativeElement).toBe(document.activeElement);
+
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2021);
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
+ });
+
+ it('should navigate to the previous/next year via arrowLeft and arrowRight', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const monthPicker = fixture.componentInstance.monthPicker;
+ monthPicker.activeView = IgxCalendarView.Decade;
+ fixture.detectChanges();
+
+ const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper'));
+ wrapper.nativeElement.focus();
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', wrapper.nativeElement);
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', wrapper.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2018);
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', wrapper.nativeElement);
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', wrapper.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2018);
+ });
+
+ it('should not emit selected when navigating to the next year', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+ spyOn(monthPicker.selected, 'emit').and.callThrough();
+
+ const next = dom.query(By.css('.igx-calendar-picker__next'));
+ let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+ UIInteractions.simulateMouseDownEvent(next.nativeElement);
+ fixture.detectChanges();
+
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.selected.emit).toHaveBeenCalledTimes(0);
+ yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
+ });
+
+ it('should not emit selected when navigating to the previous year', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+ spyOn(monthPicker.selected, 'emit').and.callThrough();
+
+ const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+ let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', prev.nativeElement);
+ fixture.detectChanges();
+
+ UIInteractions.simulateMouseDownEvent(prev.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.selected.emit).toHaveBeenCalledTimes(0);
+ yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2017');
+ });
+
+ it('should not emit selected when changing the year', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+ spyOn(monthPicker.selected, 'emit').and.callThrough();
+
+ let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+ UIInteractions.simulateMouseDownEvent(yearBtn.nativeElement);
+ fixture.detectChanges();
+
+ const year = dom.query(By.css('.igx-calendar-view__item'));
+
+ UIInteractions.simulateMouseDownEvent(year.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.selected.emit).toHaveBeenCalledTimes(0);
+ yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+ expect(yearBtn.nativeElement.textContent.trim()).toMatch('2010');
+ });
+
+ it('should open years view, navigate through and select an year via KB.', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+ monthPicker.activeView = IgxCalendarView.Decade;
+ const wrapper = dom.query(By.css('.igx-calendar__wrapper'));
+ wrapper.nativeElement.focus();
+ fixture.detectChanges();
+
+ let selectedYear = dom.query(By.css('.igx-calendar-view__item--selected'));
+ expect(selectedYear.nativeElement.textContent.trim()).toMatch('2019');
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowDown' , document.activeElement);
+ fixture.detectChanges();
+
+ selectedYear = dom.query(By.css('.igx-calendar-view__item--selected'));
+ expect(selectedYear.nativeElement.textContent.trim()).toMatch('2022');
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowUp' , document.activeElement);
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowUp' , document.activeElement);
+ fixture.detectChanges();
+
+ selectedYear = dom.query(By.css('.igx-calendar-view__item--selected'));
+ expect(selectedYear.nativeElement.textContent.trim()).toMatch('2016');
+
+ UIInteractions.triggerKeyDownEvtUponElem('Enter' , document.activeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2016);
+ });
+
+ it('should navigate through and select a month via KB.', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const monthPicker = fixture.componentInstance.monthPicker;
+
+ const months = dom.queryAll(By.css('.igx-calendar-view__item'));
+ let currentMonth = dom.query(By.css('.igx-calendar-view__item--selected'));
+
+ expect(months.length).toEqual(12);
+ expect(currentMonth.nativeElement.textContent.trim()).toMatch('Feb');
+
+ const monthsView = dom.query(By.css('igx-months-view'));
+ monthsView.nativeElement.focus();
+ expect(monthsView.nativeElement).toBe(document.activeElement);
+
+ UIInteractions.triggerKeyDownEvtUponElem('Home' , document.activeElement);
+ fixture.detectChanges();
+ currentMonth = dom.query(By.css('.igx-calendar-view__item--selected'));
+
+ expect(months.at(0).nativeElement.classList).toContain('igx-calendar-view__item--selected');
+ expect(currentMonth.nativeElement.textContent.trim()).toMatch('Jan');
+
+ UIInteractions.triggerKeyDownEvtUponElem('End' , currentMonth.nativeElement );
+ fixture.detectChanges();
+ currentMonth = dom.query(By.css('.igx-calendar-view__item--selected'));
+
+ expect(months.at(-1).nativeElement.classList).toContain('igx-calendar-view__item--selected');
+ expect(currentMonth.nativeElement.textContent.trim()).toMatch('Dec');
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft' , document.activeElement );
+ fixture.detectChanges();
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowUp' , document.activeElement );
+ fixture.detectChanges();
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowRight' , document.activeElement );
+ fixture.detectChanges();
+ currentMonth = dom.query(By.css('.igx-calendar-view__item--selected'));
+
+ expect(currentMonth.nativeElement.textContent.trim()).toMatch('Sep');
+ UIInteractions.triggerKeyDownEvtUponElem('Enter' , document.activeElement );
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDate.getMonth()).toEqual(8);
+ });
+
+ it('should update the view date and throw viewDateChanged event on page changes', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ const monthPicker = fixture.componentInstance.monthPicker;
+ spyOn(monthPicker.viewDateChanged, 'emit');
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const view = dom.query(By.css('igx-months-view'));
+ view.nativeElement.focus();
+ fixture.detectChanges();
+
+ // Change the current page to the previous year using keyboard navigation
+ UIInteractions.triggerEventHandlerKeyDown('Home', view);
+ UIInteractions.triggerEventHandlerKeyDown('ArrowLeft', view);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDateChanged.emit).toHaveBeenCalled();
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2018);
+
+ // Change the current page to the next year using keyboard
+ UIInteractions.triggerEventHandlerKeyDown('ArrowRight', view);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDateChanged.emit).toHaveBeenCalled();
+ expect(monthPicker.viewDate.getFullYear()).toEqual(2019);
+ });
+
+ it('should emit an activeViewChanged event whenever the view changes', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ const monthPicker = fixture.componentInstance.monthPicker;
+ spyOn(monthPicker.activeViewChanged, 'emit');
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+
+ UIInteractions.simulateMouseDownEvent(yearBtn.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.activeViewChanged.emit).toHaveBeenCalled();
+ expect(monthPicker.activeView).toEqual('decade');
+
+ const selectedYear = dom.query(By.css('.igx-calendar-view__item--selected'));
+ UIInteractions.simulateMouseDownEvent(selectedYear.nativeElement.firstChild);
+ fixture.detectChanges();
+
+ expect(monthPicker.activeViewChanged.emit).toHaveBeenCalled();
+ expect(monthPicker.activeView).toEqual('year');
+ });
+
+ it('should emit viewDateChanged event when changing year with arrow buttons', () => {
+ const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+ const monthPicker = fixture.componentInstance.monthPicker;
+ spyOn(monthPicker.viewDateChanged, 'emit');
+
+ fixture.detectChanges();
+
+ const dom = fixture.debugElement;
+ const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+ const next = dom.query(By.css('.igx-calendar-picker__next'));
+
+ UIInteractions.simulateMouseDownEvent(prev.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDateChanged.emit).toHaveBeenCalledWith({
+ previousValue: new Date(2019, 1, 1),
+ currentValue: new Date(2018, 1, 1)
+ });
+
+ UIInteractions.simulateMouseDownEvent(next.nativeElement);
+ UIInteractions.simulateMouseDownEvent(next.nativeElement);
+ fixture.detectChanges();
+
+ expect(monthPicker.viewDateChanged.emit).toHaveBeenCalledWith({
+ previousValue: new Date(2018, 1, 1),
+ currentValue: new Date(2019, 1, 1)
+ });
+ });
+});
+
+@Component({
+ template: `
+ @for (month of range; track monthTracker($index, month)) {
+
+
+
+ }
+
diff --git a/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts
new file mode 100644
index 00000000000..e5439bdb1bb
--- /dev/null
+++ b/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts
@@ -0,0 +1,180 @@
+import {
+ Component,
+ Input,
+ HostBinding,
+ ElementRef,
+ booleanAttribute,
+ inject,
+} from "@angular/core";
+import { IgxCalendarMonthDirective } from "../calendar.directives";
+import { TitleCasePipe } from "@angular/common";
+import {
+ IgxCalendarViewDirective,
+ DAY_INTERVAL_TOKEN,
+} from "../common/calendar-view.directive";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { CalendarDay, calendarRange, PlatformUtil } from 'igniteui-angular/core';
+
+let NEXT_ID = 0;
+
+@Component({
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: IgxMonthsViewComponent,
+ multi: true,
+ },
+ {
+ provide: DAY_INTERVAL_TOKEN,
+ useValue: "month",
+ },
+ ],
+ selector: "igx-months-view",
+ templateUrl: "months-view.component.html",
+ imports: [IgxCalendarMonthDirective, TitleCasePipe]
+})
+export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
+ public el = inject(ElementRef);
+
+ #standalone = true;
+ private platform = inject(PlatformUtil);
+
+ /**
+ * Sets/gets the `id` of the months view.
+ * If not set, the `id` will have value `"igx-months-view-0"`.
+ * ```html
+ *
+ @for (year of range; track yearTracker($index, year)) {
+
+
+
+ }
+
diff --git a/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts
new file mode 100644
index 00000000000..4a25f361dc0
--- /dev/null
+++ b/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts
@@ -0,0 +1,159 @@
+import {
+ Component,
+ Input,
+ HostBinding,
+ ElementRef,
+ inject,
+} from "@angular/core";
+import { IgxCalendarYearDirective } from "../calendar.directives";
+import {
+ IgxCalendarViewDirective,
+ DAY_INTERVAL_TOKEN,
+} from "../common/calendar-view.directive";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { CalendarDay, calendarRange, PlatformUtil } from 'igniteui-angular/core';
+
+@Component({
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: IgxYearsViewComponent,
+ multi: true,
+ },
+ {
+ provide: DAY_INTERVAL_TOKEN,
+ useValue: "year",
+ },
+ ],
+ selector: "igx-years-view",
+ templateUrl: "years-view.component.html",
+ imports: [IgxCalendarYearDirective]
+})
+export class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
+ public el = inject(ElementRef);
+
+ #standalone = true;
+ private platform = inject(PlatformUtil);
+
+ /**
+ * The default css class applied to the component.
+ *
+ * @hidden
+ */
+ @HostBinding("class.igx-calendar-view")
+ public readonly viewClass = true;
+
+ /**
+ * @hidden @internal
+ */
+ @Input()
+ @HostBinding('class.igx-calendar-view--standalone')
+ public get standalone() {
+ return this.#standalone;
+ }
+
+ public set standalone(value: boolean) {
+ this.#standalone = value;
+ }
+
+ /**
+ * @hidden
+ */
+ private _yearFormat = "numeric";
+
+ /**
+ * @hidden
+ */
+ private _yearsPerPage = 15;
+
+ /**
+ * Gets the year format option of the years view.
+ * ```typescript
+ * let yearFormat = this.yearsView.yearFormat.
+ * ```
+ */
+ @Input()
+ public get yearFormat(): any {
+ return this._yearFormat;
+ }
+
+ /**
+ * Sets the year format option of the years view.
+ * ```html
+ * Elon Musk
+Entrepreneur
+
+ South African entrepreneur Elon Musk is known for founding Tesla Motors and SpaceX, which launched a landmark commercial spacecraft in 2012.
+
+
+
+
+
diff --git a/projects/igniteui-angular/card/src/card/card-header.component.html b/projects/igniteui-angular/card/src/card/card-header.component.html
new file mode 100644
index 00000000000..d8f745670a2
--- /dev/null
+++ b/projects/igniteui-angular/card/src/card/card-header.component.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+{{title}}
+ *{{subtitle}}
+ *media
+ Thumb
+ Title
+Subtitle
+
+
+
+ @for (slide of slides; track slide) {
+
+}
+
+@if (showIndicatorsLabel) {
+
+
+ }
+
+ {{getCarouselLabel}}
+
+}
+
+
+
diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts b/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts
new file mode 100644
index 00000000000..74ddfc755c9
--- /dev/null
+++ b/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts
@@ -0,0 +1,1291 @@
+import { Component, ViewChild, TemplateRef, ChangeDetectionStrategy, ElementRef } from '@angular/core';
+import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+ IgxCarouselComponent,
+ ISlideEventArgs
+} from './carousel.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxSlideComponent } from './slide.component';
+import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
+import { CarouselIndicatorsOrientation, CarouselAnimationType } from './enums';
+import { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interactions.spec';
+
+describe('Carousel', () => {
+ let fixture;
+ let carousel: IgxCarouselComponent;
+ let mockElement: any;
+ let mockElementRef: ElementRef;
+
+ beforeEach(waitForAsync(() => {
+ mockElement = document.createElement("div");
+ mockElementRef = new ElementRef(mockElement);
+ TestBed.configureTestingModule({
+ imports: [
+ NoopAnimationsModule,
+ CarouselTestComponent,
+ CarouselTemplateSetInMarkupTestComponent,
+ CarouselTemplateSetInTypescriptTestComponent,
+ CarouselAnimationsComponent,
+ CarouselDynamicSlidesComponent
+ ],
+ providers: [
+ { provide: ElementRef, useValue: mockElementRef },
+ IgxSlideComponent
+ ]
+ }).compileComponents();
+ }));
+
+ describe('Base Tests: ', () => {
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CarouselTestComponent);
+ carousel = fixture.componentInstance.carousel;
+ fixture.detectChanges();
+ });
+
+ it('should initialize a carousel with id property', () => {
+ const domCarousel = fixture.debugElement.query(By.css('igx-carousel')).nativeElement;
+
+ expect(carousel.id).toContain('igx-carousel-');
+ expect(domCarousel.id).toContain('igx-carousel-');
+
+ carousel.id = 'cusrtomCarousel';
+ fixture.detectChanges();
+
+ expect(carousel.id).toBe('cusrtomCarousel');
+ expect(domCarousel.id).toBe('cusrtomCarousel');
+ });
+
+ it('should initialize a carousel with four slides and then destroy it', () => {
+ const domCarousel = fixture.debugElement.query(By.css('igx-carousel')).nativeElement;
+ expect(carousel).toBeDefined();
+ expect(carousel.id).toContain('igx-carousel-');
+ expect(domCarousel.id).toContain('igx-carousel-');
+ expect(carousel instanceof IgxCarouselComponent).toBe(true);
+ expect(carousel.slides.first instanceof IgxSlideComponent).toBe(true);
+
+ expect(carousel.loop).toBe(true);
+ expect(carousel.pause).toBe(true);
+ expect(carousel.slides.length).toEqual(4);
+ expect(carousel.interval).toEqual(2500);
+
+ carousel.ngOnDestroy();
+ fixture.detectChanges();
+ expect(carousel.isDestroyed).toBe(true);
+ });
+
+ it('disabled looping', () => {
+ carousel.loop = false;
+ fixture.detectChanges();
+ carousel.next();
+ carousel.next();
+ carousel.next();
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 3);
+
+ carousel.next();
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 3);
+
+ carousel.prev();
+ carousel.prev();
+ carousel.prev();
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 0);
+
+ carousel.prev();
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 0);
+ });
+
+ it('getter/setter tests', () => {
+ carousel.loop = false;
+ carousel.pause = false;
+ carousel.interval = 500;
+ carousel.navigation = false;
+
+ fixture.detectChanges();
+
+ expect(carousel.loop).toBe(false);
+ expect(carousel.pause).toBe(false);
+ expect(carousel.interval).toEqual(500);
+ expect(carousel.navigation).toBe(false);
+ });
+
+ it('add/remove slides tests', () => {
+ const slide1 = carousel.get(carousel.current);
+ carousel.remove(slide1);
+
+ fixture.detectChanges();
+ expect(carousel.slides.length).toEqual(3);
+ expect(carousel.total).toEqual(3);
+
+ const slide2 = carousel.get(carousel.current);
+ carousel.remove(slide2);
+
+ fixture.detectChanges();
+ expect(carousel.slides.length).toEqual(2);
+ expect(carousel.total).toEqual(2);
+
+ carousel.add(slide1);
+ carousel.add(slide2);
+
+ fixture.detectChanges();
+ expect(carousel.slides.length).toEqual(4);
+ expect(carousel.total).toEqual(4);
+ });
+
+ it('checking if a slide is not active when it gets removed', () => {
+ const currentSlide = carousel.get(carousel.current);
+ carousel.remove(currentSlide);
+
+ fixture.detectChanges();
+ expect(currentSlide.active).toBe(false);
+ });
+
+ it('public methods', () => {
+ carousel.stop();
+
+ fixture.detectChanges();
+ expect(carousel.isPlaying).toBe(false);
+
+ carousel.next();
+ let currentSlide = carousel.get(carousel.current);
+ fixture.detectChanges();
+ expect(carousel.get(1)).toBe(currentSlide);
+
+ currentSlide = carousel.get(0);
+ carousel.prev();
+ fixture.detectChanges();
+ expect(carousel.get(0)).toBe(currentSlide);
+
+ carousel.select(1);
+ fixture.detectChanges();
+ expect(carousel.get(1)).toBe(carousel.get(carousel.current));
+
+ // select a negative index -> active slide remains the same
+ carousel.select(-1);
+ fixture.detectChanges();
+ expect(carousel.get(1)).toBe(carousel.get(carousel.current));
+
+ // select a non-existent index -> active slide remains the same
+ carousel.select(carousel.slides.length);
+ fixture.detectChanges();
+ expect(carousel.get(1)).toBe(carousel.get(carousel.current));
+ });
+
+ it('emit events', () => {
+ spyOn(carousel.slideChanged, 'emit');
+ carousel.next();
+ fixture.detectChanges();
+ let args: ISlideEventArgs = {
+ carousel,
+ slide: carousel.get(carousel.current)
+ };
+ expect(carousel.slideChanged.emit).toHaveBeenCalledWith(args);
+ expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(1);
+
+ carousel.prev();
+ args = {
+ carousel,
+ slide: carousel.get(carousel.current)
+ };
+ fixture.detectChanges();
+ expect(carousel.slideChanged.emit).toHaveBeenCalledWith(args);
+ expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(2);
+
+ carousel.select(carousel.get(2));
+ args = {
+ carousel,
+ slide: carousel.get(2)
+ };
+ fixture.detectChanges();
+ expect(carousel.slideChanged.emit).toHaveBeenCalledWith(args);
+ expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(3);
+
+ spyOn(carousel.slideAdded, 'emit');
+ const newSlide = TestBed.inject(IgxSlideComponent);
+ carousel.add(newSlide);
+ fixture.detectChanges();
+ args = {
+ carousel,
+ slide: newSlide
+ };
+ expect(carousel.slideAdded.emit).toHaveBeenCalledWith(args);
+
+ spyOn(carousel.slideRemoved, 'emit');
+ args = {
+ carousel,
+ slide: carousel.get(carousel.current)
+ };
+ carousel.remove(carousel.get(carousel.current));
+ fixture.detectChanges();
+ expect(carousel.slideRemoved.emit).toHaveBeenCalledWith(args);
+
+ spyOn(carousel.carouselPaused, 'emit');
+ carousel.stop();
+ fixture.detectChanges();
+ expect(carousel.carouselPaused.emit).toHaveBeenCalledWith(carousel);
+
+ spyOn(carousel.carouselPlaying, 'emit');
+ carousel.play();
+ fixture.detectChanges();
+ expect(carousel.carouselPlaying.emit).toHaveBeenCalledWith(carousel);
+ });
+
+ it('click handlers', () => {
+ const nextNav = HelperTestFunctions.getNextButton(fixture);
+ const prevNav = HelperTestFunctions.getPreviousButton(fixture);
+
+ spyOn(carousel, 'prev');
+ prevNav.dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+ expect(carousel.prev).toHaveBeenCalled();
+
+ spyOn(carousel, 'next');
+ nextNav.dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+ expect(carousel.next).toHaveBeenCalled();
+ });
+
+ it('keyboard navigation test', () => {
+ spyOn(carousel.slideChanged, 'emit');
+ carousel.pause = true;
+ const indicators = HelperTestFunctions.getIndicatorsContainer(fixture);
+
+ indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
+ fixture.detectChanges();
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 1);
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 2);
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 3);
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 0);
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true);
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 3);
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true);
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 2);
+
+ UIInteractions.triggerKeyDownEvtUponElem('Home', indicators, true);
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 0);
+
+ UIInteractions.triggerKeyDownEvtUponElem('End', indicators, true);
+ fixture.detectChanges();
+ HelperTestFunctions.verifyActiveSlide(carousel, 3);
+
+ expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(8);
+ });
+
+ it('changing slides with navigation buttons', () => {
+ spyOn(carousel.slideChanged, 'emit');
+ carousel.pause = true;
+
+ const prevNav = HelperTestFunctions.getPreviousButton(fixture);
+ const nextNav = HelperTestFunctions.getNextButton(fixture);
+
+ nextNav.dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 1);
+
+ nextNav.dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 2);
+
+ nextNav.dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 3);
+
+ nextNav.dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 0);
+
+ prevNav.dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 3);
+
+ prevNav.dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 2);
+
+ expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(6);
+ });
+
+ it('changing slides with indicators buttons', () => {
+ spyOn(carousel.slideChanged, 'emit');
+ carousel.pause = true;
+
+ const indicators = HelperTestFunctions.getIndicators(fixture);
+ expect(indicators.length).toBe(4);
+
+ indicators[3].dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 3);
+
+ indicators[1].dispatchEvent(new Event('click'));
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 1);
+
+ expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(2);
+ });
+
+ it('navigation changes visibility of arrows', () => {
+ expect(HelperTestFunctions.getNextButton(fixture) === null).toBe(false);
+ expect(HelperTestFunctions.getPreviousButton(fixture) === null).toBe(false);
+
+ carousel.navigation = false;
+ fixture.detectChanges();
+ expect(HelperTestFunctions.getNextButton(fixture) === null).toBe(true);
+ expect(HelperTestFunctions.getPreviousButton(fixture) === null).toBe(true);
+
+ carousel.navigation = true;
+ fixture.detectChanges();
+ expect(HelperTestFunctions.getNextButton(fixture) === null).toBe(false);
+ expect(HelperTestFunctions.getPreviousButton(fixture) === null).toBe(false);
+ });
+
+ it('maximumIndicatorsCount changes visibility of indicators', () => {
+ expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsLabel(fixture)).toBeNull();
+
+ carousel.maximumIndicatorsCount = 3;
+ fixture.detectChanges();
+ expect(carousel.maximumIndicatorsCount).toBe(3);
+ expect(HelperTestFunctions.getIndicators(fixture).length).toBe(0);
+ expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(0);
+ const label = HelperTestFunctions.getIndicatorsLabel(fixture);
+ expect(label).toBeDefined();
+ expect(label.innerHTML).toBe('1 of 4');
+
+ carousel.maximumIndicatorsCount = 6;
+ fixture.detectChanges();
+ expect(carousel.maximumIndicatorsCount).toBe(6);
+ expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsLabel(fixture)).toBeNull();
+ });
+
+ it('`indicators` changes visibility of indicators', () => {
+ expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined();
+
+ carousel.indicators = false;
+ fixture.detectChanges();
+ expect(carousel.indicators).toBe(false);
+ expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeNull();
+
+ carousel.indicators = true;
+ fixture.detectChanges();
+ expect(carousel.indicators).toBe(true);
+ expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined();
+ });
+
+ it('indicatorsOrientation changes the position of indicators', () => {
+ let indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture);
+ expect(indicatorsContainer).toBeDefined();
+
+ carousel.indicatorsOrientation = CarouselIndicatorsOrientation.start;
+ fixture.detectChanges();
+
+ indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture);
+ expect(indicatorsContainer).toBeNull();
+ indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.start);
+ expect(indicatorsContainer).toBeDefined();
+
+ carousel.indicatorsOrientation = CarouselIndicatorsOrientation.end;
+ fixture.detectChanges();
+
+ indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.start);
+ expect(indicatorsContainer).toBeNull();
+ indicatorsContainer = HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.end);
+ expect(indicatorsContainer).toBeDefined();
+ });
+
+ it('should stop/play on mouse enter/leave ', () => {
+ carousel.interval = 1000;
+ carousel.play();
+ fixture.detectChanges();
+
+ spyOn(carousel.carouselPaused, 'emit');
+ spyOn(carousel.carouselPlaying, 'emit');
+
+ expect(carousel.isPlaying).toBeTruthy();
+
+ UIInteractions.hoverElement(carousel.nativeElement, true);
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeFalsy();
+ expect(carousel.carouselPaused.emit).toHaveBeenCalledTimes(1);
+
+ UIInteractions.unhoverElement(carousel.nativeElement, true);
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeTruthy();
+ expect(carousel.carouselPlaying.emit).toHaveBeenCalledTimes(1);
+ expect(carousel.carouselPaused.emit).toHaveBeenCalledTimes(1);
+
+ // When the carousel is stopped mouseleave does not start playing
+ carousel.stop();
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeFalsy();
+ expect(carousel.carouselPlaying.emit).toHaveBeenCalledTimes(1);
+ expect(carousel.carouselPaused.emit).toHaveBeenCalledTimes(2);
+
+ UIInteractions.hoverElement(carousel.nativeElement, true);
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeFalsy();
+
+ UIInteractions.unhoverElement(carousel.nativeElement, true);
+ fixture.detectChanges();
+ expect(carousel.isPlaying).toBeFalsy();
+ expect(carousel.carouselPlaying.emit).toHaveBeenCalledTimes(1);
+ });
+
+
+ it('should apply correctly aria attributes to carousel component', () => {
+ const expectedRole = 'region';
+ const expectedRoleDescription = 'carousel';
+ const tabIndex = carousel.nativeElement.getAttribute('tabindex');
+
+ expect(tabIndex).toBeNull();
+ expect(carousel.nativeElement.getAttribute('role')).toEqual(expectedRole);
+ expect(carousel.nativeElement.getAttribute('aria-roledescription')).toEqual(expectedRoleDescription);
+
+ const indicators = carousel.nativeElement.querySelector(HelperTestFunctions.INDICATORS_END_CLASS);
+
+ expect(indicators).toBeDefined();
+ expect(indicators.getAttribute('role')).toEqual('tablist');
+
+ const tabs = carousel.nativeElement.querySelectorAll('[role="tab"]');
+ expect(tabs.length).toEqual(4);
+ });
+
+ it('should apply correctly aria attributes to slide components', () => {
+ carousel.loop = false;
+ carousel.select(carousel.get(1));
+ fixture.detectChanges();
+
+ const expectedRole = 'tabpanel';
+ const slide = carousel.slides.find(s => s.active);
+ const tabIndex = slide.nativeElement.getAttribute('tabindex');
+
+ expect(+tabIndex).toBe(0);
+ expect(slide.nativeElement.getAttribute('role')).toEqual(expectedRole);
+
+ const tabs = carousel.nativeElement.querySelectorAll('[role="tab"]');
+ const slides = carousel.nativeElement.querySelectorAll('[role="tabpanel"]');
+
+ expect(slides.length).toEqual(tabs.length);
+ });
+
+ it('should change slide on Enter/Space keys', () => {
+ const nextNav = HelperTestFunctions.getNextButton(fixture);
+ const prevNav = HelperTestFunctions.getPreviousButton(fixture);
+
+ spyOn(carousel, 'next');
+ spyOn(carousel, 'prev');
+
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', nextNav, true);
+ UIInteractions.triggerKeyDownEvtUponElem(' ', nextNav, true);
+ fixture.detectChanges();
+ expect(carousel.next).toHaveBeenCalledTimes(2);
+
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', prevNav, true);
+ UIInteractions.triggerKeyDownEvtUponElem(' ', prevNav, true);
+ fixture.detectChanges();
+ expect(carousel.prev).toHaveBeenCalledTimes(2);
+ });
+
+ it('should set focused class on indicators container on keyboard tab focus', () => {
+ const indicators = HelperTestFunctions.getIndicatorsContainer(fixture);
+
+ expect(indicators.classList).not.toContain('igx-carousel-indicators--focused');
+
+ indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
+ fixture.detectChanges();
+
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+ });
+
+ it('should remove focused class from indicators container on focusout', () => {
+ const indicators = HelperTestFunctions.getIndicatorsContainer(fixture);
+ const indicator = HelperTestFunctions.getIndicators(fixture)[1] as HTMLElement;
+
+ indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
+ fixture.detectChanges();
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ // if element gaining focus is an indicator the focused class remains
+ indicators.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: indicator }));
+ fixture.detectChanges();
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ // if element gaining focus is not an indicator the focused class is removed
+ indicators.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+ fixture.detectChanges();
+ expect(indicators.classList).not.toContain('igx-carousel-indicators--focused');
+ });
+
+ it('should remove focused class from indicators container on click', () => {
+ const indicators = HelperTestFunctions.getIndicatorsContainer(fixture);
+
+ indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
+ fixture.detectChanges();
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ indicators.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+ fixture.detectChanges();
+ expect(indicators.classList).not.toContain('igx-carousel-indicators--focused');
+ });
+
+ it('should keep focused class on indicators container on keyboard nav with supported keys', () => {
+ const indicators = HelperTestFunctions.getIndicatorsContainer(fixture);
+
+ indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
+ fixture.detectChanges();
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(1);
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true);
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(0);
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('End', indicators, true);
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(3);
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('Home', indicators, true);
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(0);
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+ });
+ });
+
+ describe('RTL Tests: ', () => {
+ beforeEach(() => {
+ document.body.dir = 'rtl';
+ fixture = TestBed.createComponent(CarouselTestComponent);
+ carousel = fixture.componentInstance.carousel;
+ fixture.detectChanges();
+ });
+ afterEach(() => {
+ document.body.dir = 'ltr';
+ });
+
+ it('should support keyboard navigation when the indicators container is focused', () => {
+ const indicators = HelperTestFunctions.getIndicatorsContainer(fixture);
+
+ indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
+ fixture.detectChanges();
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(3);
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true);
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(0);
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('End', indicators, true);
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(0);
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+
+ UIInteractions.triggerKeyDownEvtUponElem('Home', indicators, true);
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(3);
+ expect(indicators.classList).toContain('igx-carousel-indicators--focused');
+ });
+ });
+
+ describe('Templates Tests: ', () => {
+ it('verify that templates can be defined in the markup', () => {
+ fixture = TestBed.createComponent(CarouselTemplateSetInMarkupTestComponent);
+ carousel = fixture.componentInstance.carousel;
+ fixture.detectChanges();
+
+ expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(0);
+ for (let index = 0; index < 4; index++) {
+ const indicator = HelperTestFunctions.getIndicators(fixture)[index] as HTMLElement;
+ expect(indicator.innerText).toEqual(index.toString());
+ }
+
+ expect(HelperTestFunctions.getNextButtonArrow(fixture)).toBeNull();
+ expect(HelperTestFunctions.getPreviousButtonArrow(fixture)).toBeNull();
+
+ expect(HelperTestFunctions.getNextButton(fixture).innerText).toEqual('next');
+ expect(HelperTestFunctions.getPreviousButton(fixture).innerText).toEqual('prev');
+ });
+
+ it('verify that templates can be changed', () => {
+ fixture = TestBed.createComponent(CarouselTemplateSetInTypescriptTestComponent);
+ carousel = fixture.componentInstance.carousel;
+ fixture.detectChanges();
+
+ carousel.select(carousel.get(1));
+ fixture.detectChanges();
+
+ expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getNextButtonArrow(fixture)).toBeDefined();
+ expect(HelperTestFunctions.getPreviousButtonArrow(fixture)).toBeDefined();
+
+ carousel.indicatorTemplate = fixture.componentInstance.customIndicatorTemplate1;
+ carousel.nextButtonTemplate = fixture.componentInstance.customNextTemplate;
+ carousel.prevButtonTemplate = fixture.componentInstance.customPrevTemplate;
+ fixture.detectChanges();
+
+ expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(0);
+ for (let index = 0; index < 4; index++) {
+ const indicator = HelperTestFunctions.getIndicators(fixture)[index] as HTMLElement;
+ expect(indicator.innerText).toEqual(index.toString());
+ }
+ expect(HelperTestFunctions.getNextButtonArrow(fixture)).toBeNull();
+ expect(HelperTestFunctions.getPreviousButtonArrow(fixture)).toBeNull();
+
+ expect(HelperTestFunctions.getNextButton(fixture).innerText).toEqual('next');
+ expect(HelperTestFunctions.getPreviousButton(fixture).innerText).toEqual('prev');
+
+ carousel.indicatorTemplate = fixture.componentInstance.customIndicatorTemplate2;
+ fixture.detectChanges();
+
+ expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(0);
+
+ for (let index = 0; index < 4; index++) {
+ const indicator = HelperTestFunctions.getIndicators(fixture)[index] as HTMLElement;
+ if (index === 1) {
+ expect(indicator.innerText).toEqual('1: Active');
+ } else {
+ expect(indicator.innerText).toEqual(index.toString());
+ }
+ }
+
+ carousel.indicatorTemplate = null;
+ carousel.nextButtonTemplate = null;
+ carousel.prevButtonTemplate = null;
+ fixture.detectChanges();
+
+ expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4);
+ expect(HelperTestFunctions.getNextButtonArrow(fixture)).toBeDefined();
+ expect(HelperTestFunctions.getPreviousButtonArrow(fixture)).toBeDefined();
+ });
+ });
+
+ describe('Animations Tests: ', () => {
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CarouselAnimationsComponent);
+ fixture.detectChanges();
+ carousel = fixture.componentInstance.carousel;
+ });
+
+ it('Test slide animation', async () => {
+ await wait();
+ expect(carousel.get(0).active).toBeTruthy();
+ expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.animationType).toBe(CarouselAnimationType.slide);
+ carousel.next();
+ fixture.detectChanges();
+ await wait(200);
+
+ expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeTruthy();
+ await wait(200);
+ fixture.detectChanges();
+
+ expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy();
+ carousel.prev();
+ fixture.detectChanges();
+ await wait(230);
+
+ expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeTruthy();
+ await wait(200);
+ fixture.detectChanges();
+
+ expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy();
+ });
+
+ it('Test fade animation', async () => {
+ await wait();
+ carousel.animationType = CarouselAnimationType.fade;
+ fixture.detectChanges();
+
+ expect(carousel.get(0).active).toBeTruthy();
+ expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.animationType).toBe(CarouselAnimationType.fade);
+ carousel.next();
+ fixture.detectChanges();
+ await wait(200);
+
+ expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeTruthy();
+ await wait(200);
+ fixture.detectChanges();
+
+ expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy();
+ });
+
+ it('should not throw an error when playing an animation and destroying the component - #15976', () => {
+ expect(() => {
+ carousel.next();
+ carousel.ngOnDestroy();
+ fixture.detectChanges();
+ }).not.toThrow();
+
+ expect(carousel['enterAnimationPlayer']).toBe(null);
+ expect(carousel['leaveAnimationPlayer']).toBe(null);
+ });
+ });
+
+ describe('Dynamic Slides: ', () => {
+ let slides;
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CarouselDynamicSlidesComponent);
+ fixture.detectChanges();
+ carousel = fixture.componentInstance.carousel;
+ slides = fixture.componentInstance.slides;
+ });
+
+ it('should activate slide when change its property active', fakeAsync(() => {
+ tick();
+ // Verify 3th slide is active
+ HelperTestFunctions.verifyActiveSlide(carousel, 2);
+
+ // Change active slide
+ slides[0].active = true;
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 0);
+ }));
+
+ it('should add slides to the carousel when collection is changed', fakeAsync(() => {
+ tick();
+ spyOn(carousel.slideAdded, 'emit');
+
+ // add a slide
+ slides.push({ text: 'Slide 5' });
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 2);
+ expect(carousel.total).toEqual(5);
+
+ // add an active slide
+ slides.push({ text: 'Slide 6', active: true });
+ fixture.detectChanges();
+ tick(100);
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 5);
+ expect(carousel.total).toEqual(6);
+
+ expect(carousel.slideAdded.emit).toHaveBeenCalledTimes(2);
+ }));
+
+ it('should remove slides in the carousel', fakeAsync(() => {
+ tick();
+ spyOn(carousel.slideRemoved, 'emit');
+
+ // remove a slide
+ slides.pop();
+ fixture.detectChanges();
+
+ HelperTestFunctions.verifyActiveSlide(carousel, 2);
+ expect(carousel.total).toEqual(3);
+
+ // remove active slide
+ slides.pop();
+ fixture.detectChanges();
+ tick(200);
+ fixture.detectChanges();
+
+ expect(carousel.total).toEqual(2);
+ HelperTestFunctions.verifyActiveSlide(carousel, 1);
+
+ expect(carousel.slideRemoved.emit).toHaveBeenCalledTimes(2);
+ }));
+
+ it('should not render navigation buttons and indicators when carousel does not have slides', fakeAsync(() => {
+ fixture.componentInstance.removeAllSlides();
+ fixture.detectChanges();
+ tick(200);
+
+ expect(carousel.total).toEqual(0);
+ expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeNull();
+ expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.start)).toBeNull();
+ expect(HelperTestFunctions.getNextButton(fixture)).toBeNull();
+ expect(HelperTestFunctions.getPreviousButton(fixture)).toBeNull();
+
+ // add a slide
+ fixture.componentInstance.addSlides();
+ fixture.detectChanges();
+ tick(200);
+
+ expect(carousel.total).toEqual(2);
+ expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined();
+ expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.start)).toBeDefined();
+ expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeFalsy();
+ expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeFalsy();
+ }));
+ });
+
+ describe('Gestures Tests: ', () => {
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CarouselDynamicSlidesComponent);
+ fixture.detectChanges();
+ carousel = fixture.componentInstance.carousel;
+ });
+
+ it('should stop/play on tap ', () => {
+ carousel.interval = 1000;
+ carousel.play();
+ fixture.detectChanges();
+
+ spyOn(carousel.carouselPaused, 'emit');
+ spyOn(carousel.carouselPlaying, 'emit');
+
+ expect(carousel.isPlaying).toBeTruthy();
+
+ HelperTestFunctions.simulateTap(fixture, carousel);
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeFalsy();
+
+ HelperTestFunctions.simulateTap(fixture, carousel);
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeTruthy();
+
+ // When the carousel is stopped tap does not start playing
+ carousel.stop();
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeFalsy();
+
+ HelperTestFunctions.simulateTap(fixture, carousel);
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeFalsy();
+
+ HelperTestFunctions.simulateTap(fixture, carousel);
+ fixture.detectChanges();
+
+ expect(carousel.isPlaying).toBeFalsy();
+ });
+
+ it('verify changing slides with pan left ', () => {
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.05, 0.1, 'horizontal');
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.7, 0.1, 'horizontal');
+ expect(carousel.current).toEqual(3);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.2, 2, 'horizontal');
+ expect(carousel.current).toEqual(0);
+ });
+
+ it('verify changing slides with pan right ', () => {
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.1, 0.1, 'horizontal');
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.6, 0.1, 'horizontal');
+ expect(carousel.current).toEqual(1);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.05, 2, 'horizontal');
+ expect(carousel.current).toEqual(0);
+ });
+
+ it('verify changing slides with pan up', () => {
+ carousel.vertical = true;
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.05, 0.1, 'vertical');
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.7, 0.1, 'vertical');
+ expect(carousel.current).toEqual(3);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.2, 2, 'vertical');
+ expect(carousel.current).toEqual(0);
+ });
+
+ it('verify changing slides with pan down', () => {
+ carousel.vertical = true;
+ fixture.detectChanges();
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.1, 0.1, 'vertical');
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.6, 0.1, 'vertical');
+ expect(carousel.current).toEqual(1);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.05, 2, 'vertical');
+ expect(carousel.current).toEqual(0);
+ });
+
+ it('verify pan when loop is false', () => {
+ carousel.loop = false;
+ fixture.detectChanges();
+
+ carousel.select(carousel.get(0));
+ fixture.detectChanges();
+
+ expect(carousel.current).toEqual(0);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.9, 2, 'horizontal');
+
+ expect(carousel.current).toEqual(0);
+
+ carousel.select(carousel.get(3));
+ fixture.detectChanges();
+
+ expect(carousel.current).toEqual(3);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.9, 2, 'horizontal');
+
+ expect(carousel.current).toEqual(3);
+ });
+
+ it('verify pan when gesturesSupport is false', () => {
+ carousel.gesturesSupport = false;
+ fixture.detectChanges();
+
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.9, 2, 'horizontal');
+
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.6, 2, 'horizontal');
+
+ expect(carousel.current).toEqual(2);
+ });
+
+ it('verify pan left/right when `vertical` is true', () => {
+ carousel.vertical = true;
+ fixture.detectChanges();
+ expect(carousel.vertical).toBe(true);
+ expect(carousel.current).toEqual(2);
+
+ // pan left
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.7, 0.1, 'horizontal');
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.2, 2, 'horizontal');
+ expect(carousel.current).toEqual(2);
+
+ // pan right
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.6, 0.1, 'horizontal');
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.05, 2, 'horizontal');
+ expect(carousel.current).toEqual(2);
+ });
+
+ it('verify pan up/down when `vertical` is false', () => {
+ expect(carousel.vertical).toBe(false);
+ expect(carousel.current).toEqual(2);
+
+ // pan up
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.7, 0.1, 'vertical');
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, -0.2, 2, 'vertical');
+ expect(carousel.current).toEqual(2);
+
+ // pan down
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.6, 0.1, 'vertical');
+ expect(carousel.current).toEqual(2);
+
+ HelperTestFunctions.simulatePan(fixture, carousel, 0.05, 2, 'vertical');
+ expect(carousel.current).toEqual(2);
+ });
+ });
+});
+
+class HelperTestFunctions {
+ public static NEXT_BUTTON_CLASS = '.igx-carousel__arrow--next';
+ public static PRIV_BUTTON_CLASS = '.igx-carousel__arrow--prev';
+ public static BUTTON_ARROW_CLASS = '.igx-nav-arrow';
+ public static ACTIVE_SLIDE_CLASS = 'igx-slide--current';
+ public static PREVIOUS_SLIDE_CLASS = 'igx-slide--previous';
+ public static INDICATORS_START_CLASS = '.igx-carousel-indicators--start';
+ public static INDICATORS_END_CLASS = '.igx-carousel-indicators--end';
+ public static INDICATORS_LABEL_CLASS = '.igx-carousel__label';
+ public static INDICATOR_CLASS = '.igx-carousel-indicators__indicator';
+ public static INDICATOR_DOT_CLASS = '.igx-nav-dot';
+ public static INDICATOR_ACTIVE_DOT_CLASS = '.igx-nav-dot--active';
+
+ public static getNextButton(fixture): HTMLElement {
+ return fixture.nativeElement.querySelector(HelperTestFunctions.NEXT_BUTTON_CLASS);
+ }
+
+ public static getPreviousButton(fixture): HTMLElement {
+ return fixture.nativeElement.querySelector(HelperTestFunctions.PRIV_BUTTON_CLASS);
+ }
+
+ public static getNextButtonArrow(fixture): HTMLElement {
+ const next = HelperTestFunctions.getNextButton(fixture);
+ return next.querySelector(HelperTestFunctions.BUTTON_ARROW_CLASS);
+ }
+
+ public static getPreviousButtonArrow(fixture): HTMLElement {
+ const prev = HelperTestFunctions.getPreviousButton(fixture);
+ return prev.querySelector(HelperTestFunctions.BUTTON_ARROW_CLASS);
+ }
+
+ public static getIndicatorsContainer(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end): HTMLElement {
+ const carouselNative = fixture.nativeElement;
+ if (position === CarouselIndicatorsOrientation.end) {
+ return carouselNative.querySelector(HelperTestFunctions.INDICATORS_END_CLASS);
+ } else {
+ return carouselNative.querySelector(HelperTestFunctions.INDICATORS_START_CLASS);
+ }
+ }
+
+ public static getIndicatorsLabel(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end) {
+ const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position);
+ return indContainer.querySelector(HelperTestFunctions.INDICATORS_LABEL_CLASS);
+ }
+
+ public static getIndicators(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end) {
+ const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position);
+ return indContainer.querySelectorAll(HelperTestFunctions.INDICATOR_CLASS);
+ }
+
+ public static getIndicatorsDots(fixture, position: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.end) {
+ const indContainer = HelperTestFunctions.getIndicatorsContainer(fixture, position);
+ return indContainer.querySelectorAll(HelperTestFunctions.INDICATOR_DOT_CLASS);
+ }
+
+ public static verifyActiveSlide(carousel, index: number) {
+ const activeSlide = carousel.get(index);
+ expect(carousel.current).toEqual(index);
+ expect(activeSlide.active).toBeTruthy();
+ expect(activeSlide.nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
+ expect(carousel.slides.find((slide) => slide.active && slide.index !== index)).toBeUndefined();
+ }
+
+ public static simulateTap(fixture, carousel) {
+ const activeSlide = carousel.get(carousel.current).nativeElement;
+ const carouselElement = fixture.debugElement.query(By.css('igx-carousel'));
+ carouselElement.triggerEventHandler('tap', {target: activeSlide});
+ // Simulator.gestures.press(activeSlide, { duration: 180 });
+ }
+
+ public static simulatePan(fixture, carousel, deltaOffset, velocity, dir: 'horizontal' | 'vertical') {
+ const activeSlide = carousel.get(carousel.current).nativeElement;
+ const carouselElement = fixture.debugElement.query(By.css('igx-carousel'));
+ const deltaX = dir === 'horizontal' ? activeSlide.offsetWidth * deltaOffset : 0;
+ const deltaY = dir === 'horizontal' ? 0 : activeSlide.offsetHeight * deltaOffset;
+
+ let event;
+ if (dir === 'horizontal') {
+ event = deltaOffset < 0 ? 'panleft' : 'panright';
+ } else {
+ event = deltaOffset < 0 ? 'panup' : 'pandown';
+ }
+ const panOptions = {
+ deltaX,
+ deltaY,
+ duration: 100,
+ velocity,
+ preventDefault: ( () => { })
+ };
+
+ carouselElement.triggerEventHandler(event, panOptions);
+ fixture.detectChanges();
+ carouselElement.triggerEventHandler('panend', panOptions);
+ fixture.detectChanges();
+ }
+}
+@Component({
+ template: `
+ Slide1
Slide2
Slide3
Slide4
Slide1
Slide2
Slide3
Slide4
Slide1
Slide2
Slide3
Slide4
Slide1
Slide2
Slide3
Slide4
{{slide.text}}
First Slide Header
+ *First slide Content
+ *Second Slide Header
+ *Second Slide Content
+ *unsafeHello World
\n'; + + const result = await service.parse(markdown); + expect(result).toBe(expectedHtml); + }); + + it('should parse a code block with shiki highlighting', async () => { + const markdown = '```typescript\nconst x = 5;\n```'; + const result = await service.parse(markdown); + + expect(result).toContain(' {
+ const markdown = '[Infragistics](https://www.infragistics.com)';
+ const expectedLink = '';
+
+ const result = await service.parse(markdown);
+ expect(result).toContain(expectedLink);
+ });
+});
diff --git a/projects/igniteui-angular/chat-extras/src/markdown-service.ts b/projects/igniteui-angular/chat-extras/src/markdown-service.ts
new file mode 100644
index 00000000000..4f2edf2a508
--- /dev/null
+++ b/projects/igniteui-angular/chat-extras/src/markdown-service.ts
@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { Marked } from 'marked';
+import markedShiki from 'marked-shiki';
+import { bundledThemes, createHighlighter } from 'shiki/bundle/web';
+
+
+const DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];
+const DEFAULT_THEMES = {
+ light: 'github-light',
+ dark: 'github-dark'
+};
+
+@Injectable({ providedIn: 'root' })
+export class IgxChatMarkdownService {
+
+ private _instance: Marked;
+ private _isInitialized: Promise;
+
+ private _initializeMarked(): void {
+ this._instance = new Marked({
+ breaks: true,
+ gfm: true,
+ extensions: [
+ {
+ name: 'link',
+ renderer({ href, title, text }) {
+ return `${text}`;
+ }
+ }
+ ]
+ });
+ }
+
+ private async _initializeShiki(): Promise {
+ const highlighter = await createHighlighter({
+ langs: DEFAULT_LANGUAGES,
+ themes: Object.keys(bundledThemes)
+ });
+
+ this._instance.use(
+ markedShiki({
+ highlight(code, lang, _) {
+ try {
+ return highlighter.codeToHtml(code, {
+ lang,
+ themes: DEFAULT_THEMES,
+ });
+
+ } catch {
+ return `${code}
`;
+ }
+ }
+ })
+ );
+ }
+
+
+ constructor() {
+ this._initializeMarked();
+ this._isInitialized = this._initializeShiki();
+ }
+
+ public async parse(text: string): Promise {
+ await this._isInitialized;
+ return await this._instance.parse(text);
+ }
+}
diff --git a/projects/igniteui-angular/chat-extras/src/public_api.ts b/projects/igniteui-angular/chat-extras/src/public_api.ts
new file mode 100644
index 00000000000..de599f08302
--- /dev/null
+++ b/projects/igniteui-angular/chat-extras/src/public_api.ts
@@ -0,0 +1 @@
+export { MarkdownPipe } from './markdown-pipe';
diff --git a/projects/igniteui-angular/chat/index.ts b/projects/igniteui-angular/chat/index.ts
new file mode 100644
index 00000000000..decc72d85bc
--- /dev/null
+++ b/projects/igniteui-angular/chat/index.ts
@@ -0,0 +1 @@
+export * from './src/public_api';
diff --git a/projects/igniteui-angular/chat/ng-package.json b/projects/igniteui-angular/chat/ng-package.json
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/projects/igniteui-angular/chat/ng-package.json
@@ -0,0 +1 @@
+{}
diff --git a/projects/igniteui-angular/chat/src/chat.component.html b/projects/igniteui-angular/chat/src/chat.component.html
new file mode 100644
index 00000000000..896e36340b4
--- /dev/null
+++ b/projects/igniteui-angular/chat/src/chat.component.html
@@ -0,0 +1,16 @@
+
+
diff --git a/projects/igniteui-angular/chat/src/chat.component.ts b/projects/igniteui-angular/chat/src/chat.component.ts
new file mode 100644
index 00000000000..97aa851aeff
--- /dev/null
+++ b/projects/igniteui-angular/chat/src/chat.component.ts
@@ -0,0 +1,329 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ CUSTOM_ELEMENTS_SCHEMA,
+ Directive,
+ effect,
+ inject,
+ input,
+ OnInit,
+ output,
+ signal,
+ TemplateRef,
+ ViewContainerRef,
+ OnDestroy,
+ ViewRef,
+ computed,
+} from '@angular/core';
+import {
+ IgcChatComponent,
+ type IgcChatMessageAttachment,
+ type IgcChatMessage,
+ type IgcChatOptions,
+ type ChatRenderContext,
+ type ChatRenderers,
+ type ChatAttachmentRenderContext,
+ type ChatInputRenderContext,
+ type ChatMessageRenderContext,
+ type IgcChatMessageReaction,
+} from 'igniteui-webcomponents';
+
+type ChatContextUnion =
+ | ChatAttachmentRenderContext
+ | ChatMessageRenderContext
+ | ChatInputRenderContext
+ | ChatRenderContext;
+
+type ChatContextType =
+ T extends ChatAttachmentRenderContext
+ ? IgcChatMessageAttachment
+ : T extends ChatMessageRenderContext
+ ? IgcChatMessage
+ : T extends ChatInputRenderContext
+ ? string
+ : T extends ChatRenderContext
+ ? { instance: IgcChatComponent }
+ : never;
+
+type ExtractChatContext = T extends (ctx: infer R) => any ? R : never;
+
+type ChatTemplatesContextMap = {
+ [K in keyof ChatRenderers]: {
+ $implicit: ChatContextType<
+ ExtractChatContext> & ChatContextUnion
+ >;
+ };
+};
+
+/**
+ * Template references for customizing chat component rendering.
+ * Each property corresponds to a specific part of the chat UI that can be customized.
+ *
+ * @example
+ * ```typescript
+ * templates = {
+ * messageContent: this.customMessageTemplate,
+ * attachment: this.customAttachmentTemplate
+ * }
+ * ```
+ */
+export type IgxChatTemplates = {
+ [K in keyof Omit]?: TemplateRef;
+};
+
+/**
+ * Configuration options for the chat component.
+ */
+export type IgxChatOptions = Omit;
+
+
+/**
+ * Angular wrapper component for the Ignite UI Web Components Chat component.
+ *
+ * This component provides an Angular-friendly interface to the igc-chat web component,
+ * including support for Angular templates, signals, and change detection.
+ *
+ * Uses OnPush change detection strategy for optimal performance. All inputs are signals,
+ * so changes are automatically tracked and propagated to the underlying web component.
+ *
+ * @example
+ * ```typescript
+ * , Set>();
+ private _oldTemplates: IgxChatTemplates = {};
+
+ protected readonly _transformedTemplates = signal({});
+
+ protected readonly _mergedOptions = computed(() => {
+ const options = this.options();
+ const transformedTemplates = this._transformedTemplates();
+ return {
+ ...options,
+ renderers: transformedTemplates
+ };
+ });
+
+ //#endregion
+
+ //#region Inputs
+
+ /** Array of chat messages to display */
+ public readonly messages = input([]);
+
+ /** Draft message with text and optional attachments */
+ public readonly draftMessage = input<
+ { text: string; attachments?: IgcChatMessageAttachment[] } | undefined
+ >({ text: '' });
+
+ /** Configuration options for the chat component */
+ public readonly options = input({});
+
+ /** Custom templates for rendering chat elements */
+ public readonly templates = input({});
+
+ //#endregion
+
+ //#region Outputs
+
+ /** Emitted when a new message is created */
+ public readonly messageCreated = output();
+
+ /** Emitted when a user reacts to a message */
+ public readonly messageReact = output();
+
+ /** Emitted when an attachment is clicked */
+ public readonly attachmentClick = output();
+
+ /** Emitted when attachment drag starts */
+ public readonly attachmentDrag = output();
+
+ /** Emitted when attachment is dropped */
+ public readonly attachmentDrop = output();
+
+ /** Emitted when typing indicator state changes */
+ public readonly typingChange = output();
+
+ /** Emitted when the input receives focus */
+ public readonly inputFocus = output();
+
+ /** Emitted when the input loses focus */
+ public readonly inputBlur = output();
+
+ /** Emitted when the input value changes */
+ public readonly inputChange = output();
+
+ //#endregion
+
+ /** @internal */
+ public ngOnInit(): void {
+ IgcChatComponent.register();
+ }
+
+ /** @internal */
+ public ngOnDestroy(): void {
+ for (const viewSet of this._templateViewRefs.values()) {
+ viewSet.forEach(viewRef => viewRef.destroy());
+ }
+ this._templateViewRefs.clear();
+ }
+
+ constructor() {
+ // Templates changed - update transformed templates and viewRefs
+ effect(() => {
+ const templates = this.templates();
+ this._setTemplates(templates ?? {});
+ });
+ }
+
+ private _setTemplates(newTemplates: IgxChatTemplates): void {
+ const templateCopies: ChatRenderers = {};
+ const newTemplateKeys = Object.keys(newTemplates) as Array;
+
+ const oldTemplates = this._oldTemplates;
+ const oldTemplateKeys = Object.keys(oldTemplates) as Array;
+
+ for (const key of oldTemplateKeys) {
+ const oldRef = oldTemplates[key];
+ const newRef = newTemplates[key];
+
+ if (oldRef && oldRef !== newRef) {
+ const obsolete = this._templateViewRefs.get(oldRef);
+ if (obsolete) {
+ obsolete.forEach(viewRef => viewRef.destroy());
+ this._templateViewRefs.delete(oldRef);
+ }
+ }
+ }
+
+ this._oldTemplates = {};
+
+ for (const key of newTemplateKeys) {
+ const ref = newTemplates[key];
+ if (ref) {
+ (this._oldTemplates as Record>)[key] = ref;
+ templateCopies[key] = this._createTemplateRenderer(ref);
+ }
+ }
+
+ this._transformedTemplates.set(templateCopies);
+ }
+
+ private _createTemplateRenderer(ref: NonNullable) {
+ type ChatContext = ExtractChatContext>;
+
+ if (!this._templateViewRefs.has(ref)) {
+ this._templateViewRefs.set(ref, new Set());
+ }
+
+ const viewSet = this._templateViewRefs.get(ref)!;
+
+ return (ctx: ChatContext) => {
+ const context = ctx as ChatContextUnion;
+ let angularContext: any;
+
+ if ('message' in context && 'attachment' in context) {
+ angularContext = { $implicit: context.attachment };
+ } else if ('message' in context) {
+ angularContext = { $implicit: context.message };
+ } else if ('value' in context) {
+ angularContext = {
+ $implicit: context.value,
+ attachments: context.attachments
+ };
+ } else {
+ angularContext = { $implicit: { instance: context.instance } };
+ }
+
+ const viewRef = this._view.createEmbeddedView(ref, angularContext);
+ viewSet.add(viewRef);
+
+ return viewRef.rootNodes;
+ }
+ }
+}
+
+/**
+ * Context provided to the chat input template.
+ */
+export interface ChatInputContext {
+ /** The current input value */
+ $implicit: string;
+ /** Array of attachments associated with the input */
+ attachments: IgcChatMessageAttachment[];
+}
+
+/**
+ * Directive providing type information for chat message template contexts.
+ * Use this directive on ng-template elements that render chat messages.
+ *
+ * @example
+ * ```html
+ *
+ * {{ message.text }}
+ *
+ * ```
+ */
+@Directive({ selector: '[igxChatMessageContext]', standalone: true })
+export class IgxChatMessageContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatMessageContextDirective, ctx: unknown): ctx is { $implicit: IgcChatMessage } {
+ return true;
+ }
+}
+
+/**
+ * Directive providing type information for chat attachment template contexts.
+ * Use this directive on ng-template elements that render message attachments.
+ *
+ * @example
+ * ```html
+ *
+ * ![]()
+ *
+ * ```
+ */
+@Directive({ selector: '[igxChatAttachmentContext]', standalone: true })
+export class IgxChatAttachmentContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatAttachmentContextDirective, ctx: unknown): ctx is { $implicit: IgcChatMessageAttachment } {
+ return true;
+ }
+}
+
+/**
+ * Directive providing type information for chat input template contexts.
+ * Use this directive on ng-template elements that render the chat input.
+ *
+ * @example
+ * ```html
+ *
+ *
+ *
+ * ```
+ */
+@Directive({ selector: '[igxChatInputContext]', standalone: true })
+export class IgxChatInputContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatInputContextDirective, ctx: unknown): ctx is ChatInputContext {
+ return true;
+ }
+}
diff --git a/projects/igniteui-angular/chat/src/chat.spec.ts b/projects/igniteui-angular/chat/src/chat.spec.ts
new file mode 100644
index 00000000000..2977d06f194
--- /dev/null
+++ b/projects/igniteui-angular/chat/src/chat.spec.ts
@@ -0,0 +1,177 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
+import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatTemplates } from './chat.component'
+import { Component, signal, TemplateRef, viewChild } from '@angular/core';
+import type { IgcChatComponent, IgcChatMessage, IgcTextareaComponent } from 'igniteui-webcomponents';
+
+describe('Chat wrapper', () => {
+
+ let chatComponent: IgxChatComponent;
+ let chatElement: IgcChatComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [IgxChatComponent]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(IgxChatComponent);
+ chatComponent = fixture.componentInstance;
+ chatElement = getChatElement(fixture);
+ fixture.detectChanges();
+ })
+
+ it('is created', () => {
+ expect(chatComponent).toBeDefined();
+ });
+
+ it('has correct initial empty state', () => {
+ const draft = chatComponent.draftMessage();
+
+ expect(chatComponent.messages().length).toEqual(0);
+ expect(draft.text).toEqual('');
+ expect(draft.attachments).toBeUndefined();
+ });
+
+ it('correct bindings for messages', async () => {
+ fixture.componentRef.setInput('messages', [{ id: '1', sender: 'user', text: 'Hello' }]);
+
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+
+ const messageElement = getChatMessages(chatElement)[0];
+ expect(messageElement).toBeDefined();
+ expect(getChatMessageDOM(messageElement).textContent.trim()).toEqual(chatComponent.messages()[0].text);
+ });
+
+ it('correct bindings for draft message', async () => {
+ fixture.componentRef.setInput('draftMessage', { text: 'Hello world' });
+
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ const textarea = getChatInput(chatElement);
+ expect(textarea.value).toEqual(chatComponent.draftMessage().text);
+ });
+});
+
+describe('Chat templates', () => {
+ let fixture: ComponentFixture;
+ let chatElement: IgcChatComponent;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [IgxChatComponent, IgxChatMessageContextDirective, ChatTemplatesBed]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChatTemplatesBed);
+ fixture.detectChanges();
+ chatElement = getChatElement(fixture);
+ });
+
+ it('has correct initially bound template', async () => {
+ await fixture.whenStable();
+
+ // NOTE: This is invoked since in the test bed there is no app ref so fresh embedded view
+ // has no change detection ran on it. In an application scenario this is not the case.
+ // This is so we don't explicitly invoke `viewRef.detectChanges()` inside the returned closure
+ // from the wrapper's `_createTemplateRenderer` call.
+ fixture.detectChanges();
+ expect(getChatMessageDOM(getChatMessages(chatElement)[0]).textContent.trim())
+ .toEqual(`Your message: ${fixture.componentInstance.messages()[0].text}`);
+ });
+});
+
+describe('Chat dynamic templates binding', () => {
+ let fixture: ComponentFixture;
+ let chatElement: IgcChatComponent;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [IgxChatComponent, IgxChatMessageContextDirective, ChatDynamicTemplatesBed]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChatDynamicTemplatesBed);
+ fixture.detectChanges();
+ chatElement = getChatElement(fixture);
+ });
+
+ it('supports late binding', async () => {
+ fixture.componentInstance.bindTemplates();
+ fixture.detectChanges();
+
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ expect(getChatMessageDOM(getChatMessages(chatElement)[0]).textContent.trim())
+ .toEqual(`Your message: ${fixture.componentInstance.messages()[0].text}`);
+ });
+
+});
+
+
+@Component({
+ template: `
+
+ Your message: {{ message.text }}
+
+ `,
+ imports: [IgxChatComponent, IgxChatMessageContextDirective]
+})
+class ChatTemplatesBed {
+ public messages = signal([{
+ id: '1',
+ sender: 'user',
+ text: 'Hello world'
+ }]);
+ public messageTemplate = viewChild.required>('message');
+}
+
+@Component({
+ template: `
+
+ Your message: {{ message.text }}
+
+ `,
+ imports: [IgxChatComponent, IgxChatMessageContextDirective]
+})
+class ChatDynamicTemplatesBed {
+ public templates = signal(null);
+ public messages = signal([{
+ id: '1',
+ sender: 'user',
+ text: 'Hello world'
+ }]);
+ public messageTemplate = viewChild.required>('message');
+
+ public bindTemplates(): void {
+ this.templates.set({
+ messageContent: this.messageTemplate()
+ });
+ }
+}
+
+function getChatElement(fixture: ComponentFixture): IgcChatComponent {
+ const nativeElement = fixture.nativeElement as HTMLElement;
+ return nativeElement.querySelector('igc-chat');
+}
+
+function getChatInput(chat: IgcChatComponent): IgcTextareaComponent {
+ return chat.renderRoot.querySelector('igc-chat-input').shadowRoot.querySelector('igc-textarea');
+}
+
+function getChatMessages(chat: IgcChatComponent): HTMLElement[] {
+ return Array.from(chat.renderRoot.querySelectorAll('igc-chat-message'));
+}
+
+function getChatMessageDOM(message: HTMLElement) {
+ return message.shadowRoot;
+}
diff --git a/projects/igniteui-angular/chat/src/public_api.ts b/projects/igniteui-angular/chat/src/public_api.ts
new file mode 100644
index 00000000000..eca793fd7b9
--- /dev/null
+++ b/projects/igniteui-angular/chat/src/public_api.ts
@@ -0,0 +1 @@
+export * from './chat.component';
diff --git a/projects/igniteui-angular/checkbox/README.md b/projects/igniteui-angular/checkbox/README.md
new file mode 100644
index 00000000000..de933d26899
--- /dev/null
+++ b/projects/igniteui-angular/checkbox/README.md
@@ -0,0 +1,89 @@
+# igx-checkbox
+
+`igx-checkbox` is a selection component that allows users to make a binary choice for a certain condition. It behaves similar to the native browser checkbox.
+A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/checkbox.html)
+
+# Usage
+
+Basic usage of `igx-checkbox`
+
+```html
+
+ -
+
+ {{ task.description }}
+
+
+
+```
+
+You can easily use it within forms with `[(ngModel)]`
+
+```html
+
+```
+
+### Checkbox Label
+
+The checkbox label is set to anything passed between the opening and closing tags of the `` component.
+
+The position of the label can be set to either `before` or `after`(default) the actual checkbox using the `labelPosition` input property. For instance, to set the label position ___before___ the checkbox:
+
+```html
+Label
+```
+
+### Indeterminate State
+
+The checkbox component supports an indeterminate state, which behaves the same as the native [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate) of an input of type checkbox.
+To set the indeterminate state for an `igx-checkbox`, do:
+
+```html
+Label
+```
+
+### Ripple Touch Feedback
+
+The `igx-checkbox` is styled according to the Google's Material spec, and provides a ripple effect around the checkbox when the checkbox is clicked/tapped.
+To disable the ripple effect, do:
+
+```html
+ | Emitted when the checkbox checked value changes. |
+
+### Methods
+
+| toggle |
+|:----------|
+| Toggles the checked state of the checkbox. |
diff --git a/projects/igniteui-angular/checkbox/index.ts b/projects/igniteui-angular/checkbox/index.ts
new file mode 100644
index 00000000000..decc72d85bc
--- /dev/null
+++ b/projects/igniteui-angular/checkbox/index.ts
@@ -0,0 +1 @@
+export * from './src/public_api';
diff --git a/projects/igniteui-angular/checkbox/ng-package.json b/projects/igniteui-angular/checkbox/ng-package.json
new file mode 100644
index 00000000000..2c63c085104
--- /dev/null
+++ b/projects/igniteui-angular/checkbox/ng-package.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.html b/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.html
new file mode 100644
index 00000000000..9bab0879680
--- /dev/null
+++ b/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.html
@@ -0,0 +1,47 @@
+
+
+
+
+ @if (theme === 'indigo') {
+
+ } @else {
+
+ }
+
+
+
+
+
+
+ Init `,
+ imports: [IgxCheckboxComponent]
+})
+class InitCheckboxComponent {
+ @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
+}
+
+@Component({
+ template: `Simple `,
+ imports: [IgxCheckboxComponent, FormsModule]
+})
+class CheckboxSimpleComponent {
+ @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
+ public changeEventCalled = false;
+ public subscribed = false;
+ public clickCounter = 0;
+ public onChange() {
+ this.changeEventCalled = true;
+ }
+ public onClick() {
+ this.clickCounter++;
+ }
+}
+@Component({
+ template: `Indeterminate `,
+ imports: [IgxCheckboxComponent, FormsModule]
+})
+class CheckboxIndeterminateComponent {
+ @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
+
+ public subscribed = false;
+}
+
+@Component({
+ template: `Required `,
+ imports: [IgxCheckboxComponent]
+})
+class CheckboxRequiredComponent {
+ @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
+}
+
+@Component({
+ template: `Readonly `,
+ imports: [IgxCheckboxComponent, FormsModule]
+})
+class CheckboxReadonlyComponent {
+ @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent;
+
+ public subscribed = false;
+}
+
+@Component({
+ template: `{{label}}
+
+ * simple checkbox
+ *
+ * ```
+ */
+@Component({
+ selector: 'igx-checkbox',
+ providers: [
+ {
+ provide: EDITOR_PROVIDER,
+ useExisting: IgxCheckboxComponent,
+ multi: true,
+ },
+ ],
+ preserveWhitespaces: false,
+ templateUrl: 'checkbox.component.html',
+ imports: [IgxRippleDirective],
+})
+export class IgxCheckboxComponent
+ extends CheckboxBaseDirective
+ implements AfterViewInit, ControlValueAccessor, EditorProvider {
+ /**
+ * Returns the class of the checkbox component.
+ *
+ * @example
+ * ```typescript
+ * let class = this.checkbox.cssClass;
+ * ```
+ */
+ @HostBinding('class.igx-checkbox')
+ public override cssClass = 'igx-checkbox';
+
+ /**
+ * Returns if the component is of type `material`.
+ *
+ * @example
+ * ```typescript
+ * let checkbox = this.checkbox.material;
+ * ```
+ */
+ @HostBinding('class.igx-checkbox--material')
+ protected get material() {
+ return this.theme === 'material';
+ }
+
+ /**
+ * Returns if the component is of type `indigo`.
+ *
+ * @example
+ * ```typescript
+ * let checkbox = this.checkbox.indigo;
+ * ```
+ */
+ @HostBinding('class.igx-checkbox--indigo')
+ protected get indigo() {
+ return this.theme === 'indigo';
+ }
+
+ /**
+ * Returns if the component is of type `bootstrap`.
+ *
+ * @example
+ * ```typescript
+ * let checkbox = this.checkbox.bootstrap;
+ * ```
+ */
+ @HostBinding('class.igx-checkbox--bootstrap')
+ protected get bootstrap() {
+ return this.theme === 'bootstrap';
+ }
+
+ /**
+ * Returns if the component is of type `fluent`.
+ *
+ * @example
+ * ```typescript
+ * let checkbox = this.checkbox.fluent;
+ * ```
+ */
+ @HostBinding('class.igx-checkbox--fluent')
+ protected get fluent() {
+ return this.theme === 'fluent';
+ }
+
+ /**
+ * Sets/gets whether the checkbox component is on focus.
+ * Default value is `false`.
+ *
+ * @example
+ * ```typescript
+ * this.checkbox.focused = true;
+ * ```
+ * ```typescript
+ * let isFocused = this.checkbox.focused;
+ * ```
+ */
+ @HostBinding('class.igx-checkbox--focused')
+ public override focused = false;
+
+ /**
+ * Sets/gets the checkbox indeterminate visual state.
+ * Default value is `false`;
+ *
+ * @example
+ * ```html
+ *
+
+ {{chip.text}}
+
+
+```
+
+### Features
+
+#### Selection
+
+Selection can be enabled by setting an input called `selectable`. The selecting is done either by clicking on the chip itself or by using the `Tab` key to focus the chip and then pressing the `Space` key. If a chip is already selected it can be deselected by pressing the `Space` key again while the chip is focused or by clicking on it.
+
+An event `onSelection` is fired when the selection state of the `igxChip` changes. It provides the new `selected` value so you can get the new state and the original event in `originalEvent` that triggered this selection change. If this is not done through user interaction but instead is done by setting the `selected` property programmatically the `originalEvent` argument has value `null`.
+
+Also by default an icon is shown indicating that the chip is being selected. It is fully customizable and can be done through the `selectIcon` input. It accepts values of type `TemplateRef` and overrides the default icon while retaining the same functionality.
+
+Example of customizing the select icon:
+
+```html
+
+
+ {{chip.text}}
+
+
+
+ done_outline
+
+```
+
+#### Removing
+
+Removing can be enabled by setting the `removable` input to `true`. When enabled a remove button is rendered at the end of the chip. When the end-users performs any interaction like clicking on the remove button or pressing the `Delete` key while the chip is focused the `remove` event is emitted.
+
+By default the chip does not remove itself from the template when the user wants to delete a chip. This needs to be handled manually using the `remove` event.
+
+If you need to customize the remove icon use the `removeIcon` input. It takes a value of type `TemplateRef` and renders it instead of the default remove icon. This means that you can customize the remove button in any way while all the handling of it is still handled by the chip itself.
+
+Example of handling chip removing and custom remove icon:
+```html
+
+
+ {{chip.text}}
+
+
+
+ delete
+
+```
+
+```ts
+public chipRemoved(event) {
+ this.chipList = this.chipList.filter((item) => {
+ return item.id !== event.owner.id;
+ });
+ this.cdr.detectChanges();
+}
+```
+
+#### Moving/Dragging
+
+The chip can be dragged by the end-user in order to change its position. The moving/dragging is disabled by default, but can be enabled by setting an input `draggable`. The actual moving of the chip in the template has to be handled manually by the developer.
+
+```html
+
+
+ {{chip.text}}
+
+
+```
+
+```ts
+public ngOnInit() {
+ chipArea.forEach((chip) => {
+ chip.draggable = true;
+ });
+}
+
+public chipsOrderChanged(event) {
+ const newChipList = [];
+ for (const chip of event.chipsArray) {
+ const chipItem = this.chipList.filter((item) => {
+ return item.id === chip.id;
+ })[0];
+ newChipList.push(chipItem);
+ }
+ this.chipList = newChipList;
+}
+
+```
+
+#### Chip Templates
+
+The `IgxChipComponent`'s main structure consists of chip content, `select icon`, `remove button`, `prefix` and `suffix`. All of those elements are templatable.
+
+The content of the chip is taken by the content defined inside the chip template except elements that define the `prefix`or `suffix` of the chip. You can define any type of content you need.
+
+The `prefix` and `suffix` are also elements inside the actual chip area where they can be templated by your preference. The way they can be specified is by using the `IgxPrefix` and `IxgSuffix` directives respectively.
+
+Example of using an icon for a `prefix`, text for content and a custom icon again for a `suffix`:
+
+```html
+
+ drag_indicator
+ {{chip.text}}
+ close
+
+```
+
+#### Keyboard Navigation
+
+The chips can be focused using the `Tab` key or by clicking on them. Chips can be reordered using the keyboard navigation:
+
+- Keyboard controls when the chip is focused:
+
+ - LEFT - Moves the focus to the chip on the left.
+ - RIGHT - Focuses the chip on the right.
+ - SPACE - Toggles chip selection if it is selectable.
+ - DELETE - Triggers the `remove` event for the `igxChip` so the chip deletion can be handled manually
+ - SHIFT + LEFT - Triggers `onReorder` event for the `igxChipArea` when the currently focused chip should move position to the left.
+ - SHIFT + RIGHT - Triggers `onReorder` event for the `igxChipArea` when the currently focused chip should move one position to the right
+
+- Keyboard controls when the remove button is focused:
+
+ - SPACE or ENTER Triggers the `remove` event so the chip deletion can be handled manually
+
+# API
+
+## IgxChipComponent
+
+### Inputs
+| Name | Type | Description |
+|:----------|:-------------:|:------|
+| `id` | `string` | Unique identifier of the component. |
+| `data` | `any` | Stores data related to the chip. |
+| `draggable ` | `boolean` | Defines if the chip can be dragged in order to change its position. |
+| `removable ` | `boolean` | Defines if the chip should render remove button and throw remove events. |
+| `removeIcon ` | `TemplateRef` | Overrides the default remove icon when `removable` is set to `true`. |
+| `selectable ` | `boolen` | Defines if the chip can be selected on click or through navigation. |
+| `selectIcon ` | `TemplateRef` | Overrides the default select icon when `selectable` is set to `true`. |
+| `selected` | `boolen` | Sets if the chip is selected. |
+| `disabled` | `boolean` | Sets if the chip is disabled. |
+| `color` | `string` | Sets the chip background color. |
+| `hideBaseOnDrag` | `boolean` | Sets if the chip base should be hidden when the chip is dragged. |
+
+### Outputs
+| Name | Argument Type | Description |
+|:--:|:---|:---|
+| `moveStart` | `IBaseChipEventArgs` | Fired when the chip moving(dragging) starts. |
+| `moveEnd` | `IBaseChipEventArgs` | Fired when the chip moving(dragging) ends. |
+| `remove ` | `IBaseChipEventArgs` | Fired when the chip remove button is clicked. |
+| `chipClick ` | `IChipClickEventArgs` | Fired when the chip is clicked instead of dragged. |
+| `selectedChanging` | `IChipSelectEventArgs` | Fired when the chip is being selected/deselected. Cancellable |
+| `selectedChange` | |
+| `selectedChanging` | `IChipSelectEventArgs` | Fired when the chip is being selected/deselected. Cancellable |
+| `keyDown ` | `IChipKeyDownEventArgs` | Fired when the chip keyboard navigation is being used. |
+| `dragEnter ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has entered the current chip area. |
+| `dragLeave ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has left the current chip area. |
+| `dragDrop ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has been dropped in the current chip area. |
+| `dragOver ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has moved over the current chip area. |
+
+## IgxChipsAreaComponent
+
+### Inputs
+| Name | Type | Description |
+|:----------|:-------------:|:------|
+| `width` | `number` | Sets the width of the chips area. |
+| `height ` | `number` | Sets the height of the chips area. |
+
+### Outputs
+| Name | Argument Type | Description |
+|:--:|:---|:---|
+| `reorder ` | `IChipsAreaReorderEventArgs` | Fired when the chips order should be changed(from dragging). Requires custom logic for actual reorder. |
+| `selectionChange ` | `IChipsAreaSelectEventArgs` | Fired for all initially selected chips and when chip is being selected/deselected. |
+| `moveStart ` | `IBaseChipsAreaEventArgs` | Fired when any chip moving(dragging) starts. |
+| `moveEnd ` | `IBaseChipsAreaEventArgs` | Fired when any chip moving(dragging) ends. |
+
+### Properties
+| Name | Return Type | Description |
+|:----------:|:------|:------|
+| `chipsList` | `QueryList` | Returns the list of chips inside the chip area. |
diff --git a/projects/igniteui-angular/chips/index.ts b/projects/igniteui-angular/chips/index.ts
new file mode 100644
index 00000000000..decc72d85bc
--- /dev/null
+++ b/projects/igniteui-angular/chips/index.ts
@@ -0,0 +1 @@
+export * from './src/public_api';
diff --git a/projects/igniteui-angular/chips/ng-package.json b/projects/igniteui-angular/chips/ng-package.json
new file mode 100644
index 00000000000..2c63c085104
--- /dev/null
+++ b/projects/igniteui-angular/chips/ng-package.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/projects/igniteui-angular/chips/src/chips/chip.component.html b/projects/igniteui-angular/chips/src/chips/chip.component.html
new file mode 100644
index 00000000000..27958ceca06
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/chip.component.html
@@ -0,0 +1,64 @@
+
+
+
+ @if (selected) {
+
+
+
+
+
+
diff --git a/projects/igniteui-angular/chips/src/chips/chip.component.ts b/projects/igniteui-angular/chips/src/chips/chip.component.ts
new file mode 100644
index 00000000000..b25a5e646a0
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/chip.component.ts
@@ -0,0 +1,919 @@
+import {
+ Component,
+ ChangeDetectorRef,
+ EventEmitter,
+ ElementRef,
+ HostBinding,
+ HostListener,
+ Input,
+ Output,
+ ViewChild,
+ Renderer2,
+ TemplateRef,
+ OnDestroy,
+ booleanAttribute,
+ OnInit,
+ inject,
+ DOCUMENT
+} from '@angular/core';
+import { IgxDragDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives';
+import { IBaseEventArgs, ɵSize } from 'igniteui-angular/core';
+import { ChipResourceStringsEN, IChipResourceStrings } from 'igniteui-angular/core';
+import { Subject } from 'rxjs';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { getCurrentResourceStrings } from 'igniteui-angular/core';
+
+export const IgxChipTypeVariant = {
+ PRIMARY: 'primary',
+ INFO: 'info',
+ SUCCESS: 'success',
+ WARNING: 'warning',
+ DANGER: 'danger'
+} as const;
+export type IgxChipTypeVariant = (typeof IgxChipTypeVariant)[keyof typeof IgxChipTypeVariant];
+
+export interface IBaseChipEventArgs extends IBaseEventArgs {
+ originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
+ owner: IgxChipComponent;
+}
+
+export interface IChipClickEventArgs extends IBaseChipEventArgs {
+ cancel: boolean;
+}
+
+export interface IChipKeyDownEventArgs extends IBaseChipEventArgs {
+ originalEvent: KeyboardEvent;
+ cancel: boolean;
+}
+
+export interface IChipEnterDragAreaEventArgs extends IBaseChipEventArgs {
+ dragChip: IgxChipComponent;
+}
+
+export interface IChipSelectEventArgs extends IBaseChipEventArgs {
+ cancel: boolean;
+ selected: boolean;
+}
+
+let CHIP_ID = 0;
+
+/**
+ * Chip is compact visual component that displays information in an obround.
+ *
+ * @igxModule IgxChipsModule
+ *
+ * @igxTheme igx-chip-theme
+ *
+ * @igxKeywords chip
+ *
+ * @igxGroup display
+ *
+ * @remarks
+ * The Ignite UI Chip can be templated, deleted, and selected.
+ * Multiple chips can be reordered and visually connected to each other.
+ * Chips reside in a container called chips area which is responsible for managing the interactions between the chips.
+ *
+ * @example
+ * ```html
+ *
+ *
+ * ```
+ */
+@Component({
+ selector: 'igx-chip',
+ templateUrl: 'chip.component.html',
+ imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent]
+})
+export class IgxChipComponent implements OnInit, OnDestroy {
+ public cdr = inject(ChangeDetectorRef);
+ private ref = inject>(ElementRef);
+ private renderer = inject(Renderer2);
+ public document = inject(DOCUMENT);
+
+
+ /**
+ * Sets/gets the variant of the chip.
+ *
+ * @remarks
+ * Allowed values are `primary`, `info`, `success`, `warning`, `danger`.
+ * Providing no/nullish value leaves the chip in its default state.
+ *
+ * @example
+ * ```html
+ * delete ;
+
+ /**
+ * Defines if the `IgxChipComponent` can be selected on click or through navigation,
+ * By default it is set to false.
+ *
+ * @example
+ * ```html
+ * done_outline ;
+
+ /**
+ * @hidden
+ * @internal
+ */
+ @Input()
+ public class = '';
+
+ /**
+ * Disables the `IgxChipComponent`. When disabled it restricts user interactions
+ * like focusing on click or tab, selection on click or Space, dragging.
+ * By default it is set to false.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ *
+ * Two-way data binding:
+ * ```html
+ *
+ * ```
+ */
+ @HostBinding('attr.aria-selected')
+ @Input({ transform: booleanAttribute })
+ public set selected(newValue: boolean) {
+ this.changeSelection(newValue);
+ }
+
+ /**
+ * Returns if the `IgxChipComponent` is selected.
+ *
+ * @example
+ * ```typescript
+ * @ViewChild('myChip')
+ * public chip: IgxChipComponent;
+ * selectedChip(){
+ * let selectedChip = this.chip.selected;
+ * }
+ * ```
+ */
+ public get selected() {
+ return this._selected;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ @Output()
+ public selectedChange = new EventEmitter();
+
+ /**
+ * Sets the `IgxChipComponent` background color.
+ * The `color` property supports string, rgb, hex.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public moveStart = new EventEmitter();
+
+ /**
+ * Emits an event when the `IgxChipComponent` moving ends.
+ * Returns the moved `IgxChipComponent`.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public moveEnd = new EventEmitter();
+
+ /**
+ * Emits an event when the `IgxChipComponent` is removed.
+ * Returns the removed `IgxChipComponent`.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public remove = new EventEmitter();
+
+ /**
+ * Emits an event when the `IgxChipComponent` is clicked.
+ * Returns the clicked `IgxChipComponent`, whether the event should be canceled.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public chipClick = new EventEmitter();
+
+ /**
+ * Emits event when the `IgxChipComponent` is selected/deselected.
+ * Returns the selected chip reference, whether the event should be canceled, what is the next selection state and
+ * when the event is triggered by interaction `originalEvent` is provided, otherwise `originalEvent` is `null`.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public selectedChanging = new EventEmitter();
+
+ /**
+ * Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public selectedChanged = new EventEmitter();
+
+ /**
+ * Emits an event when the `IgxChipComponent` keyboard navigation is being used.
+ * Returns the focused/selected `IgxChipComponent`, whether the event should be canceled,
+ * if the `alt`, `shift` or `control` key is pressed and the pressed key name.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public keyDown = new EventEmitter();
+
+ /**
+ * Emits an event when the `IgxChipComponent` has entered the `IgxChipsAreaComponent`.
+ * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
+ * the original drop event arguments.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public dragEnter = new EventEmitter();
+
+ /**
+ * Emits an event when the `IgxChipComponent` has left the `IgxChipsAreaComponent`.
+ * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
+ * the original drop event arguments.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public dragLeave = new EventEmitter();
+
+ /**
+ * Emits an event when the `IgxChipComponent` is over the `IgxChipsAreaComponent`.
+ * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
+ * the original drop event arguments.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public dragOver = new EventEmitter();
+
+ /**
+ * Emits an event when the `IgxChipComponent` has been dropped in the `IgxChipsAreaComponent`.
+ * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
+ * the original drop event arguments.
+ *
+ * @example
+ * ```html
+ *
+ * ```
+ */
+ @Output()
+ public dragDrop = new EventEmitter();
+
+ @HostBinding('class.igx-chip')
+ protected defaultClass = 'igx-chip';
+
+ @HostBinding('class.igx-chip--primary')
+ protected get isPrimary() {
+ return this.variant === IgxChipTypeVariant.PRIMARY;
+ }
+
+ @HostBinding('class.igx-chip--info')
+ protected get isInfo() {
+ return this.variant === IgxChipTypeVariant.INFO;
+ }
+
+ @HostBinding('class.igx-chip--success')
+ protected get isSuccess() {
+ return this.variant === IgxChipTypeVariant.SUCCESS;
+ }
+
+ @HostBinding('class.igx-chip--warning')
+ protected get isWarning() {
+ return this.variant === IgxChipTypeVariant.WARNING;
+ }
+
+ @HostBinding('class.igx-chip--danger')
+ protected get isDanger() {
+ return this.variant === IgxChipTypeVariant.DANGER;
+ }
+
+ /**
+ * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior.
+ *
+ * @example
+ * ```html
+ * ;
+
+ /**
+ * @hidden
+ * @internal
+ */
+ @ViewChild('defaultSelectIcon', { read: TemplateRef, static: true })
+ public defaultSelectIcon: TemplateRef;
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public get removeButtonTemplate() {
+ if (!this.disabled) {
+ return this.removeIcon || this.defaultRemoveIcon;
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public get selectIconTemplate() {
+ return this.selectIcon || this.defaultSelectIcon;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public get ghostStyles() {
+ return { '--ig-size': `${this.chipSize}` };
+ }
+
+ /** @hidden @internal */
+ public get nativeElement() {
+ return this.ref.nativeElement;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public hideBaseElement = false;
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public destroy$ = new Subject();
+
+ protected get chipSize(): ɵSize {
+ return this.computedStyles?.getPropertyValue('--ig-size') || ɵSize.Medium;
+ }
+ protected _tabIndex = null;
+ protected _selected = false;
+ protected _selectedItemClass = 'igx-chip__item--selected';
+ protected _movedWhileRemoving = false;
+ protected computedStyles;
+ private _resourceStrings = getCurrentResourceStrings(ChipResourceStringsEN);
+
+ /**
+ * @hidden
+ * @internal
+ */
+ @HostListener('keydown', ['$event'])
+ public keyEvent(event: KeyboardEvent) {
+ this.onChipKeyDown(event);
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public selectClass(condition: boolean): any {
+ const SELECT_CLASS = 'igx-chip__select';
+
+ return {
+ [SELECT_CLASS]: condition,
+ [`${SELECT_CLASS}--hidden`]: !condition
+ };
+ }
+
+ public onSelectTransitionDone(event) {
+ if (event.target.tagName) {
+ // Trigger onSelectionDone on when `width` property is changed and the target is valid element(not comment).
+ this.selectedChanged.emit({
+ owner: this,
+ originalEvent: event
+ });
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipKeyDown(event: KeyboardEvent) {
+ const keyDownArgs: IChipKeyDownEventArgs = {
+ originalEvent: event,
+ owner: this,
+ cancel: false
+ };
+
+ this.keyDown.emit(keyDownArgs);
+ if (keyDownArgs.cancel) {
+ return;
+ }
+
+ if ((event.key === 'Delete' || event.key === 'Del') && this.removable) {
+ this.remove.emit({
+ originalEvent: event,
+ owner: this
+ });
+ }
+
+ if ((event.key === ' ' || event.key === 'Spacebar') && this.selectable && !this.disabled) {
+ this.changeSelection(!this.selected, event);
+ }
+
+ if (event.key !== 'Tab') {
+ event.preventDefault();
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onRemoveBtnKeyDown(event: KeyboardEvent) {
+ if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
+ this.remove.emit({
+ originalEvent: event,
+ owner: this
+ });
+
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+
+ public onRemoveMouseDown(event: PointerEvent | MouseEvent) {
+ event.stopPropagation();
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onRemoveClick(event: MouseEvent | TouchEvent) {
+ this.remove.emit({
+ originalEvent: event,
+ owner: this
+ });
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onRemoveTouchMove() {
+ // We don't remove chip if user starting touch interacting on the remove button moves the chip
+ this._movedWhileRemoving = true;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onRemoveTouchEnd(event: TouchEvent) {
+ if (!this._movedWhileRemoving) {
+ this.onRemoveClick(event);
+ }
+ this._movedWhileRemoving = false;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ // -----------------------------
+ // Start chip igxDrag behavior
+ public onChipDragStart(event: IDragStartEventArgs) {
+ this.moveStart.emit({
+ originalEvent: event,
+ owner: this
+ });
+ event.cancel = !this.draggable || this.disabled;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipDragEnd() {
+ if (this.animateOnRelease) {
+ this.dragDirective.transitionToOrigin();
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipMoveEnd(event: IDragBaseEventArgs) {
+ // moveEnd is triggered after return animation has finished. This happen when we drag and release the chip.
+ this.moveEnd.emit({
+ originalEvent: event,
+ owner: this
+ });
+
+ if (this.selected) {
+ this.chipArea.nativeElement.focus();
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipGhostCreate() {
+ this.hideBaseElement = this.hideBaseOnDrag;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipGhostDestroy() {
+ this.hideBaseElement = false;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipDragClicked(event: IDragBaseEventArgs) {
+ const clickEventArgs: IChipClickEventArgs = {
+ originalEvent: event,
+ owner: this,
+ cancel: false
+ };
+ this.chipClick.emit(clickEventArgs);
+
+ if (!clickEventArgs.cancel && this.selectable && !this.disabled) {
+ this.changeSelection(!this.selected, event);
+ }
+ }
+ // End chip igxDrag behavior
+
+ /**
+ * @hidden
+ * @internal
+ */
+ // -----------------------------
+ // Start chip igxDrop behavior
+ public onChipDragEnterHandler(event: IDropBaseEventArgs) {
+ if (this.dragDirective === event.drag) {
+ return;
+ }
+
+ const eventArgs: IChipEnterDragAreaEventArgs = {
+ owner: this,
+ dragChip: event.drag.data?.chip,
+ originalEvent: event
+ };
+ this.dragEnter.emit(eventArgs);
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipDragLeaveHandler(event: IDropBaseEventArgs) {
+ if (this.dragDirective === event.drag) {
+ return;
+ }
+
+ const eventArgs: IChipEnterDragAreaEventArgs = {
+ owner: this,
+ dragChip: event.drag.data?.chip,
+ originalEvent: event
+ };
+ this.dragLeave.emit(eventArgs);
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipDrop(event: IDropDroppedEventArgs) {
+ // Cancel the default drop logic
+ event.cancel = true;
+ if (this.dragDirective === event.drag) {
+ return;
+ }
+
+ const eventArgs: IChipEnterDragAreaEventArgs = {
+ owner: this,
+ dragChip: event.drag.data?.chip,
+ originalEvent: event
+ };
+ this.dragDrop.emit(eventArgs);
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public onChipOverHandler(event: IDropBaseEventArgs) {
+ if (this.dragDirective === event.drag) {
+ return;
+ }
+
+ const eventArgs: IChipEnterDragAreaEventArgs = {
+ owner: this,
+ dragChip: event.drag.data?.chip,
+ originalEvent: event
+ };
+ this.dragOver.emit(eventArgs);
+ }
+ // End chip igxDrop behavior
+
+ protected changeSelection(newValue: boolean, srcEvent = null) {
+ const onSelectArgs: IChipSelectEventArgs = {
+ originalEvent: srcEvent,
+ owner: this,
+ selected: false,
+ cancel: false
+ };
+
+ if (newValue && !this._selected) {
+ onSelectArgs.selected = true;
+ this.selectedChanging.emit(onSelectArgs);
+
+ if (!onSelectArgs.cancel) {
+ this.renderer.addClass(this.chipArea.nativeElement, this._selectedItemClass);
+ this._selected = newValue;
+ this.selectedChange.emit(this._selected);
+ this.selectedChanged.emit({
+ owner: this,
+ originalEvent: srcEvent
+ });
+ }
+ } else if (!newValue && this._selected) {
+ this.selectedChanging.emit(onSelectArgs);
+
+ if (!onSelectArgs.cancel) {
+ this.renderer.removeClass(this.chipArea.nativeElement, this._selectedItemClass);
+ this._selected = newValue;
+ this.selectedChange.emit(this._selected);
+ this.selectedChanged.emit({
+ owner: this,
+ originalEvent: srcEvent
+ });
+ }
+ }
+ }
+
+ public ngOnInit(): void {
+ this.computedStyles = this.document.defaultView.getComputedStyle(this.nativeElement);
+ }
+
+ public ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+}
diff --git a/projects/igniteui-angular/chips/src/chips/chip.spec.ts b/projects/igniteui-angular/chips/src/chips/chip.spec.ts
new file mode 100644
index 00000000000..b7c54bf7951
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/chip.spec.ts
@@ -0,0 +1,407 @@
+import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef, inject } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { IgxChipComponent } from './chip.component';
+import { IgxChipsAreaComponent } from './chips-area.component';
+import { IgxPrefixDirective } from '../../../input-group/src/public_api';
+import { IgxLabelDirective } from '../../../input-group/src/public_api';
+import { IgxSuffixDirective } from '../../../input-group/src/public_api';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { getComponentSize } from 'igniteui-angular/core';
+import { ControlsFunction } from 'igniteui-angular/test-utils/controls-functions.spec';
+import { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interactions.spec';
+
+@Component({
+ template: `
+
+ @for (chip of chipList; track chip.id) {
+
+ {{chip.text}}
+ drag_indicator
+
+ }
+
+ Tab Chip
+
+
+ Tab Chip
+
+
+ Tab Chip
+
+
+ Tab Chip
+
+
+ Tab Chip
+
+
+ `,
+ imports: [IgxChipComponent, IgxChipsAreaComponent, IgxIconComponent, IgxPrefixDirective]
+})
+class TestChipComponent {
+ public cdr = inject(ChangeDetectorRef);
+
+
+ @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true })
+ public chipsArea: IgxChipsAreaComponent;
+
+ @ViewChildren('chipElem', { read: IgxChipComponent })
+ public chips: QueryList;
+
+ public chipList = [
+ { id: 'Country', text: 'Country', removable: false, selectable: false, draggable: true },
+ { id: 'City', text: 'City', removable: true, selectable: true, draggable: true, chipSize: '--ig-size-large' },
+ { id: 'Town', text: 'Town', removable: true, selectable: true, draggable: true, chipSize: '--ig-size-small' },
+ { id: 'FirstName', text: 'First Name', removable: true, selectable: true, draggable: true, chipSize: '--ig-size-medium' }
+ ];
+
+ public chipRemoved(event) {
+ this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
+ this.cdr.detectChanges();
+ }
+}
+
+@Component({
+ template: `
+
+ @for (chip of chipList; track chip.id) {
+
+ label
+ suf
+
+ }
+
+ `,
+ imports: [IgxChipsAreaComponent, IgxChipComponent, IgxLabelDirective, IgxSuffixDirective]
+})
+class TestChipsLabelAndSuffixComponent {
+
+ @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true })
+ public chipsArea: IgxChipsAreaComponent;
+
+ @ViewChildren('chipElem', { read: IgxChipComponent })
+ public chips: QueryList;
+
+ public chipList = [
+ { id: 'Country', text: 'Country', removable: false, selectable: false, draggable: true },
+ { id: 'City', text: 'City', removable: true, selectable: true, draggable: true },
+ { id: 'Town', text: 'Town', removable: true, selectable: true, draggable: true },
+ { id: 'FirstName', text: 'First Name', removable: true, selectable: true, draggable: true },
+ ];
+}
+
+
+describe('IgxChip', () => {
+ const CHIP_TEXT_CLASS = 'igx-chip__text';
+ const CHIP_ITEM_CLASS = 'igx-chip__item';
+
+ let fix: ComponentFixture;
+ let chipArea;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [TestChipComponent, TestChipsLabelAndSuffixComponent]
+ }).compileComponents();
+ }));
+
+ describe('Rendering Tests: ', () => {
+ beforeEach(() => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+ chipArea = fix.debugElement.queryAll(By.directive(IgxChipsAreaComponent));
+ });
+
+ it('should render chip area and chips inside it', () => {
+ expect(chipArea.length).toEqual(1);
+ expect(chipArea[0].nativeElement.children.length).toEqual(9);
+ expect(chipArea[0].nativeElement.children[0].tagName).toEqual('IGX-CHIP');
+ });
+
+ it('should render prefix element inside the chip before the content', () => {
+ const igxChip = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ const igxChipItem = igxChip[1].nativeElement;
+
+ expect(igxChipItem.children[0].children[0].children[0].hasAttribute('igxprefix')).toEqual(true);
+ });
+
+ it('should render remove button when enabled after the content inside the chip', () => {
+ const igxChip = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ const igxChipItem = igxChip[1].nativeElement;
+ const chipRemoveButton = ControlsFunction.getChipRemoveButton(igxChipItem);
+
+ expect(igxChipItem.children[0].children[2].children[0]).toHaveClass('igx-chip__remove');
+ expect(chipRemoveButton).toBeTruthy();
+ });
+
+ it('should change chip variant', () => {
+ const fixture = TestBed.createComponent(IgxChipComponent);
+ const igxChip = fixture.componentInstance;
+ // For test fixture destroy
+ igxChip.id = "root1";
+
+ igxChip.variant = 'danger';
+
+ fixture.detectChanges();
+
+ expect(igxChip.variant).toMatch('danger');
+ expect(igxChip.nativeElement).toHaveClass('igx-chip--danger');
+ });
+
+ it('should set text in chips correctly', () => {
+ const chipElements = chipArea[0].queryAll(By.directive(IgxChipComponent));
+ const firstChipTextElement = chipElements[0].queryAllNodes(By.css(`.${CHIP_TEXT_CLASS}`));
+ const firstChipText = firstChipTextElement[0].nativeNode.innerHTML;
+
+ expect(firstChipText).toContain('Country');
+
+ const secondChipTextElement = chipElements[1].queryAllNodes(By.css(`.${CHIP_TEXT_CLASS}`));
+ const secondChipText = secondChipTextElement[0].nativeNode.innerHTML;
+
+ expect(secondChipText).toContain('City');
+ });
+
+ it('should set chips prefix correctly', () => {
+ const chipElements = chipArea[0].queryAll(By.directive(IgxChipComponent));
+ const firstChipPrefix = chipElements[0].queryAll(By.directive(IgxPrefixDirective));
+ const firstChipIconName = firstChipPrefix[0].nativeElement.textContent;
+
+ expect(firstChipIconName).toContain('drag_indicator');
+ });
+
+ it('should set correctly color of chip when color is set through code', () => {
+ const chipColor = 'rgb(255, 0, 0)';
+
+ const components = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ const firstComponent = components[0];
+ const chipAreaElem = firstComponent.queryAll(By.css(`.${CHIP_ITEM_CLASS}`))[0];
+
+ firstComponent.componentInstance.color = chipColor;
+
+ expect(chipAreaElem.nativeElement.style.backgroundColor).toEqual(chipColor);
+ expect(firstComponent.componentInstance.color).toEqual(chipColor);
+ });
+
+ it('should apply correct tabIndex to the chip area only when tabIndex is set as property of the chip and chip is disabled', () => {
+ const firstTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[4];
+ expect(firstTabChip.nativeElement.getAttribute('tabindex')).toEqual('1');
+
+ // Chip is disabled, but attribute tabindex has bigger priority.
+ const secondTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[5];
+ expect(secondTabChip.nativeElement.getAttribute('tabindex')).toEqual('2');
+ });
+
+ it('should apply correct tab indexes when tabIndex and removeTabIndex are set as inputs', () => {
+ const thirdTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[6];
+ const deleteBtn = ControlsFunction.getChipRemoveButton(thirdTabChip.componentInstance.chipArea.nativeElement);
+ expect(thirdTabChip.nativeElement.getAttribute('tabindex')).toEqual('3');
+ expect(deleteBtn.getAttribute('tabindex')).toEqual('3');
+
+ // tabIndex attribute has higher priority than tabIndex.
+ const fourthTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[7];
+ expect(fourthTabChip.nativeElement.getAttribute('tabindex')).toEqual('1');
+
+ // tabIndex attribute has higher priority than tabIndex input and chip being disabled.
+ const fifthTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[8];
+ expect(fifthTabChip.nativeElement.getAttribute('tabindex')).toEqual('1');
+ });
+ });
+
+ describe('Interactions Tests: ', () => {
+ beforeEach(() => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+ });
+
+ it('should not trigger remove event when delete button is pressed when not removable', () => {
+ const firstChipComp = fix.componentInstance.chips.toArray()[0];
+
+ spyOn(firstChipComp.remove, 'emit');
+ UIInteractions.triggerKeyDownEvtUponElem('Delete', firstChipComp.chipArea.nativeElement, true);
+ fix.detectChanges();
+
+ expect(firstChipComp.remove.emit).not.toHaveBeenCalled();
+ });
+
+ it('should trigger remove event when delete button is pressed when removable', () => {
+ const secondChipComp = fix.componentInstance.chips.toArray()[1];
+
+ spyOn(secondChipComp.remove, 'emit');
+ UIInteractions.triggerKeyDownEvtUponElem('Delete', secondChipComp.chipArea.nativeElement, true);
+ fix.detectChanges();
+
+ expect(secondChipComp.remove.emit).toHaveBeenCalled();
+ });
+
+ it('should delete chip when space button is pressed on delete button', () => {
+ HelperTestFunctions.verifyChipsCount(fix, 9);
+ const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ const deleteButtonElement = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
+ // Removes chip with id City, because country chip is unremovable
+ UIInteractions.triggerKeyDownEvtUponElem(' ', deleteButtonElement, true);
+ fix.detectChanges();
+
+ HelperTestFunctions.verifyChipsCount(fix, 8);
+
+ const chipComponentsIds = fix.componentInstance.chipList.map(c => c.id);
+ expect(chipComponentsIds.length).toEqual(3);
+ expect(chipComponentsIds).not.toContain('City');
+ });
+
+ it('should delete chip when enter button is pressed on delete button', () => {
+ HelperTestFunctions.verifyChipsCount(fix, 9);
+
+ const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ const deleteButtonElement = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
+ // Removes chip with id City, because country chip is unremovable
+ UIInteractions.triggerKeyDownEvtUponElem('Enter', deleteButtonElement, true);
+ fix.detectChanges();
+
+ HelperTestFunctions.verifyChipsCount(fix, 8);
+
+ const chipComponentsIds = fix.componentInstance.chipList.map(c => c.id);
+ expect(chipComponentsIds.length).toEqual(3);
+ expect(chipComponentsIds).not.toContain('City');
+ });
+
+ it('should affect the ghostElement size when chip has it set to compact', () => {
+ const thirdChip = fix.componentInstance.chips.toArray()[2];
+ const thirdChipElem = thirdChip.chipArea.nativeElement;
+
+ const startingTop = thirdChipElem.getBoundingClientRect().top;
+ const startingLeft = thirdChipElem.getBoundingClientRect().left;
+ const startingBottom = thirdChipElem.getBoundingClientRect().bottom;
+ const startingRight = thirdChipElem.getBoundingClientRect().right;
+
+ const startingX = (startingLeft + startingRight) / 2;
+ const startingY = (startingTop + startingBottom) / 2;
+
+ UIInteractions.simulatePointerEvent('pointerdown', thirdChipElem, startingX, startingY);
+ fix.detectChanges();
+
+ UIInteractions.simulatePointerEvent('pointermove', thirdChipElem, startingX + 10, startingY + 10);
+ fix.detectChanges();
+
+ expect(getComponentSize(thirdChip.dragDirective.ghostElement)).toEqual('1');
+ });
+
+ it('should fire selectedChanging event when selectable is true', () => {
+ const secondChipComp = fix.componentInstance.chips.toArray()[1];
+ spyOn(secondChipComp.selectedChanging, 'emit');
+ spyOn(secondChipComp.selectedChanged, 'emit');
+
+ UIInteractions.triggerKeyDownEvtUponElem(' ', secondChipComp.chipArea.nativeElement, true);
+ fix.detectChanges();
+ expect(secondChipComp.selectedChanging.emit).toHaveBeenCalled();
+ expect(secondChipComp.selectedChanged.emit).toHaveBeenCalled();
+ expect(secondChipComp.selectedChanging.emit).not.toHaveBeenCalledWith({
+ originalEvent: null,
+ owner: secondChipComp,
+ cancel: false,
+ selected: true
+ });
+
+ expect(secondChipComp.selectedChanging.emit).toHaveBeenCalledWith({
+ originalEvent: jasmine.anything(),
+ owner: secondChipComp,
+ cancel: false,
+ selected: true
+ });
+ });
+
+ it('should fire selectedChanged event when selectable is true', (async () => {
+ pending('This should be tested in the e2e test');
+ const secondChipComp: IgxChipComponent = fix.componentInstance.chips.toArray()[1];
+
+ spyOn(secondChipComp.selectedChanging, 'emit');
+ spyOn(secondChipComp.selectedChanged, 'emit');
+ secondChipComp.chipArea.nativeElement.focus();
+
+ UIInteractions.triggerKeyDownEvtUponElem(' ', secondChipComp.chipArea.nativeElement, true);
+ fix.detectChanges();
+ expect(secondChipComp.selectedChanging.emit).toHaveBeenCalled();
+ expect(secondChipComp.selectedChanged.emit).not.toHaveBeenCalled();
+ expect(secondChipComp.selectedChanging.emit).not.toHaveBeenCalledWith({
+ originalEvent: null,
+ owner: secondChipComp,
+ cancel: false,
+ selected: true
+ });
+
+ await wait(400);
+ expect(secondChipComp.selectedChanged.emit).toHaveBeenCalledTimes(1);
+ expect(secondChipComp.selectedChanged.emit).not.toHaveBeenCalledWith({
+ originalEvent: null,
+ owner: secondChipComp
+ });
+ }));
+
+ it('should not fire selectedChanging event when selectable is false', () => {
+ const firstChipComp: IgxChipComponent = fix.componentInstance.chips.toArray()[0];
+
+ spyOn(firstChipComp.selectedChanging, 'emit');
+ spyOn(firstChipComp.selectedChanged, 'emit');
+ firstChipComp.nativeElement.focus();
+
+ UIInteractions.triggerKeyDownEvtUponElem(' ', firstChipComp.chipArea.nativeElement, true);
+ fix.detectChanges();
+ expect(firstChipComp.selectedChanging.emit).toHaveBeenCalledTimes(0);
+ expect(firstChipComp.selectedChanged.emit).toHaveBeenCalledTimes(0);
+ });
+
+ it('should not fire selectedChanging event when the remove button is clicked', () => {
+ const secondChipComp: IgxChipComponent = fix.componentInstance.chips.toArray()[1];
+
+ spyOn(secondChipComp.selectedChanging, 'emit');
+ spyOn(secondChipComp.selectedChanged, 'emit');
+
+ const chipRemoveButton = ControlsFunction.getChipRemoveButton(secondChipComp.chipArea.nativeElement);
+
+ const removeBtnTop = chipRemoveButton.getBoundingClientRect().top;
+ const removeBtnLeft = chipRemoveButton.getBoundingClientRect().left;
+
+ UIInteractions.simulatePointerEvent('pointerdown', chipRemoveButton, removeBtnLeft, removeBtnTop);
+ fix.detectChanges();
+ UIInteractions.simulatePointerEvent('pointerup', chipRemoveButton, removeBtnLeft, removeBtnTop);
+ fix.detectChanges();
+
+ expect(secondChipComp.selectedChanging.emit).not.toHaveBeenCalled();
+ expect(secondChipComp.selectedChanged.emit).not.toHaveBeenCalled();
+ // console.log('id', secondChipComp.id);
+ });
+ });
+
+ describe('Chips Label Tests: ', () => {
+ beforeEach(() => {
+ fix = TestBed.createComponent(TestChipsLabelAndSuffixComponent);
+ fix.detectChanges();
+ chipArea = fix.debugElement.queryAll(By.directive(IgxChipsAreaComponent));
+ });
+
+ it('should set chips label correctly', () => {
+ const chipElements = chipArea[0].queryAll(By.directive(IgxChipComponent));
+ const firstChipLabel = chipElements[0].queryAll(By.directive(IgxLabelDirective));
+ const firstChipLabelText = firstChipLabel[0].nativeElement.innerHTML;
+
+ expect(firstChipLabelText).toEqual('label');
+ });
+
+ it('should set chips suffix correctly', () => {
+ const chipElements = chipArea[0].queryAll(By.directive(IgxChipComponent));
+ const firstChipSuffix = chipElements[0].queryAll(By.directive(IgxSuffixDirective));
+ const firstChipSuffixText = firstChipSuffix[0].nativeElement.innerHTML;
+
+ expect(firstChipSuffixText).toEqual('suf');
+ });
+ });
+});
+
+class HelperTestFunctions {
+ public static verifyChipsCount(fix, count) {
+ const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ expect(chipComponents.length).toEqual(count);
+ }
+}
diff --git a/projects/igniteui-angular/chips/src/chips/chips-area.component.html b/projects/igniteui-angular/chips/src/chips/chips-area.component.html
new file mode 100644
index 00000000000..6dbc7430638
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/chips-area.component.html
@@ -0,0 +1 @@
+
+ *
+ * {{chip.text}}
+ *
+ *
+ * ```
+ */
+@Component({
+ selector: 'igx-chips-area',
+ templateUrl: 'chips-area.component.html',
+ standalone: true
+})
+export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy {
+ public cdr = inject(ChangeDetectorRef);
+ public element = inject(ElementRef);
+ private _iterableDiffers = inject(IterableDiffers);
+
+
+ /**
+ * Returns the `role` attribute of the chips area.
+ *
+ * @example
+ * ```typescript
+ * let chipsAreaRole = this.chipsArea.role;
+ * ```
+ */
+ @HostBinding('attr.role')
+ public role = 'listbox';
+
+ /**
+ * Returns the `aria-label` attribute of the chips area.
+ *
+ * @example
+ * ```typescript
+ * let ariaLabel = this.chipsArea.ariaLabel;
+ * ```
+ *
+ */
+ @HostBinding('attr.aria-label')
+ public ariaLabel = 'chip area';
+
+ /**
+ * Sets the width of the `IgxChipsAreaComponent`.
+ *
+ * @example
+ * ```html
+ * ();
+
+ /**
+ * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is selected/deselected.
+ * Fired after the chips area is initialized if there are initially selected chips as well.
+ * Returns an array of selected `IgxChipComponent`s and the `IgxChipAreaComponent`.
+ *
+ * @example
+ * ```html
+ * ();
+
+ /**
+ * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved.
+ *
+ * @example
+ * ```html
+ * ();
+
+ /**
+ * Emits an event after an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved.
+ *
+ * @example
+ * ```html
+ * ();
+
+ /**
+ * Holds the `IgxChipComponent` in the `IgxChipsAreaComponent`.
+ *
+ * @example
+ * ```typescript
+ * ngAfterViewInit(){
+ * let chips = this.chipsArea.chipsList;
+ * }
+ * ```
+ */
+ @ContentChildren(IgxChipComponent, { descendants: true })
+ public chipsList: QueryList;
+
+ protected destroy$ = new Subject();
+
+ @HostBinding('class')
+ protected hostClass = 'igx-chip-area';
+
+ private modifiedChipsArray: IgxChipComponent[];
+ private _differ: IterableDiffer | null = null;
+
+ constructor() {
+ this._differ = this._iterableDiffers.find([]).create(null);
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public ngAfterViewInit() {
+ // If we have initially selected chips through their inputs, we need to get them, because we cannot listen to their events yet.
+ if (this.chipsList.length) {
+ const selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected);
+ if (selectedChips.length) {
+ this.selectionChange.emit({
+ originalEvent: null,
+ newSelection: selectedChips,
+ owner: this
+ });
+ }
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public ngDoCheck(): void {
+ if (this.chipsList) {
+ const changes = this._differ.diff(this.chipsList.toArray());
+ if (changes) {
+ changes.forEachAddedItem((addedChip) => {
+ addedChip.item.moveStart.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
+ this.onChipMoveStart(args);
+ });
+ addedChip.item.moveEnd.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
+ this.onChipMoveEnd(args);
+ });
+ addedChip.item.dragEnter.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
+ this.onChipDragEnter(args);
+ });
+ addedChip.item.keyDown.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
+ this.onChipKeyDown(args);
+ });
+ if (addedChip.item.selectable) {
+ addedChip.item.selectedChanging.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
+ this.onChipSelectionChange(args);
+ });
+ }
+ });
+ this.modifiedChipsArray = this.chipsList.toArray();
+ }
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ public ngOnDestroy(): void {
+ this.destroy$.next(true);
+ this.destroy$.complete();
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ protected onChipKeyDown(event: IChipKeyDownEventArgs) {
+ let orderChanged = false;
+ const chipsArray = this.chipsList.toArray();
+ const dragChipIndex = chipsArray.findIndex((el) => el === event.owner);
+ if (event.originalEvent.shiftKey === true) {
+ if (event.originalEvent.key === 'ArrowLeft' || event.originalEvent.key === 'Left') {
+ orderChanged = this.positionChipAtIndex(dragChipIndex, dragChipIndex - 1, false, event.originalEvent);
+ if (orderChanged) {
+ setTimeout(() => {
+ this.chipsList.get(dragChipIndex - 1).nativeElement.focus();
+ });
+ }
+ } else if (event.originalEvent.key === 'ArrowRight' || event.originalEvent.key === 'Right') {
+ orderChanged = this.positionChipAtIndex(dragChipIndex, dragChipIndex + 1, true, event.originalEvent);
+ }
+ } else {
+ if ((event.originalEvent.key === 'ArrowLeft' || event.originalEvent.key === 'Left') && dragChipIndex > 0) {
+ chipsArray[dragChipIndex - 1].nativeElement.focus();
+ } else if ((event.originalEvent.key === 'ArrowRight' || event.originalEvent.key === 'Right') &&
+ dragChipIndex < chipsArray.length - 1) {
+ chipsArray[dragChipIndex + 1].nativeElement.focus();
+ }
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ protected onChipMoveStart(event: IBaseChipEventArgs) {
+ this.moveStart.emit({
+ originalEvent: event.originalEvent,
+ owner: this
+ });
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ protected onChipMoveEnd(event: IBaseChipEventArgs) {
+ this.moveEnd.emit({
+ originalEvent: event.originalEvent,
+ owner: this
+ });
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ protected onChipDragEnter(event: IChipEnterDragAreaEventArgs) {
+ const dropChipIndex = this.chipsList.toArray().findIndex((el) => el === event.owner);
+ const dragChipIndex = this.chipsList.toArray().findIndex((el) => el === event.dragChip);
+ if (dragChipIndex < dropChipIndex) {
+ // from the left to right
+ this.positionChipAtIndex(dragChipIndex, dropChipIndex, true, event.originalEvent);
+ } else {
+ // from the right to left
+ this.positionChipAtIndex(dragChipIndex, dropChipIndex, false, event.originalEvent);
+ }
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ protected positionChipAtIndex(chipIndex, targetIndex, shiftRestLeft, originalEvent) {
+ if (chipIndex < 0 || this.chipsList.length <= chipIndex ||
+ targetIndex < 0 || this.chipsList.length <= targetIndex) {
+ return false;
+ }
+
+ const chipsArray = this.chipsList.toArray();
+ const result: IgxChipComponent[] = [];
+ for (let i = 0; i < chipsArray.length; i++) {
+ if (shiftRestLeft) {
+ if (chipIndex <= i && i < targetIndex) {
+ result.push(chipsArray[i + 1]);
+ } else if (i === targetIndex) {
+ result.push(chipsArray[chipIndex]);
+ } else {
+ result.push(chipsArray[i]);
+ }
+ } else {
+ if (targetIndex < i && i <= chipIndex) {
+ result.push(chipsArray[i - 1]);
+ } else if (i === targetIndex) {
+ result.push(chipsArray[chipIndex]);
+ } else {
+ result.push(chipsArray[i]);
+ }
+ }
+ }
+ this.modifiedChipsArray = result;
+
+ const eventData: IChipsAreaReorderEventArgs = {
+ chipsArray: this.modifiedChipsArray,
+ originalEvent,
+ owner: this
+ };
+ this.reorder.emit(eventData);
+ return true;
+ }
+
+ /**
+ * @hidden
+ * @internal
+ */
+ protected onChipSelectionChange(event: IChipSelectEventArgs) {
+ let selectedChips = this.chipsList.filter((chip) => chip.selected);
+ if (event.selected && !selectedChips.includes(event.owner)) {
+ selectedChips.push(event.owner);
+ } else if (!event.selected && selectedChips.includes(event.owner)) {
+ selectedChips = selectedChips.filter((chip) => chip.id !== event.owner.id);
+ }
+ this.selectionChange.emit({
+ originalEvent: event.originalEvent,
+ newSelection: selectedChips,
+ owner: this
+ });
+ }
+}
diff --git a/projects/igniteui-angular/chips/src/chips/chips-area.spec.ts b/projects/igniteui-angular/chips/src/chips/chips-area.spec.ts
new file mode 100644
index 00000000000..75cd1090f56
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/chips-area.spec.ts
@@ -0,0 +1,650 @@
+import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef, inject } from '@angular/core';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { IgxChipComponent } from './chip.component';
+import { IgxChipsAreaComponent } from './chips-area.component';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxPrefixDirective } from 'igniteui-angular/input-group';
+import { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interactions.spec';
+
+
+@Component({
+ template: `
+
+ @for (chip of chipList; track chip.id) {
+
+ drag_indicator
+ {{chip.text}}
+
+ }
+
+ `,
+ imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+})
+class TestChipComponent {
+ public cdr = inject(ChangeDetectorRef);
+
+ @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true })
+ public chipsArea: IgxChipsAreaComponent;
+
+ @ViewChildren('chipElem', { read: IgxChipComponent })
+ public chips: QueryList;
+
+ public chipList = [
+ { id: 'Country', text: 'Country', removable: false, selectable: false, draggable: false },
+ { id: 'City', text: 'City', removable: true, selectable: true, draggable: true }
+ ];
+}
+
+@Component({
+ template: `
+
+
+ first chip
+
+
+ second chip
+
+
+ third chip
+
+
+ `,
+ imports: [IgxChipsAreaComponent, IgxChipComponent]
+})
+class TestChipSelectComponent extends TestChipComponent {
+}
+
+@Component({
+ template: `
+
+ @for (chip of chipList; track chip.id) {
+
+ drag_indicator
+ {{chip.text}}
+
+ }
+
+ `,
+ imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+})
+class TestChipReorderComponent {
+ public cdr = inject(ChangeDetectorRef);
+
+ @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true })
+ public chipsArea: IgxChipsAreaComponent;
+
+ @ViewChildren('chipElem', { read: IgxChipComponent })
+ public chips: QueryList;
+
+ public chipList = [
+ { id: 'Country', text: 'Country' },
+ { id: 'City', text: 'City' },
+ { id: 'Town', text: 'Town' },
+ { id: 'FirstName', text: 'First Name' },
+ ];
+
+ public chipsOrderChanged(event) {
+ const newChipList = [];
+ for (const chip of event.chipsArray) {
+ newChipList.push(this.chipList.find((item) => item.id === chip.id));
+ }
+ this.chipList = newChipList;
+ }
+
+ public chipRemoved(event) {
+ this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
+ this.chipsArea.cdr.detectChanges();
+ }
+}
+
+
+describe('IgxChipsArea ', () => {
+ const CHIP_REMOVE_BUTTON = 'igx-chip__remove';
+ const CHIP_AREA_CLASS = 'igx-chip-area';
+
+ let fix;
+ let chipArea: IgxChipsAreaComponent;
+ let chipAreaElement;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ TestChipComponent,
+ TestChipReorderComponent,
+ TestChipSelectComponent
+ ]
+ }).compileComponents();
+ }));
+
+ describe('Basic', () => {
+ beforeEach(() => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+ chipAreaElement = fix.debugElement.query(By.directive(IgxChipsAreaComponent));
+ });
+
+ it('should add chips when adding data items ', () => {
+ expect(chipAreaElement.nativeElement.classList).toEqual(jasmine.arrayWithExactContents(['customClass', CHIP_AREA_CLASS]));
+ expect(chipAreaElement.nativeElement.children.length).toEqual(2);
+
+ fix.componentInstance.chipList.push({ id: 'Town', text: 'Town', removable: true, selectable: true, draggable: true });
+
+ fix.detectChanges();
+
+ expect(chipAreaElement.nativeElement.children.length).toEqual(3);
+ });
+
+ it('should remove chips when removing data items ', () => {
+ expect(chipAreaElement.nativeElement.children.length).toEqual(2);
+
+ fix.componentInstance.chipList.pop();
+ fix.detectChanges();
+
+ expect(chipAreaElement.nativeElement.children.length).toEqual(1);
+ });
+
+ it('should change data in chips when data item is changed', () => {
+ expect(chipAreaElement.nativeElement.children[0].innerHTML).toContain('Country');
+
+ fix.componentInstance.chipList[0].text = 'New text';
+ fix.detectChanges();
+
+ expect(chipAreaElement.nativeElement.children[0].innerHTML).toContain('New text');
+ });
+ });
+
+
+ describe('Selection', () => {
+ const spaceKeyEvent = new KeyboardEvent('keydown', { key: ' ' });
+
+ it('should be able to select chip using input property', () => {
+ fix = TestBed.createComponent(TestChipSelectComponent);
+ fix.detectChanges();
+
+ const firstChipComp = fix.componentInstance.chips.toArray()[0];
+ const secondChipComp = fix.componentInstance.chips.toArray()[1];
+ const thirdChipComp = fix.componentInstance.chips.toArray()[2];
+
+ expect(firstChipComp.selected).toBe(true);
+ expect(secondChipComp.selected).toBe(true);
+ expect(thirdChipComp.selected).toBe(false);
+ });
+
+ it('should emit selectionChange for the chipArea event when there are initially selected chips through their inputs', () => {
+ fix = TestBed.createComponent(TestChipSelectComponent);
+ chipArea = fix.componentInstance.chipsArea;
+
+ spyOn(chipArea.selectionChange, 'emit');
+
+ fix.detectChanges();
+
+ const chipComponents = fix.componentInstance.chips.toArray();
+ expect(chipArea.selectionChange.emit).toHaveBeenCalledWith({
+ originalEvent: null,
+ owner: chipArea,
+ newSelection: [chipComponents[0], chipComponents[1]]
+ });
+ });
+
+ it('should focus on chip correctly', () => {
+ fix = TestBed.createComponent(TestChipSelectComponent);
+ fix.detectChanges();
+
+ const firstChipComp = fix.componentInstance.chips.toArray()[0];
+ const secondChipComp = fix.componentInstance.chips.toArray()[1];
+
+ firstChipComp.nativeElement.focus();
+ expect(document.activeElement).toBe(firstChipComp.nativeElement);
+
+ secondChipComp.nativeElement.focus();
+ expect(document.activeElement).toBe(secondChipComp.nativeElement);
+ });
+
+ it('should focus on previous and next chips after arrows are pressed', () => {
+ fix = TestBed.createComponent(TestChipSelectComponent);
+ fix.detectChanges();
+
+ const firstChipComp = fix.componentInstance.chips.toArray()[0];
+ const secondChipComp = fix.componentInstance.chips.toArray()[1];
+
+ firstChipComp.nativeElement.focus();
+ fix.detectChanges();
+
+ expect(document.activeElement).toBe(firstChipComp.nativeElement);
+
+ const rightKey = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+ firstChipComp.onChipKeyDown(rightKey);
+ fix.detectChanges();
+
+ expect(document.activeElement).toBe(secondChipComp.nativeElement);
+
+ const leftKey = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+ secondChipComp.onChipKeyDown(leftKey);
+ fix.detectChanges();
+
+ expect(document.activeElement).toBe(firstChipComp.nativeElement);
+ });
+
+ it('should fire selectionChange event', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+ fix.componentInstance.cdr.detectChanges();
+
+ const secondChipComp: IgxChipComponent = fix.componentInstance.chips.toArray()[1];
+ const chipAreaComp: IgxChipsAreaComponent = fix.debugElement.query(By.directive(IgxChipsAreaComponent)).componentInstance;
+ spyOn(chipAreaComp.selectionChange, 'emit');
+
+ secondChipComp.onChipKeyDown(spaceKeyEvent);
+ fix.detectChanges();
+
+ expect(chipAreaComp.selectionChange.emit).toHaveBeenCalledWith({
+ originalEvent: spaceKeyEvent,
+ owner: chipAreaComp,
+ newSelection: [secondChipComp]
+ });
+
+ let chipsSelectionStates = fix.componentInstance.chips.toArray().filter(c => c.selected);
+ expect(chipsSelectionStates.length).toEqual(1);
+ expect(secondChipComp.selected).toBeTruthy();
+
+ secondChipComp.onChipKeyDown(spaceKeyEvent);
+ fix.detectChanges();
+
+ expect(chipAreaComp.selectionChange.emit).toHaveBeenCalledWith({
+ originalEvent: spaceKeyEvent,
+ owner: chipAreaComp,
+ newSelection: []
+ });
+
+ chipsSelectionStates = fix.componentInstance.chips.toArray().filter(c => c.selected);
+ expect(chipsSelectionStates.length).toEqual(0);
+ expect(secondChipComp.selected).not.toBeTruthy();
+ });
+
+ it('should be able to have multiple chips selected', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+
+ const chipAreaComponent = fix.componentInstance;
+
+ chipAreaComponent.chipList.push({ id: 'Town', text: 'Town', removable: true, selectable: true, draggable: true });
+ fix.detectChanges();
+
+ spyOn(chipAreaComponent.chipsArea.selectionChange, `emit`);
+ chipAreaComponent.chipsArea.chipsList.toArray()[1].selected = true;
+ fix.detectChanges();
+ chipAreaComponent.chipsArea.chipsList.toArray()[2].selected = true;
+ fix.detectChanges();
+
+ const secondChipComp = fix.componentInstance.chips.toArray()[1];
+ const thirdChipComp = fix.componentInstance.chips.toArray()[2];
+ expect(chipAreaComponent.chipsArea.selectionChange.emit).toHaveBeenCalledTimes(2);
+ expect(chipAreaComponent.chipsArea.selectionChange.emit).toHaveBeenCalledWith({
+ originalEvent: null,
+ owner: chipAreaComponent.chipsArea,
+ newSelection: [secondChipComp, thirdChipComp]
+ });
+ });
+
+ it('should be able to select chip using input property', () => {
+ fix = TestBed.createComponent(TestChipSelectComponent);
+ fix.detectChanges();
+
+ const firstChipComp = fix.componentInstance.chips.toArray()[0];
+ const secondChipComp = fix.componentInstance.chips.toArray()[1];
+ const thirdChipComp = fix.componentInstance.chips.toArray()[2];
+
+ expect(firstChipComp.selected).toBe(true);
+ expect(secondChipComp.selected).toBe(true);
+ expect(thirdChipComp.selected).toBe(false);
+ });
+
+ it('should emit onSelection for the chipArea event when there are initially selected chips through their inputs', () => {
+ fix = TestBed.createComponent(TestChipSelectComponent);
+ chipArea = fix.componentInstance.chipsArea;
+
+ spyOn(chipArea.selectionChange, 'emit');
+
+ fix.detectChanges();
+
+ const chipComponents = fix.componentInstance.chips.toArray();
+ expect(chipArea.selectionChange.emit).toHaveBeenCalledWith({
+ originalEvent: null,
+ owner: chipArea,
+ newSelection: [chipComponents[0], chipComponents[1]]
+ });
+ });
+
+ it('should be able to select chip using api when selectable is set to false', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+
+ const igxChip = fix.componentInstance.chipsArea.chipsList.toArray()[0];
+ const igxChipItem = igxChip.nativeElement.children[0]; // Return igx-chip__item
+
+ igxChip.selected = true;
+ fix.detectChanges();
+
+ expect(igxChip.selected).toBe(true);
+ expect(igxChipItem).toHaveClass(`igx-chip__item--selected`);
+ });
+
+ it('should fire only onSelection event for chip area when selecting a chip using spacebar', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+ fix.componentInstance.cdr.detectChanges();
+
+ chipArea = fix.componentInstance.chipsArea;
+ const secondChip = fix.componentInstance.chips.toArray()[1];
+
+ spyOn(chipArea.reorder, 'emit');
+ spyOn(chipArea.selectionChange, 'emit');
+ spyOn(chipArea.moveStart, 'emit');
+ spyOn(chipArea.moveEnd, 'emit');
+
+
+ secondChip.onChipKeyDown(spaceKeyEvent);
+ fix.detectChanges();
+
+ expect(chipArea.selectionChange.emit).toHaveBeenCalled();
+ expect(chipArea.reorder.emit).not.toHaveBeenCalled();
+ expect(chipArea.moveStart.emit).not.toHaveBeenCalled();
+ expect(chipArea.moveEnd.emit).not.toHaveBeenCalled();
+ });
+
+ it('should select a chip by clicking on it and emit onSelection event', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+
+ chipArea = fix.componentInstance.chipsArea;
+ const secondChip = fix.componentInstance.chips.toArray()[1];
+ const pointerUpEvt = new PointerEvent('pointerup');
+
+ spyOn(chipArea.selectionChange, 'emit');
+ fix.detectChanges();
+
+ secondChip.onChipDragClicked({
+ originalEvent: pointerUpEvt,
+ owner: secondChip.dragDirective,
+ pageX: 0, pageY: 0, startX: 0, startY: 0
+ });
+ fix.detectChanges();
+
+ expect(chipArea.selectionChange.emit).toHaveBeenCalled();
+ expect(chipArea.selectionChange.emit).not.toHaveBeenCalledWith({
+ originalEvent: pointerUpEvt,
+ owner: chipArea,
+ newSelection: [secondChip]
+ });
+ });
+
+ it('should persist selected state when it is dragged and dropped', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+
+ chipAreaElement = fix.debugElement.query(By.directive(IgxChipsAreaComponent));
+ const chipComponents = chipAreaElement.queryAll(By.directive(IgxChipComponent));
+ const secondChip = chipComponents[1].componentInstance;
+
+ secondChip.animateOnRelease = false;
+ secondChip.onChipKeyDown(spaceKeyEvent);
+
+ expect(secondChip.selected).toBeTruthy();
+ UIInteractions.moveDragDirective(fix, secondChip.dragDirective, 200, 100);
+
+ const firstChip = chipComponents[0].componentInstance;
+ expect(firstChip.selected).not.toBeTruthy();
+ expect(secondChip.selected).toBeTruthy();
+ });
+ });
+
+ describe('Reorder', () => {
+ const leftKeyEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft', shiftKey: true });
+ const rightKeyEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', shiftKey: true });
+ const deleteKeyEvent = new KeyboardEvent('keydown', { key: 'Delete' });
+
+ beforeEach(() => {
+ fix = TestBed.createComponent(TestChipReorderComponent);
+ fix.detectChanges();
+ fix.componentInstance.cdr.detectChanges();
+ });
+
+ it('should reorder chips when shift + leftarrow and shift + rightarrow is pressed', () => {
+ const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ const firstChipAreaElem = chipComponents[0].componentInstance.nativeElement;
+ const secondChipAreaElem = chipComponents[1].componentInstance.nativeElement;
+ const firstChipLeft = firstChipAreaElem.getBoundingClientRect().left;
+ const secondChipLeft = secondChipAreaElem.getBoundingClientRect().left;
+
+ firstChipAreaElem.dispatchEvent(rightKeyEvent);
+ fix.detectChanges();
+
+ let newFirstChipLeft = firstChipAreaElem.getBoundingClientRect().left;
+ let newSecondChipLeft = secondChipAreaElem.getBoundingClientRect().left;
+ expect(firstChipLeft).toBeLessThan(newFirstChipLeft);
+ expect(newSecondChipLeft).toBeLessThan(secondChipLeft);
+
+ firstChipAreaElem.dispatchEvent(leftKeyEvent);
+ fix.detectChanges();
+
+ newFirstChipLeft = firstChipAreaElem.getBoundingClientRect().left;
+ newSecondChipLeft = secondChipAreaElem.getBoundingClientRect().left;
+
+ expect(firstChipLeft).toEqual(newFirstChipLeft);
+ expect(newSecondChipLeft).toEqual(secondChipLeft);
+ });
+
+ it('should reorder chips and keeps focus when Shift + Left Arrow is pressed and Shift + Right Arrow is pressed twice',
+ (async () => {
+ chipArea = fix.componentInstance.chipsArea;
+ const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ const targetChip = chipComponents[2].componentInstance;
+ const targetChipElem = targetChip.nativeElement;
+
+ targetChipElem.focus();
+ fix.detectChanges();
+
+ expect(document.activeElement).toBe(targetChipElem);
+ expect(chipArea.chipsList.toArray()[2].id).toEqual('Town');
+ expect(chipArea.chipsList.toArray()[3].id).toEqual('FirstName');
+
+ targetChip.onChipKeyDown(rightKeyEvent);
+ fix.detectChanges();
+
+ expect(document.activeElement).toBe(targetChipElem);
+ expect(chipArea.chipsList.toArray()[2].id).toEqual('FirstName');
+ expect(chipArea.chipsList.toArray()[3].id).toEqual('Town');
+
+ targetChip.onChipKeyDown(leftKeyEvent);
+ fix.detectChanges();
+ await wait();
+
+ expect(document.activeElement).toBe(targetChipElem);
+ expect(chipArea.chipsList.toArray()[2].id).toEqual('Town');
+ expect(chipArea.chipsList.toArray()[3].id).toEqual('FirstName');
+
+ targetChip.onChipKeyDown(leftKeyEvent);
+ fix.detectChanges();
+ await wait();
+
+ expect(document.activeElement).toBe(targetChipElem);
+ expect(chipArea.chipsList.toArray()[2].id).toEqual('City');
+ expect(chipArea.chipsList.toArray()[3].id).toEqual('FirstName');
+ })
+ );
+
+ it('should not reorder chips for shift + leftarrow when the chip is going out of bounds', () => {
+ const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+
+ const firstChipAreaElem = chipComponents[0].componentInstance.chipArea.nativeElement;
+ const firstChipLeft = firstChipAreaElem.getBoundingClientRect().left;
+ firstChipAreaElem.dispatchEvent(leftKeyEvent);
+ fix.detectChanges();
+
+ const newFirstChipLeft = firstChipAreaElem.getBoundingClientRect().left;
+ expect(firstChipLeft).toEqual(newFirstChipLeft);
+ });
+
+ it('should not reorder chips for shift + rightarrow when the chip is going out of bounds', () => {
+ const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+
+ const lastChipAreaElem = chipComponents[chipComponents.length - 1].componentInstance.chipArea.nativeElement;
+ const lastChipLeft = lastChipAreaElem.getBoundingClientRect().left;
+ lastChipAreaElem.dispatchEvent(rightKeyEvent);
+ fix.detectChanges();
+
+ const newLastChipLeft = lastChipAreaElem.getBoundingClientRect().left;
+ expect(newLastChipLeft).toEqual(lastChipLeft);
+ });
+
+ it('should delete chip when delete key is pressed and chip is removable', () => {
+ let chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+
+ expect(chipComponents.length).toEqual(4);
+
+ const firstChipComp = chipComponents[0].componentInstance;
+ firstChipComp.onChipKeyDown(deleteKeyEvent);
+ fix.detectChanges();
+
+ chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ expect(chipComponents.length).toEqual(3);
+ });
+
+ it('should delete chip when delete button is clicked', () => {
+ let chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ expect(chipComponents.length).toEqual(4);
+
+ const deleteButtonElement = fix.debugElement.queryAll(By.css('.' + CHIP_REMOVE_BUTTON))[0];
+ deleteButtonElement.nativeElement.click();
+ fix.detectChanges();
+
+ chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+ expect(chipComponents.length).toEqual(3);
+ });
+
+ it('should not fire any event of the chip area when attempting deleting of a chip', () => {
+ chipArea = fix.componentInstance.chipsArea;
+ const secondChip = fix.componentInstance.chips.toArray()[1];
+
+ spyOn(chipArea.reorder, 'emit');
+ spyOn(chipArea.selectionChange, 'emit');
+ spyOn(chipArea.moveStart, 'emit');
+ spyOn(chipArea.moveEnd, 'emit');
+ spyOn(secondChip.remove, 'emit');
+
+ secondChip.onChipKeyDown(deleteKeyEvent);
+ fix.detectChanges();
+
+ expect(secondChip.remove.emit).toHaveBeenCalled();
+ expect(chipArea.reorder.emit).not.toHaveBeenCalled();
+ expect(chipArea.selectionChange.emit).not.toHaveBeenCalled();
+ expect(chipArea.moveStart.emit).not.toHaveBeenCalled();
+ expect(chipArea.moveEnd.emit).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Interaction', () => {
+ it('should not be able to drag and drop when chip is not draggable', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+
+ chipAreaElement = fix.debugElement.query(By.directive(IgxChipsAreaComponent));
+ const chipComponents = chipAreaElement.queryAll(By.directive(IgxChipComponent));
+ const firstChip = chipComponents[0].componentInstance;
+
+ UIInteractions.moveDragDirective(fix, firstChip.dragDirective, 50, 50, false);
+
+ expect(firstChip.dragDirective.ghostElement).toBeUndefined();
+ });
+
+ it('should be able to drag when chip is draggable', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+
+ chipAreaElement = fix.debugElement.query(By.directive(IgxChipsAreaComponent));
+ const chipComponents = chipAreaElement.queryAll(By.directive(IgxChipComponent));
+ const secondChip = chipComponents[1].componentInstance;
+ const secondChipElem = secondChip.chipArea.nativeElement;
+
+ const startingTop = secondChipElem.getBoundingClientRect().top;
+ const startingLeft = secondChipElem.getBoundingClientRect().left;
+
+ const xDragDifference = 200;
+ const yDragDifference = 100;
+ UIInteractions.moveDragDirective(fix, secondChip.dragDirective, xDragDifference, yDragDifference, false);
+
+ expect(secondChip.dragDirective.ghostElement).toBeTruthy();
+
+ const afterDragTop = secondChip.dragDirective.ghostElement.getBoundingClientRect().top;
+ const afterDragLeft = secondChip.dragDirective.ghostElement.getBoundingClientRect().left;
+ expect(afterDragTop - startingTop).toEqual(yDragDifference);
+ expect(afterDragLeft - startingLeft).toEqual(xDragDifference);
+ });
+
+ it('should fire correctly reorder event when element is dragged and dropped to the right', () => {
+ fix = TestBed.createComponent(TestChipReorderComponent);
+ fix.detectChanges();
+
+ chipAreaElement = fix.debugElement.query(By.directive(IgxChipsAreaComponent));
+
+ const chipComponents = chipAreaElement.queryAll(By.directive(IgxChipComponent));
+ const firstChip = chipComponents[0].componentInstance;
+ const secondChip = chipComponents[1].componentInstance;
+
+ firstChip.animateOnRelease = false;
+ secondChip.animateOnRelease = false;
+
+ const firstChipElem = firstChip.chipArea.nativeElement;
+ const secondChipElem = secondChip.chipArea.nativeElement;
+
+ const firstChipLeft = firstChipElem.getBoundingClientRect().left;
+ UIInteractions.moveDragDirective(fix, firstChip.dragDirective, 100, 0);
+
+ const afterDropSecondChipLeft = secondChipElem.getBoundingClientRect().left;
+ expect(afterDropSecondChipLeft).toEqual(firstChipLeft);
+
+ const afterDropFirstChipLeft = firstChipElem.getBoundingClientRect().left;
+ expect(afterDropFirstChipLeft).not.toEqual(firstChipLeft);
+ });
+
+ it('should fire correctly reorder event when element is dragged and dropped to the left', () => {
+ fix = TestBed.createComponent(TestChipReorderComponent);
+ fix.detectChanges();
+
+ chipAreaElement = fix.debugElement.query(By.directive(IgxChipsAreaComponent));
+ const chipComponents = chipAreaElement.queryAll(By.directive(IgxChipComponent));
+ const firstChip = chipComponents[0].componentInstance;
+ const secondChip = chipComponents[1].componentInstance;
+
+ firstChip.animateOnRelease = false;
+ secondChip.animateOnRelease = false;
+
+ const firstChipElem = firstChip.chipArea.nativeElement;
+ const secondChipElem = secondChip.chipArea.nativeElement;
+
+ const firstChipLeft = firstChipElem.getBoundingClientRect().left;
+ UIInteractions.moveDragDirective(fix, secondChip.dragDirective, -100, 0);
+
+ const afterDropSecondChipLeft = secondChipElem.getBoundingClientRect().left;
+ expect(afterDropSecondChipLeft).toEqual(firstChipLeft);
+
+ const afterDropFirstChipLeft = firstChipElem.getBoundingClientRect().left;
+ expect(afterDropFirstChipLeft).not.toEqual(firstChipLeft);
+ });
+
+ it('should fire chipClick event', () => {
+ fix = TestBed.createComponent(TestChipComponent);
+ fix.detectChanges();
+
+ const firstChipComp: IgxChipComponent = fix.componentInstance.chips.toArray()[1];
+ spyOn(firstChipComp.chipClick, 'emit');
+
+ UIInteractions.clickDragDirective(fix, firstChipComp.dragDirective);
+
+ expect(firstChipComp.chipClick.emit).toHaveBeenCalled();
+ });
+ });
+});
diff --git a/projects/igniteui-angular/chips/src/chips/chips.module.ts b/projects/igniteui-angular/chips/src/chips/chips.module.ts
new file mode 100644
index 00000000000..88e0c339e9a
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/chips.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IGX_CHIPS_DIRECTIVES } from './public_api';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ exports: [
+ ...IGX_CHIPS_DIRECTIVES
+ ],
+ imports: [
+ ...IGX_CHIPS_DIRECTIVES
+ ]
+})
+export class IgxChipsModule { }
diff --git a/projects/igniteui-angular/chips/src/chips/public_api.ts b/projects/igniteui-angular/chips/src/chips/public_api.ts
new file mode 100644
index 00000000000..c09118da6ae
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/public_api.ts
@@ -0,0 +1,14 @@
+import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
+import { IgxChipComponent } from './chip.component';
+import { IgxChipsAreaComponent } from './chips-area.component';
+
+export * from './chip.component';
+export * from './chips-area.component';
+
+/* NOTE: Chips directives collection for ease-of-use import in standalone components scenario */
+export const IGX_CHIPS_DIRECTIVES = [
+ IgxChipsAreaComponent,
+ IgxChipComponent,
+ IgxPrefixDirective,
+ IgxSuffixDirective
+] as const;
diff --git a/projects/igniteui-angular/chips/src/public_api.ts b/projects/igniteui-angular/chips/src/public_api.ts
new file mode 100644
index 00000000000..5e4fa766e79
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/public_api.ts
@@ -0,0 +1,2 @@
+export * from './chips/public_api';
+export * from './chips/chips.module';
diff --git a/projects/igniteui-angular/combo/README.md b/projects/igniteui-angular/combo/README.md
new file mode 100644
index 00000000000..d98765fcc4c
--- /dev/null
+++ b/projects/igniteui-angular/combo/README.md
@@ -0,0 +1,354 @@
+# igx-combo
+The igx-combo component provides a powerful input, combining the features of the basic HTML input, select and the IgniteUI for Angular igx-drop-down components.
+The combo component provides easy filtering and selection of multiple items, grouping and adding custom values to the dropdown list.
+Custom templates could be provided in order to customize different areas of the components, such as items, header, footer, etc.
+The combo component is integrated with the Template Driven and Reactive Forms.
+The igx-combo exposes intuitive keyboard navigation and it is accessibility compliant.
+Drop Down items are virtualized, which guarantees smooth work, even if the igx-combo is bound to data source with a lot of items.
+
+
+`igx-combo` is a component.
+A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.html)
+
+# Usage
+Basic usage of `igx-combo` bound to a local data source, defining `valueKey` and `displayKey`:
+
+```html
+
+
+
+ State: {{ display[key] }}
+ Region: {{ display.region }}
+
+
+
+```
+
+#### Defining group headers template:
+
+```html
+
+
+
+ Header for {{ headerItem[key] }}
+
+
+
+```
+
+#### Defining header template:
+
+```html
+
+
+ Custom header
+ ![]()
+
+
+```
+
+#### Defining footer template:
+
+```html
+
+
+
+ ![]()
+
+
+```
+
+#### Defining empty template:
+
+```html
+
+
+ List is empty
+
+
+```
+
+#### Defining add template:
+
+```html
+
+
+ Add town
+
+
+```
+
+#### Defining toggle icon template:
+
+```html
+
+
+ {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}
+
+
+```
+
+#### Defining toggle icon template:
+
+```html
+
+
+ clear
+
+
+```
+
+
+
+## Keyboard Navigation
+
+When igxCombo is closed and focused:
+- `ArrowDown` or `Alt` + `ArrowDown` will open the combo drop down and will move focus to the search input.
+
+When igxCombo is opened and search input is focused:
+- `ArrowUp` or `Alt` + `ArrowUp` will close the combo drop down and will move focus to the closed combo.
+- `ArrowDown` will move focus from the search input to the first list item.If list is empty and custom values are enabled will move it to the Add new item button.
+ > Note: Any other key stroke will be handled by the input.
+
+When igxCombo is opened and list item is focused:
+- `ArrowDown` will move to next list item. If the active item is the last one in the list and custom values are enabled then focus will be moved to the Add item button.
+
+- `ArrowUp` will move to previous list item. If the active item is the first one in the list then focus will be moved back to the search input.
+
+- `End` will move to last list item.
+
+- `Home` will move to first list item.
+
+- `Space` will select/deselect active list item.
+
+- `Enter` will confirm the already selected items and will close the list.
+
+- `Esc` will close the list.
+
+When igxCombo is opened, allow custom values are enabled and add item button is focused:
+
+- `Enter` will add new item with valueKey and displayKey equal to the text in the search input and will select the new item.
+
+- `ArrowUp` focus will be moved back to the last list item or if list is empty will be moved to the search input.
+
+## API
+
+### Inputs
+
+| Name | Description | Type |
+|-----------------------|---------------------------------------------------|-----------------------------|
+| `id` | combo id | string |
+| `data` | combo data source | any[] |
+| `allowCustomValue` | enables/disables combo custom value | boolean |
+| `filterable` | enables/disables combo drop down filtering - enabled by default | boolean |
+| `showSearchCaseIcon` | defines whether the search case-sensitive icon should be displayed - disabled by default | boolean |
+| `valueKey` | combo value data source property | string |
+| `displayKey` | combo display data source property | string |
+| `groupKey` | combo item group | string |
+| `virtualizationState` | defines the current state of the virtualized data. It contains `startIndex` and `chunkSize` | `IForOfState` |
+| `totalItemCount` | total count of the virtual data items, when using remote service | number |
+| `width ` | defines combo width | string |
+| `itemsMaxHeight ` | defines drop down maximum height | number |
+| `itemsWidth ` | defines drop down width | string |
+| `itemHeight ` | defines drop down item height | number |
+| `placeholder ` | defines the "empty value" text | string |
+| `searchPlaceholder ` | defines the placeholder text for search input | string |
+| `collapsed` | gets drop down state | boolean |
+| `disabled` | defines whether the control is active or not | boolean |
+| `ariaLabelledBy` | defines label ID related to combo | boolean |
+| `type` | Combo style. - "line", "box", "border", "search" | string |
+| `valid` | gets if control is valid, when used in a form | boolean |
+| `overlaySettings` | gets/sets the custom overlay settings that control how the drop-down list displays | OverlaySettings |
+| `autoFocusSearch` | controls whether the search input should be focused when the combo is opened | boolean |
+| `filteringOptions` | Configures the way combo items will be filtered | IComboFilteringOptions |
+| `filterFunction` | Gets/Sets the custom filtering function of the combo | `(collection: any[], searchValue: any, caseSensitive: boolean) => any[]` |
+
+### Getters
+| Name | Description | Type |
+|--------------------------|---------------------------------------------------|-----------------------------|
+| `displayValue` | the value of the combo text field | string |
+| `value` | the value of the combo | any[] |
+| `selection` | the selected items of the combo | any[] |
+
+### Outputs
+
+| Name | Description | Cancelable | Emitted with |
+|---------------------|-------------------------------------------------------------------------|--------------|-----------------------------------|
+| `selectionChanging` | Emitted when item selection is changing, before the selection completes | true | `IComboSelectionChangingEventArgs` |
+| `searchInputUpdate` | Emitted when an the search input's input event is triggered | true | `IComboSearchInputEventArgs` |
+| `addition` | Emitted when an item is being added to the data collection | true | `IComboItemAdditionEvent` |
+| `dataPreLoad` | Emitted when new chunk of data is loaded from the virtualization | false | `IForOfState` |
+| `opening` | Emitted before the dropdown is opened | false | `IBaseCancelableBrowserEventArgs` |
+| `opened` | Emitted after the dropdown is opened | false | `IBaseEventArgs` |
+| `closing` | Emitted before the dropdown is closed | false | `IBaseCancelableBrowserEventArgs` |
+| `closed` | Emitted after the dropdown is closed | false | `IBaseEventArgs` |
+
+### Methods
+
+| Name | Description | Return type | Parameters |
+|--------------------|------------------------------------------|-------------|---------------------------------------------------------------|
+| `open` | Opens drop down | `void` | `None` |
+| `close` | Closes drop down | `void` | `None` |
+| `toggle` | Toggles drop down | `void` | `None` |
+| `selectedItems` | Get current selection state | `any[]` | `None` |
+| `select` | Select defined items | `void` | items: `any[]`, clearCurrentSelection: `boolean` |
+| `deselect` | Deselect defined items | `void` | items: `any[]` |
+| `selectAllItems` | Select all (filtered) items | `void` | ignoreFilter?: `boolean` - if `true` selects **all** values |
+| `deselectAllItems` | Deselect (filtered) all items | `void` | ignoreFilter?: `boolean` - if `true` deselects **all** values |
+| `selected` | Toggles (select/deselect) an item by key | `void` | itemID: any, select = true, event?: Event |
diff --git a/projects/igniteui-angular/combo/index.ts b/projects/igniteui-angular/combo/index.ts
new file mode 100644
index 00000000000..decc72d85bc
--- /dev/null
+++ b/projects/igniteui-angular/combo/index.ts
@@ -0,0 +1 @@
+export * from './src/public_api';
diff --git a/projects/igniteui-angular/combo/ng-package.json b/projects/igniteui-angular/combo/ng-package.json
new file mode 100644
index 00000000000..2c63c085104
--- /dev/null
+++ b/projects/igniteui-angular/combo/ng-package.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/projects/igniteui-angular/combo/src/combo/combo-add-item.component.ts b/projects/igniteui-angular/combo/src/combo/combo-add-item.component.ts
new file mode 100644
index 00000000000..cad1b5cf927
--- /dev/null
+++ b/projects/igniteui-angular/combo/src/combo/combo-add-item.component.ts
@@ -0,0 +1,28 @@
+import { IgxComboItemComponent } from './combo-item.component';
+import { Component, HostBinding } from '@angular/core';
+
+/**
+ * @hidden
+ */
+@Component({
+ selector: 'igx-combo-add-item',
+ template: '(IGX_COMBO_COMPONENT);
+ protected comboAPI = inject(IgxComboAPIService);
+
+ /** @hidden @internal */
+ @Input({ transform: booleanAttribute })
+ public singleMode = false;
+
+ /**
+ * @hidden
+ * @internal
+ */
+ @ContentChildren(IgxComboItemComponent, { descendants: true })
+ public override children: QueryList = null;
+
+ /** @hidden @internal */
+ public override get scrollContainer(): HTMLElement {
+ // TODO: Update, use public API if possible:
+ return this.virtDir.dc.location.nativeElement;
+ }
+
+ protected get isScrolledToLast(): boolean {
+ const scrollTop = this.virtDir.scrollPosition;
+ const scrollHeight = this.virtDir.getScroll().scrollHeight;
+ return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
+ }
+
+ protected get lastVisibleIndex(): number {
+ return this.combo.totalItemCount ?
+ Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :
+ this.items.length - 1;
+ }
+
+ protected get sortedChildren(): IgxDropDownItemBaseDirective[] {
+ if (this.children !== undefined) {
+ return this.children.toArray()
+ .sort((a: IgxDropDownItemBaseDirective, b: IgxDropDownItemBaseDirective) => a.index - b.index);
+ }
+ return null;
+ }
+
+ /**
+ * Get all non-header items
+ *
+ * ```typescript
+ * let myDropDownItems = this.dropdown.items;
+ * ```
+ */
+ public override get items(): IgxComboItemComponent[] {
+ const items: IgxComboItemComponent[] = [];
+ if (this.children !== undefined) {
+ const sortedChildren = this.sortedChildren as IgxComboItemComponent[];
+ for (const child of sortedChildren) {
+ if (!child.isHeader) {
+ items.push(child);
+ }
+ }
+ }
+
+ return items;
+ }
+
+ /**
+ * @hidden @internal
+ */
+ public onFocus() {
+ this.focusedItem = this._focusedItem || this.items[0];
+ this.combo.setActiveDescendant();
+ }
+
+ /**
+ * @hidden @internal
+ */
+ public onBlur(_evt?) {
+ this.focusedItem = null;
+ this.combo.setActiveDescendant();
+ }
+
+ /**
+ * @hidden @internal
+ */
+ public override onToggleOpened() {
+ this.opened.emit();
+ }
+
+ /**
+ * @hidden
+ */
+ public override navigateFirst() {
+ this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e?.isHeader));
+ this.combo.setActiveDescendant();
+ }
+
+ /**
+ * @hidden
+ */
+ public override navigatePrev() {
+ if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+ this.combo.focusSearchInput(false);
+ this.focusedItem = null;
+ } else {
+ super.navigatePrev();
+ }
+ this.combo.setActiveDescendant();
+ }
+
+
+ /**
+ * @hidden
+ */
+ public override navigateNext() {
+ const lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
+ if (this._focusedItem && this._focusedItem.index === lastIndex) {
+ this.focusAddItemButton();
+ } else {
+ super.navigateNext();
+ }
+ this.combo.setActiveDescendant();
+ }
+
+ /**
+ * @hidden @internal
+ */
+ public override selectItem(item: IgxDropDownItemBaseDirective) {
+ if (item === null || item === undefined) {
+ return;
+ }
+ this.comboAPI.set_selected_item(item.itemID);
+ this._focusedItem = item;
+ this.combo.setActiveDescendant();
+ }
+
+ /**
+ * @hidden @internal
+ */
+ public override updateScrollPosition() {
+ this.virtDir.getScroll().scrollTop = this._scrollPosition;
+ }
+
+ /**
+ * @hidden @internal
+ */
+ public override onItemActionKey(key: DropDownActionKey) {
+ switch (key) {
+ case DropDownActionKey.ENTER:
+ this.handleEnter();
+ break;
+ case DropDownActionKey.SPACE:
+ this.handleSpace();
+ break;
+ case DropDownActionKey.ESCAPE:
+ case DropDownActionKey.TAB:
+ this.close();
+ }
+ }
+
+ public override ngAfterViewInit() {
+ this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
+ }
+
+ /**
+ * @hidden @internal
+ */
+ public override ngOnDestroy(): void {
+ this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
+ super.ngOnDestroy();
+ }
+
+ protected override scrollToHiddenItem(_newItem: any): void { }
+
+ protected scrollHandler = () => {
+ this.comboAPI.disableTransitions = true;
+ };
+
+ private handleEnter() {
+ if (this.isAddItemFocused()) {
+ this.combo.addItemToCollection();
+ return;
+ }
+ if (this.singleMode && this.focusedItem) {
+ this.combo.select(this.focusedItem.itemID);
+ }
+
+ this.close();
+ }
+
+ private handleSpace() {
+ if (this.isAddItemFocused()) {
+ return;
+ } else {
+ this.selectItem(this.focusedItem);
+ }
+ }
+
+ private isAddItemFocused(): boolean {
+ return this.focusedItem instanceof IgxComboAddItemComponent;
+ }
+
+ private focusAddItemButton() {
+ if (this.combo.isAddButtonVisible()) {
+ this.focusedItem = this.items[this.items.length - 1];
+ }
+ }
+}
diff --git a/projects/igniteui-angular/combo/src/combo/combo-item.component.html b/projects/igniteui-angular/combo/src/combo/combo-item.component.html
new file mode 100644
index 00000000000..b467360ae0d
--- /dev/null
+++ b/projects/igniteui-angular/combo/src/combo/combo-item.component.html
@@ -0,0 +1,5 @@
+@if (!isHeader && !singleMode) {
+
+ ('IgxComboComponentToken');
+
+/** @hidden @internal TODO: Evaluate */
+export interface IgxComboBase {
+ id: string;
+ data: any[] | null;
+ valueKey: string;
+ groupKey: string;
+ isRemote: boolean;
+ filteredData: any[] | null;
+ totalItemCount: number;
+ itemsMaxHeight: number;
+ itemHeight: number;
+ searchValue: string;
+ searchInput: ElementRef;
+ comboInput: ElementRef;
+ opened: EventEmitter;
+ opening: EventEmitter;
+ closing: EventEmitter;
+ closed: EventEmitter;
+ focusSearchInput(opening?: boolean): void;
+ triggerCheck(): void;
+ addItemToCollection(): void;
+ isAddButtonVisible(): boolean;
+ handleInputChange(event?: string): void;
+ isItemSelected(itemID: any): boolean;
+ select(item: any): void;
+ select(itemIDs: any[], clearSelection?: boolean, event?: Event): void;
+ deselect(...args: [] | [itemIDs: any[], event?: Event]): void;
+ setActiveDescendant(): void;
+}
+
+let NEXT_ID = 0;
+
+
+/** @hidden @internal */
+export const enum DataTypes {
+ EMPTY = 'empty',
+ PRIMITIVE = 'primitive',
+ COMPLEX = 'complex',
+ PRIMARYKEY = 'valueKey'
+}
+
+/** The filtering criteria to be applied on data search */
+export interface IComboFilteringOptions {
+ /** Defines filtering case-sensitivity */
+ caseSensitive?: boolean;
+ /** Defines optional key to filter against complex list items. Default to displayKey if provided.*/
+ filteringKey?: string;
+}
+
+@Directive()
+export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewChecked, OnInit,
+ AfterViewInit, AfterContentChecked, OnDestroy, ControlValueAccessor {
+ protected elementRef = inject(ElementRef);
+ protected cdr = inject(ChangeDetectorRef);
+ protected selectionService = inject(IgxSelectionAPIService);
+ protected comboAPI = inject(IgxComboAPIService);
+ public document = inject(DOCUMENT);
+ protected _inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true });
+ protected _injector = inject(Injector, { optional: true });
+ protected _iconService = inject(IgxIconService, { optional: true });
+
+ /**
+ * Defines whether the caseSensitive icon should be shown in the search input
+ *
+ * ```typescript
+ * // get
+ * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+ * ```
+ *
+ * ```html
+ *
+ *
+ * ```
+ */
+ @Input()
+ public filterFunction: (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[];
+
+ /**
+ * Sets aria-labelledby attribute value.
+ * ```html
+ *
+ * ```
+ */
+ @Input()
+ public ariaLabelledBy: string;
+
+ /** @hidden @internal */
+ @HostBinding('class.igx-combo')
+ public cssClass = 'igx-combo'; // Independent of display density for the time being
+
+ /**
+ * Disables the combo. The default is `false`.
+ * ```html
+ *
+ * ```
+ */
+ @Input({ transform: booleanAttribute })
+ public disabled = false;
+
+ /**
+ * Sets the visual combo type.
+ * The allowed values are `line`, `box`, `border` and `search`. The default is `box`.
+ * ```html
+ *
+ * ```
+ */
+ @Input()
+ public get type(): IgxInputGroupType {
+ return this._type || this._inputGroupType || 'box';
+ }
+
+ public set type(val: IgxInputGroupType) {
+ this._type = val;
+ }
+
+ /**
+ * Gets/Sets the resource strings.
+ *
+ * @remarks
+ * By default it uses EN resources.
+ */
+ @Input()
+ public get resourceStrings(): IComboResourceStrings {
+ return this._resourceStrings;
+ }
+ public set resourceStrings(value: IComboResourceStrings) {
+ this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+ }
+
+ /**
+ * Emitted before the dropdown is opened
+ *
+ * ```html
+ * ();
+
+ /**
+ * Emitted after the dropdown is opened
+ *
+ * ```html
+ * ();
+
+ /**
+ * Emitted before the dropdown is closed
+ *
+ * ```html
+ * ();
+
+ /**
+ * Emitted after the dropdown is closed
+ *
+ * ```html
+ * ();
+
+ /**
+ * Emitted when an item is being added to the data collection
+ *
+ * ```html
+ * ();
+
+ /**
+ * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
+ *
+ * ```html
+ * ();
+
+ /**
+ * Emitted when new chunk of data is loaded from the virtualization
+ *
+ * ```html
+ * ();
+
+ /**
+ * The custom template, if any, that should be used when rendering ITEMS in the combo list
+ *
+ * ```typescript
+ * // Set in typescript
+ * const myCustomTemplate: TemplateRef = myComponent.customTemplate;
+ * myComponent.combo.itemTemplate = myCustomTemplate;
+ * ```
+ * ```html
+ *
+ *
+ * ...
+ *
+ *
+ *