igniteui-angular-extras 19.0.3 → 19.1.1

package/fesm2022/igniteui-angular-extras.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Input, Output, Pipe, ViewContainerRef, Component, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, ViewChild, HostBinding, Optional } from '@angular/core';
+import { EventEmitter, Input, Output, Directive, Pipe, ViewContainerRef, HostBinding, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, Component, Optional } from '@angular/core';
 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, IgxBarSeriesModule, IgxCategoryChartModule, IgxCategoryXAxisModule, IgxDataChartCategoryModule, IgxDataChartCoreModule, IgxDataChartInteractivityModule, IgxDataChartScatterModule, IgxDataChartStackedModule, IgxItemLegendModule, IgxLegendModule, IgxNumericXAxisModule, IgxNumericYAxisModule } from 'igniteui-angular-charts';
 import { Subject } from 'rxjs';
-import { takeUntil, merge, debounceTime, filter } from 'rxjs/operators';
+import { takeUntil, debounceTime, merge, filter } from 'rxjs/operators';
 import * as i1 from 'igniteui-angular';
-import { IgxIconComponent, IgxIconButtonDirective, CloseScrollStrategy, AutoPositionStrategy, HorizontalAlignment, VerticalAlignment, IgxToggleDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, AbsoluteScrollStrategy, IgxToggleActionDirective } from 'igniteui-angular';
+import { IgxIconComponent, IgxIconButtonDirective, AutoPositionStrategy, CloseScrollStrategy, VerticalAlignment, HorizontalAlignment, IgxToggleDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, AbsoluteScrollStrategy, IgxToggleActionDirective } from 'igniteui-angular';
 import * as i1$2 from '@angular/common';
-import { CommonModule, NgFor } from '@angular/common';
+import { CommonModule, NgFor, NgIf } from '@angular/common';
 import { ResizeObserver } from '@juggle/resize-observer';
 import * as i1$1 from '@angular/platform-browser';
 
