{"version":3,"file":"ej2-splitbuttons.min.js","sources":["../../src/common/common.js","../../src/button-group/button-group.js","../../src/drop-down-button/drop-down-button.js","../../src/split-button/split-button.js","../../src/progress-button/progress-button.js"],"sourcesContent":["var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { ChildProperty, extend, deleteObject, Property, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @param {Object} props - Specifies the properties\n * @param {string[]} model - Specifies the model\n * @returns {Object} Component Model\n */\nexport function getModel(props, model) {\n var obj = extend({}, props);\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var prop = _a[_i];\n if ((model).indexOf(prop) < 0) {\n deleteObject(obj, prop);\n }\n }\n return obj;\n}\n/** @hidden\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {number} keyCode - Specifies the keycode\n * @returns {void}\n */\nexport function upDownKeyHandler(ul, keyCode) {\n var defaultIdx = keyCode === 40 ? 0 : ul.childElementCount - 1;\n var liIdx = defaultIdx;\n var li;\n var selectedLi = ul.querySelector('.e-selected');\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains('e-focused')) {\n li = ul.children[i];\n liIdx = i;\n li.classList.remove('e-focused');\n if (keyCode === 40) {\n liIdx++;\n }\n else {\n liIdx--;\n }\n if (liIdx === (keyCode === 40 ? ul.childElementCount : -1)) {\n liIdx = defaultIdx;\n }\n }\n }\n li = ul.children[liIdx];\n liIdx = isValidLI(ul, li, liIdx, keyCode);\n if (liIdx !== -1) {\n addClass([ul.children[liIdx]], 'e-focused');\n ul.children[liIdx].focus();\n }\n}\n/**\n * Get Valid LI element\n *\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {Element} li - Specifies the LI element\n * @param {number} index - Specifies the index\n * @param {number} keyCode - Specifies the keycode\n * @param {number} count - Specifies the count\n * @returns {number} - Index\n */\nfunction isValidLI(ul, li, index, keyCode, count) {\n if (count === void 0) { count = 0; }\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n if (index === (keyCode === 40 ? ul.childElementCount - 1 : 0)) {\n index = keyCode === 40 ? 0 : ul.childElementCount - 1;\n }\n else {\n if (keyCode === 40) {\n index++;\n }\n else {\n index--;\n }\n }\n }\n li = ul.children[index];\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n count++;\n if (count === ul.childElementCount) {\n return index = -1;\n }\n index = isValidLI(ul, li, index, keyCode, count);\n }\n return index;\n}\n/** @hidden\n * @param {HTMLElement} popup - Specifies the popup element.\n * @returns {void}\n */\nexport function setBlankIconStyle(popup, blankIcon) {\n var blankIconList = [].slice.call(popup.getElementsByClassName('e-blank-icon'));\n if (blankIcon) {\n var menuItem = [].slice.call(popup.getElementsByClassName('e-item'));\n menuItem.forEach(function (li) {\n if (li.style.paddingLeft || li.style.paddingRight) {\n li.removeAttribute('style');\n }\n });\n }\n if (!blankIconList.length) {\n return;\n }\n var iconLi = popup.querySelector('.e-item:not(.e-blank-icon):not(.e-separator)');\n if (isNullOrUndefined(iconLi)) {\n return;\n }\n if (iconLi.classList.contains('e-url')) {\n iconLi = iconLi.querySelector('.e-menu-url');\n }\n var icon = iconLi.querySelector('.e-menu-icon');\n var cssProp;\n var enableRtl = popup.classList.contains('e-rtl');\n if (enableRtl) {\n cssProp = { padding: 'paddingRight', margin: 'marginLeft' };\n }\n else {\n cssProp = { padding: 'paddingLeft', margin: 'marginRight' };\n }\n /* eslint-disable */\n var size = parseInt(getComputedStyle(icon).fontSize, 10) + parseInt((enableRtl ? getComputedStyle(icon)[cssProp.margin] : getComputedStyle(icon)[cssProp.margin]), 10)\n + parseInt(getComputedStyle(iconLi).paddingLeft, 10) + \"px\";\n blankIconList.forEach(function (li) {\n if (li.classList.contains('e-url')) {\n li.querySelector('.e-menu-url').style[cssProp.padding] = size;\n }\n else {\n li.style[cssProp.padding] = size;\n }\n });\n /* eslint-enable */\n}\n/**\n * Defines the items of Split Button/DropDownButton.\n */\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"separator\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"url\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n","import { addClass, createElement as internalCreateElement, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\n/**\n * Initialize ButtonGroup CSS component with specified properties.\n * ```html\n *
\n * ```\n * ```typescript\n * createButtonGroup('#buttongroup', {\n * cssClass: 'e-outline',\n * buttons: [\n * { content: 'Day' },\n * { content: 'Week' },\n * { content: 'Work Week'}\n * ]\n * });\n * ```\n *\n * @param {string} selector\n * @param {CreateButtonGroupModel} options\n * @returns HTMLElement\n */\n/**\n * Creates button group.\n *\n * @param {string} selector - Specifies the selector.\n * @param {CreateButtonGroupModel} options - Specifies the button group model.\n * @param {Function} createElement - Specifies the element.\n * @returns {HTMLElement} - Button group element.\n */\nexport function createButtonGroup(selector, options, createElement) {\n if (options === void 0) { options = {}; }\n var child;\n var btnElem;\n var nextChild;\n var btnModel;\n if (isNullOrUndefined(createElement)) {\n createElement = internalCreateElement;\n }\n var wrapper = document.querySelector(selector);\n addClass([wrapper], ['e-btn-group', 'e-css']);\n wrapper.setAttribute('role', 'group');\n var childs = wrapper.children;\n options.buttons = options.buttons || [];\n for (var i = 0, j = 0; j < childs.length; i++, j++) {\n child = childs[j];\n btnModel = options.buttons[i];\n if (btnModel !== null) {\n if (child.tagName === 'BUTTON') {\n btnElem = child;\n }\n else {\n btnElem = createElement('label');\n nextChild = childs[j + 1];\n if (nextChild) {\n wrapper.insertBefore(btnElem, nextChild);\n }\n else {\n wrapper.appendChild(btnElem);\n }\n if (child.id) {\n btnElem.setAttribute('for', child.id);\n }\n if (btnModel && btnModel.disabled) {\n child.disabled = true;\n }\n j++;\n }\n if (options.cssClass && btnModel && !btnModel.cssClass) {\n btnModel.cssClass = options.cssClass;\n }\n new Button(btnModel || {}, btnElem);\n }\n }\n return wrapper;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, isRippleEnabled, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { addClass, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';\nimport { attributes, Component, closest, select, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { classList, removeClass } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { upDownKeyHandler } from './../common/common';\nimport { getModel, Item, setBlankIconStyle } from './../common/common';\nvar classNames = {\n DISABLED: 'e-disabled',\n FOCUS: 'e-focused',\n ICON: 'e-menu-icon',\n ITEM: 'e-item',\n POPUP: 'e-dropdown-popup',\n RTL: 'e-rtl',\n SEPARATOR: 'e-separator',\n VERTICAL: 'e-vertical'\n};\n/**\n * DropDownButton component is used to toggle contextual overlays for displaying list of action items.\n * It can contain both text and images.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar DropDownButton = /** @class */ (function (_super) {\n __extends(DropDownButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DropDownButtonModel} options - Specifies dropdown button model\n * @param {string|HTMLButtonElement} element - Specifies element\n * @hidden\n */\n function DropDownButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isPopupCreated = true;\n return _this;\n }\n DropDownButton.prototype.preRender = function () {\n /** */\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n DropDownButton.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To open/close DropDownButton popup based on current state of the DropDownButton.\n *\n * @returns {void}\n */\n DropDownButton.prototype.toggle = function () {\n if (this.canOpen()) {\n this.openPopUp();\n }\n else if (this.createPopupOnClick && !this.isPopupCreated) {\n this.createPopup();\n this.openPopUp();\n }\n else {\n this.closePopup();\n }\n };\n /**\n * Initialize the Component rendering\n *\n * @returns {void}\n * @private\n */\n DropDownButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n };\n /**\n * Adds a new item to the menu. By default, new item appends to the list as the last item,\n * but you can insert based on the text parameter.\n *\n * @param { ItemModel[] } items - Specifies an array of JSON data.\n * @param { string } text - Specifies the text to insert the newly added item in the menu.\n * @returns {void}.\n */\n DropDownButton.prototype.addItems = function (items, text) {\n var newItem;\n var idx = this.items.length;\n for (var j = 0, len = this.items.length; j < len; j++) {\n if (text === this.items[j].text) {\n idx = j;\n break;\n }\n }\n for (var i = items.length - 1; i >= 0; i--) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newItem = new Item(this, 'items', items[i], true);\n this.items.splice(idx, 0, newItem);\n }\n if (!this.canOpen()) {\n this.createItems();\n }\n };\n /**\n * Removes the items from the menu.\n *\n * @param { string[] } items - Specifies an array of string to remove the items.\n * @param { string } isUniqueId - Set `true` if specified items is a collection of unique id.\n * @returns {void}.\n */\n DropDownButton.prototype.removeItems = function (items, isUniqueId) {\n var refresh = false;\n for (var i = 0, len = items.length; i < len; i++) {\n for (var j = 0, len_1 = this.items.length; j < len_1; j++) {\n if (items[i] === (isUniqueId ? this.items[j].id : this.items[j].text)) {\n this.items.splice(j, 1);\n refresh = true;\n break;\n }\n }\n }\n if (refresh && this.getULElement()) {\n this.createItems();\n }\n };\n DropDownButton.prototype.createPopup = function () {\n var _a;\n var div = this.createElement('div', {\n className: classNames.POPUP,\n id: this.element.id + '-popup'\n });\n document.body.appendChild(div);\n this.dropDown = new Popup(div, {\n relateTo: this.element,\n collision: { X: 'fit', Y: 'flip' },\n position: { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n content: this.target ? this.getTargetElement() : '',\n enableRtl: this.enableRtl\n });\n this.dropDown.element.setAttribute('role', 'dialog');\n this.dropDown.element.setAttribute('aria-label', 'dropdown menu');\n if (!isNullOrUndefined(this.popupContent)) {\n this.popupContent.style.display = '';\n }\n if (this.dropDown.element.style.position === 'fixed') {\n this.dropDown.refreshPosition(this.element);\n }\n this.dropDown.hide();\n attributes(this.element, (_a = {},\n _a['aria-haspopup'] = this.items.length || this.target ? 'true' : 'false',\n _a['aria-expanded'] = 'false',\n _a['type'] = 'button',\n _a));\n if (this.cssClass) {\n addClass([div], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n this.isPopupCreated = true;\n };\n DropDownButton.prototype.getTargetElement = function () {\n if (this.createPopupOnClick && !this.isColorPicker() && !isNullOrUndefined(this.popupContent)) {\n return this.popupContent;\n }\n return typeof (this.target) === 'string' ? select(this.target) : this.target;\n };\n DropDownButton.prototype.createItems = function (appendItems) {\n var items = this.items;\n var showIcon = this.hasIcon(this.items, 'iconCss');\n var span;\n var item;\n var li;\n var eventArgs;\n var ul = this.getULElement();\n if (ul) {\n ul.innerHTML = '';\n }\n else {\n ul = this.createElement('ul', {\n attrs: { 'role': 'menu', 'tabindex': '0' }\n });\n }\n for (var i = 0; i < items.length; i++) {\n item = items[i];\n var tempItem = item.text;\n li = this.createElement('li', {\n innerHTML: item.url ? '' : tempItem,\n className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,\n attrs: item.separator ? { 'role': 'separator', 'tabindex': '-1', 'aria-label': 'separator', 'aria-hidden': 'true' } : { 'role': 'menuitem', 'tabindex': '-1', 'aria-label': tempItem },\n id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')\n });\n if (this.enableHtmlSanitizer) {\n li.textContent = item.url ? '' : tempItem;\n }\n else {\n li.innerHTML = item.url ? '' : tempItem;\n }\n if (item.url) {\n li.appendChild(this.createAnchor(item));\n li.classList.add('e-url');\n }\n if (item.iconCss) {\n span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });\n if (item.url) {\n li.childNodes[0].appendChild(span);\n }\n else {\n li.insertBefore(span, li.childNodes[0]);\n }\n }\n else {\n if (showIcon && !item.separator) {\n li.classList.add('e-blank-icon');\n }\n }\n var beforeDisabled = item.disabled;\n if (item.disabled) {\n li.classList.add('e-disabled');\n }\n eventArgs = { item: item, element: li };\n this.trigger('beforeItemRender', eventArgs);\n var afterDisabled = eventArgs.item.disabled;\n if (beforeDisabled !== afterDisabled) {\n if (eventArgs.item.disabled) {\n li.classList.add('e-disabled');\n }\n else {\n li.classList.remove('e-disabled');\n }\n }\n ul.appendChild(li);\n }\n if (appendItems) {\n this.getPopUpElement().appendChild(ul);\n }\n if (showIcon) {\n setBlankIconStyle(this.getPopUpElement());\n }\n };\n DropDownButton.prototype.hasIcon = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][\"\" + field]) {\n return true;\n }\n }\n return false;\n };\n DropDownButton.prototype.createAnchor = function (item) {\n var tempItem = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(item.text) : item.text;\n return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: tempItem, attrs: { 'href': item.url } });\n };\n DropDownButton.prototype.initialize = function () {\n this.button = new Button({\n iconCss: this.iconCss, iconPosition: this.iconPosition, cssClass: this.cssClass, content: this.content,\n disabled: this.disabled, enableRtl: this.enableRtl, enablePersistence: this.enablePersistence\n });\n this.button.createElement = this.createElement;\n this.button.appendTo(this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n this.appendArrowSpan();\n this.setActiveElem([this.element]);\n this.element.setAttribute('tabindex', '0');\n this.element.setAttribute('aria-label', this.element.textContent ? this.element.textContent : 'dropdownbutton');\n if ((this.target && !this.isColorPicker() && !this.createPopupOnClick) || !this.createPopupOnClick) {\n this.createPopup();\n }\n else {\n this.isPopupCreated = false;\n if (this.target && !this.isColorPicker() && this.createPopupOnClick) {\n this.popupContent = this.getTargetElement();\n this.popupContent.style.display = 'none';\n }\n }\n };\n DropDownButton.prototype.isColorPicker = function () {\n if (!this.element) {\n return false;\n }\n var prevElem = this.element.previousSibling;\n if (prevElem && prevElem.classList && prevElem.classList.contains('e-split-colorpicker')) {\n return true;\n }\n return false;\n };\n DropDownButton.prototype.appendArrowSpan = function () {\n this.cssClass = isNullOrUndefined(this.cssClass) ? '' : this.cssClass;\n this.element.appendChild(this.createElement('span', {\n className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1\n ? 'bottom' : 'right') + ' e-caret'\n }));\n };\n DropDownButton.prototype.setActiveElem = function (elem) {\n this.activeElem = elem;\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n DropDownButton.prototype.getModuleName = function () {\n return 'dropdown-btn';\n };\n DropDownButton.prototype.canOpen = function () {\n var val = false;\n if (this.isPopupCreated) {\n val = this.getPopUpElement().classList.contains('e-popup-close');\n }\n return val;\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n DropDownButton.prototype.destroy = function () {\n var _this = this;\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'dropdown-btn') {\n var classList_1;\n if (this.element.querySelector('span.e-caret')) {\n detach(this.element.querySelector('span.e-caret'));\n }\n if (this.cssClass) {\n classList_1 = this.cssClass.split(' ');\n }\n this.button.destroy();\n if (classList_1) {\n removeClass([this.element], classList_1);\n }\n removeClass(this.activeElem, ['e-active']);\n var attrList = this.element.getAttribute('class') ? ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type']\n : ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type', 'class'];\n attrList.forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n this.popupUnWireEvents();\n this.destroyPopup();\n this.isPopupCreated = false;\n if (!this.disabled) {\n this.unWireEvents();\n }\n }\n };\n DropDownButton.prototype.destroyPopup = function () {\n if (this.isPopupCreated) {\n this.dropDown.destroy();\n if (this.getPopUpElement()) {\n var popupEle = document.getElementById(this.getPopUpElement().id);\n if (popupEle) {\n removeClass([popupEle], ['e-popup-open', 'e-popup-close']);\n detach(popupEle);\n }\n }\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated && this.dropDown) {\n this.dropDown.element = null;\n this.dropDown = undefined;\n }\n }\n this.isPopupCreated = false;\n };\n DropDownButton.prototype.getPopUpElement = function () {\n var val = null;\n if (!this.dropDown && this.activeElem[0].classList.contains('e-split-btn')) {\n var dropDownBtn = getComponent(this.activeElem[1], 'dropdown-btn');\n if (dropDownBtn) {\n this.dropDown = dropDownBtn.dropDown;\n }\n }\n if (this.dropDown) {\n val = this.dropDown.element;\n }\n return val;\n };\n DropDownButton.prototype.getULElement = function () {\n var val = null;\n if (this.getPopUpElement()) {\n val = this.getPopUpElement().children[0];\n }\n return val;\n };\n DropDownButton.prototype.wireEvents = function () {\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n if (!this.createPopupOnClick) {\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n }\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.add(window, 'resize', this.windowResize, this);\n };\n DropDownButton.prototype.windowResize = function () {\n if (!this.canOpen() && this.dropDown) {\n this.dropDown.refreshPosition(this.element);\n }\n };\n DropDownButton.prototype.popupWireEvents = function () {\n if (!this.delegateMousedownHandler) {\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n }\n var popupElement = this.getPopUpElement();\n if (this.createPopupOnClick) {\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n }\n if (popupElement) {\n EventHandler.add(popupElement, 'click', this.clickHandler, this);\n EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);\n if (this.closeActionEvents) {\n EventHandler.add(popupElement, this.closeActionEvents, this.focusoutHandler, this);\n }\n }\n this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });\n };\n DropDownButton.prototype.popupUnWireEvents = function () {\n var popupElement = this.getPopUpElement();\n if (this.createPopupOnClick) {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n }\n if (popupElement && popupElement.parentElement) {\n EventHandler.remove(popupElement, 'click', this.clickHandler);\n EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);\n if (this.closeActionEvents) {\n EventHandler.remove(popupElement, this.closeActionEvents, this.focusoutHandler);\n }\n }\n if (isRippleEnabled && this.rippleFn) {\n this.rippleFn();\n }\n };\n /**\n * Handles the keyboard interactions.\n *\n * @param {KeyboardEventArgs} e - Specifies keyboard event args.\n * @returns {void}\n * @hidden\n */\n DropDownButton.prototype.keyBoardHandler = function (e) {\n if (e.target === this.element && (e.keyCode === 9 || (!e.altKey && e.keyCode === 40) || e.keyCode === 38)) {\n return;\n }\n switch (e.keyCode) {\n case 38:\n case 40:\n if (e.altKey && (e.keyCode === 38 || e.keyCode === 40)) {\n this.keyEventHandler(e);\n }\n else {\n this.upDownKeyHandler(e);\n }\n break;\n case 9:\n case 13:\n case 27:\n case 32:\n this.keyEventHandler(e);\n break;\n }\n };\n DropDownButton.prototype.upDownKeyHandler = function (e) {\n if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {\n return;\n }\n e.preventDefault();\n upDownKeyHandler(this.getULElement(), e.keyCode);\n };\n DropDownButton.prototype.keyEventHandler = function (e) {\n if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {\n return;\n }\n if (e.keyCode === 13 && this.activeElem[0].classList.contains('e-split-btn')) {\n this.triggerSelect(e);\n this.activeElem[0].focus();\n return;\n }\n if (e.target && e.target.className.indexOf('e-edit-template') > -1 && e.keyCode === 32) {\n return;\n }\n if (e.keyCode !== 9) {\n e.preventDefault();\n }\n if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {\n if (!this.canOpen()) {\n this.closePopup(e, this.element);\n }\n }\n else {\n this.clickHandler(e);\n }\n };\n DropDownButton.prototype.getLI = function (elem) {\n return elem.tagName === 'LI' ? elem : closest(elem, 'li');\n };\n DropDownButton.prototype.mousedownHandler = function (e) {\n var trgt = e.target;\n if (this.dropDown && !this.canOpen() && !(closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')\n || closest(trgt, '[id=\"' + this.element.id + '\"]'))) {\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.focusoutHandler = function (e) {\n if (this.isPopupCreated && !this.canOpen()) {\n var liTarget = e.relatedTarget;\n if (liTarget && liTarget.className.indexOf('e-item') > -1) {\n var li = this.getLI(liTarget);\n if (li) {\n var liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n var item = this.items[liIdx];\n if (item) {\n var selectEventArgs = { element: li, item: item, event: e };\n this.trigger('select', selectEventArgs);\n }\n }\n }\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.clickHandler = function (e) {\n var trgt = e.target;\n if (closest(trgt, '[id=\"' + this.element.id + '\"]')) {\n if (!this.createPopupOnClick || (this.target && this.target !== '' && !this.isColorPicker() && !this.createPopupOnClick)) {\n if (this.getPopUpElement().classList.contains('e-popup-close')) {\n this.openPopUp(e);\n }\n else {\n this.closePopup(e);\n }\n }\n else if (this.isPopupCreated) {\n this.closePopup(e, this.activeElem[0]);\n }\n else {\n this.createPopup();\n this.openPopUp(e);\n }\n }\n else {\n if (closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')) {\n var li = this.getLI(e.target);\n if (li) {\n this.triggerSelect(e);\n this.closePopup(e, this.activeElem[0]);\n }\n }\n }\n };\n DropDownButton.prototype.triggerSelect = function (e) {\n var eventArgs;\n var liIdx;\n var item;\n var li = this.getLI(e.target);\n if (li) {\n liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n item = this.items[liIdx];\n if (item) {\n eventArgs = { element: li, item: item, event: e };\n this.trigger('select', eventArgs);\n }\n }\n };\n DropDownButton.prototype.openPopUp = function (e) {\n var _this = this;\n if (e === void 0) { e = null; }\n var isReact = false;\n var popupElem = this.getPopUpElement();\n if (!this.target) {\n this.createItems(true);\n }\n else {\n if (this.activeElem.length > 1) {\n var splitButton = getComponent(this.activeElem[0], 'split-btn');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (splitButton.isReact && popupElem.childNodes.length < 1) {\n isReact = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n splitButton.appendReactElement(this.getTargetElement(), this.getPopUpElement());\n this.renderReactTemplates();\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact && popupElem.childNodes.length < 1) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n isReact = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.appendReactElement(this.getTargetElement(), this.getPopUpElement());\n this.renderReactTemplates();\n }\n }\n }\n var ul = this.getULElement();\n this.popupWireEvents();\n var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeOpen', beforeOpenArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var ul_1 = _this.getULElement();\n _this.dropDown.show(null, _this.element);\n addClass([_this.element], 'e-active');\n _this.element.setAttribute('aria-expanded', 'true');\n _this.element.setAttribute('aria-owns', _this.getPopUpElement().id);\n if (ul_1) {\n ul_1.focus();\n }\n if (_this.enableRtl && ul_1.parentElement.style.left !== '0px') {\n var wrapperWidth = void 0;\n if (_this.element.parentElement && _this.element.parentElement.classList.contains('e-split-btn-wrapper')) {\n wrapperWidth = _this.element.parentElement.offsetWidth;\n }\n else {\n wrapperWidth = _this.element.offsetWidth;\n }\n var popupRect = ul_1.parentElement.offsetWidth - wrapperWidth;\n var popupLeft = parseFloat(ul_1.parentElement.style.left) - popupRect;\n if (popupLeft < 0) {\n popupLeft = 0;\n }\n ul_1.parentElement.style.left = popupLeft + 'px';\n }\n var openArgs = { element: ul_1, items: _this.items };\n _this.trigger('open', openArgs);\n }\n });\n };\n DropDownButton.prototype.closePopup = function (e, focusEle) {\n var _this = this;\n if (e === void 0) { e = null; }\n var ul = this.getULElement();\n var beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var popupElement = _this.getPopUpElement();\n if (popupElement) {\n EventHandler.remove(popupElement, 'keydown', _this.keyBoardHandler);\n }\n _this.popupUnWireEvents();\n var ul_2 = _this.getULElement();\n var selectedLi = void 0;\n if (ul_2) {\n selectedLi = ul_2.querySelector('.e-selected');\n }\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n _this.dropDown.hide();\n removeClass(_this.activeElem, 'e-active');\n _this.element.setAttribute('aria-expanded', 'false');\n _this.element.removeAttribute('aria-owns');\n if (focusEle) {\n focusEle.focus();\n }\n var closeArgs = { element: ul_2, items: _this.items };\n _this.trigger('close', closeArgs);\n if (!_this.target && ul_2) {\n detach(ul_2);\n }\n if (!_this.target || _this.isColorPicker() || (_this.target && !_this.isColorPicker())) {\n if (_this.createPopupOnClick) {\n _this.destroyPopup();\n }\n }\n }\n else {\n if (ul) {\n ul.focus();\n }\n }\n });\n };\n DropDownButton.prototype.unWireEvents = function () {\n if (!this.createPopupOnClick) {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n }\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated) {\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.remove(window, 'resize', this.windowResize);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DropDownButtonModel} newProp - Specifies new properties\n * @param {DropDownButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];\n this.button.setProperties(getModel(newProp, btnModel));\n var popupElement;\n if (this.isPopupCreated) {\n popupElement = this.getPopUpElement();\n this.dropDown.setProperties(getModel(newProp, ['enableRtl']));\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.unWireEvents();\n if (this.isPopupCreated && !this.canOpen()) {\n this.closePopup();\n }\n }\n else {\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1 || oldProp.cssClass.indexOf(classNames.VERTICAL) > -1) {\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n var arrowSpan = this.element.querySelector('span.e-caret');\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n newProp.cssClass.indexOf(classNames.VERTICAL) > -1 ? classList(arrowSpan, ['e-icon-bottom'], ['e-icon-right'])\n : classList(arrowSpan, ['e-icon-right'], ['e-icon-bottom']);\n }\n if (this.isPopupCreated) {\n if (oldProp.cssClass) {\n removeClass([popupElement], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([popupElement], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n }\n break;\n case 'target':\n this.dropDown.content = this.getTargetElement();\n this.dropDown.dataBind();\n break;\n case 'items':\n if (this.isPopupCreated && this.getULElement()) {\n this.createItems();\n }\n break;\n case 'createPopupOnClick':\n if (newProp.createPopupOnClick) {\n this.destroyPopup();\n }\n else {\n this.createPopup();\n }\n break;\n }\n }\n };\n /**\n * Sets the focus to DropDownButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n DropDownButton.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"iconCss\", void 0);\n __decorate([\n Property('Left')\n ], DropDownButton.prototype, \"iconPosition\", void 0);\n __decorate([\n Property(true)\n ], DropDownButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Collection([], Item)\n ], DropDownButton.prototype, \"items\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"createPopupOnClick\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"closeActionEvents\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"created\", void 0);\n DropDownButton = __decorate([\n NotifyPropertyChanges\n ], DropDownButton);\n return DropDownButton;\n}(Component));\nexport { DropDownButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///