igniteui-angular 20.0.7 → 20.0.9

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, AfterViewInit, AfterViewChecked, OnDestroy, OnChanges, ElementRef, Renderer2, SimpleChanges, EventEmitter, TemplateRef, ApplicationRef, NgZone, Type, ViewContainerRef, OnInit, ChangeDetectorRef, ComponentRef, Injector, DoCheck, IterableDiffers, EmbeddedViewRef, IterableDiffer, TrackByFunction, IterableChanges, QueryList, AfterContentInit, PipeTransform, DestroyRef, AfterContentChecked, EnvironmentInjector, SimpleChange } from '@angular/core';
+import { InjectionToken, AfterViewInit, AfterViewChecked, OnDestroy, OnChanges, ElementRef, Renderer2, SimpleChanges, EventEmitter, TemplateRef, ApplicationRef, NgZone, Type, ViewContainerRef, OnInit, ChangeDetectorRef, ComponentRef, Injector, DoCheck, IterableDiffers, EmbeddedViewRef, IterableDiffer, TrackByFunction, IterableChanges, QueryList, AfterContentChecked, AfterContentInit, PipeTransform, DestroyRef, EnvironmentInjector, SimpleChange } from '@angular/core';
 import * as _angular_forms from '@angular/forms';
 import { FormGroup, ValidationErrors, FormControl, NgModel, NgControl, FormControlName, ControlValueAccessor, Validator, AbstractControl, FormGroupDirective, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator } from '@angular/forms';
 import * as _angular_animations from '@angular/animations';
