Merge branch '9.0.x' into mpopov/6733-9.0.x

Author: Lipata

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

@@ -424,7 +424,8 @@ describe('IgxCalendar - ', () => {
                 const parent = dom.query(
                     By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS}:last-child`)
                 );
-                const target = parent.childNodes.pop();
+                const parentDates = parent.queryAll(By.css(HelperTestFunctions.INACTIVE_DAYS_CSSCLASS));
+                const target = parentDates[parentDates.length - 1];
 
                 target.nativeElement.click();
                 fixture.detectChanges();

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

@@ -705,7 +705,7 @@ describe('Carousel', () => {
             carousel = fixture.componentInstance.carousel;
         });
 
-        it('should stop/play on tap ', async () => {
+        it('should stop/play on tap ', () => {
             carousel.interval = 1000;
             carousel.play();
             fixture.detectChanges();
@@ -715,15 +715,13 @@ describe('Carousel', () => {
 
             expect(carousel.isPlaying).toBeTruthy();
 
-            HelperTestFunctions.simulateTap(carousel);
+            HelperTestFunctions.simulateTap(fixture, carousel);
             fixture.detectChanges();
-            await wait(200);
 
             expect(carousel.isPlaying).toBeFalsy();
 
-            HelperTestFunctions.simulateTap(carousel);
+            HelperTestFunctions.simulateTap(fixture, carousel);
             fixture.detectChanges();
-            await wait(200);
 
             expect(carousel.isPlaying).toBeTruthy();
 
@@ -733,15 +731,13 @@ describe('Carousel', () => {
 
             expect(carousel.isPlaying).toBeFalsy();
 
-            HelperTestFunctions.simulateTap(carousel);
+            HelperTestFunctions.simulateTap(fixture, carousel);
             fixture.detectChanges();
-            await wait(200);
 
             expect(carousel.isPlaying).toBeFalsy();
 
-            HelperTestFunctions.simulateTap(carousel);
+            HelperTestFunctions.simulateTap(fixture, carousel);
             fixture.detectChanges();
-            await wait(200);
 
             expect(carousel.isPlaying).toBeFalsy();
         });
@@ -881,9 +877,11 @@ class HelperTestFunctions {
         expect(carousel.slides.find((slide) => slide.active && slide.index !== index)).toBeUndefined();
     }
 
-    public static simulateTap(carousel) {
+    public static simulateTap(fixture, carousel) {
         const activeSlide = carousel.get(carousel.current).nativeElement;
-        Simulator.gestures.press(activeSlide, { duration: 180 });
+        const carouselElement = fixture.debugElement.query(By.css('igx-carousel'));
+        carouselElement.triggerEventHandler('tap', {target: activeSlide});
+        // Simulator.gestures.press(activeSlide, { duration: 180 });
     }
 
     public static simulatePan(fixture, carousel, deltaXOffset, velocity) {

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

@@ -115,7 +115,7 @@
 /// @access public
 /// @requires {function} to-string
 /// @param {Color} $rgba - The rgba color to convert.
-/// @param {Color} $background - The background color to convert against.
+/// @param {Color} $background [#fff] - The background color to convert against.
 /// @return {Color} - The hexidecimal representation of the rgba value.
 @function hexrgba($rgba, $background: #fff) {
     @if type-of($rgba) == color {
@@ -155,7 +155,7 @@
 /// @group Palettes
 /// @param {Map} $palette - The source palette map.
 /// @param {string} $color - The target color from the color palette.
-/// @param {number|variant} $variant - The target color shade from the color palette.
+/// @param {number|variant} $variant [500] - The target color shade from the color palette.
 /// @requires igx-color
 /// @requires text-contrast
 /// @requires hexrgba
@@ -181,7 +181,7 @@
 /// Test if a component, or list of components
 /// is in the list of known components.
 /// @access private
-/// @param {String|List} $excludes - The components list to check in.
+/// @param {String|List} $items - The components list to check in.
 /// @return {List} - The list of passed items.
 @function is-component($items) {
     $register: map-keys($components);
@@ -196,7 +196,7 @@
 /// Converts numbers to HEX value strings.
 /// @access private
 /// @param {number} $num - The number to convert.
-/// @param {radix} $radix - The base radix to use for the conversion.
+/// @param {radix} $radix [16] - The base radix to use for the conversion.
 /// @return {String} - The resulting string.
 @function to-string($num, $radix: 16) {
     $chars: '0123456789abcdef';
@@ -301,7 +301,6 @@
 /// @param {Color} $surface [#fff] - The color used as a background in components, such as cards, sheets, and menus.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
-/// @see $igx-foreground-color
 @function igx-palette(
     $primary,
     $secondary,
@@ -548,7 +547,6 @@
 /// @example scss Set variable values based on $direction
 ///    $left: if-ltr(left, right);
 ///    $right: if-ltr(right, left);
-/// @requires $direction
 @function if-ltr($if, $else: null) {
     $dir: if(global-variable-exists('direction'), $direction, 'ltr');
 
@@ -566,7 +564,6 @@
 /// @example scss Set variable values based on $direction
 ///    $left: if-rtl(left, right);
 ///    $right: if-rtl(right, left);
-/// @requires $direction
 @function if-rtl($if, $else: null) {
     @return if-ltr($else, $if);
 }

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

@@ -215,8 +215,8 @@
 /// optional prefix and suffix attached to the class name.
 /// @access private
 /// @param {string} $prop - The CSS property to assign the palette color to.
-/// @param {string} $prefix [null] - A prefix to be attached to the class name.
-/// @param {string} $suffix [igx] - A suffix to be attached to the class name.
+/// @param {string} $prefix [igx] - A prefix to be attached to the class name.
+/// @param {string} $suffix [null] - A suffix to be attached to the class name.
 /// @example scss Generate background classes with colors from the palette.
 ///   // Will generate class names like
 ///   // .igx-primary-500-bg { ... };
@@ -265,7 +265,7 @@
 
 /// Add theme colors to a scope.
 /// @access public
-/// @param {map} $theme - The component theme to get the
+/// @param {map} $theme - The component theme to be used
 /// @requires {mixin} css-vars-from-theme
 @mixin igx-css-vars($theme) {
     $scope: if(is-root(), ':root', '&');

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -1,3 +1,5 @@
+/// @group themes
+/// @access private
 @mixin igx-vhelper {
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -12,7 +12,6 @@
 /// @param {Color} $banner-background [null]- The background color used banner background.
 /// @param {Color} $banner-message-color [null]- The color used for banner label.
 /// @param {Color} $banner-border-color [null] - The border color used banner border.
-/// @param {Color} $banner-illustration-background [null] - The background color used for banner illustration.
 /// @param {Color} $banner-illustration-color [null] - The color used banner illustration.
 ///
 /// @requires $default-palette
@@ -149,7 +148,7 @@
 /// Uses the 'body-2' category from the typographic scale.
 /// @group typography
 /// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
-/// @param {Map} $categories [(label: 'body-2')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(message: 'body-2')] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} igx-type-style
 @mixin igx-banner-typography($type-scale, $categories: (
     message: 'body-2')

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -15,6 +15,7 @@
 /// @param {Color} $item-text-color [null]- The text color for button group items.
 /// @param {Color} $item-background [null] - The background color for button group items .
 /// @param {Color} $item-border-color [null] - The border color between button group items.
+/// @param {Color} $item-disabled-border [null] - The border color for a disabled item in the button group.
 ///
 /// @param {Color} $item-hover-text-color [null] - The hover text color for button group items.
 /// @param {Color} $item-hover-background [null] - The hover background color for button group items.

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

@@ -443,7 +443,7 @@
 /// category from the typographic scale.
 /// @group typography
 /// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
-/// @param {Map} $categories [(title: 'h5', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(title: 'h6', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} igx-type-style
 @mixin igx-card-typography($type-scale, $categories: (
     title: 'h6',

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -7,6 +7,7 @@
 
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
 /// @param {Color} $slide-background [null] - The slide background color.
 /// @param {Color} $button-background [null] - The previous/next buttons idle background color.
 /// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color.

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -16,6 +16,7 @@
 /// @param {Color} $fill-color [null] - The checked border and fill colors.
 /// @param {Color} $tick-color [null] - The checked mark color.
 /// @param {Color} $disabled-color [null] - The disabled border and fill colors.
+/// @param {Color} $disabled-color-label [null] - The disabled label color.
 /// @param {border-radius} $border-radius [null] - The border radius used for checkbox component.
 /// @param {border-radius} $border-radius-ripple [null] - The border radius used for checkbox ripple.
 /// Set to light when the surrounding area is dark.