@syncfusion/ej2-splitbuttons 22.2.8 → 23.1.41

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

@@ -1,4 +1,4 @@
-import { Animation, ChildProperty, Collection, Complex, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, attributes, classList, closest, createElement, deleteObject, detach, extend, getComponent, getInstance, getUniqueID, getValue, isNullOrUndefined, isRippleEnabled, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';
+import { Animation, ChildProperty, Collection, Complex, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, animationMode, attributes, classList, closest, createElement, deleteObject, detach, extend, getComponent, getInstance, getUniqueID, getValue, isNullOrUndefined, isRippleEnabled, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
 import { Popup, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 
@@ -310,13 +310,16 @@ let DropDownButton = class DropDownButton extends Component {
             content: this.target ? this.getTargetElement() : '',
             enableRtl: this.enableRtl
         });
+        if (!isNullOrUndefined(this.popupContent)) {
+            this.popupContent.style.display = '';
+        }
         if (this.dropDown.element.style.position === 'fixed') {
             this.dropDown.refreshPosition(this.element);
         }
         this.dropDown.hide();
         attributes(this.element, {
             ['aria-haspopup']: this.items.length || this.target ? 'true' : 'false', ['aria-expanded']: 'false',
-            ['type']: 'button', ['aria-label']: this.element.textContent ? this.element.textContent : 'dropdownbutton'
+            ['type']: 'button'
         });
         if (this.cssClass) {
             addClass([div], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
@@ -324,6 +327,9 @@ let DropDownButton = class DropDownButton extends Component {
         this.isPopupCreated = true;
     }
     getTargetElement() {
+        if (this.createPopupOnClick && !this.isColorPicker() && !isNullOrUndefined(this.popupContent)) {
+            return this.popupContent;
+        }
         return typeof (this.target) === 'string' ? select(this.target) : this.target;
     }
     createItems(appendItems) {
@@ -413,11 +419,16 @@ let DropDownButton = class DropDownButton extends Component {
         }
         this.appendArrowSpan();
         this.setActiveElem([this.element]);
-        if ((this.target && !this.isColorPicker()) || !this.createPopupOnClick) {
+        this.element.setAttribute('aria-label', this.element.textContent ? this.element.textContent : 'dropdownbutton');
+        if ((this.target && !this.isColorPicker() && !this.createPopupOnClick) || !this.createPopupOnClick) {
             this.createPopup();
         }
         else {
             this.isPopupCreated = false;
+            if (this.target && !this.isColorPicker() && this.createPopupOnClick) {
+                this.popupContent = this.getTargetElement();
+                this.popupContent.style.display = 'none';
+            }
         }
     }
     isColorPicker() {
@@ -657,7 +668,7 @@ let DropDownButton = class DropDownButton extends Component {
     clickHandler(e) {
         const trgt = e.target;
         if (closest(trgt, '[id="' + this.element.id + '"]')) {
-            if (!this.createPopupOnClick || (this.target && this.target !== '' && !this.isColorPicker())) {
+            if (!this.createPopupOnClick || (this.target && this.target !== '' && !this.isColorPicker() && !this.createPopupOnClick)) {
                 if (this.getPopUpElement().classList.contains('e-popup-close')) {
                     this.openPopUp(e);
                 }
@@ -776,7 +787,7 @@ let DropDownButton = class DropDownButton extends Component {
                 if (!this.target && ul) {
                     detach(ul);
                 }
-                if (!this.target || this.isColorPicker()) {
+                if (!this.target || this.isColorPicker() || (this.target && !this.isColorPicker())) {
                     if (this.createPopupOnClick) {
                         this.destroyPopup();
                     }
@@ -1141,7 +1152,7 @@ let SplitButton = class SplitButton extends DropDownButton {
     setAria() {
         attributes(this.element, {
             'aria-expanded': 'false', 'aria-haspopup': 'true',
-            'aria-label': this.element.textContent + ' splitbutton', 'aria-owns': this.element.id + '_dropdownbtn-popup'
+            'aria-label': this.element.textContent ? this.element.textContent + ' splitbutton' : 'splitbutton', 'aria-owns': this.element.id + '_dropdownbtn-popup'
         });
     }
     /**
@@ -1185,6 +1196,7 @@ let SplitButton = class SplitButton extends DropDownButton {
                 this.unWireEvents();
             }
         }
+        this.wrapper = null;
         this.primaryBtnObj.destroy();
         this.secondaryBtnObj.destroy();
         super.destroy();
@@ -1738,7 +1750,7 @@ let ProgressButton = class ProgressButton extends Button {
         const ele = this.element.getElementsByClassName(CONTENTCLS)[0];
         if (this.animationSettings.effect !== 'None') {
             (new Animation({})).animate(ele, {
-                duration: this.animationSettings.duration,
+                duration: (this.animationSettings.duration === 0 && animationMode === 'Enable') ? 400 : this.animationSettings.duration,
                 name: 'Progress' + this.animationSettings.effect,
                 timingFunction: this.animationSettings.easing,
                 begin: () => {