Merge branch '13.1.x' into dkamburov/add-gitattributes

.github/workflows/nodejs.yml

@@ -53,3 +53,7 @@ jobs:
         uses: coverallsapp/[email protected]
         with:
             github-token: ${{ github.token }}
+      - name: Build TypeDoc & SassDoc
+        run: |
+            npm run build:typedoc:en:production
+            npm run build:sassdoc:en:production

ROADMAP.md

@@ -2,29 +2,38 @@
 
 # Current Milestone
 
-## Milestone 20 (Due by Feb, 2022)
-
-1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700)
-2. igx-tree-grid:excel-style filtering should show children of parent elements returned from the filter [#10342](https://github.com/IgniteUI/igniteui-angular/issues/10342)
-3. Grid summary custom templating [#7981](https://github.com/IgniteUI/igniteui-angular/issues/7981)
-6. Tabs component does not support RTL [#5904](https://github.com/IgniteUI/igniteui-angular/issues/5904)
-7. Column moving feature on grid level [#10176](https://github.com/IgniteUI/igniteui-angular/issues/10176)
-8. Improve sorting experience for users [#9674](https://github.com/IgniteUI/igniteui-angular/issues/9674)
-9. Template grid excel filter footer [#10183](https://github.com/IgniteUI/igniteui-angular/issues/10183)
-10. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
+## Milestone 21 (Due by May, 2022)
+
+1. Improve sorting experience for users [#9674](https://github.com/IgniteUI/igniteui-angular/issues/9674)
+2. Template grid excel filter footer [#10183](https://github.com/IgniteUI/igniteui-angular/issues/10183) 
+3. Grid autosize feature with performance improvements [#10205](https://github.com/IgniteUI/igniteui-angular/issues/10205)
+4. Pivot Grid background color [#11158](https://github.com/IgniteUI/igniteui-angular/issues/11158)
+5. Fluent inputs styles [#11145](https://github.com/IgniteUI/igniteui-angular/issues/11145)
+6. Checkbox size and disabled state in Bootstrap [#11096](https://github.com/IgniteUI/igniteui-angular/issues/11096)
+7. [Pivot] Integrate ESF in tree view [#11049](https://github.com/IgniteUI/igniteui-angular/issues/11049) 
+8. Rework default sorting/filtering strategy's and their methods to be grid agnostic [#10922](https://github.com/IgniteUI/igniteui-angular/issues/10922)
+9. Validator service for igxGrid editing [#6501](https://github.com/IgniteUI/igniteui-angular/issues/6501)
 
 ## Going down the road
 
-# Due in 2022
-
-1. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
-2. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481)
-3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
-4. Grid autosize feature with performance improvements [#10205](https://github.com/IgniteUI/igniteui-angular/issues/10205)
+1. Scheduler component [#8097](https://github.com/IgniteUI/igniteui-angular/issues/8097)
+2. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
+3. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481)
+4. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
 5. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064)
+6. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
+7. Switch overlay service from angular animations to native Web Animations [#8780](https://github.com/IgniteUI/igniteui-angular/issues/8780)
 
 # Previous Milestone
 
+## Milestone 20 (Released March 2nd, 2022)
+
+1. **[DONE]** Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700)
+2. **[DONE]** igx-tree-grid:excel-style filtering should show children of parent elements returned from the filter [#10342](https://github.com/IgniteUI/igniteui-angular/issues/10342)
+3. **[DONE]** Grid summary custom templating [#7981](https://github.com/IgniteUI/igniteui-angular/issues/7981)
+6. **[DONE]** Tabs component does not support RTL [#5904](https://github.com/IgniteUI/igniteui-angular/issues/5904)
+7. **[DONE]** Column moving feature on grid level [#10176](https://github.com/IgniteUI/igniteui-angular/issues/10176)
+
 ## Milestone 19 (Released November 23rd, 2021)
 
 1. **[DONE]** Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)

gulpfile.js

@@ -138,7 +138,7 @@ module.exports.copySchematics = (cb) => {
 const typedocBuildTheme = (cb) => {
     spawnSync(`typedoc`, [TYPEDOC.PROJECT_PATH,
     "--tsconfig",
-    path.join(__dirname,"tsconfig.json")], { stdio: 'inherit', shell: true });
+    path.join(__dirname,"tsconfig.typedoc.json")], { stdio: 'inherit', shell: true });
     cb();
 };
 typedocBuildTheme.displayName = 'typedoc-build:theme';
@@ -200,7 +200,7 @@ function typedocImportJsonFn(cb) {
         TYPEDOC.EXPORT_JSON_PATH,
         "--warns",
         "--tsconfig",
-        path.join(__dirname,"tsconfig.json")],
+        path.join(__dirname,"tsconfig.typedoc.json")],
         { stdio: 'inherit', shell: true});
     cb();
 }
@@ -226,7 +226,7 @@ function typedocBuildDocsJA (cb) {
             '--localize',
             'jp',
             "--tsconfig",
-            path.join(__dirname,"tsconfig.json")], { stdio: 'inherit', shell: true });
+            path.join(__dirname,"tsconfig.typedoc.json")], { stdio: 'inherit', shell: true });
 
         cb();
 }
@@ -237,7 +237,7 @@ function typedocBuildDocsEN (cb) {
             '--localize',
             'en',
             "--tsconfig",
-            path.join(__dirname,"tsconfig.json")], { stdio: 'inherit', shell: true});
+            path.join(__dirname,"tsconfig.typedoc.json")], { stdio: 'inherit', shell: true});
 
         cb();
 }

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

@@ -767,7 +767,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         for (let i = 0; i < l; i++) {
             const rNode = rNodes[i];
             if (rNode) {
-                const h = rNode.offsetHeight || parseInt(this.igxForItemSize, 10);
+                const height = window.getComputedStyle(rNode).getPropertyValue('height');
+                const h = parseFloat(height) || parseInt(this.igxForItemSize, 10);
                 const index = this.state.startIndex + i;
                 if (!this.isRemote && !this.igxForOf[index]) {
                     continue;

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -517,9 +517,6 @@ export class IgxFilteringService implements OnDestroy {
         }
 
         const fieldFilterIndex = filteringTree.findIndex(fieldName);
-        if (fieldFilterIndex > -1) {
-            filteringTree.filteringOperands.splice(fieldFilterIndex, 1);
-        }
         this.prepare_filtering_expression(filteringTree, fieldName, term, conditionOrExpressionsTree, ignoreCase, fieldFilterIndex);
         grid.filteringExpressionsTree = filteringTree;
     }
@@ -537,27 +534,30 @@ export class IgxFilteringService implements OnDestroy {
         insertAtIndex = -1,
         createNewTree = false): FilteringExpressionsTree {
 
-        const expressionsTree = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
+        let expressionsTree = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
             conditionOrExpressionsTree as IFilteringExpressionsTree : null;
         const condition = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
             null : conditionOrExpressionsTree as IFilteringOperation;
-        const newExpression: IFilteringExpression = { fieldName, searchVal, condition, ignoreCase };
 
-        const newExpressionsTree: FilteringExpressionsTree = createNewTree ?
-            new FilteringExpressionsTree(filteringState.operator, filteringState.fieldName) : filteringState as FilteringExpressionsTree;
+        let newExpressionsTree = filteringState as FilteringExpressionsTree;
+
+        if (createNewTree) {
+            newExpressionsTree = new FilteringExpressionsTree(filteringState.operator, filteringState.fieldName);
+            newExpressionsTree.filteringOperands = [...filteringState.filteringOperands];
+        }
+
+        if (condition) {
+            const newExpression: IFilteringExpression = { fieldName, searchVal, condition, ignoreCase };
+            expressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName);
+            expressionsTree.filteringOperands.push(newExpression);
+        }
 
-        // no expressions tree found for this field
         if (expressionsTree) {
             if (insertAtIndex > -1) {
                 newExpressionsTree.filteringOperands[insertAtIndex] = expressionsTree;
             } else {
                 newExpressionsTree.filteringOperands.push(expressionsTree);
             }
-        } else if (condition) {
-            // create expressions tree for this field and add the new expression to it
-            const newExprTree: FilteringExpressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName);
-            newExprTree.filteringOperands.push(newExpression);
-            newExpressionsTree.filteringOperands.push(newExprTree);
         }
 
         return newExpressionsTree;

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -3772,7 +3772,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
         }));
 
-        it('display dansity is properly applied on the column selection container', fakeAsync(() => {
+        it('display density is properly applied on the column selection container', fakeAsync(() => {
             grid.columnSelection = GridSelectionMode.multiple;
             fix.detectChanges();
 
@@ -4375,6 +4375,94 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 [true, true, true]);
         }));
 
+        it('Should correctly modify existing filters.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', '(Blanks)', 'Ignite UI for Angular', 'Ignite UI for JavaScript',
+                    'NetAdvantage', 'Some other item with Script'],
+                [true, true, true, true, true, true]);
+            toggleExcelStyleFilteringItems(fix, true, 1, 5);
+            expect(grid.rowList.length).toBe(3);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', '20', '127', '254'],
+                [true, true, true, true]);
+            toggleExcelStyleFilteringItems(fix, true, 2);
+            expect(grid.rowList.length).toBe(2);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', 'Ignite UI for Angular', 'Ignite UI for JavaScript'],
+                [true, true, true]);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', '20', '127', '254'],
+                [null, true, false, true]);
+            toggleExcelStyleFilteringItems(fix, true, 1, 2, 3);
+            expect(grid.rowList.length).toBe(1);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', '20', '127', '254'],
+                [null, false, true, false]);
+        }));
+
+        it('Should correctly modify the first one of the existing filters.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', '(Blanks)', 'Ignite UI for Angular', 'Ignite UI for JavaScript',
+                    'NetAdvantage', 'Some other item with Script'],
+                [true, true, true, true, true, true]);
+            toggleExcelStyleFilteringItems(fix, true, 1, 5);
+            expect(grid.rowList.length).toBe(3);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', '20', '127', '254'],
+                [true, true, true, true]);
+            toggleExcelStyleFilteringItems(fix, true, 2);
+            expect(grid.rowList.length).toBe(2);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', 'Ignite UI for Angular', 'Ignite UI for JavaScript'],
+                [true, true, true]);
+            toggleExcelStyleFilteringItems(fix, true, 1);
+            expect(grid.rowList.length).toBe(1);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', '254'],
+                [true, true]);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            tick(100);
+            fix.detectChanges();
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', 'Ignite UI for Angular', 'Ignite UI for JavaScript'],
+                [null, false, true]);
+        }));
+
         it('Should display the ESF based on the filterIcon within the grid', async () => {
             // Test prerequisites
             grid.width = '800px';
@@ -6585,8 +6673,6 @@ const verifyExcelStyleFilterAvailableOptions = (fix, labels: string[], checked:
     const checkboxElements: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
 
     expect(labelElements.length).toBe(labels.length, 'incorrect rendered list items count');
-    expect(labelElements.length).toBeGreaterThan(2);
-    expect(checkboxElements.length).toBeGreaterThan(2);
     labels.forEach((l, index) => {
         expect(l).toEqual(labelElements[index].innerText);
     });

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

@@ -49,7 +49,7 @@
             </ng-template>
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>
-            <igx-pivot-row [style.min-height.px]="renderedRowHeight" [gridID]="id" [index]="rowIndex" [data]="rowData"
+            <igx-pivot-row [style.height.px]="renderedRowHeight" [gridID]="id" [index]="rowIndex" [data]="rowData"
                 [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-pivot-row>
@@ -138,6 +138,7 @@
             <igx-pivot-row-dimension-content role='row' class="igx-grid-thead" [grid]="this"
                                              [dimension]='rowData.dimensions[dimIndex]'
                                              [rootDimension]='dim'
+                                             [style.height.px]="renderedRowHeight * (rowData.rowSpan || 1)"
                                              [rowIndex]='rowIndex' [rowData]='rowData'
                                              [density]="displayDensity" [width]="rowDimensionWidthToPixels(dim)">
             </igx-pivot-row-dimension-content>

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

@@ -168,7 +168,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     * @internal
     */
     public get maxContainerHeight() {
-        return this.totalDepth > 1 ? this.totalDepth * this.grid.renderedRowHeight : undefined;
+        return this.totalDepth * this.grid.renderedRowHeight;
     }
 
     /**

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

@@ -6,7 +6,7 @@
                 [style.min-width]="grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [style.flex-basis]="grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [rowIndex]="rowIndex"
-                [style.height.px]='headerHeight' [parent]='this'>
+                [parent]='this'>
             </igx-pivot-row-dimension-header-group>
     </div>
 </div>

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

@@ -135,11 +135,6 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
         return this.rowData.rowSpan || 1;
     }
 
-    public get headerHeight() {
-
-        return this.rowSpan > 1 ? this.rowSpan * this.grid.rowHeight + (this.rowSpan - 1) : this.grid.rowHeight;
-    }
-
     protected extractFromDimensions() {
         const col = this.extractFromDimension(this.dimension, this.rowData);
         const prevDims = [];

tsconfig.json

@@ -31,17 +31,11 @@
     "exclude": [
         "dist",
         "projects/igniteui-angular/migrations/",
-        "projects/igniteui-angular/schematics/"
+        "projects/igniteui-angular/schematics/",
+        "projects/igniteui-angular/cypress/",
+        "cypress/",
+        "e2e/"
     ],
-    "typedocOptions": {
-        "out": "dist/igniteui-angular/docs/typescript",
-        "exclude": "**/*.spec.ts",
-        "theme":  "node_modules/ig-typedoc-theme/dist",
-        "excludePrivate": true,
-        "excludeProtected": true,
-        "name": "Ignite UI for Angular",
-        "readme": "none"
-    },
     "angularCompilerOptions": {
         "generateDeepReexports": true,
         "strictTemplates": true,

tsconfig.typedoc.json

@@ -1,12 +1,20 @@
 {
     "extends": "./tsconfig.json",
     "exclude": [
-
         "dist",
         "projects/igniteui-angular/migrations/",
         "projects/igniteui-angular/schematics/",
         "e2e",
         "cypress",
         "projects/igniteui-angular/cypress/"
-    ]
+    ],
+    "typedocOptions": {
+        "out": "dist/igniteui-angular/docs/typescript",
+        "exclude": "**/*.spec.ts",
+        "theme":  "node_modules/ig-typedoc-theme/dist",
+        "excludePrivate": true,
+        "excludeProtected": true,
+        "name": "Ignite UI for Angular",
+        "readme": "none"
+    },
 }