@syncfusion/ej2-splitbuttons 27.2.2 → 28.1.37

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

@@ -1,4 +1,4 @@
-import { extend, deleteObject, addClass, isNullOrUndefined, ChildProperty, Property, Component, attributes, getComponent, select, getUniqueID, SanitizeHtmlHelper, detach, removeClass, EventHandler, rippleEffect, isRippleEnabled, closest, classList, Collection, Event, NotifyPropertyChanges, getValue, setValue, remove, KeyboardEvents, getInstance, createElement, Animation, animationMode, Complex } from '@syncfusion/ej2-base';
+import { extend, deleteObject, addClass, isNullOrUndefined, ChildProperty, Property, Component, attributes, getComponent, select, getUniqueID, append, compile, SanitizeHtmlHelper, detach, removeClass, EventHandler, rippleEffect, isRippleEnabled, closest, Animation, formatUnit, classList, Collection, Complex, Event, NotifyPropertyChanges, 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';
 
@@ -92,9 +92,9 @@ function isValidLI(ul, li, index, keyCode, count = 0) {
     }
     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) {
@@ -130,7 +130,7 @@ function setBlankIconStyle(popup, blankIcon) {
     let 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((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 {
@@ -177,8 +177,23 @@ const 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.
+ */
+class DropDownMenuAnimationSettings extends ChildProperty {
+}
+__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);
 /**
  * DropDownButton component is used to toggle contextual overlays for displaying list of action items.
  * It can contain both text and images.
@@ -295,11 +310,12 @@ let DropDownButton = class DropDownButton extends Component {
     }
     createPopup() {
         const 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' },
@@ -353,55 +369,82 @@ let DropDownButton = class DropDownButton extends Component {
                 attrs: { 'role': 'menu', 'tabindex': '0' }
             });
         }
-        for (let i = 0; i < items.length; i++) {
-            item = items[i];
-            const 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) {
+            const compiledTemplate = this.compiletemplate(this.itemTemplate);
+            items.forEach((item) => {
+                const 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')
+                });
+                const compiledElement = compiledTemplate(item, this, 'template', null, false, null, li);
+                if (compiledElement) {
+                    append(compiledElement, li);
+                }
+                if (item.disabled) {
+                    li.classList.add('e-disabled');
+                }
+                const eventArgs = { 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 (let i = 0; i < items.length; i++) {
+                item = items[i];
+                const 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');
                 }
-            }
-            const beforeDisabled = item.disabled;
-            if (item.disabled) {
-                li.classList.add('e-disabled');
-            }
-            eventArgs = { item: item, element: li };
-            this.trigger('beforeItemRender', eventArgs);
-            const 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');
+                    }
+                }
+                const beforeDisabled = item.disabled;
+                if (item.disabled) {
+                    li.classList.add('e-disabled');
+                }
+                eventArgs = { item: item, element: li };
+                this.trigger('beforeItemRender', eventArgs);
+                const 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);
@@ -410,6 +453,24 @@ let DropDownButton = class DropDownButton extends Component {
             setBlankIconStyle(this.getPopUpElement());
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    compiletemplate(template) {
+        if (!this.itemTemplate) {
+            return undefined;
+        }
+        try {
+            if (typeof this.itemTemplate !== 'function') {
+                const templateElement = document.querySelector(this.itemTemplate);
+                if (templateElement) {
+                    return compile(templateElement.innerHTML.trim());
+                }
+            }
+            return compile(template);
+        }
+        catch (_a) {
+            return compile(template);
+        }
+    }
     hasIcon(items, field) {
         for (let i = 0, len = items.length; i < len; i++) {
             if (items[i][`${field}`]) {
@@ -745,6 +806,9 @@ let DropDownButton = class DropDownButton extends Component {
     }
     openPopUp(e = null) {
         const 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);
         }
@@ -779,6 +843,13 @@ let DropDownButton = class DropDownButton extends Component {
         this.trigger('beforeOpen', beforeOpenArgs, (observedArgs) => {
             if (!observedArgs.cancel) {
                 const ul = this.getULElement();
+                const animationOptions = this.animationSettings.effect !== 'None' ? {
+                    name: this.animationSettings.effect, duration: this.animationSettings.duration,
+                    timingFunction: this.animationSettings.easing
+                } : null;
+                if (animationOptions) {
+                    this.animatePopup(animationOptions, ul);
+                }
                 this.dropDown.show(null, this.element);
                 addClass([this.element], 'e-active');
                 this.element.setAttribute('aria-expanded', 'true');
@@ -809,6 +880,20 @@ let DropDownButton = class DropDownButton extends Component {
             }
         });
     }
+    animatePopup(animationOptions, element) {
+        new Animation(animationOptions).animate(element, {
+            begin: (args) => {
+                args.element.parentElement.style.height = args.element.parentElement.offsetHeight + 'px';
+            }
+        });
+    }
+    setWidth(popupElem) {
+        const width = formatUnit(popupElem.style.width);
+        if (width.indexOf('%') > -1) {
+            const btnWidth = this.element.offsetWidth * parseFloat(width) / 100;
+            popupElem.style.width = `${btnWidth}px`;
+        }
+    }
     closePopup(e = null, focusEle) {
         const ul = this.getULElement();
         const beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };
@@ -982,6 +1067,15 @@ __decorate$1([
 __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);
@@ -1988,5 +2082,5 @@ ProgressButton = __decorate$3([
     NotifyPropertyChanges
 ], ProgressButton);
 
-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.es2015.js.map