Merge branch 'master' into dTsvetkov/feat-9020-master

Author: rkaraivanov

CHANGELOG.md

@@ -14,7 +14,6 @@ All notable changes for each version of this project will be documented in this
         <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
     </igx-grid-toolbar-actions>
     ```
-- `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file. 
 - `IgxPaginatorComponent`
     - Added `paging` and `pagingDone` events; `paging` event is cancellable and is emitted before pagination is performed, `pagingDone` event gives you information about the previous and the current page number and is not cancellable; Also `IgxPageSizeSelectorComponent` and `IgxPageNavigationComponent` are introduced and now the paginator components allows you to define a custom content, as it is shown in the example below:
     ```html
@@ -27,7 +26,6 @@ All notable changes for each version of this project will be documented in this
         </igx-paginator-content>
     </igx-paginator>
     ```
-
 - `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file.
     ```typescript
         this.excelExporterService.columnExporting.subscribe((col) => {
@@ -36,6 +34,9 @@ All notable changes for each version of this project will be documented in this
             }
         });
     ```
+- `IgxExcelExporterService`
+    - Added support for exporting the grids' multi-column headers to **Excel**. By default, the multi-column headers would be exported but this behavior can be controlled by the `ignoreMultiColumnHeaders` option off the IgxExcelExporterOptions object.
+    
 ### General
 - `IgxPaginatorComponent`
     - Deprecated properties `selectLabel` and `prepositionPage` are now removed;
@@ -44,7 +45,12 @@ All notable changes for each version of this project will be documented in this
         - `pagerHidden `
         - `dropdownEnabled`
         - `dropdownHidden`
-
+- `IgxSnackbarComponent`
+    - Deprecated property `message` is now removed;
+    - **Breaking Change** - the `snackbarAnimationStarted` and `snackbarAnimationDone` methods are now removed. The `animationStarted` and `animationDone` events now provide reference to the `ToggleViewEventArgs` interface as an argument and are emitted by the `onOpened` and `onClosed` events of the `IgxToggleDirective`. 
+- `IgxToastComponent`
+    - Deprecated property `message` is now removed;
+    - **Breaking Change** - The `isVisibleChange` event now provides reference to the `ToggleViewEventArgs` interface as an argument.
 
 - **Breaking Change** - `IgxOverlayService` events are renamed as follows:
     - `onOpening` -> `opening`
@@ -78,6 +84,10 @@ All notable changes for each version of this project will be documented in this
         </igx-expansion-panel>
     ```
 
+### Themes
+- **Breaking Change**  - The `$color` property of the `igx-action-strip-theme` has been renamed as follows:
+    - `$color` -> `$icon-color`
+
 ## 12.0.3
 
 ### General
@@ -3222,7 +3232,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
                 [igxForContainerSize]='"500px"'
                 [igxForItemSize]='"50px"'
                 let-rowIndex="index">
-                <div style='height:50px;'>{{rowIndex}} : {{item.text}}</div>
+                <div style='height: 50px;'>{{rowIndex}} : {{item.text}}</div>
         </ng-template>
     </div>
     ```

projects/igniteui-angular/migrations/update-12_1_0/changes/theme-props.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../common/schema/theme-props.schema.json",
+    "changes": [
+        {
+            "name": "$color",
+            "replaceWith": "$icon-color",
+            "owner": "igx-action-strip-theme"
+        }
+    ]
+}

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -212,7 +212,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * ```
      * ```html
      * <igx-buttongroup #MyChild [multiSelection]="!multi" (selected)="selectedHandler($event)"></igx-buttongroup>
-     * <igx-toast #toast message="You have made a selection!"></igx-toast>
+     * <igx-toast #toast>You have made a selection!</igx-toast>
      * ```
      */
     @Output()
@@ -230,7 +230,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * ```
      * ```html
      * <igx-buttongroup> #MyChild [multiSelection]="multi" (deselected)="deselectedHandler($event)"></igx-buttongroup>
