@progress/kendo-angular-chart-wizard 21.1.1-develop.2 → 21.2.0-develop.10

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 (7) hide show
  1. package/esm2022/chart-wizard.component.mjs +655 -636
  2. package/esm2022/package-metadata.mjs +2 -2
  3. package/esm2022/property-pane/data-tab.component.mjs +149 -145
  4. package/esm2022/property-pane/form-field.component.mjs +123 -105
  5. package/esm2022/property-pane/format-tab.component.mjs +798 -792
  6. package/fesm2022/progress-kendo-angular-chart-wizard.mjs +1727 -1677
  7. package/package.json +17 -17
package/esm2022/property-pane/format-tab.component.mjs CHANGED
@@ -11,7 +11,6 @@ import { LabelComponent } from '@progress/kendo-angular-label';
11
11
  import { SwitchComponent } from '@progress/kendo-angular-inputs';
12
12
  import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
13
13
  import { defaultAllSeriesItem, defaultFormat, labelFormats } from '../common/models';
14
- import { NgIf } from '@angular/common';
15
14
  import { ChartWizardLocalizationService } from '../localization/chartwizard-localization.service';
16
15
  import * as i0 from "@angular/core";
17
16
  import * as i1 from "../state.service";
@@ -181,419 +180,423 @@ export class ChartWizardPropertyPaneFormatTabComponent {
181
180
  return this.localization.get(key);
182
181
  }
