@progress/kendo-angular-chart-wizard 25.0.0-develop.7 → 25.0.0

package/fesm2022/progress-kendo-angular-chart-wizard.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { Injectable, Inject, Optional, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, Input, EventEmitter, HostBinding, Output, Directive, forwardRef, HostListener, NgModule } from '@angular/core';
-import { getLicenseMessage, shouldShowValidationUI, isPresent, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { getLicenseMessage, shouldShowValidationUI, isPresent, WatermarkOverlayComponent, provideComponentName, 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';
@@ -16,12 +16,12 @@ 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 { GridComponent, ReactiveEditingDirective, DataBindingDirective, ToolbarTemplateDirective, RowReorderColumnComponent, ColumnComponent, CommandColumnComponent, CellTemplateDirective, GridToolbarFocusableDirective, RemoveCommandDirective, CustomMessagesComponent as CustomMessagesComponent$1 } from '@progress/kendo-angular-grid';
 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 { WindowComponent, WindowTitleBarComponent, WindowMaximizeActionDirective, WindowCloseActionDirective, WindowRestoreActionDirective, 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';
@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1784619050,
-    version: '25.0.0-develop.7',
+    publishDate: 1786526091,
+    version: '25.0.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',
 };
 
@@ -136,12 +136,13 @@ class StateService {
     deletedSeries = [];
     direction = 'ltr';
     windowSize = { width: 700, height: 550 };
+    windowState = 'default';
     splitterPaneSize = '300px';
     dataTab;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StateService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StateService, decorators: [{
             type: Injectable
         }] });
 
@@ -152,10 +153,10 @@ class ChartWizardLocalizationService extends LocalizationService {
     constructor(prefix, messageService, _rtl) {
         super(prefix, messageService, _rtl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", ngImport: i0, type: ChartWizardLocalizationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: ChartWizardLocalizationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -234,23 +235,25 @@ class ChartWizardPropertyPaneDataTabComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "17.0.0", version: "20.3.25", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-data-tab", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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: "17.0.0", version: "20.3.27", 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">
+          <form class="k-form">
             <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>
+              <div class="k-form-field">
+                <div class="k-form-field-wrap">
+                  <kendo-dropdownlist
+                    [data]="stateService.state.columns"
+                    [value]="stateService.state.categoryField"
+                    (valueChange)="updateState(categoryAxisX, $event)"
+                    fillMode="outline"
+                    >
+                  </kendo-dropdownlist>
+                </div>
+              </div>
             </fieldset>
             @if (isCategorical(stateService.state.seriesType)) {
               <fieldset class="k-form-fieldset">
@@ -263,13 +266,14 @@ class ChartWizardPropertyPaneDataTabComponent {
                   (rowReorder)="onRowReorder(grid)"
                   (remove)="removeData($event)"
                   >
+                  <kendo-grid-messages gridLabel="Data series"></kendo-grid-messages>
                   <ng-template kendoGridToolbarTemplate>
                     <button
                       kendoButton
+                      class="k-toolbar-button"
                       type="button"
                       [svgIcon]="plusIcon"
                       fillMode="flat"
-                      rounded="medium"
                       [disabled]="isDisabled(grid)"
                       (click)="addData()"
                       >
@@ -285,7 +289,6 @@ class ChartWizardPropertyPaneDataTabComponent {
                         [svgIcon]="trashIcon"
                         kendoGridRemoveCommand
                         fillMode="flat"
-                        rounded="medium"
                         [disabled]="stateService.state.series.length < 2"
                       ></button>
                     </ng-template>
@@ -305,17 +308,15 @@ class ChartWizardPropertyPaneDataTabComponent {
                   [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", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], 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 });
+        `, 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", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], 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]" }, { kind: "component", type: CustomMessagesComponent$1, selector: "kendo-grid-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chartwizard-property-pane-data-tab',
@@ -323,20 +324,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     template: `
         <kendo-expansionpanel [title]="messageFor('configuration')" [expanded]="true">
-          <form class="k-form k-form-md">
+          <form class="k-form">
             <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>
+              <div class="k-form-field">
+                <div class="k-form-field-wrap">
+                  <kendo-dropdownlist
+                    [data]="stateService.state.columns"
+                    [value]="stateService.state.categoryField"
+                    (valueChange)="updateState(categoryAxisX, $event)"
+                    fillMode="outline"
+                    >
+                  </kendo-dropdownlist>
+                </div>
+              </div>
             </fieldset>
             @if (isCategorical(stateService.state.seriesType)) {
               <fieldset class="k-form-fieldset">
@@ -349,13 +352,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   (rowReorder)="onRowReorder(grid)"
                   (remove)="removeData($event)"
                   >
+                  <kendo-grid-messages gridLabel="Data series"></kendo-grid-messages>
                   <ng-template kendoGridToolbarTemplate>
                     <button
                       kendoButton
+                      class="k-toolbar-button"
                       type="button"
                       [svgIcon]="plusIcon"
                       fillMode="flat"
-                      rounded="medium"
                       [disabled]="isDisabled(grid)"
                       (click)="addData()"
                       >
@@ -371,7 +375,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         [svgIcon]="trashIcon"
                         kendoGridRemoveCommand
                         fillMode="flat"
-                        rounded="medium"
                         [disabled]="stateService.state.series.length < 2"
                       ></button>
                     </ng-template>
@@ -391,8 +394,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   [value]="stateService.state.valueField"
                   (valueChange)="updateState(valueAxisY, $event)"
                   fillMode="outline"
-                  rounded="medium"
-                  size="medium"
                   >
                 </kendo-dropdownlist>
               </fieldset>
@@ -414,7 +415,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         CommandColumnComponent,
                         CellTemplateDirective,
                         GridToolbarFocusableDirective,
-                        RemoveCommandDirective
+                        RemoveCommandDirective,
+                        CustomMessagesComponent$1
                     ]
                 }]
         }], ctorParameters: () => [{ type: StateService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: ChartWizardLocalizationService }], propDecorators: { grid: [{
@@ -453,24 +455,24 @@ class ChartWizardSeriesTypeButtonComponent {
         return (this.stateService.state.seriesType === this.seriesType &&
             this.stateService.state.series[0]?.stack === this.stack);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, deps: [{ token: StateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ChartWizardSeriesTypeButtonComponent, isStandalone: true, selector: "kendo-chartwizard-series-type-button", inputs: { title: "title", chartTypeIcon: "chartTypeIcon", stack: "stack", seriesType: "seriesType" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, deps: [{ token: StateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", 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>
+                <kendo-svgicon [icon]="chartTypeIcon" size="xlarge"> </kendo-svgicon>
             </div>
             {{ title }}
         </div>
     `, isInline: true, dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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>
+                <kendo-svgicon [icon]="chartTypeIcon" size="xlarge"> </kendo-svgicon>
             </div>
             {{ title }}
         </div>
@@ -526,8 +528,8 @@ class ChartWizardPropertyPaneChartTabComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", type: ChartWizardPropertyPaneChartTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-chart-tab", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", 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
@@ -627,7 +629,7 @@ class ChartWizardPropertyPaneChartTabComponent {
         </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: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chartwizard-property-pane-chart-tab',
@@ -847,22 +849,21 @@ class ChartWizardPropertyPaneFormFieldComponent {
                     this.checkBox;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "[kendoChartWizardPropertyPaneFormField]", 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: `
         @if (hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
-          <kendo-label class="k-form-label" [text]="text"></kendo-label>
+          <kendo-label labelCssClass="k-form-label" [text]="text"></kendo-label>
         }
         <div class="k-form-field-wrap">
           @if (hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
             <kendo-label
-              class="k-form-label"
+              labelCssClass="k-form-label"
               [text]="text"
             ></kendo-label>
           }
           @if (inputType === 'numeric') {
             <kendo-numerictextbox
               fillMode="outline"
-              rounded="medium"
               [value]="value"
               (valueChange)="valueChange.emit($event)"
               [placeholder]="placeholder"
@@ -871,7 +872,6 @@ class ChartWizardPropertyPaneFormFieldComponent {
           @if (inputType === 'colorPicker') {
             <kendo-colorpicker
               fillMode="outline"
-              rounded="medium"
               [value]="value"
               [disabled]="disabled"
               (valueChange)="valueChange.emit($event)"
@@ -884,8 +884,6 @@ class ChartWizardPropertyPaneFormFieldComponent {
               valueField="value"
               [valuePrimitive]="true"
               fillMode="outline"
-              rounded="medium"
-              size="medium"
               [value]="value"
               (valueChange)="valueChange.emit($event)"
             ></kendo-dropdownlist>
@@ -898,8 +896,6 @@ class ChartWizardPropertyPaneFormFieldComponent {
               valueField="value"
               [valuePrimitive]="true"
               fillMode="outline"
-              rounded="medium"
-              size="medium"
               [placeholder]="placeholder"
               (valueChange)="valueChange.emit($event)"
             ></kendo-combobox>
@@ -907,7 +903,6 @@ class ChartWizardPropertyPaneFormFieldComponent {
           @if (inputType === 'text') {
             <kendo-textbox
               fillMode="outline"
-              rounded="medium"
               [placeholder]="placeholder"
               [value]="value"
               (valueChange)="valueChange.emit($event)"
@@ -928,26 +923,25 @@ class ChartWizardPropertyPaneFormFieldComponent {
         </div>
         `, isInline: true, dependencies: [{ 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: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-chartwizard-property-pane-form-field',
+                    selector: '[kendoChartWizardPropertyPaneFormField]',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
-          <kendo-label class="k-form-label" [text]="text"></kendo-label>
+          <kendo-label labelCssClass="k-form-label" [text]="text"></kendo-label>
         }
         <div class="k-form-field-wrap">
           @if (hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
             <kendo-label
-              class="k-form-label"
+              labelCssClass="k-form-label"
               [text]="text"
             ></kendo-label>
           }
           @if (inputType === 'numeric') {
             <kendo-numerictextbox
               fillMode="outline"
-              rounded="medium"
               [value]="value"
               (valueChange)="valueChange.emit($event)"
               [placeholder]="placeholder"
@@ -956,7 +950,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           @if (inputType === 'colorPicker') {
             <kendo-colorpicker
               fillMode="outline"
-              rounded="medium"
               [value]="value"
               [disabled]="disabled"
               (valueChange)="valueChange.emit($event)"
@@ -969,8 +962,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               valueField="value"
               [valuePrimitive]="true"
               fillMode="outline"
-              rounded="medium"
-              size="medium"
               [value]="value"
               (valueChange)="valueChange.emit($event)"
             ></kendo-dropdownlist>
@@ -983,8 +974,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               valueField="value"
               [valuePrimitive]="true"
               fillMode="outline"
-              rounded="medium"
-              size="medium"
               [placeholder]="placeholder"
               (valueChange)="valueChange.emit($event)"
             ></kendo-combobox>
@@ -992,7 +981,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           @if (inputType === 'text') {
             <kendo-textbox
               fillMode="outline"
-              rounded="medium"
               [placeholder]="placeholder"
               [value]="value"
               (valueChange)="valueChange.emit($event)"
@@ -1242,847 +1230,861 @@ class ChartWizardPropertyPaneFormatTabComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: StateService }, { token: ChartWizardLocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: StateService }, { token: ChartWizardLocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
         <section>
-          <kendo-expansionpanel
-            [style.max-width.px]="576"
-            [title]="messageFor('formatChartArea')"
-            [expanded]="true"
-            [attr.dir]="stateService.direction"
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="messageFor('formatChartArea')"
+                [expanded]="true"
+                [attr.dir]="stateService.direction"
             >
-            <form class="k-form k-form-md">
-              <fieldset class="k-form-fieldset">
-                <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
-                <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                  <kendo-chartwizard-property-pane-form-field
-                    [text]="messageFor('formatChartAreaMarginsLeft')"
-                    inputType="numeric"
-                    [placeholder]="messageFor('formatChartAreaMarginsAuto')"
-                    [value]="$any(stateService.state.area.margin).left"
-                    (valueChange)="updateState(areaMarginLeft, $event)"
-                    >
-                  </kendo-chartwizard-property-pane-form-field>
-                  <kendo-chartwizard-property-pane-form-field
-                    [text]="messageFor('formatChartAreaMarginsRight')"
-                    inputType="numeric"
-                    [placeholder]="messageFor('formatChartAreaMarginsAuto')"
-                    [value]="$any(stateService.state.area.margin).right"
-                    (valueChange)="updateState(areaMarginRight, $event)"
-                    >
-                  </kendo-chartwizard-property-pane-form-field>
-                  <kendo-chartwizard-property-pane-form-field
-                    [text]="messageFor('formatChartAreaMarginsTop')"
-                    inputType="numeric"
-                    [placeholder]="messageFor('formatChartAreaMarginsAuto')"
-                    [value]="$any(stateService.state.area.margin).top"
-                    (valueChange)="updateState(areaMarginTop, $event)"
-                    >
-                  </kendo-chartwizard-property-pane-form-field>
-                  <kendo-chartwizard-property-pane-form-field
-                    [text]="messageFor('formatChartAreaMarginsBottom')"
-                    inputType="numeric"
-                    [placeholder]="messageFor('formatChartAreaMarginsAuto')"
-                    [value]="$any(stateService.state.area.margin).bottom"
-                    (valueChange)="updateState(areaMarginBottom, $event)"
-                    >
-                  </kendo-chartwizard-property-pane-form-field>
-                </div>
-              </fieldset>
-              <fieldset class="k-form-fieldset">
-                <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatChartAreaBackgroundColor')"
-                  inputType="colorPicker"
-                  [value]="stateService.state.area?.background"
-                  (valueChange)="updateState(areaBackground, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-              </fieldset>
-            </form>
-          </kendo-expansionpanel>
+                <form class="k-form">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
+                          <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatChartAreaMarginsLeft')"
+                                inputType="numeric"
+                                [placeholder]="messageFor('formatChartAreaMarginsAuto')"
+                                [value]="$any(stateService.state.area.margin).left"
+                                (valueChange)="updateState(areaMarginLeft, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatChartAreaMarginsRight')"
+                                inputType="numeric"
+                                [placeholder]="messageFor('formatChartAreaMarginsAuto')"
+                                [value]="$any(stateService.state.area.margin).right"
+                                (valueChange)="updateState(areaMarginRight, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatChartAreaMarginsTop')"
+                                inputType="numeric"
+                                [placeholder]="messageFor('formatChartAreaMarginsAuto')"
+                                [value]="$any(stateService.state.area.margin).top"
+                                (valueChange)="updateState(areaMarginTop, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatChartAreaMarginsBottom')"
+                                inputType="numeric"
+                                [placeholder]="messageFor('formatChartAreaMarginsAuto')"
+                                [value]="$any(stateService.state.area.margin).bottom"
+                                (valueChange)="updateState(areaMarginBottom, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatChartAreaBackgroundColor')"
+                            inputType="colorPicker"
+                            [value]="stateService.state.area?.background"
+                            (valueChange)="updateState(areaBackground, $event)"
+                        >
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
         </section>
         <section>
-          <kendo-expansionpanel
-            [style.max-width.px]="576"
-            [title]="messageFor('formatTitle')"
-            [expanded]="true"
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="messageFor('formatTitle')"
+                [expanded]="true"
             >
-            <form class="k-form k-form-md">
-              <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleApplyTo')"
-                  inputType="dropDownList"
-                  [data]="chartTitles"
-                  [colSpan]="2"
-                  [value]="stateService.currentTitle"
-                  (valueChange)="changeCurrentTitle($event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleLabel')"
-                  inputType="text"
-                  [colSpan]="2"
-                  [value]="chartTitleTypeText"
-                  (valueChange)="updateState(chartTitleTypeAction, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleFont')"
-                  inputType="comboBox"
-                  [data]="fontNames"
-                  [colSpan]="2"
-                  [value]="chartTitleTypeFont"
-                  [placeholder]="messageFor('formatTitleFontPlaceholder')"
-                  (valueChange)="updateState(chartTitleTypeFontAction, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleSize')"
-                  inputType="comboBox"
-                  [placeholder]="messageFor('formatTitleSizePlaceholder')"
-                  [data]="fontSizes"
-                  [value]="chartTitleTypeFontSize"
-                  (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleColor')"
-                  inputType="colorPicker"
-                  [value]="chartTitleTypeColor"
-                  (valueChange)="updateState(chartTitleTypeColorAction, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-              </div>
-            </form>
-          </kendo-expansionpanel>
+                <form class="k-form">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2">
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleApplyTo')"
+                            inputType="dropDownList"
+                            [data]="chartTitles"
+                            [colSpan]="2"
+                            [value]="stateService.currentTitle"
+                            (valueChange)="changeCurrentTitle($event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleLabel')"
+                            inputType="text"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeText"
+                            (valueChange)="updateState(chartTitleTypeAction, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleFont')"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeFont"
+                            [placeholder]="messageFor('formatTitleFontPlaceholder')"
+                            (valueChange)="updateState(chartTitleTypeFontAction, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleSize')"
+                            inputType="comboBox"
+                            [placeholder]="messageFor('formatTitleSizePlaceholder')"
+                            [data]="fontSizes"
+                            [value]="chartTitleTypeFontSize"
+                            (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleColor')"
+                            inputType="colorPicker"
+                            [value]="chartTitleTypeColor"
+                            (valueChange)="updateState(chartTitleTypeColorAction, $event)"
+                        >
+                        </div>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
         </section>
         <section>
-          <kendo-expansionpanel
-            [style.max-width.px]="576"
-            [title]="messageFor('formatLegend')"
-            [expanded]="true"
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="messageFor('formatSeries')"
+                [expanded]="true"
             >
-            <form class="k-form k-form-md">
-              <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
-                <kendo-switch
-                  #toggleLegend
-                  onLabel="On"
-                  offLabel="Off"
-                  thumbRounded="full"
-                  size="medium"
-                  [checked]="stateService.state.legend?.visible"
-                  (valueChange)="updateState(legendVisible, $event)"
-                ></kendo-switch>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatLegendFont')"
-                  inputType="comboBox"
-                  [data]="fontNames"
-                  [colSpan]="2"
-                  [placeholder]="messageFor('formatLegendFontPlaceholder')"
-                  [value]="parseFont(stateService.state.legend?.labels?.font).name"
-                  (valueChange)="updateState(legendFontName, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatLegendSize')"
-                  inputType="comboBox"
-                  [data]="fontSizes"
-                  [placeholder]="messageFor('formatLegendSizePlaceholder')"
-                  [value]="parseFont(stateService.state.legend?.labels?.font).size"
-                  (valueChange)="updateState(legendFontSize, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatLegendColor')"
-                  inputType="colorPicker"
-                  [value]="stateService.state.legend?.labels?.color"
-                  (valueChange)="updateState(legendColor, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatLegendPosition')"
-                  inputType="dropDownList"
-                  [colSpan]="2"
-                  [data]="legendPositions"
-                  [value]="stateService.state.legend?.position"
-                  (valueChange)="updateState(legendPosition, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-              </div>
-            </form>
-          </kendo-expansionpanel>
+                <form class="k-form">
+                    <div class="k-form-field">
+                        <kendo-label
+                            [for]="seriesDropDown"
+                            labelCssClass="k-form-label"
+                            [text]="messageFor('formatSeriesApplyTo')"
+                        ></kendo-label>
+                        <div class="k-form-field-wrap">
+                            <kendo-dropdownlist
+                                #seriesDropDown
+                                [data]="seriesData"
+                                textField="text"
+                                valueField="name"
+                                fillMode="outline"
+                                [value]="stateService.currentSeries"
+                                (valueChange)="updateCurrentSeries($event)"
+                            ></kendo-dropdownlist>
+                        </div>
+                    </div>
+
+                    <div kendoChartWizardPropertyPaneFormField
+                        [text]="messageFor('formatSeriesColor')"
+                        [value]="stateService.currentSeries?.color"
+                        inputType="colorPicker"
+                        (valueChange)="updateSeriesColor($event)"
+                    >
+                    </div>
+                    <div kendoChartWizardPropertyPaneFormField
+                        [text]="messageFor('formatSeriesShowLabels')"
+                        [value]="showLabels"
+                        [isLabelInsideFormFieldWrap]="true"
+                        inputType="checkbox"
+                        (valueChange)="toggleSeriesLabels($event)"
+                    >
+                    </div>
+                </form>
+            </kendo-expansionpanel>
         </section>
         <section>
-          <kendo-expansionpanel
-            [style.max-width.px]="576"
-            [title]="messageFor('formatSeries')"
-            [expanded]="true"
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="messageFor('formatLegend')"
+                [expanded]="true"
             >
-            <form class="k-form k-form-md">
-              <div class="k-form-field">
-                <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
-                <div class="k-form-field-wrap">
-                  <kendo-dropdownlist
-                    #seriesDropDown
-                    [data]="seriesData"
-                    textField="text"
-                    valueField="name"
-                    fillMode="outline"
-                    rounded="medium"
-                    size="medium"
-                    [value]="stateService.currentSeries"
-                    (valueChange)="updateCurrentSeries($event)"
-                  ></kendo-dropdownlist>
-                </div>
-              </div>
-        
-              <kendo-chartwizard-property-pane-form-field
-                [text]="messageFor('formatSeriesColor')"
-                [value]="stateService.currentSeries?.color"
-                inputType="colorPicker"
-                [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
-                (valueChange)="updateSeriesColor($event)"
-                >
-              </kendo-chartwizard-property-pane-form-field>
-              <kendo-chartwizard-property-pane-form-field
-                [text]="messageFor('formatSeriesShowLabels')"
-                [value]="showLabels"
-                [isLabelInsideFormFieldWrap]="true"
-                [colSpan]="2"
-                inputType="checkbox"
-                (valueChange)="toggleSeriesLabels($event)"
-                >
-              </kendo-chartwizard-property-pane-form-field>
-            </form>
-          </kendo-expansionpanel>
+                <form class="k-form">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2">
+                        <div class="k-form-field k-col-span-2">
+                            <div class="k-form-field-wrap">
+                                <div class="k-d-flex k-align-items-center k-gap-2">
+                                    <kendo-label
+                                        [for]="toggleLegend"
+                                        [text]="messageFor('formatLegendShowLegend')"
+                                    ></kendo-label>
+                                    <kendo-switch
+                                        #toggleLegend
+                                        onLabel="On"
+                                        offLabel="Off"
+                                        [checked]="stateService.state.legend?.visible"
+                                        (valueChange)="updateState(legendVisible, $event)"
+                                    ></kendo-switch>
+                                </div>
+                            </div>
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatLegendFont')"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            [placeholder]="messageFor('formatLegendFontPlaceholder')"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).name"
+                            (valueChange)="updateState(legendFontName, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatLegendSize')"
+                            inputType="comboBox"
+                            [data]="fontSizes"
+                            [placeholder]="messageFor('formatLegendSizePlaceholder')"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).size"
+                            (valueChange)="updateState(legendFontSize, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatLegendColor')"
+                            inputType="colorPicker"
+                            [value]="stateService.state.legend?.labels?.color"
+                            (valueChange)="updateState(legendColor, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatLegendPosition')"
+                            inputType="dropDownList"
+                            [colSpan]="2"
+                            [data]="legendPositions"
+                            [value]="stateService.state.legend?.position"
+                            (valueChange)="updateState(legendPosition, $event)"
+                        >
+                        </div>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
         </section>
         @if (stateService.state.seriesType !== 'pie') {
-          <section class="k-row-start-1 k-row-end-3 k-col-start-3">
+        <section>
             <kendo-expansionpanel
-              [style.max-width.px]="576"
-              [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
-              [expanded]="true"
-              >
-              <form class="k-form k-form-md">
-                <fieldset class="k-form-fieldset">
-                  <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
-                  <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                    <kendo-chartwizard-property-pane-form-field
-                      inputType="text"
-                      [hasLabel]="false"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
-                      [value]="stateService.state.categoryAxis[0]?.title?.text || null"
-                      (valueChange)="updateState(categoryAxisTitleText, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisTitleFont')"
-                      inputType="comboBox"
-                      [data]="fontNames"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
-                      [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
-                      (valueChange)="updateState(categoryAxisTitleFontName, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisTitleSize')"
-                      inputType="comboBox"
-                      [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
-                      [data]="fontSizes"
-                      [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
-                      (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisTitleColor')"
-                      inputType="colorPicker"
-                      [value]="stateService.state.categoryAxis[0]?.title?.color"
-                      (valueChange)="updateState(categoryAxisTitleColor, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                  </div>
-                </fieldset>
-                <fieldset class="k-form-fieldset">
-                  <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
-                  <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsFont')"
-                      inputType="comboBox"
-                      [data]="fontNames"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
-                      [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
-                      (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsSize')"
-                      inputType="comboBox"
-                      [data]="fontSizes"
-                      [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
-                      [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
-                      (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsColor')"
-                      inputType="colorPicker"
-                      [value]="stateService.state.categoryAxis[0]?.labels?.color"
-                      (valueChange)="updateState(categoryAxisLabelsColor, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsRotation')"
-                      inputType="dropDownList"
-                      [data]="labelsCategoryAxisRotation"
-                      [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
-                      (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <span></span>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
-                      [isLabelInsideFormFieldWrap]="true"
-                      inputType="checkbox"
-                      [colSpan]="2"
-                      [value]="stateService.state.categoryAxis[0]?.reverse"
-                      (valueChange)="updateState(categoryAxisReverseOrder, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                  </div>
-                </fieldset>
-              </form>
+                [style.max-width.px]="576"
+                [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
+                [expanded]="true"
+            >
+                <form class="k-form">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
+                                (valueChange)="updateState(categoryAxisTitleText, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisTitleFont')"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(categoryAxisTitleFontName, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisTitleSize')"
+                                inputType="comboBox"
+                                [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisTitleColor')"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.title?.color"
+                                (valueChange)="updateState(categoryAxisTitleColor, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsFont')"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsSize')"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsColor')"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.color"
+                                (valueChange)="updateState(categoryAxisLabelsColor, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsRotation')"
+                                inputType="dropDownList"
+                                [data]="labelsCategoryAxisRotation"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
+                            >
+                            </div>
+                            <span></span>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
+                                [isLabelInsideFormFieldWrap]="true"
+                                inputType="checkbox"
+                                [colSpan]="2"
+                                [value]="stateService.state.categoryAxis[0]?.reverse"
+                                (valueChange)="updateState(categoryAxisReverseOrder, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
             </kendo-expansionpanel>
-          </section>
+        </section>
         }
         @if (stateService.state.seriesType !== 'pie') {
-          <section class="k-row-start-1 k-row-end-3 k-col-start-4">
+        <section>
             <kendo-expansionpanel
-              [style.max-width.px]="576"
-              [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
-              [expanded]="true"
-              >
-              <form class="k-form k-form-md">
-                <fieldset class="k-form-fieldset">
-                  <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
-                  <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                    <kendo-chartwizard-property-pane-form-field
-                      inputType="text"
-                      [hasLabel]="false"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
-                      [value]="stateService.state.valueAxis[0]?.title?.text || null"
-                      (valueChange)="updateState(valueAxisTitleText, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisTitleFont')"
-                      inputType="comboBox"
-                      [colSpan]="2"
-                      [data]="fontNames"
-                      [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
-                      [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
-                      (valueChange)="updateState(valueAxisTitleFontName, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisTitleSize')"
-                      inputType="comboBox"
-                      [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
-                      [data]="fontSizes"
-                      [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
-                      (valueChange)="updateState(valueAxisTitleFontSize, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisTitleColor')"
-                      inputType="colorPicker"
-                      [value]="stateService.state.valueAxis[0]?.title?.color"
-                      (valueChange)="updateState(valueAxisTitleColor, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                  </div>
-                </fieldset>
-                <fieldset class="k-form-fieldset">
-                  <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
-                  <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsFormat')"
-                      [colSpan]="2"
-                      inputType="dropDownList"
-                      [data]="labelFormats"
-                      [value]="labelFormatValue"
-                      (valueChange)="updateState(valueAxisLabelsFormat, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsFont')"
-                      inputType="comboBox"
-                      [data]="fontNames"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
-                      [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
-                      (valueChange)="updateState(valueAxisLabelsFontName, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsSize')"
-                      inputType="comboBox"
-                      [data]="fontSizes"
-                      [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
-                      [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
-                      (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsColor')"
-                      inputType="colorPicker"
-                      [value]="stateService.state.valueAxis[0]?.labels?.color"
-                      (valueChange)="updateState(valueAxisLabelsColor, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsRotation')"
-                      inputType="dropDownList"
-                      [data]="labelsValueAxisRotation"
-                      [value]="stateService.state.valueAxis[0]?.labels?.rotation"
-                      (valueChange)="updateState(valueAxisLabelsRotation, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                  </div>
-                </fieldset>
-              </form>
+                [style.max-width.px]="576"
+                [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
+                [expanded]="true"
+            >
+                <form class="k-form">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
+                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
+                                (valueChange)="updateState(valueAxisTitleText, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisTitleFont')"
+                                inputType="comboBox"
+                                [colSpan]="2"
+                                [data]="fontNames"
+                                [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(valueAxisTitleFontName, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisTitleSize')"
+                                inputType="comboBox"
+                                [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(valueAxisTitleFontSize, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisTitleColor')"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.title?.color"
+                                (valueChange)="updateState(valueAxisTitleColor, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsFormat')"
+                                [colSpan]="2"
+                                inputType="dropDownList"
+                                [data]="labelFormats"
+                                [value]="labelFormatValue"
+                                (valueChange)="updateState(valueAxisLabelsFormat, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsFont')"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(valueAxisLabelsFontName, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsSize')"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsColor')"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.labels?.color"
+                                (valueChange)="updateState(valueAxisLabelsColor, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsRotation')"
+                                inputType="dropDownList"
+                                [data]="labelsValueAxisRotation"
+                                [value]="stateService.state.valueAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(valueAxisLabelsRotation, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
             </kendo-expansionpanel>
-          </section>
+        </section>
         }
-        `, 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: ChartWizardPropertyPaneFormFieldComponent, selector: "kendo-chartwizard-property-pane-form-field", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, 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: ChartWizardPropertyPaneFormFieldComponent, selector: "[kendoChartWizardPropertyPaneFormField]", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chartwizard-property-pane-format-tab',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <section>
-          <kendo-expansionpanel
-            [style.max-width.px]="576"
-            [title]="messageFor('formatChartArea')"
-            [expanded]="true"
-            [attr.dir]="stateService.direction"
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="messageFor('formatChartArea')"
+                [expanded]="true"
+                [attr.dir]="stateService.direction"
             >
-            <form class="k-form k-form-md">
-              <fieldset class="k-form-fieldset">
-                <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
-                <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                  <kendo-chartwizard-property-pane-form-field
-                    [text]="messageFor('formatChartAreaMarginsLeft')"
-                    inputType="numeric"
-                    [placeholder]="messageFor('formatChartAreaMarginsAuto')"
-                    [value]="$any(stateService.state.area.margin).left"
-                    (valueChange)="updateState(areaMarginLeft, $event)"
-                    >
-                  </kendo-chartwizard-property-pane-form-field>
-                  <kendo-chartwizard-property-pane-form-field
-                    [text]="messageFor('formatChartAreaMarginsRight')"
-                    inputType="numeric"
-                    [placeholder]="messageFor('formatChartAreaMarginsAuto')"
-                    [value]="$any(stateService.state.area.margin).right"
-                    (valueChange)="updateState(areaMarginRight, $event)"
-                    >
-                  </kendo-chartwizard-property-pane-form-field>
-                  <kendo-chartwizard-property-pane-form-field
-                    [text]="messageFor('formatChartAreaMarginsTop')"
-                    inputType="numeric"
-                    [placeholder]="messageFor('formatChartAreaMarginsAuto')"
-                    [value]="$any(stateService.state.area.margin).top"
-                    (valueChange)="updateState(areaMarginTop, $event)"
-                    >
-                  </kendo-chartwizard-property-pane-form-field>
-                  <kendo-chartwizard-property-pane-form-field
-                    [text]="messageFor('formatChartAreaMarginsBottom')"
-                    inputType="numeric"
-                    [placeholder]="messageFor('formatChartAreaMarginsAuto')"
-                    [value]="$any(stateService.state.area.margin).bottom"
-                    (valueChange)="updateState(areaMarginBottom, $event)"
-                    >
-                  </kendo-chartwizard-property-pane-form-field>
-                </div>
-              </fieldset>
-              <fieldset class="k-form-fieldset">
-                <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatChartAreaBackgroundColor')"
-                  inputType="colorPicker"
-                  [value]="stateService.state.area?.background"
-                  (valueChange)="updateState(areaBackground, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-              </fieldset>
-            </form>
-          </kendo-expansionpanel>
+                <form class="k-form">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
+                          <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatChartAreaMarginsLeft')"
+                                inputType="numeric"
+                                [placeholder]="messageFor('formatChartAreaMarginsAuto')"
+                                [value]="$any(stateService.state.area.margin).left"
+                                (valueChange)="updateState(areaMarginLeft, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatChartAreaMarginsRight')"
+                                inputType="numeric"
+                                [placeholder]="messageFor('formatChartAreaMarginsAuto')"
+                                [value]="$any(stateService.state.area.margin).right"
+                                (valueChange)="updateState(areaMarginRight, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatChartAreaMarginsTop')"
+                                inputType="numeric"
+                                [placeholder]="messageFor('formatChartAreaMarginsAuto')"
+                                [value]="$any(stateService.state.area.margin).top"
+                                (valueChange)="updateState(areaMarginTop, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatChartAreaMarginsBottom')"
+                                inputType="numeric"
+                                [placeholder]="messageFor('formatChartAreaMarginsAuto')"
+                                [value]="$any(stateService.state.area.margin).bottom"
+                                (valueChange)="updateState(areaMarginBottom, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatChartAreaBackgroundColor')"
+                            inputType="colorPicker"
+                            [value]="stateService.state.area?.background"
+                            (valueChange)="updateState(areaBackground, $event)"
+                        >
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
         </section>
         <section>
-          <kendo-expansionpanel
-            [style.max-width.px]="576"
-            [title]="messageFor('formatTitle')"
-            [expanded]="true"
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="messageFor('formatTitle')"
+                [expanded]="true"
             >
-            <form class="k-form k-form-md">
-              <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleApplyTo')"
-                  inputType="dropDownList"
-                  [data]="chartTitles"
-                  [colSpan]="2"
-                  [value]="stateService.currentTitle"
-                  (valueChange)="changeCurrentTitle($event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleLabel')"
-                  inputType="text"
-                  [colSpan]="2"
-                  [value]="chartTitleTypeText"
-                  (valueChange)="updateState(chartTitleTypeAction, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleFont')"
-                  inputType="comboBox"
-                  [data]="fontNames"
-                  [colSpan]="2"
-                  [value]="chartTitleTypeFont"
-                  [placeholder]="messageFor('formatTitleFontPlaceholder')"
-                  (valueChange)="updateState(chartTitleTypeFontAction, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleSize')"
-                  inputType="comboBox"
-                  [placeholder]="messageFor('formatTitleSizePlaceholder')"
-                  [data]="fontSizes"
-                  [value]="chartTitleTypeFontSize"
-                  (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatTitleColor')"
-                  inputType="colorPicker"
-                  [value]="chartTitleTypeColor"
-                  (valueChange)="updateState(chartTitleTypeColorAction, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-              </div>
-            </form>
-          </kendo-expansionpanel>
+                <form class="k-form">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2">
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleApplyTo')"
+                            inputType="dropDownList"
+                            [data]="chartTitles"
+                            [colSpan]="2"
+                            [value]="stateService.currentTitle"
+                            (valueChange)="changeCurrentTitle($event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleLabel')"
+                            inputType="text"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeText"
+                            (valueChange)="updateState(chartTitleTypeAction, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleFont')"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeFont"
+                            [placeholder]="messageFor('formatTitleFontPlaceholder')"
+                            (valueChange)="updateState(chartTitleTypeFontAction, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleSize')"
+                            inputType="comboBox"
+                            [placeholder]="messageFor('formatTitleSizePlaceholder')"
+                            [data]="fontSizes"
+                            [value]="chartTitleTypeFontSize"
+                            (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatTitleColor')"
+                            inputType="colorPicker"
+                            [value]="chartTitleTypeColor"
+                            (valueChange)="updateState(chartTitleTypeColorAction, $event)"
+                        >
+                        </div>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
         </section>
         <section>
-          <kendo-expansionpanel
-            [style.max-width.px]="576"
-            [title]="messageFor('formatLegend')"
-            [expanded]="true"
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="messageFor('formatSeries')"
+                [expanded]="true"
             >
-            <form class="k-form k-form-md">
-              <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
-                <kendo-switch
-                  #toggleLegend
-                  onLabel="On"
-                  offLabel="Off"
-                  thumbRounded="full"
-                  size="medium"
-                  [checked]="stateService.state.legend?.visible"
-                  (valueChange)="updateState(legendVisible, $event)"
-                ></kendo-switch>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatLegendFont')"
-                  inputType="comboBox"
-                  [data]="fontNames"
-                  [colSpan]="2"
-                  [placeholder]="messageFor('formatLegendFontPlaceholder')"
-                  [value]="parseFont(stateService.state.legend?.labels?.font).name"
-                  (valueChange)="updateState(legendFontName, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatLegendSize')"
-                  inputType="comboBox"
-                  [data]="fontSizes"
-                  [placeholder]="messageFor('formatLegendSizePlaceholder')"
-                  [value]="parseFont(stateService.state.legend?.labels?.font).size"
-                  (valueChange)="updateState(legendFontSize, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatLegendColor')"
-                  inputType="colorPicker"
-                  [value]="stateService.state.legend?.labels?.color"
-                  (valueChange)="updateState(legendColor, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-                <kendo-chartwizard-property-pane-form-field
-                  [text]="messageFor('formatLegendPosition')"
-                  inputType="dropDownList"
-                  [colSpan]="2"
-                  [data]="legendPositions"
-                  [value]="stateService.state.legend?.position"
-                  (valueChange)="updateState(legendPosition, $event)"
-                  >
-                </kendo-chartwizard-property-pane-form-field>
-              </div>
-            </form>
-          </kendo-expansionpanel>
+                <form class="k-form">
+                    <div class="k-form-field">
+                        <kendo-label
+                            [for]="seriesDropDown"
+                            labelCssClass="k-form-label"
+                            [text]="messageFor('formatSeriesApplyTo')"
+                        ></kendo-label>
+                        <div class="k-form-field-wrap">
+                            <kendo-dropdownlist
+                                #seriesDropDown
+                                [data]="seriesData"
+                                textField="text"
+                                valueField="name"
+                                fillMode="outline"
+                                [value]="stateService.currentSeries"
+                                (valueChange)="updateCurrentSeries($event)"
+                            ></kendo-dropdownlist>
+                        </div>
+                    </div>
+
+                    <div kendoChartWizardPropertyPaneFormField
+                        [text]="messageFor('formatSeriesColor')"
+                        [value]="stateService.currentSeries?.color"
+                        inputType="colorPicker"
+                        (valueChange)="updateSeriesColor($event)"
+                    >
+                    </div>
+                    <div kendoChartWizardPropertyPaneFormField
+                        [text]="messageFor('formatSeriesShowLabels')"
+                        [value]="showLabels"
+                        [isLabelInsideFormFieldWrap]="true"
+                        inputType="checkbox"
+                        (valueChange)="toggleSeriesLabels($event)"
+                    >
+                    </div>
+                </form>
+            </kendo-expansionpanel>
         </section>
         <section>
-          <kendo-expansionpanel
-            [style.max-width.px]="576"
-            [title]="messageFor('formatSeries')"
-            [expanded]="true"
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="messageFor('formatLegend')"
+                [expanded]="true"
             >
-            <form class="k-form k-form-md">
-              <div class="k-form-field">
-                <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
-                <div class="k-form-field-wrap">
-                  <kendo-dropdownlist
-                    #seriesDropDown
-                    [data]="seriesData"
-                    textField="text"
-                    valueField="name"
-                    fillMode="outline"
-                    rounded="medium"
-                    size="medium"
-                    [value]="stateService.currentSeries"
-                    (valueChange)="updateCurrentSeries($event)"
-                  ></kendo-dropdownlist>
-                </div>
-              </div>
-        
-              <kendo-chartwizard-property-pane-form-field
-                [text]="messageFor('formatSeriesColor')"
-                [value]="stateService.currentSeries?.color"
-                inputType="colorPicker"
-                [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
-                (valueChange)="updateSeriesColor($event)"
-                >
-              </kendo-chartwizard-property-pane-form-field>
-              <kendo-chartwizard-property-pane-form-field
-                [text]="messageFor('formatSeriesShowLabels')"
-                [value]="showLabels"
-                [isLabelInsideFormFieldWrap]="true"
-                [colSpan]="2"
-                inputType="checkbox"
-                (valueChange)="toggleSeriesLabels($event)"
-                >
-              </kendo-chartwizard-property-pane-form-field>
-            </form>
-          </kendo-expansionpanel>
+                <form class="k-form">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2">
+                        <div class="k-form-field k-col-span-2">
+                            <div class="k-form-field-wrap">
+                                <div class="k-d-flex k-align-items-center k-gap-2">
+                                    <kendo-label
+                                        [for]="toggleLegend"
+                                        [text]="messageFor('formatLegendShowLegend')"
+                                    ></kendo-label>
+                                    <kendo-switch
+                                        #toggleLegend
+                                        onLabel="On"
+                                        offLabel="Off"
+                                        [checked]="stateService.state.legend?.visible"
+                                        (valueChange)="updateState(legendVisible, $event)"
+                                    ></kendo-switch>
+                                </div>
+                            </div>
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatLegendFont')"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            [placeholder]="messageFor('formatLegendFontPlaceholder')"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).name"
+                            (valueChange)="updateState(legendFontName, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatLegendSize')"
+                            inputType="comboBox"
+                            [data]="fontSizes"
+                            [placeholder]="messageFor('formatLegendSizePlaceholder')"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).size"
+                            (valueChange)="updateState(legendFontSize, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatLegendColor')"
+                            inputType="colorPicker"
+                            [value]="stateService.state.legend?.labels?.color"
+                            (valueChange)="updateState(legendColor, $event)"
+                        >
+                        </div>
+                        <div kendoChartWizardPropertyPaneFormField
+                            [text]="messageFor('formatLegendPosition')"
+                            inputType="dropDownList"
+                            [colSpan]="2"
+                            [data]="legendPositions"
+                            [value]="stateService.state.legend?.position"
+                            (valueChange)="updateState(legendPosition, $event)"
+                        >
+                        </div>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
         </section>
         @if (stateService.state.seriesType !== 'pie') {
-          <section class="k-row-start-1 k-row-end-3 k-col-start-3">
+        <section>
             <kendo-expansionpanel
-              [style.max-width.px]="576"
-              [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
-              [expanded]="true"
-              >
-              <form class="k-form k-form-md">
-                <fieldset class="k-form-fieldset">
-                  <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
-                  <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                    <kendo-chartwizard-property-pane-form-field
-                      inputType="text"
-                      [hasLabel]="false"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
-                      [value]="stateService.state.categoryAxis[0]?.title?.text || null"
-                      (valueChange)="updateState(categoryAxisTitleText, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisTitleFont')"
-                      inputType="comboBox"
-                      [data]="fontNames"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
-                      [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
-                      (valueChange)="updateState(categoryAxisTitleFontName, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisTitleSize')"
-                      inputType="comboBox"
-                      [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
-                      [data]="fontSizes"
-                      [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
-                      (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisTitleColor')"
-                      inputType="colorPicker"
-                      [value]="stateService.state.categoryAxis[0]?.title?.color"
-                      (valueChange)="updateState(categoryAxisTitleColor, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                  </div>
-                </fieldset>
-                <fieldset class="k-form-fieldset">
-                  <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
-                  <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsFont')"
-                      inputType="comboBox"
-                      [data]="fontNames"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
-                      [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
-                      (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsSize')"
-                      inputType="comboBox"
-                      [data]="fontSizes"
-                      [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
-                      [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
-                      (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsColor')"
-                      inputType="colorPicker"
-                      [value]="stateService.state.categoryAxis[0]?.labels?.color"
-                      (valueChange)="updateState(categoryAxisLabelsColor, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsRotation')"
-                      inputType="dropDownList"
-                      [data]="labelsCategoryAxisRotation"
-                      [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
-                      (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <span></span>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
-                      [isLabelInsideFormFieldWrap]="true"
-                      inputType="checkbox"
-                      [colSpan]="2"
-                      [value]="stateService.state.categoryAxis[0]?.reverse"
-                      (valueChange)="updateState(categoryAxisReverseOrder, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                  </div>
-                </fieldset>
-              </form>
+                [style.max-width.px]="576"
+                [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
+                [expanded]="true"
+            >
+                <form class="k-form">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
+                                (valueChange)="updateState(categoryAxisTitleText, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisTitleFont')"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(categoryAxisTitleFontName, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisTitleSize')"
+                                inputType="comboBox"
+                                [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisTitleColor')"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.title?.color"
+                                (valueChange)="updateState(categoryAxisTitleColor, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsFont')"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsSize')"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsColor')"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.color"
+                                (valueChange)="updateState(categoryAxisLabelsColor, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsRotation')"
+                                inputType="dropDownList"
+                                [data]="labelsCategoryAxisRotation"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
+                            >
+                            </div>
+                            <span></span>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
+                                [isLabelInsideFormFieldWrap]="true"
+                                inputType="checkbox"
+                                [colSpan]="2"
+                                [value]="stateService.state.categoryAxis[0]?.reverse"
+                                (valueChange)="updateState(categoryAxisReverseOrder, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
             </kendo-expansionpanel>
-          </section>
+        </section>
         }
         @if (stateService.state.seriesType !== 'pie') {
-          <section class="k-row-start-1 k-row-end-3 k-col-start-4">
+        <section>
             <kendo-expansionpanel
-              [style.max-width.px]="576"
-              [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
-              [expanded]="true"
-              >
-              <form class="k-form k-form-md">
-                <fieldset class="k-form-fieldset">
-                  <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
-                  <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                    <kendo-chartwizard-property-pane-form-field
-                      inputType="text"
-                      [hasLabel]="false"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
-                      [value]="stateService.state.valueAxis[0]?.title?.text || null"
-                      (valueChange)="updateState(valueAxisTitleText, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisTitleFont')"
-                      inputType="comboBox"
-                      [colSpan]="2"
-                      [data]="fontNames"
-                      [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
-                      [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
-                      (valueChange)="updateState(valueAxisTitleFontName, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisTitleSize')"
-                      inputType="comboBox"
-                      [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
-                      [data]="fontSizes"
-                      [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
-                      (valueChange)="updateState(valueAxisTitleFontSize, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisTitleColor')"
-                      inputType="colorPicker"
-                      [value]="stateService.state.valueAxis[0]?.title?.color"
-                      (valueChange)="updateState(valueAxisTitleColor, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                  </div>
-                </fieldset>
-                <fieldset class="k-form-fieldset">
-                  <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
-                  <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsFormat')"
-                      [colSpan]="2"
-                      inputType="dropDownList"
-                      [data]="labelFormats"
-                      [value]="labelFormatValue"
-                      (valueChange)="updateState(valueAxisLabelsFormat, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsFont')"
-                      inputType="comboBox"
-                      [data]="fontNames"
-                      [colSpan]="2"
-                      [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
-                      [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
-                      (valueChange)="updateState(valueAxisLabelsFontName, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsSize')"
-                      inputType="comboBox"
-                      [data]="fontSizes"
-                      [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
-                      [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
-                      (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsColor')"
-                      inputType="colorPicker"
-                      [value]="stateService.state.valueAxis[0]?.labels?.color"
-                      (valueChange)="updateState(valueAxisLabelsColor, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                      [text]="messageFor('formatValueAxisLabelsRotation')"
-                      inputType="dropDownList"
-                      [data]="labelsValueAxisRotation"
-                      [value]="stateService.state.valueAxis[0]?.labels?.rotation"
-                      (valueChange)="updateState(valueAxisLabelsRotation, $event)"
-                      >
-                    </kendo-chartwizard-property-pane-form-field>
-                  </div>
-                </fieldset>
-              </form>
+                [style.max-width.px]="576"
+                [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
+                [expanded]="true"
+            >
+                <form class="k-form">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
+                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
+                                (valueChange)="updateState(valueAxisTitleText, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisTitleFont')"
+                                inputType="comboBox"
+                                [colSpan]="2"
+                                [data]="fontNames"
+                                [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(valueAxisTitleFontName, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisTitleSize')"
+                                inputType="comboBox"
+                                [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(valueAxisTitleFontSize, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisTitleColor')"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.title?.color"
+                                (valueChange)="updateState(valueAxisTitleColor, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2">
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsFormat')"
+                                [colSpan]="2"
+                                inputType="dropDownList"
+                                [data]="labelFormats"
+                                [value]="labelFormatValue"
+                                (valueChange)="updateState(valueAxisLabelsFormat, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsFont')"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(valueAxisLabelsFontName, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsSize')"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsColor')"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.labels?.color"
+                                (valueChange)="updateState(valueAxisLabelsColor, $event)"
+                            >
+                            </div>
+                            <div kendoChartWizardPropertyPaneFormField
+                                [text]="messageFor('formatValueAxisLabelsRotation')"
+                                inputType="dropDownList"
+                                [data]="labelsValueAxisRotation"
+                                [value]="stateService.state.valueAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(valueAxisLabelsRotation, $event)"
+                            >
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
             </kendo-expansionpanel>
-          </section>
+        </section>
         }
-        `,
+    `,
                     standalone: true,
                     imports: [
                         ExpansionPanelComponent,
@@ -2522,10 +2524,10 @@ class Messages extends ComponentMessages {
      * The **Auto** option of the **Rotation** settings of the **Labels** in the **Value Axis** panel.
      */
     formatValueAxisLabelsRotationAuto;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: Messages, isStandalone: true, selector: "[kendoChartWizardMessages]", inputs: { windowTitle: "windowTitle", exportButton: "exportButton", exportPDFButton: "exportPDFButton", exportSVGButton: "exportSVGButton", exportPNGButton: "exportPNGButton", tabChart: "tabChart", tabData: "tabData", tabFormat: "tabFormat", barChart: "barChart", barChartBar: "barChartBar", barChartStackedBar: "barChartStackedBar", barChart100StackedBar: "barChart100StackedBar", pieChart: "pieChart", pieChartPie: "pieChartPie", columnChart: "columnChart", columnChartColumn: "columnChartColumn", columnChartStackedColumn: "columnChartStackedColumn", columnChart100StackedColumn: "columnChart100StackedColumn", lineChart: "lineChart", lineChartLine: "lineChartLine", lineChartStackedLine: "lineChartStackedLine", lineChart100StackedLine: "lineChart100StackedLine", scatterChart: "scatterChart", scatterChartScatter: "scatterChartScatter", configuration: "configuration", configurationCategoryAxis: "configurationCategoryAxis", configurationXAxis: "configurationXAxis", configurationValueAxis: "configurationValueAxis", configurationSeries: "configurationSeries", configurationSeriesAdd: "configurationSeriesAdd", formatChartArea: "formatChartArea", formatChartAreaMargins: "formatChartAreaMargins", formatChartAreaMarginsAuto: "formatChartAreaMarginsAuto", formatChartAreaMarginsLeft: "formatChartAreaMarginsLeft", formatChartAreaMarginsRight: "formatChartAreaMarginsRight", formatChartAreaMarginsTop: "formatChartAreaMarginsTop", formatChartAreaMarginsBottom: "formatChartAreaMarginsBottom", formatChartAreaBackground: "formatChartAreaBackground", formatChartAreaBackgroundColor: "formatChartAreaBackgroundColor", formatTitle: "formatTitle", formatTitleApplyTo: "formatTitleApplyTo", formatTitleChartTitle: "formatTitleChartTitle", formatTitleChartSubtitle: "formatTitleChartSubtitle", formatTitleLabel: "formatTitleLabel", formatTitleFont: "formatTitleFont", formatTitleFontPlaceholder: "formatTitleFontPlaceholder", formatTitleSize: "formatTitleSize", formatTitleSizePlaceholder: "formatTitleSizePlaceholder", formatTitleColor: "formatTitleColor", formatSeries: "formatSeries", formatSeriesApplyTo: "formatSeriesApplyTo", formatSeriesAllSeries: "formatSeriesAllSeries", formatSeriesColor: "formatSeriesColor", formatSeriesShowLabels: "formatSeriesShowLabels", formatLegend: "formatLegend", formatLegendShowLegend: "formatLegendShowLegend", formatLegendFont: "formatLegendFont", formatLegendFontPlaceholder: "formatLegendFontPlaceholder", formatLegendSize: "formatLegendSize", formatLegendSizePlaceholder: "formatLegendSizePlaceholder", formatLegendColor: "formatLegendColor", formatLegendPosition: "formatLegendPosition", formatLegendPositionTop: "formatLegendPositionTop", formatLegendPositionBottom: "formatLegendPositionBottom", formatLegendPositionLeft: "formatLegendPositionLeft", formatLegendPositionRight: "formatLegendPositionRight", formatCategoryAxis: "formatCategoryAxis", formatXAxis: "formatXAxis", formatCategoryAxisTitle: "formatCategoryAxisTitle", formatCategoryAxisTitlePlaceholder: "formatCategoryAxisTitlePlaceholder", formatCategoryAxisTitleFont: "formatCategoryAxisTitleFont", formatCategoryAxisTitleFontPlaceholder: "formatCategoryAxisTitleFontPlaceholder", formatCategoryAxisTitleSize: "formatCategoryAxisTitleSize", formatCategoryAxisTitleSizePlaceholder: "formatCategoryAxisTitleSizePlaceholder", formatCategoryAxisTitleColor: "formatCategoryAxisTitleColor", formatCategoryAxisLabels: "formatCategoryAxisLabels", formatCategoryAxisLabelsFont: "formatCategoryAxisLabelsFont", formatCategoryAxisLabelsFontPlaceholder: "formatCategoryAxisLabelsFontPlaceholder", formatCategoryAxisLabelsSize: "formatCategoryAxisLabelsSize", formatCategoryAxisLabelsSizePlaceholder: "formatCategoryAxisLabelsSizePlaceholder", formatCategoryAxisLabelsColor: "formatCategoryAxisLabelsColor", formatCategoryAxisLabelsRotation: "formatCategoryAxisLabelsRotation", formatCategoryAxisLabelsRotationAuto: "formatCategoryAxisLabelsRotationAuto", formatCategoryAxisLabelsReverseOrder: "formatCategoryAxisLabelsReverseOrder", formatValueAxis: "formatValueAxis", formatYAxis: "formatYAxis", formatValueAxisTitle: "formatValueAxisTitle", formatValueAxisTitlePlaceholder: "formatValueAxisTitlePlaceholder", formatValueAxisTitleFont: "formatValueAxisTitleFont", formatValueAxisTitleFontPlaceholder: "formatValueAxisTitleFontPlaceholder", formatValueAxisTitleSize: "formatValueAxisTitleSize", formatValueAxisTitleSizePlaceholder: "formatValueAxisTitleSizePlaceholder", formatValueAxisTitleColor: "formatValueAxisTitleColor", formatValueAxisLabels: "formatValueAxisLabels", formatValueAxisLabelsFormat: "formatValueAxisLabelsFormat", formatValueAxisLabelsFormatText: "formatValueAxisLabelsFormatText", formatValueAxisLabelsFormatNumber: "formatValueAxisLabelsFormatNumber", formatValueAxisLabelsFormatCurrency: "formatValueAxisLabelsFormatCurrency", formatValueAxisLabelsFormatPercent: "formatValueAxisLabelsFormatPercent", formatValueAxisLabelsFont: "formatValueAxisLabelsFont", formatValueAxisLabelsFontPlaceholder: "formatValueAxisLabelsFontPlaceholder", formatValueAxisLabelsSize: "formatValueAxisLabelsSize", formatValueAxisLabelsSizePlaceholder: "formatValueAxisLabelsSizePlaceholder", formatValueAxisLabelsColor: "formatValueAxisLabelsColor", formatValueAxisLabelsRotation: "formatValueAxisLabelsRotation", formatValueAxisLabelsRotationAuto: "formatValueAxisLabelsRotationAuto" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, selector: "[kendoChartWizardMessages]", inputs: { windowTitle: "windowTitle", exportButton: "exportButton", exportPDFButton: "exportPDFButton", exportSVGButton: "exportSVGButton", exportPNGButton: "exportPNGButton", tabChart: "tabChart", tabData: "tabData", tabFormat: "tabFormat", barChart: "barChart", barChartBar: "barChartBar", barChartStackedBar: "barChartStackedBar", barChart100StackedBar: "barChart100StackedBar", pieChart: "pieChart", pieChartPie: "pieChartPie", columnChart: "columnChart", columnChartColumn: "columnChartColumn", columnChartStackedColumn: "columnChartStackedColumn", columnChart100StackedColumn: "columnChart100StackedColumn", lineChart: "lineChart", lineChartLine: "lineChartLine", lineChartStackedLine: "lineChartStackedLine", lineChart100StackedLine: "lineChart100StackedLine", scatterChart: "scatterChart", scatterChartScatter: "scatterChartScatter", configuration: "configuration", configurationCategoryAxis: "configurationCategoryAxis", configurationXAxis: "configurationXAxis", configurationValueAxis: "configurationValueAxis", configurationSeries: "configurationSeries", configurationSeriesAdd: "configurationSeriesAdd", formatChartArea: "formatChartArea", formatChartAreaMargins: "formatChartAreaMargins", formatChartAreaMarginsAuto: "formatChartAreaMarginsAuto", formatChartAreaMarginsLeft: "formatChartAreaMarginsLeft", formatChartAreaMarginsRight: "formatChartAreaMarginsRight", formatChartAreaMarginsTop: "formatChartAreaMarginsTop", formatChartAreaMarginsBottom: "formatChartAreaMarginsBottom", formatChartAreaBackground: "formatChartAreaBackground", formatChartAreaBackgroundColor: "formatChartAreaBackgroundColor", formatTitle: "formatTitle", formatTitleApplyTo: "formatTitleApplyTo", formatTitleChartTitle: "formatTitleChartTitle", formatTitleChartSubtitle: "formatTitleChartSubtitle", formatTitleLabel: "formatTitleLabel", formatTitleFont: "formatTitleFont", formatTitleFontPlaceholder: "formatTitleFontPlaceholder", formatTitleSize: "formatTitleSize", formatTitleSizePlaceholder: "formatTitleSizePlaceholder", formatTitleColor: "formatTitleColor", formatSeries: "formatSeries", formatSeriesApplyTo: "formatSeriesApplyTo", formatSeriesAllSeries: "formatSeriesAllSeries", formatSeriesColor: "formatSeriesColor", formatSeriesShowLabels: "formatSeriesShowLabels", formatLegend: "formatLegend", formatLegendShowLegend: "formatLegendShowLegend", formatLegendFont: "formatLegendFont", formatLegendFontPlaceholder: "formatLegendFontPlaceholder", formatLegendSize: "formatLegendSize", formatLegendSizePlaceholder: "formatLegendSizePlaceholder", formatLegendColor: "formatLegendColor", formatLegendPosition: "formatLegendPosition", formatLegendPositionTop: "formatLegendPositionTop", formatLegendPositionBottom: "formatLegendPositionBottom", formatLegendPositionLeft: "formatLegendPositionLeft", formatLegendPositionRight: "formatLegendPositionRight", formatCategoryAxis: "formatCategoryAxis", formatXAxis: "formatXAxis", formatCategoryAxisTitle: "formatCategoryAxisTitle", formatCategoryAxisTitlePlaceholder: "formatCategoryAxisTitlePlaceholder", formatCategoryAxisTitleFont: "formatCategoryAxisTitleFont", formatCategoryAxisTitleFontPlaceholder: "formatCategoryAxisTitleFontPlaceholder", formatCategoryAxisTitleSize: "formatCategoryAxisTitleSize", formatCategoryAxisTitleSizePlaceholder: "formatCategoryAxisTitleSizePlaceholder", formatCategoryAxisTitleColor: "formatCategoryAxisTitleColor", formatCategoryAxisLabels: "formatCategoryAxisLabels", formatCategoryAxisLabelsFont: "formatCategoryAxisLabelsFont", formatCategoryAxisLabelsFontPlaceholder: "formatCategoryAxisLabelsFontPlaceholder", formatCategoryAxisLabelsSize: "formatCategoryAxisLabelsSize", formatCategoryAxisLabelsSizePlaceholder: "formatCategoryAxisLabelsSizePlaceholder", formatCategoryAxisLabelsColor: "formatCategoryAxisLabelsColor", formatCategoryAxisLabelsRotation: "formatCategoryAxisLabelsRotation", formatCategoryAxisLabelsRotationAuto: "formatCategoryAxisLabelsRotationAuto", formatCategoryAxisLabelsReverseOrder: "formatCategoryAxisLabelsReverseOrder", formatValueAxis: "formatValueAxis", formatYAxis: "formatYAxis", formatValueAxisTitle: "formatValueAxisTitle", formatValueAxisTitlePlaceholder: "formatValueAxisTitlePlaceholder", formatValueAxisTitleFont: "formatValueAxisTitleFont", formatValueAxisTitleFontPlaceholder: "formatValueAxisTitleFontPlaceholder", formatValueAxisTitleSize: "formatValueAxisTitleSize", formatValueAxisTitleSizePlaceholder: "formatValueAxisTitleSizePlaceholder", formatValueAxisTitleColor: "formatValueAxisTitleColor", formatValueAxisLabels: "formatValueAxisLabels", formatValueAxisLabelsFormat: "formatValueAxisLabelsFormat", formatValueAxisLabelsFormatText: "formatValueAxisLabelsFormatText", formatValueAxisLabelsFormatNumber: "formatValueAxisLabelsFormatNumber", formatValueAxisLabelsFormatCurrency: "formatValueAxisLabelsFormatCurrency", formatValueAxisLabelsFormatPercent: "formatValueAxisLabelsFormatPercent", formatValueAxisLabelsFont: "formatValueAxisLabelsFont", formatValueAxisLabelsFontPlaceholder: "formatValueAxisLabelsFontPlaceholder", formatValueAxisLabelsSize: "formatValueAxisLabelsSize", formatValueAxisLabelsSizePlaceholder: "formatValueAxisLabelsSizePlaceholder", formatValueAxisLabelsColor: "formatValueAxisLabelsColor", formatValueAxisLabelsRotation: "formatValueAxisLabelsRotation", formatValueAxisLabelsRotationAuto: "formatValueAxisLabelsRotationAuto" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChartWizardMessages]'
@@ -2753,15 +2755,15 @@ class LocalizedMessagesDirective extends Messages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoChartWizardLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoChartWizardLocalizedMessages]", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => LocalizedMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -2810,7 +2812,7 @@ class ChartWizardComponent {
     /**
      * Sets the window settings for the Chart Wizard.
      */
-    windowSettings = {};
+    windowSettings;
     /**
      * @hidden
      */
@@ -2862,6 +2864,7 @@ class ChartWizardComponent {
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.stateService.direction = this.localization.rtl ? 'rtl' : 'ltr';
+        this.windowSettings = { state: this.stateService.windowState };
     }
     ngAfterViewInit() {
         this.subscription.add(this.localization.changes.subscribe(({ rtl }) => {
@@ -2884,6 +2887,9 @@ class ChartWizardComponent {
         this.stateService.dataTab = this.dataTab;
     }
     ngOnChanges(changes) {
+        if (changes['windowSettings']) {
+            this.stateService.windowState = this.windowSettings?.state ?? 'default';
+        }
         if (changes['data'] && changes['data'].currentValue?.length > 0) {
             const data = changes['data'].currentValue;
             const clonedData = structuredClone(data);
@@ -2953,8 +2959,14 @@ class ChartWizardComponent {
     get windowHeight() {
         return isPresent(this.windowSettings?.height) ? this.windowSettings.height : this.stateService.windowSize.height;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardComponent, deps: [{ token: i1.LocalizationService }, { token: StateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChartWizardComponent, isStandalone: true, selector: "kendo-chartwizard", inputs: { data: "data", defaultState: "defaultState", exportOptions: "exportOptions", collapsedConfigurationPane: "collapsedConfigurationPane", windowSettings: "windowSettings" }, outputs: { close: "close", export: "export" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
+    /**
+     * @hidden
+     */
+    get currentWindowState() {
+        return this.stateService.windowState;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardComponent, deps: [{ token: i1.LocalizationService }, { token: StateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ChartWizardComponent, isStandalone: true, selector: "kendo-chartwizard", inputs: { data: "data", defaultState: "defaultState", exportOptions: "exportOptions", collapsedConfigurationPane: "collapsedConfigurationPane", windowSettings: "windowSettings" }, outputs: { close: "close", export: "export" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -2965,7 +2977,8 @@ class ChartWizardComponent {
                 provide: LocalizationService,
                 useExisting: ChartWizardLocalizationService
             },
-            StateService
+            StateService,
+            provideComponentName('chartwizard')
         ], 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
@@ -3293,6 +3306,7 @@ class ChartWizardComponent {
           <div @overlayAppear class="k-overlay"> </div>
         }
         <kendo-window
+          #windowRef
           class="k-chart-wizard"
           [title]="messageFor('windowTitle')"
           [width]="windowWidth"
@@ -3302,15 +3316,31 @@ class ChartWizardComponent {
           [state]="windowSettings?.state"
           [resizable]="true"
           (close)="close.emit()"
+          (stateChange)="stateService.windowState = $event"
           >
+          <kendo-window-titlebar [id]="windowRef.titleId">
+            <span class="k-window-title">
+               {{ messageFor('windowTitle') }}
+            </span>
+            <div class="k-window-titlebar-actions">
+              @if (currentWindowState === 'default') {
+                <button kendoWindowMaximizeAction [attr.title]="windowRef.maximizeButtonTitle" [attr.aria-label]="windowRef.maximizeButtonTitle"></button>
+              }
+              @if (currentWindowState !== 'default') {
+                <button kendoWindowRestoreAction [attr.title]="windowRef.restoreButtonTitle" [attr.aria-label]="windowRef.restoreButtonTitle"></button>
+              }
+              <button kendoWindowCloseAction [attr.title]="windowRef.closeButtonTitle" [attr.aria-label]="windowRef.closeButtonTitle"></button>
+            </div>
+          </kendo-window-titlebar>
           <kendo-splitter class="k-chart-wizard-splitter">
-            <kendo-splitter-pane class="k-chart-wizard-preview-pane">
+            <kendo-splitter-pane class="k-chart-wizard-preview-pane" [scrollable]="false">
               <div class="k-preview-pane-header">
                 <kendo-dropdownbutton
                   [svgIcon]="exportIcon"
                   [data]="exportDropdownItems"
                   textField="text"
                   fillMode="flat"
+                  [buttonAttributes]="{ 'aria-label': messageFor('exportButton') }"
                   (itemClick)="onExport($event)"
                   >
                   {{ messageFor('exportButton') }}
@@ -3399,7 +3429,7 @@ class ChartWizardComponent {
                 </kendo-chart>
               </div>
             </kendo-splitter-pane>
-            <kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
+            <kendo-splitter-pane class="k-chart-wizard-property-pane" [scrollable]="false" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
               <kendo-tabstrip [keepTabContent]="true">
                 <kendo-tabstrip-tab [title]="messageFor('tabChart')" [selected]="true">
                   <ng-template kendoTabContent>
@@ -3425,14 +3455,14 @@ class ChartWizardComponent {
             <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
           }
         </kendo-window>
-        `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "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", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "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", "noData", "observeStyles", "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: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { 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", "highlight"] }, { 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", "lineStyle", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "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", "focusHighlight"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "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], kendo-watermark-overlay", inputs: ["licenseMessage"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChartWizardLocalizedMessages]" }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: ["template", "id"] }, { kind: "component", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: ["window"], exportAs: ["kendoWindowMaximizeAction"] }, { kind: "component", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: ["window"], exportAs: ["kendoWindowCloseAction"] }, { kind: "component", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: ["window"], exportAs: ["kendoWindowRestoreAction"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "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", "noData", "observeStyles", "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: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { 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", "highlight"] }, { 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", "lineStyle", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "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", "focusHighlight"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "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], kendo-watermark-overlay", inputs: ["licenseMessage"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChartWizardLocalizedMessages]" }], animations: [
             trigger('overlayAppear', [
                 state('in', style({ opacity: 1 })),
                 transition('void => *', [style({ opacity: 0.1 }), animate('.3s cubic-bezier(.2, .6, .4, 1)')])
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -3454,7 +3484,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             provide: LocalizationService,
                             useExisting: ChartWizardLocalizationService
                         },
-                        StateService
+                        StateService,
+                        provideComponentName('chartwizard')
                     ],
                     selector: 'kendo-chartwizard',
                     template: `
@@ -3784,6 +3815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <div @overlayAppear class="k-overlay"> </div>
         }
         <kendo-window
+          #windowRef
           class="k-chart-wizard"
           [title]="messageFor('windowTitle')"
           [width]="windowWidth"
@@ -3793,15 +3825,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           [state]="windowSettings?.state"
           [resizable]="true"
           (close)="close.emit()"
+          (stateChange)="stateService.windowState = $event"
           >
+          <kendo-window-titlebar [id]="windowRef.titleId">
+            <span class="k-window-title">
+               {{ messageFor('windowTitle') }}
+            </span>
+            <div class="k-window-titlebar-actions">
+              @if (currentWindowState === 'default') {
+                <button kendoWindowMaximizeAction [attr.title]="windowRef.maximizeButtonTitle" [attr.aria-label]="windowRef.maximizeButtonTitle"></button>
+              }
+              @if (currentWindowState !== 'default') {
+                <button kendoWindowRestoreAction [attr.title]="windowRef.restoreButtonTitle" [attr.aria-label]="windowRef.restoreButtonTitle"></button>
+              }
+              <button kendoWindowCloseAction [attr.title]="windowRef.closeButtonTitle" [attr.aria-label]="windowRef.closeButtonTitle"></button>
+            </div>
+          </kendo-window-titlebar>
           <kendo-splitter class="k-chart-wizard-splitter">
-            <kendo-splitter-pane class="k-chart-wizard-preview-pane">
+            <kendo-splitter-pane class="k-chart-wizard-preview-pane" [scrollable]="false">
               <div class="k-preview-pane-header">
                 <kendo-dropdownbutton
                   [svgIcon]="exportIcon"
                   [data]="exportDropdownItems"
                   textField="text"
                   fillMode="flat"
+                  [buttonAttributes]="{ 'aria-label': messageFor('exportButton') }"
                   (itemClick)="onExport($event)"
                   >
                   {{ messageFor('exportButton') }}
@@ -3890,7 +3938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 </kendo-chart>
               </div>
             </kendo-splitter-pane>
-            <kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
+            <kendo-splitter-pane class="k-chart-wizard-property-pane" [scrollable]="false" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
               <kendo-tabstrip [keepTabContent]="true">
                 <kendo-tabstrip-tab [title]="messageFor('tabChart')" [selected]="true">
                   <ng-template kendoTabContent>
@@ -3920,6 +3968,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                     imports: [
                         WindowComponent,
+                        WindowTitleBarComponent,
+                        WindowMaximizeActionDirective,
+                        WindowCloseActionDirective,
+                        WindowRestoreActionDirective,
                         SplitterComponent,
                         SplitterPaneComponent,
                         DropDownButtonComponent,
@@ -4087,10 +4139,10 @@ class ChartWizardGridBindingDirective {
         });
         this.chartWizardDataChange.emit(this.chartWizardData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardGridBindingDirective, deps: [{ token: i1$1.GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ChartWizardGridBindingDirective, isStandalone: true, selector: "[kendoChartWizardGridBinding]", inputs: { chartWizardData: "chartWizardData", data: ["kendoGridBinding", "data"], selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { chartWizardDataChange: "chartWizardDataChange" }, host: { listeners: { "selectedKeysChange": "onSelectionChange($event)" } }, exportAs: ["kendoChartWizardGridBinding"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardGridBindingDirective, deps: [{ token: i1$1.GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ChartWizardGridBindingDirective, isStandalone: true, selector: "[kendoChartWizardGridBinding]", inputs: { chartWizardData: "chartWizardData", data: ["kendoGridBinding", "data"], selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { chartWizardDataChange: "chartWizardDataChange" }, host: { listeners: { "selectedKeysChange": "onSelectionChange($event)" } }, exportAs: ["kendoChartWizardGridBinding"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardGridBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardGridBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChartWizardGridBinding]',
@@ -4135,15 +4187,15 @@ class CustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-chartwizard-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-chartwizard-messages", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => CustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -4208,9 +4260,9 @@ const KENDO_CHARTWIZARD = [
  * ```
  */
 class ChartWizardModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardModule, imports: [ChartWizardComponent, ChartWizardGridBindingDirective, CustomMessagesComponent], exports: [ChartWizardComponent, ChartWizardGridBindingDirective, CustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardModule, imports: [ChartWizardComponent, ChartWizardGridBindingDirective, CustomMessagesComponent], exports: [ChartWizardComponent, ChartWizardGridBindingDirective, CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardModule, providers: [
             ThemeService,
             PopupService,
             ResizeBatchService,
@@ -4221,7 +4273,7 @@ class ChartWizardModule {
             WindowContainerService
         ], imports: [ChartWizardComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChartWizardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_CHARTWIZARD],