igniteui-angular-extras 15.1.1 → 16.0.0

package/esm2022/lib/igniteui-angular-extras.module.mjs

@@ -0,0 +1,108 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+// tslint:disable-next-line: max-line-length
+import { IgxButtonModule, IgxDividerModule, IgxGridModule, IgxTabsModule, IgxToggleModule, IgxIconModule } from 'igniteui-angular';
+import { IgxBarSeriesModule, IgxCategoryChartModule, IgxCategoryXAxisModule, IgxDataChartCategoryModule, IgxDataChartCoreModule, IgxDataChartInteractivityModule, IgxDataChartScatterModule, IgxDataChartStackedModule, IgxItemLegendModule, IgxLegendModule, IgxNumericXAxisModule, IgxNumericYAxisModule } from 'igniteui-angular-charts';
+import { IgxPieChartModule } from 'igniteui-angular-charts';
+import { IgxChartMenuComponent } from './context-menu/chart-dialog/chart-dialog.component';
+import { IgxContextMenuComponent } from './context-menu/context-menu.component';
+import { IgxContextMenuDirective } from './context-menu/igx-context-menu.directive';
+import { IgxChartIntegrationDirective } from './directives/chart-integration/chart-integration.directive';
+import { IgxConditionalFormattingDirective } from './directives/conditional-formatting/conditional-formatting.directive';
+import { SvgPipe } from './pipes/svg.pipe';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+export class IgxExtrasModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxExtrasModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: IgxExtrasModule, declarations: [IgxConditionalFormattingDirective,
+            IgxChartIntegrationDirective,
+            IgxContextMenuDirective,
+            IgxContextMenuComponent,
+            IgxChartMenuComponent,
+            SvgPipe], imports: [IgxButtonModule,
+            IgxDividerModule,
+            IgxGridModule,
+            IgxTabsModule,
+            IgxToggleModule,
+            IgxDataChartCategoryModule,
+            IgxDataChartCoreModule,
+            IgxLegendModule,
+            IgxDataChartInteractivityModule,
+            IgxNumericXAxisModule,
+            IgxNumericYAxisModule,
+            IgxCategoryXAxisModule,
+            IgxItemLegendModule,
+            IgxPieChartModule,
+            IgxDataChartStackedModule,
+            IgxDividerModule,
+            IgxDataChartScatterModule,
+            IgxBarSeriesModule,
+            IgxIconModule,
+            IgxCategoryChartModule,
+            CommonModule], exports: [IgxConditionalFormattingDirective,
+            IgxChartIntegrationDirective,
+            IgxContextMenuDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxExtrasModule, imports: [IgxButtonModule,
+            IgxDividerModule,
+            IgxGridModule,
+            IgxTabsModule,
+            IgxToggleModule,
+            IgxDataChartCategoryModule,
+            IgxDataChartCoreModule,
+            IgxLegendModule,
+            IgxDataChartInteractivityModule,
+            IgxNumericXAxisModule,
+            IgxNumericYAxisModule,
+            IgxCategoryXAxisModule,
+            IgxItemLegendModule,
+            IgxPieChartModule,
+            IgxDataChartStackedModule,
+            IgxDividerModule,
+            IgxDataChartScatterModule,
+            IgxBarSeriesModule,
+            IgxIconModule,
+            IgxCategoryChartModule,
+            CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxExtrasModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        IgxConditionalFormattingDirective,
+                        IgxChartIntegrationDirective,
+                        IgxContextMenuDirective,
+                        IgxContextMenuComponent,
+                        IgxChartMenuComponent,
+                        SvgPipe
+                    ],
+                    imports: [
+                        IgxButtonModule,
+                        IgxDividerModule,
+                        IgxGridModule,
+                        IgxTabsModule,
+                        IgxToggleModule,
+                        IgxDataChartCategoryModule,
+                        IgxDataChartCoreModule,
+                        IgxLegendModule,
+                        IgxDataChartInteractivityModule,
+                        IgxNumericXAxisModule,
+                        IgxNumericYAxisModule,
+                        IgxCategoryXAxisModule,
+                        IgxItemLegendModule,
+                        IgxPieChartModule,
+                        IgxDataChartStackedModule,
+                        IgxDividerModule,
+                        IgxDataChartScatterModule,
+                        IgxBarSeriesModule,
+                        IgxIconModule,
+                        IgxCategoryChartModule,
+                        CommonModule
+                    ],
+                    exports: [
+                        IgxConditionalFormattingDirective,
+                        IgxChartIntegrationDirective,
+                        IgxContextMenuDirective
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWduaXRldWktYW5ndWxhci1leHRyYXMubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvaWduaXRldWktYW5ndWxhci1leHRyYXMvc3JjL2xpYi9pZ25pdGV1aS1hbmd1bGFyLWV4dHJhcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRSw0Q0FBNEM7QUFDNUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsRUFBRSxhQUFhLEVBQUUsYUFBYSxFQUFFLGVBQWUsRUFBRSxhQUFhLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuSSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsc0JBQXNCLEVBQUUsc0JBQXNCLEVBQ3ZFLDBCQUEwQixFQUF5QixzQkFBc0IsRUFDekUsK0JBQStCLEVBQUUseUJBQXlCLEVBQUUseUJBQXlCLEVBQzdELG1CQUFtQixFQUFzQixlQUFlLEVBQ2hGLHFCQUFxQixFQUFFLHFCQUFxQixFQUF3QixNQUFNLHlCQUF5QixDQUFDO0FBQ3hHLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzVELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQzNGLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ2hGLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLDREQUE0RCxDQUFDO0FBQzFHLE9BQU8sRUFBRSxpQ0FBaUMsRUFBRSxNQUFNLHNFQUFzRSxDQUFDO0FBQ3pILE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBMEMvQyxNQUFNLE9BQU8sZUFBZTs4R0FBZixlQUFlOytHQUFmLGVBQWUsaUJBckNwQixpQ0FBaUM7WUFDakMsNEJBQTRCO1lBQzVCLHVCQUF1QjtZQUN2Qix1QkFBdUI7WUFDdkIscUJBQXFCO1lBQ3JCLE9BQU8sYUFHUCxlQUFlO1lBQ2YsZ0JBQWdCO1lBQ2hCLGFBQWE7WUFDYixhQUFhO1lBQ2IsZUFBZTtZQUNmLDBCQUEwQjtZQUMxQixzQkFBc0I7WUFDdEIsZUFBZTtZQUNmLCtCQUErQjtZQUMvQixxQkFBcUI7WUFDckIscUJBQXFCO1lBQ3JCLHNCQUFzQjtZQUN0QixtQkFBbUI7WUFDbkIsaUJBQWlCO1lBQ2pCLHlCQUF5QjtZQUN6QixnQkFBZ0I7WUFDaEIseUJBQXlCO1lBQ3pCLGtCQUFrQjtZQUNsQixhQUFhO1lBQ2Isc0JBQXNCO1lBQ3RCLFlBQVksYUFHWixpQ0FBaUM7WUFDakMsNEJBQTRCO1lBQzVCLHVCQUF1QjsrR0FJbEIsZUFBZSxZQTdCcEIsZUFBZTtZQUNmLGdCQUFnQjtZQUNoQixhQUFhO1lBQ2IsYUFBYTtZQUNiLGVBQWU7WUFDZiwwQkFBMEI7WUFDMUIsc0JBQXNCO1lBQ3RCLGVBQWU7WUFDZiwrQkFBK0I7WUFDL0IscUJBQXFCO1lBQ3JCLHFCQUFxQjtZQUNyQixzQkFBc0I7WUFDdEIsbUJBQW1CO1lBQ25CLGlCQUFpQjtZQUNqQix5QkFBeUI7WUFDekIsZ0JBQWdCO1lBQ2hCLHlCQUF5QjtZQUN6QixrQkFBa0I7WUFDbEIsYUFBYTtZQUNiLHNCQUFzQjtZQUN0QixZQUFZOzsyRkFTUCxlQUFlO2tCQXZDM0IsUUFBUTttQkFBQztvQkFDTixZQUFZLEVBQUU7d0JBQ1YsaUNBQWlDO3dCQUNqQyw0QkFBNEI7d0JBQzVCLHVCQUF1Qjt3QkFDdkIsdUJBQXVCO3dCQUN2QixxQkFBcUI7d0JBQ3JCLE9BQU87cUJBQ1Y7b0JBQ0QsT0FBTyxFQUFFO3dCQUNMLGVBQWU7d0JBQ2YsZ0JBQWdCO3dCQUNoQixhQUFhO3dCQUNiLGFBQWE7d0JBQ2IsZUFBZTt3QkFDZiwwQkFBMEI7d0JBQzFCLHNCQUFzQjt3QkFDdEIsZUFBZTt3QkFDZiwrQkFBK0I7d0JBQy9CLHFCQUFxQjt3QkFDckIscUJBQXFCO3dCQUNyQixzQkFBc0I7d0JBQ3RCLG1CQUFtQjt3QkFDbkIsaUJBQWlCO3dCQUNqQix5QkFBeUI7d0JBQ3pCLGdCQUFnQjt3QkFDaEIseUJBQXlCO3dCQUN6QixrQkFBa0I7d0JBQ2xCLGFBQWE7d0JBQ2Isc0JBQXNCO3dCQUN0QixZQUFZO3FCQUNmO29CQUNELE9BQU8sRUFBRTt3QkFDTCxpQ0FBaUM7d0JBQ2pDLDRCQUE0Qjt3QkFDNUIsdUJBQXVCO3FCQUMxQjtvQkFDRCxPQUFPLEVBQUUsQ0FBRSxzQkFBc0IsQ0FBRTtpQkFDdEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSwgQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG4vLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IG1heC1saW5lLWxlbmd0aFxyXG5pbXBvcnQgeyBJZ3hCdXR0b25Nb2R1bGUsIElneERpdmlkZXJNb2R1bGUsIElneEdyaWRNb2R1bGUsIElneFRhYnNNb2R1bGUsIElneFRvZ2dsZU1vZHVsZSwgSWd4SWNvbk1vZHVsZSB9IGZyb20gJ2lnbml0ZXVpLWFuZ3VsYXInO1xyXG5pbXBvcnQgeyBJZ3hCYXJTZXJpZXNNb2R1bGUsIElneENhdGVnb3J5Q2hhcnRNb2R1bGUsIElneENhdGVnb3J5WEF4aXNNb2R1bGUsXHJcbiAgICBJZ3hEYXRhQ2hhcnRDYXRlZ29yeU1vZHVsZSwgSWd4RGF0YUNoYXJ0Q29tcG9uZW50LCBJZ3hEYXRhQ2hhcnRDb3JlTW9kdWxlLFxyXG4gICAgSWd4RGF0YUNoYXJ0SW50ZXJhY3Rpdml0eU1vZHVsZSwgSWd4RGF0YUNoYXJ0U2NhdHRlck1vZHVsZSwgSWd4RGF0YUNoYXJ0U3RhY2tlZE1vZHVsZSxcclxuICAgIElneEl0ZW1MZWdlbmRDb21wb25lbnQsIElneEl0ZW1MZWdlbmRNb2R1bGUsIElneExlZ2VuZENvbXBvbmVudCwgSWd4TGVnZW5kTW9kdWxlLFxyXG4gICAgSWd4TnVtZXJpY1hBeGlzTW9kdWxlLCBJZ3hOdW1lcmljWUF4aXNNb2R1bGUsIElneFBpZUNoYXJ0Q29tcG9uZW50IH0gZnJvbSAnaWduaXRldWktYW5ndWxhci1jaGFydHMnO1xyXG5pbXBvcnQgeyBJZ3hQaWVDaGFydE1vZHVsZSB9IGZyb20gJ2lnbml0ZXVpLWFuZ3VsYXItY2hhcnRzJztcclxuaW1wb3J0IHsgSWd4Q2hhcnRNZW51Q29tcG9uZW50IH0gZnJvbSAnLi9jb250ZXh0LW1lbnUvY2hhcnQtZGlhbG9nL2NoYXJ0LWRpYWxvZy5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBJZ3hDb250ZXh0TWVudUNvbXBvbmVudCB9IGZyb20gJy4vY29udGV4dC1tZW51L2NvbnRleHQtbWVudS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBJZ3hDb250ZXh0TWVudURpcmVjdGl2ZSB9IGZyb20gJy4vY29udGV4dC1tZW51L2lneC1jb250ZXh0LW1lbnUuZGlyZWN0aXZlJztcclxuaW1wb3J0IHsgSWd4Q2hhcnRJbnRlZ3JhdGlvbkRpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9jaGFydC1pbnRlZ3JhdGlvbi9jaGFydC1pbnRlZ3JhdGlvbi5kaXJlY3RpdmUnO1xyXG5pbXBvcnQgeyBJZ3hDb25kaXRpb25hbEZvcm1hdHRpbmdEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvY29uZGl0aW9uYWwtZm9ybWF0dGluZy9jb25kaXRpb25hbC1mb3JtYXR0aW5nLmRpcmVjdGl2ZSc7XHJcbmltcG9ydCB7IFN2Z1BpcGUgfSBmcm9tICcuL3BpcGVzL3N2Zy5waXBlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuXHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gICAgZGVjbGFyYXRpb25zOiBbXHJcbiAgICAgICAgSWd4Q29uZGl0aW9uYWxGb3JtYXR0aW5nRGlyZWN0aXZlLFxyXG4gICAgICAgIElneENoYXJ0SW50ZWdyYXRpb25EaXJlY3RpdmUsXHJcbiAgICAgICAgSWd4Q29udGV4dE1lbnVEaXJlY3RpdmUsXHJcbiAgICAgICAgSWd4Q29udGV4dE1lbnVDb21wb25lbnQsXHJcbiAgICAgICAgSWd4Q2hhcnRNZW51Q29tcG9uZW50LFxyXG4gICAgICAgIFN2Z1BpcGVcclxuICAgIF0sXHJcbiAgICBpbXBvcnRzOiBbXHJcbiAgICAgICAgSWd4QnV0dG9uTW9kdWxlLFxyXG4gICAgICAgIElneERpdmlkZXJNb2R1bGUsXHJcbiAgICAgICAgSWd4R3JpZE1vZHVsZSxcclxuICAgICAgICBJZ3hUYWJzTW9kdWxlLFxyXG4gICAgICAgIElneFRvZ2dsZU1vZHVsZSxcclxuICAgICAgICBJZ3hEYXRhQ2hhcnRDYXRlZ29yeU1vZHVsZSxcclxuICAgICAgICBJZ3hEYXRhQ2hhcnRDb3JlTW9kdWxlLFxyXG4gICAgICAgIElneExlZ2VuZE1vZHVsZSxcclxuICAgICAgICBJZ3hEYXRhQ2hhcnRJbnRlcmFjdGl2aXR5TW9kdWxlLFxyXG4gICAgICAgIElneE51bWVyaWNYQXhpc01vZHVsZSxcclxuICAgICAgICBJZ3hOdW1lcmljWUF4aXNNb2R1bGUsXHJcbiAgICAgICAgSWd4Q2F0ZWdvcnlYQXhpc01vZHVsZSxcclxuICAgICAgICBJZ3hJdGVtTGVnZW5kTW9kdWxlLFxyXG4gICAgICAgIElneFBpZUNoYXJ0TW9kdWxlLFxyXG4gICAgICAgIElneERhdGFDaGFydFN0YWNrZWRNb2R1bGUsXHJcbiAgICAgICAgSWd4RGl2aWRlck1vZHVsZSxcclxuICAgICAgICBJZ3hEYXRhQ2hhcnRTY2F0dGVyTW9kdWxlLFxyXG4gICAgICAgIElneEJhclNlcmllc01vZHVsZSxcclxuICAgICAgICBJZ3hJY29uTW9kdWxlLFxyXG4gICAgICAgIElneENhdGVnb3J5Q2hhcnRNb2R1bGUsXHJcbiAgICAgICAgQ29tbW9uTW9kdWxlXHJcbiAgICBdLFxyXG4gICAgZXhwb3J0czogW1xyXG4gICAgICAgIElneENvbmRpdGlvbmFsRm9ybWF0dGluZ0RpcmVjdGl2ZSxcclxuICAgICAgICBJZ3hDaGFydEludGVncmF0aW9uRGlyZWN0aXZlLFxyXG4gICAgICAgIElneENvbnRleHRNZW51RGlyZWN0aXZlXHJcbiAgICBdLFxyXG4gICAgc2NoZW1hczogWyBDVVNUT01fRUxFTUVOVFNfU0NIRU1BIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIElneEV4dHJhc01vZHVsZSB7IH1cclxuXHJcbiJdfQ==

package/{esm2020 → esm2022}/lib/pipes/svg.pipe.mjs

@@ -8,13 +8,13 @@ export class SvgPipe {
     transform(markup) {
         return this.sanitizer.bypassSecurityTrustHtml(markup);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SvgPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SvgPipe, name: "svg" }); }
 }
-SvgPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SvgPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-SvgPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: SvgPipe, name: "svg" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SvgPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SvgPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'svg'
                 }]
         }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ZnLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pZ25pdGV1aS1hbmd1bGFyLWV4dHJhcy9zcmMvbGliL3BpcGVzL3N2Zy5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOzs7QUFNcEQsTUFBTSxPQUFPLE9BQU87SUFFbEIsWUFBb0IsU0FBdUI7UUFBdkIsY0FBUyxHQUFULFNBQVMsQ0FBYztJQUFHLENBQUM7SUFDL0MsU0FBUyxDQUFDLE1BQWM7UUFDdEIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLHVCQUF1QixDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3hELENBQUM7O29HQUxVLE9BQU87a0dBQVAsT0FBTzsyRkFBUCxPQUFPO2tCQUhuQixJQUFJO21CQUFDO29CQUNKLElBQUksRUFBRSxLQUFLO2lCQUNaIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIsIFNhZmVIdG1sIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XHJcblxyXG5AUGlwZSh7XHJcbiAgbmFtZTogJ3N2ZydcclxufSlcclxuZXhwb3J0IGNsYXNzIFN2Z1BpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBzYW5pdGl6ZXI6IERvbVNhbml0aXplcikge31cclxuICB0cmFuc2Zvcm0obWFya3VwOiBzdHJpbmcpOiBTYWZlSHRtbCB7XHJcbiAgICByZXR1cm4gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdEh0bWwobWFya3VwKTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ZnLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pZ25pdGV1aS1hbmd1bGFyLWV4dHJhcy9zcmMvbGliL3BpcGVzL3N2Zy5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOzs7QUFNcEQsTUFBTSxPQUFPLE9BQU87SUFFbEIsWUFBb0IsU0FBdUI7UUFBdkIsY0FBUyxHQUFULFNBQVMsQ0FBYztJQUFHLENBQUM7SUFDL0MsU0FBUyxDQUFDLE1BQWM7UUFDdEIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLHVCQUF1QixDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3hELENBQUM7OEdBTFUsT0FBTzs0R0FBUCxPQUFPOzsyRkFBUCxPQUFPO2tCQUhuQixJQUFJO21CQUFDO29CQUNKLElBQUksRUFBRSxLQUFLO2lCQUNaIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIsIFNhZmVIdG1sIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XHJcblxyXG5AUGlwZSh7XHJcbiAgbmFtZTogJ3N2ZydcclxufSlcclxuZXhwb3J0IGNsYXNzIFN2Z1BpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBzYW5pdGl6ZXI6IERvbVNhbml0aXplcikge31cclxuICB0cmFuc2Zvcm0obWFya3VwOiBzdHJpbmcpOiBTYWZlSHRtbCB7XHJcbiAgICByZXR1cm4gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdEh0bWwobWFya3VwKTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==

