@progress/kendo-angular-menu 3.0.6-dev.202203091409 → 4.0.0-dev.202204191048

package/{dist/fesm2015/index.js → fesm2015/kendo-angular-menu.js}

@@ -2,12 +2,15 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata, __param } from 'tslib';
-import { Injectable, NgZone, EventEmitter, Directive, Optional, TemplateRef, Input, ContentChildren, QueryList, Component, Output, HostBinding, forwardRef, Renderer2, ElementRef, ViewChild, ChangeDetectorRef, isDevMode, NgModule, ViewContainerRef, ContentChild } from '@angular/core';
+import * as i0 from '@angular/core';
+import { Injectable, NgZone, Directive, Optional, Component, Input, ContentChildren, EventEmitter, ElementRef, ViewChild, HostBinding, forwardRef, Output, isDevMode, NgModule, ContentChild } from '@angular/core';
+import * as i3 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { hasObservers, isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
+import { PreventableEvent as PreventableEvent$1, hasObservers, isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
+import * as i6 from '@progress/kendo-angular-popup';
 import { PopupService, POPUP_CONTAINER, PopupModule } from '@progress/kendo-angular-popup';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -17,7 +20,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-menu',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646834920,
+    publishDate: 1650365289,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -45,10 +48,7 @@ const next = (idx, items, dir) => {
 /**
  * @hidden
  */
-let ItemsService = class ItemsService {
-    /**
-     * @hidden
-     */
+class ItemsService {
     constructor() {
         this.items = {};
         this.lists = [];
@@ -143,53 +143,28 @@ let ItemsService = class ItemsService {
     parentIndex(index) {
         return index.replace(PARENT_REGEX, '');
     }
-};
-ItemsService = __decorate([
-    Injectable()
-], ItemsService);
+}
+ItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemsService, decorators: [{
+            type: Injectable
+        }] });
 
+const canPerformAction = (item, action) => !((action === 'open' && item.opened) || (action === 'close' && !item.opened));
 /**
+ * Used to remove cyclic dependency error. Dublicates MenuEvent
  * @hidden
  */
-class PreventableEvent {
-    /**
-     * @hidden
-     */
+class MenuStateEvent extends PreventableEvent$1 {
     constructor(args) {
-        this.prevented = false;
+        super();
         Object.assign(this, args);
     }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    preventDefault() {
-        this.prevented = true;
-    }
-    /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
-     */
-    isDefaultPrevented() {
-        return this.prevented;
-    }
-}
-
-/**
- * Arguments for the `open` and `close` events of the Menu.
- */
-class MenuEvent extends PreventableEvent {
 }
-
-const canPerformAction = (item, action) => !((action === 'open' && item.opened) || (action === 'close' && !item.opened));
 /**
  * @hidden
  */
-let ActionsService = class ActionsService {
+class ActionsService {
     constructor(ngZone, items) {
         this.ngZone = ngZone;
         this.items = items;
@@ -258,7 +233,7 @@ let ActionsService = class ActionsService {
     }
     emit(name, item, domEvent) {
         const owner = this.owner;
-        const eventArgs = new MenuEvent({
+        const eventArgs = new MenuStateEvent({
             sender: owner,
             item: item.item,
             index: item.index,
@@ -337,11 +312,12 @@ let ActionsService = class ActionsService {
             this.close(items[idx]);
         }
     }
-};
-ActionsService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [NgZone, ItemsService])
-], ActionsService);
+}
+ActionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsService, deps: [{ token: i0.NgZone }, { token: ItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
+ActionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: ItemsService }]; } });
 
 const DEFAULT_ACTIVE = '0';
 const NO_SPACE_REGEX = /\S/;
@@ -367,7 +343,7 @@ const resolvedPromise = Promise.resolve(null);
 /**
  * @hidden
  */
-let NavigationService = class NavigationService {
+class NavigationService {
     constructor(items, actions, localization, ngZone) {
         this.items = items;
         this.actions = actions;
@@ -584,20 +560,18 @@ let NavigationService = class NavigationService {
             }
         }
     }
-};
-NavigationService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [ItemsService,
-        ActionsService,
-        LocalizationService,
-        NgZone])
-], NavigationService);
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: ItemsService }, { token: ActionsService }, { token: i3.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ItemsService }, { type: ActionsService }, { type: i3.LocalizationService }, { type: i0.NgZone }]; } });
 
 const DISABLE_OPEN_ON_OVER_DELAY = 500;
 /**
  * @hidden
  */
-let HoverService = class HoverService {
+class HoverService {
     constructor(actions, items) {
         this.actions = actions;
         this.items = items;
@@ -701,13 +675,13 @@ let HoverService = class HoverService {
             }
         }
     }
-};
-HoverService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [ActionsService, ItemsService])
-], HoverService);
+}
+HoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverService, deps: [{ token: ActionsService }, { token: ItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
+HoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ActionsService }, { type: ItemsService }]; } });
 
-/* tslint:disable:max-line-length */
 /**
  * @hidden
  */
@@ -820,30 +794,6 @@ const findInContainer = (element, selector, container) => {
     return match;
 };
 
-/**
- * @hidden
- */
-let ContextMenuService = class ContextMenuService {
-    /**
-     * @hidden
-     */
-    constructor() {
-        this.keydown = new EventEmitter();
-    }
-    emit(name, args) {
-        this.owner.emitMenuEvent(name, args);
-    }
-    hasObservers(name) {
-        return this.owner && hasObservers(this.owner[name]);
-    }
-    leaveMenu(e) {
-        return this.items ? !inMenu(e.target, this.items) : true;
-    }
-};
-ContextMenuService = __decorate([
-    Injectable()
-], ContextMenuService);
-
 /**
  * Represents a template for the Menu items ([see example]({% slug templates_menu %})). To define a template
  * for an item, nest an `<ng-template>` tag with the `kendoMenuItemTemplate` directive inside a `<kendo-menu-item>`
@@ -875,18 +825,21 @@ ContextMenuService = __decorate([
  * }
  * ```
  */
-let ItemTemplateDirective = class ItemTemplateDirective {
+class ItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-ItemTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoMenuItemTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], ItemTemplateDirective);
+}
+ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ItemTemplateDirective, selector: "[kendoMenuItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMenuItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /**
  * Represents a template for the links of the Menu items ([see example]({% slug templates_menu %})). To define a template
@@ -920,18 +873,21 @@ ItemTemplateDirective = __decorate([
  * }
  * ```
  */
-let ItemLinkTemplateDirective = class ItemLinkTemplateDirective {
+class ItemLinkTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-ItemLinkTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoMenuItemLinkTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], ItemLinkTemplateDirective);
+}
+ItemLinkTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemLinkTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ItemLinkTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ItemLinkTemplateDirective, selector: "[kendoMenuItemLinkTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemLinkTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMenuItemLinkTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /**
  * Represents a template for the content of the Menu items ([see example]({% slug templates_menu %})). To define the template,
@@ -963,20 +919,22 @@ ItemLinkTemplateDirective = __decorate([
  * }
  * ```
  */
-let ItemContentTemplateDirective = class ItemContentTemplateDirective {
+class ItemContentTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-ItemContentTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoMenuItemContentTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], ItemContentTemplateDirective);
+}
+ItemContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ItemContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ItemContentTemplateDirective, selector: "[kendoMenuItemContentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMenuItemContentTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
 
-var MenuItemComponent_1;
 /**
  * A component that can be used to specify the Menu items
  * ([more information and examples]({% slug items_menu %})).
@@ -1022,7 +980,7 @@ var MenuItemComponent_1;
  * }
  * ```
  */
