@progress/kendo-angular-scheduler 13.0.0-develop.6 → 13.0.0-develop.8

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.
@@ -225,24 +225,26 @@ RecurrenceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
225
225
  <kendo-recurrence-frequency-editor>
226
226
  </kendo-recurrence-frequency-editor>
227
227
 
228
- <kendo-recurrence-interval-editor
229
- *ngIf="currentFreq !== 'never'"
230
- [userNumericOptions]="repeatEveryOptions">
231
- </kendo-recurrence-interval-editor>
232
-
233
- <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
234
- </kendo-recurrence-weekday-rule-editor>
235
-
236
- <kendo-recurrence-monthly-yearly-editor
237
- *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
238
- [userNumericOptions]="repeatOnOptions">
239
- </kendo-recurrence-monthly-yearly-editor>
240
-
241
- <kendo-recurrence-end-rule-editor
242
- *ngIf="currentFreq !== 'never'"
243
- [userNumericOptions]="endAfterOptions"
244
- [userDatePickerOptions]="endOnOptions">
245
- </kendo-recurrence-end-rule-editor>
228
+ <div class="k-recur-view">
229
+ <kendo-recurrence-interval-editor
230
+ *ngIf="currentFreq !== 'never'"
231
+ [userNumericOptions]="repeatEveryOptions">
232
+ </kendo-recurrence-interval-editor>
233
+
234
+ <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
235
+ </kendo-recurrence-weekday-rule-editor>
236
+
237
+ <kendo-recurrence-monthly-yearly-editor
238
+ *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
239
+ [userNumericOptions]="repeatOnOptions">
240
+ </kendo-recurrence-monthly-yearly-editor>
241
+
242
+ <kendo-recurrence-end-rule-editor
243
+ *ngIf="currentFreq !== 'never'"
244
+ [userNumericOptions]="endAfterOptions"
245
+ [userDatePickerOptions]="endOnOptions">
246
+ </kendo-recurrence-end-rule-editor>
247
+ </div>
246
248
  `, isInline: true, components: [{ type: i3.RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor" }, { type: i4.RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: ["userNumericOptions"] }, { type: i5.RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor" }, { type: i6.RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: ["userNumericOptions"] }, { type: i7.RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: ["userNumericOptions", "userDatePickerOptions"] }], directives: [{ type: i8.RecurrenceEditorLocalizedMessagesDirective, selector: "[kendoRecurrenceEditorLocalizedMessages]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
247
249
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceEditorComponent, decorators: [{
248
250
  type: Component,
@@ -365,24 +367,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
365
367
  <kendo-recurrence-frequency-editor>
366
368
  </kendo-recurrence-frequency-editor>
367
369
 
368
- <kendo-recurrence-interval-editor
369
- *ngIf="currentFreq !== 'never'"
370
- [userNumericOptions]="repeatEveryOptions">
371
- </kendo-recurrence-interval-editor>
372
-
373
- <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
374
- </kendo-recurrence-weekday-rule-editor>
375
-
376
- <kendo-recurrence-monthly-yearly-editor
377
- *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
378
- [userNumericOptions]="repeatOnOptions">
379
- </kendo-recurrence-monthly-yearly-editor>
380
-
381
- <kendo-recurrence-end-rule-editor
382
- *ngIf="currentFreq !== 'never'"
383
- [userNumericOptions]="endAfterOptions"
384
- [userDatePickerOptions]="endOnOptions">
385
- </kendo-recurrence-end-rule-editor>
370
+ <div class="k-recur-view">
371
+ <kendo-recurrence-interval-editor
372
+ *ngIf="currentFreq !== 'never'"
373
+ [userNumericOptions]="repeatEveryOptions">
374
+ </kendo-recurrence-interval-editor>
375
+
376
+ <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
377
+ </kendo-recurrence-weekday-rule-editor>
378
+
379
+ <kendo-recurrence-monthly-yearly-editor
380
+ *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
381
+ [userNumericOptions]="repeatOnOptions">
382
+ </kendo-recurrence-monthly-yearly-editor>
383
+
384
+ <kendo-recurrence-end-rule-editor
385
+ *ngIf="currentFreq !== 'never'"
386
+ [userNumericOptions]="endAfterOptions"
387
+ [userDatePickerOptions]="endOnOptions">
388
+ </kendo-recurrence-end-rule-editor>
389
+ </div>
386
390
  `
387
391
  }]
