Merge branch 'master' into roadmap-upadte-m19-30nov21

Author: kdinev

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 13.0.1
+
+### New Features
+- Add `igxSummary` directive in order to re-template the default summary cell layout.
+    - Expose `summaryTemplate` input in order to bind the column summary template through API.
+    - Expose `summaryRowHeight` property which overrides the default hight of the summary row.
+    - Code example below:
+
+    ```html
+    <igx-column ... [hasSummary]="true">
+        <ng-template igxSummary let-summaryResult>
+            <span> My custom summary template</span>
+            <span>{{ summaryResult[0].label }} - {{ summaryResult[0].summaryResult }}</span>
+        </ng-template>
+    </igx-column>
+    ```
+    - Please, refer to the [Summaries](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/summaries#summary-template) topic for more information.
+
 ## 13.0.0
 
 ### New Features

projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts

@@ -166,6 +166,29 @@ describe('Rendering Tests', () => {
             expect(accordion.panelCollapsed.emit).toHaveBeenCalledTimes(5);
         }));
 
+        it(`Should collapse all expanded and not disabled panels except for the last one when setting singleBranchExpand to true`, () => {
+            expect(accordion.panels[0].collapsed).toBeTrue();
+            expect(accordion.panels[1].collapsed).toBeTrue();
+            expect(accordion.panels[2].collapsed).toBeFalse();
+            expect(accordion.panels[3].collapsed).toBeFalse();
+
+            accordion.panels[1].collapsed = false;
+            fix.detectChanges();
+
+            expect(accordion.panels[0].collapsed).toBeTrue();
+            expect(accordion.panels[1].collapsed).toBeFalse();
+            expect(accordion.panels[2].collapsed).toBeFalse();
+            expect(accordion.panels[3].collapsed).toBeFalse();
+
+            accordion.singleBranchExpand = true;
+            fix.detectChanges();
+
+            expect(accordion.panels[0].collapsed).toBeTrue();
+            expect(accordion.panels[1].collapsed).toBeTrue();
+            expect(accordion.panels[2].collapsed).toBeFalse();
+            expect(accordion.panels[3].collapsed).toBeFalse();
+        });
+
         it('Should emit ing and ed events when expand panel state is toggled', fakeAsync(() => {
             spyOn(accordion.panelExpanded, 'emit').and.callThrough();
             spyOn(accordion.panelExpanding, 'emit').and.callThrough();

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

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterViewInit, Component, ContentChildren, EventEmitter,
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChildren, EventEmitter,
     HostBinding, Input, OnDestroy, Output, QueryList } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -113,7 +113,16 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
      * ```
      */
     @Input()
-    public singleBranchExpand = false;
+    public get singleBranchExpand(): boolean {
+        return this._singleBranchExpand;
+    }
+
+    public set singleBranchExpand(val: boolean) {
+        this._singleBranchExpand = val;
+        if (val) {
+            this.collapseAllExceptLast();
+        }
+    }
 
     /**
      * Emitted before a panel is expanded.
@@ -200,12 +209,16 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
     private _destroy$ = new Subject<void>();
     private _unsubChildren$ = new Subject<void>();
     private _enabledPanels!: IgxExpansionPanelComponent[];
+    private _singleBranchExpand = false;
 
-    constructor() { }
+    constructor(private cdr: ChangeDetectorRef) { }
 
     /** @hidden @internal **/
     public ngAfterContentInit(): void {
         this.updatePanelsAnimation();
+        if (this.singleBranchExpand) {
+            this.collapseAllExceptLast();
+        }
     }
 
     /** @hidden @internal **/
@@ -256,6 +269,16 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
         this.panels.forEach(panel => panel.collapse());
     }
 
+    private collapseAllExceptLast(): void {
+        const lastExpanded = this.panels?.filter(p => !p.collapsed && !p.header.disabled).pop();
+        this.panels?.forEach((p: IgxExpansionPanelComponent) => {
+            if (p !== lastExpanded && !p.header.disabled) {
+                p.collapsed = true;
+            }
+        });
+        this.cdr.detectChanges();
+    }
+
     private handleKeydown(event: KeyboardEvent, panel: IgxExpansionPanelComponent): void {
         const key = event.key.toLowerCase();
         if (!(ACCORDION_NAVIGATION_KEYS.has(key))) {

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -95,7 +95,7 @@ describe('igxCombo', () => {
             get: mockNgControl
         });
         mockSelection.get.and.returnValue(new Set([]));
-        const mockIconService = new IgxIconService(null, null, null);
+        const mockIconService = new IgxIconService(null, null, null, null);
         it('should correctly implement interface methods - ControlValueAccessor ', () => {
             combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService,
                 mockIconService, null, null, mockInjector);

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

@@ -1117,7 +1117,7 @@
         z-index: 10000;
 
         %igx-grid__hierarchical-expander--empty {
-            border-#{$right}: 1px solid transparent;
+            border-#{$right}: rem(1px) solid var-get($theme, 'header-border-color');
         }
     }
 

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -43,7 +43,8 @@ import {
     IgxCellHeaderTemplateDirective,
     IgxCellEditorTemplateDirective,
     IgxCollapsibleIndicatorTemplateDirective,
-    IgxFilterCellTemplateDirective
+    IgxFilterCellTemplateDirective,
+    IgxSummaryTemplateDirective
 } from './templates.directive';
 import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './interfaces';
 import { DropPosition } from '../moving/moving.service';
@@ -833,6 +834,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      */
     @ContentChild(IgxFilterCellTemplateDirective, { read: IgxFilterCellTemplateDirective })
     public filterCellTemplateDirective: IgxFilterCellTemplateDirective;
+    /**
+     * @hidden
+     */
+    @ContentChild(IgxSummaryTemplateDirective, { read: IgxSummaryTemplateDirective })
+    protected summaryTemplateDirective: IgxSummaryTemplateDirective;
     /**
      * @hidden
      */
@@ -853,7 +859,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      */
     @ContentChild(IgxCollapsibleIndicatorTemplateDirective, { read: IgxCollapsibleIndicatorTemplateDirective, static: false })
     protected collapseIndicatorTemplate: IgxCollapsibleIndicatorTemplateDirective;
-
     /**
      * @hidden
      */
@@ -1109,6 +1114,39 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
                 return '80';
         }
     }
+    /**
+     * Returns a reference to the `summaryTemplate`.
+     * ```typescript
+     * let summaryTemplate = this.column.summaryTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @notifyChanges()
+    @WatchColumnChanges()
+    @Input()
+    public get summaryTemplate(): TemplateRef<any> {
+        return this._summaryTemplate;
+    }
+    /**
+     * Sets the summary template.
+     * ```html
+     * <ng-template #summaryTemplate igxSummary let-summaryResults>
+     *    <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p>
+     *    <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'summaryTemplate'", {read: TemplateRef })
+     * public summaryTemplate: TemplateRef<any>;
+     * this.column.summaryTemplate = this.summaryTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    public set summaryTemplate(template: TemplateRef<any>) {
+        this._summaryTemplate = template;
+    }
     /**
      * Returns a reference to the `bodyTemplate`.
      * ```typescript
@@ -1565,6 +1603,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      */
     protected _headerTemplate: TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    protected _summaryTemplate: TemplateRef<any>;
     /**
      * @hidden
      */
@@ -1672,6 +1714,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      */
     public ngAfterContentInit(): void {
+        if (this.summaryTemplateDirective) {
+            this._summaryTemplate = this.summaryTemplateDirective.template;
+        }
         if (this.cellTemplate) {
             this._bodyTemplate = this.cellTemplate.template;
         }

projects/igniteui-angular/src/lib/grids/columns/column.module.ts

@@ -8,13 +8,14 @@ import {
     IgxCellHeaderTemplateDirective,
     IgxCellTemplateDirective,
     IgxCollapsibleIndicatorTemplateDirective,
-    IgxFilterCellTemplateDirective
+    IgxFilterCellTemplateDirective,
+    IgxSummaryTemplateDirective
 } from './templates.directive';
 
-
 @NgModule({
     declarations: [
         IgxFilterCellTemplateDirective,
+        IgxSummaryTemplateDirective,
         IgxCellTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellFooterTemplateDirective,
@@ -31,6 +32,7 @@ import {
     ],
     exports: [
         IgxFilterCellTemplateDirective,
+        IgxSummaryTemplateDirective,
         IgxCellTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellFooterTemplateDirective,

projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts

@@ -50,3 +50,11 @@ export class IgxCollapsibleIndicatorTemplateDirective {
 
     constructor(public template: TemplateRef<any>) { }
 }
+
+@Directive({
+    selector: '[igxSummary]'
+})
+export class IgxSummaryTemplateDirective {
+
+    constructor(public template: TemplateRef<any>) { }
+}

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

@@ -157,6 +157,7 @@ export interface ColumnType {
     filteringExpressionsTree: FilteringExpressionsTree;
     hasSummary: boolean;
     summaries: any;
+    summaryTemplate: TemplateRef<any>;
     pinned: boolean;
     expanded: boolean;
     selected: boolean;
@@ -372,6 +373,7 @@ export interface GridType extends IGridDataBindable {
     dataWithAddedInTransactionRows: any[];
     transactions: TransactionService<Transaction, State>;
     defaultSummaryHeight: number;
+    summaryRowHeight: number;
     rowEditingOverlay: IgxToggleDirective;
     totalRowsCountAfterFilter: number;
     _totalRecords: number;

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -72,7 +72,12 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
             this.expression.searchVal = null;
             const index = this.expressionsList.findIndex(item => item.expression === this.expression);
             if (index === 0 && this.expressionsList.length === 1) {
-                this.clearFiltering();
+                this.filteringService.clearFilter(this.column.field);
+
+                if (this.expression.condition.isUnary) {
+                    this.resetExpression();
+                }
+
                 return;
             }
         } else {