@progress/kendo-angular-chart-wizard 16.6.2 → 16.6.3-develop.2

package/chart-wizard-state.d.ts

@@ -65,10 +65,13 @@ export declare const fontNames: {
 /**
  * @hidden
  */
-export declare const rotations: {
+export declare const rotations: ({
+    text: string;
+    value: string;
+} | {
     text: string;
     value: number;
-}[];
+})[];
 /**
  * @hidden
  */
@@ -87,6 +90,10 @@ export declare const parseFont: (font?: string) => {
     size: string;
     name: string;
 };
+/**
+ * @hidden
+ */
+export declare const createInitialState: (data: ChartWizardDataRow[], seriesType: SeriesType, defaultState?: ChartWizardInitialState) => ChartWizardState;
 /**
  * @hidden
  */

package/common/models.d.ts

@@ -17,3 +17,9 @@ export interface ExportOptions {
  * @hidden
  */
 export declare type PanelType = 'Chart Area' | 'Legend' | 'Title' | 'Subtitle' | 'Value Axis' | 'Category Axis' | 'Series';
+/**
+ * @hidden
+ */
+export declare const defaultAllSeriesItem: {
+    name: string;
+};

package/esm2020/chart-wizard-state.mjs

@@ -40,6 +40,7 @@ export const fontNames = [
  * @hidden
  */
 export const rotations = [
+    { text: 'Auto', value: 'auto' },
     { text: '0°', value: 0 },
     { text: '45°', value: 45 },
     { text: '90°', value: 90 },
@@ -86,10 +87,11 @@ const axesDefinitions = {
     ],
     pie: [
         { axisType: 'category', types: categoryTypes },
-        { axisType: 'value', types: valueTypes },
+        { axisType: 'value', types: valueTypes, count: 1 },
     ],
     scatter: [
-        { axisType: 'value', types: valueTypes, count: 2 }
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes }
     ]
 };
 const getFont = (font, size) => `${size || ''} ${font || ''}`.trim();
@@ -146,10 +148,11 @@ const emptyState = () => structuredClone({
     series: [],
     initialSeries: [],
     categoryAxis: [],
-    valueAxis: [{ labels: { visible: true } }],
+    valueAxis: [{ labels: { visible: true, rotation: 'auto' } }],
     area: {
         margin: { left: undefined, right: undefined, top: undefined, bottom: undefined }
     },
+    stack: false
 });
 const categoryValueChartState = (data, seriesType, options) => {
     const state = emptyState();
@@ -183,7 +186,7 @@ const categoryValueChartState = (data, seriesType, options) => {
             type: seriesType,
             data: valuesResult,
             stack: false,
-            labels: { visible: true },
+            labels: { visible: false },
             ...(seriesType === scatterType ? scatterSeries : {})
         });
     });
@@ -193,10 +196,10 @@ const categoryValueChartState = (data, seriesType, options) => {
         state.initialSeries = structuredClone(state.series);
     }
     if (categories.length) {
-        state.categoryAxis = [{ categories, labels: { visible: true } }];
+        state.categoryAxis = [{ categories, labels: { visible: true, rotation: 'auto' } }];
         state.categoryField = state.columns[catIndex];
     }
-    state.legend = { visible: true };
+    state.legend = { visible: true, position: 'bottom' };
     state.title = { text: null };
     state.subtitle = { text: null };
     return state;
@@ -256,6 +259,15 @@ const pieChartState = (data, seriesType, options) => {
     state.initialSeries = structuredClone(state.series);
     return state;
 };
+const hasValue = (value) => value !== undefined && value !== null;
+/**
+ * @hidden
+ */
+export const createInitialState = (data, seriesType, defaultState) => {
+    const state = createState(data, defaultState?.seriesType || seriesType);
+    return typeof defaultState?.stack !== 'undefined' ?
+        updateState(state, ActionTypes.stacked, defaultState.stack) : state;
+};
 /**
  * @hidden
  */
@@ -325,7 +337,7 @@ export const mergeStates = (state, newState) => {
             newState.series[i].labels = state.series[i].labels;
         }
     }
-    if (state.series.every(s => s.labels?.visible)) {
+    if (state.series.every(s => s.labels?.visible) && isCategorical(newState.seriesType) && isCategorical(state.seriesType)) {
         newState.series.forEach(s => {
             s.labels = s.labels || {};
             s.labels.visible = true;
@@ -455,9 +467,11 @@ export const updateState = (currentState, action, value) => {
         case ActionTypes.categoryAxisLabelsColor:
             state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
             return state;
-        case ActionTypes.categoryAxisLabelsRotation:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation: value } }));
+        case ActionTypes.categoryAxisLabelsRotation: {
+            const rotation = hasValue(value) ? value : 'auto';
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation } }));
             return state;
+        }
         case ActionTypes.categoryAxisReverseOrder:
             state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, reverse: value }));
             return state;
