@progress/kendo-angular-scheduler 21.1.1-develop.2 → 21.2.0-develop.1

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 (37) hide show
  1. package/esm2022/editing/date-time-picker.component.mjs +59 -56
  2. package/esm2022/editing/edit-dialog.component.mjs +373 -359
  3. package/esm2022/editing/recurrence/recurrence-editor.component.mjs +262 -253
  4. package/esm2022/editing/recurrence/recurrence-frequency-editor.component.mjs +44 -41
  5. package/esm2022/editing/recurrence/recurrence-monthly-yearly-editor.component.mjs +190 -193
  6. package/esm2022/editing/recurrence/recurrence-weekday-rule-editor.component.mjs +44 -43
  7. package/esm2022/editing/resource-multiple-editor.component.mjs +49 -41
  8. package/esm2022/editing/resource-single-editor.component.mjs +35 -31
  9. package/esm2022/editing/timezone-editor.component.mjs +20 -17
  10. package/esm2022/package-metadata.mjs +2 -2
  11. package/esm2022/pdf/pdf-command.directive.mjs +27 -17
  12. package/esm2022/scheduler.component.mjs +631 -625
  13. package/esm2022/toolbar/toolbar.component.mjs +37 -37
  14. package/esm2022/toolbar/view-selector.component.mjs +42 -33
  15. package/esm2022/views/agenda/agenda-header-item.component.mjs +23 -19
  16. package/esm2022/views/agenda/agenda-header.component.mjs +28 -26
  17. package/esm2022/views/agenda/agenda-task-item.component.mjs +49 -29
  18. package/esm2022/views/agenda/agenda-view-list.component.mjs +117 -95
  19. package/esm2022/views/common/resize-hint.component.mjs +16 -9
  20. package/esm2022/views/common/view-footer.component.mjs +27 -25
  21. package/esm2022/views/day-time/day-time-view-item.component.mjs +125 -85
  22. package/esm2022/views/month/month-slot.component.mjs +39 -29
  23. package/esm2022/views/month/month-view-item.component.mjs +81 -61
  24. package/esm2022/views/month/month-view-renderer.component.mjs +349 -281
  25. package/esm2022/views/multi-day/day-view.component.mjs +72 -69
  26. package/esm2022/views/multi-day/multi-day-view-renderer.component.mjs +665 -515
  27. package/esm2022/views/multi-day/multi-day-view.component.mjs +76 -73
  28. package/esm2022/views/multi-day/week-view.component.mjs +78 -75
  29. package/esm2022/views/multi-day/work-week-view.component.mjs +80 -77
  30. package/esm2022/views/timeline/timeline-month-view.component.mjs +74 -71
  31. package/esm2022/views/timeline/timeline-multi-day-view.component.mjs +449 -359
  32. package/esm2022/views/timeline/timeline-view.component.mjs +68 -65
  33. package/esm2022/views/timeline/timeline-week-view.component.mjs +74 -71
  34. package/esm2022/views/year/year-view-internal.component.mjs +151 -131
  35. package/fesm2022/progress-kendo-angular-scheduler.mjs +4448 -3889
  36. package/package.json +15 -15
  37. package/schematics/ngAdd/index.js +3 -3
@@ -26,7 +26,7 @@ import { RecurrenceEditorComponent } from './recurrence/recurrence-editor.compon
26
26
  import { TimeZoneEditorComponent } from './timezone-editor.component';
27
27
  import { LabelDirective, LabelComponent } from '@progress/kendo-angular-label';
28
28
  import { SchedulerDateTimePickerComponent } from './date-time-picker.component';
29
- import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
29
+ import { NgTemplateOutlet } from '@angular/common';
30
30
  import * as i0 from "@angular/core";
31
31
  import * as i1 from "./edit.service";
32
32
  import * as i2 from "@progress/kendo-angular-l10n";
@@ -254,169 +254,176 @@ export class EditDialogComponent {
254
254
  return toLocalDate(ZonedDate.fromLocalDate(value, timezone).toUTCDate());
255
255
  }