@@ -4881,8 +4881,11 @@ declare class IgxGridValidationService {
     /**
      * @hidden
      * @internal
+     Wraps the provided path into an array. This way FormGroup.get will return proper result.
+     Otherwise, if the path is a string (e.g. 'address.street'), FormGroup.get will treat it as there is a nested structure
+     and will look for control with a name of 'address' which returns undefined.
      */
-    private getFieldKey;
+    private getFormControlPath;
     /**
      * @hidden
      * @internal
@@ -4898,6 +4901,14 @@ declare class IgxGridValidationService {
      * @internal
      */
     add(rowId: any, form: FormGroup): void;
+    /**
+     * Checks the validity of the native ngControl
+     */
+    isFieldInvalid(formGroup: FormGroup, fieldName: string): boolean;
+    /**
+     * Checks the validity of the native ngControl after edit
+     */
+    isFieldValidAfterEdit(formGroup: FormGroup, fieldName: string): boolean;
     /**
      * @hidden
      * @internal
@@ -7799,6 +7810,7 @@ declare const DropDownActionKey: {
     readonly ESCAPE: "escape";
     readonly ENTER: "enter";
     readonly SPACE: "space";
+    readonly TAB: "tab";
 };
 type DropDownActionKey = (typeof DropDownActionKey)[keyof typeof DropDownActionKey];
 /**
@@ -8718,7 +8730,7 @@ declare const IGX_INPUT_GROUP_TYPE: InjectionToken<IgxInputGroupType>;
  */
 type IgxInputGroupType = (typeof IgxInputGroupEnum)[keyof typeof IgxInputGroupEnum];
 
-declare class IgxInputGroupComponent implements IgxInputGroupBase {
+declare class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentChecked {
     element: ElementRef<HTMLElement>;
     private _inputGroupType;
     private document;
@@ -8895,12 +8907,18 @@ declare class IgxInputGroupComponent implements IgxInputGroupBase {
      */
     get isTypeBox(): boolean;
     /** @hidden @internal */
-    uploadButtonHandler(): void;
-    /** @hidden @internal */
     clearValueHandler(): void;
     /** @hidden @internal */
     get isFileType(): boolean;
     /** @hidden @internal */
+    get isFileInput(): boolean;
+    /** @hidden @internal */
+    get isFileInputFilled(): any;
+    /** @hidden @internal */
+    get isFileInputFocused(): boolean;
+    /** @hidden @internal */
+    get isFileInputDisabled(): boolean;
+    /** @hidden @internal */
     get fileNames(): string;
     /**
      * Returns whether the `IgxInputGroupComponent` type is border.
@@ -19075,6 +19093,8 @@ interface IComboResourceStrings {
     igx_combo_filter_search_placeholder?: string;
     igx_combo_addCustomValues_placeholder?: string;
     igx_combo_clearItems_placeholder?: string;
+    igx_combo_aria_label_options?: string;
+    igx_combo_aria_label_no_options?: string;
 }
 declare const ComboResourceStringsEN: IComboResourceStrings;
 
@@ -19836,6 +19856,10 @@ declare abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewC
     /** @hidden @internal */
     handleKeyDown(event: KeyboardEvent): void;
     /** @hidden @internal */
+    handleToggleKeyDown(eventArgs: KeyboardEvent): void;
+    /** @hidden @internal */
+    getAriaLabel(): string;
+    /** @hidden @internal */
     registerOnChange(fn: any): void;
     /** @hidden @internal */
     registerOnTouched(fn: any): void;
@@ -20178,10 +20202,18 @@ declare class IgxComboComponent extends IgxComboBaseDirective implements AfterVi
      * @hidden @internal
      */
     get context(): any;
+    /**
+     * @hidden @internal
+     */
+    clearInput(event: Event): void;
     /**
      * @hidden @internal
      */
     handleClearItems(event: Event): void;
+    /**
+     * @hidden @internal
+     */
+    handleClearKeyDown(eventArgs: KeyboardEvent): void;
     /**
      * Select defined items
      *
@@ -20557,8 +20589,12 @@ declare class IgxSimpleComboComponent extends IgxComboBaseDirective implements C
     /** @hidden @internal */
     getEditElement(): HTMLElement;
     /** @hidden @internal */
+    clearInput(event: Event): void;
+    /** @hidden @internal */
     handleClear(event: Event): void;
     /** @hidden @internal */
+    handleClearKeyDown(event: KeyboardEvent): void;
+    /** @hidden @internal */
     handleOpened(): void;
     /** @hidden @internal */
     handleClosing(e: IBaseCancelableBrowserEventArgs): void;

package/lib/core/styles/base/_index.scss

@@ -5,5 +5,6 @@
 @forward 'igniteui-theming/sass/color';
 @forward 'igniteui-theming/sass/elevations';
 @forward 'igniteui-theming/sass/themes';
+@forward 'igniteui-theming/sass/themes/components';
 @forward 'igniteui-theming/sass/typography' hide typography;
 @forward 'igniteui-theming/sass/utils';

package/lib/core/styles/components/_index.scss

@@ -52,3 +52,4 @@
 @forward 'tooltip/tooltip-theme';
 @forward 'tree/tree-theme';
 @forward 'watermark/watermark-theme';
+@forward 'input/file-input-theme';

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

@@ -1,65 +1,7 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations/easings' 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} $color [null] - The text color used of the avatar.
-/// @param {Color} $icon-color [null] - The icon color used of the avatar.
-/// @param {Color} $background [null] - The background color used of the avatar.
-/// @param {Number} $border-radius [null] - The border-radius used of the avatar.
-/// @param {Number} $size [null] - The size of the avatar.
-/// @requires $light-material-schema
-///
-/// @example scss Change the background and icon colors in icon avatars
-///   $my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-avatar-theme);
-@function avatar-theme(
-    $schema: $light-material-schema,
-    $background: null,
-    $color: null,
-    $icon-color: null,
-    $border-radius: null,
-    $size: null,
-) {
-    $name: 'igx-avatar';
-    $avatar-schema: ();
-
-    @if map.has-key($schema, 'avatar') {
-        $avatar-schema: map.get($schema, 'avatar');
-    } @else {
-        $avatar-schema: $schema;
-    }
-
-    $theme: digest-schema($avatar-schema);
-
-    @if not($color) and $background {
-        $color: adaptive-contrast(var(--background));
-    }
-
-    @if not($icon-color) and $background {
-        $icon-color: adaptive-contrast(var(--background));
-    }
-
-    @return extend($theme, (
-        name: $name,
-        background: $background,
-        color: $color,
-        icon-color: $icon-color,
-        border-radius: $border-radius,
-        size: $size,
-    ));
-}
-
 /// @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/badge/_badge-theme.scss

@@ -1,78 +1,6 @@
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'sass:map';
 
-////
-/// @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 icon color used.
-/// @param {Color} $text-color [null] - The text color used.
-/// @param {Color} $border-color [null] - The border color used.
-/// @param {Color} $background-color [null] - The background color used.
-/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
-/// @param {Number} $border-radius [null] - The border radius used for badge component.
-///
-/// @requires $light-material-schema
-///
-/// @example scss Change the text and icon colors in a badge
-///   $my-badge-theme: badge-theme($icon-color: black, $background-color: white);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-badge-theme);
-@function badge-theme(
-    $schema: $light-material-schema,
-
-    $icon-color: null,
-    $text-color: null,
-
-    $border-color: null,
-    $border-radius: null,
-
-    $background-color: null,
-    $shadow: null,
-) {
-    $name: 'igx-badge';
-    $badge-schema: ();
-
-    @if map.has-key($schema, 'badge') {
-        $badge-schema: map.get($schema, 'badge');
-    } @else {
-        $badge-schema: $schema;
-    }
-
-    $theme: digest-schema($badge-schema);
-
-    @if not($icon-color) and $background-color {
-        $icon-color: adaptive-contrast(var(--background-color));
-    }
-
-    @if not($text-color) and $background-color {
-        $text-color: adaptive-contrast(var(--background-color));
-    }
-
-    @if not($shadow) {
-        $elevation: map.get($badge-schema, 'elevation');
-        $shadow: elevation($elevation);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        icon-color: $icon-color,
-        text-color: $text-color,
-        border-color: $border-color,
-        border-radius: $border-radius,
-        background-color: $background-color,
-        shadow: $shadow,
-    ));
-}
-
 /// @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/banner/_banner-theme.scss

@@ -1,67 +1,5 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @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} $banner-background [null] - The color used for the banner background.
-/// @param {Color} $banner-message-color [null] - The color used for the banner label.
-/// @param {Color} $banner-border-color [null] - The color used for the banner border.
-/// @param {Color} $banner-illustration-color [null] - The color used for the banner illustration.
-/// @param {Number} $border-radius [null] - The border-radius for the banner.
-///
-/// @requires $light-material-schema
-///
-/// @example scss Change the background in banner
-///   $my-banner-theme: banner-theme($banner-background: #000);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-banner-theme);
-@function banner-theme(
-    $schema: $light-material-schema,
-    $banner-background: null,
-    $banner-message-color: null,
-    $banner-border-color: null,
-    $banner-illustration-color: null,
-    $border-radius: null,
-) {
-    $name: 'igx-banner';
-    $selector: 'igx-banner, .igx-banner';
-    $banner-schema: ();
-
-    @if map.has-key($schema, 'banner') {
-        $banner-schema: map.get($schema, 'banner');
-    } @else {
-        $banner-schema: $schema;
-    }
-
-    $theme: digest-schema($banner-schema);
-
-    @if not($banner-message-color) and $banner-background {
-        $banner-message-color: adaptive-contrast(var(--banner-background));
-    }
-
-    @if not($banner-illustration-color) and $banner-background {
-        $banner-illustration-color: adaptive-contrast(var(--banner-background));
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        banner-background: $banner-background,
-        banner-message-color: $banner-message-color,
-        banner-border-color: $banner-border-color,
-        banner-illustration-color: $banner-illustration-color,
-        border-radius: $border-radius,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -1,107 +1,7 @@
 @use 'sass:map';
-@use 'sass:meta';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations/easings' 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,
-/// the label and icon colors 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} $background [null] - The background color used for the toast.
-/// @param {Color} $label-color [null] - The label color used in idle state.
-/// @param {Color} $icon-color [null] - The icon color used in idle state.
-/// @param {Color} $label-selected-color [null] - The label color used in selected state.
-/// @param {Color} $icon-selected-color [null] - The icon color used in selected state.
-/// @param {Color} $icon-disabled-color [null] - The disabled color of the icon.
-/// @param {Color} $label-disabled-color [null] - The disabled color of the label.
-/// @param {Color} $border-color [null] - The border color of the bottom navigation.
-/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the bar.
-/// @requires $light-material-schema
-/// @example scss Set a custom background color
-///   $my-bottom-nav-theme: bottom-nav-theme($background: black);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-bottom-nav-theme);
-@function bottom-nav-theme(
-    $schema: $light-material-schema,
-    $background: null,
-    $icon-color: null,
-    $icon-selected-color: null,
-    $label-color: null,
-    $label-selected-color: null,
-    $icon-disabled-color: null,
-    $label-disabled-color: null,
-    $border-color: null,
-    $shadow: null,
-) {
-    $name: 'igx-bottom-nav';
-    $bottom-nav-schema: ();
-
-    @if map.has-key($schema, 'bottom-nav') {
-        $bottom-nav-schema: map.get($schema, 'bottom-nav');
-    } @else {
-        $bottom-nav-schema: $schema;
-    }
-
-    $theme: digest-schema($bottom-nav-schema);
-
-    @if not($label-color) and not($icon-color) and $background {
-        $label-color: adaptive-contrast(var(--background));
-    }
-
-    @if not($icon-color) and $label-color {
-        $icon-color: $label-color;
-    }
-
-    @if not($label-color) and $icon-color {
-        $label-color: $icon-color;
-    }
-
-    @if not($icon-disabled-color) and not($label-disabled-color) and $label-color {
-        $label-disabled-color: adaptive-contrast(var(--background));
-    }
-
-    @if not($icon-disabled-color) and $label-disabled-color {
-        $icon-disabled-color: $label-disabled-color;
-    }
-
-    @if not($label-disabled-color) and $icon-disabled-color {
-        $label-disabled-color: $icon-disabled-color;
-    }
-
-    @if not($icon-selected-color) and $label-selected-color {
-        $icon-selected-color: $label-selected-color;
-    }
-
-    @if not($label-selected-color) and $icon-selected-color {
-        $label-selected-color: $icon-selected-color;
-    }
-
-    @if not($shadow) {
-        $elevation: map.get($bottom-nav-schema, 'elevation');
-        $shadow: elevation($elevation);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        background: $background,
-        icon-color: $icon-color,
-        icon-selected-color: $icon-selected-color,
-        label-color: $label-color,
-        label-selected-color: $label-selected-color,
-        icon-disabled-color: $icon-disabled-color,
-        label-disabled-color: $label-disabled-color,
-        border-color: $border-color,
-        shadow: $shadow,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.