{"version":3,"file":"ej2-buttons.min.js","sources":["../../src/common/common.js","../../src/button/button.js","../../src/check-box/check-box.js","../../src/radio-button/radio-button.js","../../src/switch/switch.js","../../src/chips/chip-list.js","../../src/chips/chip.js","../../src/floating-action-button/floating-action-button.js","../../src/speed-dial/speed-dial.js"],"sourcesContent":["import { detach, getUniqueID, rippleEffect, setValue, attributes } from '@syncfusion/ej2-base';\nimport { getValue, addClass, deleteObject } from '@syncfusion/ej2-base';\n/**\n * Initialize wrapper element for angular.\n *\n * @private\n *\n * @param {CreateElementArgs} createElement - Specifies created element args\n * @param {string} tag - Specifies tag name\n * @param {string} type - Specifies type name\n * @param {HTMLInputElement} element - Specifies input element\n * @param {string} WRAPPER - Specifies wrapper element\n * @param {string} role - Specifies role\n * @returns {HTMLInputElement} - Input Element\n */\nexport function wrapperInitialize(createElement, tag, type, element, WRAPPER, role) {\n var input = element;\n if (element.tagName === tag) {\n var ejInstance = getValue('ej2_instances', element);\n input = createElement('input', { attrs: { 'type': type } });\n var props = ['change', 'cssClass', 'label', 'labelPosition', 'id'];\n for (var index = 0, len = element.attributes.length; index < len; index++) {\n if (props.indexOf(element.attributes[index].nodeName) === -1) {\n input.setAttribute(element.attributes[index].nodeName, element.attributes[index].nodeValue);\n }\n }\n attributes(element, { 'class': WRAPPER });\n element.appendChild(input);\n element.classList.add(role);\n element.classList.remove(role);\n setValue('ej2_instances', ejInstance, input);\n deleteObject(element, 'ej2_instances');\n }\n return input;\n}\n/**\n * Get the text node.\n *\n * @param {HTMLElement} element - Specifies html element\n * @private\n * @returns {Node} - Text node.\n */\nexport function getTextNode(element) {\n var node;\n var childnode = element.childNodes;\n for (var i = 0; i < childnode.length; i++) {\n node = childnode[i];\n if (node.nodeType === 3) {\n return node;\n }\n }\n return null;\n}\n/**\n * Destroy the button components.\n *\n * @private\n * @param {Switch | CheckBox} ejInst - Specifies eJ2 Instance\n * @param {Element} wrapper - Specifies wrapper element\n * @param {string} tagName - Specifies tag name\n * @returns {void}\n */\nexport function destroy(ejInst, wrapper, tagName) {\n if (tagName === 'INPUT') {\n wrapper.parentNode.insertBefore(ejInst.element, wrapper);\n detach(wrapper);\n ejInst.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n ejInst.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n ejInst.element = wrapper;\n }\n}\n/**\n * Initialize control pre rendering.\n *\n * @private\n * @param {Switch | CheckBox} proxy - Specifies proxy\n * @param {string} control - Specifies control\n * @param {string} wrapper - Specifies wrapper element\n * @param {HTMLInputElement} element - Specifies input element\n * @param {string} moduleName - Specifies module name\n * @returns {void}\n */\nexport function preRender(proxy, control, wrapper, element, moduleName) {\n element = wrapperInitialize(proxy.createElement, control, 'checkbox', element, wrapper, moduleName);\n proxy.element = element;\n if (proxy.element.getAttribute('type') !== 'checkbox') {\n proxy.element.setAttribute('type', 'checkbox');\n }\n if (!proxy.element.id) {\n proxy.element.id = getUniqueID('e-' + moduleName);\n }\n}\n/**\n * Creates CheckBox component UI with theming and ripple support.\n *\n * @private\n * @param {CreateElementArgs} createElement - Specifies Created Element args\n * @param {boolean} enableRipple - Specifies ripple effect\n * @param {CheckBoxUtilModel} options - Specifies Checkbox util Model\n * @returns {Element} - Checkbox Element\n */\nexport function createCheckBox(createElement, enableRipple, options) {\n if (enableRipple === void 0) { enableRipple = false; }\n if (options === void 0) { options = {}; }\n var wrapper = createElement('div', { className: 'e-checkbox-wrapper e-css' });\n if (options.cssClass) {\n addClass([wrapper], options.cssClass.split(' '));\n }\n if (options.enableRtl) {\n wrapper.classList.add('e-rtl');\n }\n if (enableRipple) {\n var rippleSpan = createElement('span', { className: 'e-ripple-container' });\n rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });\n wrapper.appendChild(rippleSpan);\n }\n var frameSpan = createElement('span', { className: 'e-frame e-icons' });\n if (options.checked) {\n frameSpan.classList.add('e-check');\n }\n wrapper.appendChild(frameSpan);\n if (options.label) {\n var labelSpan = createElement('span', { className: 'e-label' });\n if (options.disableHtmlEncode) {\n labelSpan.textContent = options.label;\n }\n else {\n labelSpan.innerHTML = options.label;\n }\n wrapper.appendChild(labelSpan);\n }\n return wrapper;\n}\n/**\n * Handles ripple mouse.\n *\n * @private\n * @param {MouseEvent} e - Specifies mouse event\n * @param {Element} rippleSpan - Specifies Ripple span element\n * @returns {void}\n */\nexport function rippleMouseHandler(e, rippleSpan) {\n if (rippleSpan) {\n var event_1 = document.createEvent('MouseEvents');\n event_1.initEvent(e.type, false, true);\n rippleSpan.dispatchEvent(event_1);\n }\n}\n/**\n * Append hidden input to given element\n *\n * @private\n * @param {Switch | CheckBox} proxy - Specifies Proxy\n * @param {Element} wrap - Specifies Wrapper ELement\n * @returns {void}\n */\nexport function setHiddenInput(proxy, wrap) {\n if (proxy.element.getAttribute('ejs-for')) {\n wrap.appendChild(proxy.createElement('input', {\n attrs: { 'name': proxy.name || proxy.element.name, 'value': 'false', 'type': 'hidden' }\n }));\n }\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 { Property, NotifyPropertyChanges, Component, isBlazor, isRippleEnabled } from '@syncfusion/ej2-base';\nimport { addClass, Event, detach, removeClass } from '@syncfusion/ej2-base';\nimport { rippleEffect, EventHandler, Observer, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { getTextNode } from '../common/common';\n/**\n * Defines the icon position of button.\n */\nexport var IconPosition;\n(function (IconPosition) {\n /**\n * Positions the Icon at the left of the text content in the Button.\n */\n IconPosition[\"Left\"] = \"Left\";\n /**\n * Positions the Icon at the right of the text content in the Button.\n */\n IconPosition[\"Right\"] = \"Right\";\n /**\n * Positions the Icon at the top of the text content in the Button.\n */\n IconPosition[\"Top\"] = \"Top\";\n /**\n * Positions the Icon at the bottom of the text content in the Button.\n */\n IconPosition[\"Bottom\"] = \"Bottom\";\n})(IconPosition || (IconPosition = {}));\nexport var buttonObserver = new Observer();\nvar cssClassName = {\n RTL: 'e-rtl',\n BUTTON: 'e-btn',\n PRIMARY: 'e-primary',\n ICONBTN: 'e-icon-btn'\n};\n/**\n * The Button is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Button = /** @class */ (function (_super) {\n __extends(Button, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {ButtonModel} options - Specifies the button model\n * @param {string|HTMLButtonElement} element - Specifies the target element\n */\n function Button(options, element) {\n return _super.call(this, options, element) || this;\n }\n Button.prototype.preRender = function () {\n // pre render code snippets\n };\n /**\n * Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Button.prototype.render = function () {\n this.initialize();\n this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });\n this.renderComplete();\n };\n Button.prototype.initialize = function () {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (this.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n if (!isBlazor() || (isBlazor() && this.getModuleName() !== 'progress-btn')) {\n if (this.content) {\n var tempContent = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.content) : this.content;\n this.element.innerHTML = tempContent;\n }\n this.setIconCss();\n }\n if (this.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n if (this.disabled) {\n this.controlStatus(this.disabled);\n }\n else {\n this.wireEvents();\n }\n };\n Button.prototype.controlStatus = function (disabled) {\n this.element.disabled = disabled;\n };\n Button.prototype.setIconCss = function () {\n if (this.iconCss) {\n var span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });\n if (!this.element.textContent.trim()) {\n this.element.classList.add(cssClassName.ICONBTN);\n }\n else {\n span.classList.add('e-icon-' + this.iconPosition.toLowerCase());\n if (this.iconPosition === 'Top' || this.iconPosition === 'Bottom') {\n this.element.classList.add('e-' + this.iconPosition.toLowerCase() + '-icon-btn');\n }\n }\n var node = this.element.childNodes[0];\n if (node && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {\n this.element.insertBefore(span, node);\n }\n else {\n this.element.appendChild(span);\n }\n }\n };\n Button.prototype.wireEvents = function () {\n if (this.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n };\n Button.prototype.unWireEvents = function () {\n if (this.isToggle) {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n }\n };\n Button.prototype.btnClickHandler = function () {\n if (this.element.classList.contains('e-active')) {\n this.element.classList.remove('e-active');\n }\n else {\n this.element.classList.add('e-active');\n }\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n Button.prototype.destroy = function () {\n var classList = [cssClassName.PRIMARY, cssClassName.RTL, cssClassName.ICONBTN, 'e-success', 'e-info', 'e-danger',\n 'e-warning', 'e-flat', 'e-outline', 'e-small', 'e-bigger', 'e-active', 'e-round',\n 'e-top-icon-btn', 'e-bottom-icon-btn'];\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n _super.prototype.destroy.call(this);\n removeClass([this.element], classList);\n if (!this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n if (this.disabled) {\n this.element.removeAttribute('disabled');\n }\n if (this.content) {\n this.element.innerHTML = this.element.innerHTML.replace(this.content, '');\n }\n var span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.unWireEvents();\n if (isRippleEnabled) {\n this.removeRippleEffect();\n }\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module name\n * @private\n */\n Button.prototype.getModuleName = function () {\n return 'btn';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist Data\n * @private\n */\n Button.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Dynamically injects the required modules to the component.\n *\n * @private\n * @returns {void}\n */\n Button.Inject = function () {\n // Inject code snippets\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ButtonModel} newProp - Specifies new properties\n * @param {ButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n Button.prototype.onPropertyChanged = function (newProp, oldProp) {\n var span = this.element.querySelector('span.e-btn-icon');\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'isPrimary':\n if (newProp.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n else {\n this.element.classList.remove(cssClassName.PRIMARY);\n }\n break;\n case 'disabled':\n this.controlStatus(newProp.disabled);\n break;\n case 'iconCss': {\n span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n if (newProp.iconCss) {\n span.className = 'e-btn-icon ' + newProp.iconCss;\n if (this.element.textContent.trim()) {\n if (this.iconPosition === 'Left') {\n span.classList.add('e-icon-left');\n }\n else {\n span.classList.add('e-icon-right');\n }\n }\n }\n else {\n detach(span);\n }\n }\n else {\n this.setIconCss();\n }\n break;\n }\n case 'iconPosition':\n removeClass([this.element], ['e-top-icon-btn', 'e-bottom-icon-btn']);\n span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.setIconCss();\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n else {\n this.element.classList.remove(cssClassName.RTL);\n }\n break;\n case 'content': {\n var node = getTextNode(this.element);\n if (!node) {\n this.element.classList.remove(cssClassName.ICONBTN);\n }\n if (!isBlazor() || (isBlazor() && !this.isServerRendered && this.getModuleName() !== 'progress-btn')) {\n if (this.enableHtmlSanitizer) {\n newProp.content = SanitizeHtmlHelper.sanitize(newProp.content);\n }\n this.element.innerHTML = newProp.content;\n this.setIconCss();\n }\n break;\n }\n case 'isToggle':\n if (newProp.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n else {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n removeClass([this.element], ['e-active']);\n }\n break;\n }\n }\n };\n /**\n * Click the button element\n * its native method\n *\n * @public\n * @returns {void}\n */\n Button.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to Button\n * its native method\n *\n * @public\n * @returns {void}\n */\n Button.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Property('Left')\n ], Button.prototype, \"iconPosition\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"iconCss\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"isPrimary\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"cssClass\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"content\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"isToggle\", void 0);\n __decorate([\n Property()\n ], Button.prototype, \"locale\", void 0);\n __decorate([\n Property(true)\n ], Button.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Button.prototype, \"created\", void 0);\n Button = __decorate([\n NotifyPropertyChanges\n ], Button);\n return Button;\n}(Component));\nexport { Button };\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 { Component, NotifyPropertyChanges, Property, setValue } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { addClass, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect, closest } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler, setHiddenInput } from './../common/common';\nvar CHECK = 'e-check';\nvar DISABLED = 'e-checkbox-disabled';\nvar FRAME = 'e-frame';\nvar INDETERMINATE = 'e-stop';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RIPPLECHECK = 'e-ripple-check';\nvar RIPPLEINDETERMINATE = 'e-ripple-stop';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-checkbox-wrapper';\nvar containerAttr = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id', 'tabindex'];\n/**\n * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.\n * It contains checked, unchecked, and indeterminate states.\n * ```html\n * \n * \n * ```\n */\nvar CheckBox = /** @class */ (function (_super) {\n __extends(CheckBox, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {CheckBoxModel} options - Specifies checkbox model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function CheckBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n _this.isMouseClick = false;\n _this.clickTriggered = false;\n _this.validCheck = true;\n return _this;\n }\n CheckBox.prototype.changeState = function (state, isInitialize) {\n var wrapper = this.getWrapper();\n var rippleSpan = null;\n var frameSpan = null;\n if (wrapper) {\n frameSpan = wrapper.getElementsByClassName(FRAME)[0];\n if (isRippleEnabled) {\n rippleSpan = wrapper.getElementsByClassName(RIPPLE)[0];\n }\n }\n if (state === 'check') {\n if (frameSpan) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n }\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLEINDETERMINATE);\n rippleSpan.classList.add(RIPPLECHECK);\n }\n this.element.checked = true;\n if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize) {\n this.element.checked = false;\n this.validCheck = false;\n }\n else if (this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) {\n this.validCheck = true;\n }\n }\n else if (state === 'uncheck') {\n if (frameSpan) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n }\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);\n }\n this.element.checked = false;\n if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize) {\n this.element.checked = true;\n this.validCheck = false;\n }\n else if (this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) {\n this.validCheck = true;\n }\n }\n else {\n if (frameSpan) {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n }\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLECHECK);\n rippleSpan.classList.add(RIPPLEINDETERMINATE);\n }\n this.element.indeterminate = true;\n this.indeterminate = true;\n }\n };\n CheckBox.prototype.clickHandler = function (event) {\n if (event.target.tagName === 'INPUT' && this.clickTriggered) {\n if (this.isVue) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n this.clickTriggered = false;\n return;\n }\n if (event.target.tagName === 'SPAN' || event.target.tagName === 'LABEL') {\n this.clickTriggered = true;\n }\n if (this.isMouseClick) {\n this.focusOutHandler();\n this.isMouseClick = false;\n }\n if (this.indeterminate) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n this.indeterminate = false;\n this.element.indeterminate = false;\n }\n else if (this.checked) {\n this.changeState('uncheck');\n this.checked = false;\n }\n else {\n this.changeState('check');\n this.checked = true;\n }\n var changeEventArgs = { checked: this.updateVueArrayModel(false), event: event };\n this.trigger('change', changeEventArgs);\n event.stopPropagation();\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n CheckBox.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n if (this.wrapper) {\n wrapper = this.wrapper;\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (this.getWrapper() && wrapper.parentNode) {\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n detach(wrapper);\n this.element.checked = false;\n if (this.indeterminate) {\n this.element.indeterminate = false;\n }\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n this.element = wrapper;\n if (this.refreshing) {\n ['e-control', 'e-checkbox', 'e-lib'].forEach(function (key) {\n _this.element.classList.add(key);\n });\n setValue('ej2_instances', [this], this.element);\n }\n }\n }\n };\n CheckBox.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n CheckBox.prototype.focusOutHandler = function () {\n var wrapper = this.getWrapper();\n if (wrapper) {\n wrapper.classList.remove('e-focus');\n }\n this.isFocused = false;\n };\n /**\n * Gets the module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n CheckBox.prototype.getModuleName = function () {\n return 'checkbox';\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n CheckBox.prototype.getPersistData = function () {\n return this.addOnPersist(['checked', 'indeterminate']);\n };\n CheckBox.prototype.getWrapper = function () {\n if (this.element && this.element.parentElement) {\n return this.element.parentElement.parentElement;\n }\n else {\n return null;\n }\n };\n CheckBox.prototype.getLabel = function () {\n if (this.element) {\n return this.element.parentElement;\n }\n else {\n return null;\n }\n };\n CheckBox.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n if (this.isVue && typeof this.value === 'boolean' && this.value === true) {\n this.setProperties({ 'checked': true }, true);\n }\n }\n if (this.checked) {\n this.changeState('check', true);\n }\n if (this.indeterminate) {\n this.changeState();\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n CheckBox.prototype.initWrapper = function () {\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', {\n className: WRAPPER\n });\n if (this.element.parentNode) {\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n var frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n wrapper.appendChild(label);\n label.appendChild(this.element);\n setHiddenInput(this, label);\n label.appendChild(frameSpan);\n if (isRippleEnabled) {\n var rippleSpan = this.createElement('span', { className: RIPPLE });\n if (this.labelPosition === 'Before') {\n label.appendChild(rippleSpan);\n }\n else {\n label.insertBefore(rippleSpan, frameSpan);\n }\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n CheckBox.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getWrapper().classList.add('e-focus');\n }\n };\n CheckBox.prototype.labelMouseDownHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n CheckBox.prototype.labelMouseLeaveHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n CheckBox.prototype.labelMouseUpHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = 0; i < rippleElem.length - 1; i++) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {CheckBoxModel} newProp - Specifies new Properties\n * @param {CheckBoxModel} oldProp - Specifies old Properties\n *\n * @returns {void}\n */\n CheckBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n this.indeterminate = false;\n this.element.indeterminate = false;\n this.changeState(newProp.checked ? 'check' : 'uncheck');\n break;\n case 'indeterminate':\n if (newProp.indeterminate) {\n this.changeState();\n }\n else {\n this.element.indeterminate = false;\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.wrapper = this.getWrapper();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED);\n wrapper.setAttribute('aria-disabled', 'false');\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition': {\n var label = wrapper.getElementsByClassName(LABEL)[0];\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n detach(label);\n if (newProp.labelPosition === 'After') {\n labelWrap.appendChild(label);\n }\n else {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n break;\n }\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (this.isVue && typeof newProp.value === 'object') {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToWrapper();\n break;\n }\n }\n };\n /**\n * Initialize Angular, React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.preRender = function () {\n var element = this.element;\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');\n this.element = element;\n if (this.element.getAttribute('type') !== 'checkbox') {\n this.element.setAttribute('type', 'checkbox');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.render = function () {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.updateHtmlAttributeToWrapper();\n this.updateVueArrayModel(true);\n this.renderComplete();\n this.wrapper = this.getWrapper();\n };\n CheckBox.prototype.setDisabled = function () {\n var wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED);\n wrapper.setAttribute('aria-disabled', 'true');\n };\n CheckBox.prototype.setText = function (text) {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n return;\n }\n var label = wrapper.getElementsByClassName(LABEL)[0];\n if (label) {\n label.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n label = this.createElement('span', { className: LABEL, innerHTML: text });\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n if (this.labelPosition === 'Before') {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n else {\n labelWrap.appendChild(label);\n }\n }\n };\n CheckBox.prototype.changeHandler = function (e) {\n e.stopPropagation();\n };\n CheckBox.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n this.element.checked = this.initialCheckedValue;\n };\n CheckBox.prototype.unWireEvents = function () {\n var wrapper = this.wrapper;\n EventHandler.remove(wrapper, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n var label = wrapper.getElementsByTagName('label')[0];\n if (label) {\n EventHandler.remove(label, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(label, 'mouseup', this.labelMouseUpHandler);\n EventHandler.remove(label, 'mouseleave', this.labelMouseLeaveHandler);\n }\n var formElem = closest(this.element, 'form');\n if (formElem) {\n EventHandler.remove(formElem, 'reset', this.formResetHandler);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.remove(this.element, 'change', this.changeHandler);\n }\n };\n CheckBox.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n EventHandler.add(wrapper, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.add(label, 'mousedown', this.labelMouseDownHandler, this);\n EventHandler.add(label, 'mouseup', this.labelMouseUpHandler, this);\n EventHandler.add(label, 'mouseleave', this.labelMouseLeaveHandler, this);\n var formElem = closest(this.element, 'form');\n if (formElem) {\n EventHandler.add(formElem, 'reset', this.formResetHandler, this);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n }\n };\n CheckBox.prototype.updateVueArrayModel = function (init) {\n if (this.isVue && typeof this.value === 'object') {\n var value = this.element.value;\n if (value && this.value) {\n if (init) {\n for (var i = 0; i < this.value.length; i++) {\n if (value === this.value[i]) {\n this.changeState('check');\n this.setProperties({ 'checked': true }, true);\n }\n }\n }\n else {\n var index = this.value.indexOf(value);\n if (this.checked) {\n if (index < 0) {\n this.value.push(value);\n }\n }\n else {\n if (index > -1) {\n this.value.splice(index, 1);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return this.value;\n }\n }\n }\n return this.validCheck ? this.element.checked : !this.element.checked;\n };\n CheckBox.prototype.updateHtmlAttributeToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n var wrapper = this.getWrapper();\n if (containerAttr.indexOf(key) > -1) {\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[\"\" + key].split(' '));\n }\n else if (key === 'title') {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else if (key === 'style') {\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n frameSpan.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else if (key === 'disabled') {\n if (this.htmlAttributes[\"\" + key] === 'true') {\n this.setDisabled();\n }\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n else {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n /**\n * Click the CheckBox element\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to CheckBox\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Event()\n ], CheckBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], CheckBox.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"indeterminate\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], CheckBox.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"value\", void 0);\n __decorate([\n Property(true)\n ], CheckBox.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], CheckBox.prototype, \"htmlAttributes\", void 0);\n CheckBox = __decorate([\n NotifyPropertyChanges\n ], CheckBox);\n return CheckBox;\n}(Component));\nexport { CheckBox };\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 { Component, rippleEffect, NotifyPropertyChanges, Property, closest, setValue } from '@syncfusion/ej2-base';\nimport { addClass, getInstance, getUniqueID, isRippleEnabled, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { detach, Event, EventHandler, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler } from './../common/common';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-radio-wrapper';\nvar ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id'];\n/**\n * The RadioButton is a graphical user interface element that allows you to select one option from the choices.\n * It contains checked and unchecked states.\n * ```html\n * \n * \n * ```\n */\nvar RadioButton = /** @class */ (function (_super) {\n __extends(RadioButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {RadioButtonModel} options - Specifies Radio button model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function RadioButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n return _this;\n }\n RadioButton_1 = RadioButton;\n RadioButton.prototype.changeHandler = function (event) {\n this.checked = true;\n this.dataBind();\n var value = this.element.getAttribute('value');\n value = this.isVue && value ? this.element.value : this.value;\n var type = typeof this.value;\n if (this.isVue && type === 'boolean') {\n value = value === 'true' ? true : false;\n }\n this.trigger('change', { value: value, event: event });\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isAngular) {\n event.stopPropagation();\n }\n };\n RadioButton.prototype.updateChange = function () {\n var input;\n var instance;\n var radioGrp = this.getRadioGroup();\n for (var i = 0; i < radioGrp.length; i++) {\n input = radioGrp[i];\n if (input !== this.element) {\n instance = getInstance(input, RadioButton_1);\n instance.checked = false;\n if (this.tagName === 'EJS-RADIOBUTTON') {\n instance.angularValue = this.value;\n }\n }\n }\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n RadioButton.prototype.destroy = function () {\n var _this = this;\n var radioWrap = this.wrapper;\n _super.prototype.destroy.call(this);\n if (radioWrap) {\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (radioWrap.parentNode) {\n radioWrap.parentNode.insertBefore(this.element, radioWrap);\n }\n detach(radioWrap);\n this.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n radioWrap.removeAttribute(key);\n });\n radioWrap.innerHTML = '';\n this.element = this.wrapper;\n if (this.refreshing) {\n ['e-control', 'e-radio', 'e-lib'].forEach(function (key) {\n _this.element.classList.add(key);\n });\n setValue('ej2_instances', [this], this.element);\n }\n }\n }\n };\n RadioButton.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n RadioButton.prototype.focusOutHandler = function () {\n var label = this.getLabel();\n if (label) {\n label.classList.remove('e-focus');\n }\n };\n RadioButton.prototype.getModuleName = function () {\n return 'radio';\n };\n /**\n * To get the value of selected radio button in a group.\n *\n * @method getSelectedValue\n * @returns {string} - Selected Value\n */\n RadioButton.prototype.getSelectedValue = function () {\n var input;\n var radioGrp = this.getRadioGroup();\n for (var i = 0, len = radioGrp.length; i < len; i++) {\n input = radioGrp[i];\n if (input.checked) {\n return input.value;\n }\n }\n return '';\n };\n RadioButton.prototype.getRadioGroup = function () {\n return document.querySelectorAll('input.e-radio[name=\"' + this.element.getAttribute('name') + '\"]');\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n RadioButton.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n RadioButton.prototype.getWrapper = function () {\n if (this.element.parentElement) {\n return this.element.parentElement;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.getLabel = function () {\n if (this.element.nextElementSibling) {\n return this.element.nextElementSibling;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n this.initWrapper();\n this.updateHtmlAttribute();\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n var value = this.element.getAttribute('value');\n var type = typeof this.value;\n if (this.isVue && type === 'boolean') {\n value = value === 'true' ? true : false;\n }\n if (this.isVue ? this.value && type !== 'boolean' && !value : this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.element.checked = true;\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n RadioButton.prototype.initWrapper = function () {\n var rippleSpan;\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', { className: WRAPPER });\n if (this.element.parentNode) {\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n wrapper.appendChild(this.element);\n wrapper.appendChild(label);\n if (isRippleEnabled) {\n rippleSpan = this.createElement('span', { className: (RIPPLE) });\n label.appendChild(rippleSpan);\n rippleEffect(rippleSpan, {\n duration: 400,\n isCenterRipple: true\n });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n label.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n RadioButton.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getLabel().classList.add('e-focus');\n }\n };\n RadioButton.prototype.labelMouseDownHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n RadioButton.prototype.labelMouseLeaveHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n RadioButton.prototype.labelMouseUpHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n RadioButton.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n if (this.initialCheckedValue) {\n attributes(this.element, { 'checked': 'true' });\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {RadioButtonModel} newProp - Specifies New Properties\n * @param {RadioButtonModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrap = this.getWrapper();\n var label = this.getLabel();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n if (newProp.checked) {\n this.updateChange();\n }\n this.element.checked = newProp.checked;\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrap], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrap], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n label.classList.add(RTL);\n }\n else {\n label.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n if (newProp.labelPosition === 'Before') {\n label.classList.add('e-right');\n }\n else {\n label.classList.remove('e-right');\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n // eslint-disable-next-line no-case-declarations\n var type = typeof this.htmlAttributes.value;\n if (!isNullOrUndefined(this.htmlAttributes) && (this.htmlAttributes.value || type === 'boolean' && !this.htmlAttributes.value)) {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttribute();\n break;\n }\n }\n };\n /**\n * Initialize checked Property, Angular and React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-RADIOBUTTON', 'radio', element, WRAPPER, 'radio');\n this.element = element;\n if (this.element.getAttribute('type') !== 'radio') {\n this.element.setAttribute('type', 'radio');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n if (this.tagName === 'EJS-RADIOBUTTON') {\n var formControlName = this.element.getAttribute('formcontrolname');\n if (formControlName) {\n this.setProperties({ 'name': formControlName }, true);\n this.element.setAttribute('name', formControlName);\n }\n }\n };\n /**\n * Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n this.wrapper = this.getWrapper();\n };\n RadioButton.prototype.setDisabled = function () {\n this.element.disabled = true;\n };\n RadioButton.prototype.setText = function (text) {\n var label = this.getLabel();\n var textLabel = label.getElementsByClassName(LABEL)[0];\n if (textLabel) {\n textLabel.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n textLabel = this.createElement('span', { className: LABEL, innerHTML: text });\n label.appendChild(textLabel);\n }\n if (this.labelPosition === 'Before') {\n this.getLabel().classList.add('e-right');\n }\n else {\n this.getLabel().classList.remove('e-right');\n }\n };\n RadioButton.prototype.updateHtmlAttribute = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n var wrapper = this.element.parentElement;\n if (ATTRIBUTES.indexOf(key) > -1) {\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[\"\" + key].replace(/\\s+/g, ' ').trim().split(' '));\n }\n else if (key === 'title' || key === 'style') {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n else {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n RadioButton.prototype.unWireEvents = function () {\n var label = this.wrapper;\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n var rippleLabel = label.getElementsByTagName('label')[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelMouseUpHandler);\n EventHandler.remove(rippleLabel, 'mouseleave', this.labelMouseLeaveHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n RadioButton.prototype.wireEvents = function () {\n var label = this.getLabel();\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.add(rippleLabel, 'mousedown', this.labelMouseDownHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelMouseUpHandler, this);\n EventHandler.add(rippleLabel, 'mouseleave', this.labelMouseLeaveHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n };\n /**\n * Click the RadioButton element\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to RadioButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.focusIn = function () {\n this.element.focus();\n };\n var RadioButton_1;\n __decorate([\n Event()\n ], RadioButton.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], RadioButton.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], RadioButton.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"value\", void 0);\n __decorate([\n Property(true)\n ], RadioButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], RadioButton.prototype, \"htmlAttributes\", void 0);\n RadioButton = RadioButton_1 = __decorate([\n NotifyPropertyChanges\n ], RadioButton);\n return RadioButton;\n}(Component));\nexport { RadioButton };\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 { Component, NotifyPropertyChanges, Property, closest, setValue } from '@syncfusion/ej2-base';\nimport { Event, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, isRippleEnabled, removeClass, rippleEffect, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { rippleMouseHandler, destroy, preRender, setHiddenInput } from './../common/common';\nvar DISABLED = 'e-switch-disabled';\nvar RIPPLE = 'e-ripple-container';\nvar RIPPLE_CHECK = 'e-ripple-check';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-switch-wrapper';\nvar ACTIVE = 'e-switch-active';\nvar ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'aria-label', 'id', 'role', 'tabindex'];\n/**\n * The Switch is a graphical user interface element that allows you to toggle between checked and unchecked states.\n * ```html\n * \n * \n * ```\n */\nvar Switch = /** @class */ (function (_super) {\n __extends(Switch, _super);\n /**\n * Constructor for creating the widget.\n *\n * @private\n *\n * @param {SwitchModel} options switch model\n * @param {string | HTMLInputElement} element target element\n *\n */\n function Switch(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n _this.isDrag = false;\n _this.isWireEvents = false;\n return _this;\n }\n Switch.prototype.changeState = function (state) {\n var rippleSpan = null;\n var wrapper = this.getWrapper();\n var bar = wrapper.querySelector('.e-switch-inner');\n var handle = wrapper.querySelector('.e-switch-handle');\n if (isRippleEnabled) {\n rippleSpan = wrapper.getElementsByClassName(RIPPLE)[0];\n }\n if (state) {\n addClass([bar, handle], ACTIVE);\n this.element.checked = true;\n this.checked = true;\n if (rippleSpan) {\n addClass([rippleSpan], [RIPPLE_CHECK]);\n }\n }\n else {\n removeClass([bar, handle], ACTIVE);\n this.element.checked = false;\n this.checked = false;\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLE_CHECK]);\n }\n }\n };\n Switch.prototype.clickHandler = function (evt) {\n this.isDrag = false;\n this.focusOutHandler();\n this.changeState(!this.checked);\n this.element.focus();\n var changeEventArgs = { checked: this.element.checked, event: evt };\n this.trigger('change', changeEventArgs);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isAngular && evt) {\n evt.stopPropagation();\n evt.preventDefault();\n }\n };\n /**\n * Destroys the Switch widget.\n *\n * @returns {void}\n */\n Switch.prototype.destroy = function () {\n var _this = this;\n _super.prototype.destroy.call(this);\n if (!this.disabled) {\n this.unWireEvents();\n }\n destroy(this, this.getWrapper(), this.tagName);\n if (this.refreshing) {\n ['e-control', 'e-switch', 'e-lib'].forEach(function (key) {\n _this.element.classList.add(key);\n });\n setValue('ej2_instances', [this], this.element);\n }\n };\n Switch.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n Switch.prototype.focusOutHandler = function () {\n this.getWrapper().classList.remove('e-focus');\n };\n /**\n * Gets the module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n Switch.prototype.getModuleName = function () {\n return 'switch';\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist data\n */\n Switch.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n Switch.prototype.getWrapper = function () {\n if (this.element.parentElement) {\n return this.element.parentElement;\n }\n else {\n return null;\n }\n };\n Switch.prototype.initialize = function () {\n this.element.setAttribute('role', 'switch');\n if (isNullOrUndefined(this.initialSwitchCheckedValue)) {\n this.initialSwitchCheckedValue = this.checked;\n }\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.changeState(true);\n }\n if (this.disabled) {\n this.setDisabled();\n }\n if (this.onLabel || this.offLabel) {\n this.setLabel(this.onLabel, this.offLabel);\n }\n };\n Switch.prototype.initWrapper = function () {\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', {\n className: WRAPPER\n });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var switchInner = this.createElement('span', { className: 'e-switch-inner' });\n var onLabel = this.createElement('span', { className: 'e-switch-on' });\n var offLabel = this.createElement('span', { className: 'e-switch-off' });\n var handle = this.createElement('span', { className: 'e-switch-handle' });\n wrapper.appendChild(this.element);\n setHiddenInput(this, wrapper);\n switchInner.appendChild(onLabel);\n switchInner.appendChild(offLabel);\n wrapper.appendChild(switchInner);\n wrapper.appendChild(handle);\n if (isRippleEnabled) {\n var rippleSpan = this.createElement('span', { className: RIPPLE });\n handle.appendChild(rippleSpan);\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {SwitchModel} newProp - Specifies New Properties\n * @param {SwitchModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n Switch.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n this.changeState(newProp.checked);\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n this.isWireEvents = false;\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED);\n wrapper.setAttribute('aria-disabled', 'false');\n if (!this.isWireEvents) {\n this.wireEvents();\n this.isWireEvents = true;\n }\n }\n break;\n case 'value':\n this.element.setAttribute('value', newProp.value);\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'onLabel':\n case 'offLabel':\n this.setLabel(newProp.onLabel, newProp.offLabel);\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'htmlAttributes':\n this.updateHtmlAttribute();\n break;\n }\n }\n };\n /**\n * Initialize Angular, React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n Switch.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n preRender(this, 'EJS-SWITCH', WRAPPER, element, this.getModuleName());\n };\n /**\n * Initialize control rendering.\n *\n * @private\n * @returns {void}\n */\n Switch.prototype.render = function () {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n this.updateHtmlAttribute();\n };\n Switch.prototype.rippleHandler = function (e) {\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n if (e.type === 'mousedown' && e.currentTarget.classList.contains('e-switch-wrapper') && e.which === 1) {\n this.isDrag = true;\n this.isFocused = false;\n }\n };\n Switch.prototype.mouseLeaveHandler = function (e) {\n var rippleSpan = this.element.parentElement.getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n Switch.prototype.rippleTouchHandler = function (eventType) {\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var event_1 = document.createEvent('MouseEvents');\n event_1.initEvent(eventType, false, true);\n rippleSpan.dispatchEvent(event_1);\n }\n };\n Switch.prototype.setDisabled = function () {\n var wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED);\n wrapper.setAttribute('aria-disabled', 'true');\n };\n Switch.prototype.setLabel = function (onText, offText) {\n var wrapper = this.getWrapper();\n if (onText) {\n wrapper.querySelector('.e-switch-on').textContent = onText;\n }\n if (offText) {\n wrapper.querySelector('.e-switch-off').textContent = offText;\n }\n };\n Switch.prototype.updateHtmlAttribute = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n var wrapper = this.getWrapper();\n if (ATTRIBUTES.indexOf(key) > -1) {\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[\"\" + key].split(' '));\n }\n else if (key === 'title') {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else if (key === 'style') {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else if (key === 'disabled') {\n if (this.htmlAttributes[\"\" + key] === 'true') {\n this.setDisabled();\n }\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n else {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n Switch.prototype.switchFocusHandler = function () {\n if (this.isFocused) {\n this.getWrapper().classList.add('e-focus');\n }\n };\n Switch.prototype.switchMouseUp = function (e) {\n var aTouchY = 0;\n var yDiff = 0;\n var aTouchX = 0;\n var xDiff = 0;\n var target = e.target;\n if (e.type === 'touchmove') {\n e.preventDefault();\n aTouchX = e.changedTouches[0].clientX;\n aTouchY = e.changedTouches[0].clientY;\n xDiff = this.bTouchX - aTouchX;\n yDiff = this.bTouchY - aTouchY;\n if (Math.abs(xDiff) < Math.abs(yDiff)) {\n this.isDrag = false;\n this.rippleTouchHandler('mouseup');\n }\n else {\n this.isDrag = true;\n }\n }\n if (e.type === 'touchstart') {\n this.bTouchX = e.changedTouches[0].clientX;\n this.bTouchY = e.changedTouches[0].clientY;\n this.isDrag = true;\n this.rippleTouchHandler('mousedown');\n }\n if (this.isDrag) {\n if ((e.type === 'mouseup' && target.className.indexOf('e-switch') < 0) || e.type === 'touchend') {\n xDiff = this.bTouchX - e.changedTouches[0].clientX;\n yDiff = this.bTouchY - e.changedTouches[0].clientY;\n if (Math.abs(xDiff) >= Math.abs(yDiff)) {\n this.clickHandler(e);\n this.rippleTouchHandler('mouseup');\n e.preventDefault();\n }\n }\n }\n };\n Switch.prototype.formResetHandler = function () {\n this.checked = this.initialSwitchCheckedValue;\n this.element.checked = this.initialSwitchCheckedValue;\n };\n /**\n * Toggle the Switch component state into checked/unchecked.\n *\n * @returns {void}\n */\n Switch.prototype.toggle = function () {\n this.clickHandler();\n };\n Switch.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n this.delegateMouseUpHandler = this.switchMouseUp.bind(this);\n this.delegateKeyUpHandler = this.switchFocusHandler.bind(this);\n EventHandler.add(wrapper, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n EventHandler.add(this.element, 'mouseup', this.delegateMouseUpHandler, this);\n EventHandler.add(this.element, 'keyup', this.delegateKeyUpHandler, this);\n EventHandler.add(wrapper, 'mousedown mouseup', this.rippleHandler, this);\n EventHandler.add(wrapper, 'mouseleave', this.mouseLeaveHandler, this);\n EventHandler.add(wrapper, 'touchstart touchmove touchend', this.switchMouseUp, this);\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n };\n Switch.prototype.unWireEvents = function () {\n var wrapper = this.getWrapper();\n EventHandler.remove(wrapper, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'mouseup', this.delegateMouseUpHandler);\n EventHandler.remove(this.element, 'keyup', this.delegateKeyUpHandler);\n EventHandler.remove(wrapper, 'mousedown mouseup', this.rippleHandler);\n EventHandler.remove(wrapper, 'mouseleave', this.mouseLeaveHandler);\n EventHandler.remove(wrapper, 'touchstart touchmove touchend', this.switchMouseUp);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n /**\n * Click the switch element\n * its native method\n *\n * @public\n * @returns {void}\n */\n Switch.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to Switch\n * its native method\n *\n * @public\n */\n Switch.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Event()\n ], Switch.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Switch.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], Switch.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], Switch.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Switch.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], Switch.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], Switch.prototype, \"onLabel\", void 0);\n __decorate([\n Property('')\n ], Switch.prototype, \"offLabel\", void 0);\n __decorate([\n Property('')\n ], Switch.prototype, \"value\", void 0);\n __decorate([\n Property({})\n ], Switch.prototype, \"htmlAttributes\", void 0);\n Switch = __decorate([\n NotifyPropertyChanges\n ], Switch);\n return Switch;\n}(Component));\nexport { Switch };\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 { Component, NotifyPropertyChanges, Property, append, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { removeClass, rippleEffect, closest } from '@syncfusion/ej2-base';\nimport { EventHandler, detach, Event, addClass } from '@syncfusion/ej2-base';\nexport var classNames = {\n chipSet: 'e-chip-set',\n chip: 'e-chip',\n avatar: 'e-chip-avatar',\n text: 'e-chip-text',\n icon: 'e-chip-icon',\n delete: 'e-chip-delete',\n deleteIcon: 'e-dlt-btn',\n multiSelection: 'e-multi-selection',\n singleSelection: 'e-selection',\n active: 'e-active',\n chipWrapper: 'e-chip-avatar-wrap',\n iconWrapper: 'e-chip-icon-wrap',\n focused: 'e-focused',\n disabled: 'e-disabled',\n rtl: 'e-rtl'\n};\n/**\n * A chip component is a small block of essential information, mostly used on contacts or filter tags.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar ChipList = /** @class */ (function (_super) {\n __extends(ChipList, _super);\n function ChipList(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.multiSelectedChip = [];\n return _this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n */\n ChipList.prototype.preRender = function () {\n //prerender\n };\n /**\n * To find the chips length.\n *\n * @returns boolean\n * @private\n */\n ChipList.prototype.chipType = function () {\n return (this.chips && this.chips.length && this.chips.length > 0);\n };\n /**\n * To Initialize the control rendering.\n *\n * @returns void\n * @private\n */\n ChipList.prototype.render = function () {\n this.type = (!isNullOrUndefined(this.chips) && this.chips.length) ? 'chipset' : (this.text || this.element.innerText ? 'chip' : 'chipset');\n this.setAttributes();\n this.createChip();\n this.setRtl();\n this.select(this.selectedChips);\n this.wireEvent(false);\n this.rippleFunction = rippleEffect(this.element, {\n selector: '.e-chip'\n });\n this.renderComplete();\n };\n ChipList.prototype.createChip = function () {\n this.innerText = (this.element.innerText && this.element.innerText.length !== 0)\n ? this.element.innerText.trim() : this.element.innerText;\n this.element.innerHTML = '';\n this.chipCreation(this.type === 'chip' ? [this.innerText ? this.innerText : this.text] : this.chips);\n };\n ChipList.prototype.setAttributes = function () {\n if (this.type === 'chip') {\n if (this.enabled) {\n this.element.tabIndex = 0;\n }\n this.element.setAttribute('role', 'button');\n }\n else {\n this.element.classList.add(classNames.chipSet);\n this.element.setAttribute('role', 'listbox');\n if (this.selection === 'Multiple') {\n this.element.classList.add(classNames.multiSelection);\n this.element.setAttribute('aria-multiselectable', 'true');\n }\n else if (this.selection === 'Single') {\n this.element.classList.add(classNames.singleSelection);\n this.element.setAttribute('aria-multiselectable', 'false');\n }\n else {\n this.element.setAttribute('aria-multiselectable', 'false');\n }\n }\n };\n ChipList.prototype.setRtl = function () {\n this.element.classList[this.enableRtl ? 'add' : 'remove'](classNames.rtl);\n };\n ChipList.prototype.chipCreation = function (data) {\n if (isNullOrUndefined(data)) {\n return;\n }\n var chipListArray = [];\n var attributeArray = [];\n for (var i = 0; i < data.length; i++) {\n var fieldsData = this.getFieldValues(data[i]);\n var attributesValue = fieldsData.htmlAttributes;\n attributeArray.push(attributesValue);\n var chipArray = this.elementCreation(fieldsData);\n var className = (classNames.chip + ' ' + (fieldsData.enabled ? ' ' : classNames.disabled) + ' ' +\n (fieldsData.avatarIconCss || fieldsData.avatarText ? classNames.chipWrapper : (fieldsData.leadingIconCss ?\n classNames.iconWrapper : ' ')) + ' ' + fieldsData.cssClass).split(' ').filter(function (css) { return css; });\n if (!this.chipType() || this.type === 'chip') {\n chipListArray = chipArray;\n addClass([this.element], className);\n this.element.setAttribute('aria-label', fieldsData.text);\n if (fieldsData.value) {\n this.element.setAttribute('data-value', fieldsData.value.toString());\n }\n }\n else {\n var wrapper = this.createElement('DIV', {\n className: className.join(' '), attrs: {\n tabIndex: '0', role: 'option',\n 'aria-label': fieldsData.text, 'aria-selected': 'false'\n }\n });\n if (this.enableDelete) {\n wrapper.setAttribute('aria-keyshortcuts', 'Enter to delete');\n }\n if (fieldsData.value) {\n wrapper.setAttribute('data-value', fieldsData.value.toString());\n }\n if (fieldsData.enabled) {\n wrapper.setAttribute('aria-disabled', 'false');\n }\n else {\n wrapper.removeAttribute('tabindex');\n wrapper.setAttribute('aria-disabled', 'true');\n }\n if (!isNullOrUndefined(attributeArray[i])) {\n if (attributeArray.length > i && Object.keys(attributeArray[i]).length) {\n var htmlAttr = [];\n htmlAttr = (Object.keys(attributeArray[i]));\n for (var j = 0; j < htmlAttr.length; j++) {\n wrapper.setAttribute(htmlAttr[j], attributeArray[i][htmlAttr[j]]);\n }\n }\n }\n append(chipArray, wrapper);\n chipListArray.push(wrapper);\n }\n }\n append(chipListArray, this.element);\n };\n ChipList.prototype.getFieldValues = function (data) {\n var chipEnabled = !(this.enabled.toString() === 'false');\n var fields = {\n text: typeof data === 'object' ? (data.text ? data.text.toString() : this.text.toString()) :\n (!this.chipType() ? (this.innerText ? this.innerText : this.text.toString()) : data.toString()),\n cssClass: typeof data === 'object' ? (data.cssClass ? data.cssClass.toString() : this.cssClass.toString()) :\n (this.cssClass.toString()),\n leadingIconCss: typeof data === 'object' ? (data.leadingIconCss ? data.leadingIconCss.toString() :\n this.leadingIconCss.toString()) : (this.leadingIconCss.toString()),\n avatarIconCss: typeof data === 'object' ? (data.avatarIconCss ? data.avatarIconCss.toString() :\n this.avatarIconCss.toString()) : (this.avatarIconCss.toString()),\n avatarText: typeof data === 'object' ? (data.avatarText ? data.avatarText.toString() : this.avatarText.toString()) :\n (this.avatarText.toString()),\n trailingIconCss: typeof data === 'object' ? (data.trailingIconCss ? data.trailingIconCss.toString() :\n this.trailingIconCss.toString()) : (this.trailingIconCss.toString()),\n enabled: typeof data === 'object' ? (data.enabled !== undefined ? (data.enabled.toString() === 'false' ? false : true) :\n chipEnabled) : (chipEnabled),\n value: typeof data === 'object' ? ((data.value ? data.value.toString() : null)) : null,\n leadingIconUrl: typeof data === 'object' ? (data.leadingIconUrl ? data.leadingIconUrl.toString() : this.leadingIconUrl) :\n this.leadingIconUrl,\n trailingIconUrl: typeof data === 'object' ? (data.trailingIconUrl ? data.trailingIconUrl.toString() : this.trailingIconUrl) :\n this.trailingIconUrl,\n htmlAttributes: typeof data === 'object' ? (data.htmlAttributes ? data.htmlAttributes : this.htmlAttributes) : this.htmlAttributes\n };\n return fields;\n };\n ChipList.prototype.elementCreation = function (fields) {\n var chipArray = [];\n if (fields.avatarText || fields.avatarIconCss) {\n var className = (classNames.avatar + ' ' + fields.avatarIconCss).trim();\n var chipAvatarElement = this.createElement('span', { className: className });\n chipAvatarElement.innerText = fields.avatarText;\n chipArray.push(chipAvatarElement);\n }\n else if (fields.leadingIconCss) {\n var className = (classNames.icon + ' ' + fields.leadingIconCss).trim();\n var chipIconElement = this.createElement('span', { className: className });\n chipArray.push(chipIconElement);\n }\n else if (fields.leadingIconUrl) {\n var className = (classNames.avatar + ' ' + 'image-url').trim();\n var chipIconElement = this.createElement('span', { className: className });\n chipIconElement.style.backgroundImage = 'url(' + fields.leadingIconUrl + ')';\n chipArray.push(chipIconElement);\n }\n var chipTextElement = this.createElement('span', { className: classNames.text });\n chipTextElement.innerText = fields.text;\n chipArray.push(chipTextElement);\n if (fields.trailingIconCss || (this.chipType() && this.enableDelete)) {\n var className = (classNames.delete + ' ' +\n (fields.trailingIconCss ? fields.trailingIconCss : classNames.deleteIcon)).trim();\n var chipdeleteElement = this.createElement('span', { className: className });\n chipArray.push(chipdeleteElement);\n }\n else if (fields.trailingIconUrl) {\n var className = ('trailing-icon-url').trim();\n var chipIconsElement = this.createElement('span', { className: className });\n chipIconsElement.style.backgroundImage = 'url(' + fields.trailingIconUrl + ')';\n chipArray.push(chipIconsElement);\n }\n return chipArray;\n };\n /**\n * A function that finds chip based on given input.\n *\n * @param {number | HTMLElement } fields - We can pass index number or element of chip.\n * {% codeBlock src='chips/find/index.md' %}{% endcodeBlock %}\n *\n * @returns {void}\n */\n ChipList.prototype.find = function (fields) {\n var chipData = { text: '', index: -1, element: this.element, data: '' };\n var chipElement = fields instanceof HTMLElement ?\n fields : this.element.querySelectorAll('.' + classNames.chip)[fields];\n if (chipElement && this.chipType()) {\n chipData.index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chipElement);\n var chip = this.chips[chipData.index];\n if (typeof chip === 'object' && chip !== null) {\n var chipModel = chip;\n if (chipModel.text !== undefined) {\n chipData.text = chipModel.text.toString();\n }\n }\n else if (chip !== undefined) {\n chipData.text = chip.toString();\n }\n chipData.data = chip;\n chipData.element = chipElement;\n }\n return chipData;\n };\n /**\n * Allows adding the chip item(s) by passing a single or array of string, number, or ChipModel values.\n *\n * @param {string[] | number[] | ChipModel[] | string | number | ChipModel} chipsData - We can pass array of string or\n * array of number or array of chip model or string data or number data or chip model.\n * {% codeBlock src='chips/add/index.md' %}{% endcodeBlock %}\n *\n * @returns {void}\n * @deprecated\n */\n ChipList.prototype.add = function (chipsData) {\n var _a;\n if (this.type !== 'chip') {\n var fieldData = chipsData instanceof Array ?\n chipsData : [chipsData];\n this.chips = (_a = [].slice.call(this.chips)).concat.apply(_a, fieldData);\n this.chipCreation(fieldData);\n }\n };\n /**\n * Allows selecting the chip item(s) by passing a single or array of string, number, or ChipModel values.\n *\n * @param {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number\n * or chip element or array of chip element.\n * {% codeBlock src='chips/select/index.md' %}{% endcodeBlock %}\n *\n * @returns {void}\n */\n ChipList.prototype.select = function (fields, selectionType) {\n this.onSelect(fields, false, selectionType);\n };\n ChipList.prototype.multiSelection = function (newProp) {\n var items = this.element.querySelectorAll('.' + 'e-chip');\n for (var j = 0; j < newProp.length; j++) {\n if (typeof newProp[j] === 'string') {\n for (var k = 0; k < items.length; k++) {\n if (newProp[j] !== k) {\n if (newProp[j] === items[k].attributes[5].value) {\n this.multiSelectedChip.push(k);\n break;\n }\n }\n }\n }\n else {\n this.multiSelectedChip.push(newProp[j]);\n }\n }\n };\n ChipList.prototype.onSelect = function (fields, callFromProperty, selectionType) {\n var index;\n var chipNodes;\n var chipValue = null;\n if (this.chipType() && this.selection !== 'None') {\n if (callFromProperty) {\n var chipElements = this.element.querySelectorAll('.' + classNames.chip);\n for (var i = 0; i < chipElements.length; i++) {\n chipElements[i].setAttribute('aria-selected', 'false');\n chipElements[i].classList.remove(classNames.active);\n }\n }\n var fieldData = fields instanceof Array ? fields : [fields];\n for (var i = 0; i < fieldData.length; i++) {\n var chipElement = fieldData[i] instanceof HTMLElement ? fieldData[i]\n : this.element.querySelectorAll('.' + classNames.chip)[fieldData[i]];\n if (selectionType !== 'index') {\n for (var j = 0; j < this.chips.length; j++) {\n chipNodes = this.element.querySelectorAll('.' + classNames.chip)[j];\n var fieldsData = this.getFieldValues(this.chips[j]);\n if (selectionType === 'value') {\n if (fieldsData.value !== null) {\n chipValue = chipNodes.dataset.value;\n }\n }\n else if (selectionType === 'text') {\n chipValue = chipNodes.innerText;\n }\n if (chipValue === fieldData[i].toString()) {\n index = j;\n chipElement = this.element.querySelectorAll('.' + classNames.chip)[index];\n }\n }\n }\n if (chipElement instanceof HTMLElement) {\n this.selectionHandler(chipElement);\n }\n }\n }\n };\n /**\n * Allows removing the chip item(s) by passing a single or array of string, number, or ChipModel values.\n *\n * @param {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number\n * or chip element or array of chip element.\n * {% codeBlock src='chips/remove/index.md' %}{% endcodeBlock %}\n *\n * @returns {void}\n */\n ChipList.prototype.remove = function (fields) {\n var _this = this;\n if (this.chipType()) {\n var fieldData = fields instanceof Array ? fields : [fields];\n var chipElements_1 = [];\n var chipCollection_1 = this.element.querySelectorAll('.' + classNames.chip);\n fieldData.forEach(function (data) {\n var chipElement = data instanceof HTMLElement ? data\n : chipCollection_1[data];\n if (chipElement instanceof HTMLElement) {\n chipElements_1.push(chipElement);\n }\n });\n chipElements_1.forEach(function (element) {\n var chips = _this.element.querySelectorAll('.' + classNames.chip);\n var index = Array.prototype.slice.call(chips).indexOf(element);\n _this.deleteHandler(element, index);\n });\n }\n };\n /**\n * Returns the selected chip(s) data.\n * {% codeBlock src='chips/getSelectedChips/index.md' %}{% endcodeBlock %}\n *\n * @returns {void}\n */\n ChipList.prototype.getSelectedChips = function () {\n var selectedChips;\n if (this.chipType() && this.selection !== 'None') {\n var selectedItems = { texts: [], Indexes: [], data: [], elements: [] };\n var items = this.element.querySelectorAll('.' + classNames.active);\n for (var i = 0; i < items.length; i++) {\n var chip = items[i];\n selectedItems.elements.push(chip);\n var index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chip);\n selectedItems.Indexes.push(index);\n selectedItems.data.push(this.chips[index]);\n var text = typeof this.chips[index] === 'object' ?\n this.chips[index].text ? this.chips[index].text\n : null : this.chips[index].toString();\n selectedItems.texts.push(text);\n }\n var selectedItem = {\n text: selectedItems.texts[0], index: selectedItems.Indexes[0],\n data: selectedItems.data[0], element: selectedItems.elements[0]\n };\n selectedChips = !isNullOrUndefined(selectedItem.index) ?\n (this.selection === 'Multiple' ? selectedItems : selectedItem) : undefined;\n }\n return selectedChips;\n };\n ChipList.prototype.wireEvent = function (unWireEvent) {\n if (!unWireEvent) {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyHandler, this);\n }\n else {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keydown', this.keyHandler);\n EventHandler.remove(this.element, 'keyup', this.keyHandler);\n }\n };\n ChipList.prototype.keyHandler = function (e) {\n if (e.target.classList.contains(classNames.chip)) {\n if (e.type === 'keydown') {\n if (e.keyCode === 13 || e.keyCode === 32) {\n this.clickHandler(e);\n }\n else if ((e.keyCode === 46 || e.keyCode === 8) && this.enableDelete) {\n this.clickHandler(e, true);\n }\n }\n else if (e.keyCode === 9) {\n this.focusInHandler(e.target);\n }\n }\n };\n ChipList.prototype.focusInHandler = function (chipWrapper) {\n if (!chipWrapper.classList.contains(classNames.focused)) {\n chipWrapper.classList.add(classNames.focused);\n }\n };\n ChipList.prototype.focusOutHandler = function (e) {\n var chipWrapper = closest(e.target, '.' + classNames.chip);\n var focusedElement = !this.chipType() ? (this.element.classList.contains(classNames.focused) ?\n this.element : null) : this.element.querySelector('.' + classNames.focused);\n if (chipWrapper && focusedElement) {\n focusedElement.classList.remove(classNames.focused);\n }\n };\n ChipList.prototype.clickHandler = function (e, del) {\n var _this = this;\n if (del === void 0) { del = false; }\n var chipWrapper = closest(e.target, '.' + classNames.chip);\n if (chipWrapper) {\n var chipDataArgs = void 0;\n if (this.chipType()) {\n chipDataArgs = this.find(chipWrapper);\n }\n else {\n var index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chipWrapper);\n chipDataArgs = {\n text: this.innerText ? this.innerText : this.text,\n element: chipWrapper, data: this.text, index: index\n };\n }\n chipDataArgs.event = e;\n chipDataArgs.cancel = false;\n this.trigger('beforeClick', chipDataArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.clickEventHandler(observedArgs.element, e, del);\n }\n });\n }\n };\n ChipList.prototype.clickEventHandler = function (chipWrapper, e, del) {\n var _this = this;\n if (this.chipType()) {\n var chipData_1 = this.find(chipWrapper);\n chipData_1.event = e;\n var deleteElement = e.target.classList.contains(classNames.deleteIcon) ?\n e.target : (del ? chipWrapper.querySelector('.' + classNames.deleteIcon) : undefined);\n if (deleteElement && this.enableDelete) {\n chipData_1.cancel = false;\n var deletedItemArgs = chipData_1;\n this.trigger('delete', deletedItemArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.deleteHandler(observedArgs.element, observedArgs.index);\n _this.selectionHandler(chipWrapper);\n chipData_1.selected = observedArgs.element.classList.contains(classNames.active);\n var selectedItemArgs = chipData_1;\n _this.trigger('click', selectedItemArgs);\n var chipElement = _this.element.querySelectorAll('.' + classNames.chip)[observedArgs.index];\n if (chipElement) {\n chipElement.focus();\n _this.focusInHandler(chipElement);\n }\n }\n });\n }\n else if (this.selection !== 'None') {\n this.selectionHandler(chipWrapper);\n chipData_1.selected = chipWrapper.classList.contains(classNames.active);\n var selectedItemArgs = chipData_1;\n this.trigger('click', selectedItemArgs);\n }\n else {\n this.focusInHandler(chipWrapper);\n var clickedItemArgs = chipData_1;\n this.trigger('click', clickedItemArgs);\n }\n }\n else {\n this.focusInHandler(chipWrapper);\n var clickedItemArgs = {\n text: this.innerText ? this.innerText : this.text,\n element: chipWrapper, data: this.text, event: e\n };\n this.trigger('click', clickedItemArgs);\n }\n };\n ChipList.prototype.selectionHandler = function (chipWrapper) {\n if (this.selection === 'Single') {\n var activeElement = this.element.querySelector('.' + classNames.active);\n if (activeElement && activeElement !== chipWrapper) {\n activeElement.classList.remove(classNames.active);\n activeElement.setAttribute('aria-selected', 'false');\n }\n this.setProperties({ selectedChips: null }, true);\n }\n else {\n this.setProperties({ selectedChips: [] }, true);\n }\n if (chipWrapper.classList.contains(classNames.active)) {\n chipWrapper.classList.remove(classNames.active);\n chipWrapper.setAttribute('aria-selected', 'false');\n }\n else {\n chipWrapper.classList.add(classNames.active);\n chipWrapper.setAttribute('aria-selected', 'true');\n }\n this.updateSelectedChips();\n };\n ChipList.prototype.updateSelectedChips = function () {\n var chipListEle = this.element.querySelectorAll('.e-chip');\n var chipCollIndex = [];\n var chipCollValue = [];\n var chip = null;\n var value = null;\n for (var i = 0; i < chipListEle.length; i++) {\n var selectedEle = this.element.querySelectorAll('.e-chip')[i];\n if (selectedEle.getAttribute('aria-selected') === 'true') {\n value = selectedEle.getAttribute('data-value');\n if (this.selection === 'Single' && selectedEle.classList.contains('e-active')) {\n chip = value ? value : i;\n break;\n }\n else {\n chip = value ? chipCollValue.push(value) : chipCollIndex.push(i);\n }\n }\n }\n this.setProperties({ selectedChips: this.selection === 'Single' ? chip : value ? chipCollValue : chipCollIndex }, true);\n };\n ChipList.prototype.deleteHandler = function (chipWrapper, index) {\n // Used to store the deleted chip item details.\n var deletedChipData = this.find(chipWrapper);\n this.chips.splice(index, 1);\n this.setProperties({ chips: this.chips }, true);\n detach(chipWrapper);\n this.trigger('deleted', deletedChipData);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.\n * {% codeBlock src='chips/destroy/index.md' %}{% endcodeBlock %}\n *\n * @returns {void}\n */\n ChipList.prototype.destroy = function () {\n removeClass([this.element], [classNames.chipSet, classNames.chip, classNames.rtl,\n classNames.multiSelection, classNames.singleSelection, classNames.disabled, classNames.chipWrapper, classNames.iconWrapper,\n classNames.active, classNames.focused].concat(this.cssClass ? this.cssClass.toString().split(' ').filter(function (css) { return css; }) : []));\n this.removeMultipleAttributes(['tabindex', 'role', 'aria-label', 'aria-multiselectable'], this.element);\n this.wireEvent(true);\n this.rippleFunction();\n _super.prototype.destroy.call(this);\n this.element.innerHTML = '';\n this.element.innerText = this.innerText;\n };\n ChipList.prototype.removeMultipleAttributes = function (attributes, element) {\n attributes.forEach(function (attr) {\n element.removeAttribute(attr);\n });\n };\n ChipList.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n ChipList.prototype.getModuleName = function () {\n return 'chip-list';\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @returns void\n * @private\n */\n ChipList.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'chips':\n case 'text':\n case 'avatarText':\n case 'avatarIconCss':\n case 'leadingIconCss':\n case 'trailingIconCss':\n case 'selection':\n case 'enableDelete':\n case 'enabled':\n this.refresh();\n break;\n case 'cssClass':\n if (!this.chipType()) {\n removeClass([this.element], oldProp.cssClass.toString().split(' ').filter(function (css) { return css; }));\n addClass([this.element], newProp.cssClass.toString().split(' ').filter(function (css) { return css; }));\n }\n else {\n this.refresh();\n }\n break;\n case 'selectedChips':\n removeClass(this.element.querySelectorAll('.e-active'), 'e-active');\n if (this.selection === 'Multiple') {\n this.multiSelectedChip = [];\n this.multiSelection(newProp.selectedChips);\n this.onSelect(this.multiSelectedChip, true);\n this.updateSelectedChips();\n }\n else {\n this.onSelect(newProp.selectedChips, true);\n }\n break;\n case 'enableRtl':\n this.setRtl();\n break;\n }\n }\n };\n __decorate([\n Property([])\n ], ChipList.prototype, \"chips\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"avatarText\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"avatarIconCss\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"leadingIconCss\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"trailingIconCss\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"leadingIconUrl\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"trailingIconUrl\", void 0);\n __decorate([\n Property('')\n ], ChipList.prototype, \"cssClass\", void 0);\n __decorate([\n Property(true)\n ], ChipList.prototype, \"enabled\", void 0);\n __decorate([\n Property([])\n ], ChipList.prototype, \"selectedChips\", void 0);\n __decorate([\n Property('None')\n ], ChipList.prototype, \"selection\", void 0);\n __decorate([\n Property(false)\n ], ChipList.prototype, \"enableDelete\", void 0);\n __decorate([\n Event()\n ], ChipList.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], ChipList.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], ChipList.prototype, \"beforeClick\", void 0);\n __decorate([\n Event()\n ], ChipList.prototype, \"delete\", void 0);\n __decorate([\n Event()\n ], ChipList.prototype, \"deleted\", void 0);\n ChipList = __decorate([\n NotifyPropertyChanges\n ], ChipList);\n return ChipList;\n}(Component));\nexport { ChipList };\n","/**\n * Represents ChipList `Chip` model class.\n */\nvar Chip = /** @class */ (function () {\n function Chip() {\n }\n return Chip;\n}());\nexport { Chip };\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///