-let MenuItemComponent = MenuItemComponent_1 = class MenuItemComponent {
+class MenuItemComponent {
     /**
      * @hidden
      */
@@ -1055,61 +1013,44 @@ let MenuItemComponent = MenuItemComponent_1 = class MenuItemComponent {
             return this.children.toArray().filter(c => c !== this);
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], MenuItemComponent.prototype, "text", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], MenuItemComponent.prototype, "url", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], MenuItemComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], MenuItemComponent.prototype, "cssClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], MenuItemComponent.prototype, "cssStyle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], MenuItemComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], MenuItemComponent.prototype, "data", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], MenuItemComponent.prototype, "separator", void 0);
-__decorate([
-    ContentChildren(ItemTemplateDirective),
-    __metadata("design:type", QueryList)
-], MenuItemComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    ContentChildren(ItemLinkTemplateDirective),
-    __metadata("design:type", QueryList)
-], MenuItemComponent.prototype, "itemLinkTemplate", void 0);
-__decorate([
-    ContentChildren(ItemContentTemplateDirective),
-    __metadata("design:type", QueryList)
-], MenuItemComponent.prototype, "itemContentTemplate", void 0);
-__decorate([
-    ContentChildren(MenuItemComponent_1),
-    __metadata("design:type", QueryList)
-], MenuItemComponent.prototype, "children", void 0);
-MenuItemComponent = MenuItemComponent_1 = __decorate([
-    Component({
-        selector: 'kendo-menu-item',
-        template: ``
-    })
-], MenuItemComponent);
+}
+MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MenuItemComponent, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-menu-item',
+                    template: ``
+                }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], cssStyle: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], itemTemplate: [{
+                type: ContentChildren,
+                args: [ItemTemplateDirective]
+            }], itemLinkTemplate: [{
+                type: ContentChildren,
+                args: [ItemLinkTemplateDirective]
+            }], itemContentTemplate: [{
+                type: ContentChildren,
+                args: [ItemContentTemplateDirective]
+            }], children: [{
+                type: ContentChildren,
+                args: [MenuItemComponent]
+            }] } });
 
 /**
  * @hidden
@@ -1143,289 +1084,160 @@ class MenuBase {
         return this.items || (this.children ? this.children.toArray() : []);
     }
 }
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], MenuBase.prototype, "items", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], MenuBase.prototype, "vertical", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], MenuBase.prototype, "openOnClick", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], MenuBase.prototype, "hoverDelay", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], MenuBase.prototype, "animate", void 0);
-__decorate([
-    ContentChildren(ItemTemplateDirective),
-    __metadata("design:type", QueryList)
-], MenuBase.prototype, "itemTemplate", void 0);
-__decorate([
-    ContentChildren(ItemLinkTemplateDirective),
-    __metadata("design:type", QueryList)
-], MenuBase.prototype, "itemLinkTemplate", void 0);
-__decorate([
-    ContentChildren(MenuItemComponent),
-    __metadata("design:type", QueryList)
-], MenuBase.prototype, "children", void 0);
+MenuBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MenuBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MenuBase, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-menu-base',
+                    template: ``
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], openOnClick: [{
+                type: Input
+            }], hoverDelay: [{
+                type: Input
+            }], animate: [{
+                type: Input
+            }], itemTemplate: [{
+                type: ContentChildren,
+                args: [ItemTemplateDirective]
+            }], itemLinkTemplate: [{
+                type: ContentChildren,
+                args: [ItemLinkTemplateDirective]
+            }], children: [{
+                type: ContentChildren,
+                args: [MenuItemComponent]
+            }] } });
 
-var MenuComponent_1;
 /**
- * Represents the [Kendo UI Menu component for Angular]({% slug overview_menu %}).
- *
- * @example
- * ```ts
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-menu [items]="items">
- *        </kendo-menu>
- *    `
- * })
- * class AppComponent {
- *    public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }] }, { text: 'item2', disabled: true }];
- * }
- * ```
+ * @hidden
  */
