Merge branch '20.0.x' into bpachilova/column-groups-a11y-16017

Author: ddaribo

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^19.1.2",
+    "igniteui-theming": "^19.2.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

package.json

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^19.1.2",
+        "igniteui-theming": "^19.2.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -1074,7 +1074,7 @@ describe('igxCombo', () => {
 
                 const list = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
                 expect(list.nativeElement.getAttribute('aria-multiselectable')).toEqual('true');
-                expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual('');
+                expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(null);
 
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list);
                 tick();

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -4,6 +4,6 @@ export interface IInputResourceStrings {
 }
 
 export const InputResourceStringsEN: IInputResourceStrings = {
-    igx_input_upload_button: 'Upload File',
+    igx_input_upload_button: 'Browse',
     igx_input_file_placeholder: 'No file chosen',
 };

projects/igniteui-angular/src/lib/core/i18n/input-resources.ts

@@ -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';

projects/igniteui-angular/src/lib/core/styles/base/_index.scss

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

projects/igniteui-angular/src/lib/core/styles/components/_index.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.

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-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.

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-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