@syncfusion/ej2-splitbuttons 27.2.2 → 28.1.33

package/dist/es6/ej2-splitbuttons.es5.js

@@ -1,4 +1,4 @@
-import { extend, deleteObject, addClass, isNullOrUndefined, Property, ChildProperty, attributes, getComponent, select, getUniqueID, SanitizeHtmlHelper, detach, removeClass, EventHandler, rippleEffect, isRippleEnabled, closest, classList, Collection, Event, NotifyPropertyChanges, Component, getValue, setValue, remove, KeyboardEvents, getInstance, createElement, Animation, animationMode, Complex } from '@syncfusion/ej2-base';
+import { extend, deleteObject, addClass, isNullOrUndefined, Property, ChildProperty, attributes, getComponent, select, getUniqueID, append, compile, SanitizeHtmlHelper, detach, removeClass, EventHandler, rippleEffect, isRippleEnabled, closest, Animation, formatUnit, classList, Collection, Complex, Event, NotifyPropertyChanges, Component, getValue, setValue, remove, KeyboardEvents, getInstance, createElement, animationMode } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
 import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 
@@ -107,9 +107,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}
  */
 function setBlankIconStyle(popup, blankIcon) {
@@ -145,7 +145,7 @@ 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 {
@@ -210,8 +210,28 @@ 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 = /** @__PURE__ @class */ (function (_super) {
+    __extends$1(DropDownMenuAnimationSettings, _super);
+    function DropDownMenuAnimationSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$1([
+        Property('SlideDown')
+    ], DropDownMenuAnimationSettings.prototype, "effect", void 0);
+    __decorate$1([
+        Property(400)
+    ], DropDownMenuAnimationSettings.prototype, "duration", void 0);
+    __decorate$1([
+        Property('ease')
+    ], DropDownMenuAnimationSettings.prototype, "easing", void 0);
+    return DropDownMenuAnimationSettings;
+}(ChildProperty));
 /**
  * DropDownButton component is used to toggle contextual overlays for displaying list of action items.
  * It can contain both text and images.
@@ -331,11 +351,12 @@ var DropDownButton = /** @__PURE__ @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' },
@@ -375,6 +396,7 @@ var DropDownButton = /** @__PURE__ @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;
@@ -390,55 +412,82 @@ var DropDownButton = /** @__PURE__ @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);
@@ -447,6 +496,24 @@ var DropDownButton = /** @__PURE__ @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]) {
@@ -785,6 +852,9 @@ var DropDownButton = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         if (e === void 0) { e = null; }
         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);
         }
@@ -819,6 +889,13 @@ var DropDownButton = /** @__PURE__ @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');
@@ -849,6 +926,20 @@ var DropDownButton = /** @__PURE__ @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; }
@@ -1024,6 +1115,15 @@ var DropDownButton = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property('')
     ], DropDownButton.prototype, "closeActionEvents", void 0);
+    __decorate$1([
+        Property(null)
+    ], DropDownButton.prototype, "itemTemplate", void 0);
+    __decorate$1([
+        Property('auto')
+    ], DropDownButton.prototype, "popupWidth", void 0);
+    __decorate$1([
+        Complex({ effect: 'None' }, DropDownMenuAnimationSettings)
+    ], DropDownButton.prototype, "animationSettings", void 0);
     __decorate$1([
         Event()
     ], DropDownButton.prototype, "beforeItemRender", void 0);
@@ -2084,5 +2184,5 @@ var ProgressButton = /** @__PURE__ @class */ (function (_super) {
     return ProgressButton;
 }(Button));
 
-export { AnimationSettings, Deferred, DropDownButton, Item, ProgressButton, SpinSettings, SplitButton, createButtonGroup, getModel, setBlankIconStyle, upDownKeyHandler };
+export { AnimationSettings, Deferred, DropDownButton, DropDownMenuAnimationSettings, Item, ProgressButton, SpinSettings, SplitButton, createButtonGroup, getModel, setBlankIconStyle, upDownKeyHandler };
 //# sourceMappingURL=ej2-splitbuttons.es5.js.map