igniteui-angular 19.2.0-alpha.1 → 19.2.0-beta.0

package/lib/calendar/calendar.component.d.ts

@@ -317,8 +317,8 @@ export declare class IgxCalendarComponent extends IgxCalendarBaseDirective imple
     protected get activeDescendant(): number;
     protected set activeDescendant(date: Date);
     ngAfterViewInit(): void;
-    private onWrapperFocus;
-    private onWrapperBlur;
+    protected onWrapperFocus(_event: FocusEvent): void;
+    protected onWrapperBlur(_event: FocusEvent): void;
     private handleArrowKeydown;
     private handlePageUpDown;
     private handlePageUp;

package/lib/calendar/month-picker/month-picker.component.d.ts

@@ -112,8 +112,8 @@ export declare class IgxMonthPickerComponent extends IgxCalendarBaseDirective im
     get isDefaultView(): boolean;
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    private onWrapperFocus;
-    private onWrapperBlur;
+    protected onWrapperFocus(event: FocusEvent): void;
+    protected onWrapperBlur(event: FocusEvent): void;
     private handlePageUpDown;
     private handlePageUp;
     private handlePageDown;

package/lib/carousel/carousel-base.d.ts

@@ -1,7 +1,8 @@
 import { AnimationReferenceMetadata } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, InjectionToken } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
 import { AnimationPlayer, AnimationService } from '../services/animation/animation';
