@progress/kendo-angular-chart-wizard 16.6.0-develop.10

package/esm2020/chart-wizard.component.mjs

@@ -0,0 +1,552 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, ViewChild, } from '@angular/core';
+import { WatermarkOverlayComponent, shouldShowValidationUI } from '@progress/kendo-angular-common';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Subscription } from 'rxjs';
+import { packageMetadata } from './package-metadata';
+import { ActionTypes, createState, mergeStates, updateState } from './chart-wizard-state';
+import { exportIcon, fileIcon, fileImageIcon, filePdfIcon } from '@progress/kendo-svg-icons';
+import { StateService } from './state.service';
+import { ChartComponent } from '@progress/kendo-angular-charts';
+import { saveAs } from '@progress/kendo-file-saver';
+import { exportPDF } from '@progress/kendo-drawing';
+import { ChartWizardPropertyPaneDataTabComponent } from './property-pane/format-tab.component';
+import { ChartWizardPropertyPaneFormatTabComponent } from './property-pane/data-tab.component';
+import { ChartWizardPropertyPaneChartTabComponent } from './property-pane/chart-tab.component';
+import { LegendComponent } from '@progress/kendo-angular-charts';
+import { YAxisItemComponent } from '@progress/kendo-angular-charts';
+import { YAxisComponent } from '@progress/kendo-angular-charts';
+import { XAxisItemComponent } from '@progress/kendo-angular-charts';
+import { XAxisComponent } from '@progress/kendo-angular-charts';
+import { SeriesItemComponent } from '@progress/kendo-angular-charts';
+import { SeriesComponent } from '@progress/kendo-angular-charts';
+import { ValueAxisItemComponent } from '@progress/kendo-angular-charts';
+import { ValueAxisComponent } from '@progress/kendo-angular-charts';
+import { CategoryAxisItemComponent } from '@progress/kendo-angular-charts';
+import { CategoryAxisComponent } from '@progress/kendo-angular-charts';
+import { NgIf, NgFor } from '@angular/common';
+import { ChartAreaComponent } from '@progress/kendo-angular-charts';
+import { SubtitleComponent } from '@progress/kendo-angular-charts';
+import { TitleComponent } from '@progress/kendo-angular-charts';
+import { WindowComponent } from '@progress/kendo-angular-dialog';
+import { SplitterComponent, SplitterPaneComponent, TabContentDirective, TabStripComponent, TabStripTabComponent } from '@progress/kendo-angular-layout';
+import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
+import { ExportEvent } from './events';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./state.service";
+/**
+ * The Chart Wizard component.
+ * ```
+ */
+export class ChartWizardComponent {
+    constructor(localization, stateService) {
+        this.localization = localization;
+        this.stateService = stateService;
+        /**
+         * @hidden
+         */
+        this.showLicenseWatermark = false;
+        /**
+         * @hidden
+         */
+        this.exportIcon = exportIcon;
+        /**
+         * @hidden
+         */
+        this.exportDropdownItems = [
+            {
+                text: 'PDF File',
+                svgIcon: filePdfIcon,
+            },
+            {
+                text: 'SVG File',
+                svgIcon: fileIcon,
+            },
+            {
+                text: 'PNG File',
+                svgIcon: fileImageIcon,
+            },
+        ];
+        /**
+         * Fires when the Chart Wizard Window is to be close.
+         */
+        this.close = new EventEmitter();
+        /**
+         * Fires when the Chart is about to be exported. Can be prevented.
+         */
+        this.export = new EventEmitter();
+        this.subscription = new Subscription();
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.stateService.direction = this.localization.rtl ? 'rtl' : 'ltr';
+    }
+    get dir() {
+        return this.stateService.direction;
+    }
+    ngAfterViewInit() {
+        this.subscription.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.stateService.direction = rtl ? 'rtl' : 'ltr';
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes['data']) {
+            const data = changes['data'].currentValue;
+            const clonedData = structuredClone(data);
+            this.stateService.data = clonedData;
+            this.stateService.state = createState(clonedData, this.stateService.seriesType);
+        }
+        if (changes['defaultState']) {
+            const defaultState = changes['defaultState'].currentValue;
+            if (defaultState.seriesType) {
+                this.stateService.seriesType = defaultState.seriesType;
+                this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
+            }
+            this.stateService.currentSeries = {};
+            if (typeof defaultState.stack !== 'undefined') {
+                this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, defaultState.stack);
+            }
+            this.propertyPane?.detectChanges();
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     */
+    onExport(exportType) {
+        const args = new ExportEvent(this.chart, this.exportOptions);
+        this.export.emit(args);
+        if (args.isDefaultPrevented()) {
+            return;
+        }
+        switch (exportType.text) {
+            case 'PDF File':
+                exportPDF(this.chart.exportVisual(), this.exportOptions?.pdf).then((dataURI) => {
+                    saveAs(dataURI, this.exportOptions?.fileName || 'chart');
+                });
+                break;
+            case 'SVG File':
+                this.chart.exportSVG(this.exportOptions?.image).then((dataURI) => {
+                    saveAs(dataURI, this.exportOptions?.fileName || 'chart');
+                });
+                break;
+            case 'PNG File':
+                this.chart.exportImage(this.exportOptions?.image).then((dataURI) => {
+                    saveAs(dataURI, this.exportOptions?.fileName || 'chart');
+                });
+                break;
+        }
+    }
+}
+ChartWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardComponent, deps: [{ token: i1.LocalizationService }, { token: i2.StateService }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardComponent, isStandalone: true, selector: "kendo-chart-wizard", inputs: { data: "data", defaultState: "defaultState", exportOptions: "exportOptions" }, outputs: { close: "close", export: "export" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.chartwizard',
+        },
+        StateService
+    ], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }, { propertyName: "propertyPane", first: true, predicate: ChartWizardPropertyPaneChartTabComponent, descendants: true }], exportAs: ["kendoChartWizard"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container
+            kendoChartWizardLocalizedMessages
+            i18n-sampleMessage="kendo.chartwizard.sampleMessage|Sample description"
+            sampleMessage="foo"
+        ></ng-container>
+        <kendo-window
+            class="k-chart-wizard"
+            title="Chart Wizard"
+            [width]="1000"
+            [height]="700"
+            [resizable]="true"
+            (close)="close.emit()"
+        >
+            <kendo-splitter class="k-chart-wizard-splitter">
+                <kendo-splitter-pane class="k-chart-wizard-preview-pane">
+                    <div class="k-preview-pane-header">
+                        <kendo-dropdownbutton
+                            [svgIcon]="exportIcon"
+                            [data]="exportDropdownItems"
+                            textField="text"
+                            fillMode="flat"
+                            (itemClick)="onExport($event)"
+                        >
+                            Export
+                        </kendo-dropdownbutton>
+                    </div>
+                    <div class="k-preview-pane-content">
+                        <kendo-chart [transitions]="false">
+                            <kendo-chart-title
+                                [text]="stateService.state.title?.text"
+                                [font]="stateService.state.title?.font"
+                                [color]="stateService.state.title?.color"
+                            ></kendo-chart-title>
+                            <kendo-chart-subtitle
+                                [text]="stateService.state.subtitle?.text"
+                                [font]="stateService.state.subtitle?.font"
+                                [color]="stateService.state.subtitle?.color"
+                            ></kendo-chart-subtitle>
+                            <kendo-chart-area
+                                [background]="stateService.state.area?.background"
+                                [margin]="stateService.state.area?.margin"
+                            >
+                            </kendo-chart-area>
+                            <kendo-chart-category-axis *ngIf="stateService.state.categoryAxis">
+                                <kendo-chart-category-axis-item
+                                    *ngFor="let axis of stateService.state.categoryAxis"
+                                    [categories]="axis.categories"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                    [reverse]="axis.reverse"
+                                >
+                                </kendo-chart-category-axis-item>
+                                <kendo-chart-value-axis *ngIf="stateService.state.valueAxis">
+                                    <kendo-chart-value-axis-item
+                                        *ngFor="let axis of stateService.state.valueAxis"
+                                        [title]="{
+                                            text: axis.title?.text,
+                                            font: axis.title?.font,
+                                            color: axis.title?.color
+                                        }"
+                                        [labels]="{
+                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            font: axis.labels?.font,
+                                            color: axis.labels?.color
+                                        }"
+                                    >
+                                    </kendo-chart-value-axis-item>
+                                </kendo-chart-value-axis>
+                            </kendo-chart-category-axis>
+                            <kendo-chart-series>
+                                <kendo-chart-series-item
+                                    *ngFor="let series of stateService.state.series"
+                                    [type]="series.type"
+                                    [data]="series.data"
+                                    [stack]="series.stack"
+                                    [field]="series.field"
+                                    [categoryField]="series.categoryField"
+                                    [name]="series.name"
+                                    [color]="series.color"
+                                    [labels]="{ visible: series.labels?.visible }"
+                                    [xField]="series.xField"
+                                    [yField]="series.yField"
+                                >
+                                </kendo-chart-series-item>
+                            </kendo-chart-series>
+                            <kendo-chart-x-axis>
+                                <kendo-chart-x-axis-item
+                                    *ngFor="let axis of stateService.state.categoryAxis"
+                                    [categories]="axis.categories"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                    [reverse]="axis.reverse"
+                                >
+                                </kendo-chart-x-axis-item>
+                            </kendo-chart-x-axis>
+                            <kendo-chart-y-axis>
+                                <kendo-chart-y-axis-item
+                                    *ngFor="let axis of stateService.state.valueAxis"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                >
+                                </kendo-chart-y-axis-item>
+                            </kendo-chart-y-axis>
+                            <kendo-chart-legend
+                                [visible]="stateService.state.legend?.visible"
+                                [position]="stateService.state.legend?.position"
+                                [labels]="stateService.state.legend?.labels"
+                            >
+                            </kendo-chart-legend>
+                        </kendo-chart>
+                    </div>
+                </kendo-splitter-pane>
+                <kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" size="30%">
+                    <kendo-tabstrip [keepTabContent]="true">
+                        <kendo-tabstrip-tab title="Chart" [selected]="true">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-chart-tab>
+                                </kendo-chart-wizard-property-pane-chart-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                        <kendo-tabstrip-tab title="Data">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-data-tab> </kendo-chart-wizard-property-pane-data-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                        <kendo-tabstrip-tab title="Format">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-format-tab>
+                                </kendo-chart-wizard-property-pane-format-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                    </kendo-tabstrip>
+                </kendo-splitter-pane>
+            </kendo-splitter>
+            <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        </kendo-window>
+    `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "themeColor", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: XAxisComponent, selector: "kendo-chart-x-axis" }, { kind: "component", type: XAxisItemComponent, selector: "kendo-chart-x-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: YAxisComponent, selector: "kendo-chart-y-axis" }, { kind: "component", type: YAxisItemComponent, selector: "kendo-chart-y-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chart-wizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chart-wizard-property-pane-data-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chart-wizard-property-pane-format-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoChartWizard',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.chartwizard',
+                        },
+                        StateService
+                    ],
+                    selector: 'kendo-chart-wizard',
+                    template: `
+        <ng-container
+            kendoChartWizardLocalizedMessages
+            i18n-sampleMessage="kendo.chartwizard.sampleMessage|Sample description"
+            sampleMessage="foo"
+        ></ng-container>
+        <kendo-window
+            class="k-chart-wizard"
+            title="Chart Wizard"
+            [width]="1000"
+            [height]="700"
+            [resizable]="true"
+            (close)="close.emit()"
+        >
+            <kendo-splitter class="k-chart-wizard-splitter">
+                <kendo-splitter-pane class="k-chart-wizard-preview-pane">
+                    <div class="k-preview-pane-header">
+                        <kendo-dropdownbutton
+                            [svgIcon]="exportIcon"
+                            [data]="exportDropdownItems"
+                            textField="text"
+                            fillMode="flat"
+                            (itemClick)="onExport($event)"
+                        >
+                            Export
+                        </kendo-dropdownbutton>
+                    </div>
+                    <div class="k-preview-pane-content">
+                        <kendo-chart [transitions]="false">
+                            <kendo-chart-title
+                                [text]="stateService.state.title?.text"
+                                [font]="stateService.state.title?.font"
+                                [color]="stateService.state.title?.color"
+                            ></kendo-chart-title>
+                            <kendo-chart-subtitle
+                                [text]="stateService.state.subtitle?.text"
+                                [font]="stateService.state.subtitle?.font"
+                                [color]="stateService.state.subtitle?.color"
+                            ></kendo-chart-subtitle>
+                            <kendo-chart-area
+                                [background]="stateService.state.area?.background"
+                                [margin]="stateService.state.area?.margin"
+                            >
+                            </kendo-chart-area>
+                            <kendo-chart-category-axis *ngIf="stateService.state.categoryAxis">
+                                <kendo-chart-category-axis-item
+                                    *ngFor="let axis of stateService.state.categoryAxis"
+                                    [categories]="axis.categories"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                    [reverse]="axis.reverse"
+                                >
+                                </kendo-chart-category-axis-item>
+                                <kendo-chart-value-axis *ngIf="stateService.state.valueAxis">
+                                    <kendo-chart-value-axis-item
+                                        *ngFor="let axis of stateService.state.valueAxis"
+                                        [title]="{
+                                            text: axis.title?.text,
+                                            font: axis.title?.font,
+                                            color: axis.title?.color
+                                        }"
+                                        [labels]="{
+                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            font: axis.labels?.font,
+                                            color: axis.labels?.color
+                                        }"
+                                    >
+                                    </kendo-chart-value-axis-item>
+                                </kendo-chart-value-axis>
+                            </kendo-chart-category-axis>
+                            <kendo-chart-series>
+                                <kendo-chart-series-item
+                                    *ngFor="let series of stateService.state.series"
+                                    [type]="series.type"
+                                    [data]="series.data"
+                                    [stack]="series.stack"
+                                    [field]="series.field"
+                                    [categoryField]="series.categoryField"
+                                    [name]="series.name"
+                                    [color]="series.color"
+                                    [labels]="{ visible: series.labels?.visible }"
+                                    [xField]="series.xField"
+                                    [yField]="series.yField"
+                                >
+                                </kendo-chart-series-item>
+                            </kendo-chart-series>
+                            <kendo-chart-x-axis>
+                                <kendo-chart-x-axis-item
+                                    *ngFor="let axis of stateService.state.categoryAxis"
+                                    [categories]="axis.categories"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                    [reverse]="axis.reverse"
+                                >
+                                </kendo-chart-x-axis-item>
+                            </kendo-chart-x-axis>
+                            <kendo-chart-y-axis>
+                                <kendo-chart-y-axis-item
+                                    *ngFor="let axis of stateService.state.valueAxis"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                >
+                                </kendo-chart-y-axis-item>
+                            </kendo-chart-y-axis>
+                            <kendo-chart-legend
+                                [visible]="stateService.state.legend?.visible"
+                                [position]="stateService.state.legend?.position"
+                                [labels]="stateService.state.legend?.labels"
+                            >
+                            </kendo-chart-legend>
+                        </kendo-chart>
+                    </div>
+                </kendo-splitter-pane>
+                <kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" size="30%">
+                    <kendo-tabstrip [keepTabContent]="true">
+                        <kendo-tabstrip-tab title="Chart" [selected]="true">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-chart-tab>
+                                </kendo-chart-wizard-property-pane-chart-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                        <kendo-tabstrip-tab title="Data">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-data-tab> </kendo-chart-wizard-property-pane-data-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                        <kendo-tabstrip-tab title="Format">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-format-tab>
+                                </kendo-chart-wizard-property-pane-format-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                    </kendo-tabstrip>
+                </kendo-splitter-pane>
+            </kendo-splitter>
+            <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        </kendo-window>
+    `,
+                    standalone: true,
+                    imports: [
+                        WindowComponent,
+                        SplitterComponent,
+                        SplitterPaneComponent,
+                        DropDownButtonComponent,
+                        ChartComponent,
+                        TitleComponent,
+                        SubtitleComponent,
+                        ChartAreaComponent,
+                        NgIf,
+                        CategoryAxisComponent,
+                        NgFor,
+                        CategoryAxisItemComponent,
+                        ValueAxisComponent,
+                        ValueAxisItemComponent,
+                        SeriesComponent,
+                        SeriesItemComponent,
+                        XAxisComponent,
+                        XAxisItemComponent,
+                        YAxisComponent,
+                        YAxisItemComponent,
+                        LegendComponent,
+                        TabStripComponent,
+                        TabStripTabComponent,
+                        TabContentDirective,
+                        ChartWizardPropertyPaneChartTabComponent,
+                        ChartWizardPropertyPaneFormatTabComponent,
+                        ChartWizardPropertyPaneDataTabComponent,
+                        WatermarkOverlayComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.StateService }]; }, propDecorators: { data: [{
+                type: Input
+            }], defaultState: [{
+                type: Input
+            }], exportOptions: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], export: [{
+                type: Output
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], chart: [{
+                type: ViewChild,
+                args: [ChartComponent]
+            }], propertyPane: [{
+                type: ViewChild,
+                args: [ChartWizardPropertyPaneChartTabComponent]
+            }] } });

package/esm2020/chart-wizard.module.mjs

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { ThemeService } from '@progress/kendo-angular-charts';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { ResizeBatchService } from '@progress/kendo-angular-common';
+import { IconsService } from '@progress/kendo-angular-icons';
+import { DialogContainerService, DialogService, WindowContainerService, WindowService, } from '@progress/kendo-angular-dialog';
+import { KENDO_CHARTWIZARD } from './directives';
+import * as i0 from "@angular/core";
+import * as i1 from "./chart-wizard.component";
+import * as i2 from "./grid-integration/grid-chart-wizard.directive";
+//IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * A [module](link:site.data.urls.angular['ngmoduleapi']) that includes the Chart Wizard component and directives.
+ *
+ * Imports the ChartWizardModule into your application
+ * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
+ * that will use the Chart Wizard component.
+ */
+export class ChartWizardModule {
+}
+ChartWizardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChartWizardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardModule, imports: [i1.ChartWizardComponent, i2.ChartWizardGridBindingDirective], exports: [i1.ChartWizardComponent, i2.ChartWizardGridBindingDirective] });
+ChartWizardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardModule, providers: [
+        ThemeService,
+        PopupService,
+        ResizeBatchService,
+        IconsService,
+        DialogContainerService,
+        DialogService,
+        WindowService,
+        WindowContainerService
+    ], imports: [i1.ChartWizardComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...KENDO_CHARTWIZARD],
+                    exports: [...KENDO_CHARTWIZARD],
+                    providers: [
+                        ThemeService,
+                        PopupService,
+                        ResizeBatchService,
+                        IconsService,
+                        DialogContainerService,
+                        DialogService,
+                        WindowService,
+                        WindowContainerService
+                    ]
+                }]
+        }] });

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

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

package/esm2020/common/index.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export * from './get-wizard-data-from-data-rows';