388
392
  }], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.IntlService }]; }, propDecorators: { cssClass: [{
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, ViewChildren, QueryList, Input } from '@angular/core';
5
+ import { Component, ViewChildren, QueryList, Input, HostBinding } from '@angular/core';
6
6
  import { RecurrenceService } from './recurrence.service';
7
7
  import { isPresent } from '../../common/util';
8
8
  import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -12,8 +12,8 @@ import { toUTCDate } from '../../views/utils';
12
12
  import * as i0 from "@angular/core";
13
13
  import * as i1 from "./recurrence.service";
14
14
  import * as i2 from "@progress/kendo-angular-l10n";
15
- import * as i3 from "@progress/kendo-angular-inputs";
16
- import * as i4 from "@progress/kendo-angular-label";
15
+ import * as i3 from "@progress/kendo-angular-label";
16
+ import * as i4 from "@progress/kendo-angular-inputs";
17
17
  import * as i5 from "@progress/kendo-angular-dateinputs";
18
18
  import * as i6 from "./end-rule-radio-button.directive";
19
19
  /**
@@ -23,6 +23,7 @@ export class RecurrenceEndRuleEditorComponent {
23
23
  constructor(recurrence, localization) {
24
24
  this.recurrence = recurrence;
25
25
  this.localization = localization;
26
+ this.cssClass = true;
26
27
  this.numericOptions = {
27
28
  min: 1,
28
29
  format: '#',
@@ -122,142 +123,167 @@ export class RecurrenceEndRuleEditorComponent {
122
123
  }
123
124
  }
124
125
  RecurrenceEndRuleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceEndRuleEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
125
- RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: { userNumericOptions: "userNumericOptions", userDatePickerOptions: "userDatePickerOptions" }, viewQueries: [{ propertyName: "endRuleRadioButtons", predicate: EndRuleRadioButtonDirective, descendants: true }], ngImport: i0, template: `
126
- <div class='k-form-field'>
127
- <label class='k-form-label' (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
128
-
129
- <ul class='k-form-field-wrap k-reset'>
130
- <li class='k-radio-item'>
131
- <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
132
- <label class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
133
- </li>
134
- <li class='k-radio-item'>
135
- <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
136
- <label class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
137
-
138
- <kendo-numerictextbox
139
- #afterOccurances
140
- [style.width.px]='70'
141
- [autoCorrect]='numericOptions.autoCorrect'
142
- [decimals]='0'
143
- [disabled]='isCountDisabled'
144
- [format]="numericOptions.format"
145
- [min]='numericOptions.min'
146
- [max]="numericOptions.max"
147
- [readonly]="numericOptions.readonly"
148
- [selectOnFocus]="numericOptions.selectOnFocus"
149
- [spinners]="numericOptions.spinners"
150
- [step]="numericOptions.step"
151
- [title]="numericOptions.title"
152
- [(value)]='countValue'
153
- (blur)="onCountBlur()"
154
- (valueChange)='onCountChange($event)'>
155
- </kendo-numerictextbox>
156
- <kendo-label [for]="afterOccurances" [text]="textFor('endOccurrence')"></kendo-label>
157
- </li>
158
- <li class='k-radio-item'>
159
- <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
160
- <label class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
161
-
162
- <kendo-datepicker
163
- [style.width.px]='150'
164
- [disabled]='isUntilDisabled'
165
- [activeView]="datePickerOptions.activeView"
166
- [bottomView]="datePickerOptions.bottomView"
167
- [disabledDatesValidation]="datePickerOptions.disabledDatesValidation"
168
- [focusedDate]="datePickerOptions.focusedDate"
169
- [format]="datePickerOptions.format"
170
- [formatPlaceholder]="datePickerOptions.formatPlaceHolder"
171
- [max]="datePickerOptions.max"
172
- [min]="datePickerOptions.min"
173
- [navigation]="datePickerOptions.navigation"
174
- [placeholder]="datePickerOptions.placeholder"
175
- [readOnlyInput]="datePickerOptions.readOnlyInput"
176
- [readonly]="datePickerOptions.readonly"
177
- [title]="datePickerOptions.title"
178
- [topView]="datePickerOptions.topView"
179
- [weekNumber]="datePickerOptions.weekNumber"
180
- [disabledDates]="datePickerOptions.disabledDates"
181
- [popupSettings]="datePickerOptions.popupSettings"
182
- [(value)]='untilValue'
183
- (blur)="onUntilBlur()"
184
- (valueChange)='onUntilChange($event)'>
185
- </kendo-datepicker>
186
- </li>
187
- </ul>
126
+ RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: { userNumericOptions: "userNumericOptions", userDatePickerOptions: "userDatePickerOptions" }, host: { properties: { "class.k-scheduler-recurrence-end-rule-editor": "this.cssClass" } }, viewQueries: [{ propertyName: "endRuleRadioButtons", predicate: EndRuleRadioButtonDirective, descendants: true }], ngImport: i0, template: `
127
+ <div class="k-form-field">
128
+ <kendo-label
129
+ [text]="textFor('endLabel')"
130
+ (click)="onEndLabelClick()"
131
+ labelCssClass="k-form-label"
132
+ ></kendo-label>
133
+ <div class="k-form-field-wrap">
134
+ <ul class='k-radio-list'>
135
+ <li class='k-radio-list-item'>
136
+ <span class="k-radio-wrap">
137
+ <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
138
+ </span>
139
+ <label [labelClass]="false" class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
140
+ </li>
141
+ <li class='k-radio-list-item'>
142
+ <span class="k-radio-wrap">
143
+ <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
144
+ </span>
145
+ <label [labelClass]="false" class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
146
+ <kendo-numerictextbox
147
+ #afterOccurances
148
+ class="k-recur-count"
149
+ [style.width.px]='70'
150
+ [autoCorrect]='numericOptions.autoCorrect'
151
+ [decimals]='0'
152
+ [disabled]='isCountDisabled'
153
+ [format]="numericOptions.format"
154
+ [min]='numericOptions.min'
155
+ [max]="numericOptions.max"
156
+ [readonly]="numericOptions.readonly"
157
+ [selectOnFocus]="numericOptions.selectOnFocus"
158
+ [spinners]="numericOptions.spinners"
159
+ [step]="numericOptions.step"
160
+ [title]="numericOptions.title"
161
+ [(value)]='countValue'
162
+ (blur)="onCountBlur()"
163
+ (valueChange)='onCountChange($event)'>
164
+ </kendo-numerictextbox>
165
+ <span>{{ textFor('endOccurrence') }}</span>
166
+ </li>
167
+ <li class='k-radio-list-item'>
168
+ <span class="k-radio-wrap">
169
+ <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
170
+ </span>
171
+ <label [labelClass]="false" class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
172
+ <kendo-datepicker
173
+ class="k-recur-until"
174
+ [style.width.px]='150'
175
+ [disabled]='isUntilDisabled'
176
+ [activeView]="datePickerOptions.activeView"
177
+ [bottomView]="datePickerOptions.bottomView"
178
+ [disabledDatesValidation]="datePickerOptions.disabledDatesValidation"
179
+ [focusedDate]="datePickerOptions.focusedDate"
180
+ [format]="datePickerOptions.format"
181
+ [formatPlaceholder]="datePickerOptions.formatPlaceHolder"
182
+ [max]="datePickerOptions.max"
183
+ [min]="datePickerOptions.min"
184
+ [navigation]="datePickerOptions.navigation"
185
+ [placeholder]="datePickerOptions.placeholder"
186
+ [readOnlyInput]="datePickerOptions.readOnlyInput"
187
+ [readonly]="datePickerOptions.readonly"
188
+ [title]="datePickerOptions.title"
189
+ [topView]="datePickerOptions.topView"
190
+ [weekNumber]="datePickerOptions.weekNumber"
191
+ [disabledDates]="datePickerOptions.disabledDates"
192
+ [popupSettings]="datePickerOptions.popupSettings"
193
+ [(value)]='untilValue'
194
+ (blur)="onUntilBlur()"
195
+ (valueChange)='onUntilChange($event)'>
196
+ </kendo-datepicker>
197
+ </li>
198
+ </ul>
199
+ </div>
188
200
  </div>
189
- `, isInline: true, components: [{ type: i3.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"] }, { type: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }, { type: i4.LabelDirective, selector: "label[for]", inputs: ["for"] }] });
201
+ `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i4.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"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }, { type: i3.LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }] });
190
202
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceEndRuleEditorComponent, decorators: [{
191
203
  type: Component,
192
204
  args: [{
193
205
  selector: 'kendo-recurrence-end-rule-editor',
194
206
  template: `
195
- <div class='k-form-field'>
196
- <label class='k-form-label' (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
197
-
198
- <ul class='k-form-field-wrap k-reset'>
199
- <li class='k-radio-item'>
200
- <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
201
- <label class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
202
- </li>
203
- <li class='k-radio-item'>
204
- <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
205
- <label class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
206
-
207
- <kendo-numerictextbox
208
- #afterOccurances
209
- [style.width.px]='70'
210
- [autoCorrect]='numericOptions.autoCorrect'
211
- [decimals]='0'
212
- [disabled]='isCountDisabled'
213
- [format]="numericOptions.format"
214
- [min]='numericOptions.min'
215
- [max]="numericOptions.max"
216
- [readonly]="numericOptions.readonly"
217
- [selectOnFocus]="numericOptions.selectOnFocus"
218
- [spinners]="numericOptions.spinners"
219
- [step]="numericOptions.step"
220
- [title]="numericOptions.title"
221
- [(value)]='countValue'
222
- (blur)="onCountBlur()"
223
- (valueChange)='onCountChange($event)'>
224
- </kendo-numerictextbox>
225
- <kendo-label [for]="afterOccurances" [text]="textFor('endOccurrence')"></kendo-label>
226
- </li>
227
- <li class='k-radio-item'>
228
- <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
229
- <label class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
230
-
231
- <kendo-datepicker
232
- [style.width.px]='150'
233
- [disabled]='isUntilDisabled'
234
- [activeView]="datePickerOptions.activeView"
235
- [bottomView]="datePickerOptions.bottomView"
236
- [disabledDatesValidation]="datePickerOptions.disabledDatesValidation"
237
- [focusedDate]="datePickerOptions.focusedDate"
238
- [format]="datePickerOptions.format"
239
- [formatPlaceholder]="datePickerOptions.formatPlaceHolder"
240
- [max]="datePickerOptions.max"
241
- [min]="datePickerOptions.min"
242
- [navigation]="datePickerOptions.navigation"
243
- [placeholder]="datePickerOptions.placeholder"
244
- [readOnlyInput]="datePickerOptions.readOnlyInput"
245
- [readonly]="datePickerOptions.readonly"
246
- [title]="datePickerOptions.title"
247
- [topView]="datePickerOptions.topView"
248
- [weekNumber]="datePickerOptions.weekNumber"
249
- [disabledDates]="datePickerOptions.disabledDates"
250
- [popupSettings]="datePickerOptions.popupSettings"
251
- [(value)]='untilValue'
252
- (blur)="onUntilBlur()"
253
- (valueChange)='onUntilChange($event)'>
254
- </kendo-datepicker>
255
- </li>
256
- </ul>
207
+ <div class="k-form-field">
208
+ <kendo-label
209
+ [text]="textFor('endLabel')"
210
+ (click)="onEndLabelClick()"
211
+ labelCssClass="k-form-label"
212
+ ></kendo-label>
213
+ <div class="k-form-field-wrap">
214
+ <ul class='k-radio-list'>
215
+ <li class='k-radio-list-item'>
216
+ <span class="k-radio-wrap">
217
+ <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
218
+ </span>
219
+ <label [labelClass]="false" class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
220
+ </li>
221
+ <li class='k-radio-list-item'>
222
+ <span class="k-radio-wrap">
223
+ <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
224
+ </span>
225
+ <label [labelClass]="false" class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
226
+ <kendo-numerictextbox
227
+ #afterOccurances
228
+ class="k-recur-count"
229
+ [style.width.px]='70'
230
+ [autoCorrect]='numericOptions.autoCorrect'
231
+ [decimals]='0'
232
+ [disabled]='isCountDisabled'
233
+ [format]="numericOptions.format"
234
+ [min]='numericOptions.min'
235
+ [max]="numericOptions.max"
236
+ [readonly]="numericOptions.readonly"
237
+ [selectOnFocus]="numericOptions.selectOnFocus"
238
+ [spinners]="numericOptions.spinners"
239
+ [step]="numericOptions.step"
240
+ [title]="numericOptions.title"
241
+ [(value)]='countValue'
242
+ (blur)="onCountBlur()"
243
+ (valueChange)='onCountChange($event)'>
244
+ </kendo-numerictextbox>
245
+ <span>{{ textFor('endOccurrence') }}</span>
246
+ </li>
247
+ <li class='k-radio-list-item'>
248
+ <span class="k-radio-wrap">
249
+ <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
250
+ </span>
251
+ <label [labelClass]="false" class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
252
+ <kendo-datepicker
253
+ class="k-recur-until"
254
+ [style.width.px]='150'
255
+ [disabled]='isUntilDisabled'
256
+ [activeView]="datePickerOptions.activeView"
257
+ [bottomView]="datePickerOptions.bottomView"
258
+ [disabledDatesValidation]="datePickerOptions.disabledDatesValidation"
259
+ [focusedDate]="datePickerOptions.focusedDate"
260
+ [format]="datePickerOptions.format"
261
+ [formatPlaceholder]="datePickerOptions.formatPlaceHolder"
262
+ [max]="datePickerOptions.max"
263
+ [min]="datePickerOptions.min"
264
+ [navigation]="datePickerOptions.navigation"
265
+ [placeholder]="datePickerOptions.placeholder"
266
+ [readOnlyInput]="datePickerOptions.readOnlyInput"
267
+ [readonly]="datePickerOptions.readonly"
268
+ [title]="datePickerOptions.title"
269
+ [topView]="datePickerOptions.topView"
270
+ [weekNumber]="datePickerOptions.weekNumber"
271
+ [disabledDates]="datePickerOptions.disabledDates"
272
+ [popupSettings]="datePickerOptions.popupSettings"
273
+ [(value)]='untilValue'
274
+ (blur)="onUntilBlur()"
275
+ (valueChange)='onUntilChange($event)'>
276
+ </kendo-datepicker>
277
+ </li>
278
+ </ul>
279
+ </div>
257
280
  </div>
258
281
  `
259
282
  }]
260
- }], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }]; }, propDecorators: { userNumericOptions: [{
283
+ }], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }]; }, propDecorators: { cssClass: [{
284
+ type: HostBinding,
285
+ args: ['class.k-scheduler-recurrence-end-rule-editor']
286
+ }], userNumericOptions: [{
261
287
  type: Input
262
288
  }], userDatePickerOptions: [{
263
289
  type: Input
@@ -9,8 +9,9 @@ import { Button } from '@progress/kendo-angular-buttons';
9
9
  import * as i0 from "@angular/core";
10
10
  import * as i1 from "./recurrence.service";
11
11
  import * as i2 from "@progress/kendo-angular-l10n";
12
- import * as i3 from "@progress/kendo-angular-buttons";
13
- import * as i4 from "@angular/common";
12
+ import * as i3 from "@progress/kendo-angular-label";
13
+ import * as i4 from "@progress/kendo-angular-buttons";
14
+ import * as i5 from "@angular/common";
14
15
  /**
15
16
  * @hidden
16
17
  */
@@ -43,12 +44,18 @@ export class RecurrenceFrequencyEditorComponent {
43
44
  RecurrenceFrequencyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceFrequencyEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
44
45
  RecurrenceFrequencyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
45
46
  <div class='k-form-field'>
46
- <label class="k-form-label" (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
47
-
48
- <div class='k-form-field-wrap'>
49
- <kendo-buttongroup [selection]="'single'">
47
+ <kendo-label
48
+ [text]="textFor('repeat')"
49
+ (click)="onFrequencyClick()"
50
+ labelCssClass="k-form-label"
51
+ ></kendo-label>
52
+ <div class="k-form-field-wrap">
53
+ <kendo-buttongroup
54
+ class="k-scheduler-recurrence-repeat k-button-group-solid"
55
+ width="100%"
56
+ selection="single"
57
+ >
50
58
  <button *ngFor='let freq of frequencies' kendoButton
51
- [style.width.px]="100"
52
59
  [togglable]="true"
53
60
  [selected]="freq.value === selected"
54
61
  (click)="onClick(freq)"
@@ -56,19 +63,25 @@ RecurrenceFrequencyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
56
63
  </kendo-buttongroup>
57
64
  </div>
58
65
  </div>
59
- `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
66
+ `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i4.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
60
67
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceFrequencyEditorComponent, decorators: [{
61
68
  type: Component,
62
69
  args: [{
63
70
  selector: 'kendo-recurrence-frequency-editor',
64
71
  template: `
65
72
  <div class='k-form-field'>
66
- <label class="k-form-label" (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
67
-
68
- <div class='k-form-field-wrap'>
69
- <kendo-buttongroup [selection]="'single'">
73
+ <kendo-label
74
+ [text]="textFor('repeat')"
75
+ (click)="onFrequencyClick()"
76
+ labelCssClass="k-form-label"
77
+ ></kendo-label>
78
+ <div class="k-form-field-wrap">
79
+ <kendo-buttongroup
80
+ class="k-scheduler-recurrence-repeat k-button-group-solid"
81
+ width="100%"
82
+ selection="single"
83
+ >
70
84
  <button *ngFor='let freq of frequencies' kendoButton
71
- [style.width.px]="100"
72
85
  [togglable]="true"
73
86
  [selected]="freq.value === selected"
74
87
  (click)="onClick(freq)"
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, Input } from '@angular/core';
5
+ import { Component, HostBinding, Input } from '@angular/core';
6
6
  import { RecurrenceService } from './recurrence.service';
7
7
  import { LocalizationService } from '@progress/kendo-angular-l10n';
8
8
  import { isPresent } from '../../common/util';
@@ -18,6 +18,7 @@ export class RecurrenceIntervalEditorComponent {
18
18
  constructor(recurrence, localization) {
19
19
  this.recurrence = recurrence;
20
20
  this.localization = localization;
21
+ this.cssClass = true;
21
22
  this.numericOptions = {
22
23
  min: 1,
23
24
  format: '#',
@@ -78,13 +79,18 @@ export class RecurrenceIntervalEditorComponent {
78
79
  }
79
80
  }
80
81
  RecurrenceIntervalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceIntervalEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
81
- RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: { userNumericOptions: "userNumericOptions" }, ngImport: i0, template: `
82
- <div class='k-form-field'>
83
- <kendo-label class="k-form-label" [for]="intervalNumeric" (click)="intervalNumeric.focus()" [text]="textForRepeatEvery()"></kendo-label>
82
+ RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: { userNumericOptions: "userNumericOptions" }, host: { properties: { "class.k-scheduler-recurrence-interval-editor": "this.cssClass" } }, ngImport: i0, template: `
83
+ <div class="k-form-field">
84
+ <kendo-label
85
+ [for]="intervalNumeric"
86
+ [text]="textForRepeatEvery()"
87
+ labelCssClass="k-form-label"
88
+ (click)="intervalNumeric.focus()"
89
+ ></kendo-label>
84
90
  <div class="k-form-field-wrap">
85
91
  <kendo-numerictextbox
86
92
  #intervalNumeric
87
- [style.width.px]="70"
93
+ class="k-recur-interval"
88
94
  [min]="numericOptions.min"
89
95
  [max]="numericOptions.max"
90
96
  [decimals]="0"
@@ -99,22 +105,26 @@ RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
99
105
  (blur)="onIntervalBlur()"
100
106
  (valueChange)="onIntervalChange($event)">
101
107
  </kendo-numerictextbox>
102
-
103
- <span>{{ textForFrequency() }}</span>
108
+ <span>&nbsp;{{ textForFrequency() }}</span>
104
109
  </div>
105
110
  </div>
106
- `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.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"] }] });
111
+ `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i4.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"] }] });
107
112
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceIntervalEditorComponent, decorators: [{
108
113
  type: Component,
109
114
  args: [{
110
115
  selector: 'kendo-recurrence-interval-editor',
111
116
  template: `
112
- <div class='k-form-field'>
113
- <kendo-label class="k-form-label" [for]="intervalNumeric" (click)="intervalNumeric.focus()" [text]="textForRepeatEvery()"></kendo-label>
117
+ <div class="k-form-field">
118
+ <kendo-label
119
+ [for]="intervalNumeric"
120
+ [text]="textForRepeatEvery()"
121
+ labelCssClass="k-form-label"
122
+ (click)="intervalNumeric.focus()"
123
+ ></kendo-label>
114
124
  <div class="k-form-field-wrap">
115
125
  <kendo-numerictextbox
116
126
  #intervalNumeric
117
- [style.width.px]="70"
127
+ class="k-recur-interval"
118
128
  [min]="numericOptions.min"
119
129
  [max]="numericOptions.max"
120
130
  [decimals]="0"
@@ -129,12 +139,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
129
139
  (blur)="onIntervalBlur()"
130
140
  (valueChange)="onIntervalChange($event)">
131
141
  </kendo-numerictextbox>
132
-
133
- <span>{{ textForFrequency() }}</span>
142
+ <span>&nbsp;{{ textForFrequency() }}</span>
134
143
  </div>
135
144
  </div>
136
145
  `
137
146
  }]
138
- }], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }]; }, propDecorators: { userNumericOptions: [{
147
+ }], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }]; }, propDecorators: { cssClass: [{
148
+ type: HostBinding,
149
+ args: ['class.k-scheduler-recurrence-interval-editor']
150
+ }], userNumericOptions: [{
139
151
  type: Input
140
152
  }] } });