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

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

@@ -19,7 +19,7 @@ import * as i2 from "@progress/kendo-angular-l10n";
 /**
  * @hidden
  */
-export class ChartWizardPropertyPaneDataTabComponent {
+export class ChartWizardPropertyPaneFormatTabComponent {
     constructor(stateService, localization, cdr) {
         this.stateService = stateService;
         this.localization = localization;
@@ -28,14 +28,6 @@ export class ChartWizardPropertyPaneDataTabComponent {
             { text: 'Chart Title', value: 'Chart Title' },
             { text: 'Chart Subtitle', value: 'Chart Subtitle' },
         ];
-        this.titleText = ActionTypes.titleText;
-        this.titleFontName = ActionTypes.titleFontName;
-        this.titleFontSize = ActionTypes.titleFontSize;
-        this.titleColor = ActionTypes.titleColor;
-        this.subtitleText = ActionTypes.subtitleText;
-        this.subtitleFontName = ActionTypes.subtitleFontName;
-        this.subtitleFontSize = ActionTypes.subtitleFontSize;
-        this.subtitleColor = ActionTypes.subtitleColor;
         this.areaMarginLeft = ActionTypes.areaMarginLeft;
         this.areaMarginRight = ActionTypes.areaMarginRight;
         this.areaMarginTop = ActionTypes.areaMarginTop;
@@ -46,8 +38,6 @@ export class ChartWizardPropertyPaneDataTabComponent {
         this.legendFontSize = ActionTypes.legendFontSize;
         this.legendColor = ActionTypes.legendColor;
         this.legendPosition = ActionTypes.legendPosition;
-        this.seriesColor = ActionTypes.seriesColor;
-        this.seriesLabel = ActionTypes.seriesLabel;
         this.categoryAxisTitleText = ActionTypes.categoryAxisTitleText;
         this.categoryAxisTitleFontName = ActionTypes.categoryAxisTitleFontName;
         this.categoryAxisTitleFontSize = ActionTypes.categoryAxisTitleFontSize;
@@ -95,16 +85,16 @@ export class ChartWizardPropertyPaneDataTabComponent {
             : this.stateService.state.subtitle?.color;
     }
     get chartTitleTypeAction() {
-        return this.stateService.currentTitle === 'Chart Title' ? this.titleText : this.subtitleText;
+        return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleText : ActionTypes.subtitleText;
     }
     get chartTitleTypeFontAction() {
-        return this.stateService.currentTitle === 'Chart Title' ? this.titleFontName : this.subtitleFontName;
+        return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontName : ActionTypes.subtitleFontName;
     }
     get chartTitleTypeColorAction() {
-        return this.stateService.currentTitle === 'Chart Title' ? this.titleColor : this.subtitleColor;
+        return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleColor : ActionTypes.subtitleColor;
     }
     get chartTitleTypeFontSizeAction() {
-        return this.stateService.currentTitle === 'Chart Title' ? this.titleFontSize : this.subtitleFontSize;
+        return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontSize : ActionTypes.subtitleFontSize;
     }
     get seriesData() {
         return [defaultAllSeriesItem, ...this.stateService.state.series];
@@ -124,7 +114,7 @@ export class ChartWizardPropertyPaneDataTabComponent {
         this.localization.changes.unsubscribe();
     }
     updateState(action, value) {
-        if (action === this.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
+        if (action === ActionTypes.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
             this.stateService.state = updateState(this.stateService.state, action, { name: '', all: true, visible: value.labels.visible });
             return;
         }
@@ -136,7 +126,7 @@ export class ChartWizardPropertyPaneDataTabComponent {
     toggleSeriesLabels(value) {
         this.updateCurrentSeries(this.stateService.currentSeries);
         this.stateService.currentSeries.labels = { visible: value };
-        this.updateState(this.seriesLabel, this.stateService.currentSeries);
+        this.updateState(ActionTypes.seriesLabel, this.stateService.currentSeries);
     }
     updateCurrentSeries(value) {
         if (value.name === defaultAllSeriesItem.name) {
@@ -149,11 +139,11 @@ export class ChartWizardPropertyPaneDataTabComponent {
     updateSeriesColor(value) {
         this.updateCurrentSeries(this.stateService.currentSeries);
         this.stateService.currentSeries.color = value;
-        this.updateState(this.seriesColor, this.stateService.currentSeries);
+        this.updateState(ActionTypes.seriesColor, this.stateService.currentSeries);
     }
 }
-ChartWizardPropertyPaneDataTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: i1.StateService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
+ChartWizardPropertyPaneFormatTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: i1.StateService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
         <section>
             <kendo-expansionpanel
                 [style.max-width.px]="576"
@@ -168,28 +158,28 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                             <kendo-chartwizard-property-pane-form-field
                                 text="Left"
                                 inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).left"
+                                [value]="$any(stateService.state.area.margin).left"
                                 (valueChange)="updateState(areaMarginLeft, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
                             <kendo-chartwizard-property-pane-form-field
                                 text="Right"
                                 inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).right"
+                                [value]="$any(stateService.state.area.margin).right"
                                 (valueChange)="updateState(areaMarginRight, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
                             <kendo-chartwizard-property-pane-form-field
                                 text="Top"
                                 inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).top"
+                                [value]="$any(stateService.state.area.margin).top"
                                 (valueChange)="updateState(areaMarginTop, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
                             <kendo-chartwizard-property-pane-form-field
                                 text="Bottom"
                                 inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).bottom"
+                                [value]="$any(stateService.state.area.margin).bottom"
                                 (valueChange)="updateState(areaMarginBottom, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -356,6 +346,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                         text="Show Labels"
                         [value]="showLabels"
                         [isLabelInsideFormFieldWrap]="true"
+                        [colSpan]="2"
                         inputType="checkbox"
                         (valueChange)="toggleSeriesLabels($event)"
                     >
@@ -363,10 +354,10 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
+        <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
             <kendo-expansionpanel
                 [style.max-width.px]="576"
-                [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
+                [title]="stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
                 [expanded]="true"
             >
                 <form class="k-form k-form-md">
@@ -417,6 +408,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                                 text="Font"
                                 inputType="comboBox"
                                 [data]="fontNames"
+                                [colSpan]="2"
                                 placeholder="(Inherited font)"
                                 [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
                                 (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
@@ -434,7 +426,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                             <kendo-chartwizard-property-pane-form-field
                                 text="Color"
                                 inputType="colorPicker"
-                                [value]="stateService.state.categoryAxis[0]?.labels?.color || ''"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.color"
                                 (valueChange)="updateState(categoryAxisLabelsColor, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -461,10 +453,10 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
+        <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
             <kendo-expansionpanel
                 [style.max-width.px]="576"
-                [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
+                [title]="stateService.state.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
                 [expanded]="true"
             >
                 <form class="k-form k-form-md">
@@ -524,6 +516,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                                 text="Font"
                                 inputType="comboBox"
                                 [data]="fontNames"
+                                [colSpan]="2"
                                 placeholder="(Inherited font)"
                                 [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
                                 (valueChange)="updateState(valueAxisLabelsFontName, $event)"
@@ -541,7 +534,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                             <kendo-chartwizard-property-pane-form-field
                                 text="Color"
                                 inputType="colorPicker"
-                                [value]="stateService.state.valueAxis[0]?.labels?.color || ''"
+                                [value]="stateService.state.valueAxis[0]?.labels?.color"
                                 (valueChange)="updateState(valueAxisLabelsColor, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -559,7 +552,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
             </kendo-expansionpanel>
         </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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chartwizard-property-pane-format-tab',
@@ -579,28 +572,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             <kendo-chartwizard-property-pane-form-field
                                 text="Left"
                                 inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).left"
+                                [value]="$any(stateService.state.area.margin).left"
                                 (valueChange)="updateState(areaMarginLeft, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
                             <kendo-chartwizard-property-pane-form-field
                                 text="Right"
                                 inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).right"
+                                [value]="$any(stateService.state.area.margin).right"
                                 (valueChange)="updateState(areaMarginRight, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
                             <kendo-chartwizard-property-pane-form-field
                                 text="Top"
                                 inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).top"
+                                [value]="$any(stateService.state.area.margin).top"
                                 (valueChange)="updateState(areaMarginTop, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
                             <kendo-chartwizard-property-pane-form-field
                                 text="Bottom"
                                 inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).bottom"
+                                [value]="$any(stateService.state.area.margin).bottom"
                                 (valueChange)="updateState(areaMarginBottom, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -767,6 +760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         text="Show Labels"
                         [value]="showLabels"
                         [isLabelInsideFormFieldWrap]="true"
+                        [colSpan]="2"
                         inputType="checkbox"
                         (valueChange)="toggleSeriesLabels($event)"
                     >
@@ -774,10 +768,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
+        <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
             <kendo-expansionpanel
                 [style.max-width.px]="576"
-                [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
+                [title]="stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
                 [expanded]="true"
             >
                 <form class="k-form k-form-md">
@@ -828,6 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 text="Font"
                                 inputType="comboBox"
                                 [data]="fontNames"
+                                [colSpan]="2"
                                 placeholder="(Inherited font)"
                                 [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
                                 (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
@@ -845,7 +840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             <kendo-chartwizard-property-pane-form-field
                                 text="Color"
                                 inputType="colorPicker"
-                                [value]="stateService.state.categoryAxis[0]?.labels?.color || ''"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.color"
                                 (valueChange)="updateState(categoryAxisLabelsColor, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -872,10 +867,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
+        <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
             <kendo-expansionpanel
                 [style.max-width.px]="576"
-                [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
+                [title]="stateService.state.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
                 [expanded]="true"
             >
                 <form class="k-form k-form-md">
@@ -935,6 +930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 text="Font"
                                 inputType="comboBox"
                                 [data]="fontNames"
+                                [colSpan]="2"
                                 placeholder="(Inherited font)"
                                 [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
                                 (valueChange)="updateState(valueAxisLabelsFontName, $event)"
@@ -952,7 +948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             <kendo-chartwizard-property-pane-form-field
                                 text="Color"
                                 inputType="colorPicker"
-                                [value]="stateService.state.valueAxis[0]?.labels?.color || ''"
+                                [value]="stateService.state.valueAxis[0]?.labels?.color"
                                 (valueChange)="updateState(valueAxisLabelsColor, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>

package/esm2020/series-type-button.component.mjs

@@ -18,16 +18,16 @@ export class ChartWizardSeriesTypeButtonComponent {
     }
     onSelect() {
         this.stateService.seriesType = this.seriesType;
-        this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
-        this.stateService.currentSeries = {};
-        if (this.stack) {
-            this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, this.stack);
+        if (this.stateService.data.length > 0) {
+            this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
+            this.stateService.currentSeries = {};
+            if (this.stack) {
+                this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, this.stack);
+            }
         }
+        this.stateService.dataTab.detectChanges();
     }
     isSelected() {
-        if (this.stack?.type === '100%') {
-            return this.stack?.type === this.stateService.state.series[0]?.stack?.type;
-        }
         return (this.stateService.state.seriesType === this.seriesType &&
             this.stateService.state.series[0]?.stack === this.stack);
     }

package/esm2020/state.service.mjs

@@ -16,7 +16,9 @@ export class StateService {
             series: [],
             initialSeries: [],
             columns: [],
-            data: []
+            data: [],
+            area: { margin: { top: 0, right: 0, bottom: 0, left: 0 } },
+            seriesType: 'bar'
         };
         this.seriesType = 'bar';
         this.currentTitle = 'Chart Title';