igniteui-angular-extras 19.1.0 → 19.1.2
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.
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Input, Output, Directive, Pipe, ViewContainerRef, HostBinding, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, Component, Optional } from '@angular/core';
|
|
3
3
|
import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxScatterLineSeriesComponent, IgxNumericXAxisComponent, IgxBubbleSeriesComponent, IgxScatterSeriesComponent, IgxBarSeriesComponent, IgxCategoryYAxisComponent, IgxStackedBarSeriesComponent, IgxStacked100BarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxSizeScaleComponent, IgxColumnSeriesComponent, IgxAreaSeriesComponent, IgxLineSeriesComponent, IgxStackedColumnSeriesComponent, IgxStackedAreaSeriesComponent, IgxStackedLineSeriesComponent, IgxStacked100ColumnSeriesComponent, IgxStacked100AreaSeriesComponent, IgxStacked100LineSeriesComponent, IgxPieChartComponent, IgxDataChartComponent, IgxItemLegendComponent, IgxLegendComponent, IgxBarSeriesModule, IgxCategoryChartModule, IgxCategoryXAxisModule, IgxDataChartCategoryModule, IgxDataChartCoreModule, IgxDataChartInteractivityModule, IgxDataChartScatterModule, IgxDataChartStackedModule, IgxItemLegendModule, IgxLegendModule, IgxNumericXAxisModule, IgxNumericYAxisModule } from 'igniteui-angular-charts';
|
|
4
4
|
import { Subject } from 'rxjs';
|
|
5
|
-
import { takeUntil,
|
|
5
|
+
import { takeUntil, debounceTime, merge, filter } from 'rxjs/operators';
|
|
6
6
|
import * as i1 from 'igniteui-angular';
|
|
7
7
|
import { IgxIconComponent, IgxIconButtonDirective, AutoPositionStrategy, CloseScrollStrategy, VerticalAlignment, HorizontalAlignment, IgxToggleDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, AbsoluteScrollStrategy, IgxToggleActionDirective } from 'igniteui-angular';
|
|
8
8
|
import * as i1$2 from '@angular/common';
|
|
@@ -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) {
|
|
@@ -486,9 +506,8 @@ class IgxConditionalFormattingDirective {
|
|
|
486
506
|
return this._formatColors;
|
|
487
507
|
}
|
|
488
508
|
get selectedData() {
|
|
489
|
-
|
|
490
|
-
this.
|
|
491
|
-
}
|
|
509
|
+
this._selectedData = this.grid.getSelectedData().length ? this.toArray(this.grid.getSelectedData()) :
|
|
510
|
+
this.toArray(this.grid.getSelectedColumnsData());
|
|
492
511
|
return this._selectedData;
|
|
493
512
|
}
|
|
494
513
|
get textData() {
|
|
@@ -645,7 +664,10 @@ class IgxConditionalFormattingDirective {
|
|
|
645
664
|
}
|
|
646
665
|
ngAfterViewInit() {
|
|
647
666
|
this.grid.rangeSelected.pipe(takeUntil(this.destroy$)).subscribe(() => {
|
|
648
|
-
this.determineFormatters();
|
|
667
|
+
this.determineFormatters(false);
|
|
668
|
+
});
|
|
669
|
+
this.grid.columnSelectionChanging.pipe(takeUntil(this.destroy$), debounceTime(200)).subscribe(() => {
|
|
670
|
+
this.determineFormatters(true);
|
|
649
671
|
});
|
|
650
672
|
this.grid.cellEdit.pipe(takeUntil(this.destroy$)).subscribe((args) => {
|
|
651
673
|
if ((args.newValue === args.oldValue || !this.formatter)) {
|
|
@@ -653,8 +675,7 @@ class IgxConditionalFormattingDirective {
|
|
|
653
675
|
}
|
|
654
676
|
if (this.isWithInFormattedRange(args.cellID.rowIndex, args.cellID.columnID - 1)) {
|
|
655
677
|
const value = Number(args.newValue);
|
|
656
|
-
|
|
657
|
-
this.selectedData.splice(this.selectedData.indexOf(args.oldValue), 1, valueToBeAdded);
|
|
678
|
+
this.selectedData.push(!Number.isNaN(value) && Number.isFinite(value) ? value : args.newValue);
|
|
658
679
|
this.recalcCachedValues();
|
|
659
680
|
this.formatCells(this.formatter, undefined, false);
|
|
660
681
|
}
|
|
@@ -684,9 +705,10 @@ class IgxConditionalFormattingDirective {
|
|
|
684
705
|
this.grid.cdr.detectChanges();
|
|
685
706
|
});
|
|
686
707
|
}
|
|
687
|
-
determineFormatters() {
|
|
688
|
-
const
|
|
689
|
-
const
|
|
708
|
+
determineFormatters(fromColumn) {
|
|
709
|
+
const data = fromColumn ? this.grid.getSelectedColumnsData() : this.grid.getSelectedData();
|
|
710
|
+
const numericData = this.toArray(data).some(rec => typeof rec === 'number');
|
|
711
|
+
const textData = this.toArray(data).some(rec => typeof rec === 'string');
|
|
690
712
|
const formatters = Array.of(...this._commonFormattersName);
|
|
691
713
|
if (!(numericData) && textData) {
|
|
692
714
|
formatters.splice(0, 0, ...this._textFormatters);
|
|
@@ -701,13 +723,29 @@ class IgxConditionalFormattingDirective {
|
|
|
701
723
|
}
|
|
702
724
|
recalcCachedValues(clearAll = false) {
|
|
703
725
|
if (clearAll) {
|
|
704
|
-
|
|
705
|
-
|
|
726
|
+
if (this.grid.getSelectedRanges().length === 0) {
|
|
727
|
+
const selectedColumns = this.grid.selectedColumns();
|
|
728
|
+
if (selectedColumns.length === 1) {
|
|
729
|
+
this._startColumn = this._endColumn = selectedColumns[0].visibleIndex;
|
|
730
|
+
}
|
|
731
|
+
else if (selectedColumns.length > 1) {
|
|
732
|
+
this._startColumn = Math.min(...selectedColumns.map(c => c.visibleIndex));
|
|
733
|
+
this._endColumn = Math.max(...selectedColumns.map(c => c.visibleIndex));
|
|
734
|
+
}
|
|
735
|
+
else {
|
|
736
|
+
return;
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
else {
|
|
740
|
+
this._startColumn = Math.min(...this.grid.getSelectedRanges().map(r => Number(r.columnStart)));
|
|
741
|
+
this._endColumn = Math.max(...this.grid.getSelectedRanges().map(r => Number(r.columnEnd)));
|
|
742
|
+
}
|
|
706
743
|
this._selectedData = [];
|
|
707
744
|
}
|
|
708
745
|
this._valueForComparison = this.textData[0];
|
|
746
|
+
const hasNegativeValues = this.numericData.some(value => value < 0);
|
|
709
747
|
this._maxValue = Math.max(...this.numericData);
|
|
710
|
-
this._minValue = Math.min(...this.numericData.filter(value => value < 0))
|
|
748
|
+
this._minValue = hasNegativeValues ? Math.min(...this.numericData.filter(value => value < 0)) : 0;
|
|
711
749
|
}
|
|
712
750
|
isWithInFormattedRange(rowIndex, colID) {
|
|
713
751
|
const visibleIndex = typeof colID === 'string' ? this.grid.getColumnByName(colID).visibleIndex : colID;
|
|
@@ -726,16 +764,31 @@ class IgxConditionalFormattingDirective {
|
|
|
726
764
|
return Math.ceil(Math.abs(this._minValue) / (this._maxValue + Math.abs(this._minValue)) * 100);
|
|
727
765
|
}
|
|
728
766
|
getPositivePercentage(val) {
|
|
729
|
-
|
|
730
|
-
return Math.ceil(result);
|
|
767
|
+
return Math.ceil(Math.ceil(val) / (this._maxValue + Math.abs(this._minValue)) * 100);
|
|
731
768
|
}
|
|
732
769
|
getNegativePercentage(val) {
|
|
733
|
-
|
|
734
|
-
return Math.ceil(result);
|
|
770
|
+
return Math.ceil(Math.abs(val) / (this._maxValue + Math.abs(this._minValue)) * 100);
|
|
735
771
|
}
|
|
736
772
|
resetRange(formatRange) {
|
|
737
773
|
this.formatedRange.clear();
|
|
738
|
-
const
|
|
774
|
+
const selectedRanges = this.grid.getSelectedRanges();
|
|
775
|
+
let customRange;
|
|
776
|
+
// Column selection custom range
|
|
777
|
+
if (selectedRanges.length === 0) {
|
|
778
|
+
const selectedColumns = this.grid.selectedColumns();
|
|
779
|
+
customRange = [];
|
|
780
|
+
selectedColumns.forEach(c => {
|
|
781
|
+
customRange.push({
|
|
782
|
+
columnEnd: c.visibleIndex,
|
|
783
|
+
columnStart: c.visibleIndex,
|
|
784
|
+
rowEnd: this.grid.data.length - 1,
|
|
785
|
+
rowStart: 0
|
|
786
|
+
});
|
|
787
|
+
});
|
|
788
|
+
}
|
|
789
|
+
else {
|
|
790
|
+
customRange = formatRange ? formatRange : this.grid.getSelectedRanges();
|
|
791
|
+
}
|
|
739
792
|
customRange.forEach(range => {
|
|
740
793
|
for (let ri = range.rowStart; ri <= Number(range.rowEnd); ri++) {
|
|
741
794
|
for (let ci = Number(range.columnStart); ci <= Number(range.columnEnd); ci++) {
|
|
@@ -1530,7 +1583,7 @@ class IgxContextMenuComponent {
|
|
|
1530
1583
|
}
|
|
1531
1584
|
}
|
|
1532
1585
|
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 }); }
|
|
1533
|
-
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 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: [".analytics-btn,.analytics-btn [igxButton=flat],.analytics-btn .igx-button--flat{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, 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, #335e3b);--focus-foreground: var(--igx-button-focus-foreground, white);--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, 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}.analytics-btn,.analytics-btn [igxButton=outlined],.analytics-btn .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, 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, #335e3b);--focus-foreground: var(--igx-button-focus-foreground, white);--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, 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}.analytics-btn,.analytics-btn [igxButton=contained],.analytics-btn .igx-button--contained{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, 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, #335e3b);--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-foreground: var(--igx-button-focus-foreground, white);--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-foreground: var(--igx-button-active-foreground, 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}.analytics-btn,.analytics-btn [igxButton=fab],.analytics-btn .igx-button--fab{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, 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, #335e3b);--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-foreground: var(--igx-button-focus-foreground, white);--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-foreground: var(--igx-button-active-foreground, 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"] }] }); }
|
|
1586
|
+
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,: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"] }] }); }
|
|
1534
1587
|
}
|
|
1535
1588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IgxContextMenuComponent, decorators: [{
|
|
1536
1589
|
type: Component,
|
|
@@ -1559,7 +1612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
1559
1612
|
IgxNumericXAxisModule,
|
|
1560
1613
|
IgxNumericYAxisModule,
|
|
1561
1614
|
IgxIconButtonDirective,
|
|
1562
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<span #analyticsBtn class=\"analytics-btn\">\r\n <button #btn igxIconButton=\"flat\" (click)=\"toggleTabMenu()\">\r\n <igx-icon #icon class=\"icon\" family=\"material\">insert_chart_outlined</igx-icon>\r\n </button>\r\n</span>\r\n<div #tabsMenu igxToggle class=\"toggle-content ig-scrollbar\">\r\n <igx-tabs tabsType=\"fixed\" [selectedIndex]=\"!this.textFormatters.length && chartTypes.length ? 1 : 0\">\r\n <igx-tab-item [disabled]=\"!textFormatters.length\">\r\n <igx-tab-header>\r\n <span igxTabHeaderLabel>Conditional Formatting</span>\r\n </igx-tab-header>\r\n <igx-tab-content>\r\n <igc-trial-watermark></igc-trial-watermark>\r\n <div class=\"tabs\">\r\n <span class=\"tab-option\">\r\n <span *ngFor=\"let condition of textFormatters\" class=\"action btn condition\"\r\n [ngClass]=\"{'selected--condition': condition === currentFormatter}\"\r\n (click)=\"formatCells(condition)\">\r\n <div class=\"imgSize\" [innerHTML]=\"conditionImages[condition.replace(' ', '')] | svg\">\r\n </div>\r\n <span class=\"name\">{{condition.replace('10', '10%')}}</span>\r\n </span>\r\n </span>\r\n <span class=\"clear action\"\r\n [ngClass]=\"{'disableButton': contextDirective.textFormatter ? !contextDirective.textFormatter.formatter : true }\"\r\n (click)=\"clearFormat()\">\r\n <div class=\"imgSize\" [innerHTML]=\"conditionImages['Clear'] | svg\">\r\n </div>\r\n <span class=\"btn name\">Clear All</span>\r\n </span>\r\n </div>\r\n </igx-tab-content>\r\n </igx-tab-item>\r\n <igx-tab-item *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: [".analytics-btn,.analytics-btn [igxButton=flat],.analytics-btn .igx-button--flat{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, transparent);--disabled-foreground: var(--igx-button-disabled-foreground, 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, #335e3b);--focus-foreground: var(--igx-button-focus-foreground, white);--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, 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}.analytics-btn,.analytics-btn [igxButton=outlined],.analytics-btn .igx-button--outlined{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, 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, #335e3b);--focus-foreground: var(--igx-button-focus-foreground, white);--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-background: var(--igx-button-active-background, hsl(from var(--ig-secondary-500) h s l/.16));--active-foreground: var(--igx-button-active-foreground, 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}.analytics-btn,.analytics-btn [igxButton=contained],.analytics-btn .igx-button--contained{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, 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, #335e3b);--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-foreground: var(--igx-button-focus-foreground, white);--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-foreground: var(--igx-button-active-foreground, 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}.analytics-btn,.analytics-btn [igxButton=fab],.analytics-btn .igx-button--fab{--shadow-color: var(--igx-button-shadow-color, transparent);--border-color: var(--igx-button-border-color, transparent);--hover-border-color: var(--igx-button-hover-border-color, transparent);--focus-border-color: var(--igx-button-focus-border-color, transparent);--focus-visible-border-color: var(--igx-button-focus-visible-border-color, transparent);--active-border-color: var(--igx-button-active-border-color, transparent);--disabled-border-color: var(--igx-button-disabled-border-color, transparent);--disabled-background: var(--igx-button-disabled-background, 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, #335e3b);--active-background: var(--igx-button-active-background, var(--ig-secondary-300));--border-radius: var(--igx-button-border-radius, 0);--foreground: var(--igx-button-foreground, #fff);--icon-color: var(--igx-button-icon-color, #fff);--icon-color-hover: var(--igx-button-icon-color-hover, black);--hover-background: var(--igx-button-hover-background, #459a55);--hover-foreground: var(--igx-button-hover-foreground, black);--focus-background: var(--igx-button-focus-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-foreground: var(--igx-button-focus-foreground, white);--focus-hover-background: var(--igx-button-focus-hover-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-hover-foreground: var(--igx-button-focus-hover-foreground, white);--focus-visible-background: var(--igx-button-focus-visible-background, rgb(57.4189655172, 105.8310344828, 66.425862069));--focus-visible-foreground: var(--igx-button-focus-visible-foreground, white);--active-foreground: var(--igx-button-active-foreground, 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"] }]
|
|
1563
1616
|
}], ctorParameters: () => [{ type: i1.IgxOverlayService }], propDecorators: { button: [{
|
|
1564
1617
|
type: ViewChild,
|
|
1565
1618
|
args: ['analyticsBtn']
|
|
@@ -1631,7 +1684,19 @@ class IgxContextMenuDirective {
|
|
|
1631
1684
|
setUpGridListeners() {
|
|
1632
1685
|
this.contentObserver = new ResizeObserver(() => this.gridResizeNotify.next());
|
|
1633
1686
|
this.contentObserver.observe(this.grid.nativeElement);
|
|
1634
|
-
this.grid.
|
|
1687
|
+
this.grid.columnSelectionChanging.pipe(debounceTime(100))
|
|
1688
|
+
.subscribe((args) => {
|
|
1689
|
+
if (args.newSelection && args.oldSelection && !this._collapsed) {
|
|
1690
|
+
this.close();
|
|
1691
|
+
}
|
|
1692
|
+
this.grid.clearCellSelection();
|
|
1693
|
+
this.chartsDirective.chartData = this.grid.getSelectedColumnsData();
|
|
1694
|
+
if (!this._collapsed) {
|
|
1695
|
+
this.onButtonClose.emit();
|
|
1696
|
+
}
|
|
1697
|
+
this.renderHeaderButton();
|
|
1698
|
+
});
|
|
1699
|
+
this.grid.rangeSelected.pipe(takeUntil(this.destroy$), debounceTime(200))
|
|
1635
1700
|
.subscribe((args) => {
|
|
1636
1701
|
this._range = args;
|
|
1637
1702
|
if (this.chartsDirective) {
|
|
@@ -1647,7 +1712,7 @@ class IgxContextMenuDirective {
|
|
|
1647
1712
|
}
|
|
1648
1713
|
this.renderButton();
|
|
1649
1714
|
});
|
|
1650
|
-
this.grid.verticalScrollContainer.chunkLoad.pipe(merge(this.grid.parentVirtDir.chunkLoad, this.grid.filteringDone, this.grid.columnResized, this.grid.columnVisibilityChanged.pipe(debounceTime(
|
|
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(() => {
|
|
1651
1716
|
this.onButtonClose.emit();
|
|
1652
1717
|
this.renderButton();
|
|
1653
1718
|
});
|
|
@@ -1690,6 +1755,43 @@ class IgxContextMenuDirective {
|
|
|
1690
1755
|
}
|
|
1691
1756
|
this._collapsed ? this.show() : this.overlayService.reposition(this._id);
|
|
1692
1757
|
}
|
|
1758
|
+
renderHeaderButton() {
|
|
1759
|
+
const selectedColumns = this.grid.selectedColumns();
|
|
1760
|
+
if (selectedColumns.length === 0) {
|
|
1761
|
+
return;
|
|
1762
|
+
}
|
|
1763
|
+
this._analyticsBtnSettings.positionStrategy = new AutoPositionStrategy({
|
|
1764
|
+
horizontalDirection: HorizontalAlignment.Right,
|
|
1765
|
+
horizontalStartPoint: HorizontalAlignment.Right,
|
|
1766
|
+
verticalStartPoint: VerticalAlignment.Bottom,
|
|
1767
|
+
verticalDirection: VerticalAlignment.Bottom, closeAnimation: null
|
|
1768
|
+
});
|
|
1769
|
+
const selectedColumnsIndexes = selectedColumns.map(c => c.visibleIndex).sort((a, b) => a - b);
|
|
1770
|
+
let colIndex = selectedColumnsIndexes[selectedColumnsIndexes.length - 1];
|
|
1771
|
+
let rowIndex = undefined;
|
|
1772
|
+
while (selectedColumnsIndexes.length) {
|
|
1773
|
+
if (this.grid.navigation.isColumnFullyVisible(colIndex)) {
|
|
1774
|
+
break;
|
|
1775
|
+
}
|
|
1776
|
+
selectedColumnsIndexes.pop();
|
|
1777
|
+
colIndex = selectedColumnsIndexes[selectedColumnsIndexes.length - 1];
|
|
1778
|
+
}
|
|
1779
|
+
if (!selectedColumnsIndexes.length) {
|
|
1780
|
+
return;
|
|
1781
|
+
}
|
|
1782
|
+
const col = selectedColumns.find(c => c.visibleIndex === colIndex);
|
|
1783
|
+
if (!col) {
|
|
1784
|
+
return;
|
|
1785
|
+
}
|
|
1786
|
+
const headerCell = col.headerCell.nativeElement;
|
|
1787
|
+
this._analyticsBtnSettings.target = headerCell;
|
|
1788
|
+
this._analyticsBtnSettings.scrollStrategy = new AbsoluteScrollStrategy();
|
|
1789
|
+
const info = this.overlayService.getOverlayById(this._id);
|
|
1790
|
+
if (info) {
|
|
1791
|
+
info.settings.positionStrategy = this._analyticsBtnSettings.positionStrategy;
|
|
1792
|
+
}
|
|
1793
|
+
this._collapsed ? this.show() : this.overlayService.reposition(this._id);
|
|
1794
|
+
}
|
|
1693
1795
|
show() {
|
|
1694
1796
|
if (!this._collapsed) {
|
|
1695
1797
|
return;
|