-let MenuComponent = MenuComponent_1 = class MenuComponent extends MenuBase {
-    constructor(itemsService, hover, actions, navigation, localization, ngZone, renderer, contextService) {
-        super();
+class ContextMenuService {
+    constructor() {
+        this.keydown = new EventEmitter();
+    }
+    emit(name, args) {
+        this.owner.emitMenuEvent(name, args);
+    }
+    hasObservers(name) {
+        return this.owner && hasObservers(this.owner[name]);
+    }
+    leaveMenu(e) {
+        return this.items ? !inMenu(e.target, this.items) : true;
+    }
+}
+ContextMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+const defined = (value) => typeof value !== 'undefined';
+/**
+ * @hidden
+ */
+const bodyFactory = () => {
+    if (isDocumentAvailable()) {
+        return new ElementRef(document.body);
+    }
+};
+
+const POPUP_ALIGN = {
+    vertical: 'top',
+    horizontal: 'left'
+};
+const POPUP_ALIGN_RTL = {
+    vertical: 'top',
+    horizontal: 'right'
+};
+const VERTICAL_COLLISION = {
+    vertical: 'flip',
+    horizontal: 'fit'
+};
+const HORIZONTAL_COLLISION = {
+    vertical: 'fit',
+    horizontal: 'flip'
+};
+/**
+ * @hidden
+ */
+const POPUP_SETTINGS_RTL = {
+    vertical: {
+        anchor: {
+            vertical: 'bottom',
+            horizontal: 'right'
+        },
+        popup: POPUP_ALIGN_RTL,
+        collision: VERTICAL_COLLISION,
+        animate: 'down'
+    },
+    horizontal: {
+        anchor: {
+            vertical: 'top',
+            horizontal: 'left'
+        },
+        popup: POPUP_ALIGN_RTL,
+        collision: HORIZONTAL_COLLISION,
+        animate: 'left'
+    }
+};
+/**
+ * @hidden
+ */
+const POPUP_SETTINGS = {
+    vertical: {
+        anchor: {
+            vertical: 'bottom',
+            horizontal: 'left'
+        },
+        popup: POPUP_ALIGN,
+        collision: VERTICAL_COLLISION,
+        animate: 'down'
+    },
+    horizontal: {
+        anchor: {
+            vertical: 'top',
+            horizontal: 'right'
+        },
+        popup: POPUP_ALIGN,
+        collision: HORIZONTAL_COLLISION,
+        animate: 'right'
+    }
+};
+
+/* eslint-disable @angular-eslint/component-selector */
+/**
+ * @hidden
+ */
+class ListComponent {
+    constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
         this.itemsService = itemsService;
         this.hover = hover;
         this.actions = actions;
         this.navigation = navigation;
-        this.localization = localization;
-        this.ngZone = ngZone;
         this.renderer = renderer;
-        this.contextService = contextService;
-        /**
-         * Fires when a Menu item is selected ([see example]({% slug routing_menu %})).
-         */
-        this.select = new EventEmitter();
-        /**
-         * Fires when a Menu item is opened.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires when a Menu item is closed.
-         */
-        this.close = new EventEmitter();
-        validatePackage(packageMetadata);
-        this.actions.owner = this;
-        if (contextService) {
-            contextService.items = this.itemsService;
-            this.contextKeyDownSubscription = contextService.keydown.subscribe(this.contextKeyDown.bind(this));
-        }
-    }
-    /**
-     * @hidden
-     */
-    get ariaOrientation() {
-        if (this.vertical) {
-            return 'vertical';
-        }
-    }
-    /**
-     * @hidden
-     */
-    get contextMenuClass() {
-        return Boolean(this.contextService);
+        this.ngZone = ngZone;
+        this.element = element;
+        this.animate = true;
     }
-    get direction() {
-        return this.rtl;
+    hierarchyIndex(index) {
+        return this.itemsService.itemIndex(this.index, index);
     }
-    get rtl() {
-        return this.localization.rtl;
+    ngOnInit() {
+        this.itemsService.addList(this);
+        this.initDomEvents();
     }
-    /**
-     * Opens or closes the specified Menu items.
-     *
-     * @param open - A Boolean value which indicates if the items will be opened or closed.
-     * @param indices - One or more values which represent the hierarchical indices of the items that will be opened or closed.
-     */
-    toggle(open, ...indices) {
-        for (let idx = 0; idx < indices.length; idx++) {
-            const item = this.itemsService.get(indices[idx]);
-            if (item && !item.disabled) {
-                if (open) {
-                    item.open();
-                }
-                else {
-                    item.close();
-                }
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    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();
-        if (this.contextService) {
-            this.contextService.items = null;
-            this.contextKeyDownSubscription.unsubscribe();
-        }
-    }
-    attachCloseClick() {
-        if (!this.closeClickSubscription && isDocumentAvailable()) {
-            this.ngZone.runOutsideAngular(() => {
-                this.closeClickSubscription = this.renderer.listen('document', 'click', (e) => {
-                    if (!inMenu(e.target, this.itemsService)) {
-                        this.hover.openOnOver = false;
-                        this.actions.closeAll();
-                        this.actions.execute();
-                    }
-                });
-            });
-        }
-    }
-    unsubscribeClick() {
-        if (this.closeClickSubscription) {
-            this.closeClickSubscription();
-        }
-    }
-    contextKeyDown(e) {
-        if (!this.itemsService.hasItems) {
-            return;
-        }
-        const keyCode = e.keyCode;
-        const rtl = this.localization.rtl;
-        const first = keyCode === Keys.ArrowDown || keyCode === Keys.ArrowRight;
-        const last = keyCode === Keys.ArrowUp || keyCode === Keys.ArrowLeft;
-        let index;
-        if ((first && !rtl) || (last && rtl)) {
-            index = 'first';
-        }
-        else if ((first && rtl) || (last && !rtl)) {
-            index = 'last';
-        }
-        if (index) {
-            e.preventDefault();
-            this.focus(index);
-        }
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], MenuComponent.prototype, "menuItemTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], MenuComponent.prototype, "menuItemLinkTemplate", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], MenuComponent.prototype, "select", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], MenuComponent.prototype, "open", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], MenuComponent.prototype, "close", void 0);
-__decorate([
-    HostBinding('class.k-rtl'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], MenuComponent.prototype, "direction", null);
-MenuComponent = MenuComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoMenu',
-        providers: [
-            ItemsService,
-            ActionsService,
-            NavigationService,
-            HoverService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.menu'
-            },
-            {
-                provide: MenuBase,
-                useExisting: forwardRef(() => MenuComponent_1)
-            }
-        ],
-        selector: 'kendo-menu',
-        template: `
-        <ul role="menubar"
-            [attr.aria-orientation]="ariaOrientation"
-            kendoMenuList [items]="rootItems" [level]="0" class="k-widget k-reset k-header k-menu"
-            [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
-            [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
-            [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
-            [class.k-menu-horizontal]="!vertical"
-            [class.k-menu-vertical]="vertical"
-            [class.k-context-menu]="contextMenuClass">
-        </ul>
-    `
-    }),
-    __param(7, Optional()),
-    __metadata("design:paramtypes", [ItemsService,
-        HoverService,
-        ActionsService,
-        NavigationService,
-        LocalizationService,
-        NgZone,
-        Renderer2,
-        ContextMenuService])
-], MenuComponent);
-
-/* tslint:disable:component-selector */
-/**
- * @hidden
- */
-let ListComponent = class ListComponent {
-    constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
-        this.itemsService = itemsService;
-        this.hover = hover;
-        this.actions = actions;
-        this.navigation = navigation;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.element = element;
-        this.animate = true;
-    }
-    hierarchyIndex(index) {
-        return this.itemsService.itemIndex(this.index, index);
-    }
-    ngOnInit() {
-        this.itemsService.addList(this);
-        this.initDomEvents();
-    }
-    ngOnDestroy() {
-        this.itemsService.removeList(this);
-        if (this.domSubscriptions) {
-            this.domSubscriptions();
+    ngOnDestroy() {
+        this.itemsService.removeList(this);
+        if (this.domSubscriptions) {
+            this.domSubscriptions();
         }
     }
     initDomEvents() {
@@ -1553,47 +1365,14 @@ let ListComponent = class ListComponent {
         }
         this.actions.execute();
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], ListComponent.prototype, "items", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ListComponent.prototype, "level", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ListComponent.prototype, "index", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ListComponent.prototype, "animate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ListComponent.prototype, "vertical", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ListComponent.prototype, "rtl", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ListComponent.prototype, "openOnClick", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], ListComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], ListComponent.prototype, "itemLinkTemplate", void 0);
-ListComponent = __decorate([
-    Component({
-        selector: '[kendoMenuList]',
-        template: `
+}
+ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "[kendoMenuList]", inputs: { items: "items", level: "level", index: "index", animate: "animate", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n        <ng-container *ngFor=\"let item of items; let idx = index\">\n            <li *ngIf=\"!item.separator\" kendoMenuItem\n                [item]=\"item\" [level]=\"level\" [vertical]=\"vertical\" [animate]=\"animate\" [rtl]=\"rtl\"\n                [itemTemplate]=\"itemTemplate\" [itemLinkTemplate]=\"itemLinkTemplate\" [openOnClick]=\"openOnClick\"\n                [index]=\"hierarchyIndex(idx)\" [siblingIndex]=\"idx\" [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n                [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\"\n                role=\"menuitem\"\n                class=\"k-item k-menu-item\"\n                [class.k-first]=\"idx === 0\" [class.k-last]=\"idx === items.length - 1\"\n                [class.k-state-disabled]=\"item.disabled\"></li>\n            <li *ngIf=\"item.separator\" class=\"k-separator k-item\"\n                role=\"separator\" [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["item", "level", "index", "siblingIndex", "animate", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i5.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoMenuList]',
+                    template: `
         <ng-container *ngFor="let item of items; let idx = index">
             <li *ngIf="!item.separator" kendoMenuItem
                 [item]="item" [level]="level" [vertical]="vertical" [animate]="animate" [rtl]="rtl"
@@ -1610,98 +1389,30 @@ ListComponent = __decorate([
             </li>
         </ng-container>
     `
-    }),
-    __metadata("design:paramtypes", [ItemsService,
-        HoverService,
-        ActionsService,
-        NavigationService,
-        Renderer2,
-        NgZone,
-        ElementRef])
-], ListComponent);
-
-const POPUP_ALIGN = {
-    vertical: 'top',
-    horizontal: 'left'
-};
-const POPUP_ALIGN_RTL = {
-    vertical: 'top',
-    horizontal: 'right'
-};
-const VERTICAL_COLLISION = {
-    vertical: 'flip',
-    horizontal: 'fit'
-};
-const HORIZONTAL_COLLISION = {
-    vertical: 'fit',
-    horizontal: 'flip'
-};
-/**
- * @hidden
- */
-const POPUP_SETTINGS_RTL = {
-    vertical: {
-        anchor: {
-            vertical: 'bottom',
-            horizontal: 'right'
-        },
-        popup: POPUP_ALIGN_RTL,
-        collision: VERTICAL_COLLISION,
-        animate: 'down'
-    },
-    horizontal: {
-        anchor: {
-            vertical: 'top',
-            horizontal: 'left'
-        },
-        popup: POPUP_ALIGN_RTL,
-        collision: HORIZONTAL_COLLISION,
-        animate: 'left'
-    }
-};
-/**
- * @hidden
- */
-const POPUP_SETTINGS = {
-    vertical: {
-        anchor: {
-            vertical: 'bottom',
-            horizontal: 'left'
-        },
-        popup: POPUP_ALIGN,
-        collision: VERTICAL_COLLISION,
-        animate: 'down'
-    },
-    horizontal: {
-        anchor: {
-            vertical: 'top',
-            horizontal: 'right'
-        },
-        popup: POPUP_ALIGN,
-        collision: HORIZONTAL_COLLISION,
-        animate: 'right'
-    }
-};
-
+                }]
+        }], ctorParameters: function () { return [{ type: ItemsService }, { type: HoverService }, { type: ActionsService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { items: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], animate: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], rtl: [{
+                type: Input
+            }], openOnClick: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], itemLinkTemplate: [{
+                type: Input
+            }] } });
 /**
  * @hidden
  */
-const defined = (value) => typeof value !== 'undefined';
-/**
- * @hidden
- */
-const bodyFactory = () => {
-    if (isDocumentAvailable()) {
-        return new ElementRef(document.body);
-    }
-};
-
-const ɵ0$3 = bodyFactory;
-/* tslint:disable:component-selector */
-/**
- * @hidden
- */
-let ItemComponent = class ItemComponent {
+class ItemComponent {
     constructor(itemsService, navigation, changeDetector, renderer, popupService, element) {
         this.itemsService = itemsService;
         this.navigation = navigation;
@@ -1810,212 +1521,462 @@ let ItemComponent = class ItemComponent {
         if (isActive) {
             this.setAttribute('tabindex', '0');
         }
-        else {
-            this.setAttribute('tabindex', '-1');
+        else {
+            this.setAttribute('tabindex', '-1');
+        }
+    }
+    open() {
+        if (!this.destroyed && this.hasContent && !this.opened) {
+            const popupSettings = this.popupSettings;
+            const animate = this.animate ? Object.assign({}, this.animate, {
+                direction: popupSettings.animate
+            }) : false;
+            this.opened = true;
+            this.popupRef = this.popupService.open({
+                popupAlign: popupSettings.popup,
+                anchorAlign: popupSettings.anchor,
+                collision: popupSettings.collision,
+                anchor: this.element,
+                positionMode: 'absolute',
+                content: this.popupTemplate,
+                popupClass: {
+                    'k-rtl': this.rtl,
+                    'k-menu-popup': true
+                },
+                animate: animate
+            });
+            this.setAttribute('aria-expanded', 'true');
+            this.setAttribute('aria-owns', this.childId);
+            this.changeDetector.detectChanges();
+        }
+    }
+    close() {
+        if (!this.destroyed && this.opened) {
+            this.opened = false;
+            if (this.popupRef) {
+                this.popupRef.close();
+                this.popupRef = null;
+            }
+            this.changeDetector.detectChanges();
+            this.setAttribute('aria-expanded', 'false');
+            this.renderer.removeAttribute(this.element.nativeElement, 'aria-owns');
+        }
+    }
+    navigate() {
+        let link;
+        if (this.linkTemplate) {
+            link = this.element.nativeElement.querySelector('a.k-menu-link');
+        }
+        else if (this.hasLink) {
+            link = this.link.nativeElement;
+        }
+        if (link) {
+            this.navigating = true;
+            link.click();
+            this.navigating = false;
+        }
+    }
+    setAttribute(name, value) {
+        this.renderer.setAttribute(this.element.nativeElement, name, value);
+    }
+}
+ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemComponent, deps: [{ token: ItemsService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i6.PopupService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ItemComponent, selector: "[kendoMenuItem]", inputs: { item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-expanded": "this.expanded", "attr.aria-label": "this.label", "attr.tabindex": "this.activeId" } }, 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 }], ngImport: i0, template: `
+    <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
+        [class.k-state-active]="opened" role="presentation">
+        <ng-template [ngTemplateOutlet]="itemcontent">
+        </ng-template>
+    </span>
+    <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
+        [class.k-state-active]="opened" tabindex="-1" role="presentation">
+        <ng-template [ngTemplateOutlet]="itemcontent">
+        </ng-template>
+    </a>
+    <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
+        [ngTemplateOutletContext]="{ item: item, index: index }">
+    </ng-template>
+
+    <div class="k-content" *ngIf="item.content" role="presentation">
+        <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
+        </ng-template>
+    </div>
+
+    <ng-template #popupTemplate>
+        <ul kendoMenuList
+            [attr.id]="childId"
+            [animate]="animate"
+            [rtl]="rtl"
+            [vertical]="vertical"
+            [openOnClick]="openOnClick"
+            [items]="children"
+            [level]="level + 1"
+            [index]="index"
+            [itemTemplate]="itemTemplate"
+            [itemLinkTemplate]="itemLinkTemplate"
+            role="menu"
+            class="k-group k-menu-group k-reset">
+        </ul>
+    </ng-template>
+
+    <ng-template #itemcontent>
+        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
+        <ng-container *ngIf="!template">
+            <span class="k-menu-link-text">{{ item.text }}</span>
+        </ng-container>
+        <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
+        </ng-template>
+        <span class="k-icon k-menu-expand-arrow" *ngIf="hasContent"
+            role="presentation"
+            [class.k-i-arrow-60-down]="!horizontal"
+            [class.k-i-arrow-60-right]="horizontal && !rtl"
+            [class.k-i-arrow-60-left]="horizontal && rtl">
+        </span>
+    </ng-template>
+  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [PopupService, {
+                            provide: POPUP_CONTAINER,
+                            useFactory: bodyFactory
+                        }],
+                    selector: '[kendoMenuItem]',
+                    template: `
+    <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
+        [class.k-state-active]="opened" role="presentation">
+        <ng-template [ngTemplateOutlet]="itemcontent">
+        </ng-template>
+    </span>
+    <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
+        [class.k-state-active]="opened" tabindex="-1" role="presentation">
+        <ng-template [ngTemplateOutlet]="itemcontent">
+        </ng-template>
+    </a>
+    <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
+        [ngTemplateOutletContext]="{ item: item, index: index }">
+    </ng-template>
+
+    <div class="k-content" *ngIf="item.content" role="presentation">
+        <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
+        </ng-template>
+    </div>
+
+    <ng-template #popupTemplate>
+        <ul kendoMenuList
+            [attr.id]="childId"
+            [animate]="animate"
+            [rtl]="rtl"
+            [vertical]="vertical"
+            [openOnClick]="openOnClick"
+            [items]="children"
+            [level]="level + 1"
+            [index]="index"
+            [itemTemplate]="itemTemplate"
+            [itemLinkTemplate]="itemLinkTemplate"
+            role="menu"
+            class="k-group k-menu-group k-reset">
+        </ul>
+    </ng-template>
+
+    <ng-template #itemcontent>
+        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
+        <ng-container *ngIf="!template">
+            <span class="k-menu-link-text">{{ item.text }}</span>
+        </ng-container>
+        <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
+        </ng-template>
+        <span class="k-icon k-menu-expand-arrow" *ngIf="hasContent"
+            role="presentation"
+            [class.k-i-arrow-60-down]="!horizontal"
+            [class.k-i-arrow-60-right]="horizontal && !rtl"
+            [class.k-i-arrow-60-left]="horizontal && rtl">
+        </span>
+    </ng-template>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: ItemsService }, { type: NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i6.PopupService }, { type: i0.ElementRef }]; }, propDecorators: { item: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], siblingIndex: [{
+                type: Input
+            }], animate: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], rtl: [{
+                type: Input
+            }], openOnClick: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], itemLinkTemplate: [{
+                type: Input
+            }], link: [{
+                type: ViewChild,
+                args: ['link', { static: false }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], disabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], hasPopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], expanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], label: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], activeId: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });
+
+/**
+ * Represents the [Kendo UI Menu component for Angular]({% slug overview_menu %}).
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-menu [items]="items">
+ *        </kendo-menu>
+ *    `
+ * })
+ * class AppComponent {
+ *    public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }] }, { text: 'item2', disabled: true }];
+ * }
+ * ```
+ */
+class MenuComponent extends MenuBase {
+    constructor(itemsService, hover, actions, navigation, localization, ngZone, renderer, contextService) {
+        super();
+        this.itemsService = itemsService;
+        this.hover = hover;
+        this.actions = actions;
+        this.navigation = navigation;
+        this.localization = localization;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.contextService = contextService;
+        /**
+         * Fires when a Menu item is selected ([see example]({% slug routing_menu %})).
+         */
+        this.select = new EventEmitter();
+        /**
+         * Fires when a Menu item is opened.
+         */
+        this.open = new EventEmitter();
+        /**
+         * Fires when a Menu item is closed.
+         */
+        this.close = new EventEmitter();
+        validatePackage(packageMetadata);
+        this.actions.owner = this;
+        if (contextService) {
+            contextService.items = this.itemsService;
+            this.contextKeyDownSubscription = contextService.keydown.subscribe(this.contextKeyDown.bind(this));
+        }
+    }
+    /**
+     * @hidden
+     */
+    get ariaOrientation() {
+        if (this.vertical) {
+            return 'vertical';
+        }
+    }
+    /**
+     * @hidden
+     */
+    get contextMenuClass() {
+        return Boolean(this.contextService);
+    }
+    get direction() {
+        return this.rtl;
+    }
+    get rtl() {
+        return this.localization.rtl;
+    }
+    /**
+     * Opens or closes the specified Menu items.
+     *
+     * @param open - A Boolean value which indicates if the items will be opened or closed.
+     * @param indices - One or more values which represent the hierarchical indices of the items that will be opened or closed.
+     */
+    toggle(open, ...indices) {
+        for (let idx = 0; idx < indices.length; idx++) {
+            const item = this.itemsService.get(indices[idx]);
+            if (item && !item.disabled) {
+                if (open) {
+                    item.open();
+                }
+                else {
+                    item.close();
+                }
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    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();
+        if (this.contextService) {
+            this.contextService.items = null;
+            this.contextKeyDownSubscription.unsubscribe();
         }
     }
-    open() {
-        if (!this.destroyed && this.hasContent && !this.opened) {
-            const popupSettings = this.popupSettings;
-            const animate = this.animate ? Object.assign({}, this.animate, {
-                direction: popupSettings.animate
-            }) : false;
-            this.opened = true;
-            this.popupRef = this.popupService.open({
-                popupAlign: popupSettings.popup,
-                anchorAlign: popupSettings.anchor,
-                collision: popupSettings.collision,
-                anchor: this.element,
-                positionMode: 'absolute',
-                content: this.popupTemplate,
-                popupClass: {
-                    'k-rtl': this.rtl,
-                    'k-menu-popup': true
-                },
-                animate: animate
+    attachCloseClick() {
+        if (!this.closeClickSubscription && isDocumentAvailable()) {
+            this.ngZone.runOutsideAngular(() => {
+                this.closeClickSubscription = this.renderer.listen('document', 'click', (e) => {
+                    if (!inMenu(e.target, this.itemsService)) {
+                        this.hover.openOnOver = false;
+                        this.actions.closeAll();
+                        this.actions.execute();
+                    }
+                });
             });
-            this.setAttribute('aria-expanded', 'true');
-            this.setAttribute('aria-owns', this.childId);
-            this.changeDetector.detectChanges();
         }
     }
-    close() {
-        if (!this.destroyed && this.opened) {
-            this.opened = false;
-            if (this.popupRef) {
-                this.popupRef.close();
-                this.popupRef = null;
-            }
-            this.changeDetector.detectChanges();
-            this.setAttribute('aria-expanded', 'false');
-            this.renderer.removeAttribute(this.element.nativeElement, 'aria-owns');
+    unsubscribeClick() {
+        if (this.closeClickSubscription) {
+            this.closeClickSubscription();
         }
     }
-    navigate() {
-        let link;
-        if (this.linkTemplate) {
-            link = this.element.nativeElement.querySelector('a.k-menu-link');
+    contextKeyDown(e) {
+        if (!this.itemsService.hasItems) {
+            return;
         }
-        else if (this.hasLink) {
-            link = this.link.nativeElement;
+        const keyCode = e.keyCode;
+        const rtl = this.localization.rtl;
+        const first = keyCode === Keys.ArrowDown || keyCode === Keys.ArrowRight;
+        const last = keyCode === Keys.ArrowUp || keyCode === Keys.ArrowLeft;
+        let index;
+        if ((first && !rtl) || (last && rtl)) {
+            index = 'first';
         }
-        if (link) {
-            this.navigating = true;
-            link.click();
-            this.navigating = false;
+        else if ((first && rtl) || (last && !rtl)) {
+            index = 'last';
+        }
+        if (index) {
+            e.preventDefault();
+            this.focus(index);
         }
     }
-    setAttribute(name, value) {
-        this.renderer.setAttribute(this.element.nativeElement, name, value);
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ItemComponent.prototype, "item", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ItemComponent.prototype, "level", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ItemComponent.prototype, "index", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ItemComponent.prototype, "siblingIndex", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ItemComponent.prototype, "animate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ItemComponent.prototype, "vertical", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ItemComponent.prototype, "rtl", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ItemComponent.prototype, "openOnClick", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], ItemComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], ItemComponent.prototype, "itemLinkTemplate", void 0);
-__decorate([
-    ViewChild('link', { static: false }),
-    __metadata("design:type", ElementRef)
-], ItemComponent.prototype, "link", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ItemComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    HostBinding('attr.aria-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ItemComponent.prototype, "disabled", null);
-__decorate([
-    HostBinding('attr.aria-haspopup'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ItemComponent.prototype, "hasPopup", null);
-__decorate([
-    HostBinding('attr.aria-expanded'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ItemComponent.prototype, "expanded", null);
-__decorate([
-    HostBinding('attr.aria-label'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ItemComponent.prototype, "label", null);
-__decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ItemComponent.prototype, "activeId", null);
-ItemComponent = __decorate([
-    Component({
-        providers: [PopupService, {
-                provide: POPUP_CONTAINER,
-                useFactory: ɵ0$3
-            }],
-        selector: '[kendoMenuItem]',
-        template: `
-    <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
-        [class.k-state-active]="opened" role="presentation">
-        <ng-template [ngTemplateOutlet]="itemcontent">
-        </ng-template>
-    </span>
-    <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
-        [class.k-state-active]="opened" tabindex="-1" role="presentation">
-        <ng-template [ngTemplateOutlet]="itemcontent">
-        </ng-template>
-    </a>
-    <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
-        [ngTemplateOutletContext]="{ item: item, index: index }">
-    </ng-template>
-
-    <div class="k-content" *ngIf="item.content" role="presentation">
-        <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
-        </ng-template>
-    </div>
-
-    <ng-template #popupTemplate>
-        <ul kendoMenuList
-            [attr.id]="childId"
-            [animate]="animate"
-            [rtl]="rtl"
-            [vertical]="vertical"
-            [openOnClick]="openOnClick"
-            [items]="children"
-            [level]="level + 1"
-            [index]="index"
-            [itemTemplate]="itemTemplate"
-            [itemLinkTemplate]="itemLinkTemplate"
-            role="menu"
-            class="k-group k-menu-group k-reset">
-        </ul>
-    </ng-template>
-
-    <ng-template #itemcontent>
-        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
-        <ng-container *ngIf="!template">
-            <span class="k-menu-link-text">{{ item.text }}</span>
-        </ng-container>
-        <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
-        </ng-template>
-        <span class="k-icon k-menu-expand-arrow" *ngIf="hasContent"
-            role="presentation"
-            [class.k-i-arrow-60-down]="!horizontal"
-            [class.k-i-arrow-60-right]="horizontal && !rtl"
-            [class.k-i-arrow-60-left]="horizontal && rtl">
-        </span>
-    </ng-template>
-  `
-    }),
-    __metadata("design:paramtypes", [ItemsService,
+}
+MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i3.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MenuComponent, selector: "kendo-menu", inputs: { menuItemTemplate: "menuItemTemplate", menuItemLinkTemplate: "menuItemLinkTemplate" }, outputs: { select: "select", open: "open", close: "close" }, host: { properties: { "class.k-rtl": "this.direction" } }, providers: [
+        ItemsService,
+        ActionsService,
         NavigationService,
-        ChangeDetectorRef,
-        Renderer2,
-        PopupService,
-        ElementRef])
-], ItemComponent);
+        HoverService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.menu'
+        },
+        {
+            provide: MenuBase,
+            useExisting: forwardRef(() => MenuComponent)
+        }
+    ], exportAs: ["kendoMenu"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <ul role="menubar"
+            [attr.aria-orientation]="ariaOrientation"
+            kendoMenuList [items]="rootItems" [level]="0" class="k-widget k-reset k-header k-menu"
+            [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
+            [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
+            [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
+            [class.k-menu-horizontal]="!vertical"
+            [class.k-menu-vertical]="vertical"
+            [class.k-context-menu]="contextMenuClass">
+        </ul>
+    `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoMenu',
+                    providers: [
+                        ItemsService,
+                        ActionsService,
+                        NavigationService,
+                        HoverService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.menu'
+                        },
+                        {
+                            provide: MenuBase,
+                            useExisting: forwardRef(() => MenuComponent)
+                        }
+                    ],
+                    selector: 'kendo-menu',
+                    template: `
+        <ul role="menubar"
+            [attr.aria-orientation]="ariaOrientation"
+            kendoMenuList [items]="rootItems" [level]="0" class="k-widget k-reset k-header k-menu"
+            [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
+            [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
+            [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
+            [class.k-menu-horizontal]="!vertical"
+            [class.k-menu-vertical]="vertical"
+            [class.k-context-menu]="contextMenuClass">
+        </ul>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: ItemsService }, { type: HoverService }, { type: ActionsService }, { type: NavigationService }, { type: i3.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ContextMenuService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { menuItemTemplate: [{
+                type: Input
+            }], menuItemLinkTemplate: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], direction: [{
+                type: HostBinding,
+                args: ['class.k-rtl']
+            }] } });
 
 /**
  * Represents a directive that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
  * of the items to apply the default styling and behavior.
  */
-let LinkDirective = class LinkDirective {
+class LinkDirective {
     constructor(itemsService) {
         this.itemsService = itemsService;
         this.hostClasses = true;
@@ -2031,41 +1992,39 @@ let LinkDirective = class LinkDirective {
         }
         this.item = this.itemsService.get(this.index) || {};
     }
-};
-__decorate([
-    Input('kendoMenuItemLink'),
-    __metadata("design:type", String)
-], LinkDirective.prototype, "index", void 0);
-__decorate([
-    HostBinding('class.k-link'),
-    HostBinding('class.k-menu-link'),
-    __metadata("design:type", Boolean)
-], LinkDirective.prototype, "hostClasses", void 0);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", String)
-], LinkDirective.prototype, "role", void 0);
-__decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", String)
-], LinkDirective.prototype, "tabindex", void 0);
-__decorate([
-    HostBinding('class.k-state-active'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], LinkDirective.prototype, "activeClass", null);
-LinkDirective = __decorate([
-    Directive({
-        selector: '[kendoMenuItemLink]'
-    }),
-    __metadata("design:paramtypes", [ItemsService])
-], LinkDirective);
+}
+LinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinkDirective, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Directive });
+LinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LinkDirective, selector: "[kendoMenuItemLink]", inputs: { index: ["kendoMenuItemLink", "index"] }, host: { properties: { "class.k-link": "this.hostClasses", "class.k-menu-link": "this.hostClasses", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "class.k-state-active": "this.activeClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMenuItemLink]'
+                }]
+        }], ctorParameters: function () { return [{ type: ItemsService }]; }, propDecorators: { index: [{
+                type: Input,
+                args: ['kendoMenuItemLink']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-link']
+            }, {
+                type: HostBinding,
+                args: ['class.k-menu-link']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], activeClass: [{
+                type: HostBinding,
+                args: ['class.k-state-active']
+            }] } });
 
 /**
  * Represents a directive that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
  * of the items to render the default expand arrow.
  */
-let ExpandArrowDirective = class ExpandArrowDirective {
+class ExpandArrowDirective {
     constructor(itemsService) {
         this.itemsService = itemsService;
         this.hostClasses = true;
@@ -2086,41 +2045,73 @@ let ExpandArrowDirective = class ExpandArrowDirective {
         }
         this.item = this.itemsService.get(this.index) || {};
     }
-};
-__decorate([
-    Input('kendoMenuExpandArrow'),
-    __metadata("design:type", String)
-], ExpandArrowDirective.prototype, "index", void 0);
-__decorate([
-    HostBinding('class.k-icon'),
-    HostBinding('class.k-menu-expand-arrow'),
-    __metadata("design:type", Boolean)
-], ExpandArrowDirective.prototype, "hostClasses", void 0);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", String)
-], ExpandArrowDirective.prototype, "role", void 0);
-__decorate([
-    HostBinding('class.k-i-arrow-60-down'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ExpandArrowDirective.prototype, "arrowDown", null);
-__decorate([
-    HostBinding('class.k-i-arrow-60-right'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ExpandArrowDirective.prototype, "arrowRight", null);
-__decorate([
-    HostBinding('class.k-i-arrow-60-left'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ExpandArrowDirective.prototype, "arrowLeft", null);
-ExpandArrowDirective = __decorate([
-    Directive({
-        selector: '[kendoMenuExpandArrow]'
-    }),
-    __metadata("design:paramtypes", [ItemsService])
-], ExpandArrowDirective);
+}
+ExpandArrowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandArrowDirective, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Directive });
+ExpandArrowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ExpandArrowDirective, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-icon": "this.hostClasses", "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role", "class.k-i-arrow-60-down": "this.arrowDown", "class.k-i-arrow-60-right": "this.arrowRight", "class.k-i-arrow-60-left": "this.arrowLeft" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpandArrowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMenuExpandArrow]'
+                }]
+        }], ctorParameters: function () { return [{ type: ItemsService }]; }, propDecorators: { index: [{
+                type: Input,
+                args: ['kendoMenuExpandArrow']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-icon']
+            }, {
+                type: HostBinding,
+                args: ['class.k-menu-expand-arrow']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], arrowDown: [{
+                type: HostBinding,
+                args: ['class.k-i-arrow-60-down']
+            }], arrowRight: [{
+                type: HostBinding,
+                args: ['class.k-i-arrow-60-right']
+            }], arrowLeft: [{
+                type: HostBinding,
+                args: ['class.k-i-arrow-60-left']
+            }] } });
+
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        this.prevented = false;
+        Object.assign(this, args);
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Arguments for the `open` and `close` events of the Menu.
+ */
+class MenuEvent extends PreventableEvent {
+}
 
 /**
  * Arguments for the `select` event of the Menu.
@@ -2154,10 +2145,18 @@ class BindingDirectiveBase {
         this.menu.items = this.data ? this.mapItems(this.data) : [];
     }
 }
+BindingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BindingDirectiveBase, deps: [{ token: MenuBase }], target: i0.ɵɵFactoryTarget.Directive });
+BindingDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BindingDirectiveBase, selector: "kendoBindingBase", usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BindingDirectiveBase, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line
+                    selector: 'kendoBindingBase'
+                }]
+        }], ctorParameters: function () { return [{ type: MenuBase }]; } });
 
 const FIELD_REGEX = /\[(?:(\d+)|['"](.*?)['"])\]|((?:(?!\[.*?\]|\.).)+)/g;
 const getterCache = {};
-// tslint:disable-next-line:no-string-literal
 getterCache['undefined'] = (obj) => obj;
 /**
  * @hidden
@@ -2185,11 +2184,10 @@ const getter = (field) => {
 const last = (arr) => arr[arr.length - 1];
 
 const getField = (field, level) => Array.isArray(field) ? field[level] || last(field) : field;
-/* tslint:disable:no-input-rename */
 /**
  * A directive that converts the provided hierarchical data to [MenuItems]({% slug api_menu_menuitem %}) and binds them to the Menu.
  */
-let HierarchyBindingDirective = class HierarchyBindingDirective extends BindingDirectiveBase {
+class HierarchyBindingDirective extends BindingDirectiveBase {
     constructor(menu) {
         super(menu);
     }
@@ -2218,56 +2216,40 @@ let HierarchyBindingDirective = class HierarchyBindingDirective extends BindingD
             return item[field];
         }
     }
-};
-__decorate([
-    Input("kendoMenuHierarchyBinding"),
-    __metadata("design:type", Array)
-], HierarchyBindingDirective.prototype, "data", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], HierarchyBindingDirective.prototype, "textField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], HierarchyBindingDirective.prototype, "urlField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], HierarchyBindingDirective.prototype, "iconField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], HierarchyBindingDirective.prototype, "disabledField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], HierarchyBindingDirective.prototype, "cssClassField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], HierarchyBindingDirective.prototype, "cssStyleField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], HierarchyBindingDirective.prototype, "separatorField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], HierarchyBindingDirective.prototype, "childrenField", void 0);
-HierarchyBindingDirective = __decorate([
-    Directive({
-        exportAs: 'kendoMenuHierarchyBinding',
-        selector: '[kendoMenuHierarchyBinding]'
-    }),
-    __metadata("design:paramtypes", [MenuBase])
-], HierarchyBindingDirective);
+}
+HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: MenuBase }], target: i0.ɵɵFactoryTarget.Directive });
+HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HierarchyBindingDirective, selector: "[kendoMenuHierarchyBinding]", inputs: { data: ["kendoMenuHierarchyBinding", "data"], textField: "textField", urlField: "urlField", iconField: "iconField", disabledField: "disabledField", cssClassField: "cssClassField", cssStyleField: "cssStyleField", separatorField: "separatorField", childrenField: "childrenField" }, exportAs: ["kendoMenuHierarchyBinding"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HierarchyBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoMenuHierarchyBinding',
+                    selector: '[kendoMenuHierarchyBinding]'
+                }]
+        }], ctorParameters: function () { return [{ type: MenuBase }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["kendoMenuHierarchyBinding"]
+            }], textField: [{
+                type: Input
+            }], urlField: [{
+                type: Input
+            }], iconField: [{
+                type: Input
+            }], disabledField: [{
+                type: Input
+            }], cssClassField: [{
+                type: Input
+            }], cssStyleField: [{
+                type: Input
+            }], separatorField: [{
+                type: Input
+            }], childrenField: [{
+                type: Input
+            }] } });
 
-/* tslint:disable:no-input-rename */
 /**
  * A directive that converts the provided flat data to [MenuItems]({% slug api_menu_menuitem %}) and binds them to the Menu.
  */
-let FlatBindingDirective = class FlatBindingDirective extends BindingDirectiveBase {
+class FlatBindingDirective extends BindingDirectiveBase {
     constructor(menu) {
         super(menu);
     }
@@ -2306,54 +2288,37 @@ let FlatBindingDirective = class FlatBindingDirective extends BindingDirectiveBa
         }
         return result;
     }
-};
-__decorate([
-    Input("kendoMenuFlatBinding"),
-    __metadata("design:type", Array)
-], FlatBindingDirective.prototype, "data", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FlatBindingDirective.prototype, "textField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FlatBindingDirective.prototype, "urlField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FlatBindingDirective.prototype, "iconField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FlatBindingDirective.prototype, "disabledField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FlatBindingDirective.prototype, "cssClassField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FlatBindingDirective.prototype, "cssStyleField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FlatBindingDirective.prototype, "separatorField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FlatBindingDirective.prototype, "idField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FlatBindingDirective.prototype, "parentIdField", void 0);
-FlatBindingDirective = __decorate([
-    Directive({
-        exportAs: 'kendoMenuFlatBinding',
-        selector: '[kendoMenuFlatBinding]'
-    }),
-    __metadata("design:paramtypes", [MenuBase])
-], FlatBindingDirective);
+}
+FlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatBindingDirective, deps: [{ token: MenuBase }], target: i0.ɵɵFactoryTarget.Directive });
+FlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FlatBindingDirective, selector: "[kendoMenuFlatBinding]", inputs: { data: ["kendoMenuFlatBinding", "data"], textField: "textField", urlField: "urlField", iconField: "iconField", disabledField: "disabledField", cssClassField: "cssClassField", cssStyleField: "cssStyleField", separatorField: "separatorField", idField: "idField", parentIdField: "parentIdField" }, exportAs: ["kendoMenuFlatBinding"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoMenuFlatBinding',
+                    selector: '[kendoMenuFlatBinding]'
+                }]
+        }], ctorParameters: function () { return [{ type: MenuBase }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["kendoMenuFlatBinding"]
+            }], textField: [{
+                type: Input
+            }], urlField: [{
+                type: Input
+            }], iconField: [{
+                type: Input
+            }], disabledField: [{
+                type: Input
+            }], cssClassField: [{
+                type: Input
+            }], cssStyleField: [{
+                type: Input
+            }], separatorField: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], parentIdField: [{
+                type: Input
+            }] } });
 
 const COMPONENT_EXPORTS = [
     MenuComponent,
@@ -2366,7 +2331,7 @@ const COMPONENT_EXPORTS = [
     LinkDirective,
     ExpandArrowDirective
 ];
-const COMPONENT_DIRECTIVES = [
+const COMPONENT_DIRECTIVES$1 = [
     ...COMPONENT_EXPORTS,
     ListComponent,
     ItemComponent
@@ -2403,15 +2368,36 @@ const COMPONENT_DIRECTIVES = [
  *
  * ```
  */
-let MenuModule = class MenuModule {
-};
-MenuModule = __decorate([
-    NgModule({
-        declarations: [COMPONENT_DIRECTIVES],
-        exports: [COMPONENT_EXPORTS],
-        imports: [PopupModule, CommonModule]
-    })
-], MenuModule);
+class MenuModule {
+}
+MenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuModule, declarations: [MenuComponent,
+        MenuItemComponent,
+        ItemTemplateDirective,
+        ItemLinkTemplateDirective,
+        ItemContentTemplateDirective,
+        HierarchyBindingDirective,
+        FlatBindingDirective,
+        LinkDirective,
+        ExpandArrowDirective, ListComponent,
+        ItemComponent], imports: [PopupModule, CommonModule], exports: [MenuComponent,
+        MenuItemComponent,
+        ItemTemplateDirective,
+        ItemLinkTemplateDirective,
+        ItemContentTemplateDirective,
+        HierarchyBindingDirective,
+        FlatBindingDirective,
+        LinkDirective,
+        ExpandArrowDirective] });
+MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuModule, imports: [[PopupModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [COMPONENT_DIRECTIVES$1],
+                    exports: [COMPONENT_EXPORTS],
+                    imports: [PopupModule, CommonModule]
+                }]
+        }] });
 
 /**
  * Arguments for the `open` and `close` events of the ContextMenu.
@@ -2442,23 +2428,26 @@ class ContextMenuPopupEvent extends PreventableEvent {
  * {% embed_file shared/main.ts %}
  * {% endmeta %}
  */
