@progress/kendo-angular-scheduler 4.0.0 → 4.1.0

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 (13) hide show
  1. package/bundles/kendo-angular-scheduler.umd.js +1 -1
  2. package/esm2015/editing/edit-dialog.component.js +175 -161
  3. package/esm2015/editing/recurrence/recurrence-editor.component.js +36 -40
  4. package/esm2015/editing/recurrence/recurrence-end-rule-editor.component.js +14 -16
  5. package/esm2015/editing/recurrence/recurrence-frequency-editor.component.js +26 -24
  6. package/esm2015/editing/recurrence/recurrence-interval-editor.component.js +44 -44
  7. package/esm2015/editing/recurrence/recurrence-monthly-yearly-editor.component.js +12 -14
  8. package/esm2015/editing/recurrence/recurrence-weekday-rule-editor.component.js +26 -24
  9. package/esm2015/package-metadata.js +1 -1
  10. package/esm2015/views/common/base-view.js +6 -0
  11. package/esm2015/views/common/slot-selectable.directive.js +8 -5
  12. package/fesm2015/kendo-angular-scheduler.js +354 -335
  13. package/package.json +1 -1
package/fesm2015/kendo-angular-scheduler.js CHANGED
@@ -43,7 +43,7 @@ const packageMetadata = {
43
43
  name: '@progress/kendo-angular-scheduler',
44
44
  productName: 'Kendo UI for Angular',
45
45
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
46
- publishDate: 1650441034,
46
+ publishDate: 1652259001,
47
47
  version: '',
48
48
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
49
49
  };
@@ -3475,18 +3475,19 @@ class RecurrenceFrequencyEditorComponent {
3475
3475
  }
3476
3476
  RecurrenceFrequencyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceFrequencyEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
3477
3477
  RecurrenceFrequencyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