@@ -493,9 +507,11 @@ export const updateState = (currentState, action, value) => {
         case ActionTypes.valueAxisLabelsColor:
             state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
             return state;
-        case ActionTypes.valueAxisLabelsRotation:
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation: value } }));
+        case ActionTypes.valueAxisLabelsRotation: {
+            const rotation = hasValue(value) ? value : 'auto';
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation } }));
             return state;
+        }
         default:
             return state;
     }

package/esm2020/chart-wizard.component.mjs

@@ -218,7 +218,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -234,7 +234,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                             color: axis.title?.color
                                         }"
                                         [labels]="{
-                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            rotation: axis.labels?.rotation,
                                             font: axis.labels?.font,
                                             color: axis.labels?.color
                                         }"
@@ -253,8 +253,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                     [name]="series.name"
                                     [color]="series.color"
                                     [labels]="{ visible: series.labels?.visible }"
-                                    [xField]="series.xField"
-                                    [yField]="series.yField"
+                                    [width]="series.width"
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
@@ -268,7 +267,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -285,7 +284,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -394,7 +393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -410,7 +409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                             color: axis.title?.color
                                         }"
                                         [labels]="{
-                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            rotation: axis.labels?.rotation,
                                             font: axis.labels?.font,
                                             color: axis.labels?.color
                                         }"
@@ -429,8 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                     [name]="series.name"
                                     [color]="series.color"
                                     [labels]="{ visible: series.labels?.visible }"
-                                    [xField]="series.xField"
-                                    [yField]="series.yField"
+                                    [width]="series.width"
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
@@ -444,7 +442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -461,7 +459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"

package/esm2020/common/models.mjs

@@ -2,4 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export {};
+/**
+ * @hidden
+ */
+export const defaultAllSeriesItem = { name: 'All Series' };

package/esm2020/grid-integration/grid-chart-wizard.directive.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, EventEmitter, HostListener, Inject, Input, Output } from "@angular/core";
+import { Directive, EventEmitter, HostListener, Input, Output } from "@angular/core";
 import { GridComponent } from "@progress/kendo-angular-grid";
 import { getWizardDataFromGridSelection } from "./get-wizard-data-from-grid-selection";
 import * as i0 from "@angular/core";
@@ -44,7 +44,7 @@ export class ChartWizardGridBindingDirective {
         this.chartWizardDataChange.emit(this.chartWizardData);
     }
 }
-ChartWizardGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardGridBindingDirective, deps: [{ token: GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ChartWizardGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardGridBindingDirective, deps: [{ token: i1.GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
 ChartWizardGridBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: ChartWizardGridBindingDirective, decorators: [{
             type: Directive,
@@ -53,10 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     exportAs: 'kendoChartWizardGridBinding',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent, decorators: [{
-                    type: Inject,
-                    args: [GridComponent]
-                }] }]; }, propDecorators: { chartWizardData: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }]; }, propDecorators: { chartWizardData: [{
                 type: Input
             }], chartWizardDataChange: [{
                 type: Output

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-chart-wizard',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1723021891,
-    version: '16.6.2',
+    publishDate: 1723102230,
+    version: '16.6.3-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };

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

@@ -74,7 +74,6 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                         rounded="medium"
                         size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
                 <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
@@ -126,13 +125,15 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                         [data]="stateService.state.columns"
                         [value]="stateService.state.yField"
                         (valueChange)="updateState(valueAxisY, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </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", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -153,7 +154,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         rounded="medium"
                         size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
                 <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
@@ -205,8 +205,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         [data]="stateService.state.columns"
                         [value]="stateService.state.yField"
                         (valueChange)="updateState(valueAxisY, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
             </form>

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

@@ -21,6 +21,7 @@ export class ChartWizardPropertyPaneFormFieldComponent {
         this.colSpan = 1;
         this.hasLabel = true;
         this.isLabelInsideFormFieldWrap = false;
+        this.disabled = false;
         this.valueChange = new EventEmitter();
         this.formField = true;
     }
@@ -48,7 +49,7 @@ export class ChartWizardPropertyPaneFormFieldComponent {
     }
 }
 ChartWizardPropertyPaneFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value" }, 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: `
+ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
         <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
         <div class="k-form-field-wrap">
             <kendo-label
@@ -69,6 +70,7 @@ ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                 fillMode="outline"
                 rounded="medium"
                 [value]="value"
+                [disabled]="disabled"
                 (valueChange)="valueChange.emit($event)"
             ></kendo-colorpicker>
             <kendo-dropdownlist
@@ -138,6 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 fillMode="outline"
                 rounded="medium"
                 [value]="value"
+                [disabled]="disabled"
                 (valueChange)="valueChange.emit($event)"
             ></kendo-colorpicker>
             <kendo-dropdownlist
@@ -215,6 +218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], formField: [{