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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/progress-kendo-angular-chart-wizard.mjs +904 -854
  2. package/index.d.ts +7 -2
  3. package/package-metadata.mjs +2 -2
  4. package/package.json +17 -17
package/fesm2022/progress-kendo-angular-chart-wizard.mjs CHANGED
@@ -16,12 +16,12 @@ import { saveAs } from '@progress/kendo-file-saver';
16
16
  import { exportPDF } from '@progress/kendo-drawing';
17
17
  import * as i2 from '@angular/forms';
18
18
  import * as i1$1 from '@progress/kendo-angular-grid';
19
- import { GridComponent, ReactiveEditingDirective, DataBindingDirective, ToolbarTemplateDirective, RowReorderColumnComponent, ColumnComponent, CommandColumnComponent, CellTemplateDirective, GridToolbarFocusableDirective, RemoveCommandDirective } from '@progress/kendo-angular-grid';
19
+ import { GridComponent, ReactiveEditingDirective, DataBindingDirective, ToolbarTemplateDirective, RowReorderColumnComponent, ColumnComponent, CommandColumnComponent, CellTemplateDirective, GridToolbarFocusableDirective, RemoveCommandDirective, CustomMessagesComponent as CustomMessagesComponent$1 } from '@progress/kendo-angular-grid';
20
20
  import { ExpansionPanelComponent, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective } from '@progress/kendo-angular-layout';
