@progress/kendo-angular-chart-wizard 16.9.0-develop.8 → 16.9.0

package/esm2020/chart-wizard.component.mjs

@@ -8,14 +8,13 @@ import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
 import { packageMetadata } from './package-metadata';
-import { ActionTypes, createState, mergeStates, updateState } from './chart-wizard-state';
+import { ActionTypes, createState, updateState, mergeStates } from './chart-wizard-state';
 import { exportIcon, fileIcon, fileImageIcon, filePdfIcon } from '@progress/kendo-svg-icons';
 import { StateService } from './state.service';
 import { ChartComponent } from '@progress/kendo-angular-charts';
 import { saveAs } from '@progress/kendo-file-saver';
 import { exportPDF } from '@progress/kendo-drawing';
-import { ChartWizardPropertyPaneDataTabComponent } from './property-pane/format-tab.component';
-import { ChartWizardPropertyPaneFormatTabComponent } from './property-pane/data-tab.component';
+import { ChartWizardPropertyPaneDataTabComponent } from './property-pane/data-tab.component';
 import { ChartWizardPropertyPaneChartTabComponent } from './property-pane/chart-tab.component';
 import { LegendComponent } from '@progress/kendo-angular-charts';
 import { YAxisItemComponent } from '@progress/kendo-angular-charts';
@@ -36,6 +35,8 @@ import { WindowComponent } from '@progress/kendo-angular-dialog';
 import { SplitterComponent, SplitterPaneComponent, TabContentDirective, TabStripComponent, TabStripTabComponent } from '@progress/kendo-angular-layout';
 import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { ExportEvent } from './events';
+import { defaultAllSeriesItem } from './common/models';
+import { ChartWizardPropertyPaneFormatTabComponent } from './property-pane/format-tab.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./state.service";
@@ -96,21 +97,22 @@ export class ChartWizardComponent {
         this.subscription.add(this.localization.changes.subscribe(({ rtl }) => {
             this.stateService.direction = rtl ? 'rtl' : 'ltr';
         }));
+        this.stateService.dataTab = this.dataTab;
     }
     ngOnChanges(changes) {
-        if (changes['data']) {
+        if (changes['data'] && changes['data'].currentValue?.length > 0) {
             const data = changes['data'].currentValue;
             const clonedData = structuredClone(data);
             this.stateService.data = clonedData;
-            this.stateService.state = createState(clonedData, this.stateService.seriesType);
+            this.stateService.state = createState(clonedData, this.stateService.state.seriesType);
         }
-        if (changes['defaultState']) {
+        if (changes['defaultState'] && this.data?.length > 0) {
             const defaultState = changes['defaultState'].currentValue;
             if (defaultState.seriesType) {
-                this.stateService.seriesType = defaultState.seriesType;
-                this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
+                this.stateService.state.seriesType = defaultState.seriesType;
+                this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.state.seriesType));
             }
-            this.stateService.currentSeries = {};
+            this.stateService.currentSeries = defaultAllSeriesItem;
             if (typeof defaultState.stack !== 'undefined') {
                 this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, defaultState.stack);
             }
@@ -164,7 +166,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useValue: 'kendo.chartwizard',
         },
         StateService
