igniteui-angular 19.0.6 → 19.1.0-beta.0

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

@@ -1,7 +1,7 @@
 import { AnimationReferenceMetadata } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, InjectionToken } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { AnimationPlayer, AnimationService } from '../services/animation/animation';
-import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
+import { CarouselAnimationType } from './enums';
 export declare enum Direction {
     NONE = 0,
     NEXT = 1,
@@ -11,35 +11,6 @@ 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;

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,12 +38,11 @@ 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;
     private dir;
-    private document;
     /**
      * Sets the `id` of the carousel.
      * If not set, the `id` of the first carousel component will be `"igx-carousel-0"`.
@@ -158,34 +157,34 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
     gesturesSupport: boolean;
     /**
      * Controls the maximum indexes that can be shown.
-     * Default value is `5`.
+     * Default value is `10`.
      * ```html
-     * <igx-carousel [maximumIndicatorsCount]="10"></igx-carousel>
+     * <igx-carousel [maximumIndicatorsCount]="5"></igx-carousel>
      * ```
      *
      * @memberOf IgxCarouselComponent
      */
     maximumIndicatorsCount: number;
     /**
-     * Gets/sets the display mode of carousel indicators. It can be top or bottom.
-     * Default value is `bottom`.
+     * Gets/sets the display mode of carousel indicators. It can be `start` or `end`.
+     * Default value is `end`.
      * ```html
-     * <igx-carousel indicatorsOrientation='top'>
+     * <igx-carousel indicatorsOrientation="start">
      * <igx-carousel>
      * ```
      *
-     * @memberOf IgxSlideComponent
+     * @memberOf IgxCarouselComponent
      */
     indicatorsOrientation: CarouselIndicatorsOrientation;
     /**
      * Gets/sets the animation type of carousel.
      * Default value is `slide`.
      * ```html
-     * <igx-carousel animationType='none'>
+     * <igx-carousel animationType="none">
      * <igx-carousel>
      * ```
      *
-     * @memberOf IgxSlideComponent
+     * @memberOf IgxCarouselComponent
      */
     animationType: CarouselAnimationType;
     /**
@@ -419,7 +418,7 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
      * @memberof IgxCarouselComponent
      */
     set interval(value: number);
-    constructor(cdr: ChangeDetectorRef, element: ElementRef, iterableDiffers: IterableDiffers, animationService: AnimationService, platformUtil: PlatformUtil, dir: IgxDirectionality, document: any);
+    constructor(cdr: ChangeDetectorRef, element: ElementRef, iterableDiffers: IterableDiffers, animationService: AnimationService, platformUtil: PlatformUtil, dir: IgxDirectionality);
     /** @hidden */
     onKeydownArrowRight(event: any): void;
     /** @hidden */
@@ -548,6 +547,7 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
     get prevButtonDisabled(): boolean;
     private get indicatorsElements();
     private focusElement;
+    private getIndicatorsClass;
     private getNextIndex;
     private getPrevIndex;
     private resetSlideStyles;

package/lib/carousel/enums.d.ts

@@ -5,7 +5,15 @@ export declare const CarouselAnimationType: {
 };
 export type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType];
 export declare const CarouselIndicatorsOrientation: {
+    /**
+     * @deprecated in version 19.1.0. Use `end` instead.
+     */
     bottom: "bottom";
+    /**
+     * @deprecated in version 19.1.0. Use `start` instead.
+     */
     top: "top";
+    start: "start";
+    end: "end";
 };
 export type CarouselIndicatorsOrientation = (typeof CarouselIndicatorsOrientation)[keyof typeof CarouselIndicatorsOrientation];

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

@@ -1,6 +1,7 @@
 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 { IgxCarouselComponent } from './carousel.component';
 import * as i0 from "@angular/core";
 /**
  * A slide component that usually holds an image and/or a caption text.
@@ -97,7 +98,7 @@ export declare class IgxSlideComponent implements AfterContentChecked, OnDestroy
     activeChange: EventEmitter<boolean>;
     private _active;
     private _destroy$;
-    constructor(elementRef: ElementRef, carousel: ICarouselComponentBase);
+    constructor(elementRef: ElementRef, carousel: IgxCarouselComponent);
     /**
      * Returns a reference to the carousel element in the DOM.
      * ```typescript

package/lib/checkbox/checkbox.component.d.ts

@@ -3,7 +3,7 @@ import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { IBaseEventArgs } from '../core/utils';
 import { EditorProvider } from '../core/edit-provider';
 import { Subject } from 'rxjs';
-import { IgxTheme, ThemeToken } from '../services/theme/theme.token';
+import { IgxTheme, ThemeService } from '../services/theme/theme.service';
 import * as i0 from "@angular/core";
 export declare const LabelPosition: {
     BEFORE: "before";
@@ -39,7 +39,7 @@ export interface IChangeCheckboxEventArgs extends IBaseEventArgs {
 export declare class IgxCheckboxComponent implements EditorProvider, AfterViewInit, ControlValueAccessor {
     protected cdr: ChangeDetectorRef;
     protected renderer: Renderer2;
-    protected themeToken: ThemeToken;
+    protected themeService: ThemeService;
     ngControl: NgControl;
     /**
      * An event that is emitted after the checkbox state is changed.
@@ -380,9 +380,10 @@ export declare class IgxCheckboxComponent implements EditorProvider, AfterViewIn
      */
     private _required;
     private elRef;
