igniteui-angular-extras 16.1.0 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/esm2022/igniteui-angular-extras.mjs +4 -4
  2. package/esm2022/images/charts.mjs +17 -17
  3. package/esm2022/images/conditions.mjs +11 -11
  4. package/esm2022/lib/context-menu/chart-dialog/chart-dialog.component.mjs +67 -67
  5. package/esm2022/lib/context-menu/context-menu.component.mjs +176 -176
  6. package/esm2022/lib/context-menu/igx-context-menu.directive.mjs +154 -154
  7. package/esm2022/lib/directives/chart-integration/chart-integration.directive.mjs +312 -312
  8. package/esm2022/lib/directives/chart-integration/chart-types.mjs +27 -27
  9. package/esm2022/lib/directives/chart-integration/initializers.mjs +102 -102
  10. package/esm2022/lib/directives/conditional-formatting/conditional-formatting.directive.mjs +303 -303
  11. package/esm2022/lib/igniteui-angular-extras.module.mjs +107 -107
  12. package/esm2022/lib/pipes/svg.pipe.mjs +19 -19
  13. package/esm2022/public-api.mjs +20 -20
  14. package/fesm2022/igniteui-angular-extras.mjs +1228 -1228
  15. package/fesm2022/igniteui-angular-extras.mjs.map +1 -1
  16. package/images/charts.d.ts +16 -16
  17. package/images/conditions.d.ts +10 -10
  18. package/index.d.ts +5 -5
  19. package/lib/context-menu/chart-dialog/chart-dialog.component.d.ts +31 -31
  20. package/lib/context-menu/context-menu.component.d.ts +37 -37
  21. package/lib/context-menu/igx-context-menu.directive.d.ts +33 -33
  22. package/lib/directives/chart-integration/chart-integration.directive.d.ts +52 -52
  23. package/lib/directives/chart-integration/chart-types.d.ts +25 -25
  24. package/lib/directives/chart-integration/initializers.d.ts +39 -39
  25. package/lib/directives/conditional-formatting/conditional-formatting.directive.d.ts +95 -95
  26. package/lib/igniteui-angular-extras.module.d.ts +15 -15
  27. package/lib/pipes/svg.pipe.d.ts +10 -10
  28. package/package.json +6 -6
  29. package/public-api.d.ts +17 -17