-let ContextMenuTemplateDirective = class ContextMenuTemplateDirective {
+class ContextMenuTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-ContextMenuTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoContextMenuTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], ContextMenuTemplateDirective);
+}
+ContextMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ContextMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ContextMenuTemplateDirective, selector: "[kendoContextMenuTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoContextMenuTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /**
  * @hidden
  */
-let ContextMenuItemsService = class ContextMenuItemsService {
+class ContextMenuItemsService {
     constructor(contextService) {
         this.contextService = contextService;
     }
@@ -2467,19 +2456,17 @@ let ContextMenuItemsService = class ContextMenuItemsService {
             return this.contextService.items.get(index);
         }
     }
-};
-ContextMenuItemsService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [ContextMenuService])
-], ContextMenuItemsService);
+}
+ContextMenuItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuItemsService, deps: [{ token: ContextMenuService }], target: i0.ɵɵFactoryTarget.Injectable });
+ContextMenuItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuItemsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuItemsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ContextMenuService }]; } });
 
 /**
  * @hidden
  */
-let ContextMenuTargetService = class ContextMenuTargetService {
-    /**
-     * @hidden
-     */
+class ContextMenuTargetService {
     constructor() {
         this.targets = [];
     }
@@ -2493,15 +2480,17 @@ let ContextMenuTargetService = class ContextMenuTargetService {
     find(targetElement) {
         return this.targets.find(target => target.element === targetElement);
     }
-};
-ContextMenuTargetService = __decorate([
-    Injectable()
-], ContextMenuTargetService);
+}
+ContextMenuTargetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTargetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextMenuTargetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTargetService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTargetService, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * Specifies a container for the [targets]({% slug api_menu_contextmenutargetdirective %}) of the ContextMenu.
  */
-let ContextMenuTargetContainerDirective = class ContextMenuTargetContainerDirective {
+class ContextMenuTargetContainerDirective {
     /**
      * @hidden
      */
@@ -2511,15 +2500,17 @@ let ContextMenuTargetContainerDirective = class ContextMenuTargetContainerDirect
             this.element = elementRef.nativeElement;
         }
     }
-};
-ContextMenuTargetContainerDirective = __decorate([
-    Directive({
-        selector: '[kendoContextMenuTargetContainer]',
-        exportAs: 'kendoContextMenuTargetContainer',
-        providers: [ContextMenuTargetService]
-    }),
-    __metadata("design:paramtypes", [ElementRef, ContextMenuTargetService])
-], ContextMenuTargetContainerDirective);
+}
+ContextMenuTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTargetContainerDirective, deps: [{ token: i0.ElementRef }, { token: ContextMenuTargetService }], target: i0.ɵɵFactoryTarget.Directive });
+ContextMenuTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ContextMenuTargetContainerDirective, selector: "[kendoContextMenuTargetContainer]", providers: [ContextMenuTargetService], exportAs: ["kendoContextMenuTargetContainer"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTargetContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoContextMenuTargetContainer]',
+                    exportAs: 'kendoContextMenuTargetContainer',
+                    providers: [ContextMenuTargetService]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ContextMenuTargetService }]; } });
 
 /**
  * @hidden
@@ -2529,7 +2520,7 @@ const TARGET_CLASS = 'k-contextmenu-target';
  * Specifies a [target]({% slug api_menu_contextmenutargetdirective %}) for the ContextMenu
  * ([see example]({% slug target_contextmenu %}#toc-directives)).
  */
