@progress/kendo-angular-menu 25.0.0-develop.1 → 25.0.0-develop.3

package/fesm2022/progress-kendo-angular-menu.mjs

@@ -3,12 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, NgZone, EventEmitter, Optional, Directive, ContentChildren, Input, Component, ElementRef, forwardRef, HostBinding, ViewChild, Output, isDevMode, ContentChild, NgModule } from '@angular/core';
+import { Injectable, NgZone, EventEmitter, Optional, Directive, signal, ContentChildren, Input, ChangeDetectionStrategy, Component, ElementRef, inject, DestroyRef, forwardRef, HostBinding, ViewChild, Output, isDevMode, effect, ContentChild, NgModule } from '@angular/core';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i3 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { PreventableEvent as PreventableEvent$1, hasObservers, Keys, normalizeKeys, isDocumentAvailable, isPresent, parseCSSClassNames, KENDO_WEBMCP_HOST, ResizeBatchService } from '@progress/kendo-angular-common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { chevronDownIcon, chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import * as i5 from '@progress/kendo-angular-popup';
 import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
@@ -22,8 +23,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783679773,
-    version: '25.0.0-develop.1',
+    publishDate: 1783692407,
+    version: '25.0.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -708,13 +709,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: ActionsService }, { type: ItemsService }] });
 
-/**
- * @hidden
- */
-const normalize = (settings) => settings && Object.assign({
-    toggle: 'select'
-}, settings);
-
 /**
  * @hidden
  */