@@ -91,6 +91,12 @@ class IgxDataChartInitializer extends ChartInitializer {
         this.seriesType = seriesType;
     }
     initChart(chart, options) {
+        if (chart.series.count) {
+            chart.series.clear();
+        }
+        if (chart.axes.count) {
+            chart.axes.clear();
+        }
         options.seriesOptions.forEach((option) => {
             const series = this.seriesFactory.create(this.seriesType);
             series.xAxis = this.xAxis;
@@ -120,6 +126,12 @@ class IgxStackedDataChartInitializer extends ChartInitializer {
         this.seriesType = seriesType;
     }
     initChart(chart, options) {
+        if (chart.series.count) {
+            chart.series.clear();
+        }
+        if (chart.axes.count) {
+            chart.axes.clear();
+        }
         const series = this.seriesFactory.create(this.seriesType);
         series.xAxis = this.xAxis;
         series.yAxis = this.yAxis;
@@ -150,7 +162,7 @@ class IgxChartIntegrationDirective {
         this._valueMemberPaths = Object.keys(dataModel).filter(key => typeof dataModel[key] === 'number');
         this._chartData = selectedData.map((dataRecord, index) => this.addIndexMemberPath(dataRecord, index + 1));
         const args = {
-            chartsAvailabilty: new Map(),
+            chartsAvailability: new Map(),
             chartsForCreation: []
         };
         if (selectedData.length === 0 || this._valueMemberPaths.length === 0) {
@@ -183,7 +195,7 @@ class IgxChartIntegrationDirective {
         if (!canCreateBubbleChart) {
             charts.delete(CHART_TYPE.SCATTER_BUBBLE);
         }
-        args.chartsAvailabilty = this.chartTypesAvailability;
+        args.chartsAvailability = this.chartTypesAvailability;
         args.chartsForCreation = [...charts];
         this.onChartTypesDetermined.emit(args);
     }
@@ -278,6 +290,9 @@ class IgxChartIntegrationDirective {
             this.customChartComponentOptions.set(head, {});
         }
     }
+    getAllChartTypes() {
+        return Array.from(this._dataChartTypes);
+    }
     getAvailableCharts() {
         const res = [];
         this.chartTypesAvailability.forEach((isAvailable, chartType) => {
@@ -301,33 +316,40 @@ class IgxChartIntegrationDirective {
             }
         });
     }
-    chartFactory(type, viewContainerRef) {
+    chartFactory(type, viewContainerRef, createdChart) {
         if (!this.chartTypesAvailability.get(type)) {
             return;
         }
-        let componentFactory;
-        let componentRef;
-        this._sizeScale.maximumValue = 60;
-        this._sizeScale.minimumValue = 10;
         const chartType = this.dataCharts.get(type);
-        if (type === CHART_TYPE.PIE) {
-            componentFactory = this.factoryResolver.resolveComponentFactory(IgxPieChartComponent);
-            componentRef = viewContainerRef.createComponent(componentFactory);
-        }
-        else {
-            componentFactory = this.factoryResolver.resolveComponentFactory(IgxDataChartComponent);
-            componentRef = viewContainerRef.createComponent(componentFactory);
-        }
         const options = this.getChartOptions(type);
         const initializer = this.getInitializer(type, chartType);
-        if (this.useLegend) {
-            const legendType = type === CHART_TYPE.PIE ? IgxItemLegendComponent : IgxLegendComponent;
-            const legendFactory = this.factoryResolver.resolveComponentFactory(legendType);
-            const legendComponentRef = viewContainerRef.createComponent(legendFactory);
-            options.chartOptions['legend'] = legendComponentRef.instance;
+        let chart;
+        if (viewContainerRef) {
+            let componentFactory;
+            let componentRef;
+            this._sizeScale.maximumValue = 60;
+            this._sizeScale.minimumValue = 10;
+            if (type === CHART_TYPE.PIE) {
+                componentFactory = this.factoryResolver.resolveComponentFactory(IgxPieChartComponent);
+                componentRef = viewContainerRef.createComponent(componentFactory);
+            }
+            else {
+                componentFactory = this.factoryResolver.resolveComponentFactory(IgxDataChartComponent);
+                componentRef = viewContainerRef.createComponent(componentFactory);
+            }
+            if (this.useLegend) {
+                const legendType = type === CHART_TYPE.PIE ? IgxItemLegendComponent : IgxLegendComponent;
+                const legendFactory = this.factoryResolver.resolveComponentFactory(legendType);
+                const legendComponentRef = viewContainerRef.createComponent(legendFactory);
+                options.chartOptions['legend'] = legendComponentRef.instance;
+            }
+            chart = initializer.initChart(componentRef.instance, options);
+        }
+        else if (createdChart) {
+            chart = initializer.initChart(createdChart, options);
         }
-        const chart = initializer.initChart(componentRef.instance, options);
         this.onChartCreationDone.emit(chart);
+        return chart;
     }
     getInitializer(chartType, componentClassRef) {
         if (chartType.includes('Pie')) {
@@ -422,10 +444,10 @@ class IgxChartIntegrationDirective {
             this.customChartComponentOptions.get(chart)[optionsType][property] = options[property];
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IgxChartIntegrationDirective, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: IgxChartIntegrationDirective, isStandalone: true, selector: "[igxChartIntegration]", inputs: { chartData: "chartData", useLegend: "useLegend", defaultLabelMemberPath: "defaultLabelMemberPath", scatterChartYAxisValueMemberPath: "scatterChartYAxisValueMemberPath", bubbleChartRadiusMemberPath: "bubbleChartRadiusMemberPath" }, outputs: { onChartTypesDetermined: "onChartTypesDetermined", onChartCreationDone: "onChartCreationDone" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxChartIntegrationDirective, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: IgxChartIntegrationDirective, isStandalone: true, 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: "19.1.7", ngImport: i0, type: IgxChartIntegrationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxChartIntegrationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxChartIntegration]',
@@ -464,9 +486,8 @@ class IgxConditionalFormattingDirective {
         return this._formatColors;
     }
     get selectedData() {
-        if (!this._selectedData.length) {
-            this._selectedData = this.toArray(this.grid.getSelectedData());
-        }
+        this._selectedData = this.grid.getSelectedData().length ? this.toArray(this.grid.getSelectedData()) :
+            this.toArray(this.grid.getSelectedColumnsData());
         return this._selectedData;
     }
     get textData() {
@@ -623,7 +644,10 @@ class IgxConditionalFormattingDirective {
     }
     ngAfterViewInit() {
         this.grid.rangeSelected.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.determineFormatters();
+            this.determineFormatters(false);
+        });
+        this.grid.columnSelectionChanging.pipe(takeUntil(this.destroy$), debounceTime(200)).subscribe(() => {
+            this.determineFormatters(true);
         });
         this.grid.cellEdit.pipe(takeUntil(this.destroy$)).subscribe((args) => {
             if ((args.newValue === args.oldValue || !this.formatter)) {
@@ -631,8 +655,7 @@ class IgxConditionalFormattingDirective {
             }
             if (this.isWithInFormattedRange(args.cellID.rowIndex, args.cellID.columnID - 1)) {
                 const value = Number(args.newValue);
-                const valueToBeAdded = !Number.isNaN(value) && Number.isFinite(value) ? value : args.newValue;
-                this.selectedData.splice(this.selectedData.indexOf(args.oldValue), 1, valueToBeAdded);
+                this.selectedData.push(!Number.isNaN(value) && Number.isFinite(value) ? value : args.newValue);
                 this.recalcCachedValues();
                 this.formatCells(this.formatter, undefined, false);
             }
@@ -662,9 +685,10 @@ class IgxConditionalFormattingDirective {
             this.grid.cdr.detectChanges();
         });
     }
-    determineFormatters() {
-        const numericData = this.toArray(this.grid.getSelectedData()).some(rec => typeof rec === 'number');
-        const textData = this.toArray(this.grid.getSelectedData()).some(rec => typeof rec === 'string');
+    determineFormatters(fromColumn) {
+        const data = fromColumn ? this.grid.getSelectedColumnsData() : this.grid.getSelectedData();
+        const numericData = this.toArray(data).some(rec => typeof rec === 'number');
+        const textData = this.toArray(data).some(rec => typeof rec === 'string');
         const formatters = Array.of(...this._commonFormattersName);
         if (!(numericData) && textData) {
             formatters.splice(0, 0, ...this._textFormatters);
@@ -679,13 +703,29 @@ class IgxConditionalFormattingDirective {
     }
     recalcCachedValues(clearAll = false) {
         if (clearAll) {
-            this._startColumn = Math.min(...this.grid.getSelectedRanges().map(r => Number(r.columnStart)));
-            this._endColumn = Math.max(...this.grid.getSelectedRanges().map(r => Number(r.columnEnd)));
+            if (this.grid.getSelectedRanges().length === 0) {
+                const selectedColumns = this.grid.selectedColumns();
+                if (selectedColumns.length === 1) {
+                    this._startColumn = this._endColumn = selectedColumns[0].visibleIndex;
+                }
+                else if (selectedColumns.length > 1) {
+                    this._startColumn = Math.min(...selectedColumns.map(c => c.visibleIndex));
+                    this._endColumn = Math.max(...selectedColumns.map(c => c.visibleIndex));
+                }
+                else {
+                    return;
+                }
+            }
+            else {
+                this._startColumn = Math.min(...this.grid.getSelectedRanges().map(r => Number(r.columnStart)));
+                this._endColumn = Math.max(...this.grid.getSelectedRanges().map(r => Number(r.columnEnd)));
+            }
             this._selectedData = [];
         }
         this._valueForComparison = this.textData[0];
+        const hasNegativeValues = this.numericData.some(value => value < 0);
         this._maxValue = Math.max(...this.numericData);
-        this._minValue = Math.min(...this.numericData.filter(value => value < 0)) | 0;
+        this._minValue = hasNegativeValues ? Math.min(...this.numericData.filter(value => value < 0)) : 0;
     }
     isWithInFormattedRange(rowIndex, colID) {
         const visibleIndex = typeof colID === 'string' ? this.grid.getColumnByName(colID).visibleIndex : colID;
@@ -704,16 +744,31 @@ class IgxConditionalFormattingDirective {
         return Math.ceil(Math.abs(this._minValue) / (this._maxValue + Math.abs(this._minValue)) * 100);
     }
     getPositivePercentage(val) {
-        const result = (Math.ceil(val) / (this._maxValue + Math.abs(this._minValue))) * 100;
-        return Math.ceil(result);
+        return Math.ceil(Math.ceil(val) / (this._maxValue + Math.abs(this._minValue)) * 100);
     }
     getNegativePercentage(val) {
-        const result = (Math.abs(val) / (this._maxValue + Math.abs(this._minValue))) * 100;
-        return Math.ceil(result);
+        return Math.ceil(Math.abs(val) / (this._maxValue + Math.abs(this._minValue)) * 100);
     }
     resetRange(formatRange) {
         this.formatedRange.clear();
-        const customRange = formatRange ? formatRange : this.grid.getSelectedRanges();
+        const selectedRanges = this.grid.getSelectedRanges();
+        let customRange;
+        // Column selection custom range
+        if (selectedRanges.length === 0) {
+            const selectedColumns = this.grid.selectedColumns();
+            customRange = [];
+            selectedColumns.forEach(c => {
+                customRange.push({
+                    columnEnd: c.visibleIndex,
+                    columnStart: c.visibleIndex,
+                    rowEnd: this.grid.data.length - 1,
+                    rowStart: 0
+                });
+            });
+        }
+        else {
+            customRange = formatRange ? formatRange : this.grid.getSelectedRanges();
+        }
         customRange.forEach(range => {
             for (let ri = range.rowStart; ri <= Number(range.rowEnd); ri++) {
                 for (let ci = Number(range.columnStart); ci <= Number(range.columnEnd); ci++) {
@@ -732,10 +787,10 @@ class IgxConditionalFormattingDirective {
         data.forEach(rec => result = result.concat(Object.values(rec)));
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IgxConditionalFormattingDirective, deps: [{ token: i1.IgxGridComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: IgxConditionalFormattingDirective, isStandalone: true, selector: "[igxConditionalFormatting]", inputs: { formatter: "formatter", formatColors: "formatColors" }, outputs: { onFormattersReady: "onFormattersReady" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxConditionalFormattingDirective, deps: [{ token: i1.IgxGridComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: IgxConditionalFormattingDirective, isStandalone: true, selector: "[igxConditionalFormatting]", inputs: { formatter: "formatter", formatColors: "formatColors" }, outputs: { onFormattersReady: "onFormattersReady" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IgxConditionalFormattingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxConditionalFormattingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxConditionalFormatting]',
@@ -1183,10 +1238,10 @@ class SvgPipe {
     transform(markup) {
         return this.sanitizer.bypassSecurityTrustHtml(markup);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SvgPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: SvgPipe, isStandalone: true, name: "svg" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SvgPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: SvgPipe, isStandalone: true, name: "svg" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SvgPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SvgPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'svg',
@@ -1236,12 +1291,12 @@ class IgxChartMenuComponent {
         catch (e) { }
         this.chartDirective.chartFactory(chartType, this.chartArea);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IgxChartMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IgxChartMenuComponent, isStandalone: true, 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 igxIconButton=\"flat\" (click)=\"toggleFullScreen()\">\r\n            <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n        </button>\r\n        <button igxIconButton=\"flat\" (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 igxIconButton=\"flat\" 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,.selection-area .ig-scrollbar{--sb-size: var(--ig-scrollbar-sb-size, 1rem);--sb-thumb-min-height: var(--ig-scrollbar-sb-thumb-min-height, 2rem);--sb-thumb-bg-color: var(--ig-scrollbar-sb-thumb-bg-color, hsl(from var(--ig-gray-400) h s l/1));--sb-thumb-bg-color-hover: var(--ig-scrollbar-sb-thumb-bg-color-hover, hsl(from var(--ig-gray-400) h s l/1));--sb-thumb-border-color: var(--ig-scrollbar-sb-thumb-border-color, transparent);--sb-thumb-border-size: var(--ig-scrollbar-sb-thumb-border-size, 0);--sb-thumb-border-radius: var(--ig-scrollbar-sb-thumb-border-radius, 0);--sb-track-bg-color: var(--ig-scrollbar-sb-track-bg-color, hsl(from var(--ig-gray-100) h s l/1));--sb-track-bg-color-hover: var(--ig-scrollbar-sb-track-bg-color-hover, hsl(from var(--ig-gray-100) h s l/1));--sb-track-border-color: var(--ig-scrollbar-sb-track-border-color, transparent);--sb-track-border-size: var(--ig-scrollbar-sb-track-border-size, 0);--sb-corner-bg: var(--ig-scrollbar-sb-corner-bg, hsl(from var(--ig-gray-100) h s l/1));--sb-corner-border-color: var(--ig-scrollbar-sb-corner-border-color, transparent);--sb-corner-border-size: var(--ig-scrollbar-sb-corner-border-size, 0);--ig-theme: material}@-moz-document url-prefix(){}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.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:#000!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "pipe", type: SvgPipe, name: "svg" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxChartMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: IgxChartMenuComponent, isStandalone: true, 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 igxIconButton=\"flat\" (click)=\"toggleFullScreen()\">\r\n            <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n        </button>\r\n        <button igxIconButton=\"flat\" (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 igxIconButton=\"flat\" 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,.selection-area .ig-scrollbar{--sb-size: var(--ig-scrollbar-sb-size, 1rem);--sb-thumb-min-height: var(--ig-scrollbar-sb-thumb-min-height, 2rem);--sb-thumb-bg-color: var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400));--sb-thumb-bg-color-hover: var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400));--sb-thumb-border-color: var(--ig-scrollbar-sb-thumb-border-color, transparent);--sb-thumb-border-size: var(--ig-scrollbar-sb-thumb-border-size, 0);--sb-thumb-border-radius: var(--ig-scrollbar-sb-thumb-border-radius, 0);--sb-track-bg-color: var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100));--sb-track-bg-color-hover: var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100));--sb-track-border-color: var(--ig-scrollbar-sb-track-border-color, transparent);--sb-track-border-size: var(--ig-scrollbar-sb-track-border-size, 0);--sb-corner-bg: var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100));--sb-corner-border-color: var(--ig-scrollbar-sb-corner-border-color, transparent);--sb-corner-border-size: var(--ig-scrollbar-sb-corner-border-size, 0);--ig-theme: material}@-moz-document url-prefix(){}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.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:#000!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "pipe", type: SvgPipe, name: "svg" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-chart-menu', encapsulation: ViewEncapsulation.None, imports: [CommonModule, IgxIconComponent, IgxIconButtonDirective, SvgPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], 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 igxIconButton=\"flat\" (click)=\"toggleFullScreen()\">\r\n            <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n        </button>\r\n        <button igxIconButton=\"flat\" (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 igxIconButton=\"flat\" 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,.selection-area .ig-scrollbar{--sb-size: var(--ig-scrollbar-sb-size, 1rem);--sb-thumb-min-height: var(--ig-scrollbar-sb-thumb-min-height, 2rem);--sb-thumb-bg-color: var(--ig-scrollbar-sb-thumb-bg-color, hsl(from var(--ig-gray-400) h s l/1));--sb-thumb-bg-color-hover: var(--ig-scrollbar-sb-thumb-bg-color-hover, hsl(from var(--ig-gray-400) h s l/1));--sb-thumb-border-color: var(--ig-scrollbar-sb-thumb-border-color, transparent);--sb-thumb-border-size: var(--ig-scrollbar-sb-thumb-border-size, 0);--sb-thumb-border-radius: var(--ig-scrollbar-sb-thumb-border-radius, 0);--sb-track-bg-color: var(--ig-scrollbar-sb-track-bg-color, hsl(from var(--ig-gray-100) h s l/1));--sb-track-bg-color-hover: var(--ig-scrollbar-sb-track-bg-color-hover, hsl(from var(--ig-gray-100) h s l/1));--sb-track-border-color: var(--ig-scrollbar-sb-track-border-color, transparent);--sb-track-border-size: var(--ig-scrollbar-sb-track-border-size, 0);--sb-corner-bg: var(--ig-scrollbar-sb-corner-bg, hsl(from var(--ig-gray-100) h s l/1));--sb-corner-border-color: var(--ig-scrollbar-sb-corner-border-color, transparent);--sb-corner-border-size: var(--ig-scrollbar-sb-corner-border-size, 0);--ig-theme: material}@-moz-document url-prefix(){}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.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:#000!important}\n"] }]
+            args: [{ selector: 'igx-chart-menu', encapsulation: ViewEncapsulation.None, imports: [CommonModule, IgxIconComponent, IgxIconButtonDirective, SvgPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], 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 igxIconButton=\"flat\" (click)=\"toggleFullScreen()\">\r\n            <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n        </button>\r\n        <button igxIconButton=\"flat\" (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 igxIconButton=\"flat\" 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,.selection-area .ig-scrollbar{--sb-size: var(--ig-scrollbar-sb-size, 1rem);--sb-thumb-min-height: var(--ig-scrollbar-sb-thumb-min-height, 2rem);--sb-thumb-bg-color: var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400));--sb-thumb-bg-color-hover: var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400));--sb-thumb-border-color: var(--ig-scrollbar-sb-thumb-border-color, transparent);--sb-thumb-border-size: var(--ig-scrollbar-sb-thumb-border-size, 0);--sb-thumb-border-radius: var(--ig-scrollbar-sb-thumb-border-radius, 0);--sb-track-bg-color: var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100));--sb-track-bg-color-hover: var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100));--sb-track-border-color: var(--ig-scrollbar-sb-track-border-color, transparent);--sb-track-border-size: var(--ig-scrollbar-sb-track-border-size, 0);--sb-corner-bg: var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100));--sb-corner-border-color: var(--ig-scrollbar-sb-corner-border-color, transparent);--sb-corner-border-size: var(--ig-scrollbar-sb-corner-border-size, 0);--ig-theme: material}@-moz-document url-prefix(){}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.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:#000!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { chartArea: [{
                 type: ViewChild,
                 args: ['chartArea', { read: ViewContainerRef }]
@@ -1369,6 +1424,7 @@ class IgxContextMenuComponent {
         this.overlayService = overlayService;
         this.chartTypes = [];
         this.textFormatters = [];
+        this.displayCreationTab = true;
         this.destroy$ = new Subject();
         this._chartDialogOS = { closeOnOutsideClick: false };
         this._tabsMenuOverlaySettings = {
@@ -1405,6 +1461,7 @@ class IgxContextMenuComponent {
     ngAfterViewInit() {
         this.chartTypes = this.contextDirective.charts;
         this.textFormatters = this.contextDirective.formatters;
+        this.displayCreationTab = this.contextDirective.displayCreationTab;
         if (this.contextDirective.chartsDirective) {
             this.contextDirective.chartsDirective.onChartTypesDetermined.pipe(takeUntil(this.destroy$))
                 .subscribe((args) => (this.chartTypes = args.chartsForCreation));
@@ -1434,6 +1491,23 @@ class IgxContextMenuComponent {
                 instance.currentChartType = this.currentChartType;
                 instance.allCharts = this.chartTypes;
                 instance.chartDirective = this.contextDirective.chartsDirective;
+                // TODO: This code handles resizing for a fullscreen dialog when the chart dialog resize event is triggered.  
+                // Currently, it determines the visible child element by filtering based on visibility and CSS classes,  
+                // which is not a reliable or optimal approach. Instead, this should be improved by properly handling  
+                // when elements in the overlay are detached and ensuring chart dialog is only available. 
+                instance.chartDialogResizeNotify?.subscribe(resizedContentArgs => {
+                    if (this.overlayService._overlayElement) {
+                        const overlayElement = this.overlayService._overlayElement;
+                        const visibleChild = Array.from(overlayElement.children).find((child) => getComputedStyle(child).visibility !== 'hidden' &&
+                            child.classList.contains('igx-overlay__wrapper--flex'));
+                        if (visibleChild) {
+                            const targetElement = visibleChild.children[0];
+                            if (targetElement && targetElement.style) {
+                                targetElement.style.width = resizedContentArgs[0].contentRect.width + 'px';
+                            }
+                        }
+                    }
+                });
                 instance.onClose?.subscribe(() => this.closeDialog());
             }
         });
@@ -1488,14 +1562,15 @@ class IgxContextMenuComponent {
             this._dialogId = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IgxContextMenuComponent, deps: [{ token: i1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IgxContextMenuComponent, isStandalone: true, 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 igxIconButton=\"flat\" (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    <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\" igxIconButton=\"flat\" [style.--background]=\"'#EBEBEB'\"\r\n                            [style.--foreground]=\"'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, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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);--focus-foreground: var(--igx-button-focus-foreground, white);--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, hsl(from var(--ig-secondary-500) h s l/1));--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));--ig-theme: material}.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, hsl(from var(--ig-secondary-500) h s l/1));--hover-border-color: var(--igx-button-hover-border-color, hsl(from var(--ig-secondary-500) h s l/1));--focus-border-color: var(--igx-button-focus-border-color, hsl(from var(--ig-secondary-500) h s l/1));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsl(from var(--ig-secondary-500) h s l/1));--active-border-color: var(--igx-button-active-border-color, hsl(from var(--ig-secondary-500) h s l/1));--disabled-border-color: var(--igx-button-disabled-border-color, hsl(from var(--ig-gray-300) h s l/1));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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);--focus-foreground: var(--igx-button-focus-foreground, white);--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, hsl(from var(--ig-secondary-500) h s l/1));--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));--ig-theme: material}.analytics-btn,.analytics-btn [igxButton=contained],.analytics-btn .igx-button--contained{--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, hsl(from var(--ig-gray-100) h s l/1));--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-300) h s l/1));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-foreground: var(--igx-button-focus-foreground, white);--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-foreground: var(--igx-button-active-foreground, color-mix(in oklch, var(--ig-secondary-300-contrast) 100%, transparent));--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));--ig-theme: material}.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, hsl(from var(--ig-gray-100) h s l/1));--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--igx-button-default-size, 3);--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);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-300) h s l/1));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-foreground: var(--igx-button-focus-foreground, white);--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-foreground: var(--igx-button-active-foreground, color-mix(in oklch, var(--ig-secondary-300-contrast) 100%, transparent));--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));--ig-theme: material}.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,::ng-deep .toggle-content .ig-scrollbar{--sb-size: var(--ig-scrollbar-sb-size, 1rem);--sb-thumb-min-height: var(--ig-scrollbar-sb-thumb-min-height, 2rem);--sb-thumb-bg-color: var(--ig-scrollbar-sb-thumb-bg-color, hsl(from var(--ig-gray-400) h s l/1));--sb-thumb-bg-color-hover: var(--ig-scrollbar-sb-thumb-bg-color-hover, hsl(from var(--ig-gray-400) h s l/1));--sb-thumb-border-color: var(--ig-scrollbar-sb-thumb-border-color, transparent);--sb-thumb-border-size: var(--ig-scrollbar-sb-thumb-border-size, 0);--sb-thumb-border-radius: var(--ig-scrollbar-sb-thumb-border-radius, 0);--sb-track-bg-color: var(--ig-scrollbar-sb-track-bg-color, hsl(from var(--ig-gray-100) h s l/1));--sb-track-bg-color-hover: var(--ig-scrollbar-sb-track-bg-color-hover, hsl(from var(--ig-gray-100) h s l/1));--sb-track-border-color: var(--ig-scrollbar-sb-track-border-color, transparent);--sb-track-border-size: var(--ig-scrollbar-sb-track-border-size, 0);--sb-corner-bg: var(--ig-scrollbar-sb-corner-bg, hsl(from var(--ig-gray-100) h s l/1));--sb-corner-border-color: var(--ig-scrollbar-sb-corner-border-color, transparent);--sb-corner-border-size: var(--ig-scrollbar-sb-corner-border-size, 0);--ig-theme: material}@-moz-document url-prefix(){}::ng-deep .toggle-content{width:354px;max-width:358px;height:148px;background-color:#fff}::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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: SvgPipe, name: "svg" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxTabsComponent, selector: "igx-tabs", inputs: ["tabAlignment", "activation"] }, { kind: "component", type: IgxTabItemComponent, selector: "igx-tab-item" }, { kind: "component", type: IgxTabHeaderComponent, selector: "igx-tab-header" }, { kind: "component", type: IgxTabContentComponent, selector: "igx-tab-content" }, { kind: "directive", type: IgxTabHeaderLabelDirective, selector: "igx-tab-header-label,[igxTabHeaderLabel]" }, { kind: "ngmodule", type: IgxBarSeriesModule }, { kind: "ngmodule", type: IgxCategoryChartModule }, { kind: "ngmodule", type: IgxCategoryXAxisModule }, { kind: "ngmodule", type: IgxDataChartCategoryModule }, { kind: "ngmodule", type: IgxDataChartCoreModule }, { kind: "ngmodule", type: IgxDataChartInteractivityModule }, { kind: "ngmodule", type: IgxDataChartScatterModule }, { kind: "ngmodule", type: IgxDataChartStackedModule }, { kind: "ngmodule", type: IgxItemLegendModule }, { kind: "ngmodule", type: IgxLegendModule }, { kind: "ngmodule", type: IgxNumericXAxisModule }, { kind: "ngmodule", type: IgxNumericYAxisModule }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxContextMenuComponent, deps: [{ token: i1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: IgxContextMenuComponent, isStandalone: true, 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 class=\"analytics-button\" igxIconButton=\"flat\" (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    <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 *ngIf=\"displayCreationTab\" [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\" igxIconButton=\"flat\" [style.--background]=\"'#EBEBEB'\"\r\n                            [style.--foreground]=\"'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: [":host ::ng-deep .analytics-button{--ig-size: var(--ig-size-small)}:host ::ng-deep .analytics-button,:host ::ng-deep .analytics-button [igxButton=flat],:host ::ng-deep .analytics-button .igx-button--flat,:host ::ng-deep .analytics-button igx-button,:host ::ng-deep .analytics-button igx-button [igxButton=flat],:host ::ng-deep .analytics-button igx-button .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, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, hsl(from var(--ig-success-500) h s l/.8));--focus-foreground: var(--igx-button-focus-foreground, var(--ig-gray-900-contrast));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, var(--ig-gray-900-contrast));--icon-color: var(--igx-button-icon-color, var(--ig-gray-900-contrast));--icon-color-hover: var(--igx-button-icon-color-hover, var(--ig-gray-900-contrast));--hover-background: var(--igx-button-hover-background, var(--ig-success-500));--hover-foreground: var(--igx-button-hover-foreground, var(--ig-gray-900-contrast));--focus-background: var(--igx-button-focus-background, var(--ig-success-500));--focus-visible-background: var(--igx-button-focus-visible-background, var(--ig-success-500));--focus-hover-background: var(--igx-button-focus-hover-background, hsl(from var(--ig-secondary-500) h s l/.24));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, var(--ig-secondary-500));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, var(--ig-gray-900-contrast));--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-500));--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));--ig-theme: material}:host ::ng-deep .analytics-button,:host ::ng-deep .analytics-button [igxButton=outlined],:host ::ng-deep .analytics-button .igx-button--outlined,:host ::ng-deep .analytics-button igx-button,:host ::ng-deep .analytics-button igx-button [igxButton=outlined],:host ::ng-deep .analytics-button igx-button .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, var(--ig-secondary-500));--hover-border-color: var(--igx-button-hover-border-color, var(--ig-secondary-500));--focus-border-color: var(--igx-button-focus-border-color, var(--ig-secondary-500));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, var(--ig-secondary-500));--active-border-color: var(--igx-button-active-border-color, var(--ig-secondary-500));--disabled-border-color: var(--igx-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, hsl(from var(--ig-success-500) h s l/.8));--focus-foreground: var(--igx-button-focus-foreground, var(--ig-gray-900-contrast));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, var(--ig-gray-900-contrast));--icon-color: var(--igx-button-icon-color, var(--ig-gray-900-contrast));--icon-color-hover: var(--igx-button-icon-color-hover, var(--ig-gray-900-contrast));--hover-background: var(--igx-button-hover-background, var(--ig-success-500));--hover-foreground: var(--igx-button-hover-foreground, var(--ig-gray-900-contrast));--focus-background: var(--igx-button-focus-background, var(--ig-success-500));--focus-visible-background: var(--igx-button-focus-visible-background, var(--ig-success-500));--focus-hover-background: var(--igx-button-focus-hover-background, hsl(from var(--ig-secondary-500) h s l/.24));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, var(--ig-secondary-500));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, var(--ig-gray-900-contrast));--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-500));--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));--ig-theme: material}:host ::ng-deep .analytics-button,:host ::ng-deep .analytics-button [igxButton=contained],:host ::ng-deep .analytics-button .igx-button--contained,:host ::ng-deep .analytics-button igx-button,:host ::ng-deep .analytics-button igx-button [igxButton=contained],:host ::ng-deep .analytics-button igx-button .igx-button--contained{--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, var(--ig-gray-100));--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, hsl(from var(--ig-success-500) h s l/.8));--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, var(--ig-gray-900-contrast));--icon-color: var(--igx-button-icon-color, var(--ig-gray-900-contrast));--icon-color-hover: var(--igx-button-icon-color-hover, var(--ig-gray-900-contrast));--hover-background: var(--igx-button-hover-background, var(--ig-success-500));--hover-foreground: var(--igx-button-hover-foreground, var(--ig-gray-900-contrast));--focus-background: var(--igx-button-focus-background, var(--ig-success-500));--focus-foreground: var(--igx-button-focus-foreground, var(--ig-gray-900-contrast));--focus-hover-background: var(--igx-button-focus-hover-background, var(--ig-secondary-400));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, var(--ig-secondary-400-contrast));--focus-visible-background: var(--igx-button-focus-visible-background, var(--ig-success-500));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, var(--ig-gray-900-contrast));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--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));--ig-theme: material}:host ::ng-deep .analytics-button,:host ::ng-deep .analytics-button [igxButton=fab],:host ::ng-deep .analytics-button .igx-button--fab,:host ::ng-deep .analytics-button igx-button,:host ::ng-deep .analytics-button igx-button [igxButton=fab],:host ::ng-deep .analytics-button igx-button .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, var(--ig-gray-100));--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--igx-button-default-size, 3);--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, hsl(from var(--ig-success-500) h s l/.8));--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, var(--ig-gray-900-contrast));--icon-color: var(--igx-button-icon-color, var(--ig-gray-900-contrast));--icon-color-hover: var(--igx-button-icon-color-hover, var(--ig-gray-900-contrast));--hover-background: var(--igx-button-hover-background, var(--ig-success-500));--hover-foreground: var(--igx-button-hover-foreground, var(--ig-gray-900-contrast));--focus-background: var(--igx-button-focus-background, var(--ig-success-500));--focus-foreground: var(--igx-button-focus-foreground, var(--ig-gray-900-contrast));--focus-hover-background: var(--igx-button-focus-hover-background, var(--ig-secondary-400));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, var(--ig-secondary-400-contrast));--focus-visible-background: var(--igx-button-focus-visible-background, var(--ig-success-500));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, var(--ig-gray-900-contrast));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--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));--ig-theme: material}.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,::ng-deep .toggle-content .ig-scrollbar{--sb-size: var(--ig-scrollbar-sb-size, 1rem);--sb-thumb-min-height: var(--ig-scrollbar-sb-thumb-min-height, 2rem);--sb-thumb-bg-color: var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400));--sb-thumb-bg-color-hover: var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400));--sb-thumb-border-color: var(--ig-scrollbar-sb-thumb-border-color, transparent);--sb-thumb-border-size: var(--ig-scrollbar-sb-thumb-border-size, 0);--sb-thumb-border-radius: var(--ig-scrollbar-sb-thumb-border-radius, 0);--sb-track-bg-color: var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100));--sb-track-bg-color-hover: var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100));--sb-track-border-color: var(--ig-scrollbar-sb-track-border-color, transparent);--sb-track-border-size: var(--ig-scrollbar-sb-track-border-size, 0);--sb-corner-bg: var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100));--sb-corner-border-color: var(--ig-scrollbar-sb-corner-border-color, transparent);--sb-corner-border-size: var(--ig-scrollbar-sb-corner-border-size, 0);--ig-theme: material}@-moz-document url-prefix(){}::ng-deep .toggle-content{width:354px;max-width:358px;height:148px;background-color:#fff}::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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: SvgPipe, name: "svg" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxTabsComponent, selector: "igx-tabs", inputs: ["tabAlignment", "activation"] }, { kind: "component", type: IgxTabItemComponent, selector: "igx-tab-item" }, { kind: "component", type: IgxTabHeaderComponent, selector: "igx-tab-header" }, { kind: "component", type: IgxTabContentComponent, selector: "igx-tab-content" }, { kind: "directive", type: IgxTabHeaderLabelDirective, selector: "igx-tab-header-label,[igxTabHeaderLabel]" }, { kind: "ngmodule", type: IgxBarSeriesModule }, { kind: "ngmodule", type: IgxCategoryChartModule }, { kind: "ngmodule", type: IgxCategoryXAxisModule }, { kind: "ngmodule", type: IgxDataChartCategoryModule }, { kind: "ngmodule", type: IgxDataChartCoreModule }, { kind: "ngmodule", type: IgxDataChartInteractivityModule }, { kind: "ngmodule", type: IgxDataChartScatterModule }, { kind: "ngmodule", type: IgxDataChartStackedModule }, { kind: "ngmodule", type: IgxItemLegendModule }, { kind: "ngmodule", type: IgxLegendModule }, { kind: "ngmodule", type: IgxNumericXAxisModule }, { kind: "ngmodule", type: IgxNumericYAxisModule }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IgxContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-context-menu', imports: [
                         CommonModule,
                         NgFor,
+                        NgIf,
                         SvgPipe,
                         IgxToggleDirective,
                         IgxIconComponent,
@@ -1517,7 +1592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         IgxNumericXAxisModule,
                         IgxNumericYAxisModule,
                         IgxIconButtonDirective,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<span #analyticsBtn class=\"analytics-btn\">\r\n    <button #btn igxIconButton=\"flat\" (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    <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\" igxIconButton=\"flat\" [style.--background]=\"'#EBEBEB'\"\r\n                            [style.--foreground]=\"'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, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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);--focus-foreground: var(--igx-button-focus-foreground, white);--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, hsl(from var(--ig-secondary-500) h s l/1));--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));--ig-theme: material}.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, hsl(from var(--ig-secondary-500) h s l/1));--hover-border-color: var(--igx-button-hover-border-color, hsl(from var(--ig-secondary-500) h s l/1));--focus-border-color: var(--igx-button-focus-border-color, hsl(from var(--ig-secondary-500) h s l/1));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsl(from var(--ig-secondary-500) h s l/1));--active-border-color: var(--igx-button-active-border-color, hsl(from var(--ig-secondary-500) h s l/1));--disabled-border-color: var(--igx-button-disabled-border-color, hsl(from var(--ig-gray-300) h s l/1));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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);--focus-foreground: var(--igx-button-focus-foreground, white);--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, hsl(from var(--ig-secondary-500) h s l/1));--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));--ig-theme: material}.analytics-btn,.analytics-btn [igxButton=contained],.analytics-btn .igx-button--contained{--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, hsl(from var(--ig-gray-100) h s l/1));--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-300) h s l/1));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-foreground: var(--igx-button-focus-foreground, white);--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-foreground: var(--igx-button-active-foreground, color-mix(in oklch, var(--ig-secondary-300-contrast) 100%, transparent));--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));--ig-theme: material}.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, hsl(from var(--ig-gray-100) h s l/1));--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--igx-button-default-size, 3);--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);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-300) h s l/1));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-foreground: var(--igx-button-focus-foreground, white);--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-foreground: var(--igx-button-active-foreground, color-mix(in oklch, var(--ig-secondary-300-contrast) 100%, transparent));--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));--ig-theme: material}.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,::ng-deep .toggle-content .ig-scrollbar{--sb-size: var(--ig-scrollbar-sb-size, 1rem);--sb-thumb-min-height: var(--ig-scrollbar-sb-thumb-min-height, 2rem);--sb-thumb-bg-color: var(--ig-scrollbar-sb-thumb-bg-color, hsl(from var(--ig-gray-400) h s l/1));--sb-thumb-bg-color-hover: var(--ig-scrollbar-sb-thumb-bg-color-hover, hsl(from var(--ig-gray-400) h s l/1));--sb-thumb-border-color: var(--ig-scrollbar-sb-thumb-border-color, transparent);--sb-thumb-border-size: var(--ig-scrollbar-sb-thumb-border-size, 0);--sb-thumb-border-radius: var(--ig-scrollbar-sb-thumb-border-radius, 0);--sb-track-bg-color: var(--ig-scrollbar-sb-track-bg-color, hsl(from var(--ig-gray-100) h s l/1));--sb-track-bg-color-hover: var(--ig-scrollbar-sb-track-bg-color-hover, hsl(from var(--ig-gray-100) h s l/1));--sb-track-border-color: var(--ig-scrollbar-sb-track-border-color, transparent);--sb-track-border-size: var(--ig-scrollbar-sb-track-border-size, 0);--sb-corner-bg: var(--ig-scrollbar-sb-corner-bg, hsl(from var(--ig-gray-100) h s l/1));--sb-corner-border-color: var(--ig-scrollbar-sb-corner-border-color, transparent);--sb-corner-border-size: var(--ig-scrollbar-sb-corner-border-size, 0);--ig-theme: material}@-moz-document url-prefix(){}::ng-deep .toggle-content{width:354px;max-width:358px;height:148px;background-color:#fff}::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"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<span #analyticsBtn class=\"analytics-btn\">\r\n    <button #btn class=\"analytics-button\" igxIconButton=\"flat\" (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    <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 *ngIf=\"displayCreationTab\" [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\" igxIconButton=\"flat\" [style.--background]=\"'#EBEBEB'\"\r\n                            [style.--foreground]=\"'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: [":host ::ng-deep .analytics-button{--ig-size: var(--ig-size-small)}:host ::ng-deep .analytics-button,:host ::ng-deep .analytics-button [igxButton=flat],:host ::ng-deep .analytics-button .igx-button--flat,:host ::ng-deep .analytics-button igx-button,:host ::ng-deep .analytics-button igx-button [igxButton=flat],:host ::ng-deep .analytics-button igx-button .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, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, hsl(from var(--ig-success-500) h s l/.8));--focus-foreground: var(--igx-button-focus-foreground, var(--ig-gray-900-contrast));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, var(--ig-gray-900-contrast));--icon-color: var(--igx-button-icon-color, var(--ig-gray-900-contrast));--icon-color-hover: var(--igx-button-icon-color-hover, var(--ig-gray-900-contrast));--hover-background: var(--igx-button-hover-background, var(--ig-success-500));--hover-foreground: var(--igx-button-hover-foreground, var(--ig-gray-900-contrast));--focus-background: var(--igx-button-focus-background, var(--ig-success-500));--focus-visible-background: var(--igx-button-focus-visible-background, var(--ig-success-500));--focus-hover-background: var(--igx-button-focus-hover-background, hsl(from var(--ig-secondary-500) h s l/.24));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, var(--ig-secondary-500));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, var(--ig-gray-900-contrast));--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-500));--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));--ig-theme: material}:host ::ng-deep .analytics-button,:host ::ng-deep .analytics-button [igxButton=outlined],:host ::ng-deep .analytics-button .igx-button--outlined,:host ::ng-deep .analytics-button igx-button,:host ::ng-deep .analytics-button igx-button [igxButton=outlined],:host ::ng-deep .analytics-button igx-button .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, var(--ig-secondary-500));--hover-border-color: var(--igx-button-hover-border-color, var(--ig-secondary-500));--focus-border-color: var(--igx-button-focus-border-color, var(--ig-secondary-500));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, var(--ig-secondary-500));--active-border-color: var(--igx-button-active-border-color, var(--ig-secondary-500));--disabled-border-color: var(--igx-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, hsl(from var(--ig-success-500) h s l/.8));--focus-foreground: var(--igx-button-focus-foreground, var(--ig-gray-900-contrast));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, var(--ig-gray-900-contrast));--icon-color: var(--igx-button-icon-color, var(--ig-gray-900-contrast));--icon-color-hover: var(--igx-button-icon-color-hover, var(--ig-gray-900-contrast));--hover-background: var(--igx-button-hover-background, var(--ig-success-500));--hover-foreground: var(--igx-button-hover-foreground, var(--ig-gray-900-contrast));--focus-background: var(--igx-button-focus-background, var(--ig-success-500));--focus-visible-background: var(--igx-button-focus-visible-background, var(--ig-success-500));--focus-hover-background: var(--igx-button-focus-hover-background, hsl(from var(--ig-secondary-500) h s l/.24));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, var(--ig-secondary-500));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, var(--ig-gray-900-contrast));--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-500));--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));--ig-theme: material}:host ::ng-deep .analytics-button,:host ::ng-deep .analytics-button [igxButton=contained],:host ::ng-deep .analytics-button .igx-button--contained,:host ::ng-deep .analytics-button igx-button,:host ::ng-deep .analytics-button igx-button [igxButton=contained],:host ::ng-deep .analytics-button igx-button .igx-button--contained{--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, var(--ig-gray-100));--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, hsl(from var(--ig-success-500) h s l/.8));--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, var(--ig-gray-900-contrast));--icon-color: var(--igx-button-icon-color, var(--ig-gray-900-contrast));--icon-color-hover: var(--igx-button-icon-color-hover, var(--ig-gray-900-contrast));--hover-background: var(--igx-button-hover-background, var(--ig-success-500));--hover-foreground: var(--igx-button-hover-foreground, var(--ig-gray-900-contrast));--focus-background: var(--igx-button-focus-background, var(--ig-success-500));--focus-foreground: var(--igx-button-focus-foreground, var(--ig-gray-900-contrast));--focus-hover-background: var(--igx-button-focus-hover-background, var(--ig-secondary-400));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, var(--ig-secondary-400-contrast));--focus-visible-background: var(--igx-button-focus-visible-background, var(--ig-success-500));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, var(--ig-gray-900-contrast));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--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));--ig-theme: material}:host ::ng-deep .analytics-button,:host ::ng-deep .analytics-button [igxButton=fab],:host ::ng-deep .analytics-button .igx-button--fab,:host ::ng-deep .analytics-button igx-button,:host ::ng-deep .analytics-button igx-button [igxButton=fab],:host ::ng-deep .analytics-button igx-button .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, var(--ig-gray-100));--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--igx-button-default-size, 3);--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, hsl(from var(--ig-success-500) h s l/.8));--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, var(--ig-gray-900-contrast));--icon-color: var(--igx-button-icon-color, var(--ig-gray-900-contrast));--icon-color-hover: var(--igx-button-icon-color-hover, var(--ig-gray-900-contrast));--hover-background: var(--igx-button-hover-background, var(--ig-success-500));--hover-foreground: var(--igx-button-hover-foreground, var(--ig-gray-900-contrast));--focus-background: var(--igx-button-focus-background, var(--ig-success-500));--focus-foreground: var(--igx-button-focus-foreground, var(--ig-gray-900-contrast));--focus-hover-background: var(--igx-button-focus-hover-background, var(--ig-secondary-400));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, var(--ig-secondary-400-contrast));--focus-visible-background: var(--igx-button-focus-visible-background, var(--ig-success-500));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, var(--ig-gray-900-contrast));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--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));--ig-theme: material}.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,::ng-deep .toggle-content .ig-scrollbar{--sb-size: var(--ig-scrollbar-sb-size, 1rem);--sb-thumb-min-height: var(--ig-scrollbar-sb-thumb-min-height, 2rem);--sb-thumb-bg-color: var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400));--sb-thumb-bg-color-hover: var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400));--sb-thumb-border-color: var(--ig-scrollbar-sb-thumb-border-color, transparent);--sb-thumb-border-size: var(--ig-scrollbar-sb-thumb-border-size, 0);--sb-thumb-border-radius: var(--ig-scrollbar-sb-thumb-border-radius, 0);--sb-track-bg-color: var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100));--sb-track-bg-color-hover: var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100));--sb-track-border-color: var(--ig-scrollbar-sb-track-border-color, transparent);--sb-track-border-size: var(--ig-scrollbar-sb-track-border-size, 0);--sb-corner-bg: var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100));--sb-corner-border-color: var(--ig-scrollbar-sb-corner-border-color, transparent);--sb-corner-border-size: var(--ig-scrollbar-sb-corner-border-size, 0);--ig-theme: material}@-moz-document url-prefix(){}::ng-deep .toggle-content{width:354px;max-width:358px;height:148px;background-color:#fff}::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: () => [{ type: i1.IgxOverlayService }], propDecorators: { button: [{
                 type: ViewChild,
                 args: ['analyticsBtn']
@@ -1541,6 +1616,7 @@ class IgxContextMenuDirective {
         this.textFormatter = textFormatter;
         this.chartsDirective = chartsDirective;
         this.overlayService = overlayService;
+        this.displayCreationTab = true;
         this.onButtonClose = new EventEmitter();
         this.formatters = [];
         this.charts = [];
@@ -1588,6 +1664,18 @@ class IgxContextMenuDirective {
     setUpGridListeners() {
         this.contentObserver = new ResizeObserver(() => this.gridResizeNotify.next());
         this.contentObserver.observe(this.grid.nativeElement);
+        this.grid.columnSelectionChanging.pipe(debounceTime(100))
+            .subscribe((args) => {
+            if (args.newSelection && args.oldSelection && !this._collapsed) {
+                this.close();
+            }
+            this.grid.clearCellSelection();
+            this.chartsDirective.chartData = this.grid.getSelectedColumnsData();
+            if (!this._collapsed) {
+                this.onButtonClose.emit();
+            }
+            this.renderHeaderButton();
+        });
         this.grid.rangeSelected.pipe(takeUntil(this.destroy$))
             .subscribe((args) => {
             this._range = args;
@@ -1647,6 +1735,43 @@ class IgxContextMenuDirective {
         }
         this._collapsed ? this.show() : this.overlayService.reposition(this._id);
     }
+    renderHeaderButton() {
+        const selectedColumns = this.grid.selectedColumns();
+        if (selectedColumns.length === 0) {
+            return;
+        }
+        this._analyticsBtnSettings.positionStrategy = new AutoPositionStrategy({
+            horizontalDirection: HorizontalAlignment.Right,
+            horizontalStartPoint: HorizontalAlignment.Right,
+            verticalStartPoint: VerticalAlignment.Bottom,
+            verticalDirection: VerticalAlignment.Bottom, closeAnimation: null
+        });
+        const selectedColumnsIndexes = selectedColumns.map(c => c.visibleIndex).sort((a, b) => a - b);
+        let colIndex = selectedColumnsIndexes[selectedColumnsIndexes.length - 1];
+        let rowIndex = undefined;
+        while (selectedColumnsIndexes.length) {
+            if (this.grid.navigation.isColumnFullyVisible(colIndex)) {
+                break;
+            }
+            selectedColumnsIndexes.pop();
+            colIndex = selectedColumnsIndexes[selectedColumnsIndexes.length - 1];
+        }
+        if (!selectedColumnsIndexes.length) {
+            return;
+        }
+        const col = selectedColumns.find(c => c.visibleIndex === colIndex);
+        if (!col) {
+            return;
+        }
+        const headerCell = col.headerCell.nativeElement;
+        this._analyticsBtnSettings.target = headerCell;
+        this._analyticsBtnSettings.scrollStrategy = new AbsoluteScrollStrategy();
+        const info = this.overlayService.getOverlayById(this._id);
+        if (info) {
+            info.settings.positionStrategy = this._analyticsBtnSettings.positionStrategy;
+        }
+        this._collapsed ? this.show() : this.overlayService.reposition(this._id);
+    }
     show() {
         if (!this._collapsed) {
             return;
@@ -1669,10 +1794,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: "19.1.7", ngImport: i0, type: IgxContextMenuDirective, deps: [{ token: i1.IgxGridComponent }, { token: IgxConditionalFormattingDirective, optional: true }, { token: IgxChartIntegrationDirective, optional: true }, { token: i1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: IgxContextMenuDirective, isStandalone: true, selector: "[igxContextMenu]", outputs: { onButtonClose: "onButtonClose" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxContextMenuDirective, deps: [{ token: i1.IgxGridComponent }, { token: IgxConditionalFormattingDirective, optional: true }, { token: IgxChartIntegrationDirective, optional: true }, { token: i1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: IgxContextMenuDirective, isStandalone: true, selector: "[igxContextMenu]", inputs: { displayCreationTab: "displayCreationTab" }, outputs: { onButtonClose: "onButtonClose" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IgxContextMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxContextMenu]',
@@ -1681,17 +1806,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                     type: Optional
                 }] }, { type: IgxChartIntegrationDirective, decorators: [{
                     type: Optional
-                }] }, { type: i1.IgxOverlayService }], propDecorators: { onButtonClose: [{
+                }] }, { type: i1.IgxOverlayService }], propDecorators: { displayCreationTab: [{
+                type: Input
+            }], onButtonClose: [{
                 type: Output
             }] } });
 
 class PageHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: PageHeaderComponent, isStandalone: true, selector: "app-page-header", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"sample-header\">\r\n    <h1 class=\"title ig-typography__h3\">\r\n        <button igxIconButton=\"flat\"\r\n            igxRipple\r\n            igxRippleCentered=\"true\"\r\n            igxToggleAction=\"navdrawer\"\r\n            class=\"hamburger\">\r\n            <igx-icon family=\"material\">menu</igx-icon>\r\n        </button>\r\n        {{ title }}\r\n    </h1>\r\n    <p class=\"description\">\r\n        <ng-content></ng-content>\r\n    </p>\r\n</div>\r\n", styles: [":host ::ng-deep,:host ::ng-deep [igxButton=flat],:host ::ng-deep .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, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--focus-foreground: var(--igx-button-focus-foreground, black);--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, hsl(from var(--ig-secondary-500) h s l/1));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=outlined],:host ::ng-deep .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, hsl(from var(--ig-secondary-500) h s l/1));--hover-border-color: var(--igx-button-hover-border-color, hsl(from var(--ig-secondary-500) h s l/1));--focus-border-color: var(--igx-button-focus-border-color, hsl(from var(--ig-secondary-500) h s l/1));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsl(from var(--ig-secondary-500) h s l/1));--active-border-color: var(--igx-button-active-border-color, hsl(from var(--ig-secondary-500) h s l/1));--disabled-border-color: var(--igx-button-disabled-border-color, hsl(from var(--ig-gray-300) h s l/1));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--focus-foreground: var(--igx-button-focus-foreground, black);--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, hsl(from var(--ig-secondary-500) h s l/1));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=contained],:host ::ng-deep .igx-button--contained{--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, hsl(from var(--ig-gray-100) h s l/1));--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-300) h s l/1));--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-foreground: var(--igx-button-focus-foreground, black);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-foreground: var(--igx-button-active-foreground, color-mix(in oklch, var(--ig-secondary-300-contrast) 100%, transparent));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=fab],:host ::ng-deep .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, hsl(from var(--ig-gray-100) h s l/1));--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-300) h s l/1));--border-radius: var(--igx-button-border-radius, clamp(.75rem, calc(var(--ig-radius-factor, 1) * 1.75rem), 1.75rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-foreground: var(--igx-button-focus-foreground, black);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-foreground: var(--igx-button-active-foreground, color-mix(in oklch, var(--ig-secondary-300-contrast) 100%, transparent));--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));--ig-theme: material}:host ::ng-deep .hamburger{margin-right:32px}[dir=rtl] :host ::ng-deep .hamburger{margin-left:32px;margin-right:initial}.sample-header{padding:48px 24px;background:#111}.sample-header .title{display:flex;flex-flow:row nowrap;align-items:center;color:#fff;font-weight:400;margin:0}.sample-header .description{color:#fff;margin-top:48px;margin-bottom:0}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxToggleActionDirective, selector: "[igxToggleAction]", inputs: ["overlaySettings", "igxToggleOutlet", "igxToggleAction"], exportAs: ["toggle-action"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: PageHeaderComponent, isStandalone: true, selector: "app-page-header", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"sample-header\">\r\n    <h1 class=\"title ig-typography__h3\">\r\n        <button igxIconButton=\"flat\"\r\n            igxRipple\r\n            igxRippleCentered=\"true\"\r\n            igxToggleAction=\"navdrawer\"\r\n            class=\"hamburger\">\r\n            <igx-icon family=\"material\">menu</igx-icon>\r\n        </button>\r\n        {{ title }}\r\n    </h1>\r\n    <p class=\"description\">\r\n        <ng-content></ng-content>\r\n    </p>\r\n</div>\r\n", styles: [":host ::ng-deep,:host ::ng-deep [igxButton=flat],:host ::ng-deep .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, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--focus-foreground: var(--igx-button-focus-foreground, black);--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-500));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=outlined],:host ::ng-deep .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, var(--ig-secondary-500));--hover-border-color: var(--igx-button-hover-border-color, var(--ig-secondary-500));--focus-border-color: var(--igx-button-focus-border-color, var(--ig-secondary-500));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, var(--ig-secondary-500));--active-border-color: var(--igx-button-active-border-color, var(--ig-secondary-500));--disabled-border-color: var(--igx-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--focus-foreground: var(--igx-button-focus-foreground, black);--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-500));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=contained],:host ::ng-deep .igx-button--contained{--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, var(--ig-gray-100));--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-foreground: var(--igx-button-focus-foreground, black);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=fab],:host ::ng-deep .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, var(--ig-gray-100));--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, clamp(.75rem, calc(var(--ig-radius-factor, 1) * 1.75rem), 1.75rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-foreground: var(--igx-button-focus-foreground, black);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--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));--ig-theme: material}:host ::ng-deep .hamburger{margin-right:32px}[dir=rtl] :host ::ng-deep .hamburger{margin-left:32px;margin-right:initial}.sample-header{padding:48px 24px;background:#111}.sample-header .title{display:flex;flex-flow:row nowrap;align-items:center;color:#fff;font-weight:400;margin:0}.sample-header .description{color:#fff;margin-top:48px;margin-bottom:0}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxToggleActionDirective, selector: "[igxToggleAction]", inputs: ["overlaySettings", "igxToggleOutlet", "igxToggleAction"], exportAs: ["toggle-action"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-page-header', imports: [IgxIconComponent, IgxToggleActionDirective, IgxIconButtonDirective], template: "<div class=\"sample-header\">\r\n    <h1 class=\"title ig-typography__h3\">\r\n        <button igxIconButton=\"flat\"\r\n            igxRipple\r\n            igxRippleCentered=\"true\"\r\n            igxToggleAction=\"navdrawer\"\r\n            class=\"hamburger\">\r\n            <igx-icon family=\"material\">menu</igx-icon>\r\n        </button>\r\n        {{ title }}\r\n    </h1>\r\n    <p class=\"description\">\r\n        <ng-content></ng-content>\r\n    </p>\r\n</div>\r\n", styles: [":host ::ng-deep,:host ::ng-deep [igxButton=flat],:host ::ng-deep .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, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--focus-foreground: var(--igx-button-focus-foreground, black);--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, hsl(from var(--ig-secondary-500) h s l/1));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=outlined],:host ::ng-deep .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, hsl(from var(--ig-secondary-500) h s l/1));--hover-border-color: var(--igx-button-hover-border-color, hsl(from var(--ig-secondary-500) h s l/1));--focus-border-color: var(--igx-button-focus-border-color, hsl(from var(--ig-secondary-500) h s l/1));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, hsl(from var(--ig-secondary-500) h s l/1));--active-border-color: var(--igx-button-active-border-color, hsl(from var(--ig-secondary-500) h s l/1));--disabled-border-color: var(--igx-button-disabled-border-color, hsl(from var(--ig-gray-300) h s l/1));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--focus-foreground: var(--igx-button-focus-foreground, black);--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, hsl(from var(--ig-secondary-500) h s l/1));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=contained],:host ::ng-deep .igx-button--contained{--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, hsl(from var(--ig-gray-100) h s l/1));--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-300) h s l/1));--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-foreground: var(--igx-button-focus-foreground, black);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-foreground: var(--igx-button-active-foreground, color-mix(in oklch, var(--ig-secondary-300-contrast) 100%, transparent));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=fab],:host ::ng-deep .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, hsl(from var(--ig-gray-100) h s l/1));--disabled-foreground: var(--igx-button-disabled-foreground, hsl(from var(--ig-gray-500) h s l/1));--disabled-icon-color: var(--igx-button-disabled-icon-color, hsl(from var(--ig-gray-500) h s l/1));--size: var(--igx-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-300) h s l/1));--border-radius: var(--igx-button-border-radius, clamp(.75rem, calc(var(--ig-radius-factor, 1) * 1.75rem), 1.75rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-foreground: var(--igx-button-focus-foreground, black);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-foreground: var(--igx-button-active-foreground, color-mix(in oklch, var(--ig-secondary-300-contrast) 100%, transparent));--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));--ig-theme: material}:host ::ng-deep .hamburger{margin-right:32px}[dir=rtl] :host ::ng-deep .hamburger{margin-left:32px;margin-right:initial}.sample-header{padding:48px 24px;background:#111}.sample-header .title{display:flex;flex-flow:row nowrap;align-items:center;color:#fff;font-weight:400;margin:0}.sample-header .description{color:#fff;margin-top:48px;margin-bottom:0}\n"] }]
+            args: [{ selector: 'app-page-header', imports: [IgxIconComponent, IgxToggleActionDirective, IgxIconButtonDirective], template: "<div class=\"sample-header\">\r\n    <h1 class=\"title ig-typography__h3\">\r\n        <button igxIconButton=\"flat\"\r\n            igxRipple\r\n            igxRippleCentered=\"true\"\r\n            igxToggleAction=\"navdrawer\"\r\n            class=\"hamburger\">\r\n            <igx-icon family=\"material\">menu</igx-icon>\r\n        </button>\r\n        {{ title }}\r\n    </h1>\r\n    <p class=\"description\">\r\n        <ng-content></ng-content>\r\n    </p>\r\n</div>\r\n", styles: [":host ::ng-deep,:host ::ng-deep [igxButton=flat],:host ::ng-deep .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, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--focus-foreground: var(--igx-button-focus-foreground, black);--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-500));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=outlined],:host ::ng-deep .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, var(--ig-secondary-500));--hover-border-color: var(--igx-button-hover-border-color, var(--ig-secondary-500));--focus-border-color: var(--igx-button-focus-border-color, var(--ig-secondary-500));--focus-visible-border-color: var(--igx-button-focus-visible-border-color, var(--ig-secondary-500));--active-border-color: var(--igx-button-active-border-color, var(--ig-secondary-500));--disabled-border-color: var(--igx-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--focus-foreground: var(--igx-button-focus-foreground, black);--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-500));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=contained],:host ::ng-deep .igx-button--contained{--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, var(--ig-gray-100));--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, .2) * 1.25rem), 1.25rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-foreground: var(--igx-button-focus-foreground, black);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--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));--ig-theme: material}:host ::ng-deep,:host ::ng-deep [igxButton=fab],:host ::ng-deep .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, var(--ig-gray-100));--disabled-foreground: var(--igx-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--igx-button-disabled-icon-color, var(--ig-gray-500));--size: var(--igx-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--igx-button-default-size, 3);--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, white);--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, clamp(.75rem, calc(var(--ig-radius-factor, 1) * 1.75rem), 1.75rem));--foreground: var(--igx-button-foreground, black);--icon-color: var(--igx-button-icon-color, black);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, white);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, white);--focus-foreground: var(--igx-button-focus-foreground, black);--focus-hover-background: var(--igx-button-focus-hover-background, white);--focus-hover-foreground: var(--igx-button-focus-hover-foreground, black);--focus-visible-background: var(--igx-button-focus-visible-background, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, black);--active-foreground: var(--igx-button-active-foreground, var(--ig-secondary-300-contrast));--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));--ig-theme: material}:host ::ng-deep .hamburger{margin-right:32px}[dir=rtl] :host ::ng-deep .hamburger{margin-left:32px;margin-right:initial}.sample-header{padding:48px 24px;background:#111}.sample-header .title{display:flex;flex-flow:row nowrap;align-items:center;color:#fff;font-weight:400;margin:0}.sample-header .description{color:#fff;margin-top:48px;margin-bottom:0}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }] } });