-let ContextMenuTargetDirective = class ContextMenuTargetDirective {
+class ContextMenuTargetDirective {
     constructor(elementRef, targetService) {
         this.targetService = targetService;
         /**
@@ -2544,30 +2535,28 @@ let ContextMenuTargetDirective = class ContextMenuTargetDirective {
     ngOnDestroy() {
         this.targetService.remove(this);
     }
-};
-__decorate([
-    Input('kendoContextMenuTarget'),
-    __metadata("design:type", Object)
-], ContextMenuTargetDirective.prototype, "data", void 0);
-__decorate([
-    HostBinding(`class.${TARGET_CLASS}`),
-    __metadata("design:type", Boolean)
-], ContextMenuTargetDirective.prototype, "hostClass", void 0);
-ContextMenuTargetDirective = __decorate([
-    Directive({
-        selector: '[kendoContextMenuTarget]',
-        exportAs: 'kendoContextMenuTarget'
-    }),
-    __metadata("design:paramtypes", [ElementRef, ContextMenuTargetService])
-], ContextMenuTargetDirective);
+}
+ContextMenuTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTargetDirective, deps: [{ token: i0.ElementRef }, { token: ContextMenuTargetService }], target: i0.ɵɵFactoryTarget.Directive });
+ContextMenuTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ContextMenuTargetDirective, selector: "[kendoContextMenuTarget]", inputs: { data: ["kendoContextMenuTarget", "data"] }, host: { properties: { "class.k-contextmenu-target": "this.hostClass" } }, exportAs: ["kendoContextMenuTarget"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoContextMenuTarget]',
+                    exportAs: 'kendoContextMenuTarget'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ContextMenuTargetService }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['kendoContextMenuTarget']
+            }], hostClass: [{
+                type: HostBinding,
+                args: [`class.${TARGET_CLASS}`]
+            }] } });
 
-var ContextMenuComponent_1;
 const CONTEXT_MENU = 'contextmenu';
 const DEFAULT_ANCHOR_ALIGN = { horizontal: 'left', vertical: 'bottom' };
 const DEFAULT_POPUP_ALIGN = { horizontal: 'left', vertical: 'top' };
 const DEFAULT_COLLISION = { horizontal: 'fit', vertical: 'flip' };
 const preventDefault = e => e.preventDefault();
-const ɵ1$2 = bodyFactory;
 /**
  * Represents the [Kendo UI ContextMenu component for Angular]({% slug overview_contextmenu %}).
  *
@@ -2587,7 +2576,7 @@ const ɵ1$2 = bodyFactory;
  * }
  * ```
  */
-let ContextMenuComponent = ContextMenuComponent_1 = class ContextMenuComponent extends MenuBase {
+class ContextMenuComponent extends MenuBase {
     constructor(popupService, service, ngZone, renderer) {
         super();
         this.popupService = popupService;
@@ -2874,105 +2863,67 @@ let ContextMenuComponent = ContextMenuComponent_1 = class ContextMenuComponent e
     get currentTargetElement() {
         return this.directiveTarget && this.currentTarget ? this.currentTarget.element : this.currentTarget;
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ContextMenuComponent.prototype, "showOn", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ContextMenuComponent.prototype, "target", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ContextMenuComponent.prototype, "filter", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ContextMenuComponent.prototype, "alignToAnchor", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ContextMenuComponent.prototype, "vertical", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ContextMenuComponent.prototype, "popupAnimate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ContextMenuComponent.prototype, "popupAlign", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ContextMenuComponent.prototype, "anchorAlign", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ContextMenuComponent.prototype, "collision", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", ViewContainerRef)
-], ContextMenuComponent.prototype, "appendTo", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ContextMenuComponent.prototype, "ariaLabel", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ContextMenuComponent.prototype, "popupOpen", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ContextMenuComponent.prototype, "popupClose", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ContextMenuComponent.prototype, "select", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ContextMenuComponent.prototype, "open", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ContextMenuComponent.prototype, "close", void 0);
-__decorate([
-    ContentChild(ContextMenuTemplateDirective, { static: false }),
-    __metadata("design:type", ContextMenuTemplateDirective)
-], ContextMenuComponent.prototype, "contentTemplate", void 0);
-__decorate([
-    ViewChild('default', { static: false }),
-    __metadata("design:type", TemplateRef)
-], ContextMenuComponent.prototype, "defaultContentTemplate", void 0);
-ContextMenuComponent = ContextMenuComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoContextMenu',
-        providers: [
-            ContextMenuService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.contextmenu'
-            },
-            {
-                provide: ItemsService,
-                useClass: ContextMenuItemsService
-            },
-            {
-                provide: MenuBase,
-                useExisting: forwardRef(() => ContextMenuComponent_1)
-            },
-            PopupService,
-            {
-                provide: POPUP_CONTAINER,
-                useFactory: ɵ1$2
-            }
-        ],
-        selector: 'kendo-contextmenu',
-        template: `
+}
+ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i6.PopupService }, { token: ContextMenuService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: { showOn: "showOn", target: "target", filter: "filter", alignToAnchor: "alignToAnchor", vertical: "vertical", popupAnimate: "popupAnimate", popupAlign: "popupAlign", anchorAlign: "anchorAlign", collision: "collision", appendTo: "appendTo", ariaLabel: "ariaLabel" }, outputs: { popupOpen: "popupOpen", popupClose: "popupClose", select: "select", open: "open", close: "close" }, providers: [
+        ContextMenuService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.contextmenu'
+        },
+        {
+            provide: ItemsService,
+            useClass: ContextMenuItemsService
+        },
+        {
+            provide: MenuBase,
+            useExisting: forwardRef(() => ContextMenuComponent)
+        },
+        PopupService,
+        {
+            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: `
+        <ng-template #default>
+            <kendo-menu [items]="rootItems"
+                [vertical]="vertical"
+                [openOnClick]="openOnClick"
+                [hoverDelay]="hoverDelay"
+                [animate]="animate"
+                [menuItemTemplate]="itemTemplate.first?.templateRef"
+                [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
+                ></kendo-menu>
+        </ng-template>
+    `, isInline: true, components: [{ type: MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoContextMenu',
+                    providers: [
+                        ContextMenuService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.contextmenu'
+                        },
+                        {
+                            provide: ItemsService,
+                            useClass: ContextMenuItemsService
+                        },
+                        {
+                            provide: MenuBase,
+                            useExisting: forwardRef(() => ContextMenuComponent)
+                        },
+                        PopupService,
+                        {
+                            provide: POPUP_CONTAINER,
+                            useFactory: bodyFactory
+                        }
+                    ],
+                    selector: 'kendo-contextmenu',
+                    template: `
         <ng-template #default>
             <kendo-menu [items]="rootItems"
                 [vertical]="vertical"
@@ -2984,14 +2935,48 @@ ContextMenuComponent = ContextMenuComponent_1 = __decorate([
                 ></kendo-menu>
         </ng-template>
     `
-    }),
-    __metadata("design:paramtypes", [PopupService,
-        ContextMenuService,
-        NgZone,
-        Renderer2])
-], ContextMenuComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i6.PopupService }, { type: ContextMenuService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { showOn: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], alignToAnchor: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], popupAnimate: [{
+                type: Input
+            }], popupAlign: [{
+                type: Input
+            }], anchorAlign: [{
+                type: Input
+            }], collision: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], popupOpen: [{
+                type: Output
+            }], popupClose: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [ContextMenuTemplateDirective, { static: false }]
+            }], defaultContentTemplate: [{
+                type: ViewChild,
+                args: ['default', { static: false }]
+            }] } });
 
-const COMPONENT_DIRECTIVES$1 = [
+const COMPONENT_DIRECTIVES = [
     ContextMenuComponent,
     ContextMenuTemplateDirective,
     ContextMenuTargetDirective,
@@ -3029,15 +3014,25 @@ const COMPONENT_DIRECTIVES$1 = [
  *
  * ```
  */
-let ContextMenuModule = class ContextMenuModule {
-};
-ContextMenuModule = __decorate([
-    NgModule({
-        declarations: [COMPONENT_DIRECTIVES$1],
-        exports: [COMPONENT_DIRECTIVES$1, MenuModule],
-        imports: [PopupModule, CommonModule, MenuModule]
-    })
-], ContextMenuModule);
+class ContextMenuModule {
+}
+ContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuModule, declarations: [ContextMenuComponent,
+        ContextMenuTemplateDirective,
+        ContextMenuTargetDirective,
+        ContextMenuTargetContainerDirective], imports: [PopupModule, CommonModule, MenuModule], exports: [ContextMenuComponent,
+        ContextMenuTemplateDirective,
+        ContextMenuTargetDirective,
+        ContextMenuTargetContainerDirective, MenuModule] });
+ContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuModule, imports: [[PopupModule, CommonModule, MenuModule], MenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [COMPONENT_DIRECTIVES],
+                    exports: [COMPONENT_DIRECTIVES, MenuModule],
+                    imports: [PopupModule, CommonModule, MenuModule]
+                }]
+        }] });
 
 /**
  * A [module]({{ site.data.urls.angular['ngmoduleapi'] }}) that includes the Menu and ContextMenu components and directives.
@@ -3061,16 +3056,21 @@ ContextMenuModule = __decorate([
  * }
  * ```
  */