package/{fesm2020 → fesm2022}/igniteui-angular-extras.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, ViewContainerRef, Component, ViewEncapsulation, ViewChild, Output, HostBinding, Directive, Inject, Input, Optional, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Pipe, EventEmitter, ViewContainerRef, Component, ViewEncapsulation, ViewChild, Output, HostBinding, Directive, Input, Optional, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1$1 from 'igniteui-angular';
-import { CloseScrollStrategy, AutoPositionStrategy, HorizontalAlignment, VerticalAlignment, IgxToggleDirective, IgxTabsComponent, IgxGridComponent, AbsoluteScrollStrategy, IgxButtonModule, IgxDividerModule, IgxGridModule, IgxTabsModule, IgxToggleModule, IgxIconModule } from 'igniteui-angular';
+import { CloseScrollStrategy, AutoPositionStrategy, HorizontalAlignment, VerticalAlignment, IgxToggleDirective, IgxTabsComponent, AbsoluteScrollStrategy, IgxButtonModule, IgxDividerModule, IgxGridModule, IgxTabsModule, IgxToggleModule, IgxIconModule } from 'igniteui-angular';
 import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxScatterLineSeriesComponent, IgxNumericXAxisComponent, IgxBubbleSeriesComponent, IgxScatterSeriesComponent, IgxBarSeriesComponent, IgxCategoryYAxisComponent, IgxStackedBarSeriesComponent, IgxStacked100BarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxSizeScaleComponent, IgxColumnSeriesComponent, IgxAreaSeriesComponent, IgxLineSeriesComponent, IgxStackedColumnSeriesComponent, IgxStackedAreaSeriesComponent, IgxStackedLineSeriesComponent, IgxStacked100ColumnSeriesComponent, IgxStacked100AreaSeriesComponent, IgxStacked100LineSeriesComponent, IgxPieChartComponent, IgxDataChartComponent, IgxItemLegendComponent, IgxLegendComponent, IgxDataChartCategoryModule, IgxDataChartCoreModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxNumericXAxisModule, IgxNumericYAxisModule, IgxCategoryXAxisModule, IgxItemLegendModule, IgxPieChartModule, IgxDataChartStackedModule, IgxDataChartScatterModule, IgxBarSeriesModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { Subject } from 'rxjs';
 import { ResizeObserver } from '@juggle/resize-observer';
 import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import { takeUntil, merge, debounceTime, filter } from 'rxjs/operators';
 import 'igniteui-trial-watermark';
@@ -445,10 +446,10 @@ class SvgPipe {
     transform(markup) {
         return this.sanitizer.bypassSecurityTrustHtml(markup);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SvgPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SvgPipe, name: "svg" }); }
 }
-SvgPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SvgPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-SvgPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: SvgPipe, name: "svg" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SvgPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SvgPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'svg'
@@ -495,10 +496,10 @@ class IgxChartMenuComponent {
         this.chartArea.clear();
         this.chartDirective.chartFactory(chartType, this.chartArea);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxChartMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: IgxChartMenuComponent, selector: "igx-chart-menu", outputs: { onClose: "onClose" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "chartArea", first: true, predicate: ["chartArea"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"header\">\r\n    <span class=\"header-text\">\r\n        {{ title }} Chart\r\n    </span>\r\n    <span class=\"action-buttons-wrapper\">\r\n        <button igxButton=\"icon\" (click)=\"toggleFullScreen()\">\r\n            <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n        </button>\r\n        <button igxButton=\"icon\" (click)=\"onClose.emit()\">\r\n            <igx-icon class=\"material\">close</igx-icon>\r\n        </button>\r\n    </span>\r\n</div>\r\n<div class=\"selection-area ig-scrollbar\">\r\n    <igc-trial-watermark></igc-trial-watermark>\r\n    <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\r\n        <ng-template #chartArea ></ng-template>\r\n    </div>\r\n    <div>\r\n        <button igxButton=\"icon\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\r\n            <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\r\n        </button>\r\n    </div>\r\n    <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\r\n        <div class=\"config-area-header\">\r\n            <span>Chart Types</span>\r\n        </div>\r\n        <igx-divider class=\"divider\"></igx-divider>\r\n        <div class=\"wrapper\" *ngFor=\"let chartType of mainChartTypes\">\r\n            <ng-container *ngIf=\"hasAvailableChart(chartType)\">\r\n                <div>{{chartType | titlecase}} Chart</div>\r\n                <div class=\"types-section\">\r\n                    <ng-container *ngFor=\"let chart of allCharts\">\r\n                    <span *ngIf=\"chart.startsWith(chartType)\"  class=\"types-section-btn\" title=\"{{chart}}\"\r\n                            [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\r\n                        <div  [innerHTML]=\"images[chart] | svg\">\r\n                        </div>\r\n                    </span>\r\n                    </ng-container>\r\n                </div>\r\n                <igx-divider></igx-divider>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".ig-chart-legend-items-list{height:20%;display:inline-flex;flex-wrap:wrap;margin-bottom:1rem}igx-chart-menu{display:flex;flex-flow:column;overflow:hidden;background-color:#fff;transition:width .2s ease-in-out,height .3s ease-in-out}.header{height:10%;background-color:#e0e0e0;display:flex;font-size:1.8rem}.header .action-buttons-wrapper{margin-left:auto;margin-right:10px;align-self:center}.header .header-text{margin-right:auto;align-self:center;margin-left:3rem}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.selection-area,.selection-area .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}.selection-area .chart-area{margin-top:1rem;overflow-y:hidden;overflow-x:hidden;width:100%}.selection-area .chart-config-area{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.selection-area .chart-config-area.opened{width:25%;overflow-y:auto;overflow-x:hidden}.selection-area .chart-config-area.closed{width:0;transform:translate(100%)}.selection-area .chart-config-area .config-area-header{margin-bottom:3px;font-size:1rem;font-weight:700;text-align:center}.selection-area .chart-config-area .types-section-btn{width:40%;margin-right:5px;cursor:pointer}.selection-area .chart-config-area .types-section-btn.selected{opacity:.5}.selection-area .wrapper{padding:3px}.selection-area .wrapper .types-section{display:flex;flex-wrap:wrap}.selection-area .wrapper .igx-divider{margin:5px!important;background:black!important}\n"], dependencies: [{ kind: "directive", type: i1$1.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: i1$1.IgxDividerDirective, selector: "igx-divider", inputs: ["id", "role", "type", "middle", "vertical", "inset"] }, { kind: "component", type: i1$1.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SvgPipe, name: "svg" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-IgxChartMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxChartMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxChartMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: IgxChartMenuComponent, selector: "igx-chart-menu", outputs: { onClose: "onClose" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "chartArea", first: true, predicate: ["chartArea"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"header\">\r\n    <span class=\"header-text\">\r\n        {{ title }} Chart\r\n    </span>\r\n    <span class=\"action-buttons-wrapper\">\r\n        <button igxButton=\"icon\" (click)=\"toggleFullScreen()\">\r\n            <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n        </button>\r\n        <button igxButton=\"icon\" (click)=\"onClose.emit()\">\r\n            <igx-icon class=\"material\">close</igx-icon>\r\n        </button>\r\n    </span>\r\n</div>\r\n<div class=\"selection-area ig-scrollbar\">\r\n    <igc-trial-watermark></igc-trial-watermark>\r\n    <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\r\n        <ng-template #chartArea ></ng-template>\r\n    </div>\r\n    <div>\r\n        <button igxButton=\"icon\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\r\n            <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\r\n        </button>\r\n    </div>\r\n    <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\r\n        <div class=\"config-area-header\">\r\n            <span>Chart Types</span>\r\n        </div>\r\n        <igx-divider class=\"divider\"></igx-divider>\r\n        <div class=\"wrapper\" *ngFor=\"let chartType of mainChartTypes\">\r\n            <ng-container *ngIf=\"hasAvailableChart(chartType)\">\r\n                <div>{{chartType | titlecase}} Chart</div>\r\n                <div class=\"types-section\">\r\n                    <ng-container *ngFor=\"let chart of allCharts\">\r\n                    <span *ngIf=\"chart.startsWith(chartType)\"  class=\"types-section-btn\" title=\"{{chart}}\"\r\n                            [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\r\n                        <div  [innerHTML]=\"images[chart] | svg\">\r\n                        </div>\r\n                    </span>\r\n                    </ng-container>\r\n                </div>\r\n                <igx-divider></igx-divider>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".ig-chart-legend-items-list{height:20%;display:inline-flex;flex-wrap:wrap;margin-bottom:1rem}igx-chart-menu{display:flex;flex-flow:column;overflow:hidden;background-color:#fff;transition:width .2s ease-in-out,height .3s ease-in-out}.header{height:10%;background-color:#e0e0e0;display:flex;font-size:1.8rem}.header .action-buttons-wrapper{margin-left:auto;margin-right:10px;align-self:center}.header .header-text{margin-right:auto;align-self:center;margin-left:3rem}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.selection-area,.selection-area .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}.selection-area .chart-area{margin-top:1rem;overflow-y:hidden;overflow-x:hidden;width:100%}.selection-area .chart-config-area{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.selection-area .chart-config-area.opened{width:25%;overflow-y:auto;overflow-x:hidden}.selection-area .chart-config-area.closed{width:0;transform:translate(100%)}.selection-area .chart-config-area .config-area-header{margin-bottom:3px;font-size:1rem;font-weight:700;text-align:center}.selection-area .chart-config-area .types-section-btn{width:40%;margin-right:5px;cursor:pointer}.selection-area .chart-config-area .types-section-btn.selected{opacity:.5}.selection-area .wrapper{padding:3px}.selection-area .wrapper .types-section{display:flex;flex-wrap:wrap}.selection-area .wrapper .igx-divider{margin:5px!important;background:black!important}\n"], dependencies: [{ kind: "directive", type: i1$1.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: i1$1.IgxDividerDirective, selector: "igx-divider", inputs: ["id", "role", "type", "middle", "vertical", "inset"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i1$1.IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SvgPipe, name: "svg" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-chart-menu', encapsulation: ViewEncapsulation.None, template: "<div class=\"header\">\r\n    <span class=\"header-text\">\r\n        {{ title }} Chart\r\n    </span>\r\n    <span class=\"action-buttons-wrapper\">\r\n        <button igxButton=\"icon\" (click)=\"toggleFullScreen()\">\r\n            <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n        </button>\r\n        <button igxButton=\"icon\" (click)=\"onClose.emit()\">\r\n            <igx-icon class=\"material\">close</igx-icon>\r\n        </button>\r\n    </span>\r\n</div>\r\n<div class=\"selection-area ig-scrollbar\">\r\n    <igc-trial-watermark></igc-trial-watermark>\r\n    <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\r\n        <ng-template #chartArea ></ng-template>\r\n    </div>\r\n    <div>\r\n        <button igxButton=\"icon\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\r\n            <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\r\n        </button>\r\n    </div>\r\n    <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\r\n        <div class=\"config-area-header\">\r\n            <span>Chart Types</span>\r\n        </div>\r\n        <igx-divider class=\"divider\"></igx-divider>\r\n        <div class=\"wrapper\" *ngFor=\"let chartType of mainChartTypes\">\r\n            <ng-container *ngIf=\"hasAvailableChart(chartType)\">\r\n                <div>{{chartType | titlecase}} Chart</div>\r\n                <div class=\"types-section\">\r\n                    <ng-container *ngFor=\"let chart of allCharts\">\r\n                    <span *ngIf=\"chart.startsWith(chartType)\"  class=\"types-section-btn\" title=\"{{chart}}\"\r\n                            [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\r\n                        <div  [innerHTML]=\"images[chart] | svg\">\r\n                        </div>\r\n                    </span>\r\n                    </ng-container>\r\n                </div>\r\n                <igx-divider></igx-divider>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".ig-chart-legend-items-list{height:20%;display:inline-flex;flex-wrap:wrap;margin-bottom:1rem}igx-chart-menu{display:flex;flex-flow:column;overflow:hidden;background-color:#fff;transition:width .2s ease-in-out,height .3s ease-in-out}.header{height:10%;background-color:#e0e0e0;display:flex;font-size:1.8rem}.header .action-buttons-wrapper{margin-left:auto;margin-right:10px;align-self:center}.header .header-text{margin-right:auto;align-self:center;margin-left:3rem}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.selection-area,.selection-area .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}.selection-area .chart-area{margin-top:1rem;overflow-y:hidden;overflow-x:hidden;width:100%}.selection-area .chart-config-area{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.selection-area .chart-config-area.opened{width:25%;overflow-y:auto;overflow-x:hidden}.selection-area .chart-config-area.closed{width:0;transform:translate(100%)}.selection-area .chart-config-area .config-area-header{margin-bottom:3px;font-size:1rem;font-weight:700;text-align:center}.selection-area .chart-config-area .types-section-btn{width:40%;margin-right:5px;cursor:pointer}.selection-area .chart-config-area .types-section-btn.selected{opacity:.5}.selection-area .wrapper{padding:3px}.selection-area .wrapper .types-section{display:flex;flex-wrap:wrap}.selection-area .wrapper .igx-divider{margin:5px!important;background:black!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { chartArea: [{
@@ -792,10 +793,10 @@ class IgxContextMenuComponent {
             this._dialogId = undefined;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxContextMenuComponent, deps: [{ token: i1$1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: IgxContextMenuComponent, selector: "igx-context-menu", viewQueries: [{ propertyName: "button", first: true, predicate: ["analyticsBtn"], descendants: true }, { propertyName: "tabsMenu", first: true, predicate: ["tabsMenu"], descendants: true, read: IgxToggleDirective }, { propertyName: "chartPreview", first: true, predicate: ["chartPreview"], descendants: true, read: ViewContainerRef }, { propertyName: "chartPreviewDialog", first: true, predicate: ["chartPreviewDialog"], descendants: true, read: IgxToggleDirective }, { propertyName: "tabs", first: true, predicate: IgxTabsComponent, descendants: true }], ngImport: i0, template: "<span #analyticsBtn class=\"analytics-btn\">\r\n    <button #btn igxButton=\"icon\" (click)=\"toggleTabMenu()\">\r\n        <igx-icon #icon class=\"icon\" family=\"material\">insert_chart_outlined</igx-icon>\r\n    </button>\r\n</span>\r\n<div #tabsMenu igxToggle class=\"toggle-content ig-scrollbar\">\r\n    <!--NOTE: This component has been updated by Infragistics migration: v12.0.0\r\nPlease check your template whether all bindings/event handlers are correct.-->\r\n    <igx-tabs tabsType=\"fixed\" [selectedIndex]=\"!this.textFormatters.length && chartTypes.length ? 1 : 0\">\r\n        <igx-tab-item [disabled]=\"!textFormatters.length\">\r\n            <igx-tab-header>\r\n                <span igxTabHeaderLabel>Conditional Formatting</span>\r\n            </igx-tab-header>\r\n            <igx-tab-content>\r\n                <igc-trial-watermark></igc-trial-watermark>\r\n                <div class=\"tabs\">\r\n                    <span class=\"tab-option\">\r\n                        <span *ngFor=\"let condition of textFormatters\" class=\"action btn condition\"\r\n                            [ngClass]=\"{'selected--condition': condition === currentFormatter}\"\r\n                            (click)=\"formatCells(condition)\">\r\n                            <div class=\"imgSize\" [innerHTML]=\"conditionImages[condition.replace(' ', '')] | svg\">\r\n                            </div>\r\n                            <span class=\"name\">{{condition.replace('10', '10%')}}</span>\r\n                        </span>\r\n                    </span>\r\n                    <span class=\"clear action\"\r\n                        [ngClass]=\"{'disableButton': contextDirective.textFormatter ? !contextDirective.textFormatter.formatter : true }\"\r\n                        (click)=\"clearFormat()\">\r\n                        <div class=\"imgSize\" [innerHTML]=\"conditionImages['Clear'] | svg\">\r\n                        </div>\r\n                        <span class=\"btn name\">Clear All</span>\r\n                    </span>\r\n                </div>\r\n            </igx-tab-content>\r\n        </igx-tab-item>\r\n        <igx-tab-item [disabled]=\"!chartTypes.length\">\r\n            <igx-tab-header>\r\n                <span igxTabHeaderLabel>Create Chart</span>\r\n            </igx-tab-header>\r\n            <igx-tab-content>\r\n                <igc-trial-watermark></igc-trial-watermark>\r\n                <div class=\"tabs\">\r\n                    <span class=\"tab-option\">\r\n                        <span *ngFor=\"let chart of chartTypes | slice:0:4\" class=\"action btn chart\"\r\n                            [ngClass]=\"{'selected': chart === currentChartType}\" (mouseenter)=\"previewChart(chart)\"\r\n                            (mouseleave)=\"hidePreview()\" (click)=\"openDialog(chart)\">\r\n                            <span [innerHTML]=\"chartImages[chart] | svg\" class=\"imgSize\">\r\n                            </span>\r\n                            <span class=\"name\">{{chart}}</span>\r\n                        </span>\r\n                    </span>\r\n                    <span class=\"more-action chart\" [ngClass]=\"{'disableButton': !chartTypes.length}\"\r\n                        (click)=\"openDialog()\">\r\n                        <button class=\"more-btn more-icon\" igxButton=\"icon\" igxButtonBackground=\"#EBEBEB\"\r\n                            igxButtonColor=\"black\">\r\n                            <igx-icon class=\"icon\" family=\"material\">more_horiz</igx-icon>\r\n                        </button>\r\n                        <span class=\"name btn\">More...</span>\r\n                    </span>\r\n                </div>\r\n            </igx-tab-content>\r\n        </igx-tab-item>\r\n    </igx-tabs>\r\n</div>\r\n<div igxToggle #chartPreviewDialog class=\"chart-preview\">\r\n    <div class=\"chart-preview-title\">\r\n        <h5>Preview Chart</h5>\r\n    </div>\r\n    <div class=\"chart-preview-area\">\r\n        <ng-template #chartPreview></ng-template>\r\n    </div>\r\n</div>", styles: [".analytics-btn,.analytics-btn [igxButton=flat],.analytics-btn .igx-button--flat{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-400), .12));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.analytics-btn,.analytics-btn [igxButton=outlined],.analytics-btn .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--hover-border-color: var(--igx-button-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--focus-border-color: var(--igx-button-focus-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--active-border-color: var(--igx-button-active-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--disabled-border-color: var(--igx-button-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-400), .12));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.analytics-btn,.analytics-btn [igxButton=raised],.analytics-btn .igx-button--raised{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-8));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-2));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-4));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-8));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-8))}.analytics-btn,.analytics-btn [igxButton=fab],.analytics-btn .igx-button--fab{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-12));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-6));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-12));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-12));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-12))}.analytics-btn,.analytics-btn [igxButton=icon],.analytics-btn .igx-button--icon{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--active-border-color: var(--igx-button-active-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.disableButton{opacity:.4;pointer-events:none}.clear,.more-action{display:flex;flex-flow:column;justify-content:center;border-left:1px solid #bdbdbd}.clear .btn,.clear .more-btn,.more-action .btn,.more-action .more-btn{width:68px;margin:0 0 7px;padding:0}.clear .more-btn,.more-action .more-btn{width:36px;height:36px;align-self:center;border-radius:20px}.clear .name,.more-action .name{font-size:.9rem;font-weight:400;text-align:center}.icon{pointer-events:none}.btn{display:inline-flex;flex-flow:column;align-items:center}.btn.condition{padding-right:16px}.btn.chart{padding-right:24px}.btn img,.btn span{pointer-events:none}.chart-preview{width:350px;height:300px;background-color:#fff;overflow:hidden}.chart-preview .chart-preview-title{margin:1rem;justify-content:center}.chart-preview .chart-preview-area{height:270px}::ng-deep .toggle-content{width:354px;max-width:358px;height:148px;background-color:#fff}::ng-deep .toggle-content,::ng-deep .toggle-content .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}::ng-deep .toggle-content .tabs{display:flex!important;border:.2px solid;border-color:#d3d3d3}::ng-deep .toggle-content .tab-option{padding:.9rem;height:100px;width:358px;display:inline-flex;overflow-x:auto;overflow-y:hidden;white-space:nowrap;align-content:center}::ng-deep .toggle-content .tab-option .chartImgButton{width:48px;height:48px}::ng-deep .toggle-content .tab-option .imgSize,::ng-deep .toggle-content .clear.action .imgSize{width:36px;height:36px;align-self:center}::ng-deep .toggle-content .action{cursor:pointer;opacity:1}::ng-deep .toggle-content .action.selected{opacity:.62}::ng-deep .toggle-content .action.selected--condition{pointer-events:none;opacity:.62}\n"], dependencies: [{ kind: "directive", type: i1$1.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: i1$1.IgxTabsComponent, selector: "igx-tabs", inputs: ["tabAlignment"] }, { kind: "component", type: i1$1.IgxTabItemComponent, selector: "igx-tab-item" }, { kind: "component", type: i1$1.IgxTabHeaderComponent, selector: "igx-tab-header" }, { kind: "component", type: i1$1.IgxTabContentComponent, selector: "igx-tab-content" }, { kind: "directive", type: i1$1.IgxTabHeaderLabelDirective, selector: "igx-tab-header-label,[igxTabHeaderLabel]" }, { kind: "directive", type: i1$1.IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: i1$1.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: SvgPipe, name: "svg" }] }); }
 }
-IgxContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxContextMenuComponent, deps: [{ token: i1$1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Component });
-IgxContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: IgxContextMenuComponent, selector: "igx-context-menu", viewQueries: [{ propertyName: "button", first: true, predicate: ["analyticsBtn"], descendants: true }, { propertyName: "tabsMenu", first: true, predicate: ["tabsMenu"], descendants: true, read: IgxToggleDirective }, { propertyName: "chartPreview", first: true, predicate: ["chartPreview"], descendants: true, read: ViewContainerRef }, { propertyName: "chartPreviewDialog", first: true, predicate: ["chartPreviewDialog"], descendants: true, read: IgxToggleDirective }, { propertyName: "tabs", first: true, predicate: IgxTabsComponent, descendants: true }], ngImport: i0, template: "<span #analyticsBtn class=\"analytics-btn\">\r\n    <button #btn igxButton=\"icon\" (click)=\"toggleTabMenu()\">\r\n        <igx-icon #icon class=\"icon\" family=\"material\">insert_chart_outlined</igx-icon>\r\n    </button>\r\n</span>\r\n<div #tabsMenu igxToggle class=\"toggle-content ig-scrollbar\">\r\n    <!--NOTE: This component has been updated by Infragistics migration: v12.0.0\r\nPlease check your template whether all bindings/event handlers are correct.-->\r\n    <igx-tabs tabsType=\"fixed\" [selectedIndex]=\"!this.textFormatters.length && chartTypes.length ? 1 : 0\">\r\n        <igx-tab-item [disabled]=\"!textFormatters.length\">\r\n            <igx-tab-header>\r\n                <span igxTabHeaderLabel>Conditional Formatting</span>\r\n            </igx-tab-header>\r\n            <igx-tab-content>\r\n                <igc-trial-watermark></igc-trial-watermark>\r\n                <div class=\"tabs\">\r\n                    <span class=\"tab-option\">\r\n                        <span *ngFor=\"let condition of textFormatters\" class=\"action btn condition\"\r\n                            [ngClass]=\"{'selected--condition': condition === currentFormatter}\"\r\n                            (click)=\"formatCells(condition)\">\r\n                            <div class=\"imgSize\" [innerHTML]=\"conditionImages[condition.replace(' ', '')] | svg\">\r\n                            </div>\r\n                            <span class=\"name\">{{condition.replace('10', '10%')}}</span>\r\n                        </span>\r\n                    </span>\r\n                    <span class=\"clear action\"\r\n                        [ngClass]=\"{'disableButton': contextDirective.textFormatter ? !contextDirective.textFormatter.formatter : true }\"\r\n                        (click)=\"clearFormat()\">\r\n                        <div class=\"imgSize\" [innerHTML]=\"conditionImages['Clear'] | svg\">\r\n                        </div>\r\n                        <span class=\"btn name\">Clear All</span>\r\n                    </span>\r\n                </div>\r\n            </igx-tab-content>\r\n        </igx-tab-item>\r\n        <igx-tab-item [disabled]=\"!chartTypes.length\">\r\n            <igx-tab-header>\r\n                <span igxTabHeaderLabel>Create Chart</span>\r\n            </igx-tab-header>\r\n            <igx-tab-content>\r\n                <igc-trial-watermark></igc-trial-watermark>\r\n                <div class=\"tabs\">\r\n                    <span class=\"tab-option\">\r\n                        <span *ngFor=\"let chart of chartTypes | slice:0:4\" class=\"action btn chart\"\r\n                            [ngClass]=\"{'selected': chart === currentChartType}\" (mouseenter)=\"previewChart(chart)\"\r\n                            (mouseleave)=\"hidePreview()\" (click)=\"openDialog(chart)\">\r\n                            <span [innerHTML]=\"chartImages[chart] | svg\" class=\"imgSize\">\r\n                            </span>\r\n                            <span class=\"name\">{{chart}}</span>\r\n                        </span>\r\n                    </span>\r\n                    <span class=\"more-action chart\" [ngClass]=\"{'disableButton': !chartTypes.length}\"\r\n                        (click)=\"openDialog()\">\r\n                        <button class=\"more-btn more-icon\" igxButton=\"icon\" igxButtonBackground=\"#EBEBEB\"\r\n                            igxButtonColor=\"black\">\r\n                            <igx-icon class=\"icon\" family=\"material\">more_horiz</igx-icon>\r\n                        </button>\r\n                        <span class=\"name btn\">More...</span>\r\n                    </span>\r\n                </div>\r\n            </igx-tab-content>\r\n        </igx-tab-item>\r\n    </igx-tabs>\r\n</div>\r\n<div igxToggle #chartPreviewDialog class=\"chart-preview\">\r\n    <div class=\"chart-preview-title\">\r\n        <h5>Preview Chart</h5>\r\n    </div>\r\n    <div class=\"chart-preview-area\">\r\n        <ng-template #chartPreview></ng-template>\r\n    </div>\r\n</div>", styles: [".analytics-btn,.analytics-btn [igxButton=flat],.analytics-btn .igx-button--flat{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-400), .12));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.analytics-btn,.analytics-btn [igxButton=outlined],.analytics-btn .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--hover-border-color: var(--igx-button-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--focus-border-color: var(--igx-button-focus-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--active-border-color: var(--igx-button-active-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--disabled-border-color: var(--igx-button-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-400), .12));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.analytics-btn,.analytics-btn [igxButton=raised],.analytics-btn .igx-button--raised{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-8));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-2));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-4));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-8));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-8))}.analytics-btn,.analytics-btn [igxButton=fab],.analytics-btn .igx-button--fab{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-12));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-6));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-12));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-12));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-12))}.analytics-btn,.analytics-btn [igxButton=icon],.analytics-btn .igx-button--icon{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--active-border-color: var(--igx-button-active-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.disableButton{opacity:.4;pointer-events:none}.clear,.more-action{display:flex;flex-flow:column;justify-content:center;border-left:1px solid #bdbdbd}.clear .btn,.clear .more-btn,.more-action .btn,.more-action .more-btn{width:68px;margin:0 0 7px;padding:0}.clear .more-btn,.more-action .more-btn{width:36px;height:36px;align-self:center;border-radius:20px}.clear .name,.more-action .name{font-size:.9rem;font-weight:400;text-align:center}.icon{pointer-events:none}.btn{display:inline-flex;flex-flow:column;align-items:center}.btn.condition{padding-right:16px}.btn.chart{padding-right:24px}.btn img,.btn span{pointer-events:none}.chart-preview{width:350px;height:300px;background-color:#fff;overflow:hidden}.chart-preview .chart-preview-title{margin:1rem;justify-content:center}.chart-preview .chart-preview-area{height:270px}::ng-deep .toggle-content{width:354px;max-width:358px;height:148px;background-color:#fff}::ng-deep .toggle-content,::ng-deep .toggle-content .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}::ng-deep .toggle-content .tabs{display:flex!important;border:.2px solid;border-color:#d3d3d3}::ng-deep .toggle-content .tab-option{padding:.9rem;height:100px;width:358px;display:inline-flex;overflow-x:auto;overflow-y:hidden;white-space:nowrap;align-content:center}::ng-deep .toggle-content .tab-option .chartImgButton{width:48px;height:48px}::ng-deep .toggle-content .tab-option .imgSize,::ng-deep .toggle-content .clear.action .imgSize{width:36px;height:36px;align-self:center}::ng-deep .toggle-content .action{cursor:pointer;opacity:1}::ng-deep .toggle-content .action.selected{opacity:.62}::ng-deep .toggle-content .action.selected--condition{pointer-events:none;opacity:.62}\n"], dependencies: [{ kind: "directive", type: i1$1.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$1.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i1$1.IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: i1$1.IgxTabsComponent, selector: "igx-tabs", inputs: ["tabAlignment"] }, { kind: "component", type: i1$1.IgxTabItemComponent, selector: "igx-tab-item" }, { kind: "component", type: i1$1.IgxTabHeaderComponent, selector: "igx-tab-header" }, { kind: "component", type: i1$1.IgxTabContentComponent, selector: "igx-tab-content" }, { kind: "directive", type: i1$1.IgxTabHeaderLabelDirective, selector: "igx-tab-header-label,[igxTabHeaderLabel]" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: SvgPipe, name: "svg" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-context-menu', template: "<span #analyticsBtn class=\"analytics-btn\">\r\n    <button #btn igxButton=\"icon\" (click)=\"toggleTabMenu()\">\r\n        <igx-icon #icon class=\"icon\" family=\"material\">insert_chart_outlined</igx-icon>\r\n    </button>\r\n</span>\r\n<div #tabsMenu igxToggle class=\"toggle-content ig-scrollbar\">\r\n    <!--NOTE: This component has been updated by Infragistics migration: v12.0.0\r\nPlease check your template whether all bindings/event handlers are correct.-->\r\n    <igx-tabs tabsType=\"fixed\" [selectedIndex]=\"!this.textFormatters.length && chartTypes.length ? 1 : 0\">\r\n        <igx-tab-item [disabled]=\"!textFormatters.length\">\r\n            <igx-tab-header>\r\n                <span igxTabHeaderLabel>Conditional Formatting</span>\r\n            </igx-tab-header>\r\n            <igx-tab-content>\r\n                <igc-trial-watermark></igc-trial-watermark>\r\n                <div class=\"tabs\">\r\n                    <span class=\"tab-option\">\r\n                        <span *ngFor=\"let condition of textFormatters\" class=\"action btn condition\"\r\n                            [ngClass]=\"{'selected--condition': condition === currentFormatter}\"\r\n                            (click)=\"formatCells(condition)\">\r\n                            <div class=\"imgSize\" [innerHTML]=\"conditionImages[condition.replace(' ', '')] | svg\">\r\n                            </div>\r\n                            <span class=\"name\">{{condition.replace('10', '10%')}}</span>\r\n                        </span>\r\n                    </span>\r\n                    <span class=\"clear action\"\r\n                        [ngClass]=\"{'disableButton': contextDirective.textFormatter ? !contextDirective.textFormatter.formatter : true }\"\r\n                        (click)=\"clearFormat()\">\r\n                        <div class=\"imgSize\" [innerHTML]=\"conditionImages['Clear'] | svg\">\r\n                        </div>\r\n                        <span class=\"btn name\">Clear All</span>\r\n                    </span>\r\n                </div>\r\n            </igx-tab-content>\r\n        </igx-tab-item>\r\n        <igx-tab-item [disabled]=\"!chartTypes.length\">\r\n            <igx-tab-header>\r\n                <span igxTabHeaderLabel>Create Chart</span>\r\n            </igx-tab-header>\r\n            <igx-tab-content>\r\n                <igc-trial-watermark></igc-trial-watermark>\r\n                <div class=\"tabs\">\r\n                    <span class=\"tab-option\">\r\n                        <span *ngFor=\"let chart of chartTypes | slice:0:4\" class=\"action btn chart\"\r\n                            [ngClass]=\"{'selected': chart === currentChartType}\" (mouseenter)=\"previewChart(chart)\"\r\n                            (mouseleave)=\"hidePreview()\" (click)=\"openDialog(chart)\">\r\n                            <span [innerHTML]=\"chartImages[chart] | svg\" class=\"imgSize\">\r\n                            </span>\r\n                            <span class=\"name\">{{chart}}</span>\r\n                        </span>\r\n                    </span>\r\n                    <span class=\"more-action chart\" [ngClass]=\"{'disableButton': !chartTypes.length}\"\r\n                        (click)=\"openDialog()\">\r\n                        <button class=\"more-btn more-icon\" igxButton=\"icon\" igxButtonBackground=\"#EBEBEB\"\r\n                            igxButtonColor=\"black\">\r\n                            <igx-icon class=\"icon\" family=\"material\">more_horiz</igx-icon>\r\n                        </button>\r\n                        <span class=\"name btn\">More...</span>\r\n                    </span>\r\n                </div>\r\n            </igx-tab-content>\r\n        </igx-tab-item>\r\n    </igx-tabs>\r\n</div>\r\n<div igxToggle #chartPreviewDialog class=\"chart-preview\">\r\n    <div class=\"chart-preview-title\">\r\n        <h5>Preview Chart</h5>\r\n    </div>\r\n    <div class=\"chart-preview-area\">\r\n        <ng-template #chartPreview></ng-template>\r\n    </div>\r\n</div>", styles: [".analytics-btn,.analytics-btn [igxButton=flat],.analytics-btn .igx-button--flat{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-400), .12));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.analytics-btn,.analytics-btn [igxButton=outlined],.analytics-btn .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--hover-border-color: var(--igx-button-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--focus-border-color: var(--igx-button-focus-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--active-border-color: var(--igx-button-active-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--disabled-border-color: var(--igx-button-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-400), .12));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.analytics-btn,.analytics-btn [igxButton=raised],.analytics-btn .igx-button--raised{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-8));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-2));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-4));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-8));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-8))}.analytics-btn,.analytics-btn [igxButton=fab],.analytics-btn .igx-button--fab{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-12));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-6));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-12));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-12));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-12))}.analytics-btn,.analytics-btn [igxButton=icon],.analytics-btn .igx-button--icon{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--active-border-color: var(--igx-button-active-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));--resting-elevation: var(--igx-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--igx-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--igx-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--igx-button-active-elevation, var(--ig-elevation-0));--background: var(--igx-button-background, #335e3b);--foreground: var(--igx-button-foreground, #fff);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, #396a42);--focus-foreground: var(--igx-button-focus-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, #396a42);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));--active-foreground: var(--igx-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));--border-radius: var(--igx-button-border-radius, 0);--resting-shadow: var(--igx-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--igx-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--igx-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--igx-button-active-shadow, var(--ig-elevation-0))}.disableButton{opacity:.4;pointer-events:none}.clear,.more-action{display:flex;flex-flow:column;justify-content:center;border-left:1px solid #bdbdbd}.clear .btn,.clear .more-btn,.more-action .btn,.more-action .more-btn{width:68px;margin:0 0 7px;padding:0}.clear .more-btn,.more-action .more-btn{width:36px;height:36px;align-self:center;border-radius:20px}.clear .name,.more-action .name{font-size:.9rem;font-weight:400;text-align:center}.icon{pointer-events:none}.btn{display:inline-flex;flex-flow:column;align-items:center}.btn.condition{padding-right:16px}.btn.chart{padding-right:24px}.btn img,.btn span{pointer-events:none}.chart-preview{width:350px;height:300px;background-color:#fff;overflow:hidden}.chart-preview .chart-preview-title{margin:1rem;justify-content:center}.chart-preview .chart-preview-area{height:270px}::ng-deep .toggle-content{width:354px;max-width:358px;height:148px;background-color:#fff}::ng-deep .toggle-content,::ng-deep .toggle-content .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}::ng-deep .toggle-content .tabs{display:flex!important;border:.2px solid;border-color:#d3d3d3}::ng-deep .toggle-content .tab-option{padding:.9rem;height:100px;width:358px;display:inline-flex;overflow-x:auto;overflow-y:hidden;white-space:nowrap;align-content:center}::ng-deep .toggle-content .tab-option .chartImgButton{width:48px;height:48px}::ng-deep .toggle-content .tab-option .imgSize,::ng-deep .toggle-content .clear.action .imgSize{width:36px;height:36px;align-self:center}::ng-deep .toggle-content .action{cursor:pointer;opacity:1}::ng-deep .toggle-content .action.selected{opacity:.62}::ng-deep .toggle-content .action.selected--condition{pointer-events:none;opacity:.62}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.IgxOverlayService }]; }, propDecorators: { button: [{
@@ -1101,18 +1102,15 @@ class IgxConditionalFormattingDirective {
         data.forEach(rec => result = result.concat(Object.values(rec)));
         return result;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxConditionalFormattingDirective, deps: [{ token: i1$1.IgxGridComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: IgxConditionalFormattingDirective, selector: "[igxConditionalFormatting]", inputs: { formatter: "formatter", formatColors: "formatColors" }, outputs: { onFormattersReady: "onFormattersReady" }, ngImport: i0 }); }
 }
-IgxConditionalFormattingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxConditionalFormattingDirective, deps: [{ token: IgxGridComponent }], target: i0.ɵɵFactoryTarget.Directive });
-IgxConditionalFormattingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: IgxConditionalFormattingDirective, selector: "[igxConditionalFormatting]", inputs: { formatter: "formatter", formatColors: "formatColors" }, outputs: { onFormattersReady: "onFormattersReady" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxConditionalFormattingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxConditionalFormattingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxConditionalFormatting]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.IgxGridComponent, decorators: [{
-                    type: Inject,
-                    args: [IgxGridComponent]
-                }] }]; }, propDecorators: { formatter: [{
+        }], ctorParameters: function () { return [{ type: i1$1.IgxGridComponent }]; }, propDecorators: { formatter: [{
                 type: Input
             }], formatColors: [{
                 type: Input
@@ -1504,10 +1502,10 @@ class IgxChartIntegrationDirective {
             this.customChartComponentOptions.get(chart)[optionsType][property] = options[property];
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxChartIntegrationDirective, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: IgxChartIntegrationDirective, selector: "[igxChartIntegration]", inputs: { chartData: "chartData", useLegend: "useLegend", defaultLabelMemberPath: "defaultLabelMemberPath", scatterChartYAxisValueMemberPath: "scatterChartYAxisValueMemberPath", bubbleChartRadiusMemberPath: "bubbleChartRadiusMemberPath" }, outputs: { onChartTypesDetermined: "onChartTypesDetermined", onChartCreationDone: "onChartCreationDone" }, ngImport: i0 }); }
 }
-IgxChartIntegrationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxChartIntegrationDirective, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-IgxChartIntegrationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: IgxChartIntegrationDirective, selector: "[igxChartIntegration]", inputs: { chartData: "chartData", useLegend: "useLegend", defaultLabelMemberPath: "defaultLabelMemberPath", scatterChartYAxisValueMemberPath: "scatterChartYAxisValueMemberPath", bubbleChartRadiusMemberPath: "bubbleChartRadiusMemberPath" }, outputs: { onChartTypesDetermined: "onChartTypesDetermined", onChartCreationDone: "onChartCreationDone" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxChartIntegrationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxChartIntegrationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxChartIntegration]'
@@ -1662,10 +1660,10 @@ class IgxContextMenuDirective {
         return rInex >= this._range.rowStart && rInex <= this._range.rowEnd
             && cIndex >= this._range.columnStart && cIndex <= this._range.columnEnd;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxContextMenuDirective, deps: [{ token: i1$1.IgxGridComponent }, { token: IgxConditionalFormattingDirective, optional: true }, { token: IgxChartIntegrationDirective, optional: true }, { token: i1$1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: IgxContextMenuDirective, selector: "[igxContextMenu]", outputs: { onButtonClose: "onButtonClose" }, ngImport: i0 }); }
 }
-IgxContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxContextMenuDirective, deps: [{ token: i1$1.IgxGridComponent }, { token: IgxConditionalFormattingDirective, optional: true }, { token: IgxChartIntegrationDirective, optional: true }, { token: i1$1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Directive });
-IgxContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: IgxContextMenuDirective, selector: "[igxContextMenu]", outputs: { onButtonClose: "onButtonClose" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxContextMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxContextMenu]'
@@ -1679,56 +1677,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
             }] } });
 
 class IgxExtrasModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxExtrasModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: IgxExtrasModule, declarations: [IgxConditionalFormattingDirective,
+            IgxChartIntegrationDirective,
+            IgxContextMenuDirective,
+            IgxContextMenuComponent,
+            IgxChartMenuComponent,
+            SvgPipe], imports: [IgxButtonModule,
+            IgxDividerModule,
+            IgxGridModule,
+            IgxTabsModule,
+            IgxToggleModule,
+            IgxDataChartCategoryModule,
+            IgxDataChartCoreModule,
+            IgxLegendModule,
+            IgxDataChartInteractivityModule,
+            IgxNumericXAxisModule,
+            IgxNumericYAxisModule,
+            IgxCategoryXAxisModule,
+            IgxItemLegendModule,
+            IgxPieChartModule,
+            IgxDataChartStackedModule,
+            IgxDividerModule,
+            IgxDataChartScatterModule,
+            IgxBarSeriesModule,
+            IgxIconModule,
+            IgxCategoryChartModule,
+            CommonModule], exports: [IgxConditionalFormattingDirective,
+            IgxChartIntegrationDirective,
+            IgxContextMenuDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxExtrasModule, imports: [IgxButtonModule,
+            IgxDividerModule,
+            IgxGridModule,
+            IgxTabsModule,
+            IgxToggleModule,
+            IgxDataChartCategoryModule,
+            IgxDataChartCoreModule,
+            IgxLegendModule,
+            IgxDataChartInteractivityModule,
+            IgxNumericXAxisModule,
+            IgxNumericYAxisModule,
+            IgxCategoryXAxisModule,
+            IgxItemLegendModule,
+            IgxPieChartModule,
+            IgxDataChartStackedModule,
+            IgxDividerModule,
+            IgxDataChartScatterModule,
+            IgxBarSeriesModule,
+            IgxIconModule,
+            IgxCategoryChartModule,
+            CommonModule] }); }
 }
-IgxExtrasModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxExtrasModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IgxExtrasModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: IgxExtrasModule, declarations: [IgxConditionalFormattingDirective,
-        IgxChartIntegrationDirective,
-        IgxContextMenuDirective,
-        IgxContextMenuComponent,
-        IgxChartMenuComponent,
-        SvgPipe], imports: [IgxButtonModule,
-        IgxDividerModule,
-        IgxGridModule,
-        IgxTabsModule,
-        IgxToggleModule,
-        IgxDataChartCategoryModule,
-        IgxDataChartCoreModule,
-        IgxLegendModule,
-        IgxDataChartInteractivityModule,
-        IgxNumericXAxisModule,
-        IgxNumericYAxisModule,
-        IgxCategoryXAxisModule,
-        IgxItemLegendModule,
-        IgxPieChartModule,
-        IgxDataChartStackedModule,
-        IgxDividerModule,
-        IgxDataChartScatterModule,
-        IgxBarSeriesModule,
-        IgxIconModule,
-        IgxCategoryChartModule], exports: [IgxConditionalFormattingDirective,
-        IgxChartIntegrationDirective,
-        IgxContextMenuDirective] });
-IgxExtrasModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxExtrasModule, imports: [IgxButtonModule,
-        IgxDividerModule,
-        IgxGridModule,
-        IgxTabsModule,
-        IgxToggleModule,
-        IgxDataChartCategoryModule,
-        IgxDataChartCoreModule,
-        IgxLegendModule,
-        IgxDataChartInteractivityModule,
-        IgxNumericXAxisModule,
-        IgxNumericYAxisModule,
-        IgxCategoryXAxisModule,
-        IgxItemLegendModule,
-        IgxPieChartModule,
-        IgxDataChartStackedModule,
-        IgxDividerModule,
-        IgxDataChartScatterModule,
-        IgxBarSeriesModule,
-        IgxIconModule,
-        IgxCategoryChartModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IgxExtrasModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IgxExtrasModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1759,7 +1759,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                         IgxDataChartScatterModule,
                         IgxBarSeriesModule,
                         IgxIconModule,
-                        IgxCategoryChartModule
+                        IgxCategoryChartModule,
+                        CommonModule
                     ],
                     exports: [
                         IgxConditionalFormattingDirective,