@@ -1,67 +1,67 @@
1
- import { Component, EventEmitter, HostBinding, Output, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
2
- import * as charts from '../../../images/charts';
3
- import { Subject } from 'rxjs';
4
- import { ResizeObserver } from '@juggle/resize-observer';
5
- import * as i0 from "@angular/core";
6
- import * as i1 from "igniteui-angular";
7
- import * as i2 from "@angular/common";
8
- import * as i3 from "../../pipes/svg.pipe";
9
- export class IgxChartMenuComponent {
10
- get width() {
11
- return this.fullScreen ? this._width : 0.7 * this._width;
12
- }
13
- set width(value) {
14
- this._width = value;
15
- }
16
- get height() {
17
- return this.fullScreen ? this._height : 0.7 * this._height;
18
- }
19
- set height(value) {
20
- this._height = value;
21
- }
22
- constructor(element) {
23
- this.element = element;
24
- this.onClose = new EventEmitter();
25
- this.chartDialogResizeNotify = new Subject();
26
- this.allCharts = [];
27
- this.fullScreen = false;
28
- this.isConfigAreaExpanded = false;
29
- this.mainChartTypes = ['Column', 'Area', 'Bar', 'Line', 'Scatter', 'Pie'];
30
- this.images = charts;
31
- }
32
- ngAfterViewInit() {
33
- this.contentObserver = new ResizeObserver((args) => this.chartDialogResizeNotify.next(args));
34
- this.contentObserver.observe(this.element.nativeElement);
35
- this.createChart(this.currentChartType);
36
- }
37
- toggleFullScreen() {
38
- this.fullScreen = !this.fullScreen;
39
- }
40
- hasAvailableChart(chartType) {
41
- return this.allCharts.some(c => c.includes(chartType));
42
- }
43
- createChart(chartType) {
44
- this.currentChartType = chartType;
45
- this.title = chartType.split(/(?=[A-Z])/).toString().replace(',', ' ');
46
- this.chartArea.clear();
47
- this.chartDirective.chartFactory(chartType, this.chartArea);
48
- }
49
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: IgxChartMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
50
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: IgxChartMenuComponent, selector: "igx-chart-menu", outputs: { onClose: "onClose" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "chartArea", first: true, predicate: ["chartArea"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"header\">\r\n <span class=\"header-text\">\r\n {{ title }} Chart\r\n </span>\r\n <span class=\"action-buttons-wrapper\">\r\n <button igxButton=\"icon\" (click)=\"toggleFullScreen()\">\r\n <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n </button>\r\n <button igxButton=\"icon\" (click)=\"onClose.emit()\">\r\n <igx-icon class=\"material\">close</igx-icon>\r\n </button>\r\n </span>\r\n</div>\r\n<div class=\"selection-area ig-scrollbar\">\r\n <igc-trial-watermark></igc-trial-watermark>\r\n <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\r\n <ng-template #chartArea ></ng-template>\r\n </div>\r\n <div>\r\n <button igxButton=\"icon\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\r\n <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\r\n </button>\r\n </div>\r\n <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\r\n <div class=\"config-area-header\">\r\n <span>Chart Types</span>\r\n </div>\r\n <igx-divider class=\"divider\"></igx-divider>\r\n <div class=\"wrapper\" *ngFor=\"let chartType of mainChartTypes\">\r\n <ng-container *ngIf=\"hasAvailableChart(chartType)\">\r\n <div>{{chartType | titlecase}} Chart</div>\r\n <div class=\"types-section\">\r\n <ng-container *ngFor=\"let chart of allCharts\">\r\n <span *ngIf=\"chart.startsWith(chartType)\" class=\"types-section-btn\" title=\"{{chart}}\"\r\n [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\r\n <div [innerHTML]=\"images[chart] | svg\">\r\n </div>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <igx-divider></igx-divider>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".ig-chart-legend-items-list{height:20%;display:inline-flex;flex-wrap:wrap;margin-bottom:1rem}igx-chart-menu{display:flex;flex-flow:column;overflow:hidden;background-color:#fff;transition:width .2s ease-in-out,height .3s ease-in-out}.header{height:10%;background-color:#e0e0e0;display:flex;font-size:1.8rem}.header .action-buttons-wrapper{margin-left:auto;margin-right:10px;align-self:center}.header .header-text{margin-right:auto;align-self:center;margin-left:3rem}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.selection-area,.selection-area .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}.selection-area .chart-area{margin-top:1rem;overflow-y:hidden;overflow-x:hidden;width:100%}.selection-area .chart-config-area{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.selection-area .chart-config-area.opened{width:25%;overflow-y:auto;overflow-x:hidden}.selection-area .chart-config-area.closed{width:0;transform:translate(100%)}.selection-area .chart-config-area .config-area-header{margin-bottom:3px;font-size:1rem;font-weight:700;text-align:center}.selection-area .chart-config-area .types-section-btn{width:40%;margin-right:5px;cursor:pointer}.selection-area .chart-config-area .types-section-btn.selected{opacity:.5}.selection-area .wrapper{padding:3px}.selection-area .wrapper .types-section{display:flex;flex-wrap:wrap}.selection-area .wrapper .igx-divider{margin:5px!important;background:black!important}\n"], dependencies: [{ kind: "directive", type: i1.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: i1.IgxDividerDirective, selector: "igx-divider", inputs: ["id", "role", "type", "middle", "vertical", "inset"] }, { kind: "component", type: i1.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.SvgPipe, name: "svg" }], encapsulation: i0.ViewEncapsulation.None }); }
51
- }
52
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
53
- type: Component,
54
- args: [{ selector: 'igx-chart-menu', encapsulation: ViewEncapsulation.None, template: "<div class=\"header\">\r\n <span class=\"header-text\">\r\n {{ title }} Chart\r\n </span>\r\n <span class=\"action-buttons-wrapper\">\r\n <button igxButton=\"icon\" (click)=\"toggleFullScreen()\">\r\n <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n </button>\r\n <button igxButton=\"icon\" (click)=\"onClose.emit()\">\r\n <igx-icon class=\"material\">close</igx-icon>\r\n </button>\r\n </span>\r\n</div>\r\n<div class=\"selection-area ig-scrollbar\">\r\n <igc-trial-watermark></igc-trial-watermark>\r\n <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\r\n <ng-template #chartArea ></ng-template>\r\n </div>\r\n <div>\r\n <button igxButton=\"icon\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\r\n <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\r\n </button>\r\n </div>\r\n <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\r\n <div class=\"config-area-header\">\r\n <span>Chart Types</span>\r\n </div>\r\n <igx-divider class=\"divider\"></igx-divider>\r\n <div class=\"wrapper\" *ngFor=\"let chartType of mainChartTypes\">\r\n <ng-container *ngIf=\"hasAvailableChart(chartType)\">\r\n <div>{{chartType | titlecase}} Chart</div>\r\n <div class=\"types-section\">\r\n <ng-container *ngFor=\"let chart of allCharts\">\r\n <span *ngIf=\"chart.startsWith(chartType)\" class=\"types-section-btn\" title=\"{{chart}}\"\r\n [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\r\n <div [innerHTML]=\"images[chart] | svg\">\r\n </div>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <igx-divider></igx-divider>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".ig-chart-legend-items-list{height:20%;display:inline-flex;flex-wrap:wrap;margin-bottom:1rem}igx-chart-menu{display:flex;flex-flow:column;overflow:hidden;background-color:#fff;transition:width .2s ease-in-out,height .3s ease-in-out}.header{height:10%;background-color:#e0e0e0;display:flex;font-size:1.8rem}.header .action-buttons-wrapper{margin-left:auto;margin-right:10px;align-self:center}.header .header-text{margin-right:auto;align-self:center;margin-left:3rem}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.selection-area,.selection-area .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}.selection-area .chart-area{margin-top:1rem;overflow-y:hidden;overflow-x:hidden;width:100%}.selection-area .chart-config-area{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.selection-area .chart-config-area.opened{width:25%;overflow-y:auto;overflow-x:hidden}.selection-area .chart-config-area.closed{width:0;transform:translate(100%)}.selection-area .chart-config-area .config-area-header{margin-bottom:3px;font-size:1rem;font-weight:700;text-align:center}.selection-area .chart-config-area .types-section-btn{width:40%;margin-right:5px;cursor:pointer}.selection-area .chart-config-area .types-section-btn.selected{opacity:.5}.selection-area .wrapper{padding:3px}.selection-area .wrapper .types-section{display:flex;flex-wrap:wrap}.selection-area .wrapper .igx-divider{margin:5px!important;background:black!important}\n"] }]
55
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { chartArea: [{
56
- type: ViewChild,
57
- args: ['chartArea', { read: ViewContainerRef }]
58
- }], onClose: [{
59
- type: Output
60
- }], width: [{
61
- type: HostBinding,
62
- args: ['style.width.px']
63
- }], height: [{
64
- type: HostBinding,
65
- args: ['style.height.px']
66
- }] } });
67
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2lnbml0ZXVpLWFuZ3VsYXItZXh0cmFzL3NyYy9saWIvY29udGV4dC1tZW51L2NoYXJ0LWRpYWxvZy9jaGFydC1kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaWduaXRldWktYW5ndWxhci1leHRyYXMvc3JjL2xpYi9jb250ZXh0LW1lbnUvY2hhcnQtZGlhbG9nL2NoYXJ0LWRpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUN4RCxNQUFNLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLGlCQUFpQixFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzdGLE9BQU8sS0FBSyxNQUFNLE1BQU0sd0JBQXdCLENBQUM7QUFDakQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7Ozs7O0FBUXpELE1BQU0sT0FBTyxxQkFBcUI7SUFPOUIsSUFDVyxLQUFLO1FBQ1osT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUM3RCxDQUFDO0lBQ0QsSUFBVyxLQUFLLENBQUMsS0FBSztRQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUN4QixDQUFDO0lBRUQsSUFDVyxNQUFNO1FBQ2IsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUMvRCxDQUFDO0lBQ0QsSUFBVyxNQUFNLENBQUMsS0FBSztRQUNuQixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUN6QixDQUFDO0lBZUQsWUFBb0IsT0FBd0I7UUFBeEIsWUFBTyxHQUFQLE9BQU8sQ0FBaUI7UUEvQnJDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBa0JsQyw0QkFBdUIsR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO1FBTXhDLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFDZixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLHlCQUFvQixHQUFHLEtBQUssQ0FBQztRQUM3QixtQkFBYyxHQUFHLENBQUMsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUt4RSxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztJQUN6QixDQUFDO0lBRU0sZUFBZTtRQUVsQixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksY0FBYyxDQUFHLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsdUJBQXVCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDL0YsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUV6RCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFTSxnQkFBZ0I7UUFDbkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDdkMsQ0FBQztJQUVNLGlCQUFpQixDQUFDLFNBQVM7UUFDOUIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUMzRCxDQUFDO0lBRU0sV0FBVyxDQUFDLFNBQVM7UUFDeEIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLFNBQVMsQ0FBQztRQUNsQyxJQUFJLENBQUMsS0FBSyxHQUFHLFNBQVMsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUMsUUFBUSxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUN2RSxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDaEUsQ0FBQzs4R0E3RFEscUJBQXFCO2tHQUFyQixxQkFBcUIsc1FBRUUsZ0JBQWdCLDZCQ2RwRCx3cEVBNkNBOzsyRkRqQ2EscUJBQXFCO2tCQU5qQyxTQUFTOytCQUNJLGdCQUFnQixpQkFHWCxpQkFBaUIsQ0FBQyxJQUFJO2lHQUlzQixTQUFTO3NCQUFuRSxTQUFTO3VCQUFDLFdBQVcsRUFBRSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRTtnQkFHM0MsT0FBTztzQkFEYixNQUFNO2dCQUlJLEtBQUs7c0JBRGYsV0FBVzt1QkFBQyxnQkFBZ0I7Z0JBU2xCLE1BQU07c0JBRGhCLFdBQVc7dUJBQUMsaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLFxyXG4gICAgT3V0cHV0LCBWaWV3Q2hpbGQsIFZpZXdDb250YWluZXJSZWYsIFZpZXdFbmNhcHN1bGF0aW9uLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0ICogYXMgY2hhcnRzIGZyb20gJy4uLy4uLy4uL2ltYWdlcy9jaGFydHMnO1xyXG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IFJlc2l6ZU9ic2VydmVyIH0gZnJvbSAnQGp1Z2dsZS9yZXNpemUtb2JzZXJ2ZXInO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2lneC1jaGFydC1tZW51JyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9jaGFydC1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vY2hhcnQtZGlhbG9nLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJZ3hDaGFydE1lbnVDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcclxuXHJcbiAgICBAVmlld0NoaWxkKCdjaGFydEFyZWEnLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYgfSkgcHVibGljIGNoYXJ0QXJlYTogVmlld0NvbnRhaW5lclJlZjtcclxuXHJcbiAgICBAT3V0cHV0KClcclxuICAgIHB1YmxpYyBvbkNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aC5weCcpXHJcbiAgICBwdWJsaWMgZ2V0IHdpZHRoKCkge1xyXG4gICAgICAgIHJldHVybiB0aGlzLmZ1bGxTY3JlZW4gPyB0aGlzLl93aWR0aCA6IDAuNyAqIHRoaXMuX3dpZHRoO1xyXG4gICAgfVxyXG4gICAgcHVibGljIHNldCB3aWR0aCh2YWx1ZSkge1xyXG4gICAgICAgIHRoaXMuX3dpZHRoID0gdmFsdWU7XHJcbiAgICB9XHJcblxyXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS5oZWlnaHQucHgnKVxyXG4gICAgcHVibGljIGdldCBoZWlnaHQoKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuZnVsbFNjcmVlbiA/IHRoaXMuX2hlaWdodCA6IDAuNyAqIHRoaXMuX2hlaWdodDtcclxuICAgIH1cclxuICAgIHB1YmxpYyBzZXQgaGVpZ2h0KHZhbHVlKSB7XHJcbiAgICAgICAgdGhpcy5faGVpZ2h0ID0gdmFsdWU7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGNoYXJ0RGlhbG9nUmVzaXplTm90aWZ5ID0gbmV3IFN1YmplY3QoKTtcclxuICAgIHByaXZhdGUgY29udGVudE9ic2VydmVyOiBSZXNpemVPYnNlcnZlcjtcclxuICAgIHB1YmxpYyBpbWFnZXM7XHJcbiAgICBwdWJsaWMgY2hhcnREaXJlY3RpdmU7XHJcbiAgICBwdWJsaWMgY3VycmVudENoYXJ0VHlwZTtcclxuICAgIHB1YmxpYyB0aXRsZTtcclxuICAgIHB1YmxpYyBhbGxDaGFydHMgPSBbXTtcclxuICAgIHB1YmxpYyBmdWxsU2NyZWVuID0gZmFsc2U7XHJcbiAgICBwdWJsaWMgaXNDb25maWdBcmVhRXhwYW5kZWQgPSBmYWxzZTtcclxuICAgIHB1YmxpYyBtYWluQ2hhcnRUeXBlcyA9IFsnQ29sdW1uJywgJ0FyZWEnLCAnQmFyJywgJ0xpbmUnLCAnU2NhdHRlcicsICdQaWUnXTtcclxuICAgIHByaXZhdGUgX3dpZHRoO1xyXG4gICAgcHJpdmF0ZSBfaGVpZ2h0O1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZjxhbnk+KSB7XHJcbiAgICAgICAgdGhpcy5pbWFnZXMgPSBjaGFydHM7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuXHJcbiAgICAgICAgdGhpcy5jb250ZW50T2JzZXJ2ZXIgPSBuZXcgUmVzaXplT2JzZXJ2ZXIgKCAoYXJncykgPT4gdGhpcy5jaGFydERpYWxvZ1Jlc2l6ZU5vdGlmeS5uZXh0KGFyZ3MpKTtcclxuICAgICAgICB0aGlzLmNvbnRlbnRPYnNlcnZlci5vYnNlcnZlKHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50KTtcclxuXHJcbiAgICAgICAgdGhpcy5jcmVhdGVDaGFydCh0aGlzLmN1cnJlbnRDaGFydFR5cGUpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyB0b2dnbGVGdWxsU2NyZWVuKCkge1xyXG4gICAgICAgIHRoaXMuZnVsbFNjcmVlbiA9ICF0aGlzLmZ1bGxTY3JlZW47XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGhhc0F2YWlsYWJsZUNoYXJ0KGNoYXJ0VHlwZSkge1xyXG4gICAgICAgIHJldHVybiB0aGlzLmFsbENoYXJ0cy5zb21lKGMgPT4gYy5pbmNsdWRlcyhjaGFydFR5cGUpKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgY3JlYXRlQ2hhcnQoY2hhcnRUeXBlKSB7XHJcbiAgICAgICAgdGhpcy5jdXJyZW50Q2hhcnRUeXBlID0gY2hhcnRUeXBlO1xyXG4gICAgICAgIHRoaXMudGl0bGUgPSBjaGFydFR5cGUuc3BsaXQoLyg/PVtBLVpdKS8pLnRvU3RyaW5nKCkucmVwbGFjZSgnLCcsICcgJyk7XHJcbiAgICAgICAgdGhpcy5jaGFydEFyZWEuY2xlYXIoKTtcclxuICAgICAgICB0aGlzLmNoYXJ0RGlyZWN0aXZlLmNoYXJ0RmFjdG9yeShjaGFydFR5cGUsIHRoaXMuY2hhcnRBcmVhKTtcclxuICAgIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiaGVhZGVyXCI+XHJcbiAgICA8c3BhbiBjbGFzcz1cImhlYWRlci10ZXh0XCI+XHJcbiAgICAgICAge3sgdGl0bGUgfX0gQ2hhcnRcclxuICAgIDwvc3Bhbj5cclxuICAgIDxzcGFuIGNsYXNzPVwiYWN0aW9uLWJ1dHRvbnMtd3JhcHBlclwiPlxyXG4gICAgICAgIDxidXR0b24gaWd4QnV0dG9uPVwiaWNvblwiIChjbGljayk9XCJ0b2dnbGVGdWxsU2NyZWVuKClcIj5cclxuICAgICAgICAgICAgPGlneC1pY29uIGNsYXNzPVwibWF0ZXJpYWxcIj5mdWxsc2NyZWVue3tmdWxsU2NyZWVuID8gJ19leGl0JyA6ICcnfX08L2lneC1pY29uPlxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgIDxidXR0b24gaWd4QnV0dG9uPVwiaWNvblwiIChjbGljayk9XCJvbkNsb3NlLmVtaXQoKVwiPlxyXG4gICAgICAgICAgICA8aWd4LWljb24gY2xhc3M9XCJtYXRlcmlhbFwiPmNsb3NlPC9pZ3gtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgIDwvc3Bhbj5cclxuPC9kaXY+XHJcbjxkaXYgY2xhc3M9XCJzZWxlY3Rpb24tYXJlYSBpZy1zY3JvbGxiYXJcIj5cclxuICAgIDxpZ2MtdHJpYWwtd2F0ZXJtYXJrPjwvaWdjLXRyaWFsLXdhdGVybWFyaz5cclxuICAgIDxkaXYgY2xhc3M9XCJjaGFydC1hcmVhXCIgW25nQ2xhc3NdPVwieydleHBhbmRlZCc6IGlzQ29uZmlnQXJlYUV4cGFuZGVkfVwiPlxyXG4gICAgICAgIDxuZy10ZW1wbGF0ZSAjY2hhcnRBcmVhID48L25nLXRlbXBsYXRlPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2PlxyXG4gICAgICAgIDxidXR0b24gaWd4QnV0dG9uPVwiaWNvblwiIGlneFJpcHBsZSAoY2xpY2spPVwiaXNDb25maWdBcmVhRXhwYW5kZWQgPSAhaXNDb25maWdBcmVhRXhwYW5kZWRcIj5cclxuICAgICAgICAgICAgPGlneC1pY29uIGZhbWlseT1cIm1hdGVyaWFsXCI+Y2hldnJvbl97eyBpc0NvbmZpZ0FyZWFFeHBhbmRlZCA/ICdsZWZ0JzogJ3JpZ2h0J319PC9pZ3gtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiAjY29uZmlnQXJlYSBbbmdDbGFzc109XCJ7J2NoYXJ0LWNvbmZpZy1hcmVhJzogdHJ1ZSwgJ29wZW5lZCc6ICFpc0NvbmZpZ0FyZWFFeHBhbmRlZCwgJ2Nsb3NlZCc6IGlzQ29uZmlnQXJlYUV4cGFuZGVkIH1cIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29uZmlnLWFyZWEtaGVhZGVyXCI+XHJcbiAgICAgICAgICAgIDxzcGFuPkNoYXJ0IFR5cGVzPC9zcGFuPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxpZ3gtZGl2aWRlciBjbGFzcz1cImRpdmlkZXJcIj48L2lneC1kaXZpZGVyPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3cmFwcGVyXCIgKm5nRm9yPVwibGV0IGNoYXJ0VHlwZSBvZiBtYWluQ2hhcnRUeXBlc1wiPlxyXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaGFzQXZhaWxhYmxlQ2hhcnQoY2hhcnRUeXBlKVwiPlxyXG4gICAgICAgICAgICAgICAgPGRpdj57e2NoYXJ0VHlwZSB8IHRpdGxlY2FzZX19IENoYXJ0PC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwidHlwZXMtc2VjdGlvblwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGNoYXJ0IG9mIGFsbENoYXJ0c1wiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxzcGFuICpuZ0lmPVwiY2hhcnQuc3RhcnRzV2l0aChjaGFydFR5cGUpXCIgIGNsYXNzPVwidHlwZXMtc2VjdGlvbi1idG5cIiB0aXRsZT1cInt7Y2hhcnR9fVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJ7J3NlbGVjdGVkJzogY2hhcnQgPT09IGN1cnJlbnRDaGFydFR5cGV9XCIgKGNsaWNrKT1cImNyZWF0ZUNoYXJ0KGNoYXJ0KVwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2ICBbaW5uZXJIVE1MXT1cImltYWdlc1tjaGFydF0gfCBzdmdcIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8aWd4LWRpdmlkZXI+PC9pZ3gtZGl2aWRlcj5cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+XHJcbiJdfQ==
1
+ import { Component, EventEmitter, HostBinding, Output, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
2
+ import * as charts from '../../../images/charts';
3
+ import { Subject } from 'rxjs';
4
+ import { ResizeObserver } from '@juggle/resize-observer';
5
+ import * as i0 from "@angular/core";
6
+ import * as i1 from "igniteui-angular";
7
+ import * as i2 from "@angular/common";
8
+ import * as i3 from "../../pipes/svg.pipe";
9
+ export class IgxChartMenuComponent {
10
+ get width() {
11
+ return this.fullScreen ? this._width : 0.7 * this._width;
12
+ }
13
+ set width(value) {
14
+ this._width = value;
15
+ }
16
+ get height() {
17
+ return this.fullScreen ? this._height : 0.7 * this._height;
18
+ }
19
+ set height(value) {
20
+ this._height = value;
21
+ }
22
+ constructor(element) {
23
+ this.element = element;
24
+ this.onClose = new EventEmitter();
25
+ this.chartDialogResizeNotify = new Subject();
26
+ this.allCharts = [];
27
+ this.fullScreen = false;
28
+ this.isConfigAreaExpanded = false;
29
+ this.mainChartTypes = ['Column', 'Area', 'Bar', 'Line', 'Scatter', 'Pie'];
30
+ this.images = charts;
31
+ }
32
+ ngAfterViewInit() {
33
+ this.contentObserver = new ResizeObserver((args) => this.chartDialogResizeNotify.next(args));
34
+ this.contentObserver.observe(this.element.nativeElement);
35
+ this.createChart(this.currentChartType);
36
+ }
37
+ toggleFullScreen() {
38
+ this.fullScreen = !this.fullScreen;
39
+ }
40
+ hasAvailableChart(chartType) {
41
+ return this.allCharts.some(c => c.includes(chartType));
42
+ }
43
+ createChart(chartType) {
44
+ this.currentChartType = chartType;
45
+ this.title = chartType.split(/(?=[A-Z])/).toString().replace(',', ' ');
46
+ this.chartArea.clear();
47
+ this.chartDirective.chartFactory(chartType, this.chartArea);
48
+ }
49
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: IgxChartMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
50
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0", type: IgxChartMenuComponent, selector: "igx-chart-menu", outputs: { onClose: "onClose" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "chartArea", first: true, predicate: ["chartArea"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"header\">\r\n <span class=\"header-text\">\r\n {{ title }} Chart\r\n </span>\r\n <span class=\"action-buttons-wrapper\">\r\n <button igxButton=\"icon\" (click)=\"toggleFullScreen()\">\r\n <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n </button>\r\n <button igxButton=\"icon\" (click)=\"onClose.emit()\">\r\n <igx-icon class=\"material\">close</igx-icon>\r\n </button>\r\n </span>\r\n</div>\r\n<div class=\"selection-area ig-scrollbar\">\r\n <igc-trial-watermark></igc-trial-watermark>\r\n <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\r\n <ng-template #chartArea ></ng-template>\r\n </div>\r\n <div>\r\n <button igxButton=\"icon\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\r\n <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\r\n </button>\r\n </div>\r\n <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\r\n <div class=\"config-area-header\">\r\n <span>Chart Types</span>\r\n </div>\r\n <igx-divider class=\"divider\"></igx-divider>\r\n <div class=\"wrapper\" *ngFor=\"let chartType of mainChartTypes\">\r\n <ng-container *ngIf=\"hasAvailableChart(chartType)\">\r\n <div>{{chartType | titlecase}} Chart</div>\r\n <div class=\"types-section\">\r\n <ng-container *ngFor=\"let chart of allCharts\">\r\n <span *ngIf=\"chart.startsWith(chartType)\" class=\"types-section-btn\" title=\"{{chart}}\"\r\n [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\r\n <div [innerHTML]=\"images[chart] | svg\">\r\n </div>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <igx-divider></igx-divider>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".ig-chart-legend-items-list{height:20%;display:inline-flex;flex-wrap:wrap;margin-bottom:1rem}igx-chart-menu{display:flex;flex-flow:column;overflow:hidden;background-color:#fff;transition:width .2s ease-in-out,height .3s ease-in-out}.header{height:10%;background-color:#e0e0e0;display:flex;font-size:1.8rem}.header .action-buttons-wrapper{margin-left:auto;margin-right:10px;align-self:center}.header .header-text{margin-right:auto;align-self:center;margin-left:3rem}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.selection-area,.selection-area .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}.selection-area .chart-area{margin-top:1rem;overflow-y:hidden;overflow-x:hidden;width:100%}.selection-area .chart-config-area{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.selection-area .chart-config-area.opened{width:25%;overflow-y:auto;overflow-x:hidden}.selection-area .chart-config-area.closed{width:0;transform:translate(100%)}.selection-area .chart-config-area .config-area-header{margin-bottom:3px;font-size:1rem;font-weight:700;text-align:center}.selection-area .chart-config-area .types-section-btn{width:40%;margin-right:5px;cursor:pointer}.selection-area .chart-config-area .types-section-btn.selected{opacity:.5}.selection-area .wrapper{padding:3px}.selection-area .wrapper .types-section{display:flex;flex-wrap:wrap}.selection-area .wrapper .igx-divider{margin:5px!important;background:black!important}\n"], dependencies: [{ kind: "directive", type: i1.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: i1.IgxDividerDirective, selector: "igx-divider", inputs: ["id", "role", "type", "middle", "vertical", "inset"] }, { kind: "component", type: i1.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.SvgPipe, name: "svg" }], encapsulation: i0.ViewEncapsulation.None }); }
51
+ }
52
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: IgxChartMenuComponent, decorators: [{
53
+ type: Component,
54
+ args: [{ selector: 'igx-chart-menu', encapsulation: ViewEncapsulation.None, template: "<div class=\"header\">\r\n <span class=\"header-text\">\r\n {{ title }} Chart\r\n </span>\r\n <span class=\"action-buttons-wrapper\">\r\n <button igxButton=\"icon\" (click)=\"toggleFullScreen()\">\r\n <igx-icon class=\"material\">fullscreen{{fullScreen ? '_exit' : ''}}</igx-icon>\r\n </button>\r\n <button igxButton=\"icon\" (click)=\"onClose.emit()\">\r\n <igx-icon class=\"material\">close</igx-icon>\r\n </button>\r\n </span>\r\n</div>\r\n<div class=\"selection-area ig-scrollbar\">\r\n <igc-trial-watermark></igc-trial-watermark>\r\n <div class=\"chart-area\" [ngClass]=\"{'expanded': isConfigAreaExpanded}\">\r\n <ng-template #chartArea ></ng-template>\r\n </div>\r\n <div>\r\n <button igxButton=\"icon\" igxRipple (click)=\"isConfigAreaExpanded = !isConfigAreaExpanded\">\r\n <igx-icon family=\"material\">chevron_{{ isConfigAreaExpanded ? 'left': 'right'}}</igx-icon>\r\n </button>\r\n </div>\r\n <div #configArea [ngClass]=\"{'chart-config-area': true, 'opened': !isConfigAreaExpanded, 'closed': isConfigAreaExpanded }\">\r\n <div class=\"config-area-header\">\r\n <span>Chart Types</span>\r\n </div>\r\n <igx-divider class=\"divider\"></igx-divider>\r\n <div class=\"wrapper\" *ngFor=\"let chartType of mainChartTypes\">\r\n <ng-container *ngIf=\"hasAvailableChart(chartType)\">\r\n <div>{{chartType | titlecase}} Chart</div>\r\n <div class=\"types-section\">\r\n <ng-container *ngFor=\"let chart of allCharts\">\r\n <span *ngIf=\"chart.startsWith(chartType)\" class=\"types-section-btn\" title=\"{{chart}}\"\r\n [ngClass]=\"{'selected': chart === currentChartType}\" (click)=\"createChart(chart)\">\r\n <div [innerHTML]=\"images[chart] | svg\">\r\n </div>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <igx-divider></igx-divider>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".ig-chart-legend-items-list{height:20%;display:inline-flex;flex-wrap:wrap;margin-bottom:1rem}igx-chart-menu{display:flex;flex-flow:column;overflow:hidden;background-color:#fff;transition:width .2s ease-in-out,height .3s ease-in-out}.header{height:10%;background-color:#e0e0e0;display:flex;font-size:1.8rem}.header .action-buttons-wrapper{margin-left:auto;margin-right:10px;align-self:center}.header .header-text{margin-right:auto;align-self:center;margin-left:3rem}.selection-area{width:100%;height:90%;display:inline-flex;flex-flow:row}.selection-area,.selection-area .ig-scrollbar{--scrollbar-size: var(--ig-scrollbar-scrollbar-size, 8px);--thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));--track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)))}.selection-area .chart-area{margin-top:1rem;overflow-y:hidden;overflow-x:hidden;width:100%}.selection-area .chart-config-area{transition:all;transition-duration:.3s;transition-timing-function:ease-in-out}.selection-area .chart-config-area.opened{width:25%;overflow-y:auto;overflow-x:hidden}.selection-area .chart-config-area.closed{width:0;transform:translate(100%)}.selection-area .chart-config-area .config-area-header{margin-bottom:3px;font-size:1rem;font-weight:700;text-align:center}.selection-area .chart-config-area .types-section-btn{width:40%;margin-right:5px;cursor:pointer}.selection-area .chart-config-area .types-section-btn.selected{opacity:.5}.selection-area .wrapper{padding:3px}.selection-area .wrapper .types-section{display:flex;flex-wrap:wrap}.selection-area .wrapper .igx-divider{margin:5px!important;background:black!important}\n"] }]
55
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { chartArea: [{
56
+ type: ViewChild,
57
+ args: ['chartArea', { read: ViewContainerRef }]
58
+ }], onClose: [{
59
+ type: Output
60
+ }], width: [{
61
+ type: HostBinding,
62
+ args: ['style.width.px']
63
+ }], height: [{
64
+ type: HostBinding,
65
+ args: ['style.height.px']
66
+ }] } });
67
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2lnbml0ZXVpLWFuZ3VsYXItZXh0cmFzL3NyYy9saWIvY29udGV4dC1tZW51L2NoYXJ0LWRpYWxvZy9jaGFydC1kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaWduaXRldWktYW5ndWxhci1leHRyYXMvc3JjL2xpYi9jb250ZXh0LW1lbnUvY2hhcnQtZGlhbG9nL2NoYXJ0LWRpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUN4RCxNQUFNLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLGlCQUFpQixFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzdGLE9BQU8sS0FBSyxNQUFNLE1BQU0sd0JBQXdCLENBQUM7QUFDakQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7Ozs7O0FBUXpELE1BQU0sT0FBTyxxQkFBcUI7SUFPOUIsSUFDVyxLQUFLO1FBQ1osT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUM3RCxDQUFDO0lBQ0QsSUFBVyxLQUFLLENBQUMsS0FBSztRQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUN4QixDQUFDO0lBRUQsSUFDVyxNQUFNO1FBQ2IsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUMvRCxDQUFDO0lBQ0QsSUFBVyxNQUFNLENBQUMsS0FBSztRQUNuQixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUN6QixDQUFDO0lBZUQsWUFBb0IsT0FBd0I7UUFBeEIsWUFBTyxHQUFQLE9BQU8sQ0FBaUI7UUEvQnJDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBa0JsQyw0QkFBdUIsR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO1FBTXhDLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFDZixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLHlCQUFvQixHQUFHLEtBQUssQ0FBQztRQUM3QixtQkFBYyxHQUFHLENBQUMsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUt4RSxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztJQUN6QixDQUFDO0lBRU0sZUFBZTtRQUVsQixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksY0FBYyxDQUFHLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsdUJBQXVCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDL0YsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUV6RCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFTSxnQkFBZ0I7UUFDbkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDdkMsQ0FBQztJQUVNLGlCQUFpQixDQUFDLFNBQVM7UUFDOUIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUMzRCxDQUFDO0lBRU0sV0FBVyxDQUFDLFNBQVM7UUFDeEIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLFNBQVMsQ0FBQztRQUNsQyxJQUFJLENBQUMsS0FBSyxHQUFHLFNBQVMsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUMsUUFBUSxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUN2RSxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDaEUsQ0FBQzs4R0E3RFEscUJBQXFCO2tHQUFyQixxQkFBcUIsc1FBRUUsZ0JBQWdCLDZCQ2RwRCx3cEVBNkNBOzsyRkRqQ2EscUJBQXFCO2tCQU5qQyxTQUFTOytCQUNJLGdCQUFnQixpQkFHWCxpQkFBaUIsQ0FBQyxJQUFJOytFQUlzQixTQUFTO3NCQUFuRSxTQUFTO3VCQUFDLFdBQVcsRUFBRSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRTtnQkFHM0MsT0FBTztzQkFEYixNQUFNO2dCQUlJLEtBQUs7c0JBRGYsV0FBVzt1QkFBQyxnQkFBZ0I7Z0JBU2xCLE1BQU07c0JBRGhCLFdBQVc7dUJBQUMsaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLFxyXG4gICAgT3V0cHV0LCBWaWV3Q2hpbGQsIFZpZXdDb250YWluZXJSZWYsIFZpZXdFbmNhcHN1bGF0aW9uLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0ICogYXMgY2hhcnRzIGZyb20gJy4uLy4uLy4uL2ltYWdlcy9jaGFydHMnO1xyXG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IFJlc2l6ZU9ic2VydmVyIH0gZnJvbSAnQGp1Z2dsZS9yZXNpemUtb2JzZXJ2ZXInO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2lneC1jaGFydC1tZW51JyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9jaGFydC1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vY2hhcnQtZGlhbG9nLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJZ3hDaGFydE1lbnVDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcclxuXHJcbiAgICBAVmlld0NoaWxkKCdjaGFydEFyZWEnLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYgfSkgcHVibGljIGNoYXJ0QXJlYTogVmlld0NvbnRhaW5lclJlZjtcclxuXHJcbiAgICBAT3V0cHV0KClcclxuICAgIHB1YmxpYyBvbkNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aC5weCcpXHJcbiAgICBwdWJsaWMgZ2V0IHdpZHRoKCkge1xyXG4gICAgICAgIHJldHVybiB0aGlzLmZ1bGxTY3JlZW4gPyB0aGlzLl93aWR0aCA6IDAuNyAqIHRoaXMuX3dpZHRoO1xyXG4gICAgfVxyXG4gICAgcHVibGljIHNldCB3aWR0aCh2YWx1ZSkge1xyXG4gICAgICAgIHRoaXMuX3dpZHRoID0gdmFsdWU7XHJcbiAgICB9XHJcblxyXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS5oZWlnaHQucHgnKVxyXG4gICAgcHVibGljIGdldCBoZWlnaHQoKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuZnVsbFNjcmVlbiA/IHRoaXMuX2hlaWdodCA6IDAuNyAqIHRoaXMuX2hlaWdodDtcclxuICAgIH1cclxuICAgIHB1YmxpYyBzZXQgaGVpZ2h0KHZhbHVlKSB7XHJcbiAgICAgICAgdGhpcy5faGVpZ2h0ID0gdmFsdWU7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGNoYXJ0RGlhbG9nUmVzaXplTm90aWZ5ID0gbmV3IFN1YmplY3QoKTtcclxuICAgIHByaXZhdGUgY29udGVudE9ic2VydmVyOiBSZXNpemVPYnNlcnZlcjtcclxuICAgIHB1YmxpYyBpbWFnZXM7XHJcbiAgICBwdWJsaWMgY2hhcnREaXJlY3RpdmU7XHJcbiAgICBwdWJsaWMgY3VycmVudENoYXJ0VHlwZTtcclxuICAgIHB1YmxpYyB0aXRsZTtcclxuICAgIHB1YmxpYyBhbGxDaGFydHMgPSBbXTtcclxuICAgIHB1YmxpYyBmdWxsU2NyZWVuID0gZmFsc2U7XHJcbiAgICBwdWJsaWMgaXNDb25maWdBcmVhRXhwYW5kZWQgPSBmYWxzZTtcclxuICAgIHB1YmxpYyBtYWluQ2hhcnRUeXBlcyA9IFsnQ29sdW1uJywgJ0FyZWEnLCAnQmFyJywgJ0xpbmUnLCAnU2NhdHRlcicsICdQaWUnXTtcclxuICAgIHByaXZhdGUgX3dpZHRoO1xyXG4gICAgcHJpdmF0ZSBfaGVpZ2h0O1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZjxhbnk+KSB7XHJcbiAgICAgICAgdGhpcy5pbWFnZXMgPSBjaGFydHM7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuXHJcbiAgICAgICAgdGhpcy5jb250ZW50T2JzZXJ2ZXIgPSBuZXcgUmVzaXplT2JzZXJ2ZXIgKCAoYXJncykgPT4gdGhpcy5jaGFydERpYWxvZ1Jlc2l6ZU5vdGlmeS5uZXh0KGFyZ3MpKTtcclxuICAgICAgICB0aGlzLmNvbnRlbnRPYnNlcnZlci5vYnNlcnZlKHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50KTtcclxuXHJcbiAgICAgICAgdGhpcy5jcmVhdGVDaGFydCh0aGlzLmN1cnJlbnRDaGFydFR5cGUpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyB0b2dnbGVGdWxsU2NyZWVuKCkge1xyXG4gICAgICAgIHRoaXMuZnVsbFNjcmVlbiA9ICF0aGlzLmZ1bGxTY3JlZW47XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGhhc0F2YWlsYWJsZUNoYXJ0KGNoYXJ0VHlwZSkge1xyXG4gICAgICAgIHJldHVybiB0aGlzLmFsbENoYXJ0cy5zb21lKGMgPT4gYy5pbmNsdWRlcyhjaGFydFR5cGUpKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgY3JlYXRlQ2hhcnQoY2hhcnRUeXBlKSB7XHJcbiAgICAgICAgdGhpcy5jdXJyZW50Q2hhcnRUeXBlID0gY2hhcnRUeXBlO1xyXG4gICAgICAgIHRoaXMudGl0bGUgPSBjaGFydFR5cGUuc3BsaXQoLyg/PVtBLVpdKS8pLnRvU3RyaW5nKCkucmVwbGFjZSgnLCcsICcgJyk7XHJcbiAgICAgICAgdGhpcy5jaGFydEFyZWEuY2xlYXIoKTtcclxuICAgICAgICB0aGlzLmNoYXJ0RGlyZWN0aXZlLmNoYXJ0RmFjdG9yeShjaGFydFR5cGUsIHRoaXMuY2hhcnRBcmVhKTtcclxuICAgIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiaGVhZGVyXCI+XHJcbiAgICA8c3BhbiBjbGFzcz1cImhlYWRlci10ZXh0XCI+XHJcbiAgICAgICAge3sgdGl0bGUgfX0gQ2hhcnRcclxuICAgIDwvc3Bhbj5cclxuICAgIDxzcGFuIGNsYXNzPVwiYWN0aW9uLWJ1dHRvbnMtd3JhcHBlclwiPlxyXG4gICAgICAgIDxidXR0b24gaWd4QnV0dG9uPVwiaWNvblwiIChjbGljayk9XCJ0b2dnbGVGdWxsU2NyZWVuKClcIj5cclxuICAgICAgICAgICAgPGlneC1pY29uIGNsYXNzPVwibWF0ZXJpYWxcIj5mdWxsc2NyZWVue3tmdWxsU2NyZWVuID8gJ19leGl0JyA6ICcnfX08L2lneC1pY29uPlxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgIDxidXR0b24gaWd4QnV0dG9uPVwiaWNvblwiIChjbGljayk9XCJvbkNsb3NlLmVtaXQoKVwiPlxyXG4gICAgICAgICAgICA8aWd4LWljb24gY2xhc3M9XCJtYXRlcmlhbFwiPmNsb3NlPC9pZ3gtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgIDwvc3Bhbj5cclxuPC9kaXY+XHJcbjxkaXYgY2xhc3M9XCJzZWxlY3Rpb24tYXJlYSBpZy1zY3JvbGxiYXJcIj5cclxuICAgIDxpZ2MtdHJpYWwtd2F0ZXJtYXJrPjwvaWdjLXRyaWFsLXdhdGVybWFyaz5cclxuICAgIDxkaXYgY2xhc3M9XCJjaGFydC1hcmVhXCIgW25nQ2xhc3NdPVwieydleHBhbmRlZCc6IGlzQ29uZmlnQXJlYUV4cGFuZGVkfVwiPlxyXG4gICAgICAgIDxuZy10ZW1wbGF0ZSAjY2hhcnRBcmVhID48L25nLXRlbXBsYXRlPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2PlxyXG4gICAgICAgIDxidXR0b24gaWd4QnV0dG9uPVwiaWNvblwiIGlneFJpcHBsZSAoY2xpY2spPVwiaXNDb25maWdBcmVhRXhwYW5kZWQgPSAhaXNDb25maWdBcmVhRXhwYW5kZWRcIj5cclxuICAgICAgICAgICAgPGlneC1pY29uIGZhbWlseT1cIm1hdGVyaWFsXCI+Y2hldnJvbl97eyBpc0NvbmZpZ0FyZWFFeHBhbmRlZCA/ICdsZWZ0JzogJ3JpZ2h0J319PC9pZ3gtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiAjY29uZmlnQXJlYSBbbmdDbGFzc109XCJ7J2NoYXJ0LWNvbmZpZy1hcmVhJzogdHJ1ZSwgJ29wZW5lZCc6ICFpc0NvbmZpZ0FyZWFFeHBhbmRlZCwgJ2Nsb3NlZCc6IGlzQ29uZmlnQXJlYUV4cGFuZGVkIH1cIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29uZmlnLWFyZWEtaGVhZGVyXCI+XHJcbiAgICAgICAgICAgIDxzcGFuPkNoYXJ0IFR5cGVzPC9zcGFuPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxpZ3gtZGl2aWRlciBjbGFzcz1cImRpdmlkZXJcIj48L2lneC1kaXZpZGVyPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3cmFwcGVyXCIgKm5nRm9yPVwibGV0IGNoYXJ0VHlwZSBvZiBtYWluQ2hhcnRUeXBlc1wiPlxyXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaGFzQXZhaWxhYmxlQ2hhcnQoY2hhcnRUeXBlKVwiPlxyXG4gICAgICAgICAgICAgICAgPGRpdj57e2NoYXJ0VHlwZSB8IHRpdGxlY2FzZX19IENoYXJ0PC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwidHlwZXMtc2VjdGlvblwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGNoYXJ0IG9mIGFsbENoYXJ0c1wiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxzcGFuICpuZ0lmPVwiY2hhcnQuc3RhcnRzV2l0aChjaGFydFR5cGUpXCIgIGNsYXNzPVwidHlwZXMtc2VjdGlvbi1idG5cIiB0aXRsZT1cInt7Y2hhcnR9fVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJ7J3NlbGVjdGVkJzogY2hhcnQgPT09IGN1cnJlbnRDaGFydFR5cGV9XCIgKGNsaWNrKT1cImNyZWF0ZUNoYXJ0KGNoYXJ0KVwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2ICBbaW5uZXJIVE1MXT1cImltYWdlc1tjaGFydF0gfCBzdmdcIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8aWd4LWRpdmlkZXI+PC9pZ3gtZGl2aWRlcj5cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+XHJcbiJdfQ==