igniteui-angular-extras 21.2.7 → 22.0.0-beta.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Input, Output, Directive, inject, Pipe, ElementRef, ViewContainerRef, HostBinding, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, Component } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Input, Output, Directive, inject, Pipe, ElementRef, ViewContainerRef, HostBinding, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ViewEncapsulation, Component } 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 { IgxGridComponent } from 'igniteui-angular/grids/grid';
|
|
5
5
|
import { Subject, merge } from 'rxjs';
|
|
@@ -470,10 +470,10 @@ class IgxChartIntegrationDirective {
|
|
|
470
470
|
this.customChartComponentOptions.get(chart)[optionsType][property] = options[property];
|
|
471
471
|
});
|
|
472
472
|
}
|
|
473
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
474
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxChartIntegrationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
474
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IgxChartIntegrationDirective, isStandalone: true, selector: "[igxChartIntegration]", inputs: { chartData: "chartData", useLegend: "useLegend", defaultLabelMemberPath: "defaultLabelMemberPath", scatterChartYAxisValueMemberPath: "scatterChartYAxisValueMemberPath", bubbleChartRadiusMemberPath: "bubbleChartRadiusMemberPath" }, outputs: { chartTypesDetermined: "chartTypesDetermined", chartCreationDone: "chartCreationDone" }, ngImport: i0 }); }
|
|
475
475
|
}
|
|
476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxChartIntegrationDirective, decorators: [{
|
|
477
477
|
type: Directive,
|
|
478
478
|
args: [{
|
|
479
479
|
selector: '[igxChartIntegration]',
|
|
@@ -827,10 +827,10 @@ class IgxConditionalFormattingDirective {
|
|
|
827
827
|
data.forEach(rec => result = result.concat(Object.values(rec)));
|
|
828
828
|
return result;
|
|
829
829
|
}
|
|
830
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
831
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
830
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxConditionalFormattingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
831
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IgxConditionalFormattingDirective, isStandalone: true, selector: "[igxConditionalFormatting]", inputs: { formatter: "formatter", formatColors: "formatColors" }, outputs: { formattersReady: "formattersReady" }, ngImport: i0 }); }
|
|
832
832
|
}
|
|
833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
833
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxConditionalFormattingDirective, decorators: [{
|
|
834
834
|
type: Directive,
|
|
835
835
|
args: [{
|
|
836
836
|
selector: '[igxConditionalFormatting]',
|
|
@@ -1278,10 +1278,10 @@ class SvgPipe {
|
|
|
1278
1278
|
transform(markup) {
|
|
1279
1279
|
return this.sanitizer.bypassSecurityTrustHtml(markup);
|
|
1280
1280
|
}
|
|
1281
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1282
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SvgPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1282
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: SvgPipe, isStandalone: true, name: "svg" }); }
|
|
1283
1283
|
}
|
|
1284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SvgPipe, decorators: [{
|
|
1285
1285
|
type: Pipe,
|
|
1286
1286
|
args: [{
|
|
1287
1287
|
name: 'svg',
|
|
@@ -1339,12 +1339,12 @@ class IgxChartMenuComponent {
|
|
|
1339
1339
|
this.chartArea.clear();
|
|
1340
1340
|
this.chartDirective.chartFactory(chartType, this.chartArea);
|
|
1341
1341
|
}
|
|
1342
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1342
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxChartMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1343
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IgxChartMenuComponent, isStandalone: true, selector: "igx-chart-menu", outputs: { closed: "closed" }, 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\">\n <span class=\"header-text\">\n {{ title }} Chart\n </span>\n <span class=\"action-buttons-wrapper\">\n <button igxIconButton=\"flat\" (click)=\"toggleFullScreen()\">\n <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\n </button>\n <button igxIconButton=\"flat\" (click)=\"closed.emit()\">\n <igx-icon class=\"material\">close</igx-icon>\n </button>\n </span>\n</div>\n<div class=\"selection-area ig-scrollbar\">\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\n <ng-template #chartArea ></ng-template>\n </div>\n <div>\n <button igxIconButton=\"flat\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\n <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\n </button>\n </div>\n <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\n <div class=\"config-area-header\">\n <span>Chart Types</span>\n </div>\n <igx-divider class=\"divider\"></igx-divider>\n @for (chartType of mainChartTypes; track chartType) {\n <div class=\"wrapper\">\n @if (hasAvailableChart(chartType)) {\n <div>{{chartType | titlecase}} Chart</div>\n <div class=\"types-section\">\n @for (chart of allCharts; track chart) {\n @if (chart.startsWith(chartType)) {\n <span class=\"types-section-btn\" title=\"{{chart}}\"\n [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\n <div [innerHTML]=\"images[chart] | svg\">\n </div>\n </span>\n }\n }\n </div>\n <igx-divider></igx-divider>\n }\n </div>\n }\n </div>\n</div>\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(--igx-scrollbar-sb-size, var(--ig-scrollbar-sb-size, 1rem));--sb-thumb-min-height: var(--igx-scrollbar-sb-thumb-min-height, var(--ig-scrollbar-sb-thumb-min-height, 2rem));--sb-thumb-bg-color: var(--igx-scrollbar-sb-thumb-bg-color, var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400)));--sb-thumb-bg-color-hover: var(--igx-scrollbar-sb-thumb-bg-color-hover, var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400)));--sb-thumb-border-color: var(--igx-scrollbar-sb-thumb-border-color, var(--ig-scrollbar-sb-thumb-border-color, transparent));--sb-thumb-border-size: var(--igx-scrollbar-sb-thumb-border-size, var(--ig-scrollbar-sb-thumb-border-size, 0));--sb-thumb-border-radius: var(--igx-scrollbar-sb-thumb-border-radius, var(--ig-scrollbar-sb-thumb-border-radius, 0));--sb-track-bg-color: var(--igx-scrollbar-sb-track-bg-color, var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100)));--sb-track-bg-color-hover: var(--igx-scrollbar-sb-track-bg-color-hover, var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100)));--sb-track-border-color: var(--igx-scrollbar-sb-track-border-color, var(--ig-scrollbar-sb-track-border-color, transparent));--sb-track-border-size: var(--igx-scrollbar-sb-track-border-size, var(--ig-scrollbar-sb-track-border-size, 0));--sb-corner-bg: var(--igx-scrollbar-sb-corner-bg, var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100)));--sb-corner-border-color: var(--igx-scrollbar-sb-corner-border-color, var(--ig-scrollbar-sb-corner-border-color, transparent));--sb-corner-border-size: var(--igx-scrollbar-sb-corner-border-size, var(--ig-scrollbar-sb-corner-border-size, 0));--ig-theme: material;--ig-theme-variant: light}@-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.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{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxDividerDirective, selector: "igx-divider", inputs: ["id", "role", "type", "middle", "vertical", "inset"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SvgPipe, name: "svg" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1344
1344
|
}
|
|
1345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
|
|
1346
1346
|
type: Component,
|
|
1347
|
-
args: [{ selector: 'igx-chart-menu', encapsulation: ViewEncapsulation.None, imports: [CommonModule, IgxIconComponent, IgxIconButtonDirective, IgxRippleDirective, IgxDividerDirective, SvgPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"header\">\n <span class=\"header-text\">\n {{ title }} Chart\n </span>\n <span class=\"action-buttons-wrapper\">\n <button igxIconButton=\"flat\" (click)=\"toggleFullScreen()\">\n <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\n </button>\n <button igxIconButton=\"flat\" (click)=\"closed.emit()\">\n <igx-icon class=\"material\">close</igx-icon>\n </button>\n </span>\n</div>\n<div class=\"selection-area ig-scrollbar\">\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\n <ng-template #chartArea ></ng-template>\n </div>\n <div>\n <button igxIconButton=\"flat\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\n <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\n </button>\n </div>\n <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\n <div class=\"config-area-header\">\n <span>Chart Types</span>\n </div>\n <igx-divider class=\"divider\"></igx-divider>\n @for (chartType of mainChartTypes; track chartType) {\n <div class=\"wrapper\">\n @if (hasAvailableChart(chartType)) {\n <div>{{chartType | titlecase}} Chart</div>\n <div class=\"types-section\">\n @for (chart of allCharts; track chart) {\n @if (chart.startsWith(chartType)) {\n <span class=\"types-section-btn\" title=\"{{chart}}\"\n [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\n <div [innerHTML]=\"images[chart] | svg\">\n </div>\n </span>\n }\n }\n </div>\n <igx-divider></igx-divider>\n }\n </div>\n }\n </div>\n</div>\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(--igx-scrollbar-sb-size, var(--ig-scrollbar-sb-size, 1rem));--sb-thumb-min-height: var(--igx-scrollbar-sb-thumb-min-height, var(--ig-scrollbar-sb-thumb-min-height, 2rem));--sb-thumb-bg-color: var(--igx-scrollbar-sb-thumb-bg-color, var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400)));--sb-thumb-bg-color-hover: var(--igx-scrollbar-sb-thumb-bg-color-hover, var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400)));--sb-thumb-border-color: var(--igx-scrollbar-sb-thumb-border-color, var(--ig-scrollbar-sb-thumb-border-color, transparent));--sb-thumb-border-size: var(--igx-scrollbar-sb-thumb-border-size, var(--ig-scrollbar-sb-thumb-border-size, 0));--sb-thumb-border-radius: var(--igx-scrollbar-sb-thumb-border-radius, var(--ig-scrollbar-sb-thumb-border-radius, 0));--sb-track-bg-color: var(--igx-scrollbar-sb-track-bg-color, var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100)));--sb-track-bg-color-hover: var(--igx-scrollbar-sb-track-bg-color-hover, var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100)));--sb-track-border-color: var(--igx-scrollbar-sb-track-border-color, var(--ig-scrollbar-sb-track-border-color, transparent));--sb-track-border-size: var(--igx-scrollbar-sb-track-border-size, var(--ig-scrollbar-sb-track-border-size, 0));--sb-corner-bg: var(--igx-scrollbar-sb-corner-bg, var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100)));--sb-corner-border-color: var(--igx-scrollbar-sb-corner-border-color, var(--ig-scrollbar-sb-corner-border-color, transparent));--sb-corner-border-size: var(--igx-scrollbar-sb-corner-border-size, var(--ig-scrollbar-sb-corner-border-size, 0));--ig-theme: material;--ig-theme-variant: light}@-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.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{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.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"] }]
|
|
1347
|
+
args: [{ selector: 'igx-chart-menu', encapsulation: ViewEncapsulation.None, imports: [CommonModule, IgxIconComponent, IgxIconButtonDirective, IgxRippleDirective, IgxDividerDirective, SvgPipe], changeDetection: ChangeDetectionStrategy.Eager, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"header\">\n <span class=\"header-text\">\n {{ title }} Chart\n </span>\n <span class=\"action-buttons-wrapper\">\n <button igxIconButton=\"flat\" (click)=\"toggleFullScreen()\">\n <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\n </button>\n <button igxIconButton=\"flat\" (click)=\"closed.emit()\">\n <igx-icon class=\"material\">close</igx-icon>\n </button>\n </span>\n</div>\n<div class=\"selection-area ig-scrollbar\">\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\n <ng-template #chartArea ></ng-template>\n </div>\n <div>\n <button igxIconButton=\"flat\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\n <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\n </button>\n </div>\n <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\n <div class=\"config-area-header\">\n <span>Chart Types</span>\n </div>\n <igx-divider class=\"divider\"></igx-divider>\n @for (chartType of mainChartTypes; track chartType) {\n <div class=\"wrapper\">\n @if (hasAvailableChart(chartType)) {\n <div>{{chartType | titlecase}} Chart</div>\n <div class=\"types-section\">\n @for (chart of allCharts; track chart) {\n @if (chart.startsWith(chartType)) {\n <span class=\"types-section-btn\" title=\"{{chart}}\"\n [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\n <div [innerHTML]=\"images[chart] | svg\">\n </div>\n </span>\n }\n }\n </div>\n <igx-divider></igx-divider>\n }\n </div>\n }\n </div>\n</div>\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(--igx-scrollbar-sb-size, var(--ig-scrollbar-sb-size, 1rem));--sb-thumb-min-height: var(--igx-scrollbar-sb-thumb-min-height, var(--ig-scrollbar-sb-thumb-min-height, 2rem));--sb-thumb-bg-color: var(--igx-scrollbar-sb-thumb-bg-color, var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400)));--sb-thumb-bg-color-hover: var(--igx-scrollbar-sb-thumb-bg-color-hover, var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400)));--sb-thumb-border-color: var(--igx-scrollbar-sb-thumb-border-color, var(--ig-scrollbar-sb-thumb-border-color, transparent));--sb-thumb-border-size: var(--igx-scrollbar-sb-thumb-border-size, var(--ig-scrollbar-sb-thumb-border-size, 0));--sb-thumb-border-radius: var(--igx-scrollbar-sb-thumb-border-radius, var(--ig-scrollbar-sb-thumb-border-radius, 0));--sb-track-bg-color: var(--igx-scrollbar-sb-track-bg-color, var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100)));--sb-track-bg-color-hover: var(--igx-scrollbar-sb-track-bg-color-hover, var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100)));--sb-track-border-color: var(--igx-scrollbar-sb-track-border-color, var(--ig-scrollbar-sb-track-border-color, transparent));--sb-track-border-size: var(--igx-scrollbar-sb-track-border-size, var(--ig-scrollbar-sb-track-border-size, 0));--sb-corner-bg: var(--igx-scrollbar-sb-corner-bg, var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100)));--sb-corner-border-color: var(--igx-scrollbar-sb-corner-border-color, var(--ig-scrollbar-sb-corner-border-color, transparent));--sb-corner-border-size: var(--igx-scrollbar-sb-corner-border-size, var(--ig-scrollbar-sb-corner-border-size, 0));--ig-theme: material;--ig-theme-variant: light}@-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.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{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.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"] }]
|
|
1348
1348
|
}], ctorParameters: () => [], propDecorators: { chartArea: [{
|
|
1349
1349
|
type: ViewChild,
|
|
1350
1350
|
args: ['chartArea', { read: ViewContainerRef }]
|
|
@@ -1615,10 +1615,10 @@ class IgxContextMenuComponent {
|
|
|
1615
1615
|
this._dialogId = undefined;
|
|
1616
1616
|
}
|
|
1617
1617
|
}
|
|
1618
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1619
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1618
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1619
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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\">\n <button #btn class=\"analytics-button\" igxIconButton=\"flat\" (click)=\"toggleTabMenu()\">\n <igx-icon #icon class=\"icon\" family=\"material\">insert_chart_outlined</igx-icon>\n </button>\n</span>\n<div #tabsMenu igxToggle class=\"toggle-content ig-scrollbar\">\n <igx-tabs tabsType=\"fixed\" [selectedIndex]=\"!this.textFormatters.length && chartTypes.length ? 1 : 0\">\n <igx-tab-item [disabled]=\"!textFormatters.length\">\n <igx-tab-header>\n <span igxTabHeaderLabel>Conditional Formatting</span>\n </igx-tab-header>\n <igx-tab-content>\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"tabs\">\n <span class=\"tab-option\">\n @for (condition of textFormatters; track condition) {\n <span class=\"action btn condition\"\n [ngClass]=\"{'selected--condition': condition === currentFormatter}\"\n (click)=\"formatCells(condition)\">\n <div class=\"imgSize\" [innerHTML]=\"conditionImages[condition.replace(' ', '')] | svg\">\n </div>\n <span class=\"name\">{{condition.replace('10', '10%')}}</span>\n </span>\n }\n </span>\n <span class=\"clear action\"\n [ngClass]=\"{'disableButton': contextDirective.textFormatter ? !contextDirective.textFormatter.formatter : true }\"\n (click)=\"clearFormat()\">\n <div class=\"imgSize\" [innerHTML]=\"conditionImages['Clear'] | svg\">\n </div>\n <span class=\"btn name\">Clear All</span>\n </span>\n </div>\n </igx-tab-content>\n </igx-tab-item>\n @if (displayCreationTab) {\n <igx-tab-item [disabled]=\"!chartTypes.length\">\n <igx-tab-header>\n <span igxTabHeaderLabel>Create Chart</span>\n </igx-tab-header>\n <igx-tab-content>\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"tabs\">\n <span class=\"tab-option\">\n @for (chart of chartTypes | slice:0:4; track chart) {\n <span class=\"action btn chart\"\n [ngClass]=\"{'selected': chart === currentChartType}\" (mouseenter)=\"previewChart(chart)\"\n (mouseleave)=\"hidePreview()\" (click)=\"openDialog(chart)\">\n <span [innerHTML]=\"chartImages[chart] | svg\" class=\"imgSize\">\n </span>\n <span class=\"name\">{{chart}}</span>\n </span>\n }\n </span>\n <span class=\"more-action chart\" [ngClass]=\"{'disableButton': !chartTypes.length}\"\n (click)=\"openDialog()\">\n <button class=\"more-btn more-icon\" igxIconButton=\"flat\" [style.--background]=\"'#EBEBEB'\"\n [style.--foreground]=\"'black'\">\n <igx-icon class=\"icon\" family=\"material\">more_horiz</igx-icon>\n </button>\n <span class=\"name btn\">More...</span>\n </span>\n </div>\n </igx-tab-content>\n </igx-tab-item>\n }\n </igx-tabs>\n</div>\n<div igxToggle #chartPreviewDialog class=\"chart-preview\">\n <div class=\"chart-preview-title\">\n <h5>Preview Chart</h5>\n </div>\n <div class=\"chart-preview-area\">\n <ng-template #chartPreview></ng-template>\n </div>\n</div>", styles: [":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.condition{padding-right:16px}.btn.chart{padding-right:24px}.btn{display:inline-flex;flex-flow:column;align-items:center}.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(--igx-scrollbar-sb-size, var(--ig-scrollbar-sb-size, 1rem));--sb-thumb-min-height: var(--igx-scrollbar-sb-thumb-min-height, var(--ig-scrollbar-sb-thumb-min-height, 2rem));--sb-thumb-bg-color: var(--igx-scrollbar-sb-thumb-bg-color, var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400)));--sb-thumb-bg-color-hover: var(--igx-scrollbar-sb-thumb-bg-color-hover, var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400)));--sb-thumb-border-color: var(--igx-scrollbar-sb-thumb-border-color, var(--ig-scrollbar-sb-thumb-border-color, transparent));--sb-thumb-border-size: var(--igx-scrollbar-sb-thumb-border-size, var(--ig-scrollbar-sb-thumb-border-size, 0));--sb-thumb-border-radius: var(--igx-scrollbar-sb-thumb-border-radius, var(--ig-scrollbar-sb-thumb-border-radius, 0));--sb-track-bg-color: var(--igx-scrollbar-sb-track-bg-color, var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100)));--sb-track-bg-color-hover: var(--igx-scrollbar-sb-track-bg-color-hover, var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100)));--sb-track-border-color: var(--igx-scrollbar-sb-track-border-color, var(--ig-scrollbar-sb-track-border-color, transparent));--sb-track-border-size: var(--igx-scrollbar-sb-track-border-size, var(--ig-scrollbar-sb-track-border-size, 0));--sb-corner-bg: var(--igx-scrollbar-sb-corner-bg, var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100)));--sb-corner-border-color: var(--igx-scrollbar-sb-corner-border-color, var(--ig-scrollbar-sb-corner-border-color, transparent));--sb-corner-border-size: var(--igx-scrollbar-sb-corner-border-size, var(--ig-scrollbar-sb-corner-border-size, 0));--ig-theme: material;--ig-theme-variant: light}@-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "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: "[igxTabHeaderLabel],igx-tab-header-label" }, { 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"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: SvgPipe, name: "svg" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1620
1620
|
}
|
|
1621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxContextMenuComponent, decorators: [{
|
|
1622
1622
|
type: Component,
|
|
1623
1623
|
args: [{ selector: 'igx-context-menu', imports: [
|
|
1624
1624
|
CommonModule,
|
|
@@ -1643,7 +1643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1643
1643
|
IgxNumericXAxisModule,
|
|
1644
1644
|
IgxNumericYAxisModule,
|
|
1645
1645
|
IgxIconButtonDirective
|
|
1646
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<span #analyticsBtn class=\"analytics-btn\">\n <button #btn class=\"analytics-button\" igxIconButton=\"flat\" (click)=\"toggleTabMenu()\">\n <igx-icon #icon class=\"icon\" family=\"material\">insert_chart_outlined</igx-icon>\n </button>\n</span>\n<div #tabsMenu igxToggle class=\"toggle-content ig-scrollbar\">\n <igx-tabs tabsType=\"fixed\" [selectedIndex]=\"!this.textFormatters.length && chartTypes.length ? 1 : 0\">\n <igx-tab-item [disabled]=\"!textFormatters.length\">\n <igx-tab-header>\n <span igxTabHeaderLabel>Conditional Formatting</span>\n </igx-tab-header>\n <igx-tab-content>\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"tabs\">\n <span class=\"tab-option\">\n @for (condition of textFormatters; track condition) {\n <span class=\"action btn condition\"\n [ngClass]=\"{'selected--condition': condition === currentFormatter}\"\n (click)=\"formatCells(condition)\">\n <div class=\"imgSize\" [innerHTML]=\"conditionImages[condition.replace(' ', '')] | svg\">\n </div>\n <span class=\"name\">{{condition.replace('10', '10%')}}</span>\n </span>\n }\n </span>\n <span class=\"clear action\"\n [ngClass]=\"{'disableButton': contextDirective.textFormatter ? !contextDirective.textFormatter.formatter : true }\"\n (click)=\"clearFormat()\">\n <div class=\"imgSize\" [innerHTML]=\"conditionImages['Clear'] | svg\">\n </div>\n <span class=\"btn name\">Clear All</span>\n </span>\n </div>\n </igx-tab-content>\n </igx-tab-item>\n @if (displayCreationTab) {\n <igx-tab-item [disabled]=\"!chartTypes.length\">\n <igx-tab-header>\n <span igxTabHeaderLabel>Create Chart</span>\n </igx-tab-header>\n <igx-tab-content>\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"tabs\">\n <span class=\"tab-option\">\n @for (chart of chartTypes | slice:0:4; track chart) {\n <span class=\"action btn chart\"\n [ngClass]=\"{'selected': chart === currentChartType}\" (mouseenter)=\"previewChart(chart)\"\n (mouseleave)=\"hidePreview()\" (click)=\"openDialog(chart)\">\n <span [innerHTML]=\"chartImages[chart] | svg\" class=\"imgSize\">\n </span>\n <span class=\"name\">{{chart}}</span>\n </span>\n }\n </span>\n <span class=\"more-action chart\" [ngClass]=\"{'disableButton': !chartTypes.length}\"\n (click)=\"openDialog()\">\n <button class=\"more-btn more-icon\" igxIconButton=\"flat\" [style.--background]=\"'#EBEBEB'\"\n [style.--foreground]=\"'black'\">\n <igx-icon class=\"icon\" family=\"material\">more_horiz</igx-icon>\n </button>\n <span class=\"name btn\">More...</span>\n </span>\n </div>\n </igx-tab-content>\n </igx-tab-item>\n }\n </igx-tabs>\n</div>\n<div igxToggle #chartPreviewDialog class=\"chart-preview\">\n <div class=\"chart-preview-title\">\n <h5>Preview Chart</h5>\n </div>\n <div class=\"chart-preview-area\">\n <ng-template #chartPreview></ng-template>\n </div>\n</div>", styles: [":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.condition{padding-right:16px}.btn.chart{padding-right:24px}.btn{display:inline-flex;flex-flow:column;align-items:center}.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(--igx-scrollbar-sb-size, var(--ig-scrollbar-sb-size, 1rem));--sb-thumb-min-height: var(--igx-scrollbar-sb-thumb-min-height, var(--ig-scrollbar-sb-thumb-min-height, 2rem));--sb-thumb-bg-color: var(--igx-scrollbar-sb-thumb-bg-color, var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400)));--sb-thumb-bg-color-hover: var(--igx-scrollbar-sb-thumb-bg-color-hover, var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400)));--sb-thumb-border-color: var(--igx-scrollbar-sb-thumb-border-color, var(--ig-scrollbar-sb-thumb-border-color, transparent));--sb-thumb-border-size: var(--igx-scrollbar-sb-thumb-border-size, var(--ig-scrollbar-sb-thumb-border-size, 0));--sb-thumb-border-radius: var(--igx-scrollbar-sb-thumb-border-radius, var(--ig-scrollbar-sb-thumb-border-radius, 0));--sb-track-bg-color: var(--igx-scrollbar-sb-track-bg-color, var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100)));--sb-track-bg-color-hover: var(--igx-scrollbar-sb-track-bg-color-hover, var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100)));--sb-track-border-color: var(--igx-scrollbar-sb-track-border-color, var(--ig-scrollbar-sb-track-border-color, transparent));--sb-track-border-size: var(--igx-scrollbar-sb-track-border-size, var(--ig-scrollbar-sb-track-border-size, 0));--sb-corner-bg: var(--igx-scrollbar-sb-corner-bg, var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100)));--sb-corner-border-color: var(--igx-scrollbar-sb-corner-border-color, var(--ig-scrollbar-sb-corner-border-color, transparent));--sb-corner-border-size: var(--igx-scrollbar-sb-corner-border-size, var(--ig-scrollbar-sb-corner-border-size, 0));--ig-theme: material;--ig-theme-variant: light}@-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"] }]
|
|
1646
|
+
], changeDetection: ChangeDetectionStrategy.Eager, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<span #analyticsBtn class=\"analytics-btn\">\n <button #btn class=\"analytics-button\" igxIconButton=\"flat\" (click)=\"toggleTabMenu()\">\n <igx-icon #icon class=\"icon\" family=\"material\">insert_chart_outlined</igx-icon>\n </button>\n</span>\n<div #tabsMenu igxToggle class=\"toggle-content ig-scrollbar\">\n <igx-tabs tabsType=\"fixed\" [selectedIndex]=\"!this.textFormatters.length && chartTypes.length ? 1 : 0\">\n <igx-tab-item [disabled]=\"!textFormatters.length\">\n <igx-tab-header>\n <span igxTabHeaderLabel>Conditional Formatting</span>\n </igx-tab-header>\n <igx-tab-content>\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"tabs\">\n <span class=\"tab-option\">\n @for (condition of textFormatters; track condition) {\n <span class=\"action btn condition\"\n [ngClass]=\"{'selected--condition': condition === currentFormatter}\"\n (click)=\"formatCells(condition)\">\n <div class=\"imgSize\" [innerHTML]=\"conditionImages[condition.replace(' ', '')] | svg\">\n </div>\n <span class=\"name\">{{condition.replace('10', '10%')}}</span>\n </span>\n }\n </span>\n <span class=\"clear action\"\n [ngClass]=\"{'disableButton': contextDirective.textFormatter ? !contextDirective.textFormatter.formatter : true }\"\n (click)=\"clearFormat()\">\n <div class=\"imgSize\" [innerHTML]=\"conditionImages['Clear'] | svg\">\n </div>\n <span class=\"btn name\">Clear All</span>\n </span>\n </div>\n </igx-tab-content>\n </igx-tab-item>\n @if (displayCreationTab) {\n <igx-tab-item [disabled]=\"!chartTypes.length\">\n <igx-tab-header>\n <span igxTabHeaderLabel>Create Chart</span>\n </igx-tab-header>\n <igx-tab-content>\n <igc-trial-watermark></igc-trial-watermark>\n <div class=\"tabs\">\n <span class=\"tab-option\">\n @for (chart of chartTypes | slice:0:4; track chart) {\n <span class=\"action btn chart\"\n [ngClass]=\"{'selected': chart === currentChartType}\" (mouseenter)=\"previewChart(chart)\"\n (mouseleave)=\"hidePreview()\" (click)=\"openDialog(chart)\">\n <span [innerHTML]=\"chartImages[chart] | svg\" class=\"imgSize\">\n </span>\n <span class=\"name\">{{chart}}</span>\n </span>\n }\n </span>\n <span class=\"more-action chart\" [ngClass]=\"{'disableButton': !chartTypes.length}\"\n (click)=\"openDialog()\">\n <button class=\"more-btn more-icon\" igxIconButton=\"flat\" [style.--background]=\"'#EBEBEB'\"\n [style.--foreground]=\"'black'\">\n <igx-icon class=\"icon\" family=\"material\">more_horiz</igx-icon>\n </button>\n <span class=\"name btn\">More...</span>\n </span>\n </div>\n </igx-tab-content>\n </igx-tab-item>\n }\n </igx-tabs>\n</div>\n<div igxToggle #chartPreviewDialog class=\"chart-preview\">\n <div class=\"chart-preview-title\">\n <h5>Preview Chart</h5>\n </div>\n <div class=\"chart-preview-area\">\n <ng-template #chartPreview></ng-template>\n </div>\n</div>", styles: [":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.condition{padding-right:16px}.btn.chart{padding-right:24px}.btn{display:inline-flex;flex-flow:column;align-items:center}.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(--igx-scrollbar-sb-size, var(--ig-scrollbar-sb-size, 1rem));--sb-thumb-min-height: var(--igx-scrollbar-sb-thumb-min-height, var(--ig-scrollbar-sb-thumb-min-height, 2rem));--sb-thumb-bg-color: var(--igx-scrollbar-sb-thumb-bg-color, var(--ig-scrollbar-sb-thumb-bg-color, var(--ig-gray-400)));--sb-thumb-bg-color-hover: var(--igx-scrollbar-sb-thumb-bg-color-hover, var(--ig-scrollbar-sb-thumb-bg-color-hover, var(--ig-gray-400)));--sb-thumb-border-color: var(--igx-scrollbar-sb-thumb-border-color, var(--ig-scrollbar-sb-thumb-border-color, transparent));--sb-thumb-border-size: var(--igx-scrollbar-sb-thumb-border-size, var(--ig-scrollbar-sb-thumb-border-size, 0));--sb-thumb-border-radius: var(--igx-scrollbar-sb-thumb-border-radius, var(--ig-scrollbar-sb-thumb-border-radius, 0));--sb-track-bg-color: var(--igx-scrollbar-sb-track-bg-color, var(--ig-scrollbar-sb-track-bg-color, var(--ig-gray-100)));--sb-track-bg-color-hover: var(--igx-scrollbar-sb-track-bg-color-hover, var(--ig-scrollbar-sb-track-bg-color-hover, var(--ig-gray-100)));--sb-track-border-color: var(--igx-scrollbar-sb-track-border-color, var(--ig-scrollbar-sb-track-border-color, transparent));--sb-track-border-size: var(--igx-scrollbar-sb-track-border-size, var(--ig-scrollbar-sb-track-border-size, 0));--sb-corner-bg: var(--igx-scrollbar-sb-corner-bg, var(--ig-scrollbar-sb-corner-bg, var(--ig-gray-100)));--sb-corner-border-color: var(--igx-scrollbar-sb-corner-border-color, var(--ig-scrollbar-sb-corner-border-color, transparent));--sb-corner-border-size: var(--igx-scrollbar-sb-corner-border-size, var(--ig-scrollbar-sb-corner-border-size, 0));--ig-theme: material;--ig-theme-variant: light}@-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"] }]
|
|
1647
1647
|
}], ctorParameters: () => [], propDecorators: { button: [{
|
|
1648
1648
|
type: ViewChild,
|
|
1649
1649
|
args: ['analyticsBtn']
|
|
@@ -1860,10 +1860,10 @@ class IgxContextMenuDirective {
|
|
|
1860
1860
|
return rInex >= this._range.rowStart && rInex <= this._range.rowEnd
|
|
1861
1861
|
&& cIndex >= this._range.columnStart && cIndex <= this._range.columnEnd;
|
|
1862
1862
|
}
|
|
1863
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1864
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1863
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1864
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IgxContextMenuDirective, isStandalone: true, selector: "[igxContextMenu]", inputs: { displayCreationTab: "displayCreationTab" }, outputs: { buttonClose: "buttonClose" }, ngImport: i0 }); }
|
|
1865
1865
|
}
|
|
1866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1866
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxContextMenuDirective, decorators: [{
|
|
1867
1867
|
type: Directive,
|
|
1868
1868
|
args: [{
|
|
1869
1869
|
selector: '[igxContextMenu]',
|