@progress/kendo-angular-scheduler 3.0.2 → 4.0.0-next.202203241338

package/esm2015/editing/edit-dialog.component.js

@@ -0,0 +1,515 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ViewChildren } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { fromEvent } from 'rxjs';
+import { isPresent } from '../common/util';
+import { MultipleResourceEditorComponent } from './resource-multiple-editor.component';
+import { SingleResourceEditorComponent } from './resource-single-editor.component';
+import { Keys } from '@progress/kendo-angular-common';
+import { filter } from 'rxjs/operators';
+import { withModifiers, Modifiers } from '../common/modifiers';
+import { ZonedDate, toLocalDate } from '@progress/kendo-date-math';
+import { toUTCDateTime, formValueOrDefault } from '../views/utils';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "../navigation";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "./date-time-picker.component";
+import * as i6 from "./timezone-editor.component";
+import * as i7 from "./recurrence/recurrence-editor.component";
+import * as i8 from "./resource-multiple-editor.component";
+import * as i9 from "./resource-single-editor.component";
+import * as i10 from "@angular/common";
+import * as i11 from "@angular/forms";
+import * as i12 from "@progress/kendo-angular-inputs";
+import * as i13 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class EditDialogComponent {
+    constructor(ngZone, editService, localization, changeDetector, element, focusService) {
+        this.ngZone = ngZone;
+        this.editService = editService;
+        this.localization = localization;
+        this.changeDetector = changeDetector;
+        this.element = element;
+        this.focusService = focusService;
+        this.resources = [];
+        this.timezone = 'Etc/UTC';
+        this.setTimeZone = false;
+        this.setSeparateStartEndTimeZones = false;
+        this.subs = this.editService.changed.subscribe(() => {
+            this.ngZone.run(() => { this.onChange(); });
+        });
+        this.subs.add(fromEvent(this.element.nativeElement, 'keydown')
+            .pipe(filter(() => this.isActive))
+            .subscribe((e) => {
+            if (e.keyCode === Keys.Escape) {
+                this.reset();
+            }
+            if (e.keyCode === Keys.Enter && (withModifiers(e, Modifiers.CtrlKey) || withModifiers(e, Modifiers.MetaKey))) {
+                this.onSave(e);
+            }
+            e.stopPropagation();
+        }));
+    }
+    get autoFocusedElement() {
+        if (this.editTemplate) {
+            return this.editTemplate.autoFocusedElement;
+        }
+        return '.k-edit-field input';
+    }
+    get isEditingSeries() {
+        return this.editMode === 2 /* Series */ && Boolean(this.formGroup.get(this.fields.recurrenceRule));
+    }
+    get eventTimezone() {
+        return formValueOrDefault(this.formGroup, this.fields.startTimezone, this.timezone);
+    }
+    get endTimezone() {
+        return formValueOrDefault(this.formGroup, this.fields.endTimezone, this.eventTimezone);
+    }
+    onChange() {
+        this.changeDetector.markForCheck();
+        if (this.editService.hasNewEvent) {
+            this.editMode = 2 /* Series */;
+            this.formGroup = this.editService.context.formGroup;
+            this.isNew = true;
+            this.applyLocalTimezone();
+        }
+        else if (this.editService.isEditing()) {
+            const { dataItem, mode } = this.editService.context;
+            this.formGroup = this.editService.context.formGroup;
+            this.isNew = false;
+            this.editedEvent = dataItem;
+            this.editMode = isPresent(mode) ? mode : 2 /* Series */;
+            this.applyLocalTimezone();
+        }
+        else {
+            this.reset();
+            return;
+        }
+        if (!this.editTemplate) {
+            this.addTimeZoneCheckboxesToFormGroup();
+            this.subscribeToFormGroupChanges();
+        }
+        if (isPresent(this.formGroup)) {
+            this.recurrenceStart = this.formGroup.get(this.fields.start).value;
+        }
+        this.isActive = true;
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+    }
+    onCancel(e) {
+        e.preventDefault();
+        this.onClose();
+        this.changeDetector.markForCheck();
+    }
+    onSave(e) {
+        e.preventDefault();
+        this.applyTimezone();
+        this.editService.save();
+        this.changeDetector.markForCheck();
+    }
+    onClose() {
+        this.editService.endEdit();
+        this.changeDetector.markForCheck();
+        this.focusService.focus();
+    }
+    get hasAllDay() {
+        return Boolean(this.formGroup.get(this.fields.isAllDay));
+    }
+    get hasStartTimeZone() {
+        return Boolean(this.formGroup.get(this.fields.startTimezone));
+    }
+    get isStartTimeZoneVisible() {
+        return this.formGroup && this.formGroup.get('startTimezoneCheckbox').value;
+    }
+    get hasEndTimeZone() {
+        return Boolean(this.formGroup.get(this.fields.endTimezone));
+    }
+    get isEndTimeZoneVisible() {
+        return this.formGroup && this.formGroup.get('endTimezoneCheckbox').value;
+    }
+    getFormValue(field) {
+        if (field) {
+            return this.formGroup.get(field);
+        }
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    onResourceClick(resource) {
+        const resourceEditors = resource.multiple ? this.multipleResourceEditors : this.singleResourceEditors;
+        const currentEditor = resourceEditors.filter((editor) => editor.resource.field === resource.field).pop();
+        if (currentEditor) {
+            currentEditor.focus();
+        }
+    }
+    getControl(name) {
+        return this.formGroup.get(name);
+    }
+    reset() {
+        this.isActive = false;
+        this.setTimeZone = false;
+        this.setSeparateStartEndTimeZones = false;
+        this.removeTimeZoneCheckboxesFromFormGroup();
+        this.focusService.focus();
+    }
+    addTimeZoneCheckboxesToFormGroup() {
+        if (isPresent(this.formGroup)) {
+            const startField = this.fields.startTimezone;
+            this.formGroup.addControl('startTimezoneCheckbox', new FormControl(this.formGroup.contains(startField) &&
+                this.formGroup.get(startField).value));
+            const endField = this.fields.endTimezone;
+            this.formGroup.addControl('endTimezoneCheckbox', new FormControl(this.formGroup.contains(endField) &&
+                this.formGroup.get(endField).value));
+        }
+    }
+    removeTimeZoneCheckboxesFromFormGroup() {
+        if (isPresent(this.formGroup)) {
+            this.formGroup.removeControl('startTimezoneCheckbox');
+            this.formGroup.removeControl('endTimezoneCheckbox');
+        }
+    }
+    subscribeToFormGroupChanges() {
+        if (isPresent(this.formGroup)) {
+            const fields = this.fields;
+            this.formGroup.get('startTimezoneCheckbox').valueChanges.subscribe(isTrue => {
+                if (!isTrue) {
+                    this.formGroup.get(fields.startTimezone).setValue(null, { emitEvent: false });
+                    this.formGroup.get(fields.endTimezone).setValue(null, { emitEvent: false });
+                    this.formGroup.get('endTimezoneCheckbox').setValue(false, { emitEvent: false });
+                }
+            });
+            this.formGroup.get('endTimezoneCheckbox').valueChanges.subscribe(isTrue => {
+                if (!isTrue) {
+                    this.formGroup.get(fields.endTimezone).setValue(null, { emitEvent: false });
+                }
+            });
+            this.formGroup.get(fields.start).valueChanges.subscribe((newStart) => {
+                this.recurrenceStart = newStart;
+            });
+        }
+    }
+    /**
+     * Converts the event dates to "display dates" that look like the original date in its time zone.
+     * The result does not represent the same moment in time and must be converted back to local dates.
+     */
+    applyLocalTimezone() {
+        const fields = this.fields;
+        const start = this.readDateAsLocal(fields.start, this.eventTimezone);
+        const end = this.readDateAsLocal(fields.end, this.endTimezone);
+        this.formGroup.get(fields.start).reset(start);
+        this.formGroup.get(fields.end).reset(end);
+    }
+    /**
+     * Converts the "display dates" used by the editors back to local dates that represent the true moment in time.
+     */
+    applyTimezone() {
+        const fields = this.fields;
+        const start = this.readDateWithTimezone(fields.start, this.eventTimezone);
+        const end = this.readDateWithTimezone(fields.end, this.endTimezone);
+        this.formGroup.get(fields.start).reset(start);
+        this.formGroup.get(fields.end).reset(end);
+    }
+    readDateWithTimezone(field, timezone) {
+        const value = this.formGroup.get(field).value;
+        return ZonedDate.fromUTCDate(toUTCDateTime(value), timezone).toLocalDate();
+    }
+    readDateAsLocal(field, timezone) {
+        const value = this.formGroup.get(field).value;
+        return toLocalDate(ZonedDate.fromLocalDate(value, timezone).toUTCDate());
+    }
+}
+EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: `
+        <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
+            <ng-container *ngIf='!editTemplate'>
+                <div class='k-scheduler-edit-form'>
+                    <div class='k-edit-form-container'>
+                        <form novalidate [formGroup]='formGroup'>
+                            <div class='k-edit-label'>
+                                <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
+                            </div>
+                            <div class='k-edit-field'>
+                                <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
+                            </div>
+
+                            <div class='k-edit-label'>
+                                <label (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
+                            </div>
+                            <div class='k-edit-field'>
+                                <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
+                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>
+                                </kendo-scheduler-datetime-picker>
+                            </div>
+
+                            <ng-container *ngIf="isStartTimeZoneVisible">
+                                <div class='k-edit-label'>
+                                    <label (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
+                                </div>
+
+                                <div class='k-edit-field'>
+                                    <kendo-timezone-editor #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
+                                </div>
+                            </ng-container>
+
+                            <div class='k-edit-label'>
+                                <label (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
+                            </div>
+                            <div class='k-edit-field'>
+                                <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
+                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>
+                                </kendo-scheduler-datetime-picker>
+                            </div>
+
+                            <ng-container *ngIf="isEndTimeZoneVisible">
+                                <div class='k-edit-label'>
+                                    <label (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
+                                </div>
+
+                                <div class='k-edit-field'>
+                                    <kendo-timezone-editor #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
+                                </div>
+                            </ng-container>
+
+                            <div class='k-edit-field' *ngIf="hasAllDay">
+                                <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
+                                <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
+                            </div>
+
+                            <div class='k-edit-field' *ngIf="hasStartTimeZone">
+                                <input type='checkbox' id='k-set-timezone' kendoCheckBox
+                                formControlName='startTimezoneCheckbox' />
+                                <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
+
+                                <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
+                                    <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
+                                    <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
+                                </ng-container>
+                            </div>
+
+                            <ng-container *ngIf="isEditingSeries">
+                                <kendo-recurrence-editor
+                                    [formControl]='getControl(fields.recurrenceRule)'
+                                    [start]='recurrenceStart'
+                                    [timezone]='eventTimezone'
+                                    [weekStart]='weekStart'
+                                ></kendo-recurrence-editor>
+                            </ng-container>
+
+                            <ng-container *ngIf='getFormValue(fields.description)'>
+                                <div class='k-edit-label'>
+                                    <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
+                                </div>
+                                <div class='k-edit-field'>
+                                    <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
+                                </div>
+                            </ng-container>
+
+                            <ng-container *ngFor='let resource of resources'>
+                                <ng-container *ngIf='getFormValue(resource.field)'>
+                                    <div class='k-edit-label'>
+                                        <label (click)="onResourceClick(resource)">
+                                            {{ resource.name ? resource.name : resource.field }}
+                                        </label>
+                                    </div>
+                                    <div class='k-edit-field'>
+                                        <kendo-multiple-resource-editor
+                                            *ngIf='resource.multiple'
+                                            [formControl]='getControl(resource.field)'
+                                            [resource]='resource'>
+                                        </kendo-multiple-resource-editor>
+                                        <kendo-single-resource-editor
+                                            *ngIf='!resource.multiple'
+                                            [formControl]='getControl(resource.field)'
+                                            [resource]='resource'>
+                                        </kendo-single-resource-editor>
+                                    </div>
+                                </ng-container>
+                            </ng-container>
+                        </form>
+                    </div>
+                </div>
+            </ng-container>
+
+            <ng-container *ngIf='editTemplate'>
+                <form novalidate [formGroup]='formGroup'>
+                    <ng-container [ngTemplateOutlet]='editTemplate.templateRef'
+                        [ngTemplateOutletContext]="{
+                            $implicit: formGroup,
+                            formGroup: formGroup,
+                            dataItem: editedEvent,
+                            editMode: editMode,
+                            isNew: isNew
+                        }">
+                    </ng-container>
+                </form>
+            </ng-container>
+
+            <kendo-dialog-actions>
+                <button kendoButton (click)="onCancel($event)">{{ textFor('cancel') }}</button>
+                <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+    `, isInline: true, components: [{ type: i4.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], 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"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i11.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i11.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i12.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i11.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i12.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-scheduler-edit-dialog',
+                    template: `
+        <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
+            <ng-container *ngIf='!editTemplate'>
+                <div class='k-scheduler-edit-form'>
+                    <div class='k-edit-form-container'>
+                        <form novalidate [formGroup]='formGroup'>
+                            <div class='k-edit-label'>
+                                <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
+                            </div>
+                            <div class='k-edit-field'>
+                                <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
+                            </div>
+
+                            <div class='k-edit-label'>
+                                <label (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
+                            </div>
+                            <div class='k-edit-field'>
+                                <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
+                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>
+                                </kendo-scheduler-datetime-picker>
+                            </div>
+
+                            <ng-container *ngIf="isStartTimeZoneVisible">
+                                <div class='k-edit-label'>
+                                    <label (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
+                                </div>
+
+                                <div class='k-edit-field'>
+                                    <kendo-timezone-editor #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
+                                </div>
+                            </ng-container>
+
+                            <div class='k-edit-label'>
+                                <label (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
+                            </div>
+                            <div class='k-edit-field'>
+                                <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
+                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>
+                                </kendo-scheduler-datetime-picker>
+                            </div>
+
+                            <ng-container *ngIf="isEndTimeZoneVisible">
+                                <div class='k-edit-label'>
+                                    <label (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
+                                </div>
+
+                                <div class='k-edit-field'>
+                                    <kendo-timezone-editor #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
+                                </div>
+                            </ng-container>
+
+                            <div class='k-edit-field' *ngIf="hasAllDay">
+                                <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
+                                <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
+                            </div>
+
+                            <div class='k-edit-field' *ngIf="hasStartTimeZone">
+                                <input type='checkbox' id='k-set-timezone' kendoCheckBox
+                                formControlName='startTimezoneCheckbox' />
+                                <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
+
+                                <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
+                                    <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
+                                    <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
+                                </ng-container>
+                            </div>
+
+                            <ng-container *ngIf="isEditingSeries">
+                                <kendo-recurrence-editor
+                                    [formControl]='getControl(fields.recurrenceRule)'
+                                    [start]='recurrenceStart'
+                                    [timezone]='eventTimezone'
+                                    [weekStart]='weekStart'
+                                ></kendo-recurrence-editor>
+                            </ng-container>
+
+                            <ng-container *ngIf='getFormValue(fields.description)'>
+                                <div class='k-edit-label'>
+                                    <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
+                                </div>
+                                <div class='k-edit-field'>
+                                    <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
+                                </div>
+                            </ng-container>
+
+                            <ng-container *ngFor='let resource of resources'>
+                                <ng-container *ngIf='getFormValue(resource.field)'>
+                                    <div class='k-edit-label'>
+                                        <label (click)="onResourceClick(resource)">
+                                            {{ resource.name ? resource.name : resource.field }}
+                                        </label>
+                                    </div>
+                                    <div class='k-edit-field'>
+                                        <kendo-multiple-resource-editor
+                                            *ngIf='resource.multiple'
+                                            [formControl]='getControl(resource.field)'
+                                            [resource]='resource'>
+                                        </kendo-multiple-resource-editor>
+                                        <kendo-single-resource-editor
+                                            *ngIf='!resource.multiple'
+                                            [formControl]='getControl(resource.field)'
+                                            [resource]='resource'>
+                                        </kendo-single-resource-editor>
+                                    </div>
+                                </ng-container>
+                            </ng-container>
+                        </form>
+                    </div>
+                </div>
+            </ng-container>
+
+            <ng-container *ngIf='editTemplate'>
+                <form novalidate [formGroup]='formGroup'>
+                    <ng-container [ngTemplateOutlet]='editTemplate.templateRef'
+                        [ngTemplateOutletContext]="{
+                            $implicit: formGroup,
+                            formGroup: formGroup,
+                            dataItem: editedEvent,
+                            editMode: editMode,
+                            isNew: isNew
+                        }">
+                    </ng-container>
+                </form>
+            </ng-container>
+
+            <kendo-dialog-actions>
+                <button kendoButton (click)="onCancel($event)">{{ textFor('cancel') }}</button>
+                <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.EditService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i3.FocusService }]; }, propDecorators: { multipleResourceEditors: [{
+                type: ViewChildren,
+                args: [MultipleResourceEditorComponent]
+            }], singleResourceEditors: [{
+                type: ViewChildren,
+                args: [SingleResourceEditorComponent]
+            }], resources: [{
+                type: Input
+            }], timezone: [{
+                type: Input
+            }], weekStart: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], editTemplate: [{
+                type: Input
+            }] } });

package/esm2015/editing/edit.service.js

@@ -0,0 +1,99 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { isPresent } from '../common/util';
+import * as i0 from "@angular/core";
+// const toSimilarDate = (date: ZonedDate): Date => new Date(
+//     date.getFullYear(), date.getMonth(), date.getDay(),
+//     date.getHours(), date.getMinutes(), date.getSeconds(),
+//     date.getMilliseconds()
+//   );
+// const toUTCDateTime = (localDate: Date): Date => new Date(Date.UTC(
+//       localDate.getFullYear(),
+//       localDate.getMonth(),
+//       localDate.getDate(),
+//       localDate.getHours(),
+//       localDate.getMinutes(),
+//       localDate.getSeconds(),
+//       localDate.getMilliseconds()
+//     ));
+/**
+ * @hidden
+ */
+export class EditService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new EventEmitter();
+        this.changedSource = new Subject();
+        this.changed = this.changedSource.asObservable().pipe(debounceTime(0));
+    }
+    endEdit() {
+        const formGroup = this.hasNewEvent ? this.newEventGroup.group : this.editedEvent.formGroup;
+        this.changes.emit({ action: 'cancel', formGroup });
+    }
+    removeEvent(dataItem) {
+        this.changes.emit({ action: 'remove', dataItem });
+    }
+    addEvent(formGroup) {
+        this.newEventGroup = { formGroup };
+        this.onChanged();
+    }
+    editEvent(dataItem, formGroup = undefined, mode) {
+        this.editedEvent = { dataItem, formGroup, mode };
+        this.onChanged();
+    }
+    close() {
+        this.newEventGroup = this.editedEvent = null;
+        this.onChanged();
+    }
+    save() {
+        const { dataItem, formGroup } = this.context;
+        this.changes.emit({
+            action: 'save',
+            dataItem,
+            formGroup,
+            isNew: this.hasNewEvent,
+            mode: this.occurrenceEditMode
+        });
+    }
+    isEditing() {
+        return isPresent(this.context);
+    }
+    get occurrenceEditMode() {
+        if (this.hasNewEvent) {
+            return 2 /* Series */;
+        }
+        else {
+            return this.editedEvent.mode || 0 /* Event */;
+        }
+    }
+    get hasNewEvent() {
+        return isPresent(this.newEventGroup);
+    }
+    get newEvent() {
+        if (this.hasNewEvent) {
+            return this.newEventGroup.group.value;
+        }
+        return {};
+    }
+    get context() {
+        if (this.hasNewEvent) {
+            return this.newEventGroup;
+        }
+        return this.editedEvent;
+    }
+    onChanged() {
+        this.ngZone.runOutsideAngular(() => {
+            this.changedSource.next();
+        });
+    }
+}
+EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/esm2015/editing/local-data-changes.service.js

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class LocalDataChangesService {
+    constructor() {
+        this.changes = new EventEmitter();
+    }
+}
+LocalDataChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalDataChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LocalDataChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalDataChangesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalDataChangesService, decorators: [{
+            type: Injectable
+        }] });