-    ], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }, { propertyName: "propertyPane", first: true, predicate: ChartWizardPropertyPaneChartTabComponent, descendants: true }], exportAs: ["kendoChartWizard"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }, { propertyName: "propertyPane", first: true, predicate: ChartWizardPropertyPaneChartTabComponent, descendants: true }, { propertyName: "dataTab", first: true, predicate: ChartWizardPropertyPaneDataTabComponent, descendants: true }], exportAs: ["kendoChartWizard"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoChartWizardLocalizedMessages
             i18n-sampleMessage="kendo.chartwizard.sampleMessage|Sample description"
@@ -191,8 +193,8 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                             Export
                         </kendo-dropdownbutton>
                     </div>
-                    <div class="k-preview-pane-content">
-                        <kendo-chart [transitions]="false">
+                    <div class="k-preview-pane-content" [style.height]="'calc(100% - 50px)'">
+                        <kendo-chart [transitions]="false" [style.width.%]="100" [style.height.%]="100">
                             <kendo-chart-title
                                 [text]="stateService.state.title?.text"
                                 [font]="stateService.state.title?.font"
@@ -258,40 +260,6 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
-                            <kendo-chart-x-axis>
-                                <kendo-chart-x-axis-item
-                                    *ngFor="let axis of stateService.state.categoryAxis"
-                                    [categories]="axis.categories"
-                                    [title]="{
-                                        text: axis.title?.text,
-                                        font: axis.title?.font,
-                                        color: axis.title?.color
-                                    }"
-                                    [labels]="{
-                                        rotation: axis.labels?.rotation,
-                                        font: axis.labels?.font,
-                                        color: axis.labels?.color
-                                    }"
-                                    [reverse]="axis.reverse"
-                                >
-                                </kendo-chart-x-axis-item>
-                            </kendo-chart-x-axis>
-                            <kendo-chart-y-axis>
-                                <kendo-chart-y-axis-item
-                                    *ngFor="let axis of stateService.state.valueAxis"
-                                    [title]="{
-                                        text: axis.title?.text,
-                                        font: axis.title?.font,
-                                        color: axis.title?.color
-                                    }"
-                                    [labels]="{
-                                        rotation: axis.labels?.rotation,
-                                        font: axis.labels?.font,
-                                        color: axis.labels?.color
-                                    }"
-                                >
-                                </kendo-chart-y-axis-item>
-                            </kendo-chart-y-axis>
                             <kendo-chart-legend
                                 [visible]="stateService.state.legend?.visible"
                                 [position]="stateService.state.legend?.position"
@@ -325,7 +293,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </kendo-splitter>
             <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
         </kendo-window>
