@syncfusion/ej2-splitbuttons 27.2.2 → 28.1.33

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.2
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.33
+*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@27.1.56",
+  "_id": "@syncfusion/ej2-splitbuttons@19.16.4",
   "_inBundle": false,
-  "_integrity": "sha512-rJZwautGwePeXpivvTf3CtX5onDTq3ICFxGlMENTp5kZrm1ni+0prSqomwv0HPC631vxxrKC8JTFC6lZOzJMcQ==",
+  "_integrity": "sha512-nlU99uofqoYEbrSZrSJ2vVsQu3dvNbDJD2jwInequl4EtV+qL4jhntz9CN1z5bwaz2qgDOjI1acZjuNvM/3UHQ==",
   "_location": "/@syncfusion/ej2-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -33,10 +33,10 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-splitbuttons"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-27.1.56.tgz",
-  "_shasum": "c94706216183d6159818350bdeef51567ac5d2a5",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.16.4.tgz",
+  "_shasum": "d9deb379c4a1e89f608eb69d21fd3151f54e71ad",
   "_spec": "@syncfusion/ej2-splitbuttons@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -45,8 +45,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.2",
-    "@syncfusion/ej2-popups": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-popups": "~28.1.33"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -89,6 +89,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "27.2.2",
+  "version": "28.1.33",
   "sideEffects": false
 }

package/src/common/common.d.ts

@@ -18,6 +18,7 @@ export declare function getModel(props: Object, model: string[]): Object;
 export declare function upDownKeyHandler(ul: HTMLElement, keyCode: number): void;
 /** @hidden
  * @param {HTMLElement} popup - Specifies the popup element.
+ * @param {boolean} blankIcon - Specifies the blankIcon value.
  * @returns {void}
  */
 export declare function setBlankIconStyle(popup: HTMLElement, blankIcon?: boolean): void;
@@ -88,3 +89,7 @@ export interface OpenCloseMenuEventArgs extends BaseEventArgs {
     items: ItemModel[];
     parentItem?: ItemModel;
 }
+/**
+ * Interface for animation effects.
+ */
+export declare type DropDownAnimationEffect = 'None' | 'SlideDown' | 'ZoomIn' | 'FadeIn';

package/src/common/common.js

@@ -104,9 +104,9 @@ function isValidLI(ul, li, index, keyCode, count) {
     }
     return index;
 }
