Merge branch '18.2.x' into iminchev/add-coerceToInt-to-props-18.2.x

Author: ChronosSF

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -24,7 +24,6 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
 import { IgxToggleActionDirective } from '../directives/toggle/toggle.directive';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
-import { IgxButtonDirective } from '../directives/button/button.directive';
 import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
@@ -78,7 +77,6 @@ export class IgxActionStripMenuItemDirective {
         NgIf,
         NgFor,
         NgTemplateOutlet,
-        IgxButtonDirective,
         IgxIconButtonDirective,
         IgxRippleDirective,
         IgxToggleActionDirective,

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, TemplateRef, ViewChild, Output, EventEmitter, ElementRef, booleanAttribute } from '@angular/core';
 import { IgxIconComponent } from '../../icon/icon.component';
 import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
-import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { NgIf } from '@angular/common';
 import { IgxIconButtonDirective } from '../../directives/button/icon-button.directive';
 
@@ -12,7 +11,7 @@ import { IgxIconButtonDirective } from '../../directives/button/icon-button.dire
     selector: 'igx-grid-action-button',
     templateUrl: 'grid-action-button.component.html',
     standalone: true,
-    imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
+    imports: [NgIf, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
 })
 export class IgxGridActionButtonComponent {
 

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -13,7 +13,7 @@ import {
 	booleanAttribute,
     HostListener,
 } from '@angular/core';
-import { NgIf, NgTemplateOutlet, NgStyle, NgFor, DatePipe } from '@angular/common';
+import { NgIf, NgTemplateOutlet, NgFor, DatePipe } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -72,7 +72,7 @@ let NEXT_ID = 0;
 	selector: 'igx-calendar',
 	templateUrl: 'calendar.component.html',
 	standalone: true,
-	imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, NgStyle, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar],
+	imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar],
 })
 export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy {
     /**

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -9,7 +9,7 @@ import {
     OnDestroy,
     OnInit,
 } from "@angular/core";
-import { NgIf, NgStyle, NgTemplateOutlet, DatePipe } from "@angular/common";
+import { NgIf, NgTemplateOutlet, DatePipe } from "@angular/common";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { IgxMonthsViewComponent } from "../months-view/months-view.component";
@@ -40,7 +40,6 @@ let NEXT_ID = 0;
     standalone: true,
     imports: [
         NgIf,
-        NgStyle,
         NgTemplateOutlet,
         DatePipe,
         IgxIconComponent,

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html

@@ -12,6 +12,7 @@
         [date]="date"
         [showActive]="showActive"
         (itemSelection)="selectDate($event)"
+        (mousedown)="onMouseDown()"
     >
         <span class="igx-calendar-view__item-inner" aria-hidden="true">
             {{ formattedMonth(month).formatted | titlecase }}

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

@@ -7,7 +7,7 @@ import {
     Inject,
 } from "@angular/core";
 import { IgxCalendarMonthDirective } from "../calendar.directives";
-import { NgFor, TitleCasePipe, DatePipe } from "@angular/common";
+import { NgFor, TitleCasePipe } from "@angular/common";
 import {
     IgxCalendarViewDirective,
     DAY_INTERVAL_TOKEN,
@@ -34,7 +34,7 @@ let NEXT_ID = 0;
     selector: "igx-months-view",
     templateUrl: "months-view.component.html",
     standalone: true,
-    imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe, DatePipe],
+    imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe],
 })
 export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #standalone = true;
@@ -136,6 +136,15 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
         super(dayInterval);
     }
 
+    /**
+     * @hidden
+     */
+    protected onMouseDown() {
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+    }
+
     /**
      * Returns the locale representation of the month in the months view.
      *

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html

@@ -13,6 +13,7 @@
         [date]="date"
         [showActive]="showActive"
         (itemSelection)="selectDate($event)"
+        (mousedown)="onMouseDown()"
     >
         <span class="igx-calendar-view__item-inner" aria-hidden="true">
             {{ formattedYear(year).formatted }}

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts

@@ -155,4 +155,13 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
             year: this.yearFormat,
         });
     }
+
+    /**
+     * @hidden
+     */
+    protected onMouseDown() {
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+    }
 }

projects/igniteui-angular/src/lib/carousel/carousel-base.ts

@@ -1,9 +1,9 @@
 import { AnimationReferenceMetadata, useAnimation } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, Inject } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, Inject, InjectionToken } from '@angular/core';
 import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
 import { AnimationPlayer, AnimationService } from '../services/animation/animation';
 import { fadeIn, slideInLeft } from 'igniteui-angular/animations';
-import { CarouselAnimationType } from './enums';
+import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
 
 export enum Direction { NONE, NEXT, PREV }
 
@@ -12,6 +12,37 @@ export interface CarouselAnimationSettings {
     leaveAnimation: AnimationReferenceMetadata;
 }
 
+export interface ICarouselComponentBase {
+    id: string;
+    role: string;
+    cssClass: string;
+    loop: boolean;
+    pause: boolean;
+    navigation: boolean;
+    indicators: boolean;
+    vertical: boolean;
+    keyboardSupport: boolean;
+    gesturesSupport: boolean;
+    maximumIndicatorsCount: number;
+    indicatorsOrientation: CarouselIndicatorsOrientation;
+    animationType: CarouselAnimationType;
+    total: number;
+    current: number;
+    interval: number;
+    slideChanged: EventEmitter<any>;
+    slideAdded: EventEmitter<any>;
+    slideRemoved: EventEmitter<any>;
+    carouselPaused: EventEmitter<any>;
+    carouselPlaying: EventEmitter<any>;
+    next(): void;
+    prev(): void;
+    play(): void;
+    stop(): void
+}
+
+/** @hidden */
+export const IGX_CAROUSEL_COMPONENT = /*@__PURE__*/new InjectionToken<ICarouselComponentBase>('IgxCarouselToken');
+
 /** @hidden */
 export interface IgxSlideComponentBase {
     direction: Direction;

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -30,7 +30,7 @@ import { CarouselResourceStringsEN, ICarouselResourceStrings } from '../core/i18
 import { first, IBaseEventArgs, last, PlatformUtil } from '../core/utils';
 import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
 import { AnimationService } from '../services/animation/animation';
-import { Direction, IgxCarouselComponentBase } from './carousel-base';
+import { Direction, ICarouselComponentBase, IGX_CAROUSEL_COMPONENT, IgxCarouselComponentBase } from './carousel-base';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
 import { IgxSlideComponent } from './slide.component';
 import { IgxIconComponent } from '../icon/icon.component';
@@ -75,7 +75,8 @@ export class CarouselHammerConfig extends HammerGestureConfig {
         {
             provide: HAMMER_GESTURE_CONFIG,
             useClass: CarouselHammerConfig
-        }
+        },
+        { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
     ],
     selector: 'igx-carousel',
     templateUrl: 'carousel.component.html',
@@ -88,7 +89,7 @@ export class CarouselHammerConfig extends HammerGestureConfig {
     imports: [IgxButtonDirective, IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet]
 })
 
-export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit {
+export class IgxCarouselComponent extends IgxCarouselComponentBase implements ICarouselComponentBase, OnDestroy, AfterContentInit {
 
     /**
      * Sets the `id` of the carousel.