-    `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "themeColor", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: XAxisComponent, selector: "kendo-chart-x-axis" }, { kind: "component", type: XAxisItemComponent, selector: "kendo-chart-x-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: YAxisComponent, selector: "kendo-chart-y-axis" }, { kind: "component", type: YAxisItemComponent, selector: "kendo-chart-y-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chartwizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chartwizard-property-pane-data-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chartwizard-property-pane-format-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "themeColor", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chartwizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chartwizard-property-pane-format-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chartwizard-property-pane-data-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardComponent, decorators: [{
             type: Component,
             args: [{
@@ -367,8 +335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             Export
                         </kendo-dropdownbutton>
                     </div>
-                    <div class="k-preview-pane-content">
-                        <kendo-chart [transitions]="false">
+                    <div class="k-preview-pane-content" [style.height]="'calc(100% - 50px)'">
+                        <kendo-chart [transitions]="false" [style.width.%]="100" [style.height.%]="100">
                             <kendo-chart-title
                                 [text]="stateService.state.title?.text"
                                 [font]="stateService.state.title?.font"
@@ -434,40 +402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
-                            <kendo-chart-x-axis>
-                                <kendo-chart-x-axis-item
-                                    *ngFor="let axis of stateService.state.categoryAxis"
-                                    [categories]="axis.categories"
-                                    [title]="{
-                                        text: axis.title?.text,
-                                        font: axis.title?.font,
-                                        color: axis.title?.color
-                                    }"
-                                    [labels]="{
-                                        rotation: axis.labels?.rotation,
-                                        font: axis.labels?.font,
-                                        color: axis.labels?.color
-                                    }"
-                                    [reverse]="axis.reverse"
-                                >
-                                </kendo-chart-x-axis-item>
-                            </kendo-chart-x-axis>
-                            <kendo-chart-y-axis>
-                                <kendo-chart-y-axis-item
-                                    *ngFor="let axis of stateService.state.valueAxis"
-                                    [title]="{
-                                        text: axis.title?.text,
-                                        font: axis.title?.font,
-                                        color: axis.title?.color
-                                    }"
-                                    [labels]="{
-                                        rotation: axis.labels?.rotation,
-                                        font: axis.labels?.font,
-                                        color: axis.labels?.color
-                                    }"
-                                >
-                                </kendo-chart-y-axis-item>
-                            </kendo-chart-y-axis>
                             <kendo-chart-legend
                                 [visible]="stateService.state.legend?.visible"
                                 [position]="stateService.state.legend?.position"
@@ -553,4 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], propertyPane: [{
                 type: ViewChild,
                 args: [ChartWizardPropertyPaneChartTabComponent]
+            }], dataTab: [{
+                type: ViewChild,
+                args: [ChartWizardPropertyPaneDataTabComponent]
             }] } });

package/esm2020/common/get-wizard-data-from-data-rows.mjs

@@ -2,26 +2,5 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-// TODO: Extract to kendo-charts
-import { getter } from "@progress/kendo-common";
-/**
- * Maps data rows to the Chart Wizard data format.
- *
- * @returns collection that can be used as Chart Wizard.
- */
-export function getWizardDataFromDataRows(dataRows) {
-    const result = [];
-    dataRows.forEach(item => {
-        const { dataItem, dataColumns } = item;
-        const row = [];
-        dataColumns.forEach(column => {
-            row.push({
-                field: column.title || column.field,
-                value: getter(column.field)(dataItem)
-            });
-        });
-        result.push(row);
-    });
-    return result;
-}
-// End: Extract to kendo-charts
+import { ChartWizardCommon } from '@progress/kendo-charts';
+export const getWizardDataFromDataRows = ChartWizardCommon.getWizardDataFromDataRows;

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-chart-wizard',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1724848963,
-    version: '16.9.0-develop.8',
+    publishDate: 1725979259,
+    version: '16.9.0',
     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',
 };

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

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+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';
@@ -18,13 +18,14 @@ import * as i2 from "@angular/forms";
 /**
  * @hidden
  */
-export class ChartWizardPropertyPaneFormatTabComponent {
-    constructor(stateService, formBuilder) {
+export class ChartWizardPropertyPaneDataTabComponent {
+    constructor(stateService, formBuilder, cdr, renderer) {
         this.stateService = stateService;
         this.formBuilder = formBuilder;
+        this.cdr = cdr;
+        this.renderer = renderer;
         this.categoryAxisX = ActionTypes.categoryAxisX;
         this.valueAxisY = ActionTypes.valueAxisY;
-        this.seriesChange = ActionTypes.seriesChange;
         this.trashIcon = trashIcon;
         this.plusIcon = plusIcon;
         this.isCategorical = isCategorical;
@@ -32,6 +33,14 @@ export class ChartWizardPropertyPaneFormatTabComponent {
             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);
     }
@@ -45,26 +54,29 @@ export class ChartWizardPropertyPaneFormatTabComponent {
     addData() {
         this.stateService.state.series.push(this.stateService.deletedSeries[0]);
         this.stateService.deletedSeries.shift();
-        this.updateState(this.seriesChange, this.stateService.state.series);
+        this.updateState(ActionTypes.seriesChange, this.stateService.state.series);
     }
     removeData(event) {
         this.stateService.deletedSeries.push(event.dataItem);
-        this.updateState(this.seriesChange, event.sender.data.data);
+        this.updateState(ActionTypes.seriesChange, event.sender.data.data);
     }
     onRowReorder(grid) {
-        this.updateState(this.seriesChange, grid.data.data);
+        this.updateState(ActionTypes.seriesChange, grid.data.data);
     }
     isDisabled(grid) {
         return grid.data.data.length === this.stateService.state.initialSeries.length;
     }
+    detectChanges() {
+        this.cdr.detectChanges();
+    }
 }
-ChartWizardPropertyPaneFormatTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: i1.StateService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-data-tab", ngImport: i0, template: `
+ChartWizardPropertyPaneDataTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: i1.StateService }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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="Configuration" [expanded]="true">
             <form class="k-form k-form-md">
                 <fieldset class="k-form-fieldset">
                     <legend class="k-form-legend">
