Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into mdragnev/refactor-density

Author: mddragnev

CHANGELOG.md

@@ -10,6 +10,10 @@ All notable changes for each version of this project will be documented in this
   - Now accept the following  custom `inputFormat` options, as Angular's DatePipe:
       - Fractional seconds: S, SS, SSS.
       - Period (Am/Pm): a, aa, aaa, aaaa, aaaaa
+- `IgxPivotGrid`
+    - Added templatable row dimension headers displayed on the top, above all row headers.
+    - Replace the `showPivotConfigurationUI` property with `pivotUI` property, adding ability now to enable/disable the configuration UI and/or the new row dimension headers.
+    - Added `sortable` property for each IPivotDimension.
 
 ### General
 - Removed deprecated property `displayDensity`. Size is now controlled only through the custom CSS property `--ig-size`. Refer to the [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide) and components documentation for usage details.

projects/igniteui-angular/migrations/update-18_0_0/changes/inputs.json

@@ -40,6 +40,15 @@
                 "selector": "igx-row-island",
                 "type": "component"
             }
+        },
+        {
+            "name": "showPivotConfigurationUI",
+            "replaceWith": "pivotUI",
+            "valueTransform": "pivotConfigurationUI_to_pivotUI",
+            "owner": {
+                "selector": "igx-pivot-grid",
+                "type": "component"
+            }
         }
     ]
 }

projects/igniteui-angular/migrations/update-18_0_0/index.spec.ts

@@ -193,4 +193,36 @@ describe(`Update to ${version}`, () => {
             <igx-row-island/>
         </igx-hierarchical-grid>`);
     });
+    
+    it('should replace PivotGrid property `showPivotConfigurationUI` with `pivotUI`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-pivot-grid [showPivotConfigurationUI]="false"></igx-pivot-grid>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-pivot-grid [pivotUI]="{ showConfiguration: false }"></igx-pivot-grid>
+        `
+        );
+    });
+
+    it('should replace PivotGrid property `showPivotConfigurationUI` with `pivotUI`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-pivot-grid [showPivotConfigurationUI]="testProp"></igx-pivot-grid>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-pivot-grid [pivotUI]="{ showConfiguration: testProp }"></igx-pivot-grid>
+        `
+        );
+    });
 });

projects/igniteui-angular/migrations/update-18_0_0/index.ts

@@ -1,8 +1,8 @@
 import { Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
-import { UpdateChanges } from '../common/UpdateChanges';
 import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
 import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
 import type { Element } from '@angular/compiler';
+import { BoundPropertyObject, InputPropertyType, UpdateChanges } from "../common/UpdateChanges";
 
 const version = "18.0.0";
 
@@ -59,7 +59,22 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
                 // then we can`t do anything and we just remove the property.
         });
     }
-    applyChanges();
 
+    update.addValueTransform('pivotConfigurationUI_to_pivotUI', (args: BoundPropertyObject): void => {
+        args.bindingType = InputPropertyType.EVAL;
+
+        switch (args.value) {
+            case 'true':
+                args.value = '{ showConfiguration: true }';
+                break;
+            case 'false':
+                args.value = '{ showConfiguration: false }';
+                break;
+            default:
+                args.value = `{ showConfiguration: ${args.value} }`;
+        }
+    });
+
+    applyChanges();
     update.applyChanges();
 };

projects/igniteui-angular/package.json

@@ -94,7 +94,7 @@
         }
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~17.2.1320"
+        "@igniteui/angular-schematics": "~18.0.1330-beta.0"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json",

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -3055,6 +3055,15 @@
         border-bottom: 0;
     }
 
+    %igx-grid__tr-pivot--small-row-area {
+        height: var(--header-size);
+        align-items: flex-end;
+
+        border-inline-start: 0;
+        border-inline-end: 0;
+        border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
+    }
+
     %igx-grid__tr-pivot--filter-container {
         display: flex;
         flex-direction: column;
@@ -3112,6 +3121,33 @@
                 align-items: center;
             }
         }