-let MenusModule = class MenusModule {
-};
-MenusModule = __decorate([
-    NgModule({
-        exports: [MenuModule, ContextMenuModule]
-    })
-], MenusModule);
+class MenusModule {
+}
+MenusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MenusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenusModule, exports: [MenuModule, ContextMenuModule] });
+MenusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenusModule, imports: [MenuModule, ContextMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenusModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [MenuModule, ContextMenuModule]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NODE_INDEX, ContextMenuItemsService, ContextMenuTargetContainerDirective, ContextMenuTargetDirective, ContextMenuTargetService, BindingDirectiveBase, MenuBase, PreventableEvent, ActionsService, HoverService, ItemsService, NavigationService, bodyFactory, MenuComponent, ListComponent, ItemComponent, LinkDirective, ExpandArrowDirective, MenuItemComponent, MenuEvent, MenuSelectEvent, ItemContentTemplateDirective, ItemTemplateDirective, ItemLinkTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, MenuModule, ContextMenuEvent, ContextMenuSelectEvent, ContextMenuPopupEvent, ContextMenuTemplateDirective, ContextMenuComponent, ContextMenuModule, ContextMenuService, MenusModule };
+export { ContextMenuComponent, ContextMenuEvent, ContextMenuModule, ContextMenuPopupEvent, ContextMenuSelectEvent, ContextMenuService, ContextMenuTargetContainerDirective, ContextMenuTargetDirective, ContextMenuTemplateDirective, ExpandArrowDirective, FlatBindingDirective, HierarchyBindingDirective, ItemComponent, ItemContentTemplateDirective, ItemLinkTemplateDirective, ItemTemplateDirective, LinkDirective, ListComponent, MenuComponent, MenuEvent, MenuItemComponent, MenuModule, MenuSelectEvent, MenusModule };
+