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

package/esm2022/editing/recurrence/recurrence-frequency-editor.component.mjs

@@ -6,7 +6,6 @@ import { Component, ViewChildren, QueryList } from '@angular/core';
 import { RecurrenceService } from './recurrence.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Button, ButtonComponent, ButtonGroupComponent } from '@progress/kendo-angular-buttons';
-import { NgFor } from '@angular/common';
 import { LabelComponent } from '@progress/kendo-angular-label';
 import * as i0 from "@angular/core";
 import * as i1 from "./recurrence.service";
@@ -44,28 +43,30 @@ export class RecurrenceFrequencyEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RecurrenceFrequencyEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RecurrenceFrequencyEditorComponent, isStandalone: true, selector: "kendo-recurrence-frequency-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RecurrenceFrequencyEditorComponent, isStandalone: true, selector: "kendo-recurrence-frequency-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
         <div class='k-form-field'>
-            <kendo-label
-                [text]="textFor('repeat')"
-                (click)="onFrequencyClick()"
-                labelCssClass="k-form-label"
-            ></kendo-label>
-            <div class="k-form-field-wrap">
-                <kendo-buttongroup
-                    class="k-scheduler-recurrence-repeat k-button-group-solid"
-                    width="100%"
-                    selection="single"
-                >
-                    <button *ngFor='let freq of frequencies' kendoButton
-                            [togglable]="true"
-                            [selected]="freq.value === selected"
-                            (click)="onClick(freq)"
-                    >{{ freq.text }}</button>
-                </kendo-buttongroup>
-            </div>
+          <kendo-label
+            [text]="textFor('repeat')"
+            (click)="onFrequencyClick()"
+            labelCssClass="k-form-label"
+          ></kendo-label>
+          <div class="k-form-field-wrap">
+            <kendo-buttongroup
+              class="k-scheduler-recurrence-repeat k-button-group-solid"
+              width="100%"
+              selection="single"
+              >
+              @for (freq of frequencies; track freq) {
+                <button kendoButton
+                  [toggleable]="true"
+                  [selected]="freq.value === selected"
+                  (click)="onClick(freq)"
+                >{{ freq.text }}</button>
+              }
+            </kendo-buttongroup>
+          </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { 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: RecurrenceFrequencyEditorComponent, decorators: [{
             type: Component,
@@ -73,28 +74,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-recurrence-frequency-editor',
                     template: `
         <div class='k-form-field'>
-            <kendo-label
-                [text]="textFor('repeat')"
-                (click)="onFrequencyClick()"
-                labelCssClass="k-form-label"
-            ></kendo-label>
-            <div class="k-form-field-wrap">
-                <kendo-buttongroup
-                    class="k-scheduler-recurrence-repeat k-button-group-solid"
-                    width="100%"
-                    selection="single"
-                >
-                    <button *ngFor='let freq of frequencies' kendoButton
-                            [togglable]="true"
-                            [selected]="freq.value === selected"
-                            (click)="onClick(freq)"
-                    >{{ freq.text }}</button>
-                </kendo-buttongroup>
-            </div>
+          <kendo-label
+            [text]="textFor('repeat')"
+            (click)="onFrequencyClick()"
+            labelCssClass="k-form-label"
+          ></kendo-label>
+          <div class="k-form-field-wrap">
+            <kendo-buttongroup
+              class="k-scheduler-recurrence-repeat k-button-group-solid"
+              width="100%"
+              selection="single"
+              >
+              @for (freq of frequencies; track freq) {
+                <button kendoButton
+                  [toggleable]="true"
+                  [selected]="freq.value === selected"
+                  (click)="onClick(freq)"
+                >{{ freq.text }}</button>
+              }
+            </kendo-buttongroup>
+          </div>
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [LabelComponent, ButtonGroupComponent, NgFor, ButtonComponent]
+                    imports: [LabelComponent, ButtonGroupComponent, ButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }], propDecorators: { weekDayButtons: [{
                 type: ViewChildren,

package/esm2022/editing/recurrence/recurrence-monthly-yearly-editor.component.mjs

@@ -10,7 +10,6 @@ import { RepeatOnRadioButtonDirective } from './repeat-on-radio-button.directive
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent } from '@progress/kendo-angular-inputs';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { NgIf } from '@angular/common';
 import { LabelComponent, LabelDirective } from '@progress/kendo-angular-label';
 import * as i0 from "@angular/core";
 import * as i1 from "./recurrence.service";
@@ -249,109 +248,108 @@ export class RecurrenceMonthlyYearlyEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RecurrenceMonthlyYearlyEditorComponent, isStandalone: true, selector: "kendo-recurrence-monthly-yearly-editor", inputs: { userNumericOptions: "userNumericOptions" }, viewQueries: [{ propertyName: "repeatOnRadioButtons", predicate: RepeatOnRadioButtonDirective, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RecurrenceMonthlyYearlyEditorComponent, isStandalone: true, selector: "kendo-recurrence-monthly-yearly-editor", inputs: { userNumericOptions: "userNumericOptions" }, viewQueries: [{ propertyName: "repeatOnRadioButtons", predicate: RepeatOnRadioButtonDirective, descendants: true }], ngImport: i0, template: `
         <div class='k-form-field'>
-            <kendo-label
-                [text]="textForRepeatOn()"
-                labelCssClass="k-form-label"
-                (click)="onRepeatOnLabelClick()"
-            ></kendo-label>
-            <div class="k-form-field-wrap">
-                <ul class='k-radio-list'>
-                    <li class='k-radio-list-item'>
-                        <span class="k-radio-wrap">
-                            <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
-                        </span>
-                        <label [labelClass]="false" class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
-                            <ng-template [ngIf]="currentFreq === 'monthly'">
-                                {{ textFor('monthlyDay') }}
-                            </ng-template>
-                        </label>
+          <kendo-label
+            [text]="textForRepeatOn()"
+            labelCssClass="k-form-label"
+            (click)="onRepeatOnLabelClick()"
+          ></kendo-label>
+          <div class="k-form-field-wrap">
+            <ul class='k-radio-list'>
+              <li class='k-radio-list-item'>
+                <span class="k-radio-wrap">
+                  <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
+                </span>
+                <label [labelClass]="false" class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
+                  @if (currentFreq === 'monthly') {
+                    {{ textFor('monthlyDay') }}
+                  }
+                </label>
 
-                        <ng-template [ngIf]="currentFreq === 'yearly'">
-                            <kendo-dropdownlist
-                                [data]='months'
-                                textField='text'
-                                valueField='value'
-                                [value]='currentMonthMonthDay'
-                                [valuePrimitive]='true'
-                                (valueChange)="onMonthChange($event, 'monthday')"
-                                [disabled]="isDisabled('monthday')"
-                                [style.width.px]="170"
-                                [style.margin]="'0 .4ex 0 1ex'">
-                            </kendo-dropdownlist>
-                        </ng-template>
+                @if (currentFreq === 'yearly') {
+                  <kendo-dropdownlist
+                    [data]='months'
+                    textField='text'
+                    valueField='value'
+                    [value]='currentMonthMonthDay'
+                    [valuePrimitive]='true'
+                    (valueChange)="onMonthChange($event, 'monthday')"
+                    [disabled]="isDisabled('monthday')"
+                    [style.width.px]="170"
+                    [style.margin]="'0 .4ex 0 1ex'">
+                  </kendo-dropdownlist>
+                }
 
-                        <kendo-numerictextbox
-                            class="k-recur-monthday"
-                            [min]="numericOptions.min"
-                            [max]="numericOptions.max"
-                            [decimals]="0"
-                            [format]="numericOptions.format"
-                            [autoCorrect]="numericOptions.autoCorrect"
-                            [readonly]="numericOptions.readonly"
-                            [selectOnFocus]="numericOptions.selectOnFocus"
-                            [spinners]="numericOptions.spinners"
-                            [step]="numericOptions.step"
-                            [title]="numericOptions.title"
-                            [value]='monthDay'
-                            (valueChange)='onMonthDayChange($event)'
-                            [disabled]="isDisabled('monthday')"
-                        >
-                            <kendo-numerictextbox-messages 
-                                [increment]="textFor('numericIncrement')"
-                                [decrement]="textFor('numericDecrement')"
-                            >
-                            </kendo-numerictextbox-messages>
-                        </kendo-numerictextbox>
-                    </li>
-                    <li class='k-radio-list-item'>
-                        <span class="k-radio-wrap">
-                            <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
-                        </span>
-                        <label [labelClass]="false" class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
+                <kendo-numerictextbox
+                  class="k-recur-monthday"
+                  [min]="numericOptions.min"
+                  [max]="numericOptions.max"
+                  [decimals]="0"
+                  [format]="numericOptions.format"
+                  [autoCorrect]="numericOptions.autoCorrect"
+                  [readonly]="numericOptions.readonly"
+                  [selectOnFocus]="numericOptions.selectOnFocus"
+                  [spinners]="numericOptions.spinners"
+                  [step]="numericOptions.step"
+                  [title]="numericOptions.title"
+                  [value]='monthDay'
+                  (valueChange)='onMonthDayChange($event)'
+                  [disabled]="isDisabled('monthday')"
+                  >
+                  <kendo-numerictextbox-messages
+                    [increment]="textFor('numericIncrement')"
+                    [decrement]="textFor('numericDecrement')"
+                    >
+                  </kendo-numerictextbox-messages>
+                </kendo-numerictextbox>
+              </li>
+              <li class='k-radio-list-item'>
+                <span class="k-radio-wrap">
+                  <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
+                </span>
+                <label [labelClass]="false" class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
 
-                        <kendo-dropdownlist
-                            [data]='offsetPositions'
-                            textField='text'
-                            valueField='value'
-                            [value]='offset'
-                            [valuePrimitive]='true'
-                            (valueChange)='onOffsetPositionChange($event)'
-                            [disabled]="isDisabled('weekday')"
-                            [style.margin]="'0 .4ex 0 1ex'">
-                        </kendo-dropdownlist>
+                <kendo-dropdownlist
+                  [data]='offsetPositions'
+                  textField='text'
+                  valueField='value'
+                  [value]='offset'
+                  [valuePrimitive]='true'
+                  (valueChange)='onOffsetPositionChange($event)'
+                  [disabled]="isDisabled('weekday')"
+                  [style.margin]="'0 .4ex 0 1ex'">
+                </kendo-dropdownlist>
 
-                        <kendo-dropdownlist
-                            [data]="extendedWeekDays"
-                            textField='text'
-                            valueField='value'
-                            [value]='weekDay'
-                            [valuePrimitive]='true'
-                            (valueChange)='onWeekDayChange($event)'
-                            [disabled]="isDisabled('weekday')"
-                            [style.margin]="'0 .4ex 0 1ex'">
-                        </kendo-dropdownlist>
+                <kendo-dropdownlist
+                  [data]="extendedWeekDays"
+                  textField='text'
+                  valueField='value'
+                  [value]='weekDay'
+                  [valuePrimitive]='true'
+                  (valueChange)='onWeekDayChange($event)'
+                  [disabled]="isDisabled('weekday')"
+                  [style.margin]="'0 .4ex 0 1ex'">
+                </kendo-dropdownlist>
 
-                        <ng-template [ngIf]="currentFreq === 'yearly'">
-                            <span>{{ textFor('yearlyOf') }}</span>
-
-                            <kendo-dropdownlist
-                                [data]='months'
-                                textField='text'
-                                valueField='value'
-                                [value]='currentMonthWeekDay'
-                                [valuePrimitive]='true'
-                                (valueChange)="onMonthChange($event, 'weekday')"
-                                [disabled]="isDisabled('weekday')"
-                                [style.margin]="'0 .4ex 0 1ex'">
-                            </kendo-dropdownlist>
-                        </ng-template>
-                    </li>
-                </ul>
-            </div>
+                @if (currentFreq === 'yearly') {
+                  <span>{{ textFor('yearlyOf') }}</span>
+                  <kendo-dropdownlist
+                    [data]='months'
+                    textField='text'
+                    valueField='value'
+                    [value]='currentMonthWeekDay'
+                    [valuePrimitive]='true'
+                    (valueChange)="onMonthChange($event, 'weekday')"
+                    [disabled]="isDisabled('weekday')"
+                    [style.margin]="'0 .4ex 0 1ex'">
+                  </kendo-dropdownlist>
+                }
+              </li>
+            </ul>
+          </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: RepeatOnRadioButtonDirective, selector: "[kendoRecurrenceRepeatOnRadioButton]", inputs: ["kendoRecurrenceRepeatOnRadioButton"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: 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", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: RepeatOnRadioButtonDirective, selector: "[kendoRecurrenceRepeatOnRadioButton]", inputs: ["kendoRecurrenceRepeatOnRadioButton"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: 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", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, decorators: [{
             type: Component,
@@ -359,109 +357,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-recurrence-monthly-yearly-editor',
                     template: `
         <div class='k-form-field'>
-            <kendo-label
-                [text]="textForRepeatOn()"
-                labelCssClass="k-form-label"
-                (click)="onRepeatOnLabelClick()"
-            ></kendo-label>
-            <div class="k-form-field-wrap">
-                <ul class='k-radio-list'>
-                    <li class='k-radio-list-item'>
-                        <span class="k-radio-wrap">
-                            <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
-                        </span>
-                        <label [labelClass]="false" class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
-                            <ng-template [ngIf]="currentFreq === 'monthly'">
-                                {{ textFor('monthlyDay') }}
-                            </ng-template>
-                        </label>
-
-                        <ng-template [ngIf]="currentFreq === 'yearly'">
-                            <kendo-dropdownlist
-                                [data]='months'
-                                textField='text'
-                                valueField='value'
-                                [value]='currentMonthMonthDay'
-                                [valuePrimitive]='true'
-                                (valueChange)="onMonthChange($event, 'monthday')"
-                                [disabled]="isDisabled('monthday')"
-                                [style.width.px]="170"
-                                [style.margin]="'0 .4ex 0 1ex'">
-                            </kendo-dropdownlist>
-                        </ng-template>
+          <kendo-label
+            [text]="textForRepeatOn()"
+            labelCssClass="k-form-label"
+            (click)="onRepeatOnLabelClick()"
+          ></kendo-label>
+          <div class="k-form-field-wrap">
+            <ul class='k-radio-list'>
+              <li class='k-radio-list-item'>
+                <span class="k-radio-wrap">
+                  <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
+                </span>
+                <label [labelClass]="false" class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
+                  @if (currentFreq === 'monthly') {
+                    {{ textFor('monthlyDay') }}
+                  }
+                </label>
 
-                        <kendo-numerictextbox
-                            class="k-recur-monthday"
-                            [min]="numericOptions.min"
-                            [max]="numericOptions.max"
-                            [decimals]="0"
-                            [format]="numericOptions.format"
-                            [autoCorrect]="numericOptions.autoCorrect"
-                            [readonly]="numericOptions.readonly"
-                            [selectOnFocus]="numericOptions.selectOnFocus"
-                            [spinners]="numericOptions.spinners"
-                            [step]="numericOptions.step"
-                            [title]="numericOptions.title"
-                            [value]='monthDay'
-                            (valueChange)='onMonthDayChange($event)'
-                            [disabled]="isDisabled('monthday')"
-                        >
-                            <kendo-numerictextbox-messages 
-                                [increment]="textFor('numericIncrement')"
-                                [decrement]="textFor('numericDecrement')"
-                            >
-                            </kendo-numerictextbox-messages>
-                        </kendo-numerictextbox>
-                    </li>
-                    <li class='k-radio-list-item'>
-                        <span class="k-radio-wrap">
-                            <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
-                        </span>
-                        <label [labelClass]="false" class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
+                @if (currentFreq === 'yearly') {
+                  <kendo-dropdownlist
+                    [data]='months'
+                    textField='text'
+                    valueField='value'
+                    [value]='currentMonthMonthDay'
+                    [valuePrimitive]='true'
+                    (valueChange)="onMonthChange($event, 'monthday')"
+                    [disabled]="isDisabled('monthday')"
+                    [style.width.px]="170"
+                    [style.margin]="'0 .4ex 0 1ex'">
+                  </kendo-dropdownlist>
+                }
 
-                        <kendo-dropdownlist
-                            [data]='offsetPositions'
-                            textField='text'
-                            valueField='value'
-                            [value]='offset'
-                            [valuePrimitive]='true'
-                            (valueChange)='onOffsetPositionChange($event)'
-                            [disabled]="isDisabled('weekday')"
-                            [style.margin]="'0 .4ex 0 1ex'">
-                        </kendo-dropdownlist>
+                <kendo-numerictextbox
+                  class="k-recur-monthday"
+                  [min]="numericOptions.min"
+                  [max]="numericOptions.max"
+                  [decimals]="0"
+                  [format]="numericOptions.format"
+                  [autoCorrect]="numericOptions.autoCorrect"
+                  [readonly]="numericOptions.readonly"
+                  [selectOnFocus]="numericOptions.selectOnFocus"
+                  [spinners]="numericOptions.spinners"
+                  [step]="numericOptions.step"
+                  [title]="numericOptions.title"
+                  [value]='monthDay'
+                  (valueChange)='onMonthDayChange($event)'
+                  [disabled]="isDisabled('monthday')"
+                  >
+                  <kendo-numerictextbox-messages
+                    [increment]="textFor('numericIncrement')"
+                    [decrement]="textFor('numericDecrement')"
+                    >
+                  </kendo-numerictextbox-messages>
+                </kendo-numerictextbox>
+              </li>
+              <li class='k-radio-list-item'>
+                <span class="k-radio-wrap">
+                  <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
+                </span>
+                <label [labelClass]="false" class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
 
-                        <kendo-dropdownlist
-                            [data]="extendedWeekDays"
-                            textField='text'
-                            valueField='value'
-                            [value]='weekDay'
-                            [valuePrimitive]='true'
-                            (valueChange)='onWeekDayChange($event)'
-                            [disabled]="isDisabled('weekday')"
-                            [style.margin]="'0 .4ex 0 1ex'">
-                        </kendo-dropdownlist>
+                <kendo-dropdownlist
+                  [data]='offsetPositions'
+                  textField='text'
+                  valueField='value'
+                  [value]='offset'
+                  [valuePrimitive]='true'
+                  (valueChange)='onOffsetPositionChange($event)'
+                  [disabled]="isDisabled('weekday')"
+                  [style.margin]="'0 .4ex 0 1ex'">
+                </kendo-dropdownlist>
 
-                        <ng-template [ngIf]="currentFreq === 'yearly'">
-                            <span>{{ textFor('yearlyOf') }}</span>
+                <kendo-dropdownlist
+                  [data]="extendedWeekDays"
+                  textField='text'
+                  valueField='value'
+                  [value]='weekDay'
+                  [valuePrimitive]='true'
+                  (valueChange)='onWeekDayChange($event)'
+                  [disabled]="isDisabled('weekday')"
+                  [style.margin]="'0 .4ex 0 1ex'">
+                </kendo-dropdownlist>
 
-                            <kendo-dropdownlist
-                                [data]='months'
-                                textField='text'
-                                valueField='value'
-                                [value]='currentMonthWeekDay'
-                                [valuePrimitive]='true'
-                                (valueChange)="onMonthChange($event, 'weekday')"
-                                [disabled]="isDisabled('weekday')"
-                                [style.margin]="'0 .4ex 0 1ex'">
-                            </kendo-dropdownlist>
-                        </ng-template>
-                    </li>
-                </ul>
-            </div>
+                @if (currentFreq === 'yearly') {
+                  <span>{{ textFor('yearlyOf') }}</span>
+                  <kendo-dropdownlist
+                    [data]='months'
+                    textField='text'
+                    valueField='value'
+                    [value]='currentMonthWeekDay'
+                    [valuePrimitive]='true'
+                    (valueChange)="onMonthChange($event, 'weekday')"
+                    [disabled]="isDisabled('weekday')"
+                    [style.margin]="'0 .4ex 0 1ex'">
+                  </kendo-dropdownlist>
+                }
+              </li>
+            </ul>
+          </div>
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [LabelComponent, RepeatOnRadioButtonDirective, LabelDirective, NgIf, DropDownListComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent]
+                    imports: [LabelComponent, RepeatOnRadioButtonDirective, LabelDirective, DropDownListComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }], propDecorators: { userNumericOptions: [{
                 type: Input