igniteui-angular-extras 19.1.1 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/fesm2022/igniteui-angular-extras.mjs +46 -26
  2. package/fesm2022/igniteui-angular-extras.mjs.map +1 -1
  3. package/index.d.ts +322 -5
  4. package/package.json +4 -4
  5. package/images/charts.d.ts +0 -16
  6. package/images/conditions.d.ts +0 -10
  7. package/lib/context-menu/chart-dialog/chart-dialog.component.d.ts +0 -31
  8. package/lib/context-menu/context-menu.component.d.ts +0 -38
  9. package/lib/context-menu/igx-context-menu.directive.d.ts +0 -35
  10. package/lib/directives/chart-integration/chart-integration.directive.d.ts +0 -53
  11. package/lib/directives/chart-integration/chart-types.d.ts +0 -25
  12. package/lib/directives/chart-integration/initializers.d.ts +0 -39
  13. package/lib/directives/conditional-formatting/conditional-formatting.directive.d.ts +0 -95
  14. package/lib/page-header/page-header.component.d.ts +0 -6
  15. package/lib/pipes/svg.pipe.d.ts +0 -10
  16. package/public-api.d.ts +0 -21
package/fesm2022/igniteui-angular-extras.mjs CHANGED
@@ -418,6 +418,14 @@ class IgxChartIntegrationDirective {
418
418
  };
419
419
  seriesOptions.push({ ...dataOptions, ...model });
420
420
  });
421
+ chartComponentOptions.xAxisOptions = Object.assign({
422
+ labelExtent: NaN,
423
+ labelTextColor: null,
424
+ });
425
+ chartComponentOptions.yAxisOptions = Object.assign({
426
+ labelTextColor: null,
427
+ labelExtent: NaN,
428
+ });
421
429
  chartComponentOptions.seriesOptions = seriesOptions;
422
430
  }
423
431
  addIndexMemberPath(dataRecord, index) {
@@ -427,13 +435,25 @@ class IgxChartIntegrationDirective {
427
435
  setAxisLabelOption(type, options) {
428
436
  if (type.indexOf('Bar') !== -1) {
429
437
  options.yAxisOptions = Object.assign({
430
- label: this._labelMemberPath
438
+ label: this._labelMemberPath,
439
+ labelTextColor: null,
440
+ labelExtent: NaN,
431
441
  }, this.customChartComponentOptions.get(type).yAxisOptions);
442
+ options.xAxisOptions = Object.assign({
443
+ labelTextColor: null,
444
+ labelExtent: NaN,
445
+ });
432
446
  }
433
447
  else {
434
448
  options.xAxisOptions = Object.assign({
435
- label: this._labelMemberPath
449
+ label: this._labelMemberPath,
450
+ labelTextColor: null,
451
+ labelExtent: NaN,
436
452
  }, this.customChartComponentOptions.get(type).xAxisOptions);
453
+ options.yAxisOptions = Object.assign({
454
+ labelTextColor: null,
455
+ labelExtent: NaN,
456
+ });
437
457
  }
438
458
  }
439
459
  setChartComponentOptions(chart, optionsType, options) {
@@ -444,10 +464,10 @@ class IgxChartIntegrationDirective {
444
464
  this.customChartComponentOptions.get(chart)[optionsType][property] = options[property];
445
465
  });
446
466
  }
447
- 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 }); }
448
- 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 }); }
467
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxChartIntegrationDirective, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
468
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: IgxChartIntegrationDirective, isStandalone: true, selector: "[igxChartIntegration]", inputs: { chartData: "chartData", useLegend: "useLegend", defaultLabelMemberPath: "defaultLabelMemberPath", scatterChartYAxisValueMemberPath: "scatterChartYAxisValueMemberPath", bubbleChartRadiusMemberPath: "bubbleChartRadiusMemberPath" }, outputs: { onChartTypesDetermined: "onChartTypesDetermined", onChartCreationDone: "onChartCreationDone" }, ngImport: i0 }); }
449
469
  }
450
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxChartIntegrationDirective, decorators: [{
470
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxChartIntegrationDirective, decorators: [{
451
471
  type: Directive,
452
472
  args: [{
453
473
  selector: '[igxChartIntegration]',
@@ -787,10 +807,10 @@ class IgxConditionalFormattingDirective {
787
807
  data.forEach(rec => result = result.concat(Object.values(rec)));
788
808
  return result;
789
809
  }
790
- 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 }); }
791
- 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 }); }
810
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxConditionalFormattingDirective, deps: [{ token: i1.IgxGridComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
811
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: IgxConditionalFormattingDirective, isStandalone: true, selector: "[igxConditionalFormatting]", inputs: { formatter: "formatter", formatColors: "formatColors" }, outputs: { onFormattersReady: "onFormattersReady" }, ngImport: i0 }); }
792
812
  }
793
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxConditionalFormattingDirective, decorators: [{
813
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxConditionalFormattingDirective, decorators: [{
794
814
  type: Directive,
795
815
  args: [{
796
816
  selector: '[igxConditionalFormatting]',
@@ -1238,10 +1258,10 @@ class SvgPipe {
1238
1258
  transform(markup) {
1239
1259
  return this.sanitizer.bypassSecurityTrustHtml(markup);
1240
1260
  }
1241
- 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 }); }
1242
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: SvgPipe, isStandalone: true, name: "svg" }); }
1261
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SvgPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
1262
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.1", ngImport: i0, type: SvgPipe, isStandalone: true, name: "svg" }); }
1243
1263
  }