3478
- <div class='k-edit-label'>
3479
- <label (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
3480
- </div>
3481
- <div class='k-edit-field'>
3482
- <kendo-buttongroup [selection]="'single'">
3483
- <button *ngFor='let freq of frequencies' kendoButton
3484
- [style.width.px]="100"
3485
- [togglable]="true"
3486
- [selected]="freq.value === selected"
3487
- (click)="onClick(freq)"
3488
- >{{ freq.text }}</button>
3489
- </kendo-buttongroup>
3478
+ <div class='k-form-field'>
3479
+ <label class="k-form-label" (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
3480
+
3481
+ <div class='k-form-field-wrap'>
3482
+ <kendo-buttongroup [selection]="'single'">
3483
+ <button *ngFor='let freq of frequencies' kendoButton
3484
+ [style.width.px]="100"
3485
+ [togglable]="true"
3486
+ [selected]="freq.value === selected"
3487
+ (click)="onClick(freq)"
3488
+ >{{ freq.text }}</button>
3489
+ </kendo-buttongroup>
3490
+ </div>
3490
3491
  </div>
3491
3492
  `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
3492
3493
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceFrequencyEditorComponent, decorators: [{
@@ -3494,18 +3495,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
3494
3495
  args: [{
3495
3496
  selector: 'kendo-recurrence-frequency-editor',
3496
3497
  template: `
3497
- <div class='k-edit-label'>
3498
- <label (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
3499
- </div>
3500
- <div class='k-edit-field'>
3501
- <kendo-buttongroup [selection]="'single'">
3502
- <button *ngFor='let freq of frequencies' kendoButton
3503
- [style.width.px]="100"
3504
- [togglable]="true"
3505
- [selected]="freq.value === selected"
3506
- (click)="onClick(freq)"
3507
- >{{ freq.text }}</button>
3508
- </kendo-buttongroup>
3498
+ <div class='k-form-field'>
3499
+ <label class="k-form-label" (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
3500
+
3501
+ <div class='k-form-field-wrap'>
3502
+ <kendo-buttongroup [selection]="'single'">
3503
+ <button *ngFor='let freq of frequencies' kendoButton
3504
+ [style.width.px]="100"
3505
+ [togglable]="true"
3506
+ [selected]="freq.value === selected"
3507
+ (click)="onClick(freq)"
3508
+ >{{ freq.text }}</button>
3509
+ </kendo-buttongroup>
3510
+ </div>
3509
3511
  </div>
3510
3512
  `
3511
3513
  }]
@@ -3582,30 +3584,30 @@ class RecurrenceIntervalEditorComponent {
3582
3584
  }
3583
3585
  RecurrenceIntervalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceIntervalEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
3584
3586
  RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: { userNumericOptions: "userNumericOptions" }, ngImport: i0, template: `
3585
- <div class="k-edit-label">
3586
- <label (click)="intervalNumeric.focus()">{{ textForRepeatEvery() }}</label>
3587
- </div>
3588
-
3589
- <div class="k-edit-field">
3590
- <kendo-numerictextbox
3591
- #intervalNumeric
3592
- [style.width.px]="70"
3593
- [min]="numericOptions.min"
3594
- [max]="numericOptions.max"
3595
- [decimals]="0"
3596
- [format]="numericOptions.format"
3597
- [autoCorrect]="numericOptions.autoCorrect"
3598
- [readonly]="numericOptions.readonly"
3599
- [selectOnFocus]="numericOptions.selectOnFocus"
3600
- [spinners]="numericOptions.spinners"
3601
- [step]="numericOptions.step"
3602
- [title]="numericOptions.title"
3603
- [(value)]="intervalValue"
3604
- (blur)="onIntervalBlur()"
3605
- (valueChange)="onIntervalChange($event)">
3606
- </kendo-numerictextbox>
3607
-
3608
- <span>{{ textForFrequency() }}</span>
3587
+ <div class='k-form-field'>
3588
+ <label class="k-form-label" (click)="intervalNumeric.focus()">{{ textForRepeatEvery() }}</label>
3589
+
3590
+ <div class="k-form-field-wrap">
3591
+ <kendo-numerictextbox
3592
+ #intervalNumeric
3593
+ [style.width.px]="70"
3594
+ [min]="numericOptions.min"
3595
+ [max]="numericOptions.max"
3596
+ [decimals]="0"
3597
+ [format]="numericOptions.format"
3598
+ [autoCorrect]="numericOptions.autoCorrect"
3599
+ [readonly]="numericOptions.readonly"
3600
+ [selectOnFocus]="numericOptions.selectOnFocus"
3601
+ [spinners]="numericOptions.spinners"
3602
+ [step]="numericOptions.step"
3603
+ [title]="numericOptions.title"
3604
+ [(value)]="intervalValue"
3605
+ (blur)="onIntervalBlur()"
3606
+ (valueChange)="onIntervalChange($event)">
3607
+ </kendo-numerictextbox>
3608
+
3609
+ <span>{{ textForFrequency() }}</span>
3610
+ </div>
3609
3611
  </div>
3610
3612
  `, isInline: true, components: [{ type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }] });
3611
3613
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceIntervalEditorComponent, decorators: [{
@@ -3613,30 +3615,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
3613
3615
  args: [{
3614
3616
  selector: 'kendo-recurrence-interval-editor',
3615
3617
  template: `
3616
- <div class="k-edit-label">
3617
- <label (click)="intervalNumeric.focus()">{{ textForRepeatEvery() }}</label>
3618
- </div>
3619
-
3620
- <div class="k-edit-field">
3621
- <kendo-numerictextbox
3622
- #intervalNumeric
3623
- [style.width.px]="70"
3624
- [min]="numericOptions.min"
3625
- [max]="numericOptions.max"
3626
- [decimals]="0"
3627
- [format]="numericOptions.format"
3628
- [autoCorrect]="numericOptions.autoCorrect"
3629
- [readonly]="numericOptions.readonly"
3630
- [selectOnFocus]="numericOptions.selectOnFocus"
3631
- [spinners]="numericOptions.spinners"
3632
- [step]="numericOptions.step"
3633
- [title]="numericOptions.title"
3634
- [(value)]="intervalValue"
3635
- (blur)="onIntervalBlur()"
3636
- (valueChange)="onIntervalChange($event)">
3637
- </kendo-numerictextbox>
3638
-
3639
- <span>{{ textForFrequency() }}</span>
3618
+ <div class='k-form-field'>
3619
+ <label class="k-form-label" (click)="intervalNumeric.focus()">{{ textForRepeatEvery() }}</label>
3620
+
3621
+ <div class="k-form-field-wrap">
3622
+ <kendo-numerictextbox
3623
+ #intervalNumeric
3624
+ [style.width.px]="70"
3625
+ [min]="numericOptions.min"
3626
+ [max]="numericOptions.max"
3627
+ [decimals]="0"
3628
+ [format]="numericOptions.format"
3629
+ [autoCorrect]="numericOptions.autoCorrect"
3630
+ [readonly]="numericOptions.readonly"
3631
+ [selectOnFocus]="numericOptions.selectOnFocus"
3632
+ [spinners]="numericOptions.spinners"
3633
+ [step]="numericOptions.step"
3634
+ [title]="numericOptions.title"
3635
+ [(value)]="intervalValue"
3636
+ (blur)="onIntervalBlur()"
3637
+ (valueChange)="onIntervalChange($event)">
3638
+ </kendo-numerictextbox>
3639
+
3640
+ <span>{{ textForFrequency() }}</span>
3641
+ </div>
3640
3642
  </div>
3641
3643
  `
3642
3644
  }]
@@ -3699,18 +3701,19 @@ class RecurrenceWeekdayRuleEditorComponent {
3699
3701
  }
3700
3702
  RecurrenceWeekdayRuleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
3701
3703
  RecurrenceWeekdayRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
3702
- <div class='k-edit-label'>
3703
- <label (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
3704
- </div>
3705
- <div class='k-edit-field'>
3706
- <kendo-buttongroup [selection]="'multiple'">
3707
- <button *ngFor='let day of weekDays' kendoButton
3708
- [style.width.px]="75"
3709
- [toggleable]="true"
3710
- [selected]="isSelected(day)"
3711
- (selectedChange)="onSelectedChange($event, day.value)"
3712
- >{{ capitalize(day.text) }}</button>
3713
- </kendo-buttongroup>
3704
+ <div class='k-form-field'>
3705
+ <label class='k-form-label' (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
3706
+
3707
+ <div class='k-form-field-wrap'>
3708
+ <kendo-buttongroup [selection]="'multiple'">
3709
+ <button *ngFor='let day of weekDays' kendoButton
3710
+ [style.width.px]="75"
3711
+ [toggleable]="true"
3712
+ [selected]="isSelected(day)"
3713
+ (selectedChange)="onSelectedChange($event, day.value)"
3714
+ >{{ capitalize(day.text) }}</button>
3715
+ </kendo-buttongroup>
3716
+ </div>
3714
3717
  </div>
3715
3718
  `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
3716
3719
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, decorators: [{
@@ -3718,18 +3721,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
3718
3721
  args: [{
3719
3722
  selector: 'kendo-recurrence-weekday-rule-editor',
3720
3723
  template: `
3721
- <div class='k-edit-label'>
3722
- <label (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
3723
- </div>
3724
- <div class='k-edit-field'>
3725
- <kendo-buttongroup [selection]="'multiple'">
3726
- <button *ngFor='let day of weekDays' kendoButton
3727
- [style.width.px]="75"
3728
- [toggleable]="true"
3729
- [selected]="isSelected(day)"
3730
- (selectedChange)="onSelectedChange($event, day.value)"
3731
- >{{ capitalize(day.text) }}</button>
3732
- </kendo-buttongroup>
3724
+ <div class='k-form-field'>
3725
+ <label class='k-form-label' (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
3726
+
3727
+ <div class='k-form-field-wrap'>
3728
+ <kendo-buttongroup [selection]="'multiple'">
3729
+ <button *ngFor='let day of weekDays' kendoButton
3730
+ [style.width.px]="75"
3731
+ [toggleable]="true"
3732
+ [selected]="isSelected(day)"
3733
+ (selectedChange)="onSelectedChange($event, day.value)"
3734
+ >{{ capitalize(day.text) }}</button>
3735
+ </kendo-buttongroup>
3736
+ </div>
3733
3737
  </div>
3734
3738
  `
3735
3739
  }]
@@ -4025,12 +4029,11 @@ class RecurrenceMonthlyYearlyEditorComponent {
4025
4029
  }
4026
4030
  RecurrenceMonthlyYearlyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
4027
4031
  RecurrenceMonthlyYearlyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: { userNumericOptions: "userNumericOptions" }, viewQueries: [{ propertyName: "repeatOnRadioButtons", predicate: RepeatOnRadioButtonDirective, descendants: true }], ngImport: i0, template: `
4028
- <div class='k-edit-label'>
4029
- <label (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
4030
- </div>
4031
- <div class='k-edit-field'>
4032
- <ul class='k-reset' [style.width.px]='650'>
4033
- <li>
4032
+ <div class='k-form-field'>
4033
+ <label class='k-form-label' (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
4034
+
4035
+ <ul class='k-form-field-wrap k-reset' [style.width.px]='650'>
4036
+ <li class='k-radio-item'>
4034
4037
  <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
4035
4038
 
4036
4039
  <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
@@ -4071,7 +4074,7 @@ RecurrenceMonthlyYearlyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVe
4071
4074
  [style.margin]="'0 .4ex 0 1ex'">
4072
4075
  </kendo-numerictextbox>
4073
4076
  </li>
4074
- <li>
4077
+ <li class='k-radio-item'>
4075
4078
  <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
4076
4079
  <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
4077
4080
 
@@ -4123,12 +4126,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4123
4126
  args: [{
4124
4127
  selector: 'kendo-recurrence-monthly-yearly-editor',
4125
4128
  template: `
4126
- <div class='k-edit-label'>
4127
- <label (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
4128
- </div>
4129
- <div class='k-edit-field'>
4130
- <ul class='k-reset' [style.width.px]='650'>
4131
- <li>
4129
+ <div class='k-form-field'>
4130
+ <label class='k-form-label' (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
4131
+
4132
+ <ul class='k-form-field-wrap k-reset' [style.width.px]='650'>
4133
+ <li class='k-radio-item'>
4132
4134
  <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
4133
4135
 
4134
4136
  <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
@@ -4169,7 +4171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4169
4171
  [style.margin]="'0 .4ex 0 1ex'">
4170
4172
  </kendo-numerictextbox>
4171
4173
  </li>
4172
- <li>
4174
+ <li class='k-radio-item'>
4173
4175
  <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
4174
4176
  <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
4175
4177
 
@@ -4393,16 +4395,15 @@ class RecurrenceEndRuleEditorComponent {
4393
4395
  }
4394
4396
  RecurrenceEndRuleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEndRuleEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
4395
4397
  RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: { userNumericOptions: "userNumericOptions", userDatePickerOptions: "userDatePickerOptions" }, viewQueries: [{ propertyName: "endRuleRadioButtons", predicate: EndRuleRadioButtonDirective, descendants: true }], ngImport: i0, template: `
4396
- <div class='k-edit-label'>
4397
- <label (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
4398
- </div>
4399
- <div class='k-edit-field'>
4400
- <ul class='k-reset'>
4401
- <li>
4398
+ <div class='k-form-field'>
4399
+ <label class='k-form-label' (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
4400
+
4401
+ <ul class='k-form-field-wrap k-reset'>
4402
+ <li class='k-radio-item'>
4402
4403
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
4403
4404
  <label class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
4404
4405
  </li>
4405
- <li>
4406
+ <li class='k-radio-item'>
4406
4407
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
4407
4408
  <label class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
4408
4409
 
@@ -4425,7 +4426,7 @@ RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
4425
4426
  </kendo-numerictextbox>
4426
4427
  <span>{{ textFor('endOccurrence') }}</span>
4427
4428
  </li>
4428
- <li>
4429
+ <li class='k-radio-item'>
4429
4430
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
4430
4431
  <label class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
4431
4432
 
@@ -4462,16 +4463,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4462
4463
  args: [{
4463
4464
  selector: 'kendo-recurrence-end-rule-editor',
4464
4465
  template: `
4465
- <div class='k-edit-label'>
4466
- <label (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
4467
- </div>
4468
- <div class='k-edit-field'>
4469
- <ul class='k-reset'>
4470
- <li>
4466
+ <div class='k-form-field'>
4467
+ <label class='k-form-label' (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
4468
+
4469
+ <ul class='k-form-field-wrap k-reset'>
4470
+ <li class='k-radio-item'>
4471
4471
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
4472
4472
  <label class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
4473
4473
  </li>
4474
- <li>
4474
+ <li class='k-radio-item'>
4475
4475
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
4476
4476
  <label class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
4477
4477
 
@@ -4494,7 +4494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4494
4494
  </kendo-numerictextbox>
4495
4495
  <span>{{ textFor('endOccurrence') }}</span>
4496
4496
  </li>
4497
- <li>
4497
+ <li class='k-radio-item'>
4498
4498
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
4499
4499
  <label class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
4500
4500
 
@@ -4844,26 +4844,24 @@ RecurrenceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
4844
4844
  <kendo-recurrence-frequency-editor>
4845
4845
  </kendo-recurrence-frequency-editor>
4846
4846
 
4847
- <div class='k-recur-view'>
4848
- <kendo-recurrence-interval-editor
4849
- *ngIf="currentFreq !== 'never'"
4850
- [userNumericOptions]="repeatEveryOptions">
4851
- </kendo-recurrence-interval-editor>
4852
-
4853
- <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
4854
- </kendo-recurrence-weekday-rule-editor>
4855
-
4856
- <kendo-recurrence-monthly-yearly-editor
4857
- *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
4858
- [userNumericOptions]="repeatOnOptions">
4859
- </kendo-recurrence-monthly-yearly-editor>
4860
-
4861
- <kendo-recurrence-end-rule-editor
4862
- *ngIf="currentFreq !== 'never'"
4863
- [userNumericOptions]="endAfterOptions"
4864
- [userDatePickerOptions]="endOnOptions">
4865
- </kendo-recurrence-end-rule-editor>
4866
- </div>
4847
+ <kendo-recurrence-interval-editor
4848
+ *ngIf="currentFreq !== 'never'"
4849
+ [userNumericOptions]="repeatEveryOptions">
4850
+ </kendo-recurrence-interval-editor>
4851
+
4852
+ <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
4853
+ </kendo-recurrence-weekday-rule-editor>
4854
+
4855
+ <kendo-recurrence-monthly-yearly-editor
4856
+ *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
4857
+ [userNumericOptions]="repeatOnOptions">
4858
+ </kendo-recurrence-monthly-yearly-editor>
4859
+
4860
+ <kendo-recurrence-end-rule-editor
4861
+ *ngIf="currentFreq !== 'never'"
4862
+ [userNumericOptions]="endAfterOptions"
4863
+ [userDatePickerOptions]="endOnOptions">
4864
+ </kendo-recurrence-end-rule-editor>
4867
4865
  `, isInline: true, components: [{ type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor" }, { type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor" }, { type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: ["userNumericOptions", "userDatePickerOptions"] }], directives: [{ type: RecurrenceEditorLocalizedMessagesDirective, selector: "[kendoRecurrenceEditorLocalizedMessages]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
4868
4866
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEditorComponent, decorators: [{
4869
4867
  type: Component,
@@ -4986,26 +4984,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4986
4984
  <kendo-recurrence-frequency-editor>
4987
4985
  </kendo-recurrence-frequency-editor>
4988
4986
 
4989
- <div class='k-recur-view'>
4990
- <kendo-recurrence-interval-editor
4991
- *ngIf="currentFreq !== 'never'"
4992
- [userNumericOptions]="repeatEveryOptions">
4993
- </kendo-recurrence-interval-editor>
4994
-
4995
- <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
4996
- </kendo-recurrence-weekday-rule-editor>
4997
-
4998
- <kendo-recurrence-monthly-yearly-editor
4999
- *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
5000
- [userNumericOptions]="repeatOnOptions">
5001
- </kendo-recurrence-monthly-yearly-editor>
5002
-
5003
- <kendo-recurrence-end-rule-editor
5004
- *ngIf="currentFreq !== 'never'"
5005
- [userNumericOptions]="endAfterOptions"
5006
- [userDatePickerOptions]="endOnOptions">
5007
- </kendo-recurrence-end-rule-editor>
5008
- </div>
4987
+ <kendo-recurrence-interval-editor
4988
+ *ngIf="currentFreq !== 'never'"
4989
+ [userNumericOptions]="repeatEveryOptions">
4990
+ </kendo-recurrence-interval-editor>
4991
+
4992
+ <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
4993
+ </kendo-recurrence-weekday-rule-editor>
4994
+
4995
+ <kendo-recurrence-monthly-yearly-editor
4996
+ *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
4997
+ [userNumericOptions]="repeatOnOptions">
4998
+ </kendo-recurrence-monthly-yearly-editor>
4999
+
5000
+ <kendo-recurrence-end-rule-editor
5001
+ *ngIf="currentFreq !== 'never'"
5002
+ [userNumericOptions]="endAfterOptions"
5003
+ [userDatePickerOptions]="endOnOptions">
5004
+ </kendo-recurrence-end-rule-editor>
5009
5005
  `
5010
5006
  }]
5011
5007
  }], ctorParameters: function () { return [{ type: RecurrenceService }, { type: i1$4.IntlService }]; }, propDecorators: { cssClass: [{
@@ -5063,7 +5059,7 @@ class EditDialogComponent {
5063
5059
  if (this.editTemplate) {
5064
5060
  return this.editTemplate.autoFocusedElement;
5065
5061
  }
5066
- return '.k-edit-field input';
5062
+ return '.k-form-field-wrap input';
5067
5063
  }
5068
5064
  get isEditingSeries() {
5069
5065
  return this.editMode === 2 /* Series */ && Boolean(this.formGroup.get(this.fields.recurrenceRule));
@@ -5232,113 +5228,120 @@ class EditDialogComponent {
5232
5228
  }
5233
5229
  EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, deps: [{ token: i0.NgZone }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
5234
5230
  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: `
5235
- <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
5231
+ <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
5236
5232
  <ng-container *ngIf='!editTemplate'>
5237
- <div class='k-scheduler-edit-form'>
5238
- <div class='k-edit-form-container'>
5239
- <form novalidate [formGroup]='formGroup'>
5240
- <div class='k-edit-label'>
5241
- <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
5242
- </div>
5243
- <div class='k-edit-field'>
5233
+ <div class='k-form k-form-horizontal'>
5234
+ <form novalidate [formGroup]='formGroup'>
5235
+ <!-- Title -->
5236
+ <div class='k-form-field'>
5237
+ <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
5238
+ <div class='k-form-field-wrap'>
5244
5239
  <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
5245
5240
  </div>
5241
+ </div>
5246
5242
 
5247
- <div class='k-edit-label'>
5248
- <label (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
5249
- </div>
5250
- <div class='k-edit-field'>
5243
+ <!-- Start -->
5244
+ <div class='k-form-field'>
5245
+ <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
5246
+ <div class='k-form-field-wrap'>
5251
5247
  <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
5252
5248
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
5253
5249
  </kendo-scheduler-datetime-picker>
5254
5250
  </div>
5251
+ </div>
5252
+
5253
+ <div class='k-form-field' *ngIf="hasStartTimeZone">
5254
+ <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
5255
+ <div class='k-form-field-wrap'>
5256
+ <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
5257
+ </div>
5258
+ </div>
5255
5259
 
5256
- <ng-container *ngIf="isStartTimeZoneVisible">
5257
- <div class='k-edit-label'>
5258
- <label (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
5259
- </div>
5260
+ <ng-container *ngIf="isStartTimeZoneVisible">
5261
+ <div class='k-form-field'>
5262
+ <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
5260
5263
 
5261
- <div class='k-edit-field'>
5262
- <kendo-timezone-editor #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
5264
+ <div class='k-form-field-wrap'>
5265
+ <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
5263
5266
  </div>
5264
- </ng-container>
5265
-
5266
- <div class='k-edit-label'>
5267
- <label (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
5268
5267
  </div>
5269
- <div class='k-edit-field'>
5268
+ </ng-container>
5269
+
5270
+ <!-- End -->
5271
+ <div class='k-form-field'>
5272
+ <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
5273
+ <div class='k-form-field-wrap'>
5270
5274
  <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
5271
5275
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
5272
5276
  </kendo-scheduler-datetime-picker>
5273
5277
  </div>
5278
+ </div>
5274
5279
 
5275
- <ng-container *ngIf="isEndTimeZoneVisible">
5276
- <div class='k-edit-label'>
5277
- <label (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
5278
- </div>
5280
+ <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
5281
+ <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
5282
+ <div class='k-form-field-wrap'>
5283
+ <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
5284
+ </div>
5285
+ </div>
5279
5286
 
5280
- <div class='k-edit-field'>
5281
- <kendo-timezone-editor #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
5282
- </div>
5283
- </ng-container>
5287
+ <ng-container *ngIf="isEndTimeZoneVisible">
5288
+ <div class='k-form-field'>
5289
+ <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
5284
5290
 
5285
- <div class='k-edit-field' *ngIf="hasAllDay">
5286
- <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
5287
- <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
5291
+ <div class='k-form-field-wrap'>
5292
+ <kendo-timezone-editor [width]="undefined" #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
5293
+ </div>
5288
5294
  </div>
5295
+ </ng-container>
5289
5296
 
5290
- <div class='k-edit-field' *ngIf="hasStartTimeZone">
5291
- <input type='checkbox' id='k-set-timezone' kendoCheckBox
5292
- formControlName='startTimezoneCheckbox' />
5293
- <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
5297
+ <!-- All day -->
5298
+ <div class='k-form-field'>
5299
+ <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
5294
5300
 
5295
- <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
5296
- <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
5297
- <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
5298
- </ng-container>
5301
+ <div class='k-form-field-wrap' *ngIf="hasAllDay">
5302
+ <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
5299
5303
  </div>
5304
+ </div>
5300
5305
 
5301
- <ng-container *ngIf="isEditingSeries">
5302
- <kendo-recurrence-editor
5303
- [formControl]='getControl(fields.recurrenceRule)'
5304
- [start]='recurrenceStart'
5305
- [timezone]='eventTimezone'
5306
- [weekStart]='weekStart'
5307
- ></kendo-recurrence-editor>
5308
- </ng-container>
5306
+ <!-- Series -->
5307
+ <kendo-recurrence-editor
5308
+ *ngIf="isEditingSeries"
5309
+ [formControl]='getControl(fields.recurrenceRule)'
5310
+ [start]='recurrenceStart'
5311
+ [timezone]='eventTimezone'
5312
+ [weekStart]='weekStart'
5313
+ ></kendo-recurrence-editor>
5314
+
5315
+ <!-- Description -->
5316
+ <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
5317
+ <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
5318
+
5319
+ <div class='k-form-field-wrap'>
5320
+ <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
5321
+ </div>
5322
+ </div>
5309
5323
 
5310
- <ng-container *ngIf='getFormValue(fields.description)'>
5311
- <div class='k-edit-label'>
5312
- <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
5313
- </div>
5314
- <div class='k-edit-field'>
5315
- <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
5324
+ <!-- Resources -->
5325
+ <ng-container *ngFor='let resource of resources'>
5326
+ <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
5327
+ <label class='k-form-label' (click)="onResourceClick(resource)">
5328
+ {{ resource.name ? resource.name : resource.field }}
5329
+ </label>
5330
+ <div class='k-form-field-wrap'>
5331
+ <kendo-multiple-resource-editor
5332
+ *ngIf='resource.multiple'
5333
+ [formControl]='getControl(resource.field)'
5334
+ [resource]='resource'>
5335
+ </kendo-multiple-resource-editor>
5336
+ <kendo-single-resource-editor
5337
+ *ngIf='!resource.multiple'
5338
+ [formControl]='getControl(resource.field)'
5339
+ [resource]='resource'>
5340
+ </kendo-single-resource-editor>
5316
5341
  </div>
5317
- </ng-container>
5318
-
5319
- <ng-container *ngFor='let resource of resources'>
5320
- <ng-container *ngIf='getFormValue(resource.field)'>
5321
- <div class='k-edit-label'>
5322
- <label (click)="onResourceClick(resource)">
5323
- {{ resource.name ? resource.name : resource.field }}
5324
- </label>
5325
- </div>
5326
- <div class='k-edit-field'>
5327
- <kendo-multiple-resource-editor
5328
- *ngIf='resource.multiple'
5329
- [formControl]='getControl(resource.field)'
5330
- [resource]='resource'>
5331
- </kendo-multiple-resource-editor>
5332
- <kendo-single-resource-editor
5333
- *ngIf='!resource.multiple'
5334
- [formControl]='getControl(resource.field)'
5335
- [resource]='resource'>
5336
- </kendo-single-resource-editor>
5337
- </div>
5338
- </ng-container>
5339
- </ng-container>
5340
- </form>
5341
- </div>
5342
+ </div>
5343
+ </ng-container>
5344
+ </form>
5342
5345
  </div>
5343
5346
  </ng-container>
5344
5347
 
@@ -5367,113 +5370,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
5367
5370
  args: [{
5368
5371
  selector: 'kendo-scheduler-edit-dialog',
5369
5372
  template: `
5370
- <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
5373
+ <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
5371
5374
  <ng-container *ngIf='!editTemplate'>
5372
- <div class='k-scheduler-edit-form'>
5373
- <div class='k-edit-form-container'>
5374
- <form novalidate [formGroup]='formGroup'>
5375
- <div class='k-edit-label'>
5376
- <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
5377
- </div>
5378
- <div class='k-edit-field'>
5375
+ <div class='k-form k-form-horizontal'>
5376
+ <form novalidate [formGroup]='formGroup'>
5377
+ <!-- Title -->
5378
+ <div class='k-form-field'>
5379
+ <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
5380
+ <div class='k-form-field-wrap'>
5379
5381
  <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
5380
5382
  </div>
5383
+ </div>
5381
5384
 
5382
- <div class='k-edit-label'>
5383
- <label (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
5384
- </div>
5385
- <div class='k-edit-field'>
5385
+ <!-- Start -->
5386
+ <div class='k-form-field'>
5387
+ <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
5388
+ <div class='k-form-field-wrap'>
5386
5389
  <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
5387
5390
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
5388
5391
  </kendo-scheduler-datetime-picker>
5389
5392
  </div>
5393
+ </div>
5390
5394
 
5391
- <ng-container *ngIf="isStartTimeZoneVisible">
5392
- <div class='k-edit-label'>
5393
- <label (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
5394
- </div>
5395
+ <div class='k-form-field' *ngIf="hasStartTimeZone">
5396
+ <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
5397
+ <div class='k-form-field-wrap'>
5398
+ <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
5399
+ </div>
5400
+ </div>
5395
5401
 
5396
- <div class='k-edit-field'>
5397
- <kendo-timezone-editor #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
5398
- </div>
5399
- </ng-container>
5402
+ <ng-container *ngIf="isStartTimeZoneVisible">
5403
+ <div class='k-form-field'>
5404
+ <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
5400
5405
 
5401
- <div class='k-edit-label'>
5402
- <label (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
5406
+ <div class='k-form-field-wrap'>
5407
+ <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
5408
+ </div>
5403
5409
  </div>
5404
- <div class='k-edit-field'>
5410
+ </ng-container>
5411
+
5412
+ <!-- End -->
5413
+ <div class='k-form-field'>
5414
+ <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
5415
+ <div class='k-form-field-wrap'>
5405
5416
  <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
5406
5417
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
5407
5418
  </kendo-scheduler-datetime-picker>
5408
5419
  </div>
5420
+ </div>
5409
5421
 
5410
- <ng-container *ngIf="isEndTimeZoneVisible">
5411
- <div class='k-edit-label'>
5412
- <label (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
5413
- </div>
5422
+ <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
5423
+ <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
5424
+ <div class='k-form-field-wrap'>
5425
+ <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
5426
+ </div>
5427
+ </div>
5414
5428
 
5415
- <div class='k-edit-field'>
5416
- <kendo-timezone-editor #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
5417
- </div>
5418
- </ng-container>
5429
+ <ng-container *ngIf="isEndTimeZoneVisible">
5430
+ <div class='k-form-field'>
5431
+ <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
5419
5432
 
5420
- <div class='k-edit-field' *ngIf="hasAllDay">
5421
- <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
5422
- <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
5433
+ <div class='k-form-field-wrap'>
5434
+ <kendo-timezone-editor [width]="undefined" #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
5435
+ </div>
5423
5436
  </div>
5437
+ </ng-container>
5424
5438
 
5425
- <div class='k-edit-field' *ngIf="hasStartTimeZone">
5426
- <input type='checkbox' id='k-set-timezone' kendoCheckBox
5427
- formControlName='startTimezoneCheckbox' />
5428
- <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
5439
+ <!-- All day -->
5440
+ <div class='k-form-field'>
5441
+ <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
5429
5442
 
5430
- <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
5431
- <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
5432
- <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
5433
- </ng-container>
5443
+ <div class='k-form-field-wrap' *ngIf="hasAllDay">
5444
+ <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
5434
5445
  </div>
5446
+ </div>
5435
5447
 
5436
- <ng-container *ngIf="isEditingSeries">
5437
- <kendo-recurrence-editor
5438
- [formControl]='getControl(fields.recurrenceRule)'
5439
- [start]='recurrenceStart'
5440
- [timezone]='eventTimezone'
5441
- [weekStart]='weekStart'
5442
- ></kendo-recurrence-editor>
5443
- </ng-container>
5448
+ <!-- Series -->
5449
+ <kendo-recurrence-editor
5450
+ *ngIf="isEditingSeries"
5451
+ [formControl]='getControl(fields.recurrenceRule)'
5452
+ [start]='recurrenceStart'
5453
+ [timezone]='eventTimezone'
5454
+ [weekStart]='weekStart'
5455
+ ></kendo-recurrence-editor>
5456
+
5457
+ <!-- Description -->
5458
+ <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
5459
+ <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
5460
+
5461
+ <div class='k-form-field-wrap'>
5462
+ <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
5463
+ </div>
5464
+ </div>
5444
5465
 
5445
- <ng-container *ngIf='getFormValue(fields.description)'>
5446
- <div class='k-edit-label'>
5447
- <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
5448
- </div>
5449
- <div class='k-edit-field'>
5450
- <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
5466
+ <!-- Resources -->
5467
+ <ng-container *ngFor='let resource of resources'>
5468
+ <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
5469
+ <label class='k-form-label' (click)="onResourceClick(resource)">
5470
+ {{ resource.name ? resource.name : resource.field }}
5471
+ </label>
5472
+ <div class='k-form-field-wrap'>
5473
+ <kendo-multiple-resource-editor
5474
+ *ngIf='resource.multiple'
5475
+ [formControl]='getControl(resource.field)'
5476
+ [resource]='resource'>
5477
+ </kendo-multiple-resource-editor>
5478
+ <kendo-single-resource-editor
5479
+ *ngIf='!resource.multiple'
5480
+ [formControl]='getControl(resource.field)'
5481
+ [resource]='resource'>
5482
+ </kendo-single-resource-editor>
5451
5483
  </div>
5452
- </ng-container>
5453
-
5454
- <ng-container *ngFor='let resource of resources'>
5455
- <ng-container *ngIf='getFormValue(resource.field)'>
5456
- <div class='k-edit-label'>
5457
- <label (click)="onResourceClick(resource)">
5458
- {{ resource.name ? resource.name : resource.field }}
5459
- </label>
5460
- </div>
5461
- <div class='k-edit-field'>
5462
- <kendo-multiple-resource-editor
5463
- *ngIf='resource.multiple'
5464
- [formControl]='getControl(resource.field)'
5465
- [resource]='resource'>
5466
- </kendo-multiple-resource-editor>
5467
- <kendo-single-resource-editor
5468
- *ngIf='!resource.multiple'
5469
- [formControl]='getControl(resource.field)'
5470
- [resource]='resource'>
5471
- </kendo-single-resource-editor>
5472
- </div>
5473
- </ng-container>
5474
- </ng-container>
5475
- </form>
5476
- </div>
5484
+ </div>
5485
+ </ng-container>
5486
+ </form>
5477
5487
  </div>
5478
5488
  </ng-container>
5479
5489
 
@@ -9465,6 +9475,12 @@ class BaseView {
9465
9475
  return index;
9466
9476
  }
9467
9477
  resourcesByIndex(index) {
9478
+ if (!this.resources) {
9479
+ return [];
9480
+ }
9481
+ if (!this.group) { // When we have resources, but are not grouped, return all resources.
9482
+ return this.resources.reduce((result, resource) => result.concat(resource.data || []), []);
9483
+ }
9468
9484
  if (!this.resourcesCache[index]) {
9469
9485
  const resources = this.taskResources;
9470
9486
  const result = [];
@@ -15803,11 +15819,14 @@ class SlotSelectableDirective {
15803
15819
  }
15804
15820
  ngOnChanges(changes) {
15805
15821
  if (isChanged("slotSelection", changes, false)) {
15806
- /**
15807
- * The default values for resources below are necessarry because this is not fixed yet: https://github.com/telerik/kendo-angular-scheduler/pull/338
15808
- */
15809
- const resources = this.scheduler.resources ? [this.scheduler.resources[0].data[0]] : [undefined];
15810
- this.selectedRange = Object.assign({}, { isAllDay: false, resources }, changes.slotSelection.currentValue);
15822
+ const defaults = {
15823
+ isAllDay: false,
15824
+ resources: this.scheduler.resources.reduce((result, resource) => {
15825
+ result.push(...resource.data);
15826
+ return result;
15827
+ }, [])
15828
+ };
15829
+ this.selectedRange = Object.assign(defaults, changes.slotSelection.currentValue);
15811
15830
  this.cdr.markForCheck();
15812
15831
  }
15813
15832
  }