@progress/kendo-angular-chart-wizard
Version:
Kendo UI Angular Chart Wizard component
944 lines (933 loc) • 234 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import * as i0 from '@angular/core';
import { Injectable, Inject, Optional, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, EventEmitter, Output, HostBinding, Directive, forwardRef, HostListener, NgModule } from '@angular/core';
import { getLicenseMessage, shouldShowValidationUI, isPresent, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
import * as i1 from '@progress/kendo-angular-l10n';
import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
import { validatePackage } from '@progress/kendo-licensing';
import { Subscription } from 'rxjs';
import { ChartWizardCommon } from '@progress/kendo-charts';
import { trashIcon, plusIcon, exportIcon, chartBarClusteredIcon, chartBarStackedIcon, chartBarStacked100Icon, chartPieIcon, chartColumnClusteredIcon, chartColumnStackedIcon, chartColumnStacked100Icon, chartLineIcon, chartLineStackedIcon, chartLineStacked100Icon, chartScatterIcon, filePdfIcon, fileIcon, fileImageIcon } from '@progress/kendo-svg-icons';
import { ChartComponent, TitleComponent, SubtitleComponent, ChartAreaComponent, CategoryAxisComponent, CategoryAxisItemComponent, ValueAxisComponent, ValueAxisItemComponent, SeriesComponent, SeriesItemComponent, LegendComponent, ThemeService } from '@progress/kendo-angular-charts';
import { saveAs } from '@progress/kendo-file-saver';
import { exportPDF } from '@progress/kendo-drawing';
import * as i2 from '@angular/forms';
import * as i1$1 from '@progress/kendo-angular-grid';
import { GridComponent, ReactiveEditingDirective, DataBindingDirective, ToolbarTemplateDirective, RowReorderColumnComponent, ColumnComponent, CommandColumnComponent, CellTemplateDirective, GridToolbarFocusableDirective, RemoveCommandDirective } from '@progress/kendo-angular-grid';
import { NgIf, NgFor } from '@angular/common';
import { ExpansionPanelComponent, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective } from '@progress/kendo-angular-layout';
import { DropDownListComponent, ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
import { ButtonComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
import { SVGIconComponent, IconsService } from '@progress/kendo-angular-icons';
import { WindowComponent, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
import { NumericTextBoxComponent, ColorPickerComponent, TextBoxComponent, CheckBoxComponent, SwitchComponent } from '@progress/kendo-angular-inputs';
import { LabelComponent } from '@progress/kendo-angular-label';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { PopupService } from '@progress/kendo-angular-popup';
import { getter } from '@progress/kendo-common';
/**
* @hidden
*/
const packageMetadata = {
name: '@progress/kendo-angular-chart-wizard',
productName: 'Kendo UI for Angular',
productCode: 'KENDOUIANGULAR',
productCodes: ['KENDOUIANGULAR'],
publishDate: 1761290565,
version: '20.1.1',
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
};
/**
* @hidden
*/
const fontSizes = ChartWizardCommon.fontSizes;
/**
* @hidden
*/
const fontNames = ChartWizardCommon.fontNames;
/**
* @hidden
*/
const createState = ChartWizardCommon.createState;
/**
* @hidden
*/
const updateState = ChartWizardCommon.updateState;
/**
* @hidden
*/
const mergeStates = ChartWizardCommon.mergeStates;
/**
* @hidden
*/
const isCategorical = ChartWizardCommon.isCategorical;
/**
* @hidden
*/
const parseFont = ChartWizardCommon.parseFont;
/**
* @hidden
*/
const ActionTypes = ChartWizardCommon.ActionTypes;
/**
* @hidden
*/
const rotations = [
{ text: 'Auto', value: 'auto' },
{ text: '0°', value: 0 },
{ text: '45°', value: 45 },
{ text: '90°', value: 90 },
{ text: '135°', value: 135 },
{ text: '180°', value: 180 }
];
/**
* @hidden
*/
const positions = [
{ text: 'Top', value: 'top' },
{ text: 'Bottom', value: 'bottom' },
{ text: 'Left', value: 'left' },
{ text: 'Right', value: 'right' }
];
/**
* @hidden
*/
const defaultAllSeriesItem = { name: 'All Series' };
/**
* @hidden
*/
const defaultFormat = {
value: '',
text: 'Text'
};
/**
* @hidden
*/
const labelFormats = [
defaultFormat,
{ value: 'n0', text: 'Number' },
{ value: 'c0', text: 'Currency' },
{ value: 'p0', text: 'Percent' }
];
/**
* @hidden
*/
class StateService {
state = {
categoryAxis: [],
valueAxis: [],
series: [],
initialSeries: [],
columns: [],
data: [],
area: { margin: { top: 0, right: 0, bottom: 0, left: 0 } },
seriesType: 'bar'
};
seriesType = 'bar';
currentTitle = 'Chart Title';
currentSeries = defaultAllSeriesItem;
data = [];
deletedSeries = [];
direction = 'ltr';
windowSize = { width: 700, height: 550 };
splitterPaneSize = '300px';
dataTab;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StateService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StateService, decorators: [{
type: Injectable
}] });
/**
* @hidden
*/
class ChartWizardLocalizationService extends LocalizationService {
constructor(prefix, messageService, _rtl) {
super(prefix, messageService, _rtl);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardLocalizationService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardLocalizationService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [L10N_PREFIX]
}] }, { type: i1.MessageService, decorators: [{
type: Optional
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [RTL]
}] }]; } });
/**
* @hidden
*/
class ChartWizardPropertyPaneDataTabComponent {
stateService;
formBuilder;
cdr;
renderer;
localization;
categoryAxisX = ActionTypes.categoryAxisX;
valueAxisY = ActionTypes.valueAxisY;
trashIcon = trashIcon;
plusIcon = plusIcon;
isCategorical = isCategorical;
grid;
constructor(stateService, formBuilder, cdr, renderer, localization) {
this.stateService = stateService;
this.formBuilder = formBuilder;
this.cdr = cdr;
this.renderer = renderer;
this.localization = localization;
this.formGroup = this.formBuilder.group({
name: null,
});
}
ngAfterViewInit() {
if (this.grid) {
const gridHeader = this.grid.wrapper.nativeElement.querySelector('.k-grid .k-grid-header');
const gridContent = this.grid.wrapper.nativeElement.querySelector('.k-grid .k-grid-content');
this.renderer.setStyle(gridHeader, 'display', 'none');
this.renderer.setStyle(gridContent, 'overflow', 'auto');
}
}
updateState(action, value) {
this.stateService.state = updateState(this.stateService.state, action, value);
}
formGroup;
createFormGroup(args) {
const item = args.isNew ? {} : args.dataItem;
this.formGroup = this.formBuilder.group({
name: item.name,
});
return this.formGroup;
}
addData() {
this.stateService.state.series.push(this.stateService.deletedSeries[0]);
this.stateService.deletedSeries.shift();
this.updateState(ActionTypes.seriesChange, this.stateService.state.series);
}
removeData(event) {
this.stateService.deletedSeries.push(event.dataItem);
this.updateState(ActionTypes.seriesChange, event.sender.data.data);
}
onRowReorder(grid) {
this.updateState(ActionTypes.seriesChange, grid.data.data);
}
isDisabled(grid) {
return grid.data.data.length === this.stateService.state.initialSeries.length;
}
detectChanges() {
this.cdr.detectChanges();
}
messageFor(key) {
return this.localization.get(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: StateService }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: ChartWizardLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-data-tab", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: `
<kendo-expansionpanel [title]="messageFor('configuration')" [expanded]="true">
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">
{{ stateService.state.seriesType === 'scatter' ? messageFor('configurationXAxis') : messageFor('configurationCategoryAxis') }}
</legend>
<kendo-dropdownlist
[data]="stateService.state.columns"
[value]="stateService.state.categoryField"
(valueChange)="updateState(categoryAxisX, $event)"
fillMode="outline"
rounded="medium"
size="medium"
>
</kendo-dropdownlist>
</fieldset>
<fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.state.seriesType)">
<legend class="k-form-legend">{{ messageFor('configurationSeries') }}</legend>
<kendo-grid
#grid
[kendoGridReactiveEditing]="createFormGroup"
[kendoGridBinding]="stateService.state.series"
[rowReorderable]="true"
(rowReorder)="onRowReorder(grid)"
(remove)="removeData($event)"
>
<ng-template kendoGridToolbarTemplate>
<button
kendoButton
type="button"
[svgIcon]="plusIcon"
fillMode="flat"
rounded="medium"
[disabled]="isDisabled(grid)"
(click)="addData()"
>
{{ messageFor('configurationSeriesAdd') }}
</button>
</ng-template>
<kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
<kendo-grid-column field="name" title="">
</kendo-grid-column>
<kendo-grid-command-column [width]="40">
<ng-template kendoGridCellTemplate>
<button
[svgIcon]="trashIcon"
kendoGridRemoveCommand
fillMode="flat"
rounded="medium"
[disabled]="stateService.state.series.length < 2"
></button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</fieldset>
<fieldset
class="k-form-fieldset"
*ngIf="stateService.state.seriesType === 'pie'"
>
<legend class="k-form-legend">
{{ messageFor('configurationValueAxis') }}
</legend>
<kendo-dropdownlist
[data]="stateService.state.columns"
[value]="stateService.state.valueField"
(valueChange)="updateState(valueAxisY, $event)"
fillMode="outline"
rounded="medium"
size="medium"
>
</kendo-dropdownlist>
</fieldset>
</form>
</kendo-expansionpanel>
`, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: " [kendoGridToolbarFocusable], [kendoGridAddCommand], [kendoGridCancelCommand], [kendoGridEditCommand], [kendoGridRemoveCommand], [kendoGridSaveCommand], [kendoGridExcelCommand], [kendoGridPDFCommand] " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-chartwizard-property-pane-data-tab',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<kendo-expansionpanel [title]="messageFor('configuration')" [expanded]="true">
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">
{{ stateService.state.seriesType === 'scatter' ? messageFor('configurationXAxis') : messageFor('configurationCategoryAxis') }}
</legend>
<kendo-dropdownlist
[data]="stateService.state.columns"
[value]="stateService.state.categoryField"
(valueChange)="updateState(categoryAxisX, $event)"
fillMode="outline"
rounded="medium"
size="medium"
>
</kendo-dropdownlist>
</fieldset>
<fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.state.seriesType)">
<legend class="k-form-legend">{{ messageFor('configurationSeries') }}</legend>
<kendo-grid
#grid
[kendoGridReactiveEditing]="createFormGroup"
[kendoGridBinding]="stateService.state.series"
[rowReorderable]="true"
(rowReorder)="onRowReorder(grid)"
(remove)="removeData($event)"
>
<ng-template kendoGridToolbarTemplate>
<button
kendoButton
type="button"
[svgIcon]="plusIcon"
fillMode="flat"
rounded="medium"
[disabled]="isDisabled(grid)"
(click)="addData()"
>
{{ messageFor('configurationSeriesAdd') }}
</button>
</ng-template>
<kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
<kendo-grid-column field="name" title="">
</kendo-grid-column>
<kendo-grid-command-column [width]="40">
<ng-template kendoGridCellTemplate>
<button
[svgIcon]="trashIcon"
kendoGridRemoveCommand
fillMode="flat"
rounded="medium"
[disabled]="stateService.state.series.length < 2"
></button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</fieldset>
<fieldset
class="k-form-fieldset"
*ngIf="stateService.state.seriesType === 'pie'"
>
<legend class="k-form-legend">
{{ messageFor('configurationValueAxis') }}
</legend>
<kendo-dropdownlist
[data]="stateService.state.columns"
[value]="stateService.state.valueField"
(valueChange)="updateState(valueAxisY, $event)"
fillMode="outline"
rounded="medium"
size="medium"
>
</kendo-dropdownlist>
</fieldset>
</form>
</kendo-expansionpanel>
`,
standalone: true,
imports: [
ExpansionPanelComponent,
DropDownListComponent,
NgIf,
GridComponent,
ReactiveEditingDirective,
DataBindingDirective,
ToolbarTemplateDirective,
ButtonComponent,
RowReorderColumnComponent,
ColumnComponent,
CommandColumnComponent,
CellTemplateDirective,
GridToolbarFocusableDirective,
RemoveCommandDirective
]
}]
}], ctorParameters: function () { return [{ type: StateService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: ChartWizardLocalizationService }]; }, propDecorators: { grid: [{
type: ViewChild,
args: [GridComponent]
}] } });
/**
* @hidden
*/
class ChartWizardSeriesTypeButtonComponent {
stateService;
title;
chartTypeIcon;
stack = false;
seriesType;
constructor(stateService) {
this.stateService = stateService;
}
onSelect() {
this.stateService.seriesType = this.seriesType;
if (this.stateService.data.length > 0) {
this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
this.stateService.currentSeries = {};
if (this.stack) {
this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, this.stack);
}
}
this.stateService.dataTab.detectChanges();
}
isSelected() {
return (this.stateService.state.seriesType === this.seriesType &&
this.stateService.state.series[0]?.stack === this.stack);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, deps: [{ token: StateService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartWizardSeriesTypeButtonComponent, isStandalone: true, selector: "kendo-chartwizard-series-type-button", inputs: { title: "title", chartTypeIcon: "chartTypeIcon", stack: "stack", seriesType: "seriesType" }, ngImport: i0, template: `
<div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
<div class="k-icon-background-area">
<kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="primary"> </kendo-svgicon>
</div>
{{ title }}
</div>
`, isInline: true, dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-chartwizard-series-type-button',
template: `
<div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
<div class="k-icon-background-area">
<kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="primary"> </kendo-svgicon>
</div>
{{ title }}
</div>
`,
standalone: true,
imports: [SVGIconComponent]
}]
}], ctorParameters: function () { return [{ type: StateService }]; }, propDecorators: { title: [{
type: Input
}], chartTypeIcon: [{
type: Input
}], stack: [{
type: Input
}], seriesType: [{
type: Input
}] } });
/**
* @hidden
*/
class ChartWizardPropertyPaneChartTabComponent {
stateService;
cdr;
localization;
exportIcon = exportIcon;
chartBarClusteredIcon = chartBarClusteredIcon;
chartBarStackedIcon = chartBarStackedIcon;
chartBarStacked100Icon = chartBarStacked100Icon;
chartPieIcon = chartPieIcon;
chartColumnClusteredIcon = chartColumnClusteredIcon;
chartColumnStackedIcon = chartColumnStackedIcon;
chartColumnStacked100Icon = chartColumnStacked100Icon;
chartLineIcon = chartLineIcon;
chartLineStackedIcon = chartLineStackedIcon;
chartLineStacked100Icon = chartLineStacked100Icon;
chartScatterIcon = chartScatterIcon;
constructor(stateService, cdr, localization) {
this.stateService = stateService;
this.cdr = cdr;
this.localization = localization;
}
ngAfterViewChecked() {
this.localization.changes.subscribe(() => {
this.detectChanges();
});
}
ngOnDestroy() {
this.localization.changes.unsubscribe();
}
detectChanges() {
this.cdr.detectChanges();
}
messageFor(key) {
return this.localization.get(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, deps: [{ token: StateService }, { token: i0.ChangeDetectorRef }, { token: ChartWizardLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartWizardPropertyPaneChartTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-chart-tab", ngImport: i0, template: `
<kendo-expansionpanel [title]="messageFor('barChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('barChartBar')"
[chartTypeIcon]="chartBarClusteredIcon"
seriesType="bar"
[stack]="false"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('barChartStackedBar')"
[chartTypeIcon]="chartBarStackedIcon"
seriesType="bar"
[stack]="true"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('barChart100StackedBar')"
[chartTypeIcon]="chartBarStacked100Icon"
seriesType="bar"
[stack]="{ type: '100%' }"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
<kendo-expansionpanel [title]="messageFor('pieChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('pieChartPie')"
[chartTypeIcon]="chartPieIcon"
seriesType="pie"
[stack]="undefined"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
<kendo-expansionpanel [title]="messageFor('columnChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('columnChartColumn')"
[chartTypeIcon]="chartColumnClusteredIcon"
seriesType="column"
[stack]="false"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('columnChartStackedColumn')"
[chartTypeIcon]="chartColumnStackedIcon"
seriesType="column"
[stack]="true"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('columnChart100StackedColumn')"
[chartTypeIcon]="chartColumnStacked100Icon"
seriesType="column"
[stack]="{ type: '100%' }"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
<kendo-expansionpanel [title]="messageFor('lineChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('lineChartLine')"
[chartTypeIcon]="chartLineIcon"
seriesType="line"
[stack]="false"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('lineChartStackedLine')"
[chartTypeIcon]="chartLineStackedIcon"
seriesType="line"
[stack]="true"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('lineChart100StackedLine')"
[chartTypeIcon]="chartLineStacked100Icon"
seriesType="line"
[stack]="{ type: '100%' }"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
<kendo-expansionpanel [title]="messageFor('scatterChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('scatterChartScatter')"
[chartTypeIcon]="chartScatterIcon"
seriesType="scatter"
[stack]="false"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
`, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardSeriesTypeButtonComponent, selector: "kendo-chartwizard-series-type-button", inputs: ["title", "chartTypeIcon", "stack", "seriesType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-chartwizard-property-pane-chart-tab',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<kendo-expansionpanel [title]="messageFor('barChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('barChartBar')"
[chartTypeIcon]="chartBarClusteredIcon"
seriesType="bar"
[stack]="false"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('barChartStackedBar')"
[chartTypeIcon]="chartBarStackedIcon"
seriesType="bar"
[stack]="true"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('barChart100StackedBar')"
[chartTypeIcon]="chartBarStacked100Icon"
seriesType="bar"
[stack]="{ type: '100%' }"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
<kendo-expansionpanel [title]="messageFor('pieChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('pieChartPie')"
[chartTypeIcon]="chartPieIcon"
seriesType="pie"
[stack]="undefined"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
<kendo-expansionpanel [title]="messageFor('columnChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('columnChartColumn')"
[chartTypeIcon]="chartColumnClusteredIcon"
seriesType="column"
[stack]="false"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('columnChartStackedColumn')"
[chartTypeIcon]="chartColumnStackedIcon"
seriesType="column"
[stack]="true"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('columnChart100StackedColumn')"
[chartTypeIcon]="chartColumnStacked100Icon"
seriesType="column"
[stack]="{ type: '100%' }"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
<kendo-expansionpanel [title]="messageFor('lineChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('lineChartLine')"
[chartTypeIcon]="chartLineIcon"
seriesType="line"
[stack]="false"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('lineChartStackedLine')"
[chartTypeIcon]="chartLineStackedIcon"
seriesType="line"
[stack]="true"
>
</kendo-chartwizard-series-type-button>
<kendo-chartwizard-series-type-button
[title]="messageFor('lineChart100StackedLine')"
[chartTypeIcon]="chartLineStacked100Icon"
seriesType="line"
[stack]="{ type: '100%' }"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
<kendo-expansionpanel [title]="messageFor('scatterChart')" [expanded]="true">
<div class="k-chart-types-wrapper">
<kendo-chartwizard-series-type-button
[title]="messageFor('scatterChartScatter')"
[chartTypeIcon]="chartScatterIcon"
seriesType="scatter"
[stack]="false"
>
</kendo-chartwizard-series-type-button>
</div>
</kendo-expansionpanel>
`,
standalone: true,
imports: [ExpansionPanelComponent, ChartWizardSeriesTypeButtonComponent]
}]
}], ctorParameters: function () { return [{ type: StateService }, { type: i0.ChangeDetectorRef }, { type: ChartWizardLocalizationService }]; } });
/**
* @hidden
*/
class PreventableEvent {
prevented = false;
/**
* Prevents the default action for a specified event.
* In this way, the source component suppresses
* the built-in behavior that follows the event.
*/
preventDefault() {
this.prevented = true;
}
/**
* Returns `true` if the event was prevented
* by any of its subscribers.
*
* @returns `true` if the default action was prevented.
* Otherwise, returns `false`.
*/
isDefaultPrevented() {
return this.prevented;
}
}
/**
* Represents the arguments for the `export` event in the Chart Wizard.
*
* Use this event to customize the export process or prevent it.
*
* @example
* ```typescript
* exportEventHandler(event: ExportEvent): void {
* if (event.exportOptions.fileName === 'restricted') {
* event.preventDefault();
* }
* }
* ```
*/
class ExportEvent extends PreventableEvent {
/**
* Defines the export options for the Chart Wizard.
*/
exportOptions;
/**
* Provides the current `ChartComponent` instance to export.
*/
chart;
/**
* @hidden
*/
constructor(chart, exportOptions) {
super();
this.chart = chart;
this.exportOptions = exportOptions;
}
}
/**
* @hidden
*/
class ChartWizardPropertyPaneFormFieldComponent {
localization;
cdr;
currentState;
action;
class;
inputType;
text;
data;
placeholder;
colSpan = 1;
hasLabel = true;
isLabelInsideFormFieldWrap = false;
value;
disabled = false;
valueChange = new EventEmitter();
formField = true;
get isColSpan2() {
return this.colSpan === 2;
}
label;
numericTextBox;
colorPicker;
dropDownList;
textBox;
comboBox;
checkBox;
constructor(localization, cdr) {
this.localization = localization;
this.cdr = cdr;
}
ngAfterViewChecked() {
this.localization.changes.subscribe(() => {
this.cdr.detectChanges();
});
}
ngOnDestroy() {
this.localization.changes.unsubscribe();
}
ngAfterViewInit() {
if (this.hasLabel) {
this.label.for =
this.numericTextBox ||
this.colorPicker ||
this.dropDownList ||
this.textBox ||
this.comboBox ||
this.checkBox;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
<kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox'" class="k-form-label" [text]="text"></kendo-label>
<div class="k-form-field-wrap">
<kendo-label
*ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox'"
class="k-form-label"
[text]="text"
></kendo-label>
<kendo-numerictextbox
*ngIf="inputType === 'numeric'"
fillMode="outline"
rounded="medium"
[value]="value"
(valueChange)="valueChange.emit($event)"
[placeholder]="placeholder"
></kendo-numerictextbox>
<kendo-colorpicker
*ngIf="inputType === 'colorPicker'"
fillMode="outline"
rounded="medium"
[value]="value"
[disabled]="disabled"
(valueChange)="valueChange.emit($event)"
></kendo-colorpicker>
<kendo-dropdownlist
*ngIf="inputType === 'dropDownList'"
[data]="data"
textField="text"
valueField="value"
[valuePrimitive]="true"
fillMode="outline"
rounded="medium"
size="medium"
[value]="value"
(valueChange)="valueChange.emit($event)"
></kendo-dropdownlist>
<kendo-combobox
*ngIf="inputType === 'comboBox'"
[data]="data"
[value]="value"
textField="text"
valueField="value"
[valuePrimitive]="true"
fillMode="outline"
rounded="medium"
size="medium"
[placeholder]="placeholder"
(valueChange)="valueChange.emit($event)"
></kendo-combobox>
<kendo-textbox
*ngIf="inputType === 'text'"
fillMode="outline"
rounded="medium"
[placeholder]="placeholder"
[value]="value"
(valueChange)="valueChange.emit($event)"
></kendo-textbox>
<kendo-checkbox
*ngIf="inputType === 'checkbox'"
class="k-checkbox-md k-rounded-md"
[checkedState]="value"
(checkedStateChange)="valueChange.emit($event)"
></kendo-checkbox>
<kendo-label
*ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType === 'checkbox'"
class="k-checkbox-label"
[text]="text"
></kendo-label>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-chartwizard-property-pane-form-field',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox'" class="k-form-label" [text]="text"></kendo-label>
<div class="k-form-field-wrap">
<kendo-label
*ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox'"
class="k-form-label"
[text]="text"
></kendo-label>
<kendo-numerictextbox
*ngIf="inputType === 'numeric'"
fillMode="outline"
rounded="medium"
[value]="value"
(valueChange)="valueChange.emit($event)"
[placeholder]="placeholder"
></kendo-numerictextbox>
<kendo-colorpicker
*ngIf="inputType === 'colorPicker'"
fillMode="outline"
rounded="medium"
[value]="value"
[disabled]="disabled"
(valueChange)="valueChange.emit($event)"
></kendo-colorpicker>
<kendo-dropdownlist
*ngIf="inputType ===