Merge pull request #8549 from IgniteUI/rkaraivanov/toolbar-tweaks

refactor(toolbar): Export toolbar to pubic api

Author: kdinev

CHANGELOG.md

@@ -10,6 +10,13 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Added a new directive for re-templating the Excel style filtering header icon - `IgxExcelStyleHeaderIconDirective`.
+    - **Breaking Change**
+
+        Changed the how the grid toolbar is instantiated in the grids. The
+        toolbar is now templated rather than being activated through a property on the parent grid. The toolbar features are also exposed as templatable
+        components and the old properties are deprecated.
+
+        Refer to the official documentation for more information.
 
 ## 10.2.0
 
@@ -86,7 +93,7 @@ All notable changes for each version of this project will be documented in this
             return result;
         }
     }
-    ```  
+    ```
     - A new `pipeArgs` input property is exposed by the `IgxColumnComponent`, which is used to pass arguments to the Angular `DatePipe` and `DecimalPipe`, to format the display for date and numeric columns.
     ```typescript
 - ` IGX_INPUT_GROUP_TYPE` injection token

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

@@ -23,6 +23,7 @@ describe('Update to 11.0.0', () => {
         },
     };
     const migrationName = 'migration-18';
+    const warnMsg = `\n<!-- Auto migrated template content. Please, check your bindings! -->\n`;
     const stripWhitespaceRe = /\s/g;
 
     const makeTemplate = (name: string) => `/testSrc/appPrefix/component/${name}.component.html`;
@@ -102,6 +103,7 @@ describe('Update to 11.0.0', () => {
         ).toEqual(`
 <igx-grid>
     <igx-grid-toolbar>
+        ${warnMsg}
         <div></div>
         <button></button>
     </igx-grid-toolbar>
@@ -147,6 +149,7 @@ describe('Update to 11.0.0', () => {
     <igx-column></igx-column>
     <igx-row-island>
         <igx-grid-toolbar [grid]="sampleGrid" *igxGridToolbar="let sampleGrid" *ngIf="showChildToolbar">
+            ${warnMsg}
             <div igxLabel></div>
             <button></button>
         </igx-grid-toolbar>

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

@@ -15,6 +15,7 @@ export default function (): Rule {
 
         const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid'];
         const prop = ['[showToolbar]', 'showToolbar'];
+        const warnMsg = `\n<!-- Auto migrated template content. Please, check your bindings! -->\n`;
         const changes = new Map<string, FileChange[]>();
 
         const applyChanges = () => {
@@ -53,7 +54,7 @@ export default function (): Rule {
             const ngTemplates = findElementNodes([grid], ['ng-template']);
             const toolbarTemplate = ngTemplates.filter(template => hasAttribute(template as Element, 'igxToolbarCustomContent'))[0];
             if (toolbarTemplate) {
-                return `\n${serializeNodes((toolbarTemplate as Element).children).join('')}\n`;
+                return `${warnMsg}\n${serializeNodes((toolbarTemplate as Element).children).join('')}\n`;
             }
             return '';
         };

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -31,7 +31,7 @@ import {
 } from '@angular/core';
 import ResizeObserver from 'resize-observer-polyfill';
 import 'igniteui-trial-watermark';
-import { Subject, pipe, fromEvent } from 'rxjs';
+import { Subject, pipe, fromEvent, noop } from 'rxjs';
 import { takeUntil, first, filter, throttleTime, map, shareReplay } from 'rxjs/operators';
 import { cloneArray, flatten, mergeObjects, isIE, compareMaps, resolveNestedPath, isObject } from '../core/utils';
 import { DataType } from '../data-operations/data-util';
@@ -3329,7 +3329,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             this.addRowSnackbar.hide();
         });
 
-
+        // Keep the stream open for future subscribers
+        this.rendered$.pipe(takeUntil(this.destroy$)).subscribe(noop);
         Promise.resolve().then(() => this.rendered.next(true));
     }
 

projects/igniteui-angular/src/lib/grids/public_api.ts

@@ -11,3 +11,9 @@ export * from './grid-common.module';
 export { IColumnVisibilityChangedEventArgs } from './column-actions/column-hiding.directive';
 export * from './column-actions/column-actions.module';
 export * from './state.directive';
+export * from './toolbar/grid-toolbar.component';
+export * from './toolbar/common';
+export * from './toolbar/grid-toolbar-advanced-filtering.component';
+export * from './toolbar/grid-toolbar-exporter.component';
+export * from './toolbar/grid-toolbar-hiding.component';
+export * from './toolbar/grid-toolbar-pinning.component';

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

@@ -134,16 +134,17 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
 
         this.exportStarted.emit(args);
         this.grid.onToolbarExporting.emit(args);
+        this.isExporting = true;
+        this.toolbar.showProgress = true;
 
         if (args.cancel) {
             return;
         }
 
-        this.isExporting = true;
-
         exporter.onExportEnded.pipe(first()).subscribe(() => {
             this.exportEnded.emit();
             this.isExporting = false;
+            this.toolbar.showProgress = false;
         });
 
         exporter.export(this.grid, options);

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts

@@ -47,6 +47,7 @@ export abstract class BaseToolbarDirective {
 
     constructor(@Host() protected toolbar: IgxGridToolbarComponent) { }
 
+    /** @hidden @internal */
     public toggle(anchorElement: HTMLElement, toggleRef: IgxToggleDirective, actions?: IgxColumnActionsComponent): void {
         if (actions) {
             const setHeight = () => actions.columnsAreaMaxHeight = this.columnListHeight ?? `${Math.max(this.grid.calcHeight, 200)}px`;