+    private _theme$;
+    private _subscription;
     private destroyRef;
-    constructor(cdr: ChangeDetectorRef, renderer: Renderer2, themeToken: ThemeToken, ngControl: NgControl);
-    private setComponentTheme;
+    constructor(cdr: ChangeDetectorRef, renderer: Renderer2, themeService: ThemeService, ngControl: NgControl);
     /**
      * @hidden
      * @internal

package/lib/core/i18n/query-builder-resources.d.ts

@@ -1,6 +1,7 @@
 export interface IQueryBuilderResourceStrings {
     igx_query_builder_date_placeholder?: string;
     igx_query_builder_time_placeholder?: string;
+    igx_query_builder_datetime_placeholder?: string;
     igx_query_builder_filter_operator_and?: string;
     igx_query_builder_filter_operator_or?: string;
     igx_query_builder_filter_contains?: string;
@@ -13,6 +14,8 @@ export interface IQueryBuilderResourceStrings {
     igx_query_builder_filter_notEmpty?: string;
     igx_query_builder_filter_null?: string;
     igx_query_builder_filter_notNull?: string;
+    igx_query_builder_filter_in?: string;
+    igx_query_builder_filter_notIn?: string;
     igx_query_builder_filter_before?: string;
     igx_query_builder_filter_after?: string;
     igx_query_builder_filter_at?: string;
@@ -35,14 +38,19 @@ export interface IQueryBuilderResourceStrings {
     igx_query_builder_filter_false?: string;
     igx_query_builder_filter_all?: string;
     igx_query_builder_title?: string;
+    igx_query_builder_from_label?: string;
+    igx_query_builder_select_label?: string;
+    igx_query_builder_where_label?: string;
     igx_query_builder_and_group?: string;
     igx_query_builder_or_group?: string;
     igx_query_builder_end_group?: string;
     igx_query_builder_and_label?: string;
     igx_query_builder_or_label?: string;
+    igx_query_builder_switch_group?: string;
     igx_query_builder_add_condition?: string;
-    igx_query_builder_create_and_group?: string;
-    igx_query_builder_create_or_group?: string;
+    igx_query_builder_add_group?: string;
+    igx_query_builder_add_condition_root?: string;
+    igx_query_builder_add_group_root?: string;
     igx_query_builder_ungroup?: string;
     igx_query_builder_delete?: string;
     igx_query_builder_delete_filters?: string;
@@ -50,5 +58,17 @@ export interface IQueryBuilderResourceStrings {
     igx_query_builder_column_placeholder?: string;
     igx_query_builder_condition_placeholder?: string;
     igx_query_builder_value_placeholder?: string;
+    igx_query_builder_all_fields?: string;
+    igx_query_builder_details?: string;
+    igx_query_builder_search?: string;
+    igx_query_builder_select_all?: string;
+    igx_query_builder_select_entity?: string;
+    igx_query_builder_select_return_field_single?: string;
+    igx_query_builder_select_return_fields?: string;
+    igx_query_builder_dialog_title?: string;
+    igx_query_builder_dialog_message?: string;
+    igx_query_builder_dialog_checkbox_text?: string;
+    igx_query_builder_dialog_cancel?: string;
+    igx_query_builder_dialog_confirm?: string;
 }
 export declare const QueryBuilderResourceStringsEN: IQueryBuilderResourceStrings;

package/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -68,7 +68,23 @@
     @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'variant');
- 
+    $bootstrap-theme: $variant == 'bootstrap';
+    $box-shadow: map.get((
+        'material': null,
+        'fluent': null,
+        'bootstrap': 0 0 0 rem(3px) var-get($theme, 'background'),
+        'indigo': null,
+    ), $variant);
+
+    %igx-avatar-outline {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        opacity: .5;
+    }
+
     %igx-avatar-display {
         @include sizable();
 
@@ -98,6 +114,20 @@
                 --component-size: 1;
             }
         }
+
+        &::after {
+            box-shadow: none;
+
+            @if $bootstrap-theme {
+                @extend %igx-avatar-outline;
+            }
+
+            transition: box-shadow .15s $in-out-quad;
+        }
+
+        &:focus::after {
+            box-shadow: $box-shadow;
+        }
     }
 
     %igx-avatar-image {

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

@@ -450,7 +450,7 @@
         }
     }
 
-    %igx-card-content > *:not(igx-icon) {
+    %igx-card-content > * {
         @include type-style($content) {
             margin: 0;
         }

package/lib/core/styles/components/carousel/_carousel-component.scss

@@ -11,14 +11,14 @@
             @extend %igx-carousel-indicator !optional;
         }
 
-        @include m(top) {
+        @include m(start) {
             @extend %igx-carousel-indicators !optional;
-            @extend %igx-carousel-indicators--top !optional;
+            @extend %igx-carousel-indicators--start !optional;
         }
 
-        @include m(bottom) {
+        @include m(end) {
             @extend %igx-carousel-indicators !optional;
-            @extend %igx-carousel-indicators--bottom !optional;
+            @extend %igx-carousel-indicators--end !optional;
         }
 
         @include m(focused) {

package/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -320,11 +320,11 @@
         }
     }
 
-    %igx-carousel-indicators--bottom {
+    %igx-carousel-indicators--end {
         bottom: 0;
     }
 
-    %igx-carousel-indicators--top {
+    %igx-carousel-indicators--start {
         top: 0;
     }
 
@@ -563,16 +563,19 @@
             }
         }
 
+
         %igx-carousel-arrow--prev {
             inset-block-start: 0;
             margin-block-start: rem(16px);
         }
 
+
         %igx-carousel-arrow--next {
             inset-block-end: 0;
             margin-block-end: rem(16px);
         }
 
+
         %igx-carousel-indicators {
             inset-inline-end: 0;
             inset-inline-start: unset;
@@ -590,7 +593,7 @@
             padding: rem(4px) rem(6px);
         }
 
-        %igx-carousel-indicators--top {
+        %igx-carousel-indicators--start {
             inset-inline-end: unset;
             inset-inline-start: 0;
             margin-inline-start: rem(16px);
@@ -603,12 +606,13 @@
                 padding: rem(6px);
             }
 
+
             %igx-carousel-label-indicator {
                 padding: rem(4px) rem(6px);
                 margin-inline-end: rem(16px);
             }
 
-            %igx-carousel-indicators--top {
+            %igx-carousel-indicators--start {
                 margin-inline-start: rem(16px);
             }
         }

package/lib/core/styles/components/checkbox/_checkbox-component.scss

@@ -232,6 +232,10 @@
             @extend %igx-checkbox--indeterminate-fluent !optional;
         }
 
+        @include mx(material, indeterminate) {
+            @extend %igx-checkbox--indeterminate-material !optional;
+        }
+
         @include mx(invalid, indeterminate) {
             @extend %igx-checkbox--indeterminate--invalid !optional;
 
@@ -242,14 +246,6 @@
             }
         }
 
-        @include mx(material, disabled, indeterminate) {
-            @extend %igx-checkbox--disabled-indeterminate-material !optional;
-        }
-
-        @include mx(fluent, disabled, indeterminate) {
-            @extend %igx-checkbox--disabled-indeterminate-fluent !optional;
-        }
-
         @include mx(indigo, focused, indeterminate) {
             @extend %igx-checkbox--focused-checked-indigo !optional;
         }

package/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -172,7 +172,6 @@
         flex-flow: row nowrap;
         align-items: center;
         outline-style: none;
-        cursor: pointer;
     }
 
     %cbx-display--disabled {
@@ -209,6 +208,7 @@
     %cbx-composite {
         position: relative;
         display: inline-block;
+        cursor: pointer;
         width: $size;
         height: $size;
         min-width: $size;
@@ -377,12 +377,6 @@
                 z-index: 1;
             }
         }
-    }
-
-    %igx-checkbox--disabled-indeterminate-fluent {
-        %cbx-composite-mark {
-            stroke: transparent;
-        }
 
         %cbx-composite--x--disabled {
             background: transparent;
@@ -393,7 +387,7 @@
         }
     }
 
-    %igx-checkbox--disabled-indeterminate-material {
+    %igx-checkbox--indeterminate-material {
         %cbx-composite--x--disabled {
             border-color: var-get($theme, 'disabled-indeterminate-color');
             background: var-get($theme, 'disabled-indeterminate-color');
@@ -482,6 +476,7 @@
     %cbx-label {
         display: inline-block;
         color: var-get($theme, 'label-color');
+        cursor: pointer;
         user-select: none;
         word-wrap: break-all;
         transition: color .2s $ease-out-quad;

package/lib/core/styles/components/chip/_chip-theme.scss

@@ -386,7 +386,7 @@
         }
 
         @if $variant == 'indigo' {
-            igx-icon {
+            %igx-icon-display {
                 --size: #{sizable(rem(14px), rem(14px), rem(16px))}
             }
         }
@@ -700,7 +700,9 @@
 
     %igx-chip__prefix,
     %igx-chip__suffix {
-        display: inline-flex;
+        @include ellipsis();
+
+        display: inline-block;
         vertical-align: middle;
         max-width: $chip-max-width;
 

package/lib/core/styles/components/combo/_combo-theme.scss

@@ -95,20 +95,6 @@
 
     $variant: map.get($theme, '_meta', 'variant');
 
-    $search-input-inline-padding: map.get((
-        'material': pad-inline(rem(4px), rem(8px), rem(16px)),
-        'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
-        'bootstrap': pad-inline(rem(4px), rem(8px), rem(16px)),
-        'indigo': pad-inline(rem(12px))
-    ), $variant);
-
-    $search-input-block-padding: map.get((
-        'material': pad-inline(rem(8px)),
-        'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
-        'bootstrap': pad-inline(rem(8px)),
-        'indigo': pad-inline(rem(12px))
-    ), $variant);
-
     %igx-combo {
         position: relative;
         display: block;
@@ -136,8 +122,8 @@
     }
 
     %igx-combo__search {
-        padding-inline: $search-input-inline-padding;
-        padding-block: $search-input-block-padding;
+        padding-inline: if($variant == 'indigo', pad-inline(rem(12px)), pad-inline(rem(16px)));
+        padding-block: if($variant == 'indigo', pad-block(rem(12px)), pad-block(rem(8px)));
         margin: 0 !important;
         z-index: 26;
         border-bottom: rem(1px) dashed var-get($theme, 'search-separator-border-color');
@@ -148,12 +134,12 @@
         }
 
         .igx-input-group__bundle-main {
-            padding-inline: 0;
+            padding-inline-start: 0;
         }
 
         .igx-input-group__bundle-start,
         .igx-input-group__bundle-end {
-            min-width: 0;
+            display: none;
         }
 
         igx-input-group {
@@ -164,24 +150,24 @@
 
     %igx-combo__case-icon,
     %igx-combo__case-icon--active {
-        line-height: 0;
-
-        igx-icon {
-            --size: rem(18px);
+        .igx-icon {
+            width: rem(16px);
+            height: rem(16px);
+            font-size: rem(16px);
         }
     }
 
     // The wrapping element here is needed
     // in order to override the !important rule of .igx-icon--inactive.
     %igx-combo__case-icon {
-        igx-icon {
+        .igx-icon {
             // Important is needed since the .igx-icon--inactive has !important
             color: color($color: 'gray', $variant: 600) !important;
         }
     }
 
     %igx-combo__case-icon--active {
-        igx-icon {
+        .igx-icon {
             color: color($color: 'primary')
         }
     }

package/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -99,9 +99,13 @@
             }
         }
 
-        @if $variant != 'indigo' {
-            igx-icon {
-                --size: var(--igx-icon-size, #{rem(15px)});
+        igx-icon {
+            @if $variant == 'indigo' {
+                --component-size: 2;
+            } @else {
+                width: var(--igx-icon-size, #{rem(15px)});
+                height: var(--igx-icon-size, #{rem(15px)});
+                font-size: var(--igx-icon-size, #{rem(15px)});
             }
         }
     }
@@ -175,7 +179,7 @@
             @if $theme-variant == 'light' {
                 background: contrast-color($color: 'gray', $variant: 900);
             } @else {
-                background: color($color: 'gray', $variant: 50);
+                background: color($color: 'surface', $variant: 500);
             }
 
             %igx-group-display {
@@ -720,20 +724,14 @@
     }
 
     %grid-excel-menu__secondary-footer {
-        padding: rem(8px) rem(16px);
+        --ig-size: 2;
 
-        @if $bootstrap-theme {
-            border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-        } @else {
-            border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
-        }
-
-        @if $variant == 'indigo' and $theme-variant == 'dark' {
-            border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-        }
+        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
+        padding-block-end: if($variant != 'bootstrap', rem(24px), rem(16px));
 
-        @if $variant == 'indigo' {
-            padding: rem(16px);
+        @if $bootstrap-theme {
+            padding-block-start: rem(16px);
+            border-top: rem(1px) solid color($color: 'gray', $variant: 300);
         }
 
         %grid-excel-filter__apply,