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

package/esm2022/context-menu/context-menu.component.mjs

@@ -5,7 +5,7 @@
 import { Component, Input, ContentChild, ViewChild, EventEmitter, Output, NgZone, Renderer2, TemplateRef, ViewContainerRef, forwardRef } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
-import { hasObservers, Keys, isDocumentAvailable } from '@progress/kendo-angular-common';
+import { hasObservers, Keys, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
 import { MenuBase } from '../menu-base';
 import { ContextMenuPopupEvent } from './context-menu-popup-event';
 import { ContextMenuService } from './context-menu.service';
@@ -18,6 +18,7 @@ import { ContextMenuTargetContainerDirective } from './context-menu-target-conta
 import { TARGET_CLASS } from './context-menu-target.directive';
 import { bodyFactory } from '../utils';
 import { MenuComponent } from '../menu.component';
+import { DEFAULT_MARGIN } from '../rendering/popup-settings';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "./context-menu.service";
@@ -332,6 +333,7 @@ export class ContextMenuComponent extends MenuBase {
         });
     }
     createPopup(options) {
+        const customClasses = this.popupSettings?.popupClass ? parseCSSClassNames(this.popupSettings.popupClass) : [];
         this.popupRef = this.popupService.open(Object.assign({
             animate: defined(this.popupAnimate) ? this.popupAnimate : true,
             appendTo: this.appendTo,
@@ -339,7 +341,8 @@ export class ContextMenuComponent extends MenuBase {
             popupAlign: this.popupAlign || DEFAULT_POPUP_ALIGN,
             anchorAlign: this.anchorAlign || DEFAULT_ANCHOR_ALIGN,
             content: this.contentTemplate ? this.contentTemplate.templateRef : this.defaultContentTemplate,
-            popupClass: 'k-menu-popup',
+            popupClass: ['k-menu-popup', ...customClasses],
+            margin: this.popupSettings?.margin ?? DEFAULT_MARGIN,
             positionMode: 'absolute'
         }, options));
         const element = this.popupRef.popupElement;
@@ -431,6 +434,7 @@ export class ContextMenuComponent extends MenuBase {
                 [openOnClick]="openOnClick"
                 [hoverDelay]="hoverDelay"
                 [animate]="animate"
+                [popupSettings]="popupSettings"
                 [menuItemTemplate]="itemTemplate.first?.templateRef"
                 [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
             ></kendo-menu>
@@ -473,6 +477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [openOnClick]="openOnClick"
                 [hoverDelay]="hoverDelay"
                 [animate]="animate"
+                [popupSettings]="popupSettings"
                 [menuItemTemplate]="itemTemplate.first?.templateRef"
                 [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
             ></kendo-menu>

package/esm2022/menu-base.mjs

@@ -45,6 +45,11 @@ export class MenuBase {
      *
      */
     size = 'medium';
+    /**
+     * Configures the popup settings for the Menu items.
+     * Allows customization of the popup class and margin.
+     */
+    popupSettings;
     /**
      * @hidden
      */
@@ -64,7 +69,7 @@ export class MenuBase {
         return this.items || (this.children ? this.children.toArray() : []);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MenuBase, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MenuBase, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size", popupSettings: "popupSettings" }, 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: "18.2.14", ngImport: i0, type: MenuBase, decorators: [{
             type: Component,
@@ -84,6 +89,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], popupSettings: [{
+                type: Input
             }], itemTemplate: [{
                 type: ContentChildren,
                 args: [ItemTemplateDirective]

package/esm2022/menu.component.mjs

@@ -242,9 +242,10 @@ export class MenuComponent extends MenuBase {
             [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
             [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
             [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
+            [popupSettings]="popupSettings"
             [ngClass]="menuClasses">
         </ul>
-    `, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -274,6 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
             [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
             [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
+            [popupSettings]="popupSettings"
             [ngClass]="menuClasses">
         </ul>
     `,

package/esm2022/package-metadata.mjs

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

package/esm2022/rendering/list.component.mjs

@@ -5,7 +5,7 @@
 import { Component, ElementRef, Input, NgZone, Optional, Renderer2, TemplateRef, ViewContainerRef, forwardRef } from '@angular/core';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectorRef, HostBinding, ViewChild } from '@angular/core';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isPresent, parseCSSClassNames } from '@progress/kendo-angular-common';
 import { POPUP_CONTAINER, PopupService } from '@progress/kendo-angular-popup';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { ContextMenuService } from '../context-menu/context-menu.service';
@@ -16,7 +16,7 @@ import { HoverService } from '../services/hover.service';
 import { ItemsService } from '../services/items.service';
 import { NavigationService } from '../services/navigation.service';
 import { bodyFactory, getFontIcon, getSizeClass, getSVGIcon } from '../utils';
-import { POPUP_SETTINGS, POPUP_SETTINGS_RTL } from './popup-settings';
+import { DEFAULT_MARGIN, POPUP_SETTINGS, POPUP_SETTINGS_RTL } from './popup-settings';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/items.service";
 import * as i2 from "../services/hover.service";
@@ -47,6 +47,7 @@ export class ListComponent {
     openOnClick;
     itemTemplate;
     itemLinkTemplate;
+    popupSettings;
     domSubscriptions;
     constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
         this.itemsService = itemsService;
@@ -196,7 +197,7 @@ export class ListComponent {
         this.actions.execute();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [{ token: i1.ItemsService }, { token: i2.HoverService }, { token: i3.ActionsService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n        @for (item of items; track item; let idx = $index) {\n          @if (!item.separator) {\n            <li\n              kendoMenuItem\n              [appendTo]=\"appendTo\"\n              [item]=\"item\"\n              [level]=\"level\"\n              [size]=\"size\"\n              [vertical]=\"vertical\"\n              [animate]=\"animate\"\n              [rtl]=\"rtl\"\n              [itemTemplate]=\"itemTemplate\"\n              [itemLinkTemplate]=\"itemLinkTemplate\"\n              [openOnClick]=\"openOnClick\"\n              [index]=\"hierarchyIndex(idx)\"\n              [siblingIndex]=\"idx\"\n              [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              role=\"menuitem\"\n              class=\"k-item k-menu-item\"\n              [class.k-first]=\"idx === 0\"\n              [class.k-last]=\"idx === items.length - 1\"\n            [class.k-disabled]=\"item.disabled\"></li>\n          }\n          @if (item.separator) {\n            <li\n              class=\"k-separator k-item\"\n              [ngClass]=\"item.cssClass\"\n              aria-hidden=\"true\"\n              [ngStyle]=\"item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings" }, ngImport: i0, template: "\n        @for (item of items; track item; let idx = $index) {\n          @if (!item.separator) {\n            <li\n              kendoMenuItem\n              [appendTo]=\"appendTo\"\n              [item]=\"item\"\n              [level]=\"level\"\n              [size]=\"size\"\n              [vertical]=\"vertical\"\n              [animate]=\"animate\"\n              [rtl]=\"rtl\"\n              [itemTemplate]=\"itemTemplate\"\n              [itemLinkTemplate]=\"itemLinkTemplate\"\n              [popupSettings]=\"popupSettings\"\n              [openOnClick]=\"openOnClick\"\n              [index]=\"hierarchyIndex(idx)\"\n              [siblingIndex]=\"idx\"\n              [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              role=\"menuitem\"\n              class=\"k-item k-menu-item\"\n              [class.k-first]=\"idx === 0\"\n              [class.k-last]=\"idx === items.length - 1\"\n            [class.k-disabled]=\"item.disabled\"></li>\n          }\n          @if (item.separator) {\n            <li\n              class=\"k-separator k-item\"\n              [ngClass]=\"item.cssClass\"\n              aria-hidden=\"true\"\n              [ngStyle]=\"item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -216,6 +217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [rtl]="rtl"
               [itemTemplate]="itemTemplate"
               [itemLinkTemplate]="itemLinkTemplate"
+              [popupSettings]="popupSettings"
               [openOnClick]="openOnClick"
               [index]="hierarchyIndex(idx)"
               [siblingIndex]="idx"
@@ -264,6 +266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], itemLinkTemplate: [{
                 type: Input
+            }], popupSettings: [{
+                type: Input
             }] } });
 /**
  * @hidden
@@ -301,6 +305,7 @@ export class ItemComponent {
     openOnClick = false;
     itemTemplate;
     itemLinkTemplate;
+    popupSettings;
     link;
     popupTemplate;
     get disabled() {
@@ -312,7 +317,7 @@ export class ItemComponent {
     get label() {
         return this.item.text ? this.item.text : null;
     }
-    get popupSettings() {
+    get defaultPopupSettings() {
         const settings = this.rtl ? POPUP_SETTINGS_RTL : POPUP_SETTINGS;
         return this.horizontal ? settings.horizontal : settings.vertical;
     }
@@ -421,7 +426,7 @@ export class ItemComponent {
     }
     open() {
         if (!this.destroyed && this.hasContent && !this.opened) {
-            const popupSettings = this.popupSettings;
+            const popupSettings = this.getMergedPopupSettings();
             const animate = this.animate ? Object.assign({}, this.animate, {
                 direction: popupSettings.animate
             }) : false;
@@ -434,10 +439,8 @@ export class ItemComponent {
                 anchor: this.element,
                 positionMode: 'absolute',
                 content: this.popupTemplate,
-                popupClass: {
-                    'k-rtl': this.rtl,
-                    'k-menu-popup': true
-                },
+                popupClass: popupSettings.popupClass,
+                margin: popupSettings.margin,
                 animate: animate
             });
             this.setAttribute('aria-expanded', 'true');
@@ -474,8 +477,20 @@ export class ItemComponent {
     setAttribute(name, value) {
         this.renderer.setAttribute(this.element.nativeElement, name, value);
     }
+    getMergedPopupSettings() {
+        if (!isPresent(this.popupSettings)) {
+            return this.defaultPopupSettings;
+        }
+        const defaultSettings = this.defaultPopupSettings;
+        const customClasses = this.popupSettings.popupClass ? parseCSSClassNames(this.popupSettings.popupClass) : [];
+        return {
+            ...defaultSettings,
+            popupClass: customClasses.length ? [...defaultSettings.popupClass, ...customClasses] : defaultSettings.popupClass,
+            margin: this.popupSettings.margin ?? DEFAULT_MARGIN
+        };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemComponent, deps: [{ token: i1.ItemsService }, { token: i4.NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupService }, { token: i0.ElementRef }, { token: i6.ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, 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: `
@@ -520,6 +535,7 @@ export class ItemComponent {
         [index]="index"
         [itemTemplate]="itemTemplate"
         [itemLinkTemplate]="itemLinkTemplate"
+        [popupSettings]="popupSettings"
         [ngClass]="menuListClasses"
         role="menu">
       </ul>
@@ -540,7 +556,7 @@ export class ItemComponent {
         <kendo-icon-wrapper [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
       }
     </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
@@ -592,6 +608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [index]="index"
         [itemTemplate]="itemTemplate"
         [itemLinkTemplate]="itemLinkTemplate"
+        [popupSettings]="popupSettings"
         [ngClass]="menuListClasses"
         role="menu">
       </ul>
@@ -642,6 +659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], itemLinkTemplate: [{
                 type: Input
+            }], popupSettings: [{
+                type: Input
             }], link: [{
                 type: ViewChild,
                 args: ['link', { static: false }]

package/esm2022/rendering/popup-settings.mjs

@@ -18,6 +18,10 @@ const HORIZONTAL_COLLISION = {
     vertical: 'fit',
     horizontal: 'flip'
 };
+/**
+ * @hidden
+ */
+export const DEFAULT_MARGIN = { horizontal: 0, vertical: 0 };
 /**
  * @hidden
  */
@@ -29,7 +33,8 @@ export const POPUP_SETTINGS_RTL = {
         },
         popup: POPUP_ALIGN_RTL,
         collision: VERTICAL_COLLISION,
-        animate: 'down'
+        animate: 'down',
+        popupClass: ['k-rtl', 'k-menu-popup']
     },
     horizontal: {
         anchor: {
@@ -38,7 +43,8 @@ export const POPUP_SETTINGS_RTL = {
         },
         popup: POPUP_ALIGN_RTL,
         collision: HORIZONTAL_COLLISION,
-        animate: 'left'
+        animate: 'left',
+        popupClass: ['k-rtl', 'k-menu-popup']
     }
 };
 /**
@@ -52,7 +58,8 @@ export const POPUP_SETTINGS = {
         },
         popup: POPUP_ALIGN,
         collision: VERTICAL_COLLISION,
-        animate: 'down'
+        animate: 'down',
+        popupClass: ['k-menu-popup']
     },
     horizontal: {
         anchor: {
@@ -61,6 +68,7 @@ export const POPUP_SETTINGS = {
         },
         popup: POPUP_ALIGN,
         collision: HORIZONTAL_COLLISION,
-        animate: 'right'
+        animate: 'right',
+        popupClass: ['k-menu-popup']
     }
 };

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

@@ -8,7 +8,7 @@ import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i3 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { PreventableEvent as PreventableEvent$1, hasObservers, Keys, normalizeKeys, isDocumentAvailable, ResizeBatchService } from '@progress/kendo-angular-common';
+import { PreventableEvent as PreventableEvent$1, hasObservers, Keys, normalizeKeys, isDocumentAvailable, isPresent, parseCSSClassNames, ResizeBatchService } from '@progress/kendo-angular-common';
 import { caretAltLeftIcon, caretAltRightIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i5 from '@progress/kendo-angular-popup';
 import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
@@ -22,8 +22,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1765536325,
-    version: '21.4.0-develop.1',
+    publishDate: 1765793550,
+    version: '21.4.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1171,6 +1171,11 @@ class MenuBase {
      *
      */
     size = 'medium';
+    /**
+     * Configures the popup settings for the Menu items.
+     * Allows customization of the popup class and margin.
+     */
+    popupSettings;
     /**
      * @hidden
      */
@@ -1190,7 +1195,7 @@ class MenuBase {
         return this.items || (this.children ? this.children.toArray() : []);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MenuBase, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MenuBase, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size", popupSettings: "popupSettings" }, 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: "18.2.14", ngImport: i0, type: MenuBase, decorators: [{
             type: Component,
@@ -1210,6 +1215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], popupSettings: [{
+                type: Input
             }], itemTemplate: [{
                 type: ContentChildren,
                 args: [ItemTemplateDirective]
@@ -1283,6 +1290,10 @@ const HORIZONTAL_COLLISION = {
     vertical: 'fit',
     horizontal: 'flip'
 };
+/**
+ * @hidden
+ */
+const DEFAULT_MARGIN = { horizontal: 0, vertical: 0 };
 /**
  * @hidden
  */
@@ -1294,7 +1305,8 @@ const POPUP_SETTINGS_RTL = {
         },
         popup: POPUP_ALIGN_RTL,
         collision: VERTICAL_COLLISION,
-        animate: 'down'
+        animate: 'down',
+        popupClass: ['k-rtl', 'k-menu-popup']
     },
     horizontal: {
         anchor: {
@@ -1303,7 +1315,8 @@ const POPUP_SETTINGS_RTL = {
         },
         popup: POPUP_ALIGN_RTL,
         collision: HORIZONTAL_COLLISION,
-        animate: 'left'
+        animate: 'left',
+        popupClass: ['k-rtl', 'k-menu-popup']
     }
 };
 /**
@@ -1317,7 +1330,8 @@ const POPUP_SETTINGS = {
         },
         popup: POPUP_ALIGN,
         collision: VERTICAL_COLLISION,
-        animate: 'down'
+        animate: 'down',
+        popupClass: ['k-menu-popup']
     },
     horizontal: {
         anchor: {
@@ -1326,7 +1340,8 @@ const POPUP_SETTINGS = {
         },
         popup: POPUP_ALIGN,
         collision: HORIZONTAL_COLLISION,
-        animate: 'right'
+        animate: 'right',
+        popupClass: ['k-menu-popup']
     }
 };
 
@@ -1353,6 +1368,7 @@ class ListComponent {
     openOnClick;
     itemTemplate;
     itemLinkTemplate;
+    popupSettings;
     domSubscriptions;
     constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
         this.itemsService = itemsService;
@@ -1502,7 +1518,7 @@ class ListComponent {
         this.actions.execute();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n        @for (item of items; track item; let idx = $index) {\n          @if (!item.separator) {\n            <li\n              kendoMenuItem\n              [appendTo]=\"appendTo\"\n              [item]=\"item\"\n              [level]=\"level\"\n              [size]=\"size\"\n              [vertical]=\"vertical\"\n              [animate]=\"animate\"\n              [rtl]=\"rtl\"\n              [itemTemplate]=\"itemTemplate\"\n              [itemLinkTemplate]=\"itemLinkTemplate\"\n              [openOnClick]=\"openOnClick\"\n              [index]=\"hierarchyIndex(idx)\"\n              [siblingIndex]=\"idx\"\n              [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              role=\"menuitem\"\n              class=\"k-item k-menu-item\"\n              [class.k-first]=\"idx === 0\"\n              [class.k-last]=\"idx === items.length - 1\"\n            [class.k-disabled]=\"item.disabled\"></li>\n          }\n          @if (item.separator) {\n            <li\n              class=\"k-separator k-item\"\n              [ngClass]=\"item.cssClass\"\n              aria-hidden=\"true\"\n              [ngStyle]=\"item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings" }, ngImport: i0, template: "\n        @for (item of items; track item; let idx = $index) {\n          @if (!item.separator) {\n            <li\n              kendoMenuItem\n              [appendTo]=\"appendTo\"\n              [item]=\"item\"\n              [level]=\"level\"\n              [size]=\"size\"\n              [vertical]=\"vertical\"\n              [animate]=\"animate\"\n              [rtl]=\"rtl\"\n              [itemTemplate]=\"itemTemplate\"\n              [itemLinkTemplate]=\"itemLinkTemplate\"\n              [popupSettings]=\"popupSettings\"\n              [openOnClick]=\"openOnClick\"\n              [index]=\"hierarchyIndex(idx)\"\n              [siblingIndex]=\"idx\"\n              [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              role=\"menuitem\"\n              class=\"k-item k-menu-item\"\n              [class.k-first]=\"idx === 0\"\n              [class.k-last]=\"idx === items.length - 1\"\n            [class.k-disabled]=\"item.disabled\"></li>\n          }\n          @if (item.separator) {\n            <li\n              class=\"k-separator k-item\"\n              [ngClass]=\"item.cssClass\"\n              aria-hidden=\"true\"\n              [ngStyle]=\"item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -1522,6 +1538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [rtl]="rtl"
               [itemTemplate]="itemTemplate"
               [itemLinkTemplate]="itemLinkTemplate"
+              [popupSettings]="popupSettings"
               [openOnClick]="openOnClick"
               [index]="hierarchyIndex(idx)"
               [siblingIndex]="idx"
@@ -1570,6 +1587,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], itemLinkTemplate: [{
                 type: Input
+            }], popupSettings: [{
+                type: Input
             }] } });
 /**
  * @hidden
@@ -1607,6 +1626,7 @@ class ItemComponent {
     openOnClick = false;
     itemTemplate;
     itemLinkTemplate;
+    popupSettings;
     link;
     popupTemplate;
     get disabled() {
@@ -1618,7 +1638,7 @@ class ItemComponent {
     get label() {
         return this.item.text ? this.item.text : null;
     }
-    get popupSettings() {
+    get defaultPopupSettings() {
         const settings = this.rtl ? POPUP_SETTINGS_RTL : POPUP_SETTINGS;
         return this.horizontal ? settings.horizontal : settings.vertical;
     }
@@ -1727,7 +1747,7 @@ class ItemComponent {
     }
     open() {
         if (!this.destroyed && this.hasContent && !this.opened) {
-            const popupSettings = this.popupSettings;
+            const popupSettings = this.getMergedPopupSettings();
             const animate = this.animate ? Object.assign({}, this.animate, {
                 direction: popupSettings.animate
             }) : false;
@@ -1740,10 +1760,8 @@ class ItemComponent {
                 anchor: this.element,
                 positionMode: 'absolute',
                 content: this.popupTemplate,
-                popupClass: {
-                    'k-rtl': this.rtl,
-                    'k-menu-popup': true
-                },
+                popupClass: popupSettings.popupClass,
+                margin: popupSettings.margin,
                 animate: animate
             });
             this.setAttribute('aria-expanded', 'true');
@@ -1780,8 +1798,20 @@ class ItemComponent {
     setAttribute(name, value) {
         this.renderer.setAttribute(this.element.nativeElement, name, value);
     }
+    getMergedPopupSettings() {
+        if (!isPresent(this.popupSettings)) {
+            return this.defaultPopupSettings;
+        }
+        const defaultSettings = this.defaultPopupSettings;
+        const customClasses = this.popupSettings.popupClass ? parseCSSClassNames(this.popupSettings.popupClass) : [];
+        return {
+            ...defaultSettings,
+            popupClass: customClasses.length ? [...defaultSettings.popupClass, ...customClasses] : defaultSettings.popupClass,
+            margin: this.popupSettings.margin ?? DEFAULT_MARGIN
+        };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemComponent, deps: [{ token: ItemsService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupService }, { token: i0.ElementRef }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, 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: `
@@ -1826,6 +1856,7 @@ class ItemComponent {
         [index]="index"
         [itemTemplate]="itemTemplate"
         [itemLinkTemplate]="itemLinkTemplate"
+        [popupSettings]="popupSettings"
         [ngClass]="menuListClasses"
         role="menu">
       </ul>
@@ -1846,7 +1877,7 @@ class ItemComponent {
         <kendo-icon-wrapper [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
       }
     </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
@@ -1898,6 +1929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [index]="index"
         [itemTemplate]="itemTemplate"
         [itemLinkTemplate]="itemLinkTemplate"
+        [popupSettings]="popupSettings"
         [ngClass]="menuListClasses"
         role="menu">
       </ul>
@@ -1948,6 +1980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], itemLinkTemplate: [{
                 type: Input
+            }], popupSettings: [{
+                type: Input
             }], link: [{
                 type: ViewChild,
                 args: ['link', { static: false }]
@@ -2182,9 +2216,10 @@ class MenuComponent extends MenuBase {
             [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
             [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
             [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
+            [popupSettings]="popupSettings"
             [ngClass]="menuClasses">
         </ul>
-    `, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -2214,6 +2249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
             [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
             [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
+            [popupSettings]="popupSettings"
             [ngClass]="menuClasses">
         </ul>
     `,
@@ -3244,6 +3280,7 @@ class ContextMenuComponent extends MenuBase {
         });
     }
     createPopup(options) {
+        const customClasses = this.popupSettings?.popupClass ? parseCSSClassNames(this.popupSettings.popupClass) : [];
         this.popupRef = this.popupService.open(Object.assign({
             animate: defined(this.popupAnimate) ? this.popupAnimate : true,
             appendTo: this.appendTo,
@@ -3251,7 +3288,8 @@ class ContextMenuComponent extends MenuBase {
             popupAlign: this.popupAlign || DEFAULT_POPUP_ALIGN,
             anchorAlign: this.anchorAlign || DEFAULT_ANCHOR_ALIGN,
             content: this.contentTemplate ? this.contentTemplate.templateRef : this.defaultContentTemplate,
-            popupClass: 'k-menu-popup',
+            popupClass: ['k-menu-popup', ...customClasses],
+            margin: this.popupSettings?.margin ?? DEFAULT_MARGIN,
             positionMode: 'absolute'
         }, options));
         const element = this.popupRef.popupElement;
@@ -3343,6 +3381,7 @@ class ContextMenuComponent extends MenuBase {
                 [openOnClick]="openOnClick"
                 [hoverDelay]="hoverDelay"
                 [animate]="animate"
+                [popupSettings]="popupSettings"
                 [menuItemTemplate]="itemTemplate.first?.templateRef"
                 [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
             ></kendo-menu>
@@ -3385,6 +3424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [openOnClick]="openOnClick"
                 [hoverDelay]="hoverDelay"
                 [animate]="animate"
+                [popupSettings]="popupSettings"
                 [menuItemTemplate]="itemTemplate.first?.templateRef"
                 [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
             ></kendo-menu>

package/menu-base.d.ts

@@ -9,6 +9,7 @@ import { OpenOnClickSettings } from './open-on-click-settings';
 import { ItemTemplateDirective } from './templates/item-template.directive';
 import { ItemLinkTemplateDirective } from './templates/item-link-template.directive';
 import { MenuSize } from './size';
+import { PopupSettings } from './rendering/popup-settings';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -48,6 +49,11 @@ export declare class MenuBase {
      *
      */
     size: MenuSize;
+    /**
+     * Configures the popup settings for the Menu items.
+     * Allows customization of the popup class and margin.
+     */
+    popupSettings: PopupSettings;
     /**
      * @hidden
      */
@@ -65,5 +71,5 @@ export declare class MenuBase {
      */
     get rootItems(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuBase, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuBase, "kendo-menu-base", never, { "items": { "alias": "items"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "hoverDelay": { "alias": "hoverDelay"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, ["itemTemplate", "itemLinkTemplate", "children"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuBase, "kendo-menu-base", never, { "items": { "alias": "items"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "hoverDelay": { "alias": "hoverDelay"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; }, {}, ["itemTemplate", "itemLinkTemplate", "children"], never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-menu",
-  "version": "21.4.0-develop.1",
+  "version": "21.4.0-develop.3",
   "description": "Kendo UI Angular Menu component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1765536325,
+      "publishDate": 1765793550,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -29,15 +29,15 @@
     "@angular/core": "18 - 21",
     "@angular/platform-browser": "18 - 21",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "21.4.0-develop.1",
-    "@progress/kendo-angular-l10n": "21.4.0-develop.1",
-    "@progress/kendo-angular-icons": "21.4.0-develop.1",
-    "@progress/kendo-angular-popup": "21.4.0-develop.1",
+    "@progress/kendo-angular-common": "21.4.0-develop.3",
+    "@progress/kendo-angular-l10n": "21.4.0-develop.3",
+    "@progress/kendo-angular-icons": "21.4.0-develop.3",
+    "@progress/kendo-angular-popup": "21.4.0-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.4.0-develop.1"
+    "@progress/kendo-angular-schematics": "21.4.0-develop.3"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-menu.mjs",

package/rendering/list.component.d.ts

@@ -12,6 +12,7 @@ import { ActionsService } from '../services/actions.service';
 import { HoverService } from '../services/hover.service';
 import { ItemsService } from '../services/items.service';
 import { NavigationService } from '../services/navigation.service';
+import { PopupSettings } from './popup-settings';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -35,6 +36,7 @@ export declare class ListComponent implements OnInit, OnDestroy {
     openOnClick: any;
     itemTemplate: TemplateRef<any>;
     itemLinkTemplate: TemplateRef<any>;
+    popupSettings: PopupSettings;
     private domSubscriptions;
     constructor(itemsService: ItemsService, hover: HoverService, actions: ActionsService, navigation: NavigationService, renderer: Renderer2, ngZone: NgZone, element: ElementRef);
     hierarchyIndex(index: number): string;
@@ -46,7 +48,7 @@ export declare class ListComponent implements OnInit, OnDestroy {
     private nodeItem;
     private clickHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "[kendoMenuList]", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "items": { "alias": "items"; "required": false; }; "level": { "alias": "level"; "required": false; }; "index": { "alias": "index"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "itemLinkTemplate": { "alias": "itemLinkTemplate"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "[kendoMenuList]", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "items": { "alias": "items"; "required": false; }; "level": { "alias": "level"; "required": false; }; "index": { "alias": "index"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "itemLinkTemplate": { "alias": "itemLinkTemplate"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; }, {}, never, never, true, never>;
 }
 /**
  * @hidden
@@ -72,12 +74,13 @@ export declare class ItemComponent implements OnInit, AfterViewInit, OnDestroy {
     openOnClick: boolean;
     itemTemplate: TemplateRef<any>;
     itemLinkTemplate: TemplateRef<any>;
+    popupSettings: PopupSettings;
     link: ElementRef;
     popupTemplate: TemplateRef<any>;
     get disabled(): boolean;
     get hasPopup(): boolean;
     get label(): boolean;
-    get popupSettings(): any;
+    get defaultPopupSettings(): any;
     get horizontal(): boolean;
     get hasLink(): boolean;
     get linkTemplate(): TemplateRef<any>;
@@ -115,6 +118,7 @@ export declare class ItemComponent implements OnInit, AfterViewInit, OnDestroy {
     close(): void;
     navigate(): void;
     private setAttribute;
+    private getMergedPopupSettings;
     static ɵfac: i0.ɵɵFactoryDeclaration<ItemComponent, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ItemComponent, "[kendoMenuItem]", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "item": { "alias": "item"; "required": false; }; "level": { "alias": "level"; "required": false; }; "index": { "alias": "index"; "required": false; }; "siblingIndex": { "alias": "siblingIndex"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "itemLinkTemplate": { "alias": "itemLinkTemplate"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ItemComponent, "[kendoMenuItem]", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "item": { "alias": "item"; "required": false; }; "level": { "alias": "level"; "required": false; }; "index": { "alias": "index"; "required": false; }; "siblingIndex": { "alias": "siblingIndex"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "itemLinkTemplate": { "alias": "itemLinkTemplate"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; }, {}, never, never, true, never>;
 }

package/rendering/popup-settings.d.ts

@@ -2,6 +2,11 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { Margin } from "@progress/kendo-angular-popup";
+/**
+ * @hidden
+ */
+export declare const DEFAULT_MARGIN: Margin;
 /**
  * @hidden
  */
@@ -17,6 +22,7 @@ export declare const POPUP_SETTINGS_RTL: {
             horizontal: string;
         };
         animate: string;
+        popupClass: string[];
     };
     horizontal: {
         anchor: {
@@ -29,6 +35,7 @@ export declare const POPUP_SETTINGS_RTL: {
             horizontal: string;
         };
         animate: string;
+        popupClass: string[];
     };
 };
 /**
@@ -46,6 +53,7 @@ export declare const POPUP_SETTINGS: {
             horizontal: string;
         };
         animate: string;
+        popupClass: string[];
     };
     horizontal: {
         anchor: {
@@ -58,5 +66,19 @@ export declare const POPUP_SETTINGS: {
             horizontal: string;
         };
         animate: string;
+        popupClass: string[];
     };
 };
+/**
+ * Settings for the Menu and ContextMenu popups.
+ */
+export interface PopupSettings {
+    /**
+     * The CSS class that will be applied to the popup container.
+     */
+    popupClass?: string | string[] | object | Set<string>;
+    /**
+     * The margin of the popup container.
+     */
+    margin?: Margin;
+}