Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into ddincheva/gridPaging12.1

Author: ddincheva

CHANGELOG.md

@@ -2,11 +2,32 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-## 12.0.1
+## 12.1.0
 
 ### New Features
+- `Toolbar Actions`
+    - Exposed a new input property `overlaySettings` for all column actions (`hiding` | `pinning` | `advanced filtering` | `exporter`). Example below:
+
+    ```html
+    <igx-grid-toolbar-actions>
+        <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsGlobal"></igx-grid-toolbar-pinning>
+        <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;
+    - 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
+    <igx-paginator #paginator>
+        <igx-paginator-content>
+            <igx-page-size></igx-page-size>
+            <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()">PREV</button>
+            <span>Page {{paginator.page}} of {{paginator.totalPages}}</span>
+            <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()">NEXT</button>
+        </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) => {
@@ -23,7 +44,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`
@@ -57,6 +83,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
@@ -3201,7 +3231,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/date-time-editor/date-time-editor.directive.spec.ts

@@ -1,6 +1,6 @@
 import { IgxDateTimeEditorDirective, IgxDateTimeEditorModule } from './date-time-editor.directive';
 import { DatePart } from './date-time-editor.common';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, formatDate } from '@angular/common';
 import { Component, ViewChild, DebugElement, EventEmitter, Output, SimpleChange, SimpleChanges } from '@angular/core';
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators, NgControl } from '@angular/forms';
@@ -15,7 +15,7 @@ describe('IgxDateTimeEditor', () => {
     let dateTimeEditor: IgxDateTimeEditorDirective;
     describe('Unit tests', () => {
         const maskParsingService = jasmine.createSpyObj('MaskParsingService',
-            ['parseMask', 'restoreValueFromMask', 'parseMaskValue', 'applyMask']);
+            ['parseMask', 'restoreValueFromMask', 'parseMaskValue', 'applyMask', 'parseValueFromMask']);
         const renderer2 = jasmine.createSpyObj('Renderer2', ['setAttribute']);
         const locale = 'en';
         const _ngModel = {
@@ -647,11 +647,7 @@ describe('IgxDateTimeEditor', () => {
                 inputElement.triggerEventHandler('blur', { target: inputElement.nativeElement });
                 fixture.detectChanges();
                 date = new Date(2010, 10, 10, 2, 0, 0);
-                const longTimeOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true };
-                result = ControlsFunction.formatDate(date, longTimeOptions);
-                const offset = date.getTimezoneOffset();
-                const tz = (offset > 0 ? '-' : '+') + (Math.abs(offset) / 60);
-                result = `${result} GMT${tz}`;
+                result = formatDate(date, 'longTime', 'en-US');
                 expect(inputElement.nativeElement.value).toEqual(result);
             });
             it('should be able to apply custom display format.', fakeAsync(() => {

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -254,21 +254,21 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     }
   }
 
-  private get hasDateParts() {
+  private get hasDateParts(): boolean {
     return this._inputDateParts.some(
       p => p.type === DatePart.Date
         || p.type === DatePart.Month
         || p.type === DatePart.Year);
   }
 
-  private get hasTimeParts() {
+  private get hasTimeParts(): boolean {
     return this._inputDateParts.some(
       p => p.type === DatePart.Hours
         || p.type === DatePart.Minutes
         || p.type === DatePart.Seconds);
   }
 
-  private get dateValue() {
+  private get dateValue(): Date {
     return this._dateValue;
   }
 
@@ -285,7 +285,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   }
 
   @HostListener('wheel', ['$event'])
-  public onWheel(event: WheelEvent) {
+  public onWheel(event: WheelEvent): void {
     if (!this._isFocused) {
       return;
     }
@@ -305,7 +305,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   }
 
   /** @hidden @internal */
-  public ngOnChanges(changes: SimpleChanges) {
+  public ngOnChanges(changes: SimpleChanges): void {
     if (changes['locale'] && !changes['locale'].firstChange) {
       this.updateDefaultFormat();
       if (!this._inputFormat) {
@@ -406,7 +406,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   public setDisabledState?(_isDisabled: boolean): void { }
 
   /** @hidden @internal */
-  public onInputChanged(isComposing: boolean) {
+  public onInputChanged(isComposing: boolean): void {
     super.onInputChanged(isComposing);
     if (this.inputIsComplete()) {
       const parsedDate = this.parseDate(this.inputValue);
@@ -479,6 +479,10 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     super.onBlur(value);
   }
 
+  // the date editor sets its own inputFormat as its placeholder if none is provided
+  /** @hidden */
+  protected setPlaceholder(_value: string): void { }
+
   private updateDefaultFormat(): void {
     this._defaultInputFormat = DateTimeUtil.getDefaultInputFormat(this.locale);
   }
@@ -508,7 +512,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     }
   }
 
-  private setMask(inputFormat: string) {
+  private setMask(inputFormat: string): void {
     const oldFormat = this._inputDateParts?.map(p => p.format).join('');
     this._inputDateParts = DateTimeUtil.parseDateTimeFormat(inputFormat);
     inputFormat = this._inputDateParts.map(p => p.format).join('');
@@ -599,7 +603,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     return newDate;
   }
 
-  private trySpinValue(datePart: DatePart, delta?: number, negative = false) {
+  private trySpinValue(datePart: DatePart, delta?: number, negative = false): Date {
     if (!delta) {
       // default to 1 if a delta is set to 0 or any other falsy value
       delta = this.datePartDeltas[datePart] || 1;
@@ -608,7 +612,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     return this.spinValue(datePart, spinValue) || new Date();
   }
 
-  private setDateValue(value: Date | string) {
+  private setDateValue(value: Date | string): void {
     this._dateValue = DateTimeUtil.isValidDate(value)
       ? value
       : DateTimeUtil.parseIsoDate(value);

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -92,7 +92,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
      * ```
      */
     @Input()
-    public igxForOf: any[];
+    public igxForOf: any[] | null;
 
     /**
      * An @Input property that sets the property name from which to read the size in the data object.