@progress/kendo-angular-scheduler 13.0.0-develop.2 → 13.0.0-develop.20

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 (32) hide show
  1. package/editing/date-time-picker.component.d.ts +6 -1
  2. package/editing/edit-dialog.component.d.ts +3 -0
  3. package/editing/recurrence/recurrence-end-rule-editor.component.d.ts +1 -0
  4. package/editing/recurrence/recurrence-interval-editor.component.d.ts +1 -0
  5. package/editing/timezone-editor.component.d.ts +4 -0
  6. package/esm2020/editing/date-time-picker.component.mjs +24 -13
  7. package/esm2020/editing/edit-dialog.component.mjs +351 -240
  8. package/esm2020/editing/recurrence/recurrence-editor.component.mjs +40 -36
  9. package/esm2020/editing/recurrence/recurrence-end-rule-editor.component.mjs +156 -130
  10. package/esm2020/editing/recurrence/recurrence-frequency-editor.component.mjs +26 -13
  11. package/esm2020/editing/recurrence/recurrence-interval-editor.component.mjs +26 -14
  12. package/esm2020/editing/recurrence/recurrence-monthly-yearly-editor.component.mjs +157 -149
  13. package/esm2020/editing/recurrence/recurrence-weekday-rule-editor.component.mjs +40 -23
  14. package/esm2020/editing/timezone-editor.component.mjs +6 -0
  15. package/esm2020/package-metadata.mjs +2 -2
  16. package/esm2020/pdf/pdf-command.directive.mjs +1 -1
  17. package/esm2020/scheduler.module.mjs +5 -3
  18. package/esm2020/toolbar/navigation.component.mjs +14 -8
  19. package/esm2020/views/agenda/agenda-task-item.component.mjs +1 -1
  20. package/esm2020/views/agenda/agenda-view-list.component.mjs +16 -10
  21. package/esm2020/views/day-time/day-time-view-item.component.mjs +9 -9
  22. package/esm2020/views/month/month-slot.component.mjs +1 -1
  23. package/esm2020/views/month/month-view-item.component.mjs +9 -9
  24. package/esm2020/views/view-items/base-view-item.mjs +9 -0
  25. package/fesm2015/progress-kendo-angular-scheduler.mjs +878 -650
  26. package/fesm2020/progress-kendo-angular-scheduler.mjs +877 -650
  27. package/package.json +12 -12
  28. package/scheduler.module.d.ts +1 -1
  29. package/schematics/ngAdd/index.js +2 -2
  30. package/toolbar/navigation.component.d.ts +2 -0
  31. package/views/agenda/agenda-view-list.component.d.ts +4 -2
  32. package/views/view-items/base-view-item.d.ts +5 -0
@@ -18,21 +18,22 @@ import { withModifiers, Modifiers } from '../common/modifiers';
18
18
  import { FocusService } from '../navigation';
19
19
  import { Day, ZonedDate, toLocalDate } from '@progress/kendo-date-math';
20
20
  import { toUTCDateTime, formValueOrDefault } from '../views/utils';
21
+ import { cancelOutlineIcon, saveIcon } from '@progress/kendo-svg-icons';
21
22
  import * as i0 from "@angular/core";
22
23
  import * as i1 from "./edit.service";
23
24
  import * as i2 from "@progress/kendo-angular-l10n";
24
25
  import * as i3 from "../navigation";
25
26
  import * as i4 from "@progress/kendo-angular-dialog";