+
+        igx-pivot-row-header-group {
+            padding-left: pad-inline(
+                map.get($grid-header-padding-inline, 'compact'),
+                map.get($grid-header-padding-inline, 'cosy'),
+                map.get($grid-header-padding-inline, 'comfortable')
+            );
+
+            igx-pivot-row-dimension-header {
+                align-items: center;
+
+                .igx-grid-th__icons {
+                    padding-right: pad-inline(
+                        map.get($grid-header-padding-inline, 'compact'),
+                        map.get($grid-header-padding-inline, 'cosy'),
+                        map.get($grid-header-padding-inline, 'comfortable')
+                    );
+                }
+            }
+
+            &:last-of-type {
+                igx-pivot-row-dimension-header {
+                    border-inline-end: 0;
+                }
+            }
+        }
     }
+
     // Pivot grid END
 }

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

@@ -34,7 +34,7 @@ import { ISortingExpression, ISortingStrategy, SortingDirection } from '../../da
 import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
-import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid/pivot-grid.interface';
+import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings } from '../pivot-grid/pivot-grid.interface';
 import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
 import { FormControl, FormGroup, ValidationErrors } from '@angular/forms';
 import { IgxGridValidationService } from '../grid/grid-validation.service';
@@ -1230,7 +1230,7 @@ export interface PivotGridType extends GridType {
      */
     allDimensions: IPivotDimension[],
     /** Specifies whether to show the pivot configuration UI in the grid. */
-    showPivotConfigurationUI: boolean;
+    pivotUI: IPivotUISettings;
     /** @hidden @internal */
     columnDimensions: IPivotDimension[];
     /** @hidden @internal */
@@ -1273,12 +1273,15 @@ export interface PivotGridType extends GridType {
     dimensionsChange: EventEmitter<IDimensionsChange>;
     /** Emits an event when the values in the pivot grid change. */
     valuesChange: EventEmitter<IValuesChange>;
+    /** Emits an event when the a dimension is sorted. */
+    dimensionsSortingExpressionsChange: EventEmitter<ISortingExpression[]>;
     /** @hidden @internal */
     pivotKeys: IPivotKeys;
     hasMultipleValues: boolean;
     excelStyleFilterMaxHeight: string;
     excelStyleFilterMinHeight: string;
     valueChipTemplate: TemplateRef<any>;
+    rowDimensionHeaderTemplate: TemplateRef<IgxColumnTemplateContext>;
 }
 
 export interface GridSVGIcon {

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

@@ -18,7 +18,7 @@
 <ng-container *ngIf="!column.columnGroup">
     <div class="igx-grid-th__icons">
         <ng-container *ngIf="column.sortable && !disabled">
-            <div class="sort-icon"
+            <div #sortIconContainer class="sort-icon"
                 [attr.data-sortIndex]="(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions"
                 (pointerdown)="onPointerDownIndicator($event)" (click)="onSortingIconClick($event)">
                 <ng-container *ngTemplateOutlet="sortIconTemplate; context: { $implicit:  this }"></ng-container>

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

@@ -49,6 +49,12 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     @ViewChild('defaultSortHeaderIconTemplate', { read: TemplateRef, static: true })
     protected defaultSortHeaderIconTemplate;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('sortIconContainer', { read: ElementRef })
+    protected sortIconContainer: ElementRef;
+
     /**
      * Returns the `aria-selected` of the header.
      */
@@ -172,7 +178,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     }
 
     public sortDirection = SortingDirection.None;
-    private _destroy$ = new Subject<boolean>();
+    protected _destroy$ = new Subject<boolean>();
 
     constructor(
         @Inject(IGX_GRID_BASE) public grid: GridType,

projects/igniteui-angular/src/lib/grids/pivot-grid/README.md

@@ -79,7 +79,7 @@ Below is the list of all inputs that are specific to the pivot-grid look/behavio
 |Name|Type|Description|
 |--- |--- |--- |
 |`pivotConfiguration`|IPivotConfiguration|Gets/Sets the pivot configuration with all related dimensions and values.|
-|`showPivotConfigurationUI`|boolean|Gets/Sets the pivot configuration ui for the pivot grid - chips and their corresponding containers for row, filter, column dimensions and values|
+|`pivotUI`|IPivotUISettings|Gets/Sets whether to show the ui for the pivot grid configuration - chips and their corresponding containers for row, filter, column dimensions and values. Also enables/disabled row dimension headers.|
 |`defaultExpandState`| boolean | Gets/Sets the default expand state for all rows. |
 
 Note that the pivot-grid extends base igx-grid, so most of the @Input properties make sense and work in the pivot-grid as well. Keep in mind that due to some specifics, not all grid features and @Input properties will work.