@progress/kendo-angular-chart-wizard 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/property-pane/chart-tab.component.mjs

@@ -1,260 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
-import { chartBarClusteredIcon, chartBarStacked100Icon, chartBarStackedIcon, chartColumnClusteredIcon, chartColumnStacked100Icon, chartColumnStackedIcon, chartLineIcon, chartLineStacked100Icon, chartLineStackedIcon, chartPieIcon, chartScatterIcon, exportIcon } from '@progress/kendo-svg-icons';
-import { StateService } from '../state.service';
-import { ExpansionPanelComponent } from '@progress/kendo-angular-layout';
-import { ChartWizardSeriesTypeButtonComponent } from '../series-type-button.component';
-import { ChartWizardLocalizationService } from '../localization/chartwizard-localization.service';
-import * as i0 from "@angular/core";
-import * as i1 from "../state.service";
-import * as i2 from "../localization/chartwizard-localization.service";
-/**
- * @hidden
- */
-export 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: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, deps: [{ token: i1.StateService }, { token: i0.ChangeDetectorRef }, { token: i2.ChartWizardLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "18.2.14", 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: () => [{ type: i1.StateService }, { type: i0.ChangeDetectorRef }, { type: i2.ChartWizardLocalizationService }] });

package/esm2022/property-pane/data-tab.component.mjs

@@ -1,270 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
-import { StateService } from '../state.service';
-import { ActionTypes, isCategorical, updateState } from '../chart-wizard-state';
-import { FormBuilder } from '@angular/forms';
-import { CellTemplateDirective, ColumnComponent, CommandColumnComponent, DataBindingDirective, GridComponent, GridToolbarFocusableDirective, ReactiveEditingDirective, RemoveCommandDirective, RowReorderColumnComponent, ToolbarTemplateDirective } from '@progress/kendo-angular-grid';
-import { plusIcon, trashIcon } from '@progress/kendo-svg-icons';
-import { ExpansionPanelComponent } from '@progress/kendo-angular-layout';
-import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { ChartWizardLocalizationService } from '../localization/chartwizard-localization.service';
-import * as i0 from "@angular/core";
-import * as i1 from "../state.service";
-import * as i2 from "@angular/forms";
-import * as i3 from "../localization/chartwizard-localization.service";
-/**
- * @hidden
- */
-export 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: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: i1.StateService }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i3.ChartWizardLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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>
-            @if (isCategorical(stateService.state.seriesType)) {
-              <fieldset class="k-form-fieldset">
-                <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>
-            }
-            @if (stateService.state.seriesType === 'pie') {
-              <fieldset
-                class="k-form-fieldset"
-                >
-                <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: "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: "18.2.14", 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>
-            @if (isCategorical(stateService.state.seriesType)) {
-              <fieldset class="k-form-fieldset">
-                <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>
-            }
-            @if (stateService.state.seriesType === 'pie') {
-              <fieldset
-                class="k-form-fieldset"
-                >
-                <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,
-                        GridComponent,
-                        ReactiveEditingDirective,
-                        DataBindingDirective,
-                        ToolbarTemplateDirective,
-                        ButtonComponent,
-                        RowReorderColumnComponent,
-                        ColumnComponent,
-                        CommandColumnComponent,
-                        CellTemplateDirective,
-                        GridToolbarFocusableDirective,
-                        RemoveCommandDirective
-                    ]
-                }]
-        }], ctorParameters: () => [{ type: i1.StateService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i3.ChartWizardLocalizationService }], propDecorators: { grid: [{
-                type: ViewChild,
-                args: [GridComponent]
-            }] } });