1244
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SvgPipe, decorators: [{
1264
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SvgPipe, decorators: [{
1245
1265
  type: Pipe,
1246
1266
  args: [{
1247
1267
  name: 'svg',
@@ -1291,10 +1311,10 @@ class IgxChartMenuComponent {
1291
1311
  catch (e) { }
1292
1312
  this.chartDirective.chartFactory(chartType, this.chartArea);
1293
1313
  }
1294
- 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 }); }
1295
- 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 }); }
1314
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxChartMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
1315
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", 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 }); }
1296
1316
  }
1297
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
1317
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
1298
1318
  type: Component,
1299
1319
  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"] }]
1300
1320
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { chartArea: [{
@@ -1562,10 +1582,10 @@ class IgxContextMenuComponent {
1562
1582
  this._dialogId = undefined;
1563
1583
  }
1564
1584
  }
1565
- 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 }); }
1566
- 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"] }] }); }
1585
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxContextMenuComponent, deps: [{ token: i1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
1586
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", 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,: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}:host ::ng-deep .analytics-button{--ig-size: var(--ig-size-small)}.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"] }] }); }
1567
1587
  }
1568
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxContextMenuComponent, decorators: [{
1588
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxContextMenuComponent, decorators: [{
1569
1589
  type: Component,
1570
1590
  args: [{ selector: 'igx-context-menu', imports: [
1571
1591
  CommonModule,
@@ -1592,7 +1612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
1592
1612
  IgxNumericXAxisModule,
1593
1613
  IgxNumericYAxisModule,
1594
1614
  IgxIconButtonDirective,
1595
- ], 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"] }]
1615
+ ], 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,: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}:host ::ng-deep .analytics-button{--ig-size: var(--ig-size-small)}.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"] }]
1596
1616
  }], ctorParameters: () => [{ type: i1.IgxOverlayService }], propDecorators: { button: [{
1597
1617
  type: ViewChild,
1598
1618
  args: ['analyticsBtn']
@@ -1676,7 +1696,7 @@ class IgxContextMenuDirective {
1676
1696
  }
1677
1697
  this.renderHeaderButton();
1678
1698
  });
1679
- this.grid.rangeSelected.pipe(takeUntil(this.destroy$))
1699
+ this.grid.rangeSelected.pipe(takeUntil(this.destroy$), debounceTime(200))
1680
1700
  .subscribe((args) => {
1681
1701
  this._range = args;
1682
1702
  if (this.chartsDirective) {
@@ -1692,7 +1712,7 @@ class IgxContextMenuDirective {
1692
1712
  }
1693
1713
  this.renderButton();
1694
1714
  });
1695
- this.grid.verticalScrollContainer.chunkLoad.pipe(merge(this.grid.parentVirtDir.chunkLoad, this.grid.filteringDone, this.grid.columnResized, this.grid.columnVisibilityChanged.pipe(debounceTime(30))), filter(() => this._range), takeUntil(this.destroy$)).subscribe(() => {
1715
+ this.grid.verticalScrollContainer.chunkLoad.pipe(merge(this.grid.parentVirtDir.chunkLoad, this.grid.filteringDone, this.grid.columnResized, this.grid.columnVisibilityChanged.pipe(debounceTime(200))), filter(() => this._range), takeUntil(this.destroy$)).subscribe(() => {
1696
1716
  this.onButtonClose.emit();
1697
1717
  this.renderButton();
1698
1718
  });
@@ -1794,10 +1814,10 @@ class IgxContextMenuDirective {
1794
1814
  return rInex >= this._range.rowStart && rInex <= this._range.rowEnd
1795
1815
  && cIndex >= this._range.columnStart && cIndex <= this._range.columnEnd;
1796
1816
  }
1797
- 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 }); }
1798
- 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 }); }
1817
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxContextMenuDirective, deps: [{ token: i1.IgxGridComponent }, { token: IgxConditionalFormattingDirective, optional: true }, { token: IgxChartIntegrationDirective, optional: true }, { token: i1.IgxOverlayService }], target: i0.ɵɵFactoryTarget.Directive }); }
1818
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: IgxContextMenuDirective, isStandalone: true, selector: "[igxContextMenu]", inputs: { displayCreationTab: "displayCreationTab" }, outputs: { onButtonClose: "onButtonClose" }, ngImport: i0 }); }
1799
1819
  }
1800
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxContextMenuDirective, decorators: [{
1820
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: IgxContextMenuDirective, decorators: [{
1801
1821
  type: Directive,
1802
1822
  args: [{
1803
1823
  selector: '[igxContextMenu]',
@@ -1813,10 +1833,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
1813
1833
  }] } });
1814
1834
 
1815
1835
  class PageHeaderComponent {
1816
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1817
- 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"] }] }); }
1836
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1837
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", 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"] }] }); }
1818
1838
  }
1819
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PageHeaderComponent, decorators: [{
1839
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: PageHeaderComponent, decorators: [{
1820
1840
  type: Component,
1821
1841
  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"] }]
1822
1842
  }], propDecorators: { title: [{