-                        {{ stateService.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
+                        {{ stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
                     </legend>
                     <kendo-dropdownlist
                         [data]="stateService.state.columns"
@@ -76,7 +88,7 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                     >
                     </kendo-dropdownlist>
                 </fieldset>
-                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
+                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.state.seriesType)">
                     <legend class="k-form-legend">Series</legend>
                     <kendo-grid
                         #grid
@@ -100,7 +112,8 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                             </button>
                         </ng-template>
                         <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
-                        <kendo-grid-column field="name" title="Name"></kendo-grid-column>
+                        <kendo-grid-column field="name" title="">
+                        </kendo-grid-column>
                         <kendo-grid-command-column [width]="40">
                             <ng-template kendoGridCellTemplate>
                                 <button
@@ -116,14 +129,14 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                 </fieldset>
                 <fieldset
                     class="k-form-fieldset"
-                    *ngIf="stateService.seriesType === 'pie' || stateService.seriesType === 'scatter'"
+                    *ngIf="stateService.state.seriesType === 'pie'"
                 >
                     <legend class="k-form-legend">
-                        {{ stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value Axis' }}
+                        {{ 'Value Axis' }}
                     </legend>
                     <kendo-dropdownlist
                         [data]="stateService.state.columns"
-                        [value]="stateService.state.yField"
+                        [value]="stateService.state.valueField"
                         (valueChange)="updateState(valueAxisY, $event)"
                         fillMode="outline"
                         rounded="medium"
@@ -133,18 +146,19 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                 </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", "title", "subtitle", "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", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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", "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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
+    `, 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", "title", "subtitle", "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", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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", "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: "15.2.10", 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="Configuration" [expanded]="true">
             <form class="k-form k-form-md">
                 <fieldset class="k-form-fieldset">
                     <legend class="k-form-legend">
-                        {{ stateService.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
+                        {{ stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
                     </legend>
                     <kendo-dropdownlist
                         [data]="stateService.state.columns"
@@ -156,7 +170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     >
                     </kendo-dropdownlist>
                 </fieldset>
-                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
+                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.state.seriesType)">
                     <legend class="k-form-legend">Series</legend>
                     <kendo-grid
                         #grid
@@ -180,7 +194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             </button>
                         </ng-template>
                         <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
-                        <kendo-grid-column field="name" title="Name"></kendo-grid-column>
+                        <kendo-grid-column field="name" title="">
+                        </kendo-grid-column>
                         <kendo-grid-command-column [width]="40">
                             <ng-template kendoGridCellTemplate>
                                 <button
@@ -196,14 +211,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </fieldset>
                 <fieldset
                     class="k-form-fieldset"
-                    *ngIf="stateService.seriesType === 'pie' || stateService.seriesType === 'scatter'"
+                    *ngIf="stateService.state.seriesType === 'pie'"
                 >
                     <legend class="k-form-legend">
-                        {{ stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value Axis' }}
+                        {{ 'Value Axis' }}
                     </legend>
                     <kendo-dropdownlist
                         [data]="stateService.state.columns"
-                        [value]="stateService.state.yField"
+                        [value]="stateService.state.valueField"
                         (valueChange)="updateState(valueAxisY, $event)"
                         fillMode="outline"
                         rounded="medium"
@@ -234,4 +249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         RemoveCommandDirective
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.StateService }, { type: i2.FormBuilder }]; } });
+        }], ctorParameters: function () { return [{ type: i1.StateService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { grid: [{
+                type: ViewChild,
+                args: [GridComponent]
+            }] } });

package/esm2020/property-pane/form-field.component.mjs

@@ -6,7 +6,6 @@ import { Component, HostBinding, Input, Output, ViewChild, EventEmitter, ChangeD
 import { ComboBoxComponent, DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { CheckBoxComponent, ColorPickerComponent, NumericTextBoxComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
 import { LabelComponent } from '@progress/kendo-angular-label';
-import { ActionTypes } from '../chart-wizard-state';
 import { NgIf } from '@angular/common';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
@@ -50,10 +49,10 @@ export class ChartWizardPropertyPaneFormFieldComponent {
 }
 ChartWizardPropertyPaneFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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" class="k-form-label" [text]="text"></kendo-label>
+        <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"
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox'"
                 class="k-form-label"
                 [text]="text"
             ></kendo-label>
@@ -112,6 +111,11 @@ ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                 [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", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "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", "title", "subtitle", "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", "title", "subtitle", "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: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
@@ -120,10 +124,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: 'kendo-chartwizard-property-pane-form-field',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
+        <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"
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox'"
                 class="k-form-label"
                 [text]="text"
             ></kendo-label>
@@ -182,6 +186,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [checkedState]="value"
                 (checkedStateChange)="valueChange.emit($event)"
             ></kendo-checkbox>
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType === 'checkbox'"
+                class="k-checkbox-label"
+                [text]="text"
+            ></kendo-label>
         </div>
     `,
                     standalone: true,