Merge branch '9.0.x' into mpopov/carousel/6518

Author: simeonoff

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/card/card.component.ts

@@ -24,15 +24,15 @@ let NEXT_ID = 0;
     selector: 'igx-card-media'
 })
 export class IgxCardMediaDirective {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card__media')
     public cssClass = 'igx-card__media';
 
     /**
      * An @Input property that sets the `width` and `min-width` style property
      * of the media container. If not provided it will be set to `auto`.
+     *
+     * @example
      * ```html
      * <igx-card-media width="300px"></igx-card-media>
      * ```
@@ -45,6 +45,8 @@ export class IgxCardMediaDirective {
     /**
      * An @Input property that sets the `height` style property of the media container.
      * If not provided it will be set to `auto`.
+     *
+     * @example
      * ```html
      * <igx-card-media height="50%"></igx-card-media>
      * ```
@@ -69,15 +71,15 @@ export class IgxCardMediaDirective {
     templateUrl: 'card-header.component.html'
 })
 export class IgxCardHeaderComponent {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card-header')
     public cssClass = 'igx-card-header';
 
     /**
      * An @Input property that sets the layout style of the header.
      * By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
+     *
+     * @example
      * ```html
      * <igx-card-header [vertical]="true"></igx-card-header>
      * ```
@@ -89,6 +91,8 @@ export class IgxCardHeaderComponent {
     /**
      * An @Input property that sets the value of the `role` attribute of the card header.
      * By default the value is set to `header`.
+     *
+     * @example
      * ```html
      * <igx-card-header role="header"></igx-card-header>
      * ```
@@ -114,9 +118,7 @@ export class IgxCardThumbnailDirective { }
     selector: '[igxCardHeaderTitle]'
 })
 export class IgxCardHeaderTitleDirective {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card-header__title')
     public cssClass = 'igx-card__header__title';
 }
@@ -129,9 +131,7 @@ export class IgxCardHeaderTitleDirective {
     selector: '[igxCardHeaderSubtitle]'
 })
 export class IgxCardHeaderSubtitleDirective {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card-header__subtitle')
     public cssClass = 'igx-card-header__subtitle';
 }
@@ -143,9 +143,7 @@ export class IgxCardHeaderSubtitleDirective {
     selector: 'igx-card-content'
 })
 export class IgxCardContentDirective {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card-content')
     public cssClass = 'igx-card-content';
 }
@@ -161,6 +159,8 @@ export class IgxCardFooterDirective {
     /**
      * An @Input property that sets the value of the `role` attribute of the card footer.
      * By default the value is set to `footer`.
+     *
+     * @example
      * ```html
      * <igx-card-footer role="footer"></igx-card-footer>
      * ```
@@ -171,13 +171,21 @@ export class IgxCardFooterDirective {
 }
 
 /**
- * **Ignite UI for Angular Card** -
- * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card.html)
+ * Card provides a way to display organized content in appealing way.
+ *
+ * @igxModule IgxCardModule
+ *
+ * @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme
+ *
+ * @igxKeywords card, button, avatar, icon
+ *
+ * @igxGroup Layouts
  *
+ * @remarks
  * The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are
  * five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.
  *
- * Example:
+ * @example
  * ```html
  * <igx-card>
  *   <igx-card-header>
@@ -205,13 +213,14 @@ export class IgxCardComponent {
     /**
      * Sets/gets the `id` of the card.
      * If not set, `id` will have value `"igx-card-0"`;
+     *
+     * @example
      * ```html
      * <igx-card id = "my-first-card"></igx-card>
      * ```
      * ```typescript
      * let cardId =  this.card.id;
      * ```
-     * @memberof IgxCardComponent
      */
     @HostBinding('attr.id')
     @Input()
@@ -220,6 +229,8 @@ export class IgxCardComponent {
     /**
      * An @Input property that sets the value of the `role` attribute of the card.
      * By default the value is set to `group`.
+     *
+     * @example
      * ```html
      * <igx-card role="group"></igx-card>
      * ```
@@ -232,6 +243,8 @@ export class IgxCardComponent {
      * An @Input property that sets the value of the `type` attribute of the card.
      * By default the value is set to `default`. You can make the card use the
      * outlined style by setting the value to `outlined`.
+     *
+     * @example
      * ```html
      * <igx-card type="outlined"></igx-card>
      * ```
@@ -252,6 +265,8 @@ export class IgxCardComponent {
      * An @Input property that sets the value of the `horizontal` attribute of the card.
      * Setting this to `true` will make the different card sections align horizontally,
      * essentially flipping the card to the side.
+     *
+     * @example
      * ```html
      * <igx-card [horizontal]="true"></igx-card>
      * ```
@@ -286,6 +301,8 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
      * of the card-actions area.
      * You can justify the elements in those groups so they are positioned equally
      * from one another taking up all the space available along the card actions axis.
+     *
+     * @example
      * ```html
      * <igx-card-actions layout="justify"></igx-card-actions>
      * ```
@@ -318,6 +335,8 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
      * placed in the actions area.
      * If you want to reverse their positions so that icons appear first, use the `reverse`
      * attribute.
+     *
+     * @example
      * ```html
      * <igx-card-actions [reverse]="true"></igx-card-actions>
      * ```

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.