21
21
  import { DropDownListComponent, ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
22
22
  import { ButtonComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
23
23
  import { SVGIconComponent, IconsService } from '@progress/kendo-angular-icons';
24
- import { WindowComponent, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
24
+ import { WindowComponent, WindowTitleBarComponent, WindowMaximizeActionDirective, WindowCloseActionDirective, WindowRestoreActionDirective, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
25
25
  import { NumericTextBoxComponent, ColorPickerComponent, TextBoxComponent, CheckBoxComponent, SwitchComponent } from '@progress/kendo-angular-inputs';
26
26
  import { LabelComponent } from '@progress/kendo-angular-label';
27
27
  import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -36,8 +36,8 @@ const packageMetadata = {
36
36
  productName: 'Kendo UI for Angular',
37
37
  productCode: 'KENDOUIANGULAR',
38
38
  productCodes: ['KENDOUIANGULAR'],
39
- publishDate: 1784041252,
40
- version: '25.0.0-develop.6',
39
+ publishDate: 1784796145,
40
+ version: '25.0.0-develop.8',
41
41
  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',
42
42
  };
43
43
 
@@ -136,6 +136,7 @@ class StateService {
136
136
  deletedSeries = [];
137
137
  direction = 'ltr';
138
138
  windowSize = { width: 700, height: 550 };
139
+ windowState = 'default';
139
140
  splitterPaneSize = '300px';
140
141
  dataTab;
141
142
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -237,20 +238,22 @@ class ChartWizardPropertyPaneDataTabComponent {
237
238
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: StateService }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: ChartWizardLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
238
239
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-data-tab", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: `
239
240
  <kendo-expansionpanel [title]="messageFor('configuration')" [expanded]="true">
240
- <form class="k-form k-form-md">
241
+ <form class="k-form">
241
242
  <fieldset class="k-form-fieldset">
242
243
  <legend class="k-form-legend">
243
244
  {{ stateService.state.seriesType === 'scatter' ? messageFor('configurationXAxis') : messageFor('configurationCategoryAxis') }}
244
245
  </legend>
245
- <kendo-dropdownlist
246
- [data]="stateService.state.columns"
247
- [value]="stateService.state.categoryField"
248
- (valueChange)="updateState(categoryAxisX, $event)"
249
- fillMode="outline"
250
- rounded="medium"
251
- size="medium"
252
- >
253
- </kendo-dropdownlist>
246
+ <div class="k-form-field">
247
+ <div class="k-form-field-wrap">
248
+ <kendo-dropdownlist
249
+ [data]="stateService.state.columns"
250
+ [value]="stateService.state.categoryField"
251
+ (valueChange)="updateState(categoryAxisX, $event)"
252
+ fillMode="outline"
253
+ >
254
+ </kendo-dropdownlist>
255
+ </div>
256
+ </div>
254
257
  </fieldset>
255
258
  @if (isCategorical(stateService.state.seriesType)) {
256
259
  <fieldset class="k-form-fieldset">
@@ -263,13 +266,14 @@ class ChartWizardPropertyPaneDataTabComponent {
263
266
  (rowReorder)="onRowReorder(grid)"
264
267
  (remove)="removeData($event)"
265
268
  >
269
+ <kendo-grid-messages gridLabel="Data series"></kendo-grid-messages>
266
270
  <ng-template kendoGridToolbarTemplate>
267
271
  <button
268
272
  kendoButton
273
+ class="k-toolbar-button"
269
274
  type="button"
270
275
  [svgIcon]="plusIcon"
271
276
  fillMode="flat"
272
- rounded="medium"
273
277
  [disabled]="isDisabled(grid)"
274
278
  (click)="addData()"
275
279
  >
@@ -285,7 +289,6 @@ class ChartWizardPropertyPaneDataTabComponent {
285
289
  [svgIcon]="trashIcon"
286
290
  kendoGridRemoveCommand
287
291
  fillMode="flat"
288
- rounded="medium"
289
292
  [disabled]="stateService.state.series.length < 2"
290
293
  ></button>
291
294
  </ng-template>
@@ -305,15 +308,13 @@ class ChartWizardPropertyPaneDataTabComponent {
305
308
  [value]="stateService.state.valueField"
306
309
  (valueChange)="updateState(valueAxisY, $event)"
307
310
  fillMode="outline"
308
- rounded="medium"
309
- size="medium"
310
311
  >
311
312
  </kendo-dropdownlist>
312
313
  </fieldset>
313
314
  }
314
315
  </form>
315
316
  </kendo-expansionpanel>
316
- `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: " [kendoGridToolbarFocusable], [kendoGridAddCommand], [kendoGridCancelCommand], [kendoGridEditCommand], [kendoGridRemoveCommand], [kendoGridSaveCommand], [kendoGridExcelCommand], [kendoGridPDFCommand] " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
317
+ `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: " [kendoGridToolbarFocusable], [kendoGridAddCommand], [kendoGridCancelCommand], [kendoGridEditCommand], [kendoGridRemoveCommand], [kendoGridSaveCommand], [kendoGridExcelCommand], [kendoGridPDFCommand] " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "component", type: CustomMessagesComponent$1, selector: "kendo-grid-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
317
318
  }
318
319
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
319
320
  type: Component,
@@ -323,20 +324,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
323
324
  encapsulation: ViewEncapsulation.None,
324
325
  template: `
325
326
  <kendo-expansionpanel [title]="messageFor('configuration')" [expanded]="true">
326
- <form class="k-form k-form-md">
327
+ <form class="k-form">
327
328
  <fieldset class="k-form-fieldset">
328
329
  <legend class="k-form-legend">
329
330
  {{ stateService.state.seriesType === 'scatter' ? messageFor('configurationXAxis') : messageFor('configurationCategoryAxis') }}
330
331
  </legend>
331
- <kendo-dropdownlist
332
- [data]="stateService.state.columns"
333
- [value]="stateService.state.categoryField"
334
- (valueChange)="updateState(categoryAxisX, $event)"
335
- fillMode="outline"
336
- rounded="medium"
337
- size="medium"
338
- >
339
- </kendo-dropdownlist>
332
+ <div class="k-form-field">
333
+ <div class="k-form-field-wrap">
334
+ <kendo-dropdownlist
335
+ [data]="stateService.state.columns"
336
+ [value]="stateService.state.categoryField"
337
+ (valueChange)="updateState(categoryAxisX, $event)"
338
+ fillMode="outline"
339
+ >
340
+ </kendo-dropdownlist>
341
+ </div>
342
+ </div>
340
343
  </fieldset>
341
344
  @if (isCategorical(stateService.state.seriesType)) {
342
345
  <fieldset class="k-form-fieldset">
@@ -349,13 +352,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
349
352
  (rowReorder)="onRowReorder(grid)"
350
353
  (remove)="removeData($event)"
351
354
  >
355
+ <kendo-grid-messages gridLabel="Data series"></kendo-grid-messages>
352
356
  <ng-template kendoGridToolbarTemplate>
353
357
  <button
354
358
  kendoButton
359
+ class="k-toolbar-button"
355
360
  type="button"
356
361
  [svgIcon]="plusIcon"
357
362
  fillMode="flat"
358
- rounded="medium"
359
363
  [disabled]="isDisabled(grid)"
360
364
  (click)="addData()"
361
365
  >
@@ -371,7 +375,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
371
375
  [svgIcon]="trashIcon"
372
376
  kendoGridRemoveCommand
373
377
  fillMode="flat"
374
- rounded="medium"
375
378
  [disabled]="stateService.state.series.length < 2"
376
379
  ></button>
377
380
  </ng-template>
@@ -391,8 +394,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
391
394
  [value]="stateService.state.valueField"
392
395
  (valueChange)="updateState(valueAxisY, $event)"
393
396
  fillMode="outline"
394
- rounded="medium"
395
- size="medium"
396
397
  >
397
398
  </kendo-dropdownlist>
398
399
  </fieldset>
@@ -414,7 +415,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
414
415
  CommandColumnComponent,
415
416
  CellTemplateDirective,
416
417
  GridToolbarFocusableDirective,
417
- RemoveCommandDirective
418
+ RemoveCommandDirective,
419
+ CustomMessagesComponent$1
418
420
  ]
419
421
  }]
420
422
  }], ctorParameters: () => [{ type: StateService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: ChartWizardLocalizationService }], propDecorators: { grid: [{
@@ -457,7 +459,7 @@ class ChartWizardSeriesTypeButtonComponent {
457
459
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ChartWizardSeriesTypeButtonComponent, isStandalone: true, selector: "kendo-chartwizard-series-type-button", inputs: { title: "title", chartTypeIcon: "chartTypeIcon", stack: "stack", seriesType: "seriesType" }, ngImport: i0, template: `
458
460
  <div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
459
461
  <div class="k-icon-background-area">
460
- <kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="primary"> </kendo-svgicon>
462
+ <kendo-svgicon [icon]="chartTypeIcon" size="xlarge"> </kendo-svgicon>
461
463
  </div>
462
464
  {{ title }}
463
465
  </div>
@@ -470,7 +472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
470
472
  template: `
471
473
  <div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
472
474
  <div class="k-icon-background-area">
473
- <kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="primary"> </kendo-svgicon>
475
+ <kendo-svgicon [icon]="chartTypeIcon" size="xlarge"> </kendo-svgicon>
474
476
  </div>
475
477
  {{ title }}
476
478
  </div>
@@ -848,21 +850,20 @@ class ChartWizardPropertyPaneFormFieldComponent {
848
850
  }
849
851
  }
850
852
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
851
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
853
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "[kendoChartWizardPropertyPaneFormField]", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
852
854
  @if (hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
853
- <kendo-label class="k-form-label" [text]="text"></kendo-label>
855
+ <kendo-label labelCssClass="k-form-label" [text]="text"></kendo-label>
854
856
  }
855
857
  <div class="k-form-field-wrap">
856
858
  @if (hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
857
859
  <kendo-label
858
- class="k-form-label"
860
+ labelCssClass="k-form-label"
859
861
  [text]="text"
860
862
  ></kendo-label>
861
863
  }
862
864
  @if (inputType === 'numeric') {
863
865
  <kendo-numerictextbox
864
866
  fillMode="outline"
865
- rounded="medium"
866
867
  [value]="value"
867
868
  (valueChange)="valueChange.emit($event)"
868
869
  [placeholder]="placeholder"
@@ -871,7 +872,6 @@ class ChartWizardPropertyPaneFormFieldComponent {
871
872
  @if (inputType === 'colorPicker') {
872
873
  <kendo-colorpicker
873
874
  fillMode="outline"
874
- rounded="medium"
875
875
  [value]="value"
876
876
  [disabled]="disabled"
877
877
  (valueChange)="valueChange.emit($event)"
@@ -884,8 +884,6 @@ class ChartWizardPropertyPaneFormFieldComponent {
884
884
  valueField="value"
885
885
  [valuePrimitive]="true"
886
886
  fillMode="outline"
887
- rounded="medium"
888
- size="medium"
889
887
  [value]="value"
890
888
  (valueChange)="valueChange.emit($event)"
891
889
  ></kendo-dropdownlist>
@@ -898,8 +896,6 @@ class ChartWizardPropertyPaneFormFieldComponent {
898
896
  valueField="value"
899
897
  [valuePrimitive]="true"
900
898
  fillMode="outline"
901
- rounded="medium"
902
- size="medium"
903
899
  [placeholder]="placeholder"
904
900
  (valueChange)="valueChange.emit($event)"
905
901
  ></kendo-combobox>
@@ -907,7 +903,6 @@ class ChartWizardPropertyPaneFormFieldComponent {
907
903
  @if (inputType === 'text') {
908
904
  <kendo-textbox
909
905
  fillMode="outline"
910
- rounded="medium"
911
906
  [placeholder]="placeholder"
912
907
  [value]="value"
913
908
  (valueChange)="valueChange.emit($event)"
@@ -931,23 +926,22 @@ class ChartWizardPropertyPaneFormFieldComponent {
931
926
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
932
927
  type: Component,
933
928
  args: [{
934
- selector: 'kendo-chartwizard-property-pane-form-field',
929
+ selector: '[kendoChartWizardPropertyPaneFormField]',
935
930
  changeDetection: ChangeDetectionStrategy.OnPush,
936
931
  template: `
937
932
  @if (hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
938
- <kendo-label class="k-form-label" [text]="text"></kendo-label>
933
+ <kendo-label labelCssClass="k-form-label" [text]="text"></kendo-label>
939
934
  }
940
935
  <div class="k-form-field-wrap">
941
936
  @if (hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox') {
942
937
  <kendo-label
943
- class="k-form-label"
938
+ labelCssClass="k-form-label"
944
939
  [text]="text"
945
940
  ></kendo-label>
946
941
  }
947
942
  @if (inputType === 'numeric') {
948
943
  <kendo-numerictextbox
949
944
  fillMode="outline"
950
- rounded="medium"
951
945
  [value]="value"
952
946
  (valueChange)="valueChange.emit($event)"
953
947
  [placeholder]="placeholder"
@@ -956,7 +950,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
956
950
  @if (inputType === 'colorPicker') {
957
951
  <kendo-colorpicker
958
952
  fillMode="outline"
959
- rounded="medium"
960
953
  [value]="value"
961
954
  [disabled]="disabled"
962
955
  (valueChange)="valueChange.emit($event)"
@@ -969,8 +962,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
969
962
  valueField="value"
970
963
  [valuePrimitive]="true"
971
964
  fillMode="outline"
972
- rounded="medium"
973
- size="medium"
974
965
  [value]="value"
975
966
  (valueChange)="valueChange.emit($event)"
976
967
  ></kendo-dropdownlist>
@@ -983,8 +974,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
983
974
  valueField="value"
984
975
  [valuePrimitive]="true"
985
976
  fillMode="outline"
986
- rounded="medium"
987
- size="medium"
988
977
  [placeholder]="placeholder"
989
978
  (valueChange)="valueChange.emit($event)"
990
979
  ></kendo-combobox>
@@ -992,7 +981,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
992
981
  @if (inputType === 'text') {
993
982
  <kendo-textbox
994
983
  fillMode="outline"
995
- rounded="medium"
996
984
  [placeholder]="placeholder"
997
985
  [value]="value"
998
986
  (valueChange)="valueChange.emit($event)"
@@ -1245,421 +1233,428 @@ class ChartWizardPropertyPaneFormatTabComponent {
1245
1233
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: StateService }, { token: ChartWizardLocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1246
1234
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
1247
1235
  <section>
1248
- <kendo-expansionpanel
1249
- [style.max-width.px]="576"
1250
- [title]="messageFor('formatChartArea')"
1251
- [expanded]="true"
1252
- [attr.dir]="stateService.direction"
1236
+ <kendo-expansionpanel
1237
+ [style.max-width.px]="576"
1238
+ [title]="messageFor('formatChartArea')"
1239
+ [expanded]="true"
1240
+ [attr.dir]="stateService.direction"
1253
1241
  >
1254
- <form class="k-form k-form-md">
1255
- <fieldset class="k-form-fieldset">
1256
- <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
1257
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1258
- <kendo-chartwizard-property-pane-form-field
1259
- [text]="messageFor('formatChartAreaMarginsLeft')"
1260
- inputType="numeric"
1261
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1262
- [value]="$any(stateService.state.area.margin).left"
1263
- (valueChange)="updateState(areaMarginLeft, $event)"
1264
- >
1265
- </kendo-chartwizard-property-pane-form-field>
1266
- <kendo-chartwizard-property-pane-form-field
1267
- [text]="messageFor('formatChartAreaMarginsRight')"
1268
- inputType="numeric"
1269
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1270
- [value]="$any(stateService.state.area.margin).right"
1271
- (valueChange)="updateState(areaMarginRight, $event)"
1272
- >
1273
- </kendo-chartwizard-property-pane-form-field>
1274
- <kendo-chartwizard-property-pane-form-field
1275
- [text]="messageFor('formatChartAreaMarginsTop')"
1276
- inputType="numeric"
1277
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1278
- [value]="$any(stateService.state.area.margin).top"
1279
- (valueChange)="updateState(areaMarginTop, $event)"
1280
- >
1281
- </kendo-chartwizard-property-pane-form-field>
1282
- <kendo-chartwizard-property-pane-form-field
1283
- [text]="messageFor('formatChartAreaMarginsBottom')"
1284
- inputType="numeric"
1285
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1286
- [value]="$any(stateService.state.area.margin).bottom"
1287
- (valueChange)="updateState(areaMarginBottom, $event)"
1288
- >
1289
- </kendo-chartwizard-property-pane-form-field>
1290
- </div>
1291
- </fieldset>
1292
- <fieldset class="k-form-fieldset">
1293
- <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
1294
- <kendo-chartwizard-property-pane-form-field
1295
- [text]="messageFor('formatChartAreaBackgroundColor')"
1296
- inputType="colorPicker"
1297
- [value]="stateService.state.area?.background"
1298
- (valueChange)="updateState(areaBackground, $event)"
1299
- >
1300
- </kendo-chartwizard-property-pane-form-field>
1301
- </fieldset>
1302
- </form>
1303
- </kendo-expansionpanel>
1242
+ <form class="k-form">
1243
+ <fieldset class="k-form-fieldset">
1244
+ <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
1245
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1246
+ <div kendoChartWizardPropertyPaneFormField
1247
+ [text]="messageFor('formatChartAreaMarginsLeft')"
1248
+ inputType="numeric"
1249
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1250
+ [value]="$any(stateService.state.area.margin).left"
1251
+ (valueChange)="updateState(areaMarginLeft, $event)"
1252
+ >
1253
+ </div>
1254
+ <div kendoChartWizardPropertyPaneFormField
1255
+ [text]="messageFor('formatChartAreaMarginsRight')"
1256
+ inputType="numeric"
1257
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1258
+ [value]="$any(stateService.state.area.margin).right"
1259
+ (valueChange)="updateState(areaMarginRight, $event)"
1260
+ >
1261
+ </div>
1262
+ <div kendoChartWizardPropertyPaneFormField
1263
+ [text]="messageFor('formatChartAreaMarginsTop')"
1264
+ inputType="numeric"
1265
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1266
+ [value]="$any(stateService.state.area.margin).top"
1267
+ (valueChange)="updateState(areaMarginTop, $event)"
1268
+ >
1269
+ </div>
1270
+ <div kendoChartWizardPropertyPaneFormField
1271
+ [text]="messageFor('formatChartAreaMarginsBottom')"
1272
+ inputType="numeric"
1273
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1274
+ [value]="$any(stateService.state.area.margin).bottom"
1275
+ (valueChange)="updateState(areaMarginBottom, $event)"
1276
+ >
1277
+ </div>
1278
+ </div>
1279
+ </fieldset>
1280
+ <fieldset class="k-form-fieldset">
1281
+ <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
1282
+ <div kendoChartWizardPropertyPaneFormField
1283
+ [text]="messageFor('formatChartAreaBackgroundColor')"
1284
+ inputType="colorPicker"
1285
+ [value]="stateService.state.area?.background"
1286
+ (valueChange)="updateState(areaBackground, $event)"
1287
+ >
1288
+ </div>
1289
+ </fieldset>
1290
+ </form>
1291
+ </kendo-expansionpanel>
1304
1292
  </section>
1305
1293
  <section>
1306
- <kendo-expansionpanel
1307
- [style.max-width.px]="576"
1308
- [title]="messageFor('formatTitle')"
1309
- [expanded]="true"
1294
+ <kendo-expansionpanel
1295
+ [style.max-width.px]="576"
1296
+ [title]="messageFor('formatTitle')"
1297
+ [expanded]="true"
1310
1298
  >
1311
- <form class="k-form k-form-md">
1312
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1313
- <kendo-chartwizard-property-pane-form-field
1314
- [text]="messageFor('formatTitleApplyTo')"
1315
- inputType="dropDownList"
1316
- [data]="chartTitles"
1317
- [colSpan]="2"
1318
- [value]="stateService.currentTitle"
1319
- (valueChange)="changeCurrentTitle($event)"
1320
- >
1321
- </kendo-chartwizard-property-pane-form-field>
1322
- <kendo-chartwizard-property-pane-form-field
1323
- [text]="messageFor('formatTitleLabel')"
1324
- inputType="text"
1325
- [colSpan]="2"
1326
- [value]="chartTitleTypeText"
1327
- (valueChange)="updateState(chartTitleTypeAction, $event)"
1328
- >
1329
- </kendo-chartwizard-property-pane-form-field>
1330
- <kendo-chartwizard-property-pane-form-field
1331
- [text]="messageFor('formatTitleFont')"
1332
- inputType="comboBox"
1333
- [data]="fontNames"
1334
- [colSpan]="2"
1335
- [value]="chartTitleTypeFont"
1336
- [placeholder]="messageFor('formatTitleFontPlaceholder')"
1337
- (valueChange)="updateState(chartTitleTypeFontAction, $event)"
1338
- >
1339
- </kendo-chartwizard-property-pane-form-field>
1340
- <kendo-chartwizard-property-pane-form-field
1341
- [text]="messageFor('formatTitleSize')"
1342
- inputType="comboBox"
1343
- [placeholder]="messageFor('formatTitleSizePlaceholder')"
1344
- [data]="fontSizes"
1345
- [value]="chartTitleTypeFontSize"
1346
- (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
1347
- >
1348
- </kendo-chartwizard-property-pane-form-field>
1349
- <kendo-chartwizard-property-pane-form-field
1350
- [text]="messageFor('formatTitleColor')"
1351
- inputType="colorPicker"
1352
- [value]="chartTitleTypeColor"
1353
- (valueChange)="updateState(chartTitleTypeColorAction, $event)"
1354
- >
1355
- </kendo-chartwizard-property-pane-form-field>
1356
- </div>
1357
- </form>
1358
- </kendo-expansionpanel>
1299
+ <form class="k-form">
1300
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1301
+ <div kendoChartWizardPropertyPaneFormField
1302
+ [text]="messageFor('formatTitleApplyTo')"
1303
+ inputType="dropDownList"
1304
+ [data]="chartTitles"
1305
+ [colSpan]="2"
1306
+ [value]="stateService.currentTitle"
1307
+ (valueChange)="changeCurrentTitle($event)"
1308
+ >
1309
+ </div>
1310
+ <div kendoChartWizardPropertyPaneFormField
1311
+ [text]="messageFor('formatTitleLabel')"
1312
+ inputType="text"
1313
+ [colSpan]="2"
1314
+ [value]="chartTitleTypeText"
1315
+ (valueChange)="updateState(chartTitleTypeAction, $event)"
1316
+ >
1317
+ </div>
1318
+ <div kendoChartWizardPropertyPaneFormField
1319
+ [text]="messageFor('formatTitleFont')"
1320
+ inputType="comboBox"
1321
+ [data]="fontNames"
1322
+ [colSpan]="2"
1323
+ [value]="chartTitleTypeFont"
1324
+ [placeholder]="messageFor('formatTitleFontPlaceholder')"
1325
+ (valueChange)="updateState(chartTitleTypeFontAction, $event)"
1326
+ >
1327
+ </div>
1328
+ <div kendoChartWizardPropertyPaneFormField
1329
+ [text]="messageFor('formatTitleSize')"
1330
+ inputType="comboBox"
1331
+ [placeholder]="messageFor('formatTitleSizePlaceholder')"
1332
+ [data]="fontSizes"
1333
+ [value]="chartTitleTypeFontSize"
1334
+ (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
1335
+ >
1336
+ </div>
1337
+ <div kendoChartWizardPropertyPaneFormField
1338
+ [text]="messageFor('formatTitleColor')"
1339
+ inputType="colorPicker"
1340
+ [value]="chartTitleTypeColor"
1341
+ (valueChange)="updateState(chartTitleTypeColorAction, $event)"
1342
+ >
1343
+ </div>
1344
+ </div>
1345
+ </form>
1346
+ </kendo-expansionpanel>
1359
1347
  </section>
1360
1348
  <section>
1361
- <kendo-expansionpanel
1362
- [style.max-width.px]="576"
1363
- [title]="messageFor('formatLegend')"
1364
- [expanded]="true"
1349
+ <kendo-expansionpanel
1350
+ [style.max-width.px]="576"
1351
+ [title]="messageFor('formatSeries')"
1352
+ [expanded]="true"
1365
1353
  >
1366
- <form class="k-form k-form-md">
1367
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1368
- <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
1369
- <kendo-switch
1370
- #toggleLegend
1371
- onLabel="On"
1372
- offLabel="Off"
1373
- thumbRounded="full"
1374
- size="medium"
1375
- [checked]="stateService.state.legend?.visible"
1376
- (valueChange)="updateState(legendVisible, $event)"
1377
- ></kendo-switch>
1378
- <kendo-chartwizard-property-pane-form-field
1379
- [text]="messageFor('formatLegendFont')"
1380
- inputType="comboBox"
1381
- [data]="fontNames"
1382
- [colSpan]="2"
1383
- [placeholder]="messageFor('formatLegendFontPlaceholder')"
1384
- [value]="parseFont(stateService.state.legend?.labels?.font).name"
1385
- (valueChange)="updateState(legendFontName, $event)"
1386
- >
1387
- </kendo-chartwizard-property-pane-form-field>
1388
- <kendo-chartwizard-property-pane-form-field
1389
- [text]="messageFor('formatLegendSize')"
1390
- inputType="comboBox"
1391
- [data]="fontSizes"
1392
- [placeholder]="messageFor('formatLegendSizePlaceholder')"
1393
- [value]="parseFont(stateService.state.legend?.labels?.font).size"
1394
- (valueChange)="updateState(legendFontSize, $event)"
1395
- >
1396
- </kendo-chartwizard-property-pane-form-field>
1397
- <kendo-chartwizard-property-pane-form-field
1398
- [text]="messageFor('formatLegendColor')"
1399
- inputType="colorPicker"
1400
- [value]="stateService.state.legend?.labels?.color"
1401
- (valueChange)="updateState(legendColor, $event)"
1402
- >
1403
- </kendo-chartwizard-property-pane-form-field>
1404
- <kendo-chartwizard-property-pane-form-field
1405
- [text]="messageFor('formatLegendPosition')"
1406
- inputType="dropDownList"
1407
- [colSpan]="2"
1408
- [data]="legendPositions"
1409
- [value]="stateService.state.legend?.position"
1410
- (valueChange)="updateState(legendPosition, $event)"
1411
- >
1412
- </kendo-chartwizard-property-pane-form-field>
1413
- </div>
1414
- </form>
1415
- </kendo-expansionpanel>
1354
+ <form class="k-form">
1355
+ <div class="k-form-field">
1356
+ <kendo-label
1357
+ [for]="seriesDropDown"
1358
+ labelCssClass="k-form-label"
1359
+ [text]="messageFor('formatSeriesApplyTo')"
1360
+ ></kendo-label>
1361
+ <div class="k-form-field-wrap">
1362
+ <kendo-dropdownlist
1363
+ #seriesDropDown
1364
+ [data]="seriesData"
1365
+ textField="text"
1366
+ valueField="name"
1367
+ fillMode="outline"
1368
+ [value]="stateService.currentSeries"
1369
+ (valueChange)="updateCurrentSeries($event)"
1370
+ ></kendo-dropdownlist>
1371
+ </div>
1372
+ </div>
1373
+
1374
+ <div kendoChartWizardPropertyPaneFormField
1375
+ [text]="messageFor('formatSeriesColor')"
1376
+ [value]="stateService.currentSeries?.color"
1377
+ inputType="colorPicker"
1378
+ (valueChange)="updateSeriesColor($event)"
1379
+ >
1380
+ </div>
1381
+ <div kendoChartWizardPropertyPaneFormField
1382
+ [text]="messageFor('formatSeriesShowLabels')"
1383
+ [value]="showLabels"
1384
+ [isLabelInsideFormFieldWrap]="true"
1385
+ inputType="checkbox"
1386
+ (valueChange)="toggleSeriesLabels($event)"
1387
+ >
1388
+ </div>
1389
+ </form>
1390
+ </kendo-expansionpanel>
1416
1391
  </section>
1417
1392
  <section>
1418
- <kendo-expansionpanel
1419
- [style.max-width.px]="576"
1420
- [title]="messageFor('formatSeries')"
1421
- [expanded]="true"
1393
+ <kendo-expansionpanel
1394
+ [style.max-width.px]="576"
1395
+ [title]="messageFor('formatLegend')"
1396
+ [expanded]="true"
1422
1397
  >
1423
- <form class="k-form k-form-md">
1424
- <div class="k-form-field">
1425
- <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
1426
- <div class="k-form-field-wrap">
1427
- <kendo-dropdownlist
1428
- #seriesDropDown
1429
- [data]="seriesData"
1430
- textField="text"
1431
- valueField="name"
1432
- fillMode="outline"
1433
- rounded="medium"
1434
- size="medium"
1435
- [value]="stateService.currentSeries"
1436
- (valueChange)="updateCurrentSeries($event)"
1437
- ></kendo-dropdownlist>
1438
- </div>
1439
- </div>
1440
-
1441
- <kendo-chartwizard-property-pane-form-field
1442
- [text]="messageFor('formatSeriesColor')"
1443
- [value]="stateService.currentSeries?.color"
1444
- inputType="colorPicker"
1445
- [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
1446
- (valueChange)="updateSeriesColor($event)"
1447
- >
1448
- </kendo-chartwizard-property-pane-form-field>
1449
- <kendo-chartwizard-property-pane-form-field
1450
- [text]="messageFor('formatSeriesShowLabels')"
1451
- [value]="showLabels"
1452
- [isLabelInsideFormFieldWrap]="true"
1453
- [colSpan]="2"
1454
- inputType="checkbox"
1455
- (valueChange)="toggleSeriesLabels($event)"
1456
- >
1457
- </kendo-chartwizard-property-pane-form-field>
1458
- </form>
1459
- </kendo-expansionpanel>
1398
+ <form class="k-form">
1399
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1400
+ <div class="k-form-field k-col-span-2">
1401
+ <div class="k-form-field-wrap">
1402
+ <div class="k-d-flex k-align-items-center k-gap-2">
1403
+ <kendo-label
1404
+ [for]="toggleLegend"
1405
+ [text]="messageFor('formatLegendShowLegend')"
1406
+ ></kendo-label>
1407
+ <kendo-switch
1408
+ #toggleLegend
1409
+ onLabel="On"
1410
+ offLabel="Off"
1411
+ [checked]="stateService.state.legend?.visible"
1412
+ (valueChange)="updateState(legendVisible, $event)"
1413
+ ></kendo-switch>
1414
+ </div>
1415
+ </div>
1416
+ </div>
1417
+ <div kendoChartWizardPropertyPaneFormField
1418
+ [text]="messageFor('formatLegendFont')"
1419
+ inputType="comboBox"
1420
+ [data]="fontNames"
1421
+ [colSpan]="2"
1422
+ [placeholder]="messageFor('formatLegendFontPlaceholder')"
1423
+ [value]="parseFont(stateService.state.legend?.labels?.font).name"
1424
+ (valueChange)="updateState(legendFontName, $event)"
1425
+ >
1426
+ </div>
1427
+ <div kendoChartWizardPropertyPaneFormField
1428
+ [text]="messageFor('formatLegendSize')"
1429
+ inputType="comboBox"
1430
+ [data]="fontSizes"
1431
+ [placeholder]="messageFor('formatLegendSizePlaceholder')"
1432
+ [value]="parseFont(stateService.state.legend?.labels?.font).size"
1433
+ (valueChange)="updateState(legendFontSize, $event)"
1434
+ >
1435
+ </div>
1436
+ <div kendoChartWizardPropertyPaneFormField
1437
+ [text]="messageFor('formatLegendColor')"
1438
+ inputType="colorPicker"
1439
+ [value]="stateService.state.legend?.labels?.color"
1440
+ (valueChange)="updateState(legendColor, $event)"
1441
+ >
1442
+ </div>
1443
+ <div kendoChartWizardPropertyPaneFormField
1444
+ [text]="messageFor('formatLegendPosition')"
1445
+ inputType="dropDownList"
1446
+ [colSpan]="2"
1447
+ [data]="legendPositions"
1448
+ [value]="stateService.state.legend?.position"
1449
+ (valueChange)="updateState(legendPosition, $event)"
1450
+ >
1451
+ </div>
1452
+ </div>
1453
+ </form>
1454
+ </kendo-expansionpanel>
1460
1455
  </section>
1461
1456
  @if (stateService.state.seriesType !== 'pie') {
1462
- <section class="k-row-start-1 k-row-end-3 k-col-start-3">
1457
+ <section>
1463
1458
  <kendo-expansionpanel
1464
- [style.max-width.px]="576"
1465
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
1466
- [expanded]="true"
1467
- >
1468
- <form class="k-form k-form-md">
1469
- <fieldset class="k-form-fieldset">
1470
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
1471
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1472
- <kendo-chartwizard-property-pane-form-field
1473
- inputType="text"
1474
- [hasLabel]="false"
1475
- [colSpan]="2"
1476
- [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
1477
- [value]="stateService.state.categoryAxis[0]?.title?.text || null"
1478
- (valueChange)="updateState(categoryAxisTitleText, $event)"
1479
- >
1480
- </kendo-chartwizard-property-pane-form-field>
1481
- <kendo-chartwizard-property-pane-form-field
1482
- [text]="messageFor('formatCategoryAxisTitleFont')"
1483
- inputType="comboBox"
1484
- [data]="fontNames"
1485
- [colSpan]="2"
1486
- [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
1487
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
1488
- (valueChange)="updateState(categoryAxisTitleFontName, $event)"
1489
- >
1490
- </kendo-chartwizard-property-pane-form-field>
1491
- <kendo-chartwizard-property-pane-form-field
1492
- [text]="messageFor('formatCategoryAxisTitleSize')"
1493
- inputType="comboBox"
1494
- [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
1495
- [data]="fontSizes"
1496
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
1497
- (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
1498
- >
1499
- </kendo-chartwizard-property-pane-form-field>
1500
- <kendo-chartwizard-property-pane-form-field
1501
- [text]="messageFor('formatCategoryAxisTitleColor')"
1502
- inputType="colorPicker"
1503
- [value]="stateService.state.categoryAxis[0]?.title?.color"
1504
- (valueChange)="updateState(categoryAxisTitleColor, $event)"
1505
- >
1506
- </kendo-chartwizard-property-pane-form-field>
1507
- </div>
1508
- </fieldset>
1509
- <fieldset class="k-form-fieldset">
1510
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
1511
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1512
- <kendo-chartwizard-property-pane-form-field
1513
- [text]="messageFor('formatCategoryAxisLabelsFont')"
1514
- inputType="comboBox"
1515
- [data]="fontNames"
1516
- [colSpan]="2"
1517
- [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
1518
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
1519
- (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
1520
- >
1521
- </kendo-chartwizard-property-pane-form-field>
1522
- <kendo-chartwizard-property-pane-form-field
1523
- [text]="messageFor('formatCategoryAxisLabelsSize')"
1524
- inputType="comboBox"
1525
- [data]="fontSizes"
1526
- [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
1527
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
1528
- (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
1529
- >
1530
- </kendo-chartwizard-property-pane-form-field>
1531
- <kendo-chartwizard-property-pane-form-field
1532
- [text]="messageFor('formatCategoryAxisLabelsColor')"
1533
- inputType="colorPicker"
1534
- [value]="stateService.state.categoryAxis[0]?.labels?.color"
1535
- (valueChange)="updateState(categoryAxisLabelsColor, $event)"
1536
- >
1537
- </kendo-chartwizard-property-pane-form-field>
1538
- <kendo-chartwizard-property-pane-form-field
1539
- [text]="messageFor('formatCategoryAxisLabelsRotation')"
1540
- inputType="dropDownList"
1541
- [data]="labelsCategoryAxisRotation"
1542
- [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
1543
- (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
1544
- >
1545
- </kendo-chartwizard-property-pane-form-field>
1546
- <span></span>
1547
- <kendo-chartwizard-property-pane-form-field
1548
- [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
1549
- [isLabelInsideFormFieldWrap]="true"
1550
- inputType="checkbox"
1551
- [colSpan]="2"
1552
- [value]="stateService.state.categoryAxis[0]?.reverse"
1553
- (valueChange)="updateState(categoryAxisReverseOrder, $event)"
1554
- >
1555
- </kendo-chartwizard-property-pane-form-field>
1556
- </div>
1557
- </fieldset>
1558
- </form>
1459
+ [style.max-width.px]="576"
1460
+ [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
1461
+ [expanded]="true"
1462
+ >
1463
+ <form class="k-form">
1464
+ <fieldset class="k-form-fieldset">
1465
+ <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
1466
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1467
+ <div kendoChartWizardPropertyPaneFormField
1468
+ inputType="text"
1469
+ [hasLabel]="false"
1470
+ [colSpan]="2"
1471
+ [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
1472
+ [value]="stateService.state.categoryAxis[0]?.title?.text || null"
1473
+ (valueChange)="updateState(categoryAxisTitleText, $event)"
1474
+ >
1475
+ </div>
1476
+ <div kendoChartWizardPropertyPaneFormField
1477
+ [text]="messageFor('formatCategoryAxisTitleFont')"
1478
+ inputType="comboBox"
1479
+ [data]="fontNames"
1480
+ [colSpan]="2"
1481
+ [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
1482
+ [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
1483
+ (valueChange)="updateState(categoryAxisTitleFontName, $event)"
1484
+ >
1485
+ </div>
1486
+ <div kendoChartWizardPropertyPaneFormField
1487
+ [text]="messageFor('formatCategoryAxisTitleSize')"
1488
+ inputType="comboBox"
1489
+ [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
1490
+ [data]="fontSizes"
1491
+ [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
1492
+ (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
1493
+ >
1494
+ </div>
1495
+ <div kendoChartWizardPropertyPaneFormField
1496
+ [text]="messageFor('formatCategoryAxisTitleColor')"
1497
+ inputType="colorPicker"
1498
+ [value]="stateService.state.categoryAxis[0]?.title?.color"
1499
+ (valueChange)="updateState(categoryAxisTitleColor, $event)"
1500
+ >
1501
+ </div>
1502
+ </div>
1503
+ </fieldset>
1504
+ <fieldset class="k-form-fieldset">
1505
+ <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
1506
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1507
+ <div kendoChartWizardPropertyPaneFormField
1508
+ [text]="messageFor('formatCategoryAxisLabelsFont')"
1509
+ inputType="comboBox"
1510
+ [data]="fontNames"
1511
+ [colSpan]="2"
1512
+ [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
1513
+ [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
1514
+ (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
1515
+ >
1516
+ </div>
1517
+ <div kendoChartWizardPropertyPaneFormField
1518
+ [text]="messageFor('formatCategoryAxisLabelsSize')"
1519
+ inputType="comboBox"
1520
+ [data]="fontSizes"
1521
+ [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
1522
+ [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
1523
+ (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
1524
+ >
1525
+ </div>
1526
+ <div kendoChartWizardPropertyPaneFormField
1527
+ [text]="messageFor('formatCategoryAxisLabelsColor')"
1528
+ inputType="colorPicker"
1529
+ [value]="stateService.state.categoryAxis[0]?.labels?.color"
1530
+ (valueChange)="updateState(categoryAxisLabelsColor, $event)"
1531
+ >
1532
+ </div>
1533
+ <div kendoChartWizardPropertyPaneFormField
1534
+ [text]="messageFor('formatCategoryAxisLabelsRotation')"
1535
+ inputType="dropDownList"
1536
+ [data]="labelsCategoryAxisRotation"
1537
+ [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
1538
+ (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
1539
+ >
1540
+ </div>
1541
+ <span></span>
1542
+ <div kendoChartWizardPropertyPaneFormField
1543
+ [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
1544
+ [isLabelInsideFormFieldWrap]="true"
1545
+ inputType="checkbox"
1546
+ [colSpan]="2"
1547
+ [value]="stateService.state.categoryAxis[0]?.reverse"
1548
+ (valueChange)="updateState(categoryAxisReverseOrder, $event)"
1549
+ >
1550
+ </div>
1551
+ </div>
1552
+ </fieldset>
1553
+ </form>
1559
1554
  </kendo-expansionpanel>
1560
- </section>
1555
+ </section>
1561
1556
  }
1562
1557
  @if (stateService.state.seriesType !== 'pie') {
1563
- <section class="k-row-start-1 k-row-end-3 k-col-start-4">
1558
+ <section>
1564
1559
  <kendo-expansionpanel
1565
- [style.max-width.px]="576"
1566
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
1567
- [expanded]="true"
1568
- >
1569
- <form class="k-form k-form-md">
1570
- <fieldset class="k-form-fieldset">
1571
- <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
1572
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1573
- <kendo-chartwizard-property-pane-form-field
1574
- inputType="text"
1575
- [hasLabel]="false"
1576
- [colSpan]="2"
1577
- [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
1578
- [value]="stateService.state.valueAxis[0]?.title?.text || null"
1579
- (valueChange)="updateState(valueAxisTitleText, $event)"
1580
- >
1581
- </kendo-chartwizard-property-pane-form-field>
1582
- <kendo-chartwizard-property-pane-form-field
1583
- [text]="messageFor('formatValueAxisTitleFont')"
1584
- inputType="comboBox"
1585
- [colSpan]="2"
1586
- [data]="fontNames"
1587
- [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
1588
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
1589
- (valueChange)="updateState(valueAxisTitleFontName, $event)"
1590
- >
1591
- </kendo-chartwizard-property-pane-form-field>
1592
- <kendo-chartwizard-property-pane-form-field
1593
- [text]="messageFor('formatValueAxisTitleSize')"
1594
- inputType="comboBox"
1595
- [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
1596
- [data]="fontSizes"
1597
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
1598
- (valueChange)="updateState(valueAxisTitleFontSize, $event)"
1599
- >
1600
- </kendo-chartwizard-property-pane-form-field>
1601
- <kendo-chartwizard-property-pane-form-field
1602
- [text]="messageFor('formatValueAxisTitleColor')"
1603
- inputType="colorPicker"
1604
- [value]="stateService.state.valueAxis[0]?.title?.color"
1605
- (valueChange)="updateState(valueAxisTitleColor, $event)"
1606
- >
1607
- </kendo-chartwizard-property-pane-form-field>
1608
- </div>
1609
- </fieldset>
1610
- <fieldset class="k-form-fieldset">
1611
- <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
1612
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1613
- <kendo-chartwizard-property-pane-form-field
1614
- [text]="messageFor('formatValueAxisLabelsFormat')"
1615
- [colSpan]="2"
1616
- inputType="dropDownList"
1617
- [data]="labelFormats"
1618
- [value]="labelFormatValue"
1619
- (valueChange)="updateState(valueAxisLabelsFormat, $event)"
1620
- >
1621
- </kendo-chartwizard-property-pane-form-field>
1622
- <kendo-chartwizard-property-pane-form-field
1623
- [text]="messageFor('formatValueAxisLabelsFont')"
1624
- inputType="comboBox"
1625
- [data]="fontNames"
1626
- [colSpan]="2"
1627
- [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
1628
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
1629
- (valueChange)="updateState(valueAxisLabelsFontName, $event)"
1630
- >
1631
- </kendo-chartwizard-property-pane-form-field>
1632
- <kendo-chartwizard-property-pane-form-field
1633
- [text]="messageFor('formatValueAxisLabelsSize')"
1634
- inputType="comboBox"
1635
- [data]="fontSizes"
1636
- [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
1637
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
1638
- (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
1639
- >
1640
- </kendo-chartwizard-property-pane-form-field>
1641
- <kendo-chartwizard-property-pane-form-field
1642
- [text]="messageFor('formatValueAxisLabelsColor')"
1643
- inputType="colorPicker"
1644
- [value]="stateService.state.valueAxis[0]?.labels?.color"
1645
- (valueChange)="updateState(valueAxisLabelsColor, $event)"
1646
- >
1647
- </kendo-chartwizard-property-pane-form-field>
1648
- <kendo-chartwizard-property-pane-form-field
1649
- [text]="messageFor('formatValueAxisLabelsRotation')"
1650
- inputType="dropDownList"
1651
- [data]="labelsValueAxisRotation"
1652
- [value]="stateService.state.valueAxis[0]?.labels?.rotation"
1653
- (valueChange)="updateState(valueAxisLabelsRotation, $event)"
1654
- >
1655
- </kendo-chartwizard-property-pane-form-field>
1656
- </div>
1657
- </fieldset>
1658
- </form>
1560
+ [style.max-width.px]="576"
1561
+ [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
1562
+ [expanded]="true"
1563
+ >
1564
+ <form class="k-form">
1565
+ <fieldset class="k-form-fieldset">
1566
+ <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
1567
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1568
+ <div kendoChartWizardPropertyPaneFormField
1569
+ inputType="text"
1570
+ [hasLabel]="false"
1571
+ [colSpan]="2"
1572
+ [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
1573
+ [value]="stateService.state.valueAxis[0]?.title?.text || null"
1574
+ (valueChange)="updateState(valueAxisTitleText, $event)"
1575
+ >
1576
+ </div>
1577
+ <div kendoChartWizardPropertyPaneFormField
1578
+ [text]="messageFor('formatValueAxisTitleFont')"
1579
+ inputType="comboBox"
1580
+ [colSpan]="2"
1581
+ [data]="fontNames"
1582
+ [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
1583
+ [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
1584
+ (valueChange)="updateState(valueAxisTitleFontName, $event)"
1585
+ >
1586
+ </div>
1587
+ <div kendoChartWizardPropertyPaneFormField
1588
+ [text]="messageFor('formatValueAxisTitleSize')"
1589
+ inputType="comboBox"
1590
+ [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
1591
+ [data]="fontSizes"
1592
+ [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
1593
+ (valueChange)="updateState(valueAxisTitleFontSize, $event)"
1594
+ >
1595
+ </div>
1596
+ <div kendoChartWizardPropertyPaneFormField
1597
+ [text]="messageFor('formatValueAxisTitleColor')"
1598
+ inputType="colorPicker"
1599
+ [value]="stateService.state.valueAxis[0]?.title?.color"
1600
+ (valueChange)="updateState(valueAxisTitleColor, $event)"
1601
+ >
1602
+ </div>
1603
+ </div>
1604
+ </fieldset>
1605
+ <fieldset class="k-form-fieldset">
1606
+ <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
1607
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1608
+ <div kendoChartWizardPropertyPaneFormField
1609
+ [text]="messageFor('formatValueAxisLabelsFormat')"
1610
+ [colSpan]="2"
1611
+ inputType="dropDownList"
1612
+ [data]="labelFormats"
1613
+ [value]="labelFormatValue"
1614
+ (valueChange)="updateState(valueAxisLabelsFormat, $event)"
1615
+ >
1616
+ </div>
1617
+ <div kendoChartWizardPropertyPaneFormField
1618
+ [text]="messageFor('formatValueAxisLabelsFont')"
1619
+ inputType="comboBox"
1620
+ [data]="fontNames"
1621
+ [colSpan]="2"
1622
+ [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
1623
+ [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
1624
+ (valueChange)="updateState(valueAxisLabelsFontName, $event)"
1625
+ >
1626
+ </div>
1627
+ <div kendoChartWizardPropertyPaneFormField
1628
+ [text]="messageFor('formatValueAxisLabelsSize')"
1629
+ inputType="comboBox"
1630
+ [data]="fontSizes"
1631
+ [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
1632
+ [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
1633
+ (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
1634
+ >
1635
+ </div>
1636
+ <div kendoChartWizardPropertyPaneFormField
1637
+ [text]="messageFor('formatValueAxisLabelsColor')"
1638
+ inputType="colorPicker"
1639
+ [value]="stateService.state.valueAxis[0]?.labels?.color"
1640
+ (valueChange)="updateState(valueAxisLabelsColor, $event)"
1641
+ >
1642
+ </div>
1643
+ <div kendoChartWizardPropertyPaneFormField
1644
+ [text]="messageFor('formatValueAxisLabelsRotation')"
1645
+ inputType="dropDownList"
1646
+ [data]="labelsValueAxisRotation"
1647
+ [value]="stateService.state.valueAxis[0]?.labels?.rotation"
1648
+ (valueChange)="updateState(valueAxisLabelsRotation, $event)"
1649
+ >
1650
+ </div>
1651
+ </div>
1652
+ </fieldset>
1653
+ </form>
1659
1654
  </kendo-expansionpanel>
1660
- </section>
1655
+ </section>
1661
1656
  }
1662
- `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardPropertyPaneFormFieldComponent, selector: "kendo-chartwizard-property-pane-form-field", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1657
+ `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardPropertyPaneFormFieldComponent, selector: "[kendoChartWizardPropertyPaneFormField]", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1663
1658
  }
1664
1659
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
1665
1660
  type: Component,
@@ -1668,421 +1663,428 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
1668
1663
  changeDetection: ChangeDetectionStrategy.OnPush,
1669
1664
  template: `
1670
1665
  <section>
1671
- <kendo-expansionpanel
1672
- [style.max-width.px]="576"
1673
- [title]="messageFor('formatChartArea')"
1674
- [expanded]="true"
1675
- [attr.dir]="stateService.direction"
1666
+ <kendo-expansionpanel
1667
+ [style.max-width.px]="576"
1668
+ [title]="messageFor('formatChartArea')"
1669
+ [expanded]="true"
1670
+ [attr.dir]="stateService.direction"
1676
1671
  >
1677
- <form class="k-form k-form-md">
1678
- <fieldset class="k-form-fieldset">
1679
- <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
1680
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1681
- <kendo-chartwizard-property-pane-form-field
1682
- [text]="messageFor('formatChartAreaMarginsLeft')"
1683
- inputType="numeric"
1684
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1685
- [value]="$any(stateService.state.area.margin).left"
1686
- (valueChange)="updateState(areaMarginLeft, $event)"
1687
- >
1688
- </kendo-chartwizard-property-pane-form-field>
1689
- <kendo-chartwizard-property-pane-form-field
1690
- [text]="messageFor('formatChartAreaMarginsRight')"
1691
- inputType="numeric"
1692
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1693
- [value]="$any(stateService.state.area.margin).right"
1694
- (valueChange)="updateState(areaMarginRight, $event)"
1695
- >
1696
- </kendo-chartwizard-property-pane-form-field>
1697
- <kendo-chartwizard-property-pane-form-field
1698
- [text]="messageFor('formatChartAreaMarginsTop')"
1699
- inputType="numeric"
1700
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1701
- [value]="$any(stateService.state.area.margin).top"
1702
- (valueChange)="updateState(areaMarginTop, $event)"
1703
- >
1704
- </kendo-chartwizard-property-pane-form-field>
1705
- <kendo-chartwizard-property-pane-form-field
1706
- [text]="messageFor('formatChartAreaMarginsBottom')"
1707
- inputType="numeric"
1708
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1709
- [value]="$any(stateService.state.area.margin).bottom"
1710
- (valueChange)="updateState(areaMarginBottom, $event)"
1711
- >
1712
- </kendo-chartwizard-property-pane-form-field>
1713
- </div>
1714
- </fieldset>
1715
- <fieldset class="k-form-fieldset">
1716
- <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
1717
- <kendo-chartwizard-property-pane-form-field
1718
- [text]="messageFor('formatChartAreaBackgroundColor')"
1719
- inputType="colorPicker"
1720
- [value]="stateService.state.area?.background"
1721
- (valueChange)="updateState(areaBackground, $event)"
1722
- >
1723
- </kendo-chartwizard-property-pane-form-field>
1724
- </fieldset>
1725
- </form>
1726
- </kendo-expansionpanel>
1672
+ <form class="k-form">
1673
+ <fieldset class="k-form-fieldset">
1674
+ <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
1675
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1676
+ <div kendoChartWizardPropertyPaneFormField
1677
+ [text]="messageFor('formatChartAreaMarginsLeft')"
1678
+ inputType="numeric"
1679
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1680
+ [value]="$any(stateService.state.area.margin).left"
1681
+ (valueChange)="updateState(areaMarginLeft, $event)"
1682
+ >
1683
+ </div>
1684
+ <div kendoChartWizardPropertyPaneFormField
1685
+ [text]="messageFor('formatChartAreaMarginsRight')"
1686
+ inputType="numeric"
1687
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1688
+ [value]="$any(stateService.state.area.margin).right"
1689
+ (valueChange)="updateState(areaMarginRight, $event)"
1690
+ >
1691
+ </div>
1692
+ <div kendoChartWizardPropertyPaneFormField
1693
+ [text]="messageFor('formatChartAreaMarginsTop')"
1694
+ inputType="numeric"
1695
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1696
+ [value]="$any(stateService.state.area.margin).top"
1697
+ (valueChange)="updateState(areaMarginTop, $event)"
1698
+ >
1699
+ </div>
1700
+ <div kendoChartWizardPropertyPaneFormField
1701
+ [text]="messageFor('formatChartAreaMarginsBottom')"
1702
+ inputType="numeric"
1703
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
1704
+ [value]="$any(stateService.state.area.margin).bottom"
1705
+ (valueChange)="updateState(areaMarginBottom, $event)"
1706
+ >
1707
+ </div>
1708
+ </div>
1709
+ </fieldset>
1710
+ <fieldset class="k-form-fieldset">
1711
+ <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
1712
+ <div kendoChartWizardPropertyPaneFormField
1713
+ [text]="messageFor('formatChartAreaBackgroundColor')"
1714
+ inputType="colorPicker"
1715
+ [value]="stateService.state.area?.background"
1716
+ (valueChange)="updateState(areaBackground, $event)"
1717
+ >
1718
+ </div>
1719
+ </fieldset>
1720
+ </form>
1721
+ </kendo-expansionpanel>
1727
1722
  </section>
1728
1723
  <section>
1729
- <kendo-expansionpanel
1730
- [style.max-width.px]="576"
1731
- [title]="messageFor('formatTitle')"
1732
- [expanded]="true"
1724
+ <kendo-expansionpanel
1725
+ [style.max-width.px]="576"
1726
+ [title]="messageFor('formatTitle')"
1727
+ [expanded]="true"
1733
1728
  >
1734
- <form class="k-form k-form-md">
1735
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1736
- <kendo-chartwizard-property-pane-form-field
1737
- [text]="messageFor('formatTitleApplyTo')"
1738
- inputType="dropDownList"
1739
- [data]="chartTitles"
1740
- [colSpan]="2"
1741
- [value]="stateService.currentTitle"
1742
- (valueChange)="changeCurrentTitle($event)"
1743
- >
1744
- </kendo-chartwizard-property-pane-form-field>
1745
- <kendo-chartwizard-property-pane-form-field
1746
- [text]="messageFor('formatTitleLabel')"
1747
- inputType="text"
1748
- [colSpan]="2"
1749
- [value]="chartTitleTypeText"
1750
- (valueChange)="updateState(chartTitleTypeAction, $event)"
1751
- >
1752
- </kendo-chartwizard-property-pane-form-field>
1753
- <kendo-chartwizard-property-pane-form-field
1754
- [text]="messageFor('formatTitleFont')"
1755
- inputType="comboBox"
1756
- [data]="fontNames"
1757
- [colSpan]="2"
1758
- [value]="chartTitleTypeFont"
1759
- [placeholder]="messageFor('formatTitleFontPlaceholder')"
1760
- (valueChange)="updateState(chartTitleTypeFontAction, $event)"
1761
- >
1762
- </kendo-chartwizard-property-pane-form-field>
1763
- <kendo-chartwizard-property-pane-form-field
1764
- [text]="messageFor('formatTitleSize')"
1765
- inputType="comboBox"
1766
- [placeholder]="messageFor('formatTitleSizePlaceholder')"
1767
- [data]="fontSizes"
1768
- [value]="chartTitleTypeFontSize"
1769
- (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
1770
- >
1771
- </kendo-chartwizard-property-pane-form-field>
1772
- <kendo-chartwizard-property-pane-form-field
1773
- [text]="messageFor('formatTitleColor')"
1774
- inputType="colorPicker"
1775
- [value]="chartTitleTypeColor"
1776
- (valueChange)="updateState(chartTitleTypeColorAction, $event)"
1777
- >
1778
- </kendo-chartwizard-property-pane-form-field>
1779
- </div>
1780
- </form>
1781
- </kendo-expansionpanel>
1729
+ <form class="k-form">
1730
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1731
+ <div kendoChartWizardPropertyPaneFormField
1732
+ [text]="messageFor('formatTitleApplyTo')"
1733
+ inputType="dropDownList"
1734
+ [data]="chartTitles"
1735
+ [colSpan]="2"
1736
+ [value]="stateService.currentTitle"
1737
+ (valueChange)="changeCurrentTitle($event)"
1738
+ >
1739
+ </div>
1740
+ <div kendoChartWizardPropertyPaneFormField
1741
+ [text]="messageFor('formatTitleLabel')"
1742
+ inputType="text"
1743
+ [colSpan]="2"
1744
+ [value]="chartTitleTypeText"
1745
+ (valueChange)="updateState(chartTitleTypeAction, $event)"
1746
+ >
1747
+ </div>
1748
+ <div kendoChartWizardPropertyPaneFormField
1749
+ [text]="messageFor('formatTitleFont')"
1750
+ inputType="comboBox"
1751
+ [data]="fontNames"
1752
+ [colSpan]="2"
1753
+ [value]="chartTitleTypeFont"
1754
+ [placeholder]="messageFor('formatTitleFontPlaceholder')"
1755
+ (valueChange)="updateState(chartTitleTypeFontAction, $event)"
1756
+ >
1757
+ </div>
1758
+ <div kendoChartWizardPropertyPaneFormField
1759
+ [text]="messageFor('formatTitleSize')"
1760
+ inputType="comboBox"
1761
+ [placeholder]="messageFor('formatTitleSizePlaceholder')"
1762
+ [data]="fontSizes"
1763
+ [value]="chartTitleTypeFontSize"
1764
+ (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
1765
+ >
1766
+ </div>
1767
+ <div kendoChartWizardPropertyPaneFormField
1768
+ [text]="messageFor('formatTitleColor')"
1769
+ inputType="colorPicker"
1770
+ [value]="chartTitleTypeColor"
1771
+ (valueChange)="updateState(chartTitleTypeColorAction, $event)"
1772
+ >
1773
+ </div>
1774
+ </div>
1775
+ </form>
1776
+ </kendo-expansionpanel>
1782
1777
  </section>
1783
1778
  <section>
1784
- <kendo-expansionpanel
1785
- [style.max-width.px]="576"
1786
- [title]="messageFor('formatLegend')"
1787
- [expanded]="true"
1779
+ <kendo-expansionpanel
1780
+ [style.max-width.px]="576"
1781
+ [title]="messageFor('formatSeries')"
1782
+ [expanded]="true"
1788
1783
  >
1789
- <form class="k-form k-form-md">
1790
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1791
- <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
1792
- <kendo-switch
1793
- #toggleLegend
1794
- onLabel="On"
1795
- offLabel="Off"
1796
- thumbRounded="full"
1797
- size="medium"
1798
- [checked]="stateService.state.legend?.visible"
1799
- (valueChange)="updateState(legendVisible, $event)"
1800
- ></kendo-switch>
1801
- <kendo-chartwizard-property-pane-form-field
1802
- [text]="messageFor('formatLegendFont')"
1803
- inputType="comboBox"
1804
- [data]="fontNames"
1805
- [colSpan]="2"
1806
- [placeholder]="messageFor('formatLegendFontPlaceholder')"
1807
- [value]="parseFont(stateService.state.legend?.labels?.font).name"
1808
- (valueChange)="updateState(legendFontName, $event)"
1809
- >
1810
- </kendo-chartwizard-property-pane-form-field>
1811
- <kendo-chartwizard-property-pane-form-field
1812
- [text]="messageFor('formatLegendSize')"
1813
- inputType="comboBox"
1814
- [data]="fontSizes"
1815
- [placeholder]="messageFor('formatLegendSizePlaceholder')"
1816
- [value]="parseFont(stateService.state.legend?.labels?.font).size"
1817
- (valueChange)="updateState(legendFontSize, $event)"
1818
- >
1819
- </kendo-chartwizard-property-pane-form-field>
1820
- <kendo-chartwizard-property-pane-form-field
1821
- [text]="messageFor('formatLegendColor')"
1822
- inputType="colorPicker"
1823
- [value]="stateService.state.legend?.labels?.color"
1824
- (valueChange)="updateState(legendColor, $event)"
1825
- >
1826
- </kendo-chartwizard-property-pane-form-field>
1827
- <kendo-chartwizard-property-pane-form-field
1828
- [text]="messageFor('formatLegendPosition')"
1829
- inputType="dropDownList"
1830
- [colSpan]="2"
1831
- [data]="legendPositions"
1832
- [value]="stateService.state.legend?.position"
1833
- (valueChange)="updateState(legendPosition, $event)"
1834
- >
1835
- </kendo-chartwizard-property-pane-form-field>
1836
- </div>
1837
- </form>
1838
- </kendo-expansionpanel>
1784
+ <form class="k-form">
1785
+ <div class="k-form-field">
1786
+ <kendo-label
1787
+ [for]="seriesDropDown"
1788
+ labelCssClass="k-form-label"
1789
+ [text]="messageFor('formatSeriesApplyTo')"
1790
+ ></kendo-label>
1791
+ <div class="k-form-field-wrap">
1792
+ <kendo-dropdownlist
1793
+ #seriesDropDown
1794
+ [data]="seriesData"
1795
+ textField="text"
1796
+ valueField="name"
1797
+ fillMode="outline"
1798
+ [value]="stateService.currentSeries"
1799
+ (valueChange)="updateCurrentSeries($event)"
1800
+ ></kendo-dropdownlist>
1801
+ </div>
1802
+ </div>
1803
+
1804
+ <div kendoChartWizardPropertyPaneFormField
1805
+ [text]="messageFor('formatSeriesColor')"
1806
+ [value]="stateService.currentSeries?.color"
1807
+ inputType="colorPicker"
1808
+ (valueChange)="updateSeriesColor($event)"
1809
+ >
1810
+ </div>
1811
+ <div kendoChartWizardPropertyPaneFormField
1812
+ [text]="messageFor('formatSeriesShowLabels')"
1813
+ [value]="showLabels"
1814
+ [isLabelInsideFormFieldWrap]="true"
1815
+ inputType="checkbox"
1816
+ (valueChange)="toggleSeriesLabels($event)"
1817
+ >
1818
+ </div>
1819
+ </form>
1820
+ </kendo-expansionpanel>
1839
1821
  </section>
1840
1822
  <section>
1841
- <kendo-expansionpanel
1842
- [style.max-width.px]="576"
1843
- [title]="messageFor('formatSeries')"
1844
- [expanded]="true"
1823
+ <kendo-expansionpanel
1824
+ [style.max-width.px]="576"
1825
+ [title]="messageFor('formatLegend')"
1826
+ [expanded]="true"
1845
1827
  >
1846
- <form class="k-form k-form-md">
1847
- <div class="k-form-field">
1848
- <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
1849
- <div class="k-form-field-wrap">
1850
- <kendo-dropdownlist
1851
- #seriesDropDown
1852
- [data]="seriesData"
1853
- textField="text"
1854
- valueField="name"
1855
- fillMode="outline"
1856
- rounded="medium"
1857
- size="medium"
1858
- [value]="stateService.currentSeries"
1859
- (valueChange)="updateCurrentSeries($event)"
1860
- ></kendo-dropdownlist>
1861
- </div>
1862
- </div>
1863
-
1864
- <kendo-chartwizard-property-pane-form-field
1865
- [text]="messageFor('formatSeriesColor')"
1866
- [value]="stateService.currentSeries?.color"
1867
- inputType="colorPicker"
1868
- [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
1869
- (valueChange)="updateSeriesColor($event)"
1870
- >
1871
- </kendo-chartwizard-property-pane-form-field>
1872
- <kendo-chartwizard-property-pane-form-field
1873
- [text]="messageFor('formatSeriesShowLabels')"
1874
- [value]="showLabels"
1875
- [isLabelInsideFormFieldWrap]="true"
1876
- [colSpan]="2"
1877
- inputType="checkbox"
1878
- (valueChange)="toggleSeriesLabels($event)"
1879
- >
1880
- </kendo-chartwizard-property-pane-form-field>
1881
- </form>
1882
- </kendo-expansionpanel>
1828
+ <form class="k-form">
1829
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1830
+ <div class="k-form-field k-col-span-2">
1831
+ <div class="k-form-field-wrap">
1832
+ <div class="k-d-flex k-align-items-center k-gap-2">
1833
+ <kendo-label
1834
+ [for]="toggleLegend"
1835
+ [text]="messageFor('formatLegendShowLegend')"
1836
+ ></kendo-label>
1837
+ <kendo-switch
1838
+ #toggleLegend
1839
+ onLabel="On"
1840
+ offLabel="Off"
1841
+ [checked]="stateService.state.legend?.visible"
1842
+ (valueChange)="updateState(legendVisible, $event)"
1843
+ ></kendo-switch>
1844
+ </div>
1845
+ </div>
1846
+ </div>
1847
+ <div kendoChartWizardPropertyPaneFormField
1848
+ [text]="messageFor('formatLegendFont')"
1849
+ inputType="comboBox"
1850
+ [data]="fontNames"
1851
+ [colSpan]="2"
1852
+ [placeholder]="messageFor('formatLegendFontPlaceholder')"
1853
+ [value]="parseFont(stateService.state.legend?.labels?.font).name"
1854
+ (valueChange)="updateState(legendFontName, $event)"
1855
+ >
1856
+ </div>
1857
+ <div kendoChartWizardPropertyPaneFormField
1858
+ [text]="messageFor('formatLegendSize')"
1859
+ inputType="comboBox"
1860
+ [data]="fontSizes"
1861
+ [placeholder]="messageFor('formatLegendSizePlaceholder')"
1862
+ [value]="parseFont(stateService.state.legend?.labels?.font).size"
1863
+ (valueChange)="updateState(legendFontSize, $event)"
1864
+ >
1865
+ </div>
1866
+ <div kendoChartWizardPropertyPaneFormField
1867
+ [text]="messageFor('formatLegendColor')"
1868
+ inputType="colorPicker"
1869
+ [value]="stateService.state.legend?.labels?.color"
1870
+ (valueChange)="updateState(legendColor, $event)"
1871
+ >
1872
+ </div>
1873
+ <div kendoChartWizardPropertyPaneFormField
1874
+ [text]="messageFor('formatLegendPosition')"
1875
+ inputType="dropDownList"
1876
+ [colSpan]="2"
1877
+ [data]="legendPositions"
1878
+ [value]="stateService.state.legend?.position"
1879
+ (valueChange)="updateState(legendPosition, $event)"
1880
+ >
1881
+ </div>
1882
+ </div>
1883
+ </form>
1884
+ </kendo-expansionpanel>
1883
1885
  </section>
1884
1886
  @if (stateService.state.seriesType !== 'pie') {
1885
- <section class="k-row-start-1 k-row-end-3 k-col-start-3">
1887
+ <section>
1886
1888
  <kendo-expansionpanel
1887
- [style.max-width.px]="576"
1888
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
1889
- [expanded]="true"
1890
- >
1891
- <form class="k-form k-form-md">
1892
- <fieldset class="k-form-fieldset">
1893
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
1894
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1895
- <kendo-chartwizard-property-pane-form-field
1896
- inputType="text"
1897
- [hasLabel]="false"
1898
- [colSpan]="2"
1899
- [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
1900
- [value]="stateService.state.categoryAxis[0]?.title?.text || null"
1901
- (valueChange)="updateState(categoryAxisTitleText, $event)"
1902
- >
1903
- </kendo-chartwizard-property-pane-form-field>
1904
- <kendo-chartwizard-property-pane-form-field
1905
- [text]="messageFor('formatCategoryAxisTitleFont')"
1906
- inputType="comboBox"
1907
- [data]="fontNames"
1908
- [colSpan]="2"
1909
- [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
1910
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
1911
- (valueChange)="updateState(categoryAxisTitleFontName, $event)"
1912
- >
1913
- </kendo-chartwizard-property-pane-form-field>
1914
- <kendo-chartwizard-property-pane-form-field
1915
- [text]="messageFor('formatCategoryAxisTitleSize')"
1916
- inputType="comboBox"
1917
- [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
1918
- [data]="fontSizes"
1919
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
1920
- (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
1921
- >
1922
- </kendo-chartwizard-property-pane-form-field>
1923
- <kendo-chartwizard-property-pane-form-field
1924
- [text]="messageFor('formatCategoryAxisTitleColor')"
1925
- inputType="colorPicker"
1926
- [value]="stateService.state.categoryAxis[0]?.title?.color"
1927
- (valueChange)="updateState(categoryAxisTitleColor, $event)"
1928
- >
1929
- </kendo-chartwizard-property-pane-form-field>
1930
- </div>
1931
- </fieldset>
1932
- <fieldset class="k-form-fieldset">
1933
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
1934
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1935
- <kendo-chartwizard-property-pane-form-field
1936
- [text]="messageFor('formatCategoryAxisLabelsFont')"
1937
- inputType="comboBox"
1938
- [data]="fontNames"
1939
- [colSpan]="2"
1940
- [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
1941
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
1942
- (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
1943
- >
1944
- </kendo-chartwizard-property-pane-form-field>
1945
- <kendo-chartwizard-property-pane-form-field
1946
- [text]="messageFor('formatCategoryAxisLabelsSize')"
1947
- inputType="comboBox"
1948
- [data]="fontSizes"
1949
- [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
1950
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
1951
- (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
1952
- >
1953
- </kendo-chartwizard-property-pane-form-field>
1954
- <kendo-chartwizard-property-pane-form-field
1955
- [text]="messageFor('formatCategoryAxisLabelsColor')"
1956
- inputType="colorPicker"
1957
- [value]="stateService.state.categoryAxis[0]?.labels?.color"
1958
- (valueChange)="updateState(categoryAxisLabelsColor, $event)"
1959
- >
1960
- </kendo-chartwizard-property-pane-form-field>
1961
- <kendo-chartwizard-property-pane-form-field
1962
- [text]="messageFor('formatCategoryAxisLabelsRotation')"
1963
- inputType="dropDownList"
1964
- [data]="labelsCategoryAxisRotation"
1965
- [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
1966
- (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
1967
- >
1968
- </kendo-chartwizard-property-pane-form-field>
1969
- <span></span>
1970
- <kendo-chartwizard-property-pane-form-field
1971
- [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
1972
- [isLabelInsideFormFieldWrap]="true"
1973
- inputType="checkbox"
1974
- [colSpan]="2"
1975
- [value]="stateService.state.categoryAxis[0]?.reverse"
1976
- (valueChange)="updateState(categoryAxisReverseOrder, $event)"
1977
- >
1978
- </kendo-chartwizard-property-pane-form-field>
1979
- </div>
1980
- </fieldset>
1981
- </form>
1889
+ [style.max-width.px]="576"
1890
+ [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
1891
+ [expanded]="true"
1892
+ >
1893
+ <form class="k-form">
1894
+ <fieldset class="k-form-fieldset">
1895
+ <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
1896
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1897
+ <div kendoChartWizardPropertyPaneFormField
1898
+ inputType="text"
1899
+ [hasLabel]="false"
1900
+ [colSpan]="2"
1901
+ [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
1902
+ [value]="stateService.state.categoryAxis[0]?.title?.text || null"
1903
+ (valueChange)="updateState(categoryAxisTitleText, $event)"
1904
+ >
1905
+ </div>
1906
+ <div kendoChartWizardPropertyPaneFormField
1907
+ [text]="messageFor('formatCategoryAxisTitleFont')"
1908
+ inputType="comboBox"
1909
+ [data]="fontNames"
1910
+ [colSpan]="2"
1911
+ [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
1912
+ [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
1913
+ (valueChange)="updateState(categoryAxisTitleFontName, $event)"
1914
+ >
1915
+ </div>
1916
+ <div kendoChartWizardPropertyPaneFormField
1917
+ [text]="messageFor('formatCategoryAxisTitleSize')"
1918
+ inputType="comboBox"
1919
+ [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
1920
+ [data]="fontSizes"
1921
+ [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
1922
+ (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
1923
+ >
1924
+ </div>
1925
+ <div kendoChartWizardPropertyPaneFormField
1926
+ [text]="messageFor('formatCategoryAxisTitleColor')"
1927
+ inputType="colorPicker"
1928
+ [value]="stateService.state.categoryAxis[0]?.title?.color"
1929
+ (valueChange)="updateState(categoryAxisTitleColor, $event)"
1930
+ >
1931
+ </div>
1932
+ </div>
1933
+ </fieldset>
1934
+ <fieldset class="k-form-fieldset">
1935
+ <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
1936
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1937
+ <div kendoChartWizardPropertyPaneFormField
1938
+ [text]="messageFor('formatCategoryAxisLabelsFont')"
1939
+ inputType="comboBox"
1940
+ [data]="fontNames"
1941
+ [colSpan]="2"
1942
+ [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
1943
+ [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
1944
+ (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
1945
+ >
1946
+ </div>
1947
+ <div kendoChartWizardPropertyPaneFormField
1948
+ [text]="messageFor('formatCategoryAxisLabelsSize')"
1949
+ inputType="comboBox"
1950
+ [data]="fontSizes"
1951
+ [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
1952
+ [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
1953
+ (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
1954
+ >
1955
+ </div>
1956
+ <div kendoChartWizardPropertyPaneFormField
1957
+ [text]="messageFor('formatCategoryAxisLabelsColor')"
1958
+ inputType="colorPicker"
1959
+ [value]="stateService.state.categoryAxis[0]?.labels?.color"
1960
+ (valueChange)="updateState(categoryAxisLabelsColor, $event)"
1961
+ >
1962
+ </div>
1963
+ <div kendoChartWizardPropertyPaneFormField
1964
+ [text]="messageFor('formatCategoryAxisLabelsRotation')"
1965
+ inputType="dropDownList"
1966
+ [data]="labelsCategoryAxisRotation"
1967
+ [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
1968
+ (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
1969
+ >
1970
+ </div>
1971
+ <span></span>
1972
+ <div kendoChartWizardPropertyPaneFormField
1973
+ [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
1974
+ [isLabelInsideFormFieldWrap]="true"
1975
+ inputType="checkbox"
1976
+ [colSpan]="2"
1977
+ [value]="stateService.state.categoryAxis[0]?.reverse"
1978
+ (valueChange)="updateState(categoryAxisReverseOrder, $event)"
1979
+ >
1980
+ </div>
1981
+ </div>
1982
+ </fieldset>
1983
+ </form>
1982
1984
  </kendo-expansionpanel>
1983
- </section>
1985
+ </section>
1984
1986
  }
1985
1987
  @if (stateService.state.seriesType !== 'pie') {
1986
- <section class="k-row-start-1 k-row-end-3 k-col-start-4">
1988
+ <section>
1987
1989
  <kendo-expansionpanel
1988
- [style.max-width.px]="576"
1989
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
1990
- [expanded]="true"
1991
- >
1992
- <form class="k-form k-form-md">
1993
- <fieldset class="k-form-fieldset">
1994
- <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
1995
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
1996
- <kendo-chartwizard-property-pane-form-field
1997
- inputType="text"
1998
- [hasLabel]="false"
1999
- [colSpan]="2"
2000
- [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
2001
- [value]="stateService.state.valueAxis[0]?.title?.text || null"
2002
- (valueChange)="updateState(valueAxisTitleText, $event)"
2003
- >
2004
- </kendo-chartwizard-property-pane-form-field>
2005
- <kendo-chartwizard-property-pane-form-field
2006
- [text]="messageFor('formatValueAxisTitleFont')"
2007
- inputType="comboBox"
2008
- [colSpan]="2"
2009
- [data]="fontNames"
2010
- [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
2011
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
2012
- (valueChange)="updateState(valueAxisTitleFontName, $event)"
2013
- >
2014
- </kendo-chartwizard-property-pane-form-field>
2015
- <kendo-chartwizard-property-pane-form-field
2016
- [text]="messageFor('formatValueAxisTitleSize')"
2017
- inputType="comboBox"
2018
- [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
2019
- [data]="fontSizes"
2020
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
2021
- (valueChange)="updateState(valueAxisTitleFontSize, $event)"
2022
- >
2023
- </kendo-chartwizard-property-pane-form-field>
2024
- <kendo-chartwizard-property-pane-form-field
2025
- [text]="messageFor('formatValueAxisTitleColor')"
2026
- inputType="colorPicker"
2027
- [value]="stateService.state.valueAxis[0]?.title?.color"
2028
- (valueChange)="updateState(valueAxisTitleColor, $event)"
2029
- >
2030
- </kendo-chartwizard-property-pane-form-field>
2031
- </div>
2032
- </fieldset>
2033
- <fieldset class="k-form-fieldset">
2034
- <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
2035
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
2036
- <kendo-chartwizard-property-pane-form-field
2037
- [text]="messageFor('formatValueAxisLabelsFormat')"
2038
- [colSpan]="2"
2039
- inputType="dropDownList"
2040
- [data]="labelFormats"
2041
- [value]="labelFormatValue"
2042
- (valueChange)="updateState(valueAxisLabelsFormat, $event)"
2043
- >
2044
- </kendo-chartwizard-property-pane-form-field>
2045
- <kendo-chartwizard-property-pane-form-field
2046
- [text]="messageFor('formatValueAxisLabelsFont')"
2047
- inputType="comboBox"
2048
- [data]="fontNames"
2049
- [colSpan]="2"
2050
- [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
2051
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
2052
- (valueChange)="updateState(valueAxisLabelsFontName, $event)"
2053
- >
2054
- </kendo-chartwizard-property-pane-form-field>
2055
- <kendo-chartwizard-property-pane-form-field
2056
- [text]="messageFor('formatValueAxisLabelsSize')"
2057
- inputType="comboBox"
2058
- [data]="fontSizes"
2059
- [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
2060
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
2061
- (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
2062
- >
2063
- </kendo-chartwizard-property-pane-form-field>
2064
- <kendo-chartwizard-property-pane-form-field
2065
- [text]="messageFor('formatValueAxisLabelsColor')"
2066
- inputType="colorPicker"
2067
- [value]="stateService.state.valueAxis[0]?.labels?.color"
2068
- (valueChange)="updateState(valueAxisLabelsColor, $event)"
2069
- >
2070
- </kendo-chartwizard-property-pane-form-field>
2071
- <kendo-chartwizard-property-pane-form-field
2072
- [text]="messageFor('formatValueAxisLabelsRotation')"
2073
- inputType="dropDownList"
2074
- [data]="labelsValueAxisRotation"
2075
- [value]="stateService.state.valueAxis[0]?.labels?.rotation"
2076
- (valueChange)="updateState(valueAxisLabelsRotation, $event)"
2077
- >
2078
- </kendo-chartwizard-property-pane-form-field>
2079
- </div>
2080
- </fieldset>
2081
- </form>
1990
+ [style.max-width.px]="576"
1991
+ [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
1992
+ [expanded]="true"
1993
+ >
1994
+ <form class="k-form">
1995
+ <fieldset class="k-form-fieldset">
1996
+ <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
1997
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
1998
+ <div kendoChartWizardPropertyPaneFormField
1999
+ inputType="text"
2000
+ [hasLabel]="false"
2001
+ [colSpan]="2"
2002
+ [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
2003
+ [value]="stateService.state.valueAxis[0]?.title?.text || null"
2004
+ (valueChange)="updateState(valueAxisTitleText, $event)"
2005
+ >
2006
+ </div>
2007
+ <div kendoChartWizardPropertyPaneFormField
2008
+ [text]="messageFor('formatValueAxisTitleFont')"
2009
+ inputType="comboBox"
2010
+ [colSpan]="2"
2011
+ [data]="fontNames"
2012
+ [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
2013
+ [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
2014
+ (valueChange)="updateState(valueAxisTitleFontName, $event)"
2015
+ >
2016
+ </div>
2017
+ <div kendoChartWizardPropertyPaneFormField
2018
+ [text]="messageFor('formatValueAxisTitleSize')"
2019
+ inputType="comboBox"
2020
+ [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
2021
+ [data]="fontSizes"
2022
+ [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
2023
+ (valueChange)="updateState(valueAxisTitleFontSize, $event)"
2024
+ >
2025
+ </div>
2026
+ <div kendoChartWizardPropertyPaneFormField
2027
+ [text]="messageFor('formatValueAxisTitleColor')"
2028
+ inputType="colorPicker"
2029
+ [value]="stateService.state.valueAxis[0]?.title?.color"
2030
+ (valueChange)="updateState(valueAxisTitleColor, $event)"
2031
+ >
2032
+ </div>
2033
+ </div>
2034
+ </fieldset>
2035
+ <fieldset class="k-form-fieldset">
2036
+ <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
2037
+ <div class="k-form-layout k-d-grid k-grid-cols-2">
2038
+ <div kendoChartWizardPropertyPaneFormField
2039
+ [text]="messageFor('formatValueAxisLabelsFormat')"
2040
+ [colSpan]="2"
2041
+ inputType="dropDownList"
2042
+ [data]="labelFormats"
2043
+ [value]="labelFormatValue"
2044
+ (valueChange)="updateState(valueAxisLabelsFormat, $event)"
2045
+ >
2046
+ </div>
2047
+ <div kendoChartWizardPropertyPaneFormField
2048
+ [text]="messageFor('formatValueAxisLabelsFont')"
2049
+ inputType="comboBox"
2050
+ [data]="fontNames"
2051
+ [colSpan]="2"
2052
+ [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
2053
+ [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
2054
+ (valueChange)="updateState(valueAxisLabelsFontName, $event)"
2055
+ >
2056
+ </div>
2057
+ <div kendoChartWizardPropertyPaneFormField
2058
+ [text]="messageFor('formatValueAxisLabelsSize')"
2059
+ inputType="comboBox"
2060
+ [data]="fontSizes"
2061
+ [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
2062
+ [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
2063
+ (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
2064
+ >
2065
+ </div>
2066
+ <div kendoChartWizardPropertyPaneFormField
2067
+ [text]="messageFor('formatValueAxisLabelsColor')"
2068
+ inputType="colorPicker"
2069
+ [value]="stateService.state.valueAxis[0]?.labels?.color"
2070
+ (valueChange)="updateState(valueAxisLabelsColor, $event)"
2071
+ >
2072
+ </div>
2073
+ <div kendoChartWizardPropertyPaneFormField
2074
+ [text]="messageFor('formatValueAxisLabelsRotation')"
2075
+ inputType="dropDownList"
2076
+ [data]="labelsValueAxisRotation"
2077
+ [value]="stateService.state.valueAxis[0]?.labels?.rotation"
2078
+ (valueChange)="updateState(valueAxisLabelsRotation, $event)"
2079
+ >
2080
+ </div>
2081
+ </div>
2082
+ </fieldset>
2083
+ </form>
2082
2084
  </kendo-expansionpanel>
2083
- </section>
2085
+ </section>
2084
2086
  }
2085
- `,
2087
+ `,
2086
2088
  standalone: true,
2087
2089
  imports: [
2088
2090
  ExpansionPanelComponent,
@@ -2810,7 +2812,7 @@ class ChartWizardComponent {
2810
2812
  /**
2811
2813
  * Sets the window settings for the Chart Wizard.
2812
2814
  */
2813
- windowSettings = {};
2815
+ windowSettings;
2814
2816
  /**
2815
2817
  * @hidden
2816
2818
  */
@@ -2862,6 +2864,7 @@ class ChartWizardComponent {
2862
2864
  this.licenseMessage = getLicenseMessage(packageMetadata);
2863
2865
  this.showLicenseWatermark = shouldShowValidationUI(isValid);
2864
2866
  this.stateService.direction = this.localization.rtl ? 'rtl' : 'ltr';
2867
+ this.windowSettings = { state: this.stateService.windowState };
2865
2868
  }
2866
2869
  ngAfterViewInit() {
2867
2870
  this.subscription.add(this.localization.changes.subscribe(({ rtl }) => {
@@ -2884,6 +2887,9 @@ class ChartWizardComponent {
2884
2887
  this.stateService.dataTab = this.dataTab;
2885
2888
  }
2886
2889
  ngOnChanges(changes) {
2890
+ if (changes['windowSettings']) {
2891
+ this.stateService.windowState = this.windowSettings?.state ?? 'default';
2892
+ }
2887
2893
  if (changes['data'] && changes['data'].currentValue?.length > 0) {
2888
2894
  const data = changes['data'].currentValue;
2889
2895
  const clonedData = structuredClone(data);
@@ -2953,6 +2959,12 @@ class ChartWizardComponent {
2953
2959
  get windowHeight() {
2954
2960
  return isPresent(this.windowSettings?.height) ? this.windowSettings.height : this.stateService.windowSize.height;
2955
2961
  }
2962
+ /**
2963
+ * @hidden
2964
+ */
2965
+ get currentWindowState() {
2966
+ return this.stateService.windowState;
2967
+ }
2956
2968
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartWizardComponent, deps: [{ token: i1.LocalizationService }, { token: StateService }], target: i0.ɵɵFactoryTarget.Component });
2957
2969
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChartWizardComponent, isStandalone: true, selector: "kendo-chartwizard", inputs: { data: "data", defaultState: "defaultState", exportOptions: "exportOptions", collapsedConfigurationPane: "collapsedConfigurationPane", windowSettings: "windowSettings" }, outputs: { close: "close", export: "export" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
2958
2970
  LocalizationService,
@@ -3293,6 +3305,7 @@ class ChartWizardComponent {
3293
3305
  <div @overlayAppear class="k-overlay"> </div>
3294
3306
  }
3295
3307
  <kendo-window
3308
+ #windowRef
3296
3309
  class="k-chart-wizard"
3297
3310
  [title]="messageFor('windowTitle')"
3298
3311
  [width]="windowWidth"
@@ -3302,15 +3315,31 @@ class ChartWizardComponent {
3302
3315
  [state]="windowSettings?.state"
3303
3316
  [resizable]="true"
3304
3317
  (close)="close.emit()"
3318
+ (stateChange)="stateService.windowState = $event"
3305
3319
  >
3320
+ <kendo-window-titlebar [id]="windowRef.titleId">
3321
+ <span class="k-window-title">
3322
+ {{ messageFor('windowTitle') }}
3323
+ </span>
3324
+ <div class="k-window-titlebar-actions">
3325
+ @if (currentWindowState === 'default') {
3326
+ <button kendoWindowMaximizeAction [attr.title]="windowRef.maximizeButtonTitle" [attr.aria-label]="windowRef.maximizeButtonTitle"></button>
3327
+ }
3328
+ @if (currentWindowState !== 'default') {
3329
+ <button kendoWindowRestoreAction [attr.title]="windowRef.restoreButtonTitle" [attr.aria-label]="windowRef.restoreButtonTitle"></button>
3330
+ }
3331
+ <button kendoWindowCloseAction [attr.title]="windowRef.closeButtonTitle" [attr.aria-label]="windowRef.closeButtonTitle"></button>
3332
+ </div>
3333
+ </kendo-window-titlebar>
3306
3334
  <kendo-splitter class="k-chart-wizard-splitter">
3307
- <kendo-splitter-pane class="k-chart-wizard-preview-pane">
3335
+ <kendo-splitter-pane class="k-chart-wizard-preview-pane" [scrollable]="false">
3308
3336
  <div class="k-preview-pane-header">
3309
3337
  <kendo-dropdownbutton
3310
3338
  [svgIcon]="exportIcon"
3311
3339
  [data]="exportDropdownItems"
3312
3340
  textField="text"
3313
3341
  fillMode="flat"
3342
+ [buttonAttributes]="{ 'aria-label': messageFor('exportButton') }"
3314
3343
  (itemClick)="onExport($event)"
3315
3344
  >
3316
3345
  {{ messageFor('exportButton') }}
@@ -3399,7 +3428,7 @@ class ChartWizardComponent {
3399
3428
  </kendo-chart>
3400
3429
  </div>
3401
3430
  </kendo-splitter-pane>
3402
- <kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
3431
+ <kendo-splitter-pane class="k-chart-wizard-property-pane" [scrollable]="false" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
3403
3432
  <kendo-tabstrip [keepTabContent]="true">
3404
3433
  <kendo-tabstrip-tab [title]="messageFor('tabChart')" [selected]="true">
3405
3434
  <ng-template kendoTabContent>
@@ -3425,7 +3454,7 @@ class ChartWizardComponent {
3425
3454
  <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
3426
3455
  }
3427
3456
  </kendo-window>
3428
- `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "noData", "observeStyles", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels", "highlight"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "lineStyle", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title", "focusHighlight"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chartwizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chartwizard-property-pane-format-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chartwizard-property-pane-data-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChartWizardLocalizedMessages]" }], animations: [
3457
+ `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: ["template", "id"] }, { kind: "component", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: ["window"], exportAs: ["kendoWindowMaximizeAction"] }, { kind: "component", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: ["window"], exportAs: ["kendoWindowCloseAction"] }, { kind: "component", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: ["window"], exportAs: ["kendoWindowRestoreAction"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "noData", "observeStyles", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels", "highlight"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "lineStyle", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title", "focusHighlight"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chartwizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chartwizard-property-pane-format-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chartwizard-property-pane-data-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChartWizardLocalizedMessages]" }], animations: [
3429
3458
  trigger('overlayAppear', [
3430
3459
  state('in', style({ opacity: 1 })),
3431
3460
  transition('void => *', [style({ opacity: 0.1 }), animate('.3s cubic-bezier(.2, .6, .4, 1)')])
@@ -3784,6 +3813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3784
3813
  <div @overlayAppear class="k-overlay"> </div>
3785
3814
  }
3786
3815
  <kendo-window
3816
+ #windowRef
3787
3817
  class="k-chart-wizard"
3788
3818
  [title]="messageFor('windowTitle')"
3789
3819
  [width]="windowWidth"
@@ -3793,15 +3823,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3793
3823
  [state]="windowSettings?.state"
3794
3824
  [resizable]="true"
3795
3825
  (close)="close.emit()"
3826
+ (stateChange)="stateService.windowState = $event"
3796
3827
  >
3828
+ <kendo-window-titlebar [id]="windowRef.titleId">
3829
+ <span class="k-window-title">
3830
+ {{ messageFor('windowTitle') }}
3831
+ </span>
3832
+ <div class="k-window-titlebar-actions">
3833
+ @if (currentWindowState === 'default') {
3834
+ <button kendoWindowMaximizeAction [attr.title]="windowRef.maximizeButtonTitle" [attr.aria-label]="windowRef.maximizeButtonTitle"></button>
3835
+ }
3836
+ @if (currentWindowState !== 'default') {
3837
+ <button kendoWindowRestoreAction [attr.title]="windowRef.restoreButtonTitle" [attr.aria-label]="windowRef.restoreButtonTitle"></button>
3838
+ }
3839
+ <button kendoWindowCloseAction [attr.title]="windowRef.closeButtonTitle" [attr.aria-label]="windowRef.closeButtonTitle"></button>
3840
+ </div>
3841
+ </kendo-window-titlebar>
3797
3842
  <kendo-splitter class="k-chart-wizard-splitter">
3798
- <kendo-splitter-pane class="k-chart-wizard-preview-pane">
3843
+ <kendo-splitter-pane class="k-chart-wizard-preview-pane" [scrollable]="false">
3799
3844
  <div class="k-preview-pane-header">
3800
3845
  <kendo-dropdownbutton
3801
3846
  [svgIcon]="exportIcon"
3802
3847
  [data]="exportDropdownItems"
3803
3848
  textField="text"
3804
3849
  fillMode="flat"
3850
+ [buttonAttributes]="{ 'aria-label': messageFor('exportButton') }"
3805
3851
  (itemClick)="onExport($event)"
3806
3852
  >
3807
3853
  {{ messageFor('exportButton') }}
@@ -3890,7 +3936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3890
3936
  </kendo-chart>
3891
3937
  </div>
3892
3938
  </kendo-splitter-pane>
3893
- <kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
3939
+ <kendo-splitter-pane class="k-chart-wizard-property-pane" [scrollable]="false" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
3894
3940
  <kendo-tabstrip [keepTabContent]="true">
3895
3941
  <kendo-tabstrip-tab [title]="messageFor('tabChart')" [selected]="true">
3896
3942
  <ng-template kendoTabContent>
@@ -3920,6 +3966,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3920
3966
  standalone: true,
3921
3967
  imports: [
3922
3968
  WindowComponent,
3969
+ WindowTitleBarComponent,
3970
+ WindowMaximizeActionDirective,
3971
+ WindowCloseActionDirective,
3972
+ WindowRestoreActionDirective,
3923
3973
  SplitterComponent,
3924
3974
  SplitterPaneComponent,
3925
3975
  DropDownButtonComponent,