-import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
+import { CarouselAnimationType } from './enums';
+import * as i0 from "@angular/core";
 export declare enum Direction {
     NONE = 0,
     NEXT = 1,
@@ -11,42 +12,13 @@ export interface CarouselAnimationSettings {
     enterAnimation: AnimationReferenceMetadata;
     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 declare const IGX_CAROUSEL_COMPONENT: InjectionToken<ICarouselComponentBase>;
 /** @hidden */
 export interface IgxSlideComponentBase {
     direction: Direction;
     previous: boolean;
 }
 /** @hidden */
-export declare abstract class IgxCarouselComponentBase {
+export declare abstract class IgxCarouselComponentBase implements OnDestroy {
     private animationService;
     protected cdr: ChangeDetectorRef;
     /** @hidden */
@@ -72,6 +44,7 @@ export declare abstract class IgxCarouselComponentBase {
     /** @hidden */
     protected vertical: boolean;
     constructor(animationService: AnimationService, cdr: ChangeDetectorRef);
+    ngOnDestroy(): void;
     /** @hidden */
     protected triggerAnimations(): void;
     /** @hidden */
@@ -84,4 +57,6 @@ export declare abstract class IgxCarouselComponentBase {
     private playLeaveAnimation;
     protected abstract getPreviousElement(): HTMLElement;
     protected abstract getCurrentElement(): HTMLElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCarouselComponentBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCarouselComponentBase, never, never, {}, {}, never, never, true, never>;
 }

package/lib/carousel/carousel.component.d.ts

@@ -3,7 +3,7 @@ import { HammerGestureConfig } from '@angular/platform-browser';
 import { ICarouselResourceStrings } from '../core/i18n/carousel-resources';
 import { IBaseEventArgs, PlatformUtil } from '../core/utils';
 import { AnimationService } from '../services/animation/animation';
-import { Direction, ICarouselComponentBase, IgxCarouselComponentBase } from './carousel-base';
+import { Direction, IgxCarouselComponentBase } from './carousel-base';
 import { IgxSlideComponent } from './slide.component';
 import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
 import { IgxDirectionality } from '../services/direction/directionality';
@@ -38,7 +38,7 @@ export declare class CarouselHammerConfig extends HammerGestureConfig {
  * </igx-carousel>
  * ```
  */
-export declare class IgxCarouselComponent extends IgxCarouselComponentBase implements ICarouselComponentBase, OnDestroy, AfterContentInit {
+export declare class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit {
     private element;
     private iterableDiffers;
     private platformUtil;
@@ -135,17 +135,6 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
      * @memberOf IgxCarouselComponent
      */
     vertical: boolean;
-    /**
-     * Controls whether the carousel should support keyboard navigation.
-     * Default value is `false`.
-     * ```html
-     * <igx-carousel [keyboardSupport]="true"></igx-carousel>
-     * ```
-     *
-     * @memberOf IgxCarouselComponent
-     * @deprecated in version 18.2.0.
-     */
-    keyboardSupport: boolean;
     /**
      * Controls whether the carousel should support gestures.
      * Default value is `true`.
@@ -421,16 +410,8 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
     set interval(value: number);
     constructor(cdr: ChangeDetectorRef, element: ElementRef, iterableDiffers: IterableDiffers, animationService: AnimationService, platformUtil: PlatformUtil, dir: IgxDirectionality, document: any);
     /** @hidden */
-    onKeydownArrowRight(event: any): void;
-    /** @hidden */
-    onKeydownArrowLeft(event: any): void;
-    /** @hidden */
     onTap(event: any): void;
     /** @hidden */
-    onKeydownHome(event: any): void;
-    /** @hidden */
-    onKeydownEnd(event: any): void;
-    /** @hidden */
     onMouseEnter(): void;
     /** @hidden */
     onMouseLeave(): void;
@@ -547,7 +528,6 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
     /** @hidden */
     get prevButtonDisabled(): boolean;
     private get indicatorsElements();
-    private focusElement;
     private getIndicatorsClass;
     private getNextIndex;
     private getPrevIndex;
@@ -558,15 +538,13 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
     private finishAnimations;
     private initSlides;
     private updateSlidesSelection;
-    private focusSlideElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxCarouselComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxCarouselComponent, "igx-carousel", never, { "id": { "alias": "id"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "pause": { "alias": "pause"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "indicators": { "alias": "indicators"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "keyboardSupport": { "alias": "keyboardSupport"; "required": false; }; "gesturesSupport": { "alias": "gesturesSupport"; "required": false; }; "maximumIndicatorsCount": { "alias": "maximumIndicatorsCount"; "required": false; }; "indicatorsOrientation": { "alias": "indicatorsOrientation"; "required": false; }; "animationType": { "alias": "animationType"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; }, { "slideChanged": "slideChanged"; "slideAdded": "slideAdded"; "slideRemoved": "slideRemoved"; "carouselPaused": "carouselPaused"; "carouselPlaying": "carouselPlaying"; }, ["indicatorTemplate", "nextButtonTemplate", "prevButtonTemplate", "slides"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxCarouselComponent, "igx-carousel", never, { "id": { "alias": "id"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "pause": { "alias": "pause"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "indicators": { "alias": "indicators"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "gesturesSupport": { "alias": "gesturesSupport"; "required": false; }; "maximumIndicatorsCount": { "alias": "maximumIndicatorsCount"; "required": false; }; "indicatorsOrientation": { "alias": "indicatorsOrientation"; "required": false; }; "animationType": { "alias": "animationType"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; }, { "slideChanged": "slideChanged"; "slideAdded": "slideAdded"; "slideRemoved": "slideRemoved"; "carouselPaused": "carouselPaused"; "carouselPlaying": "carouselPlaying"; }, ["indicatorTemplate", "nextButtonTemplate", "prevButtonTemplate", "slides"], ["*"], true, never>;
     static ngAcceptInputType_loop: unknown;
     static ngAcceptInputType_pause: unknown;
     static ngAcceptInputType_navigation: unknown;
     static ngAcceptInputType_indicators: unknown;
     static ngAcceptInputType_vertical: unknown;
-    static ngAcceptInputType_keyboardSupport: unknown;
     static ngAcceptInputType_gesturesSupport: unknown;
 }
 export interface ISlideEventArgs extends IBaseEventArgs {

package/lib/carousel/slide.component.d.ts

@@ -1,6 +1,6 @@
 import { OnDestroy, EventEmitter, ElementRef, AfterContentChecked } from '@angular/core';
 import { Subject } from 'rxjs';
-import { Direction, ICarouselComponentBase, IgxSlideComponentBase } from './carousel-base';
+import { Direction, IgxSlideComponentBase } from './carousel-base';
 import * as i0 from "@angular/core";
 /**
  * A slide component that usually holds an image and/or a caption text.
@@ -16,7 +16,6 @@ import * as i0 from "@angular/core";
  */
 export declare class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase {
     private elementRef;
-    private carousel;
     /**
      * Gets/sets the `index` of the slide inside the carousel.
      * ```html
@@ -47,6 +46,7 @@ export declare class IgxSlideComponent implements AfterContentChecked, OnDestroy
      * ```
      *
      * @memberof IgxSlideComponent
+     * @deprecated in version 19.2.0.
      */
     get tabIndex(): number;
     /**
@@ -97,7 +97,7 @@ export declare class IgxSlideComponent implements AfterContentChecked, OnDestroy
     activeChange: EventEmitter<boolean>;
     private _active;
     private _destroy$;
-    constructor(elementRef: ElementRef, carousel: ICarouselComponentBase);
+    constructor(elementRef: ElementRef);
     /**
      * Returns a reference to the carousel element in the DOM.
      * ```typescript

package/lib/checkbox/checkbox-base.directive.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, ElementRef, ChangeDetectorRef, Renderer2, DestroyRef, AfterViewInit } from '@angular/core';
+import { EventEmitter, ElementRef, ChangeDetectorRef, DestroyRef, AfterViewInit } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { IBaseEventArgs } from '../core/utils';
 import { Subject } from 'rxjs';
@@ -15,7 +15,6 @@ export interface IChangeCheckboxEventArgs extends IBaseEventArgs {
 }
 export declare class CheckboxBaseDirective implements AfterViewInit {
     protected cdr: ChangeDetectorRef;
-    protected renderer: Renderer2;
     protected themeToken: ThemeToken;
     ngControl: NgControl;
     /**
@@ -185,7 +184,7 @@ export declare class CheckboxBaseDirective implements AfterViewInit {
      * ```
      */
     ariaLabel: string | null;
-    constructor(cdr: ChangeDetectorRef, renderer: Renderer2, themeToken: ThemeToken, ngControl: NgControl);
+    constructor(cdr: ChangeDetectorRef, themeToken: ThemeToken, ngControl: NgControl);
     /**
      * Sets/gets whether the checkbox is required.
      * If not set, `required` will have value `false`.
@@ -274,7 +273,7 @@ export declare class CheckboxBaseDirective implements AfterViewInit {
      * @internal
      */
     private checkNativeValidity;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxBaseDirective, [null, null, null, { optional: true; self: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxBaseDirective, [null, null, { optional: true; self: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<CheckboxBaseDirective, never, never, { "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelId": { "alias": "labelId"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
     static ngAcceptInputType_checked: unknown;
     static ngAcceptInputType_disableRipple: unknown;

package/lib/core/styles/components/calendar/_calendar-component.scss

@@ -179,6 +179,10 @@
             @extend %date-range-preview !optional;
         }
 
+        @include e(date, $mods: ('range-preview', 'inactive')) {
+            @extend %date-range-preview-inactive !optional;
+        }
+
         @include e(date, $mods: ('range-preview', 'current')) {
             @extend %date-range-preview-current !optional;
         }

package/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -108,10 +108,6 @@
 /// @param {Color} $date-selected-current-range-focus-foreground [null] - The :focus foreground of the current date in the selected range.
 /// @param {Color} $date-selected-current-range-focus-background [null] - The :focus background of the current date in the selected range.
 ///
-/// @param {Color} $date-selected-current-outline [null] - The outline of the current selected date.
-/// @param {Color} $date-selected-current-hover-outline [null] - The :hover outline of the current selected date.
-/// @param {Color} $date-selected-current-focus-outline [null] - The :focus outline of the current selected date.
-///
 /// @param {Color} $date-selected-special-border-color: [null] - The border color of the selected special date,
 /// @param {Color} $date-selected-special-hover-border-color: [null] - The :hover border color of the selected special date,
 /// @param {Color} $date-selected-special-focus-border-color: [null] - The :focus border color of the selected special date,
@@ -137,8 +133,6 @@
 /// @param {Color} $date-special-range-foreground [null] - The foreground of the dates inside a range and marked as special.
 /// @param {Color} $date-special-range-border-color [null] - The outline of the dates inside a range and marked as special.
 ///
-/// @param {Color} $date-special-current-border-color [null] - The outline color of a special current date.
-///
 /// @param {Color} $border-color [null] - The calendar border color.
 ///
 /// @param {Color} $date-border-color [null] - The border color of the date.
@@ -282,10 +276,6 @@
     $date-selected-current-hover-border-color: null,
     $date-selected-current-focus-border-color: null,
 
-    $date-selected-current-outline: null,
-    $date-selected-current-hover-outline: null,
-    $date-selected-current-focus-outline: null,
-
     $date-selected-special-border-color: null,
     $date-selected-special-hover-border-color: null,
     $date-selected-special-focus-border-color: null,
@@ -310,7 +300,6 @@
     $date-special-range-focus-background: null,
     $date-special-range-foreground: null,
     $date-special-range-border-color: null,
-    $date-special-current-border-color: null,
     $date-disabled-foreground: null,
     $date-disabled-range-foreground: null,
 
@@ -400,26 +389,6 @@
         }
     }
 
-    @if $variant == 'material' or $variant == 'indigo' {
-        @if not($date-selected-current-outline) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $date-selected-current-outline: $content-background;
-            }
-        }
-
-        @if not($date-selected-current-hover-outline) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $date-selected-current-hover-outline: $content-background;
-            }
-        }
-
-        @if not($date-selected-current-focus-outline) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $date-selected-current-focus-outline: $content-background;
-            }
-        }
-    }
-
     @if not($content-foreground) and $content-background {
         @if meta.type-of($content-background) == 'color' {
             $content-foreground: text-contrast($content-background);
@@ -640,10 +609,6 @@
         date-selected-current-hover-foreground: $date-selected-current-hover-foreground,
         date-selected-current-focus-foreground: $date-selected-current-focus-foreground,
 
-        date-selected-current-outline: $date-selected-current-outline,
-        date-selected-current-hover-outline: $date-selected-current-hover-outline,
-        date-selected-current-focus-outline: $date-selected-current-focus-outline,
-
         date-selected-special-border-color: $date-selected-special-border-color,
         date-selected-special-hover-border-color: $date-selected-special-hover-border-color,
         date-selected-special-focus-border-color: $date-selected-special-focus-border-color,
@@ -1158,7 +1123,7 @@
         display: flex;
         justify-content: space-between;
 
-        @if $variant != 'indigo' {
+        @if $variant == 'bootstrap' {
             &:nth-child(2) {
                 %date-inner-week-number {
                     border-start-start-radius: var-get($theme, 'week-number-border-radius');
@@ -1222,28 +1187,6 @@
         }
     }
 
-    %date-inner-week-number {
-        min-width: auto;
-        width: $date-size;
-        color: var-get($theme, 'week-number-foreground');
-        background: var-get($theme, 'week-number-background');
-
-        &::after {
-            display: none !important;
-        }
-
-        &::before {
-            content: '';
-            position: absolute;
-            background: var-get($theme, 'week-number-background');
-            //border-inline: rem(1px) solid var-get($theme, 'week-number-background');
-            inset-inline-start: rem(-1px);
-            inset-block-start: 100%;
-            height: calc($date-size / 2);
-            width: $date-size;
-        }
-    }
-
     %label-week-number {
         text-align: center;
 
@@ -1272,9 +1215,8 @@
                     position: absolute;
                     background: var-get($theme, 'week-number-background');
                     border-inline: rem(1px) solid var-get($theme, 'week-number-background');
-                    inset-inline-start: rem(-1px);
                     inset-block-start: 100%;
-                    height: 100%;
+                    height: calc(#{$date-view-row-gap} + #{rem(if($variant == 'indigo', 0px, 2px))});
                     width: $date-size;
                 }
             }
@@ -1507,6 +1449,29 @@
                 height: $date-size;
             }
         }
+
+        &%date-inner-week-number {
+            min-width: auto;
+            width: $date-size;
+            color: var-get($theme, 'week-number-foreground');
+            background: var-get($theme, 'week-number-background');
+
+            // This is not an actual date and should not change it's border when changing the date border
+            border-color: var-get($theme, 'week-number-background');
+
+            &::after {
+                display: none !important;
+            }
+
+            &::before {
+                content: '';
+                position: absolute;
+                background: var-get($theme, 'week-number-background');
+                inset-block-start: 100%;
+                height: calc(#{$date-view-row-gap} + #{rem(if($variant == 'indigo', 0, 2px))});
+                width: $date-size;
+            }
+        }
     }
 
     %date-weekend {
@@ -2389,6 +2354,12 @@
         }
     }
 
+    %date-range-preview-inactive {
+        %date-inner {
+            color: var-get($theme, 'inactive-color');
+        }
+    }
+
     %date-range-preview-current {
         %date-inner {
             color: var-get($theme, 'date-selected-current-range-foreground');

package/lib/core/styles/components/card/_card-theme.scss

@@ -114,8 +114,6 @@
     $not-material-theme: $variant != 'material';
 
     $card-heading-padding: rem(16px, 16px);
-    $card-content-padding: rem(16px);
-    $card-actions-padding: rem(8px);
 
     $card-tgroup-margin: 0 em(16px);
 
@@ -159,7 +157,7 @@
     %igx-card-header {
         display: flex;
         flex-flow: row wrap;
-        align-content: flex-start;
+        align-items: center;
         width: 100%;
         padding: $card-heading-padding;
         color: var-get($theme, 'header-text-color');
@@ -168,10 +166,6 @@
             display: block;
             padding: 0;
         }
-
-        @if $variant == 'fluent' {
-            padding: rem(16px) rem(8px);
-        }
     }
 
     %igx-card-header--vertical {
@@ -195,7 +189,6 @@
     }
 
     %igx-card-header-thumbnail {
-        align-self: flex-start;
         margin-inline-end: rem(16px);
 
         @if $variant == 'indigo' {
@@ -235,7 +228,7 @@
     %igx-card-content {
         display: block;
         width: 100%;
-        padding: $card-content-padding;
+        padding: rem(16px);
         color: var-get($theme, 'content-text-color');
         overflow: auto;
     }
@@ -259,6 +252,14 @@
     }
 
     %igx-card-actions {
+        $card-actions-padding: map.get((
+            'material': rem(8px) rem(16px),
+            'fluent': rem(8px) rem(16px),
+            'bootstrap': rem(16px),
+            'indigo': rem(16px),
+        ), $variant);
+
+
         display: flex;
         flex-flow: row wrap;
         justify-content: space-between;
@@ -283,29 +284,26 @@
 
     @if $variant == 'bootstrap' {
         %igx-card-content {
-            @if $variant == 'bootstrap' {
-                padding-block: rem(16px) rem(24px);
-                padding-inline: rem(24px);
-            }
-        }
-
-        %igx-card-actions {
-            padding: rem(16px);
+            padding-block-end: rem(24px);
         }
     }
 
     @if $variant == 'indigo' {
-        %igx-card-content,
-        %igx-card-actions {
-            padding: rem(16px);
+        %igx-card-content {
+            padding-block-end: rem(8px);
+        }
+
+        %igx-card-content:last-child {
+            padding-block-end: rem(16px);
         }
 
-        %igx-card-content + %igx-card-actions {
-            padding-block-start: rem(8px);
+        %igx-card-header {
+            padding-block-end: 0;
         }
 
-        %igx-card-header + %igx-card-content {
-            padding-block-start: 0;
+        %igx-card-header:last-child,
+        %igx-card-header:first-child {
+            padding-block-end: rem(16px);
         }
     }