256
256
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
257
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditDialogComponent, isStandalone: true, 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: `
258
- <kendo-dialog (close)='onClose()' [minWidth]='400' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
259
- <ng-container *ngIf='!editTemplate'>
260
- <form
261
- class='k-scheduler-edit-form k-form k-form-md'
262
- novalidate
263
- [formGroup]='formGroup'
257
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditDialogComponent, isStandalone: true, 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: `
258
+ @if (isActive) {
259
+ <kendo-dialog (close)='onClose()' [minWidth]='400' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
260
+ @if (!editTemplate) {
261
+ <form
262
+ class='k-scheduler-edit-form k-form k-form-md'
263
+ novalidate
264
+ [formGroup]='formGroup'
264
265
  >
265
- <!-- Title -->
266
- <kendo-formfield>
267
- <kendo-label
268
- [for]="title"
269
- [text]="textFor('editorEventTitle')"
270
- labelCssClass="k-form-label"
271
- ></kendo-label>
266
+ <!-- Title -->
267
+ <kendo-formfield>
268
+ <kendo-label
269
+ [for]="title"
270
+ [text]="textFor('editorEventTitle')"
271
+ labelCssClass="k-form-label"
272
+ ></kendo-label>
273
+ <input
274
+ #title
275
+ kendoTextBox
276
+ [attr.placeholder]="textFor('editorEventTitle')"
277
+ [formControl]='getControl(fields.title)'
278
+ />
279
+ </kendo-formfield>
280
+ <!-- Start -->
281
+ <kendo-formfield>
282
+ <kendo-label
283
+ [for]="startDateTimePicker"
284
+ [text]="textFor('editorEventStart')"
285
+ labelCssClass="k-form-label"
286
+ ></kendo-label>
287
+ <kendo-scheduler-datetime-picker
288
+ #startDateTimePicker
289
+ [formControl]='getControl(fields.start)'
290
+ [isAllDay]='getFormValue(fields.isAllDay)?.value'
291
+ ></kendo-scheduler-datetime-picker>
292
+ </kendo-formfield>
293
+ @if (hasStartTimeZone) {
294
+ <kendo-formfield>
295
+ <ng-container>
296
+ <span class="k-checkbox-wrap">
272
297
  <input
273
- #title
274
- kendoTextBox
275
- [attr.placeholder]="textFor('editorEventTitle')"
276
- [formControl]='getControl(fields.title)'
277
- />
278
- </kendo-formfield>
279
-
280
- <!-- Start -->
281
- <kendo-formfield>
282
- <kendo-label
283
- [for]="startDateTimePicker"
284
- [text]="textFor('editorEventStart')"
285
- labelCssClass="k-form-label"
286
- ></kendo-label>
287
- <kendo-scheduler-datetime-picker
288
- #startDateTimePicker
289
- [formControl]='getControl(fields.start)'
290
- [isAllDay]='getFormValue(fields.isAllDay)?.value'
291
- ></kendo-scheduler-datetime-picker>
292
- </kendo-formfield>
293
-
294
- <kendo-formfield *ngIf="hasStartTimeZone">
295
- <ng-container>
296
- <span class="k-checkbox-wrap">
297
- <input
298
- id='k-set-timezone'
299
- type='checkbox'
300
- kendoCheckBox
301
- formControlName='startTimezoneCheckbox'
302
- />
303
- </span>
304
- <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
305
- </ng-container>
306
- </kendo-formfield>
307
-
308
- <kendo-formfield *ngIf="isStartTimeZoneVisible">
309
- <kendo-label
310
- [for]="startTzPicker"
311
- [text]="textFor('editorEventStartTimeZone')"
312
- labelCssClass="k-form-label"
313
- ></kendo-label>
314
- <kendo-timezone-editor
315
- #startTzPicker
316
- [width]="undefined"
317
- [formControl]='getControl(fields.startTimezone)'
318
- ></kendo-timezone-editor>
319
- </kendo-formfield>
320
-
321
- <!-- End -->
298
+ id='k-set-timezone'
299
+ type='checkbox'
300
+ kendoCheckBox
301
+ formControlName='startTimezoneCheckbox'
302
+ />
303
+ </span>
304
+ <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
305
+ </ng-container>
306
+ </kendo-formfield>
307
+ }
308
+ @if (isStartTimeZoneVisible) {
309
+ <kendo-formfield>
310
+ <kendo-label
311
+ [for]="startTzPicker"
312
+ [text]="textFor('editorEventStartTimeZone')"
313
+ labelCssClass="k-form-label"
314
+ ></kendo-label>
315
+ <kendo-timezone-editor
316
+ #startTzPicker
317
+ [width]="undefined"
318
+ [formControl]='getControl(fields.startTimezone)'
319
+ ></kendo-timezone-editor>
320
+ </kendo-formfield>
321
+ }
322
+ <!-- End -->
323
+ <kendo-formfield>
324
+ <kendo-label
325
+ [for]="endDateTimePicker"
326
+ [text]="textFor('editorEventEnd')"
327
+ labelCssClass="k-form-label"
328
+ ></kendo-label>
329
+ <kendo-scheduler-datetime-picker
330
+ #endDateTimePicker
331
+ [formControl]='getControl(fields.end)'
332
+ [isAllDay]='getFormValue(fields.isAllDay)?.value'
333
+ ></kendo-scheduler-datetime-picker>
334
+ </kendo-formfield>
335
+ @if (isStartTimeZoneVisible && hasEndTimeZone) {
336
+ <kendo-formfield>
337
+ <ng-container>
338
+ <span class="k-checkbox-wrap">
339
+ <input
340
+ id='k-use-separate'
341
+ type='checkbox'
342
+ kendoCheckBox
343
+ formControlName='endTimezoneCheckbox'
344
+ />
345
+ </span>
346
+ <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
347
+ </ng-container>
348
+ </kendo-formfield>
349
+ }
350
+ @if (isEndTimeZoneVisible) {
351
+ <kendo-formfield>
352
+ <kendo-label
353
+ [for]="endTzPicker"
354
+ [text]="textFor('editorEventEndTimeZone')"
355
+ labelCssClass="k-form-label"
356
+ ></kendo-label>
357
+ <kendo-timezone-editor
358
+ #endTzPicker
359
+ [width]="undefined"
360
+ [formControl]='getControl(fields.endTimezone)'
361
+ ></kendo-timezone-editor>
362
+ </kendo-formfield>
363
+ }
364
+ <!-- All day -->
365
+ @if (hasAllDay) {
366
+ <kendo-formfield>
367
+ <ng-container>
368
+ <span class="k-checkbox-wrap">
369
+ <input
370
+ id='k-is-allday-chkbox'
371
+ type='checkbox'
372
+ kendoCheckBox
373
+ [formControl]='getControl(fields.isAllDay)'
374
+ />
375
+ </span>
376
+ <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
377
+ </ng-container>
378
+ </kendo-formfield>
379
+ }
380
+ <!-- Series -->
381
+ @if (isEditingSeries) {
382
+ <kendo-recurrence-editor
383
+ [formControl]='getControl(fields.recurrenceRule)'
384
+ [start]='recurrenceStart'
385
+ [timezone]='eventTimezone'
386
+ [weekStart]='weekStart'
387
+ ></kendo-recurrence-editor>
388
+ }
389
+ <!-- Description -->
390
+ @if (getFormValue(fields.description)) {
391
+ <kendo-formfield>
392
+ <kendo-label
393
+ [for]="description"
394
+ [text]="textFor('editorEventDescription')"
395
+ labelCssClass="k-form-label"
396
+ ></kendo-label>
397
+ <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
398
+ </kendo-formfield>
399
+ }
400
+ <!-- Resources -->
401
+ @for (resource of resources; track resource) {
402
+ @if (getFormValue(resource.field)) {
322
403
  <kendo-formfield>
323
- <kendo-label
324
- [for]="endDateTimePicker"
325
- [text]="textFor('editorEventEnd')"
326
- labelCssClass="k-form-label"
327
- ></kendo-label>
328
- <kendo-scheduler-datetime-picker
329
- #endDateTimePicker
330
- [formControl]='getControl(fields.end)'
331
- [isAllDay]='getFormValue(fields.isAllDay)?.value'
332
- ></kendo-scheduler-datetime-picker>
333
- </kendo-formfield>
334
-
335
- <kendo-formfield *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
336
- <ng-container>
337
- <span class="k-checkbox-wrap">
338
- <input
339
- id='k-use-separate'
340
- type='checkbox'
341
- kendoCheckBox
342
- formControlName='endTimezoneCheckbox'
343
- />
344
- </span>
345
- <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
346
- </ng-container>
347
- </kendo-formfield>
348
-
349
- <kendo-formfield *ngIf="isEndTimeZoneVisible">
350
- <kendo-label
351
- [for]="endTzPicker"
352
- [text]="textFor('editorEventEndTimeZone')"
353
- labelCssClass="k-form-label"
354
- ></kendo-label>
355
- <kendo-timezone-editor
356
- #endTzPicker
357
- [width]="undefined"
358
- [formControl]='getControl(fields.endTimezone)'
359
- ></kendo-timezone-editor>
360
- </kendo-formfield>
361
-
362
- <!-- All day -->
363
- <kendo-formfield *ngIf="hasAllDay">
364
- <ng-container>
365
- <span class="k-checkbox-wrap">
366
- <input
367
- id='k-is-allday-chkbox'
368
- type='checkbox'
369
- kendoCheckBox
370
- [formControl]='getControl(fields.isAllDay)'
371
- />
372
- </span>
373
- <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
374
- </ng-container>
404
+ <label class='k-label k-form-label' (click)="onResourceClick(resource)">
405
+ {{ resource.name ? resource.name : resource.field }}
406
+ </label>
407
+ @if (resource.multiple) {
408
+ <kendo-multiple-resource-editor
409
+ [formControl]='getControl(resource.field)'
410
+ [resource]='resource'>
411
+ </kendo-multiple-resource-editor>
412
+ }
413
+ @if (!resource.multiple) {
414
+ <kendo-single-resource-editor
415
+ [formControl]='getControl(resource.field)'
416
+ [resource]='resource'>
417
+ </kendo-single-resource-editor>
418
+ }
375
419
  </kendo-formfield>
376
-
377
- <!-- Series -->
378
- <kendo-recurrence-editor
379
- *ngIf="isEditingSeries"
380
- [formControl]='getControl(fields.recurrenceRule)'
381
- [start]='recurrenceStart'
382
- [timezone]='eventTimezone'
383
- [weekStart]='weekStart'
384
- ></kendo-recurrence-editor>
385
-
386
- <!-- Description -->
387
- <kendo-formfield *ngIf='getFormValue(fields.description)'>
388
- <kendo-label
389
- [for]="description"
390
- [text]="textFor('editorEventDescription')"
391
- labelCssClass="k-form-label"
392
- ></kendo-label>
393
- <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
394
- </kendo-formfield>
395
-
396
- <!-- Resources -->
397
- <ng-container *ngFor='let resource of resources'>
398
- <kendo-formfield *ngIf='getFormValue(resource.field)'>
399
- <label class='k-label k-form-label' (click)="onResourceClick(resource)">
400
- {{ resource.name ? resource.name : resource.field }}
401
- </label>
402
- <kendo-multiple-resource-editor
403
- *ngIf='resource.multiple'
404
- [formControl]='getControl(resource.field)'
405
- [resource]='resource'>
406
- </kendo-multiple-resource-editor>
407
- <kendo-single-resource-editor
408
- *ngIf='!resource.multiple'
409
- [formControl]='getControl(resource.field)'
410
- [resource]='resource'>
411
- </kendo-single-resource-editor>
412
- </kendo-formfield>
413
- </ng-container>
414
- </form>
415
- </ng-container>
416
-
417
- <ng-container *ngIf='editTemplate'>
418
- <form novalidate [formGroup]='formGroup'>
419
- <ng-container [ngTemplateOutlet]='editTemplate.templateRef'
420
+ }
421
+ }
422
+ </form>
423
+ }
424
+ @if (editTemplate) {
425
+ <form novalidate [formGroup]='formGroup'>
426
+ <ng-container [ngTemplateOutlet]='editTemplate.templateRef'
420
427
  [ngTemplateOutletContext]="{
421
428
  $implicit: formGroup,
422
429
  formGroup: formGroup,
@@ -424,196 +431,203 @@ export class EditDialogComponent {
424
431
  editMode: editMode,
425
432
  isNew: isNew
426
433
  }">
427
- </ng-container>
428
- </form>
429
- </ng-container>
430
-
434
+ </ng-container>
435
+ </form>
436
+ }
431
437
  <kendo-dialog-actions layout="start">
432
- <button
433
- kendoButton
434
- themeColor="primary"
435
- icon="save"
436
- [svgIcon]="saveIcon"
437
- [disabled]="!formGroup.valid"
438
- (click)="onSave($event)"
439
- >{{ textFor('save') }}</button>
440
- <button
441
- kendoButton
442
- icon="cancel-outline"
443
- [svgIcon]="cancelIcon"
444
- (click)="onCancel($event)"
445
- >{{ textFor('cancel') }}</button>
438
+ <button
439
+ kendoButton
440
+ themeColor="primary"
441
+ icon="save"
442
+ [svgIcon]="saveIcon"
443
+ [disabled]="!formGroup.valid"
444
+ (click)="onSave($event)"
445
+ >{{ textFor('save') }}</button>
446
+ <button
447
+ kendoButton
448
+ icon="cancel-outline"
449
+ [svgIcon]="cancelIcon"
450
+ (click)="onCancel($event)"
451
+ >{{ textFor('cancel') }}</button>
446
452
  </kendo-dialog-actions>
447
- </kendo-dialog>
448
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { kind: "component", type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { kind: "directive", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { kind: "component", type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
453
+ </kendo-dialog>
454
+ }
455
+ `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { kind: "component", type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { kind: "directive", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "component", type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { kind: "component", type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
449
456
  }
450
457
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditDialogComponent, decorators: [{
451
458
  type: Component,
452
459
  args: [{
453
460
  selector: 'kendo-scheduler-edit-dialog',
454
461
  template: `
455
- <kendo-dialog (close)='onClose()' [minWidth]='400' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
456
- <ng-container *ngIf='!editTemplate'>
457
- <form
458
- class='k-scheduler-edit-form k-form k-form-md'
459
- novalidate
460
- [formGroup]='formGroup'
462
+ @if (isActive) {
463
+ <kendo-dialog (close)='onClose()' [minWidth]='400' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
464
+ @if (!editTemplate) {
465
+ <form
466
+ class='k-scheduler-edit-form k-form k-form-md'
467
+ novalidate
468
+ [formGroup]='formGroup'
461
469
  >
462
- <!-- Title -->
463
- <kendo-formfield>
464
- <kendo-label
465
- [for]="title"
466
- [text]="textFor('editorEventTitle')"
467
- labelCssClass="k-form-label"
468
- ></kendo-label>
470
+ <!-- Title -->
471
+ <kendo-formfield>
472
+ <kendo-label
473
+ [for]="title"
474
+ [text]="textFor('editorEventTitle')"
475
+ labelCssClass="k-form-label"
476
+ ></kendo-label>
477
+ <input
478
+ #title
479
+ kendoTextBox
480
+ [attr.placeholder]="textFor('editorEventTitle')"
481
+ [formControl]='getControl(fields.title)'
482
+ />
483
+ </kendo-formfield>
484
+ <!-- Start -->
485
+ <kendo-formfield>
486
+ <kendo-label
487
+ [for]="startDateTimePicker"
488
+ [text]="textFor('editorEventStart')"
489
+ labelCssClass="k-form-label"
490
+ ></kendo-label>
491
+ <kendo-scheduler-datetime-picker
492
+ #startDateTimePicker
493
+ [formControl]='getControl(fields.start)'
494
+ [isAllDay]='getFormValue(fields.isAllDay)?.value'
495
+ ></kendo-scheduler-datetime-picker>
496
+ </kendo-formfield>
497
+ @if (hasStartTimeZone) {
498
+ <kendo-formfield>
499
+ <ng-container>
500
+ <span class="k-checkbox-wrap">
469
501
  <input
470
- #title
471
- kendoTextBox
472
- [attr.placeholder]="textFor('editorEventTitle')"
473
- [formControl]='getControl(fields.title)'
474
- />
475
- </kendo-formfield>
476
-
477
- <!-- Start -->
478
- <kendo-formfield>
479
- <kendo-label
480
- [for]="startDateTimePicker"
481
- [text]="textFor('editorEventStart')"
482
- labelCssClass="k-form-label"
483
- ></kendo-label>
484
- <kendo-scheduler-datetime-picker
485
- #startDateTimePicker
486
- [formControl]='getControl(fields.start)'
487
- [isAllDay]='getFormValue(fields.isAllDay)?.value'
488
- ></kendo-scheduler-datetime-picker>
489
- </kendo-formfield>
490
-
491
- <kendo-formfield *ngIf="hasStartTimeZone">
492
- <ng-container>
493
- <span class="k-checkbox-wrap">
494
- <input
495
- id='k-set-timezone'
496
- type='checkbox'
497
- kendoCheckBox
498
- formControlName='startTimezoneCheckbox'
499
- />
500
- </span>
501
- <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
502
- </ng-container>
503
- </kendo-formfield>
504
-
505
- <kendo-formfield *ngIf="isStartTimeZoneVisible">
506
- <kendo-label
507
- [for]="startTzPicker"
508
- [text]="textFor('editorEventStartTimeZone')"
509
- labelCssClass="k-form-label"
510
- ></kendo-label>
511
- <kendo-timezone-editor
512
- #startTzPicker
513
- [width]="undefined"
514
- [formControl]='getControl(fields.startTimezone)'
515
- ></kendo-timezone-editor>
516
- </kendo-formfield>
517
-
518
- <!-- End -->
502
+ id='k-set-timezone'
503
+ type='checkbox'
504
+ kendoCheckBox
505
+ formControlName='startTimezoneCheckbox'
506
+ />
507
+ </span>
508
+ <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
509
+ </ng-container>
510
+ </kendo-formfield>
511
+ }
512
+ @if (isStartTimeZoneVisible) {
513
+ <kendo-formfield>
514
+ <kendo-label
515
+ [for]="startTzPicker"
516
+ [text]="textFor('editorEventStartTimeZone')"
517
+ labelCssClass="k-form-label"
518
+ ></kendo-label>
519
+ <kendo-timezone-editor
520
+ #startTzPicker
521
+ [width]="undefined"
522
+ [formControl]='getControl(fields.startTimezone)'
523
+ ></kendo-timezone-editor>
524
+ </kendo-formfield>
525
+ }
526
+ <!-- End -->
527
+ <kendo-formfield>
528
+ <kendo-label
529
+ [for]="endDateTimePicker"
530
+ [text]="textFor('editorEventEnd')"
531
+ labelCssClass="k-form-label"
532
+ ></kendo-label>
533
+ <kendo-scheduler-datetime-picker
534
+ #endDateTimePicker
535
+ [formControl]='getControl(fields.end)'
536
+ [isAllDay]='getFormValue(fields.isAllDay)?.value'
537
+ ></kendo-scheduler-datetime-picker>
538
+ </kendo-formfield>
539
+ @if (isStartTimeZoneVisible && hasEndTimeZone) {
540
+ <kendo-formfield>
541
+ <ng-container>
542
+ <span class="k-checkbox-wrap">
543
+ <input
544
+ id='k-use-separate'
545
+ type='checkbox'
546
+ kendoCheckBox
547
+ formControlName='endTimezoneCheckbox'
548
+ />
549
+ </span>
550
+ <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
551
+ </ng-container>
552
+ </kendo-formfield>
553
+ }
554
+ @if (isEndTimeZoneVisible) {
555
+ <kendo-formfield>
556
+ <kendo-label
557
+ [for]="endTzPicker"
558
+ [text]="textFor('editorEventEndTimeZone')"
559
+ labelCssClass="k-form-label"
560
+ ></kendo-label>
561
+ <kendo-timezone-editor
562
+ #endTzPicker
563
+ [width]="undefined"
564
+ [formControl]='getControl(fields.endTimezone)'
565
+ ></kendo-timezone-editor>
566
+ </kendo-formfield>
567
+ }
568
+ <!-- All day -->
569
+ @if (hasAllDay) {
570
+ <kendo-formfield>
571
+ <ng-container>
572
+ <span class="k-checkbox-wrap">
573
+ <input
574
+ id='k-is-allday-chkbox'
575
+ type='checkbox'
576
+ kendoCheckBox
577
+ [formControl]='getControl(fields.isAllDay)'
578
+ />
579
+ </span>
580
+ <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
581
+ </ng-container>
582
+ </kendo-formfield>
583
+ }
584
+ <!-- Series -->
585
+ @if (isEditingSeries) {
586
+ <kendo-recurrence-editor
587
+ [formControl]='getControl(fields.recurrenceRule)'
588
+ [start]='recurrenceStart'
589
+ [timezone]='eventTimezone'
590
+ [weekStart]='weekStart'
591
+ ></kendo-recurrence-editor>
592
+ }
593
+ <!-- Description -->
594
+ @if (getFormValue(fields.description)) {
595
+ <kendo-formfield>
596
+ <kendo-label
597
+ [for]="description"
598
+ [text]="textFor('editorEventDescription')"
599
+ labelCssClass="k-form-label"
600
+ ></kendo-label>
601
+ <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
602
+ </kendo-formfield>
603
+ }
604
+ <!-- Resources -->
605
+ @for (resource of resources; track resource) {
606
+ @if (getFormValue(resource.field)) {
519
607
  <kendo-formfield>
520
- <kendo-label
521
- [for]="endDateTimePicker"
522
- [text]="textFor('editorEventEnd')"
523
- labelCssClass="k-form-label"
524
- ></kendo-label>
525
- <kendo-scheduler-datetime-picker
526
- #endDateTimePicker
527
- [formControl]='getControl(fields.end)'
528
- [isAllDay]='getFormValue(fields.isAllDay)?.value'
529
- ></kendo-scheduler-datetime-picker>
530
- </kendo-formfield>
531
-
532
- <kendo-formfield *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
533
- <ng-container>
534
- <span class="k-checkbox-wrap">
535
- <input
536
- id='k-use-separate'
537
- type='checkbox'
538
- kendoCheckBox
539
- formControlName='endTimezoneCheckbox'
540
- />
541
- </span>
542
- <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
543
- </ng-container>
544
- </kendo-formfield>
545
-
546
- <kendo-formfield *ngIf="isEndTimeZoneVisible">
547
- <kendo-label
548
- [for]="endTzPicker"
549
- [text]="textFor('editorEventEndTimeZone')"
550
- labelCssClass="k-form-label"
551
- ></kendo-label>
552
- <kendo-timezone-editor
553
- #endTzPicker
554
- [width]="undefined"
555
- [formControl]='getControl(fields.endTimezone)'
556
- ></kendo-timezone-editor>
557
- </kendo-formfield>
558
-
559
- <!-- All day -->
560
- <kendo-formfield *ngIf="hasAllDay">
561
- <ng-container>
562
- <span class="k-checkbox-wrap">
563
- <input
564
- id='k-is-allday-chkbox'
565
- type='checkbox'
566
- kendoCheckBox
567
- [formControl]='getControl(fields.isAllDay)'
568
- />
569
- </span>
570
- <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
571
- </ng-container>
608
+ <label class='k-label k-form-label' (click)="onResourceClick(resource)">
609
+ {{ resource.name ? resource.name : resource.field }}
610
+ </label>
611
+ @if (resource.multiple) {
612
+ <kendo-multiple-resource-editor
613
+ [formControl]='getControl(resource.field)'
614
+ [resource]='resource'>
615
+ </kendo-multiple-resource-editor>
616
+ }
617
+ @if (!resource.multiple) {
618
+ <kendo-single-resource-editor
619
+ [formControl]='getControl(resource.field)'
620
+ [resource]='resource'>
621
+ </kendo-single-resource-editor>
622
+ }
572
623
  </kendo-formfield>
573
-
574
- <!-- Series -->
575
- <kendo-recurrence-editor
576
- *ngIf="isEditingSeries"
577
- [formControl]='getControl(fields.recurrenceRule)'
578
- [start]='recurrenceStart'
579
- [timezone]='eventTimezone'
580
- [weekStart]='weekStart'
581
- ></kendo-recurrence-editor>
582
-
583
- <!-- Description -->
584
- <kendo-formfield *ngIf='getFormValue(fields.description)'>
585
- <kendo-label
586
- [for]="description"
587
- [text]="textFor('editorEventDescription')"
588
- labelCssClass="k-form-label"
589
- ></kendo-label>
590
- <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
591
- </kendo-formfield>
592
-
593
- <!-- Resources -->
594
- <ng-container *ngFor='let resource of resources'>
595
- <kendo-formfield *ngIf='getFormValue(resource.field)'>
596
- <label class='k-label k-form-label' (click)="onResourceClick(resource)">
597
- {{ resource.name ? resource.name : resource.field }}
598
- </label>
599
- <kendo-multiple-resource-editor
600
- *ngIf='resource.multiple'
601
- [formControl]='getControl(resource.field)'
602
- [resource]='resource'>
603
- </kendo-multiple-resource-editor>
604
- <kendo-single-resource-editor
605
- *ngIf='!resource.multiple'
606
- [formControl]='getControl(resource.field)'
607
- [resource]='resource'>
608
- </kendo-single-resource-editor>
609
- </kendo-formfield>
610
- </ng-container>
611
- </form>
612
- </ng-container>
613
-
614
- <ng-container *ngIf='editTemplate'>
615
- <form novalidate [formGroup]='formGroup'>
616
- <ng-container [ngTemplateOutlet]='editTemplate.templateRef'
624
+ }
625
+ }
626
+ </form>
627
+ }
628
+ @if (editTemplate) {
629
+ <form novalidate [formGroup]='formGroup'>
630
+ <ng-container [ngTemplateOutlet]='editTemplate.templateRef'
617
631
  [ngTemplateOutletContext]="{
618
632
  $implicit: formGroup,
619
633
  formGroup: formGroup,
@@ -621,30 +635,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
621
635
  editMode: editMode,
622
636
  isNew: isNew
623
637
  }">
624
- </ng-container>
625
- </form>
626
- </ng-container>
627
-
638
+ </ng-container>
639
+ </form>
640
+ }
628
641
  <kendo-dialog-actions layout="start">
629
- <button
630
- kendoButton
631
- themeColor="primary"
632
- icon="save"
633
- [svgIcon]="saveIcon"
634
- [disabled]="!formGroup.valid"
635
- (click)="onSave($event)"
636
- >{{ textFor('save') }}</button>
637
- <button
638
- kendoButton
639
- icon="cancel-outline"
640
- [svgIcon]="cancelIcon"
641
- (click)="onCancel($event)"
642
- >{{ textFor('cancel') }}</button>
642
+ <button
643
+ kendoButton
644
+ themeColor="primary"
645
+ icon="save"
646
+ [svgIcon]="saveIcon"
647
+ [disabled]="!formGroup.valid"
648
+ (click)="onSave($event)"
649
+ >{{ textFor('save') }}</button>
650
+ <button
651
+ kendoButton
652
+ icon="cancel-outline"
653
+ [svgIcon]="cancelIcon"
654
+ (click)="onCancel($event)"
655
+ >{{ textFor('cancel') }}</button>
643
656
  </kendo-dialog-actions>
644
- </kendo-dialog>
645
- `,
657
+ </kendo-dialog>
658
+ }
659
+ `,
646
660
  standalone: true,
647
- imports: [NgIf, DialogComponent, ReactiveFormsModule, FormFieldComponent, LabelComponent, TextBoxDirective, SchedulerDateTimePickerComponent, CheckBoxDirective, LabelDirective, TimeZoneEditorComponent, RecurrenceEditorComponent, TextAreaDirective, NgFor, MultipleResourceEditorComponent, SingleResourceEditorComponent, NgTemplateOutlet, DialogActionsComponent, ButtonComponent]
661
+ imports: [DialogComponent, ReactiveFormsModule, FormFieldComponent, LabelComponent, TextBoxDirective, SchedulerDateTimePickerComponent, CheckBoxDirective, LabelDirective, TimeZoneEditorComponent, RecurrenceEditorComponent, TextAreaDirective, MultipleResourceEditorComponent, SingleResourceEditorComponent, NgTemplateOutlet, DialogActionsComponent, ButtonComponent]
648
662
  }]
649
663
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.EditService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i3.FocusService }], propDecorators: { multipleResourceEditors: [{
650
664
  type: ViewChildren,