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

package/esm2022/editing/recurrence/recurrence-weekday-rule-editor.component.mjs

@@ -7,7 +7,6 @@ import { capitalize, isPresent } from '../../common/util';
 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";
@@ -77,29 +76,30 @@ export class RecurrenceWeekdayRuleEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RecurrenceWeekdayRuleEditorComponent, isStandalone: true, selector: "kendo-recurrence-weekday-rule-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RecurrenceWeekdayRuleEditorComponent, isStandalone: true, selector: "kendo-recurrence-weekday-rule-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
         <div class="k-form-field">
-            <kendo-label
-                [text]="textFor('weeklyRepeatOn')"
-                labelCssClass="k-form-label"
-                (click)="onWeeklyRepeatOnClick()"
-            ></kendo-label>
-            <div class="k-form-field-wrap">
-                <kendo-buttongroup
-                    class="k-button-group-solid"
-                    width="100%"
-                    selection="multiple"
-                >
-                    <button
-                        *ngFor='let day of weekDays'
-                        kendoButton
-                        [selected]="isSelected(day)"
-                        (click)="onDayClick(day)"
-                    >{{ capitalize(day.text) }}</button>
-                </kendo-buttongroup>
-            </div>
+          <kendo-label
+            [text]="textFor('weeklyRepeatOn')"
+            labelCssClass="k-form-label"
+            (click)="onWeeklyRepeatOnClick()"
+          ></kendo-label>
+          <div class="k-form-field-wrap">
+            <kendo-buttongroup
+              class="k-button-group-solid"
+              width="100%"
+              selection="multiple"
+              >
+              @for (day of weekDays; track day) {
+                <button
+                  kendoButton
+                  [selected]="isSelected(day)"
+                  (click)="onDayClick(day)"
+                >{{ capitalize(day.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: RecurrenceWeekdayRuleEditorComponent, decorators: [{
             type: Component,
@@ -107,29 +107,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-recurrence-weekday-rule-editor',
                     template: `
         <div class="k-form-field">
-            <kendo-label
-                [text]="textFor('weeklyRepeatOn')"
-                labelCssClass="k-form-label"
-                (click)="onWeeklyRepeatOnClick()"
-            ></kendo-label>
-            <div class="k-form-field-wrap">
-                <kendo-buttongroup
-                    class="k-button-group-solid"
-                    width="100%"
-                    selection="multiple"
-                >
-                    <button
-                        *ngFor='let day of weekDays'
-                        kendoButton
-                        [selected]="isSelected(day)"
-                        (click)="onDayClick(day)"
-                    >{{ capitalize(day.text) }}</button>
-                </kendo-buttongroup>
-            </div>
+          <kendo-label
+            [text]="textFor('weeklyRepeatOn')"
+            labelCssClass="k-form-label"
+            (click)="onWeeklyRepeatOnClick()"
+          ></kendo-label>
+          <div class="k-form-field-wrap">
+            <kendo-buttongroup
+              class="k-button-group-solid"
+              width="100%"
+              selection="multiple"
+              >
+              @for (day of weekDays; track day) {
+                <button
+                  kendoButton
+                  [selected]="isSelected(day)"
+                  (click)="onDayClick(day)"
+                >{{ capitalize(day.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/resource-multiple-editor.component.mjs

@@ -6,7 +6,7 @@ import { Component, forwardRef, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ResourceEditorBase } from './resource-editor-base';
 import { MultiSelectComponent, TagTemplateDirective, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
-import { NgIf, NgStyle } from '@angular/common';
+import { NgStyle } from '@angular/common';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -30,30 +30,34 @@ export class MultipleResourceEditorComponent extends ResourceEditorBase {
         this.resourceMultiSelect.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultipleResourceEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultipleResourceEditorComponent, isStandalone: true, selector: "kendo-multiple-resource-editor", providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MultipleResourceEditorComponent, isStandalone: true, selector: "kendo-multiple-resource-editor", providers: [
             MULTIPLE_RESOURCE_VALUE_ACCESSOR
         ], viewQueries: [{ propertyName: "resourceMultiSelect", first: true, predicate: ["resourceMultiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-multiselect
-            #resourceMultiSelect
-            [data]='resource.data'
-            [textField]='resource.textField'
-            [valueField]='resource.valueField'
-            [valuePrimitive]='true'
-            [value]='resourceValue'
-            (valueChange)='onResourceValueChange($event)'
-        >
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span *ngIf="resource.colorField" class="k-scheduler-mark"
-                [ngStyle]="getResourceStyle(dataItem)"></span>
-                {{ getField(dataItem, resource.textField) }}
-            </ng-template>
-            <ng-template kendoMultiSelectTagTemplate let-dataItem>
-                <span *ngIf="resource.colorField" class="k-scheduler-mark"
-                [ngStyle]="getTagStyle(dataItem)"></span>
-                {{ getField(dataItem, resource.textField) }}
-            </ng-template>
+          #resourceMultiSelect
+          [data]='resource.data'
+          [textField]='resource.textField'
+          [valueField]='resource.valueField'
+          [valuePrimitive]='true'
+          [value]='resourceValue'
+          (valueChange)='onResourceValueChange($event)'
+          >
+          <ng-template kendoDropDownListItemTemplate let-dataItem>
+            @if (resource.colorField) {
+              <span class="k-scheduler-mark"
+              [ngStyle]="getResourceStyle(dataItem)"></span>
+            }
+            {{ getField(dataItem, resource.textField) }}
+          </ng-template>
+          <ng-template kendoMultiSelectTagTemplate let-dataItem>
+            @if (resource.colorField) {
+              <span class="k-scheduler-mark"
+              [ngStyle]="getTagStyle(dataItem)"></span>
+            }
+            {{ getField(dataItem, resource.textField) }}
+          </ng-template>
         </kendo-multiselect>
-    `, isInline: true, dependencies: [{ kind: "component", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultipleResourceEditorComponent, decorators: [{
             type: Component,
@@ -64,28 +68,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-multiple-resource-editor',
                     template: `
         <kendo-multiselect
-            #resourceMultiSelect
-            [data]='resource.data'
-            [textField]='resource.textField'
-            [valueField]='resource.valueField'
-            [valuePrimitive]='true'
-            [value]='resourceValue'
-            (valueChange)='onResourceValueChange($event)'
-        >
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span *ngIf="resource.colorField" class="k-scheduler-mark"
-                [ngStyle]="getResourceStyle(dataItem)"></span>
-                {{ getField(dataItem, resource.textField) }}
-            </ng-template>
-            <ng-template kendoMultiSelectTagTemplate let-dataItem>
-                <span *ngIf="resource.colorField" class="k-scheduler-mark"
-                [ngStyle]="getTagStyle(dataItem)"></span>
-                {{ getField(dataItem, resource.textField) }}
-            </ng-template>
+          #resourceMultiSelect
+          [data]='resource.data'
+          [textField]='resource.textField'
+          [valueField]='resource.valueField'
+          [valuePrimitive]='true'
+          [value]='resourceValue'
+          (valueChange)='onResourceValueChange($event)'
+          >
+          <ng-template kendoDropDownListItemTemplate let-dataItem>
+            @if (resource.colorField) {
+              <span class="k-scheduler-mark"
+              [ngStyle]="getResourceStyle(dataItem)"></span>
+            }
+            {{ getField(dataItem, resource.textField) }}
+          </ng-template>
+          <ng-template kendoMultiSelectTagTemplate let-dataItem>
+            @if (resource.colorField) {
+              <span class="k-scheduler-mark"
+              [ngStyle]="getTagStyle(dataItem)"></span>
+            }
+            {{ getField(dataItem, resource.textField) }}
+          </ng-template>
         </kendo-multiselect>
-    `,
+        `,
                     standalone: true,
-                    imports: [MultiSelectComponent, ItemTemplateDirective, NgIf, NgStyle, TagTemplateDirective]
+                    imports: [MultiSelectComponent, ItemTemplateDirective, NgStyle, TagTemplateDirective]
                 }]
         }], propDecorators: { resourceMultiSelect: [{
                 type: ViewChild,

package/esm2022/editing/resource-single-editor.component.mjs

@@ -6,7 +6,7 @@ import { Component, forwardRef, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ResourceEditorBase } from './resource-editor-base';
 import { DropDownListComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
-import { NgIf, NgStyle } from '@angular/common';
+import { NgStyle } from '@angular/common';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -25,25 +25,27 @@ export class SingleResourceEditorComponent extends ResourceEditorBase {
         this.resourceDropDown.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SingleResourceEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SingleResourceEditorComponent, isStandalone: true, selector: "kendo-single-resource-editor", providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SingleResourceEditorComponent, isStandalone: true, selector: "kendo-single-resource-editor", providers: [
             SINGLE_RESOURCE_VALUE_ACCESSOR
         ], viewQueries: [{ propertyName: "resourceDropDown", first: true, predicate: ["resourceDropDown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
-            #resourceDropDown
-            [data]='resource.data'
-            [textField]='resource.textField'
-            [valueField]='resource.valueField'
-            [valuePrimitive]='true'
-            [value]='resourceValue'
-            (valueChange)='onResourceValueChange($event)'
-        >
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span *ngIf="resource.colorField" class="k-scheduler-mark"
-                [ngStyle]="getResourceStyle(dataItem)"></span>
-                {{ getField(dataItem, resource.textField) }}
-            </ng-template>
+          #resourceDropDown
+          [data]='resource.data'
+          [textField]='resource.textField'
+          [valueField]='resource.valueField'
+          [valuePrimitive]='true'
+          [value]='resourceValue'
+          (valueChange)='onResourceValueChange($event)'
+          >
+          <ng-template kendoDropDownListItemTemplate let-dataItem>
+            @if (resource.colorField) {
+              <span class="k-scheduler-mark"
+              [ngStyle]="getResourceStyle(dataItem)"></span>
+            }
+            {{ getField(dataItem, resource.textField) }}
+          </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, dependencies: [{ 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: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+        `, isInline: true, dependencies: [{ 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: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SingleResourceEditorComponent, decorators: [{
             type: Component,
@@ -54,23 +56,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-single-resource-editor',
                     template: `
         <kendo-dropdownlist
-            #resourceDropDown
-            [data]='resource.data'
-            [textField]='resource.textField'
-            [valueField]='resource.valueField'
-            [valuePrimitive]='true'
-            [value]='resourceValue'
-            (valueChange)='onResourceValueChange($event)'
-        >
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span *ngIf="resource.colorField" class="k-scheduler-mark"
-                [ngStyle]="getResourceStyle(dataItem)"></span>
-                {{ getField(dataItem, resource.textField) }}
-            </ng-template>
+          #resourceDropDown
+          [data]='resource.data'
+          [textField]='resource.textField'
+          [valueField]='resource.valueField'
+          [valuePrimitive]='true'
+          [value]='resourceValue'
+          (valueChange)='onResourceValueChange($event)'
+          >
+          <ng-template kendoDropDownListItemTemplate let-dataItem>
+            @if (resource.colorField) {
+              <span class="k-scheduler-mark"
+              [ngStyle]="getResourceStyle(dataItem)"></span>
+            }
+            {{ getField(dataItem, resource.textField) }}
+          </ng-template>
         </kendo-dropdownlist>
-    `,
+        `,
                     standalone: true,
-                    imports: [DropDownListComponent, ItemTemplateDirective, NgIf, NgStyle]
+                    imports: [DropDownListComponent, ItemTemplateDirective, NgStyle]
                 }]
         }], propDecorators: { resourceDropDown: [{
                 type: ViewChild,

package/esm2022/editing/timezone-editor.component.mjs

@@ -7,7 +7,6 @@ import { Component, forwardRef, Input, EventEmitter, Output } from '@angular/cor
 import { NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { timezoneNames } from '@progress/kendo-date-math';
 import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
-import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 /**
@@ -110,11 +109,11 @@ export class TimeZoneEditorComponent {
         this.onTouchedCallback = fn;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeZoneEditorComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimeZoneEditorComponent, isStandalone: true, selector: "kendo-timezone-editor", inputs: { width: "width" }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimeZoneEditorComponent, isStandalone: true, selector: "kendo-timezone-editor", inputs: { width: "width" }, outputs: { valueChange: "valueChange" }, providers: [
             TIME_ZONE_VALUE_ACCESSOR
         ], viewQueries: [{ propertyName: "tzComboBox", first: true, predicate: ["tzcombobox"], descendants: true, static: true }, { propertyName: "tzComboBoxControl", first: true, predicate: ["tzcomboboxControl"], descendants: true, static: true }], ngImport: i0, template: `
-        <kendo-combobox
-            *ngIf="!formControl"
+        @if (!formControl) {
+          <kendo-combobox
             #tzcombobox
             [style.width.px]="width"
             [allowCustom]="false"
@@ -124,9 +123,10 @@ export class TimeZoneEditorComponent {
             [value]="tz"
             (filterChange)="onTimeZoneFilterChange($event)"
             (valueChange)="onTimeZoneChange($event)">
-        </kendo-combobox>
-        <kendo-combobox
-            *ngIf="formControl"
+          </kendo-combobox>
+        }
+        @if (formControl) {
+          <kendo-combobox
             #tzcomboboxControl
             [style.width.px]="width"
             [allowCustom]="false"
@@ -137,8 +137,9 @@ export class TimeZoneEditorComponent {
             [formControl]="formControl"
             (filterChange)="onTimeZoneFilterChange($event)"
             (valueChange)="onTimeZoneChange($event)">
-        </kendo-combobox>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+          </kendo-combobox>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeZoneEditorComponent, decorators: [{
             type: Component,
@@ -148,8 +149,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     selector: 'kendo-timezone-editor',
                     template: `
-        <kendo-combobox
-            *ngIf="!formControl"
+        @if (!formControl) {
+          <kendo-combobox
             #tzcombobox
             [style.width.px]="width"
             [allowCustom]="false"
@@ -159,9 +160,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [value]="tz"
             (filterChange)="onTimeZoneFilterChange($event)"
             (valueChange)="onTimeZoneChange($event)">
-        </kendo-combobox>
-        <kendo-combobox
-            *ngIf="formControl"
+          </kendo-combobox>
+        }
+        @if (formControl) {
+          <kendo-combobox
             #tzcomboboxControl
             [style.width.px]="width"
             [allowCustom]="false"
@@ -172,10 +174,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [formControl]="formControl"
             (filterChange)="onTimeZoneFilterChange($event)"
             (valueChange)="onTimeZoneChange($event)">
-        </kendo-combobox>
-    `,
+          </kendo-combobox>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, ComboBoxComponent, ReactiveFormsModule]
+                    imports: [ComboBoxComponent, ReactiveFormsModule]
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { tzComboBox: [{
                 type: ViewChild,

package/esm2022/navigation/shortcuts.directive.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
-import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
+import { Keys, normalizeKeys } from '@progress/kendo-angular-common';
 import { ZonedDate } from '@progress/kendo-date-math';
 import { Subscription } from 'rxjs';
 import { FocusService } from './focus.service';
@@ -35,7 +35,7 @@ export class ShortcutsDirective {
     viewState;
     dialogsService;
     shortcuts = [{
-            match: e => e.code === Keys.KeyC && noModifiers(e),
+            match: e => normalizeKeys(e) === Keys.KeyC && noModifiers(e),
             action: e => {
                 const scheduler = this.scheduler;
                 const hours = new Date().getHours();
@@ -62,12 +62,12 @@ export class ShortcutsDirective {
             }
         }, {
             match: e => {
-                const code = normalizeNumpadKeys(e);
+                const code = normalizeKeys(e);
                 return (code.startsWith('Digit') || code.startsWith('Numpad')) && withModifiers(e, Modifiers.AltKey);
             },
             action: e => {
                 const scheduler = this.scheduler;
-                const code = normalizeNumpadKeys(e);
+                const code = normalizeKeys(e);
                 const viewIndex = this.digitToNumber(code, code.startsWith('Digit') ? 'Digit' : 'Numpad') - 1;
                 const views = scheduler.views.toArray();
                 const view = views[viewIndex];
@@ -91,7 +91,7 @@ export class ShortcutsDirective {
                 });
             }
         }, {
-            match: e => e.code === Keys.KeyT && noModifiers(e),
+            match: e => normalizeKeys(e) === Keys.KeyT && noModifiers(e),
             action: () => {
                 this.zone.run(() => {
                     this.scheduler.onNavigationAction({ type: 'today' });
@@ -99,7 +99,7 @@ export class ShortcutsDirective {
                 });
             }
         }, {
-            match: e => e.code === Keys.KeyB && noModifiers(e),
+            match: e => normalizeKeys(e) === Keys.KeyB && noModifiers(e),
             action: () => {
                 this.zone.run(() => {
                     this.scheduler.onNavigationAction({ type: 'toggle-business-hours' });
@@ -108,11 +108,11 @@ export class ShortcutsDirective {
             }
         }, {
             match: (e) => {
-                const code = normalizeNumpadKeys(e);
+                const code = normalizeKeys(e);
                 return (code === Keys.ArrowLeft || code === Keys.ArrowRight) && withModifiers(e, Modifiers.ShiftKey);
             },
             action: (e) => {
-                const code = normalizeNumpadKeys(e);
+                const code = normalizeKeys(e);
                 const type = code === Keys.ArrowLeft ? 'prev' : 'next';
                 this.zone.run(() => {
                     this.scheduler.onNavigationAction({ type });
@@ -121,7 +121,7 @@ export class ShortcutsDirective {
             }
         }, {
             match: e => {
-                const code = normalizeNumpadKeys(e);
+                const code = normalizeKeys(e);
                 return (code === Keys.ArrowUp || code === Keys.ArrowLeft) && noModifiers(e) && !isContentWrapper(e.target);
             },
             action: e => {
@@ -137,7 +137,7 @@ export class ShortcutsDirective {
                 if (!prevented) {
                     const item = this.focusService.activeItem;
                     const isFirstEvent = item.containerType === 'content' && item.element.nativeElement.matches(':first-of-type');
-                    const code = normalizeNumpadKeys(e);
+                    const code = normalizeKeys(e);
                     const isUpArrow = code === Keys.ArrowUp;
                     // eslint-disable-next-line no-unused-expressions
                     isFirstEvent && isUpArrow ? this.focusService.focusToolbar() : this.focusService.focusNext({ offset: -1 });
@@ -146,7 +146,7 @@ export class ShortcutsDirective {
             }
         }, {
             match: e => {
-                const code = normalizeNumpadKeys(e);
+                const code = normalizeKeys(e);
                 return (code === Keys.ArrowDown || code === Keys.ArrowRight) && noModifiers(e) && !isContentWrapper(e.target);
             },
             action: e => {
@@ -162,7 +162,7 @@ export class ShortcutsDirective {
                 if (!prevented) {
                     const isInToolbar = this.focusService.activeItem.containerType === 'toolbar';
                     const offset = 1;
-                    const code = normalizeNumpadKeys(e);
+                    const code = normalizeKeys(e);
                     if (code === Keys.ArrowDown && isInToolbar) {
                         const focusableElementsArray = Array.from(this.focusService.focusableItems);
                         const firstFocusableContentElementIndex = focusableElementsArray.findIndex(item => item.containerType === 'content');

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729397,
-    version: '21.1.1-develop.2',
+    publishDate: 1764593164,
+    version: '21.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/pdf/pdf-command.directive.mjs

@@ -8,7 +8,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PDFService } from './pdf.service';
 import { filePdfIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./pdf.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -48,37 +48,47 @@ export class PDFCommandDirective extends Button {
         this.svgIcon = filePdfIcon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFCommandDirective, deps: [{ token: i1.PDFService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PDFCommandDirective, isStandalone: true, selector: "[kendoSchedulerPDFCommand]", host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PDFCommandDirective, isStandalone: true, selector: "[kendoSchedulerPDFCommand]", host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: `
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSchedulerPDFCommand]',
                     template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass]
                 }]
         }], ctorParameters: () => [{ type: i1.PDFService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }], propDecorators: { onClick: [{
                 type: HostListener,