26
- import * as i5 from "./date-time-picker.component";
27
- import * as i6 from "./timezone-editor.component";
28
- import * as i7 from "./recurrence/recurrence-editor.component";
29
- import * as i8 from "./resource-multiple-editor.component";
30
- import * as i9 from "./resource-single-editor.component";
31
- import * as i10 from "@progress/kendo-angular-buttons";
32
- import * as i11 from "@angular/common";
33
- import * as i12 from "@angular/forms";
34
- import * as i13 from "@progress/kendo-angular-label";
35
- import * as i14 from "@progress/kendo-angular-inputs";
27
+ import * as i5 from "@progress/kendo-angular-inputs";
28
+ import * as i6 from "@progress/kendo-angular-label";
29
+ import * as i7 from "./date-time-picker.component";
30
+ import * as i8 from "./timezone-editor.component";
31
+ import * as i9 from "./recurrence/recurrence-editor.component";
32
+ import * as i10 from "./resource-multiple-editor.component";
33
+ import * as i11 from "./resource-single-editor.component";
34
+ import * as i12 from "@progress/kendo-angular-buttons";
35
+ import * as i13 from "@angular/common";
36
+ import * as i14 from "@angular/forms";
36
37
  /**
37
38
  * @hidden
38
39
  */
@@ -48,6 +49,8 @@ export class EditDialogComponent {
48
49
  this.timezone = 'Etc/UTC';
49
50
  this.setTimeZone = false;
50
51
  this.setSeparateStartEndTimeZones = false;
52
+ this.saveIcon = saveIcon;
53
+ this.cancelIcon = cancelOutlineIcon;
51
54
  this.subs = this.editService.changed.subscribe(() => {
52
55
  this.ngZone.run(() => { this.onChange(); });
53
56
  });
@@ -67,7 +70,7 @@ export class EditDialogComponent {
67
70
  if (this.editTemplate) {
68
71
  return this.editTemplate.autoFocusedElement;
69
72
  }
70
- return '.k-form-field-wrap input';
73
+ return '.k-form-field input';
71
74
  }
72
75
  get isEditingSeries() {
73
76
  return this.editMode === EditMode.Series && Boolean(this.formGroup.get(this.fields.recurrenceRule));
@@ -236,121 +239,163 @@ export class EditDialogComponent {
236
239
  }
237
240
  EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditDialogComponent, deps: [{ token: i0.NgZone }, { token: i1.EditService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i3.FocusService }], target: i0.ɵɵFactoryTarget.Component });
