@progress/kendo-angular-scheduler 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/editing/edit-dialog.component.mjs

@@ -1,679 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, Input, NgZone, ChangeDetectorRef, ViewChildren, QueryList, ElementRef } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { EditService } from './edit.service';
-import { fromEvent } from 'rxjs';
-import { isPresent } from '../common/util';
-import { EditMode } from '../types';
-import { EditDialogTemplateDirective } from './edit-dialog-template.directive';
-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 { FocusService } from '../navigation';
-import { Day, ZonedDate, toLocalDate } from '@progress/kendo-date-math';
-import { toUTCDateTime, formValueOrDefault } from '../views/utils';
-import { cancelOutlineIcon, saveIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { DialogComponent, DialogActionsComponent } from '@progress/kendo-angular-dialog';
-import { TextAreaDirective, CheckBoxDirective, TextBoxDirective, FormFieldComponent } from '@progress/kendo-angular-inputs';
-import { RecurrenceEditorComponent } from './recurrence/recurrence-editor.component';
-import { TimeZoneEditorComponent } from './timezone-editor.component';
-import { LabelDirective, LabelComponent } from '@progress/kendo-angular-label';
-import { SchedulerDateTimePickerComponent } from './date-time-picker.component';
-import { NgTemplateOutlet } from '@angular/common';
-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 "@angular/forms";
-/**
- * @hidden
- */
-export class EditDialogComponent {
-    ngZone;
-    editService;
-    localization;
-    changeDetector;
-    element;
-    focusService;
-    multipleResourceEditors;
-    singleResourceEditors;
-    resources = [];
-    timezone = 'Etc/UTC';
-    weekStart;
-    fields;
-    editTemplate;
-    get autoFocusedElement() {
-        if (this.editTemplate) {
-            return this.editTemplate.autoFocusedElement;
-        }
-        return '.k-form-field input';
-    }
-    dialogTitle;
-    isActive;
-    editMode;
-    get isEditingSeries() {
-        return this.editMode === EditMode.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);
-    }
-    recurrenceStart;
-    setTimeZone = false;
-    setSeparateStartEndTimeZones = false;
-    formGroup;
-    editedEvent;
-    isNew;
-    saveIcon = saveIcon;
-    cancelIcon = cancelOutlineIcon;
-    subs;
-    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.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.code === Keys.Escape) {
-                this.reset();
-            }
-            if ((e.code === Keys.Enter || e.code === Keys.NumpadEnter) && (withModifiers(e, Modifiers.CtrlKey) || withModifiers(e, Modifiers.MetaKey))) {
-                this.onSave(e);
-            }
-            e.stopPropagation();
-        }));
-    }
-    onChange() {
-        this.changeDetector.markForCheck();
-        if (this.editService.hasNewEvent) {
-            this.editMode = EditMode.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 : EditMode.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());
-    }
-    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 });
-    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: `
-        @if (isActive) {
-          <kendo-dialog (close)='onClose()' [minWidth]='400' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
-            @if (!editTemplate) {
-              <form
-                class='k-scheduler-edit-form k-form k-form-md'
-                novalidate
-                [formGroup]='formGroup'
-                >
-                <!-- Title -->
-                <kendo-formfield>
-                  <kendo-label
-                    [for]="title"
-                    [text]="textFor('editorEventTitle')"
-                    labelCssClass="k-form-label"
-                  ></kendo-label>
-                  <input
-                    #title
-                    kendoTextBox
-                    [attr.placeholder]="textFor('editorEventTitle')"
-                    [formControl]='getControl(fields.title)'
-                    />
-                </kendo-formfield>
-                <!-- Start -->
-                <kendo-formfield>
-                  <kendo-label
-                    [for]="startDateTimePicker"
-                    [text]="textFor('editorEventStart')"
-                    labelCssClass="k-form-label"
-                  ></kendo-label>
-                  <kendo-scheduler-datetime-picker
-                    #startDateTimePicker
-                    [formControl]='getControl(fields.start)'
-                    [isAllDay]='getFormValue(fields.isAllDay)?.value'
-                  ></kendo-scheduler-datetime-picker>
-                </kendo-formfield>
-                @if (hasStartTimeZone) {
-                  <kendo-formfield>
-                    <ng-container>
-                      <span class="k-checkbox-wrap">
-                        <input
-                          id='k-set-timezone'
-                          type='checkbox'
-                          kendoCheckBox
-                          formControlName='startTimezoneCheckbox'
-                          />
-                      </span>
-                      <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
-                    </ng-container>
-                  </kendo-formfield>
-                }
-                @if (isStartTimeZoneVisible) {
-                  <kendo-formfield>
-                    <kendo-label
-                      [for]="startTzPicker"
-                      [text]="textFor('editorEventStartTimeZone')"
-                      labelCssClass="k-form-label"
-                    ></kendo-label>
-                    <kendo-timezone-editor
-                      #startTzPicker
-                      [width]="undefined"
-                      [formControl]='getControl(fields.startTimezone)'
-                    ></kendo-timezone-editor>
-                  </kendo-formfield>
-                }
-                <!-- End -->
-                <kendo-formfield>
-                  <kendo-label
-                    [for]="endDateTimePicker"
-                    [text]="textFor('editorEventEnd')"
-                    labelCssClass="k-form-label"
-                  ></kendo-label>
-                  <kendo-scheduler-datetime-picker
-                    #endDateTimePicker
-                    [formControl]='getControl(fields.end)'
-                    [isAllDay]='getFormValue(fields.isAllDay)?.value'
-                  ></kendo-scheduler-datetime-picker>
-                </kendo-formfield>
-                @if (isStartTimeZoneVisible && hasEndTimeZone) {
-                  <kendo-formfield>
-                    <ng-container>
-                      <span class="k-checkbox-wrap">
-                        <input
-                          id='k-use-separate'
-                          type='checkbox'
-                          kendoCheckBox
-                          formControlName='endTimezoneCheckbox'
-                          />
-                      </span>
-                      <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
-                    </ng-container>
-                  </kendo-formfield>
-                }
-                @if (isEndTimeZoneVisible) {
-                  <kendo-formfield>
-                    <kendo-label
-                      [for]="endTzPicker"
-                      [text]="textFor('editorEventEndTimeZone')"
-                      labelCssClass="k-form-label"
-                    ></kendo-label>
-                    <kendo-timezone-editor
-                      #endTzPicker
-                      [width]="undefined"
-                      [formControl]='getControl(fields.endTimezone)'
-                    ></kendo-timezone-editor>
-                  </kendo-formfield>
-                }
-                <!-- All day -->
-                @if (hasAllDay) {
-                  <kendo-formfield>
-                    <ng-container>
-                      <span class="k-checkbox-wrap">
-                        <input
-                          id='k-is-allday-chkbox'
-                          type='checkbox'
-                          kendoCheckBox
-                          [formControl]='getControl(fields.isAllDay)'
-                          />
-                      </span>
-                      <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
-                    </ng-container>
-                  </kendo-formfield>
-                }
-                <!-- Series -->
-                @if (isEditingSeries) {
-                  <kendo-recurrence-editor
-                    [formControl]='getControl(fields.recurrenceRule)'
-                    [start]='recurrenceStart'
-                    [timezone]='eventTimezone'
-                    [weekStart]='weekStart'
-                  ></kendo-recurrence-editor>
-                }
-                <!-- Description -->
-                @if (getFormValue(fields.description)) {
-                  <kendo-formfield>
-                    <kendo-label
-                      [for]="description"
-                      [text]="textFor('editorEventDescription')"
-                      labelCssClass="k-form-label"
-                    ></kendo-label>
-                    <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
-                  </kendo-formfield>
-                }
-                <!-- Resources -->
-                @for (resource of resources; track resource) {
-                  @if (getFormValue(resource.field)) {
-                    <kendo-formfield>
-                      <label class='k-label k-form-label' (click)="onResourceClick(resource)">
-                        {{ resource.name ? resource.name : resource.field }}
-                      </label>
-                      @if (resource.multiple) {
-                        <kendo-multiple-resource-editor
-                          [formControl]='getControl(resource.field)'
-                          [resource]='resource'>
-                        </kendo-multiple-resource-editor>
-                      }
-                      @if (!resource.multiple) {
-                        <kendo-single-resource-editor
-                          [formControl]='getControl(resource.field)'
-                          [resource]='resource'>
-                        </kendo-single-resource-editor>
-                      }
-                    </kendo-formfield>
-                  }
-                }
-              </form>
-            }
-            @if (editTemplate) {
-              <form novalidate [formGroup]='formGroup'>
-                <ng-container [ngTemplateOutlet]='editTemplate.templateRef'
-                        [ngTemplateOutletContext]="{
-                            $implicit: formGroup,
-                            formGroup: formGroup,
-                            dataItem: editedEvent,
-                            editMode: editMode,
-                            isNew: isNew
-                        }">
-                </ng-container>
-              </form>
-            }
-            <kendo-dialog-actions layout="start">
-              <button
-                kendoButton
-                themeColor="primary"
-                icon="save"
-                [svgIcon]="saveIcon"
-                [disabled]="!formGroup.valid"
-                (click)="onSave($event)"
-              >{{ textFor('save') }}</button>
-              <button
-                kendoButton
-                icon="cancel-outline"
-                [svgIcon]="cancelIcon"
-                (click)="onCancel($event)"
-              >{{ textFor('cancel') }}</button>
-            </kendo-dialog-actions>
-          </kendo-dialog>
-        }
-        `, 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-scheduler-edit-dialog',
-                    template: `
-        @if (isActive) {
-          <kendo-dialog (close)='onClose()' [minWidth]='400' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
-            @if (!editTemplate) {
-              <form
-                class='k-scheduler-edit-form k-form k-form-md'
-                novalidate
-                [formGroup]='formGroup'
-                >
-                <!-- Title -->
-                <kendo-formfield>
-                  <kendo-label
-                    [for]="title"
-                    [text]="textFor('editorEventTitle')"
-                    labelCssClass="k-form-label"
-                  ></kendo-label>
-                  <input
-                    #title
-                    kendoTextBox
-                    [attr.placeholder]="textFor('editorEventTitle')"
-                    [formControl]='getControl(fields.title)'
-                    />
-                </kendo-formfield>
-                <!-- Start -->
-                <kendo-formfield>
-                  <kendo-label
-                    [for]="startDateTimePicker"
-                    [text]="textFor('editorEventStart')"
-                    labelCssClass="k-form-label"
-                  ></kendo-label>
-                  <kendo-scheduler-datetime-picker
-                    #startDateTimePicker
-                    [formControl]='getControl(fields.start)'
-                    [isAllDay]='getFormValue(fields.isAllDay)?.value'
-                  ></kendo-scheduler-datetime-picker>
-                </kendo-formfield>
-                @if (hasStartTimeZone) {
-                  <kendo-formfield>
-                    <ng-container>
-                      <span class="k-checkbox-wrap">
-                        <input
-                          id='k-set-timezone'
-                          type='checkbox'
-                          kendoCheckBox
-                          formControlName='startTimezoneCheckbox'
-                          />
-                      </span>
-                      <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
-                    </ng-container>
-                  </kendo-formfield>
-                }
-                @if (isStartTimeZoneVisible) {
-                  <kendo-formfield>
-                    <kendo-label
-                      [for]="startTzPicker"
-                      [text]="textFor('editorEventStartTimeZone')"
-                      labelCssClass="k-form-label"
-                    ></kendo-label>
-                    <kendo-timezone-editor
-                      #startTzPicker
-                      [width]="undefined"
-                      [formControl]='getControl(fields.startTimezone)'
-                    ></kendo-timezone-editor>
-                  </kendo-formfield>
-                }
-                <!-- End -->
-                <kendo-formfield>
-                  <kendo-label
-                    [for]="endDateTimePicker"
-                    [text]="textFor('editorEventEnd')"
-                    labelCssClass="k-form-label"
-                  ></kendo-label>
-                  <kendo-scheduler-datetime-picker
-                    #endDateTimePicker
-                    [formControl]='getControl(fields.end)'
-                    [isAllDay]='getFormValue(fields.isAllDay)?.value'
-                  ></kendo-scheduler-datetime-picker>
-                </kendo-formfield>
-                @if (isStartTimeZoneVisible && hasEndTimeZone) {
-                  <kendo-formfield>
-                    <ng-container>
-                      <span class="k-checkbox-wrap">
-                        <input
-                          id='k-use-separate'
-                          type='checkbox'
-                          kendoCheckBox
-                          formControlName='endTimezoneCheckbox'
-                          />
-                      </span>
-                      <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
-                    </ng-container>
-                  </kendo-formfield>
-                }
-                @if (isEndTimeZoneVisible) {
-                  <kendo-formfield>
-                    <kendo-label
-                      [for]="endTzPicker"
-                      [text]="textFor('editorEventEndTimeZone')"
-                      labelCssClass="k-form-label"
-                    ></kendo-label>
-                    <kendo-timezone-editor
-                      #endTzPicker
-                      [width]="undefined"
-                      [formControl]='getControl(fields.endTimezone)'
-                    ></kendo-timezone-editor>
-                  </kendo-formfield>
-                }
-                <!-- All day -->
-                @if (hasAllDay) {
-                  <kendo-formfield>
-                    <ng-container>
-                      <span class="k-checkbox-wrap">
-                        <input
-                          id='k-is-allday-chkbox'
-                          type='checkbox'
-                          kendoCheckBox
-                          [formControl]='getControl(fields.isAllDay)'
-                          />
-                      </span>
-                      <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
-                    </ng-container>
-                  </kendo-formfield>
-                }
-                <!-- Series -->
-                @if (isEditingSeries) {
-                  <kendo-recurrence-editor
-                    [formControl]='getControl(fields.recurrenceRule)'
-                    [start]='recurrenceStart'
-                    [timezone]='eventTimezone'
-                    [weekStart]='weekStart'
-                  ></kendo-recurrence-editor>
-                }
-                <!-- Description -->
-                @if (getFormValue(fields.description)) {
-                  <kendo-formfield>
-                    <kendo-label
-                      [for]="description"
-                      [text]="textFor('editorEventDescription')"
-                      labelCssClass="k-form-label"
-                    ></kendo-label>
-                    <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
-                  </kendo-formfield>
-                }
-                <!-- Resources -->
-                @for (resource of resources; track resource) {
-                  @if (getFormValue(resource.field)) {
-                    <kendo-formfield>
-                      <label class='k-label k-form-label' (click)="onResourceClick(resource)">
-                        {{ resource.name ? resource.name : resource.field }}
-                      </label>
-                      @if (resource.multiple) {
-                        <kendo-multiple-resource-editor
-                          [formControl]='getControl(resource.field)'
-                          [resource]='resource'>
-                        </kendo-multiple-resource-editor>
-                      }
-                      @if (!resource.multiple) {
-                        <kendo-single-resource-editor
-                          [formControl]='getControl(resource.field)'
-                          [resource]='resource'>
-                        </kendo-single-resource-editor>
-                      }
-                    </kendo-formfield>
-                  }
-                }
-              </form>
-            }
-            @if (editTemplate) {
-              <form novalidate [formGroup]='formGroup'>
-                <ng-container [ngTemplateOutlet]='editTemplate.templateRef'
-                        [ngTemplateOutletContext]="{
-                            $implicit: formGroup,
-                            formGroup: formGroup,
-                            dataItem: editedEvent,
-                            editMode: editMode,
-                            isNew: isNew
-                        }">
-                </ng-container>
-              </form>
-            }
-            <kendo-dialog-actions layout="start">
-              <button
-                kendoButton
-                themeColor="primary"
-                icon="save"
-                [svgIcon]="saveIcon"
-                [disabled]="!formGroup.valid"
-                (click)="onSave($event)"
-              >{{ textFor('save') }}</button>
-              <button
-                kendoButton
-                icon="cancel-outline"
-                [svgIcon]="cancelIcon"
-                (click)="onCancel($event)"
-              >{{ textFor('cancel') }}</button>
-            </kendo-dialog-actions>
-          </kendo-dialog>
-        }
-        `,
-                    standalone: true,
-                    imports: [DialogComponent, ReactiveFormsModule, FormFieldComponent, LabelComponent, TextBoxDirective, SchedulerDateTimePickerComponent, CheckBoxDirective, LabelDirective, TimeZoneEditorComponent, RecurrenceEditorComponent, TextAreaDirective, MultipleResourceEditorComponent, SingleResourceEditorComponent, NgTemplateOutlet, DialogActionsComponent, ButtonComponent]
-                }]
-        }], ctorParameters: () => [{ 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
-            }] } });