-// eslint-disable-next-line jsdoc/require-param, valid-jsdoc
 /** @hidden
  * @param {HTMLElement} popup - Specifies the popup element.
+ * @param {boolean} blankIcon - Specifies the blankIcon value.
  * @returns {void}
  */
 export function setBlankIconStyle(popup, blankIcon) {
@@ -142,7 +142,7 @@ export function setBlankIconStyle(popup, blankIcon) {
     var size = parseInt(getComputedStyle(icon).fontSize, 10) + parseInt((enableRtl ? getComputedStyle(icon)[cssProp.margin] : getComputedStyle(icon)[cssProp.margin]), 10)
         + parseInt(getComputedStyle(iconLi).paddingLeft, 10) + "px";
     blankIconList.forEach(function (li) {
-        if (li.classList.contains('e-url')) {
+        if (li.classList.contains('e-url') && li.querySelector('.e-menu-url')) {
             li.querySelector('.e-menu-url').style[cssProp.padding] = size;
         }
         else {

package/src/drop-down-button/drop-down-button-model.d.ts

@@ -1,6 +1,40 @@
-import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, EmitType, isRippleEnabled, isNullOrUndefined } from '@syncfusion/ej2-base';import { addClass, INotifyPropertyChanged, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';import { attributes, Component, closest, select, KeyboardEventArgs, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { classList, removeClass } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';import { Popup } from '@syncfusion/ej2-popups';import { SplitButton } from '../split-button/split-button';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs, upDownKeyHandler } from './../common/common';import { getModel, SplitButtonIconPosition, Item, setBlankIconStyle } from './../common/common';import { ItemModel } from './../common/common-model';
+import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, EmitType, isRippleEnabled, isNullOrUndefined, append, formatUnit, Animation } from '@syncfusion/ej2-base';import { addClass, INotifyPropertyChanged, getUniqueID, rippleEffect, getComponent, ChildProperty, Complex, AnimationModel } from '@syncfusion/ej2-base';import { attributes, Component, closest, select, KeyboardEventArgs, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { classList, removeClass, compile } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';import { Popup } from '@syncfusion/ej2-popups';import { SplitButton } from '../split-button/split-button';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs, upDownKeyHandler, DropDownAnimationEffect } from './../common/common';import { getModel, SplitButtonIconPosition, Item, setBlankIconStyle } from './../common/common';import { ItemModel } from './../common/common-model';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
+/**
+ * Interface for a class DropDownMenuAnimationSettings
+ */
+export interface DropDownMenuAnimationSettingsModel {
+
+    /**
+     * Specifies the animation effect applied when the DropDownMenu is shown.
+     * The possible effects are:
+     * * None: Specifies that the DropDownMenu appears without any animation effect.
+     * * SlideDown: Specifies that the DropDownMenu appears with a slide down effect.
+     * * ZoomIn: Specifies that the DropDownMenu appears with a zoom in effect.
+     * * FadeIn: Specifies that the DropDownMenu appears with a fade in effect.
+     *
+     * @default 'SlideDown'
+     * @isEnumeration true
+     */
+    effect?: DropDownAnimationEffect;
+
+    /**
+     * Specifies the time duration (in milliseconds) of the animation effect when the DropDownMenu is displayed.
+     *
+     * @default 400
+     */
+    duration?: number;
+
+    /**
+     * Specifies the easing function applied during the animation effect of the DropDownMenu.
+     *
+     * @default 'ease'
+     */
+    easing?: string;
+
+}
+
 /**
  * Interface for a class DropDownButton
  */
@@ -81,6 +115,34 @@ export interface DropDownButtonModel extends ComponentModel{
      */
     closeActionEvents?: string;
 
+    /**
+     * Specifies the template content to be displayed.
+     *
+     * @default null
+     * @aspType string
+     */
+    itemTemplate?: string | Function;
+
+    /**
+     * This property defines the width of the dropdown popup for the DropDownButton component.
+     *
+     * @property {string | number} popupWidth - A string or number representing the width of the dropdown.
+     * It can be a valid CSS unit such as `px`, `%`, or `rem`, or a number interpreted as pixels.
+     * @default "auto"
+     * @remarks
+     * The `popupWidth` property allows developers to control the width of the dropdown popup, ensuring it fits their design requirements.
+     * The default value of `auto` allows the popup to adjust based on the content length, but a specific width can be provided for more precise control.
+     */
+    popupWidth?: string | number;
+
+    /**
+     * Specifies the animation settings for opening the sub menu in the DropDownMenu.
+     * The settings control the duration, easing, and effect of the animation applied when the sub menu opens.
+     *
+     * @default { effect: 'None' }
+     */
+    animationSettings?: DropDownMenuAnimationSettingsModel;
+
     /**
      * Triggers while rendering each Popup item of DropDownButton.
      *

package/src/drop-down-button/drop-down-button.d.ts

@@ -1,12 +1,41 @@
 import { EmitType } from '@syncfusion/ej2-base';
-import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
 import { Component, KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
 import { Popup } from '@syncfusion/ej2-popups';
-import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs } from './../common/common';
+import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs, DropDownAnimationEffect } from './../common/common';
 import { SplitButtonIconPosition } from './../common/common';
 import { ItemModel } from './../common/common-model';
-import { DropDownButtonModel } from './drop-down-button-model';
+import { DropDownButtonModel, DropDownMenuAnimationSettingsModel } from './drop-down-button-model';
+/**
+ * Animation configuration settings.
+ */
+export declare class DropDownMenuAnimationSettings extends ChildProperty<DropDownMenuAnimationSettings> {
+    /**
+     * Specifies the animation effect applied when the DropDownMenu is shown.
+     * The possible effects are:
+     * * None: Specifies that the DropDownMenu appears without any animation effect.
+     * * SlideDown: Specifies that the DropDownMenu appears with a slide down effect.
+     * * ZoomIn: Specifies that the DropDownMenu appears with a zoom in effect.
+     * * FadeIn: Specifies that the DropDownMenu appears with a fade in effect.
+     *
+     * @default 'SlideDown'
+     * @isEnumeration true
+     */
+    effect: DropDownAnimationEffect;
+    /**
+     * Specifies the time duration (in milliseconds) of the animation effect when the DropDownMenu is displayed.
+     *
+     * @default 400
+     */
+    duration: number;
+    /**
+     * Specifies the easing function applied during the animation effect of the DropDownMenu.
+     *
+     * @default 'ease'
+     */
+    easing: string;
+}
 /**
  * DropDownButton component is used to toggle contextual overlays for displaying list of action items.
  * It can contain both text and images.
@@ -95,6 +124,31 @@ export declare class DropDownButton extends Component<HTMLButtonElement> impleme
      * @default ""
      */
     closeActionEvents: string;
+    /**
+     * Specifies the template content to be displayed.
+     *
+     * @default null
+     * @aspType string
+     */
+    itemTemplate: string | Function;
+    /**
+     * This property defines the width of the dropdown popup for the DropDownButton component.
+     *
+     * @property {string | number} popupWidth - A string or number representing the width of the dropdown.
+     * It can be a valid CSS unit such as `px`, `%`, or `rem`, or a number interpreted as pixels.
+     * @default "auto"
+     * @remarks
+     * The `popupWidth` property allows developers to control the width of the dropdown popup, ensuring it fits their design requirements.
+     * The default value of `auto` allows the popup to adjust based on the content length, but a specific width can be provided for more precise control.
+     */
+    popupWidth: string | number;
+    /**
+     * Specifies the animation settings for opening the sub menu in the DropDownMenu.
+     * The settings control the duration, easing, and effect of the animation applied when the sub menu opens.
+     *
+     * @default { effect: 'None' }
+     */
+    animationSettings: DropDownMenuAnimationSettingsModel;
     /**
      * Triggers while rendering each Popup item of DropDownButton.
      *
@@ -185,6 +239,7 @@ export declare class DropDownButton extends Component<HTMLButtonElement> impleme
     private createPopup;
     private getTargetElement;
     private createItems;
+    private compiletemplate;
     private hasIcon;
     private createAnchor;
     private initialize;
@@ -229,6 +284,8 @@ export declare class DropDownButton extends Component<HTMLButtonElement> impleme
     protected clickHandler(e: MouseEvent | KeyboardEventArgs): void;
     private triggerSelect;
     private openPopUp;
+    private animatePopup;
+    private setWidth;
     private closePopup;
     protected unWireEvents(): void;
     /**

package/src/drop-down-button/drop-down-button.js

@@ -17,10 +17,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, isRippleEnabled, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { addClass, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';
+import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, isRippleEnabled, isNullOrUndefined, append, formatUnit, Animation } from '@syncfusion/ej2-base';
+import { addClass, getUniqueID, rippleEffect, getComponent, ChildProperty, Complex } from '@syncfusion/ej2-base';
 import { attributes, Component, closest, select, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
-import { classList, removeClass } from '@syncfusion/ej2-base';
+import { classList, removeClass, compile } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
 import { Popup } from '@syncfusion/ej2-popups';
 import { upDownKeyHandler } from './../common/common';
@@ -33,8 +33,29 @@ var classNames = {
     POPUP: 'e-dropdown-popup',
     RTL: 'e-rtl',
     SEPARATOR: 'e-separator',
-    VERTICAL: 'e-vertical'
+    VERTICAL: 'e-vertical',
+    POPUPWIDTH: 'e-dropdown-popup-width'
 };
+/**
+ * Animation configuration settings.
+ */
+var DropDownMenuAnimationSettings = /** @class */ (function (_super) {
+    __extends(DropDownMenuAnimationSettings, _super);
+    function DropDownMenuAnimationSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('SlideDown')
+    ], DropDownMenuAnimationSettings.prototype, "effect", void 0);
+    __decorate([
+        Property(400)
+    ], DropDownMenuAnimationSettings.prototype, "duration", void 0);
+    __decorate([
+        Property('ease')
+    ], DropDownMenuAnimationSettings.prototype, "easing", void 0);
+    return DropDownMenuAnimationSettings;
+}(ChildProperty));
+export { DropDownMenuAnimationSettings };
 /**
  * DropDownButton component is used to toggle contextual overlays for displaying list of action items.
  * It can contain both text and images.
@@ -154,11 +175,12 @@ var DropDownButton = /** @class */ (function (_super) {
     DropDownButton.prototype.createPopup = function () {
         var _a;
         var div = this.createElement('div', {
-            className: classNames.POPUP,
+            className: this.popupWidth !== 'auto' ? classNames.POPUP + " " + classNames.POPUPWIDTH : classNames.POPUP,
             id: this.element.id + '-popup'
         });
         document.body.appendChild(div);
         this.dropDown = new Popup(div, {
+            width: this.popupWidth,
             relateTo: this.element,
             collision: { X: 'fit', Y: 'flip' },
             position: { X: 'left', Y: 'bottom' },
@@ -198,6 +220,7 @@ var DropDownButton = /** @class */ (function (_super) {
         return typeof (this.target) === 'string' ? select(this.target) : this.target;
     };
     DropDownButton.prototype.createItems = function (appendItems) {
+        var _this = this;
         var items = this.items;
         var showIcon = this.hasIcon(this.items, 'iconCss');
         var span;
@@ -213,55 +236,82 @@ var DropDownButton = /** @class */ (function (_super) {
                 attrs: { 'role': 'menu', 'tabindex': '0' }
             });
         }
-        for (var i = 0; i < items.length; i++) {
-            item = items[i];
-            var tempItem = item.text;
-            li = this.createElement('li', {
-                innerHTML: item.url ? '' : tempItem,
-                className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,
-                attrs: item.separator ? { 'role': 'separator', 'tabindex': '-1', 'aria-label': 'separator', 'aria-hidden': 'true' } : { 'role': 'menuitem', 'tabindex': '-1', 'aria-label': tempItem },
-                id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')
+        if (this.itemTemplate) {
+            var compiledTemplate_1 = this.compiletemplate(this.itemTemplate);
+            items.forEach(function (item) {
+                var li = _this.createElement('li', {
+                    className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,
+                    attrs: item.separator
+                        ? { 'role': 'separator', 'tabindex': '-1', 'aria-label': 'separator', 'aria-hidden': 'true' }
+                        : { 'role': 'menuitem', 'tabindex': '-1', 'aria-label': item.text },
+                    id: item.id ? item.id : getUniqueID('e-' + _this.getModuleName() + '-item')
+                });
+                var compiledElement = compiledTemplate_1(item, _this, 'template', null, false, null, li);
+                if (compiledElement) {
+                    append(compiledElement, li);
+                }
+                if (item.disabled) {
+                    li.classList.add('e-disabled');
+                }
+                var eventArgs = { item: item, element: li };
+                _this.trigger('beforeItemRender', eventArgs);
+                if (eventArgs.item.disabled !== item.disabled) {
+                    li.classList[eventArgs.item.disabled ? 'add' : 'remove']('e-disabled');
+                }
+                ul.appendChild(li);
             });
-            if (this.enableHtmlSanitizer) {
-                li.textContent = item.url ? '' : tempItem;
-            }
-            else {
-                li.innerHTML = item.url ? '' : tempItem;
-            }
-            if (item.url) {
-                li.appendChild(this.createAnchor(item));
-                li.classList.add('e-url');
-            }
-            if (item.iconCss) {
-                span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });
-                if (item.url) {
-                    li.childNodes[0].appendChild(span);
+        }
+        else {
+            for (var i = 0; i < items.length; i++) {
+                item = items[i];
+                var tempItem = item.text;
+                li = this.createElement('li', {
+                    innerHTML: item.url ? '' : tempItem,
+                    className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,
+                    attrs: item.separator ? { 'role': 'separator', 'tabindex': '-1', 'aria-label': 'separator', 'aria-hidden': 'true' } : { 'role': 'menuitem', 'tabindex': '-1', 'aria-label': tempItem },
+                    id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')
+                });
+                if (this.enableHtmlSanitizer) {
+                    li.textContent = item.url ? '' : tempItem;
                 }
                 else {
-                    li.insertBefore(span, li.childNodes[0]);
+                    li.innerHTML = item.url ? '' : tempItem;
                 }
-            }
-            else {
-                if (showIcon && !item.separator) {
-                    li.classList.add('e-blank-icon');
+                if (item.url) {
+                    li.appendChild(this.createAnchor(item));
+                    li.classList.add('e-url');
                 }
-            }
-            var beforeDisabled = item.disabled;
-            if (item.disabled) {
-                li.classList.add('e-disabled');
-            }
-            eventArgs = { item: item, element: li };
-            this.trigger('beforeItemRender', eventArgs);
-            var afterDisabled = eventArgs.item.disabled;
-            if (beforeDisabled !== afterDisabled) {
-                if (eventArgs.item.disabled) {
-                    li.classList.add('e-disabled');
+                if (item.iconCss) {
+                    span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });
+                    if (item.url) {
+                        li.childNodes[0].appendChild(span);
+                    }
+                    else {
+                        li.insertBefore(span, li.childNodes[0]);
+                    }
                 }
                 else {
-                    li.classList.remove('e-disabled');
+                    if (showIcon && !item.separator) {
+                        li.classList.add('e-blank-icon');
+                    }
                 }
+                var beforeDisabled = item.disabled;
+                if (item.disabled) {
+                    li.classList.add('e-disabled');
+                }
+                eventArgs = { item: item, element: li };
+                this.trigger('beforeItemRender', eventArgs);
+                var afterDisabled = eventArgs.item.disabled;
+                if (beforeDisabled !== afterDisabled) {
+                    if (eventArgs.item.disabled) {
+                        li.classList.add('e-disabled');
+                    }
+                    else {
+                        li.classList.remove('e-disabled');
+                    }
+                }
+                ul.appendChild(li);
             }
-            ul.appendChild(li);
         }
         if (appendItems) {
             this.getPopUpElement().appendChild(ul);
@@ -270,6 +320,24 @@ var DropDownButton = /** @class */ (function (_super) {
             setBlankIconStyle(this.getPopUpElement());
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    DropDownButton.prototype.compiletemplate = function (template) {
+        if (!this.itemTemplate) {
+            return undefined;
+        }
+        try {
+            if (typeof this.itemTemplate !== 'function') {
+                var templateElement = document.querySelector(this.itemTemplate);
+                if (templateElement) {
+                    return compile(templateElement.innerHTML.trim());
+                }
+            }
+            return compile(template);
+        }
+        catch (_a) {
+            return compile(template);
+        }
+    };
     DropDownButton.prototype.hasIcon = function (items, field) {
         for (var i = 0, len = items.length; i < len; i++) {
             if (items[i]["" + field]) {
@@ -609,6 +677,9 @@ var DropDownButton = /** @class */ (function (_super) {
         if (e === void 0) { e = null; }
         var isReact = false;
         var popupElem = this.getPopUpElement();
+        if (this.activeElem[0] && this.activeElem[0].classList.contains('e-dropdown-btn') && popupElem.style.width && popupElem.style.width !== 'auto') {
+            this.setWidth(popupElem);
+        }
         if (!this.target) {
             this.createItems(true);
         }
@@ -646,6 +717,13 @@ var DropDownButton = /** @class */ (function (_super) {
         this.trigger('beforeOpen', beforeOpenArgs, function (observedArgs) {
             if (!observedArgs.cancel) {
                 var ul_1 = _this.getULElement();
+                var animationOptions = _this.animationSettings.effect !== 'None' ? {
+                    name: _this.animationSettings.effect, duration: _this.animationSettings.duration,
+                    timingFunction: _this.animationSettings.easing
+                } : null;
+                if (animationOptions) {
+                    _this.animatePopup(animationOptions, ul_1);
+                }
                 _this.dropDown.show(null, _this.element);
                 addClass([_this.element], 'e-active');
                 _this.element.setAttribute('aria-expanded', 'true');
@@ -676,6 +754,20 @@ var DropDownButton = /** @class */ (function (_super) {
             }
         });
     };
+    DropDownButton.prototype.animatePopup = function (animationOptions, element) {
+        new Animation(animationOptions).animate(element, {
+            begin: function (args) {
+                args.element.parentElement.style.height = args.element.parentElement.offsetHeight + 'px';
+            }
+        });
+    };
+    DropDownButton.prototype.setWidth = function (popupElem) {
+        var width = formatUnit(popupElem.style.width);
+        if (width.indexOf('%') > -1) {
+            var btnWidth = this.element.offsetWidth * parseFloat(width) / 100;
+            popupElem.style.width = btnWidth + "px";
+        }
+    };
     DropDownButton.prototype.closePopup = function (e, focusEle) {
         var _this = this;
         if (e === void 0) { e = null; }
@@ -851,6 +943,15 @@ var DropDownButton = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], DropDownButton.prototype, "closeActionEvents", void 0);
+    __decorate([
+        Property(null)
+    ], DropDownButton.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property('auto')
+    ], DropDownButton.prototype, "popupWidth", void 0);
+    __decorate([
+        Complex({ effect: 'None' }, DropDownMenuAnimationSettings)
+    ], DropDownButton.prototype, "animationSettings", void 0);
     __decorate([
         Event()
     ], DropDownButton.prototype, "beforeItemRender", void 0);