igniteui-angular 20.2.0-alpha.2 → 20.2.0-alpha.4

package/index.d.ts

@@ -11,7 +11,7 @@ import { DomSanitizer, SafeHtml, EventManager, HammerGestureConfig } from '@angu
 import { HttpClient } from '@angular/common/http';
 import * as igniteui_angular from 'igniteui-angular';
 import { IMXIcon } from '@igniteui/material-icons-extended';
-import { ChatRenderers, ChatAttachmentRenderContext, ChatMessageRenderContext, ChatInputRenderContext, ChatRenderContext, IgcChatMessageAttachment, IgcChatMessage, IgcChatOptions } from 'igniteui-webcomponents';
+import { ChatRenderers, ChatAttachmentRenderContext, ChatMessageRenderContext, ChatInputRenderContext, ChatRenderContext, IgcChatMessageAttachment, IgcChatMessage, IgcChatOptions, IgcChatMessageReaction } from 'igniteui-webcomponents';
 
 /**
  * Common interface for Components with show and collapse functionality
@@ -12120,7 +12120,7 @@ interface ICachedViewLoadedEventArgs extends IViewChangeEventArgs {
  * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
  * ```
  */
-declare class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy {
+declare class IgxTooltipDirective extends IgxToggleDirective implements AfterViewInit, OnDestroy {
     /**
      * @hidden
      */
@@ -12183,9 +12183,13 @@ declare class IgxTooltipDirective extends IgxToggleDirective implements OnDestro
     private _role;
     private _destroy$;
     private _document;
+    private _renderer;
+    private _platformUtil;
     /** @hidden */
     constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, overlayService: IgxOverlayService, navigationService: IgxNavigationService);
     /** @hidden */
+    ngAfterViewInit(): void;
+    /** @hidden */
     ngOnDestroy(): void;
     /**
      * @hidden
@@ -12197,12 +12201,20 @@ declare class IgxTooltipDirective extends IgxToggleDirective implements OnDestro
     onMouseLeave(): void;
     /**
      * If there is an animation in progress, this method will reset it to its initial state.
-     * Optional `force` parameter that ends the animation.
+     * Allows hovering over the tooltip while an open/close animation is running.
+     * Stops the animation and immediately shows the tooltip.
+     *
+     * @hidden
+     */
+    stopAnimations(): void;
+    /**
+     * If there is a close animation in progress, this method will end it.
+     * If there is no close animation in progress, this method will close the tooltip with no animation.
      *
+     * @param overlaySettings settings to use for closing the tooltip
      * @hidden
-     * @param force if set to `true`, the animation will be ended.
      */
-    stopAnimations(force?: boolean): void;
+    forceClose(overlaySettings: OverlaySettings): void;
     private _createArrow;
     private _removeArrow;
     private onDocumentTouchStart;
@@ -12234,7 +12246,7 @@ interface ITooltipHideEventArgs extends IBaseEventArgs {
  * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
  * ```
  */
-declare class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnChanges, OnInit, OnDestroy {
+declare class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnInit, AfterViewInit, OnDestroy {
     private _element;
     private _navigationService;
     private _viewContainerRef;
@@ -12469,11 +12481,11 @@ declare class IgxTooltipTargetDirective extends IgxToggleActionDirective impleme
     /**
      * @hidden
      */
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
     /**
      * @hidden
      */
-    ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -12515,8 +12527,6 @@ declare class IgxTooltipTargetDirective extends IgxToggleActionDirective impleme
     private _stopTimeoutAndAnimation;
     /**
      * Used when a single tooltip is used for multiple targets.
-     * If the tooltip is shown for one target and the user interacts with another target,
-     * the tooltip is instantly hidden for the first target.
      */
     private _checkTooltipForMultipleTargets;
     /**
@@ -16211,6 +16221,7 @@ declare abstract class IgxCalendarViewDirective implements ControlValueAccessor
 declare class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #private;
     el: ElementRef;
+    private platform;
     /**
      * Sets/gets the `id` of the months view.
      * If not set, the `id` will have value `"igx-months-view-0"`.
@@ -16299,6 +16310,7 @@ declare class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
 declare class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #private;
     el: ElementRef;
+    private platform;
     /**
      * The default css class applied to the component.
      *
@@ -16400,6 +16412,7 @@ declare class KeyboardNavigationService {
     private ngZone;
     private keyHandlers;
     private eventUnsubscribeFn;
+    private platform;
     constructor(eventManager: EventManager, ngZone: NgZone);
     attachKeyboardHandlers(elementRef: ElementRef, context: any): this;
     detachKeyboardHandlers(): void;
@@ -34169,6 +34182,7 @@ declare abstract class IgxGridBaseDirective implements GridType, OnInit, DoCheck
      * @hidden @internal
      */
     repositionRowEditingOverlay(row: RowType): void;
+    protected viewDetachHandler(args: any): void;
     /**
      * @hidden @internal
      */
@@ -37303,6 +37317,10 @@ declare class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     protected onColumnsAddedOrRemoved(): void;
+    /**
+     * @hidden
+     */
+    protected onColumnsChanged(change: QueryList<IgxColumnComponent>): void;
     /**
      * @hidden @internal
      */
@@ -44319,6 +44337,7 @@ declare class IgxChatComponent implements OnInit, OnDestroy {
     readonly options: i0.InputSignal<IgxChatOptions>;
     readonly templates: i0.InputSignal<IgxChatTemplates>;
     readonly messageCreated: i0.OutputEmitterRef<IgcChatMessage>;
+    readonly messageReact: i0.OutputEmitterRef<IgcChatMessageReaction>;
     readonly attachmentClick: i0.OutputEmitterRef<IgcChatMessageAttachment>;
     readonly attachmentDrag: i0.OutputEmitterRef<void>;
     readonly attachmentDrop: i0.OutputEmitterRef<void>;
@@ -44335,7 +44354,7 @@ declare class IgxChatComponent implements OnInit, OnDestroy {
     private _setTemplates;
     private _createTemplateRenderer;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxChatComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxChatComponent, "igx-chat", never, { "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "draftMessage": { "alias": "draftMessage"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "templates": { "alias": "templates"; "required": false; "isSignal": true; }; }, { "messageCreated": "messageCreated"; "attachmentClick": "attachmentClick"; "attachmentDrag": "attachmentDrag"; "attachmentDrop": "attachmentDrop"; "typingChange": "typingChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "inputChange": "inputChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxChatComponent, "igx-chat", never, { "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "draftMessage": { "alias": "draftMessage"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "templates": { "alias": "templates"; "required": false; "isSignal": true; }; }, { "messageCreated": "messageCreated"; "messageReact": "messageReact"; "attachmentClick": "attachmentClick"; "attachmentDrag": "attachmentDrag"; "attachmentDrop": "attachmentDrop"; "typingChange": "typingChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "inputChange": "inputChange"; }, never, ["*"], true, never>;
 }
 interface ChatTemplateContext<T> {
     $implicit: T;

package/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -2,64 +2,6 @@
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-///
-/// @param {Color} $icon-color [null] - The color used for the actions icons.
-/// @param {Color} $background [null] - The color used for the action strip component content background.
-/// @param {Color} $actions-background [null] - The color used for the actions background.
-/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
-/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
-///
-/// @example scss Change the background and icon colors in action strip
-///   $my-action-strip-theme: action-strip-theme($background: black);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-action-strip-theme);
-@function action-strip-theme(
-    $schema: $light-material-schema,
-
-    $background: null,
-    $actions-background: null,
-    $icon-color: null,
-    $delete-action: null,
-    $actions-border-radius: null,
-) {
-    $name: 'igx-action-strip';
-    $action-strip-schema: ();
-
-    @if map.has-key($schema, 'action-strip') {
-        $action-strip-schema: map.get($schema, 'action-strip');
-    } @else {
-        $action-strip-schema: $schema;
-    }
-
-    $theme: digest-schema($action-strip-schema);
-
-    @if not($icon-color) and $actions-background {
-        $icon-color: adaptive-contrast(var(--actions-background));
-    }
-
-    @if not($actions-border-radius) {
-        $actions-border-radius: map.get($theme, 'actions-border-radius');
-    }
-
-    @return extend($theme, (
-        name: $name,
-        background: $background,
-        actions-background: $actions-background,
-        icon-color: $icon-color,
-        delete-action: $delete-action,
-        actions-border-radius: $actions-border-radius,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

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

@@ -247,7 +247,6 @@
             background: var-get($theme, 'indicator-dot-color');
 
             @if $variant != 'indigo' {
-                @include animation('scale-out-center' .15s $ease-out-quad forwards);
                 inset: rem(1px);
             } @else {
                 width: rem(8px);
@@ -261,11 +260,11 @@
         &:hover {
             border-color: var-get($theme, 'indicator-active-border-color');
 
-            @if $variant == 'indigo' {
-                &::after {
-                    background: var-get($theme, 'indicator-hover-dot-color');
-                }
+            &::after {
+                background: var-get($theme, 'indicator-hover-dot-color');
+            }
 
+            @if $variant == 'indigo' {
                 &::before {
                     position: absolute;
                     content: '';
@@ -290,7 +289,7 @@
                 content: '';
                 width: inherit;
                 height: inherit;
-                border: rem(2px) solid var-get($theme, 'indicator-active-dot-color');
+                border: rem(2px) solid var-get($theme, 'indicator-active-border-color');
                 inset-inline-start: 0;
                 top: 0;
                 border-radius: border-radius(50%);
@@ -304,12 +303,14 @@
             }
         }
 
-        @if $variant == 'indigo' {
-            &:hover {
-                &::after {
-                    background: var-get($theme, 'indicator-active-hover-dot-color');
-                }
+        &:hover {
+            border-color: var-get($theme, 'indicator-active-hover-dot-color');
 
+            &::after {
+                background: var-get($theme, 'indicator-active-hover-dot-color');
+            }
+
+            @if $variant == 'indigo' {
                 &::before {
                     border-color: var-get($theme, 'indicator-active-hover-dot-color');
                 }

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

@@ -1,3 +1,4 @@
+/* stylelint-disable max-nesting-depth */
 @use 'sass:map';
 @use 'sass:math';
 @use '../../base' as *;
@@ -49,13 +50,6 @@
         'indigo': rem(8px),
     ), $variant);
 
-    $mark-stroke: map.get((
-        'material': 3,
-        'fluent': 1,
-        'bootstrap': 3,
-        'indigo': 3,
-    ), $variant);
-
     $mark-offset: map.get((
         'material': 0,
         'fluent': -1px,
@@ -64,7 +58,7 @@
     ), $variant);
 
     $mark-length: 24;
-    $mark-x-factor: math.div($mark-stroke, $mark-length);
+    $mark-x-factor: calc(#{var-get($theme, 'tick-width')} / $mark-length);
 
     $ripple-size: rem(40px);
     $ripple-radius: math.div($ripple-size, 2);
@@ -205,7 +199,7 @@
         inset: 0;
         stroke: var-get($theme, 'tick-color');
         stroke-linecap: square;
-        stroke-width: $mark-stroke;
+        stroke-width: var-get($theme, 'tick-width');
         stroke-dasharray: $mark-length;
         stroke-dashoffset: $mark-length;
         fill: none;
@@ -366,7 +360,7 @@
     %cbx-composite-mark--in {
         stroke-dashoffset: 41; /* length of path - adjacent line length */
         opacity: 1;
-        transform: rotate(45deg) translateX(-#{$mark-x-factor}em);
+        transform: rotate(45deg) translateX(calc(#{$mark-x-factor} * -1em));
     }
 
     %cbx-composite-mark--fluent {

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

@@ -13,7 +13,7 @@
         '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))
+        'indigo': pad-inline(rem(8px), rem(12px), rem(12px))
     ), $variant);
 
     $search-input-block-padding: map.get((
@@ -73,6 +73,16 @@
         igx-input-group {
             --theme: #{if($variant == 'indigo', 'indigo', 'material')};
             --ig-size: #{if($variant == 'indigo', 2, 1)};
+
+            @if $variant == 'bootstrap' or $variant == 'indigo' {
+                input {
+                    height: rem(28px);
+                }
+            } @else if $variant == 'fluent' {
+                input {
+                    height: rem(32px);
+                }
+            }
         }
     }
 
@@ -151,6 +161,18 @@
         %igx-combo__search {
             --igx-input-group-input-suffix-background: transparent;
             --igx-input-group-input-suffix-background--focused: transparent;
+
+            .igx-input-group__bundle::after {
+                border-block-end-color: var(--border-color);
+            }
+
+            .igx-input-group__bundle:hover::after {
+                border-block-end-color: #{if($variant == 'fluent', var(--hover-border-color), var(--border-color))};;
+            }
+
+            .igx-input-group--focused .igx-input-group__bundle::after {
+                border-block-end-color: var(--focused-bottom-line-color);
+            }
         }
     }
 

package/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss

@@ -23,6 +23,11 @@
         }
     }
 
+    igx-date-range-start,
+    igx-date-range-end {
+        min-width: 0;
+    }
+
     igx-date-range-start,
     igx-date-range-end,
     %igx-date-range-picker__start,
@@ -57,18 +62,18 @@
 }
 
 /// Adds typography styles for the igx-date-range-picker component.
-/// Uses the 'subtitle-1'
+/// Uses the 'caption'
 /// categories from the typographic scale.
 /// @group typography
-/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
 @mixin date-range-typography(
     $categories: (
-        label: 'subtitle-1',
+        label: 'caption',
     )
 ) {
     $label: map.get($categories, 'label');
 
-    %igx-date-range__label {
+    %igx-date-range-picker__label {
         @include type-style($label);
     }
 }

package/lib/core/styles/components/grid/_pivot-data-selector-theme.scss

@@ -3,31 +3,6 @@
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-@function pivot-data-selector-theme(
-    $schema: $light-material-schema,
-    $background: null
-) {
-    $name: 'igx-pivot-data-selector';
-    $selector: '.igx-pivot-data-selector';
-    $pivot-data-selector-schema: ();
-
-    @if map.has-key($schema, 'pivot-data-selector') {
-        $pivot-data-selector-schema: map.get($schema, 'pivot-data-selector');
-    } @else {
-        $pivot-data-selector-schema: $schema;
-    }
-
-    $theme: digest-schema($pivot-data-selector-schema);
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

package/lib/core/styles/components/input/_file-input-theme.scss

@@ -4,88 +4,6 @@
 @use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations/easings' as *;
 
-////
-/// @group themes
-/// @access public
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $file-names-background [null] - The file names container background color.
-/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
-/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
-/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
-/// @param {Color} $file-names-foreground [null] - The file names color.
-/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
-/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
-/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
-/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
-/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
-/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
-/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
-/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
-/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
-/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
-/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
-/// @example scss Change the focused border and label colors
-///   $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-file-input-theme);
-@function file-input-theme(
-    $schema: $light-material-schema,
-    $file-names-background: null,
-    $file-names-background--focused: null,
-    $file-names-background--filled: null,
-    $file-names-background--disabled: null,
-    $file-names-foreground: null,
-    $file-names-foreground--focused: null,
-    $file-names-foreground--filled: null,
-    $file-names-foreground--disabled: null,
-
-    $file-selector-button-background: null,
-    $file-selector-button-background--focused: null,
-    $file-selector-button-background--filled: null,
-    $file-selector-button-background--disabled: null,
-    $file-selector-button-foreground: null,
-    $file-selector-button-foreground--focused: null,
-    $file-selector-button-foreground--filled: null,
-    $file-selector-button-foreground--disabled: null,
-) {
-    $name: 'igx-file-input';
-    $file-input-schema: ();
-
-    @if map.has-key($schema, 'file-input') {
-        $file-input-schema: map.get($schema, 'file-input');
-    } @else {
-        $file-input-schema: $schema;
-    }
-
-    $theme: digest-schema($file-input-schema);
-
-    @return extend(
-        $theme,
-        (
-            name: $name,
-            file-names-background: $file-names-background,
-            file-names-background--focused: $file-names-background--focused,
-            file-names-background--filled: $file-names-background--filled,
-            file-names-background--disabled: $file-names-background--disabled,
-            file-names-foreground: $file-names-foreground,
-            file-names-foreground--focused: $file-names-foreground--focused,
-            file-names-foreground--filled: $file-names-foreground--filled,
-            file-names-foreground--disabled: $file-names-foreground--disabled,
-
-            file-selector-button-background: $file-selector-button-background,
-            file-selector-button-background--focused: $file-selector-button-background--focused,
-            file-selector-button-background--filled: $file-selector-button-background--filled,
-            file-selector-button-background--disabled: $file-selector-button-background--disabled,
-            file-selector-button-foreground: $file-selector-button-foreground,
-            file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
-            file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
-            file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
-        ),
-    );
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.