238
241
  EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EditDialogComponent, selector: "kendo-scheduler-edit-dialog", inputs: { resources: "resources", timezone: "timezone", weekStart: "weekStart", fields: "fields", editTemplate: "editTemplate" }, viewQueries: [{ propertyName: "multipleResourceEditors", predicate: MultipleResourceEditorComponent, descendants: true }, { propertyName: "singleResourceEditors", predicate: SingleResourceEditorComponent, descendants: true }], ngImport: i0, template: `
239
- <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
242
+ <kendo-dialog (close)='onClose()' [minWidth]='400' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
240
243
  <ng-container *ngIf='!editTemplate'>
241
- <div class='k-form k-form-horizontal'>
242
- <form novalidate [formGroup]='formGroup'>
243
- <!-- Title -->
244
- <div class='k-form-field'>
245
- <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
246
- <div class='k-form-field-wrap'>
247
- <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
248
- </div>
249
- </div>
250
-
251
- <!-- Start -->
252
- <div class='k-form-field'>
253
- <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
254
- <div class='k-form-field-wrap'>
255
- <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
256
- [isAllDay]='getFormValue(fields.isAllDay)?.value'>
257
- </kendo-scheduler-datetime-picker>
258
- </div>
259
- </div>
260
-
261
- <div class='k-form-field' *ngIf="hasStartTimeZone">
262
- <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
263
- <div class='k-form-field-wrap'>
264
- <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
265
- </div>
266
- </div>
267
-
268
- <ng-container *ngIf="isStartTimeZoneVisible">
269
- <div class='k-form-field'>
270
- <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
271
-
272
- <div class='k-form-field-wrap'>
273
- <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
274
- </div>
275
- </div>
244
+ <form
245
+ class='k-scheduler-edit-form k-form k-form-md k-form-vertical'
246
+ novalidate
247
+ [formGroup]='formGroup'
248
+ >
249
+ <!-- Title -->
250
+ <kendo-formfield>
251
+ <kendo-label
252
+ [for]="title"
253
+ [text]="textFor('editorEventTitle')"
254
+ labelCssClass="k-form-label"
255
+ ></kendo-label>
256
+ <input
257
+ #title
258
+ kendoTextBox
259
+ placeholder='Title'
260
+ [formControl]='getControl(fields.title)'
261
+ />
262
+ </kendo-formfield>
263
+
264
+ <!-- Start -->
265
+ <kendo-formfield>
266
+ <kendo-label
267
+ [for]="startDateTimePicker"
268
+ [text]="textFor('editorEventStart')"
269
+ labelCssClass="k-form-label"
270
+ ></kendo-label>
271
+ <kendo-scheduler-datetime-picker
272
+ #startDateTimePicker
273
+ [formControl]='getControl(fields.start)'
274
+ [isAllDay]='getFormValue(fields.isAllDay)?.value'
275
+ ></kendo-scheduler-datetime-picker>
276
+ </kendo-formfield>
277
+
278
+ <kendo-formfield *ngIf="hasStartTimeZone">
279
+ <ng-container>
280
+ <span class="k-checkbox-wrap">
281
+ <input
282
+ id='k-set-timezone'
283
+ type='checkbox'
284
+ kendoCheckBox
285
+ formControlName='startTimezoneCheckbox'
286
+ />
287
+ </span>
288
+ <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
276
289
  </ng-container>
277
-
278
- <!-- End -->
279
- <div class='k-form-field'>
280
- <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
281
- <div class='k-form-field-wrap'>
282
- <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
283
- [isAllDay]='getFormValue(fields.isAllDay)?.value'>
284
- </kendo-scheduler-datetime-picker>
285
- </div>
286
- </div>
287
-
288
- <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
289
- <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
290
- <div class='k-form-field-wrap'>
291
- <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
292
- </div>
293
- </div>
294
-
295
- <ng-container *ngIf="isEndTimeZoneVisible">
296
- <div class='k-form-field'>
297
- <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
298
-
299
- <div class='k-form-field-wrap'>
300
- <kendo-timezone-editor [width]="undefined" #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
301
- </div>
302
- </div>
290
+ </kendo-formfield>
291
+
292
+ <kendo-formfield *ngIf="isStartTimeZoneVisible">
293
+ <kendo-label
294
+ [for]="startTzPicker"
295
+ [text]="textFor('editorEventStartTimeZone')"
296
+ labelCssClass="k-form-label"
297
+ ></kendo-label>
298
+ <kendo-timezone-editor
299
+ #startTzPicker
300
+ [width]="undefined"
301
+ [formControl]='getControl(fields.startTimezone)'
302
+ ></kendo-timezone-editor>
303
+ </kendo-formfield>
304
+
305
+ <!-- End -->
306
+ <kendo-formfield>
307
+ <kendo-label
308
+ [for]="endDateTimePicker"
309
+ [text]="textFor('editorEventEnd')"
310
+ labelCssClass="k-form-label"
311
+ ></kendo-label>
312
+ <kendo-scheduler-datetime-picker
313
+ #endDateTimePicker
314
+ [formControl]='getControl(fields.end)'
315
+ [isAllDay]='getFormValue(fields.isAllDay)?.value'
316
+ ></kendo-scheduler-datetime-picker>
317
+ </kendo-formfield>
318
+
319
+ <kendo-formfield *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
320
+ <ng-container>
321
+ <span class="k-checkbox-wrap">
322
+ <input
323
+ id='k-use-separate'
324
+ type='checkbox'
325
+ kendoCheckBox
326
+ formControlName='endTimezoneCheckbox'
327
+ />
328
+ </span>
329
+ <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
303
330
  </ng-container>
304
-
305
- <!-- All day -->
306
- <div class='k-form-field'>
307
- <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
308
-
309
- <div class='k-form-field-wrap' *ngIf="hasAllDay">
310
- <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
311
- </div>
312
- </div>
313
-
314
- <!-- Series -->
315
- <kendo-recurrence-editor
316
- *ngIf="isEditingSeries"
317
- [formControl]='getControl(fields.recurrenceRule)'
318
- [start]='recurrenceStart'
319
- [timezone]='eventTimezone'
320
- [weekStart]='weekStart'
321
- ></kendo-recurrence-editor>
322
-
323
- <!-- Description -->
324
- <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
325
- <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
326
-
327
- <div class='k-form-field-wrap'>
328
- <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
329
- </div>
330
- </div>
331
-
332
- <!-- Resources -->
333
- <ng-container *ngFor='let resource of resources'>
334
- <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
335
- <label class='k-form-label' (click)="onResourceClick(resource)">
336
- {{ resource.name ? resource.name : resource.field }}
337
- </label>
338
- <div class='k-form-field-wrap'>
339
- <kendo-multiple-resource-editor
340
- *ngIf='resource.multiple'
341
- [formControl]='getControl(resource.field)'
342
- [resource]='resource'>
343
- </kendo-multiple-resource-editor>
344
- <kendo-single-resource-editor
345
- *ngIf='!resource.multiple'
346
- [formControl]='getControl(resource.field)'
347
- [resource]='resource'>
348
- </kendo-single-resource-editor>
349
- </div>
350
- </div>
331
+ </kendo-formfield>
332
+
333
+ <kendo-formfield *ngIf="isEndTimeZoneVisible">
334
+ <kendo-label
335
+ [for]="endTzPicker"
336
+ [text]="textFor('editorEventEndTimeZone')"
337
+ labelCssClass="k-form-label"
338
+ ></kendo-label>
339
+ <kendo-timezone-editor
340
+ #endTzPicker
341
+ [width]="undefined"
342
+ [formControl]='getControl(fields.endTimezone)'
343
+ ></kendo-timezone-editor>
344
+ </kendo-formfield>
345
+
346
+ <!-- All day -->
347
+ <kendo-formfield *ngIf="hasAllDay">
348
+ <ng-container>
349
+ <span class="k-checkbox-wrap">
350
+ <input
351
+ id='k-is-allday-chkbox'
352
+ type='checkbox'
353
+ kendoCheckBox
354
+ [formControl]='getControl(fields.isAllDay)'
355
+ />
356
+ </span>
357
+ <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
351
358
  </ng-container>
352
- </form>
353
- </div>
359
+ </kendo-formfield>
360
+
361
+ <!-- Series -->
362
+ <kendo-recurrence-editor
363
+ *ngIf="isEditingSeries"
364
+ [formControl]='getControl(fields.recurrenceRule)'
365
+ [start]='recurrenceStart'
366
+ [timezone]='eventTimezone'
367
+ [weekStart]='weekStart'
368
+ ></kendo-recurrence-editor>
369
+
370
+ <!-- Description -->
371
+ <kendo-formfield *ngIf='getFormValue(fields.description)'>
372
+ <kendo-label
373
+ [for]="description"
374
+ [text]="textFor('editorEventDescription')"
375
+ labelCssClass="k-form-label"
376
+ ></kendo-label>
377
+ <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
378
+ </kendo-formfield>
379
+
380
+ <!-- Resources -->
381
+ <ng-container *ngFor='let resource of resources'>
382
+ <kendo-formfield *ngIf='getFormValue(resource.field)'>
383
+ <label class='k-label k-form-label' (click)="onResourceClick(resource)">
384
+ {{ resource.name ? resource.name : resource.field }}
385
+ </label>
386
+ <kendo-multiple-resource-editor
387
+ *ngIf='resource.multiple'
388
+ [formControl]='getControl(resource.field)'
389
+ [resource]='resource'>
390
+ </kendo-multiple-resource-editor>
391
+ <kendo-single-resource-editor
392
+ *ngIf='!resource.multiple'
393
+ [formControl]='getControl(resource.field)'
394
+ [resource]='resource'>
395
+ </kendo-single-resource-editor>
396
+ </kendo-formfield>
397
+ </ng-container>
398
+ </form>
354
399
  </ng-container>
355
400
 
356
401
  <ng-container *ngIf='editTemplate'>
@@ -367,132 +412,186 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
367
412
  </form>
368
413
  </ng-container>
369
414
 
370
- <kendo-dialog-actions>
371
- <button kendoButton (click)="onCancel($event)">{{ textFor('cancel') }}</button>
372
- <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
415
+ <kendo-dialog-actions layout="start">
416
+ <button
417
+ kendoButton
418
+ themeColor="primary"
419
+ icon="save"
420
+ [svgIcon]="saveIcon"
421
+ [disabled]="!formGroup.valid"
422
+ (click)="onSave($event)"
423
+ >{{ textFor('save') }}</button>
424
+ <button
425
+ kendoButton
426
+ icon="cancel-outline"
427
+ [svgIcon]="cancelIcon"
428
+ (click)="onCancel($event)"
429
+ >{{ textFor('cancel') }}</button>
373
430
  </kendo-dialog-actions>
374
431
  </kendo-dialog>
375
- `, isInline: true, components: [{ type: i4.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i5.SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: i6.TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: i7.RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: i8.MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: i9.SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i4.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i12.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i13.LabelDirective, selector: "label[for]", inputs: ["for"] }, { type: i14.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i12.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i14.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i12.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i14.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
432
+ `, isInline: true, components: [{ type: i4.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i5.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i7.SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: i8.TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: i9.RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: i10.MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: i11.SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i4.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i12.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i14.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i14.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { type: i5.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
376
433
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditDialogComponent, decorators: [{
377
434
  type: Component,
378
435
  args: [{
379
436
  selector: 'kendo-scheduler-edit-dialog',
380
437
  template: `
381
- <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
438
+ <kendo-dialog (close)='onClose()' [minWidth]='400' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
382
439
  <ng-container *ngIf='!editTemplate'>
383
- <div class='k-form k-form-horizontal'>
384
- <form novalidate [formGroup]='formGroup'>
385
- <!-- Title -->
386
- <div class='k-form-field'>
387
- <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
388
- <div class='k-form-field-wrap'>
389
- <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
390
- </div>
391
- </div>
392
-
393
- <!-- Start -->
394
- <div class='k-form-field'>
395
- <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
396
- <div class='k-form-field-wrap'>
397
- <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
398
- [isAllDay]='getFormValue(fields.isAllDay)?.value'>
399
- </kendo-scheduler-datetime-picker>
400
- </div>
401
- </div>
402
-
403
- <div class='k-form-field' *ngIf="hasStartTimeZone">
404
- <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
405
- <div class='k-form-field-wrap'>
406
- <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
407
- </div>
408
- </div>
409
-
410
- <ng-container *ngIf="isStartTimeZoneVisible">
411
- <div class='k-form-field'>
412
- <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
413
-
414
- <div class='k-form-field-wrap'>
415
- <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
416
- </div>
417
- </div>
440
+ <form
441
+ class='k-scheduler-edit-form k-form k-form-md k-form-vertical'
442
+ novalidate
443
+ [formGroup]='formGroup'
444
+ >
445
+ <!-- Title -->
446
+ <kendo-formfield>
447
+ <kendo-label
448
+ [for]="title"
449
+ [text]="textFor('editorEventTitle')"
450
+ labelCssClass="k-form-label"
451
+ ></kendo-label>
452
+ <input
453
+ #title
454
+ kendoTextBox
455
+ placeholder='Title'
456
+ [formControl]='getControl(fields.title)'
457
+ />
458
+ </kendo-formfield>
459
+
460
+ <!-- Start -->
461
+ <kendo-formfield>
462
+ <kendo-label
463
+ [for]="startDateTimePicker"
464
+ [text]="textFor('editorEventStart')"
465
+ labelCssClass="k-form-label"
466
+ ></kendo-label>
467
+ <kendo-scheduler-datetime-picker
468
+ #startDateTimePicker
469
+ [formControl]='getControl(fields.start)'
470
+ [isAllDay]='getFormValue(fields.isAllDay)?.value'
471
+ ></kendo-scheduler-datetime-picker>
472
+ </kendo-formfield>
473
+
474
+ <kendo-formfield *ngIf="hasStartTimeZone">
475
+ <ng-container>
476
+ <span class="k-checkbox-wrap">
477
+ <input
478
+ id='k-set-timezone'
479
+ type='checkbox'
480
+ kendoCheckBox
481
+ formControlName='startTimezoneCheckbox'
482
+ />
483
+ </span>
484
+ <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
418
485
  </ng-container>
419
-
420
- <!-- End -->
421
- <div class='k-form-field'>
422
- <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
423
- <div class='k-form-field-wrap'>
424
- <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
425
- [isAllDay]='getFormValue(fields.isAllDay)?.value'>
426
- </kendo-scheduler-datetime-picker>
427
- </div>
428
- </div>
429
-
430
- <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
431
- <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
432
- <div class='k-form-field-wrap'>
433
- <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
434
- </div>
435
- </div>
436
-
437
- <ng-container *ngIf="isEndTimeZoneVisible">
438
- <div class='k-form-field'>
439
- <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
440
-
441
- <div class='k-form-field-wrap'>
442
- <kendo-timezone-editor [width]="undefined" #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
443
- </div>
444
- </div>
486
+ </kendo-formfield>
487
+
488
+ <kendo-formfield *ngIf="isStartTimeZoneVisible">
489
+ <kendo-label
490
+ [for]="startTzPicker"
491
+ [text]="textFor('editorEventStartTimeZone')"
492
+ labelCssClass="k-form-label"
493
+ ></kendo-label>
494
+ <kendo-timezone-editor
495
+ #startTzPicker
496
+ [width]="undefined"
497
+ [formControl]='getControl(fields.startTimezone)'
498
+ ></kendo-timezone-editor>
499
+ </kendo-formfield>
500
+
501
+ <!-- End -->
502
+ <kendo-formfield>
503
+ <kendo-label
504
+ [for]="endDateTimePicker"
505
+ [text]="textFor('editorEventEnd')"
506
+ labelCssClass="k-form-label"
507
+ ></kendo-label>
508
+ <kendo-scheduler-datetime-picker
509
+ #endDateTimePicker
510
+ [formControl]='getControl(fields.end)'
511
+ [isAllDay]='getFormValue(fields.isAllDay)?.value'
512
+ ></kendo-scheduler-datetime-picker>
513
+ </kendo-formfield>
514
+
515
+ <kendo-formfield *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
516
+ <ng-container>
517
+ <span class="k-checkbox-wrap">
518
+ <input
519
+ id='k-use-separate'
520
+ type='checkbox'
521
+ kendoCheckBox
522
+ formControlName='endTimezoneCheckbox'
523
+ />
524
+ </span>
525
+ <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
445
526
  </ng-container>
446
-
447
- <!-- All day -->
448
- <div class='k-form-field'>
449
- <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
450
-
451
- <div class='k-form-field-wrap' *ngIf="hasAllDay">
452
- <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
453
- </div>
454
- </div>
455
-
456
- <!-- Series -->
457
- <kendo-recurrence-editor
458
- *ngIf="isEditingSeries"
459
- [formControl]='getControl(fields.recurrenceRule)'
460
- [start]='recurrenceStart'
461
- [timezone]='eventTimezone'
462
- [weekStart]='weekStart'
463
- ></kendo-recurrence-editor>
464
-
465
- <!-- Description -->
466
- <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
467
- <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
468
-
469
- <div class='k-form-field-wrap'>
470
- <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
471
- </div>
472
- </div>
473
-
474
- <!-- Resources -->
475
- <ng-container *ngFor='let resource of resources'>
476
- <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
477
- <label class='k-form-label' (click)="onResourceClick(resource)">
478
- {{ resource.name ? resource.name : resource.field }}
479
- </label>
480
- <div class='k-form-field-wrap'>
481
- <kendo-multiple-resource-editor
482
- *ngIf='resource.multiple'
483
- [formControl]='getControl(resource.field)'
484
- [resource]='resource'>
485
- </kendo-multiple-resource-editor>
486
- <kendo-single-resource-editor
487
- *ngIf='!resource.multiple'
488
- [formControl]='getControl(resource.field)'
489
- [resource]='resource'>
490
- </kendo-single-resource-editor>
491
- </div>
492
- </div>
527
+ </kendo-formfield>
528
+
529
+ <kendo-formfield *ngIf="isEndTimeZoneVisible">
530
+ <kendo-label
531
+ [for]="endTzPicker"
532
+ [text]="textFor('editorEventEndTimeZone')"
533
+ labelCssClass="k-form-label"
534
+ ></kendo-label>
535
+ <kendo-timezone-editor
536
+ #endTzPicker
537
+ [width]="undefined"
538
+ [formControl]='getControl(fields.endTimezone)'
539
+ ></kendo-timezone-editor>
540
+ </kendo-formfield>
541
+
542
+ <!-- All day -->
543
+ <kendo-formfield *ngIf="hasAllDay">
544
+ <ng-container>
545
+ <span class="k-checkbox-wrap">
546
+ <input
547
+ id='k-is-allday-chkbox'
548
+ type='checkbox'
549
+ kendoCheckBox
550
+ [formControl]='getControl(fields.isAllDay)'
551
+ />
552
+ </span>
553
+ <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
493
554
  </ng-container>
494
- </form>
495
- </div>
555
+ </kendo-formfield>
556
+
557
+ <!-- Series -->
558
+ <kendo-recurrence-editor
559
+ *ngIf="isEditingSeries"
560
+ [formControl]='getControl(fields.recurrenceRule)'
561
+ [start]='recurrenceStart'
562
+ [timezone]='eventTimezone'
563
+ [weekStart]='weekStart'
564
+ ></kendo-recurrence-editor>
565
+
566
+ <!-- Description -->
567
+ <kendo-formfield *ngIf='getFormValue(fields.description)'>
568
+ <kendo-label
569
+ [for]="description"
570
+ [text]="textFor('editorEventDescription')"
571
+ labelCssClass="k-form-label"
572
+ ></kendo-label>
573
+ <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
574
+ </kendo-formfield>
575
+
576
+ <!-- Resources -->
577
+ <ng-container *ngFor='let resource of resources'>
578
+ <kendo-formfield *ngIf='getFormValue(resource.field)'>
579
+ <label class='k-label k-form-label' (click)="onResourceClick(resource)">
580
+ {{ resource.name ? resource.name : resource.field }}
581
+ </label>
582
+ <kendo-multiple-resource-editor
583
+ *ngIf='resource.multiple'
584
+ [formControl]='getControl(resource.field)'
585
+ [resource]='resource'>
586
+ </kendo-multiple-resource-editor>
587
+ <kendo-single-resource-editor
588
+ *ngIf='!resource.multiple'
589
+ [formControl]='getControl(resource.field)'
590
+ [resource]='resource'>
591
+ </kendo-single-resource-editor>
592
+ </kendo-formfield>
593
+ </ng-container>
594
+ </form>
496
595
  </ng-container>
497
596
 
498
597
  <ng-container *ngIf='editTemplate'>
@@ -509,9 +608,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
509
608
  </form>
510
609
  </ng-container>
511
610
 
512
- <kendo-dialog-actions>
513
- <button kendoButton (click)="onCancel($event)">{{ textFor('cancel') }}</button>
514
- <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
611
+ <kendo-dialog-actions layout="start">
612
+ <button
613
+ kendoButton
614
+ themeColor="primary"
615
+ icon="save"
616
+ [svgIcon]="saveIcon"
617
+ [disabled]="!formGroup.valid"
618
+ (click)="onSave($event)"
619
+ >{{ textFor('save') }}</button>
620
+ <button
621
+ kendoButton
622
+ icon="cancel-outline"
623
+ [svgIcon]="cancelIcon"
624
+ (click)="onCancel($event)"
625
+ >{{ textFor('cancel') }}</button>
515
626
  </kendo-dialog-actions>
516
627
  </kendo-dialog>
517
628
  `