Merge from base.

Author: MKirova

CHANGELOG.md

@@ -26,6 +26,11 @@ All notable changes for each version of this project will be documented in this
     - Exposed new input `buttonText` which sets the text that is displayed inside the dropdown button in the toolbar.
 - `IgxCombo`
     - Added `groupSortingDirection` input, which allows you to set groups sorting order.
+- `igxChip`
+    - Exposed drop directive related events for the chip when it's used as a drop target:
+         - `dragLeave`
+         - `dragDrop`
+         - `dragOver`
 
 ### General
 
@@ -53,13 +58,14 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** - The following input has been removed
         - Input `columns`. Use `igxGrid` `columns` input instead.
 - `IgxCarousel`
-    - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`. 
+    - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`.
 
 ## 12.2.3
 
 ### General
 - **Breaking Change** - `IgxPercentSummaryOperand` and `IgxCurrencySummaryOperand` have been removed and `IgxNumberSummaryOperand` should be used instead. If you have used the percent or currency summary operands to extend a custom summary operand from them, then change the custom operand to extend from the number summary operand.
-
+- `IgxToastComponent`
+    - **Deprecated** - The `position` input property has been deprecated. Use `positionSettings` input instead.   
 ## 12.2.1
 
 ### New Features

projects/igniteui-angular/src/lib/chips/README.md

@@ -167,6 +167,9 @@ The chips can be focused using the `Tab` key or by clicking on them. Chips can b
 | `selectedChanging` | `IChipSelectEventArgs` | Fired when the chip is being selected/deselected. Cancellable |
 | `keyDown ` | `IChipKeyDownEventArgs` | Fired when the chip keyboard navigation is being used. |
 | `dragEnter ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has entered the current chip area. |
+| `dragLeave ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has left the current chip area. |
+| `dragDrop ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has been dropped in the current chip area. |
+| `dragOver ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has moved over the current chip area. |
 
 ## IgxChipsAreaComponent
 

projects/igniteui-angular/src/lib/chips/chip.component.html

@@ -10,6 +10,8 @@
     (dragClick)="onChipDragClicked($event)"
     igxDrop
     (enter)="onChipDragEnterHandler($event)"