183
182
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: i1.StateService }, { token: i2.ChartWizardLocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
184
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
183
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
185
184
  <section>
186
- <kendo-expansionpanel
187
- [style.max-width.px]="576"
188
- [title]="messageFor('formatChartArea')"
189
- [expanded]="true"
190
- [attr.dir]="stateService.direction"
185
+ <kendo-expansionpanel
186
+ [style.max-width.px]="576"
187
+ [title]="messageFor('formatChartArea')"
188
+ [expanded]="true"
189
+ [attr.dir]="stateService.direction"
191
190
  >
192
- <form class="k-form k-form-md">
193
- <fieldset class="k-form-fieldset">
194
- <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
195
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
196
- <kendo-chartwizard-property-pane-form-field
197
- [text]="messageFor('formatChartAreaMarginsLeft')"
198
- inputType="numeric"
199
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
200
- [value]="$any(stateService.state.area.margin).left"
201
- (valueChange)="updateState(areaMarginLeft, $event)"
202
- >
203
- </kendo-chartwizard-property-pane-form-field>
204
- <kendo-chartwizard-property-pane-form-field
205
- [text]="messageFor('formatChartAreaMarginsRight')"
206
- inputType="numeric"
207
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
208
- [value]="$any(stateService.state.area.margin).right"
209
- (valueChange)="updateState(areaMarginRight, $event)"
210
- >
211
- </kendo-chartwizard-property-pane-form-field>
212
- <kendo-chartwizard-property-pane-form-field
213
- [text]="messageFor('formatChartAreaMarginsTop')"
214
- inputType="numeric"
215
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
216
- [value]="$any(stateService.state.area.margin).top"
217
- (valueChange)="updateState(areaMarginTop, $event)"
218
- >
219
- </kendo-chartwizard-property-pane-form-field>
220
- <kendo-chartwizard-property-pane-form-field
221
- [text]="messageFor('formatChartAreaMarginsBottom')"
222
- inputType="numeric"
223
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
224
- [value]="$any(stateService.state.area.margin).bottom"
225
- (valueChange)="updateState(areaMarginBottom, $event)"
226
- >
227
- </kendo-chartwizard-property-pane-form-field>
228
- </div>
229
- </fieldset>
230
- <fieldset class="k-form-fieldset">
231
- <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
232
- <kendo-chartwizard-property-pane-form-field
233
- [text]="messageFor('formatChartAreaBackgroundColor')"
234
- inputType="colorPicker"
235
- [value]="stateService.state.area?.background"
236
- (valueChange)="updateState(areaBackground, $event)"
237
- >
238
- </kendo-chartwizard-property-pane-form-field>
239
- </fieldset>
240
- </form>
241
- </kendo-expansionpanel>
191
+ <form class="k-form k-form-md">
192
+ <fieldset class="k-form-fieldset">
193
+ <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
194
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
195
+ <kendo-chartwizard-property-pane-form-field
196
+ [text]="messageFor('formatChartAreaMarginsLeft')"
197
+ inputType="numeric"
198
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
199
+ [value]="$any(stateService.state.area.margin).left"
200
+ (valueChange)="updateState(areaMarginLeft, $event)"
201
+ >
202
+ </kendo-chartwizard-property-pane-form-field>
203
+ <kendo-chartwizard-property-pane-form-field
204
+ [text]="messageFor('formatChartAreaMarginsRight')"
205
+ inputType="numeric"
206
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
207
+ [value]="$any(stateService.state.area.margin).right"
208
+ (valueChange)="updateState(areaMarginRight, $event)"
209
+ >
210
+ </kendo-chartwizard-property-pane-form-field>
211
+ <kendo-chartwizard-property-pane-form-field
212
+ [text]="messageFor('formatChartAreaMarginsTop')"
213
+ inputType="numeric"
214
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
215
+ [value]="$any(stateService.state.area.margin).top"
216
+ (valueChange)="updateState(areaMarginTop, $event)"
217
+ >
218
+ </kendo-chartwizard-property-pane-form-field>
219
+ <kendo-chartwizard-property-pane-form-field
220
+ [text]="messageFor('formatChartAreaMarginsBottom')"
221
+ inputType="numeric"
222
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
223
+ [value]="$any(stateService.state.area.margin).bottom"
224
+ (valueChange)="updateState(areaMarginBottom, $event)"
225
+ >
226
+ </kendo-chartwizard-property-pane-form-field>
227
+ </div>
228
+ </fieldset>
229
+ <fieldset class="k-form-fieldset">
230
+ <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
231
+ <kendo-chartwizard-property-pane-form-field
232
+ [text]="messageFor('formatChartAreaBackgroundColor')"
233
+ inputType="colorPicker"
234
+ [value]="stateService.state.area?.background"
235
+ (valueChange)="updateState(areaBackground, $event)"
236
+ >
237
+ </kendo-chartwizard-property-pane-form-field>
238
+ </fieldset>
239
+ </form>
240
+ </kendo-expansionpanel>
242
241
  </section>
243
242
  <section>
244
- <kendo-expansionpanel
245
- [style.max-width.px]="576"
246
- [title]="messageFor('formatTitle')"
247
- [expanded]="true"
243
+ <kendo-expansionpanel
244
+ [style.max-width.px]="576"
245
+ [title]="messageFor('formatTitle')"
246
+ [expanded]="true"
248
247
  >
249
- <form class="k-form k-form-md">
250
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
251
- <kendo-chartwizard-property-pane-form-field
252
- [text]="messageFor('formatTitleApplyTo')"
253
- inputType="dropDownList"
254
- [data]="chartTitles"
255
- [colSpan]="2"
256
- [value]="stateService.currentTitle"
257
- (valueChange)="changeCurrentTitle($event)"
258
- >
259
- </kendo-chartwizard-property-pane-form-field>
260
- <kendo-chartwizard-property-pane-form-field
261
- [text]="messageFor('formatTitleLabel')"
262
- inputType="text"
263
- [colSpan]="2"
264
- [value]="chartTitleTypeText"
265
- (valueChange)="updateState(chartTitleTypeAction, $event)"
266
- >
267
- </kendo-chartwizard-property-pane-form-field>
268
- <kendo-chartwizard-property-pane-form-field
269
- [text]="messageFor('formatTitleFont')"
270
- inputType="comboBox"
271
- [data]="fontNames"
272
- [colSpan]="2"
273
- [value]="chartTitleTypeFont"
274
- [placeholder]="messageFor('formatTitleFontPlaceholder')"
275
- (valueChange)="updateState(chartTitleTypeFontAction, $event)"
276
- >
277
- </kendo-chartwizard-property-pane-form-field>
278
- <kendo-chartwizard-property-pane-form-field
279
- [text]="messageFor('formatTitleSize')"
280
- inputType="comboBox"
281
- [placeholder]="messageFor('formatTitleSizePlaceholder')"
282
- [data]="fontSizes"
283
- [value]="chartTitleTypeFontSize"
284
- (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
285
- >
286
- </kendo-chartwizard-property-pane-form-field>
287
- <kendo-chartwizard-property-pane-form-field
288
- [text]="messageFor('formatTitleColor')"
289
- inputType="colorPicker"
290
- [value]="chartTitleTypeColor"
291
- (valueChange)="updateState(chartTitleTypeColorAction, $event)"
292
- >
293
- </kendo-chartwizard-property-pane-form-field>
294
- </div>
295
- </form>
296
- </kendo-expansionpanel>
248
+ <form class="k-form k-form-md">
249
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
250
+ <kendo-chartwizard-property-pane-form-field
251
+ [text]="messageFor('formatTitleApplyTo')"
252
+ inputType="dropDownList"
253
+ [data]="chartTitles"
254
+ [colSpan]="2"
255
+ [value]="stateService.currentTitle"
256
+ (valueChange)="changeCurrentTitle($event)"
257
+ >
258
+ </kendo-chartwizard-property-pane-form-field>
259
+ <kendo-chartwizard-property-pane-form-field
260
+ [text]="messageFor('formatTitleLabel')"
261
+ inputType="text"
262
+ [colSpan]="2"
263
+ [value]="chartTitleTypeText"
264
+ (valueChange)="updateState(chartTitleTypeAction, $event)"
265
+ >
266
+ </kendo-chartwizard-property-pane-form-field>
267
+ <kendo-chartwizard-property-pane-form-field
268
+ [text]="messageFor('formatTitleFont')"
269
+ inputType="comboBox"
270
+ [data]="fontNames"
271
+ [colSpan]="2"
272
+ [value]="chartTitleTypeFont"
273
+ [placeholder]="messageFor('formatTitleFontPlaceholder')"
274
+ (valueChange)="updateState(chartTitleTypeFontAction, $event)"
275
+ >
276
+ </kendo-chartwizard-property-pane-form-field>
277
+ <kendo-chartwizard-property-pane-form-field
278
+ [text]="messageFor('formatTitleSize')"
279
+ inputType="comboBox"
280
+ [placeholder]="messageFor('formatTitleSizePlaceholder')"
281
+ [data]="fontSizes"
282
+ [value]="chartTitleTypeFontSize"
283
+ (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
284
+ >
285
+ </kendo-chartwizard-property-pane-form-field>
286
+ <kendo-chartwizard-property-pane-form-field
287
+ [text]="messageFor('formatTitleColor')"
288
+ inputType="colorPicker"
289
+ [value]="chartTitleTypeColor"
290
+ (valueChange)="updateState(chartTitleTypeColorAction, $event)"
291
+ >
292
+ </kendo-chartwizard-property-pane-form-field>
293
+ </div>
294
+ </form>
295
+ </kendo-expansionpanel>
297
296
  </section>
298
297
  <section>
299
- <kendo-expansionpanel
300
- [style.max-width.px]="576"
301
- [title]="messageFor('formatLegend')"
302
- [expanded]="true"
298
+ <kendo-expansionpanel
299
+ [style.max-width.px]="576"
300
+ [title]="messageFor('formatLegend')"
301
+ [expanded]="true"
303
302
  >
304
- <form class="k-form k-form-md">
305
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
306
- <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
307
- <kendo-switch
308
- #toggleLegend
309
- onLabel="On"
310
- offLabel="Off"
311
- thumbRounded="full"
312
- size="medium"
313
- [checked]="stateService.state.legend?.visible"
314
- (valueChange)="updateState(legendVisible, $event)"
315
- ></kendo-switch>
316
- <kendo-chartwizard-property-pane-form-field
317
- [text]="messageFor('formatLegendFont')"
318
- inputType="comboBox"
319
- [data]="fontNames"
320
- [colSpan]="2"
321
- [placeholder]="messageFor('formatLegendFontPlaceholder')"
322
- [value]="parseFont(stateService.state.legend?.labels?.font).name"
323
- (valueChange)="updateState(legendFontName, $event)"
324
- >
325
- </kendo-chartwizard-property-pane-form-field>
326
- <kendo-chartwizard-property-pane-form-field
327
- [text]="messageFor('formatLegendSize')"
328
- inputType="comboBox"
329
- [data]="fontSizes"
330
- [placeholder]="messageFor('formatLegendSizePlaceholder')"
331
- [value]="parseFont(stateService.state.legend?.labels?.font).size"
332
- (valueChange)="updateState(legendFontSize, $event)"
333
- >
334
- </kendo-chartwizard-property-pane-form-field>
335
- <kendo-chartwizard-property-pane-form-field
336
- [text]="messageFor('formatLegendColor')"
337
- inputType="colorPicker"
338
- [value]="stateService.state.legend?.labels?.color"
339
- (valueChange)="updateState(legendColor, $event)"
340
- >
341
- </kendo-chartwizard-property-pane-form-field>
342
- <kendo-chartwizard-property-pane-form-field
343
- [text]="messageFor('formatLegendPosition')"
344
- inputType="dropDownList"
345
- [colSpan]="2"
346
- [data]="legendPositions"
347
- [value]="stateService.state.legend?.position"
348
- (valueChange)="updateState(legendPosition, $event)"
349
- >
350
- </kendo-chartwizard-property-pane-form-field>
351
- </div>
352
- </form>
353
- </kendo-expansionpanel>
303
+ <form class="k-form k-form-md">
304
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
305
+ <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
306
+ <kendo-switch
307
+ #toggleLegend
308
+ onLabel="On"
309
+ offLabel="Off"
310
+ thumbRounded="full"
311
+ size="medium"
312
+ [checked]="stateService.state.legend?.visible"
313
+ (valueChange)="updateState(legendVisible, $event)"
314
+ ></kendo-switch>
315
+ <kendo-chartwizard-property-pane-form-field
316
+ [text]="messageFor('formatLegendFont')"
317
+ inputType="comboBox"
318
+ [data]="fontNames"
319
+ [colSpan]="2"
320
+ [placeholder]="messageFor('formatLegendFontPlaceholder')"
321
+ [value]="parseFont(stateService.state.legend?.labels?.font).name"
322
+ (valueChange)="updateState(legendFontName, $event)"
323
+ >
324
+ </kendo-chartwizard-property-pane-form-field>
325
+ <kendo-chartwizard-property-pane-form-field
326
+ [text]="messageFor('formatLegendSize')"
327
+ inputType="comboBox"
328
+ [data]="fontSizes"
329
+ [placeholder]="messageFor('formatLegendSizePlaceholder')"
330
+ [value]="parseFont(stateService.state.legend?.labels?.font).size"
331
+ (valueChange)="updateState(legendFontSize, $event)"
332
+ >
333
+ </kendo-chartwizard-property-pane-form-field>
334
+ <kendo-chartwizard-property-pane-form-field
335
+ [text]="messageFor('formatLegendColor')"
336
+ inputType="colorPicker"
337
+ [value]="stateService.state.legend?.labels?.color"
338
+ (valueChange)="updateState(legendColor, $event)"
339
+ >
340
+ </kendo-chartwizard-property-pane-form-field>
341
+ <kendo-chartwizard-property-pane-form-field
342
+ [text]="messageFor('formatLegendPosition')"
343
+ inputType="dropDownList"
344
+ [colSpan]="2"
345
+ [data]="legendPositions"
346
+ [value]="stateService.state.legend?.position"
347
+ (valueChange)="updateState(legendPosition, $event)"
348
+ >
349
+ </kendo-chartwizard-property-pane-form-field>
350
+ </div>
351
+ </form>
352
+ </kendo-expansionpanel>
354
353
  </section>
355
354
  <section>
356
- <kendo-expansionpanel
357
- [style.max-width.px]="576"
358
- [title]="messageFor('formatSeries')"
359
- [expanded]="true"
355
+ <kendo-expansionpanel
356
+ [style.max-width.px]="576"
357
+ [title]="messageFor('formatSeries')"
358
+ [expanded]="true"
360
359
  >
361
- <form class="k-form k-form-md">
362
- <div class="k-form-field">
363
- <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
364
- <div class="k-form-field-wrap">
365
- <kendo-dropdownlist
366
- #seriesDropDown
367
- [data]="seriesData"
368
- textField="text"
369
- valueField="name"
370
- fillMode="outline"
371
- rounded="medium"
372
- size="medium"
373
- [value]="stateService.currentSeries"
374
- (valueChange)="updateCurrentSeries($event)"
375
- ></kendo-dropdownlist>
376
- </div>
377
- </div>
378
-
360
+ <form class="k-form k-form-md">
361
+ <div class="k-form-field">
362
+ <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
363
+ <div class="k-form-field-wrap">
364
+ <kendo-dropdownlist
365
+ #seriesDropDown
366
+ [data]="seriesData"
367
+ textField="text"
368
+ valueField="name"
369
+ fillMode="outline"
370
+ rounded="medium"
371
+ size="medium"
372
+ [value]="stateService.currentSeries"
373
+ (valueChange)="updateCurrentSeries($event)"
374
+ ></kendo-dropdownlist>
375
+ </div>
376
+ </div>
377
+
378
+ <kendo-chartwizard-property-pane-form-field
379
+ [text]="messageFor('formatSeriesColor')"
380
+ [value]="stateService.currentSeries?.color"
381
+ inputType="colorPicker"
382
+ [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
383
+ (valueChange)="updateSeriesColor($event)"
384
+ >
385
+ </kendo-chartwizard-property-pane-form-field>
386
+ <kendo-chartwizard-property-pane-form-field
387
+ [text]="messageFor('formatSeriesShowLabels')"
388
+ [value]="showLabels"
389
+ [isLabelInsideFormFieldWrap]="true"
390
+ [colSpan]="2"
391
+ inputType="checkbox"
392
+ (valueChange)="toggleSeriesLabels($event)"
393
+ >
394
+ </kendo-chartwizard-property-pane-form-field>
395
+ </form>
396
+ </kendo-expansionpanel>
397
+ </section>
398
+ @if (stateService.state.seriesType !== 'pie') {
399
+ <section class="k-row-start-1 k-row-end-3 k-col-start-3">
400
+ <kendo-expansionpanel
401
+ [style.max-width.px]="576"
402
+ [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
403
+ [expanded]="true"
404
+ >
405
+ <form class="k-form k-form-md">
406
+ <fieldset class="k-form-fieldset">
407
+ <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
408
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
379
409
  <kendo-chartwizard-property-pane-form-field
380
- [text]="messageFor('formatSeriesColor')"
381
- [value]="stateService.currentSeries?.color"
382
- inputType="colorPicker"
383
- [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
384
- (valueChange)="updateSeriesColor($event)"
385
- >
410
+ inputType="text"
411
+ [hasLabel]="false"
412
+ [colSpan]="2"
413
+ [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
414
+ [value]="stateService.state.categoryAxis[0]?.title?.text || null"
415
+ (valueChange)="updateState(categoryAxisTitleText, $event)"
416
+ >
386
417
  </kendo-chartwizard-property-pane-form-field>
387
418
  <kendo-chartwizard-property-pane-form-field
388
- [text]="messageFor('formatSeriesShowLabels')"
389
- [value]="showLabels"
390
- [isLabelInsideFormFieldWrap]="true"
391
- [colSpan]="2"
392
- inputType="checkbox"
393
- (valueChange)="toggleSeriesLabels($event)"
394
- >
419
+ [text]="messageFor('formatCategoryAxisTitleFont')"
420
+ inputType="comboBox"
421
+ [data]="fontNames"
422
+ [colSpan]="2"
423
+ [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
424
+ [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
425
+ (valueChange)="updateState(categoryAxisTitleFontName, $event)"
426
+ >
395
427
  </kendo-chartwizard-property-pane-form-field>
396
- </form>
397
- </kendo-expansionpanel>
398
- </section>
399
- <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
400
- <kendo-expansionpanel
401
- [style.max-width.px]="576"
402
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
403
- [expanded]="true"
404
- >
405
- <form class="k-form k-form-md">
406
- <fieldset class="k-form-fieldset">
407
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
408
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
409
- <kendo-chartwizard-property-pane-form-field
410
- inputType="text"
411
- [hasLabel]="false"
412
- [colSpan]="2"
413
- [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
414
- [value]="stateService.state.categoryAxis[0]?.title?.text || null"
415
- (valueChange)="updateState(categoryAxisTitleText, $event)"
416
- >
417
- </kendo-chartwizard-property-pane-form-field>
418
- <kendo-chartwizard-property-pane-form-field
419
- [text]="messageFor('formatCategoryAxisTitleFont')"
420
- inputType="comboBox"
421
- [data]="fontNames"
422
- [colSpan]="2"
423
- [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
424
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
425
- (valueChange)="updateState(categoryAxisTitleFontName, $event)"
426
- >
427
- </kendo-chartwizard-property-pane-form-field>
428
- <kendo-chartwizard-property-pane-form-field
429
- [text]="messageFor('formatCategoryAxisTitleSize')"
430
- inputType="comboBox"
431
- [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
432
- [data]="fontSizes"
433
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
434
- (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
435
- >
436
- </kendo-chartwizard-property-pane-form-field>
437
- <kendo-chartwizard-property-pane-form-field
438
- [text]="messageFor('formatCategoryAxisTitleColor')"
439
- inputType="colorPicker"
440
- [value]="stateService.state.categoryAxis[0]?.title?.color"
441
- (valueChange)="updateState(categoryAxisTitleColor, $event)"
442
- >
443
- </kendo-chartwizard-property-pane-form-field>
444
- </div>
445
- </fieldset>
446
- <fieldset class="k-form-fieldset">
447
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
448
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
449
- <kendo-chartwizard-property-pane-form-field
450
- [text]="messageFor('formatCategoryAxisLabelsFont')"
451
- inputType="comboBox"
452
- [data]="fontNames"
453
- [colSpan]="2"
454
- [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
455
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
456
- (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
457
- >
458
- </kendo-chartwizard-property-pane-form-field>
459
- <kendo-chartwizard-property-pane-form-field
460
- [text]="messageFor('formatCategoryAxisLabelsSize')"
461
- inputType="comboBox"
462
- [data]="fontSizes"
463
- [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
464
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
465
- (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
466
- >
467
- </kendo-chartwizard-property-pane-form-field>
468
- <kendo-chartwizard-property-pane-form-field
469
- [text]="messageFor('formatCategoryAxisLabelsColor')"
470
- inputType="colorPicker"
471
- [value]="stateService.state.categoryAxis[0]?.labels?.color"
472
- (valueChange)="updateState(categoryAxisLabelsColor, $event)"
473
- >
474
- </kendo-chartwizard-property-pane-form-field>
475
- <kendo-chartwizard-property-pane-form-field
476
- [text]="messageFor('formatCategoryAxisLabelsRotation')"
477
- inputType="dropDownList"
478
- [data]="labelsCategoryAxisRotation"
479
- [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
480
- (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
481
- >
482
- </kendo-chartwizard-property-pane-form-field>
483
- <span></span>
484
- <kendo-chartwizard-property-pane-form-field
485
- [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
486
- [isLabelInsideFormFieldWrap]="true"
487
- inputType="checkbox"
488
- [colSpan]="2"
489
- [value]="stateService.state.categoryAxis[0]?.reverse"
490
- (valueChange)="updateState(categoryAxisReverseOrder, $event)"
491
- >
492
- </kendo-chartwizard-property-pane-form-field>
493
- </div>
494
- </fieldset>
495
- </form>
428
+ <kendo-chartwizard-property-pane-form-field
429
+ [text]="messageFor('formatCategoryAxisTitleSize')"
430
+ inputType="comboBox"
431
+ [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
432
+ [data]="fontSizes"
433
+ [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
434
+ (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
435
+ >
436
+ </kendo-chartwizard-property-pane-form-field>
437
+ <kendo-chartwizard-property-pane-form-field
438
+ [text]="messageFor('formatCategoryAxisTitleColor')"
439
+ inputType="colorPicker"
440
+ [value]="stateService.state.categoryAxis[0]?.title?.color"
441
+ (valueChange)="updateState(categoryAxisTitleColor, $event)"
442
+ >
443
+ </kendo-chartwizard-property-pane-form-field>
444
+ </div>
445
+ </fieldset>
446
+ <fieldset class="k-form-fieldset">
447
+ <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
448
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
449
+ <kendo-chartwizard-property-pane-form-field
450
+ [text]="messageFor('formatCategoryAxisLabelsFont')"
451
+ inputType="comboBox"
452
+ [data]="fontNames"
453
+ [colSpan]="2"
454
+ [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
455
+ [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
456
+ (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
457
+ >
458
+ </kendo-chartwizard-property-pane-form-field>
459
+ <kendo-chartwizard-property-pane-form-field
460
+ [text]="messageFor('formatCategoryAxisLabelsSize')"
461
+ inputType="comboBox"
462
+ [data]="fontSizes"
463
+ [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
464
+ [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
465
+ (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
466
+ >
467
+ </kendo-chartwizard-property-pane-form-field>
468
+ <kendo-chartwizard-property-pane-form-field
469
+ [text]="messageFor('formatCategoryAxisLabelsColor')"
470
+ inputType="colorPicker"
471
+ [value]="stateService.state.categoryAxis[0]?.labels?.color"
472
+ (valueChange)="updateState(categoryAxisLabelsColor, $event)"
473
+ >
474
+ </kendo-chartwizard-property-pane-form-field>
475
+ <kendo-chartwizard-property-pane-form-field
476
+ [text]="messageFor('formatCategoryAxisLabelsRotation')"
477
+ inputType="dropDownList"
478
+ [data]="labelsCategoryAxisRotation"
479
+ [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
480
+ (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
481
+ >
482
+ </kendo-chartwizard-property-pane-form-field>
483
+ <span></span>
484
+ <kendo-chartwizard-property-pane-form-field
485
+ [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
486
+ [isLabelInsideFormFieldWrap]="true"
487
+ inputType="checkbox"
488
+ [colSpan]="2"
489
+ [value]="stateService.state.categoryAxis[0]?.reverse"
490
+ (valueChange)="updateState(categoryAxisReverseOrder, $event)"
491
+ >
492
+ </kendo-chartwizard-property-pane-form-field>
493
+ </div>
494
+ </fieldset>
495
+ </form>
496
496
  </kendo-expansionpanel>
497
- </section>
498
- <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
497
+ </section>
498
+ }
499
+ @if (stateService.state.seriesType !== 'pie') {
500
+ <section class="k-row-start-1 k-row-end-3 k-col-start-4">
499
501
  <kendo-expansionpanel
500
- [style.max-width.px]="576"
501
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
502
- [expanded]="true"
503
- >
504
- <form class="k-form k-form-md">
505
- <fieldset class="k-form-fieldset">
506
- <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
507
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
508
- <kendo-chartwizard-property-pane-form-field
509
- inputType="text"
510
- [hasLabel]="false"
511
- [colSpan]="2"
512
- [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
513
- [value]="stateService.state.valueAxis[0]?.title?.text || null"
514
- (valueChange)="updateState(valueAxisTitleText, $event)"
515
- >
516
- </kendo-chartwizard-property-pane-form-field>
517
- <kendo-chartwizard-property-pane-form-field
518
- [text]="messageFor('formatValueAxisTitleFont')"
519
- inputType="comboBox"
520
- [colSpan]="2"
521
- [data]="fontNames"
522
- [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
523
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
524
- (valueChange)="updateState(valueAxisTitleFontName, $event)"
525
- >
526
- </kendo-chartwizard-property-pane-form-field>
527
- <kendo-chartwizard-property-pane-form-field
528
- [text]="messageFor('formatValueAxisTitleSize')"
529
- inputType="comboBox"
530
- [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
531
- [data]="fontSizes"
532
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
533
- (valueChange)="updateState(valueAxisTitleFontSize, $event)"
534
- >
535
- </kendo-chartwizard-property-pane-form-field>
536
- <kendo-chartwizard-property-pane-form-field
537
- [text]="messageFor('formatValueAxisTitleColor')"
538
- inputType="colorPicker"
539
- [value]="stateService.state.valueAxis[0]?.title?.color"
540
- (valueChange)="updateState(valueAxisTitleColor, $event)"
541
- >
542
- </kendo-chartwizard-property-pane-form-field>
543
- </div>
544
- </fieldset>
545
- <fieldset class="k-form-fieldset">
546
- <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
547
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
548
- <kendo-chartwizard-property-pane-form-field
549
- [text]="messageFor('formatValueAxisLabelsFormat')"
550
- [colSpan]="2"
551
- inputType="dropDownList"
552
- [data]="labelFormats"
553
- [value]="labelFormatValue"
554
- (valueChange)="updateState(valueAxisLabelsFormat, $event)"
555
- >
556
- </kendo-chartwizard-property-pane-form-field>
557
- <kendo-chartwizard-property-pane-form-field
558
- [text]="messageFor('formatValueAxisLabelsFont')"
559
- inputType="comboBox"
560
- [data]="fontNames"
561
- [colSpan]="2"
562
- [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
563
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
564
- (valueChange)="updateState(valueAxisLabelsFontName, $event)"
565
- >
566
- </kendo-chartwizard-property-pane-form-field>
567
- <kendo-chartwizard-property-pane-form-field
568
- [text]="messageFor('formatValueAxisLabelsSize')"
569
- inputType="comboBox"
570
- [data]="fontSizes"
571
- [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
572
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
573
- (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
574
- >
575
- </kendo-chartwizard-property-pane-form-field>
576
- <kendo-chartwizard-property-pane-form-field
577
- [text]="messageFor('formatValueAxisLabelsColor')"
578
- inputType="colorPicker"
579
- [value]="stateService.state.valueAxis[0]?.labels?.color"
580
- (valueChange)="updateState(valueAxisLabelsColor, $event)"
581
- >
582
- </kendo-chartwizard-property-pane-form-field>
583
- <kendo-chartwizard-property-pane-form-field
584
- [text]="messageFor('formatValueAxisLabelsRotation')"
585
- inputType="dropDownList"
586
- [data]="labelsValueAxisRotation"
587
- [value]="stateService.state.valueAxis[0]?.labels?.rotation"
588
- (valueChange)="updateState(valueAxisLabelsRotation, $event)"
589
- >
590
- </kendo-chartwizard-property-pane-form-field>
591
- </div>
592
- </fieldset>
593
- </form>
502
+ [style.max-width.px]="576"
503
+ [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
504
+ [expanded]="true"
505
+ >
506
+ <form class="k-form k-form-md">
507
+ <fieldset class="k-form-fieldset">
508
+ <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
509
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
510
+ <kendo-chartwizard-property-pane-form-field
511
+ inputType="text"
512
+ [hasLabel]="false"
513
+ [colSpan]="2"
514
+ [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
515
+ [value]="stateService.state.valueAxis[0]?.title?.text || null"
516
+ (valueChange)="updateState(valueAxisTitleText, $event)"
517
+ >
518
+ </kendo-chartwizard-property-pane-form-field>
519
+ <kendo-chartwizard-property-pane-form-field
520
+ [text]="messageFor('formatValueAxisTitleFont')"
521
+ inputType="comboBox"
522
+ [colSpan]="2"
523
+ [data]="fontNames"
524
+ [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
525
+ [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
526
+ (valueChange)="updateState(valueAxisTitleFontName, $event)"
527
+ >
528
+ </kendo-chartwizard-property-pane-form-field>
529
+ <kendo-chartwizard-property-pane-form-field
530
+ [text]="messageFor('formatValueAxisTitleSize')"
531
+ inputType="comboBox"
532
+ [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
533
+ [data]="fontSizes"
534
+ [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
535
+ (valueChange)="updateState(valueAxisTitleFontSize, $event)"
536
+ >
537
+ </kendo-chartwizard-property-pane-form-field>
538
+ <kendo-chartwizard-property-pane-form-field
539
+ [text]="messageFor('formatValueAxisTitleColor')"
540
+ inputType="colorPicker"
541
+ [value]="stateService.state.valueAxis[0]?.title?.color"
542
+ (valueChange)="updateState(valueAxisTitleColor, $event)"
543
+ >
544
+ </kendo-chartwizard-property-pane-form-field>
545
+ </div>
546
+ </fieldset>
547
+ <fieldset class="k-form-fieldset">
548
+ <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
549
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
550
+ <kendo-chartwizard-property-pane-form-field
551
+ [text]="messageFor('formatValueAxisLabelsFormat')"
552
+ [colSpan]="2"
553
+ inputType="dropDownList"
554
+ [data]="labelFormats"
555
+ [value]="labelFormatValue"
556
+ (valueChange)="updateState(valueAxisLabelsFormat, $event)"
557
+ >
558
+ </kendo-chartwizard-property-pane-form-field>
559
+ <kendo-chartwizard-property-pane-form-field
560
+ [text]="messageFor('formatValueAxisLabelsFont')"
561
+ inputType="comboBox"
562
+ [data]="fontNames"
563
+ [colSpan]="2"
564
+ [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
565
+ [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
566
+ (valueChange)="updateState(valueAxisLabelsFontName, $event)"
567
+ >
568
+ </kendo-chartwizard-property-pane-form-field>
569
+ <kendo-chartwizard-property-pane-form-field
570
+ [text]="messageFor('formatValueAxisLabelsSize')"
571
+ inputType="comboBox"
572
+ [data]="fontSizes"
573
+ [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
574
+ [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
575
+ (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
576
+ >
577
+ </kendo-chartwizard-property-pane-form-field>
578
+ <kendo-chartwizard-property-pane-form-field
579
+ [text]="messageFor('formatValueAxisLabelsColor')"
580
+ inputType="colorPicker"
581
+ [value]="stateService.state.valueAxis[0]?.labels?.color"
582
+ (valueChange)="updateState(valueAxisLabelsColor, $event)"
583
+ >
584
+ </kendo-chartwizard-property-pane-form-field>
585
+ <kendo-chartwizard-property-pane-form-field
586
+ [text]="messageFor('formatValueAxisLabelsRotation')"
587
+ inputType="dropDownList"
588
+ [data]="labelsValueAxisRotation"
589
+ [value]="stateService.state.valueAxis[0]?.labels?.rotation"
590
+ (valueChange)="updateState(valueAxisLabelsRotation, $event)"
591
+ >
592
+ </kendo-chartwizard-property-pane-form-field>
593
+ </div>
594
+ </fieldset>
595
+ </form>
594
596
  </kendo-expansionpanel>
595
- </section>
596
- `, 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
597
+ </section>
598
+ }
599
+ `, 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 });
597
600
  }
598
601
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
599
602
  type: Component,
@@ -602,425 +605,428 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
602
605
  changeDetection: ChangeDetectionStrategy.OnPush,
603
606
  template: `
604
607
  <section>
605
- <kendo-expansionpanel
606
- [style.max-width.px]="576"
607
- [title]="messageFor('formatChartArea')"
608
- [expanded]="true"
609
- [attr.dir]="stateService.direction"
608
+ <kendo-expansionpanel
609
+ [style.max-width.px]="576"
610
+ [title]="messageFor('formatChartArea')"
611
+ [expanded]="true"
612
+ [attr.dir]="stateService.direction"
610
613
  >
611
- <form class="k-form k-form-md">
612
- <fieldset class="k-form-fieldset">
613
- <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
614
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
615
- <kendo-chartwizard-property-pane-form-field
616
- [text]="messageFor('formatChartAreaMarginsLeft')"
617
- inputType="numeric"
618
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
619
- [value]="$any(stateService.state.area.margin).left"
620
- (valueChange)="updateState(areaMarginLeft, $event)"
621
- >
622
- </kendo-chartwizard-property-pane-form-field>
623
- <kendo-chartwizard-property-pane-form-field
624
- [text]="messageFor('formatChartAreaMarginsRight')"
625
- inputType="numeric"
626
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
627
- [value]="$any(stateService.state.area.margin).right"
628
- (valueChange)="updateState(areaMarginRight, $event)"
629
- >
630
- </kendo-chartwizard-property-pane-form-field>
631
- <kendo-chartwizard-property-pane-form-field
632
- [text]="messageFor('formatChartAreaMarginsTop')"
633
- inputType="numeric"
634
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
635
- [value]="$any(stateService.state.area.margin).top"
636
- (valueChange)="updateState(areaMarginTop, $event)"
637
- >
638
- </kendo-chartwizard-property-pane-form-field>
639
- <kendo-chartwizard-property-pane-form-field
640
- [text]="messageFor('formatChartAreaMarginsBottom')"
641
- inputType="numeric"
642
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
643
- [value]="$any(stateService.state.area.margin).bottom"
644
- (valueChange)="updateState(areaMarginBottom, $event)"
645
- >
646
- </kendo-chartwizard-property-pane-form-field>
647
- </div>
648
- </fieldset>
649
- <fieldset class="k-form-fieldset">
650
- <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
651
- <kendo-chartwizard-property-pane-form-field
652
- [text]="messageFor('formatChartAreaBackgroundColor')"
653
- inputType="colorPicker"
654
- [value]="stateService.state.area?.background"
655
- (valueChange)="updateState(areaBackground, $event)"
656
- >
657
- </kendo-chartwizard-property-pane-form-field>
658
- </fieldset>
659
- </form>
660
- </kendo-expansionpanel>
614
+ <form class="k-form k-form-md">
615
+ <fieldset class="k-form-fieldset">
616
+ <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
617
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
618
+ <kendo-chartwizard-property-pane-form-field
619
+ [text]="messageFor('formatChartAreaMarginsLeft')"
620
+ inputType="numeric"
621
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
622
+ [value]="$any(stateService.state.area.margin).left"
623
+ (valueChange)="updateState(areaMarginLeft, $event)"
624
+ >
625
+ </kendo-chartwizard-property-pane-form-field>
626
+ <kendo-chartwizard-property-pane-form-field
627
+ [text]="messageFor('formatChartAreaMarginsRight')"
628
+ inputType="numeric"
629
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
630
+ [value]="$any(stateService.state.area.margin).right"
631
+ (valueChange)="updateState(areaMarginRight, $event)"
632
+ >
633
+ </kendo-chartwizard-property-pane-form-field>
634
+ <kendo-chartwizard-property-pane-form-field
635
+ [text]="messageFor('formatChartAreaMarginsTop')"
636
+ inputType="numeric"
637
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
638
+ [value]="$any(stateService.state.area.margin).top"
639
+ (valueChange)="updateState(areaMarginTop, $event)"
640
+ >
641
+ </kendo-chartwizard-property-pane-form-field>
642
+ <kendo-chartwizard-property-pane-form-field
643
+ [text]="messageFor('formatChartAreaMarginsBottom')"
644
+ inputType="numeric"
645
+ [placeholder]="messageFor('formatChartAreaMarginsAuto')"
646
+ [value]="$any(stateService.state.area.margin).bottom"
647
+ (valueChange)="updateState(areaMarginBottom, $event)"
648
+ >
649
+ </kendo-chartwizard-property-pane-form-field>
650
+ </div>
651
+ </fieldset>
652
+ <fieldset class="k-form-fieldset">
653
+ <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
654
+ <kendo-chartwizard-property-pane-form-field
655
+ [text]="messageFor('formatChartAreaBackgroundColor')"
656
+ inputType="colorPicker"
657
+ [value]="stateService.state.area?.background"
658
+ (valueChange)="updateState(areaBackground, $event)"
659
+ >
660
+ </kendo-chartwizard-property-pane-form-field>
661
+ </fieldset>
662
+ </form>
663
+ </kendo-expansionpanel>
661
664
  </section>
662
665
  <section>
663
- <kendo-expansionpanel
664
- [style.max-width.px]="576"
665
- [title]="messageFor('formatTitle')"
666
- [expanded]="true"
666
+ <kendo-expansionpanel
667
+ [style.max-width.px]="576"
668
+ [title]="messageFor('formatTitle')"
669
+ [expanded]="true"
667
670
  >
668
- <form class="k-form k-form-md">
669
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
670
- <kendo-chartwizard-property-pane-form-field
671
- [text]="messageFor('formatTitleApplyTo')"
672
- inputType="dropDownList"
673
- [data]="chartTitles"
674
- [colSpan]="2"
675
- [value]="stateService.currentTitle"
676
- (valueChange)="changeCurrentTitle($event)"
677
- >
678
- </kendo-chartwizard-property-pane-form-field>
679
- <kendo-chartwizard-property-pane-form-field
680
- [text]="messageFor('formatTitleLabel')"
681
- inputType="text"
682
- [colSpan]="2"
683
- [value]="chartTitleTypeText"
684
- (valueChange)="updateState(chartTitleTypeAction, $event)"
685
- >
686
- </kendo-chartwizard-property-pane-form-field>
687
- <kendo-chartwizard-property-pane-form-field
688
- [text]="messageFor('formatTitleFont')"
689
- inputType="comboBox"
690
- [data]="fontNames"
691
- [colSpan]="2"
692
- [value]="chartTitleTypeFont"
693
- [placeholder]="messageFor('formatTitleFontPlaceholder')"
694
- (valueChange)="updateState(chartTitleTypeFontAction, $event)"
695
- >
696
- </kendo-chartwizard-property-pane-form-field>
697
- <kendo-chartwizard-property-pane-form-field
698
- [text]="messageFor('formatTitleSize')"
699
- inputType="comboBox"
700
- [placeholder]="messageFor('formatTitleSizePlaceholder')"
701
- [data]="fontSizes"
702
- [value]="chartTitleTypeFontSize"
703
- (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
704
- >
705
- </kendo-chartwizard-property-pane-form-field>
706
- <kendo-chartwizard-property-pane-form-field
707
- [text]="messageFor('formatTitleColor')"
708
- inputType="colorPicker"
709
- [value]="chartTitleTypeColor"
710
- (valueChange)="updateState(chartTitleTypeColorAction, $event)"
711
- >
712
- </kendo-chartwizard-property-pane-form-field>
713
- </div>
714
- </form>
715
- </kendo-expansionpanel>
671
+ <form class="k-form k-form-md">
672
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
673
+ <kendo-chartwizard-property-pane-form-field
674
+ [text]="messageFor('formatTitleApplyTo')"
675
+ inputType="dropDownList"
676
+ [data]="chartTitles"
677
+ [colSpan]="2"
678
+ [value]="stateService.currentTitle"
679
+ (valueChange)="changeCurrentTitle($event)"
680
+ >
681
+ </kendo-chartwizard-property-pane-form-field>
682
+ <kendo-chartwizard-property-pane-form-field
683
+ [text]="messageFor('formatTitleLabel')"
684
+ inputType="text"
685
+ [colSpan]="2"
686
+ [value]="chartTitleTypeText"
687
+ (valueChange)="updateState(chartTitleTypeAction, $event)"
688
+ >
689
+ </kendo-chartwizard-property-pane-form-field>
690
+ <kendo-chartwizard-property-pane-form-field
691
+ [text]="messageFor('formatTitleFont')"
692
+ inputType="comboBox"
693
+ [data]="fontNames"
694
+ [colSpan]="2"
695
+ [value]="chartTitleTypeFont"
696
+ [placeholder]="messageFor('formatTitleFontPlaceholder')"
697
+ (valueChange)="updateState(chartTitleTypeFontAction, $event)"
698
+ >
699
+ </kendo-chartwizard-property-pane-form-field>
700
+ <kendo-chartwizard-property-pane-form-field
701
+ [text]="messageFor('formatTitleSize')"
702
+ inputType="comboBox"
703
+ [placeholder]="messageFor('formatTitleSizePlaceholder')"
704
+ [data]="fontSizes"
705
+ [value]="chartTitleTypeFontSize"
706
+ (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
707
+ >
708
+ </kendo-chartwizard-property-pane-form-field>
709
+ <kendo-chartwizard-property-pane-form-field
710
+ [text]="messageFor('formatTitleColor')"
711
+ inputType="colorPicker"
712
+ [value]="chartTitleTypeColor"
713
+ (valueChange)="updateState(chartTitleTypeColorAction, $event)"
714
+ >
715
+ </kendo-chartwizard-property-pane-form-field>
716
+ </div>
717
+ </form>
718
+ </kendo-expansionpanel>
716
719
  </section>
717
720
  <section>
718
- <kendo-expansionpanel
719
- [style.max-width.px]="576"
720
- [title]="messageFor('formatLegend')"
721
- [expanded]="true"
721
+ <kendo-expansionpanel
722
+ [style.max-width.px]="576"
723
+ [title]="messageFor('formatLegend')"
724
+ [expanded]="true"
722
725
  >
723
- <form class="k-form k-form-md">
724
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
725
- <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
726
- <kendo-switch
727
- #toggleLegend
728
- onLabel="On"
729
- offLabel="Off"
730
- thumbRounded="full"
731
- size="medium"
732
- [checked]="stateService.state.legend?.visible"
733
- (valueChange)="updateState(legendVisible, $event)"
734
- ></kendo-switch>
735
- <kendo-chartwizard-property-pane-form-field
736
- [text]="messageFor('formatLegendFont')"
737
- inputType="comboBox"
738
- [data]="fontNames"
739
- [colSpan]="2"
740
- [placeholder]="messageFor('formatLegendFontPlaceholder')"
741
- [value]="parseFont(stateService.state.legend?.labels?.font).name"
742
- (valueChange)="updateState(legendFontName, $event)"
743
- >
744
- </kendo-chartwizard-property-pane-form-field>
745
- <kendo-chartwizard-property-pane-form-field
746
- [text]="messageFor('formatLegendSize')"
747
- inputType="comboBox"
748
- [data]="fontSizes"
749
- [placeholder]="messageFor('formatLegendSizePlaceholder')"
750
- [value]="parseFont(stateService.state.legend?.labels?.font).size"
751
- (valueChange)="updateState(legendFontSize, $event)"
752
- >
753
- </kendo-chartwizard-property-pane-form-field>
754
- <kendo-chartwizard-property-pane-form-field
755
- [text]="messageFor('formatLegendColor')"
756
- inputType="colorPicker"
757
- [value]="stateService.state.legend?.labels?.color"
758
- (valueChange)="updateState(legendColor, $event)"
759
- >
760
- </kendo-chartwizard-property-pane-form-field>
761
- <kendo-chartwizard-property-pane-form-field
762
- [text]="messageFor('formatLegendPosition')"
763
- inputType="dropDownList"
764
- [colSpan]="2"
765
- [data]="legendPositions"
766
- [value]="stateService.state.legend?.position"
767
- (valueChange)="updateState(legendPosition, $event)"
768
- >
769
- </kendo-chartwizard-property-pane-form-field>
770
- </div>
771
- </form>
772
- </kendo-expansionpanel>
726
+ <form class="k-form k-form-md">
727
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
728
+ <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
729
+ <kendo-switch
730
+ #toggleLegend
731
+ onLabel="On"
732
+ offLabel="Off"
733
+ thumbRounded="full"
734
+ size="medium"
735
+ [checked]="stateService.state.legend?.visible"
736
+ (valueChange)="updateState(legendVisible, $event)"
737
+ ></kendo-switch>
738
+ <kendo-chartwizard-property-pane-form-field
739
+ [text]="messageFor('formatLegendFont')"
740
+ inputType="comboBox"
741
+ [data]="fontNames"
742
+ [colSpan]="2"
743
+ [placeholder]="messageFor('formatLegendFontPlaceholder')"
744
+ [value]="parseFont(stateService.state.legend?.labels?.font).name"
745
+ (valueChange)="updateState(legendFontName, $event)"
746
+ >
747
+ </kendo-chartwizard-property-pane-form-field>
748
+ <kendo-chartwizard-property-pane-form-field
749
+ [text]="messageFor('formatLegendSize')"
750
+ inputType="comboBox"
751
+ [data]="fontSizes"
752
+ [placeholder]="messageFor('formatLegendSizePlaceholder')"
753
+ [value]="parseFont(stateService.state.legend?.labels?.font).size"
754
+ (valueChange)="updateState(legendFontSize, $event)"
755
+ >
756
+ </kendo-chartwizard-property-pane-form-field>
757
+ <kendo-chartwizard-property-pane-form-field
758
+ [text]="messageFor('formatLegendColor')"
759
+ inputType="colorPicker"
760
+ [value]="stateService.state.legend?.labels?.color"
761
+ (valueChange)="updateState(legendColor, $event)"
762
+ >
763
+ </kendo-chartwizard-property-pane-form-field>
764
+ <kendo-chartwizard-property-pane-form-field
765
+ [text]="messageFor('formatLegendPosition')"
766
+ inputType="dropDownList"
767
+ [colSpan]="2"
768
+ [data]="legendPositions"
769
+ [value]="stateService.state.legend?.position"
770
+ (valueChange)="updateState(legendPosition, $event)"
771
+ >
772
+ </kendo-chartwizard-property-pane-form-field>
773
+ </div>
774
+ </form>
775
+ </kendo-expansionpanel>
773
776
  </section>
774
777
  <section>
775
- <kendo-expansionpanel
776
- [style.max-width.px]="576"
777
- [title]="messageFor('formatSeries')"
778
- [expanded]="true"
778
+ <kendo-expansionpanel
779
+ [style.max-width.px]="576"
780
+ [title]="messageFor('formatSeries')"
781
+ [expanded]="true"
779
782
  >
780
- <form class="k-form k-form-md">
781
- <div class="k-form-field">
782
- <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
783
- <div class="k-form-field-wrap">
784
- <kendo-dropdownlist
785
- #seriesDropDown
786
- [data]="seriesData"
787
- textField="text"
788
- valueField="name"
789
- fillMode="outline"
790
- rounded="medium"
791
- size="medium"
792
- [value]="stateService.currentSeries"
793
- (valueChange)="updateCurrentSeries($event)"
794
- ></kendo-dropdownlist>
795
- </div>
796
- </div>
797
-
783
+ <form class="k-form k-form-md">
784
+ <div class="k-form-field">
785
+ <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
786
+ <div class="k-form-field-wrap">
787
+ <kendo-dropdownlist
788
+ #seriesDropDown
789
+ [data]="seriesData"
790
+ textField="text"
791
+ valueField="name"
792
+ fillMode="outline"
793
+ rounded="medium"
794
+ size="medium"
795
+ [value]="stateService.currentSeries"
796
+ (valueChange)="updateCurrentSeries($event)"
797
+ ></kendo-dropdownlist>
798
+ </div>
799
+ </div>
800
+
801
+ <kendo-chartwizard-property-pane-form-field
802
+ [text]="messageFor('formatSeriesColor')"
803
+ [value]="stateService.currentSeries?.color"
804
+ inputType="colorPicker"
805
+ [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
806
+ (valueChange)="updateSeriesColor($event)"
807
+ >
808
+ </kendo-chartwizard-property-pane-form-field>
809
+ <kendo-chartwizard-property-pane-form-field
810
+ [text]="messageFor('formatSeriesShowLabels')"
811
+ [value]="showLabels"
812
+ [isLabelInsideFormFieldWrap]="true"
813
+ [colSpan]="2"
814
+ inputType="checkbox"
815
+ (valueChange)="toggleSeriesLabels($event)"
816
+ >
817
+ </kendo-chartwizard-property-pane-form-field>
818
+ </form>
819
+ </kendo-expansionpanel>
820
+ </section>
821
+ @if (stateService.state.seriesType !== 'pie') {
822
+ <section class="k-row-start-1 k-row-end-3 k-col-start-3">
823
+ <kendo-expansionpanel
824
+ [style.max-width.px]="576"
825
+ [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
826
+ [expanded]="true"
827
+ >
828
+ <form class="k-form k-form-md">
829
+ <fieldset class="k-form-fieldset">
830
+ <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
831
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
798
832
  <kendo-chartwizard-property-pane-form-field
799
- [text]="messageFor('formatSeriesColor')"
800
- [value]="stateService.currentSeries?.color"
801
- inputType="colorPicker"
802
- [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
803
- (valueChange)="updateSeriesColor($event)"
804
- >
833
+ inputType="text"
834
+ [hasLabel]="false"
835
+ [colSpan]="2"
836
+ [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
837
+ [value]="stateService.state.categoryAxis[0]?.title?.text || null"
838
+ (valueChange)="updateState(categoryAxisTitleText, $event)"
839
+ >
805
840
  </kendo-chartwizard-property-pane-form-field>
806
841
  <kendo-chartwizard-property-pane-form-field
807
- [text]="messageFor('formatSeriesShowLabels')"
808
- [value]="showLabels"
809
- [isLabelInsideFormFieldWrap]="true"
810
- [colSpan]="2"
811
- inputType="checkbox"
812
- (valueChange)="toggleSeriesLabels($event)"
813
- >
842
+ [text]="messageFor('formatCategoryAxisTitleFont')"
843
+ inputType="comboBox"
844
+ [data]="fontNames"
845
+ [colSpan]="2"
846
+ [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
847
+ [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
848
+ (valueChange)="updateState(categoryAxisTitleFontName, $event)"
849
+ >
814
850
  </kendo-chartwizard-property-pane-form-field>
815
- </form>
816
- </kendo-expansionpanel>
817
- </section>
818
- <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
819
- <kendo-expansionpanel
820
- [style.max-width.px]="576"
821
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
822
- [expanded]="true"
823
- >
824
- <form class="k-form k-form-md">
825
- <fieldset class="k-form-fieldset">
826
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
827
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
828
- <kendo-chartwizard-property-pane-form-field
829
- inputType="text"
830
- [hasLabel]="false"
831
- [colSpan]="2"
832
- [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
833
- [value]="stateService.state.categoryAxis[0]?.title?.text || null"
834
- (valueChange)="updateState(categoryAxisTitleText, $event)"
835
- >
836
- </kendo-chartwizard-property-pane-form-field>
837
- <kendo-chartwizard-property-pane-form-field
838
- [text]="messageFor('formatCategoryAxisTitleFont')"
839
- inputType="comboBox"
840
- [data]="fontNames"
841
- [colSpan]="2"
842
- [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
843
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
844
- (valueChange)="updateState(categoryAxisTitleFontName, $event)"
845
- >
846
- </kendo-chartwizard-property-pane-form-field>
847
- <kendo-chartwizard-property-pane-form-field
848
- [text]="messageFor('formatCategoryAxisTitleSize')"
849
- inputType="comboBox"
850
- [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
851
- [data]="fontSizes"
852
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
853
- (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
854
- >
855
- </kendo-chartwizard-property-pane-form-field>
856
- <kendo-chartwizard-property-pane-form-field
857
- [text]="messageFor('formatCategoryAxisTitleColor')"
858
- inputType="colorPicker"
859
- [value]="stateService.state.categoryAxis[0]?.title?.color"
860
- (valueChange)="updateState(categoryAxisTitleColor, $event)"
861
- >
862
- </kendo-chartwizard-property-pane-form-field>
863
- </div>
864
- </fieldset>
865
- <fieldset class="k-form-fieldset">
866
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
867
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
868
- <kendo-chartwizard-property-pane-form-field
869
- [text]="messageFor('formatCategoryAxisLabelsFont')"
870
- inputType="comboBox"
871
- [data]="fontNames"
872
- [colSpan]="2"
873
- [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
874
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
875
- (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
876
- >
877
- </kendo-chartwizard-property-pane-form-field>
878
- <kendo-chartwizard-property-pane-form-field
879
- [text]="messageFor('formatCategoryAxisLabelsSize')"
880
- inputType="comboBox"
881
- [data]="fontSizes"
882
- [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
883
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
884
- (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
885
- >
886
- </kendo-chartwizard-property-pane-form-field>
887
- <kendo-chartwizard-property-pane-form-field
888
- [text]="messageFor('formatCategoryAxisLabelsColor')"
889
- inputType="colorPicker"
890
- [value]="stateService.state.categoryAxis[0]?.labels?.color"
891
- (valueChange)="updateState(categoryAxisLabelsColor, $event)"
892
- >
893
- </kendo-chartwizard-property-pane-form-field>
894
- <kendo-chartwizard-property-pane-form-field
895
- [text]="messageFor('formatCategoryAxisLabelsRotation')"
896
- inputType="dropDownList"
897
- [data]="labelsCategoryAxisRotation"
898
- [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
899
- (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
900
- >
901
- </kendo-chartwizard-property-pane-form-field>
902
- <span></span>
903
- <kendo-chartwizard-property-pane-form-field
904
- [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
905
- [isLabelInsideFormFieldWrap]="true"
906
- inputType="checkbox"
907
- [colSpan]="2"
908
- [value]="stateService.state.categoryAxis[0]?.reverse"
909
- (valueChange)="updateState(categoryAxisReverseOrder, $event)"
910
- >
911
- </kendo-chartwizard-property-pane-form-field>
912
- </div>
913
- </fieldset>
914
- </form>
851
+ <kendo-chartwizard-property-pane-form-field
852
+ [text]="messageFor('formatCategoryAxisTitleSize')"
853
+ inputType="comboBox"
854
+ [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
855
+ [data]="fontSizes"
856
+ [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
857
+ (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
858
+ >
859
+ </kendo-chartwizard-property-pane-form-field>
860
+ <kendo-chartwizard-property-pane-form-field
861
+ [text]="messageFor('formatCategoryAxisTitleColor')"
862
+ inputType="colorPicker"
863
+ [value]="stateService.state.categoryAxis[0]?.title?.color"
864
+ (valueChange)="updateState(categoryAxisTitleColor, $event)"
865
+ >
866
+ </kendo-chartwizard-property-pane-form-field>
867
+ </div>
868
+ </fieldset>
869
+ <fieldset class="k-form-fieldset">
870
+ <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
871
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
872
+ <kendo-chartwizard-property-pane-form-field
873
+ [text]="messageFor('formatCategoryAxisLabelsFont')"
874
+ inputType="comboBox"
875
+ [data]="fontNames"
876
+ [colSpan]="2"
877
+ [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
878
+ [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
879
+ (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
880
+ >
881
+ </kendo-chartwizard-property-pane-form-field>
882
+ <kendo-chartwizard-property-pane-form-field
883
+ [text]="messageFor('formatCategoryAxisLabelsSize')"
884
+ inputType="comboBox"
885
+ [data]="fontSizes"
886
+ [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
887
+ [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
888
+ (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
889
+ >
890
+ </kendo-chartwizard-property-pane-form-field>
891
+ <kendo-chartwizard-property-pane-form-field
892
+ [text]="messageFor('formatCategoryAxisLabelsColor')"
893
+ inputType="colorPicker"
894
+ [value]="stateService.state.categoryAxis[0]?.labels?.color"
895
+ (valueChange)="updateState(categoryAxisLabelsColor, $event)"
896
+ >
897
+ </kendo-chartwizard-property-pane-form-field>
898
+ <kendo-chartwizard-property-pane-form-field
899
+ [text]="messageFor('formatCategoryAxisLabelsRotation')"
900
+ inputType="dropDownList"
901
+ [data]="labelsCategoryAxisRotation"
902
+ [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
903
+ (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
904
+ >
905
+ </kendo-chartwizard-property-pane-form-field>
906
+ <span></span>
907
+ <kendo-chartwizard-property-pane-form-field
908
+ [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
909
+ [isLabelInsideFormFieldWrap]="true"
910
+ inputType="checkbox"
911
+ [colSpan]="2"
912
+ [value]="stateService.state.categoryAxis[0]?.reverse"
913
+ (valueChange)="updateState(categoryAxisReverseOrder, $event)"
914
+ >
915
+ </kendo-chartwizard-property-pane-form-field>
916
+ </div>
917
+ </fieldset>
918
+ </form>
915
919
  </kendo-expansionpanel>
916
- </section>
917
- <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
920
+ </section>
921
+ }
922
+ @if (stateService.state.seriesType !== 'pie') {
923
+ <section class="k-row-start-1 k-row-end-3 k-col-start-4">
918
924
  <kendo-expansionpanel
919
- [style.max-width.px]="576"
920
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
921
- [expanded]="true"
922
- >
923
- <form class="k-form k-form-md">
924
- <fieldset class="k-form-fieldset">
925
- <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
926
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
927
- <kendo-chartwizard-property-pane-form-field
928
- inputType="text"
929
- [hasLabel]="false"
930
- [colSpan]="2"
931
- [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
932
- [value]="stateService.state.valueAxis[0]?.title?.text || null"
933
- (valueChange)="updateState(valueAxisTitleText, $event)"
934
- >
935
- </kendo-chartwizard-property-pane-form-field>
936
- <kendo-chartwizard-property-pane-form-field
937
- [text]="messageFor('formatValueAxisTitleFont')"
938
- inputType="comboBox"
939
- [colSpan]="2"
940
- [data]="fontNames"
941
- [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
942
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
943
- (valueChange)="updateState(valueAxisTitleFontName, $event)"
944
- >
945
- </kendo-chartwizard-property-pane-form-field>
946
- <kendo-chartwizard-property-pane-form-field
947
- [text]="messageFor('formatValueAxisTitleSize')"
948
- inputType="comboBox"
949
- [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
950
- [data]="fontSizes"
951
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
952
- (valueChange)="updateState(valueAxisTitleFontSize, $event)"
953
- >
954
- </kendo-chartwizard-property-pane-form-field>
955
- <kendo-chartwizard-property-pane-form-field
956
- [text]="messageFor('formatValueAxisTitleColor')"
957
- inputType="colorPicker"
958
- [value]="stateService.state.valueAxis[0]?.title?.color"
959
- (valueChange)="updateState(valueAxisTitleColor, $event)"
960
- >
961
- </kendo-chartwizard-property-pane-form-field>
962
- </div>
963
- </fieldset>
964
- <fieldset class="k-form-fieldset">
965
- <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
966
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
967
- <kendo-chartwizard-property-pane-form-field
968
- [text]="messageFor('formatValueAxisLabelsFormat')"
969
- [colSpan]="2"
970
- inputType="dropDownList"
971
- [data]="labelFormats"
972
- [value]="labelFormatValue"
973
- (valueChange)="updateState(valueAxisLabelsFormat, $event)"
974
- >
975
- </kendo-chartwizard-property-pane-form-field>
976
- <kendo-chartwizard-property-pane-form-field
977
- [text]="messageFor('formatValueAxisLabelsFont')"
978
- inputType="comboBox"
979
- [data]="fontNames"
980
- [colSpan]="2"
981
- [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
982
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
983
- (valueChange)="updateState(valueAxisLabelsFontName, $event)"
984
- >
985
- </kendo-chartwizard-property-pane-form-field>
986
- <kendo-chartwizard-property-pane-form-field
987
- [text]="messageFor('formatValueAxisLabelsSize')"
988
- inputType="comboBox"
989
- [data]="fontSizes"
990
- [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
991
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
992
- (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
993
- >
994
- </kendo-chartwizard-property-pane-form-field>
995
- <kendo-chartwizard-property-pane-form-field
996
- [text]="messageFor('formatValueAxisLabelsColor')"
997
- inputType="colorPicker"
998
- [value]="stateService.state.valueAxis[0]?.labels?.color"
999
- (valueChange)="updateState(valueAxisLabelsColor, $event)"
1000
- >
1001
- </kendo-chartwizard-property-pane-form-field>
1002
- <kendo-chartwizard-property-pane-form-field
1003
- [text]="messageFor('formatValueAxisLabelsRotation')"
1004
- inputType="dropDownList"
1005
- [data]="labelsValueAxisRotation"
1006
- [value]="stateService.state.valueAxis[0]?.labels?.rotation"
1007
- (valueChange)="updateState(valueAxisLabelsRotation, $event)"
1008
- >
1009
- </kendo-chartwizard-property-pane-form-field>
1010
- </div>
1011
- </fieldset>
1012
- </form>
925
+ [style.max-width.px]="576"
926
+ [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
927
+ [expanded]="true"
928
+ >
929
+ <form class="k-form k-form-md">
930
+ <fieldset class="k-form-fieldset">
931
+ <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
932
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
933
+ <kendo-chartwizard-property-pane-form-field
934
+ inputType="text"
935
+ [hasLabel]="false"
936
+ [colSpan]="2"
937
+ [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
938
+ [value]="stateService.state.valueAxis[0]?.title?.text || null"
939
+ (valueChange)="updateState(valueAxisTitleText, $event)"
940
+ >
941
+ </kendo-chartwizard-property-pane-form-field>
942
+ <kendo-chartwizard-property-pane-form-field
943
+ [text]="messageFor('formatValueAxisTitleFont')"
944
+ inputType="comboBox"
945
+ [colSpan]="2"
946
+ [data]="fontNames"
947
+ [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
948
+ [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
949
+ (valueChange)="updateState(valueAxisTitleFontName, $event)"
950
+ >
951
+ </kendo-chartwizard-property-pane-form-field>
952
+ <kendo-chartwizard-property-pane-form-field
953
+ [text]="messageFor('formatValueAxisTitleSize')"
954
+ inputType="comboBox"
955
+ [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
956
+ [data]="fontSizes"
957
+ [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
958
+ (valueChange)="updateState(valueAxisTitleFontSize, $event)"
959
+ >
960
+ </kendo-chartwizard-property-pane-form-field>
961
+ <kendo-chartwizard-property-pane-form-field
962
+ [text]="messageFor('formatValueAxisTitleColor')"
963
+ inputType="colorPicker"
964
+ [value]="stateService.state.valueAxis[0]?.title?.color"
965
+ (valueChange)="updateState(valueAxisTitleColor, $event)"
966
+ >
967
+ </kendo-chartwizard-property-pane-form-field>
968
+ </div>
969
+ </fieldset>
970
+ <fieldset class="k-form-fieldset">
971
+ <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
972
+ <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
973
+ <kendo-chartwizard-property-pane-form-field
974
+ [text]="messageFor('formatValueAxisLabelsFormat')"
975
+ [colSpan]="2"
976
+ inputType="dropDownList"
977
+ [data]="labelFormats"
978
+ [value]="labelFormatValue"
979
+ (valueChange)="updateState(valueAxisLabelsFormat, $event)"
980
+ >
981
+ </kendo-chartwizard-property-pane-form-field>
982
+ <kendo-chartwizard-property-pane-form-field
983
+ [text]="messageFor('formatValueAxisLabelsFont')"
984
+ inputType="comboBox"
985
+ [data]="fontNames"
986
+ [colSpan]="2"
987
+ [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
988
+ [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
989
+ (valueChange)="updateState(valueAxisLabelsFontName, $event)"
990
+ >
991
+ </kendo-chartwizard-property-pane-form-field>
992
+ <kendo-chartwizard-property-pane-form-field
993
+ [text]="messageFor('formatValueAxisLabelsSize')"
994
+ inputType="comboBox"
995
+ [data]="fontSizes"
996
+ [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
997
+ [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
998
+ (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
999
+ >
1000
+ </kendo-chartwizard-property-pane-form-field>
1001
+ <kendo-chartwizard-property-pane-form-field
1002
+ [text]="messageFor('formatValueAxisLabelsColor')"
1003
+ inputType="colorPicker"
1004
+ [value]="stateService.state.valueAxis[0]?.labels?.color"
1005
+ (valueChange)="updateState(valueAxisLabelsColor, $event)"
1006
+ >
1007
+ </kendo-chartwizard-property-pane-form-field>
1008
+ <kendo-chartwizard-property-pane-form-field
1009
+ [text]="messageFor('formatValueAxisLabelsRotation')"
1010
+ inputType="dropDownList"
1011
+ [data]="labelsValueAxisRotation"
1012
+ [value]="stateService.state.valueAxis[0]?.labels?.rotation"
1013
+ (valueChange)="updateState(valueAxisLabelsRotation, $event)"
1014
+ >
1015
+ </kendo-chartwizard-property-pane-form-field>
1016
+ </div>
1017
+ </fieldset>
1018
+ </form>
1013
1019
  </kendo-expansionpanel>
1014
- </section>
1015
- `,
1020
+ </section>
1021
+ }
1022
+ `,
1016
1023
  standalone: true,
1017
1024
  imports: [
1018
1025
  ExpansionPanelComponent,
1019
1026
  ChartWizardPropertyPaneFormFieldComponent,
1020
1027
  LabelComponent,
1021
1028
  SwitchComponent,
1022
- DropDownListComponent,
1023
- NgIf
1029
+ DropDownListComponent
1024
1030
  ]
1025
1031
  }]
1026
1032
  }], ctorParameters: () => [{ type: i1.StateService }, { type: i2.ChartWizardLocalizationService }, { type: i0.ChangeDetectorRef }] });