@@ -1034,15 +1028,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Supported children components are: {@link MenuItemComponent}.
  */
 class MenuItemComponent {
-    text;
-    url;
-    disabled;
-    cssClass;
-    cssStyle;
-    icon;
-    svgIcon;
-    data;
-    separator;
+    set text(value) {
+        this._text.set(value);
+    }
+    get text() {
+        return this._text();
+    }
+    set url(value) {
+        this._url.set(value);
+    }
+    get url() {
+        return this._url();
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    set cssClass(value) {
+        this._cssClass.set(value);
+    }
+    get cssClass() {
+        return this._cssClass();
+    }
+    set cssStyle(value) {
+        this._cssStyle.set(value);
+    }
+    get cssStyle() {
+        return this._cssStyle();
+    }
+    set icon(value) {
+        this._icon.set(value);
+    }
+    get icon() {
+        return this._icon();
+    }
+    set svgIcon(value) {
+        this._svgIcon.set(value);
+    }
+    get svgIcon() {
+        return this._svgIcon();
+    }
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
+    set separator(value) {
+        this._separator.set(value);
+    }
+    get separator() {
+        return this._separator();
+    }
     /**
      * @hidden
      */
@@ -1091,15 +1130,25 @@ class MenuItemComponent {
             return this.children.toArray().filter(c => c !== this);
         }
     }
+    _text = signal(undefined, ...(ngDevMode ? [{ debugName: "_text" }] : []));
+    _url = signal(undefined, ...(ngDevMode ? [{ debugName: "_url" }] : []));
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _cssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClass" }] : []));
+    _cssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssStyle" }] : []));
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    _separator = signal(undefined, ...(ngDevMode ? [{ debugName: "_separator" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: MenuItemComponent, isStandalone: true, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", svgIcon: "svgIcon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: MenuItemComponent, isStandalone: true, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", svgIcon: "svgIcon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-menu-item',
                     template: ``,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { text: [{
                 type: Input
@@ -1188,26 +1237,51 @@ class MenuBase {
     /**
      * Specifies the Menu items.
      */
-    items;
+    set items(value) {
+        this._items.set(value);
+    }
+    get items() {
+        return this._items();
+    }
     /**
      * Specifies if the Menu will be vertical ([see example](https://www.telerik.com/kendo-angular-ui/components/menus/menu/vertical)).
      */
-    vertical = false;
+    set vertical(value) {
+        this._vertical.set(value);
+    }
+    get vertical() {
+        return this._vertical();
+    }
     /**
      * Specifies that the root items can be opened only on click
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/menus/menu/open-close#opening-on-click)).
      */
-    openOnClick = false;
+    set openOnClick(value) {
+        this._openOnClick.set(value);
+    }
+    get openOnClick() {
+        return this._openOnClick();
+    }
     /**
      * Specifies the delay in milliseconds before the Menu items are opened or closed on item hover
      * or leave ([see example](https://www.telerik.com/kendo-angular-ui/components/menus/menu/open-close#delay-on-hover)). Used to avoid the accidental
      * opening or closing of the items.
      */
-    hoverDelay = 100;
+    set hoverDelay(value) {
+        this._hoverDelay.set(value);
+    }
+    get hoverDelay() {
+        return this._hoverDelay();
+    }
     /**
      * Sets the Menu animation.
      */
-    animate = true;
+    set animate(value) {
+        this._animate.set(value);
+    }
+    get animate() {
+        return this._animate();
+    }
     /**
      * Sets the Menu size.
      *
@@ -1217,17 +1291,32 @@ class MenuBase {
      * * `large`
      *
      */
-    size = undefined;
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
     /**
      * Configures the popup settings for the Menu items.
      * Allows customization of the popup class and margin.
      */
-    popupSettings;
+    set popupSettings(value) {
+        this._popupSettings.set(value);
+    }
+    get popupSettings() {
+        return this._popupSettings();
+    }
     /**
-     * Defines a function that determines how to track changes for the menu items.
+     * Defines a function that determines how to track for the menu items.
      * By default, the component tracks changes by index.
      */
-    trackBy = defaultTrackBy;
+    set trackBy(value) {
+        this._trackBy.set(value);
+    }
+    get trackBy() {
+        return this._trackBy();
+    }
     /**
      * @hidden
      */
@@ -1240,20 +1329,37 @@ class MenuBase {
      * @hidden
      */
     children;
+    _items = signal(undefined, ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _vertical = signal(false, ...(ngDevMode ? [{ debugName: "_vertical" }] : []));
+    _openOnClick = signal(false, ...(ngDevMode ? [{ debugName: "_openOnClick" }] : []));
+    _hoverDelay = signal(100, ...(ngDevMode ? [{ debugName: "_hoverDelay" }] : []));
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _popupSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _trackBy = signal(defaultTrackBy, ...(ngDevMode ? [{ debugName: "_trackBy" }] : []));
+    _children = signal([], ...(ngDevMode ? [{ debugName: "_children" }] : []));
+    destroyRef = inject(DestroyRef);
+    ngAfterContentInit() {
+        this._children.set(this.children.toArray());
+        this.children.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this._children.set(this.children.toArray());
+        });
+    }
     /**
      * @hidden
      */
     get rootItems() {
-        return this.items || (this.children ? this.children.toArray() : []);
+        return this._items() || this._children();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MenuBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: MenuBase, isStandalone: true, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size", popupSettings: "popupSettings", trackBy: "trackBy" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: MenuBase, isStandalone: true, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size", popupSettings: "popupSettings", trackBy: "trackBy" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MenuBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-menu-base',
-                    template: ``
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { items: [{
                 type: Input
@@ -1364,20 +1470,98 @@ class ListComponent {
     renderer;
     ngZone;
     element;
-    appendTo;
-    items;
-    level;
-    index;
-    animate = true;
-    size = 'medium';
-    vertical;
-    rtl;
-    openOnClick;
-    itemTemplate;
-    itemLinkTemplate;
-    popupSettings;
-    trackBy;
+    set appendTo(value) {
+        this._appendTo.set(value);
+    }
+    get appendTo() {
+        return this._appendTo();
+    }
+    set items(value) {
+        this._items.set(value);
+    }
+    get items() {
+        return this._items();
+    }
+    set level(value) {
+        this._level.set(value);
+    }
+    get level() {
+        return this._level();
+    }
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
+    set animate(value) {
+        this._animate.set(value);
+    }
+    get animate() {
+        return this._animate();
+    }
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
+    set vertical(value) {
+        this._vertical.set(value);
+    }
+    get vertical() {
+        return this._vertical();
+    }
+    set rtl(value) {
+        this._rtl.set(value);
+    }
+    get rtl() {
+        return this._rtl();
+    }
+    set openOnClick(value) {
+        this._openOnClick.set(value);
+    }
+    get openOnClick() {
+        return this._openOnClick();
+    }
+    set itemTemplate(value) {
+        this._itemTemplate.set(value);
+    }
+    get itemTemplate() {
+        return this._itemTemplate();
+    }
+    set itemLinkTemplate(value) {
+        this._itemLinkTemplate.set(value);
+    }
+    get itemLinkTemplate() {
+        return this._itemLinkTemplate();
+    }
+    set popupSettings(value) {
+        this._popupSettings.set(value);
+    }
+    get popupSettings() {
+        return this._popupSettings();
+    }
+    set trackBy(value) {
+        this._trackBy.set(value);
+    }
+    get trackBy() {
+        return this._trackBy();
+    }
     domSubscriptions;
+    _appendTo = signal(undefined, ...(ngDevMode ? [{ debugName: "_appendTo" }] : []));
+    _items = signal(undefined, ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _level = signal(undefined, ...(ngDevMode ? [{ debugName: "_level" }] : []));
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    _size = signal('medium', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _vertical = signal(undefined, ...(ngDevMode ? [{ debugName: "_vertical" }] : []));
+    _rtl = signal(undefined, ...(ngDevMode ? [{ debugName: "_rtl" }] : []));
+    _openOnClick = signal(undefined, ...(ngDevMode ? [{ debugName: "_openOnClick" }] : []));
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : []));
+    _itemLinkTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemLinkTemplate" }] : []));
+    _popupSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _trackBy = signal(undefined, ...(ngDevMode ? [{ debugName: "_trackBy" }] : []));
     constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
         this.itemsService = itemsService;
         this.hover = hover;
@@ -1443,13 +1627,11 @@ class ListComponent {
             const touchSubscription = this.renderer.listen(document, 'touchstart', (e) => {
                 if (inMenu(e.target, this.itemsService)) {
                     const item = this.nodeItem(e.target);
-                    if (item) {
-                        // Needs to be called because the 'click' handler will be called only on secondary tap and the item will remain unfocused
-                        this.navigation.focus(item);
-                        // This is needed since the 'mouseover' event is not always dispatched
-                        if (!item.opened) {
-                            this.hover.over(item);
-                        }
+                    // Needs to be called because the 'click' handler will be called only on secondary tap and the item will remain unfocused
+                    this.navigation.focus(item);
+                    // This is needed since the 'mouseover' event is not always dispatched
+                    if (!item.opened) {
+                        this.hover.over(item);
                     }
                 }
                 else if (this.navigation.focusedIdx) {
@@ -1533,7 +1715,7 @@ class ListComponent {
         this.actions.execute();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings", trackBy: "trackBy" }, ngImport: i0, template: "\n        @for (item of items; track trackByWrapper($index, item); let idx = $index) {\n          @if (!item.separator) {\n            <li\n              kendoMenuItem\n              [appendTo]=\"appendTo\"\n              [item]=\"item\"\n              [level]=\"level\"\n              [size]=\"size\"\n              [vertical]=\"vertical\"\n              [animate]=\"animate\"\n              [rtl]=\"rtl\"\n              [itemTemplate]=\"itemTemplate\"\n              [itemLinkTemplate]=\"itemLinkTemplate\"\n              [popupSettings]=\"popupSettings\"\n              [trackBy]=\"trackBy\"\n              [openOnClick]=\"openOnClick\"\n              [index]=\"hierarchyIndex(idx)\"\n              [siblingIndex]=\"idx\"\n              [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              role=\"menuitem\"\n              class=\"k-item k-menu-item\"\n              [class.k-first]=\"idx === 0\"\n              [class.k-last]=\"idx === items.length - 1\"\n            [class.k-disabled]=\"item.disabled\"></li>\n          }\n          @if (item.separator) {\n            <li\n              class=\"k-separator k-item\"\n              [ngClass]=\"item.cssClass\"\n              aria-hidden=\"true\"\n              [ngStyle]=\"item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings", trackBy: "trackBy" }, ngImport: i0, template: "\n        @for (item of items; track trackByWrapper($index, item); let idx = $index) {\n          @if (!item.separator) {\n            <li\n              kendoMenuItem\n              [appendTo]=\"appendTo\"\n              [item]=\"item\"\n              [level]=\"level\"\n              [size]=\"size\"\n              [vertical]=\"vertical\"\n              [animate]=\"animate\"\n              [rtl]=\"rtl\"\n              [itemTemplate]=\"itemTemplate\"\n              [itemLinkTemplate]=\"itemLinkTemplate\"\n              [popupSettings]=\"popupSettings\"\n              [trackBy]=\"trackBy\"\n              [openOnClick]=\"openOnClick\"\n              [index]=\"hierarchyIndex(idx)\"\n              [siblingIndex]=\"idx\"\n              [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              role=\"menuitem\"\n              class=\"k-item k-menu-item\"\n              [class.k-first]=\"idx === 0\"\n              [class.k-last]=\"idx === items.length - 1\"\n            [class.k-disabled]=\"item.disabled\"></li>\n          }\n          @if (item.separator) {\n            <li\n              class=\"k-separator k-item\"\n              [ngClass]=\"item.cssClass\"\n              aria-hidden=\"true\"\n              [ngStyle]=\"item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -1579,7 +1761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [forwardRef(() => ItemComponent), NgClass, NgStyle]
+                    imports: [forwardRef(() => ItemComponent), NgClass, NgStyle],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: ItemsService }, { type: HoverService }, { type: ActionsService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { appendTo: [{
                 type: Input
@@ -1614,14 +1797,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class ItemComponent {
     itemsService;
     navigation;
-    changeDetector;
     renderer;
     popupService;
     element;
     contextService;
-    appendTo;
-    item;
-    level;
+    set appendTo(value) {
+        this._appendTo.set(value);
+    }
+    get appendTo() {
+        return this._appendTo();
+    }
+    set item(value) {
+        const prev = this._item();
+        this._item.set(value);
+        if (prev && prev !== value && this.opened) {
+            this.close();
+        }
+    }
+    get item() {
+        return this._item();
+    }
+    set level(value) {
+        this._level.set(value);
+    }
+    get level() {
+        return this._level();
+    }
     set index(index) {
         if (this._index && this._index !== index) {
             this.itemsService.remove(this);
@@ -1636,16 +1837,66 @@ class ItemComponent {
     get index() {
         return this._index;
     }
-    siblingIndex;
-    animate = true;
-    size = 'medium';
-    vertical;
-    rtl;
-    openOnClick = false;
-    itemTemplate;
-    itemLinkTemplate;
-    popupSettings;
-    trackBy;
+    set siblingIndex(value) {
+        this._siblingIndex.set(value);
+    }
+    get siblingIndex() {
+        return this._siblingIndex();
+    }
+    set animate(value) {
+        this._animate.set(value);
+    }
+    get animate() {
+        return this._animate();
+    }
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
+    set vertical(value) {
+        this._vertical.set(value);
+    }
+    get vertical() {
+        return this._vertical();
+    }
+    set rtl(value) {
+        this._rtl.set(value);
+    }
+    get rtl() {
+        return this._rtl();
+    }
+    set openOnClick(value) {
+        this._openOnClick.set(value);
+    }
+    get openOnClick() {
+        return this._openOnClick();
+    }
+    set itemTemplate(value) {
+        this._itemTemplate.set(value);
+    }
+    get itemTemplate() {
+        return this._itemTemplate();
+    }
+    set itemLinkTemplate(value) {
+        this._itemLinkTemplate.set(value);
+    }
+    get itemLinkTemplate() {
+        return this._itemLinkTemplate();
+    }
+    set popupSettings(value) {
+        this._popupSettings.set(value);
+    }
+    get popupSettings() {
+        return this._popupSettings();
+    }
+    set trackBy(value) {
+        this._trackBy.set(value);
+    }
+    get trackBy() {
+        return this._trackBy();
+    }
     link;
     popupTemplate;
     get disabled() {
@@ -1709,17 +1960,35 @@ class ItemComponent {
      * @hidden
      */
     SVGIcon = getSVGIcon;
-    opened = false;
+    get opened() {
+        return this._opened();
+    }
+    set opened(value) {
+        this._opened.set(value);
+    }
     navigating = false;
     childId;
     contentItems;
     popupRef;
-    _index;
     destroyed = false;
-    constructor(itemsService, navigation, changeDetector, renderer, popupService, element, contextService) {
+    _index;
+    _appendTo = signal(undefined, ...(ngDevMode ? [{ debugName: "_appendTo" }] : []));
+    _item = signal(undefined, ...(ngDevMode ? [{ debugName: "_item" }] : []));
+    _level = signal(undefined, ...(ngDevMode ? [{ debugName: "_level" }] : []));
+    _opened = signal(false, ...(ngDevMode ? [{ debugName: "_opened" }] : []));
+    _siblingIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_siblingIndex" }] : []));
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    _size = signal('medium', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _vertical = signal(undefined, ...(ngDevMode ? [{ debugName: "_vertical" }] : []));
+    _rtl = signal(undefined, ...(ngDevMode ? [{ debugName: "_rtl" }] : []));
+    _openOnClick = signal(false, ...(ngDevMode ? [{ debugName: "_openOnClick" }] : []));
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : []));
+    _itemLinkTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemLinkTemplate" }] : []));
+    _popupSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _trackBy = signal(undefined, ...(ngDevMode ? [{ debugName: "_trackBy" }] : []));
+    constructor(itemsService, navigation, renderer, popupService, element, contextService) {
         this.itemsService = itemsService;
         this.navigation = navigation;
-        this.changeDetector = changeDetector;
         this.renderer = renderer;
         this.popupService = popupService;
         this.element = element;
@@ -1733,11 +2002,6 @@ class ItemComponent {
     ngOnInit() {
         this.itemsService.add(this);
     }
-    ngOnChanges(changes) {
-        if (changes['item'] && !changes['item'].firstChange && this.opened) {
-            this.close();
-        }
-    }
     ngAfterViewInit() {
         if (this.hasContent) {
             this.setAttribute('aria-expanded', this.opened.toString());
@@ -1787,7 +2051,6 @@ class ItemComponent {
             });
             this.setAttribute('aria-expanded', 'true');
             this.setAttribute('aria-controls', this.childId);
-            this.changeDetector.detectChanges();
         }
     }
     close() {
@@ -1797,7 +2060,6 @@ class ItemComponent {
                 this.popupRef.close();
                 this.popupRef = null;
             }
-            this.changeDetector.detectChanges();
             this.setAttribute('aria-expanded', 'false');
             this.renderer.removeAttribute(this.element.nativeElement, 'aria-controls');
         }
@@ -1831,11 +2093,11 @@ class ItemComponent {
             margin: this.popupSettings.margin ?? DEFAULT_MARGIN
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ItemComponent, deps: [{ token: ItemsService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupService }, { token: i0.ElementRef }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ItemComponent, deps: [{ token: ItemsService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i5.PopupService }, { token: i0.ElementRef }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings", trackBy: "trackBy" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup" } }, providers: [PopupService, {
                 provide: POPUP_CONTAINER,
                 useFactory: bodyFactory
-            }], viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+            }], viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     @if (!hasLink && !item.content && !linkTemplate) {
       <span class="k-link k-menu-link" #link
         [class.k-active]="opened" [class.k-disabled]="item.disabled && (level > 0 || isContextMenu)" role="presentation">
@@ -1899,7 +2161,7 @@ class ItemComponent {
         <kendo-icon-wrapper [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
       }
     </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
@@ -1975,9 +2237,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </ng-template>
     `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, ListComponent, NgClass, IconWrapperComponent]
+                    imports: [NgTemplateOutlet, ListComponent, NgClass, IconWrapperComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: ItemsService }, { type: NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.PopupService }, { type: i0.ElementRef }, { type: ContextMenuService, decorators: [{
+        }], ctorParameters: () => [{ type: ItemsService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i5.PopupService }, { type: i0.ElementRef }, { type: ContextMenuService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { appendTo: [{
                 type: Input
@@ -2021,6 +2284,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: ['attr.aria-haspopup']
             }] } });
 
+/**
+ * @hidden
+ */
+const normalize = (settings) => settings && Object.assign({
+    toggle: 'select'
+}, settings);
+
 /**
  * Represents the [Kendo UI Menu component for Angular](https://www.telerik.com/kendo-angular-ui/components/menus/menu).
  *
@@ -2053,19 +2323,39 @@ class MenuComponent extends MenuBase {
     /**
      * Defines the container to which the popups will be appended.
      */
-    appendTo;
+    set appendTo(value) {
+        this._appendTo.set(value);
+    }
+    get appendTo() {
+        return this._appendTo();
+    }
     /**
      * @hidden
      */
-    menuItemTemplate;
+    set menuItemTemplate(value) {
+        this._menuItemTemplate.set(value);
+    }
+    get menuItemTemplate() {
+        return this._menuItemTemplate();
+    }
     /**
      * @hidden
      */
-    ariaRole = 'menubar';
+    set ariaRole(value) {
+        this._ariaRole.set(value);
+    }
+    get ariaRole() {
+        return this._ariaRole();
+    }
     /**
      * @hidden
      */
-    menuItemLinkTemplate;
+    set menuItemLinkTemplate(value) {
+        this._menuItemLinkTemplate.set(value);
+    }
+    get menuItemLinkTemplate() {
+        return this._menuItemLinkTemplate();
+    }
     /**
      * Fires when a Menu item is selected ([see example](https://www.telerik.com/kendo-angular-ui/components/menus/menu/events)).
      */
@@ -2097,7 +2387,7 @@ class MenuComponent extends MenuBase {
         return this.rtl;
     }
     get rtl() {
-        return this.localization.rtl;
+        return this._rtl();
     }
     /**
      * @hidden
@@ -2115,6 +2405,12 @@ class MenuComponent extends MenuBase {
     }
     closeClickSubscription;
     contextKeyDownSubscription;
+    localizationSubscription;
+    _appendTo = signal(undefined, ...(ngDevMode ? [{ debugName: "_appendTo" }] : []));
+    _menuItemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_menuItemTemplate" }] : []));
+    _ariaRole = signal('menubar', ...(ngDevMode ? [{ debugName: "_ariaRole" }] : []));
+    _menuItemLinkTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_menuItemLinkTemplate" }] : []));
+    _rtl = signal(false, ...(ngDevMode ? [{ debugName: "_rtl" }] : []));
     constructor(itemsService, hover, actions, navigation, localization, ngZone, renderer, contextService) {
         super();
         this.itemsService = itemsService;
@@ -2126,12 +2422,28 @@ class MenuComponent extends MenuBase {
         this.renderer = renderer;
         this.contextService = contextService;
         validatePackage(packageMetadata);
+        this._rtl.set(localization.rtl);
+        this.localizationSubscription = localization.changes.subscribe(({ rtl }) => this._rtl.set(rtl));
         this.actions.owner = this;
         if (contextService) {
             contextService.items = this.itemsService;
             this.contextKeyDownSubscription = contextService.keydown.subscribe(this.contextKeyDown.bind(this));
         }
     }
+    ngOnChanges(changes) {
+        this.navigation.vertical = this.vertical;
+        this.hover.delay = this.hoverDelay;
+        if (changes.openOnClick) {
+            const openOnClick = this.openOnClick = normalize(this.openOnClick);
+            this.hover.openOnOver = !openOnClick;
+            if (openOnClick?.toggle === 'click') {
+                this.attachCloseClick();
+            }
+            else {
+                this.unsubscribeClick();
+            }
+        }
+    }
     /**
      * Opens or closes the specified Menu items.
      *
@@ -2157,25 +2469,12 @@ class MenuComponent extends MenuBase {
     focus(index) {
         this.navigation.focusIndex(index);
     }
-    ngOnChanges(changes) {
-        this.navigation.vertical = this.vertical;
-        this.hover.delay = this.hoverDelay;
-        if (changes.openOnClick) {
-            const openOnClick = this.openOnClick = normalize(this.openOnClick);
-            this.hover.openOnOver = !openOnClick;
-            if (openOnClick && openOnClick.toggle === 'click') {
-                this.attachCloseClick();
-            }
-            else {
-                this.unsubscribeClick();
-            }
-        }
-    }
     ngAfterViewChecked() {
         this.navigation.updateActive();
     }
     ngOnDestroy() {
         this.unsubscribeClick();
+        this.localizationSubscription.unsubscribe();
         if (this.contextService) {
             this.contextService.items = null;
             this.contextKeyDownSubscription.unsubscribe();
@@ -2250,7 +2549,7 @@ class MenuComponent extends MenuBase {
             [trackBy]="trackBy"
             [ngClass]="menuClasses">
         </ul>
-    `, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -2290,7 +2589,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         </ul>
     `,
                     standalone: true,
-                    imports: [ListComponent, NgClass]
+                    imports: [ListComponent, NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: ItemsService }, { type: HoverService }, { type: ActionsService }, { type: NavigationService }, { type: i3.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ContextMenuService, decorators: [{
                     type: Optional
@@ -2329,7 +2629,13 @@ class LinkDirective {
     /**
      * Specifies the index of the Menu item. The input is mandatory.
      */
-    index;
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
     hostClasses = true;
     role = 'presentation';
     tabindex = '-1';
@@ -2391,7 +2697,13 @@ class ExpandArrowComponent {
     /**
      * Specifies the index of the Menu item. The input is mandatory.
      */
-    index;
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
     hostClasses = true;
     ariaHidden = 'true';
     item;
@@ -2415,7 +2727,7 @@ class ExpandArrowComponent {
         this.SVGIcon = getSVGIcon(this.item.horizontal, this.item.rtl);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ExpandArrowComponent, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ExpandArrowComponent, isStandalone: true, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ExpandArrowComponent, isStandalone: true, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ExpandArrowComponent, decorators: [{
             type: Component,
@@ -2423,7 +2735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     selector: '[kendoMenuExpandArrow]',
                     template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`,
                     standalone: true,
-                    imports: [IconWrapperComponent]
+                    imports: [IconWrapperComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: ItemsService }], propDecorators: { index: [{
                 type: Input,
@@ -2501,13 +2814,19 @@ const ITEM_FIELDS = ['textField', 'urlField', 'iconField', 'svgIconField', 'disa
  */
 class BindingDirectiveBase {
     menu;
-    data;
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
+    _data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
     fields;
     constructor(menu) {
         this.menu = menu;
-    }
-    ngOnChanges() {
-        this.rebind();
+        effect(() => {
+            this.rebind();
+        });
     }
     /**
      *  Rebinds the Menu items.
@@ -2521,10 +2840,10 @@ class BindingDirectiveBase {
                 fields.push({ target: inputName.replace('Field', ''), source: inputValue });
             }
         }
-        this.menu.items = this.data ? this.mapItems(this.data) : [];
+        this.menu.items = this._data() ? this.mapItems(this._data()) : [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BindingDirectiveBase, deps: [{ token: MenuBase }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: BindingDirectiveBase, isStandalone: true, selector: "kendoBindingBase", usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: BindingDirectiveBase, isStandalone: true, selector: "kendoBindingBase", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BindingDirectiveBase, decorators: [{
             type: Directive,
@@ -2578,43 +2897,102 @@ class HierarchyBindingDirective extends BindingDirectiveBase {
     /**
      * Specifies the array of data which will be used to populate the Menu.
      */
-    data;
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
     /**
      * Defines the `text` field (or fields) of an item.
      */
-    textField;
+    set textField(value) {
+        this._textField.set(value);
+    }
+    get textField() {
+        return this._textField();
+    }
     /**
      * Defines the `url` field (or fields) of an item.
      */
-    urlField;
+    set urlField(value) {
+        this._urlField.set(value);
+    }
+    get urlField() {
+        return this._urlField();
+    }
     /**
      * Defines the `icon` field (or fields) of an item.
      */
-    iconField;
+    set iconField(value) {
+        this._iconField.set(value);
+    }
+    get iconField() {
+        return this._iconField();
+    }
     /**
      * Defines the `svgIcon` field of the items.
      */
-    svgIconField;
+    set svgIconField(value) {
+        this._svgIconField.set(value);
+    }
+    get svgIconField() {
+        return this._svgIconField();
+    }
     /**
      * Defines the `disabled` field (or fields) of an item.
      */
-    disabledField;
+    set disabledField(value) {
+        this._disabledField.set(value);
+    }
+    get disabledField() {
+        return this._disabledField();
+    }
     /**
      * Defines the `cssClass` field (or fields) of an item.
      */
-    cssClassField;
+    set cssClassField(value) {
+        this._cssClassField.set(value);
+    }
+    get cssClassField() {
+        return this._cssClassField();
+    }
     /**
      * Defines the `cssStyle` field (or fields) of an item.
      */
-    cssStyleField;
+    set cssStyleField(value) {
+        this._cssStyleField.set(value);
+    }
+    get cssStyleField() {
+        return this._cssStyleField();
+    }
     /**
      * Defines the `separator` field (or fields) of the items.
      */
-    separatorField;
+    set separatorField(value) {
+        this._separatorField.set(value);
+    }
+    get separatorField() {
+        return this._separatorField();
+    }
     /**
      * Defines the `children` field (or fields) of the items.
      */
-    childrenField;
+    set childrenField(value) {
+        this._childrenField.set(value);
+    }
+    get childrenField() {
+        return this._childrenField();
+    }
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : []));
+    _urlField = signal(undefined, ...(ngDevMode ? [{ debugName: "_urlField" }] : []));
+    _iconField = signal(undefined, ...(ngDevMode ? [{ debugName: "_iconField" }] : []));
+    _svgIconField = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIconField" }] : []));
+    _disabledField = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabledField" }] : []));
+    _cssClassField = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClassField" }] : []));
+    _cssStyleField = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssStyleField" }] : []));
+    _separatorField = signal(undefined, ...(ngDevMode ? [{ debugName: "_separatorField" }] : []));
+    _childrenField = signal(undefined, ...(ngDevMode ? [{ debugName: "_childrenField" }] : []));
     constructor(menu) {
         super(menu);
     }
@@ -2692,47 +3070,112 @@ class FlatBindingDirective extends BindingDirectiveBase {
     /**
      * Specifies the array of data which will be used to populate the Menu.
      */
-    data;
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
     /**
      * Defines the `text` field of the items.
      */
-    textField;
+    set textField(value) {
+        this._textField.set(value);
+    }
+    get textField() {
+        return this._textField();
+    }
     /**
      * Defines the `url` field of the items.
      */
-    urlField;
+    set urlField(value) {
+        this._urlField.set(value);
+    }
+    get urlField() {
+        return this._urlField();
+    }
     /**
      * Defines the `icon` field of the items.
      */
-    iconField;
+    set iconField(value) {
+        this._iconField.set(value);
+    }
+    get iconField() {
+        return this._iconField();
+    }
     /**
      * Defines the `svgIcon` field of the items.
      */
-    svgIconField;
+    set svgIconField(value) {
+        this._svgIconField.set(value);
+    }
+    get svgIconField() {
+        return this._svgIconField();
+    }
     /**
      * Defines the `disabled` field of the items.
      */
-    disabledField;
+    set disabledField(value) {
+        this._disabledField.set(value);
+    }
+    get disabledField() {
+        return this._disabledField();
+    }
     /**
      * Defines the `cssClass` field of the items.
      */
-    cssClassField;
+    set cssClassField(value) {
+        this._cssClassField.set(value);
+    }
+    get cssClassField() {
+        return this._cssClassField();
+    }
     /**
      * Defines the `cssStyle` field of the items.
      */
-    cssStyleField;
+    set cssStyleField(value) {
+        this._cssStyleField.set(value);
+    }
+    get cssStyleField() {
+        return this._cssStyleField();
+    }
     /**
      * Defines the `separator` field of the items.
      */
-    separatorField;
+    set separatorField(value) {
+        this._separatorField.set(value);
+    }
+    get separatorField() {
+        return this._separatorField();
+    }
     /**
      * Defines the `id` field of the items.
      */
-    idField;
+    set idField(value) {
+        this._idField.set(value);
+    }
+    get idField() {
+        return this._idField();
+    }
     /**
      * Defines the parent `id` field of the items.
      */
-    parentIdField;
+    set parentIdField(value) {
+        this._parentIdField.set(value);
+    }
+    get parentIdField() {
+        return this._parentIdField();
+    }
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : []));
+    _urlField = signal(undefined, ...(ngDevMode ? [{ debugName: "_urlField" }] : []));
+    _iconField = signal(undefined, ...(ngDevMode ? [{ debugName: "_iconField" }] : []));
+    _svgIconField = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIconField" }] : []));
+    _disabledField = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabledField" }] : []));
+    _cssClassField = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClassField" }] : []));
+    _cssStyleField = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssStyleField" }] : []));
+    _separatorField = signal(undefined, ...(ngDevMode ? [{ debugName: "_separatorField" }] : []));
+    _idField = signal(undefined, ...(ngDevMode ? [{ debugName: "_idField" }] : []));
+    _parentIdField = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentIdField" }] : []));
     constructor(menu) {
         super(menu);
     }
@@ -2967,7 +3410,12 @@ class ContextMenuTargetDirective {
     /**
      * Specifies the data which is associated with the target.
      */
-    data;
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
     /**
      * Specifies the target DOM element.
      */
@@ -2976,6 +3424,7 @@ class ContextMenuTargetDirective {
      * @hidden
      */
     hostClass = true;
+    _data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
     constructor(elementRef, targetService) {
         this.targetService = targetService;
         if (elementRef) {
@@ -3039,63 +3488,120 @@ class ContextMenuComponent extends MenuBase {
      *
      * @default 'contextmenu'
      */
-    showOn = CONTEXT_MENU;
+    set showOn(value) {
+        this._showOn.set(value);
+        this.bindShowHandler();
+    }
+    get showOn() {
+        return this._showOn();
+    }
     /**
      * Specifies the element for which the ContextMenu will open ([see example](https://www.telerik.com/kendo-angular-ui/components/menus/contextmenu/target#configuration)).
      */
-    target;
+    set target(value) {
+        this._target.set(value);
+        this.bindShowHandler();
+    }
+    get target() {
+        return this._target();
+    }
     /**
      * Specifies a CSS selector which filters the elements in the target for which the ContextMenu will open
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/menus/contextmenu/target#changing-items-for-specific-targets)).
      */
-    filter;
+    set filter(value) {
+        this._filter.set(value);
+    }
+    get filter() {
+        return this._filter();
+    }
     /**
      * Specifies if the ContextMenu will be aligned to the target or to the `filter` element (if specified).
      *
      * @default false
      */
-    alignToAnchor = false;
+    set alignToAnchor(value) {
+        this._alignToAnchor.set(value);
+    }
+    get alignToAnchor() {
+        return this._alignToAnchor();
+    }
     /**
      * Specifies if the Menu will be vertically rendered ([see example](https://www.telerik.com/kendo-angular-ui/components/menus/contextmenu/orientation)).
      *
      * @default true
      */
-    vertical = true;
+    set vertical(value) {
+        this._vertical.set(value);
+    }
+    get vertical() {
+        return this._vertical();
+    }
     /**
      * Specifies the popup animation.
      *
      * @default true
      */
-    popupAnimate;
+    set popupAnimate(value) {
+        this._popupAnimate.set(value);
+    }
+    get popupAnimate() {
+        return this._popupAnimate();
+    }
     /**
      * Specifies the pivot point of the popup.
      *
      * @default { horizontal: 'left', vertical: 'top' }
      */
-    popupAlign;
+    set popupAlign(value) {
+        this._popupAlign.set(value);
+    }
+    get popupAlign() {
+        return this._popupAlign();
+    }
     /**
      * Specifies the pivot point of the anchor. Applicable if `alignToAnchor` is `true`.
      *
      * @default { horizontal: 'left', vertical: 'bottom' }
      */
-    anchorAlign;
+    set anchorAlign(value) {
+        this._anchorAlign.set(value);
+    }
+    get anchorAlign() {
+        return this._anchorAlign();
+    }
     /**
      * Configures the collision behavior of the popup.
      *
      * @default { horizontal: 'fit', vertical: 'flip' }
      */
-    collision;
+    set collision(value) {
+        this._collision.set(value);
+    }
+    get collision() {
+        return this._collision();
+    }
     /**
      * Defines the container to which the popups will be appended.
      */
-    appendTo;
+    set appendTo(value) {
+        this._appendTo.set(value);
+    }
+    get appendTo() {
+        return this._appendTo();
+    }
     /**
      * Sets the value for the [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) attribute of the ContextMenu.
      *
      * @remarks
      * This property is related to accessibility.
      */
-    ariaLabel;
+    set ariaLabel(value) {
+        this._ariaLabel.set(value);
+    }
+    get ariaLabel() {
+        return this._ariaLabel();
+    }
     /**
      * Fires when the Menu is opened ([see example](https://www.telerik.com/kendo-angular-ui/components/menus/contextmenu/events)).
      */
@@ -3132,6 +3638,17 @@ class ContextMenuComponent extends MenuBase {
     currentTarget;
     directiveTarget;
     activeTarget;
+    _showOn = signal(CONTEXT_MENU, ...(ngDevMode ? [{ debugName: "_showOn" }] : []));
+    _target = signal(undefined, ...(ngDevMode ? [{ debugName: "_target" }] : []));
+    _filter = signal(undefined, ...(ngDevMode ? [{ debugName: "_filter" }] : []));
+    _alignToAnchor = signal(false, ...(ngDevMode ? [{ debugName: "_alignToAnchor" }] : []));
+    _popupAnimate = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupAnimate" }] : []));
+    _popupAlign = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupAlign" }] : []));
+    _anchorAlign = signal(undefined, ...(ngDevMode ? [{ debugName: "_anchorAlign" }] : []));
+    _collision = signal(undefined, ...(ngDevMode ? [{ debugName: "_collision" }] : []));
+    _appendTo = signal(undefined, ...(ngDevMode ? [{ debugName: "_appendTo" }] : []));
+    _ariaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_ariaLabel" }] : []));
+    _vertical = signal(true, ...(ngDevMode ? [{ debugName: "_vertical" }] : []));
     constructor(popupService, service, ngZone, renderer) {
         super();
         this.popupService = popupService;
@@ -3166,11 +3683,6 @@ class ContextMenuComponent extends MenuBase {
             this.createPopup({ anchor: this.currentTarget });
         }
     }
-    ngOnChanges(changes) {
-        if (changes.target || changes.showOn) {
-            this.bindShowHandler();
-        }
-    }
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
             const closeClickSubscription = this.renderer.listen('document', 'mousedown', (e) => {
@@ -3409,7 +3921,7 @@ class ContextMenuComponent extends MenuBase {
                 provide: POPUP_CONTAINER,
                 useFactory: bodyFactory
             }
-        ], queries: [{ propertyName: "contentTemplate", first: true, predicate: ContextMenuTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultContentTemplate", first: true, predicate: ["default"], descendants: true }], exportAs: ["kendoContextMenu"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "contentTemplate", first: true, predicate: ContextMenuTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultContentTemplate", first: true, predicate: ["default"], descendants: true }], exportAs: ["kendoContextMenu"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #default>
             <kendo-menu [items]="rootItems"
                 [appendTo]="appendTo"
@@ -3425,7 +3937,7 @@ class ContextMenuComponent extends MenuBase {
                 [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
             ></kendo-menu>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
@@ -3471,7 +3983,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         </ng-template>
     `,
                     standalone: true,
-                    imports: [MenuComponent]
+                    imports: [MenuComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i5.PopupService }, { type: ContextMenuService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { showOn: [{
                 type: Input