+    (leave)= "onChipDragLeaveHandler($event)"
+    (over)="onChipOverHandler($event)"
     (dropped)="onChipDrop($event)">
 
     <div #selectContainer [ngClass]="selectClass(selected)">

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -419,12 +419,51 @@ export class IgxChipComponent extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onDragEnter)="chipEnter($event)">
+     * <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragEnter)="chipEnter($event)">
      * ```
      */
     @Output()
     public dragEnter = new EventEmitter<IChipEnterDragAreaEventArgs>();
 
+    /**
+     * Emits an event when the `IgxChipComponent` has left the `IgxChipsAreaComponent`.
+     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as
+     * the original drop event arguments.
+     *
+     * @example
+     * ```html
+     * <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragLeave)="chipLeave($event)">
+     * ```
+     */
+    @Output()
+    public dragLeave = new EventEmitter<IChipEnterDragAreaEventArgs>();
+
+    /**
+     * Emits an event when the `IgxChipComponent` is over the `IgxChipsAreaComponent`.
+     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as
+     * the original drop event arguments.
+     *
+     * @example
+     * ```html
+     * <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragOver)="chipOver($event)">
+     * ```
+     */
+     @Output()
+     public dragOver = new EventEmitter<IChipEnterDragAreaEventArgs>();
+
+    /**
+     * Emits an event when the `IgxChipComponent` has been dropped in the `IgxChipsAreaComponent`.
+     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as
+     * the original drop event arguments.
+     *
+     * @example
+     * ```html
+     * <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragDrop)="chipLeave($event)">
+     * ```
+     */
+    @Output()
+    public dragDrop = new EventEmitter<IChipEnterDragAreaEventArgs>();
+
     /**
      * @hidden
      * @internal
@@ -743,14 +782,46 @@ export class IgxChipComponent extends DisplayDensityBase {
         this.dragEnter.emit(eventArgs);
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public onChipDragLeaveHandler(event: IDropBaseEventArgs) {
+        const eventArgs: IChipEnterDragAreaEventArgs = {
+            owner: this,
+            dragChip: event.drag.data.chip,
+            originalEvent: event
+        };
+        this.dragLeave.emit(eventArgs);
+    }
+
     /**
      * @hidden
      * @internal
      */
     public onChipDrop(event: IDropDroppedEventArgs) {
         // Cancel the default drop logic
         event.cancel = true;
+        const eventArgs: IChipEnterDragAreaEventArgs = {
+            owner: this,
+            dragChip: event.drag.data.chip,
+            originalEvent: event
+        };
+        this.dragDrop.emit(eventArgs);
     }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public onChipOverHandler(event: IDropDroppedEventArgs) {
+            const eventArgs: IChipEnterDragAreaEventArgs = {
+                owner: this,
+                dragChip: event.drag.data.chip,
+                originalEvent: event
+            };
+            this.dragOver.emit(eventArgs);
+        }
     // End chip igxDrop behavior
 
     protected changeSelection(newValue: boolean, srcEvent = null) {

projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts

@@ -184,8 +184,8 @@ export class IgxGridHeaderRowComponent implements DoCheck {
     }
 
     constructor(
-        private ref: ElementRef<HTMLElement>,
-        private cdr: ChangeDetectorRef
+        protected ref: ElementRef<HTMLElement>,
+        protected cdr: ChangeDetectorRef
     ) { }
 
     /**

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

@@ -2,7 +2,7 @@
 <ng-content select="igx-grid-toolbar"></ng-content>
 
 <!-- Grid table head row area -->
-<igx-pivot-header-row class="igx-grid-thead" tabindex="0"
+<igx-pivot-header-row class="igx-grid-thead" tabindex="0"  style='flex-direction: column;'
     [grid]="this"
     [hasMRL]="hasColumnLayouts"
     [density]="displayDensity"
@@ -31,10 +31,10 @@
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
-        | pivotGridFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
-        | pivotGridRow:pivotConfiguration:expansionStates
-        | pivotGridRowExpansion:pivotConfiguration:expansionStates
-        | pivotGridColumn:pivotConfiguration:expansionStates"
+        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree
+        | pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger
+        | pivotGridRowExpansion:pivotConfiguration:expansionStates:pipeTrigger
+        | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -210,8 +210,24 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     public get pivotRowWidths() {
-        const rowDimCount = this.pivotConfiguration.rows.length;
-        return MINIMUM_COLUMN_WIDTH * rowDimCount;
+        const rowDimCount = this.rowDimensions.length;
+        return MINIMUM_COLUMN_WIDTH * rowDimCount || MINIMUM_COLUMN_WIDTH;
+    }
+
+    public get rowDimensions() {
+        return this.pivotConfiguration.rows.filter(x => x.enabled) || [];
+    }
+
+    public get columnDimensions() {
+        return this.pivotConfiguration.columns.filter(x => x.enabled) || [];
+    }
+
+    public get filterDimensions() {
+        return this.pivotConfiguration.filters?.filter(x => x.enabled) || [];
+    }
+
+    public get values() {
+        return this.pivotConfiguration.values.filter(x => x.enabled);
     }
 
     public toggleColumn(col: IgxColumnComponent) {
@@ -269,8 +285,16 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     protected calcGridHeadRow() {
     }
 
+    /**
+     * @hidden @internal
+     */
+    protected getDataBasedBodyHeight(): number {
+        const dvl = this.dataView?.length || 0;
+        return dvl < this._defaultTargetRecordNumber ? 0 : this.defaultTargetBodyHeight;
+    }
+
     protected get hasMultipleValues() {
-        return this.pivotConfiguration.values.length > 1;
+        return this.values.length > 1;
     }
 
     /**
@@ -289,10 +313,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             fieldsMap = this.generateFromData(filteredFields);
         } else {
             fieldsMap = PivotUtil.getFieldsHierarchy(
-                data,
-                this.pivotConfiguration.columns,
-                PivotDimensionType.Column,
-                { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
+            data,
+            this.columnDimensions,
+            PivotDimensionType.Column,
+            {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
             );
         }
         columns = this.generateColumnHierarchy(fieldsMap, data);
@@ -385,7 +409,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     protected getMeasureChildren(colFactory, data, parent, hidden) {
         const cols = [];
-        this.pivotConfiguration.values.forEach(val => {
+        this.values.forEach(val => {
             const ref = colFactory.create(this.viewRef.injector);
             ref.instance.header = val.displayName || val.member;
             ref.instance.field = parent.field + '-' + val.member;

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts

@@ -11,8 +11,8 @@ export interface IPivotConfiguration {
     rows: IPivotDimension[] | null;
     columns: IPivotDimension[] | null;
     values: IPivotValue[] | null;
-    // A predefined or defined via the `igxPivotSelector` filter expression tree to be applied in the filter pipe.
-    filters: FilteringExpressionsTree | null;
+    // dimensions to be displayed in the filter area.
+    filters?: IPivotDimension[] | null;
 }
 
 export interface IPivotDimension {
@@ -24,6 +24,8 @@ export interface IPivotDimension {
     memberFunction?: (data: any) => any;
     // Enables/Disables a particular dimension from pivot structure.
     enabled: boolean;
+    // A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
+    filter?: FilteringExpressionsTree | null;
 }
 
 export interface IPivotValue {
@@ -54,7 +56,8 @@ export interface IPivotKeys {
 
 export enum PivotDimensionType {
     Row,
-    Column
+    Column,
+    Filter
 }
 
 export interface IPivotDimensionData {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts

@@ -3,9 +3,10 @@ import { cloneArray } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
-import { IPivotConfiguration, IPivotKeys } from './pivot-grid.interface';
+import { IPivotConfiguration, IPivotDimension, IPivotKeys } from './pivot-grid.interface';
 import { PivotColumnDimensionsStrategy, PivotRowDimensionsStrategy } from '../../data-operations/pivot-strategy';
 import { PivotUtil } from './pivot-util';
+import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 /**
  * @hidden
  */
@@ -21,10 +22,12 @@ export class IgxPivotRowPipe implements PipeTransform {
         collection: any,
         config: IPivotConfiguration,
         _: Map<any, boolean>,
+        _pipeTrigger?: number,
         pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
     ): any[] {
-       const rowStrategy = config.rowStrategy ||  PivotRowDimensionsStrategy.instance();
-       return rowStrategy.process(collection.slice(0), config.rows, config.values, pivotKeys);
+        const enabledRows = config.rows.filter(x => x.enabled);
+        const rowStrategy = config.rowStrategy ||  PivotRowDimensionsStrategy.instance();
+        return rowStrategy.process(collection.slice(0), enabledRows, config.values, pivotKeys);
     }
 }
 
@@ -43,12 +46,14 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
         collection: any[],
         config: IPivotConfiguration,
         expansionStates: Map<any, boolean>,
+        _pipeTrigger?: number,
         pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
     ): any[] {
-        const data = collection.slice(0);
+        const enabledRows = config.rows.filter(x => x.enabled);
+        const data = collection ? collection.slice(0) : [];
         let totalLlv = 0;
         const prevDims = [];
-        for (const row of config.rows) {
+        for (const row of enabledRows) {
             const lvl = PivotUtil.getDimensionDepth(row);
             totalLlv += lvl;
             PivotUtil.flattenHierarchy(data, config, row, expansionStates, pivotKeys, totalLlv, prevDims, 0);
@@ -72,10 +77,14 @@ export class IgxPivotColumnPipe implements PipeTransform {
         collection: any,
         config: IPivotConfiguration,
         _: Map<any, boolean>,
+        _pipeTrigger?: number,
         pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
     ): any[] {
-        const colStrategy = config.columnStrategy ||  PivotColumnDimensionsStrategy.instance();
-        return colStrategy.process(collection, config.columns, config.values, pivotKeys);
+        const enabledColumns = config.columns.filter(x => x.enabled);
+        const enabledValues = config.values.filter(x => x.enabled);
+
+        const colStrategy = config.columnStrategy || PivotColumnDimensionsStrategy.instance();
+        return colStrategy.process(collection, enabledColumns, enabledValues, pivotKeys);
     }
 }
 
@@ -89,10 +98,20 @@ export class IgxPivotColumnPipe implements PipeTransform {
 export class IgxPivotGridFilterPipe implements PipeTransform {
 
     public transform(collection: any[],
-        expressionsTree: IFilteringExpressionsTree,
+        config: IPivotConfiguration,
         filterStrategy: IFilteringStrategy,
         advancedExpressionsTree: IFilteringExpressionsTree): any[] {
 
+        const allDimensions = config.rows.concat(config.columns).concat(config.filters);
+        const enabledDimensions = allDimensions.filter(x => x && x.enabled);
+
+        const expressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
+        // add expression trees from all filters
+        enabledDimensions.forEach(x => {
+            if (x.filter) {
+                expressionsTree.filteringOperands.push(x.filter);
+            }
+        });
         const state = {
             expressionsTree,
             strategy: filterStrategy,