-     * <igx-toast #toast message="You have deselected a button!"></igx-toast>
+     * <igx-toast #toast>You have deselected a button!</igx-toast>
      * ```
      */
     @Output()

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -9,7 +9,7 @@
 /// @param {Map} $palette [null] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
 ///
-/// @param {Color} $color [null] - The color used for the actions icons.
+/// @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.
@@ -30,7 +30,7 @@
 
     $background: null,
     $actions-background: null,
-    $color: null,
+    $icon-color: null,
     $delete-action: null,
     $actions-border-radius: null,
 ) {
@@ -49,16 +49,16 @@
         if($actions-border-radius, $actions-border-radius, map-get($action-strip-schema, 'actions-border-radius')), 0, 24px
     );
 
-    @if not($color) and $actions-background {
-        $color: text-contrast($actions-background);
+    @if not($icon-color) and $actions-background {
+        $icon-color: text-contrast($actions-background);
     }
 
     @return extend($theme, (
         name: $name,
         palette: $palette,
         background: $background,
         actions-background: $actions-background,
-        color: $color,
+        icon-color: $icon-color,
         delete-action: $delete-action,
         actions-border-radius: $actions-border-radius,
     ));
@@ -175,7 +175,7 @@
         justify-content: center;
         pointer-events: all;
         position: relative;
-        color: --var($theme, 'color');
+        color: --var($theme, 'icon-color');
         border-radius: --var($theme, 'actions-border-radius');
         background: --var($theme, 'actions-background');
         max-height: 36px;
@@ -185,12 +185,12 @@
         }
 
         igx-icon {
-            color: --var($theme, 'color');
+            color: --var($theme, 'icon-color');
         }
 
         [igxButton='icon'] {
             igx-icon {
-                color: --var($theme, 'color');
+                color: --var($theme, 'icon-color');
             }
 
             @if $variant == 'indigo-design' {

projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss

@@ -87,6 +87,7 @@
 /// @requires --var
 @mixin igx-snackbar($theme) {
     @include igx-css-vars($theme);
+    @include fade-in();
 
     // @debug $theme;
 
@@ -114,6 +115,10 @@
         backdrop-filter: blur(8px);
     }
 
+    %igx-snackbar-message {
+        @include animation('fade-in' .35s ease-out);
+    }
+
     %igx-snackbar-button {
         background: transparent;
         color: --var($theme, 'button-color');
@@ -129,6 +134,7 @@
         font-size: inherit;
         font-family: inherit;
         cursor: pointer;
+        @include animation('fade-in' .35s ease-out);
 
         &:hover {
             color: --var($theme, 'button-color');

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_action-strip.scss

@@ -8,7 +8,7 @@
 
 /// Generates a light action-strip schema.
 /// @type {Map}
-/// @prop {Color} color ["'currentColor'"] - The color used for the actions icons.
+/// @prop {Color} icon-color ["'currentColor'"] - The color used for the actions icons.
 /// @prop {Map} background [igx-color: ('grays', 100] - The color used for the action strip component content background.
 /// @prop {Map} actions-background [igx-color: ('grays', 200), to-opaque: #fff, rgba: .9] - The color used for actions background.
 /// @prop {Map} delete-action [igx-color: ('error')] - The color used for the delete icon in action strip component.
@@ -31,7 +31,7 @@ $_light-action-strip: extend(
             igx-color: ('grays', 100)
         ),
 
-        color: "'currentColor'",
+        icon-color: "'currentColor'",
 
         delete-action: (
             igx-color: ('error')
@@ -85,7 +85,7 @@ $_indigo-action-strip: extend(
             igx-color: ('primary')
         ),
 
-        color: (
+        icon-color: (
             igx-contrast-color: 'primary'
         ),
     )

projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts

@@ -0,0 +1,118 @@
+import { Directive, ElementRef, HostBinding, Input, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { IToggleView } from '../../core/navigation';
+import { IPositionStrategy, OverlaySettings } from '../../services/public_api';
+import { IgxOverlayOutletDirective, IgxToggleDirective } from '../toggle/toggle.directive';
+
+@Directive()
+export abstract class IgxNotificationsDirective extends IgxToggleDirective
+    implements IToggleView, OnDestroy {
+    /**
+     * Sets/gets the `aria-live` attribute.
+     * If not set, `aria-live` will have value `"polite"`.
+     */
+    @HostBinding('attr.aria-live')
+    @Input()
+    public ariaLive = 'polite';
+
+    /**
+     * Sets/gets whether the element will be hidden after the `displayTime` is over.
+     * Default value is `true`.
+     */
+    @Input()
+    public autoHide = true;
+
+    /**
+     * Sets/gets the duration of time span (in milliseconds) which the element will be visible
+     * after it is being shown.
+     * Default value is `4000`.
+     */
+    @Input()
+    public displayTime = 4000;
+
+    /**
+     * Gets/Sets the container used for the element.
+     *
+     * @remarks
+     *  `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
+     */
+    @Input()
+    public outlet: IgxOverlayOutletDirective | ElementRef;
+
+    /**
+     * Enables/Disables the visibility of the element.
+     * If not set, the `isVisible` attribute will have value `false`.
+     */
+    @Input()
+    public get isVisible() {
+        return !this.collapsed;
+    }
+
+    public set isVisible(value) {
+        if (value !== this.isVisible) {
+            if (value) {
+                requestAnimationFrame(() => {
+                    this.open();
+                });
+            } else {
+                this.close();
+            }
+        }
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public textMessage: string | OverlaySettings = '';
+
+    /**
+     * @hidden
+     */
+    public timeoutId: number;
+    public d$ = new Subject<boolean>();
+
+    /**
+     * @hidden
+     */
+    protected strategy: IPositionStrategy;
+
+    /**
+     * @hidden
+     */
+    public open() {
+        clearInterval(this.timeoutId);
+
+        const overlaySettings: OverlaySettings = {
+            positionStrategy: this.strategy,
+            closeOnEscape: false,
+            closeOnOutsideClick: false,
+            modal: false,
+            outlet: this.outlet
+        };
+
+        super.open(overlaySettings);
+
+        if (this.autoHide) {
+            this.timeoutId = window.setTimeout(() => {
+                this.close();
+            }, this.displayTime);
+        }
+    }
+
+    /**
+     * Hides the element.
+     */
+    public close() {
+        clearTimeout(this.timeoutId);
+        super.close();
+    }
+
+    /**
+     * @hidden
+     */
+    public ngOnDestroy() {
+        this.d$.next(true);
+        this.d$.complete();
+    }
+}

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -338,6 +338,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event };
         delete this._overlayId;
         this.onClosed.emit(closedEventArgs);
+        this.cdr.markForCheck();
     };
 
     private subscribe() {

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -209,8 +209,10 @@
     </div>
 
     <div class="igx-grid__addrow-snackbar">
-        <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
+        <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
     </div>
+
+    <div #igxBodyOverlayOutlet igxOverlayOutlet></div>
 </div>
 
 

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -176,8 +176,10 @@
         <div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
     </div>
     <div class="igx-grid__addrow-snackbar">
-        <igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
+        <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
     </div>
+
+    <div igxOverlayOutlet #igxBodyOverlayOutlet></div>
 </div>
 
 <div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>